Allowing euiPaletteColorBlind() function to have both light AND dark alternates

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added `rowHeader` prop to `EuiBasicTable` to allow consumers to set the identifying cell in a row ([#2802](https://github.com/elastic/eui/pull/2802))
 - Improved `EuiDescribedFormGroup` accessibility by avoiding duplicated output in screen readers ([#2783](https://github.com/elastic/eui/pull/2783))
 - Added optional `key` attribute to `EuiContextMenu` items and relaxed `name` attribute to allow any React node ([#2817](https://github.com/elastic/eui/pull/2817))
+- Added `direction` parameter to `euiPaletteColorBlind()` for specifiying lighter or darker (or both) alternates ([#2822](https://github.com/elastic/eui/pull/2822))
 
 **Bug fixes**
 

src-docs/src/views/color_palette/color_palette.js

@@ -19,21 +19,24 @@ const customPalettes = [
   {
     title: 'Max 10 colors',
     palette: euiPaletteColorBlind(),
+    code: 'euiPaletteColorBlind()',
   },
   {
     title: 'More than 10 colors are needed',
     palette: euiPaletteColorBlind(2),
+    code: 'euiPaletteColorBlind(2)',
   },
   {
     title:
-      'Series have multiple metrics and so the colors must coordinate but be distinguishable',
-    palette: euiPaletteColorBlind(3, 'group'),
+      'Series may have multiple metrics and so the colors must coordinate but be distinguishable',
+    palette: euiPaletteColorBlind(3, 'group', 'both'),
+    code: "euiPaletteColorBlind(3, 'group', 'both')",
   },
 ];
 
 export default () => (
   <Fragment>
-    {customPalettes.map((palette, i) => (
+    {customPalettes.map(palette => (
       <Fragment key={palette.title}>
         <EuiTitle size="xxs">
           <h3>{palette.title}</h3>
@@ -57,14 +60,7 @@ export default () => (
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
-            <ColorPaletteCopyCode
-              textToCopy={`euiPaletteColorBlind(${i > 0 ? i + 1 : ''}${
-                i > 1 ? ", 'group'" : ''
-              })`}
-              code={`euiPaletteColorBlind(${i > 0 ? i + 1 : ''}${
-                i > 1 ? ", 'group'" : ''
-              })`}
-            />
+            <ColorPaletteCopyCode code={palette.code} />
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="xl" />

src-docs/src/views/color_palette/color_palette_example.js

@@ -4,6 +4,7 @@ import { Link } from 'react-router';
 import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
+import { qualitativePropsInfo, palettePropsInfo } from './props_info';
 
 import {
   EuiCode,
@@ -74,7 +75,11 @@ export const ColorPaletteExample = {
         </div>
       ),
       demo: <ColorPalette />,
-      snippet: ['euiPaletteColorBlind()', "euiPaletteColorBlind(3, 'group')"],
+      snippet: [
+        'euiPaletteColorBlind()',
+        "euiPaletteColorBlind(3, 'group', 'both)",
+      ],
+      props: qualitativePropsInfo,
     },
     {
       title: 'Recommended quantitative palettes',
@@ -139,6 +144,7 @@ export const ColorPaletteExample = {
         "colorPalette(['#fff'. '#000'], 11);",
         "colorPalette(['#fff'. '#000'], 11, divergent = true);",
       ],
+      props: palettePropsInfo,
     },
   ],
 };

src-docs/src/views/color_palette/props_info.js

@@ -0,0 +1,61 @@
+export const qualitativePropsInfo = {
+  euiPaletteColorBlind: {
+    __docgenInfo: {
+      props: {
+        rotations: {
+          description: 'How many variations of the series is needed',
+          required: false,
+          type: { name: 'number' },
+          defaultValue: { value: '1' },
+        },
+        order: {
+          description:
+            'Order similar colors as `group`s or just `append` each variation',
+          required: false,
+          type: { name: "'append' | 'group'" },
+          defaultValue: { value: "'append'" },
+        },
+        direction: {
+          description: 'Specifies if the direction of the color variations',
+          required: false,
+          type: { name: "'lighter' | 'darker' | 'both'" },
+          defaultValue: { value: "'lighter'" },
+        },
+      },
+    },
+  },
+};
+
+export const palettePropsInfo = {
+  colorPalette: {
+    __docgenInfo: {
+      props: {
+        colors: {
+          description: 'The main color code or array of codes',
+          required: true,
+          type: { name: 'string[]' },
+        },
+        len: {
+          description: 'The number of colors in the resulting array',
+          required: false,
+          type: { name: 'number' },
+          defaultValue: { value: '10' },
+        },
+        diverging: {
+          description:
+            'Forces color interpolation to be calculated separately for each half',
+          required: false,
+          type: { name: 'boolean' },
+          defaultValue: { value: 'false' },
+        },
+        categorical: {
+          description:
+            'Uses a more static interpolation for non-continuous spectrums',
+          required: false,
+          type: { name: 'boolean' },
+          defaultValue: { value: 'false' },
+        },
+      },
+    },
+  },
+};

src-docs/src/views/color_palette/shared.js

@@ -25,7 +25,7 @@ export const ColorPaletteCopyCode = ({ textToCopy, code }) => {
     <span>
       <EuiCopy
         beforeMessage="Click to copy palette config"
-        textToCopy={textToCopy}>
+        textToCopy={textToCopy || code}>
         {copy => (
           <EuiLink onClick={copy}>
             <EuiCode>{code}</EuiCode>

src/services/color/color_palette.ts

@@ -10,15 +10,15 @@ export const MID_COLOR_STOP = '#EBEFF5';
 
 export function colorPalette(
   /**
-   * The beginning hexadecimal color code or array of codes
+   * The main color code or array of codes
    */
   colors: string[],
   /**
    * The number of colors in the resulting array (default 10)
    */
   len: number = 10,
   /**
-   * Forces color interpolation to be calculated separately for each side (default false)
+   * Forces color interpolation to be calculated separately for each half (default false)
    */
   diverging: boolean = false,
   /**

src/services/color/eui_palettes.ts

@@ -8,16 +8,17 @@ export type EuiPalette = string[];
 const euiPalette = function(
   colors: string[],
   steps: number,
-  diverge: boolean = false
+  diverge: boolean = false,
+  categorical: boolean = true
 ): EuiPalette {
-  // This function also trims the lightest color so white is never a color
+  // This function also trims the first color so white/black is never a color
   if (!diverge && steps > 1) {
     const palette = colorPalette(colors, steps + 1);
     palette.shift();
     return palette;
   }
 
-  return colorPalette(colors, steps, diverge);
+  return colorPalette(colors, steps, diverge, categorical);
 };
 
 export const euiPaletteColorBlind = function(
@@ -28,7 +29,11 @@ export const euiPaletteColorBlind = function(
   /**
    * Order similar colors as `group`s or just `append` each variation
    */
-  order: 'append' | 'group' = 'append'
+  order: 'append' | 'group' = 'append',
+  /**
+   * Specifies if the direction of the color variations
+   */
+  direction: 'lighter' | 'darker' | 'both' = 'lighter'
 ): EuiPalette {
   let colors: string[] = [];
 
@@ -46,9 +51,22 @@ export const euiPaletteColorBlind = function(
   ];
 
   if (rotations > 1) {
-    const palettes = base.map(color =>
-      euiPalette(['white', color], rotations).reverse()
-    );
+    const palettes = base.map(color => {
+      // Create the darkest and lightest versions of each color using black and white
+      const palette = colorPalette(['black', color, 'white'], 5, false, true);
+      // Then removing the extremes
+      palette.pop();
+      palette.shift();
+
+      switch (direction) {
+        case 'lighter':
+          return colorPalette([palette[1], palette[2]], rotations, false, true);
+        case 'darker':
+          return colorPalette([palette[1], palette[0]], rotations, false, true);
+        case 'both':
+          return colorPalette(palette, rotations, false, true);
+      }
+    });
 
     if (order === 'group') {
       colors = flatten(palettes);