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 ed01cd7edb3..e818196e12f 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -136,6 +136,24 @@ }, "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", "euiShadowColor": "#000000", + "euiShadows": { + "xs": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px 2px 8px 0px hsl(0deg 0% 0% / 0.24)", + "s": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 2px 7px 0px hsl(0deg 0% 0% / 0.46), 0px 4px 11px 0px hsl(0deg 0% 0% / 0.26)", + "m": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 3px 10px 0px hsl(0deg 0% 0% / 0.52), 0px 6px 14px 0px hsl(0deg 0% 0% / 0.28)", + "l": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 4px 13px 0px hsl(0deg 0% 0% / 0.58), 0px 8px 17px 0px hsl(0deg 0% 0% / 0.3)", + "xl": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 5px 16px 0px hsl(0deg 0% 0% / 0.64), 0px 10px 20px 0px hsl(0deg 0% 0% / 0.32)", + "xlHover": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 6px 19px 0px hsl(0deg 0% 0% / 0.7), 0px 12px 23px 0px hsl(0deg 0% 0% / 0.34)", + "flat": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px 2px 8px 0px hsl(0deg 0% 0% / 0.24)" + }, + "euiShadowsUp": { + "xs": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px -2px 8px 0px hsl(0deg 0% 0% / 0.24)", + "s": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -2px 7px 0px hsl(0deg 0% 0% / 0.46), 0px -4px 11px 0px hsl(0deg 0% 0% / 0.26)", + "m": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -3px 10px 0px hsl(0deg 0% 0% / 0.52), 0px -6px 14px 0px hsl(0deg 0% 0% / 0.28)", + "l": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -4px 13px 0px hsl(0deg 0% 0% / 0.58), 0px -8px 17px 0px hsl(0deg 0% 0% / 0.3)", + "xl": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -5px 16px 0px hsl(0deg 0% 0% / 0.64), 0px -10px 20px 0px hsl(0deg 0% 0% / 0.32)", + "xlHover": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -6px 19px 0px hsl(0deg 0% 0% / 0.7), 0px -12px 23px 0px hsl(0deg 0% 0% / 0.34)", + "flat": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px -2px 8px 0px hsl(0deg 0% 0% / 0.24)" + }, "euiSize": "16px", "euiSizeXS": "4px", "euiSizeS": "8px", 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 67f9282cfaf..ac9ab669404 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 @@ -137,6 +137,24 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { }; euiBreakpointKeys: string; euiShadowColor: string; + euiShadows: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, + euiShadowsUp: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, euiSize: string; euiSizeXS: string; euiSizeS: 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 941b63776a6..b9fd888861c 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -136,6 +136,24 @@ }, "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", "euiShadowColor": "#000000", + "euiShadows": { + "xs": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)", + "s": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px 4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)", + "m": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px 6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)", + "l": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px 8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)", + "xl": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px 10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)", + "xlHover": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)", + "flat": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)" + }, + "euiShadowsUp": { + "xs": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)", + "s": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px -4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)", + "m": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px -6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)", + "l": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px -8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)", + "xl": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px -10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)", + "xlHover": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)", + "flat": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)" + }, "euiSize": "16px", "euiSizeXS": "4px", "euiSizeS": "8px", 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 4ac26aabd31..15129919ca6 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 @@ -137,6 +137,24 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { }; euiBreakpointKeys: string; euiShadowColor: string; + euiShadows: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, + euiShadowsUp: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, euiSize: string; euiSizeXS: string; euiSizeS: string; diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts index 078c739583c..819a8beb5c1 100644 --- a/packages/eui-theme-borealis/src/index.ts +++ b/packages/eui-theme-borealis/src/index.ts @@ -15,6 +15,7 @@ import { base, size } from './variables/_size'; import { border } from './variables/_borders'; import { levels } from './variables/_levels'; import { font } from './variables/_typography'; +import { shadows } from './variables/_shadows'; import { focus } from './variables/_states'; import { components } from './variables/_components'; import { overrides } from './variables/_overrides'; @@ -35,6 +36,7 @@ export const euiThemeBorealis: EuiThemeShape = { animation, breakpoint, levels, + shadows, focus, components, flags: { diff --git a/packages/eui-theme-borealis/src/variables/_shadows.ts b/packages/eui-theme-borealis/src/variables/_shadows.ts new file mode 100644 index 00000000000..87e7fa52539 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_shadows.ts @@ -0,0 +1,457 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { + formatMultipleBoxShadow, + type _EuiThemeShadows, + type _EuiThemeShadowPrimitives, +} from '@elastic/eui-theme-common'; +import { SEMANTIC_COLORS } from './colors/_semantic_colors'; + +/** + * This structure holds "primitives" (or actual design tokens as they + * would be stored in a design token repository). + * Not exposing them in the theme object is intentional. + * The term "primitive" seems appropriate but may change. + */ +export const shadowPrimitives: _EuiThemeShadowPrimitives = { + xs: { + light: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.16, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.06, + x: 0, + y: 1, + blur: 4, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.04, + x: 0, + y: 2, + blur: 8, + spread: 0, + }, + ], + dark: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 1, + x: 0, + y: 0, + blur: 0, + spread: 1, + }, + { + color: '#000', + opacity: 0.4, + x: 0, + y: 1, + blur: 4, + spread: 0, + }, + { + color: '#000', + opacity: 0.24, + x: 0, + y: 2, + blur: 8, + spread: 0, + }, + ], + }, + s: { + light: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.16, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.08, + x: 0, + y: 2, + blur: 7, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.05, + x: 0, + y: 4, + blur: 11, + spread: 0, + }, + ], + dark: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 1, + x: 0, + y: 0, + blur: 0, + spread: 1, + }, + { + color: '#000', + opacity: 0.46, + x: 0, + y: 2, + blur: 7, + spread: 0, + }, + { + color: '#000', + opacity: 0.26, + x: 0, + y: 4, + blur: 11, + spread: 0, + }, + ], + }, + m: { + light: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.16, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.1, + x: 0, + y: 3, + blur: 10, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.06, + x: 0, + y: 6, + blur: 14, + spread: 0, + }, + ], + dark: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 1, + x: 0, + y: 0, + blur: 0, + spread: 1, + }, + { + color: '#000', + opacity: 0.52, + x: 0, + y: 3, + blur: 10, + spread: 0, + }, + { + color: '#000', + opacity: 0.28, + x: 0, + y: 6, + blur: 14, + spread: 0, + }, + ], + }, + l: { + light: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.16, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.12, + x: 0, + y: 4, + blur: 13, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.07, + x: 0, + y: 8, + blur: 17, + spread: 0, + }, + ], + dark: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 1, + x: 0, + y: 0, + blur: 0, + spread: 1, + }, + { + color: '#000', + opacity: 0.58, + x: 0, + y: 4, + blur: 13, + spread: 0, + }, + { + color: '#000', + opacity: 0.3, + x: 0, + y: 8, + blur: 17, + spread: 0, + }, + ], + }, + xl: { + light: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.16, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.14, + x: 0, + y: 5, + blur: 16, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.08, + x: 0, + y: 10, + blur: 20, + spread: 0, + }, + ], + dark: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 1, + x: 0, + y: 0, + blur: 0, + spread: 1, + }, + { + color: '#000', + opacity: 0.64, + x: 0, + y: 5, + blur: 16, + spread: 0, + }, + { + color: '#000', + opacity: 0.32, + x: 0, + y: 10, + blur: 20, + spread: 0, + }, + ], + }, + xxl: { + light: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.16, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.16, + x: 0, + y: 6, + blur: 19, + spread: 0, + }, + { + color: SEMANTIC_COLORS.shade120, + opacity: 0.09, + x: 0, + y: 12, + blur: 23, + spread: 0, + }, + ], + dark: [ + { + color: SEMANTIC_COLORS.shade120, + opacity: 1, + x: 0, + y: 0, + blur: 0, + spread: 1, + }, + { + color: '#000', + opacity: 0.7, + x: 0, + y: 6, + blur: 19, + spread: 0, + }, + { + color: '#000', + opacity: 0.34, + x: 0, + y: 12, + blur: 23, + spread: 0, + }, + ], + }, + flat: { + light: [], + dark: [], + }, +}; + +export const shadows: _EuiThemeShadows = { + xs: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xs.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.xs.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xs.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.xs.dark, { + up: true, + }), + }, + }, + s: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark, { + up: true, + }), + }, + }, + m: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.m.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.m.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.m.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.m.dark, { + up: true, + }), + }, + }, + l: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.l.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.l.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.l.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.l.dark, { + up: true, + }), + }, + }, + xl: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xl.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.xl.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xl.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.xl.dark, { + up: true, + }), + }, + }, + hover: { + base: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1)), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1)), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), { + up: true, + }), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), { + up: true, + }), + }, + }, + xl: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xxl.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.xxl.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xxl.light, { + up: true, + }), + DARK: formatMultipleBoxShadow(shadowPrimitives.xxl.dark, { + up: true, + }), + }, + }, + }, + // Falls back to `xs` (defined only to support legacy `euiShadowFlat` mixin) + flat: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xs.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.xs.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xs.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.xs.dark, { + up: true, + }), + }, + }, +}; diff --git a/packages/eui-theme-common/src/global_styling/functions/shadows.ts b/packages/eui-theme-common/src/global_styling/functions/shadows.ts index b3dd876d5ea..1cc3bb73dd1 100644 --- a/packages/eui-theme-common/src/global_styling/functions/shadows.ts +++ b/packages/eui-theme-common/src/global_styling/functions/shadows.ts @@ -14,7 +14,7 @@ import { // Create a CSS color value using whose opacity is determined based // on either a light or dark theme. We use a multiplier -// of 1 for light themes and 2.5 for dark themes +// of 1 for light themes and 3.5 for dark themes export const getShadowColor = ( color: string, opacity: number, @@ -24,3 +24,46 @@ export const getShadowColor = ( colorMode === COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1; return chroma(color).alpha(themeOpacity).css(); }; + +/** + * Converts a `box-shadow` string to a `filter: drop-shadow()` string. + * + * @todo check whether this is actually needed in +2025, the original code replacing + * box-shadow with filter: drop-shadow() had the following comment: + * > Using only one drop-shadow filter instead of multiple is more + * > performant & prevents Safari bugs + * + * @param boxShadow The `box-shadow` string to convert. + * @returns The converted `filter` string. + */ +export const boxShadowToFilterDropShadow = (boxShadow: string) => { + const dropShadows = boxShadow + .split(/,(?![^(]*\))/) // split by comma, but not inside parentheses + .map((shadow) => { + shadow = shadow.trim(); + // remove `inset`, not supported by drop-shadow + if (shadow.startsWith('inset ')) { + shadow = shadow.slice(6); + } + // can be complex (hsl, rgb, etc.), used AI for this + const colorMatch = shadow.match( + /(hsl|rgb)a?\(.*\)|#[0-9a-fA-F]{3,8}|[a-zA-Z]+$/ + ); + let color: string; + let parts: string[]; + if (colorMatch) { + color = colorMatch[0]; + parts = shadow.substring(0, colorMatch.index).trim().split(/\s+/); + } else { + color = '#000'; // fallback to black + parts = shadow.trim().split(/\s+/); + } + // drop-shadow doesn't support spread, so we only take x, y, blur + const [x, y, blur] = parts; + + return `drop-shadow(${x} ${y} ${blur} ${color})`; + }) + .join(' '); + + return `filter: ${dropShadows};`; +}; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss index 71162d7978d..53ffb197ba3 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss +++ b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss @@ -1,3 +1,5 @@ +// Unused here, but leaving it +// to avoid a breaking change since this is public? @function shadowOpacity($opacity) { @if (lightness($euiColorTextParagraph) < 50) { @return $opacity * 1; @@ -6,43 +8,65 @@ } } +@function _colorMode() { + @if (lightness($euiColorTextParagraph) < 50) { + @return 'light'; + } @else { + @return 'dark'; + } +} + +// $color param is doing nothing + +// "xs" @mixin euiSlightShadow($color: $euiShadowColor) { - box-shadow: - 0 .8px .8px rgba($color, shadowOpacity(.04)), - 0 2.3px 2px rgba($color, shadowOpacity(.03)); + @if _colorMode == 'light' { + box-shadow: + 0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), + 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), + 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04); + } @else { + box-shadow: + 0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), + 0px 1px 4px 0px hsl(0deg 0% 0% / 0.4), + 0px 2px 8px 0px hsl(0deg 0% 0% / 0.24); + } } @mixin euiBottomShadowSmall($color: $euiShadowColor) { - box-shadow: - 0 .7px 1.4px rgba($color, shadowOpacity(.07)), - 0 1.9px 4px rgba($color, shadowOpacity(.05)), - 0 4.5px 10px rgba($color, shadowOpacity(.05)); + @if _colorMode == 'light' { + box-shadow: + 0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), + 0px 2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), + 0px 4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05); + } @else { + box-shadow: + 0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), + 0px 2px 7px 0px hsl(0deg 0% 0% / 0.46), + 0px 4px 11px 0px hsl(0deg 0% 0% / 0.26); + } } @mixin euiBottomShadowMedium($color: $euiShadowColor) { - box-shadow: - 0 .9px 4px -1px rgba($color, shadowOpacity(.08)), - 0 2.6px 8px -1px rgba($color, shadowOpacity(.06)), - 0 5.7px 12px -1px rgba($color, shadowOpacity(.05)), - 0 15px 15px -1px rgba($color, shadowOpacity(.04)); + @if _colorMode == 'light' { + box-shadow: + 0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), + 0px 3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), + 0px 6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06); + } @else { + box-shadow: + 0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), + 0px 3px 10px 0px hsl(0deg 0% 0% / 0.52), + 0px 6px 14px 0px hsl(0deg 0% 0% / 0.28); + } } -// Similar to shadow medium but without the bottom depth. Useful for popovers -// that drop UP rather than DOWN. @mixin euiBottomShadowFlat($color: $euiShadowColor) { - box-shadow: - 0 0 .8px rgba($color, shadowOpacity(.06)), - 0 0 2px rgba($color, shadowOpacity(.04)), - 0 0 5px rgba($color, shadowOpacity(.04)), - 0 0 17px rgba($color, shadowOpacity(.03)); + @include euiSlightShadow($color); } @mixin euiBottomShadow($color: $euiShadowColor) { - box-shadow: - 0 1px 5px rgba($color, shadowOpacity(.1)), - 0 3.6px 13px rgba($color, shadowOpacity(.07)), - 0 8.4px 23px rgba($color, shadowOpacity(.06)), - 0 23px 35px rgba($color, shadowOpacity(.05)); + @include euiBottomShadowMedium($color); } @mixin euiBottomShadowLarge( @@ -51,18 +75,34 @@ $reverse: false ) { @if ($reverse) { - box-shadow: - 0 -2.7px 9px rgba($color, shadowOpacity(.13)), - 0 -9.4px 24px rgba($color, shadowOpacity(.09)), - 0 -21.8px 43px rgba($color, shadowOpacity(.08)); + @if _colorMode == 'light' { + box-shadow: + 0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), + 0px -4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), + 0px -8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07); + } @else { + box-shadow: + 0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), + 0px -4px 13px 0px hsl(0deg 0% 0% / 0.58), + 0px -8px 17px 0px hsl(0deg 0% 0% / 0.3); + } } @else { - box-shadow: - 0 2.7px 9px rgba($color, shadowOpacity(.13)), - 0 9.4px 24px rgba($color, shadowOpacity(.09)), - 0 21.8px 43px rgba($color, shadowOpacity(.08)); + @if _colorMode == 'light' { + box-shadow: + 0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), + 0px 4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), + 0px 8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07); + } @else { + box-shadow: + 0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), + 0px 4px 13px 0px hsl(0deg 0% 0% / 0.58), + 0px 8px 17px 0px hsl(0deg 0% 0% / 0.3); + } } } +// Not part of the Borealis shadow spec, used in scroll utilities + // stylelint-disable color-named @mixin euiOverflowShadow($direction: 'y', $side: 'both') { $hideHeight: $euiScrollBarCornerThin * 1.25; diff --git a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts index 889eb7bba71..9696a81ebb1 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts +++ b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts @@ -7,11 +7,14 @@ */ import type { UseEuiTheme } from '../../services/theme/types'; -import { getShadowColor } from '../functions'; +import { boxShadowToFilterDropShadow } from '../functions'; import { _EuiThemeShadowSize } from '../variables/shadow'; export interface EuiShadowOptions { + /** @deprecated */ color?: string; + /** @default `down` */ + direction?: 'down' | 'up'; /** * Note: not supported by all shadow utilities. */ @@ -23,92 +26,65 @@ export interface EuiShadowOptions { * euiSlightShadow */ export const euiShadowXSmall = ( - { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + { euiTheme, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions ) => { if (highContrastMode) { return _highContrastBorder(euiTheme, options); } + const direction = options?.direction ?? 'down'; - const color = options?.color || euiTheme.colors.shadow; - - return ` -box-shadow: - 0 .8px .8px ${getShadowColor(color, 0.04, colorMode)}, - 0 2.3px 2px ${getShadowColor(color, 0.03, colorMode)}; -`; + return `box-shadow: ${euiTheme.shadows.xs[direction]};`; }; /** * bottomShadowSmall */ export const euiShadowSmall = ( - { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + { euiTheme, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions ) => { if (highContrastMode) { return _highContrastBorder(euiTheme, options); } + const direction = options?.direction ?? 'down'; - const color = options?.color || euiTheme.colors.shadow; - - return ` -box-shadow: - 0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)}, - 0 1.9px 4px ${getShadowColor(color, 0.05, colorMode)}, - 0 4.5px 10px ${getShadowColor(color, 0.05, colorMode)}; -`; + return `box-shadow: ${euiTheme.shadows.s[direction]};`; }; /** * bottomShadowMedium */ export const euiShadowMedium = ( - { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + { euiTheme, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions ) => { if (highContrastMode) { return _highContrastBorder(euiTheme, options); } - - const color = options?.color || euiTheme.colors.shadow; + const direction = options?.direction ?? 'down'; + const boxShadow = euiTheme.shadows.m[direction]; if (options?.property === 'filter') { - // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs - return `filter: drop-shadow(0 5.7px 9px ${getShadowColor( - color, - 0.2, - colorMode - )});`; - } else { - return `box-shadow: - 0 .9px 4px ${getShadowColor(color, 0.08, colorMode)}, - 0 2.6px 8px ${getShadowColor(color, 0.06, colorMode)}, - 0 5.7px 12px ${getShadowColor(color, 0.05, colorMode)}, - 0 15px 15px ${getShadowColor(color, 0.04, colorMode)};`; + return boxShadow ? boxShadowToFilterDropShadow(boxShadow) : ''; } + + return `box-shadow: ${boxShadow};`; }; /** * bottomShadow */ export const euiShadowLarge = ( - { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + { euiTheme, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions ) => { if (highContrastMode) { return _highContrastBorder(euiTheme, options); } + const direction = options?.direction ?? 'down'; - const color = options?.color || euiTheme.colors.shadow; - - return ` -box-shadow: - 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, - 0 3.6px 13px ${getShadowColor(color, 0.07, colorMode)}, - 0 8.4px 23px ${getShadowColor(color, 0.06, colorMode)}, - 0 23px 35px ${getShadowColor(color, 0.05, colorMode)}; -`; + return `box-shadow: ${euiTheme.shadows.l[direction]};`; }; /** @@ -118,45 +94,59 @@ export interface EuiShadowXLarge extends EuiShadowOptions { reverse?: boolean; } export const euiShadowXLarge = ( - { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + { euiTheme, highContrastMode }: UseEuiTheme, options?: EuiShadowXLarge ) => { if (highContrastMode) { return _highContrastBorder(euiTheme, options); } + const direction = options?.direction ?? 'down'; - const color = options?.color || euiTheme.colors.shadow; + return `box-shadow: ${euiTheme.shadows.hover.xl[direction]};`; +}; +export const euiShadowXLargeHover = ( + { euiTheme, highContrastMode }: UseEuiTheme, + options?: EuiShadowXLarge +) => { + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } const reverse = options?.reverse ?? false; + const direction = options?.direction ?? reverse ? 'up' : 'down'; - return ` -box-shadow: - 0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)}, - 0 ${reverse ? '-' : ''}9.4px 24px ${getShadowColor(color, 0.09, colorMode)}, - 0 ${reverse ? '-' : ''}21.8px 43px ${getShadowColor(color, 0.08, colorMode)}; -`; + return `box-shadow: ${euiTheme.shadows.hover.xl[direction]};`; }; /** - * slightShadowHover + * @deprecated slightShadowHover */ export const euiSlightShadowHover = ( - { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + { euiTheme, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions ) => { if (highContrastMode) { return _highContrastBorder(euiTheme, options); } + const direction = options?.direction ?? 'down'; - const color = options?.color || euiTheme.colors.shadow; + return `box-shadow: ${euiTheme.shadows.s[direction]};`; +}; + +/** + * Special size to be used exclusively in hover states + * of bordered panels. + */ +export const euiShadowHover = ( + { euiTheme, highContrastMode }: UseEuiTheme, + options?: EuiShadowOptions +) => { + if (highContrastMode) { + return _highContrastBorder(euiTheme, options); + } + const direction = options?.direction ?? 'down'; - return ` -box-shadow: - 0 1px 5px ${getShadowColor(color, 0.1, colorMode)}, - 0 3.6px 13px ${getShadowColor(color, 0.07, colorMode)}, - 0 8.4px 23px ${getShadowColor(color, 0.06, colorMode)}, - 0 23px 35px ${getShadowColor(color, 0.05, colorMode)}; -`; + return `box-shadow: ${euiTheme.shadows.hover.base[direction]};`; }; /** @@ -166,27 +156,22 @@ box-shadow: * Useful for popovers that drop UP rather than DOWN. */ export const euiShadowFlat = ( - { euiTheme, colorMode, highContrastMode }: UseEuiTheme, + { euiTheme, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions ) => { if (highContrastMode) { return _highContrastBorder(euiTheme, options); } + const direction = options?.direction ?? 'down'; + const value = + euiTheme.shadows.flat?.[direction] ?? euiTheme.shadows.xs[direction]; - const color = options?.color || euiTheme.colors.shadow; - - return ` -box-shadow: - 0 0 .8px ${getShadowColor(color, 0.06, colorMode)}, - 0 0 2px ${getShadowColor(color, 0.04, colorMode)}, - 0 0 5px ${getShadowColor(color, 0.04, colorMode)}, - 0 0 17px ${getShadowColor(color, 0.03, colorMode)}; -`; + return `box-shadow: ${value};`; }; export const euiShadow = ( euiThemeContext: UseEuiTheme, - size: _EuiThemeShadowSize = 'l', + size: _EuiThemeShadowSize | 'hover' = 'l', options?: EuiShadowOptions ) => { if (euiThemeContext.highContrastMode) { @@ -204,6 +189,10 @@ export const euiShadow = ( return euiShadowLarge(euiThemeContext, options); case 'xl': return euiShadowXLarge(euiThemeContext, options); + case 'xlHover': + return euiShadowXLargeHover(euiThemeContext, options); + case 'hover': + return euiShadowHover(euiThemeContext, options); default: console.warn('Please provide a valid size option to useEuiShadow'); diff --git a/packages/eui-theme-common/src/global_styling/variables/shadow.ts b/packages/eui-theme-common/src/global_styling/variables/shadow.ts index e8bd284645b..cf88e92c419 100644 --- a/packages/eui-theme-common/src/global_styling/variables/shadow.ts +++ b/packages/eui-theme-common/src/global_styling/variables/shadow.ts @@ -6,7 +6,17 @@ * Side Public License, v 1. */ -export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const; +import { CSSProperties } from 'react'; +import { ColorModeSwitch } from '../../services/theme/types'; + +export const EuiThemeShadowSizes = [ + 'xs', + 's', + 'm', + 'l', + 'xl', + `xlHover`, +] as const; export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number]; @@ -20,6 +30,8 @@ export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> = m: 'Used on small sized portalled content like popovers.', l: 'Primary shadow used in most cases to add visible depth.', xl: 'Very large shadows used for large portalled style containers like modals and flyouts.', + xlHover: + 'Special size to be used exclusively as hovered state for the `xl` size.', }; export interface _EuiThemeShadowCustomColor { @@ -27,3 +39,52 @@ export interface _EuiThemeShadowCustomColor { property?: 'box-shadow' | 'filter'; borderAllInHighContrastMode?: boolean; } + +export type _EuiThemeShadow = { + /** Default direction of the shadow */ + down: ColorModeSwitch; + /** Reverse direction */ + up: ColorModeSwitch; +}; + +export type _EuiThemeShadows = { + xs: _EuiThemeShadow; + s: _EuiThemeShadow; + m: _EuiThemeShadow; + l: _EuiThemeShadow; + xl: _EuiThemeShadow; + hover: { + base: _EuiThemeShadow; + xl: _EuiThemeShadow; + }; + /** Not in the spec, defined only to support the legacy `euiShadowFlat` mixin */ + flat?: _EuiThemeShadow; +}; + +/** + * Represents a single shadow + * @see https://tr.designtokens.org/format/#shadow + */ +export type _EuiThemeShadowLayer = { + color: string; + opacity: number; + x: number; + y: number; + blur: number; + spread: number; +}; + +export type _EuiThemeShadowPrimitive = { + light: _EuiThemeShadowLayer[]; + dark: _EuiThemeShadowLayer[]; +}; + +export type _EuiThemeShadowPrimitives = { + xs: _EuiThemeShadowPrimitive; + s: _EuiThemeShadowPrimitive; + m: _EuiThemeShadowPrimitive; + l: _EuiThemeShadowPrimitive; + xl: _EuiThemeShadowPrimitive; + xxl: _EuiThemeShadowPrimitive; + flat: _EuiThemeShadowPrimitive; +}; diff --git a/packages/eui-theme-common/src/services/theme/types.ts b/packages/eui-theme-common/src/services/theme/types.ts index ababd204dd8..8e149cf9d9f 100644 --- a/packages/eui-theme-common/src/services/theme/types.ts +++ b/packages/eui-theme-common/src/services/theme/types.ts @@ -20,6 +20,7 @@ import type { } from '../../global_styling/variables/size'; import type { _EuiThemeFont } from '../../global_styling/variables/typography'; import type { _EuiThemeFocus } from '../../global_styling/variables/states'; +import type { _EuiThemeShadows } from '../../global_styling/variables/shadow'; import type { _EuiThemeLevels } from '../../global_styling/variables/levels'; import type { _EuiThemeComponents } from '../../global_styling/variables/components'; import type { _EuiThemeFlags } from '../../global_styling/variables'; @@ -73,6 +74,7 @@ export type EuiThemeShapeBase = { animation: _EuiThemeAnimation; breakpoint: _EuiThemeBreakpoints; levels: _EuiThemeLevels; + shadows: _EuiThemeShadows; components: _EuiThemeComponents; flags: _EuiThemeFlags; }; diff --git a/packages/eui-theme-common/src/utils.test.ts b/packages/eui-theme-common/src/utils.test.ts index afcc8fe6862..cd849025394 100644 --- a/packages/eui-theme-common/src/utils.test.ts +++ b/packages/eui-theme-common/src/utils.test.ts @@ -17,6 +17,7 @@ import { buildTheme, mergeDeep, getTokenName, + formatMultipleBoxShadow, } from './utils'; describe('isInverseColorMode', () => { @@ -292,3 +293,32 @@ describe('getTokenName', () => { ); }); }); + +describe('formatMultipleBoxShadow', () => { + const layers = [ + { x: 0, y: 4, blur: 8, spread: 0, color: '#000', opacity: 0.1 }, + { x: 0, y: 2, blur: 4, spread: 0, color: '#000', opacity: 0.05 }, + ]; + + it('returns a valid CSS box-shadow value', () => { + expect(formatMultipleBoxShadow(layers)).toEqual( + '0px 4px 8px 0px hsla(0,0%,0%,0.1), 0px 2px 4px 0px hsla(0,0%,0%,0.05)' + ); + }); + + it('handles a single layer', () => { + expect(formatMultipleBoxShadow([layers[0]])).toEqual( + '0px 4px 8px 0px hsla(0,0%,0%,0.1)' + ); + }); + + it('formats the "up" variant', () => { + expect(formatMultipleBoxShadow(layers, { up: true })).toEqual( + '0px 4px 8px 0px hsla(0,0%,0%,0.1), 0px -2px 4px 0px hsla(0,0%,0%,0.05)' + ); + }); + + it('return "none" for no layers', () => { + expect(formatMultipleBoxShadow([])).toEqual('none'); + }); +}); diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts index 1745ad6e112..cfc7aeab535 100644 --- a/packages/eui-theme-common/src/utils.ts +++ b/packages/eui-theme-common/src/utils.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import chroma from 'chroma-js'; import { EuiThemeColorMode, EuiThemeColorModeInverse, @@ -14,6 +15,7 @@ import { EuiThemeSystem, EuiThemeShape, EuiThemeComputed, + _EuiThemeShadowLayer, COLOR_MODES_STANDARD, COLOR_MODES_INVERSE, EuiThemeHighContrastMode, @@ -466,3 +468,41 @@ export const getTokenName = ( return `${prefix}${getCapitalized(colorName)}${_suffix}`; }; + +/** + * Format an array of shadow "objects" into a string for CSS. + * The "up" direction is built by making the y offset from layers + * two and any subsequent layers, negative. + * + * It will add `inset` to the first layer when color mode is "DARK" + * and `spread` is 1, to ensure the dark mode-only floating border + * is rendered inside the container to match the position of the + * regular panel border (implemented with a pseudo element). + * + * @todo add a color space param to replace the hard-coded `hsl` + * + * @param layers + * @param options + * @param options.up - Modifies some values in order to get the "up" direction + * @returns - A value for the CSS `box-shadow` property + */ +export function formatMultipleBoxShadow( + layers: _EuiThemeShadowLayer[], + options?: { + up?: boolean; + } +) { + if (layers.length === 0) { + return 'none'; + } + + const { up } = options ?? {}; + /* prettier-ignore */ + const shadowLayers = layers.map((layer, i) => { + const y = (up && i > 0) ? -layer.y : layer.y; + const color = chroma(layer.color).alpha(layer.opacity).css('hsl'); + return `${layer.x}px ${y}px ${layer.blur}px ${layer.spread}px ${color}`; + }); + + return shadowLayers.join(', '); +} diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png index 3b5be307300..e6214c36877 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png index 781d634718c..4231eb95273 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png index 79c6087661f..0e0482d6df2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png index a820552dcfc..8f1a3e3bd98 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png index 1516d72f69b..ceaa97339b9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png index 7395111b450..936b870c32b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png index 2330bb3ff61..f916fc4bf80 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png index b899a0acd26..c1175793920 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png index 125965664ab..6b2be8146ea 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png index c39b0a263f6..5a449f5c2b7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png index 142092e163d..d87e58be9b3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png index 80640d321c9..1f6b58260a6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.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 bf260d87913..844845c6c6d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png index 6fef8119ce9..2ee15205a92 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png index 91cb62ab9db..5a74a7a8bcd 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 19715c612e4..bed65d315b8 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_EuiColorPickerSwatch_Color_Label_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png index a6240bc92c7..2b006f6e889 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.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 17188605c08..3860c7d0ebc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png index 17188605c08..3860c7d0ebc 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_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png index 5319b4316f5..d90c99b93af 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_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png index 7146e4a6426..24711cadb9f 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_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png index 4ef9f21599c..da4c9dd3cdd 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png index a8333910750..3ea8a9d1140 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png index e559452dca2..f8200b43221 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png index fd5437cac8f..9c41883337a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png index b4e2fad039e..fe29c0dbc0b 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_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png index 305792785b8..0323e28d552 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.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 3adf028120b..499ecc370da 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_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index 7322eae909e..83efde352f0 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_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png index ae779cf0906..fc730b1c981 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png index 4bf8e18b206..d372cc2478f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png index 1b61a8ab599..e9dd6a1a714 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png index ce9748b7bcf..c004bcb7a06 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png index 5346622dd0d..cbcfd01d3e6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png index 5346622dd0d..cbcfd01d3e6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png index 811f6e63456..26ef6ff2135 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png index c9072972a88..03b160bcdc6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png index 6453324ad51..b6052357aab 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png index cf0c323ec4c..9beebc098eb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png index 1bafddc3b8d..a5bd56a3b07 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Advanced_Use_Case.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Advanced_Use_Case.png new file mode 100644 index 00000000000..93634ab9350 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Advanced_Use_Case.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Basic_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Basic_Flyout.png new file mode 100644 index 00000000000..34c86773771 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Basic_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Group_Opener.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Group_Opener.png new file mode 100644 index 00000000000..f60e5deee4e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_Flyout_System_Group_Opener.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 99b74495f2c..58c514e12b5 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 d5943352375..cf08b7ec1b3 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_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index 7623041eeab..e11752ceba4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.png index 261457959df..904e80d55a4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.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 bed7c274e6d..7caa83d7481 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_EuiModalBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png index aa5db430970..071b93542c3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png index 0a0f9636aca..b846a11384d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png index 87eaec1b008..d5472e9a779 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png index f51f03401b5..89c0e8e5332 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_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 a1e0e3bc331..fff28b95a83 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_Layout_EuiModal_EuiModal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png index d5531a34e89..76a809ffc29 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png index 6c0a8dc279b..19efa228dda 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png index 76a92ad48f2..b9a271e21e2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png index 05f28bc3478..9a9bdc845a5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png index 7ec4cc91c3f..47092c12872 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png index 3aa8d19ba90..caab6f28f93 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png index 8192ac7e4bd..11283d5711d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png index b748840837c..2660c4a6590 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png index 179445ca908..c35b2560eff 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png index 8b9cd4147d4..6fd785b227e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png index 5018fb9a5dd..b8e536d214d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png index cb20fa67cb8..ed76efa88a0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png index 4ba8fe31a6e..72e81f9242f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png index 8b9bc7d9255..960e5525811 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png index c3ed2a5f821..67ef075debc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png index b7312419a59..80f73f495c0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png index 9fcdad40dc1..e4cbfd4b2c8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png index 4c1e00e7324..5caaf48248e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png index da2ab3cf54a..8d7d35a8bb6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png index 002ba5c6f59..19a05f6a883 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png index b3e847ed691..50eaeb5d2e8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png index 9d4b39c4e96..7bdbcbe48da 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png index 61db58e3fe0..5e648d264ed 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index bf6ab99ccbb..ec1c7e10399 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 f68cc6e63ad..6b853ea185f 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_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 709e222aa2b..a04e904a201 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_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index 37b41fe696d..abf067a8bba 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 da378d636d3..08332075a75 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 f95ad9c16f6..28fdc5f78ae 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_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index 5276b1a15fa..2154181b0f1 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_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png index e1b36fa9577..58789b11a63 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png index 22c3b02f2b8..d1bbd9712b0 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_desktop_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png index 99c70150e52..79edec2a7ad 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png index 0798970ed37..b215324061d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png index 9c5e443b39b..46e03ba78b4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png index a4ede4cb8b2..f90b7a453f3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png index 788a43a9e58..76661ea8dfb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png index 3b5be307300..e6214c36877 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png index 296638f25f5..53c56dfd21f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png index adcac8330e5..1bd747f258f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png index f8982a481eb..2c9e9f53c89 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png index 4ed63f1a256..1eab45096d0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png index 86fadd03768..973c309d4b2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png index 5237431236f..b85c2d9ea30 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png index a5d527ff28e..ccfd0715726 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png index 5dfaba6efbe..1442231afb8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png index 65b38e6f299..0f8aec8a21c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png index 795e9e467d7..751ceb41f21 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png index 59437b6e1d6..562b2e4004d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png index 964911e5839..6f8393b7795 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png index 55a59048c4d..3c62b0390f0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png index 62476f02d71..eef78f8fbba 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png index 1eee9b408a6..5289fee44d3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.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 6bff294339c..d90b3e215f5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png index 9f179cd7fe7..2ebf97a52b8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png index 05095313536..d40bc335bb6 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 d5a3edf28ad..3f2aa23646d 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_EuiColorPickerSwatch_Color_Label_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png index 4a444b9c1b9..a0ffe289fff 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.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 b99c6398141..d8fdfdfc5e4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png index b99c6398141..d8fdfdfc5e4 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_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png index f0127dc86cf..97ea8939da4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png index 8f7aebbb28c..26f21529f19 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png index 8ae79aaee73..0ee921fbafa 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png index f8d343c6d9f..de26d72a18d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png index e73e177c692..dcf0b47d1f2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png index 78caa3a8b50..10338d493c4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png index ed9b76d8df4..be391d0c1f3 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_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png index 133530dc486..afea8c3e824 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_EuiRange_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png index 77f9c5f626a..c5405c92ba6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png index a8227dc1e42..35041c3548f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png index 9def9e2a74f..bee47764452 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.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 a4ed9c111da..b14159ea5b0 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_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index cf5d37caa08..7bf7ab31b9f 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_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png index 4cce5bdccee..e1a65c5930a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png index 5ba4dd0b291..a7a057fc0e2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png index 5f5cb680da4..5eaf55262fa 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png index fce94ee009f..4504b7e2f32 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png index ae36efeabed..761e77ee20b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png index ae36efeabed..761e77ee20b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png index bada121b7bc..fdd4afa78c2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png index 20dd4251842..86c87418c32 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png index 8f72586e6d7..f43b644229c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png index 0b7424eadf7..229313cb132 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png index 99d94289588..e0b2b28e1d9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Advanced_Use_Case.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Advanced_Use_Case.png new file mode 100644 index 00000000000..71e54e3577d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Advanced_Use_Case.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Basic_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Basic_Flyout.png new file mode 100644 index 00000000000..bb293b0d98a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Basic_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Group_Opener.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Group_Opener.png new file mode 100644 index 00000000000..e403bbef204 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_Flyout_System_Group_Opener.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png index 0d37c35d308..70589e5eddc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.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 024153d3bea..3177f84f795 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_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png index d992573330c..3460ec6a50b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Elastic_Navigation_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index 7f00a4b7528..ea989445980 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.png index 29914de9caf..f1fe31a3d7e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.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 10d9a239e7d..2ac94492267 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_EuiPage_EuiPage_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png index 0d6cea6a490..4ed02466f3f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png index a21cdfb81cb..bf618154896 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png index 4a79a9f6641..231fae2dd27 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png index 3d629faad69..20e29301cff 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png index 58da2f11e9e..fd49eac3d1e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png index a451d2aa682..3e57d38e4f0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png index 5b87f613d2a..8e4d9a9c442 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png index 42ee58ad34f..f8780832a8c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png index 474b534c623..091920cf48b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png index 9c963184b11..002e5df3709 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png index e9ce95fd374..26023c9db42 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png index 46772a1f28e..14aec3b7f9d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png index f951a9130c6..623f2eca11f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png index f7aa4bdcf85..0ddfaf5da44 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png index dc885415c4b..88c06c1f36c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png index 090794a3ee3..8dcbb8dbc8a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png index 74e3e475f2c..ad6c2ed6858 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png index f53d6ac7cca..5ad59db5b23 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png index 2fd83d055c5..05c57a5ed8c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png index 7c7ad89819d..8edb2bc5943 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 a6f01229bb7..bab01bdf8c2 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_Marked_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png index 56502ba5d83..bf781ea9105 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 51260959e7a..2fda3c91602 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_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index 81c6611958b..e310695eeac 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 42fd0c7f92c..a93af320b69 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_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 2e5d0f02610..023e9664b32 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_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index d37b49e5199..9c4ec83a4c5 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 95312ae69be..7b7eb691981 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 20e1fdbc88b..e987799b76b 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_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index ebe9665b8e9..01aeb053120 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.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 916b9e861fe..78715cbafbd 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_EuiTableBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png index 36be42abca1..1b9111fe61a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png index 8ddc9a10910..19f4e6b4e82 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png index 4ae7de3a4d7..c1e4d6cbd96 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png index 014d31a6d57..8492529c2c2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png index 44a0e1ca3d7..ab249446f41 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png index a3866dbc16a..0a1720a74ea 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png index 64b01ebdc4f..035ad43cbe1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png index c9b88d77c87..9ae0f5e9be8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png index 2862db0bb01..0d85828ad76 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/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png index 9451aa556c4..18dfdf9ba1d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png index a4e55b5dae0..32700efbff8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png index 8835e18b610..dc63fa6081a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png index 510a9a6b05d..8681b35d775 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png index 94ae811fcae..06239cb303d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png index 4ed63f1a256..1eab45096d0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png index 2e08dd1fdf4..127a46f0723 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png index 7817add505c..4c9d2bdd4cc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png index 0f4d99664a6..5ae5a3d30de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png differ diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts index 962e9ad10b3..487613f7938 100644 --- a/packages/eui/src/components/flyout/flyout.styles.ts +++ b/packages/eui/src/components/flyout/flyout.styles.ts @@ -45,7 +45,7 @@ export const euiFlyoutSlideInLeft = keyframes` `; export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => { - const { euiTheme, colorMode } = euiThemeContext; + const { euiTheme } = euiThemeContext; return { euiFlyout: css` @@ -127,16 +127,10 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => { } `, left: css` - border-inline-end: ${colorMode === 'DARK' - ? `${euiTheme.border.width.thin} solid - ${euiTheme.colors.borderBaseFloating}` - : 'none'}; + border-inline-end: none; `, right: css` - border-inline-start: ${colorMode === 'DARK' - ? `${euiTheme.border.width.thin} solid - ${euiTheme.colors.borderBaseFloating}` - : 'none'}; + border-inline-start: none; `, }, push: { diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts index c00146f276d..968fbe4089f 100644 --- a/packages/eui/src/components/header/header.styles.ts +++ b/packages/eui/src/components/header/header.styles.ts @@ -36,7 +36,7 @@ export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => { justify-content: space-between; ${logicalCSS('height', height)} ${logicalCSS('padding-horizontal', padding)} - ${logicalCSS('border-bottom', euiTheme.border.thin)} + ${euiShadowXSmall(euiThemeContext)} `, // Position diff --git a/packages/eui/src/components/modal/modal.styles.ts b/packages/eui/src/components/modal/modal.styles.ts index 5cdbba80198..f3399d9a02a 100644 --- a/packages/eui/src/components/modal/modal.styles.ts +++ b/packages/eui/src/components/modal/modal.styles.ts @@ -29,8 +29,6 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => { position: relative; background-color: ${euiTheme.colors.emptyShade}; border-radius: ${euiTheme.border.radius.medium}; - border: ${euiTheme.border.width.thin} solid - ${euiTheme.colors.borderBaseFloating}; z-index: ${euiTheme.levels.modal}; min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth}; max-inline-size: calc(100vw - ${euiTheme.size.base}); diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts index 82fd4a29481..a901bafe2da 100644 --- a/packages/eui/src/components/panel/panel.styles.ts +++ b/packages/eui/src/components/panel/panel.styles.ts @@ -21,41 +21,28 @@ export const euiPanelBorderStyles = ( euiThemeContext: UseEuiTheme, options?: { borderColor?: string; - hasFloatingBorder?: boolean; } ) => { - const { euiTheme, colorMode } = euiThemeContext; - const { borderColor, hasFloatingBorder = true } = options ?? {}; - - /* TODO: remove `hasFloatingBorder` and `hasVisibleBorder` and once Amsterdam is removed - euiTheme.colors.borderBaseFloating is enough then */ - const hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK'; + const { euiTheme } = euiThemeContext; + const { borderColor = euiTheme.border.color } = options ?? {}; - return highContrastModeStyles(euiThemeContext, { - none: ` - /* Using a pseudo element for the border instead of floating border only - because the transparent border might otherwise be visible with arbitrary - full-width/height content in light mode. */ - &::after { - content: ''; - position: absolute; - /* ensure to keep on top of flush content */ - z-index: 0; - inset: 0; - border: ${euiTheme.border.width.thin} solid - ${ - borderColor ?? hasVisibleBorder - ? euiTheme.border.color - : euiTheme.colors.borderBaseFloating - }; - border-radius: inherit; - pointer-events: none; - } - `, - preferred: ` - border: ${euiTheme.border.thin}; - `, - }); + return /*css*/ ` + &::after { + content: ''; + position: absolute; + /* ensure to keep on top of flush content */ + z-index: 0; + inset: 0; + /* using 'box-shadow' instead of 'border' so that the border + matches the floating border included in shadows for DARK mode, + again so that bordered and shadowed panels have the exact same size + - but this is problematic because box-shadow is not part of the box model + (drawn outside of the element's layout) and it could eventually be cut off */ + box-shadow: 0 0 0 ${euiTheme.border.width.thin} ${borderColor}; + border-radius: inherit; + pointer-events: none; + } + `; }; export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => { @@ -74,17 +61,10 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => { hasShadow: css` ${euiShadow(euiThemeContext, 'm')} - - ${euiPanelBorderStyles(euiThemeContext, { - hasFloatingBorder: false, - })} `, hasBorder: css` - ${euiPanelBorderStyles(euiThemeContext, { - borderColor: euiTheme.border.color, - hasFloatingBorder: false, - })} + ${euiPanelBorderStyles(euiThemeContext)} `, radius: { diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts index 9355dd41bd6..b43089b073f 100644 --- a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts +++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts @@ -59,7 +59,9 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => { transition: ${opacityTransition}, ${transformTransition}; } - ${euiPanelBorderStyles(euiThemeContext)} + ${euiPanelBorderStyles(euiThemeContext, { + borderColor: euiTheme.colors.borderBaseFloating, + })} &:focus { outline-offset: 0; diff --git a/packages/eui/src/components/toast/toast.styles.ts b/packages/eui/src/components/toast/toast.styles.ts index a329c69a5ad..76d2e473ee6 100644 --- a/packages/eui/src/components/toast/toast.styles.ts +++ b/packages/eui/src/components/toast/toast.styles.ts @@ -17,7 +17,6 @@ import { } from '../../global_styling/functions/high_contrast'; import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; -import { euiPanelBorderStyles } from '../panel/panel.styles'; export const euiToastStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme, highContrastMode } = euiThemeContext; @@ -52,8 +51,6 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => { ${euiTextBreakWord()} /* Prevent long lines from overflowing */ - ${euiPanelBorderStyles(euiThemeContext, { hasFloatingBorder: false })} - &:hover, &:focus { [class*='euiToast__closeButton'] { diff --git a/packages/eui/src/components/tool_tip/tool_tip.styles.ts b/packages/eui/src/components/tool_tip/tool_tip.styles.ts index 5842ccb495c..e74ba796aa4 100644 --- a/packages/eui/src/components/tool_tip/tool_tip.styles.ts +++ b/packages/eui/src/components/tool_tip/tool_tip.styles.ts @@ -68,7 +68,9 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => { position: absolute; - ${euiPanelBorderStyles(euiThemeContext)} + ${euiPanelBorderStyles(euiThemeContext, { + borderColor: euiTheme.colors.borderBaseFloating, + })} [class*='euiHorizontalRule'] { background-color: ${euiToolTipBorderColor(euiTheme)}; diff --git a/packages/eui/src/global_styling/mixins/_shadow.scss b/packages/eui/src/global_styling/mixins/_shadow.scss index 71162d7978d..4a5a87c29fa 100644 --- a/packages/eui/src/global_styling/mixins/_shadow.scss +++ b/packages/eui/src/global_styling/mixins/_shadow.scss @@ -1,3 +1,5 @@ +// This is Amsterdam, re-exported in packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss + @function shadowOpacity($opacity) { @if (lightness($euiColorTextParagraph) < 50) { @return $opacity * 1; diff --git a/packages/eui/src/global_styling/mixins/_shadow.ts b/packages/eui/src/global_styling/mixins/_shadow.ts index db6b48dcd13..bed13bff908 100644 --- a/packages/eui/src/global_styling/mixins/_shadow.ts +++ b/packages/eui/src/global_styling/mixins/_shadow.ts @@ -15,6 +15,7 @@ import { euiShadowMedium, euiShadowLarge, euiShadowXLarge, + euiShadowXLargeHover, type _EuiThemeShadowSize, type EuiShadowOptions, } from '@elastic/eui-theme-common'; @@ -30,17 +31,21 @@ export { euiShadowMedium, euiShadowLarge, euiShadowXLarge, + euiShadowXLargeHover, }; +/** @deprecated */ export interface EuiShadowCustomColor { color?: string; } +/** @deprecated */ export const useEuiSlightShadowHover = (options?: EuiShadowOptions) => { const euiThemeContext = useEuiTheme(); return euiSlightShadowHover(euiThemeContext, options); }; +/** @deprecated */ export const useEuiShadowFlat = (options?: EuiShadowOptions) => { const euiThemeContext = useEuiTheme(); return euiShadowFlat(euiThemeContext, options); diff --git a/packages/eui/src/global_styling/variables/shadow.ts b/packages/eui/src/global_styling/variables/shadow.ts index 69aeb0d5846..e4dbea37c8e 100644 --- a/packages/eui/src/global_styling/variables/shadow.ts +++ b/packages/eui/src/global_styling/variables/shadow.ts @@ -9,6 +9,8 @@ export { EuiThemeShadowSizes, _EuiShadowSizesDescriptions, + type _EuiThemeShadows, type _EuiThemeShadowSize, + type _EuiThemeShadowLayer, type _EuiThemeShadowCustomColor, } from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.ts new file mode 100644 index 00000000000..39fe5123e99 --- /dev/null +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.ts @@ -0,0 +1,482 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { + formatMultipleBoxShadow, + _EuiThemeShadows, + type _EuiThemeShadowPrimitives, +} from '@elastic/eui-theme-common'; + +// in Amsterdam this is `color.shadow`, which computes to `ink` (#000) +const SHADOW_COLOR = '#000000'; + +export const shadowPrimitives: _EuiThemeShadowPrimitives = { + xs: { + light: [ + { + color: SHADOW_COLOR, + opacity: 0.04 * 1, + x: 0, + y: 0.8, + blur: 0.8, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.03 * 1, + x: 0, + y: 2.3, + blur: 2, + spread: 0, + }, + ], + dark: [ + { + color: SHADOW_COLOR, + opacity: 0.04 * 3.5, + x: 0, + y: 0.8, + blur: 0.8, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.03 * 3.5, + x: 0, + y: 2.3, + blur: 2, + spread: 0, + }, + ], + }, + s: { + light: [ + { + color: SHADOW_COLOR, + opacity: 0.07 * 1, + x: 0, + y: 0.7, + blur: 1.4, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 1, + x: 0, + y: 1.9, + blur: 4, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 1, + x: 0, + y: 4.5, + blur: 10, + spread: 0, + }, + ], + dark: [ + { + color: SHADOW_COLOR, + opacity: 0.07 * 3.5, + x: 0, + y: 0.7, + blur: 1.4, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 3.5, + x: 0, + y: 1.9, + blur: 4, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 3.5, + x: 0, + y: 4.5, + blur: 10, + spread: 0, + }, + ], + }, + m: { + light: [ + { + color: SHADOW_COLOR, + opacity: 0.08 * 1, + x: 0, + y: 0.9, + blur: 4, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.06 * 1, + x: 0, + y: 2.6, + blur: 8, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 1, + x: 0, + y: 5.7, + blur: 12, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.04 * 1, + x: 0, + y: 15, + blur: 15, + spread: 0, + }, + ], + dark: [ + { + color: SHADOW_COLOR, + opacity: 0.08 * 3.5, + x: 0, + y: 0.9, + blur: 4, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.06 * 3.5, + x: 0, + y: 2.6, + blur: 8, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 3.5, + x: 0, + y: 5.7, + blur: 12, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.04 * 3.5, + x: 0, + y: 15, + blur: 15, + spread: 0, + }, + ], + }, + l: { + light: [ + { + color: SHADOW_COLOR, + opacity: 0.1 * 1, + x: 0, + y: 1, + blur: 5, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.07 * 1, + x: 0, + y: 3.6, + blur: 13, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.06 * 1, + x: 0, + y: 8.4, + blur: 23, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 1, + x: 0, + y: 23, + blur: 35, + spread: 0, + }, + ], + dark: [ + { + color: SHADOW_COLOR, + opacity: 0.1 * 3.5, + x: 0, + y: 1, + blur: 5, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.07 * 3.5, + x: 0, + y: 3.6, + blur: 13, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.06 * 3.5, + x: 0, + y: 8.4, + blur: 23, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.05 * 3.5, + x: 0, + y: 23, + blur: 35, + spread: 0, + }, + ], + }, + xl: { + light: [ + { + color: SHADOW_COLOR, + opacity: 0.13 * 1, + x: 0, + y: 2.7, + blur: 9, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.09 * 1, + x: 0, + y: 9.4, + blur: 24, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.08 * 1, + x: 0, + y: 21.8, + blur: 43, + spread: 0, + }, + ], + dark: [ + { + color: SHADOW_COLOR, + opacity: 0.13 * 3.5, + x: 0, + y: 2.7, + blur: 9, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.09 * 3.5, + x: 0, + y: 9.4, + blur: 24, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.08 * 3.5, + x: 0, + y: 21.8, + blur: 43, + spread: 0, + }, + ], + }, + xxl: { + light: [], + dark: [], + }, + flat: { + light: [ + { + color: SHADOW_COLOR, + opacity: 0.06 * 1, + x: 0, + y: 0, + blur: 0.8, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.04 * 1, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.04 * 1, + x: 0, + y: 0, + blur: 5, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.03 * 1, + x: 0, + y: 0, + blur: 17, + spread: 0, + }, + ], + dark: [ + { + color: SHADOW_COLOR, + opacity: 0.06 * 3.5, + x: 0, + y: 0, + blur: 0.8, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.04 * 3.5, + x: 0, + y: 0, + blur: 2, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.04 * 3.5, + x: 0, + y: 0, + blur: 5, + spread: 0, + }, + { + color: SHADOW_COLOR, + opacity: 0.03 * 3.5, + x: 0, + y: 0, + blur: 17, + spread: 0, + }, + ], + }, +}; + +export const shadows: _EuiThemeShadows = { + xs: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xs.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.xs.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xs.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.xs.dark, { + up: true, + }), + }, + }, + s: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark, { + up: true, + }), + }, + }, + m: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.m.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.m.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.m.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.m.dark, { + up: true, + }), + }, + }, + l: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.l.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.l.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.l.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.l.dark, { + up: true, + }), + }, + }, + xl: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xl.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.xl.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.xl.light, { up: true }), + DARK: formatMultipleBoxShadow(shadowPrimitives.xl.dark, { + up: true, + }), + }, + }, + hover: { + base: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1)), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1)), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), { + up: true, + }), + DARK: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), { + up: true, + }), + }, + }, + xl: { + down: { + LIGHT: 'none', + DARK: 'none', + }, + up: { + LIGHT: 'none', + DARK: 'none', + }, + }, + }, + flat: { + down: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.flat.light), + DARK: formatMultipleBoxShadow(shadowPrimitives.flat.dark), + }, + up: { + LIGHT: formatMultipleBoxShadow(shadowPrimitives.flat.light, { + up: true, + }), + DARK: formatMultipleBoxShadow(shadowPrimitives.flat.dark, { + up: true, + }), + }, + }, +}; diff --git a/packages/eui/src/themes/amsterdam/theme.ts b/packages/eui/src/themes/amsterdam/theme.ts index 96a4eceee00..30a05254236 100644 --- a/packages/eui/src/themes/amsterdam/theme.ts +++ b/packages/eui/src/themes/amsterdam/theme.ts @@ -17,6 +17,7 @@ import { border } from './global_styling/variables/_borders'; import { levels } from './global_styling/variables/_levels'; import { font } from './global_styling/variables/_typography'; import { focus } from './global_styling/variables/_states'; +import { shadows } from './global_styling/variables/_shadows'; import { components } from './global_styling/variables/_components'; export const AMSTERDAM_NAME_KEY = 'EUI_THEME_AMSTERDAM'; @@ -31,6 +32,7 @@ export const euiThemeAmsterdam: EuiThemeShape = { breakpoint, levels, focus, + shadows, components, flags: { hasGlobalFocusColor: false, diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json b/packages/eui/src/themes/json/eui_theme_borealis_dark.json index ed01cd7edb3..e818196e12f 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json +++ b/packages/eui/src/themes/json/eui_theme_borealis_dark.json @@ -136,6 +136,24 @@ }, "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", "euiShadowColor": "#000000", + "euiShadows": { + "xs": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px 2px 8px 0px hsl(0deg 0% 0% / 0.24)", + "s": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 2px 7px 0px hsl(0deg 0% 0% / 0.46), 0px 4px 11px 0px hsl(0deg 0% 0% / 0.26)", + "m": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 3px 10px 0px hsl(0deg 0% 0% / 0.52), 0px 6px 14px 0px hsl(0deg 0% 0% / 0.28)", + "l": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 4px 13px 0px hsl(0deg 0% 0% / 0.58), 0px 8px 17px 0px hsl(0deg 0% 0% / 0.3)", + "xl": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 5px 16px 0px hsl(0deg 0% 0% / 0.64), 0px 10px 20px 0px hsl(0deg 0% 0% / 0.32)", + "xlHover": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 6px 19px 0px hsl(0deg 0% 0% / 0.7), 0px 12px 23px 0px hsl(0deg 0% 0% / 0.34)", + "flat": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px 2px 8px 0px hsl(0deg 0% 0% / 0.24)" + }, + "euiShadowsUp": { + "xs": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px -2px 8px 0px hsl(0deg 0% 0% / 0.24)", + "s": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -2px 7px 0px hsl(0deg 0% 0% / 0.46), 0px -4px 11px 0px hsl(0deg 0% 0% / 0.26)", + "m": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -3px 10px 0px hsl(0deg 0% 0% / 0.52), 0px -6px 14px 0px hsl(0deg 0% 0% / 0.28)", + "l": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -4px 13px 0px hsl(0deg 0% 0% / 0.58), 0px -8px 17px 0px hsl(0deg 0% 0% / 0.3)", + "xl": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -5px 16px 0px hsl(0deg 0% 0% / 0.64), 0px -10px 20px 0px hsl(0deg 0% 0% / 0.32)", + "xlHover": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -6px 19px 0px hsl(0deg 0% 0% / 0.7), 0px -12px 23px 0px hsl(0deg 0% 0% / 0.34)", + "flat": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px -2px 8px 0px hsl(0deg 0% 0% / 0.24)" + }, "euiSize": "16px", "euiSizeXS": "4px", "euiSizeS": "8px", diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts b/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts index 76518684bcf..2db61adf70c 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts @@ -137,6 +137,24 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { }; euiBreakpointKeys: string; euiShadowColor: string; + euiShadows: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, + euiShadowsUp: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, euiSize: string; euiSizeXS: string; euiSizeS: string; diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json b/packages/eui/src/themes/json/eui_theme_borealis_light.json index 941b63776a6..b9fd888861c 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_light.json +++ b/packages/eui/src/themes/json/eui_theme_borealis_light.json @@ -136,6 +136,24 @@ }, "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", "euiShadowColor": "#000000", + "euiShadows": { + "xs": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)", + "s": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px 4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)", + "m": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px 6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)", + "l": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px 8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)", + "xl": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px 10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)", + "xlHover": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)", + "flat": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)" + }, + "euiShadowsUp": { + "xs": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)", + "s": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px -4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)", + "m": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px -6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)", + "l": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px -8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)", + "xl": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px -10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)", + "xlHover": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)", + "flat": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)" + }, "euiSize": "16px", "euiSizeXS": "4px", "euiSizeS": "8px", diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts b/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts index 9db35efb731..f81b2a0d072 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts @@ -137,6 +137,24 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { }; euiBreakpointKeys: string; euiShadowColor: string; + euiShadows: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, + euiShadowsUp: { + xs: string; + s: string; + m: string; + l: string; + xl: string; + xlHover: string; + flat: string; + }, euiSize: string; euiSizeXS: string; euiSizeS: string; diff --git a/packages/website/docs/getting-started/theming/tokens/shadows/index.mdx b/packages/website/docs/getting-started/theming/tokens/shadows/index.mdx new file mode 100644 index 00000000000..50259170d37 --- /dev/null +++ b/packages/website/docs/getting-started/theming/tokens/shadows/index.mdx @@ -0,0 +1,96 @@ +--- +sidebar_position: 10 +--- + +# Shadows + +There are 5 sizes of shadows. The first level of each shadow enhances contrast and remains consistent across all sizes. + +:::info In dark mode, shadows get an additional lighter border, to ensure they are visible +::: + +```mdx-code-block +import { ShadowsTable } from './shadows_table'; +``` + + + +:::warning Use `xlHover` exclusively as the hover state for size `xl` +::: + +## Direction + +Shadows can only have two directions, up and down. By default shadows point down. + + + +## Hover state + +Each shadowed surface, when interactive, follows a hover effect rule: it moves up one level. + +- `xs` hovered → `s` +- `s` hovered → `m` +- `m` hovered → `l` +- `l` hovered → `xl` +- `xl` hovered → `xlHover` + +```tsx interactive +import React, { useState } from 'react'; +import { useEuiTheme, EuiSelect, EuiSpacer, EuiCodeBlock } from '@elastic/eui'; + +type ShadowSize = 'xs' | 's' | 'm' | 'l' | 'xl'; +const hoverPairs = { + xs: ['xs', 's'], + s: ['s', 'm'], + m: ['m', 'l'], + l: ['l', 'xl'], + xl: ['xl', 'xl'], // TODO +}; + +export default () => { + const { euiTheme } = useEuiTheme(); + const [selectedSize, setSelectedSize] = useState('m'); + const selectedPair = hoverPairs[selectedSize]; + const options = [ + { value: 'xs', text: 'xs' }, + { value: 's' , text: 's' }, + { value: 'm' , text: 'm' }, + { value: 'l' , text: 'l' }, + { value: 'xl', text: 'xl' }, + ]; + + const styles = css` + box-shadow: ${euiTheme.shadows[selectedPair[0]].down}; + &:hover { + box-shadow: ${euiTheme.shadows[selectedPair[1]].down}; + } + background-color: ${euiTheme.colors.backgroundBasePlain}; + border-radius: ${euiTheme.border.radius.medium}; + ` + const stylesText = ` +const styles = css\` + box-shadow: \${euiTheme.shadows.${selectedPair[0]}.down\}; + &:hover { + box-shadow: \${euiTheme.shadows.${selectedPair[1]}.down\}; + } +\` + ` + + return ( + <> + + {stylesText} + + + { setSelectedSize(e.target.value) }} + /> + + ); +} +``` diff --git a/packages/website/docs/getting-started/theming/tokens/shadows/shadows_table.tsx b/packages/website/docs/getting-started/theming/tokens/shadows/shadows_table.tsx new file mode 100644 index 00000000000..4b9e0b73a71 --- /dev/null +++ b/packages/website/docs/getting-started/theming/tokens/shadows/shadows_table.tsx @@ -0,0 +1,60 @@ +import { css } from '@emotion/react'; +import { + useEuiTheme, + EuiColorPickerSwatch, + _EuiThemeShadowSize, +} from '@elastic/eui'; +import { ThemeValuesTable } from '../../theme_values_table'; + +const shadowTypes: _EuiThemeShadowSize[] = [ + 'xs', + 's', + 'm', + 'l', + 'xl', +]; + +export const ShadowsTable = ({ direction = "down" }) => { + const { euiTheme } = useEuiTheme(); + const items = shadowTypes.map((type) => ({ + id: type, + token: `shadows.${type}.${direction}`, + value: euiTheme.shadows[type]![direction], + })) + + // while testing! + items.push({ + id: 'flat', + token: `shadows.flat.${direction}`, + value: euiTheme.shadows.flat![direction], + }) + items.push({ + id: 'hover.base', + token: `shadows.hover.base.${direction}`, + value: euiTheme.shadows.hover.base![direction], + }) + items.push({ + id: 'hover.xl', + token: `shadows.hover.xl.${direction}`, + value: euiTheme.shadows.hover.xl![direction], + }) + + return ( + ( + + )} + /> + ); +};