diff --git a/src-docs/src/views/color_palette/color_palette.js b/src-docs/src/views/color_palette/color_palette.js index 49d07adf7a..cdbf847cfc 100644 --- a/src-docs/src/views/color_palette/color_palette.js +++ b/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', diff --git a/src-docs/src/views/color_palette/props_info.js b/src-docs/src/views/color_palette/props_info.js index 456aa26415..fabd10908b 100644 --- a/src-docs/src/views/color_palette/props_info.js +++ b/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: { diff --git a/src/services/color/oui_palettes.ts b/src/services/color/oui_palettes.ts index 10e12c3174..047df0a769 100644 --- a/src/services/color/oui_palettes.ts +++ b/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; }