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
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,