Repository: opensearch-project/OpenSearch-Dashboards (TypeScript)

Issue:
[Vis colors] Update legend colors to use ouiPaletteColorBlind()-derived scales
Many OpenSearch Dashboard visualizations provide an interactive legend that provides users with a (non-OUI) color picker to alter the color associated with a particular visualization series. Not only do the available legend colors not match the automatic color palettes in https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4320, but they also don't use OUI categorical colors: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts#L38-L95

The way we'll fix this is to use the base categorical colors defined in `ouiPaletteColorBlind()` and `colorPalette()` to generate a new set of legend colors.

Note that this legend functionality is unique to VisLib visualization types.



Fix (patch):
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4a160ccb9bc..b04ae7db4682 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -82,6 +82,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Replace the use of `bluebird` in `saved_objects` plugin ([#4026](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4026))
 - Relocate tutorials imagery into `src/plugins/home/public/assets/tutorials/logos` ([#4382](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4382))
 - [VisBuilder] Use OUI icon ([#4446](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4446))
+- [Vis Colors] [VisLib] Update legend colors to use OUI color palette ([#4365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4365))
 - [Vis Colors] [Region Maps] Replace hardcode color to OUI color in `region_map` plugin ([#4299](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4299))
 - [Vis Colors] Replace color maps with OUI color palettes ([#4293](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4293))
 - [Vis Colors] [Maps] Replace hardcoded color to OUI color in `maps_legacy` plugin ([#4294](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4294))
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
index f5b93730fb75..c114c07f17b9 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/_legend.scss
@@ -84,7 +84,7 @@ $visLegendLineHeight: $euiSize;
 }
 
 .visLegend__valueColorPicker {
-  width: ($euiSizeL * 8); // 8 columns
+  width: ($euiSizeL * 10); // 10 columns
 }
 
 .visLegend__valueColorPickerDot {
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
index f6e79b74841c..b228f32c7596 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
@@ -42,9 +42,14 @@ import {
   EuiPopoverProps,
   EuiButtonGroup,
   EuiButtonGroupOptionProps,
+  euiPaletteColorBlind,
 } from '@elastic/eui';
 
-import { legendColors, LegendItem } from './models';
+import { LegendItem } from './models';
+
+// starting from the default categorical colors, we generate 6 additional variants,
+// 3 lighter and 3 darker
+export const legendColors = euiPaletteColorBlind({ rotations: 7, direction: 'both' });
 
 interface Props {
   item: LegendItem;
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts b/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts
index 1d86703b5c38..48a0cfc9b2af 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/models.ts
@@ -34,62 +34,3 @@ export interface LegendItem {
 }
 
 export const CUSTOM_LEGEND_VIS_TYPES = ['heatmap', 'gauge'];
-
-export const legendColors: string[] = [
-  '#3F6833',
-  '#967302',
-  '#2F575E',
-  '#99440A',
-  '#58140C',
-  '#052B51',
-  '#511749',
-  '#3F2B5B', // 6
-  '#508642',
-  '#CCA300',
-  '#447EBC',
-  '#C15C17',
-  '#890F02',
-  '#0A437C',
-  '#6D1F62',
-  '#584477', // 2
-  '#629E51',
-  '#E5AC0E',
-  '#64B0C8',
-  '#E0752D',
-  '#BF1B00',
-  '#0A50A1',
-  '#962D82',
-  '#614D93', // 4
-  '#7EB26D',
-  '#EAB839',
-  '#6ED0E0',
-  '#EF843C',
-  '#E24D42',
-  '#1F78C1',
-  '#BA43A9',
-  '#705DA0', // Normal
-  '#9AC48A',
-  '#F2C96D',
-  '#65C5DB',
-  '#F9934E',
-  '#EA6460',
-  '#5195CE',
-  '#D683CE',
-  '#806EB7', // 5
-  '#B7DBAB',
-  '#F4D598',
-  '#70DBED',
-  '#F9BA8F',
-  '#F29191',
-  '#82B5D8',
-  '#E5A8E2',
-  '#AEA2E0', // 3
-  '#E0F9D7',
-  '#FCEACA',
-  '#CFFAFF',
-  '#F9E2D2',
-  '#FCE2DE',
-  '#BADFF4',
-  '#F9D9F9',
-  '#DEDAF7', // 7
-];