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