[HCM] Add high contrast mode overrides for data visualization and severity color tokens

packages/eui-theme-borealis/changelogs/upcoming/8800.md

@@ -0,0 +1,2 @@
+- Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode
+

packages/eui-theme-borealis/src/variables/_overrides.ts

@@ -7,13 +7,20 @@
  */
 
 import { _EuiThemeOverrides } from '@elastic/eui-theme-common';
+
 import { PRIMITIVE_COLORS } from './colors/_primitive_colors';
+import { visColorsLightHighContrast } from './colors/_colors_vis_hcm';
+import { severityColorsLightHighContrast } from './colors/_colors_severity_hcm';
 
 export const overrides: _EuiThemeOverrides = {
   HCM: {
     colors: {
       ink: PRIMITIVE_COLORS.black,
       ghost: PRIMITIVE_COLORS.white,
+      LIGHT: {
+        vis: visColorsLightHighContrast,
+        severity: severityColorsLightHighContrast,
+      },
     },
   },
 };

packages/eui-theme-borealis/src/variables/colors/_colors_severity_hcm.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { SEMANTIC_COLORS } from './_semantic_colors';
+
+export const severityColorsLightHighContrast = {
+  unknown: SEMANTIC_COLORS.shade70,
+  neutral: SEMANTIC_COLORS.neutral70,
+  success: SEMANTIC_COLORS.success80,
+  warning: SEMANTIC_COLORS.warning80,
+  risk: SEMANTIC_COLORS.risk70,
+  danger: SEMANTIC_COLORS.danger70,
+};

packages/eui-theme-borealis/src/variables/colors/_colors_vis_hcm.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
+
+import { SEMANTIC_COLORS } from './_semantic_colors';
+import { PRIMITIVE_COLORS } from './_primitive_colors';
+
+const baseColorVis = {
+  euiColorVis0: SEMANTIC_COLORS.accentSecondary110,
+  euiColorVis1: SEMANTIC_COLORS.accentSecondary80,
+  euiColorVis2: SEMANTIC_COLORS.primary110,
+  euiColorVis3: SEMANTIC_COLORS.primary80,
+  euiColorVis4: SEMANTIC_COLORS.accent110,
+  euiColorVis5: SEMANTIC_COLORS.accent80,
+  euiColorVis6: SEMANTIC_COLORS.danger110,
+  euiColorVis7: SEMANTIC_COLORS.danger80,
+  euiColorVis8: SEMANTIC_COLORS.warning110,
+  euiColorVis9: SEMANTIC_COLORS.warning80,
+};
+
+export const visColorsLightHighContrast: _EuiThemeVisColors = {
+  ...baseColorVis,
+
+  euiColorVisBehindText0: baseColorVis.euiColorVis0,
+  euiColorVisBehindText1: baseColorVis.euiColorVis1,
+  euiColorVisBehindText2: baseColorVis.euiColorVis2,
+  euiColorVisBehindText3: baseColorVis.euiColorVis3,
+  euiColorVisBehindText4: baseColorVis.euiColorVis4,
+  euiColorVisBehindText5: baseColorVis.euiColorVis5,
+  euiColorVisBehindText6: baseColorVis.euiColorVis6,
+  euiColorVisBehindText7: baseColorVis.euiColorVis7,
+  euiColorVisBehindText8: baseColorVis.euiColorVis8,
+  euiColorVisBehindText9: baseColorVis.euiColorVis9,
+
+  euiColorVisText0: SEMANTIC_COLORS.accentSecondary110,
+  euiColorVisText1: SEMANTIC_COLORS.accentSecondary100,
+  euiColorVisText2: SEMANTIC_COLORS.primary110,
+  euiColorVisText3: SEMANTIC_COLORS.primary90,
+  euiColorVisText4: SEMANTIC_COLORS.accent100,
+  euiColorVisText5: SEMANTIC_COLORS.accent80,
+  euiColorVisText6: SEMANTIC_COLORS.danger100,
+  euiColorVisText7: SEMANTIC_COLORS.danger80,
+  euiColorVisText8: SEMANTIC_COLORS.warning110,
+  euiColorVisText9: SEMANTIC_COLORS.warning90,
+
+  euiColorVisNeutral0: SEMANTIC_COLORS.neutral100,
+  euiColorVisNeutral1: SEMANTIC_COLORS.neutral80,
+  euiColorVisSuccess0: SEMANTIC_COLORS.success100,
+  euiColorVisSuccess1: SEMANTIC_COLORS.success80,
+  euiColorVisWarning0: SEMANTIC_COLORS.warning100,
+  euiColorVisWarning1: SEMANTIC_COLORS.warning80,
+  euiColorVisRisk0: SEMANTIC_COLORS.risk100,
+  euiColorVisRisk1: SEMANTIC_COLORS.risk80,
+  euiColorVisDanger0: SEMANTIC_COLORS.danger100,
+  euiColorVisDanger1: SEMANTIC_COLORS.danger80,
+
+  euiColorVisBase0: PRIMITIVE_COLORS.mutedGrey10,
+
+  euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30,
+  euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60,
+  euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90,
+  euiColorVisGrey3: PRIMITIVE_COLORS.blueGrey130,
+
+  euiColorVisWarm0: SEMANTIC_COLORS.danger10,
+  euiColorVisWarm1: SEMANTIC_COLORS.danger50,
+  euiColorVisWarm2: SEMANTIC_COLORS.danger100,
+
+  euiColorVisCool0: SEMANTIC_COLORS.primary10,
+  euiColorVisCool1: SEMANTIC_COLORS.primary50,
+  euiColorVisCool2: SEMANTIC_COLORS.primary100,
+
+  euiColorVisComplementary0: SEMANTIC_COLORS.primary80,
+  euiColorVisComplementary1: SEMANTIC_COLORS.warning80,
+};

packages/eui-theme-borealis/src/variables/colors/index.ts

@@ -20,13 +20,15 @@ export const colors: _EuiThemeColors = {
   ink: SEMANTIC_COLORS.plainDark,
   plainLight: SEMANTIC_COLORS.plainLight,
   plainDark: SEMANTIC_COLORS.plainDark,
-  severity: severityColors,
+
   LIGHT: {
     ...light_colors,
     vis: colorVisLight,
+    severity: severityColors,
   },
   DARK: {
     ...dark_colors,
     vis: colorVisDark,
+    severity: severityColors,
   },
 };

packages/eui-theme-common/changelogs/upcoming/8800.md

@@ -0,0 +1,4 @@
+**Breaking changes**
+
+- Updated `_EuiThemeColors` type to include `_EuiThemeVisColors` and `_EuiThemeSeverityColors` as `StrictColorModeSwitch` instead of static colors. This requires `vis` and `severity` keys to be defined as part of `LIGHT` and `DARK` color mode objects.
+

packages/eui-theme-common/src/global_styling/variables/colors.ts

@@ -368,8 +368,6 @@ export type _EuiThemeConstantColors = {
 
   plainLight: string;
   plainDark: string;
-
-  severity: _EuiThemeSeverityColors;
 };
 
 export type _EuiThemeColorsMode = _EuiThemeBrandColors &
@@ -382,6 +380,9 @@ export type _EuiThemeColorsMode = _EuiThemeBrandColors &
   _EuiThemeBorderColors;
 
 export type _EuiThemeColors = StrictColorModeSwitch<
-  _EuiThemeColorsMode & { vis: _EuiThemeVisColors }
+  _EuiThemeColorsMode & {
+    vis: _EuiThemeVisColors;
+    severity: _EuiThemeSeverityColors;
+  }
 > &
   _EuiThemeConstantColors;

packages/eui/changelogs/upcoming/8800.md

@@ -0,0 +1,2 @@
+- Added high contrast mode specific color values for `colors.vis` and `colors.severity` tokens in light color mode
+

packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx

@@ -9,10 +9,12 @@
 import React, { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common';
+import { css } from '@emotion/react';
 
 import {
   EUI_VIS_COLOR_STORE,
   euiPaletteColorBlind,
+  EuiThemeProvider,
   useEuiPaletteColorBlind,
   useEuiPaletteColorBlindBehindText,
   useEuiPaletteComplementary,
@@ -26,6 +28,7 @@ import {
   useEuiPaletteSkyBlue,
   useEuiPaletteWarm,
   useEuiPaletteYellow,
+  useEuiTheme,
   useUpdateEffect,
 } from '../../../services';
 import { EuiSpacer } from '../../spacer';
@@ -97,86 +100,95 @@ export const PaletteWithStops: Story = {
 export const KitchenSink: Story = {
   tags: ['vrt-only'],
   render: function Render() {
-    const euiPaletteColorBlind = useEuiPaletteColorBlind();
-    const euiPaletteColorBlindBehindText = useEuiPaletteColorBlindBehindText();
-    const euiPaletteForStatus = useEuiPaletteForStatus(6);
-    const euiPaletteForTemperature = useEuiPaletteForTemperature(4);
-    const euiPaletteComplementary = useEuiPaletteComplementary(5);
-    const euiPaletteRed = useEuiPaletteRed(5);
-    const euiPaletteGreen = useEuiPaletteGreen(5);
-    const euiPaletteSkyBlue = useEuiPaletteSkyBlue(5);
-    const euiPaletteYellow = useEuiPaletteYellow(5);
-    const euiPaletteOrange = useEuiPaletteOrange(5);
-    const euiPaletteCool = useEuiPaletteCool(5);
-    const euiPaletteWarm = useEuiPaletteWarm(5);
-    const euiPaletteGray = useEuiPaletteGray(5);
-
-    const renderPalettes = (
-      props: Pick<EuiColorPaletteDisplayProps, 'type' | 'size'> = {
-        type: 'fixed',
-        size: 's',
-      }
-    ) => (
-      <>
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteColorBlind} />
-        <EuiColorPaletteDisplay
-          {...props}
-          palette={euiPaletteColorBlindBehindText}
-        />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteForStatus} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteForTemperature} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteComplementary} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteRed} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteGreen} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteSkyBlue} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteYellow} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteOrange} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteCool} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteWarm} />
-        <EuiColorPaletteDisplay {...props} palette={euiPaletteGray} />
-        <EuiColorPaletteDisplay {...props} palette={paletteWithStops} />
-      </>
-    );
+    const { colorMode } = useEuiTheme();
 
     return (
       <>
         <EuiFlexGroup direction="column" gutterSize="m">
-          {renderPalettes()}
+          <Palettes />
+          <EuiSpacer />
+
+          <Palettes size="m" />
           <EuiSpacer />
-          {renderPalettes({ type: 'gradient', size: 'm' })}
+
+          <EuiThemeProvider colorMode={colorMode === 'DARK' ? 'LIGHT' : 'DARK'}>
+            <EuiFlexGroup
+              direction="column"
+              gutterSize="m"
+              css={({ euiTheme }) => css`
+                padding-block: ${euiTheme.size.s};
+                background-color: ${euiTheme.colors.backgroundBasePlain};
+              `}
+            >
+              <Palettes size="m" />
+            </EuiFlexGroup>
+          </EuiThemeProvider>
+          <EuiSpacer />
+
+          <Palettes type="gradient" size="m" />
         </EuiFlexGroup>
       </>
     );
   },
 };
 
 export const HighContrast: Story = {
+  ...KitchenSink,
   tags: ['vrt-only'],
   globals: { highContrastMode: true },
-  render: function Render() {
-    const euiPaletteForStatus = useEuiPaletteForStatus(6);
-    const euiPaletteForTemperature = useEuiPaletteForTemperature(4);
+};
 
-    return (
-      <>
-        <EuiColorPaletteDisplay
-          type="fixed"
-          palette={euiPaletteForStatus}
-          size="xs"
-        />
-        <EuiSpacer />
-        <EuiColorPaletteDisplay
-          type="gradient"
-          palette={euiPaletteForTemperature}
-          size="s"
-        />
-        <EuiSpacer />
-        <EuiColorPaletteDisplay
-          type="gradient"
-          palette={paletteWithStops}
-          size="m"
-        />
-      </>
-    );
-  },
+const Palettes = (
+  props: Pick<EuiColorPaletteDisplayProps, 'type' | 'size'> = {
+    type: 'fixed',
+    size: 's',
+  }
+) => {
+  const { euiTheme } = useEuiTheme();
+
+  const euiPaletteColorBlind = useEuiPaletteColorBlind();
+  const euiPaletteColorBlindBehindText = useEuiPaletteColorBlindBehindText();
+  const euiPaletteForStatus = useEuiPaletteForStatus(6);
+  const euiPaletteForTemperature = useEuiPaletteForTemperature(4);
+  const euiPaletteComplementary = useEuiPaletteComplementary(5);
+  const euiPaletteRed = useEuiPaletteRed(6);
+  const euiPaletteGreen = useEuiPaletteGreen(6);
+  const euiPaletteSkyBlue = useEuiPaletteSkyBlue(6);
+  const euiPaletteYellow = useEuiPaletteYellow(6);
+  const euiPaletteOrange = useEuiPaletteOrange(6);
+  const euiPaletteCool = useEuiPaletteCool(6);
+  const euiPaletteWarm = useEuiPaletteWarm(6);
+  const euiPaletteGray = useEuiPaletteGray(6);
+
+  const severityPalette = [
+    euiTheme.colors.severity.unknown,
+    euiTheme.colors.severity.neutral,
+    euiTheme.colors.severity.success,
+    euiTheme.colors.severity.warning,
+    euiTheme.colors.severity.risk,
+    euiTheme.colors.severity.danger,
+  ];
+
+  return (
+    <>
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteColorBlind} />
+      <EuiColorPaletteDisplay
+        {...props}
+        palette={euiPaletteColorBlindBehindText}
+      />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteForStatus} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteForTemperature} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteComplementary} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteRed} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteGreen} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteSkyBlue} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteYellow} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteOrange} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteCool} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteWarm} />
+      <EuiColorPaletteDisplay {...props} palette={euiPaletteGray} />
+      <EuiColorPaletteDisplay {...props} palette={paletteWithStops} />
+      <EuiColorPaletteDisplay {...props} palette={severityPalette} />
+    </>
+  );
 };

packages/eui/src/components/color_picker/color_picker.test.tsx

@@ -11,11 +11,12 @@ import { fireEvent } from '@testing-library/react';
 import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 import { render } from '../../test/rtl';
-
-import { VISUALIZATION_COLORS, keys } from '../../services';
+import { euiPaletteColorBlind, keys } from '../../services';
 
 import { EuiColorPicker } from './color_picker';
 
+const VISUALIZATION_COLORS = euiPaletteColorBlind();
+
 jest.mock('../portal', () => ({
   EuiPortal: ({ children }: { children: any }) => children,
 }));