diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8767.md b/packages/eui-theme-borealis/changelogs/upcoming/8767.md new file mode 100644 index 00000000000..c7ee13c1bb1 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8767.md @@ -0,0 +1,23 @@ +- Added semantic tokens: + - `colors.borderInteractiveFormsHoverPlain` + - `colors.borderInteractiveFormsHoverDanger` +- Added component tokens: + - `components.forms.backgroundDropping` + - `components.forms.borderFocused` + - `components.forms.borderInvalid` + - `components.forms.borderHovered` + - `components.forms.borderInvalidHovered` + - `components.forms.borderAutofilledHovered` + - `components.forms.clearButtonBackground` +- Updated values for tokens: + - `colors.textWarning` + - `colors.borderStrongPrimary` + - `colors.borderStrongAccent` + - `colors.borderStrongAccentSecondary` + - `colors.borderStrongNeutral` + - `colors.borderStrongSuccess` + - `colors.borderStrongWarning` + - `colors.borderStrongRisk` + - `colors.borderStrongDanger` + - `components.forms.backgroundReadOnly` + diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index d2c1dc6548b..ed01cd7edb3 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -413,6 +413,8 @@ "euiColorBorderBaseFloating": "#2B394F", "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)", "euiColorBorderBaseFormsControl": "#6A7FA0", + "euiColorBorderInteractiveFormsHoverPlain": "#5A6D8C", + "euiColorBorderInteractiveFormsHoverDanger": "#EE4C48", "euiColorBorderStrongPrimary": "#61A2FF", "euiColorBorderStrongAccent": "#EE72A6", "euiColorBorderStrongAccentSecondary": "#16C5C0", diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts index e62ea6b01e4..67f9282cfaf 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts @@ -414,6 +414,8 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorBorderBaseFloating: string; euiColorBorderBaseFormsColorSwatch: string; euiColorBorderBaseFormsControl: string; + euiColorBorderInteractiveFormsHoverPlain: string; + euiColorBorderInteractiveFormsHoverDanger: string; euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json index 510fddf8d48..941b63776a6 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -413,13 +413,15 @@ "euiColorBorderBaseFloating": "transparent", "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)", "euiColorBorderBaseFormsControl": "#8E9FBC", - "euiColorBorderStrongPrimary": "#1750BA", - "euiColorBorderStrongAccent": "#A11262", - "euiColorBorderStrongAccentSecondary": "#047471", - "euiColorBorderStrongNeutral": "#0F658A", - "euiColorBorderStrongSuccess": "#09724D", - "euiColorBorderStrongWarning": "#825803", - "euiColorBorderStrongRisk": "#9E3A16", - "euiColorBorderStrongDanger": "#A71627", + "euiColorBorderInteractiveFormsHoverPlain": "#B4C1D5", + "euiColorBorderInteractiveFormsHoverDanger": "#DA3737", + "euiColorBorderStrongPrimary": "#0B64DD", + "euiColorBorderStrongAccent": "#BC1E70", + "euiColorBorderStrongAccentSecondary": "#008B87", + "euiColorBorderStrongNeutral": "#19799F", + "euiColorBorderStrongSuccess": "#008A5E", + "euiColorBorderStrongWarning": "#966B03", + "euiColorBorderStrongRisk": "#C24411", + "euiColorBorderStrongDanger": "#C61E25", "euiColorBorderStrongText": "#5A6D8C" } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts index 8eed88d581a..4ac26aabd31 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts @@ -414,6 +414,8 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorBorderBaseFloating: string; euiColorBorderBaseFormsColorSwatch: string; euiColorBorderBaseFormsControl: string; + euiColorBorderInteractiveFormsHoverPlain: string; + euiColorBorderInteractiveFormsHoverDanger: string; euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts index 56ff2a8b37a..078c739583c 100644 --- a/packages/eui-theme-borealis/src/index.ts +++ b/packages/eui-theme-borealis/src/index.ts @@ -41,6 +41,7 @@ export const euiThemeBorealis: EuiThemeShape = { hasGlobalFocusColor: true, hasVisColorAdjustment: false, buttonVariant: 'refresh', + formVariant: 'refresh', }, overrides, }; diff --git a/packages/eui-theme-borealis/src/variables/_forms.ts b/packages/eui-theme-borealis/src/variables/_forms.ts index 56bcd35cf1b..375d96985d9 100644 --- a/packages/eui-theme-borealis/src/variables/_forms.ts +++ b/packages/eui-theme-borealis/src/variables/_forms.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ import { computed, mathWithUnits } from '@elastic/eui-theme-common'; +import { SEMANTIC_COLORS } from './colors/_semantic_colors'; const _forms = { background: computed( @@ -17,8 +18,8 @@ const _forms = { ['colors.backgroundBaseDisabled'] ), backgroundReadOnly: computed( - ([backgroundBasePlain]) => backgroundBasePlain, - ['colors.backgroundBasePlain'] + ([backgroundBaseDisabled]) => backgroundBaseDisabled, + ['colors.backgroundBaseDisabled'] ), backgroundFocused: computed( ([backgroundBasePlain]) => backgroundBasePlain, @@ -28,6 +29,7 @@ const _forms = { ([backgroundBasePrimary]) => backgroundBasePrimary, ['colors.backgroundBasePrimary'] ), + backgroundDropping: SEMANTIC_COLORS.success70Alpha16, prependBackground: computed( ([backgroundBaseFormsPrepend]) => backgroundBaseFormsPrepend, ['colors.backgroundBaseFormsPrepend'] @@ -40,10 +42,31 @@ const _forms = { ([borderBaseDisabled]) => borderBaseDisabled, ['colors.borderBaseDisabled'] ), + borderFocused: computed( + ([borderStrongPrimary]) => borderStrongPrimary, + ['colors.borderStrongPrimary'] + ), + borderInvalid: computed( + ([borderStrongDanger]) => borderStrongDanger, + ['colors.borderStrongDanger'] + ), + borderHovered: computed( + ([borderInteractiveFormsHoverPlain]) => borderInteractiveFormsHoverPlain, + ['colors.borderInteractiveFormsHoverPlain'] + ), + borderInvalidHovered: computed( + ([borderInteractiveFormsHoverDanger]) => borderInteractiveFormsHoverDanger, + ['colors.borderInteractiveFormsHoverDanger'] + ), borderAutofilled: computed( ([borderBasePrimary]) => borderBasePrimary, ['colors.borderBasePrimary'] ), + borderAutofilledHovered: computed( + ([borderStrongPrimary]) => borderStrongPrimary, + ['colors.borderStrongPrimary'] + ), + clearButtonBackground: SEMANTIC_COLORS.shade60, controlBorder: computed( ([borderBaseFormsControl]) => borderBaseFormsControl, ['colors.borderBaseFormsControl'] @@ -78,6 +101,7 @@ const _forms = { const _dark_forms = { ..._forms, + clearButtonBackground: SEMANTIC_COLORS.shade90, }; export const forms = { diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index f74fb04c1e0..b75d5235b12 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -121,6 +121,9 @@ $euiColorBorderBaseFloating: $euiColorShade120 !default; $euiColorBorderBaseFormsColorSwatch: $euiColorPlainLightAlpha32 !default; $euiColorBorderBaseFormsControl: $euiColorShade80 !default; +$euiColorBorderInteractiveFormsHoverPlain: $euiColorShade90 !default; +$euiColorBorderInteractiveFormsHoverDanger: $euiColorDanger70 !default; + $euiColorBorderStrongPrimary: $euiColorPrimary60 !default; $euiColorBorderStrongAccent: $euiColorAccent60 !default; $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary60 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index 3ed849c314c..40c6e8531ba 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -165,6 +165,9 @@ export const dark_border_colors: _EuiThemeBorderColors = { borderBaseFormsColorSwatch: SEMANTIC_COLORS.plainLightAlpha32, borderBaseFormsControl: SEMANTIC_COLORS.shade80, + borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade90, + borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger70, + borderStrongPrimary: SEMANTIC_COLORS.primary60, borderStrongAccent: SEMANTIC_COLORS.accent60, borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary60, diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index b00d45ac9a1..12c720ddbff 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -92,7 +92,7 @@ $euiColorTextInverse: $euiColorPlainLight !default; $euiColorPrimaryText: $euiColorPrimary100 !default; $euiColorAccentText: $euiColorAccent100 !default; $euiColorSuccessText: $euiColorSuccess100 !default; -$euiColorWarningText: $euiColorWarning110 !default; +$euiColorWarningText: $euiColorWarning100 !default; $euiColorDangerText: $euiColorDanger100 !default; // Brand texts @@ -101,7 +101,7 @@ $euiColorTextAccent: $euiColorAccent100 !default; $euiColorTextAccentSecondary: $euiColorAccentSecondary100 !default; $euiColorTextNeutral: $euiColorNeutral100 !default; $euiColorTextSuccess: $euiColorSuccess100 !default; -$euiColorTextWarning: $euiColorWarning110 !default; +$euiColorTextWarning: $euiColorWarning100 !default; $euiColorTextRisk: $euiColorRisk100 !default; $euiColorTextDanger: $euiColorDanger100 !default; @@ -123,16 +123,20 @@ $euiColorBorderBaseFloating: $euiColorTransparent !default; $euiColorBorderBaseFormsColorSwatch: $euiColorShade100Alpha24 !default; $euiColorBorderBaseFormsControl: $euiColorShade60 !default; -$euiColorBorderStrongPrimary: $euiColorPrimary100 !default; -$euiColorBorderStrongAccent: $euiColorAccent100 !default; -$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary100 !default; -$euiColorBorderStrongNeutral: $euiColorNeutral100 !default; -$euiColorBorderStrongSuccess: $euiColorSuccess100 !default; -$euiColorBorderStrongWarning: $euiColorWarning100 !default; -$euiColorBorderStrongRisk: $euiColorRisk100 !default; -$euiColorBorderStrongDanger: $euiColorDanger100 !default; +$euiColorBorderInteractiveFormsHoverPlain: $euiColorShade40 !default; +$euiColorBorderInteractiveFormsHoverDanger: $euiColorDanger80 !default; + +$euiColorBorderStrongPrimary: $euiColorPrimary90 !default; +$euiColorBorderStrongAccent: $euiColorAccent90 !default; +$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary90 !default; +$euiColorBorderStrongNeutral: $euiColorNeutral90 !default; +$euiColorBorderStrongSuccess: $euiColorSuccess90 !default; +$euiColorBorderStrongWarning: $euiColorWarning90 !default; +$euiColorBorderStrongRisk: $euiColorRisk90 !default; +$euiColorBorderStrongDanger: $euiColorDanger90 !default; $euiColorBorderStrongText: $euiColorShade90 !default; + // Charts $euiColorChartLines: $euiColorShade30 !default; $euiColorChartBand: $euiColorShade10 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index 6a9eaa34265..a184b136dce 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -39,7 +39,7 @@ export const brand_text_colors: _EuiThemeBrandTextColors = { primaryText: SEMANTIC_COLORS.primary100, accentText: SEMANTIC_COLORS.accent100, successText: SEMANTIC_COLORS.success100, - warningText: SEMANTIC_COLORS.warning110, + warningText: SEMANTIC_COLORS.warning100, dangerText: SEMANTIC_COLORS.danger100, /* New colors */ @@ -48,7 +48,7 @@ export const brand_text_colors: _EuiThemeBrandTextColors = { textAccentSecondary: SEMANTIC_COLORS.accentSecondary100, textNeutral: SEMANTIC_COLORS.neutral100, textSuccess: SEMANTIC_COLORS.success100, - textWarning: SEMANTIC_COLORS.warning110, + textWarning: SEMANTIC_COLORS.warning100, textRisk: SEMANTIC_COLORS.risk100, textDanger: SEMANTIC_COLORS.danger100, }; @@ -164,14 +164,17 @@ export const border_colors: _EuiThemeBorderColors = { borderBaseFormsColorSwatch: SEMANTIC_COLORS.shade100Alpha24, borderBaseFormsControl: SEMANTIC_COLORS.shade60, - borderStrongPrimary: SEMANTIC_COLORS.primary100, - borderStrongAccent: SEMANTIC_COLORS.accent100, - borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary100, - borderStrongNeutral: SEMANTIC_COLORS.neutral100, - borderStrongSuccess: SEMANTIC_COLORS.success100, - borderStrongWarning: SEMANTIC_COLORS.warning100, - borderStrongRisk: SEMANTIC_COLORS.risk100, - borderStrongDanger: SEMANTIC_COLORS.danger100, + borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade40, + borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger80, + + borderStrongPrimary: SEMANTIC_COLORS.primary90, + borderStrongAccent: SEMANTIC_COLORS.accent90, + borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary90, + borderStrongNeutral: SEMANTIC_COLORS.neutral90, + borderStrongSuccess: SEMANTIC_COLORS.success90, + borderStrongWarning: SEMANTIC_COLORS.warning90, + borderStrongRisk: SEMANTIC_COLORS.risk90, + borderStrongDanger: SEMANTIC_COLORS.danger90, borderStrongText: SEMANTIC_COLORS.shade90, }; diff --git a/packages/eui-theme-common/changelogs/upcoming/8767.md b/packages/eui-theme-common/changelogs/upcoming/8767.md new file mode 100644 index 00000000000..69442487422 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8767.md @@ -0,0 +1,12 @@ +- Added semantic tokens: + - `colors.borderInteractiveFormsHoverPlain` + - `colors.borderInteractiveFormsHoverDanger` +- Added component tokens: + - `components.forms.backgroundDropping` + - `components.forms.borderFocused` + - `components.forms.borderInvalid` + - `components.forms.borderHovered` + - `components.forms.borderInvalidHovered` + - `components.forms.borderAutofilledHovered` + - `components.forms.clearButtonBackground` + 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 6133b8037d5..23daea005ef 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -268,6 +268,9 @@ export type _EuiThemeBorderColors = { borderBaseFormsColorSwatch: ColorModeSwitch; borderBaseFormsControl: ColorModeSwitch; + borderInteractiveFormsHoverPlain: ColorModeSwitch; + borderInteractiveFormsHoverDanger: ColorModeSwitch; + borderStrongPrimary: ColorModeSwitch; borderStrongAccent: ColorModeSwitch; borderStrongAccentSecondary: ColorModeSwitch; diff --git a/packages/eui-theme-common/src/global_styling/variables/flags.ts b/packages/eui-theme-common/src/global_styling/variables/flags.ts index 0860b3cdf0d..010182812de 100644 --- a/packages/eui-theme-common/src/global_styling/variables/flags.ts +++ b/packages/eui-theme-common/src/global_styling/variables/flags.ts @@ -8,6 +8,7 @@ export type EuiThemeVariantFlags = { buttonVariant: 'classic' | 'refresh'; + formVariant: 'classic' | 'refresh'; }; /** diff --git a/packages/eui-theme-common/src/global_styling/variables/forms.ts b/packages/eui-theme-common/src/global_styling/variables/forms.ts index 844354655b3..be4bf441548 100644 --- a/packages/eui-theme-common/src/global_styling/variables/forms.ts +++ b/packages/eui-theme-common/src/global_styling/variables/forms.ts @@ -18,9 +18,17 @@ export type _EuiThemeFormColors = { backgroundReadOnly: ColorModeSwitch; backgroundFocused: ColorModeSwitch; backgroundAutofilled: ColorModeSwitch; + backgroundDropping: ColorModeSwitch; prependBackground: ColorModeSwitch; border: ColorModeSwitch; + borderDisabled: ColorModeSwitch; + borderFocused: ColorModeSwitch; + borderInvalid: ColorModeSwitch; + borderHovered: ColorModeSwitch; + borderInvalidHovered: ColorModeSwitch; borderAutofilled: ColorModeSwitch; + borderAutofilledHovered: ColorModeSwitch; + clearButtonBackground: ColorModeSwitch; controlBorder: ColorModeSwitch; controlBorderSelected: ColorModeSwitch; controlBorderDisabled: ColorModeSwitch; diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png index 583f1188e9e..533edc2951e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.png index 2d74ef89905..1b46ffa0e9f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.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 index 57522e2169d..8f6ce98bf45 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_High_Contrast.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 c1592bea002..bf260d87913 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_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png index 5b3552d98e5..87b078096b8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png index 85c7df7513a..91cb62ab9db 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png index 8785ebee7a8..19715c612e4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png index 04046cd33f1..1eb2da609ff 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png index 156bf35240a..ce4cf0f948f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png index c7b453bb913..d2dfb6659cb 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_EuiColorPicker_EuiColorPicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png index 84a9566577a..6abba60f8cc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.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 7cf5b173c29..e7fccd72420 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 7d7e1aa68e4..17188605c08 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_Icons_And_Many_Options_Selected.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png index e7171c99924..addd2b78358 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Icons_And_Many_Options_Selected.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 7d7e1aa68e4..17188605c08 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 47784ac7272..7d2eaead65a 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_Full_Width.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png index b1a3fe181ef..9d20beb244e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.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 index 87030fab097..44e76cba0a8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png index 4bb122f96fa..5319b4316f5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png index 3a0c1997b92..46da76a803a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png index 326dbd3fbbd..7146e4a6426 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png index 456da8d0f41..b4e2fad039e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png index 7312fdf814a..ae085723ee0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png index a6bbc8021ff..7206713c619 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png index b8699167c35..5ebaabaedc8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png index 8861a42be53..ee11b91ed56 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_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 41b6e160a2a..d1905c1d2c8 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 a566e286e1e..2ae4b4d3956 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_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png index f63939d43ba..f4b95d46964 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png 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 index 62a15b1f7f6..0d1a3fe7fdb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png 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 4c06860e15d..8814f6b9007 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_EuiFormControlLayoutDelimited_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png index fb1edb4b6eb..7c947cbd973 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.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 76205c0baef..37ce5fd19ae 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 index bc7250b0e77..15b5206a533 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png 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 index 108188d98b5..392dafbe799 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png 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_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png index a1118c0e46a..ab3767c36af 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_EuiForm_EuiFormRow_Inline_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png index 3b9797a21ba..cdfe093eabb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index c8027ee75e9..17950ff4b74 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png index d4d4e7b6364..101e988ef65 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_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 b945bb69bb3..73a2be316c7 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_EuiSelectable_With_Search.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png index c7d3a3676a1..6b5107cebda 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png index 554968ba7ab..3adf028120b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png index 6ba74b0c1fc..7b6852dc910 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png index 07950bc6af7..b73d703efad 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index 0d26fd8fd52..7322eae909e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png index 1b289ccd448..d6df30bc1d4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Layers.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Layers.png new file mode 100644 index 00000000000..6d89a728337 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Layers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png index 3caadfac64d..99b74495f2c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png index b9bc4a4b572..d5943352375 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png index 44111fc0ad5..bed7c274e6d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png index e6192c332b5..a1e0e3bc331 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.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 25429b16aea..01b7963a3ea 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 78657acc47a..238d28df3d9 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_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png index 974998fd712..36767fb8caf 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 981e01fdbba..62a289f8ed4 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_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png index c80054d29c4..4bf248e2697 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_Expanded_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png index ed849658a6a..552e408a6a7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.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 index c0c92a0c368..92bc2b6f1cf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png 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_Marked_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Marked_Row.png index 726375f2ce9..5b885283ff3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Marked_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Marked_Row.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 3a59f8f8d80..85a8ef70ee4 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_Cell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png index 1308a354aa5..9cfb4a1c192 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index 9926d75738c..bf6ab99ccbb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png index cbb466758f8..f68cc6e63ad 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index ce1cb14c45a..e2f0c71128f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png index 4901ba04929..5dd0da580db 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.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 2fe12457054..709e222aa2b 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_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index 46a8a4540b5..0fcfd7ae860 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png index 69c3ccd13b9..bb2660d323f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png index b27a364fea8..7e0fca1b364 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index c873dedbc2c..180bfabe801 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 02eb3ac5aae..57098d1faa0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index 2d98a808695..045e5c799d5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png index 764032f00be..e88634672d7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index 3b813fc094b..bcce6b12d42 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index ffb5da6b153..0d7ba354877 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index fcf24566352..eb6fbaf835d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index 994669c6ef2..f732c1e7ae6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index 6018ec6336d..02b16b2fb15 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index 0a33c0f322a..aa139d236e2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index 602d89b397f..af085ea40e6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index 4d2bd2cc402..399083b92e4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index 3fa8fa6d11b..ac1e7243c41 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index 0f02e530674..d6ee7731cf3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png index ab47e71cf01..80116666c88 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index 00f4ae1849b..37b41fe696d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png index a98780bfdd3..da378d636d3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png index 209520a90d3..f95ad9c16f6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index 0f065f5a53b..d61fa08d4fd 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index 3251232cdb9..5276b1a15fa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png index e7168f6d229..b904d7b2905 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 63d9a0bc927..8ce75b84164 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index eb26d533a67..931fa1f5bc4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.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 4d52f6eb693..c6e543afbcb 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_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png index 8af45ffc223..d05b222ae27 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png index 865c8ac5be8..512072f1bcf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png index 74199228e40..c18d14c8faa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png index 1d4d1aa4f37..22c3b02f2b8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png index f028987b491..e1b4ead216a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png index 756049adfff..94c70f60969 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.png index 498f6b983a0..ba12bc0eeb4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.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 index 54e1c2af5af..f2dfbf0a551 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_High_Contrast.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 1ef96c18c06..6bff294339c 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_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png index bc13e03f417..cacb08b54de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png index f5cb92a6626..05095313536 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png index a5b8259e75f..d5a3edf28ad 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png index e169add6ad9..13e5ea4ab39 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png index f30cc79b419..7e4104d9605 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_High_Contrast_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png index da512bd5374..e543f6623b5 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_EuiColorPicker_EuiColorPicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png index 835ed4ff0b1..0c460fba313 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.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 70345f1d5b9..6bb8a359c98 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 707ac76da67..b99c6398141 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_Icons_And_Many_Options_Selected.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png index 8899b282f25..6a7f1ddb415 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Icons_And_Many_Options_Selected.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 707ac76da67..b99c6398141 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 84faacc8ed6..e48996cbd71 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_Full_Width.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png index abec88a3dfe..90383a7dc41 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png index abec88a3dfe..90383a7dc41 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png index 23bc7820f1e..ed9b76d8df4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png index a8a9adb7c4b..6520b9f020b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png index 0bd042668a0..f5a05893cd0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png index e075aaa91e1..e2c04dd206c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png index 60611f6db59..20f6a8075fc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_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 9c9d5aa8dbd..ae778b790f1 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 ac6657f64c3..c48424b2c13 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_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png index 7e7eab42443..99c1ad57a23 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast.png 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 index 3681d99a05a..36e7c132229 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png 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 93ad51439e9..a0482b5d868 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_EuiFormControlLayoutDelimited_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png index c356819327c..5619588d5dd 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.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 9d21423a8d6..4f4133de8a2 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 index 3d026b8cfe3..a37f476220d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast.png 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 index 68c0997d647..38fb969cf8e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_High_Contrast_Dark_Mode.png 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_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png index 92677784409..133530dc486 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_EuiForm_EuiFormRow_Inline_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png index 5ae758492b0..4f2b98f7728 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index b6aa830a279..21cb1cc9d7a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png index b1049c73cc5..15bf63dd999 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_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 3d19f484d65..62e7142c650 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_EuiSelectable_With_Search.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png index 9b8e8a55cf0..3aed5968ceb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png index b4952df3fc7..a4ed9c111da 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png index 0bfeb61fb3d..99e4dec14ac 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png index df6375a9219..46f50babdda 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index f0d40151d96..cf5d37caa08 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png index df6375a9219..46f50babdda 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Layers.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Layers.png new file mode 100644 index 00000000000..8d6ef6810af Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Layers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png index a58f987c64a..024153d3bea 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png index 874201f30c4..10d9a239e7d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png index 2ffb81bc24e..0757c4f98b8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.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 110603ab06c..6dff886de9c 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_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png index 5cd78f476be..282325a3048 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 ed9b626f62b..bb7037c4e7a 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_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png index c16c9bbb8d9..7c7ad89819d 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 9c29d25900f..a6f01229bb7 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 index 72b9562a839..8dc758e60fc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png 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_Marked_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png index eec9714cbfc..56502ba5d83 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.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 a7eed94fc28..51260959e7a 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_Cell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png index 274198fdc13..98bbfa320de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index 08024f08936..81c6611958b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png index 78562d55b41..42fd0c7f92c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index 23d7c9637c7..3f8fdd93575 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png index c760f734cf1..9e933f77827 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.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 5116a81cf53..2e5d0f02610 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 396c19b0843..32bae188764 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_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png index 650a6c0e5eb..b83e7a1a967 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png index b0d116f701f..582531e8f3c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index 2c1b922b778..3c9f8dabc99 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 42ff0c58fd9..8314f94d80e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index 9da87180427..a495e47e75f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png index d721361b752..8b566e60c85 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Marked_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index ccf1bc9f7e2..2105f55980a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index eae9a39f877..f7ca1583700 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index 5e680384a22..d2164a5d477 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index e69d27c1b3f..826f0893ce1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index 42082056729..7329a312061 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index 3603d50a39f..040c29959a1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index 963c445f26c..121ddf1c38c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index f080f46780a..4322defc0ff 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index 33d1f04ecf7..dda129d0a1d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index 7d07bdc5d7e..4d913172b13 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index da3b2fa1735..d37b49e5199 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png index d67dc4ca866..95312ae69be 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png index e12594c8620..20e1fdbc88b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index 91234362154..29f942cc4e6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png index b9bbe290b9a..e72268717ab 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 7808291cad7..cb816ffbe71 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index bb31dea1db2..25467696f5f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.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 83c2de3ba4b..916b9e861fe 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_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png index f1c7ccf7af5..63c5f38fa03 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png index 2a34be28946..708443a6429 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png index d533e7c8827..85d1a942ba2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png index 9ad22e1838d..2862db0bb01 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png differ diff --git a/packages/eui/changelogs/upcoming/8767.md b/packages/eui/changelogs/upcoming/8767.md new file mode 100644 index 00000000000..bb3624a140a --- /dev/null +++ b/packages/eui/changelogs/upcoming/8767.md @@ -0,0 +1,36 @@ +- Added new `refresh` design for input styles and form layout components: + - `EuiFieldText` + - `EuiFieldNumber` + - `EuiFieldPassword` + - `EuiFieldSearch` + - `EuiTextarea` + - `EuiSelect` + - `EuiSuperSelect` + - `EuiFormControlLayout` + - `EuiFormControlLayoutDelimited` + - `EuiFormControlLayoutIcons` + - `EuiFormLabel` + - `EuiFormErrorText` +- Added semantic tokens: + - `colors.borderInteractiveFormsHoverPlain` + - `colors.borderInteractiveFormsHoverDanger` +- Added component tokens: + - `components.forms.backgroundDropping` + - `components.forms.borderFocused` + - `components.forms.borderInvalid` + - `components.forms.borderHovered` + - `components.forms.borderInvalidHovered` + - `components.forms.borderAutofilledHovered` + - `components.forms.clearButtonBackground` +- Updated values for tokens: + - `colors.textWarning` + - `colors.borderStrongPrimary` + - `colors.borderStrongAccent` + - `colors.borderStrongAccentSecondary` + - `colors.borderStrongNeutral` + - `colors.borderStrongSuccess` + - `colors.borderStrongWarning` + - `colors.borderStrongRisk` + - `colors.borderStrongDanger` + - `components.forms.backgroundReadOnly` + diff --git a/packages/eui/changelogs/upcoming/8778.md b/packages/eui/changelogs/upcoming/8778.md new file mode 100644 index 00000000000..1b97002b7b7 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8778.md @@ -0,0 +1,7 @@ +- Added new `refresh` design for input styles on form picker components: + - `EuiComboBox` + - `EuiFilePicker` + - `EuiDatePicker` + - `EuiSuperDatePicker` +- Updated the font size of `xs` size `EuiButtonEmpty` to `14px` + diff --git a/packages/eui/changelogs/upcoming/8806.md b/packages/eui/changelogs/upcoming/8806.md new file mode 100644 index 00000000000..3cc25c5ebd4 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8806.md @@ -0,0 +1,6 @@ +- Added `theme` prop to `EuiSelectableTemplateSitewide` to support granular control over the applied `colorMode` for the search and popover components + +**Breaking changes** + +- Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output. + diff --git a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap index 42ae2874090..6d78a4bfca7 100644 --- a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap +++ b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap @@ -299,7 +299,7 @@ exports[`EuiButton props isLoading is rendered 1`] = ` aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #1750ba currentcolor currentcolor currentcolor;" + style="border-color: #0b64dd currentcolor currentcolor currentcolor;" /> diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap index 2edfef7605c..b7ce4d23f0e 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #1750ba currentcolor currentcolor currentcolor;" + style="border-color: #0b64dd currentcolor currentcolor currentcolor;" /> `; diff --git a/packages/eui/src/components/combo_box/combo_box.spec.tsx b/packages/eui/src/components/combo_box/combo_box.spec.tsx index 06aa8e035fd..be968013406 100644 --- a/packages/eui/src/components/combo_box/combo_box.spec.tsx +++ b/packages/eui/src/components/combo_box/combo_box.spec.tsx @@ -254,7 +254,7 @@ describe('EuiComboBox', () => { ); cy.get('[data-test-subj="comboBoxSearchInput"]') .invoke('width') - .should('be.eq', 356); + .should('be.eq', 352); }); }); diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts index 01d89eb5112..47e3ae1a54f 100644 --- a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts +++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts @@ -8,7 +8,7 @@ import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../../services'; +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services'; import { logicalCSS } from '../../../global_styling'; import { euiFormControlStyles, @@ -18,6 +18,10 @@ import { export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); const formStyles = euiFormControlStyles(euiThemeContext); return { @@ -25,6 +29,13 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => { euiComboBoxInputWrapper: css` ${euiFormControlDefaultShadow(euiThemeContext)} display: flex; + + ${isRefreshVariant && + ` + &:focus-within { + ${formStyles.focus} + } + `} `, multiSelect: css` flex-wrap: wrap; @@ -33,7 +44,10 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => { ${formStyles.uncompressed} ${logicalCSS('height', 'auto')} ${logicalCSS('padding-vertical', euiTheme.size.s)} - ${logicalCSS('padding-left', euiTheme.size.s)} + ${logicalCSS( + 'padding-left', + isRefreshVariant ? euiTheme.size.m : euiTheme.size.s + )} column-gap: ${euiTheme.size.s}; row-gap: ${euiTheme.size.xs}; `, @@ -60,7 +74,9 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => { invalid: css(formStyles.invalid), disabled: css(formStyles.disabled), - open: css(formStyles.focus), + open: css` + ${formStyles.focus} + `, inGroup: css(formStyles.inGroup), // Actual input element, which has variable width depending on its value @@ -75,7 +91,7 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => { background: transparent; &:disabled { - color: ${euiTheme.colors.disabledText}; + color: ${euiTheme.colors.textDisabled}; } /* Ensure that no input states are visible on the hidden input */ diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx index bce90e20c65..bff9f6d6900 100644 --- a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx +++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx @@ -21,6 +21,8 @@ import { keys, CanvasTextUtils, RenderWithEuiStylesMemoizer, + isEuiThemeRefreshVariant, + RenderWithEuiTheme, } from '../../../services'; import { EuiScreenReaderOnly } from '../../accessibility'; import { @@ -317,103 +319,122 @@ export class EuiComboBoxInput extends Component< }); return ( - - {(stylesMemoizer) => { - const styles = stylesMemoizer(euiComboBoxInputStyles); - const cssStyles = [ - styles.euiComboBoxInputWrapper, - !singleSelection && styles.multiSelect, - compressed ? styles.compressed : styles.uncompressed, - ...(this.asPlainText || showPlaceholder - ? [ - styles.plainText.plainText, - compressed - ? styles.plainText.compressed - : styles.plainText.uncompressed, - ] - : []), - isDisabled - ? styles.disabled - : isInvalid - ? styles.invalid - : isListOpen - ? styles.open - : undefined, - isInGroup && styles.inGroup, - ]; - const formLayoutStyles = [ - styles.formLayout.euiComboBox__formControlLayout, - !singleSelection && styles.formLayout.multiSelect, - ]; - - return ( - -
- {this.renderPills()} - + {(euiThemeContext) => ( + + {(stylesMemoizer) => { + const styles = stylesMemoizer(euiComboBoxInputStyles); + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); + + const stateCss = isRefreshVariant + ? isListOpen + ? styles.open + : isInvalid + ? styles.invalid + : undefined + : isInvalid + ? styles.invalid + : isListOpen + ? styles.open + : undefined; + + const cssStyles = [ + styles.euiComboBoxInputWrapper, + !singleSelection && styles.multiSelect, + compressed ? styles.compressed : styles.uncompressed, + ...(this.asPlainText || showPlaceholder + ? [ + styles.plainText.plainText, + compressed + ? styles.plainText.compressed + : styles.plainText.uncompressed, + ] + : []), + isDisabled ? styles.disabled : stateCss, + isInGroup && styles.inGroup, + ]; + const formLayoutStyles = [ + styles.formLayout.euiComboBox__formControlLayout, + !singleSelection && styles.formLayout.multiSelect, + ]; + + return ( + - onChange(event.target.value)} - onFocus={this.onFocus} - onKeyDown={this.onKeyDown} - ref={this.inputRefCallback} - role="combobox" - style={{ - inlineSize: - this.asPlainText || showPlaceholder - ? '100%' - : this.state.inputWidth, - }} - placeholder={showPlaceholder ? placeholder : undefined} - value={this.searchValue} - autoFocus={autoFocus} - autoComplete="off" - // Force the menu to re-open on every input click - only necessary when plain text - onClick={this.asPlainText ? (onFocus as any) : undefined} // Type shenanigans - event should be mostly the same - /> - - {removeOptionMessage} -
- - ); - }} - +
+ {this.renderPills()} + + onChange(event.target.value)} + onFocus={this.onFocus} + onKeyDown={this.onKeyDown} + ref={this.inputRefCallback} + role="combobox" + style={{ + inlineSize: + this.asPlainText || showPlaceholder + ? '100%' + : this.state.inputWidth, + }} + placeholder={showPlaceholder ? placeholder : undefined} + value={this.searchValue} + autoFocus={autoFocus} + autoComplete="off" + // Force the menu to re-open on every input click - only necessary when plain text + onClick={ + this.asPlainText ? (onFocus as any) : undefined + } // Type shenanigans - event should be mostly the same + /> + + {removeOptionMessage} +
+ + ); + }} + + )} + ); } } diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx index 92be6112c16..c62b8c1cab9 100644 --- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx +++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx @@ -14,8 +14,7 @@ import React from 'react'; import { EuiDataGrid } from '../../data_grid'; const EXPECTED_HOVER_COLOR = 'rgb(90, 109, 140)'; -// TODO should change back to primary90 (rgb(11, 100, 221)) as per design spec -const EXPECTED_FOCUS_COLOR = 'rgb(23, 80, 186)'; // primary100 +const EXPECTED_FOCUS_COLOR = 'rgb(11, 100, 221)'; const ANIMATION = { DELAY: 350, DURATION: 150, diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap index 21e8b2e5a3b..53d178a5b02 100644 --- a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap +++ b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiDatePickerRange is rendered 1`] = ` - - + `; exports[`EuiDatePickerRange props compressed 1`] = ` -
- + `; exports[`EuiDatePickerRange props disabled 1`] = ` -
- + `; exports[`EuiDatePickerRange props fullWidth 1`] = ` -
- + `; exports[`EuiDatePickerRange props inline renders 1`] = ` -
- + `; exports[`EuiDatePickerRange props isInvalid 1`] = ` -
- + `; exports[`EuiDatePickerRange props isLoading 1`] = ` -
- + `; exports[`EuiDatePickerRange props readOnly 1`] = ` -
- +
`; exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = ` - - + `; diff --git a/packages/eui/src/components/date_picker/date_picker.styles.ts b/packages/eui/src/components/date_picker/date_picker.styles.ts index dc34b8eb880..2e2e171d1d0 100644 --- a/packages/eui/src/components/date_picker/date_picker.styles.ts +++ b/packages/eui/src/components/date_picker/date_picker.styles.ts @@ -9,7 +9,7 @@ import { css } from '@emotion/react'; import { euiShadowMedium } from '@elastic/eui-theme-common'; -import { UseEuiTheme } from '../../services'; +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../services'; import { logicalCSS } from '../../global_styling'; import { euiFormControlDisabledStyles, @@ -20,6 +20,17 @@ import { export const euiDatePickerStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); + + const inlineStyles = ` + /* removes form layout border */ + &::after { + display: none; + } + `; return { euiDatePicker: css` @@ -33,6 +44,8 @@ export const euiDatePickerStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('width', 'fit-content')} border: none; padding: 0; + + ${isRefreshVariant && inlineStyles} } .euiFormControlLayout__childrenWrapper { diff --git a/packages/eui/src/components/date_picker/date_picker_range.styles.ts b/packages/eui/src/components/date_picker/date_picker_range.styles.ts index 22f28df8adc..f9ec6f32711 100644 --- a/packages/eui/src/components/date_picker/date_picker_range.styles.ts +++ b/packages/eui/src/components/date_picker/date_picker_range.styles.ts @@ -10,28 +10,54 @@ import { css } from '@emotion/react'; import { euiShadowMedium } from '@elastic/eui-theme-common'; import { logicalCSS } from '../../global_styling'; -import { UseEuiTheme } from '../../services'; - -export const euiDatePickerRangeStyles = { - euiDatePickerRange: css` - /* Needed for correct focus/invalid underline/linear-gradient styles */ - .euiPopover, - .react-datepicker__input-container, - .euiDatePicker { - ${logicalCSS('height', '100%')} - } - - /* Needed for the fullWidth prop: makes inputs take the whole available space */ - .euiPopover { - flex: 1; - } - `, +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../services'; +import { disableFormControlHoverStyles } from '../form/form.styles'; + +export const euiDatePickerRangeStyles = (euiThemeContext: UseEuiTheme) => { + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); + + const refreshStyles = ` + .euiPopover:last-child { + ${logicalCSS('border-top-right-radius', 'inherit')} + ${logicalCSS('border-bottom-right-radius', 'inherit')} + + * { + ${logicalCSS('border-top-right-radius', 'inherit')} + ${logicalCSS('border-bottom-right-radius', 'inherit')} + } + } + `; + + return { + euiDatePickerRange: css` + /* Needed for correct focus/invalid underline/linear-gradient styles */ + .euiPopover, + .react-datepicker__input-container, + .euiDatePicker { + ${logicalCSS('height', '100%')} + } + + /* Needed for the fullWidth prop: makes inputs take the whole available space */ + .euiPopover { + flex: 1; + } + + ${isRefreshVariant && refreshStyles} + `, + }; }; export const euiDatePickerRangeInlineStyles = ( euiThemeContext: UseEuiTheme ) => { const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); // Use a container query to stack date pickers vertically if the container is // not wide enough to fit both. We need a fn for this to render two width queries, @@ -82,6 +108,13 @@ export const euiDatePickerRangeInlineStyles = ( ${logicalCSS('height', 'auto')} ${logicalCSS('padding-bottom', euiTheme.size.s)} } + + ${isRefreshVariant && + ` + &::after { + display: none; + } + `} } /* Make sure the inline date picker sets its absolute positioning based off the correct parent */ @@ -100,6 +133,17 @@ export const euiDatePickerRangeInlineStyles = ( ${euiShadowMedium(euiThemeContext, { borderAllInHighContrastMode: true, })} + + ${isRefreshVariant && + ` + /* the form layout is not part of the interactive behavior but rather a container in this variant */ + ${disableFormControlHoverStyles()} + + .euiFormControlLayout__childrenWrapper { + box-shadow: none; + ${disableFormControlHoverStyles()} + } + `} } `, diff --git a/packages/eui/src/components/date_picker/date_picker_range.tsx b/packages/eui/src/components/date_picker/date_picker_range.tsx index dfed0a834f2..75a29b5a526 100644 --- a/packages/eui/src/components/date_picker/date_picker_range.tsx +++ b/packages/eui/src/components/date_picker/date_picker_range.tsx @@ -26,7 +26,7 @@ import { CommonProps } from '../common'; import { useEuiMemoizedStyles } from '../../services'; import { - euiDatePickerRangeStyles as styles, + euiDatePickerRangeStyles, euiDatePickerRangeInlineStyles, } from './date_picker_range.styles'; @@ -126,6 +126,7 @@ export const EuiDatePickerRange: FunctionComponent = ({ const classes = classNames('euiDatePickerRange', className); + const styles = useEuiMemoizedStyles(euiDatePickerRangeStyles); const inlineStyles = useEuiMemoizedStyles(euiDatePickerRangeInlineStyles); const cssStyles = !inline ? styles.euiDatePickerRange @@ -203,7 +204,7 @@ export const EuiDatePickerRange: FunctionComponent = ({ }, [iconType, inline]); return ( - +
= ({ : inlineStyles.formLayout.noShadow) } /> - +
); }; diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index 306224a0103..f76ca298a77 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -764,7 +764,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = ` class="euiSuperDatePicker testClass1 testClass2 emotion-euiSuperDatePicker-restricted-euiTestCss" data-test-subj="test subject string" > -
- + diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts index efa3b9b8d67..8f6d92e5022 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts @@ -8,7 +8,11 @@ import { css } from '@emotion/react'; -import { UseEuiTheme, makeHighContrastColor } from '../../../services'; +import { + UseEuiTheme, + isEuiThemeRefreshVariant, + makeHighContrastColor, +} from '../../../services'; import { euiFontSize, euiMaxBreakpoint, @@ -21,11 +25,18 @@ import { euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles, - euiFormControlShowBackgroundUnderline, + euiFormControlShowBackgroundLine, + euiFormControlFocusStyles, + euiFormControlHighlightBorderStyles, } from '../../form/form.styles'; export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); + const forms = euiFormVariables(euiThemeContext); const inputWidth = euiTheme.base * 30; @@ -52,6 +63,116 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { needsUpdatingBackgroundColor ); + const formLayoutStyles = ` + /* using wrapper hover styles instead */ + .euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover { + outline: none; + } + + .euiPopover { + /* mimic input border-radius */ + border-radius: ${forms.controlBorderRadius}; + + &:first-child { + ${logicalCSS('border-top-left-radius', 'inherit')} + ${logicalCSS('border-bottom-left-radius', 'inherit')} + } + + &:last-child { + ${logicalCSS('border-top-right-radius', 'inherit')} + ${logicalCSS('border-bottom-right-radius', 'inherit')} + } + } + + .euiDatePopoverButton { + background-color: transparent; + border-radius: inherit; + } + `; + + const popoverButtonFocusStyles = isRefreshVariant + ? ` + ${euiFormControlFocusStyles(euiThemeContext)} + ` + : ` + --euiFormControlStateColor: ${euiTheme.colors.primary}; + ${euiFormControlShowBackgroundLine( + euiThemeContext, + euiTheme.colors.primary + )} + `; + + const invalidStyles = isRefreshVariant + ? ` + &:has(.euiPopover-isOpen, .euiDatePopoverButton:focus) { + --euiFormControlStateColor: ${forms.borderColor}; + --euiFormControlStateHoverColor: ${forms.borderHovered}; + } + + &:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)) { + ${euiFormControlInvalidStyles(euiThemeContext)} + } + + .euiDatePopoverButton:focus, + .euiPopover-isOpen .euiDatePopoverButton { + ${euiFormControlFocusStyles(euiThemeContext)} + } + ` + : ` + ${euiFormControlInvalidStyles(euiThemeContext)} + `; + + const needsUpdatingStyles = ` + --euiFormControlStateColor: ${euiTheme.colors.success}; + --euiFormControlStateHoverColor: ${euiTheme.colors.success}; + --euiFormControlStateWidth: ${euiTheme.border.width.thin}; + ${euiFormControlHighlightBorderStyles} + + &:has(.euiPopover-isOpen), + &:focus-within { + --euiFormControlStateColor: ${forms.borderColor}; + --euiFormControlStateHoverColor: ${forms.borderHovered}; + } + `; + + const needsUpdatingPopoverButtonFocusStyles = isRefreshVariant + ? ` + ${euiFormControlFocusStyles(euiThemeContext)} + ` + : ` + --euiFormControlStateColor: ${euiTheme.colors.success}; + ${euiFormControlShowBackgroundLine( + euiThemeContext, + euiTheme.colors.success + )} + + ${highContrastModeStyles(euiThemeContext, { + // Force the fill color of all icons/svgs to give a bit more indication of state, + // since Windows high contrast themes otherwise override background/text color + forced: ` + svg, + & + * svg { + fill: ${euiTheme.colors.success}; + } + `, + })} + `; + + const prettyFormatStyles = ` + --euiFormControlStateHoverColor: ${forms.borderHovered}; + ${euiFormControlDefaultShadow(euiThemeContext)} + + ${highContrastModeStyles(euiThemeContext, { + preferred: ` + border: none; + `, + })} + + &:focus { + ${euiFormControlFocusStyles(euiThemeContext)} + } + `; + return { euiSuperDatePicker: css` display: flex; @@ -129,17 +250,22 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { euiSuperDatePicker__prettyFormat: css` ${_buttonStyles(euiThemeContext)} text-align: start; + + ${isRefreshVariant && prettyFormatStyles} `, // Form states states: { euiSuperDatePicker__formControlLayout: css` .euiFormControlLayout__childrenWrapper { + --euiFormControlStateHoverColor: ${forms.borderHovered}; ${euiFormControlDefaultShadow(euiThemeContext)} ${highContrastModeStyles(euiThemeContext, { none: 'box-shadow: none;', preferred: 'border: none;', })} + + ${isRefreshVariant && formLayoutStyles} } `, default: css` @@ -150,19 +276,18 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { /* Focus/selection underline per-button */ .euiDatePopoverButton { - ${euiFormControlDefaultShadow(euiThemeContext, { + --euiFormControlStateHoverColor: ${forms.borderHovered}; + ${!isRefreshVariant && + euiFormControlDefaultShadow(euiThemeContext, { withBorder: false, withBackgroundColor: false, })} + box-shadow: none; } .euiDatePopoverButton:focus, .euiPopover-isOpen .euiDatePopoverButton { - --euiFormControlStateColor: ${euiTheme.colors.primary}; - ${euiFormControlShowBackgroundUnderline( - euiThemeContext, - euiTheme.colors.primary - )} + ${popoverButtonFocusStyles} } `, disabled: css` @@ -174,13 +299,16 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { .euiFormControlLayout__childrenWrapper { color: ${euiTheme.colors.textDanger}; background-color: ${forms.backgroundColor}; - ${euiFormControlInvalidStyles(euiThemeContext)} + + ${invalidStyles} } `, needsUpdating: css` .euiFormControlLayout__childrenWrapper { color: ${needsUpdatingTextColor}; background-color: ${needsUpdatingBackgroundColor}; + + ${isRefreshVariant && needsUpdatingStyles} } .euiFormControlLayoutDelimited__delimiter { @@ -193,27 +321,14 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { withBorder: false, withBackgroundColor: false, })} + background-color: inherit; + box-shadow: none; } .euiDatePopoverButton:focus, .euiPopover-isOpen .euiDatePopoverButton { - --euiFormControlStateColor: ${euiTheme.colors.success}; - ${euiFormControlShowBackgroundUnderline( - euiThemeContext, - euiTheme.colors.success - )} + ${needsUpdatingPopoverButtonFocusStyles} } - - ${highContrastModeStyles(euiThemeContext, { - // Force the fill color of all icons/svgs to give a bit more indication of state, - // since Windows high contrast themes otherwise override background/text color - forced: ` - svg, - & + * svg { - fill: ${euiTheme.colors.success}; - } - `, - })} `, }, }; diff --git a/packages/eui/src/components/form/field_number/field_number.styles.ts b/packages/eui/src/components/form/field_number/field_number.styles.ts index bd624caf56e..8a4785b8e39 100644 --- a/packages/eui/src/components/form/field_number/field_number.styles.ts +++ b/packages/eui/src/components/form/field_number/field_number.styles.ts @@ -8,13 +8,33 @@ import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../../services'; +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services'; import { euiFormControlStyles } from '../form.styles'; export const euiFieldNumberStyles = (euiThemeContext: UseEuiTheme) => { const { colorMode } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); + const formStyles = euiFormControlStyles(euiThemeContext); + const invalidStyles = isRefreshVariant + ? ` + &:is(:invalid, [aria-invalid='true']):not( + .euiFormControlLayoutDelimited__input, :focus + ) { + ${formStyles.invalid} + } + ` + : ` + /* Account for native validity detection as well via [aria-invalid="true"] */ + &:is(:invalid, [aria-invalid='true']) { + ${formStyles.invalid} + } + `; + return { euiFieldNumber: css` ${formStyles.shared} @@ -22,10 +42,7 @@ export const euiFieldNumberStyles = (euiThemeContext: UseEuiTheme) => { /* Force the browser number stepper UI to follow EUI's light/dark mode */ color-scheme: ${colorMode === 'DARK' ? 'dark' : 'light'}; - /* Account for native validity detection as well via [aria-invalid="true"] */ - &:is(:invalid, [aria-invalid='true']) { - ${formStyles.invalid} - } + ${invalidStyles} &:focus { ${formStyles.focus} diff --git a/packages/eui/src/components/form/field_text/field_text.styles.ts b/packages/eui/src/components/form/field_text/field_text.styles.ts index feeb82dd95f..814c0ac5032 100644 --- a/packages/eui/src/components/form/field_text/field_text.styles.ts +++ b/packages/eui/src/components/form/field_text/field_text.styles.ts @@ -8,19 +8,35 @@ import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../../services'; +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services'; import { euiFormControlStyles } from '../form.styles'; export const euiFieldTextStyles = (euiThemeContext: UseEuiTheme) => { + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'formVariant' + ); const formStyles = euiFormControlStyles(euiThemeContext); + const invalidStyles = isRefreshVariant + ? ` + &:is(:invalid, [aria-invalid='true']):not( + .euiFormControlLayoutDelimited__input, :focus + ) { + ${formStyles.invalid} + } + ` + : ` + &:is(:invalid){ + ${formStyles.invalid} + } + `; + return { euiFieldText: css` ${formStyles.shared} - &:invalid { - ${formStyles.invalid} - } + ${invalidStyles} &:focus { ${formStyles.focus} diff --git a/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap b/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap index 58022a1b3d9..d2e37966f5a 100644 --- a/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap +++ b/packages/eui/src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap @@ -18,7 +18,7 @@ exports[`EuiFilePicker is rendered 1`] = `