diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8800.md b/packages/eui-theme-borealis/changelogs/upcoming/8800.md new file mode 100644 index 00000000000..065d66bc9f6 --- /dev/null +++ b/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 + diff --git a/packages/eui-theme-borealis/src/variables/_overrides.ts b/packages/eui-theme-borealis/src/variables/_overrides.ts index 887bd5a4881..5cc720ed871 100644 --- a/packages/eui-theme-borealis/src/variables/_overrides.ts +++ b/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, + }, }, }, }; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_severity_hcm.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_severity_hcm.ts new file mode 100644 index 00000000000..0f61cf69870 --- /dev/null +++ b/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, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis_hcm.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_hcm.ts new file mode 100644 index 00000000000..df8a3a119f0 --- /dev/null +++ b/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, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/index.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts index 1b9a42cc96b..f5fa60e68e8 100644 --- a/packages/eui-theme-borealis/src/variables/colors/index.ts +++ b/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, }, }; diff --git a/packages/eui-theme-common/changelogs/upcoming/8800.md b/packages/eui-theme-common/changelogs/upcoming/8800.md new file mode 100644 index 00000000000..26619a800bf --- /dev/null +++ b/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. + diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index 0f719c00ee6..6133b8037d5 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/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; diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png index d413a3414d1..4e83fbec236 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Dark_Mode.png new file mode 100644 index 00000000000..0ec364006f0 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png index fe73284773f..46d221c1193 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast_Dark_Mode.png new file mode 100644 index 00000000000..c92bd5df260 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png index 14aca445b60..7606be013a6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png index 9bfd4a8f2e8..04046cd33f1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png index e4aa8814db6..156bf35240a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png index f495c3d6c4f..0255fb288dc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png index 10f1b86c0e4..964d4772f04 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png index 331c755afbe..be3525dc70a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png index f95458d5d0c..628eb6ac4a9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png index ee599443d21..e56aea9771f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png index e1b4ead216a..f028987b491 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Dark_Mode.png new file mode 100644 index 00000000000..c4d1b1be85b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png index b1c249f1b4e..6afb16e92bf 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast_Dark_Mode.png new file mode 100644 index 00000000000..9eccd71b4d4 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png index 4605605aa4d..e4579654f70 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png index e3fb1a382cf..e169add6ad9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png index a2ba09904db..f30cc79b419 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png index d1f5f986368..d950fa5b9d8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png index fcabd45603b..24656614d85 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png index c4110b3c7a5..ae77c9d0bda 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png index b2a178098f5..5e6fe6d928d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ diff --git a/packages/eui/changelogs/upcoming/8800.md b/packages/eui/changelogs/upcoming/8800.md new file mode 100644 index 00000000000..065d66bc9f6 --- /dev/null +++ b/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 + diff --git a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx index 3e98fb03f28..1d1e8d60e2b 100644 --- a/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx +++ b/packages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx @@ -26,6 +26,7 @@ import { useEuiPaletteSkyBlue, useEuiPaletteWarm, useEuiPaletteYellow, + useEuiTheme, useUpdateEffect, } from '../../../services'; import { EuiSpacer } from '../../spacer'; @@ -96,87 +97,90 @@ 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 = { - type: 'fixed', - size: 's', - } - ) => ( - <> - - - - - - - - - - - - - - - - ); - - return ( - <> - - {renderPalettes()} - - {renderPalettes({ type: 'gradient', size: 'm' })} - - - ); - }, + render: () => ( + <> + + + + + + + + + + + ), +}; + +export const DarkMode: Story = { + ...KitchenSink, + tags: ['vrt-only'], + globals: { colorMode: 'dark' }, }; export const HighContrast: Story = { + ...KitchenSink, tags: ['vrt-only'], globals: { highContrastMode: true }, - render: function Render() { - const euiPaletteForStatus = useEuiPaletteForStatus(6); - const euiPaletteForTemperature = useEuiPaletteForTemperature(4); - - return ( - <> - - - - - - - ); - }, +}; + +export const HighContrastDarkMode: Story = { + ...KitchenSink, + tags: ['vrt-only'], + globals: { highContrastMode: true, colorMode: 'dark' }, +}; + +const Palettes = ( + props: Pick = { + 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 ( + <> + + + + + + + + + + + + + + + + + ); }; diff --git a/packages/eui/src/components/color_picker/color_picker.test.tsx b/packages/eui/src/components/color_picker/color_picker.test.tsx index d2d6ad186bd..f8c9555b780 100644 --- a/packages/eui/src/components/color_picker/color_picker.test.tsx +++ b/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, })); diff --git a/packages/eui/src/services/color/eui_palettes.ts b/packages/eui/src/services/color/eui_palettes.ts index 08e0e34acca..2a29e0e25eb 100644 --- a/packages/eui/src/services/color/eui_palettes.ts +++ b/packages/eui/src/services/color/eui_palettes.ts @@ -73,6 +73,8 @@ export type EuiPaletteColorBlindProps = EuiPaletteCommonProps & EuiPaletteRotationProps; /** + * For usage in React use the `useEuiPaletteColorBlind` hook instead. + * * NOTE: These functions rely on base vis colors of the theme which are provided via a global * singleton instance `EUI_VIS_COLOR_STORE` that's updated by the EuiProvider on theme change. * Make sure the function is recalled on theme change to retrieve theme-related colors. @@ -149,6 +151,8 @@ export const euiPaletteColorBlind = ({ }; /** + * For usage in React use the `useEuiPaletteColorBlindBehindText` hook instead. + * * Color blind palette with text is meant for use when text is applied on top of the color. * It increases the brightness of the color to give the text more contrast. * @@ -218,6 +222,8 @@ export const euiPaletteForDarkBackground = function ({ }; /** + * For usage in React use the `useEuiPaletteForStatus` hook instead. + * * 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. */ @@ -255,6 +261,8 @@ export const euiPaletteForStatus = function ( }; /** + * For usage in React use the `useEuiPaletteForTemperature` hook instead. + * * 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. */ @@ -301,6 +309,8 @@ export const euiPaletteForTemperature = function ( }; /** + * For usage in React use the `useEuiPaletteComplementary` hook instead. + * * 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. */ @@ -328,6 +338,8 @@ export const euiPaletteComplementary = function ( }; /** + * For usage in React use the `useEuiPaletteRed` hook instead. + * * 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. */ @@ -348,6 +360,8 @@ export const euiPaletteRed = function ( }; /** + * For usage in React use the `useEuiPaletteGreen` hook instead. + * * 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. */ @@ -368,6 +382,8 @@ export const euiPaletteGreen = function ( }; /** + * For usage in React use the `useEuiPaletteSkyBlue` hook instead. + * * 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. */ @@ -388,6 +404,8 @@ export const euiPaletteSkyBlue = function ( }; /** + * For usage in React use the `useEuiPaletteYellow` hook instead. + * * 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. */ @@ -408,6 +426,8 @@ export const euiPaletteYellow = function ( }; /** + * For usage in React use the `useEuiPaletteOrange` hook instead. + * * 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. */ @@ -428,6 +448,8 @@ export const euiPaletteOrange = function ( }; /** + * For usage in React use the `useEuiPaletteCool` hook instead. + * * 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. */ @@ -456,6 +478,8 @@ export const euiPaletteCool = function ( }; /** + * For usage in React use the `useEuiPaletteWarm` hook instead. + * * 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. */ @@ -480,6 +504,8 @@ export const euiPaletteWarm = function ( }; /** + * For usage in React use the `useEuiPaletteGray` hook instead. + * * 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. */ diff --git a/packages/eui/src/services/color/eui_palettes_hooks.test.tsx b/packages/eui/src/services/color/eui_palettes_hooks.test.tsx index ed5ce6716ab..feb7c3cec2b 100644 --- a/packages/eui/src/services/color/eui_palettes_hooks.test.tsx +++ b/packages/eui/src/services/color/eui_palettes_hooks.test.tsx @@ -25,11 +25,16 @@ import { useEuiPaletteYellow, } from './eui_palettes_hooks'; import { euiPaletteCool, euiPaletteGray, euiPaletteWarm } from './eui_palettes'; +import { EuiThemeColorModeStandard } from '@elastic/eui-theme-common'; // wrapper container to ensure hooks are rendered in specific test provider context -const RenderContainer = ({ children }: PropsWithChildren) => ( - {children} -); +const RenderContainer = ({ + children, + ...rest +}: PropsWithChildren & { + colorMode?: EuiThemeColorModeStandard; + highContrastMode?: boolean; +}) => {children}; describe('useEuiPaletteColorBlind', () => { it('should return default colors', () => { @@ -50,6 +55,28 @@ describe('useEuiPaletteColorBlind', () => { colorVis.euiColorVis9, ]); }); + + it('should return high contrast mode colors in LIGHT mode', () => { + const Wrapper = (props: PropsWithChildren) => ( + + ); + const { result } = renderHook(() => useEuiPaletteColorBlind(), { + wrapper: Wrapper, + }); + + expect(result.current).toEqual([ + '#065B58', + '#009E99', + '#154399', + '#2476F0', + '#831652', + '#D13680', + '#7F1F27', + '#DA3737', + '#6A4906', + '#AD7E00', + ]); + }); }); describe('useEuiPaletteColorBlindBehindText', () => { diff --git a/packages/eui/src/services/color/visualization_colors.ts b/packages/eui/src/services/color/visualization_colors.ts index 5b52be67657..0c54a8f10d9 100644 --- a/packages/eui/src/services/color/visualization_colors.ts +++ b/packages/eui/src/services/color/visualization_colors.ts @@ -10,6 +10,8 @@ // spots that need a large range of varied, qualitative colors. import { euiPaletteColorBlind } from '../../services/color/eui_palettes'; +/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */ export const VISUALIZATION_COLORS = euiPaletteColorBlind(); +/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */ export const DEFAULT_VISUALIZATION_COLOR = VISUALIZATION_COLORS[1]; diff --git a/packages/eui/src/services/theme/provider.tsx b/packages/eui/src/services/theme/provider.tsx index e723576a0f7..c006fde828d 100644 --- a/packages/eui/src/services/theme/provider.tsx +++ b/packages/eui/src/services/theme/provider.tsx @@ -142,12 +142,17 @@ export const EuiThemeProvider = ({ isEqual(parentModifications, modifications) ); - const updateVisColorStore = useCallback((theme: EuiThemeComputed) => { - EUI_VIS_COLOR_STORE.setVisColors( - theme.colors.vis, - theme.flags?.hasVisColorAdjustment ?? true - ); - }, []); + const updateVisColorStore = useCallback( + (theme: EuiThemeComputed, isGlobalTheme: boolean) => { + if (isGlobalTheme) { + EUI_VIS_COLOR_STORE.setVisColors( + theme.colors.vis, + theme.flags?.hasVisColorAdjustment ?? true + ); + } + }, + [] + ); const getInitialTheme = () => { const theme = getComputed( @@ -161,7 +166,7 @@ export const EuiThemeProvider = ({ ); setTimeout(() => { - updateVisColorStore(theme); + updateVisColorStore(theme, isGlobalTheme); }); return theme; @@ -179,11 +184,13 @@ export const EuiThemeProvider = ({ setSystem(newSystem); prevSystemKey.current = newSystem.key; isParentTheme.current = false; - - updateVisColorStore(theme); } }, [_system, parentSystem, theme, updateVisColorStore]); + useEffect(() => { + updateVisColorStore(theme, isGlobalTheme); + }, [theme, colorMode, isGlobalTheme, updateVisColorStore]); + useEffect(() => { const newModifications = mergeDeep(parentModifications, _modifications); if (!isEqual(prevModifications.current, newModifications)) { @@ -210,7 +217,7 @@ export const EuiThemeProvider = ({ useEffect(() => { if (!isParentTheme.current) { - /* Enables recomputation of component colors when flags are overridden on the provider + /* Enables recomputation of component colors when flags are overridden on the provider by adding the respective key to modifications to trigger a recomputation. */ // TODO: remove once visual refresh is completed and flags are obsolete const flagsToRecompute = [ diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index 04d12d7a933..ebe90abd2eb 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -614,13 +614,14 @@ export const colors: _EuiThemeColors = { ink: '#000000', plainLight: '#FFFFFF', plainDark: '#000000', - severity: severityColors, LIGHT: { ...light_colors, vis: colorVisLight, + severity: severityColors, }, DARK: { ...dark_colors_ams, vis: colorVisDark, + severity: severityColors, }, }; diff --git a/packages/website/docs/getting-started/theming/tokens/colors/index.mdx b/packages/website/docs/getting-started/theming/tokens/colors/index.mdx index 74f33ecc164..bf053940f19 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/index.mdx +++ b/packages/website/docs/getting-started/theming/tokens/colors/index.mdx @@ -323,4 +323,12 @@ import { EuiTable, EuiTableHeader, EuiTableHeaderCell, EuiTableRow, EuiTableRowC Light No + + Light (high contrast) + Yes + + + Dark (high contrast) + Yes +