Use culturally inclusive palette names (#7570)

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>

changelogs/upcoming/7570.md

@@ -0,0 +1,3 @@
+**Deprecations**
+
+- Deprecated `euiPalettePositive` and `euiPaletteNegative` in favour of a more culturally inclusive `euiPaletteGreen` and `euiPaletteRed`

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,

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,

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();
   }

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<number, string> = {
     '-10': spectrum[0],
     '0': spectrum[1],

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,

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();

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
           </p>
 
           <EuiCodeBlock language="javascript" isCopyable fontSize="s">
-            {`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{' '}
             <strong>trends</strong>, 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.
           </p>
           <p>
             Whan signifying quantities, group values into intervals instead of a

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,

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);

src/services/color/index.ts

@@ -31,6 +31,8 @@ export {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteComplementary,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPaletteNegative,
   euiPalettePositive,
   euiPaletteCool,

src/services/index.ts

@@ -38,8 +38,10 @@ export {
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteGray,
-  euiPaletteNegative,
+  euiPaletteRed,
+  euiPaletteGreen,
   euiPalettePositive,
+  euiPaletteNegative,
   euiPaletteWarm,
   getSteppedGradient,
   hexToHsv,