Lighten slightly more, remove example colors that are too bright (#127)

Signed-off-by: Mike Turley <[email protected]>
migtools · Mar 28, 2023 · c7fdd49 · c7fdd49
1 parent 7efa529
commit c7fdd49
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 34 deletions.
diff --git a/src/components/LabelCustomColor/LabelCustomColor.stories.tsx b/src/components/LabelCustomColor/LabelCustomColor.stories.tsx
@@ -15,39 +15,24 @@ export const LabelCustomColorPicker: React.FC = () => {
   );
 };
 
-// Colors from https://github.com/konveyor/tackle2-hub/blob/main/migration/v3/seed/main.go#L331-L766
+// Colors from https://sashamaps.net/docs/resources/20-colors/ with pink, lavender, beige, mind and apricot removed for being too bright
 const EXAMPLE_COLORS = [
-  '#773CF3',
-  '#74F33C',
-  '#F33CA9',
-  '#3CF342',
-  '#4EF33C',
-  '#F33CE6',
-  '#F3AC3C',
-  '#3CF367',
-  '#F3D23C',
-  '#B43CF3',
-  '#F3493C',
-  '#3C65F3',
-  '#3CF3E1',
-  '#3CF3A4',
-  '#F33C47',
-  '#F36F3C',
-  '#B1F33C',
-  '#F3E93C',
-  '#3C7CF3',
-  '#3C3FF3',
-  '#3CDFF3',
-  '#F33C6C',
-  '#D93CF3',
-  '#3CF37F',
-  '#3CF3CA',
-  '#F33CCF',
-  '#9AF33C',
-  '#F3953C',
-  '#D7F33C',
-  '#3CA2F3',
-  '#9C3CF3',
+  '#E6194B', // Red
+  '#3CB44B', // Green
+  '#FFE119', // Yellow
+  '#4363D8', // Blue
+  '#F58231', // Orange
+  '#911EB4', // Purple
+  '#42D4F4', // Cyan
+  '#F032E6', // Magenta
+  '#BFEF45', // Lime
+  '#469990', // Teal
+  '#9A6324', // Brown
+  '#800000', // Maroon
+  '#808000', // Olive
+  '#000075', // Navy
+  '#A9A9A9', // Grey
+  '#000000', // Black
 ];
 
 export const LabelCustomColorExamples: React.FC = () => (

diff --git a/src/components/LabelCustomColor/LabelCustomColor.tsx b/src/components/LabelCustomColor/LabelCustomColor.tsx
@@ -15,8 +15,8 @@ const globalColorCache: Record<
 export const LabelCustomColor: React.FC<ILabelCustomColorProps> = ({ color, ...props }) => {
   const { borderColor, backgroundColor, textColor } = React.useMemo(() => {
     if (globalColorCache[color]) return globalColorCache[color];
-    // Lighten the background 25%, and lighten it further if necessary until it can support readable text
-    const bgColorObj = tinycolor(color).lighten(25);
+    // Lighten the background 30%, and lighten it further if necessary until it can support readable text
+    const bgColorObj = tinycolor(color).lighten(30);
     const blackTextReadability = () => tinycolor.readability(bgColorObj, '#000000');
     const whiteTextReadability = () => tinycolor.readability(bgColorObj, '#FFFFFF');
     while (blackTextReadability() < 9 && whiteTextReadability() < 9) {