From 2c889031428e1bfb5fed419f471fc06805303b37 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Mar 2024 19:16:04 +0100 Subject: [PATCH] Use culturally inclusive palette names (#7570) Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- changelogs/upcoming/7570.md | 3 ++ .../color_palette_quantitative.js | 8 ++-- .../color_picker/color_palette_display.js | 8 ++-- .../elastic_charts/accessibility_bullet.tsx | 6 +-- src-docs/src/views/elastic_charts/goal.tsx | 4 +- src-docs/src/views/elastic_charts/theming.tsx | 8 ++-- .../elastic_charts/theming_categorical.tsx | 4 +- .../views/elastic_charts/theming_example.js | 7 ++-- .../markdown_editor_with_plugins.js | 8 ++-- src/services/color/eui_palettes.ts | 38 +++++++++++-------- src/services/color/index.ts | 2 + src/services/index.ts | 4 +- 12 files changed, 57 insertions(+), 43 deletions(-) create mode 100644 changelogs/upcoming/7570.md diff --git a/changelogs/upcoming/7570.md b/changelogs/upcoming/7570.md new file mode 100644 index 00000000000..7ad933a7bfa --- /dev/null +++ b/changelogs/upcoming/7570.md @@ -0,0 +1,3 @@ +**Deprecations** + +- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed` \ No newline at end of file diff --git a/src-docs/src/views/color_palette/color_palette_quantitative.js b/src-docs/src/views/color_palette/color_palette_quantitative.js index 79c5be5ba1c..ae5cbdbf513 100644 --- a/src-docs/src/views/color_palette/color_palette_quantitative.js +++ b/src-docs/src/views/color_palette/color_palette_quantitative.js @@ -16,16 +16,16 @@ import { euiPaletteForTemperature, euiPaletteCool, euiPaletteWarm, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteGray, } from '../../../../src/services'; const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src-docs/src/views/color_picker/color_palette_display.js b/src-docs/src/views/color_picker/color_palette_display.js index 12585bd7776..2c168b8b578 100644 --- a/src-docs/src/views/color_picker/color_palette_display.js +++ b/src-docs/src/views/color_picker/color_palette_display.js @@ -4,8 +4,8 @@ import { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, @@ -50,8 +50,8 @@ const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx index 01e386a7b7c..324fc35a4db 100644 --- a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx +++ b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx @@ -3,7 +3,7 @@ import { Chart, Settings, Goal } from '@elastic/charts'; import { EuiSpacer, EuiTitle } from '../../../../src/components'; import { htmlIdGenerator, - euiPalettePositive, + euiPaletteGreen, colorPalette, euiPaletteGray, useEuiTheme, @@ -28,8 +28,8 @@ export default () => { const bandLabels = ['freezing', 'cold', 'brisk', 'warm', 'hot']; const bands = [0, 100, 125, 150, 250]; - let spectrum = euiPalettePositive(5); - // For dark theme, start with the brightest positive color and create a palette that goes to dark gray instead of light + let spectrum = euiPaletteGreen(5); + // For dark theme, start with the brightest green color and create a palette that goes to dark gray instead of light if (isDarkTheme) { spectrum = colorPalette([spectrum[4], euiPaletteGray(5)[4]], 5).reverse(); } diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx index 5edcac5b28f..e3a215253e9 100644 --- a/src-docs/src/views/elastic_charts/goal.tsx +++ b/src-docs/src/views/elastic_charts/goal.tsx @@ -5,7 +5,7 @@ import { htmlIdGenerator, useEuiTheme, useIsWithinBreakpoints, - euiPalettePositive, + euiPaletteGreen, } from '../../../../src/services'; import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex'; @@ -27,7 +27,7 @@ export const GoalChart = () => { const bandLabels = ['', 'freezing', 'cold', 'warm', 'hot']; const bands = [-10, 0, 15, 25, 40]; - const spectrum = euiPalettePositive(5); + const spectrum = euiPaletteGreen(5); const opacityMapHex: Record = { '-10': spectrum[0], '0': spectrum[1], diff --git a/src-docs/src/views/elastic_charts/theming.tsx b/src-docs/src/views/elastic_charts/theming.tsx index 8810a9e814d..3b6da67a52c 100644 --- a/src-docs/src/views/elastic_charts/theming.tsx +++ b/src-docs/src/views/elastic_charts/theming.tsx @@ -28,8 +28,8 @@ import { euiPaletteForTemperature, euiPaletteCool, euiPaletteWarm, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteGray, useEuiTheme, } from '../../../../src/services'; @@ -39,8 +39,8 @@ const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src-docs/src/views/elastic_charts/theming_categorical.tsx b/src-docs/src/views/elastic_charts/theming_categorical.tsx index 8ffef39feb2..ca5f4bdc07c 100644 --- a/src-docs/src/views/elastic_charts/theming_categorical.tsx +++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx @@ -24,7 +24,7 @@ import { import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared'; import { euiPaletteColorBlind, - euiPalettePositive, + euiPaletteGreen, euiPaletteForStatus, euiPaletteGray, useEuiTheme, @@ -118,7 +118,7 @@ export default () => { }; const createQuantityChart = (numCharts: number) => { - const vizColors = euiPalettePositive(numCharts); + const vizColors = euiPaletteGreen(numCharts); // convert series labels to percentages const dg = new DataGenerator(); diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js index 9c48b22e2ad..915b7cdb661 100644 --- a/src-docs/src/views/elastic_charts/theming_example.js +++ b/src-docs/src/views/elastic_charts/theming_example.js @@ -88,11 +88,11 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI

- {`import { euiPalettePositive } from '../../../../src/services'; + {`import { euiPaletteGreen } from '../../../../src/services'; const customColors = { colors: { - vizColors: euiPalettePositive(5), + vizColors: euiPaletteGreen(5), }, }; @@ -134,8 +134,7 @@ const customColors = { a single color that spans from light colors for low amounts to dark colors for high amounts. If the data signifies{' '} trends, use a two-color divergent scheme, with the - darkest colors at the extremes. Remember that red means bad/negative - and green is good/positive. + darkest colors at the extremes.

Whan signifying quantities, group values into intervals instead of a diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js index 77e101a268a..d5cfda19d01 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js @@ -42,8 +42,8 @@ import { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteWarm, } from '../../../../src/services'; import { getDefaultEuiMarkdownUiPlugins } from '../../../../src/components/markdown_editor'; @@ -52,8 +52,8 @@ const paletteData = { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, - euiPaletteNegative, - euiPalettePositive, + euiPaletteRed, + euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray, diff --git a/src/services/color/eui_palettes.ts b/src/services/color/eui_palettes.ts index 7c820e04a35..681584c98c6 100644 --- a/src/services/color/eui_palettes.ts +++ b/src/services/color/eui_palettes.ts @@ -141,30 +141,30 @@ export const euiPaletteForDarkBackground = function (): EuiPalette { return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A']; }; -const positiveColor: HEX = '#209280'; -const negativeColor: HEX = '#CC5642'; -const lightNegativeColor: HEX = euiPaletteColorBlind()[9]; +const greenColor: HEX = '#209280'; +const redColor: HEX = '#CC5642'; +const lightRedColor: HEX = euiPaletteColorBlind()[9]; const coolArray: HEX[] = [euiPaletteColorBlind()[1], '#6092C0']; const warmArray: HEX[] = [euiPaletteColorBlind()[7], euiPaletteColorBlind()[9]]; export const euiPaletteForStatus = function (steps: number): EuiPalette { if (steps === 1) { - return [positiveColor]; + return [greenColor]; } if (steps <= 3) { return euiPalette( - [positiveColor, euiPaletteColorBlind()[5], negativeColor], + [greenColor, euiPaletteColorBlind()[5], redColor], steps, true ); } return euiPalette( [ - positiveColor, + greenColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], - lightNegativeColor, - negativeColor, + lightRedColor, + redColor, ], steps, true @@ -178,7 +178,7 @@ export const euiPaletteForTemperature = function (steps: number): EuiPalette { if (steps === 1) { return [cools[0]]; } else if (steps <= 3) { - return euiPalette([cools[0], lightNegativeColor], steps, true); + return euiPalette([cools[0], lightRedColor], steps, true); } return euiPalette([...cools, ...warms], steps, true); @@ -196,21 +196,29 @@ export const euiPaletteComplementary = function (steps: number): EuiPalette { ); }; -export const euiPaletteNegative = function (steps: number): EuiPalette { +export const euiPaletteRed = function (steps: number): EuiPalette { if (steps === 1) { - return [lightNegativeColor]; + return [lightRedColor]; } - return euiPalette(['white', negativeColor], steps); + return euiPalette(['white', redColor], steps); }; +/** + * @deprecated - use `euiPaletteRed` instead + */ +export const euiPaletteNegative = euiPaletteRed; -export const euiPalettePositive = function (steps: number): EuiPalette { +export const euiPaletteGreen = function (steps: number): EuiPalette { if (steps === 1) { return [euiPaletteColorBlind()[0]]; } - return euiPalette(['white', positiveColor], steps); + return euiPalette(['white', greenColor], steps); }; +/** + * @deprecated - use `euiPaletteGreen` instead + */ +export const euiPalettePositive = euiPaletteGreen; export const euiPaletteCool = function (steps: number): EuiPalette { if (steps === 1) { @@ -222,7 +230,7 @@ export const euiPaletteCool = function (steps: number): EuiPalette { export const euiPaletteWarm = function (steps: number): EuiPalette { if (steps === 1) { - return [lightNegativeColor]; + return [lightRedColor]; } return euiPalette(['#FBFBDC', ...warmArray], steps); diff --git a/src/services/color/index.ts b/src/services/color/index.ts index f071ef59502..803f0f81a46 100644 --- a/src/services/color/index.ts +++ b/src/services/color/index.ts @@ -31,6 +31,8 @@ export { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, + euiPaletteRed, + euiPaletteGreen, euiPaletteNegative, euiPalettePositive, euiPaletteCool, diff --git a/src/services/index.ts b/src/services/index.ts index e8e4ce074cd..4816f7235bf 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -38,8 +38,10 @@ export { euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, - euiPaletteNegative, + euiPaletteRed, + euiPaletteGreen, euiPalettePositive, + euiPaletteNegative, euiPaletteWarm, getSteppedGradient, hexToHsv,