diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8558.md b/packages/eui-theme-borealis/changelogs/upcoming/8558.md new file mode 100644 index 00000000000..a82807f043f --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8558.md @@ -0,0 +1,3 @@ +- Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides +- Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides + diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts index ec94c9b4a42..017c69b5abe 100644 --- a/packages/eui-theme-borealis/src/index.ts +++ b/packages/eui-theme-borealis/src/index.ts @@ -17,6 +17,7 @@ import { levels } from './variables/_levels'; import { font } from './variables/_typography'; import { focus } from './variables/_states'; import { components } from './variables/_components'; +import { overrides } from './variables/_overrides'; export { colorVis } from './variables/colors/_colors_vis'; @@ -37,6 +38,7 @@ export const euiThemeBorealis: EuiThemeShape = { hasGlobalFocusColor: true, hasVisColorAdjustment: false, }, + overrides, }; export const EuiThemeBorealis = buildTheme( diff --git a/packages/eui-theme-borealis/src/variables/_buttons.ts b/packages/eui-theme-borealis/src/variables/_buttons.ts index 4b5c35b4599..974bb1969aa 100644 --- a/packages/eui-theme-borealis/src/variables/_buttons.ts +++ b/packages/eui-theme-borealis/src/variables/_buttons.ts @@ -6,121 +6,174 @@ * Side Public License, v 1. */ -import { _EuiThemeButton } from '@elastic/eui-theme-common'; +import { _EuiThemeButton, computed } from '@elastic/eui-theme-common'; import { SEMANTIC_COLORS } from './colors/_semantic_colors'; -import { - background_colors, - brand_text_colors, - text_colors, -} from './colors/_colors_light'; -import { - dark_background_colors, - dark_brand_text_colors, - dark_text_colors, -} from './colors/_colors_dark'; const _buttons = { - backgroundPrimary: background_colors.backgroundLightPrimary, - backgroundAccent: background_colors.backgroundLightAccent, - backgroundAccentSecondary: background_colors.backgroundLightAccentSecondary, - backgroundSuccess: background_colors.backgroundLightSuccess, - backgroundWarning: background_colors.backgroundLightWarning, - backgroundDanger: background_colors.backgroundLightDanger, - backgroundText: background_colors.backgroundLightText, - backgroundDisabled: background_colors.backgroundBaseDisabled, + backgroundPrimary: computed( + ([backgroundLightPrimary]) => backgroundLightPrimary, + ['colors.backgroundLightPrimary'] + ), + backgroundAccent: computed( + ([backgroundLightAccent]) => backgroundLightAccent, + ['colors.backgroundLightAccent'] + ), + backgroundAccentSecondary: computed( + ([backgroundLightAccentSecondary]) => backgroundLightAccentSecondary, + ['colors.backgroundLightAccentSecondary'] + ), + backgroundSuccess: computed( + ([backgroundLightSuccess]) => backgroundLightSuccess, + ['colors.backgroundLightSuccess'] + ), + backgroundWarning: computed( + ([backgroundLightWarning]) => backgroundLightWarning, + ['colors.backgroundLightWarning'] + ), + backgroundDanger: computed( + ([backgroundLightDanger]) => backgroundLightDanger, + ['colors.backgroundLightDanger'] + ), + backgroundText: computed( + ([backgroundLightText]) => backgroundLightText, + ['colors.backgroundLightText'] + ), + backgroundDisabled: computed( + ([backgroundBaseDisabled]) => backgroundBaseDisabled, + ['colors.backgroundBaseDisabled'] + ), - backgroundFilledPrimary: background_colors.backgroundFilledPrimary, - backgroundFilledAccent: background_colors.backgroundFilledAccent, - backgroundFilledAccentSecondary: - background_colors.backgroundFilledAccentSecondary, - backgroundFilledSuccess: background_colors.backgroundFilledSuccess, - backgroundFilledWarning: background_colors.backgroundFilledWarning, - backgroundFilledDanger: background_colors.backgroundFilledDanger, - backgroundFilledText: background_colors.backgroundFilledText, - backgroundFilledDisabled: background_colors.backgroundBaseDisabled, + backgroundFilledPrimary: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['colors.backgroundFilledPrimary'] + ), + backgroundFilledAccent: computed( + ([backgroundFilledAccent]) => backgroundFilledAccent, + ['colors.backgroundFilledAccent'] + ), + backgroundFilledAccentSecondary: computed( + ([backgroundFilledAccentSecondary]) => backgroundFilledAccentSecondary, + ['colors.backgroundFilledAccentSecondary'] + ), + backgroundFilledSuccess: computed( + ([backgroundFilledSuccess]) => backgroundFilledSuccess, + ['colors.backgroundFilledSuccess'] + ), + backgroundFilledWarning: computed( + ([backgroundFilledWarning]) => backgroundFilledWarning, + ['colors.backgroundFilledWarning'] + ), + backgroundFilledDanger: computed( + ([backgroundFilledDanger]) => backgroundFilledDanger, + ['colors.backgroundFilledDanger'] + ), + backgroundFilledText: computed( + ([backgroundFilledText]) => backgroundFilledText, + ['colors.backgroundFilledText'] + ), + backgroundFilledDisabled: computed( + ([backgroundBaseDisabled]) => backgroundBaseDisabled, + ['colors.backgroundBaseDisabled'] + ), // Temp. mapping to support more variants in old theme - backgroundEmptyPrimaryHover: background_colors.backgroundBaseInteractiveHover, - backgroundEmptyAccentHover: background_colors.backgroundBaseInteractiveHover, - backgroundEmptyAccentSecondaryHover: - background_colors.backgroundBaseInteractiveHover, - backgroundEmptySuccessHover: background_colors.backgroundBaseInteractiveHover, - backgroundEmptyWarningHover: background_colors.backgroundBaseInteractiveHover, - backgroundEmptyDangerHover: background_colors.backgroundBaseInteractiveHover, - backgroundEmptyTextHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyPrimaryHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + backgroundEmptyAccentHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + backgroundEmptyAccentSecondaryHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + backgroundEmptySuccessHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + backgroundEmptyWarningHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + backgroundEmptyDangerHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + backgroundEmptyTextHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), - textColorPrimary: brand_text_colors.textPrimary, - textColorAccent: brand_text_colors.textAccent, - textColorAccentSecondary: brand_text_colors.textAccentSecondary, - textColorSuccess: brand_text_colors.textSuccess, - textColorWarning: brand_text_colors.textWarning, - textColorDanger: brand_text_colors.textDanger, - textColorText: text_colors.textParagraph, - textColorDisabled: text_colors.textDisabled, + textColorPrimary: computed( + ([textPrimary]) => textPrimary, + ['colors.textPrimary'] + ), + textColorAccent: computed( + ([textAccent]) => textAccent, + ['colors.textAccent'] + ), + textColorAccentSecondary: computed( + ([textAccentSecondary]) => textAccentSecondary, + ['colors.textAccentSecondary'] + ), + textColorSuccess: computed( + ([textSuccess]) => textSuccess, + ['colors.textSuccess'] + ), + textColorWarning: computed( + ([textWarning]) => textWarning, + ['colors.textWarning'] + ), + textColorDanger: computed( + ([textDanger]) => textDanger, + ['colors.textDanger'] + ), + textColorText: computed( + ([textParagraph]) => textParagraph, + ['colors.textParagraph'] + ), + textColorDisabled: computed( + ([textDisabled]) => textDisabled, + ['colors.textDisabled'] + ), - textColorFilledPrimary: text_colors.textInverse, - textColorFilledAccent: text_colors.textInverse, - textColorFilledAccentSecondary: text_colors.textInverse, - textColorFilledSuccess: text_colors.textInverse, + textColorFilledPrimary: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), + textColorFilledAccent: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), + textColorFilledAccentSecondary: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), + textColorFilledSuccess: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), textColorFilledWarning: SEMANTIC_COLORS.warning110, - textColorFilledDanger: text_colors.textInverse, - textColorFilledText: text_colors.textInverse, - textColorFilledDisabled: text_colors.textDisabled, + textColorFilledDanger: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), + textColorFilledText: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), + textColorFilledDisabled: computed( + ([textDisabled]) => textDisabled, + ['colors.textDisabled'] + ), }; const _dark_buttons = { - backgroundPrimary: dark_background_colors.backgroundLightPrimary, - backgroundAccent: dark_background_colors.backgroundLightAccent, - backgroundAccentSecondary: - dark_background_colors.backgroundLightAccentSecondary, - backgroundSuccess: dark_background_colors.backgroundLightSuccess, - backgroundWarning: dark_background_colors.backgroundLightWarning, - backgroundDanger: dark_background_colors.backgroundLightDanger, - backgroundText: dark_background_colors.backgroundLightText, - backgroundDisabled: dark_background_colors.backgroundBaseDisabled, + ..._buttons, - backgroundFilledPrimary: dark_background_colors.backgroundFilledPrimary, - backgroundFilledAccent: dark_background_colors.backgroundFilledAccent, - backgroundFilledAccentSecondary: - dark_background_colors.backgroundFilledAccentSecondary, - backgroundFilledSuccess: dark_background_colors.backgroundFilledSuccess, - backgroundFilledWarning: dark_background_colors.backgroundFilledWarning, - backgroundFilledDanger: dark_background_colors.backgroundFilledDanger, - backgroundFilledText: dark_background_colors.backgroundFilledText, - backgroundFilledDisabled: dark_background_colors.backgroundBaseDisabled, - - backgroundEmptyPrimaryHover: - dark_background_colors.backgroundBaseInteractiveHover, - backgroundEmptyAccentHover: - dark_background_colors.backgroundBaseInteractiveHover, - backgroundEmptyAccentSecondaryHover: - dark_background_colors.backgroundBaseInteractiveHover, - backgroundEmptySuccessHover: - dark_background_colors.backgroundBaseInteractiveHover, - backgroundEmptyWarningHover: - dark_background_colors.backgroundBaseInteractiveHover, - backgroundEmptyDangerHover: - dark_background_colors.backgroundBaseInteractiveHover, - backgroundEmptyTextHover: - dark_background_colors.backgroundBaseInteractiveHover, - - textColorPrimary: dark_brand_text_colors.textPrimary, - textColorAccent: dark_brand_text_colors.textAccent, - textColorAccentSecondary: dark_brand_text_colors.textAccentSecondary, - textColorSuccess: dark_brand_text_colors.textSuccess, - textColorWarning: dark_brand_text_colors.textWarning, - textColorDanger: dark_brand_text_colors.textDanger, - textColorText: dark_text_colors.textParagraph, - textColorDisabled: dark_text_colors.textDisabled, - - textColorFilledPrimary: dark_text_colors.textInverse, - textColorFilledAccent: dark_text_colors.textInverse, - textColorFilledAccentSecondary: dark_text_colors.textInverse, - textColorFilledSuccess: dark_text_colors.textInverse, textColorFilledWarning: SEMANTIC_COLORS.warning110, - textColorFilledDanger: dark_text_colors.textInverse, - textColorFilledText: dark_text_colors.textInverse, - textColorFilledDisabled: dark_text_colors.textDisabled, }; export const buttons: _EuiThemeButton = { diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 57c4401f520..9526e626f24 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -9,49 +9,81 @@ import { _EuiThemeComponentColors, _EuiThemeComponents, + computed, } from '@elastic/eui-theme-common'; import { SEMANTIC_COLORS } from './colors/_semantic_colors'; import { dark_background_colors, dark_border_colors, - dark_brand_text_colors, - dark_text_colors, } from './colors/_colors_dark'; import { buttons } from './_buttons'; import { forms } from './_forms'; -import { - background_colors, - border_colors, - brand_text_colors, - text_colors, -} from './colors/_colors_light'; import { colorVis } from './colors/_colors_vis'; +import { border_colors } from './colors/_colors_light'; const component_colors: _EuiThemeComponentColors = { - badgeBackground: background_colors.backgroundLightText, - badgeBackgroundSubdued: background_colors.backgroundLightText, - badgeBorderColorHollow: border_colors.borderBasePlain, - badgeIconButtonBackgroundHover: - background_colors.backgroundBaseInteractiveHover, - - breadcrumbsApplicationBackground: background_colors.backgroundLightText, - breadcrumbsApplicationColor: text_colors.textSubdued, + badgeBackground: computed( + ([backgroundLightText]) => backgroundLightText, + ['colors.backgroundLightText'] + ), + badgeBackgroundSubdued: computed( + ([backgroundLightText]) => backgroundLightText, + ['colors.backgroundLightText'] + ), + badgeBorderColorHollow: computed( + ([borderBasePlain]) => borderBasePlain, + ['colors.borderBasePlain'] + ), + badgeIconButtonBackgroundHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + + breadcrumbsApplicationBackground: computed( + ([backgroundLightText]) => backgroundLightText, + ['colors.backgroundLightText'] + ), + breadcrumbsApplicationColor: computed( + ([textSubdued]) => textSubdued, + ['colors.textSubdued'] + ), bottomBarBackground: SEMANTIC_COLORS.plainDark, - buttonGroupBackgroundDisabledSelected: - background_colors.backgroundBaseFormsControlDisabled, - buttonGroupBorderColor: border_colors.borderBasePlain, - buttonGroupBorderColorSelected: border_colors.borderBasePlain, - buttonGroupFocusColor: brand_text_colors.textPrimary, - - codeBackground: background_colors.backgroundBaseHighlighted, + buttonGroupBackgroundDisabledSelected: computed( + ([backgroundBaseFormsControlDisabled]) => + backgroundBaseFormsControlDisabled, + ['colors.backgroundBaseFormsControlDisabled'] + ), + buttonGroupBorderColor: computed( + ([borderBasePlain]) => borderBasePlain, + ['colors.borderBasePlain'] + ), + buttonGroupBorderColorSelected: computed( + ([borderBasePlain]) => borderBasePlain, + ['colors.borderBasePlain'] + ), + buttonGroupFocusColor: computed( + ([textPrimary]) => textPrimary, + ['colors.textPrimary'] + ), + + codeBackground: computed( + ([backgroundBaseHighlighted]) => backgroundBaseHighlighted, + ['colors.backgroundBaseHighlighted'] + ), codeBackgroundSelected: 'inherit', - codeColor: text_colors.textParagraph, + codeColor: computed( + ([textParagraph]) => textParagraph, + ['colors.textParagraph'] + ), codeInlineColor: colorVis.euiColorVisAsTextLight6, - codeCommentColor: text_colors.textSubdued, + codeCommentColor: computed( + ([textSubdued]) => textSubdued, + ['colors.textSubdued'] + ), codeSelectorColor: 'inherit', codeStringColor: colorVis.euiColorVisAsTextLight2, codeTagColor: colorVis.euiColorVisAsTextLight1, @@ -64,7 +96,10 @@ const component_colors: _EuiThemeComponentColors = { codeAttributeColor: 'inherit', codeSymbolColor: colorVis.euiColorVisAsTextLight3, codeParamsColor: 'inherit', - codeMetaColor: text_colors.textSubdued, + codeMetaColor: computed( + ([textSubdued]) => textSubdued, + ['colors.textSubdued'] + ), codeTitleColor: colorVis.euiColorVisAsTextLight4, codeSectionColor: colorVis.euiColorVisAsTextLight3, codeAdditionColor: colorVis.euiColorVisAsTextLight0, @@ -72,103 +107,222 @@ const component_colors: _EuiThemeComponentColors = { codeSelectorClassColor: 'inherit', codeSelectorIdColor: 'inherit', - collapsibleNavGroupBackground: background_colors.backgroundBaseSubdued, + collapsibleNavGroupBackground: computed( + ([backgroundBaseSubdued]) => backgroundBaseSubdued, + ['colors.backgroundBaseSubdued'] + ), collapsibleNavGroupBackgroundDark: dark_background_colors.backgroundBaseSubdued, - dataGridBorderColor: border_colors.borderBaseSubdued, - dataGridVerticalLineBorderColor: border_colors.borderBaseSubdued, - dataGridRowBackgroundStriped: background_colors.backgroundBaseSubdued, - dataGridRowBackgroundHover: background_colors.backgroundBaseInteractiveHover, - dataGridRowBackgroundSelect: - background_colors.backgroundBaseInteractiveSelect, - - dragDropDraggingBackground: background_colors.backgroundBaseSuccess, - dragDropDraggingOverBackground: background_colors.backgroundLightSuccess, - - filterSelectItemBackgroundFocusDisabled: - background_colors.backgroundBaseDisabled, - - flyoutFooterBackground: background_colors.backgroundBaseHighlighted, - flyoutCloseButtonInsideBackground: background_colors.backgroundBasePlain, - - headerBackground: background_colors.backgroundBasePlain, + dataGridBorderColor: computed( + ([borderBaseSubdued]) => borderBaseSubdued, + ['colors.borderBaseSubdued'] + ), + dataGridVerticalLineBorderColor: computed( + ([borderBaseSubdued]) => borderBaseSubdued, + ['colors.borderBaseSubdued'] + ), + dataGridRowBackgroundStriped: computed( + ([backgroundBaseSubdued]) => backgroundBaseSubdued, + ['colors.backgroundBaseSubdued'] + ), + dataGridRowBackgroundHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + dataGridRowBackgroundSelect: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + + dragDropDraggingBackground: computed( + ([backgroundBaseSuccess]) => backgroundBaseSuccess, + ['colors.backgroundBaseSuccess'] + ), + dragDropDraggingOverBackground: computed( + ([backgroundLightSuccess]) => backgroundLightSuccess, + ['colors.backgroundLightSuccess'] + ), + + filterSelectItemBackgroundFocusDisabled: computed( + ([backgroundBaseDisabled]) => backgroundBaseDisabled, + ['colors.backgroundBaseDisabled'] + ), + + flyoutFooterBackground: computed( + ([backgroundBaseHighlighted]) => backgroundBaseHighlighted, + ['colors.backgroundBaseHighlighted'] + ), + flyoutCloseButtonInsideBackground: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + + headerBackground: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), headerDarkBackground: dark_background_colors.backgroundBasePlain, headerDarkSearchBorderColor: dark_border_colors.borderBasePlain, headerDarkSectionItemBackgroundFocus: dark_background_colors.backgroundBasePrimary, - keyPadMenuItemBackgroundDisabledSelect: - background_colors.backgroundBaseDisabled, - - listGroupItemBackgroundPrimaryActive: - background_colors.backgroundBaseInteractiveSelect, - listGroupItemBackgroundSubduedActive: - background_colors.backgroundBaseInteractiveSelect, - listGroupItemBackgroundHover: - background_colors.backgroundBaseInteractiveHover, - listGroupItemBackgroundPrimaryHover: - background_colors.backgroundBaseInteractiveHover, - + keyPadMenuItemBackgroundDisabledSelect: computed( + ([backgroundBaseDisabled]) => backgroundBaseDisabled, + ['colors.backgroundBaseDisabled'] + ), + + listGroupItemBackgroundPrimaryActive: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + listGroupItemBackgroundSubduedActive: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + listGroupItemBackgroundHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + listGroupItemBackgroundPrimaryHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + + // we don't want to inherit overrides (e.g. HCM) loadingSpinnerBorder: border_colors.borderBasePlain, - loadingSpinnerHighlight: border_colors.borderStrongPrimary, + loadingSpinnerHighlight: computed( + ([borderStrongPrimary]) => borderStrongPrimary, + ['colors.borderStrongPrimary'] + ), loadingChartMonoBackground0: SEMANTIC_COLORS.shade20, loadingChartMonoBackground1: SEMANTIC_COLORS.shade30, loadingChartMonoBackground2: SEMANTIC_COLORS.shade40, loadingChartMonoBackground3: SEMANTIC_COLORS.shade50, - markBackground: background_colors.backgroundLightPrimary, + markBackground: computed( + ([backgroundLightPrimary]) => backgroundLightPrimary, + ['colors.backgroundLightPrimary'] + ), - markdownFormatTableBorderColor: border_colors.borderBasePlain, + markdownFormatTableBorderColor: computed( + ([borderBasePlain]) => borderBasePlain, + ['colors.borderBasePlain'] + ), - overlayMaskBackground: background_colors.backgroundBaseInteractiveOverlay, + overlayMaskBackground: computed( + ([backgroundBaseInteractiveOverlay]) => backgroundBaseInteractiveOverlay, + ['colors.backgroundBaseInteractiveOverlay'] + ), overlayMaskBackgroundHighContrast: `rgba(${SEMANTIC_COLORS.shade140RGB}, 0.9)`, - popoverPanelBackground: background_colors.backgroundBasePlain, - popoverFooterBorderColor: border_colors.borderBaseSubdued, + popoverPanelBackground: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + popoverFooterBorderColor: computed( + ([borderBaseSubdued]) => borderBaseSubdued, + ['colors.borderBaseSubdued'] + ), scrollbarTrackColor: SEMANTIC_COLORS.shade15, - sideNavItemEmphasizedBackground: - background_colors.backgroundBaseInteractiveSelect, + sideNavItemEmphasizedBackground: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), - selectableListItemBorderColor: border_colors.borderBaseSubdued, + selectableListItemBorderColor: computed( + ([borderBaseSubdued]) => borderBaseSubdued, + ['colors.borderBaseSubdued'] + ), skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.shade100RGB}, 0.04)`, - superDatePickerBackgroundSuccees: background_colors.backgroundBaseSuccess, - - switchBackgroundOn: background_colors.backgroundFilledPrimary, - switchBackgroundOff: background_colors.backgroundFilledText, - switchUncompressedBackgroundDisabled: - background_colors.backgroundBaseFormsControlDisabled, - switchCompressedBackgroundDisabled: - background_colors.backgroundBaseFormsControlDisabled, - switchMiniBackgroundDisabled: - background_colors.backgroundBaseFormsControlDisabled, - switchThumbBackgroundDisabled: background_colors.backgroundBasePlain, - switchThumbBorderOn: background_colors.backgroundFilledPrimary, - switchThumbBorderOff: background_colors.backgroundFilledText, + superDatePickerBackgroundSuccees: computed( + ([backgroundBaseSuccess]) => backgroundBaseSuccess, + ['colors.backgroundBaseSuccess'] + ), + + switchBackgroundOn: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['colors.backgroundFilledPrimary'] + ), + switchBackgroundOff: computed( + ([backgroundFilledText]) => backgroundFilledText, + ['colors.backgroundFilledText'] + ), + switchUncompressedBackgroundDisabled: computed( + ([backgroundBaseFormsControlDisabled]) => + backgroundBaseFormsControlDisabled, + ['colors.backgroundBaseFormsControlDisabled'] + ), + switchCompressedBackgroundDisabled: computed( + ([backgroundBaseFormsControlDisabled]) => + backgroundBaseFormsControlDisabled, + ['colors.backgroundBaseFormsControlDisabled'] + ), + switchMiniBackgroundDisabled: computed( + ([backgroundBaseFormsControlDisabled]) => + backgroundBaseFormsControlDisabled, + ['colors.backgroundBaseFormsControlDisabled'] + ), + switchThumbBackgroundDisabled: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + switchThumbBorderOn: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['colors.backgroundFilledPrimary'] + ), + switchThumbBorderOff: computed( + ([backgroundFilledText]) => backgroundFilledText, + ['colors.backgroundFilledText'] + ), switchIconDisabled: forms.LIGHT.iconDisabled, - tableRowBackgroundHover: background_colors.backgroundBaseInteractiveHover, - tableRowBackgroundSelected: background_colors.backgroundBaseInteractiveSelect, - tableRowBackgroundSelectedHover: - background_colors.backgroundBaseInteractiveSelect, - tableRowInteractiveBackgroundHover: - background_colors.backgroundBaseInteractiveSelect, - tableRowInteractiveBackgroundFocus: - background_colors.backgroundBaseInteractiveSelect, - tableCellSortableIconColor: background_colors.backgroundFilledText, + tableRowBackgroundHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + tableRowBackgroundSelected: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + tableRowBackgroundSelectedHover: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + tableRowInteractiveBackgroundHover: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + tableRowInteractiveBackgroundFocus: computed( + ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, + ['colors.backgroundBaseInteractiveSelect'] + ), + tableCellSortableIconColor: computed( + ([backgroundFilledText]) => backgroundFilledText, + ['colors.backgroundFilledText'] + ), tooltipBackground: dark_background_colors.backgroundBaseSubdued, tooltipBorder: dark_border_colors.borderBaseSubdued, - tooltipBorderFloating: border_colors.borderBaseFloating, - - tourFooterBackground: background_colors.backgroundBaseHighlighted, - - treeViewItemBackgroundHover: background_colors.backgroundBaseInteractiveHover, + tooltipBorderFloating: computed( + ([borderBaseFloating]) => borderBaseFloating, + ['colors.borderBaseFloating'] + ), + + tourFooterBackground: computed( + ([backgroundBaseHighlighted]) => backgroundBaseHighlighted, + ['colors.backgroundBaseHighlighted'] + ), + + treeViewItemBackgroundHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), }; export const components: _EuiThemeComponents = { @@ -178,144 +332,42 @@ export const components: _EuiThemeComponents = { DARK: { ...component_colors, - badgeBackground: dark_background_colors.backgroundLightText, - badgeBackgroundSubdued: dark_background_colors.backgroundLightText, - badgeBorderColorHollow: dark_border_colors.borderBasePlain, - badgeIconButtonBackgroundHover: - dark_background_colors.backgroundBaseInteractiveHover, - - breadcrumbsApplicationBackground: - dark_background_colors.backgroundLightText, - breadcrumbsApplicationColor: dark_text_colors.textSubdued, - - buttonGroupBackgroundDisabledSelected: - dark_background_colors.backgroundBaseFormsControlDisabled, - buttonGroupBorderColor: dark_border_colors.borderBasePlain, - buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain, - buttonGroupFocusColor: dark_brand_text_colors.textPrimary, - - codeBackground: dark_background_colors.backgroundBaseHighlighted, - codeBackgroundSelected: 'inherit', - codeColor: dark_text_colors.textParagraph, codeInlineColor: colorVis.euiColorVisAsTextDark6, - codeCommentColor: dark_text_colors.textSubdued, - codeSelectorColor: 'inherit', codeStringColor: colorVis.euiColorVisAsTextDark2, codeTagColor: colorVis.euiColorVisAsTextDark1, codeNameColor: colorVis.euiColorVisAsTextDark1, codeNumberColor: colorVis.euiColorVisAsTextDark0, codeKeywordColor: colorVis.euiColorVisAsTextDark6, - codeFunctionTitleColor: 'inherit', codeTypeColor: colorVis.euiColorVisAsTextDark1, - codeAttributeColor: 'inherit', codeSymbolColor: colorVis.euiColorVisAsTextDark3, - codeParamsColor: 'inherit', - codeMetaColor: dark_text_colors.textSubdued, codeTitleColor: colorVis.euiColorVisAsTextDark4, codeSectionColor: colorVis.euiColorVisAsTextDark3, codeAdditionColor: colorVis.euiColorVisAsTextDark0, codeDeletionColor: colorVis.euiColorVisAsTextDark3, - codeSelectorClassColor: 'inherit', - codeSelectorIdColor: 'inherit', - - collapsibleNavGroupBackground: dark_background_colors.backgroundBaseSubdued, - collapsibleNavGroupBackgroundDark: - dark_background_colors.backgroundBaseSubdued, - - dataGridBorderColor: dark_border_colors.borderBaseSubdued, - dataGridVerticalLineBorderColor: dark_border_colors.borderBaseSubdued, - dataGridRowBackgroundStriped: dark_background_colors.backgroundBaseSubdued, - dataGridRowBackgroundHover: - dark_background_colors.backgroundBaseInteractiveHover, - dataGridRowBackgroundSelect: - dark_background_colors.backgroundBaseInteractiveSelect, - - dragDropDraggingBackground: dark_background_colors.backgroundBaseSuccess, - dragDropDraggingOverBackground: - dark_background_colors.backgroundLightSuccess, - - filterSelectItemBackgroundFocusDisabled: - dark_background_colors.backgroundBaseDisabled, - - flyoutFooterBackground: dark_background_colors.backgroundBaseHighlighted, - flyoutCloseButtonInsideBackground: - dark_background_colors.backgroundBasePlain, - - headerBackground: dark_background_colors.backgroundBasePlain, - - keyPadMenuItemBackgroundDisabledSelect: - dark_background_colors.backgroundBaseDisabled, - - listGroupItemBackgroundPrimaryActive: - dark_background_colors.backgroundBaseInteractiveSelect, - listGroupItemBackgroundSubduedActive: - dark_background_colors.backgroundBaseInteractiveSelect, - listGroupItemBackgroundHover: - dark_background_colors.backgroundBaseInteractiveHover, - listGroupItemBackgroundPrimaryHover: - dark_background_colors.backgroundBaseInteractiveHover, loadingSpinnerBorder: dark_border_colors.borderBasePlain, - loadingSpinnerHighlight: dark_border_colors.borderStrongPrimary, loadingChartMonoBackground0: SEMANTIC_COLORS.shade110, loadingChartMonoBackground1: SEMANTIC_COLORS.shade100, loadingChartMonoBackground2: SEMANTIC_COLORS.shade90, loadingChartMonoBackground3: SEMANTIC_COLORS.shade80, - markBackground: dark_background_colors.backgroundLightPrimary, - - markdownFormatTableBorderColor: dark_border_colors.borderBasePlain, - - overlayMaskBackground: - dark_background_colors.backgroundBaseInteractiveOverlay, overlayMaskBackgroundHighContrast: `rgba(${SEMANTIC_COLORS.shade140RGB}, 0.9)`, - popoverPanelBackground: dark_background_colors.backgroundBasePlain, - popoverFooterBorderColor: dark_border_colors.borderBaseSubdued, - scrollbarTrackColor: SEMANTIC_COLORS.shade145, - sideNavItemEmphasizedBackground: - dark_background_colors.backgroundBaseInteractiveSelect, - - selectableListItemBorderColor: dark_border_colors.borderBaseSubdued, - skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.plainLightRGB}, 0.3)`, - switchBackgroundOn: dark_background_colors.backgroundFilledPrimary, - switchBackgroundOff: dark_background_colors.backgroundFilledText, - switchUncompressedBackgroundDisabled: - dark_background_colors.backgroundBaseFormsControlDisabled, - switchCompressedBackgroundDisabled: - dark_background_colors.backgroundBaseFormsControlDisabled, - switchMiniBackgroundDisabled: - dark_background_colors.backgroundBaseFormsControlDisabled, - switchThumbBackgroundDisabled: dark_background_colors.backgroundBasePlain, - switchThumbBorderOn: dark_background_colors.backgroundFilledPrimary, - switchThumbBorderOff: dark_background_colors.backgroundFilledText, switchIconDisabled: forms.DARK.iconDisabled, - superDatePickerBackgroundSuccees: - dark_background_colors.backgroundBaseSuccess, - - tableRowBackgroundHover: - dark_background_colors.backgroundBaseInteractiveHover, - tableRowBackgroundSelected: - dark_background_colors.backgroundBaseInteractiveSelect, - tableRowBackgroundSelectedHover: - dark_background_colors.backgroundBaseInteractiveSelect, - tableRowInteractiveBackgroundHover: - dark_background_colors.backgroundBaseInteractiveHover, - tableRowInteractiveBackgroundFocus: - dark_background_colors.backgroundBaseInteractiveHover, - tableCellSortableIconColor: dark_background_colors.backgroundFilledText, - - tooltipBorderFloating: dark_border_colors.borderBaseFloating, - - tourFooterBackground: dark_background_colors.backgroundBaseHighlighted, - - treeViewItemBackgroundHover: - dark_background_colors.backgroundBaseInteractiveHover, + // TODO: align table hover states + tableRowInteractiveBackgroundHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), + tableRowInteractiveBackgroundFocus: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), }, }; diff --git a/packages/eui-theme-borealis/src/variables/_forms.ts b/packages/eui-theme-borealis/src/variables/_forms.ts index 7866dce9e62..56bcd35cf1b 100644 --- a/packages/eui-theme-borealis/src/variables/_forms.ts +++ b/packages/eui-theme-borealis/src/variables/_forms.ts @@ -6,58 +6,78 @@ * Side Public License, v 1. */ import { computed, mathWithUnits } from '@elastic/eui-theme-common'; -import { - dark_background_colors, - dark_border_colors, - dark_text_colors, -} from './colors/_colors_dark'; -import { - background_colors, - border_colors, - text_colors, -} from './colors/_colors_light'; const _forms = { - background: background_colors.backgroundBasePlain, - backgroundDisabled: background_colors.backgroundBaseDisabled, - backgroundReadOnly: background_colors.backgroundBasePlain, - backgroundFocused: background_colors.backgroundBasePlain, - backgroundAutofilled: background_colors.backgroundBasePrimary, - prependBackground: background_colors.backgroundBaseFormsPrepend, - border: border_colors.borderBasePlain, - borderDisabled: border_colors.borderBaseDisabled, - borderAutofilled: border_colors.borderBasePrimary, - controlBorder: border_colors.borderBaseFormsControl, - controlBorderSelected: border_colors.borderStrongPrimary, - controlBorderDisabled: border_colors.borderBaseDisabled, + background: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + backgroundDisabled: computed( + ([backgroundBaseDisabled]) => backgroundBaseDisabled, + ['colors.backgroundBaseDisabled'] + ), + backgroundReadOnly: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + backgroundFocused: computed( + ([backgroundBasePlain]) => backgroundBasePlain, + ['colors.backgroundBasePlain'] + ), + backgroundAutofilled: computed( + ([backgroundBasePrimary]) => backgroundBasePrimary, + ['colors.backgroundBasePrimary'] + ), + prependBackground: computed( + ([backgroundBaseFormsPrepend]) => backgroundBaseFormsPrepend, + ['colors.backgroundBaseFormsPrepend'] + ), + border: computed( + ([borderBasePlain]) => borderBasePlain, + ['colors.borderBasePlain'] + ), + borderDisabled: computed( + ([borderBaseDisabled]) => borderBaseDisabled, + ['colors.borderBaseDisabled'] + ), + borderAutofilled: computed( + ([borderBasePrimary]) => borderBasePrimary, + ['colors.borderBasePrimary'] + ), + controlBorder: computed( + ([borderBaseFormsControl]) => borderBaseFormsControl, + ['colors.borderBaseFormsControl'] + ), + controlBorderSelected: computed( + ([borderStrongPrimary]) => borderStrongPrimary, + ['colors.borderStrongPrimary'] + ), + controlBorderDisabled: computed( + ([borderBaseDisabled]) => borderBaseDisabled, + ['colors.borderBaseDisabled'] + ), controlBackgroundUnselected: 'transparent', - controlBackgroundDisabled: - background_colors.backgroundBaseFormsControlDisabled, - colorHasPlaceholder: text_colors.textSubdued, - colorDisabled: text_colors.textDisabled, - iconDisabled: text_colors.textDisabled, + controlBackgroundDisabled: computed( + ([backgroundBaseFormsControlDisabled]) => + backgroundBaseFormsControlDisabled, + ['colors.backgroundBaseFormsControlDisabled'] + ), + colorHasPlaceholder: computed( + ([textSubdued]) => textSubdued, + ['colors.textSubdued'] + ), + colorDisabled: computed( + ([textDisabled]) => textDisabled, + ['colors.textDisabled'] + ), + iconDisabled: computed( + ([textDisabled]) => textDisabled, + ['colors.textDisabled'] + ), }; const _dark_forms = { ..._forms, - background: dark_background_colors.backgroundBasePlain, - backgroundDisabled: dark_background_colors.backgroundBaseDisabled, - backgroundReadOnly: dark_background_colors.backgroundBasePlain, - backgroundFocused: dark_background_colors.backgroundBasePlain, - backgroundAutofilled: dark_background_colors.backgroundBasePrimary, - prependBackground: dark_background_colors.backgroundBaseFormsPrepend, - border: dark_border_colors.borderBasePlain, - borderDisabled: dark_border_colors.borderBaseDisabled, - borderAutofilled: dark_border_colors.borderBasePrimary, - controlBorder: dark_border_colors.borderBaseFormsControl, - controlBorderSelected: dark_border_colors.borderStrongPrimary, - controlBorderDisabled: dark_border_colors.borderBaseDisabled, - controlBackgroundUnselected: 'transparent', - controlBackgroundDisabled: - dark_background_colors.backgroundBaseFormsControlDisabled, - colorHasPlaceholder: dark_text_colors.textSubdued, - colorDisabled: dark_text_colors.textDisabled, - iconDisabled: dark_text_colors.textDisabled, }; export const forms = { diff --git a/packages/eui-theme-borealis/src/variables/_overrides.ts b/packages/eui-theme-borealis/src/variables/_overrides.ts new file mode 100644 index 00000000000..887bd5a4881 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_overrides.ts @@ -0,0 +1,19 @@ +/* + * 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 { _EuiThemeOverrides } from '@elastic/eui-theme-common'; +import { PRIMITIVE_COLORS } from './colors/_primitive_colors'; + +export const overrides: _EuiThemeOverrides = { + HCM: { + colors: { + ink: PRIMITIVE_COLORS.black, + ghost: PRIMITIVE_COLORS.white, + }, + }, +}; diff --git a/packages/eui-theme-common/changelogs/upcoming/8558.md b/packages/eui-theme-common/changelogs/upcoming/8558.md new file mode 100644 index 00000000000..0e8f306c942 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8558.md @@ -0,0 +1,3 @@ +- Added support for theme `overrides` as optional part of `EuiThemeShape` +- Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` + diff --git a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts index d81207a3d7c..889eb7bba71 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts +++ b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts @@ -8,10 +8,7 @@ import type { UseEuiTheme } from '../../services/theme/types'; import { getShadowColor } from '../functions'; -import { - _EuiThemeShadowSize, - _EuiThemeShadowCustomColor, -} from '../variables/shadow'; +import { _EuiThemeShadowSize } from '../variables/shadow'; export interface EuiShadowOptions { color?: string; 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 73e94c9c0bd..bc876f52c92 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -352,15 +352,7 @@ export type _EuiThemeVisColors = { }; export type _EuiThemeConstantColors = { - /** - * Purest **white** - * @deprecated - */ ghost: string; - /** - * Purest **black** - * @deprecated - */ ink: string; plainLight: string; diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts index ee3d0142c85..18b3e15971e 100644 --- a/packages/eui-theme-common/src/global_styling/variables/index.ts +++ b/packages/eui-theme-common/src/global_styling/variables/index.ts @@ -21,3 +21,4 @@ export * from './buttons'; export * from './forms'; export * from './components'; export * from './flags'; +export * from './overrides'; diff --git a/packages/eui-theme-common/src/global_styling/variables/overrides.ts b/packages/eui-theme-common/src/global_styling/variables/overrides.ts new file mode 100644 index 00000000000..8288315d2a2 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/overrides.ts @@ -0,0 +1,20 @@ +/* + * 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 { RecursivePartial } from '../../types'; +import { + EUI_THEME_HIGH_CONTRAST_MODE_KEY, + type EuiThemeShapeBase, +} from '../../services/theme/types'; + +/** + * Theme specific conditional overrides, e.g. for high contrast mode + */ +export type _EuiThemeOverrides = { + [EUI_THEME_HIGH_CONTRAST_MODE_KEY]: RecursivePartial; +}; diff --git a/packages/eui-theme-common/src/services/theme/types.ts b/packages/eui-theme-common/src/services/theme/types.ts index f7790efeaac..8dd56f356a0 100644 --- a/packages/eui-theme-common/src/services/theme/types.ts +++ b/packages/eui-theme-common/src/services/theme/types.ts @@ -10,19 +10,20 @@ import type { CSSObject } from '@emotion/react'; import type { RecursivePartial, ValueOf } from '../../types'; -import { _EuiThemeAnimation } from '../../global_styling/variables/animations'; -import { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint'; -import { _EuiThemeBorder } from '../../global_styling/variables/borders'; -import { _EuiThemeColors } from '../../global_styling/variables/colors'; -import { +import type { _EuiThemeAnimation } from '../../global_styling/variables/animations'; +import type { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint'; +import type { _EuiThemeBorder } from '../../global_styling/variables/borders'; +import type { _EuiThemeColors } from '../../global_styling/variables/colors'; +import type { _EuiThemeBase, _EuiThemeSizes, } from '../../global_styling/variables/size'; -import { _EuiThemeFont } from '../../global_styling/variables/typography'; -import { _EuiThemeFocus } from '../../global_styling/variables/states'; -import { _EuiThemeLevels } from '../../global_styling/variables/levels'; -import { _EuiThemeComponents } from '../../global_styling/variables/components'; -import { _EuiThemeFlags } from '../../global_styling/variables'; +import type { _EuiThemeFont } from '../../global_styling/variables/typography'; +import type { _EuiThemeFocus } from '../../global_styling/variables/states'; +import type { _EuiThemeLevels } from '../../global_styling/variables/levels'; +import type { _EuiThemeComponents } from '../../global_styling/variables/components'; +import type { _EuiThemeFlags } from '../../global_styling/variables'; +import type { _EuiThemeOverrides } from '../../global_styling/variables/overrides'; export const COLOR_MODES_STANDARD = { light: 'LIGHT', @@ -55,7 +56,10 @@ export type StrictColorModeSwitch = { export type EuiThemeHighContrastModeProp = boolean; export type EuiThemeHighContrastMode = 'forced' | 'preferred' | false; -export type EuiThemeShape = { +export const EUI_THEME_HIGH_CONTRAST_MODE_KEY = 'HCM' as const; +export const EUI_THEME_OVERRIDES_KEY = 'overrides' as const; + +export type EuiThemeShapeBase = { colors: _EuiThemeColors; /** - Default value: 16 */ base: _EuiThemeBase; @@ -73,6 +77,10 @@ export type EuiThemeShape = { flags: _EuiThemeFlags; }; +export type EuiThemeShape = EuiThemeShapeBase & { + overrides?: _EuiThemeOverrides; +}; + export type EuiThemeSystem = { root: EuiThemeShape & T; model: EuiThemeShape & T; diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts index c7058f6d99c..16fcd3173cc 100644 --- a/packages/eui-theme-common/src/utils.ts +++ b/packages/eui-theme-common/src/utils.ts @@ -16,6 +16,9 @@ import { EuiThemeComputed, COLOR_MODES_STANDARD, COLOR_MODES_INVERSE, + EuiThemeHighContrastMode, + EUI_THEME_OVERRIDES_KEY, + EUI_THEME_HIGH_CONTRAST_MODE_KEY, } from './global_styling'; export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light; @@ -227,9 +230,17 @@ const isComputedLike = (key: object): key is Computed => { export const getComputed = ( base: EuiThemeSystem, over: Partial>, - colorMode: EuiThemeColorModeStandard + colorMode: EuiThemeColorModeStandard, + highContrastMode?: EuiThemeHighContrastMode ): EuiThemeComputed => { const output: Partial = { themeName: base.key }; + const _hcmOverridesKey = `${EUI_THEME_OVERRIDES_KEY}.${EUI_THEME_HIGH_CONTRAST_MODE_KEY}`; + const _hcmBaseOverrides = highContrastMode + ? getOn(base, _hcmOverridesKey) + : undefined; + const _hcmOverOverrides = highContrastMode + ? getOn(over, _hcmOverridesKey) + : undefined; function loop( base: { [key: string]: any }, @@ -239,6 +250,13 @@ export const getComputed = ( ) { Object.keys(base).forEach((key) => { let newPath = path ? `${path}.${key}` : `${key}`; + + // remove the internal overrides key from the computed theme object + // the override values are only used internally in getComputed() + if (key === EUI_THEME_OVERRIDES_KEY) { + return; + } + // @ts-expect-error `key` is not necessarily a colorMode key if ([...Object.values(COLOR_MODES_STANDARD), colorMode].includes(key)) { if (key !== colorMode) { @@ -262,10 +280,43 @@ export const getComputed = ( over[key] instanceof Computed || isComputedLike(over[key]) ? over[key].getValue(base.root, over.root, output, colorMode) : over[key]; + + const hcmBaseValue = _hcmBaseOverrides + ? _hcmBaseOverrides[key] instanceof Computed || + isComputedLike(_hcmBaseOverrides[key]) + ? _hcmBaseOverrides[key].getValue( + base.root, + _hcmBaseOverrides.root, + output, + colorMode + ) + : _hcmBaseOverrides[key] + : undefined; + const hcmOverValue = _hcmOverOverrides + ? _hcmOverOverrides[key] instanceof Computed || + isComputedLike(_hcmOverOverrides[key]) + ? _hcmOverOverrides[key].getValue( + base.root, + _hcmOverOverrides.root, + output, + colorMode + ) + : _hcmOverOverrides[key] + : undefined; + + const hcmCombinedOverValue = hcmOverValue ?? hcmBaseValue; + + // combine internal overrides with manual overrides + const combinedOverValue = + isObject(overValue) && isObject(hcmOverValue) + ? mergeDeep(overValue, hcmCombinedOverValue) + : // optional overrides e.g. on provider level should still override theme level + overValue ?? hcmCombinedOverValue; + if (isObject(baseValue) && !Array.isArray(baseValue)) { - loop(baseValue, overValue ?? {}, checkExisting, newPath); + loop(baseValue, combinedOverValue ?? {}, checkExisting, newPath); } else { - setOn(output, newPath, overValue ?? baseValue); + setOn(output, newPath, combinedOverValue ?? baseValue); } } }); 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..9bfa2ff2af3 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_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png index 0fdaf4a2790..a5be15bcdac 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 e46a493f200..8f5c7bb4bdd 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 0ad91465182..527f1adeeb3 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..0165dd5976b 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_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png index fd0447d8c46..eaca71504a8 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 4ac4b3f785c..77e2257ceb0 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 cd619bb6b47..08b6bd882be 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/8558.md b/packages/eui/changelogs/upcoming/8558.md new file mode 100644 index 00000000000..dc6d1cbe7eb --- /dev/null +++ b/packages/eui/changelogs/upcoming/8558.md @@ -0,0 +1,2 @@ +- Updated `EuiProvider` to build themes including `highContrastMode` + diff --git a/packages/eui/src/services/theme/provider.tsx b/packages/eui/src/services/theme/provider.tsx index 3f8153f382f..9f3af8f284c 100644 --- a/packages/eui/src/services/theme/provider.tsx +++ b/packages/eui/src/services/theme/provider.tsx @@ -156,7 +156,8 @@ export const EuiThemeProvider = ({ modificationsWithHighContrast, `_${system.key}` ) as typeof system, - colorMode + colorMode, + highContrastMode ); setTimeout(() => { @@ -213,11 +214,12 @@ export const EuiThemeProvider = ({ getComputed( system, buildTheme(modificationsWithHighContrast, `_${system.key}`), - colorMode + colorMode, + highContrastMode ) ); } - }, [colorMode, system, modificationsWithHighContrast]); + }, [colorMode, highContrastMode, system, modificationsWithHighContrast]); const [themeCSSVariables, _setThemeCSSVariables] = useState(); const setThemeCSSVariables = useCallback(