[Deprecation Schedule] Remove deprecated palette functions (elastic#9296)

weronikaolejniczak · weronikaolejniczak · commit f27519266e87 · 2026-01-23T14:57:45.000+01:00
diff --git a/packages/eui/changelogs/upcoming/9296.md b/packages/eui/changelogs/upcoming/9296.md
@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead.
diff --git a/packages/eui/src/services/color/eui_palettes.test.ts b/packages/eui/src/services/color/eui_palettes.test.ts
@@ -13,8 +13,6 @@ import {
   euiPaletteColorBlindBehindText,
   euiPaletteComplementary,
   euiPaletteCool,
-  euiPaletteForDarkBackground,
-  euiPaletteForLightBackground,
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteGray,
@@ -59,38 +57,6 @@ describe('euiPaletteColorBlindBehindText', () => {
   });
 });
 
-describe('euiPaletteForLightBackground', () => {
-  it('should return custom colors', () => {
-    const customColor = '#00ff00';
-    const colors = {
-      ...colorVis,
-      euiColorVisText0: customColor,
-    };
-
-    const result = euiPaletteForLightBackground({
-      colors,
-    });
-
-    expect(result[0]).toEqual(customColor);
-  });
-});
-
-describe('euiPaletteForDarkBackground', () => {
-  it('should return custom colors', () => {
-    const customColor = '#00ff00';
-    const colors = {
-      ...colorVis,
-      euiColorVisText0: customColor,
-    };
-
-    const result = euiPaletteForDarkBackground({
-      colors,
-    });
-
-    expect(result[0]).toEqual(customColor);
-  });
-});
-
 describe('euiPaletteForStatus', () => {
   it('should return correct colors', () => {
     const colors = colorVis;
diff --git a/packages/eui/src/services/color/eui_palettes.ts b/packages/eui/src/services/color/eui_palettes.ts
@@ -162,50 +162,6 @@ export const euiPaletteColorBlindBehindText = (
   return originalPalette;
 };
 
-const _getVisColorsAsText = (
-  visColors: _EuiThemeVisColors,
-  keys: Array<keyof _EuiThemeVisColors>
-) =>
-  keys.reduce((colors, curr) => {
-    return [...colors, visColors[curr]];
-  }, [] as EuiPalette);
-
-/**
- * @deprecated - use `euiColorVisText{NUMBER}` tokens directly
- *
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
-export const euiPaletteForLightBackground = function ({
-  colors,
-}: EuiPaletteCommonProps = {}): EuiPalette {
-  const visColors = colors ?? EUI_VIS_COLOR_STORE.visColors;
-
-  const visColorsAsTextKeys = Object.keys(visColors).filter((color) =>
-    color.includes('euiColorVisText')
-  ) as Array<keyof typeof visColors>;
-
-  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
-};
-
-/**
- * @deprecated - use `euiColorVisText{NUMBER}` tokens directly
- *
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
-export const euiPaletteForDarkBackground = function ({
-  colors,
-}: EuiPaletteCommonProps = {}): EuiPalette {
-  const visColors = colors ?? EUI_VIS_COLOR_STORE.visColors;
-
-  const visColorsAsTextKeys = Object.keys(visColors).filter((color) =>
-    color.includes('euiColorVisText')
-  ) as Array<keyof typeof visColors>;
-
-  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
-};
-
 /**
  * For usage in React use the `useEuiPaletteForStatus` hook instead.
  *
diff --git a/packages/eui/src/services/color/index.ts b/packages/eui/src/services/color/index.ts
@@ -25,8 +25,6 @@ export {
 export { EUI_VIS_COLOR_STORE } from './vis_color_store';
 export { colorPalette } from './color_palette';
 export {
-  euiPaletteForLightBackground,
-  euiPaletteForDarkBackground,
   euiPaletteColorBlind,
   euiPaletteColorBlindBehindText,
   euiPaletteForStatus,
diff --git a/packages/eui/src/services/index.ts b/packages/eui/src/services/index.ts
@@ -33,8 +33,6 @@ export {
   euiPaletteColorBlindBehindText,
   euiPaletteComplementary,
   euiPaletteCool,
-  euiPaletteForDarkBackground,
-  euiPaletteForLightBackground,
   euiPaletteForStatus,
   euiPaletteForTemperature,
   euiPaletteGray,
diff --git a/packages/website/docs/dataviz/sizing.mdx b/packages/website/docs/dataviz/sizing.mdx
@@ -61,8 +61,6 @@ import { useChartBaseTheme } from './use_chart_base_theme';
     EuiIcon,
     EuiSpacer,
     EuiText,
-    euiPaletteForDarkBackground,
-    euiPaletteForLightBackground,
     useEuiTheme,
   } from '@elastic/eui';
   import {
@@ -116,8 +114,7 @@ import { useChartBaseTheme } from './use_chart_base_theme';
 
   export default () => {
     const chartBaseTheme = useChartBaseTheme();
-    const { colorMode } = useEuiTheme();
-    const isDarkTheme = colorMode === 'DARK';
+    const { euiTheme } = useEuiTheme();
 
     return (
       <>
@@ -138,11 +135,7 @@ import { useChartBaseTheme } from './use_chart_base_theme';
                     data={TIME_DATA_SMALL}
                     xAccessor={0}
                     yAccessors={[1]}
-                    color={[
-                      isDarkTheme
-                        ? euiPaletteForDarkBackground()[1]
-                        : euiPaletteForLightBackground()[1],
-                    ]}
+                    color={[euiTheme.colors.vis.euiColorVisText1]}
                   />
                 </Chart>
               </EuiStat>
@@ -169,11 +162,7 @@ import { useChartBaseTheme } from './use_chart_base_theme';
                     data={TIME_DATA_SMALL}
                     xAccessor={0}
                     yAccessors={[1]}
-                    color={[
-                      isDarkTheme
-                        ? euiPaletteForDarkBackground()[1]
-                        : euiPaletteForLightBackground()[1],
-                    ]}
+                    color={[euiTheme.colors.vis.euiColorVisText1]}
                   />
                 </Chart>
                 <EuiSpacer size="s" />
@@ -208,11 +197,7 @@ import { useChartBaseTheme } from './use_chart_base_theme';
                     data={TIME_DATA_MAJOR}
                     xAccessor={0}
                     yAccessors={[1]}
-                    color={[
-                      isDarkTheme
-                        ? euiPaletteForDarkBackground()[3]
-                        : euiPaletteForLightBackground()[3],
-                    ]}
+                    color={[euiTheme.colors.vis.euiColorVisText3]}
                   />
                 </Chart>
               </EuiStat>
@@ -239,11 +224,7 @@ import { useChartBaseTheme } from './use_chart_base_theme';
                     data={TIME_DATA_SMALL_REVERSE}
                     xAccessor={0}
                     yAccessors={[1]}
-                    color={[
-                      isDarkTheme
-                        ? euiPaletteForDarkBackground()[3]
-                        : euiPaletteForLightBackground()[3],
-                    ]}
+                    color={[euiTheme.colors.vis.euiColorVisText3]}
                   />
                 </Chart>
                 <EuiSpacer size="s" />

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+Breaking changes`
	`2`	`+`
	`3`	+- Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead.