[DO NOT MERGE] Spike: Update color functions

packages/eui/src-docs/src/components/with_theme/theme_context.tsx

@@ -32,7 +32,7 @@ const defaultState = {
   themeLanguage: THEME_LANGS[0],
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   changeThemeLanguage: (language: THEME_LANGUAGES['id']) => {},
-  theme: THEME_NAMES[0],
+  theme: THEME_NAMES[2],
   changeTheme: (themeValue: EUI_THEME['value']) => {
     applyTheme(themeValue);
   },

packages/eui/src-docs/src/index.js

@@ -19,6 +19,8 @@ import { ThemeProvider } from './components/with_theme/theme_context';
 
 registerTheme('light', [themeLight]);
 registerTheme('dark', [themeDark]);
+registerTheme('new_light', [themeLight]);
+registerTheme('new_dark', [themeDark]);
 
 // Set up app
 

packages/eui/src-docs/src/views/app_context.js

@@ -36,6 +36,12 @@ export const AppContext = ({ children }) => {
   const { theme } = useContext(ThemeContext);
   const locale = useSelector((state) => getLocale(state));
 
+  // NOTE: temp. override solution
+  // TODO: remove once not needed for testing
+  const overrides = JSON.parse(
+    localStorage.getItem('eui-theme-overrides') || '{}'
+  );
+
   const mappingFuncs = {
     'en-xa': translateUsingPseudoLocale,
   };
@@ -57,6 +63,7 @@ export const AppContext = ({ children }) => {
       }}
       theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
       colorMode={theme.includes('light') ? 'light' : 'dark'}
+      modify={overrides}
     >
       <Helmet>
         <link

packages/eui/src-docs/src/views/elastic_charts/theming.tsx

@@ -74,7 +74,13 @@ export default () => {
             },
           },
         ]
