diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 41809e3837e..06a3f6f9716 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -12,6 +12,8 @@ Remove or strikethrough items that do not apply to your PR. - Browser QA - [ ] Checked in both **light and dark** modes + - [ ] Checked in both [MacOS](https://support.apple.com/lv-lv/guide/mac-help/unac089/mac) and [Windows](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) **high contrast modes** + - (_[emulate forced colors](https://devtoolstips.org/tips/en/emulate-forced-colors/) if you do not have access to a Windows machine_.) - [ ] Checked in **mobile** - [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox** - [ ] Checked for **accessibility** including keyboard-only and screenreader modes diff --git a/packages/docusaurus-theme/src/components/demo/demo.tsx b/packages/docusaurus-theme/src/components/demo/demo.tsx index 578c1033c2d..3321064358a 100644 --- a/packages/docusaurus-theme/src/components/demo/demo.tsx +++ b/packages/docusaurus-theme/src/components/demo/demo.tsx @@ -56,7 +56,7 @@ export interface DemoProps extends PropsWithChildren { const getDemoStyles = (euiTheme: UseEuiTheme) => ({ demo: css` - --docs-demo-border-color: ${euiTheme.euiTheme.colors.lightShade}; + --docs-demo-border-color: ${euiTheme.euiTheme.border.color}; --docs-demo-border-radius: ${euiTheme.euiTheme.size.s}; border: 1px solid var(--docs-demo-border-color); diff --git a/packages/docusaurus-theme/src/components/guideline/guideline.tsx b/packages/docusaurus-theme/src/components/guideline/guideline.tsx index 385c59beec3..6b5be899611 100644 --- a/packages/docusaurus-theme/src/components/guideline/guideline.tsx +++ b/packages/docusaurus-theme/src/components/guideline/guideline.tsx @@ -5,6 +5,7 @@ import { EuiPanelProps, useEuiMemoizedStyles, UseEuiTheme, + highContrastModeStyles, } from '@elastic/eui'; import { css } from '@emotion/react'; import { GuidelineType } from './types'; @@ -17,23 +18,38 @@ export interface GuidelineProps extends PropsWithChildren { panelStyle?: EuiPanelProps['style']; } -const getGuidelineStyles = ({ euiTheme }: UseEuiTheme) => ({ - root: css` - margin-block: var(--eui-theme-content-vertical-spacing); - `, - wrapper: css` - border-block-end: 2px solid ${euiTheme.colors.lightShade}; - `, - wrapperDo: css` - border-color: ${euiTheme.colors.success}; - `, - wrapperDont: css` - border-color: ${euiTheme.colors.danger}; - `, - textWrapper: css` - margin-block-start: var(--eui-size-xs); - `, -}); +const getGuidelineStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + return { + root: css` + margin-block: var(--eui-theme-content-vertical-spacing); + `, + wrapper: css` + border-block-end: ${euiTheme.border.thick}; + border-start-start-radius: ${euiTheme.border.radius.medium}; + border-start-end-radius: ${euiTheme.border.radius.medium}; + overflow: hidden; + + ${highContrastModeStyles(euiThemeContext, { + // Code block is used within a panel which already has a border - skip doubling up + preferred: ` + & > .euiCodeBlock { + border: none; + } + `, + })} + `, + wrapperDo: css` + border-color: ${euiTheme.colors.success}; + `, + wrapperDont: css` + border-color: ${euiTheme.colors.danger}; + `, + textWrapper: css` + margin-block-start: var(--eui-size-xs); + `, + }; +}; export const Guideline = ({ children, diff --git a/packages/docusaurus-theme/src/components/theme_context/index.tsx b/packages/docusaurus-theme/src/components/theme_context/index.tsx index a9a29193320..4fccecb8a67 100644 --- a/packages/docusaurus-theme/src/components/theme_context/index.tsx +++ b/packages/docusaurus-theme/src/components/theme_context/index.tsx @@ -6,6 +6,7 @@ import { } from 'react'; import useIsBrowser from '@docusaurus/useIsBrowser'; import { + EUI_THEME, EuiProvider, EuiThemeAmsterdam, EuiThemeColorMode, @@ -29,10 +30,19 @@ export const AVAILABLE_THEMES = [ const EUI_COLOR_MODES = ['light', 'dark'] as EuiThemeColorMode[]; -const defaultState = { +const defaultState: { + colorMode: EuiThemeColorMode; + highContrastMode: boolean | undefined; + theme: EUI_THEME; + changeColorMode: (colorMode: EuiThemeColorMode) => void; + changeHighContrastMode: (highContrastMode: boolean) => void; + changeTheme: (themeValue: string) => void; +} = { colorMode: EUI_COLOR_MODES[0] as EuiThemeColorMode, - changeColorMode: (colorMode: EuiThemeColorMode) => {}, + highContrastMode: undefined, theme: AVAILABLE_THEMES[0]!, + changeColorMode: (colorMode: EuiThemeColorMode) => {}, + changeHighContrastMode: (highContrastMode: boolean) => {}, changeTheme: (themeValue: string) => {}, }; @@ -45,7 +55,7 @@ export const AppThemeProvider: FunctionComponent = ({ const [colorMode, setColorMode] = useState(() => { if (isBrowser) { return ( - (localStorage.getItem('theme') as EuiThemeColorMode) ?? + (localStorage.getItem('colorMode') as EuiThemeColorMode) ?? defaultState.colorMode ); } @@ -53,6 +63,18 @@ export const AppThemeProvider: FunctionComponent = ({ return defaultState.colorMode; }); + const [highContrastMode, setHighContrastMode] = useState( + () => { + if (isBrowser) { + return localStorage.getItem('highContrastMode') + ? localStorage.getItem('highContrastMode') === 'true' + : defaultState.highContrastMode; + } + + return defaultState.highContrastMode; + } + ); + const [theme, setTheme] = useState(defaultState.theme); const handleChangeTheme = (themeValue: string) => { @@ -61,12 +83,19 @@ export const AppThemeProvider: FunctionComponent = ({ setTheme((currentTheme) => themeObj ?? currentTheme); }; + const handleChangeHighContrastMode = (highContrastMode: boolean) => { + localStorage.setItem('highContrastMode', highContrastMode.toString()); + setHighContrastMode(highContrastMode); + }; + return ( @@ -75,6 +104,7 @@ export const AppThemeProvider: FunctionComponent = ({ modify={EuiThemeOverrides} colorMode={colorMode} theme={theme.provider} + highContrastMode={highContrastMode} > {children} diff --git a/packages/docusaurus-theme/src/components/theme_switcher/index.tsx b/packages/docusaurus-theme/src/components/theme_switcher/index.tsx index eeb4a1706d3..729254a62cb 100644 --- a/packages/docusaurus-theme/src/components/theme_switcher/index.tsx +++ b/packages/docusaurus-theme/src/components/theme_switcher/index.tsx @@ -4,9 +4,13 @@ import { EuiAvatar, EuiButtonEmpty, euiFocusRing, + EuiHorizontalRule, EuiListGroup, EuiListGroupItem, EuiPopover, + EuiPopoverFooter, + EuiSwitch, + EuiSwitchEvent, useEuiMemoizedStyles, useEuiTheme, UseEuiTheme, @@ -33,12 +37,21 @@ const getStyles = (euiThemeContext: UseEuiTheme) => { }; export const ThemeSwitcher = () => { - const { euiTheme } = useEuiTheme(); + const euiThemeContext = useEuiTheme(); + const { euiTheme } = euiThemeContext; + const [currentTheme, setCurrentTheme] = useState( AVAILABLE_THEMES[0]?.value ?? '' ); const [isPopoverOpen, setPopoverOpen] = useState(false); - const { theme, changeTheme } = useContext(AppThemeContext); + const appContext = useContext(AppThemeContext); + const { theme, changeTheme, changeHighContrastMode } = appContext; + + const isForcedContrastMode = euiThemeContext.highContrastMode === 'forced'; + const _highContrastMode = + appContext.colorMode && !isForcedContrastMode + ? appContext.highContrastMode + : euiThemeContext.highContrastMode; useEffect(() => { changeTheme(currentTheme); @@ -63,7 +76,7 @@ export const ThemeSwitcher = () => { isOpen={isPopoverOpen} closePopover={() => setPopoverOpen(false)} button={button} - panelPaddingSize="xs" + panelPaddingSize="none" repositionOnScroll aria-label="EUI theme list" > @@ -89,6 +102,17 @@ export const ThemeSwitcher = () => { ); })} + + { + changeHighContrastMode(!_highContrastMode); + }} + disabled={isForcedContrastMode} + /> + ); }; diff --git a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx index 52c20a72796..a21906fb356 100644 --- a/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx +++ b/packages/docusaurus-theme/src/theme/DocRoot/Layout/Sidebar/index.tsx @@ -17,6 +17,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => { sidebar: css` --doc-sidebar-width: 258px; --doc-sidebar-hidden-width: 30px; + --ifm-toc-border-color: ${euiTheme.border.color}; // ensure scrolling still works display: flex; @@ -28,7 +29,7 @@ const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => { }; }; -// converted from css moduels to Emotion +// converted from css modules to Emotion const styles = { docSidebarContainer: css` display: none; diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 14419826647..57c4401f520 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -41,6 +41,8 @@ const component_colors: _EuiThemeComponentColors = { bottomBarBackground: SEMANTIC_COLORS.plainDark, + buttonGroupBackgroundDisabledSelected: + background_colors.backgroundBaseFormsControlDisabled, buttonGroupBorderColor: border_colors.borderBasePlain, buttonGroupBorderColorSelected: border_colors.borderBasePlain, buttonGroupFocusColor: brand_text_colors.textPrimary, @@ -120,6 +122,9 @@ const component_colors: _EuiThemeComponentColors = { markdownFormatTableBorderColor: border_colors.borderBasePlain, + overlayMaskBackground: background_colors.backgroundBaseInteractiveOverlay, + overlayMaskBackgroundHighContrast: `rgba(${SEMANTIC_COLORS.shade140RGB}, 0.9)`, + popoverPanelBackground: background_colors.backgroundBasePlain, popoverFooterBorderColor: border_colors.borderBaseSubdued, @@ -130,6 +135,8 @@ const component_colors: _EuiThemeComponentColors = { selectableListItemBorderColor: border_colors.borderBaseSubdued, + skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.shade100RGB}, 0.04)`, + superDatePickerBackgroundSuccees: background_colors.backgroundBaseSuccess, switchBackgroundOn: background_colors.backgroundFilledPrimary, @@ -181,6 +188,8 @@ export const components: _EuiThemeComponents = { 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, @@ -258,6 +267,10 @@ export const components: _EuiThemeComponents = { 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, @@ -268,6 +281,8 @@ export const components: _EuiThemeComponents = { selectableListItemBorderColor: dark_border_colors.borderBaseSubdued, + skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.plainLightRGB}, 0.3)`, + switchBackgroundOn: dark_background_colors.backgroundFilledPrimary, switchBackgroundOff: dark_background_colors.backgroundFilledText, switchUncompressedBackgroundDisabled: diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts index d96f124a54d..4beb59c8675 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -148,56 +148,58 @@ const _semantic_colors = { shade145: PRIMITIVE_COLORS.blueGrey145, }; -const plainLightRGB = chroma(_semantic_colors.plainLight).rgb().join(); -const primary70RGB = chroma(_semantic_colors.primary70).rgb().join(); -const primary100RGB = chroma(_semantic_colors.primary100).rgb().join(); -const accent70RGB = chroma(_semantic_colors.accent70).rgb().join(); -const accentSecondary70RGB = chroma(_semantic_colors.accentSecondary70) - .rgb() - .join(); -const success70RGB = chroma(_semantic_colors.success70).rgb().join(); -const warning40RGB = chroma(_semantic_colors.warning40).rgb().join(); -const danger70RGB = chroma(_semantic_colors.danger70).rgb().join(); -const shade100RGB = chroma(_semantic_colors.shade100).rgb().join(); -const shade120RGB = chroma(_semantic_colors.shade120).rgb().join(); +const _semantic_rgb_colors = { + plainLightRGB: chroma(_semantic_colors.plainLight).rgb().join(), + primary70RGB: chroma(_semantic_colors.primary70).rgb().join(), + primary100RGB: chroma(_semantic_colors.primary100).rgb().join(), + accent70RGB: chroma(_semantic_colors.accent70).rgb().join(), + accentSecondary70RGB: chroma(_semantic_colors.accentSecondary70).rgb().join(), + success70RGB: chroma(_semantic_colors.success70).rgb().join(), + warning40RGB: chroma(_semantic_colors.warning40).rgb().join(), + danger70RGB: chroma(_semantic_colors.danger70).rgb().join(), + shade100RGB: chroma(_semantic_colors.shade100).rgb().join(), + shade120RGB: chroma(_semantic_colors.shade120).rgb().join(), + shade140RGB: chroma(_semantic_colors.shade140).rgb().join(), +}; const _semantic_alpha_colors = { - plainLightAlpha8: `rgba(${plainLightRGB}, 0.08)`, - plainLightAlpha12: `rgba(${plainLightRGB}, 0.12)`, - plainLightAlpha16: `rgba(${plainLightRGB}, 0.16)`, - plainLightAlpha32: `rgba(${plainLightRGB}, 0.32)`, + plainLightAlpha8: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.08)`, + plainLightAlpha12: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.12)`, + plainLightAlpha16: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.16)`, + plainLightAlpha32: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.32)`, - primary70Alpha12: `rgba(${primary70RGB}, 0.12)`, - primary70Alpha16: `rgba(${primary70RGB}, 0.16)`, + primary70Alpha12: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.12)`, + primary70Alpha16: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.16)`, - primary100Alpha4: `rgba(${primary100RGB}, 0.04)`, - primary100Alpha8: `rgba(${primary100RGB}, 0.08)`, - primary100Alpha12: `rgba(${primary100RGB}, 0.12)`, + primary100Alpha4: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.04)`, + primary100Alpha8: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.08)`, + primary100Alpha12: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.12)`, - accent70Alpha12: `rgba(${accent70RGB}, 0.12)`, - accent70Alpha16: `rgba(${accent70RGB}, 0.16)`, + accent70Alpha12: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.12)`, + accent70Alpha16: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.16)`, - accentSecondary70Alpha12: `rgba(${accentSecondary70RGB}, 0.12)`, - accentSecondary70Alpha16: `rgba(${accentSecondary70RGB}, 0.16)`, + accentSecondary70Alpha12: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.12)`, + accentSecondary70Alpha16: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.16)`, - success70Alpha12: `rgba(${success70RGB}, 0.12)`, - success70Alpha16: `rgba(${success70RGB}, 0.16)`, + success70Alpha12: `rgba(${_semantic_rgb_colors.success70RGB}, 0.12)`, + success70Alpha16: `rgba(${_semantic_rgb_colors.success70RGB}, 0.16)`, - warning40Alpha12: `rgba(${warning40RGB}, 0.12)`, - warning40Alpha24: `rgba(${warning40RGB}, 0.24)`, + warning40Alpha12: `rgba(${_semantic_rgb_colors.warning40RGB}, 0.12)`, + warning40Alpha24: `rgba(${_semantic_rgb_colors.warning40RGB}, 0.24)`, - danger70Alpha12: `rgba(${danger70RGB}, 0.12)`, - danger70Alpha16: `rgba(${danger70RGB}, 0.16)`, + danger70Alpha12: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.12)`, + danger70Alpha16: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.16)`, - shade100Alpha4: `rgba(${shade100RGB}, 0.04)`, - shade100Alpha16: `rgba(${shade100RGB}, 0.16)`, - shade100Alpha24: `rgba(${shade100RGB}, 0.24)`, - shade100Alpha70: `rgba(${shade100RGB}, 0.7)`, + shade100Alpha4: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.04)`, + shade100Alpha16: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.16)`, + shade100Alpha24: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.24)`, + shade100Alpha70: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.7)`, - shade120Alpha70: `rgba(${shade120RGB}, 0.7)`, + shade120Alpha70: `rgba(${_semantic_rgb_colors.shade120RGB}, 0.7)`, }; export const SEMANTIC_COLORS = { ..._semantic_colors, ..._semantic_alpha_colors, + ..._semantic_rgb_colors, }; 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 2cc0d20d64f..d81207a3d7c 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts +++ b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts @@ -13,18 +13,28 @@ import { _EuiThemeShadowCustomColor, } from '../variables/shadow'; -export interface EuiShadowCustomColor { +export interface EuiShadowOptions { color?: string; + /** + * Note: not supported by all shadow utilities. + */ + property?: 'box-shadow' | 'filter'; + borderAllInHighContrastMode?: boolean; } /** * euiSlightShadow */ export const euiShadowXSmall = ( - { euiTheme, colorMode }: UseEuiTheme, - { color: _color }: _EuiThemeShadowCustomColor = {} + { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + options?: EuiShadowOptions ) => { - const color = _color || euiTheme.colors.shadow; + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + + const color = options?.color || euiTheme.colors.shadow; + return ` box-shadow: 0 .8px .8px ${getShadowColor(color, 0.04, colorMode)}, @@ -36,10 +46,15 @@ box-shadow: * bottomShadowSmall */ export const euiShadowSmall = ( - { euiTheme, colorMode }: UseEuiTheme, - { color: _color }: _EuiThemeShadowCustomColor = {} + { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + options?: EuiShadowOptions ) => { - const color = _color || euiTheme.colors.shadow; + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + + const color = options?.color || euiTheme.colors.shadow; + return ` box-shadow: 0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)}, @@ -52,12 +67,16 @@ box-shadow: * bottomShadowMedium */ export const euiShadowMedium = ( - { euiTheme, colorMode }: UseEuiTheme, - { color: _color, property }: _EuiThemeShadowCustomColor = {} + { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + options?: EuiShadowOptions ) => { - const color = _color || euiTheme.colors.shadow; + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + + const color = options?.color || euiTheme.colors.shadow; - if (property === 'filter') { + if (options?.property === 'filter') { // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs return `filter: drop-shadow(0 5.7px 9px ${getShadowColor( color, @@ -77,10 +96,15 @@ export const euiShadowMedium = ( * bottomShadow */ export const euiShadowLarge = ( - { euiTheme, colorMode }: UseEuiTheme, - { color: _color }: _EuiThemeShadowCustomColor = {} + { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + options?: EuiShadowOptions ) => { - const color = _color || euiTheme.colors.shadow; + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + + const color = options?.color || euiTheme.colors.shadow; + return ` box-shadow: 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, @@ -93,14 +117,21 @@ box-shadow: /** * bottomShadowLarge */ -export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor { +export interface EuiShadowXLarge extends EuiShadowOptions { reverse?: boolean; } export const euiShadowXLarge = ( - { euiTheme, colorMode }: UseEuiTheme, - { color: _color, reverse }: EuiShadowXLarge = {} + { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + options?: EuiShadowXLarge ) => { - const color = _color || euiTheme.colors.shadow; + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + + const color = options?.color || euiTheme.colors.shadow; + + const reverse = options?.reverse ?? false; + return ` box-shadow: 0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)}, @@ -113,10 +144,15 @@ box-shadow: * slightShadowHover */ export const euiSlightShadowHover = ( - { euiTheme, colorMode }: UseEuiTheme, - { color: _color }: _EuiThemeShadowCustomColor = {} + { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + options?: EuiShadowOptions ) => { - const color = _color || euiTheme.colors.shadow; + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + + const color = options?.color || euiTheme.colors.shadow; + return ` box-shadow: 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, @@ -133,10 +169,15 @@ box-shadow: * Useful for popovers that drop UP rather than DOWN. */ export const euiShadowFlat = ( - { euiTheme, colorMode }: UseEuiTheme, - { color: _color }: _EuiThemeShadowCustomColor = {} + { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + options?: EuiShadowOptions ) => { - const color = _color || euiTheme.colors.shadow; + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + + const color = options?.color || euiTheme.colors.shadow; + return ` box-shadow: 0 0 .8px ${getShadowColor(color, 0.06, colorMode)}, @@ -149,22 +190,41 @@ box-shadow: export const euiShadow = ( euiThemeContext: UseEuiTheme, size: _EuiThemeShadowSize = 'l', - { color }: _EuiThemeShadowCustomColor = {} + options?: EuiShadowOptions ) => { + if (euiThemeContext.highContrastMode) { + return _highContrastBorder(euiThemeContext.euiTheme, options); + } + switch (size) { case 'xs': - return euiShadowXSmall(euiThemeContext, { color }); + return euiShadowXSmall(euiThemeContext, options); case 's': - return euiShadowSmall(euiThemeContext, { color }); + return euiShadowSmall(euiThemeContext, options); case 'm': - return euiShadowMedium(euiThemeContext, { color }); + return euiShadowMedium(euiThemeContext, options); case 'l': - return euiShadowLarge(euiThemeContext, { color }); + return euiShadowLarge(euiThemeContext, options); case 'xl': - return euiShadowXLarge(euiThemeContext, { color }); + return euiShadowXLarge(euiThemeContext, options); default: console.warn('Please provide a valid size option to useEuiShadow'); return ''; } }; + +/** + * Internal utilities for replacing shadows with high contrast borders instead. + * NOTE: Windows' high contrast themes ignore *all* `box-shadow` CSS, + * so we use `border` CSS explicitly instead of shadows + */ + +const _highContrastBorder = ( + { border }: UseEuiTheme['euiTheme'], + { borderAllInHighContrastMode }: EuiShadowOptions = {} +) => { + return borderAllInHighContrastMode + ? `border: ${border.thin};` + : `border-block-end: ${border.thin};`; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/borders.ts b/packages/eui-theme-common/src/global_styling/variables/borders.ts index 10eda82eb9b..18ebe51ac78 100644 --- a/packages/eui-theme-common/src/global_styling/variables/borders.ts +++ b/packages/eui-theme-common/src/global_styling/variables/borders.ts @@ -37,7 +37,8 @@ export interface _EuiThemeBorderRadiusValues { export interface _EuiThemeBorderColorValues { /** - * Color for all borders; Default is `colors.lightShade` + * Color for all borders; Default is `colors.lightShade`. + * In high contrast mode, this value becomes `colors.fullShade` and cannot be overridden. */ color: ColorModeSwitch; } 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 b84e0fd479d..73e94c9c0bd 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -134,7 +134,7 @@ export type _EuiThemeTextColors = { */ subduedText: ColorModeSwitch; /** - * Computed against `colors.primaryText` + * Computed against `colors.textPrimary` */ link: ColorModeSwitch; diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts index ae6a38cac1e..44ee04568ca 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -14,10 +14,6 @@ import { _EuiThemeButtonColors } from './buttons'; import { _EuiThemeForm, _EuiThemeFormColors } from './forms'; export type _EuiThemeComponentColors = { - buttonGroupBorderColor: ColorModeSwitch; - buttonGroupBorderColorSelected: ColorModeSwitch; - buttonGroupFocusColor: ColorModeSwitch; - badgeBackground: ColorModeSwitch; badgeBackgroundSubdued: ColorModeSwitch; badgeBorderColorHollow: ColorModeSwitch; @@ -28,6 +24,11 @@ export type _EuiThemeComponentColors = { breadcrumbsApplicationBackground: ColorModeSwitch; breadcrumbsApplicationColor: ColorModeSwitch; + buttonGroupBackgroundDisabledSelected: ColorModeSwitch; + buttonGroupBorderColor: ColorModeSwitch; + buttonGroupBorderColorSelected: ColorModeSwitch; + buttonGroupFocusColor: ColorModeSwitch; + codeBackground: ColorModeSwitch; codeBackgroundSelected: ColorModeSwitch; codeColor: ColorModeSwitch; @@ -94,6 +95,9 @@ export type _EuiThemeComponentColors = { markdownFormatTableBorderColor: ColorModeSwitch; + overlayMaskBackground: ColorModeSwitch; + overlayMaskBackgroundHighContrast: ColorModeSwitch; + popoverPanelBackground: ColorModeSwitch; popoverFooterBorderColor: ColorModeSwitch; @@ -103,6 +107,8 @@ export type _EuiThemeComponentColors = { selectableListItemBorderColor: ColorModeSwitch; + skeletonBackgroundSkeletonMiddleHighContrast: ColorModeSwitch; + superDatePickerBackgroundSuccees: ColorModeSwitch; switchBackgroundOn: ColorModeSwitch; diff --git a/packages/eui-theme-common/src/global_styling/variables/shadow.ts b/packages/eui-theme-common/src/global_styling/variables/shadow.ts index 7761fbdb9a0..e8bd284645b 100644 --- a/packages/eui-theme-common/src/global_styling/variables/shadow.ts +++ b/packages/eui-theme-common/src/global_styling/variables/shadow.ts @@ -25,4 +25,5 @@ export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> = export interface _EuiThemeShadowCustomColor { color?: string; property?: 'box-shadow' | 'filter'; + borderAllInHighContrastMode?: boolean; } diff --git a/packages/eui-theme-common/src/services/theme/types.ts b/packages/eui-theme-common/src/services/theme/types.ts index 01bb7816b2c..f7790efeaac 100644 --- a/packages/eui-theme-common/src/services/theme/types.ts +++ b/packages/eui-theme-common/src/services/theme/types.ts @@ -49,6 +49,12 @@ export type StrictColorModeSwitch = { [key in EuiThemeColorModeStandard]: T; }; +// Consumers can pass a boolean to manually toggle the preferred high contrast mode, +// but our internal high contrast mode enum is slightly more granular to account for +// Windows's high contrast themes, which force colors/backgrounds/shadows +export type EuiThemeHighContrastModeProp = boolean; +export type EuiThemeHighContrastMode = 'forced' | 'preferred' | false; + export type EuiThemeShape = { colors: _EuiThemeColors; /** - Default value: 16 */ @@ -115,5 +121,6 @@ export type EuiThemeNested = { export interface UseEuiTheme { euiTheme: EuiThemeComputed; colorMode: EuiThemeColorModeStandard; + highContrastMode: EuiThemeHighContrastMode; modifications: EuiThemeModifications; } diff --git a/packages/eui-theme-common/src/utils.test.ts b/packages/eui-theme-common/src/utils.test.ts index c8577113e20..afcc8fe6862 100644 --- a/packages/eui-theme-common/src/utils.test.ts +++ b/packages/eui-theme-common/src/utils.test.ts @@ -36,6 +36,9 @@ describe('getColorMode', () => { it('uses `parentMode` as fallback', () => { expect(getColorMode(undefined, 'DARK')).toEqual('DARK'); }); + it('uses `parentMode` (the system OS setting) if isForced is true', () => { + expect(getColorMode('LIGHT', 'DARK', true)).toEqual('DARK'); + }); it("understands 'INVERSE'", () => { expect(getColorMode('INVERSE', 'DARK')).toEqual('LIGHT'); expect(getColorMode('INVERSE', 'LIGHT')).toEqual('DARK'); diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts index 445e538b582..c7058f6d99c 100644 --- a/packages/eui-theme-common/src/utils.ts +++ b/packages/eui-theme-common/src/utils.ts @@ -41,12 +41,14 @@ export const isInverseColorMode = ( * Returns the parent color mode if none is explicity set. * @param {string} colorMode - `light`, `dark`, or `inverse` * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback + * @param {boolean} isForced */ export const getColorMode = ( colorMode?: EuiThemeColorMode, - parentColorMode?: EuiThemeColorModeStandard + parentColorMode?: EuiThemeColorModeStandard, + isForced?: boolean ): EuiThemeColorModeStandard => { - if (colorMode == null) { + if (isForced || colorMode == null) { return parentColorMode || DEFAULT_COLOR_MODE; } const mode = colorMode.toUpperCase() as diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png index be32dc2ef24..5614fc58da0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Title_Alignment.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Title_Alignment.png new file mode 100644 index 00000000000..3c29a9729ef Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Title_Alignment.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png index 23e5786adf1..94779ed285c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png differ 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 new file mode 100644 index 00000000000..80a9cdb477f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png index cdf8f40b480..3b938d26393 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png index 255cc9c92d5..eff4682c61c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png new file mode 100644 index 00000000000..d8bbba53646 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png new file mode 100644 index 00000000000..d93f4ebdad7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png index da5b2bb2917..05164d7df3f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png new file mode 100644 index 00000000000..57522e2169d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png index 9ddb3c1fab3..f1705574d6f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png new file mode 100644 index 00000000000..5c31b2a9589 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png index 880f90b2ae7..db19c1a6bdc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png index e01d4a688f3..d2214e023a8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png new file mode 100644 index 00000000000..4ebbdc61852 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png new file mode 100644 index 00000000000..f30a5e71eba Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png index 46bbe345bdc..555bee20da7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png index a8118922970..7131f36ed57 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png new file mode 100644 index 00000000000..ca4c74b7edb Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png index 83aae3b991b..7fdb66b0552 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png index 516cd40fcb3..f45bb2dcb83 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index 0e5ddb9cd99..466a7a6ae83 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png new file mode 100644 index 00000000000..b1a29b78b85 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png new file mode 100644 index 00000000000..3bf0062875f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png index cfca4328344..8612721cb1a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png new file mode 100644 index 00000000000..afb0a7feb70 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Text_Props.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png new file mode 100644 index 00000000000..d4b3d07d139 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png index 8e2854a91db..b2f97939277 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.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 new file mode 100644 index 00000000000..3bf0881e436 Binary files /dev/null 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_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png new file mode 100644 index 00000000000..3e48e87d0ca Binary files /dev/null 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_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png new file mode 100644 index 00000000000..1813662a099 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.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 new file mode 100644 index 00000000000..76460531b8e Binary files /dev/null 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 new file mode 100644 index 00000000000..d606f9c6026 Binary files /dev/null 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_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png index fb1d523be31..b45af5a1d58 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png index d2e87ed83cc..403b0717337 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png index e08939d369d..e855ffe059a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png index e08939d369d..e855ffe059a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png index cbc762dc46d..ec3742ecb35 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png new file mode 100644 index 00000000000..73c3af2dd69 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png new file mode 100644 index 00000000000..62398fb5881 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png index 453ecc2f600..ed8ed01d164 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png index 42b9757c15d..a5998926bdd 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png index c470d47530e..8d33cc69dd8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png index 83034eabd98..5e8a379e9ff 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_High_Contrast.png new file mode 100644 index 00000000000..5977ea3ac6a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png new file mode 100644 index 00000000000..d6d47c55384 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png new file mode 100644 index 00000000000..f525a1f29e7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png index de5f6bedc37..d1cd3952338 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png index d670da7cfd1..1d9cd05d4c4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png index 36a37f90ac1..8493e7b8eca 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png index 9f14a9ecde2..2d28ef30d1f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.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 new file mode 100644 index 00000000000..848bd1ede1f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png index 02f9ed8cfe7..b9d2218d4cb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png index 4cf9828682b..df76a272524 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png index d7329cc3ce2..45cfa05631b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png index 4cf9828682b..df76a272524 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png index 8c28f2b6cde..9fb03f4d9c3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png new file mode 100644 index 00000000000..091d7b41009 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png new file mode 100644 index 00000000000..2b764b44c2a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png index 9d9d68c7c98..bc9714af33b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png index fd1fdafb328..7cb528821ba 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png new file mode 100644 index 00000000000..62b7f8599fa Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png new file mode 100644 index 00000000000..143a1cc5f64 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png index a545adf5f83..fe253e5f2ce 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png index 5f83866abd9..4da5ff41d9e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png new file mode 100644 index 00000000000..92609f69fd6 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png index 0365a76688d..7620e186314 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Dark_Mode.png new file mode 100644 index 00000000000..d7e8bdd88db Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_High_Contrast.png new file mode 100644 index 00000000000..2f23de10693 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index 16dbfef8af7..e95c299501c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png index f034f713ac0..8ebf2c6439c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png index c90570fae4f..49928f81951 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png new file mode 100644 index 00000000000..19d195395a5 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png index 0dce09afc21..ae779cf0906 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png new file mode 100644 index 00000000000..bc1468b3277 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png new file mode 100644 index 00000000000..5f018e79f53 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png index f4e6a9bb2b0..907128100c0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png index 6bf3ad681e8..e843e17ee52 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index 714f7828fab..9970e0705f5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png index 3c28ebe7988..c77106cb725 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png index 3c28ebe7988..c77106cb725 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index f26400cd4ae..abad697e35f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png index daea8cd6e0b..2a599bf6ce8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png new file mode 100644 index 00000000000..95fdf295782 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png new file mode 100644 index 00000000000..754f269f18d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_High_Contrast.png new file mode 100644 index 00000000000..eaa2e5b2cd1 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png index 8611d042933..c57d4fb8e87 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png new file mode 100644 index 00000000000..908551aad11 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png index f50438b823f..facc4a5f617 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png index f50438b823f..facc4a5f617 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png index 3bb9da82fde..cfaaf47e961 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png new file mode 100644 index 00000000000..27ef9eba807 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png index 9acdc2dda92..6d4d2c91582 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png index c1016304e86..5c8858cef47 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png index 3390dddc868..87ea1af37db 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png index 8fcdc10bf0b..3be14d5929d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png index 2ddbb3a8219..bfe6ffcd96e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png index b5920626cb9..3a2d3cd0234 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png index 873fe128f89..3a9018dd0ba 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.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 new file mode 100644 index 00000000000..89ef536dd37 Binary files /dev/null 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 new file mode 100644 index 00000000000..0a841374556 Binary files /dev/null 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_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png index 5a9c73691cf..418f166fe1e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png index 4d671998e3a..ea6cb59c868 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png index 7f8065c523b..3e3cd513ac5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png index 728d7c564d9..bc2a750915f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png index bcc597d1445..f96470b82e0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.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 new file mode 100644 index 00000000000..73207461aed Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png index e4b7176e99e..b41bc981b0f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png index 667171a4a1d..54297c78c68 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png index d5878871e80..194cb9ad413 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png index 81102d121c3..0e29dd299b5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png new file mode 100644 index 00000000000..d06e4ef75a1 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png index 0cc56411a7a..2b12993a74d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 049563d9350..e012d8b0438 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png index ed67cb7f7b6..a48712b9af3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png index 8b170d21ecb..8816b700113 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png new file mode 100644 index 00000000000..4261d96bfc1 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png new file mode 100644 index 00000000000..56d77b878c1 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png new file mode 100644 index 00000000000..a246939b8b6 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_High_Contrast_Mode.png new file mode 100644 index 00000000000..f8c39bc9a4d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png deleted file mode 100644 index dda94748361..00000000000 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_High_Contrast.png new file mode 100644 index 00000000000..d784abfb7a5 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png new file mode 100644 index 00000000000..cbbc1d2071c Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png index e561565f629..054eb372114 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Title_Alignment.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Title_Alignment.png new file mode 100644 index 00000000000..d69be0bf55f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Title_Alignment.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png index 339b3d8841d..d2e3bb6aab0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.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 new file mode 100644 index 00000000000..d17f2818a29 Binary files /dev/null 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_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png index 1f564ef7d0d..2bcbb62f1d6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png index ad641e3aedb..df2417d0cde 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png new file mode 100644 index 00000000000..1e6188b4dc7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png new file mode 100644 index 00000000000..4850001f3ca Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png index 2a644432bc8..a62358c92df 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png new file mode 100644 index 00000000000..54e1c2af5af Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png index f8ef76e31ee..e26cef4cc06 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png new file mode 100644 index 00000000000..d62934aaf3a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png index bc5516261cb..01851989f83 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png index 1ede4615817..e105517ee87 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png new file mode 100644 index 00000000000..8343983f688 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png new file mode 100644 index 00000000000..bf95d981b1b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png index 3a99a77b808..4cbc05d3adc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png index bd6b1e56d05..36b6df02233 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png new file mode 100644 index 00000000000..5d5331b778e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png index 79c9e739db3..ff8ac7e132c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png index b3b26bb77cb..ceb2ee2d2de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index ab12069a9a7..e4195da2665 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png new file mode 100644 index 00000000000..a5f7f9dbb96 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png new file mode 100644 index 00000000000..723a4a58abe Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png index 20ff2475849..4b383ec608f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png new file mode 100644 index 00000000000..d875e8071d0 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Text_Props.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png new file mode 100644 index 00000000000..fcc7bc9ceb3 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png index f41fb426e0c..1d8ad32a5ab 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.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 new file mode 100644 index 00000000000..e9b4a685628 Binary files /dev/null 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_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Kitchen_Sink.png new file mode 100644 index 00000000000..2bcc6c8dac0 Binary files /dev/null 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_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.png new file mode 100644 index 00000000000..e6da2eb5ea9 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Palette_With_Stops.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 new file mode 100644 index 00000000000..ea292af75c1 Binary files /dev/null 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 new file mode 100644 index 00000000000..91f29c27774 Binary files /dev/null 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_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png index bef081036b0..b31a6cf4fd0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png index d8cd860c1b1..40df851a789 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png index 72d7030aaa6..699f67b486c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png index 72d7030aaa6..699f67b486c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png index f2b6bbccd41..21d9f229709 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png new file mode 100644 index 00000000000..45aeb01f64a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png new file mode 100644 index 00000000000..f773fe0afac Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png index 0053d4da6f2..5b12a565106 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png index 9241159e791..43416ae80ba 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png index 73b34dc218f..29f54b191e4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png index 1bf15268fef..415aa4200e8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_High_Contrast.png new file mode 100644 index 00000000000..970ad80559e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png new file mode 100644 index 00000000000..3134bf02c29 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png new file mode 100644 index 00000000000..086ac8e8d9b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png index 67bcf98100c..4c9166526b9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png index a7b31981ac6..5d4420b6643 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png index bb5c17a4785..89c35bab8f8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png index 3e7155c5c65..4a5b714664e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.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 new file mode 100644 index 00000000000..c52023250ff Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png index 14bc2c6ecf1..c7c17d17fd6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png index 181c6571d7b..2d8f0853d2d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png index 50d67dc156e..dac2661491b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png index 181c6571d7b..2d8f0853d2d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png index 6a239338663..e6911f2d9d4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png new file mode 100644 index 00000000000..a054cf73ca6 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png new file mode 100644 index 00000000000..a846178c2ba Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png index 23b8e5ad89c..104521fc22f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png index d738b9a4171..e0d5b9c728a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png new file mode 100644 index 00000000000..2cc6611fb5a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png new file mode 100644 index 00000000000..314fee0ff56 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png index 1ebdcff9790..b789d0b5753 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png index 7201473c66f..81c781d8557 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png new file mode 100644 index 00000000000..d3482659a58 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png index 0e72ca86ec8..33813dbe646 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Dark_Mode.png new file mode 100644 index 00000000000..f15b7a8b679 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png new file mode 100644 index 00000000000..77f9c5f626a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index 77e496f9626..24b8c4312cf 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png index 1d6d530d702..9a2f5d2b226 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png index 86151d5243f..be44e7722bf 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png new file mode 100644 index 00000000000..891ad9d9312 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png index 70de0f7fba9..4cce5bdccee 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png new file mode 100644 index 00000000000..ed2e31cb71a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png new file mode 100644 index 00000000000..e4186c275c8 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index 2d5e31dee75..27246c69a44 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png index e02950fbd53..fc8a7372ea6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png index 2596a6d64a1..12aae94d048 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index 33ba0702e8c..aed051dde31 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png index 838c3e8ce24..a862bf653b3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png new file mode 100644 index 00000000000..834237e6c38 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png new file mode 100644 index 00000000000..2be6041167c Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_High_Contrast.png new file mode 100644 index 00000000000..31b5351c7f5 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png index bedd6bc0832..92ebe12ec60 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png new file mode 100644 index 00000000000..2df51313885 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png index 0cf7e511db7..809f5df963b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png index 0cf7e511db7..809f5df963b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png index c6b6929d0b4..3b8f47fca4d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png new file mode 100644 index 00000000000..27a4f0807ff Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png index 179c2162845..460889f796a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png index 6f46c816085..fba9b12700e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png index bf7c92ac8c1..907468dd5e0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.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 new file mode 100644 index 00000000000..a91a120a112 Binary files /dev/null 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 new file mode 100644 index 00000000000..15ce141dc5b Binary files /dev/null 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_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png index fbe3f40bcb4..f1c94685891 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png index 1669de1df58..4e488bec730 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png index efbf9c15bbe..8e01f512f2b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png index fbdd6e49377..d3a33acbd09 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png index f878863af72..73580790af2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.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 new file mode 100644 index 00000000000..81239a3cb40 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png index 6c70427f2b8..49d0009bc7c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png index 1b53ffa8a35..1a0bda8e6c9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png index c670993bf52..784b9f7f8b3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png index 0e7629e473d..e6ba9362105 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png index 14eaae98a4f..7f05e1f482f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png new file mode 100644 index 00000000000..9fcbe6faf15 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png index 0a78327f12c..997bc2198f1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 1a58280ab13..b51c78e04a4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index 20989ddf016..f09c2e199af 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png index b6030ee84f2..29b3093dc27 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png index cd2c368d2cc..5040277dff1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png new file mode 100644 index 00000000000..74166718126 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png new file mode 100644 index 00000000000..8054721cb7e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png new file mode 100644 index 00000000000..81abfe7c03c Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_High_Contrast_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_High_Contrast_Mode.png new file mode 100644 index 00000000000..a499f49f7b0 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_High_Contrast_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png deleted file mode 100644 index 5b0b69246a6..00000000000 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png and /dev/null differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_High_Contrast.png new file mode 100644 index 00000000000..7157ed50abe Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png new file mode 100644 index 00000000000..3e9b24c4621 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_High_Contrast.png differ diff --git a/packages/eui/.storybook/decorator.tsx b/packages/eui/.storybook/decorator.tsx index e11f1ac82ad..3a6cf087e96 100644 --- a/packages/eui/.storybook/decorator.tsx +++ b/packages/eui/.storybook/decorator.tsx @@ -128,6 +128,13 @@ const storybookToolbarColorModes: Array< { value: 'dark', title: 'Dark mode', icon: 'circle' }, ]; +const storybookToolbarHighContrastMode: Array< + ToolbarDisplay & { value: boolean } +> = [ + { value: false, title: 'High contrast off', icon: 'circlehollow' }, + { value: true, title: 'High contrast on', icon: 'circle' }, +]; + const storybookToolbarWritingModes: Array< ToolbarDisplay & { value: WritingModes } > = [ @@ -154,6 +161,17 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = { dynamicTitle: true, }, }, + highContrastMode: { + description: 'High contrast mode for EuiProvider theme', + defaultValue: window?.matchMedia?.('(prefers-contrast: more)').matches + ? true + : false, + toolbar: { + title: 'Contrast mode', + items: storybookToolbarHighContrastMode, + dynamicTitle: true, + }, + }, writingMode: { description: 'Writing mode for testing logical property directions', defaultValue: 'ltr', diff --git a/packages/eui/.storybook/preview.tsx b/packages/eui/.storybook/preview.tsx index 475cba632d5..e6ec16dd50d 100644 --- a/packages/eui/.storybook/preview.tsx +++ b/packages/eui/.storybook/preview.tsx @@ -46,6 +46,7 @@ const preview: Preview = { (Story, context) => ( `textParagraph` + - `title` -> `textHeading` + - `subduedText` -> `textSubdued` + - `disabledText` -> `textDisabled` + - `accentText` -> `textAccent` + - `dangerText` -> `textDanger` + - `warningText` -> `textWarning` diff --git a/packages/eui/src-docs/src/actions/action_types.js b/packages/eui/src-docs/src/actions/action_types.js index 07aa8e948fa..95ca9e6de82 100644 --- a/packages/eui/src-docs/src/actions/action_types.js +++ b/packages/eui/src-docs/src/actions/action_types.js @@ -2,7 +2,4 @@ export default { // Example nav actions REGISTER_SECTION: 'REGISTER_SECTION', UNREGISTER_SECTION: 'UNREGISTER_SECTION', - - // Locale actions - TOGGLE_LOCALE: 'TOGGLE_LOCALE', }; diff --git a/packages/eui/src-docs/src/actions/index.js b/packages/eui/src-docs/src/actions/index.js deleted file mode 100644 index 5c3431e4d43..00000000000 --- a/packages/eui/src-docs/src/actions/index.js +++ /dev/null @@ -1 +0,0 @@ -export { toggleLocale } from './locale_actions'; diff --git a/packages/eui/src-docs/src/actions/locale_actions.js b/packages/eui/src-docs/src/actions/locale_actions.js deleted file mode 100644 index c306dc9b991..00000000000 --- a/packages/eui/src-docs/src/actions/locale_actions.js +++ /dev/null @@ -1,8 +0,0 @@ -import ActionTypes from './action_types'; - -export const toggleLocale = (locale) => ({ - type: ActionTypes.TOGGLE_LOCALE, - data: { - locale, - }, -}); diff --git a/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js b/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js index 223aee0cb90..7c339c92149 100644 --- a/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/packages/eui/src-docs/src/components/guide_page/guide_page_chrome.js @@ -302,7 +302,5 @@ export class GuidePageChrome extends Component { GuidePageChrome.propTypes = { currentRoute: PropTypes.object.isRequired, - onToggleLocale: PropTypes.func.isRequired, - selectedLocale: PropTypes.string.isRequired, navigation: PropTypes.array.isRequired, }; diff --git a/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx b/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx index f68018f3927..9be1dc1bc8b 100644 --- a/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx +++ b/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx @@ -21,15 +21,7 @@ import { VersionSwitcher } from './version_switcher'; const GITHUB_URL = 'https://github.com/elastic/eui'; -export type GuidePageHeaderProps = { - onToggleLocale: () => {}; - selectedLocale: string; -}; - -export const GuidePageHeader: React.FunctionComponent = ({ - onToggleLocale, - selectedLocale, -}) => { +export const GuidePageHeader = () => { const isMobileSize = useIsWithinBreakpoints(['xs', 's']); const logo = useMemo(() => { @@ -112,18 +104,9 @@ export const GuidePageHeader: React.FunctionComponent = ({ }, [codesandbox, github]); const rightSideItems = isMobileSize - ? [ - , - mobileMenu, - ] + ? [, mobileMenu] : [ - , + , github, , codesandbox, diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx index 7975bff217f..a69e2cce399 100644 --- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx +++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx @@ -1,6 +1,10 @@ import React, { FunctionComponent, useState, useEffect, useMemo } from 'react'; -import { EuiCodeBlock } from '../../../../../src/components/code'; -import { EuiButtonEmpty } from '../../../../../src/components/button'; +import { + EuiCodeBlock, + EuiButtonEmpty, + EuiHorizontalRule, + useEuiTheme, +} from '../../../../../src'; // @ts-ignore Not TS import { CodeSandboxLink } from '../../codesandbox'; // @ts-ignore Not TS @@ -46,6 +50,8 @@ export const GuideSectionExampleCode: FunctionComponent< ) : undefined; + const { highContrastMode } = useEuiTheme(); + return ( <> {codeToRender} + {highContrastMode && } {codeSandboxLink} ); diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx index bbe1b68ad9b..7408af54462 100644 --- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx +++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_example.tsx @@ -2,7 +2,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; import { EuiSplitPanel } from '../../../../../src/components/panel'; import { _EuiSplitPanelInnerProps } from '../../../../../src/components/panel/split_panel/'; -import { EuiHorizontalRule } from '../../../../../src'; +import { EuiHorizontalRule, useEuiTheme } from '../../../../../src'; export interface GuideSectionExample { example: ReactNode; @@ -27,6 +27,8 @@ export const GuideSectionExample: FunctionComponent = ({ guideDemo__ghostBackground: ghostBackground, }); + const { highContrastMode } = useEuiTheme(); + return ( = ({ > {example} + {exampleToggles && !highContrastMode && ( + + )} {exampleToggles && ( - <> - - - {exampleToggles} - - + + {exampleToggles} + + )} + {exampleToggles && tabs && !highContrastMode && ( + )} - {exampleToggles && tabs && } {(tabs || tabContent) && ( {tabs} diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx index c1d215babef..2e71703bf6b 100644 --- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx +++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_description.tsx @@ -63,23 +63,25 @@ export const GuideSectionPropsDescription: FunctionComponent< return ( <> -
- - - -

{componentName}

- + + + +

{componentName}

+ + + {extendedTypesElements.length > 0 && ( + + +

[ extends {extendedTypesElements} ]

+ - {extendedTypesElements.length > 0 && ( - - -

[ extends {extendedTypesElements} ]

- - - )} - - {descriptionElement} -
+ )} + + {descriptionElement} ); }; diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx index 1fed2a84684..c17c7f0a0e2 100644 --- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx +++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_props_table.tsx @@ -23,7 +23,7 @@ export const GuideSectionPropsTable: FunctionComponent< const { props } = docgenInfo; return ( -
+ <> {componentName && ( -
+ ); }; diff --git a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx index fff2175e3b7..5575a3a836d 100644 --- a/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx +++ b/packages/eui/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx @@ -1,6 +1,10 @@ import React, { FunctionComponent } from 'react'; -import { EuiCodeBlock } from '../../../../../src/components/code'; -import { EuiSpacer } from '../../../../../src/components/spacer'; +import { + EuiCodeBlock, + EuiHorizontalRule, + EuiSpacer, + useEuiTheme, +} from '../../../../../src'; export type GuideSectionSnippets = { snippets: string | string[]; @@ -9,20 +13,29 @@ export type GuideSectionSnippets = { export const GuideSectionSnippets: FunctionComponent = ({ snippets, }) => { + const { highContrastMode } = useEuiTheme(); + const codeBlockProps = { + language: 'jsx', + fontSize: 'm', + paddingSize: 'm', + isCopyable: true, + // Code block is used within a panel which already has a border - skip doubling up + ...(highContrastMode && { css: { border: 'none' } }), + } as const; + let snippetCode; if (typeof snippets === 'string') { - snippetCode = ( - - {snippets} - - ); + snippetCode = {snippets}; } else { snippetCode = snippets.map((snip, index) => ( - - {snip} - - {index < snippets.length - 1 && } + {snip} + {index < snippets.length - 1 && + (highContrastMode ? ( + + ) : ( + + ))} )); } diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx index ab49cad3b0b..35cebc5fdf0 100644 --- a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx +++ b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx @@ -16,17 +16,20 @@ import { } from '../../../../src/components'; import { AVAILABLE_THEMES } from '../with_theme/theme_context'; -type GuideThemeSelectorProps = { - onToggleLocale: Function; - selectedLocale: string; -}; - -export const GuideThemeSelector: React.FunctionComponent< - GuideThemeSelectorProps -> = ({ onToggleLocale, selectedLocale }) => { +export const GuideThemeSelector = () => { const context = useContext(ThemeContext); const euiThemeContext = useEuiTheme(); - const colorMode = context.colorMode ?? euiThemeContext.colorMode; + + const isForced = euiThemeContext.highContrastMode === 'forced'; + const colorMode = + context.colorMode && !isForced + ? context.colorMode + : euiThemeContext.colorMode; + const highContrastMode = + context.colorMode && !isForced + ? context.highContrastMode + : euiThemeContext.highContrastMode; + const currentTheme: EUI_THEME = AVAILABLE_THEMES.find((theme) => theme.value === context.theme) || AVAILABLE_THEMES[0]; @@ -58,12 +61,20 @@ export const GuideThemeSelector: React.FunctionComponent< context.setContext({ colorMode: e.target.checked ? 'DARK' : 'LIGHT', }), + disabled: isForced, + }, + { + label: 'High contrast', + checked: !!highContrastMode, + onChange: (e: EuiSwitchEvent) => + context.setContext({ highContrastMode: e.target.checked }), + disabled: isForced, }, location.host.includes('803') && { label: 'i18n testing', - checked: selectedLocale === 'en-xa', + checked: context.i18n === 'en-xa', onChange: (e: EuiSwitchEvent) => - onToggleLocale(e.target.checked ? 'en-xa' : 'en'), + context.setContext({ i18n: e.target.checked ? 'en-xa' : 'en' }), }, ]; @@ -85,6 +96,7 @@ export const GuideThemeSelector: React.FunctionComponent< key={theme.value} icon={currentTheme.value === theme.value ? 'check' : 'empty'} onClick={() => { + closePopover(); context.setContext({ theme: theme.value }); }} > @@ -105,6 +117,7 @@ export const GuideThemeSelector: React.FunctionComponent< label={item.label} checked={item.checked} onChange={item.onChange} + disabled={item.disabled} /> ) : null diff --git a/packages/eui/src-docs/src/components/with_theme/language_selector.tsx b/packages/eui/src-docs/src/components/with_theme/language_selector.tsx index aea26bd226b..212fe0c271e 100644 --- a/packages/eui/src-docs/src/components/with_theme/language_selector.tsx +++ b/packages/eui/src-docs/src/components/with_theme/language_selector.tsx @@ -2,11 +2,30 @@ import React, { useContext } from 'react'; import { EuiButtonGroup } from '../../../../src/components'; -import { - ThemeContext, - theme_languages, - THEME_LANGUAGES, -} from './theme_context'; +import { ThemeContext } from './theme_context'; + +export const THEME_LANGUAGES = ['language--js', 'language--sass'] as const; + +export type ThemeLanguages = { + id: (typeof THEME_LANGUAGES)[number]; + label: string; + title: string; +}; + +export const themeLanguagesOptions: ThemeLanguages[] = [ + { + id: 'language--js', + label: 'CSS-in-JS', + title: 'Language selector: CSS-in-JS', + }, + { + id: 'language--sass', + label: 'Sass', + title: 'Language selector: Sass', + }, +]; + +const ids = themeLanguagesOptions.map(({ id }) => id); export const LanguageSelector = ({ onChange, @@ -17,7 +36,7 @@ export const LanguageSelector = ({ const toggleIdSelected = themeContext.themeLanguage; const onLanguageChange = (optionId: string) => { themeContext.setContext({ - themeLanguage: optionId as THEME_LANGUAGES['id'], + themeLanguage: optionId as ThemeLanguages['id'], }); onChange?.(optionId); }; @@ -27,8 +46,10 @@ export const LanguageSelector = ({ buttonSize="m" color="accent" legend="Language selector" - options={theme_languages} - idSelected={toggleIdSelected} + options={themeLanguagesOptions} + idSelected={ + ids.includes(toggleIdSelected) ? toggleIdSelected : 'language--js' + } onChange={(id) => onLanguageChange(id)} /> ); diff --git a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx index bbce9b95b29..b4abfa878b2 100644 --- a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx +++ b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx @@ -12,11 +12,12 @@ import { import { EuiThemeColorModeStandard } from '../../../../src/services'; // @ts-ignore importing from a JS file import { applyTheme, registerTheme } from '../../services'; +import { type ThemeLanguages } from './language_selector'; // @ts-ignore Sass -import amsterdamThemeLight from '../../theme_light.scss'; +import amsterdamThemeLight from '../../theme_amsterdam_light.scss'; // @ts-ignore Sass -import amsterdamThemeDark from '../../theme_dark.scss'; +import amsterdamThemeDark from '../../theme_amsterdam_dark.scss'; // @ts-ignore Sass import borealisThemeLight from '../../theme_borealis_light.scss'; @@ -55,44 +56,33 @@ AVAILABLE_THEMES.forEach((theme) => { ); }); -const URL_PARAM_KEY = 'themeLanguage'; -export type THEME_LANGUAGES = { - id: 'language--js' | 'language--sass'; - label: string; - title: string; -}; -export const theme_languages: THEME_LANGUAGES[] = [ - { - id: 'language--js', - label: 'CSS-in-JS', - title: 'Language selector: CSS-in-JS', - }, - { - id: 'language--sass', - label: 'Sass', - title: 'Language selector: Sass', - }, -]; -const THEME_LANGS = theme_languages.map(({ id }) => id); - export type ThemeContextType = { - theme: EUI_THEME['value']; - colorMode: EuiThemeColorModeStandard; - themeLanguage: THEME_LANGUAGES['id']; + theme?: EUI_THEME['value']; + colorMode?: EuiThemeColorModeStandard; + highContrastMode?: boolean; + i18n?: 'en' | 'en-xa'; + themeLanguage: ThemeLanguages['id']; // TODO: Can likely be deleted once Sass is fully deprecated setContext: (context: Partial) => void; }; export const ThemeContext = React.createContext({ - theme: THEME_NAMES[0], - colorMode: 'LIGHT', - themeLanguage: THEME_LANGS[0], + theme: undefined, + colorMode: undefined, + highContrastMode: undefined, + themeLanguage: 'language--js', + i18n: 'en', setContext: () => {}, }); -type State = Pick; +type State = Pick< + ThemeContextType, + 'theme' | 'colorMode' | 'highContrastMode' | 'themeLanguage' | 'i18n' +>; const localStorageKeyToStateMap = { themeName: 'theme', colorMode: 'colorMode', + highContrastMode: 'highContrastMode', + i18n: 'i18n', themeLanguage: 'themeLanguage', } as const; @@ -105,7 +95,13 @@ export class ThemeProvider extends React.Component { const theme = localStorage.getItem('themeName') || THEME_NAMES[0]; const colorMode = (localStorage.getItem('colorMode') as EuiThemeColorModeStandard) || - 'LIGHT'; + undefined; + + const highContrastMode = localStorage.getItem('highContrastMode') + ? localStorage.getItem('highContrastMode') === 'true' + : undefined; + + const i18n = (localStorage.getItem('i18n') as any) || 'en'; applyTheme( theme && THEME_NAMES.includes(theme) ? theme : THEME_NAMES[0], @@ -117,6 +113,8 @@ export class ThemeProvider extends React.Component { this.state = { theme, colorMode, + highContrastMode, + i18n, themeLanguage, }; @@ -132,7 +130,9 @@ export class ThemeProvider extends React.Component { }; updateLocalStorage = (key: LocalStorageKey, state: State) => { - localStorage.setItem(key, String(state[localStorageKeyToStateMap[key]])); + if (state[localStorageKeyToStateMap[key]] !== undefined) { + localStorage.setItem(key, String(state[localStorageKeyToStateMap[key]])); + } }; componentDidUpdate(_prevProps: never, prevState: State) { @@ -162,40 +162,40 @@ export class ThemeProvider extends React.Component { // to specific docs, e.g. ?themeLanguage=js, ?themeLanguage=sass // Note that because of our hash router, this logic only works on page load/full reload const urlParams = window?.location?.href?.split('?')[1]; // Note: we can't use location.search because of our hash router - const fromUrlParam = new URLSearchParams(urlParams).get(URL_PARAM_KEY); + const fromUrlParam = new URLSearchParams(urlParams).get('themeLanguage'); // Otherwise, obtain it from localStorage - const fromLocalStorage = localStorage.getItem(URL_PARAM_KEY); + const fromLocalStorage = localStorage.getItem('themeLanguage'); - let themeLanguage = ( + const themeLanguage = ( fromUrlParam ? `language--${fromUrlParam}` : fromLocalStorage - ) as THEME_LANGUAGES['id']; + ) as ThemeLanguages['id']; // If not set by either param or storage, or an invalid value, use the default - if (!themeLanguage || !THEME_LANGS.includes(themeLanguage)) - themeLanguage = THEME_LANGS[0]; - - return themeLanguage; + return themeLanguage || 'language--js'; }; - setThemeLanguageParam = (languageKey: THEME_LANGUAGES['id']) => { + setThemeLanguageParam = (languageKey: ThemeLanguages['id']) => { const languageValue = languageKey.replace('language--', ''); // Make our params more succinct const hash = window?.location?.hash?.split('?'); // Note: we can't use location.search because of our hash router const queryParams = hash[1]; const params = new URLSearchParams(queryParams); - params.set(URL_PARAM_KEY, languageValue); + params.set('themeLanguage', languageValue); window.location.hash = `${hash[0]}?${params.toString()}`; }; render() { const { children } = this.props; - const { theme, colorMode, themeLanguage } = this.state; + const { theme, colorMode, highContrastMode, i18n, themeLanguage } = + this.state; return ( { key={`modify__${name}-${idx}`} header={isPlayground ? 'Modify' : 'Default value'} textOnly={false} - className={isPlayground ? 'playgroundKnobs__rowCell' : undefined} > {isPlayground ? ( { }; const Knobs = ({ state, set, error, isPlayground = true }) => { + const { euiTheme } = useEuiTheme(); const isMobile = useIsWithinBreakpoints(['xs', 's']); const knobNames = Object.keys(state); @@ -532,12 +532,7 @@ const Knobs = ({ state, set, error, isPlayground = true }) => { }); return ( - +
{columns.map(({ name, width }, id) => { @@ -559,7 +554,7 @@ const Knobs = ({ state, set, error, isPlayground = true }) => { /> - +
); }; diff --git a/packages/eui/src-docs/src/services/playground/playground.js b/packages/eui/src-docs/src/services/playground/playground.js index 4b3b468d746..fb44ef31892 100644 --- a/packages/eui/src-docs/src/services/playground/playground.js +++ b/packages/eui/src-docs/src/services/playground/playground.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { css } from '@emotion/react'; import classNames from 'classnames'; import format from 'html-format'; @@ -7,7 +8,6 @@ import { EuiCodeBlock, EuiFlyoutBody, EuiFlyoutHeader, - EuiPanel, useEuiTheme, } from '../../../../src'; import { @@ -22,7 +22,6 @@ export default ({ setGhostBackground, playgroundClassName, playgroundCssStyles, - playgroundPanelProps, }) => { const getSnippet = (code) => { let regex = /return \(([\S\s]*?)(;)$/gm; @@ -84,27 +83,24 @@ export default ({ component={config.scope[config.componentName]} /> - - - - {thrownError && } - + + + {thrownError && } {getSnippet(params.editorProps.code)} diff --git a/packages/eui/src-docs/src/store/configure_store.js b/packages/eui/src-docs/src/store/configure_store.js index bcd8efc8540..0f4ea4addbf 100644 --- a/packages/eui/src-docs/src/store/configure_store.js +++ b/packages/eui/src-docs/src/store/configure_store.js @@ -3,18 +3,13 @@ import thunk from 'redux-thunk'; import Routes from '../routes'; -import localeReducer from './reducers/locale_reducer'; -import themeReducer from './reducers/theme_reducer'; - /** * @param {Object} initialState An object defining the application's initial * state. */ export default function configureStore(initialState) { - function rootReducer(state = {}, action) { + function rootReducer() { return { - theme: themeReducer(state.theme, action), - locale: localeReducer(state.locale, action), routes: Routes, }; } diff --git a/packages/eui/src-docs/src/store/index.js b/packages/eui/src-docs/src/store/index.js index 04ef96b83ea..8421502c9c9 100644 --- a/packages/eui/src-docs/src/store/index.js +++ b/packages/eui/src-docs/src/store/index.js @@ -1,11 +1,3 @@ -export function getTheme(state) { - return state.theme.theme; -} - export function getRoutes(state) { return state.routes; } - -export function getLocale(state) { - return state.locale.locale; -} diff --git a/packages/eui/src-docs/src/theme_dark.scss b/packages/eui/src-docs/src/theme_amsterdam_dark.scss similarity index 100% rename from packages/eui/src-docs/src/theme_dark.scss rename to packages/eui/src-docs/src/theme_amsterdam_dark.scss diff --git a/packages/eui/src-docs/src/theme_light.scss b/packages/eui/src-docs/src/theme_amsterdam_light.scss similarity index 100% rename from packages/eui/src-docs/src/theme_light.scss rename to packages/eui/src-docs/src/theme_amsterdam_light.scss diff --git a/packages/eui/src-docs/src/views/app_context.js b/packages/eui/src-docs/src/views/app_context.js index 0e0bd6ae658..ac3678ae5d7 100644 --- a/packages/eui/src-docs/src/views/app_context.js +++ b/packages/eui/src-docs/src/views/app_context.js @@ -1,10 +1,8 @@ import React, { useContext } from 'react'; import { Helmet } from 'react-helmet'; -import { useSelector } from 'react-redux'; import createCache from '@emotion/cache'; import { ThemeContext } from '../components'; import { translateUsingPseudoLocale } from '../services'; -import { getLocale } from '../store'; import { EuiContext, EuiProvider } from '../../../src/components'; import { @@ -33,18 +31,7 @@ const utilityCache = createCache({ }); export const AppContext = ({ children }) => { - const { theme, colorMode } = useContext(ThemeContext); - const locale = useSelector((state) => getLocale(state)); - - const mappingFuncs = { - 'en-xa': translateUsingPseudoLocale, - }; - - const i18n = { - mappingFunc: mappingFuncs[locale], - formatNumber: (value) => new Intl.NumberFormat(locale).format(value), - locale, - }; + const { theme, colorMode, highContrastMode, i18n } = useContext(ThemeContext); const isLocalDev = window.location.host.includes('803'); setEuiDevProviderWarning(isLocalDev ? 'error' : 'warn'); // Note: this can't be in a useEffect, otherwise it fires too late for style memoization warnings to error on page reload @@ -57,6 +44,7 @@ export const AppContext = ({ children }) => { }} theme={AVAILABLE_THEMES.find((t) => t.value === theme)?.provider} colorMode={colorMode} + highContrastMode={highContrastMode} > { rel="stylesheet" /> - {children} + new Intl.NumberFormat(i18n).format(value), + }} + > + {children} + ); }; diff --git a/packages/eui/src-docs/src/views/app_view.js b/packages/eui/src-docs/src/views/app_view.js index 8911d2a8332..91a094ef143 100644 --- a/packages/eui/src-docs/src/views/app_view.js +++ b/packages/eui/src-docs/src/views/app_view.js @@ -1,9 +1,8 @@ import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; -import { toggleLocale as _toggleLocale } from '../actions'; import { GuidePageChrome, GuidePageHeader } from '../components'; -import { getLocale, getRoutes } from '../store'; +import { getRoutes } from '../store'; import { useScrollToHash, useHeadingAnchorLinks, @@ -17,9 +16,6 @@ import { } from '../../../src/components'; export const AppView = ({ children, currentRoute = {} }) => { - const dispatch = useDispatch(); - const toggleLocale = (locale) => dispatch(_toggleLocale(locale)); - const locale = useSelector((state) => getLocale(state)); const routes = useSelector((state) => getRoutes(state)); const portalledHeadingAnchorLinks = useHeadingAnchorLinks(); @@ -43,7 +39,7 @@ export const AppView = ({ children, currentRoute = {} }) => { Skip to content {portalledHeadingAnchorLinks} - + { diff --git a/packages/eui/src-docs/src/views/button/button_example.js b/packages/eui/src-docs/src/views/button/button_example.js index 91da3f31e5a..7ea14881b84 100644 --- a/packages/eui/src-docs/src/views/button/button_example.js +++ b/packages/eui/src-docs/src/views/button/button_example.js @@ -16,8 +16,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiCard, - EuiPanel, EuiSpacer, + EuiPanel, } from '../../../../src/components'; import { EuiButtonGroupOptionProps } from '!!prop-loader!../../../../src/components/button/button_group/button_group'; diff --git a/packages/eui/src-docs/src/views/comment/comment_props.tsx b/packages/eui/src-docs/src/views/comment/comment_props.tsx index 0a8514b35f0..9713d757ed0 100644 --- a/packages/eui/src-docs/src/views/comment/comment_props.tsx +++ b/packages/eui/src-docs/src/views/comment/comment_props.tsx @@ -2,7 +2,6 @@ import React, { ReactNode } from 'react'; import { css } from '@emotion/react'; import { - EuiPanel, EuiButtonIcon, EuiCommentList, EuiComment, @@ -50,11 +49,7 @@ export default ({ snippet }: { snippet: ReactNode }) => { ); return ( - +
{ {snippet} - +
); }; diff --git a/packages/eui/src-docs/src/views/provider/provider_example.js b/packages/eui/src-docs/src/views/provider/provider_example.js index 0808935cb91..00e7420617c 100644 --- a/packages/eui/src-docs/src/views/provider/provider_example.js +++ b/packages/eui/src-docs/src/views/provider/provider_example.js @@ -64,20 +64,15 @@ export const ProviderExample = {

To customize the global theme of your app, use the{' '} - theme, colorMode, and{' '} - modify props (documented in{' '} + theme and modify props + (documented in{' '} EuiThemeProvider - ). For instance, it's likely that you will want to implement - color mode switching at the top level: + ). The colorMode and{' '} + highContrastMode props automatically default to + the users' system settings, but can also be overridden if needed.

- - - {""} - - -

If you do not wish your app to include EUI's default global reset CSS or{' '} diff --git a/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx b/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx index 895a2bc858d..82cda9c51b8 100644 --- a/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx +++ b/packages/eui/src-docs/src/views/theme/_components/_theme_example.tsx @@ -48,7 +48,7 @@ export const ThemeExample: FunctionComponent = ({ snippetLanguage = 'jsx', props, }) => { - const { euiTheme } = useEuiTheme(); + const { euiTheme, highContrastMode } = useEuiTheme(); const isLargeBreakpoint = useIsWithinBreakpoints(['m', 'l', 'xl']); const finalSnippet = @@ -146,6 +146,8 @@ export const ThemeExample: FunctionComponent = ({ language={ snippetLanguage === 'emotion' ? 'jsx' : snippetLanguage } + // Code block is used within a panel which already has a border - skip doubling up + {...(highContrastMode && { css: { border: 'none' } })} > {finalSnippet} diff --git a/packages/eui/src-docs/src/views/theme/_theme_section.tsx b/packages/eui/src-docs/src/views/theme/_theme_section.tsx index 23b85a412b1..9e064e174f1 100644 --- a/packages/eui/src-docs/src/views/theme/_theme_section.tsx +++ b/packages/eui/src-docs/src/views/theme/_theme_section.tsx @@ -70,6 +70,10 @@ export const ThemeSection: FunctionComponent = ({ paddingSize="none" transparentBackground={true} language="jsx" + // Code block is used within a panel which already has a border - skip doubling up + css={({ highContrastMode }) => + highContrastMode ? { border: 'none' } : undefined + } > {finalSnippet} diff --git a/packages/eui/src-docs/src/views/theme/color/contrast.tsx b/packages/eui/src-docs/src/views/theme/color/contrast.tsx index a8601485b86..6802492d7dd 100644 --- a/packages/eui/src-docs/src/views/theme/color/contrast.tsx +++ b/packages/eui/src-docs/src/views/theme/color/contrast.tsx @@ -150,7 +150,11 @@ export default () => { {/* This wrapping div for the sticky positioning */}

- + ({ borderBlock: euiTheme.border.thin })} + >

Use the slider and toggle to adjust the color combinations shown diff --git a/packages/eui/src-docs/src/views/theme/color/tokens.tsx b/packages/eui/src-docs/src/views/theme/color/tokens.tsx index 5790c5d661d..d15fa0eca96 100644 --- a/packages/eui/src-docs/src/views/theme/color/tokens.tsx +++ b/packages/eui/src-docs/src/views/theme/color/tokens.tsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import { AMSTERDAM_NAME_KEY, + EuiCallOut, EuiCode, EuiSpacer, EuiText, @@ -48,32 +49,57 @@ const Intro = () => { const description = euiTheme.themeName === AMSTERDAM_NAME_KEY ? ( <> -

- Elastic UI builds with a very limited palette. It uses a core set of - three colors with a green / orange / red qualitative set and combined - with a six-color grayscale. Variation beyond these colors is minimal - and always done with math manipulation against the original set. -

-

- When switching between light and dark color modes, the theme keys do - not change, only their values do. This is why most keys are not named - for their evaluated value but by their{' '} - purpose. -

+ +

+ Elastic UI builds with a very limited palette. It uses a core set of + three colors with a green / orange / red qualitative set and + combined with a six-color grayscale. Variation beyond these colors + is minimal and always done with math manipulation against the + original set. +

+ + + + Never rely solely on color to convey meaning. Colors can be overridden + by{' '} + + system forced colors + + , or can be difficult to distinguish for different users. Always + combine color context with accompanying{' '} + icons or{' '} + copy to indicate states such as + error, activity, etc. + ) : ( <> -

- Elastic UI builds with a color palette that is based on predefined - 14-step scales for a core set of three colors (blue / teal / pink) as - well as a green / yellow / red qualitative set and combined with a - 28-step grayscale. Colors are defined to work well when combined for - their semantic purpose. -

-

- When switching between light and dark color modes, the theme keys do - not change, only their values do. -

+ +

+ Elastic UI builds with a color palette that is based on predefined + 14-step scales for a core set of three colors (blue / teal / pink) + as well as a green / yellow / red qualitative set and combined with + a 28-step grayscale. Colors are defined to work well when combined + for their semantic purpose. +

+

+ When switching between light and dark color modes, the theme keys do + not change, only their values do. +

+ + + + Never rely solely on color to convey meaning. Colors can be overridden + by{' '} + + system forced colors + + , or can be difficult to distinguish for different users. Always + combine color context with accompanying{' '} + icons or{' '} + copy to indicate states such as + error, activity, etc. + ); @@ -178,6 +204,12 @@ export default () => { statefulness like indicating between successful and dangerous actions.

+

+ When switching between light and dark color modes, the theme keys do + not change, only their values do. This is why most keys are not + named for their evaluated value but by their{' '} + purpose. +

diff --git a/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx b/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx index c856a47c338..83436bc4ea8 100644 --- a/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx +++ b/packages/eui/src-docs/src/views/theme/color_mode/_color_mode_intro.tsx @@ -20,6 +20,12 @@ export default () => { The colorMode determines which values to return based on LIGHT or DARK mode.

+

+ By default, if this prop is not passed, EuiProvider{' '} + will detect and use the user's system dark mode preference. If the + prop is passed, it will override the user's system + settings. +

diff --git a/packages/eui/src-docs/src/views/theme/high_contrast_mode/high_contrast_mode_example.js b/packages/eui/src-docs/src/views/theme/high_contrast_mode/high_contrast_mode_example.js new file mode 100644 index 00000000000..13feda32737 --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/high_contrast_mode/high_contrast_mode_example.js @@ -0,0 +1,119 @@ +import React from 'react'; + +import { GuideSectionTypes } from '../../../components'; + +import { EuiCallOut, EuiCode, EuiLink, EuiText } from '../../../../../src'; + +import Rendering from './rendering'; +const RenderingSource = require('!!raw-loader!./rendering'); + +import Reacting from './reacting'; +const ReactingSource = require('!!raw-loader!./reacting'); + +export const HighContrastModeExample = { + title: 'High contrast mode', + isBeta: true, + intro: ( + +

+ The highContrastMode determines and sets certain + un-overrideable modifications to the EUI theme, primarily around borders + and shadows. Borders will always be pure black or white (depending on + the color mode), and shadows will be entirely replaced with borders. +

+

+ By default, if this prop is not passed, EuiProvider{' '} + will detect and use the user's system contrast preferences. +

+ + ), + sections: [ + { + title: 'Rendering a specific contrast mode', + text: ( + <> +

+ While it's usually best to keep all high contrast mode the same + across your app for visual consistency, some instances may benefit + from an exaggerated change in contrast. For this you can set{' '} + EuiThemeProvider's{' '} + highContrastMode to true. +

+ + In general, we do not ever recommend manually turning off high + contrast via highContrastMode={'{false}'}. + Respect the user's contrast preferences where possible. + + } + /> + + ), + demo: , + source: [ + { + type: GuideSectionTypes.TSX, + code: RenderingSource, + }, + ], + }, + { + title: 'Forced contrast themes and colors', + text: ( + <> +

+ Please note that some OSes and browsers have something called{' '} + + forced colors mode + + , which overrides all colors, backgrounds, borders, + and shadows. An example of this is Windows High Contrast modes. +

+

+ Since this is done at a level that EUI can do nothing about, if + forced colors mode is detected by EuiProvider, EUI + will ignore any passed highContrastMode or{' '} + colorMode props, as this user choice and system + setting takes precedence. +

+ + To quickly test your application in forced colors mode without + switching OS themes, you can{' '} + + use Chrome or Edge's devtools to emulate forced-colors mode. + + + + ), + }, + { + title: 'Reacting to user high contrast modes', + text: ( +

+ The detected or current highContrastMode is available via + useEuiTheme(). It returns either{' '} + "forced", "preferred", or simply{' '} + false. You can use this information to (for + example) conditionally render or opt out of rendering certain styles + or colors. +

+ ), + demo: , + source: [ + { + type: GuideSectionTypes.JS, + code: ReactingSource, + }, + ], + }, + ], +}; diff --git a/packages/eui/src-docs/src/views/theme/high_contrast_mode/reacting.tsx b/packages/eui/src-docs/src/views/theme/high_contrast_mode/reacting.tsx new file mode 100644 index 00000000000..59a58474d1c --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/high_contrast_mode/reacting.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { useEuiTheme, EuiPanel } from '../../../../../src'; + +export default () => { + const { highContrastMode, euiTheme } = useEuiTheme(); + + return ( + + This panel will have a thick border in high contrast mode. + + ); +}; diff --git a/packages/eui/src-docs/src/views/theme/high_contrast_mode/rendering.tsx b/packages/eui/src-docs/src/views/theme/high_contrast_mode/rendering.tsx new file mode 100644 index 00000000000..68e2ea74f1c --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/high_contrast_mode/rendering.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { faker } from '@faker-js/faker'; +import { + EuiThemeProvider, + EuiBasicTable, + EuiBasicTableColumn, +} from '../../../../../src'; + +type User = { + firstName: string; + lastName: string; +}; + +const users: User[] = []; +for (let i = 0; i < 5; i++) { + users.push({ + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + }); +} + +const columns: Array> = [ + { + field: 'firstName', + name: 'First name', + }, + { + field: 'lastName', + name: 'Last name', + }, +]; + +export default () => { + return ( + + + + ); +}; diff --git a/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx b/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx index ff1b2f395e5..ac0f125023d 100644 --- a/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx +++ b/packages/eui/src-docs/src/views/theme/other/_shadow_js.tsx @@ -28,7 +28,7 @@ const RenderShadow = ({ size: _EuiThemeShadowSize; color?: string; }) => { - const style = useEuiShadow(size, color); + const style = useEuiShadow(size, { color }); return (
{ - const style = useEuiShadowFlat(color); + const style = useEuiShadowFlat({ color }); return (
{ /> useEuiShadow(size)} type="hook" + title={useEuiShadow(size, options)} + props={`size?: '${EuiThemeShadowSizes.join("' | '")}'; + +options?: { + color?: string; + property?: 'box-shadow' | 'filter'; + borderAllInHighContrastMode?: boolean; +};`} description={ <>

@@ -102,7 +109,7 @@ export default () => {

Usually you want to avoid putting shadows on containers with the - same background color of its parent (e.g. white on white); + same background color of its parent (e.g. white on white).

} @@ -131,7 +138,7 @@ export const ShadowValuesJS = () => { return { id: shadow, token: customColor - ? `useEuiShadow('${shadow}', euiTheme.colors.accent);` + ? `useEuiShadow('${shadow}', { color: euiTheme.colors.accent });` : `useEuiShadow('${shadow}');`, description: _EuiShadowSizesDescriptions[shadow], }; @@ -142,7 +149,7 @@ export const ShadowValuesJS = () => { // @ts-ignore TODO id: 'flat', token: customColor - ? 'useEuiShadowFlat(euiTheme.colors.accent);' + ? 'useEuiShadowFlat({ color: euiTheme.colors.accent });' : 'useEuiShadowFlat();', description: 'Similar to shadow medium but without the bottom depth. Useful for popovers that drop UP rather than DOWN.', diff --git a/packages/eui/src-docs/src/views/theme/other/other.tsx b/packages/eui/src-docs/src/views/theme/other/other.tsx index 68202c35c23..ec0c3518dbd 100644 --- a/packages/eui/src-docs/src/views/theme/other/other.tsx +++ b/packages/eui/src-docs/src/views/theme/other/other.tsx @@ -1,4 +1,5 @@ import React, { useContext, useMemo } from 'react'; +import { Link } from 'react-router-dom'; import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; import { ThemeContext } from '../../../components/with_theme'; @@ -139,11 +140,7 @@ export default () => { - euiCanAnimate} - > + euiCanAnimate}>

For accessbility support, we highly recommend always wrapping animations and transitions with this{' '} @@ -174,6 +171,20 @@ export default () => {

{`${otherSections[1].title}`}

+ + +

+ Keep in mind that shadows will not render in{' '} + + forced high contrast modes + + . EUI's shadow utilities automatically replace shadows with bottom + borders, which will render better in high contrast modes. These + utilities can also be configured to render their high contrast + borders around the entire element. +

+ + {shadowContent} diff --git a/packages/eui/src-docs/src/views/theme/provider.tsx b/packages/eui/src-docs/src/views/theme/provider.tsx index 9454943d271..6cab1216518 100644 --- a/packages/eui/src-docs/src/views/theme/provider.tsx +++ b/packages/eui/src-docs/src/views/theme/provider.tsx @@ -10,7 +10,7 @@ import { } from '../../../../src'; export default () => { - const { euiTheme, colorMode } = useEuiTheme(); + const { euiTheme, colorMode, highContrastMode } = useEuiTheme(); return ( @@ -44,13 +44,13 @@ export default () => { colorMode: + {colorMode} - -

- {colorMode} -

+ + highContrastMode: + {String(highContrastMode)} diff --git a/packages/eui/src-docs/src/views/theme/theme_example.js b/packages/eui/src-docs/src/views/theme/theme_example.js index 031abd853f2..878a5b9a91d 100644 --- a/packages/eui/src-docs/src/views/theme/theme_example.js +++ b/packages/eui/src-docs/src/views/theme/theme_example.js @@ -30,16 +30,13 @@ export const ThemeExample = { <>

- EUI is in the progress of switching it's core styles processor - from Sass to Emotion. To - take full advantage of this context layer, wrap the root of your - application with a single{' '} + While{' '} EuiProvider - - . While EuiProvider should not be included more than - once, you may use multiple nested EuiThemeProviders{' '} - to customize section-specific or component-specific{' '} + {' '} + should not be included more than once at the top level of your app, + you may use multiple nested EuiThemeProviders to + customize section-specific or component-specific{' '} color modes {' '} @@ -54,32 +51,44 @@ export const ThemeExample = { text: ( <>

- The context layer that enables theming (including the default theme - styles) comes from EuiThemeProvider.{' '} - EuiThemeProvider accepts three props, all of - which have default values and are therefore optional. To use the - default EUI theme, no configuration is required. + The context layer that enables theming comes from{' '} + EuiThemeProvider.{' '} + EuiThemeProvider accepts four main props (all of + which have default values and are therefore optional):

  • - theme: EuiThemeSystem Raw theme - values. Calculated values are acceptable. + theme: Raw theme values. + Calculated values are acceptable. For the full shape of an EUI + theme, see the{' '} + + global values + {' '} + page.
  • - colorMode: EuiThemeColorMode{' '} - Simply {"'light'"} or {"'dark'"} + modify: Accepts an object of + overrides for theme values. For usage examples, see{' '} + + Simple instance overrides + {' '} + below.
  • - modify: EuiThemeModifications{' '} - Overrides and modifications for theme values. + colorMode: Accepts 'light', + 'dark', or 'inverse'. For usage, see the{' '} + Color mode page. +
    • +
  • + highContrastMode: Accepts a + true/false boolean. For usage, see the{' '} + + High contrast mode + {' '} + page.
-

- The concept for each prop is explained in subsequent sections. More - information on the full shape of an EUI theme, see the{' '} - Global Values{' '} - page. -

+

To use the default EUI theme, no configuration is required.

), demo: , @@ -96,25 +105,27 @@ export const ThemeExample = { text: ( <>

- Using the react hook useEuiTheme() makes it very - easy to consume the EUI static and computed variables like colors - and sizing. It simply passes back an object of the current theme - which includes + Using the React hook useEuiTheme() makes it very + easy to consume EUI's static and computed variables, like colors and + sizing. It simply passes back an object of the current theme which + includes:

  • - euiTheme: EuiThemeComputed All - the calculated keys including any modifications + euiTheme: All the calculated keys + including any modifications +
    • +
  • + modifications: Only the + modification keys
  • - colorMode: EuiThemeColorMode{' '} - Simply {"'light'"} or {"'dark'"} + colorMode: Either "LIGHT" or + "DARK"
  • - - modifications: EuiThemeModifications - {' '} - Only the modification keys + highContrastMode: Either + 'forced', 'preferred', or false

diff --git a/packages/eui/src/components/avatar/avatar.styles.ts b/packages/eui/src/components/avatar/avatar.styles.ts index 9be85116d9c..bdd170fcfee 100644 --- a/packages/eui/src/components/avatar/avatar.styles.ts +++ b/packages/eui/src/components/avatar/avatar.styles.ts @@ -7,7 +7,7 @@ */ import { css } from '@emotion/react'; -import { logicalCSS, logicalTextAlignCSS } from '../../global_styling'; +import { logicalSizeCSS, mathWithUnits } from '../../global_styling'; import { UseEuiTheme } from '../../services'; const _avatarSize = ({ @@ -18,9 +18,7 @@ const _avatarSize = ({ fontSize: string; }) => { return ` - ${logicalCSS('width', size)}; - ${logicalCSS('height', size)}; - line-height: ${size}; + ${logicalSizeCSS(size)}; font-size: ${fontSize}; `; }; @@ -36,8 +34,7 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({ vertical-align: middle; background-size: cover; background-color: ${euiTheme.colors.lightShade}; - ${logicalTextAlignCSS('center')} - ${logicalCSS('overflow-x', 'hidden')} + overflow: hidden; /* Explicitly state weight so it doesn't get overridden by inheritance */ font-weight: ${euiTheme.font.weight.medium}; `, @@ -69,19 +66,19 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({ m: css( _avatarSize({ size: euiTheme.size.xl, - fontSize: `calc(${euiTheme.size.base} * 0.9)`, + fontSize: mathWithUnits(euiTheme.size.base, (x) => x * 0.9), }) ), l: css( _avatarSize({ size: euiTheme.size.xxl, - fontSize: `calc(${euiTheme.size.l} * 0.8)`, + fontSize: mathWithUnits(euiTheme.size.l, (x) => x * 0.8), }) ), xl: css( _avatarSize({ - size: `calc(${euiTheme.size.base} * 4)`, - fontSize: `calc(${euiTheme.size.xl} * 0.8)`, + size: euiTheme.size.xxxxl, + fontSize: mathWithUnits(euiTheme.size.xl, (x) => x * 0.8), }) ), // Casing diff --git a/packages/eui/src/components/avatar/avatar.tsx b/packages/eui/src/components/avatar/avatar.tsx index 95f4a475480..868256c6e7d 100644 --- a/packages/eui/src/components/avatar/avatar.tsx +++ b/packages/eui/src/components/avatar/avatar.tsx @@ -16,7 +16,7 @@ import { isValidHex, useEuiPaletteColorBlindBehindText, } from '../../services/color'; -import { toInitials, useEuiMemoizedStyles } from '../../services'; +import { toInitials, useEuiMemoizedStyles, useEuiTheme } from '../../services'; import { IconType, EuiIcon, IconSize, IconColor } from '../icon'; import { euiAvatarStyles } from './avatar.styles'; @@ -126,12 +126,14 @@ export const EuiAvatar: FunctionComponent = ({ }) => { checkValidInitials(initials); const { casing = type === 'space' ? 'none' : 'uppercase', ...rest } = props; + const { highContrastMode, euiTheme } = useEuiTheme(); const visColors = useEuiPaletteColorBlindBehindText(); const isPlain = color === 'plain'; const isSubdued = color === 'subdued'; const isNamedColor = isPlain || isSubdued || color === null; + const isForcedColors = highContrastMode === 'forced'; const classes = classNames( 'euiAvatar', @@ -176,20 +178,28 @@ export const EuiAvatar: FunctionComponent = ({ } }, [imageUrl, color, isNamedColor, name.length, visColors]); + const highContrastBorder = useMemo( + // Render a border since background-colors are ignored in Windows forced contrast themes + () => (isForcedColors ? { border: euiTheme.border.thin } : undefined), + [isForcedColors, euiTheme] + ); + const iconCustomColor = useMemo(() => { + // Force icons to single colors in forced high contrast mode + if (isForcedColors) return euiTheme.colors.fullShade; // `null` allows icons to keep their default color (e.g. app icons) if (iconColor === null) return undefined; // Otherwise continue to pass on `iconColor` if (iconColor) return iconColor; // Fall back to the adjusted text color if it exists return avatarStyle?.color; - }, [iconColor, avatarStyle?.color]); + }, [iconColor, avatarStyle?.color, isForcedColors, euiTheme]); return (

= { @@ -34,3 +37,18 @@ export const Playground: Story = { label: 'Beta', }, }; + +export const TitleAlignment: Story = { + tags: ['vrt-only'], + args: { + label: 'Beta', + }, + render: (args: EuiBetaBadgeProps) => ( + +

+ Beta badges will also line up nicely with titles{' '} + +

+ + ), +}; diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index e91b8f6a168..1ce81ad3100 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -9,6 +9,7 @@ import { css } from '@emotion/react'; import { logicalCSS, + logicalSizeCSS, euiFocusRing, euiFontSizeFromScale, euiTextTruncate, @@ -31,6 +32,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { euiBetaBadge: css` display: inline-block; border-radius: ${euiTheme.size.l}; + border: ${euiTheme.border.width.thin} solid transparent; cursor: default; font-weight: ${euiTheme.font.weight.semiBold}; @@ -54,8 +56,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { hollow: css` color: ${badgeColors.hollow.color}; background-color: ${badgeColors.hollow.backgroundColor}; - box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} - ${badgeColors.hollow.borderColor}; + border-color: ${badgeColors.hollow.borderColor}; `, warning: css(badgeColors.warning), // Font sizes @@ -67,7 +68,6 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { font-size: 0.7rem; line-height: ${badgeSizes.s}; `, - // Padding/width sizes badgeSizes: { default: { m: ` @@ -81,15 +81,8 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { }, // When it's just an icon or a single letter, make the badge a circle circle: { - m: ` - ${logicalCSS('width', euiTheme.size.l)} - `, - s: ` - ${logicalCSS( - 'width', - mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base) - )} - `, + m: logicalSizeCSS(badgeSizes.m), + s: logicalSizeCSS(badgeSizes.s), }, }, euiBetaBadge__icon: css` diff --git a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts index 04e0c4bb2e6..722ba4aeda8 100644 --- a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts +++ b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts @@ -14,6 +14,7 @@ import { euiNumberFormat, mathWithUnits, } from '../../../global_styling'; +import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast'; import { UseEuiTheme } from '../../../services'; import { euiBadgeColors } from '../color_utils'; @@ -24,10 +25,18 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => { return { euiNotificationBadge: css` flex-shrink: 0; /* Ensures it never scales down below its intended size */ - display: inline-block; + display: inline-flex; + justify-content: center; + align-items: center; vertical-align: middle; ${logicalCSS('padding-horizontal', euiTheme.size.xs)} border-radius: ${euiTheme.border.radius.small}; + ${highContrastModeStyles(euiThemeContext, { + forced: ` + border: ${euiTheme.border.thin}; + overflow: hidden; /* Fix text clipping */ + `, + })} cursor: default; font-size: ${euiFontSizeFromScale('xs', euiTheme)}; @@ -41,12 +50,10 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => { `, // Sizes s: css` - line-height: ${euiTheme.size.base}; ${logicalCSS('height', euiTheme.size.base)} ${logicalCSS('min-width', euiTheme.size.base)} `, m: css` - line-height: ${mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base)}; ${logicalCSS( 'height', mathWithUnits(euiTheme.size.xs, (x) => x + euiTheme.base) diff --git a/packages/eui/src/components/basic_table/basic_table.stories.tsx b/packages/eui/src/components/basic_table/basic_table.stories.tsx index fd614305d7e..94382d3ca39 100644 --- a/packages/eui/src/components/basic_table/basic_table.stories.tsx +++ b/packages/eui/src/components/basic_table/basic_table.stories.tsx @@ -323,6 +323,15 @@ export const ExpandedNestedTable: Story = { }, }; +export const HighContrastMobile: Story = { + tags: ['vrt-only'], + globals: { highContrastMode: true }, + args: { + ...ExpandedRow.args, + responsiveBreakpoint: true, + }, +}; + const StatefulPlayground = ({ items, pagination, diff --git a/packages/eui/src/components/beacon/beacon.styles.ts b/packages/eui/src/components/beacon/beacon.styles.ts index c5d09d2fa2d..6d09f4370e3 100644 --- a/packages/eui/src/components/beacon/beacon.styles.ts +++ b/packages/eui/src/components/beacon/beacon.styles.ts @@ -13,6 +13,7 @@ import { logicalCSS, logicalSizeCSS, } from '../../global_styling'; +import { preventForcedColors } from '../../global_styling/functions/high_contrast'; const _colorCSS = (color: string) => { return ` @@ -56,48 +57,58 @@ const euiBeaconPulseSmall = keyframes` } `; -export const euiBeaconStyles = ({ euiTheme }: UseEuiTheme) => ({ - // Base - euiBeacon: css` - position: relative; - border-radius: 50%; +export const euiBeaconStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + return { + // Base + euiBeacon: css` + position: relative; + display: flex; + justify-content: center; + border-radius: 50%; + ${preventForcedColors(euiThemeContext)} + + svg { + ${logicalSizeCSS('100%')} + } - &::before, - &::after { - position: absolute; - content: ''; - ${logicalSizeCSS('100%', '100%')} - ${logicalCSS('left', 0)} + &::before, + &::after { + position: absolute; + content: ''; + ${logicalSizeCSS('100%')} + ${logicalCSS('left', 0)} ${logicalCSS('top', 0)} background-color: transparent; - border-radius: 50%; - } + border-radius: 50%; + } - /* Without the animation, we only display one ring around the circle + /* Without the animation, we only display one ring around the circle If the animation is allowed the transform and opacity are overriden */ - &::before { - transform: scale(1.6); - opacity: 0.4; - } - - &::after { - opacity: 0; - } - - ${euiCanAnimate} { &::before { - animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out; + transform: scale(1.6); + opacity: 0.4; } &::after { - animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s; + opacity: 0; } - } - `, - subdued: css(_colorCSS(euiTheme.colors.textSubdued)), - primary: css(_colorCSS(euiTheme.colors.primary)), - success: css(_colorCSS(euiTheme.colors.accentSecondary)), - warning: css(_colorCSS(euiTheme.colors.warning)), - danger: css(_colorCSS(euiTheme.colors.danger)), - accent: css(_colorCSS(euiTheme.colors.accent)), -}); + + ${euiCanAnimate} { + &::before { + animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out; + } + + &::after { + animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s; + } + } + `, + subdued: css(_colorCSS(euiTheme.colors.textSubdued)), + primary: css(_colorCSS(euiTheme.colors.primary)), + success: css(_colorCSS(euiTheme.colors.accentSecondary)), + warning: css(_colorCSS(euiTheme.colors.warning)), + danger: css(_colorCSS(euiTheme.colors.danger)), + accent: css(_colorCSS(euiTheme.colors.accent)), + }; +}; diff --git a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts index 8a80deb1b04..7687fc22187 100644 --- a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts +++ b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts @@ -9,7 +9,8 @@ import { css, keyframes } from '@emotion/react'; import { euiShadowFlat } from '@elastic/eui-theme-common'; -import { euiCanAnimate } from '../../global_styling'; +import { euiCanAnimate, logicalCSS } from '../../global_styling'; +import { highContrastModeStyles } from '../../global_styling/functions/high_contrast'; import { UseEuiTheme } from '../../services'; const euiBottomBarAppear = keyframes` @@ -31,8 +32,11 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => { // Base // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"` euiBottomBar: css` - ${euiShadowFlat(euiThemeContext)} - background: ${euiTheme.components.bottomBarBackground}; + background-color: ${euiTheme.components.bottomBarBackground}; + ${logicalCSS('border-top', euiTheme.border.thin)} + ${highContrastModeStyles(euiThemeContext, { + none: euiShadowFlat(euiThemeContext), + })} ${euiCanAnimate} { animation: ${euiBottomBarAppear} ${euiTheme.animation.slow} ${euiTheme.animation.resistance}; diff --git a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts index 480d5a570dd..2d1a409f9e4 100644 --- a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts +++ b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts @@ -16,13 +16,14 @@ import { logicalBorderRadiusCSS, mathWithUnits, } from '../../global_styling'; -import { euiButtonColor } from '../../global_styling/mixins/_button'; +import { highContrastModeStyles } from '../../global_styling/functions/high_contrast'; +import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button'; /** * Styles cast to inner ,
); }; + +// Do not render a high contrast border if the panel is transparent +// and does not have a default contrast border +export const _canRenderHighContrastBorder = ({ + color, + hasBorder, +}: Pick<_EuiPanelProps, 'color' | 'hasBorder'>) => + !(color === 'transparent' && !hasBorder); diff --git a/packages/eui/src/components/panel/split_panel/split_panel.styles.ts b/packages/eui/src/components/panel/split_panel/split_panel.styles.ts index 7e6b3bb8948..33ec61c988b 100644 --- a/packages/eui/src/components/panel/split_panel/split_panel.styles.ts +++ b/packages/eui/src/components/panel/split_panel/split_panel.styles.ts @@ -9,6 +9,8 @@ import { css } from '@emotion/react'; import { logicalCSS } from '../../../global_styling'; +import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast'; +import { UseEuiTheme } from '../../../services'; export const euiSplitPanelOuterStyles = { euiSplitPanelOuter: css` @@ -24,14 +26,40 @@ export const euiSplitPanelOuterStyles = { `, }; -export const euiSplitPanelInnerStyles = { - euiSplitPanelInner: css` - /* Make sure they're evenly split */ - flex-basis: 0%; +export const euiSplitPanelInnerStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; - /* Ensure no movement if they have click handlers */ - /* stylelint-disable declaration-no-important */ - transform: none !important; - box-shadow: none !important; - `, + return { + euiSplitPanelInner: css` + /* Make sure they're evenly split */ + flex-basis: 0%; + + /* Ensure no movement if they have click handlers */ + /* stylelint-disable declaration-no-important */ + transform: none !important; + box-shadow: none !important; + `, + + highContrastBorders: { + // Don't double up on borders in high contrast mode, but render + // border dividers between nested inner panels + _renderBorder: (direction: 'right' | 'bottom') => + highContrastModeStyles(euiThemeContext, { + preferred: ` + border: none; + + &:not(:last-child) { + ${logicalCSS(`border-${direction}`, euiTheme.border.thin)} + border-color: inherit; /* Attempt to inherit from parent panel */ + } + `, + }), + get column() { + return this._renderBorder('bottom'); + }, + get row() { + return this._renderBorder('right'); + }, + }, + }; }; diff --git a/packages/eui/src/components/panel/split_panel/split_panel.tsx b/packages/eui/src/components/panel/split_panel/split_panel.tsx index 0de7ec8c659..4ac9c7b139c 100644 --- a/packages/eui/src/components/panel/split_panel/split_panel.tsx +++ b/packages/eui/src/components/panel/split_panel/split_panel.tsx @@ -6,15 +6,26 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; +import React, { + FunctionComponent, + ReactNode, + HTMLAttributes, + createContext, + useContext, +} from 'react'; import classNames from 'classnames'; import { EuiBreakpointSize, useIsWithinBreakpoints, } from '../../../services/breakpoint'; +import { useEuiMemoizedStyles } from '../../../services'; -import { EuiPanel, _EuiPanelProps } from '../panel'; +import { + EuiPanel, + _EuiPanelProps, + _canRenderHighContrastBorder, +} from '../panel'; import { euiSplitPanelOuterStyles, euiSplitPanelInnerStyles, @@ -30,7 +41,14 @@ export type _EuiSplitPanelInnerProps = HTMLAttributes & export const _EuiSplitPanelInner: FunctionComponent< _EuiSplitPanelInnerProps > = ({ children, className, ...rest }) => { + const borderDirection = useContext(SplitPanelInnerBorderDirection); + const classes = classNames('euiSplitPanel__inner', className); + const styles = useEuiMemoizedStyles(euiSplitPanelInnerStyles); + const cssStyles = [ + styles.euiSplitPanelInner, + borderDirection && styles.highContrastBorders[borderDirection], + ]; const panelProps: _EuiPanelProps = { hasShadow: false, @@ -43,7 +61,7 @@ export const _EuiSplitPanelInner: FunctionComponent< @@ -85,12 +103,14 @@ export const _EuiSplitPanelOuter: FunctionComponent< responsive as EuiBreakpointSize[], !!responsive ); + const responsiveDirection = + direction === 'row' && !isResponsive ? 'row' : 'column'; + const innerBorderDirection = _canRenderHighContrastBorder({ ...rest }) + ? responsiveDirection + : undefined; const styles = euiSplitPanelOuterStyles; - const cssStyles = [ - styles.euiSplitPanelOuter, - direction === 'row' && !isResponsive ? styles.row : styles.column, - ]; + const cssStyles = [styles.euiSplitPanelOuter, styles[responsiveDirection]]; const classes = classNames('euiSplitPanel', className); @@ -102,11 +122,16 @@ export const _EuiSplitPanelOuter: FunctionComponent< css={cssStyles} {...(rest as _EuiPanelProps)} > - {children} + + {children} + ); }; +const SplitPanelInnerBorderDirection = + createContext<_EuiSplitPanelOuterProps['direction']>(undefined); + export const EuiSplitPanel = { Outer: _EuiSplitPanelOuter, Inner: _EuiSplitPanelInner, diff --git a/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx b/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx index 474e1718634..5ba082ee390 100644 --- a/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx +++ b/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx @@ -34,3 +34,54 @@ export const SplitPanelOuter: Story = { ), }; + +export const HighContrast: Story = { + tags: ['vrt-only'], + globals: { highContrastMode: true }, + render: () => ( + <> + + + + Nested + Border test + + + Right panel + +
+ + + + Nested + + + Nested again + *inception noises* + + + + + Bottom panel + +
+ + + Transparent panels should not render border dividers + + + + But transparent panels + + with hasBorder should + + + + + + ), +}; diff --git a/packages/eui/src/components/popover/popover.stories.tsx b/packages/eui/src/components/popover/popover.stories.tsx index 0d0820d8adc..83087604d8b 100644 --- a/packages/eui/src/components/popover/popover.stories.tsx +++ b/packages/eui/src/components/popover/popover.stories.tsx @@ -124,3 +124,24 @@ export const PanelPaddingSize: Story = { }, render: (args) => , }; + +export const HighContrastMode: Story = { + tags: ['vrt-only'], + globals: { highContrastMode: true }, + args: { + children: ( + <> + Popover title + High contrast mode + {/* Move the initialFocus so the popover border shows up more plainly in the screenshot */} +