Add new "middle-out" order prop option to `OuiPaletteColorBlind'

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Update next light theme primary color to #07827E ([#981](https://github.com/opensearch-project/oui/pull/981))
 - Add dismissible prop to OuiCallOut ([#985](https://github.com/opensearch-project/oui/pull/985))
 - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004))
+- Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856))
 
 ### 🐛 Bug Fixes
 

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

@@ -37,6 +37,16 @@ const customPalettes = [
     palette: ouiPaletteColorBlind({ rotations: 2 }),
     code: 'ouiPaletteColorBlind({rotations: 2})',
   },
+  {
+    title: 'Lots of colors, with the extremes last',
+    palette: ouiPaletteColorBlind({
+      rotations: 9,
+      direction: 'both',
+      order: 'middle-out',
+    }),
+    code:
+      "ouiPaletteColorBlind({ rotations: 9, direction: 'both', order: 'middle-out' })",
+  },
   {
     title:
       'Series may have multiple metrics and so the colors must coordinate but be distinguishable',

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

@@ -21,9 +21,9 @@ export const qualitativePropsInfo = {
         },
         order: {
           description:
-            'Order similar colors as `group`s or just `append` each variation',
+            'Order similar colors as `group`s, just `append` each variation (from dark to light), or append from the `middle-out`',
           required: false,
-          type: { name: "'append' | 'group'" },
+          type: { name: "'append' | 'group' | 'middle-out'" },
           defaultValue: { value: "'append'" },
         },
         direction: {

src/services/color/oui_palettes.ts

@@ -60,7 +60,7 @@ export interface OuiPaletteColorBlindProps {
   /**
    * Order similar colors as `group`s or just `append` each variation
    */
-  order?: 'append' | 'group';
+  order?: 'append' | 'group' | 'middle-out';
   /**
    * Specifies if the direction of the color variations
    */
@@ -134,6 +134,24 @@ export const ouiPaletteColorBlind = ({
         colors.push(...rotation);
       }
     }
+
+    // start with the appended order, then pick from both ends
+    if (order === 'middle-out') {
+      const shadePalettes = [];
+      while (colors.length) {
+        shadePalettes.push(colors.splice(0, base.length));
+      }
+      while (shadePalettes.length) {
+        const firstPalette = shadePalettes.shift();
+        if (firstPalette) {
+          colors.unshift(...firstPalette);
+        }
+        const lastPalette = shadePalettes.pop();
+        if (lastPalette) {
+          colors.unshift(...lastPalette);
+        }
+      }
+    }
   } else {
     colors = base;
   }