-      : [];
+      : [
+          {
+            colors: {
+              vizColors: paletteData.euiPaletteColorBlind(),
+            },
+          },
+        ];
 
   return (
     <>

packages/eui/src/components/button/button.tsx

@@ -18,10 +18,12 @@ import {
 
 import {
   BUTTON_COLORS,
-  useEuiButtonColorCSS,
+  useEuiButtonColorCSS as useEuiButtonColorCSSCurrentTheme,
   useEuiButtonFocusCSS,
   _EuiButtonColor,
 } from '../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS as useEuiButtonColorCSSNewTheme } from '../../themes/new_theme/global_styling/mixins/button';
+import { isNewTheme } from '../../themes/flags';
 import {
   EuiButtonDisplay,
   EuiButtonDisplayCommonProps,
@@ -98,6 +100,10 @@ export const EuiButton: FunctionComponent<Props> = ({
     isLoading: rest.isLoading,
   });
 
+  const useEuiButtonColorCSS = isNewTheme()
+    ? useEuiButtonColorCSSNewTheme
+    : useEuiButtonColorCSSCurrentTheme;
+
   const buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base',
   })[isDisabled ? 'disabled' : color];

packages/eui/src/components/provider/provider.tsx

@@ -22,7 +22,7 @@ import {
   EuiGlobalStylesProps,
 } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
-import { EuiThemeAmsterdam } from '../../themes';
+import { EuiThemeNew } from '../../themes';
 
 import { EuiCacheProvider } from './cache';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
@@ -84,7 +84,7 @@ export interface EuiProviderProps<T>
 
 export const EuiProvider = <T extends {} = {}>({
   cache = fallbackCache,
-  theme = EuiThemeAmsterdam,
+  theme = EuiThemeNew,
   globalStyles: Globals = EuiGlobalStyles,
   utilityClasses: Utilities = EuiUtilityClasses,
   colorMode,

packages/eui/src/global_styling/mixins/_color.ts

@@ -15,6 +15,11 @@ import {
   UseEuiTheme,
   useEuiMemoizedStyles,
 } from '../../services';
+import { isNewTheme } from '../../themes/flags';
+import {
+  getColorMatrixValue,
+  type _ColorMatrix,
+} from '../../themes/new_theme/global_styling/variables/_color_matrix';
 
 export const BACKGROUND_COLORS = [
   'transparent',
@@ -57,6 +62,17 @@ export const euiBackgroundColor = (
       return transparentize(euiTheme.colors[color], 0.1);
     }
   } else {
+    if (isNewTheme()) {
+      switch (color) {
+        case 'plain':
+          return euiTheme.colors.emptyShade;
+        default:
+          return colorMode === 'DARK'
+            ? getMatrixBackgroundColor(color, 130)
+            : getMatrixBackgroundColor(color, 10);
+      }
+    }
+
     function tintOrShade(color: string) {
       return colorMode === 'DARK' ? shade(color, 0.8) : tint(color, 0.9);
     }
@@ -72,6 +88,23 @@ export const euiBackgroundColor = (
   }
 };
 
+const BACKGROUND_COLOR_TO_MATRIX_COLOR_MAP: Record<string, keyof _ColorMatrix> =
+  {
+    primary: 'blue',
+    accent: 'pink',
+    success: 'teal',
+    warning: 'yellow',
+    danger: 'red',
+    subdued: 'blueGrey',
+  };
+
+const getMatrixBackgroundColor = (color: string, shade: number) => {
+  return getColorMatrixValue(
+    BACKGROUND_COLOR_TO_MATRIX_COLOR_MAP[color],
+    shade
+  );
+};
+
 /**
  * @returns An object map of color keys to color values, categorized by
  * opaque (default) vs transparency (hover/focus states) methods.

packages/eui/src/services/color/contrast.ts

@@ -58,9 +58,21 @@ Background: ${background}`
 
     while (contrast < ratio) {
       if (brightness > 50) {
-        highContrastTextColor = shade(highContrastTextColor, 0.05);
+        const newColor = shade(highContrastTextColor, 0.05);
+
+        if (newColor === highContrastTextColor) {
+          return newColor;
+        }
+
+        highContrastTextColor = newColor;
       } else {
-        highContrastTextColor = tint(highContrastTextColor, 0.05);
+        const newColor = tint(highContrastTextColor, 0.05);
+
+        if (newColor === highContrastTextColor) {
+          return newColor;
+        }
+
+        highContrastTextColor = newColor;
       }
 
       contrast = chroma.contrast(highContrastTextColor, background);

packages/eui/src/services/color/eui_palettes.ts

@@ -64,16 +64,16 @@ export const euiPaletteColorBlind = ({
   let colors: string[] = [];
 
   let base = [
-    '#54B399', // 0 green
-    '#6092C0', // 1 blue
-    '#D36086', // 2 dark pink
-    '#9170B8', // 3 purple
-    '#CA8EAE', // 4 light pink
-    '#D6BF57', // 5 yellow
-    '#B9A888', // 6 tan
-    '#DA8B45', // 7 orange
-    '#AA6556', // 8 brown
-    '#E7664C', // 9 red
+    '#00BEB8', // 0 green
+    '#93E5E0', // 1 light green
+    '#599DFF', // 2 blue
+    '#B4D5FF', // 3 light blue
+    '#ED6BA2', // 4 dark pink
+    '#FFBED5', // 5 light pink
+    '#F66D64', // 6 red
+    '#FFC0B8', // 7 tan
+    '#C79700', // 8 brown
+    '#E8D297', // 9 yellow
   ];
 
   if (sortBy === 'natural') {
@@ -134,18 +134,18 @@ export const euiPaletteColorBlindBehindText = (
 };
 
 export const euiPaletteForLightBackground = function (): EuiPalette {
-  return ['#006BB4', '#017D73', '#F5A700', '#BD271E', '#DD0A73'];
+  return ['#007775', '#004FC7', '#A6005E', '#AF000E', '#854D00'];
 };
 
 export const euiPaletteForDarkBackground = function (): EuiPalette {
-  return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A'];
+  return ['#00BEB8', '#599DFF', '#ED6BA2', '#F66D64', '#C79700'];
 };
 
-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]];
+const greenColor: HEX = '#007775';
+const redColor: HEX = '#AF000E';
+const lightRedColor: HEX = euiPaletteColorBlind()[6];
+const coolArray: HEX[] = [euiPaletteColorBlind()[2], '#599DFF'];
+const warmArray: HEX[] = [euiPaletteColorBlind()[7], euiPaletteColorBlind()[6]];
 
 export const euiPaletteForStatus = function (steps: number): EuiPalette {
   if (steps === 1) {
@@ -162,7 +162,7 @@ export const euiPaletteForStatus = function (steps: number): EuiPalette {
     [
       greenColor,
       euiPaletteColorBlind()[0],
-      euiPaletteColorBlind()[5],
+      euiPaletteColorBlind()[9],
       lightRedColor,
       redColor,
     ],
@@ -172,8 +172,8 @@ export const euiPaletteForStatus = function (steps: number): EuiPalette {
 };
 
 export const euiPaletteForTemperature = function (steps: number): EuiPalette {
-  const cools = colorPalette([...coolArray.slice().reverse(), '#EBEFF5'], 3);
-  const warms = colorPalette(['#F4F3DB', ...warmArray], 3);
+  const cools = colorPalette([...coolArray.slice().reverse(), '#F1F9FF'], 3);
+  const warms = colorPalette(['#FFF4F1', ...warmArray], 3);
 
   if (steps === 1) {
     return [cools[0]];
@@ -186,11 +186,11 @@ export const euiPaletteForTemperature = function (steps: number): EuiPalette {
 
 export const euiPaletteComplementary = function (steps: number): EuiPalette {
   if (steps === 1) {
-    return [euiPaletteColorBlind()[1]];
+    return [euiPaletteColorBlind()[2]];
   }
 
   return euiPalette(
-    [euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]],
+    [euiPaletteColorBlind()[2], euiPaletteColorBlind()[8]],
     steps,
     true
   );
@@ -225,16 +225,16 @@ export const euiPaletteWarm = function (steps: number): EuiPalette {
     return [lightRedColor];
   }
 
-  return euiPalette(['#FBFBDC', ...warmArray], steps);
+  return euiPalette(['#FFF4F1', ...warmArray], steps);
 };
 
 export const euiPaletteGray = function (steps: number): EuiPalette {
   if (steps === 1) {
-    return ['#98a2b3'];
+    return ['#B1C3DE'];
   }
 
   return euiPalette(
-    ['white', '#d3dae6', '#98a2b3', '#69707d', '#343741'],
+    ['white', '#F5F9FF', '#DEE7F4', '#C7D5E9', '#B1C3DE', '#9CB1D3', '#86A0C8'],
     steps,
     false
   );

packages/eui/src/services/color/manipulation.ts

@@ -7,9 +7,42 @@
  */
 
 import chroma, { Color } from 'chroma-js';
+import {
+  COLOR_MATRIX_MAP,
+  COLOR_SHADES_COUNT,
+  getColorMatrixValue,
+} from '../../themes/new_theme/global_styling/variables/_color_matrix';
 import { EuiThemeColorModeStandard } from '../theme';
+import { isNewTheme } from '../../themes/flags';
 import { isValidHex } from './is_valid_hex';
 
+const getColorFromMatrix = (
+  color: string,
+  ratio: number,
+  direction: 'lighten' | 'darken'
+) => {
+  const colorData = COLOR_MATRIX_MAP.get(color.toLowerCase());
+
+  if (!colorData) return undefined;
+
+  const { group, shade } = colorData;
+  const hasLargeScale = group === 'blueGrey';
+  const ratioStep = Math.round(ratio * COLOR_SHADES_COUNT) * 10;
+  const step = hasLargeScale ? ratioStep / 2 : ratioStep;
+  const colorShade =
+    direction === 'lighten'
+      ? Math.max(shade - step, 10)
+      : Math.min(shade + step, COLOR_SHADES_COUNT * 10);
+
+  if (shade === colorShade) {
+    return color;
+  }
+
+  const newColor = getColorMatrixValue(group, colorShade);
+
+  return inOriginalFormat(color, chroma(newColor));
+};
+
 const inOriginalFormat = (originalColor: string, newColor: Color) => {
   return isValidHex(originalColor) ? newColor.hex() : newColor.css();
 };
@@ -28,6 +61,12 @@ export const transparentize = (color: string, alpha: number) =>
  * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
  */
 export const tint = (color: string, ratio: number) => {
+  if (isNewTheme()) {
+    const matrixColor = getColorFromMatrix(color, ratio, 'lighten');
+
+    if (matrixColor) return matrixColor;
+  }
+
   const tint = chroma.mix(color, '#fff', ratio, 'rgb');
   return inOriginalFormat(color, tint);
 };
@@ -38,6 +77,12 @@ export const tint = (color: string, ratio: number) => {
  * @param ratio - Mix weight. From 0-1. Larger value indicates more black.
  */
 export const shade = (color: string, ratio: number) => {
+  if (isNewTheme()) {
+    const matrixColor = getColorFromMatrix(color, ratio, 'darken');
+
+    if (matrixColor) return matrixColor;
+  }
+
   const shade = chroma.mix(color, '#000', ratio, 'rgb');
   return inOriginalFormat(color, shade);
 };
@@ -101,13 +146,27 @@ export const lightness = (color: string) => chroma(color).get('hsl.l') * 100;
  * @param color - Color to manipulate
  * @param amount - Amount to change in absolute terms. 0-1.
  */
-export const darken = (color: string, amount: number) =>
-  chroma(color).darken(amount).hex();
+export const darken = (color: string, amount: number) => {
+  if (isNewTheme()) {
+    const matrixColor = getColorFromMatrix(color, amount, 'darken');
+
+    if (matrixColor) return matrixColor;
+  }
+
+  return chroma(color).darken(amount).hex();
+};
 
 /**
  * Returns the brighten value of a color. 0-100
  * @param color - Color to manipulate
  * @param amount - Amount to change in absolute terms. 0-1.
  */
-export const brighten = (color: string, amount: number) =>
+export const brighten = (color: string, amount: number) => {
+  if (isNewTheme()) {
+    const matrixColor = getColorFromMatrix(color, amount, 'lighten');
+
+    if (matrixColor) return matrixColor;
+  }
+
   chroma(color).brighten(amount).hex();
+};