diff --git a/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh b/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh index ebf6a66e8a1..df2598dce0b 100644 --- a/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh +++ b/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh @@ -33,7 +33,7 @@ analytics_vault="secret/ci/elastic-eui/analytics" export DOCS_BASE_URL="/${bucket_directory}" export DOCS_GOOGLE_TAG_MANAGER_ID="$(retry 5 vault read -field=google_tag_manager_id "${analytics_vault}")" -yarn workspaces foreach -Rpt --from @elastic/eui-website run build +yarn workspace @elastic/eui-website run build:workspaces echo "+++ Configuring environment for website deployment" diff --git a/.buildkite/scripts/pipelines/pipeline_test.sh b/.buildkite/scripts/pipelines/pipeline_test.sh index 8ec1d30c660..220e5313705 100644 --- a/.buildkite/scripts/pipelines/pipeline_test.sh +++ b/.buildkite/scripts/pipelines/pipeline_test.sh @@ -29,53 +29,53 @@ COMMAND="" case $TEST_TYPE in lint) echo "[TASK]: Running linters" - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui lint" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui lint" ;; unit:ts) echo "[TASK]: Running .ts and .js unit tests" - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react" ;; unit:tsx:16) echo "[TASK]: Running Jest .tsx tests against React 16" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react16 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react" ;; unit:tsx:17) echo "[TASK]: Running Jest .tsx tests against React 17" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react17 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react" ;; unit:tsx) echo "[TASK]: Running Jest .tsx tests against React 18" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react18 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react" ;; cypress:16) echo "[TASK]: Running Cypress tests against React 16" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react16 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16" ;; cypress:17) echo "[TASK]: Running Cypress tests against React 17" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react17 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17" ;; cypress:18) echo "[TASK]: Running Cypress tests against React 18" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react18 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048" ;; cypress:a11y) echo "[TASK]: Running Cypress accessibility tests against React 18" - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048" ;; *) diff --git a/.buildkite/scripts/release/step_build.sh b/.buildkite/scripts/release/step_build.sh index 3a9251b6e28..01d96bf62d8 100755 --- a/.buildkite/scripts/release/step_build.sh +++ b/.buildkite/scripts/release/step_build.sh @@ -10,6 +10,7 @@ echo "+++ :yarn: Installing dependencies" yarn echo "+++ :yarn: Building @elastic/eui" +yarn build:workspaces yarn build echo "+++ :yarn: Built @elastic/eui" diff --git a/package.json b/package.json index 57384e368a5..615343f528c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "pre-push": "yarn --cwd packages/eui pre-push", "preinstall": "echo \"\\x1b[K\\x1b[37;41mWarning: EUI has recently migrated to a monorepo structure. Please run EUI scripts like \\x1b[1;4myarn start\\x1b[0m\\x1b[37;41m or \\x1b[1;4myarn build\\x1b[0m\\x1b[37;41m from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead!\n\nIf this is the first time you're running EUI after the monorepo migration, please run this first from the root repository's directory to clean up your local environment:\n \\x1b[1;4mrm -rf node_modules .cache-loader dist es lib optimize test-env types .eslintcache .loki reports docs .nyc_output eui.d.ts && yarn\\x1b[0m\\x1b[37;41m\n\nInstall process will continue in 10 seconds...\\x1b[0m\"; sleep 10", "start": "echo '\\x1b[K\\x1b[37;41mPlease run this script from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead\\x1b[0m'; exit 1", - "build": "echo '\\x1b[K\\x1b[37;41mPlease run this script from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead\\x1b[0m'; exit 1" + "build": "echo '\\x1b[K\\x1b[37;41mPlease run this script from the \\x1b[1;4mpackages/eui\\x1b[0m\\x1b[37;41m directory instead\\x1b[0m'; exit 1", + "release": "node scripts/release" }, "repository": { "type": "git", @@ -24,6 +25,9 @@ "devDependencies": { "pre-push": "^0.1.4" }, + "dependencies": { + "@elastic/eui-release-cli": "link:packages/release-cli" + }, "resolutions": { "prismjs": "1.27.0", "react": "^18", diff --git a/packages/docusaurus-theme/package.json b/packages/docusaurus-theme/package.json index 4765cf70a60..7f0eeef3a8c 100644 --- a/packages/docusaurus-theme/package.json +++ b/packages/docusaurus-theme/package.json @@ -34,8 +34,9 @@ "@docusaurus/theme-common": "^3.5.2", "@docusaurus/utils-validation": "^3.5.2", "@elastic/datemath": "^5.0.3", - "@elastic/eui": "97.2.0", + "@elastic/eui": "workspace:^", "@elastic/eui-docgen": "workspace:^", + "@elastic/eui-theme-borealis": "workspace:^", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@types/react-window": "^1.8.8", diff --git a/packages/docusaurus-theme/src/components/call_out/index.tsx b/packages/docusaurus-theme/src/components/call_out/index.tsx index 4a651aaf18b..ebae6c1c34a 100644 --- a/packages/docusaurus-theme/src/components/call_out/index.tsx +++ b/packages/docusaurus-theme/src/components/call_out/index.tsx @@ -8,7 +8,7 @@ import { import { FunctionComponent, PropsWithChildren } from 'react'; type VARIANTS = 'info' | 'tip' | 'note' | 'danger' | 'warning'; -type TEXT_COLORS = 'primaryText' | 'successText' | 'dangerText' | 'warningText'; +type TEXT_COLORS = 'textPrimary' | 'textSuccess' | 'textDanger' | 'textWarning'; const VARIANT_TO_COLOR_MAP: Record< VARIANTS, @@ -16,23 +16,23 @@ const VARIANT_TO_COLOR_MAP: Record< > = { info: { backgroundVariable: 'var(--eui-background-color-primary)', - colorKey: 'primaryText', + colorKey: 'textPrimary', }, note: { backgroundVariable: 'var(--eui-background-color-primary)', - colorKey: 'primaryText', + colorKey: 'textPrimary', }, tip: { backgroundVariable: 'var(--eui-background-color-success)', - colorKey: 'successText', + colorKey: 'textSuccess', }, danger: { backgroundVariable: 'var(--eui-background-color-danger)', - colorKey: 'dangerText', + colorKey: 'textDanger', }, warning: { backgroundVariable: 'var(--eui-background-color-warning)', - colorKey: 'warningText', + colorKey: 'textWarning', }, }; @@ -52,7 +52,7 @@ const getStyles = (theme: UseEuiTheme, variant: VARIANTS) => { .alert { --ifm-alert-background-color: ${VARIANT_TO_COLOR_MAP[variant] .backgroundVariable}; - --ifm-alert-foreground-color: ${euiTheme.colors.text}; + --ifm-alert-foreground-color: ${euiTheme.colors.textParagraph}; --ifm-alert-padding-horizontal: ${euiTheme.size.base}; --ifm-alert-padding-vertical: ${euiTheme.size.base}; --ifm-alert-border-width: ${euiTheme.border.width.thin}; diff --git a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx index 66224acb77c..5e02358ed16 100644 --- a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx +++ b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx @@ -36,23 +36,24 @@ const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => { &:last-child { // border radius should be 1px smaller to work nicely // with the wrapper border width of 1px - border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) calc(var(--docs-demo-border-radius) - 1px); + border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) + calc(var(--docs-demo-border-radius) - 1px); } `, button: css` - background: var(--eui-background-color-primary-opaque); + background: var(--eui-background-color-primary); border: 1px solid var(--eui-border-color-primary); margin-right: auto; `, }; -} +}; export const DemoActionsBar = ({ isSourceOpen, setSourceOpen, onClickOpenInCodeSandbox, onClickReloadExample, - onClickCopyToClipboard + onClickCopyToClipboard, }: DemoActionsBarProps) => { const styles = useEuiMemoizedStyles(getDemoActionsBarStyles); diff --git a/packages/docusaurus-theme/src/components/navbar_item/index.tsx b/packages/docusaurus-theme/src/components/navbar_item/index.tsx index 130047a50e8..f4bacf65cfd 100644 --- a/packages/docusaurus-theme/src/components/navbar_item/index.tsx +++ b/packages/docusaurus-theme/src/components/navbar_item/index.tsx @@ -91,9 +91,9 @@ export const NavbarItem = (props: Props) => { } = props; const isBrowser = useIsBrowser(); - const { theme } = useContext(AppThemeContext); + const { colorMode } = useContext(AppThemeContext); - const isDarkMode = theme === 'dark'; + const isDarkMode = colorMode === 'dark'; const styles = useEuiMemoizedStyles(getStyles); const cssStyles = [ diff --git a/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx b/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx index 9c83d5b23b3..f3a9c30f851 100644 --- a/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx +++ b/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx @@ -7,9 +7,13 @@ import { EuiCode, UseEuiTheme, EuiTitle, - useEuiMemoizedStyles, EuiLink, + useEuiMemoizedStyles, + EuiLink, } from '@elastic/eui'; -import { ProcessedComponent, ProcessedComponentProp } from '@elastic/eui-docgen'; +import { + ProcessedComponent, + ProcessedComponentProp, +} from '@elastic/eui-docgen'; import { useCallback, useMemo } from 'react'; import { css } from '@emotion/react'; import { PropTableExtendedTypes } from './extended_types'; @@ -19,9 +23,8 @@ export interface PropTableProps { headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } -const getPropId = (prop: ProcessedComponentProp, componentName: string) => ( - `${encodeURIComponent(componentName)}-prop-${prop.name}` -); +const getPropId = (prop: ProcessedComponentProp, componentName: string) => + `${encodeURIComponent(componentName)}-prop-${prop.name}`; const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({ propTable: css` @@ -53,7 +56,7 @@ const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({ `, required: css` font-family: ${euiTheme.font.familyCode}; - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; `, type: css` font-weight: ${euiTheme.font.weight.semiBold}; @@ -78,19 +81,23 @@ export const PropTable = ({ const styles = useEuiMemoizedStyles(getPropTableStyles); const tableItems = useMemo>( - () => Object.values(definition.props).sort( - (a, b) => +b.isRequired - +a.isRequired - ), - [definition.props], + () => + Object.values(definition.props).sort( + (a, b) => +b.isRequired - +a.isRequired + ), + [definition.props] ); const columns = useMemo>>( - () => ([ + () => [ { field: 'name', name: 'Prop', - width: "150", - render(value: ProcessedComponentProp['name'], prop: ProcessedComponentProp) { + width: '150', + render( + value: ProcessedComponentProp['name'], + prop: ProcessedComponentProp + ) { return ( {value} @@ -110,15 +117,24 @@ export const PropTable = ({ { field: 'description', name: 'Description and type', - render(value: ProcessedComponentProp['description'], prop: ProcessedComponentProp) { + render( + value: ProcessedComponentProp['description'], + prop: ProcessedComponentProp + ) { return ( - + {value?.trim() && ( - {value} + + {value} + )} {prop.type && ( - Type: {' '} + Type:{' '} {prop.type.raw || prop.type.name} @@ -126,28 +142,34 @@ export const PropTable = ({ )} ); - } + }, }, { field: 'defaultValue', name: 'Default value', - width: "120", - render(value: ProcessedComponentProp['defaultValue'], prop: ProcessedComponentProp) { + width: '120', + render( + value: ProcessedComponentProp['defaultValue'], + prop: ProcessedComponentProp + ) { if (prop.isRequired && !value?.trim().length) { - return Required + return Required; } return value && {value}; }, - } - ]), - [], + }, + ], + [] ); - const rowProps = useCallback((item: ProcessedComponentProp) => ({ - id: getPropId(item, definition.displayName), - css: styles.tableRow, - }), [definition.displayName]); + const rowProps = useCallback( + (item: ProcessedComponentProp) => ({ + id: getPropId(item, definition.displayName), + css: styles.tableRow, + }), + [definition.displayName] + ); return ( value -) as EuiThemeColorMode[]; +export const AVAILABLE_THEMES = [ + { + text: 'Borealis', + value: EuiThemeBorealis.key, + provider: EuiThemeBorealis, + }, + { + text: 'Amsterdam', + value: EuiThemeAmsterdam.key, + provider: EuiThemeAmsterdam, + }, +]; + +const EUI_COLOR_MODES = ['light', 'dark'] as EuiThemeColorMode[]; const defaultState = { - theme: EUI_THEME_NAMES[0] as EuiThemeColorMode, - changeTheme: (themeValue: EuiThemeColorMode) => {}, + colorMode: EUI_COLOR_MODES[0] as EuiThemeColorMode, + changeColorMode: (colorMode: EuiThemeColorMode) => {}, + theme: AVAILABLE_THEMES[0]!, + changeTheme: (themeValue: string) => {}, }; export const AppThemeContext = createContext(defaultState); @@ -24,25 +42,39 @@ export const AppThemeProvider: FunctionComponent = ({ children, }) => { const isBrowser = useIsBrowser(); - const [theme, setTheme] = useState(() => { + const [colorMode, setColorMode] = useState(() => { if (isBrowser) { - return localStorage.getItem('theme') as EuiThemeColorMode ?? defaultState.theme; + return ( + (localStorage.getItem('theme') as EuiThemeColorMode) ?? + defaultState.colorMode + ); } - return defaultState.theme; + return defaultState.colorMode; }); + const [theme, setTheme] = useState(defaultState.theme); + + const handleChangeTheme = (themeValue: string) => { + const themeObj = AVAILABLE_THEMES.find((t) => t.value === themeValue); + + setTheme((currentTheme) => themeObj ?? currentTheme); + }; + return ( {children} diff --git a/packages/docusaurus-theme/src/components/theme_switcher/index.tsx b/packages/docusaurus-theme/src/components/theme_switcher/index.tsx new file mode 100644 index 00000000000..eeb4a1706d3 --- /dev/null +++ b/packages/docusaurus-theme/src/components/theme_switcher/index.tsx @@ -0,0 +1,94 @@ +import { useContext, useEffect, useState } from 'react'; +import { css } from '@emotion/react'; +import { + EuiAvatar, + EuiButtonEmpty, + euiFocusRing, + EuiListGroup, + EuiListGroupItem, + EuiPopover, + useEuiMemoizedStyles, + useEuiTheme, + UseEuiTheme, +} from '@elastic/eui'; + +import { AppThemeContext, AVAILABLE_THEMES } from '../theme_context'; + +const getStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + button: css` + padding: 0; + `, + listItem: css` + .euiListGroupItem__button:focus-visible { + // overriding the global "outset" style to ensure the focus style is not cut off + ${euiFocusRing(euiThemeContext, 'inset', { + color: euiTheme.colors.primary, + })}; + } + `, + }; +}; + +export const ThemeSwitcher = () => { + const { euiTheme } = useEuiTheme(); + const [currentTheme, setCurrentTheme] = useState( + AVAILABLE_THEMES[0]?.value ?? '' + ); + const [isPopoverOpen, setPopoverOpen] = useState(false); + const { theme, changeTheme } = useContext(AppThemeContext); + + useEffect(() => { + changeTheme(currentTheme); + }, [currentTheme]); + + const styles = useEuiMemoizedStyles(getStyles); + + const button = ( + setPopoverOpen((isOpen) => !isOpen)} + aria-label={`${theme.text} theme`} + > + + + ); + + return ( + setPopoverOpen(false)} + button={button} + panelPaddingSize="xs" + repositionOnScroll + aria-label="EUI theme list" + > + + {AVAILABLE_THEMES && + AVAILABLE_THEMES.map((theme) => { + const isCurrentTheme = currentTheme === theme.value; + + const handleOnClick = () => { + setCurrentTheme(theme.value); + }; + + return ( + + ); + })} + + + ); +}; diff --git a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx index aaefb2441bc..970e11e0397 100644 --- a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx +++ b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx @@ -17,20 +17,20 @@ function ColorModeToggle({ onChange, ...rest }: WrappedProps): JSX.Element { - const { theme, changeTheme } = useContext(AppThemeContext); + const { colorMode, changeColorMode } = useContext(AppThemeContext); useEffect(() => { - changeTheme(value); + changeColorMode(value); }, []); - const handleOnChange = (themeName: EuiThemeColorMode) => { - changeTheme(themeName); - onChange?.(themeName); + const handleOnChange = (colorMode: EuiThemeColorMode) => { + changeColorMode(colorMode); + onChange?.(colorMode); }; return ( diff --git a/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx b/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx index 15ad94fc05f..717316ca9f6 100644 --- a/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx +++ b/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx @@ -5,7 +5,7 @@ import type { Props } from '@theme-original/EditThisPage'; import { EuiButton, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui'; // @ts-ignore - eui only has module declarations for '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' // but importing from /src results in "Module not found" error -import { euiButtonColor } from '@elastic/eui/lib/themes/amsterdam/global_styling/mixins/button'; +import { euiButtonColor } from '@elastic/eui/lib/global_styling/mixins/_button'; const getStyles = (theme: UseEuiTheme) => { const { euiTheme } = theme; diff --git a/packages/docusaurus-theme/src/theme/Footer/index.tsx b/packages/docusaurus-theme/src/theme/Footer/index.tsx index 5f2de8809f5..51e1d42ffb6 100644 --- a/packages/docusaurus-theme/src/theme/Footer/index.tsx +++ b/packages/docusaurus-theme/src/theme/Footer/index.tsx @@ -15,7 +15,8 @@ const SSPL_LICENSE_URL = const getFooterStyles = ({ euiTheme }: UseEuiTheme) => { return { root: css` - background: #1c1e23; // Color not available in EUI + background: ${euiTheme.colors + .backgroundBaseSubdued}; // Color not available in EUI padding: ${euiTheme.size.l}; text-align: center; `, diff --git a/packages/docusaurus-theme/src/theme/Logo/index.tsx b/packages/docusaurus-theme/src/theme/Logo/index.tsx index 3f64a7bd951..ff434592173 100644 --- a/packages/docusaurus-theme/src/theme/Logo/index.tsx +++ b/packages/docusaurus-theme/src/theme/Logo/index.tsx @@ -62,8 +62,8 @@ function LogoThemedImage({ alt: string; imageClassName?: string; }) { - const { theme } = useContext(AppThemeContext); - const isDarkMode = theme === 'dark'; + const { colorMode } = useContext(AppThemeContext); + const isDarkMode = colorMode === 'dark'; const styles = useEuiMemoizedStyles(getStyles); diff --git a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx index 53b4f771ead..97b54f518ae 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx @@ -15,7 +15,12 @@ import SearchBar from '@theme-original/SearchBar'; import NavbarMobileSidebarToggle from '@theme-original/Navbar/MobileSidebar/Toggle'; import NavbarLogo from '@theme-original/Navbar/Logo'; import NavbarSearch from '@theme-original/Navbar/Search'; -import { euiFocusRing, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui'; +import { + euiFocusRing, + euiTextTruncate, + useEuiMemoizedStyles, + UseEuiTheme, +} from '@elastic/eui'; import { euiFormControlText, euiFormVariables, @@ -24,6 +29,7 @@ import { import euiVersions from '@site/static/versions.json'; import { VersionSwitcher } from '../../../components/version_switcher'; +import { ThemeSwitcher } from '../../../components/theme_switcher'; const DOCS_PATH = '/docs'; @@ -67,6 +73,10 @@ const getStyles = (euiThemeContext: UseEuiTheme) => { @media (min-width: 997px) { gap: ${euiTheme.size.l}; } + + .navbar__link { + ${euiTextTruncate()} + } `, navbarItemsRight: css` gap: ${euiTheme.size.s}; @@ -125,6 +135,11 @@ const getStyles = (euiThemeContext: UseEuiTheme) => { display: none; } `, + themeSwitcher: css` + @media (max-width: 996px) { + display: none; + } + `, }; }; @@ -218,6 +233,12 @@ export default function NavbarContent(): JSX.Element { )} + + {isBrowser && ( +
+ +
+ )} } /> diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx index 08791e527a8..b8530f0fcc5 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx @@ -9,6 +9,7 @@ import useIsBrowser from '@docusaurus/useIsBrowser'; import euiVersions from '@site/static/versions.json'; import { VersionSwitcher } from '../../../../components/version_switcher'; +import { ThemeSwitcher } from '../../../../components/theme_switcher'; const getStyles = ({ euiTheme }: UseEuiTheme) => ({ sidebar: css` @@ -64,6 +65,7 @@ export default function NavbarMobileSidebarHeader(): JSX.Element {
{isBrowser && versions && } + {isBrowser && }
diff --git a/packages/docusaurus-theme/src/theme/Root.styles.ts b/packages/docusaurus-theme/src/theme/Root.styles.ts index d80e7dc73d6..6cf2246d905 100644 --- a/packages/docusaurus-theme/src/theme/Root.styles.ts +++ b/packages/docusaurus-theme/src/theme/Root.styles.ts @@ -7,11 +7,8 @@ */ import { - euiBorderColor, euiFontSizeFromScale, euiLineHeightFromBaseline, - useEuiBackgroundColor, - useEuiFocusRing, UseEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; @@ -21,7 +18,7 @@ import { css } from '@emotion/react'; // on the global level to reduce how often they are called export const getGlobalStyles = (theme: UseEuiTheme) => { const { euiTheme } = theme; - const { font, base, colors, size } = euiTheme; + const { font, base, colors, size, components } = euiTheme; const fontBodyScale = font.scale[font.body.scale]; const fontBase = { fontFamily: font.family, @@ -48,76 +45,72 @@ export const getGlobalStyles = (theme: UseEuiTheme) => { const lineHeightXXS = euiLineHeightFromBaseline('xxs', euiTheme); return css` - // color theme related variables - :root, - [data-theme='dark']:root { - /* EUI theme variables */ - --eui-background-color-primary: ${useEuiBackgroundColor('primary')}; - --eui-background-color-primary-opaque: ${useEuiBackgroundColor( - 'primary', - { method: 'opaque' } - )}; - --eui-background-color-success: ${useEuiBackgroundColor('success')}; - --eui-background-color-danger: ${useEuiBackgroundColor('danger')}; - --eui-background-color-warning: ${useEuiBackgroundColor('warning')}; - --eui-background-color-accent: ${useEuiBackgroundColor('accent')}; - - --eui-color-danger-text: ${euiTheme.colors.dangerText}; - - /* Docusaurus theme variables */ - --ifm-background-color: ${colors.body}; - --ifm-font-color-base: ${colors.text}; - --ifm-link-color: ${colors.link}; - --ifm-link-hover-color: ${colors.link}; - - --ifm-menu-color: ${euiTheme.colors.text}; - --ifm-menu-color-background-active: ${euiTheme.colors.lightestShade}; - --ifm-menu-color-background-hover: var(--eui-background-color-primary); - - --ifm-pre-background: ${euiTheme.colors.lightestShade}; - } - - :root { - /* EUI theme variables */ - --eui-font-size-base: ${fontBase.fontSize}; - --eui-font-size-xxl: ${fontSizeXXL}; - --eui-font-size-xl: ${fontSizeXL}; - --eui-font-size-l: ${fontSizeL}; - --eui-font-size-m: ${fontSizeM}; - --eui-font-size-s: ${fontSizeS}; - --eui-font-size-xs: ${fontSizeXS}; - --eui-font-size-xxs: ${fontSizeXXS}; - - --eui-line-height-base: ${lineHeightXL}; - --eui-line-height-xxl: ${lineHeightXXL}; - --eui-line-height-xl: ${lineHeightXL}; - --eui-line-height-l: ${lineHeightL}; - --eui-line-height-m: ${lineHeightM}; - --eui-line-height-s: ${lineHeightS}; - --eui-line-height-xs: ${lineHeightXS}; - --eui-line-height-xxs: ${lineHeightXXS}; - - --eui-size-xs: ${euiTheme.size.xs}; - --eui-size-s: ${euiTheme.size.s}; - - --eui-border-color-primary: ${euiBorderColor(theme, 'primary')}; - - --eui-theme-content-vertical-spacing: ${euiTheme.size.base}; - - /* Docusaurus theme variables */ - --ifm-font-family-base: ${fontBase.fontFamily}; - --ifm-font-size-base: var(--eui-font-size-base); - --ifm-font-weight-base: ${fontBase.fontWeight}; - --ifm-line-height-base: var(--eui-line-height-base); - - --ifm-h1-font-size: var(--eui-font-size-xl); - --ifm-h2-font-size: var(--eui-font-size-l); - --ifm-h3-font-size: var(--eui-font-size-m); - --ifm-h4-font-size: var(--eui-font-size-s); - --ifm-h5-font-size: var(--eui-font-size-xs); - --ifm-h6-font-size: var(--eui-font-size-xxs); - - --ifm-global-radius: ${euiTheme.border.radius.small}; - } + // color theme related variables + :root, + [data-theme='dark']:root { + /* EUI theme variables */ + --eui-background-color-primary: ${colors.backgroundBasePrimary}; + --eui-background-color-success: ${colors.backgroundBaseSuccess}; + --eui-background-color-danger: ${colors.backgroundBaseDanger}; + --eui-background-color-warning: ${colors.backgroundBaseWarning}; + --eui-background-color-accent: ${colors.backgroundBaseAccent}; + + --eui-color-danger-text: ${colors.textDanger}; + + /* Docusaurus theme variables */ + --ifm-background-color: ${colors.backgroundBasePlain}; + --ifm-font-color-base: ${colors.textParagraph}; + --ifm-link-color: ${colors.link}; + --ifm-link-hover-color: ${colors.link}; + + --ifm-menu-color: ${colors.textParagraph}; + --ifm-menu-color-background-active: ${colors.backgroundBaseSubdued}; + --ifm-menu-color-background-hover: var(--eui-background-color-primary); + + --ifm-pre-background: ${components.codeBackground}; + } + + :root { + /* EUI theme variables */ + --eui-font-size-base: ${fontBase.fontSize}; + --eui-font-size-xxl: ${fontSizeXXL}; + --eui-font-size-xl: ${fontSizeXL}; + --eui-font-size-l: ${fontSizeL}; + --eui-font-size-m: ${fontSizeM}; + --eui-font-size-s: ${fontSizeS}; + --eui-font-size-xs: ${fontSizeXS}; + --eui-font-size-xxs: ${fontSizeXXS}; + + --eui-line-height-base: ${lineHeightXL}; + --eui-line-height-xxl: ${lineHeightXXL}; + --eui-line-height-xl: ${lineHeightXL}; + --eui-line-height-l: ${lineHeightL}; + --eui-line-height-m: ${lineHeightM}; + --eui-line-height-s: ${lineHeightS}; + --eui-line-height-xs: ${lineHeightXS}; + --eui-line-height-xxs: ${lineHeightXXS}; + + --eui-size-xs: ${size.xs}; + --eui-size-s: ${size.s}; + + --eui-border-color-primary: ${colors.borderStrongPrimary}; + + --eui-theme-content-vertical-spacing: ${size.base}; + + /* Docusaurus theme variables */ + --ifm-font-family-base: ${fontBase.fontFamily}; + --ifm-font-size-base: var(--eui-font-size-base); + --ifm-font-weight-base: ${fontBase.fontWeight}; + --ifm-line-height-base: var(--eui-line-height-base); + + --ifm-h1-font-size: var(--eui-font-size-xl); + --ifm-h2-font-size: var(--eui-font-size-l); + --ifm-h3-font-size: var(--eui-font-size-m); + --ifm-h4-font-size: var(--eui-font-size-s); + --ifm-h5-font-size: var(--eui-font-size-xs); + --ifm-h6-font-size: var(--eui-font-size-xxs); + + --ifm-global-radius: ${euiTheme.border.radius.small}; + } `; }; diff --git a/packages/eui-docgen/package.json b/packages/eui-docgen/package.json index ae00b77d96f..949a5c991f6 100644 --- a/packages/eui-docgen/package.json +++ b/packages/eui-docgen/package.json @@ -14,6 +14,7 @@ }, "private": true, "dependencies": { + "@elastic/eui": "workspace:^", "glob": "^11.0.0", "react-docgen-typescript": "^2.2.2", "ts-node": "^10.9.2", diff --git a/packages/eui-theme-borealis/.babelrc.js b/packages/eui-theme-borealis/.babelrc.js new file mode 100644 index 00000000000..0fc74dd1fe9 --- /dev/null +++ b/packages/eui-theme-borealis/.babelrc.js @@ -0,0 +1,27 @@ +module.exports = { + // We need to preserve comments as they are used by webpack for + // naming chunks during code-splitting. The compression step during + // bundling will remove them later. + comments: true, + + presets: [ + [ + '@babel/env', + { + // `targets` property set via `.browserslistrc` + useBuiltIns: process.env.NO_COREJS_POLYFILL ? false : 'usage', + corejs: !process.env.NO_COREJS_POLYFILL ? '3.6' : undefined, + modules: process.env.BABEL_MODULES + ? process.env.BABEL_MODULES === 'false' + ? false + : process.env.BABEL_MODULES + : 'commonjs', // babel's default is commonjs + }, + ], + ['@babel/react', { runtime: 'classic' }], + [ + '@babel/typescript', + { isTSX: true, allExtensions: true, allowDeclareFields: true }, + ], + ], +}; diff --git a/packages/eui-theme-borealis/.eslintignore b/packages/eui-theme-borealis/.eslintignore new file mode 100644 index 00000000000..4874b17b0b8 --- /dev/null +++ b/packages/eui-theme-borealis/.eslintignore @@ -0,0 +1,9 @@ +dist +node_modules +lib +types +**/*.d.ts +package.json +scripts +.eslintrc.js +babel.config.js diff --git a/packages/eui-theme-borealis/.eslintplugin.js b/packages/eui-theme-borealis/.eslintplugin.js new file mode 100644 index 00000000000..88d38f7aa99 --- /dev/null +++ b/packages/eui-theme-borealis/.eslintplugin.js @@ -0,0 +1,3 @@ +exports.rules = { + 'require-license-header': require('@elastic/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js'), +}; diff --git a/packages/eui-theme-borealis/.eslintrc.js b/packages/eui-theme-borealis/.eslintrc.js new file mode 100644 index 00000000000..e33853c0255 --- /dev/null +++ b/packages/eui-theme-borealis/.eslintrc.js @@ -0,0 +1,114 @@ +const SSPL_ELASTIC_2_0_LICENSE_HEADER = ` +/* + * 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. + */ +`; + +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + project: ['./tsconfig.json'], + ecmaFeatures: { + jsx: true, + }, + }, + settings: { + 'import/resolver': { + node: { + extensions: ['.ts', '.tsx', '.js', '.json'], + }, + }, + }, + extends: [ + 'plugin:@typescript-eslint/recommended', + // Prettier options need to come last, in order to override other style rules + 'plugin:prettier/recommended', + ], + plugins: ['local', 'import'], + rules: { + 'block-scoped-var': 'error', + camelcase: 'off', + 'dot-notation': ['error', { allowKeywords: true }], + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'guard-for-in': 'error', + 'new-cap': ['error', { capIsNewExceptions: ['Private'] }], + 'no-caller': 'error', + 'no-const-assign': 'error', + 'no-debugger': 'error', + 'no-empty': ['error', { allowEmptyCatch: true }], + 'no-eval': 'error', + 'no-extend-native': 'error', + 'no-global-assign': 'error', + 'no-loop-func': 'error', + 'no-restricted-globals': ['error', 'context'], + 'no-script-url': 'error', + 'no-sequences': 'error', + 'no-var': 'error', + 'no-with': 'error', + 'prefer-const': 'error', + 'prefer-template': 'error', + strict: ['error', 'never'], + 'valid-typeof': 'error', + + 'local/require-license-header': [ + 'warn', + { + license: SSPL_ELASTIC_2_0_LICENSE_HEADER, + }, + ], + + 'import/no-unresolved': ['error', { amd: true, commonjs: true }], + 'import/namespace': 'error', + 'import/default': 'error', + 'import/export': 'error', + 'import/no-named-as-default': 'error', + 'import/no-named-as-default-member': 'error', + 'import/no-duplicates': 'error', + + '@typescript-eslint/array-type': ['error', { default: 'array-simple' }], + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/explicit-member-accessibility': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/ban-tslint-comment': 'error', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-parameter-properties': 'off', + '@typescript-eslint/no-triple-slash-reference': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { argsIgnorePattern: '^_', ignoreRestSiblings: true }, + ], + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-empty-function': 'off', + // It"s all very well saying that some types are trivially inferrable, + // but being explicit is still clearer. + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/naming-convention': 'off', + '@typescript-eslint/ban-ts-comment': [ + 'error', + { + 'ts-ignore': 'allow-with-description', + 'ts-expect-error': 'allow-with-description', + }, + ], + '@typescript-eslint/consistent-type-exports': [ + 'error', + { fixMixedExportsWithInlineTypeSpecifier: false }, + ], + }, + overrides: [ + { + files: ['*.d.ts'], + rules: { + 'react/prefer-es6-class': 'off', + }, + }, + ], +}; diff --git a/packages/eui-theme-borealis/.gitignore b/packages/eui-theme-borealis/.gitignore new file mode 100644 index 00000000000..4450fe8d868 --- /dev/null +++ b/packages/eui-theme-borealis/.gitignore @@ -0,0 +1,11 @@ +# Dependencies +/node_modules + +# Production +/lib + +yarn-debug.log* +yarn-error.log* + +# Build-related files +.eslintcache \ No newline at end of file diff --git a/packages/eui-theme-borealis/.prettierrc b/packages/eui-theme-borealis/.prettierrc new file mode 100644 index 00000000000..b2f0fa8f00e --- /dev/null +++ b/packages/eui-theme-borealis/.prettierrc @@ -0,0 +1,7 @@ +{ + "parser": "typescript", + "printWidth": 80, + "semi": true, + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/packages/eui-theme-borealis/.stylelintrc.js b/packages/eui-theme-borealis/.stylelintrc.js new file mode 100644 index 00000000000..42adc41f28c --- /dev/null +++ b/packages/eui-theme-borealis/.stylelintrc.js @@ -0,0 +1,163 @@ +const camelCaseRegex = '^[a-z][\\w-]*$'; // Note: also allows `_` as part of BEM naming +const camelCaseValueRegex = '/^[a-z][\\w.]*$/'; // Note: also allows `.` for JS objects +const cssInJsVarRegex = '/\\${[a-zA-Z]+/'; + +module.exports = { + // @see https://stylelint.io/user-guide/rules + rules: { + // Enforce camelCase naming + 'selector-class-pattern': camelCaseRegex, + 'keyframes-name-pattern': camelCaseRegex, + 'custom-property-pattern': camelCaseRegex, + + // Opinionated rules + 'declaration-no-important': true, + 'max-nesting-depth': [ + 2, + { + ignore: ['blockless-at-rules', 'pseudo-classes'], + }, + ], + 'block-no-empty': true, + 'selector-no-qualifying-type': [ + true, + { + ignore: ['attribute'], // Allows input[type=search] + }, + ], + + // Non-Prettier newline rules + // Put a line-break between sections of CSS, but allow quick one-liners for legibility + 'rule-empty-line-before': [ + 'always-multi-line', + { + ignore: ['first-nested', 'after-comment'], + }, + ], + 'comment-empty-line-before': null, + 'declaration-empty-line-before': null, + + // Value preferences + 'number-max-precision': null, + // Attempt to catch/flag non-variable color values + 'color-named': 'never', + 'color-no-hex': true, + // Prefer lowercase values, except for font names and currentColor + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family', '/^\\$eui[\\w]+/'], // Allow fonts and Sass variables + ignoreKeywords: ['currentColor'], + }, + ], + 'declaration-block-no-duplicate-properties': [ + true, + { + ignore: ['consecutive-duplicates'], // We occasionally use duplicate property values for cross-browser fallbacks + }, + ], + + // TODO: It may be worth investigating and updating these rules to their more modern counterparts + 'color-function-notation': 'legacy', + 'alpha-value-notation': 'number', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'no-descending-specificity': null, + 'keyframe-selector-notation': null, + 'declaration-block-no-redundant-longhand-properties': null, + }, + overrides: [ + { + // TODO: Remove Sass-specific config & rules once we're completely off Sass + files: ['**/*.scss'], + ignoreFiles: [ + 'generator-eui/**/*.scss', + 'src/global_styling/react_date_picker/**/*.scss', + 'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss', + 'src/components/date_picker/react-datepicker/**/*.scss', + ], + extends: [ + 'stylelint-config-standard-scss', + 'stylelint-config-prettier-scss', + ], + // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules + rules: { + // Casing + 'scss/dollar-variable-pattern': camelCaseRegex, + 'scss/at-mixin-pattern': camelCaseRegex, + 'scss/at-function-pattern': camelCaseRegex, + 'function-name-case': [ + 'lower', + { + ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'], + }, + ], + + // Whitespace/newlines + 'scss/at-if-closing-brace-space-after': 'always-intermediate', + 'scss/operator-no-unspaced': true, + + // Formatting rules deprecated as of v15 - keep them in Sass styles just in case until end of migration + // @see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/rules.md#deprecated + 'color-hex-case': 'upper', + 'string-quotes': 'single', + // 2 spaces for indentation + indentation: [2, { indentInsideParens: 'once-at-root-twice-in-block' }], + // Mimic 1tbs `} else {` brace style, like our JS + 'block-opening-brace-space-before': 'always', + 'block-closing-brace-newline-before': 'always-multi-line', + // Ensure multiple selectors on one line each + 'selector-list-comma-newline-before': 'never-multi-line', + 'selector-list-comma-newline-after': 'always', + // Trim unnecessary newlines/whitespace + 'block-closing-brace-empty-line-before': 'never', + 'max-empty-lines': 1, + 'no-eol-whitespace': true, + // Enforce spacing around various syntax symbols (colons, operators, etc.) + 'declaration-colon-space-after': 'always-single-line', + 'declaration-colon-space-before': 'never', + 'function-calc-no-unspaced-operator': true, + 'selector-combinator-space-before': 'always', + 'selector-combinator-space-after': 'always', + // Ensure trailing semicolons are always present on non-oneliners + 'declaration-block-semicolon-newline-after': 'always-multi-line', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'scss/no-global-function-names': null, + 'scss/dollar-variable-empty-line-before': null, + 'scss/at-rule-conditional-no-parentheses': null, + 'scss/double-slash-comment-empty-line-before': null, + 'scss/at-if-no-null': null, + 'selector-not-notation': null, // Enforce comma notation for CSS-in-JS moving forward + }, + }, + { + files: ['**/*.styles.ts', '**/*.ts', '**/*.tsx'], + extends: ['stylelint-config-standard'], + customSyntax: 'postcss-styled-syntax', + rules: { + // Unfortunately, double slash comments must be replaced with standard CSS /* */ comments + // Otherwise we get a parsing error - see https://github.com/hudochenkov/postcss-styled-syntax#known-issues + 'no-invalid-double-slash-comments': true, + // Empty style keys should be allowed, as Emotion still uses them for generating classNames + 'no-empty-source': null, + // Don't lint casing on interpolated JS vars + 'function-name-case': ['lower', { ignoreFunctions: [cssInJsVarRegex] }], + 'function-no-unknown': [true, { ignoreFunctions: [cssInJsVarRegex] }], + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family'], + ignoreKeywords: [camelCaseValueRegex], + }, + ], + // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful + // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS()) + 'no-extra-semicolons': true, + + // Emotion uses the `label` property to generate the output className string + 'property-no-unknown': [true, { ignoreProperties: 'label' }], + }, + }, + ], +}; diff --git a/packages/eui-theme-borealis/LICENSE.txt b/packages/eui-theme-borealis/LICENSE.txt new file mode 100644 index 00000000000..74327a8f6f3 --- /dev/null +++ b/packages/eui-theme-borealis/LICENSE.txt @@ -0,0 +1,6 @@ +Source code in this repository is covered by (i) a dual license under the Server +Side Public License, v 1 and the Elastic License 2.0 or (ii) an Apache License +2.0 compatible license or (iii) solely under the Elastic License 2.0, in each +case, as noted in the applicable header. The default throughout the repository +is a dual license under the Server Side Public License, v 1 and the Elastic +License 2.0, unless the header specifies another license. diff --git a/packages/eui-theme-borealis/README.md b/packages/eui-theme-borealis/README.md new file mode 100644 index 00000000000..cb7c237d4a2 --- /dev/null +++ b/packages/eui-theme-borealis/README.md @@ -0,0 +1,19 @@ +# EUI theme **Borealis** + +This package contains specific style tokens for the EUI theme **Borealis** which is exported as `EuiThemeBorealis`. + +## Installing dependencies + +Please run `yarn` to install dependencies: + +```shell +yarn +``` + +## Building helper packages + +Before you run scripts, it's mandatory to build local dependency packages: + +```shell +yarn workspaces foreach -Rti --from @elastic/eui-theme-borealis run build +``` \ No newline at end of file diff --git a/packages/eui-theme-borealis/licenses/ELASTIC-LICENSE-2.0.md b/packages/eui-theme-borealis/licenses/ELASTIC-LICENSE-2.0.md new file mode 100644 index 00000000000..809108b857f --- /dev/null +++ b/packages/eui-theme-borealis/licenses/ELASTIC-LICENSE-2.0.md @@ -0,0 +1,93 @@ +Elastic License 2.0 + +URL: https://www.elastic.co/licensing/elastic-license + +## Acceptance + +By using the software, you agree to all of the terms and conditions below. + +## Copyright License + +The licensor grants you a non-exclusive, royalty-free, worldwide, +non-sublicensable, non-transferable license to use, copy, distribute, make +available, and prepare derivative works of the software, in each case subject to +the limitations and conditions below. + +## Limitations + +You may not provide the software to third parties as a hosted or managed +service, where the service provides users with access to any substantial set of +the features or functionality of the software. + +You may not move, change, disable, or circumvent the license key functionality +in the software, and you may not remove or obscure any functionality in the +software that is protected by the license key. + +You may not alter, remove, or obscure any licensing, copyright, or other notices +of the licensor in the software. Any use of the licensor’s trademarks is subject +to applicable law. + +## Patents + +The licensor grants you a license, under any patent claims the licensor can +license, or becomes able to license, to make, have made, use, sell, offer for +sale, import and have imported the software, in each case subject to the +limitations and conditions in this license. This license does not cover any +patent claims that you cause to be infringed by modifications or additions to +the software. If you or your company make any written claim that the software +infringes or contributes to infringement of any patent, your patent license for +the software granted under these terms ends immediately. If your company makes +such a claim, your patent license ends immediately for work on behalf of your +company. + +## Notices + +You must ensure that anyone who gets a copy of any part of the software from you +also gets a copy of these terms. + +If you modify the software, you must include in any modified copies of the +software prominent notices stating that you have modified the software. + +## No Other Rights + +These terms do not imply any licenses other than those expressly granted in +these terms. + +## Termination + +If you use the software in violation of these terms, such use is not licensed, +and your licenses will automatically terminate. If the licensor provides you +with a notice of your violation, and you cease all violation of this license no +later than 30 days after you receive that notice, your licenses will be +reinstated retroactively. However, if you violate these terms after such +reinstatement, any additional violation of these terms will cause your licenses +to terminate automatically and permanently. + +## No Liability + +*As far as the law allows, the software comes as is, without any warranty or +condition, and the licensor will not be liable to you for any damages arising +out of these terms or the use or nature of the software, under any kind of +legal claim.* + +## Definitions + +The **licensor** is the entity offering these terms, and the **software** is the +software the licensor makes available under these terms, including any portion +of it. + +**you** refers to the individual or entity agreeing to these terms. + +**your company** is any legal entity, sole proprietorship, or other kind of +organization that you work for, plus all organizations that have control over, +are under the control of, or are under common control with that +organization. **control** means ownership of substantially all the assets of an +entity, or the power to direct its management and policies by vote, contract, or +otherwise. Control can be direct or indirect. + +**your licenses** are all the licenses granted to you for the software under +these terms. + +**use** means anything you do with the software requiring one of your licenses. + +**trademark** means trademarks, service marks, and similar rights. diff --git a/packages/eui-theme-borealis/licenses/SSPL-LICENSE.md b/packages/eui-theme-borealis/licenses/SSPL-LICENSE.md new file mode 100644 index 00000000000..ea3921393f6 --- /dev/null +++ b/packages/eui-theme-borealis/licenses/SSPL-LICENSE.md @@ -0,0 +1,557 @@ + Server Side Public License + VERSION 1, OCTOBER 16, 2018 + + Copyright © 2018 MongoDB, Inc. + + Everyone is permitted to copy and distribute verbatim copies of this + license document, but changing it is not allowed. + + TERMS AND CONDITIONS + + 0. Definitions. + + “This License” refers to Server Side Public License. + + “Copyright” also means copyright-like laws that apply to other kinds of + works, such as semiconductor masks. + + “The Program” refers to any copyrightable work licensed under this + License. Each licensee is addressed as “you”. “Licensees” and + “recipients” may be individuals or organizations. + + To “modify” a work means to copy from or adapt all or part of the work in + a fashion requiring copyright permission, other than the making of an + exact copy. The resulting work is called a “modified version” of the + earlier work or a work “based on” the earlier work. + + A “covered work” means either the unmodified Program or a work based on + the Program. + + To “propagate” a work means to do anything with it that, without + permission, would make you directly or secondarily liable for + infringement under applicable copyright law, except executing it on a + computer or modifying a private copy. Propagation includes copying, + distribution (with or without modification), making available to the + public, and in some countries other activities as well. + + To “convey” a work means any kind of propagation that enables other + parties to make or receive copies. Mere interaction with a user through a + computer network, with no transfer of a copy, is not conveying. + + An interactive user interface displays “Appropriate Legal Notices” to the + extent that it includes a convenient and prominently visible feature that + (1) displays an appropriate copyright notice, and (2) tells the user that + there is no warranty for the work (except to the extent that warranties + are provided), that licensees may convey the work under this License, and + how to view a copy of this License. If the interface presents a list of + user commands or options, such as a menu, a prominent item in the list + meets this criterion. + + 1. Source Code. + + The “source code” for a work means the preferred form of the work for + making modifications to it. “Object code” means any non-source form of a + work. + + A “Standard Interface” means an interface that either is an official + standard defined by a recognized standards body, or, in the case of + interfaces specified for a particular programming language, one that is + widely used among developers working in that language. The “System + Libraries” of an executable work include anything, other than the work as + a whole, that (a) is included in the normal form of packaging a Major + Component, but which is not part of that Major Component, and (b) serves + only to enable use of the work with that Major Component, or to implement + a Standard Interface for which an implementation is available to the + public in source code form. A “Major Component”, in this context, means a + major essential component (kernel, window system, and so on) of the + specific operating system (if any) on which the executable work runs, or + a compiler used to produce the work, or an object code interpreter used + to run it. + + The “Corresponding Source” for a work in object code form means all the + source code needed to generate, install, and (for an executable work) run + the object code and to modify the work, including scripts to control + those activities. However, it does not include the work's System + Libraries, or general-purpose tools or generally available free programs + which are used unmodified in performing those activities but which are + not part of the work. For example, Corresponding Source includes + interface definition files associated with source files for the work, and + the source code for shared libraries and dynamically linked subprograms + that the work is specifically designed to require, such as by intimate + data communication or control flow between those subprograms and other + parts of the work. + + The Corresponding Source need not include anything that users can + regenerate automatically from other parts of the Corresponding Source. + + The Corresponding Source for a work in source code form is that same work. + + 2. Basic Permissions. + + All rights granted under this License are granted for the term of + copyright on the Program, and are irrevocable provided the stated + conditions are met. This License explicitly affirms your unlimited + permission to run the unmodified Program, subject to section 13. The + output from running a covered work is covered by this License only if the + output, given its content, constitutes a covered work. This License + acknowledges your rights of fair use or other equivalent, as provided by + copyright law. Subject to section 13, you may make, run and propagate + covered works that you do not convey, without conditions so long as your + license otherwise remains in force. You may convey covered works to + others for the sole purpose of having them make modifications exclusively + for you, or provide you with facilities for running those works, provided + that you comply with the terms of this License in conveying all + material for which you do not control copyright. Those thus making or + running the covered works for you must do so exclusively on your + behalf, under your direction and control, on terms that prohibit them + from making any copies of your copyrighted material outside their + relationship with you. + + Conveying under any other circumstances is permitted solely under the + conditions stated below. Sublicensing is not allowed; section 10 makes it + unnecessary. + + 3. Protecting Users' Legal Rights From Anti-Circumvention Law. + + No covered work shall be deemed part of an effective technological + measure under any applicable law fulfilling obligations under article 11 + of the WIPO copyright treaty adopted on 20 December 1996, or similar laws + prohibiting or restricting circumvention of such measures. + + When you convey a covered work, you waive any legal power to forbid + circumvention of technological measures to the extent such circumvention is + effected by exercising rights under this License with respect to the + covered work, and you disclaim any intention to limit operation or + modification of the work as a means of enforcing, against the work's users, + your or third parties' legal rights to forbid circumvention of + technological measures. + + 4. Conveying Verbatim Copies. + + You may convey verbatim copies of the Program's source code as you + receive it, in any medium, provided that you conspicuously and + appropriately publish on each copy an appropriate copyright notice; keep + intact all notices stating that this License and any non-permissive terms + added in accord with section 7 apply to the code; keep intact all notices + of the absence of any warranty; and give all recipients a copy of this + License along with the Program. You may charge any price or no price for + each copy that you convey, and you may offer support or warranty + protection for a fee. + + 5. Conveying Modified Source Versions. + + You may convey a work based on the Program, or the modifications to + produce it from the Program, in the form of source code under the terms + of section 4, provided that you also meet all of these conditions: + + a) The work must carry prominent notices stating that you modified it, + and giving a relevant date. + + b) The work must carry prominent notices stating that it is released + under this License and any conditions added under section 7. This + requirement modifies the requirement in section 4 to “keep intact all + notices”. + + c) You must license the entire work, as a whole, under this License to + anyone who comes into possession of a copy. This License will therefore + apply, along with any applicable section 7 additional terms, to the + whole of the work, and all its parts, regardless of how they are + packaged. This License gives no permission to license the work in any + other way, but it does not invalidate such permission if you have + separately received it. + + d) If the work has interactive user interfaces, each must display + Appropriate Legal Notices; however, if the Program has interactive + interfaces that do not display Appropriate Legal Notices, your work + need not make them do so. + + A compilation of a covered work with other separate and independent + works, which are not by their nature extensions of the covered work, and + which are not combined with it such as to form a larger program, in or on + a volume of a storage or distribution medium, is called an “aggregate” if + the compilation and its resulting copyright are not used to limit the + access or legal rights of the compilation's users beyond what the + individual works permit. Inclusion of a covered work in an aggregate does + not cause this License to apply to the other parts of the aggregate. + + 6. Conveying Non-Source Forms. + + You may convey a covered work in object code form under the terms of + sections 4 and 5, provided that you also convey the machine-readable + Corresponding Source under the terms of this License, in one of these + ways: + + a) Convey the object code in, or embodied in, a physical product + (including a physical distribution medium), accompanied by the + Corresponding Source fixed on a durable physical medium customarily + used for software interchange. + + b) Convey the object code in, or embodied in, a physical product + (including a physical distribution medium), accompanied by a written + offer, valid for at least three years and valid for as long as you + offer spare parts or customer support for that product model, to give + anyone who possesses the object code either (1) a copy of the + Corresponding Source for all the software in the product that is + covered by this License, on a durable physical medium customarily used + for software interchange, for a price no more than your reasonable cost + of physically performing this conveying of source, or (2) access to + copy the Corresponding Source from a network server at no charge. + + c) Convey individual copies of the object code with a copy of the + written offer to provide the Corresponding Source. This alternative is + allowed only occasionally and noncommercially, and only if you received + the object code with such an offer, in accord with subsection 6b. + + d) Convey the object code by offering access from a designated place + (gratis or for a charge), and offer equivalent access to the + Corresponding Source in the same way through the same place at no + further charge. You need not require recipients to copy the + Corresponding Source along with the object code. If the place to copy + the object code is a network server, the Corresponding Source may be on + a different server (operated by you or a third party) that supports + equivalent copying facilities, provided you maintain clear directions + next to the object code saying where to find the Corresponding Source. + Regardless of what server hosts the Corresponding Source, you remain + obligated to ensure that it is available for as long as needed to + satisfy these requirements. + + e) Convey the object code using peer-to-peer transmission, provided you + inform other peers where the object code and Corresponding Source of + the work are being offered to the general public at no charge under + subsection 6d. + + A separable portion of the object code, whose source code is excluded + from the Corresponding Source as a System Library, need not be included + in conveying the object code work. + + A “User Product” is either (1) a “consumer product”, which means any + tangible personal property which is normally used for personal, family, + or household purposes, or (2) anything designed or sold for incorporation + into a dwelling. In determining whether a product is a consumer product, + doubtful cases shall be resolved in favor of coverage. For a particular + product received by a particular user, “normally used” refers to a + typical or common use of that class of product, regardless of the status + of the particular user or of the way in which the particular user + actually uses, or expects or is expected to use, the product. A product + is a consumer product regardless of whether the product has substantial + commercial, industrial or non-consumer uses, unless such uses represent + the only significant mode of use of the product. + + “Installation Information” for a User Product means any methods, + procedures, authorization keys, or other information required to install + and execute modified versions of a covered work in that User Product from + a modified version of its Corresponding Source. The information must + suffice to ensure that the continued functioning of the modified object + code is in no case prevented or interfered with solely because + modification has been made. + + If you convey an object code work under this section in, or with, or + specifically for use in, a User Product, and the conveying occurs as part + of a transaction in which the right of possession and use of the User + Product is transferred to the recipient in perpetuity or for a fixed term + (regardless of how the transaction is characterized), the Corresponding + Source conveyed under this section must be accompanied by the + Installation Information. But this requirement does not apply if neither + you nor any third party retains the ability to install modified object + code on the User Product (for example, the work has been installed in + ROM). + + The requirement to provide Installation Information does not include a + requirement to continue to provide support service, warranty, or updates + for a work that has been modified or installed by the recipient, or for + the User Product in which it has been modified or installed. Access + to a network may be denied when the modification itself materially + and adversely affects the operation of the network or violates the + rules and protocols for communication across the network. + + Corresponding Source conveyed, and Installation Information provided, in + accord with this section must be in a format that is publicly documented + (and with an implementation available to the public in source code form), + and must require no special password or key for unpacking, reading or + copying. + + 7. Additional Terms. + + “Additional permissions” are terms that supplement the terms of this + License by making exceptions from one or more of its conditions. + Additional permissions that are applicable to the entire Program shall be + treated as though they were included in this License, to the extent that + they are valid under applicable law. If additional permissions apply only + to part of the Program, that part may be used separately under those + permissions, but the entire Program remains governed by this License + without regard to the additional permissions. When you convey a copy of + a covered work, you may at your option remove any additional permissions + from that copy, or from any part of it. (Additional permissions may be + written to require their own removal in certain cases when you modify the + work.) You may place additional permissions on material, added by you to + a covered work, for which you have or can give appropriate copyright + permission. + + Notwithstanding any other provision of this License, for material you add + to a covered work, you may (if authorized by the copyright holders of + that material) supplement the terms of this License with terms: + + a) Disclaiming warranty or limiting liability differently from the + terms of sections 15 and 16 of this License; or + + b) Requiring preservation of specified reasonable legal notices or + author attributions in that material or in the Appropriate Legal + Notices displayed by works containing it; or + + c) Prohibiting misrepresentation of the origin of that material, or + requiring that modified versions of such material be marked in + reasonable ways as different from the original version; or + + d) Limiting the use for publicity purposes of names of licensors or + authors of the material; or + + e) Declining to grant rights under trademark law for use of some trade + names, trademarks, or service marks; or + + f) Requiring indemnification of licensors and authors of that material + by anyone who conveys the material (or modified versions of it) with + contractual assumptions of liability to the recipient, for any + liability that these contractual assumptions directly impose on those + licensors and authors. + + All other non-permissive additional terms are considered “further + restrictions” within the meaning of section 10. If the Program as you + received it, or any part of it, contains a notice stating that it is + governed by this License along with a term that is a further restriction, + you may remove that term. If a license document contains a further + restriction but permits relicensing or conveying under this License, you + may add to a covered work material governed by the terms of that license + document, provided that the further restriction does not survive such + relicensing or conveying. + + If you add terms to a covered work in accord with this section, you must + place, in the relevant source files, a statement of the additional terms + that apply to those files, or a notice indicating where to find the + applicable terms. Additional terms, permissive or non-permissive, may be + stated in the form of a separately written license, or stated as + exceptions; the above requirements apply either way. + + 8. Termination. + + You may not propagate or modify a covered work except as expressly + provided under this License. Any attempt otherwise to propagate or modify + it is void, and will automatically terminate your rights under this + License (including any patent licenses granted under the third paragraph + of section 11). + + However, if you cease all violation of this License, then your license + from a particular copyright holder is reinstated (a) provisionally, + unless and until the copyright holder explicitly and finally terminates + your license, and (b) permanently, if the copyright holder fails to + notify you of the violation by some reasonable means prior to 60 days + after the cessation. + + Moreover, your license from a particular copyright holder is reinstated + permanently if the copyright holder notifies you of the violation by some + reasonable means, this is the first time you have received notice of + violation of this License (for any work) from that copyright holder, and + you cure the violation prior to 30 days after your receipt of the notice. + + Termination of your rights under this section does not terminate the + licenses of parties who have received copies or rights from you under + this License. If your rights have been terminated and not permanently + reinstated, you do not qualify to receive new licenses for the same + material under section 10. + + 9. Acceptance Not Required for Having Copies. + + You are not required to accept this License in order to receive or run a + copy of the Program. Ancillary propagation of a covered work occurring + solely as a consequence of using peer-to-peer transmission to receive a + copy likewise does not require acceptance. However, nothing other than + this License grants you permission to propagate or modify any covered + work. These actions infringe copyright if you do not accept this License. + Therefore, by modifying or propagating a covered work, you indicate your + acceptance of this License to do so. + + 10. Automatic Licensing of Downstream Recipients. + + Each time you convey a covered work, the recipient automatically receives + a license from the original licensors, to run, modify and propagate that + work, subject to this License. You are not responsible for enforcing + compliance by third parties with this License. + + An “entity transaction” is a transaction transferring control of an + organization, or substantially all assets of one, or subdividing an + organization, or merging organizations. If propagation of a covered work + results from an entity transaction, each party to that transaction who + receives a copy of the work also receives whatever licenses to the work + the party's predecessor in interest had or could give under the previous + paragraph, plus a right to possession of the Corresponding Source of the + work from the predecessor in interest, if the predecessor has it or can + get it with reasonable efforts. + + You may not impose any further restrictions on the exercise of the rights + granted or affirmed under this License. For example, you may not impose a + license fee, royalty, or other charge for exercise of rights granted + under this License, and you may not initiate litigation (including a + cross-claim or counterclaim in a lawsuit) alleging that any patent claim + is infringed by making, using, selling, offering for sale, or importing + the Program or any portion of it. + + 11. Patents. + + A “contributor” is a copyright holder who authorizes use under this + License of the Program or a work on which the Program is based. The work + thus licensed is called the contributor's “contributor version”. + + A contributor's “essential patent claims” are all patent claims owned or + controlled by the contributor, whether already acquired or hereafter + acquired, that would be infringed by some manner, permitted by this + License, of making, using, or selling its contributor version, but do not + include claims that would be infringed only as a consequence of further + modification of the contributor version. For purposes of this definition, + “control” includes the right to grant patent sublicenses in a manner + consistent with the requirements of this License. + + Each contributor grants you a non-exclusive, worldwide, royalty-free + patent license under the contributor's essential patent claims, to make, + use, sell, offer for sale, import and otherwise run, modify and propagate + the contents of its contributor version. + + In the following three paragraphs, a “patent license” is any express + agreement or commitment, however denominated, not to enforce a patent + (such as an express permission to practice a patent or covenant not to + sue for patent infringement). To “grant” such a patent license to a party + means to make such an agreement or commitment not to enforce a patent + against the party. + + If you convey a covered work, knowingly relying on a patent license, and + the Corresponding Source of the work is not available for anyone to copy, + free of charge and under the terms of this License, through a publicly + available network server or other readily accessible means, then you must + either (1) cause the Corresponding Source to be so available, or (2) + arrange to deprive yourself of the benefit of the patent license for this + particular work, or (3) arrange, in a manner consistent with the + requirements of this License, to extend the patent license to downstream + recipients. “Knowingly relying” means you have actual knowledge that, but + for the patent license, your conveying the covered work in a country, or + your recipient's use of the covered work in a country, would infringe + one or more identifiable patents in that country that you have reason + to believe are valid. + + If, pursuant to or in connection with a single transaction or + arrangement, you convey, or propagate by procuring conveyance of, a + covered work, and grant a patent license to some of the parties receiving + the covered work authorizing them to use, propagate, modify or convey a + specific copy of the covered work, then the patent license you grant is + automatically extended to all recipients of the covered work and works + based on it. + + A patent license is “discriminatory” if it does not include within the + scope of its coverage, prohibits the exercise of, or is conditioned on + the non-exercise of one or more of the rights that are specifically + granted under this License. You may not convey a covered work if you are + a party to an arrangement with a third party that is in the business of + distributing software, under which you make payment to the third party + based on the extent of your activity of conveying the work, and under + which the third party grants, to any of the parties who would receive the + covered work from you, a discriminatory patent license (a) in connection + with copies of the covered work conveyed by you (or copies made from + those copies), or (b) primarily for and in connection with specific + products or compilations that contain the covered work, unless you + entered into that arrangement, or that patent license was granted, prior + to 28 March 2007. + + Nothing in this License shall be construed as excluding or limiting any + implied license or other defenses to infringement that may otherwise be + available to you under applicable patent law. + + 12. No Surrender of Others' Freedom. + + If conditions are imposed on you (whether by court order, agreement or + otherwise) that contradict the conditions of this License, they do not + excuse you from the conditions of this License. If you cannot use, + propagate or convey a covered work so as to satisfy simultaneously your + obligations under this License and any other pertinent obligations, then + as a consequence you may not use, propagate or convey it at all. For + example, if you agree to terms that obligate you to collect a royalty for + further conveying from those to whom you convey the Program, the only way + you could satisfy both those terms and this License would be to refrain + entirely from conveying the Program. + + 13. Offering the Program as a Service. + + If you make the functionality of the Program or a modified version + available to third parties as a service, you must make the Service Source + Code available via network download to everyone at no charge, under the + terms of this License. Making the functionality of the Program or + modified version available to third parties as a service includes, + without limitation, enabling third parties to interact with the + functionality of the Program or modified version remotely through a + computer network, offering a service the value of which entirely or + primarily derives from the value of the Program or modified version, or + offering a service that accomplishes for users the primary purpose of the + Program or modified version. + + “Service Source Code” means the Corresponding Source for the Program or + the modified version, and the Corresponding Source for all programs that + you use to make the Program or modified version available as a service, + including, without limitation, management software, user interfaces, + application program interfaces, automation software, monitoring software, + backup software, storage software and hosting software, all such that a + user could run an instance of the service using the Service Source Code + you make available. + + 14. Revised Versions of this License. + + MongoDB, Inc. may publish revised and/or new versions of the Server Side + Public License from time to time. Such new versions will be similar in + spirit to the present version, but may differ in detail to address new + problems or concerns. + + Each version is given a distinguishing version number. If the Program + specifies that a certain numbered version of the Server Side Public + License “or any later version” applies to it, you have the option of + following the terms and conditions either of that numbered version or of + any later version published by MongoDB, Inc. If the Program does not + specify a version number of the Server Side Public License, you may + choose any version ever published by MongoDB, Inc. + + If the Program specifies that a proxy can decide which future versions of + the Server Side Public License can be used, that proxy's public statement + of acceptance of a version permanently authorizes you to choose that + version for the Program. + + Later license versions may give you additional or different permissions. + However, no additional obligations are imposed on any author or copyright + holder as a result of your choosing to follow a later version. + + 15. Disclaimer of Warranty. + + THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY + APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT + HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY + OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, + THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR + PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM + IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF + ALL NECESSARY SERVICING, REPAIR OR CORRECTION. + + 16. Limitation of Liability. + + IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING + WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS + THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING + ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF + THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO + LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU + OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER + PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE + POSSIBILITY OF SUCH DAMAGES. + + 17. Interpretation of Sections 15 and 16. + + If the disclaimer of warranty and limitation of liability provided above + cannot be given local legal effect according to their terms, reviewing + courts shall apply local law that most closely approximates an absolute + waiver of all civil liability in connection with the Program, unless a + warranty or assumption of liability accompanies a copy of the Program in + return for a fee. + + END OF TERMS AND CONDITIONS diff --git a/packages/eui-theme-borealis/package.json b/packages/eui-theme-borealis/package.json new file mode 100644 index 00000000000..334c7aebe99 --- /dev/null +++ b/packages/eui-theme-borealis/package.json @@ -0,0 +1,78 @@ +{ + "name": "@elastic/eui-theme-borealis", + "version": "0.0.11", + "description": "A visual theme for EUI", + "license": "SEE LICENSE IN LICENSE.txt", + "scripts": { + "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-borealis --exclude @elastic/eui-theme-borealis run build", + "build:clean": "rimraf lib/", + "build": "yarn build:clean && yarn build:compile && yarn build:compile:cjs && yarn build:types && yarn copy-files", + "build:compile": "tsc --project ./tsconfig.json", + "build:compile:cjs": "NODE_ENV=production NO_COREJS_POLYFILL=true babel src --out-dir=lib/cjs --extensions .js,.ts,.tsx --source-maps=true", + "build:types": "NODE_ENV=production tsc --project tsconfig.types.json", + "build-pack": "yarn build && npm pack", + "copy-files": "node ./scripts/copy-json-files.js", + "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass", + "lint-es": "eslint --cache src/**/*.ts --max-warnings 0", + "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings", + "test": "jest ./src", + "pre-push": "yarn build:workspaces && yarn lint && yarn test" + }, + "repository": { + "type": "git", + "url": "https://github.com/elastic/eui.git", + "directory": "packages/eui-theme-borealis" + }, + "dependency": { + "chroma-js": "^2.4.2" + }, + "devDependencies": { + "@babel/cli": "^7.21.5", + "@babel/core": "^7.21.8", + "@babel/preset-env": "^7.21.5", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.5", + "@elastic/eui-theme-common": "workspace:^", + "@types/chroma-js": "^2.4.0", + "@types/jest": "^29.5.12", + "@types/prettier": "2.7.3", + "@typescript-eslint/eslint-plugin": "^5.59.7", + "@typescript-eslint/parser": "^5.59.7", + "eslint": "^8.41.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jest": "^28.5.0", + "eslint-plugin-local": "^1.0.0", + "eslint-plugin-prettier": "^4.2.1", + "jest": "^29.7.0", + "prettier": "^2.8.8", + "rimraf": "^6.0.1", + "stylelint": "^15.7.0", + "stylelint-config-prettier-scss": "^1.0.0", + "stylelint-config-standard": "^33.0.0", + "stylelint-config-standard-scss": "^9.0.0", + "typescript": "^5.6.2" + }, + "peerDependencies": { + "@elastic/eui-theme-common": "0.0.9" + }, + "main": "lib/cjs/index.js", + "exports": { + "./lib/*": "./lib/*", + ".": { + "require": "./lib/cjs/index.js", + "import": "./lib/esm/index.js", + "default": "./lib/cjs/index.js" + } + }, + "files": [ + "lib/", + "src/**/*.scss", + "README.md", + "licenses", + "!lib/**/*.tsbuildinfo" + ], + "installConfig": { + "hoistingLimits": "workspaces" + } +} diff --git a/packages/eui-theme-borealis/scripts/copy-json-files.js b/packages/eui-theme-borealis/scripts/copy-json-files.js new file mode 100644 index 00000000000..6129ccf8d9b --- /dev/null +++ b/packages/eui-theme-borealis/scripts/copy-json-files.js @@ -0,0 +1,40 @@ +const path = require('path'); +const util = require('util'); +const fs = require('fs'); +const copyFilePromise = util.promisify(fs.copyFile); + +const chalk = require('chalk'); + +const sourceDirectory = 'src'; +const destinationDirectory = 'lib'; + +async function copyJsonFiles() { + // Copy static legacy JSON token files from /src to /lib + const jsonFilesToCopy = [ + 'eui_theme_borealis_light.json', + 'eui_theme_borealis_dark.json', + 'eui_theme_borealis_light.json.d.ts', + 'eui_theme_borealis_dark.json.d.ts', + ]; + await Promise.all( + jsonFilesToCopy.map((fileName) => { + const source = path.join(sourceDirectory, fileName); + const destination = path.join(destinationDirectory, fileName); + + if (!fs.existsSync(destinationDirectory)) { + fs.mkdirSync(destinationDirectory); + } + + return copyFilePromise(source, destination, (err) => { + if (err) throw err; + console.log( + chalk`{green ✔} Finished copying {gray ${source}} to {gray ${destination}}` + ); + }); + }) + ); +} + +if (require.main === module) { + copyJsonFiles(); +} diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json new file mode 100644 index 00000000000..3f37ab6151b --- /dev/null +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -0,0 +1,422 @@ +{ + "euiZDataGrid": 999, + "euiZHeaderBelowDataGrid": 998, + "euiZDataGridCellPopover": 1000, + "euiDataGridCellPaddingS": "4px", + "euiDataGridCellPaddingM": "6px", + "euiDataGridCellPaddingL": "8px", + "euiTableHoverColor": "rgba(255, 255, 255, 0.06)", + "euiTableSelectedColor": "#243147", + "euiTableHoverSelectedColor": "rgba(255, 255, 255, 0.06)", + "euiTableActionsBorderColor": "#2B394F", + "euiTableHoverClickableColor": "rgba(255, 255, 255, 0.06)", + "euiTableFocusClickableColor": "rgba(255, 255, 255, 0.06)", + "euiContrastRatioText": 4.5, + "euiContrastRatioGraphic": 3, + "euiContrastRatioDisabled": 2, + "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", + "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", + "euiAnimSpeedExtraFast": "90ms", + "euiAnimSpeedFast": "150ms", + "euiAnimSpeedNormal": "250ms", + "euiAnimSpeedSlow": "350ms", + "euiAnimSpeedExtraSlow": "500ms", + "euiBorderWidthThin": "1px", + "euiBorderWidthThick": "2px", + "euiBorderColor": "#2B394F", + "euiBorderRadius": "6px", + "euiBorderRadiusSmall": "4px", + "euiBorderThick": "2px solid #2B394F", + "euiBorderThin": "1px solid #2B394F", + "euiBorderEditable": "2px dotted #2B394F", + "euiButtonHeight": "40px", + "euiButtonHeightSmall": "32px", + "euiButtonHeightXSmall": "24px", + "euiButtonColorDisabled": "#1D2A3E", + "euiButtonColorDisabledText": "#6A7FA0", + "euiButtonColorGhostDisabled": "#1D2A3E", + "euiButtonTypes": { + "primary": "#61A2FF", + "accent": "#EE72A6", + "accentSecondary": "#16C5C0", + "success": "#24C292", + "warning": "#FACB3D", + "danger": "#F6726A", + "ghost": "#07101F", + "text": "#8E9FBC" + }, + "euiFontWeightLight": 300, + "euiFontWeightRegular": 400, + "euiFontWeightMedium": 450, + "euiFontWeightSemiBold": 500, + "euiFontWeightBold": 600, + "euiCodeFontWeightRegular": 400, + "euiCodeFontWeightBold": 600, + "euiFormMaxWidth": "400px", + "euiFormControlHeight": "40px", + "euiFormControlCompressedHeight": "32px", + "euiFormControlPadding": "12px", + "euiFormControlCompressedPadding": "8px", + "euiFormControlBorderRadius": "6px", + "euiFormControlCompressedBorderRadius": "4px", + "euiRadioSize": "16px", + "euiCheckBoxSize": "16px", + "euiCheckboxBorderRadius": "4px", + "euiSwitchHeight": "20px", + "euiSwitchWidth": "44px", + "euiSwitchThumbSize": "20px", + "euiSwitchIconHeight": "16px", + "euiSwitchHeightCompressed": "16px", + "euiSwitchWidthCompressed": "28px", + "euiSwitchThumbSizeCompressed": "16px", + "euiSwitchHeightMini": "10px", + "euiSwitchWidthMini": "22px", + "euiSwitchThumbSizeMini": "10px", + "euiFormBackgroundColor": "#07101F", + "euiFormBackgroundDisabledColor": "#1D2A3E", + "euiFormBackgroundReadOnlyColor": "#0B1628", + "euiFormBorderOpaqueColor": "#5054af", + "euiFormBorderColor": "#485975", + "euiFormBorderDisabledColor": "#485975", + "euiFormCustomControlDisabledIconColor": "#6A7FA0", + "euiFormCustomControlBorderColor": "#485975", + "euiFormControlDisabledColor": "#485975", + "euiFormControlBoxShadow": "0 0 rgba(0, 0, 0, 0)", + "euiFormControlPlaceholderText": "#8E9FBC", + "euiFormInputGroupLabelBackground": "#243147", + "euiFormInputGroupBorder": "none", + "euiSwitchOffColor": "#8E9FBC", + "euiFormControlIconSizes": { + "small": "12px", + "medium": "16px", + "large": "24px", + "xLarge": "32px", + "xxLarge": "40px" + }, + "euiFormControlLayoutGroupInputHeight": "38px", + "euiFormControlLayoutGroupInputCompressedHeight": "30px", + "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px", + "euiHeaderBackgroundColor": "#0B1628", + "euiHeaderDarkBackgroundColor": "#0B1628", + "euiHeaderBorderColor": "#2B394F", + "euiHeaderBreadcrumbColor": "#0D2F5E", + "euiHeaderHeight": "48px", + "euiHeaderChildSize": "40px", + "euiHeaderHeightCompensation": "48px", + "euiPageDefaultMaxWidth": "1200px", + "euiPageSidebarMinWidth": "192px", + "euiPanelPaddingModifiers": { + "paddingSmall": "8px", + "paddingMedium": "16px", + "paddingLarge": "24px" + }, + "euiPanelBorderRadiusModifiers": { + "borderRadiusNone": 0, + "borderRadiusMedium": "6px" + }, + "euiPanelBackgroundColorModifiers": { + "transparent": "rgba(0, 0, 0, 0)", + "plain": "#0B1628", + "subdued": "#07101F", + "accent": "#351725", + "accentSecondary": "#03282B", + "primary": "#0A2342", + "success": "#092A26", + "warning": "#2C2721", + "danger": "#351721" + }, + "euiBreakpoints": { + "xs": 0, + "s": "575px", + "m": "768px", + "l": "992px", + "xl": "1200px" + }, + "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", + "euiShadowColor": "#000000", + "euiSize": "16px", + "euiSizeXS": "4px", + "euiSizeS": "8px", + "euiSizeM": "12px", + "euiSizeL": "24px", + "euiSizeXL": "32px", + "euiSizeXXL": "40px", + "euiScrollBar": "16px", + "euiScrollBarCorner": "4px", + "euiScrollBarCornerThin": "6px", + "euiFocusRingColor": "#61A2FF", + "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", + "euiFocusRingAnimStartSize": "2px", + "euiFocusRingAnimStartSizeLarge": "10px", + "euiFocusRingSizeLarge": "4px", + "euiFocusRingSize": "2px", + "euiFocusTransparency": 0.8, + "euiFocusTransparencyPercent": "80%", + "euiFocusBackgroundColor": "#243147", + "euiFontFamily": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", + "euiFontFeatureSettings": "calt 1 kern 1 liga 1", + "euiTextScale": "1,875, 1.5, 1.25, 1, .875, .75", + "euiFontSize": "14px", + "euiFontSizeXS": "12px", + "euiFontSizeS": "14px", + "euiFontSizeM": "16px", + "euiFontSizeL": "20px", + "euiFontSizeXL": "24px", + "euiFontSizeXXL": "30px", + "euiLineHeight": 1.5, + "euiBodyLineHeight": 1.142857143, + "euiTitles": { + "xxxs": { + "font-size": "12px", + "line-height": "1.1429rem", + "font-weight": 600 + }, + "xxs": { + "font-size": "14px", + "line-height": "1.4286rem", + "font-weight": 600 + }, + "xs": { + "font-size": "16px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "s": { + "font-size": "20px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "m": { + "font-size": "24px", + "line-height": "2rem", + "font-weight": 600 + }, + "l": { + "font-size": "30px", + "line-height": "2.5714rem", + "font-weight": 600 + } + }, + "euiZLevel0": 0, + "euiZLevel1": 1000, + "euiZLevel2": 2000, + "euiZLevel3": 3000, + "euiZLevel4": 4000, + "euiZLevel5": 5000, + "euiZLevel6": 6000, + "euiZLevel7": 7000, + "euiZLevel8": 8000, + "euiZLevel9": 9000, + "euiZToastList": 9000, + "euiZModal": 8000, + "euiZMask": 6000, + "euiZNavigation": 6000, + "euiZContentMenu": 2000, + "euiZHeader": 1000, + "euiZFlyout": 1000, + "euiZMaskBelowHeader": 1000, + "euiZContent": 0, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#16C5C0", + "behindText": "#16C5C0" + }, + "euiColorVis1": { + "graphic": "#A6EDEA", + "behindText": "#A6EDEA" + }, + "euiColorVis2": { + "graphic": "#61A2FF", + "behindText": "#61A2FF" + }, + "euiColorVis3": { + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" + }, + "euiColorVis4": { + "graphic": "#EE72A6", + "behindText": "#EE72A6" + }, + "euiColorVis5": { + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" + }, + "euiColorVis6": { + "graphic": "#F6726A", + "behindText": "#F6726A" + }, + "euiColorVis7": { + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" + }, + "euiColorVis8": { + "graphic": "#EAAE01", + "behindText": "#EAAE01" + }, + "euiColorVis9": { + "graphic": "#FCD883", + "behindText": "#FCD883" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", + "euiColorVis3_behindText": "#BFDBFF", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", + "euiColorVisAsTextLight0": "#047471", + "euiColorVisAsTextLight1": "#1750BA", + "euiColorVisAsTextLight2": "#A11262", + "euiColorVisAsTextLight3": "#A71627", + "euiColorVisAsTextLight4": "#825803", + "euiColorVisAsTextLight5": "#09724D", + "euiColorVisAsTextLight6": "#6B3C9F", + "euiColorVisAsTextDark0": "#16C5C0", + "euiColorVisAsTextDark1": "#61A2FF", + "euiColorVisAsTextDark2": "#EE72A6", + "euiColorVisAsTextDark3": "#F6726A", + "euiColorVisAsTextDark4": "#EAAE01", + "euiColorVisAsTextDark5": "#24C292", + "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisSuccess0": "#24C292", + "euiColorVisSuccess1": "#AEE8D2", + "euiColorVisWarning0": "#FCD883", + "euiColorVisDanger0": "#F6726A", + "euiColorVisDanger1": "#FFC9C2", + "euiColorVisNeutral0": "#F6F9FC", + "euiColorSeverity0": "#E3E6EB", + "euiColorSeverity1": "#5A6D8C", + "euiColorSeverity2": "#7186A8", + "euiColorSeverity3": "#8E9FBC", + "euiColorSeverity4": "#ABB9D0", + "euiColorSeverity5": "#CAD3E2", + "euiColorSeverity6": "#FDE9B5", + "euiColorSeverity7": "#FCD883", + "euiColorSeverity8": "#FFC9C2", + "euiColorSeverity9": "#FFB5AD", + "euiColorSeverity10": "#FC9188", + "euiColorSeverity11": "#F6726A", + "euiColorSeverity12": "#EE4C48", + "euiColorSeverity13": "#DA3737", + "euiColorSeverity14": "#C61E25", + "euiColorVisGrey0": "#CAD3E2", + "euiColorVisGrey1": "#8E9FBC", + "euiColorVisGrey2": "#5A6D8C", + "euiColorVisGrey3": "#1D2A3E", + "euiColorVisWarm0": "#FFE8E5", + "euiColorVisWarm1": "#FFB5AD", + "euiColorVisWarm2": "#F6726A", + "euiColorVisCool0": "#E8F1FF", + "euiColorVisCool1": "#A3CBFF", + "euiColorVisCool2": "#61A2FF", + "euiColorVisComplementary0": "#61A2FF", + "euiColorVisComplementary1": "#EAAE01", + "euiColorChartLines": "#7186A8", + "euiColorChartBand": "#243147", + "euiColorGhost": "#FFFFFF", + "euiColorInk": "#000000", + "euiColorPrimary": "#61A2FF", + "euiColorAccent": "#EE72A6", + "euiColorAccentSecondary": "#16C5C0", + "euiColorSuccess": "#24C292", + "euiColorWarning": "#FACB3D", + "euiColorDanger": "#F6726A", + "euiColorEmptyShade": "#0B1628", + "euiColorLightestShade": "#172336", + "euiColorLightShade": "#243147", + "euiColorMediumShade": "#516381", + "euiColorDarkShade": "#7186A8", + "euiColorDarkestShade": "#CAD3E2", + "euiColorFullShade": "#FFFFFF", + "euiPageBackgroundColor": "#07101F", + "euiColorHighlight": "#1750BA", + "euiTextColor": "#CAD3E2", + "euiTitleColor": "#E3E8F2", + "euiTextSubduedColor": "#8E9FBC", + "euiColorDisabled": "#1D2A3E", + "euiColorPrimaryText": "#61A2FF", + "euiColorSuccessText": "#24C292", + "euiColorAccentText": "#EE72A6", + "euiColorWarningText": "#FCD883", + "euiColorDangerText": "#F6726A", + "euiColorDisabledText": "#6A7FA0", + "euiLinkColor": "#61A2FF", + "euiColorPlainLight": "#FFFFFF", + "euiColorPlainDark": "#07101F", + "euiColorTextPrimary": "#61A2FF", + "euiColorTextAccent": "#EE72A6", + "euiColorTextAccentSecondary": "#16C5C0", + "euiColorTextSuccess": "#24C292", + "euiColorTextWarning": "#FCD883", + "euiColorTextDanger": "#F6726A", + "euiColorTextParagraph": "#CAD3E2", + "euiColorTextHeading": "#E3E8F2", + "euiColorTextSubdued": "#8E9FBC", + "euiColorTextDisabled": "#6A7FA0", + "euiColorTextInverse": "#07101F", + "euiColorBackgroundBasePrimary": "#0A2342", + "euiColorBackgroundBaseAccent": "#351725", + "euiColorBackgroundBaseAccentSecondary": "#03282B", + "euiColorBackgroundBaseSuccess": "#092A26", + "euiColorBackgroundBaseWarning": "#2C2721", + "euiColorBackgroundBaseDanger": "#351721", + "euiColorBackgroundBaseSubdued": "#07101F", + "euiColorBackgroundBasePlain": "#0B1628", + "euiColorBackgroundBaseDisabled": "#1D2A3E", + "euiColorBackgroundBaseHighlighted": "#172336", + "euiColorBackgroundBaseFormsPrepend": "#243147", + "euiColorBackgroundBaseFormsControlDisabled": "#2B394F", + "euiColorBackgroundBaseInteractiveHover": "rgba(255,255,255, 0.08)", + "euiColorBackgroundBaseInteractiveSelect": "#0D2F5E", + "euiColorBackgroundBaseInteractiveOverlay": "rgba(43,57,79, 0.7)", + "euiColorBackgroundBaseSkeletonEdge": "rgba(255,255,255, 0.16)", + "euiColorBackgroundBaseSkeletonMiddle": "rgba(255,255,255, 0.08)", + "euiColorBackgroundLightPrimary": "#0D2F5E", + "euiColorBackgroundLightAccent": "#481E32", + "euiColorBackgroundLightAccentSecondary": "#023436", + "euiColorBackgroundLightSuccess": "#0D362B", + "euiColorBackgroundLightWarning": "#3D3014", + "euiColorBackgroundLightDanger": "#491D27", + "euiColorBackgroundLightText": "#1D2A3E", + "euiColorBackgroundFilledPrimary": "#61A2FF", + "euiColorBackgroundFilledAccent": "#EE72A6", + "euiColorBackgroundFilledAccentSecondary": "#16C5C0", + "euiColorBackgroundFilledSuccess": "#24C292", + "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledDanger": "#F6726A", + "euiColorBackgroundFilledText": "#8E9FBC", + "euiColorBorderBasePrimary": "#123778", + "euiColorBorderBaseAccent": "#5E2140", + "euiColorBorderBaseAccentSecondary": "#044949", + "euiColorBorderBaseSuccess": "#094837", + "euiColorBorderBaseWarning": "#513910", + "euiColorBorderBaseDanger": "#5E2129", + "euiColorBorderBasePlain": "#485975", + "euiColorBorderBaseSubdued": "#2B394F", + "euiColorBorderBaseDisabled": "#485975", + "euiColorBorderBaseFloating": "#2B394F", + "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)", + "euiColorBorderBaseFormsControl": "#6A7FA0", + "euiColorBorderStrongPrimary": "#61A2FF", + "euiColorBorderStrongAccent": "#EE72A6", + "euiColorBorderStrongAccentSecondary": "#16C5C0", + "euiColorBorderStrongSuccess": "#24C292", + "euiColorBorderStrongWarning": "#FACB3D", + "euiColorBorderStrongDanger": "#F6726A" +} 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 new file mode 100644 index 00000000000..8309584d8e5 --- /dev/null +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts @@ -0,0 +1,425 @@ +declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { + const sassVariables: { + euiZDataGrid: number; + euiZHeaderBelowDataGrid: number; + euiZDataGridCellPopover: number; + euiDataGridCellPaddingS: string; + euiDataGridCellPaddingM: string; + euiDataGridCellPaddingL: string; + euiTableHoverColor: string; + euiTableSelectedColor: string; + euiTableHoverSelectedColor: string; + euiTableActionsBorderColor: string; + euiTableHoverClickableColor: string; + euiTableFocusClickableColor: string; + euiContrastRatioText: number; + euiContrastRatioGraphic: number; + euiContrastRatioDisabled: number; + euiAnimSlightBounce: string; + euiAnimSlightResistance: string; + euiAnimSpeedExtraFast: string; + euiAnimSpeedFast: string; + euiAnimSpeedNormal: string; + euiAnimSpeedSlow: string; + euiAnimSpeedExtraSlow: string; + euiBorderWidthThin: string; + euiBorderWidthThick: string; + euiBorderColor: string; + euiBorderRadius: string; + euiBorderRadiusSmall: string; + euiBorderThick: string; + euiBorderThin: string; + euiBorderEditable: string; + euiButtonHeight: string; + euiButtonHeightSmall: string; + euiButtonHeightXSmall: string; + euiButtonColorDisabled: string; + euiButtonColorDisabledText: string; + euiButtonColorGhostDisabled: string; + euiButtonTypes: { + primary: string; + accent: string; + accentSecondary: string; + success: string; + warning: string; + danger: string; + ghost: string; + text: string; + }; + euiFontWeightLight: number; + euiFontWeightRegular: number; + euiFontWeightMedium: number; + euiFontWeightSemiBold: number; + euiFontWeightBold: number; + euiCodeFontWeightRegular: number; + euiCodeFontWeightBold: number; + euiFormMaxWidth: string; + euiFormControlHeight: string; + euiFormControlCompressedHeight: string; + euiFormControlPadding: string; + euiFormControlCompressedPadding: string; + euiFormControlBorderRadius: string; + euiFormControlCompressedBorderRadius: string; + euiRadioSize: string; + euiCheckBoxSize: string; + euiCheckboxBorderRadius: string; + euiSwitchHeight: string; + euiSwitchWidth: string; + euiSwitchThumbSize: string; + euiSwitchIconHeight: string; + euiSwitchHeightCompressed: string; + euiSwitchWidthCompressed: string; + euiSwitchThumbSizeCompressed: string; + euiSwitchHeightMini: string; + euiSwitchWidthMini: string; + euiSwitchThumbSizeMini: string; + euiFormBackgroundColor: string; + euiFormBackgroundDisabledColor: string; + euiFormBackgroundReadOnlyColor: string; + euiFormBorderOpaqueColor: string; + euiFormBorderColor: string; + euiFormBorderDisabledColor: string; + euiFormCustomControlDisabledIconColor: string; + euiFormCustomControlBorderColor: string; + euiFormControlDisabledColor: string; + euiFormControlBoxShadow: string; + euiFormControlPlaceholderText: string; + euiFormInputGroupLabelBackground: string; + euiFormInputGroupBorder: string; + euiSwitchOffColor: string; + euiFormControlIconSizes: { + small: string; + medium: string; + large: string; + xLarge: string; + xxLarge: string; + }; + euiFormControlLayoutGroupInputHeight: string; + euiFormControlLayoutGroupInputCompressedHeight: string; + euiFormControlLayoutGroupInputCompressedBorderRadius: string; + euiHeaderBackgroundColor: string; + euiHeaderDarkBackgroundColor: string; + euiHeaderBorderColor: string; + euiHeaderBreadcrumbColor: string; + euiHeaderHeight: string; + euiHeaderChildSize: string; + euiHeaderHeightCompensation: string; + euiPageDefaultMaxWidth: string; + euiPageSidebarMinWidth: string; + euiPanelPaddingModifiers: { + paddingSmall: string; + paddingMedium: string; + paddingLarge: string; + }; + euiPanelBorderRadiusModifiers: { + borderRadiusNone: number; + borderRadiusMedium: string; + }; + euiPanelBackgroundColorModifiers: { + transparent: string; + plain: string; + subdued: string; + accent: string; + accentSecondary: string; + primary: string; + success: string; + warning: string; + danger: string; + }; + euiBreakpoints: { + xs: number; + s: string; + m: string; + l: string; + xl: string; + }; + euiBreakpointKeys: string; + euiShadowColor: string; + euiSize: string; + euiSizeXS: string; + euiSizeS: string; + euiSizeM: string; + euiSizeL: string; + euiSizeXL: string; + euiSizeXXL: string; + euiScrollBar: string; + euiScrollBarCorner: string; + euiScrollBarCornerThin: string; + euiFocusRingColor: string; + euiFocusRingAnimStartColor: string; + euiFocusRingAnimStartSize: string; + euiFocusRingAnimStartSizeLarge: string; + euiFocusRingSizeLarge: string; + euiFocusRingSize: string; + euiFocusTransparency: number; + euiFocusTransparencyPercent: string; + euiFocusBackgroundColor: string; + euiFontFamily: string; + euiCodeFontFamily: string; + euiFontFeatureSettings: string; + euiTextScale: string; + euiFontSize: string; + euiFontSizeXS: string; + euiFontSizeS: string; + euiFontSizeM: string; + euiFontSizeL: string; + euiFontSizeXL: string; + euiFontSizeXXL: string; + euiLineHeight: number; + euiBodyLineHeight: number; + euiTitles: { + xxxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + s: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + m: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + l: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + }; + euiZLevel0: number; + euiZLevel1: number; + euiZLevel2: number; + euiZLevel3: number; + euiZLevel4: number; + euiZLevel5: number; + euiZLevel6: number; + euiZLevel7: number; + euiZLevel8: number; + euiZLevel9: number; + euiZToastList: number; + euiZModal: number; + euiZMask: number; + euiZNavigation: number; + euiZContentMenu: number; + euiZHeader: number; + euiZFlyout: number; + euiZMaskBelowHeader: number; + euiZContent: number; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiColorVisAsTextLight0: string; + euiColorVisAsTextLight1: string; + euiColorVisAsTextLight2: string; + euiColorVisAsTextLight3: string; + euiColorVisAsTextLight4: string; + euiColorVisAsTextLight5: string; + euiColorVisAsTextLight6: string; + euiColorVisAsTextDark0: string; + euiColorVisAsTextDark1: string; + euiColorVisAsTextDark2: string; + euiColorVisAsTextDark3: string; + euiColorVisAsTextDark4: string; + euiColorVisAsTextDark5: string; + euiColorVisAsTextDark6: string; + euiColorVisSuccess0: string; + euiColorVisSuccess1: string; + euiColorVisWarning0: string; + euiColorVisDanger0: string; + euiColorVisDanger1: string; + euiColorVisNeutral0: string; + euiColorVisGrey0: string; + euiColorVisGrey1: string; + euiColorVisGrey2: string; + euiColorVisGrey3: string; + euiColorVisWarm0: string; + euiColorVisWarm1: string; + euiColorVisWarm2: string; + euiColorVisCool0: string; + euiColorVisCool1: string; + euiColorVisCool2: string; + euiColorVisComplementary0: string; + euiColorVisComplementary1: string; + euiColorSeverity0: string; + euiColorSeverity1: string; + euiColorSeverity2: string; + euiColorSeverity3: string; + euiColorSeverity4: string; + euiColorSeverity5: string; + euiColorSeverity6: string; + euiColorSeverity7: string; + euiColorSeverity8: string; + euiColorSeverity9: string; + euiColorSeverity10: string; + euiColorSeverity11: string; + euiColorSeverity12: string; + euiColorSeverity13: string; + euiColorSeverity14: string; + euiColorChartLines: string; + euiColorChartBand: string; + euiColorGhost: string; + euiColorInk: string; + euiColorPrimary: string; + euiColorAccent: string; + euiColorAccentSecondary: string; + euiColorSuccess: string; + euiColorWarning: string; + euiColorDanger: string; + euiColorEmptyShade: string; + euiColorLightestShade: string; + euiColorLightShade: string; + euiColorMediumShade: string; + euiColorDarkShade: string; + euiColorDarkestShade: string; + euiColorFullShade: string; + euiPageBackgroundColor: string; + euiColorHighlight: string; + euiTextColor: string; + euiTitleColor: string; + euiTextSubduedColor: string; + euiColorDisabled: string; + euiColorPrimaryText: string; + euiColorSuccessText: string; + euiColorAccentText: string; + euiColorWarningText: string; + euiColorDangerText: string; + euiColorDisabledText: string; + euiLinkColor: string; + euiColorPlainLight: string; + euiColorPlainDark: string; + euiColorTextPrimary: string; + euiColorTextAccent: string; + euiColorTextAccentSecondary: string; + euiColorTextSuccess: string; + euiColorTextWarning: string; + euiColorTextDanger: string; + euiColorTextParagraph: string; + euiColorTextHeading: string; + euiColorTextSubdued: string; + euiColorTextDisabled: string; + euiColorTextInverse: string; + euiColorBackgroundBasePrimary: string; + euiColorBackgroundBaseAccent: string; + euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseSuccess: string; + euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseDanger: string; + euiColorBackgroundBaseSubdued: string; + euiColorBackgroundBasePlain: string; + euiColorBackgroundBaseDisabled: string; + euiColorBackgroundBaseHighlighted: string; + euiColorBackgroundBaseFormsPrepend: string; + euiColorBackgroundBaseFormsControlDisabled: string; + euiColorBackgroundBaseInteractiveHover: string; + euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveOverlay: string; + euiColorBackgroundBaseSkeletonEdge: string; + euiColorBackgroundBaseSkeletonMiddle: string; + euiColorBackgroundLightPrimary: string; + euiColorBackgroundLightAccent: string; + euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightSuccess: string; + euiColorBackgroundLightWarning: string; + euiColorBackgroundLightDanger: string; + euiColorBackgroundLightText: string; + euiColorBackgroundFilledPrimary: string; + euiColorBackgroundFilledAccent: string; + euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledSuccess: string; + euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledDanger: string; + euiColorBackgroundFilledText: string; + euiColorBorderBasePrimary: string; + euiColorBorderBaseAccent: string; + euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseSuccess: string; + euiColorBorderBaseWarning: string; + euiColorBorderBaseDanger: string; + euiColorBorderBasePlain: string; + euiColorBorderBaseSubdued: string; + euiColorBorderBaseDisabled: string; + euiColorBorderBaseFloating: string; + euiColorBorderBaseFormsColorSwatch: string; + euiColorBorderBaseFormsControl: string; + euiColorBorderStrongPrimary: string; + euiColorBorderStrongAccent: string; + euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongSuccess: string; + euiColorBorderStrongWarning: string; + euiColorBorderStrongDanger: string; + }; + export default sassVariables; +} diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json new file mode 100644 index 00000000000..6285c91ec37 --- /dev/null +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -0,0 +1,422 @@ +{ + "euiZDataGrid": 999, + "euiZHeaderBelowDataGrid": 998, + "euiZDataGridCellPopover": 1000, + "euiDataGridCellPaddingS": "4px", + "euiDataGridCellPaddingM": "6px", + "euiDataGridCellPaddingL": "8px", + "euiTableHoverColor": "rgba(54, 95, 178, 0.06)", + "euiTableSelectedColor": "#EDEFF3", + "euiTableHoverSelectedColor": "rgba(54, 95, 178, 0.06)", + "euiTableActionsBorderColor": "#E3E8F2", + "euiTableHoverClickableColor": "rgba(54, 95, 178, 0.06)", + "euiTableFocusClickableColor": "rgba(54, 95, 178, 0.06)", + "euiContrastRatioText": 4.5, + "euiContrastRatioGraphic": 3, + "euiContrastRatioDisabled": 2, + "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", + "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", + "euiAnimSpeedExtraFast": "90ms", + "euiAnimSpeedFast": "150ms", + "euiAnimSpeedNormal": "250ms", + "euiAnimSpeedSlow": "350ms", + "euiAnimSpeedExtraSlow": "500ms", + "euiBorderWidthThin": "1px", + "euiBorderWidthThick": "2px", + "euiBorderColor": "#E3E8F2", + "euiBorderRadius": "6px", + "euiBorderRadiusSmall": "4px", + "euiBorderThick": "2px solid #E3E8F2", + "euiBorderThin": "1px solid #E3E8F2", + "euiBorderEditable": "2px dotted #E3E8F2", + "euiButtonHeight": "40px", + "euiButtonHeightSmall": "32px", + "euiButtonHeightXSmall": "24px", + "euiButtonColorDisabled": "#ECF1F9", + "euiButtonColorDisabledText": "#798EAF", + "euiButtonColorGhostDisabled": "#ECF1F9", + "euiButtonTypes": { + "primary": "#0B64DD", + "accent": "#BC1E70", + "accentSecondary": "#008B87", + "success": "#008A5E", + "warning": "#FACB3D", + "danger": "#C61E25", + "ghost": "#ffffff", + "text": "#5A6D8C" + }, + "euiFontWeightLight": 300, + "euiFontWeightRegular": 400, + "euiFontWeightMedium": 450, + "euiFontWeightSemiBold": 500, + "euiFontWeightBold": 600, + "euiCodeFontWeightRegular": 400, + "euiCodeFontWeightBold": 600, + "euiFormMaxWidth": "400px", + "euiFormControlHeight": "40px", + "euiFormControlCompressedHeight": "32px", + "euiFormControlPadding": "12px", + "euiFormControlCompressedPadding": "8px", + "euiFormControlBorderRadius": "6px", + "euiFormControlCompressedBorderRadius": "4px", + "euiRadioSize": "16px", + "euiCheckBoxSize": "16px", + "euiCheckboxBorderRadius": "4px", + "euiSwitchHeight": "20px", + "euiSwitchWidth": "44px", + "euiSwitchThumbSize": "20px", + "euiSwitchIconHeight": "16px", + "euiSwitchHeightCompressed": "16px", + "euiSwitchWidthCompressed": "28px", + "euiSwitchThumbSizeCompressed": "16px", + "euiSwitchHeightMini": "10px", + "euiSwitchWidthMini": "22px", + "euiSwitchThumbSizeMini": "10px", + "euiFormBackgroundColor": "#F6F9FC", + "euiFormBackgroundDisabledColor": "#ECF1F9", + "euiFormBackgroundReadOnlyColor": "#FFFFFF", + "euiFormBorderOpaqueColor": "#1c2390", + "euiFormBorderColor": "#CAD3E2", + "euiFormBorderDisabledColor": "#CAD3E2", + "euiFormCustomControlDisabledIconColor": "#798EAF", + "euiFormCustomControlBorderColor": "#CAD3E2", + "euiFormControlDisabledColor": "#CAD3E2", + "euiFormControlBoxShadow": "0 0 rgba(0, 0, 0, 0)", + "euiFormControlPlaceholderText": "#5A6D8C", + "euiFormInputGroupLabelBackground": "#ECF1F9", + "euiFormInputGroupBorder": "none", + "euiSwitchOffColor": "#5A6D8C", + "euiFormControlIconSizes": { + "small": "12px", + "medium": "16px", + "large": "24px", + "xLarge": "32px", + "xxLarge": "40px" + }, + "euiFormControlLayoutGroupInputHeight": "38px", + "euiFormControlLayoutGroupInputCompressedHeight": "30px", + "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px", + "euiHeaderBackgroundColor": "#FFFFFF", + "euiHeaderDarkBackgroundColor": "#0B1628", + "euiHeaderBorderColor": "#E3E8F2", + "euiHeaderBreadcrumbColor": "#D9E8FF", + "euiHeaderHeight": "48px", + "euiHeaderChildSize": "40px", + "euiHeaderHeightCompensation": "48px", + "euiPageDefaultMaxWidth": "1200px", + "euiPageSidebarMinWidth": "192px", + "euiPanelPaddingModifiers": { + "paddingSmall": "8px", + "paddingMedium": "16px", + "paddingLarge": "24px" + }, + "euiPanelBorderRadiusModifiers": { + "borderRadiusNone": 0, + "borderRadiusMedium": "6px" + }, + "euiPanelBackgroundColorModifiers": { + "transparent": "rgba(0, 0, 0, 0)", + "plain": "#FFFFFF", + "subdued": "#F6F9FC", + "accent": "#FFEBF5", + "accentSecondary": "#E2F9F7", + "primary": "#E8F1FF", + "success": "#E2F8F0", + "warning": "#FDF3D8", + "danger": "#FFE8E5" + }, + "euiBreakpoints": { + "xs": 0, + "s": "575px", + "m": "768px", + "l": "992px", + "xl": "1200px" + }, + "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", + "euiShadowColor": "#000000", + "euiSize": "16px", + "euiSizeXS": "4px", + "euiSizeS": "8px", + "euiSizeM": "12px", + "euiSizeL": "24px", + "euiSizeXL": "32px", + "euiSizeXXL": "40px", + "euiScrollBar": "16px", + "euiScrollBarCorner": "4px", + "euiScrollBarCornerThin": "6px", + "euiFocusRingColor": "#1750BA", + "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", + "euiFocusRingAnimStartSize": "2px", + "euiFocusRingAnimStartSizeLarge": "10px", + "euiFocusRingSizeLarge": "4px", + "euiFocusRingSize": "2px", + "euiFocusTransparency": 0.9, + "euiFocusTransparencyPercent": "90%", + "euiFocusBackgroundColor": "#ECF1F9", + "euiFontFamily": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", + "euiFontFeatureSettings": "calt 1 kern 1 liga 1", + "euiTextScale": "1,875, 1.5, 1.25, 1, .875, .75", + "euiFontSize": "14px", + "euiFontSizeXS": "12px", + "euiFontSizeS": "14px", + "euiFontSizeM": "16px", + "euiFontSizeL": "20px", + "euiFontSizeXL": "24px", + "euiFontSizeXXL": "30px", + "euiLineHeight": 1.5, + "euiBodyLineHeight": 1.142857143, + "euiTitles": { + "xxxs": { + "font-size": "12px", + "line-height": "1.1429rem", + "font-weight": 600 + }, + "xxs": { + "font-size": "14px", + "line-height": "1.4286rem", + "font-weight": 600 + }, + "xs": { + "font-size": "16px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "s": { + "font-size": "20px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "m": { + "font-size": "24px", + "line-height": "2rem", + "font-weight": 600 + }, + "l": { + "font-size": "30px", + "line-height": "2.5714rem", + "font-weight": 600 + } + }, + "euiZLevel0": 0, + "euiZLevel1": 1000, + "euiZLevel2": 2000, + "euiZLevel3": 3000, + "euiZLevel4": 4000, + "euiZLevel5": 5000, + "euiZLevel6": 6000, + "euiZLevel7": 7000, + "euiZLevel8": 8000, + "euiZLevel9": 9000, + "euiZToastList": 9000, + "euiZModal": 8000, + "euiZMask": 6000, + "euiZNavigation": 6000, + "euiZContentMenu": 2000, + "euiZHeader": 1000, + "euiZFlyout": 1000, + "euiZMaskBelowHeader": 1000, + "euiZContent": 0, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#16C5C0", + "behindText": "#16C5C0" + }, + "euiColorVis1": { + "graphic": "#98E6E2", + "behindText": "#98E6E2" + }, + "euiColorVis2": { + "graphic": "#61A2FF", + "behindText": "#61A2FF" + }, + "euiColorVis3": { + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" + }, + "euiColorVis4": { + "graphic": "#EE72A6", + "behindText": "#EE72A6" + }, + "euiColorVis5": { + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" + }, + "euiColorVis6": { + "graphic": "#F6726A", + "behindText": "#F6726A" + }, + "euiColorVis7": { + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" + }, + "euiColorVis8": { + "graphic": "#EAAE01", + "behindText": "#EAAE01" + }, + "euiColorVis9": { + "graphic": "#FCD883", + "behindText": "#FCD883" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", + "euiColorVis3_behindText": "#B4D5FF", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", + "euiColorVisAsTextLight0": "#047471", + "euiColorVisAsTextLight1": "#1750BA", + "euiColorVisAsTextLight2": "#A11262", + "euiColorVisAsTextLight3": "#A71627", + "euiColorVisAsTextLight4": "#825803", + "euiColorVisAsTextLight5": "#09724D", + "euiColorVisAsTextLight6": "#6B3C9F", + "euiColorVisAsTextDark0": "#16C5C0", + "euiColorVisAsTextDark1": "#61A2FF", + "euiColorVisAsTextDark2": "#EE72A6", + "euiColorVisAsTextDark3": "#F6726A", + "euiColorVisAsTextDark4": "#EAAE01", + "euiColorVisAsTextDark5": "#24C292", + "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisSuccess0": "#24C292", + "euiColorVisSuccess1": "#AEE8D2", + "euiColorVisWarning0": "#FCD883", + "euiColorVisDanger0": "#F6726A", + "euiColorVisDanger1": "#FFC9C2", + "euiColorVisNeutral0": "#F6F9FC", + "euiColorSeverity0": "#E3E6EB", + "euiColorSeverity1": "#5A6D8C", + "euiColorSeverity2": "#7186A8", + "euiColorSeverity3": "#8E9FBC", + "euiColorSeverity4": "#ABB9D0", + "euiColorSeverity5": "#CAD3E2", + "euiColorSeverity6": "#FDE9B5", + "euiColorSeverity7": "#FCD883", + "euiColorSeverity8": "#FFC9C2", + "euiColorSeverity9": "#FFB5AD", + "euiColorSeverity10": "#FC9188", + "euiColorSeverity11": "#F6726A", + "euiColorSeverity12": "#EE4C48", + "euiColorSeverity13": "#DA3737", + "euiColorSeverity14": "#C61E25", + "euiColorVisGrey0": "#CAD3E2", + "euiColorVisGrey1": "#8E9FBC", + "euiColorVisGrey2": "#5A6D8C", + "euiColorVisGrey3": "#1D2A3E", + "euiColorVisWarm0": "#FFE8E5", + "euiColorVisWarm1": "#FFB5AD", + "euiColorVisWarm2": "#F6726A", + "euiColorVisCool0": "#E8F1FF", + "euiColorVisCool1": "#A3CBFF", + "euiColorVisCool2": "#61A2FF", + "euiColorVisComplementary0": "#61A2FF", + "euiColorVisComplementary1": "#EAAE01", + "euiColorChartLines": "#CAD3E2", + "euiColorChartBand": "#F6F9FC", + "euiColorGhost": "#FFFFFF", + "euiColorInk": "#000000", + "euiColorPrimary": "#0B64DD", + "euiColorAccent": "#BC1E70", + "euiColorAccentSecondary": "#008B87", + "euiColorSuccess": "#008A5E", + "euiColorWarning": "#FACB3D", + "euiColorDanger": "#C61E25", + "euiColorEmptyShade": "#FFFFFF", + "euiColorLightestShade": "#ECF1F9", + "euiColorLightShade": "#CAD3E2", + "euiColorMediumShade": "#8E9FBC", + "euiColorDarkShade": "#5A6D8C", + "euiColorDarkestShade": "#2B394F", + "euiColorFullShade": "#07101F", + "euiPageBackgroundColor": "#F6F9FC", + "euiColorHighlight": "#E8F1FF", + "euiTextColor": "#1D2A3E", + "euiTitleColor": "#111C2C", + "euiTextSubduedColor": "#516381", + "euiColorDisabled": "#E3E8F2", + "euiColorPrimaryText": "#1750BA", + "euiColorSuccessText": "#09724D", + "euiColorAccentText": "#A11262", + "euiColorWarningText": "#6A4906", + "euiColorDangerText": "#A71627", + "euiColorDisabledText": "#798EAF", + "euiLinkColor": "#0B64DD", + "euiColorPlainLight": "#FFFFFF", + "euiColorPlainDark": "#07101F", + "euiColorTextPrimary": "#1750BA", + "euiColorTextAccent": "#A11262", + "euiColorTextAccentSecondary": "#047471", + "euiColorTextSuccess": "#09724D", + "euiColorTextWarning": "#6A4906", + "euiColorTextDanger": "#A71627", + "euiColorTextParagraph": "#1D2A3E", + "euiColorTextHeading": "#111C2C", + "euiColorTextSubdued": "#516381", + "euiColorTextDisabled": "#798EAF", + "euiColorTextInverse": "#FFFFFF", + "euiColorBackgroundBasePrimary": "#E8F1FF", + "euiColorBackgroundBaseAccent": "#FFEBF5", + "euiColorBackgroundBaseAccentSecondary": "#E2F9F7", + "euiColorBackgroundBaseSuccess": "#E2F8F0", + "euiColorBackgroundBaseWarning": "#FDF3D8", + "euiColorBackgroundBaseDanger": "#FFE8E5", + "euiColorBackgroundBaseSubdued": "#F6F9FC", + "euiColorBackgroundBasePlain": "#FFFFFF", + "euiColorBackgroundBaseDisabled": "#ECF1F9", + "euiColorBackgroundBaseHighlighted": "#F6F9FC", + "euiColorBackgroundBaseFormsPrepend": "#ECF1F9", + "euiColorBackgroundBaseFormsControlDisabled": "#CAD3E2", + "euiColorBackgroundBaseInteractiveHover": "rgba(23,80,186, 0.04)", + "euiColorBackgroundBaseInteractiveSelect": "#E8F1FF", + "euiColorBackgroundBaseInteractiveOverlay": "rgba(72,89,117, 0.7)", + "euiColorBackgroundBaseSkeletonEdge": "rgba(72,89,117, 0.16)", + "euiColorBackgroundBaseSkeletonMiddle": "rgba(72,89,117, 0.04)", + "euiColorBackgroundLightPrimary": "#D9E8FF", + "euiColorBackgroundLightAccent": "#FDDDE9", + "euiColorBackgroundLightAccentSecondary": "#C9F3F0", + "euiColorBackgroundLightSuccess": "#C9F3E3", + "euiColorBackgroundLightWarning": "#FDE9B5", + "euiColorBackgroundLightDanger": "#FDDDD8", + "euiColorBackgroundLightText": "#E3E8F2", + "euiColorBackgroundFilledPrimary": "#0B64DD", + "euiColorBackgroundFilledAccent": "#BC1E70", + "euiColorBackgroundFilledAccentSecondary": "#008B87", + "euiColorBackgroundFilledSuccess": "#008A5E", + "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledDanger": "#C61E25", + "euiColorBackgroundFilledText": "#5A6D8C", + "euiColorBorderBasePrimary": "#BFDBFF", + "euiColorBorderBaseAccent": "#FFC7DB", + "euiColorBorderBaseAccentSecondary": "#A6EDEA", + "euiColorBorderBaseSuccess": "#AEE8D2", + "euiColorBorderBaseWarning": "#FCD883", + "euiColorBorderBaseDanger": "#FFC9C2", + "euiColorBorderBasePlain": "#CAD3E2", + "euiColorBorderBaseSubdued": "#E3E8F2", + "euiColorBorderBaseDisabled": "#CAD3E2", + "euiColorBorderBaseFloating": "transparent", + "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)", + "euiColorBorderBaseFormsControl": "#8E9FBC", + "euiColorBorderStrongPrimary": "#1750BA", + "euiColorBorderStrongAccent": "#A11262", + "euiColorBorderStrongAccentSecondary": "#047471", + "euiColorBorderStrongSuccess": "#09724D", + "euiColorBorderStrongWarning": "#825803", + "euiColorBorderStrongDanger": "#A71627" +} 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 new file mode 100644 index 00000000000..c5f553d2553 --- /dev/null +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts @@ -0,0 +1,425 @@ +declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { + const sassVariables: { + euiZDataGrid: number; + euiZHeaderBelowDataGrid: number; + euiZDataGridCellPopover: number; + euiDataGridCellPaddingS: string; + euiDataGridCellPaddingM: string; + euiDataGridCellPaddingL: string; + euiTableHoverColor: string; + euiTableSelectedColor: string; + euiTableHoverSelectedColor: string; + euiTableActionsBorderColor: string; + euiTableHoverClickableColor: string; + euiTableFocusClickableColor: string; + euiContrastRatioText: number; + euiContrastRatioGraphic: number; + euiContrastRatioDisabled: number; + euiAnimSlightBounce: string; + euiAnimSlightResistance: string; + euiAnimSpeedExtraFast: string; + euiAnimSpeedFast: string; + euiAnimSpeedNormal: string; + euiAnimSpeedSlow: string; + euiAnimSpeedExtraSlow: string; + euiBorderWidthThin: string; + euiBorderWidthThick: string; + euiBorderColor: string; + euiBorderRadius: string; + euiBorderRadiusSmall: string; + euiBorderThick: string; + euiBorderThin: string; + euiBorderEditable: string; + euiButtonHeight: string; + euiButtonHeightSmall: string; + euiButtonHeightXSmall: string; + euiButtonColorDisabled: string; + euiButtonColorDisabledText: string; + euiButtonColorGhostDisabled: string; + euiButtonTypes: { + primary: string; + accent: string; + accentSecondary: string; + success: string; + warning: string; + danger: string; + ghost: string; + text: string; + }; + euiFontWeightLight: number; + euiFontWeightRegular: number; + euiFontWeightMedium: number; + euiFontWeightSemiBold: number; + euiFontWeightBold: number; + euiCodeFontWeightRegular: number; + euiCodeFontWeightBold: number; + euiFormMaxWidth: string; + euiFormControlHeight: string; + euiFormControlCompressedHeight: string; + euiFormControlPadding: string; + euiFormControlCompressedPadding: string; + euiFormControlBorderRadius: string; + euiFormControlCompressedBorderRadius: string; + euiRadioSize: string; + euiCheckBoxSize: string; + euiCheckboxBorderRadius: string; + euiSwitchHeight: string; + euiSwitchWidth: string; + euiSwitchThumbSize: string; + euiSwitchIconHeight: string; + euiSwitchHeightCompressed: string; + euiSwitchWidthCompressed: string; + euiSwitchThumbSizeCompressed: string; + euiSwitchHeightMini: string; + euiSwitchWidthMini: string; + euiSwitchThumbSizeMini: string; + euiFormBackgroundColor: string; + euiFormBackgroundDisabledColor: string; + euiFormBackgroundReadOnlyColor: string; + euiFormBorderOpaqueColor: string; + euiFormBorderColor: string; + euiFormBorderDisabledColor: string; + euiFormCustomControlDisabledIconColor: string; + euiFormCustomControlBorderColor: string; + euiFormControlDisabledColor: string; + euiFormControlBoxShadow: string; + euiFormControlPlaceholderText: string; + euiFormInputGroupLabelBackground: string; + euiFormInputGroupBorder: string; + euiSwitchOffColor: string; + euiFormControlIconSizes: { + small: string; + medium: string; + large: string; + xLarge: string; + xxLarge: string; + }; + euiFormControlLayoutGroupInputHeight: string; + euiFormControlLayoutGroupInputCompressedHeight: string; + euiFormControlLayoutGroupInputCompressedBorderRadius: string; + euiHeaderBackgroundColor: string; + euiHeaderDarkBackgroundColor: string; + euiHeaderBorderColor: string; + euiHeaderBreadcrumbColor: string; + euiHeaderHeight: string; + euiHeaderChildSize: string; + euiHeaderHeightCompensation: string; + euiPageDefaultMaxWidth: string; + euiPageSidebarMinWidth: string; + euiPanelPaddingModifiers: { + paddingSmall: string; + paddingMedium: string; + paddingLarge: string; + }; + euiPanelBorderRadiusModifiers: { + borderRadiusNone: number; + borderRadiusMedium: string; + }; + euiPanelBackgroundColorModifiers: { + transparent: string; + plain: string; + subdued: string; + accent: string; + accentSecondary: string; + primary: string; + success: string; + warning: string; + danger: string; + }; + euiBreakpoints: { + xs: number; + s: string; + m: string; + l: string; + xl: string; + }; + euiBreakpointKeys: string; + euiShadowColor: string; + euiSize: string; + euiSizeXS: string; + euiSizeS: string; + euiSizeM: string; + euiSizeL: string; + euiSizeXL: string; + euiSizeXXL: string; + euiScrollBar: string; + euiScrollBarCorner: string; + euiScrollBarCornerThin: string; + euiFocusRingColor: string; + euiFocusRingAnimStartColor: string; + euiFocusRingAnimStartSize: string; + euiFocusRingAnimStartSizeLarge: string; + euiFocusRingSizeLarge: string; + euiFocusRingSize: string; + euiFocusTransparency: number; + euiFocusTransparencyPercent: string; + euiFocusBackgroundColor: string; + euiFontFamily: string; + euiCodeFontFamily: string; + euiFontFeatureSettings: string; + euiTextScale: string; + euiFontSize: string; + euiFontSizeXS: string; + euiFontSizeS: string; + euiFontSizeM: string; + euiFontSizeL: string; + euiFontSizeXL: string; + euiFontSizeXXL: string; + euiLineHeight: number; + euiBodyLineHeight: number; + euiTitles: { + xxxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + s: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + m: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + l: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + }; + euiZLevel0: number; + euiZLevel1: number; + euiZLevel2: number; + euiZLevel3: number; + euiZLevel4: number; + euiZLevel5: number; + euiZLevel6: number; + euiZLevel7: number; + euiZLevel8: number; + euiZLevel9: number; + euiZToastList: number; + euiZModal: number; + euiZMask: number; + euiZNavigation: number; + euiZContentMenu: number; + euiZHeader: number; + euiZFlyout: number; + euiZMaskBelowHeader: number; + euiZContent: number; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiColorVisAsTextLight0: string; + euiColorVisAsTextLight1: string; + euiColorVisAsTextLight2: string; + euiColorVisAsTextLight3: string; + euiColorVisAsTextLight4: string; + euiColorVisAsTextLight5: string; + euiColorVisAsTextLight6: string; + euiColorVisAsTextDark0: string; + euiColorVisAsTextDark1: string; + euiColorVisAsTextDark2: string; + euiColorVisAsTextDark3: string; + euiColorVisAsTextDark4: string; + euiColorVisAsTextDark5: string; + euiColorVisAsTextDark6: string; + euiColorVisSuccess0: string; + euiColorVisSuccess1: string; + euiColorVisWarning0: string; + euiColorVisDanger0: string; + euiColorVisDanger1: string; + euiColorVisNeutral0: string; + euiColorVisGrey0: string; + euiColorVisGrey1: string; + euiColorVisGrey2: string; + euiColorVisGrey3: string; + euiColorVisWarm0: string; + euiColorVisWarm1: string; + euiColorVisWarm2: string; + euiColorVisCool0: string; + euiColorVisCool1: string; + euiColorVisCool2: string; + euiColorVisComplementary0: string; + euiColorVisComplementary1: string; + euiColorSeverity0: string; + euiColorSeverity1: string; + euiColorSeverity2: string; + euiColorSeverity3: string; + euiColorSeverity4: string; + euiColorSeverity5: string; + euiColorSeverity6: string; + euiColorSeverity7: string; + euiColorSeverity8: string; + euiColorSeverity9: string; + euiColorSeverity10: string; + euiColorSeverity11: string; + euiColorSeverity12: string; + euiColorSeverity13: string; + euiColorSeverity14: string; + euiColorChartLines: string; + euiColorChartBand: string; + euiColorGhost: string; + euiColorInk: string; + euiColorPrimary: string; + euiColorAccent: string; + euiColorAccentSecondary: string; + euiColorSuccess: string; + euiColorWarning: string; + euiColorDanger: string; + euiColorEmptyShade: string; + euiColorLightestShade: string; + euiColorLightShade: string; + euiColorMediumShade: string; + euiColorDarkShade: string; + euiColorDarkestShade: string; + euiColorFullShade: string; + euiPageBackgroundColor: string; + euiColorHighlight: string; + euiTextColor: string; + euiTitleColor: string; + euiTextSubduedColor: string; + euiColorDisabled: string; + euiColorPrimaryText: string; + euiColorSuccessText: string; + euiColorAccentText: string; + euiColorWarningText: string; + euiColorDangerText: string; + euiColorDisabledText: string; + euiLinkColor: string; + euiColorPlainLight: string; + euiColorPlainDark: string; + euiColorTextPrimary: string; + euiColorTextAccent: string; + euiColorTextAccentSecondary: string; + euiColorTextSuccess: string; + euiColorTextWarning: string; + euiColorTextDanger: string; + euiColorTextParagraph: string; + euiColorTextHeading: string; + euiColorTextSubdued: string; + euiColorTextDisabled: string; + euiColorTextInverse: string; + euiColorBackgroundBasePrimary: string; + euiColorBackgroundBaseAccent: string; + euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseSuccess: string; + euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseDanger: string; + euiColorBackgroundBaseSubdued: string; + euiColorBackgroundBasePlain: string; + euiColorBackgroundBaseDisabled: string; + euiColorBackgroundBaseHighlighted: string; + euiColorBackgroundBaseFormsPrepend: string; + euiColorBackgroundBaseFormsControlDisabled: string; + euiColorBackgroundBaseInteractiveHover: string; + euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveOverlay: string; + euiColorBackgroundBaseSkeletonEdge: string; + euiColorBackgroundBaseSkeletonMiddle: string; + euiColorBackgroundLightPrimary: string; + euiColorBackgroundLightAccent: string; + euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightSuccess: string; + euiColorBackgroundLightWarning: string; + euiColorBackgroundLightDanger: string; + euiColorBackgroundLightText: string; + euiColorBackgroundFilledPrimary: string; + euiColorBackgroundFilledAccent: string; + euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledSuccess: string; + euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledDanger: string; + euiColorBackgroundFilledText: string; + euiColorBorderBasePrimary: string; + euiColorBorderBaseAccent: string; + euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseSuccess: string; + euiColorBorderBaseWarning: string; + euiColorBorderBaseDanger: string; + euiColorBorderBasePlain: string; + euiColorBorderBaseSubdued: string; + euiColorBorderBaseDisabled: string; + euiColorBorderBaseFloating: string; + euiColorBorderBaseFormsColorSwatch: string; + euiColorBorderBaseFormsControl: string; + euiColorBorderStrongPrimary: string; + euiColorBorderStrongAccent: string; + euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongSuccess: string; + euiColorBorderStrongWarning: string; + euiColorBorderStrongDanger: string; + }; + export default sassVariables; +} diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts new file mode 100644 index 00000000000..ec94c9b4a42 --- /dev/null +++ b/packages/eui-theme-borealis/src/index.ts @@ -0,0 +1,45 @@ +/* + * 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 { buildTheme, EuiThemeShape } from '@elastic/eui-theme-common'; + +import { colors } from './variables/colors'; +import { animation } from './variables/_animation'; +import { breakpoint } from './variables/_breakpoint'; +import { base, size } from './variables/_size'; +import { border } from './variables/_borders'; +import { levels } from './variables/_levels'; +import { font } from './variables/_typography'; +import { focus } from './variables/_states'; +import { components } from './variables/_components'; + +export { colorVis } from './variables/colors/_colors_vis'; + +export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS'; + +export const euiThemeBorealis: EuiThemeShape = { + colors, + base, + size, + border, + font, + animation, + breakpoint, + levels, + focus, + components, + flags: { + hasGlobalFocusColor: true, + hasVisColorAdjustment: false, + }, +}; + +export const EuiThemeBorealis = buildTheme( + euiThemeBorealis, + EUI_THEME_BOREALIS_KEY +); diff --git a/packages/eui-theme-borealis/src/theme_dark.scss b/packages/eui-theme-borealis/src/theme_dark.scss new file mode 100644 index 00000000000..d3054ee6b36 --- /dev/null +++ b/packages/eui-theme-borealis/src/theme_dark.scss @@ -0,0 +1,8 @@ + +// color mode specific variables +@import './variables/colors/colors_dark'; + + +// Global styling +@import './variables/index'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/theme_light.scss b/packages/eui-theme-borealis/src/theme_light.scss new file mode 100644 index 00000000000..72c1bd6fcc9 --- /dev/null +++ b/packages/eui-theme-borealis/src/theme_light.scss @@ -0,0 +1,7 @@ +// color mode specific variables +@import './variables/colors/colors_light'; + + +// Global styling +@import './variables/index'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/_animation.ts b/packages/eui-theme-borealis/src/variables/_animation.ts new file mode 100644 index 00000000000..84933441db3 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_animation.ts @@ -0,0 +1,31 @@ +/* + * 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 type { + _EuiThemeAnimationSpeeds, + _EuiThemeAnimationEasings, + _EuiThemeAnimation, +} from '@elastic/eui-theme-common'; + +export const animation_speed: _EuiThemeAnimationSpeeds = { + extraFast: '90ms', + fast: '150ms', + normal: '250ms', + slow: '350ms', + extraSlow: '500ms', +}; + +export const animation_ease: _EuiThemeAnimationEasings = { + bounce: 'cubic-bezier(.34, 1.61, .7, 1)', + resistance: 'cubic-bezier(.694, .0482, .335, 1)', +}; + +export const animation: _EuiThemeAnimation = { + ...animation_speed, + ...animation_ease, +}; diff --git a/packages/eui-theme-borealis/src/variables/_borders.ts b/packages/eui-theme-borealis/src/variables/_borders.ts new file mode 100644 index 00000000000..76db74b08c3 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_borders.ts @@ -0,0 +1,40 @@ +/* + * 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 { + computed, + type _EuiThemeBorder, + sizeToPixel, +} from '@elastic/eui-theme-common'; + +export const border: _EuiThemeBorder = { + color: computed( + ([borderBaseSubdued]) => borderBaseSubdued, + ['colors.borderBaseSubdued'] + ), + width: { + thin: '1px', + thick: '2px', + }, + radius: { + medium: computed(sizeToPixel(0.375)), + small: computed(sizeToPixel(0.25)), + }, + thin: computed( + ([width, color]) => `${width.thin} solid ${color}`, + ['border.width', 'border.color'] + ), + thick: computed( + ([width, color]) => `${width.thick} solid ${color}`, + ['border.width', 'border.color'] + ), + editable: computed( + ([width, color]) => `${width.thick} dotted ${color}`, + ['border.width', 'border.color'] + ), +}; diff --git a/packages/eui/src/themes/themes.test.ts b/packages/eui-theme-borealis/src/variables/_breakpoint.ts similarity index 52% rename from packages/eui/src/themes/themes.test.ts rename to packages/eui-theme-borealis/src/variables/_breakpoint.ts index cb8f4533d4a..facd8e14ba4 100644 --- a/packages/eui/src/themes/themes.test.ts +++ b/packages/eui-theme-borealis/src/variables/_breakpoint.ts @@ -6,12 +6,12 @@ * Side Public License, v 1. */ -import { isDefaultTheme } from './themes'; +import type { _EuiThemeBreakpoints } from '@elastic/eui-theme-common'; -describe('isDefaultTheme', () => { - it('returns true for the default name', () => { - expect(isDefaultTheme('EUI_THEME_LEGACY')).toBe(false); - expect(isDefaultTheme('EUI_THEME_AMSTERDAM')).toBe(true); - expect(isDefaultTheme('CUSTOM_DEFAULT')).toBe(false); - }); -}); +export const breakpoint: _EuiThemeBreakpoints = { + xl: 1200, + l: 992, + m: 768, + s: 575, + xs: 0, +}; diff --git a/packages/eui-theme-borealis/src/variables/_buttons.scss b/packages/eui-theme-borealis/src/variables/_buttons.scss new file mode 100644 index 00000000000..65ac53b809e --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_buttons.scss @@ -0,0 +1,18 @@ +$euiButtonHeight: $euiSizeXXL !default; +$euiButtonHeightSmall: $euiSizeXL !default; +$euiButtonHeightXSmall: $euiSizeL !default; + +// Modifier naming and colors. +$euiButtonTypes: ( + primary: $euiColorBackgroundFilledPrimary, + accent: $euiColorBackgroundFilledAccent, + success: $euiColorBackgroundFilledSuccess, + warning: $euiColorBackgroundFilledWarning, + danger: $euiColorBackgroundFilledDanger, + ghost: $euiColorGhost, // Ghost is special, and does not care about theming. + text: $euiColorBackgroundFilledText, // Reserved for special use cases +) !default; + +// TODO: Remove this once elastic-charts no longer uses this variable +// @see https://github.com/elastic/elastic-charts/pull/2528 +$euiButtonColorDisabledText: $euiColorTextDisabled; diff --git a/packages/eui-theme-borealis/src/variables/_buttons.ts b/packages/eui-theme-borealis/src/variables/_buttons.ts new file mode 100644 index 00000000000..4b5c35b4599 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_buttons.ts @@ -0,0 +1,129 @@ +/* + * 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 { _EuiThemeButton } from '@elastic/eui-theme-common'; +import { SEMANTIC_COLORS } from './colors/_semantic_colors'; +import { + background_colors, + brand_text_colors, + text_colors, +} from './colors/_colors_light'; +import { + dark_background_colors, + dark_brand_text_colors, + dark_text_colors, +} from './colors/_colors_dark'; + +const _buttons = { + backgroundPrimary: background_colors.backgroundLightPrimary, + backgroundAccent: background_colors.backgroundLightAccent, + backgroundAccentSecondary: background_colors.backgroundLightAccentSecondary, + backgroundSuccess: background_colors.backgroundLightSuccess, + backgroundWarning: background_colors.backgroundLightWarning, + backgroundDanger: background_colors.backgroundLightDanger, + backgroundText: background_colors.backgroundLightText, + backgroundDisabled: background_colors.backgroundBaseDisabled, + + backgroundFilledPrimary: background_colors.backgroundFilledPrimary, + backgroundFilledAccent: background_colors.backgroundFilledAccent, + backgroundFilledAccentSecondary: + background_colors.backgroundFilledAccentSecondary, + backgroundFilledSuccess: background_colors.backgroundFilledSuccess, + backgroundFilledWarning: background_colors.backgroundFilledWarning, + backgroundFilledDanger: background_colors.backgroundFilledDanger, + backgroundFilledText: background_colors.backgroundFilledText, + backgroundFilledDisabled: background_colors.backgroundBaseDisabled, + + // Temp. mapping to support more variants in old theme + backgroundEmptyPrimaryHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentSecondaryHover: + background_colors.backgroundBaseInteractiveHover, + backgroundEmptySuccessHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyWarningHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyDangerHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyTextHover: background_colors.backgroundBaseInteractiveHover, + + textColorPrimary: brand_text_colors.textPrimary, + textColorAccent: brand_text_colors.textAccent, + textColorAccentSecondary: brand_text_colors.textAccentSecondary, + textColorSuccess: brand_text_colors.textSuccess, + textColorWarning: brand_text_colors.textWarning, + textColorDanger: brand_text_colors.textDanger, + textColorText: text_colors.textParagraph, + textColorDisabled: text_colors.textDisabled, + + textColorFilledPrimary: text_colors.textInverse, + textColorFilledAccent: text_colors.textInverse, + textColorFilledAccentSecondary: text_colors.textInverse, + textColorFilledSuccess: text_colors.textInverse, + textColorFilledWarning: SEMANTIC_COLORS.warning110, + textColorFilledDanger: text_colors.textInverse, + textColorFilledText: text_colors.textInverse, + textColorFilledDisabled: text_colors.textDisabled, +}; + +const _dark_buttons = { + backgroundPrimary: dark_background_colors.backgroundLightPrimary, + backgroundAccent: dark_background_colors.backgroundLightAccent, + backgroundAccentSecondary: + dark_background_colors.backgroundLightAccentSecondary, + backgroundSuccess: dark_background_colors.backgroundLightSuccess, + backgroundWarning: dark_background_colors.backgroundLightWarning, + backgroundDanger: dark_background_colors.backgroundLightDanger, + backgroundText: dark_background_colors.backgroundLightText, + backgroundDisabled: dark_background_colors.backgroundBaseDisabled, + + backgroundFilledPrimary: dark_background_colors.backgroundFilledPrimary, + backgroundFilledAccent: dark_background_colors.backgroundFilledAccent, + backgroundFilledAccentSecondary: + dark_background_colors.backgroundFilledAccentSecondary, + backgroundFilledSuccess: dark_background_colors.backgroundFilledSuccess, + backgroundFilledWarning: dark_background_colors.backgroundFilledWarning, + backgroundFilledDanger: dark_background_colors.backgroundFilledDanger, + backgroundFilledText: dark_background_colors.backgroundFilledText, + backgroundFilledDisabled: dark_background_colors.backgroundBaseDisabled, + + backgroundEmptyPrimaryHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentSecondaryHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptySuccessHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyWarningHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyDangerHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyTextHover: + dark_background_colors.backgroundBaseInteractiveHover, + + textColorPrimary: dark_brand_text_colors.textPrimary, + textColorAccent: dark_brand_text_colors.textAccent, + textColorAccentSecondary: dark_brand_text_colors.textAccentSecondary, + textColorSuccess: dark_brand_text_colors.textSuccess, + textColorWarning: dark_brand_text_colors.textWarning, + textColorDanger: dark_brand_text_colors.textDanger, + textColorText: dark_text_colors.textParagraph, + textColorDisabled: dark_text_colors.textDisabled, + + textColorFilledPrimary: dark_text_colors.textInverse, + textColorFilledAccent: dark_text_colors.textInverse, + textColorFilledAccentSecondary: dark_text_colors.textInverse, + textColorFilledSuccess: dark_text_colors.textInverse, + textColorFilledWarning: SEMANTIC_COLORS.warning110, + textColorFilledDanger: dark_text_colors.textInverse, + textColorFilledText: dark_text_colors.textInverse, + textColorFilledDisabled: dark_text_colors.textDisabled, +}; + +export const buttons: _EuiThemeButton = { + LIGHT: _buttons, + DARK: _dark_buttons, +}; diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts new file mode 100644 index 00000000000..14419826647 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -0,0 +1,306 @@ +/* + * 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 { + _EuiThemeComponentColors, + _EuiThemeComponents, +} from '@elastic/eui-theme-common'; + +import { SEMANTIC_COLORS } from './colors/_semantic_colors'; +import { + dark_background_colors, + dark_border_colors, + dark_brand_text_colors, + dark_text_colors, +} from './colors/_colors_dark'; + +import { buttons } from './_buttons'; +import { forms } from './_forms'; +import { + background_colors, + border_colors, + brand_text_colors, + text_colors, +} from './colors/_colors_light'; +import { colorVis } from './colors/_colors_vis'; + +const component_colors: _EuiThemeComponentColors = { + badgeBackground: background_colors.backgroundLightText, + badgeBackgroundSubdued: background_colors.backgroundLightText, + badgeBorderColorHollow: border_colors.borderBasePlain, + badgeIconButtonBackgroundHover: + background_colors.backgroundBaseInteractiveHover, + + breadcrumbsApplicationBackground: background_colors.backgroundLightText, + breadcrumbsApplicationColor: text_colors.textSubdued, + + bottomBarBackground: SEMANTIC_COLORS.plainDark, + + buttonGroupBorderColor: border_colors.borderBasePlain, + buttonGroupBorderColorSelected: border_colors.borderBasePlain, + buttonGroupFocusColor: brand_text_colors.textPrimary, + + codeBackground: background_colors.backgroundBaseHighlighted, + codeBackgroundSelected: 'inherit', + codeColor: text_colors.textParagraph, + codeInlineColor: colorVis.euiColorVisAsTextLight6, + codeCommentColor: text_colors.textSubdued, + codeSelectorColor: 'inherit', + codeStringColor: colorVis.euiColorVisAsTextLight2, + codeTagColor: colorVis.euiColorVisAsTextLight1, + codeNameColor: colorVis.euiColorVisAsTextLight1, + codeNumberColor: colorVis.euiColorVisAsTextLight0, + codeInlineCodeKeywordColor: colorVis.euiColorVisAsTextLight6, + codeKeywordColor: colorVis.euiColorVisAsTextLight1, + codeFunctionTitleColor: 'inherit', + codeTypeColor: colorVis.euiColorVisAsTextLight1, + codeAttributeColor: 'inherit', + codeSymbolColor: colorVis.euiColorVisAsTextLight3, + codeParamsColor: 'inherit', + codeMetaColor: text_colors.textSubdued, + codeTitleColor: colorVis.euiColorVisAsTextLight4, + codeSectionColor: colorVis.euiColorVisAsTextLight3, + codeAdditionColor: colorVis.euiColorVisAsTextLight0, + codeDeletionColor: colorVis.euiColorVisAsTextLight3, + codeSelectorClassColor: 'inherit', + codeSelectorIdColor: 'inherit', + + collapsibleNavGroupBackground: background_colors.backgroundBaseSubdued, + collapsibleNavGroupBackgroundDark: + dark_background_colors.backgroundBaseSubdued, + + dataGridBorderColor: border_colors.borderBaseSubdued, + dataGridVerticalLineBorderColor: border_colors.borderBaseSubdued, + dataGridRowBackgroundStriped: background_colors.backgroundBaseSubdued, + dataGridRowBackgroundHover: background_colors.backgroundBaseInteractiveHover, + dataGridRowBackgroundSelect: + background_colors.backgroundBaseInteractiveSelect, + + dragDropDraggingBackground: background_colors.backgroundBaseSuccess, + dragDropDraggingOverBackground: background_colors.backgroundLightSuccess, + + filterSelectItemBackgroundFocusDisabled: + background_colors.backgroundBaseDisabled, + + flyoutFooterBackground: background_colors.backgroundBaseHighlighted, + flyoutCloseButtonInsideBackground: background_colors.backgroundBasePlain, + + headerBackground: background_colors.backgroundBasePlain, + headerDarkBackground: dark_background_colors.backgroundBasePlain, + headerDarkSearchBorderColor: dark_border_colors.borderBasePlain, + headerDarkSectionItemBackgroundFocus: + dark_background_colors.backgroundBasePrimary, + + keyPadMenuItemBackgroundDisabledSelect: + background_colors.backgroundBaseDisabled, + + listGroupItemBackgroundPrimaryActive: + background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundSubduedActive: + background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundHover: + background_colors.backgroundBaseInteractiveHover, + listGroupItemBackgroundPrimaryHover: + background_colors.backgroundBaseInteractiveHover, + + loadingSpinnerBorder: border_colors.borderBasePlain, + loadingSpinnerHighlight: border_colors.borderStrongPrimary, + + loadingChartMonoBackground0: SEMANTIC_COLORS.shade20, + loadingChartMonoBackground1: SEMANTIC_COLORS.shade30, + loadingChartMonoBackground2: SEMANTIC_COLORS.shade40, + loadingChartMonoBackground3: SEMANTIC_COLORS.shade50, + + markBackground: background_colors.backgroundLightPrimary, + + markdownFormatTableBorderColor: border_colors.borderBasePlain, + + popoverPanelBackground: background_colors.backgroundBasePlain, + popoverFooterBorderColor: border_colors.borderBaseSubdued, + + scrollbarTrackColor: SEMANTIC_COLORS.shade15, + + sideNavItemEmphasizedBackground: + background_colors.backgroundBaseInteractiveSelect, + + selectableListItemBorderColor: border_colors.borderBaseSubdued, + + superDatePickerBackgroundSuccees: background_colors.backgroundBaseSuccess, + + switchBackgroundOn: background_colors.backgroundFilledPrimary, + switchBackgroundOff: background_colors.backgroundFilledText, + switchUncompressedBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + switchCompressedBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + switchMiniBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + switchThumbBackgroundDisabled: background_colors.backgroundBasePlain, + switchThumbBorderOn: background_colors.backgroundFilledPrimary, + switchThumbBorderOff: background_colors.backgroundFilledText, + switchIconDisabled: forms.LIGHT.iconDisabled, + + tableRowBackgroundHover: background_colors.backgroundBaseInteractiveHover, + tableRowBackgroundSelected: background_colors.backgroundBaseInteractiveSelect, + tableRowBackgroundSelectedHover: + background_colors.backgroundBaseInteractiveSelect, + tableRowInteractiveBackgroundHover: + background_colors.backgroundBaseInteractiveSelect, + tableRowInteractiveBackgroundFocus: + background_colors.backgroundBaseInteractiveSelect, + tableCellSortableIconColor: background_colors.backgroundFilledText, + + tooltipBackground: dark_background_colors.backgroundBaseSubdued, + tooltipBorder: dark_border_colors.borderBaseSubdued, + tooltipBorderFloating: border_colors.borderBaseFloating, + + tourFooterBackground: background_colors.backgroundBaseHighlighted, + + treeViewItemBackgroundHover: background_colors.backgroundBaseInteractiveHover, +}; + +export const components: _EuiThemeComponents = { + buttons, + forms, + LIGHT: component_colors, + DARK: { + ...component_colors, + + badgeBackground: dark_background_colors.backgroundLightText, + badgeBackgroundSubdued: dark_background_colors.backgroundLightText, + badgeBorderColorHollow: dark_border_colors.borderBasePlain, + badgeIconButtonBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + + breadcrumbsApplicationBackground: + dark_background_colors.backgroundLightText, + breadcrumbsApplicationColor: dark_text_colors.textSubdued, + + buttonGroupBorderColor: dark_border_colors.borderBasePlain, + buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain, + buttonGroupFocusColor: dark_brand_text_colors.textPrimary, + + codeBackground: dark_background_colors.backgroundBaseHighlighted, + codeBackgroundSelected: 'inherit', + codeColor: dark_text_colors.textParagraph, + codeInlineColor: colorVis.euiColorVisAsTextDark6, + codeCommentColor: dark_text_colors.textSubdued, + codeSelectorColor: 'inherit', + codeStringColor: colorVis.euiColorVisAsTextDark2, + codeTagColor: colorVis.euiColorVisAsTextDark1, + codeNameColor: colorVis.euiColorVisAsTextDark1, + codeNumberColor: colorVis.euiColorVisAsTextDark0, + codeKeywordColor: colorVis.euiColorVisAsTextDark6, + codeFunctionTitleColor: 'inherit', + codeTypeColor: colorVis.euiColorVisAsTextDark1, + codeAttributeColor: 'inherit', + codeSymbolColor: colorVis.euiColorVisAsTextDark3, + codeParamsColor: 'inherit', + codeMetaColor: dark_text_colors.textSubdued, + codeTitleColor: colorVis.euiColorVisAsTextDark4, + codeSectionColor: colorVis.euiColorVisAsTextDark3, + codeAdditionColor: colorVis.euiColorVisAsTextDark0, + codeDeletionColor: colorVis.euiColorVisAsTextDark3, + codeSelectorClassColor: 'inherit', + codeSelectorIdColor: 'inherit', + + collapsibleNavGroupBackground: dark_background_colors.backgroundBaseSubdued, + collapsibleNavGroupBackgroundDark: + dark_background_colors.backgroundBaseSubdued, + + dataGridBorderColor: dark_border_colors.borderBaseSubdued, + dataGridVerticalLineBorderColor: dark_border_colors.borderBaseSubdued, + dataGridRowBackgroundStriped: dark_background_colors.backgroundBaseSubdued, + dataGridRowBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + dataGridRowBackgroundSelect: + dark_background_colors.backgroundBaseInteractiveSelect, + + dragDropDraggingBackground: dark_background_colors.backgroundBaseSuccess, + dragDropDraggingOverBackground: + dark_background_colors.backgroundLightSuccess, + + filterSelectItemBackgroundFocusDisabled: + dark_background_colors.backgroundBaseDisabled, + + flyoutFooterBackground: dark_background_colors.backgroundBaseHighlighted, + flyoutCloseButtonInsideBackground: + dark_background_colors.backgroundBasePlain, + + headerBackground: dark_background_colors.backgroundBasePlain, + + keyPadMenuItemBackgroundDisabledSelect: + dark_background_colors.backgroundBaseDisabled, + + listGroupItemBackgroundPrimaryActive: + dark_background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundSubduedActive: + dark_background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + listGroupItemBackgroundPrimaryHover: + dark_background_colors.backgroundBaseInteractiveHover, + + loadingSpinnerBorder: dark_border_colors.borderBasePlain, + loadingSpinnerHighlight: dark_border_colors.borderStrongPrimary, + + loadingChartMonoBackground0: SEMANTIC_COLORS.shade110, + loadingChartMonoBackground1: SEMANTIC_COLORS.shade100, + loadingChartMonoBackground2: SEMANTIC_COLORS.shade90, + loadingChartMonoBackground3: SEMANTIC_COLORS.shade80, + + markBackground: dark_background_colors.backgroundLightPrimary, + + markdownFormatTableBorderColor: dark_border_colors.borderBasePlain, + + popoverPanelBackground: dark_background_colors.backgroundBasePlain, + popoverFooterBorderColor: dark_border_colors.borderBaseSubdued, + + scrollbarTrackColor: SEMANTIC_COLORS.shade145, + + sideNavItemEmphasizedBackground: + dark_background_colors.backgroundBaseInteractiveSelect, + + selectableListItemBorderColor: dark_border_colors.borderBaseSubdued, + + switchBackgroundOn: dark_background_colors.backgroundFilledPrimary, + switchBackgroundOff: dark_background_colors.backgroundFilledText, + switchUncompressedBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + switchCompressedBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + switchMiniBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + switchThumbBackgroundDisabled: dark_background_colors.backgroundBasePlain, + switchThumbBorderOn: dark_background_colors.backgroundFilledPrimary, + switchThumbBorderOff: dark_background_colors.backgroundFilledText, + switchIconDisabled: forms.DARK.iconDisabled, + + superDatePickerBackgroundSuccees: + dark_background_colors.backgroundBaseSuccess, + + tableRowBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + tableRowBackgroundSelected: + dark_background_colors.backgroundBaseInteractiveSelect, + tableRowBackgroundSelectedHover: + dark_background_colors.backgroundBaseInteractiveSelect, + tableRowInteractiveBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + tableRowInteractiveBackgroundFocus: + dark_background_colors.backgroundBaseInteractiveHover, + tableCellSortableIconColor: dark_background_colors.backgroundFilledText, + + tooltipBorderFloating: dark_border_colors.borderBaseFloating, + + tourFooterBackground: dark_background_colors.backgroundBaseHighlighted, + + treeViewItemBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + }, +}; diff --git a/packages/eui-theme-borealis/src/variables/_font_weight.scss b/packages/eui-theme-borealis/src/variables/_font_weight.scss new file mode 100644 index 00000000000..8ee5e23f925 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_font_weight.scss @@ -0,0 +1,10 @@ +// Separated out to its own file for easy import into docs + +// Font weights +$euiFontWeightLight: 300 !default; +$euiFontWeightRegular: 400 !default; +$euiFontWeightMedium: 450 !default; +$euiFontWeightSemiBold: 500 !default; +$euiFontWeightBold: 600 !default; +$euiCodeFontWeightRegular: 400 !default; +$euiCodeFontWeightBold: 600 !default; diff --git a/packages/eui-theme-borealis/src/variables/_form.scss b/packages/eui-theme-borealis/src/variables/_form.scss new file mode 100644 index 00000000000..5ee2ac834bd --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_form.scss @@ -0,0 +1,12 @@ +// Coloring +$euiFormBackgroundColor: $euiColorBackgroundBaseSubdued !default; +$euiFormBackgroundDisabledColor: $euiColorBackgroundBaseDisabled !default; +$euiFormBackgroundReadOnlyColor: $euiColorBackgroundBasePlain !default; +$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default; +$euiFormBorderColor: $euiColorBorderBasePlain !default; +$euiFormBorderDisabledColor: $euiColorBorderBaseDisabled !default; +$euiFormControlDisabledColor: $euiColorBackgroundBaseFormsControlDisabled !default; +$euiFormControlBoxShadow: 0 0 transparent !default; +$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default; +$euiFormInputGroupLabelBackground: $euiColorBackgroundBaseFormsPrepend !default; +$euiFormInputGroupBorder: none !default; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/_forms.ts b/packages/eui-theme-borealis/src/variables/_forms.ts new file mode 100644 index 00000000000..7866dce9e62 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_forms.ts @@ -0,0 +1,70 @@ +/* + * 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 { computed, mathWithUnits } from '@elastic/eui-theme-common'; +import { + dark_background_colors, + dark_border_colors, + dark_text_colors, +} from './colors/_colors_dark'; +import { + background_colors, + border_colors, + text_colors, +} from './colors/_colors_light'; + +const _forms = { + background: background_colors.backgroundBasePlain, + backgroundDisabled: background_colors.backgroundBaseDisabled, + backgroundReadOnly: background_colors.backgroundBasePlain, + backgroundFocused: background_colors.backgroundBasePlain, + backgroundAutofilled: background_colors.backgroundBasePrimary, + prependBackground: background_colors.backgroundBaseFormsPrepend, + border: border_colors.borderBasePlain, + borderDisabled: border_colors.borderBaseDisabled, + borderAutofilled: border_colors.borderBasePrimary, + controlBorder: border_colors.borderBaseFormsControl, + controlBorderSelected: border_colors.borderStrongPrimary, + controlBorderDisabled: border_colors.borderBaseDisabled, + controlBackgroundUnselected: 'transparent', + controlBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + colorHasPlaceholder: text_colors.textSubdued, + colorDisabled: text_colors.textDisabled, + iconDisabled: text_colors.textDisabled, +}; + +const _dark_forms = { + ..._forms, + background: dark_background_colors.backgroundBasePlain, + backgroundDisabled: dark_background_colors.backgroundBaseDisabled, + backgroundReadOnly: dark_background_colors.backgroundBasePlain, + backgroundFocused: dark_background_colors.backgroundBasePlain, + backgroundAutofilled: dark_background_colors.backgroundBasePrimary, + prependBackground: dark_background_colors.backgroundBaseFormsPrepend, + border: dark_border_colors.borderBasePlain, + borderDisabled: dark_border_colors.borderBaseDisabled, + borderAutofilled: dark_border_colors.borderBasePrimary, + controlBorder: dark_border_colors.borderBaseFormsControl, + controlBorderSelected: dark_border_colors.borderStrongPrimary, + controlBorderDisabled: dark_border_colors.borderBaseDisabled, + controlBackgroundUnselected: 'transparent', + controlBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + colorHasPlaceholder: dark_text_colors.textSubdued, + colorDisabled: dark_text_colors.textDisabled, + iconDisabled: dark_text_colors.textDisabled, +}; + +export const forms = { + maxWidth: computed( + ([base]) => mathWithUnits(base, (x) => x * 25), + ['size.base'] + ), + LIGHT: _forms, + DARK: _dark_forms, +}; diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss new file mode 100644 index 00000000000..5cbddf778c6 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -0,0 +1,9 @@ +// Import base theme first, then override +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index'; +@import 'states'; + +@import './colors/colors_vis'; +@import 'form'; +@import 'page'; +@import 'font_weight'; +@import 'typography'; diff --git a/packages/eui-theme-borealis/src/variables/_levels.ts b/packages/eui-theme-borealis/src/variables/_levels.ts new file mode 100644 index 00000000000..1f4e2db0bb7 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_levels.ts @@ -0,0 +1,21 @@ +/* + * 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 type { _EuiThemeLevels } from '@elastic/eui-theme-common'; + +export const levels: _EuiThemeLevels = { + toast: 9000, + modal: 8000, + mask: 6000, + navigation: 6000, + menu: 2000, + header: 1000, + flyout: 1000, + maskBelowHeader: 1000, + content: 0, +}; diff --git a/packages/eui-theme-borealis/src/variables/_page.scss b/packages/eui-theme-borealis/src/variables/_page.scss new file mode 100644 index 00000000000..318cae55681 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_page.scss @@ -0,0 +1 @@ +$euiPageDefaultMaxWidth: map-get($euiBreakpoints, 'xl'); diff --git a/packages/eui-theme-borealis/src/variables/_size.ts b/packages/eui-theme-borealis/src/variables/_size.ts new file mode 100644 index 00000000000..1b3fe6a8ea2 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_size.ts @@ -0,0 +1,29 @@ +/* + * 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 { + computed, + sizeToPixel, + type _EuiThemeBase, + type _EuiThemeSizes, +} from '@elastic/eui-theme-common'; + +export const base: _EuiThemeBase = 16; + +export const size: _EuiThemeSizes = { + xxs: computed(sizeToPixel(0.125)), + xs: computed(sizeToPixel(0.25)), + s: computed(sizeToPixel(0.5)), + m: computed(sizeToPixel(0.75)), + base: computed(sizeToPixel()), + l: computed(sizeToPixel(1.5)), + xl: computed(sizeToPixel(2)), + xxl: computed(sizeToPixel(2.5)), + xxxl: computed(sizeToPixel(3)), + xxxxl: computed(sizeToPixel(4)), +}; diff --git a/packages/eui-theme-borealis/src/variables/_states.scss b/packages/eui-theme-borealis/src/variables/_states.scss new file mode 100644 index 00000000000..88b6ec9021f --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_states.scss @@ -0,0 +1,11 @@ +// Color when not using currentColor +$euiFocusRingColor: $euiColorTextPrimary; + +// Sizing +$euiFocusRingAnimStartSize: 2px; +$euiFocusRingSize: 2px; + +// Transparency +$euiFocusTransparency: lightOrDarkTheme(.9, .8); +$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%); +$euiFocusBackgroundColor: $euiColorBackgroundBaseInteractiveSelect; diff --git a/packages/eui-theme-borealis/src/variables/_states.ts b/packages/eui-theme-borealis/src/variables/_states.ts new file mode 100644 index 00000000000..8ab3f5b1ae5 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_states.ts @@ -0,0 +1,25 @@ +/* + * 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 { + computed, + sizeToPixel, + type _EuiThemeFocus, +} from '@elastic/eui-theme-common'; + +export const focus: _EuiThemeFocus = { + // Focus ring + color: computed(([textPrimary]) => textPrimary, ['colors.textPrimary']), + width: computed(sizeToPixel(0.125)), + // Focus background + transparency: { LIGHT: 0.1, DARK: 0.2 }, + backgroundColor: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), +}; diff --git a/packages/eui-theme-borealis/src/variables/_typography.scss b/packages/eui-theme-borealis/src/variables/_typography.scss new file mode 100644 index 00000000000..5e470e30c81 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_typography.scss @@ -0,0 +1,64 @@ +// Finally start using the non-beta version of Inter +$euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; + +// Font sizes -- scale is loosely based on Minor Third (1.200) with a base of 14px +// Base list is an altered scale based on 16px to match the resulted values below +$euiTextScale: 1,875, 1.5, 1.25, 1, .875, .75 !default; + +$euiFontSize: $euiSize - 2; // 14px + +$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6 +$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 +$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4 +$euiFontSizeL: floor($euiFontSize * 1.44); // 20px // h3 +$euiFontSizeXL: floor($euiFontSize * 1.728); // 24px // h2 +$euiFontSizeXXL: ceil($euiFontSize * 2.074); // 30px // h1 + +$euiBodyLineHeight: 1.142857143 !default; // 16px from a 14px base font size to ensure it aligns to our 16px grid + +$euiCodeFontWeightRegular: 400; +$euiCodeFontWeightBold: 600; + +// Normally functions are imported before variables in `_index.scss` files +// But because they need to consume some typography variables they need to live here +@function convertToRem($size) { + @return #{$size / $euiFontSize}rem; +} + +// Use 8px increments for base gridline +@function lineHeightFromBaseline($multiplier: 3) { + @return convertToRem(($euiSize / 2) * $multiplier); +} + +$euiTitles: ( + 'xxxs': ( + 'font-size': $euiFontSizeXS, + 'line-height': lineHeightFromBaseline(2), + 'font-weight': $euiFontWeightBold, + ), + 'xxs': ( + 'font-size': $euiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xs': ( + 'font-size': $euiFontSizeM, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 's': ( + 'font-size': $euiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightBold, + ), + 'm': ( + 'font-size': $euiFontSizeXL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightBold, + ), + 'l': ( + 'font-size': $euiFontSizeXXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $euiFontWeightBold, + ), +); diff --git a/packages/eui-theme-borealis/src/variables/_typography.ts b/packages/eui-theme-borealis/src/variables/_typography.ts new file mode 100644 index 00000000000..ae43f118d25 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_typography.ts @@ -0,0 +1,62 @@ +/* + * 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 { + computed, + type _EuiThemeFont, + type _EuiThemeFontBase, + type _EuiThemeFontScales, + type _EuiThemeFontWeights, +} from '@elastic/eui-theme-common'; + +// Typographic scale -- loosely based on Major Third (1.200) +export const fontScale: _EuiThemeFontScales = { + xxxs: 0.5625, // 9px + xxs: 0.6875, // 11px + xs: 0.75, // 12px + s: 0.875, // 14px + m: 1, // 16px + l: 1.25, // 20px + xl: 1.5, // 24px + xxl: 1.875, // 30px +}; + +// Families & base font settings +export const fontBase: _EuiThemeFontBase = { + family: "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif", + familyCode: "'Roboto Mono', Menlo, Courier, monospace", + familySerif: 'Georgia, Times, Times New Roman, serif', + + // Careful using ligatures. Code editors like ACE will often error because of width calculations + featureSettings: "'calt' 1, 'kern' 1, 'liga' 1", + defaultUnits: 'rem', + + baseline: computed(([base]) => base / 4, ['base']), + lineHeightMultiplier: 1.5, +}; + +export const fontWeight: _EuiThemeFontWeights = { + light: 300, + regular: 400, + medium: 450, + semiBold: 500, + bold: 600, +}; + +export const font: _EuiThemeFont = { + ...fontBase, + scale: fontScale, + weight: fontWeight, + body: { + scale: 's', + weight: 'regular', + }, + title: { + weight: 'bold', + }, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss new file mode 100644 index 00000000000..ddf36a9a1a4 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -0,0 +1,122 @@ +// stylelint-disable color-no-hex + +// This extra import allows any variables that are created via functions to work when loaded into JS +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; + +@import 'semantic_colors'; + +// Constants (legacy) +$euiColorGhost: $euiColorWhite !default; +$euiColorInk: $euiColorBlack !default; + +// Brand +$euiColorPrimary: $euiColorPrimary60 !default; +$euiColorAccent: $euiColorAccent60 !default; +$euiColorAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorSuccess: $euiColorSuccess60 !default; +$euiColorWarning: $euiColorWarning40 !default; +$euiColorDanger: $euiColorDanger60 !default; + +// Shades +$euiColorEmptyShade: $euiColorPlainDark !default; +$euiColorLightestShade: $euiColorShade135 !default; +$euiColorLightShade: $euiColorShade125 !default; +$euiColorMediumShade: $euiColorShade95 !default; +$euiColorDarkShade: $euiColorShade75 !default; +$euiColorDarkestShade: $euiColorShade30 !default; +$euiColorFullShade: $euiColorPlainLight !default; + +// Backgrounds +$euiPageBackgroundColor: $euiColorBlueBlack !default; // deprecated +$euiColorHighlight: $euiColorPrimary100 !default; + +$euiColorBackgroundBasePrimary: $euiColorPrimary140 !default; +$euiColorBackgroundBaseAccent: $euiColorAccent140 !default; +$euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary140 !default; +$euiColorBackgroundBaseSuccess: $euiColorSuccess140 !default; +$euiColorBackgroundBaseWarning: $euiColorWarning140 !default; +$euiColorBackgroundBaseDanger: $euiColorDanger140 !default; +$euiColorBackgroundBaseSubdued: $euiColorPlainDark !default; +$euiColorBackgroundBasePlain: $euiColorShade145 !default; +$euiColorBackgroundBaseDisabled: $euiColorShade130 !default; +$euiColorBackgroundBaseHighlighted: $euiColorShade135 !default; +$euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default; +$euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; + +$euiColorBackgroundBaseInteractiveHover: $euiColorPlainLightAlpha8 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary130 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade120Alpha70 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorPlainLightAlpha16 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default; + +$euiColorBackgroundLightPrimary: $euiColorPrimary130 !default; +$euiColorBackgroundLightAccent: $euiColorAccent130 !default; +$euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary130 !default; +$euiColorBackgroundLightSuccess: $euiColorSuccess130 !default; +$euiColorBackgroundLightWarning: $euiColorWarning130 !default; +$euiColorBackgroundLightDanger: $euiColorDanger130 !default; +$euiColorBackgroundLightText: $euiColorShade130 !default; + +$euiColorBackgroundFilledPrimary: $euiColorPrimary60 !default; +$euiColorBackgroundFilledAccent: $euiColorAccent60 !default; +$euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorBackgroundFilledSuccess: $euiColorSuccess60 !default; +$euiColorBackgroundFilledWarning: $euiColorWarning40 !default; +$euiColorBackgroundFilledDanger: $euiColorDanger60 !default; +$euiColorBackgroundFilledText: $euiColorShade60 !default; + +// Texts (legacy) +$euiTextColor: $euiColorShade30 !default; +$euiTitleColor: $euiColorShade20 !default; +$euiTextSubduedColor: $euiColorShade60 !default; +$euiColorDisabled: $euiColorBackgroundBaseDisabled !default; +$euiColorDisabledText: $euiColorShade80 !default; +$euiLinkColor: $euiColorPrimary60 !default; + +// Texts +$euiColorTextParagraph: $euiColorShade30 !default; +$euiColorTextHeading: $euiColorShade20 !default; +$euiColorTextSubdued: $euiColorShade60 !default; +$euiColorTextDisabled: $euiColorShade80 !default; +$euiColorTextInverse: $euiColorPlainDark !default; + +// Brand texts (legacy) +$euiColorPrimaryText: $euiColorPrimary60 !default; +$euiColorAccentText: $euiColorAccent60 !default; +$euiColorSuccessText: $euiColorSuccess60 !default; +$euiColorWarningText: $euiColorWarning30 !default; +$euiColorDangerText: $euiColorDanger60 !default; + +// Brand texts +$euiColorTextPrimary: $euiColorPrimary60 !default; +$euiColorTextAccent: $euiColorAccent60 !default; +$euiColorTextAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorTextSuccess: $euiColorSuccess60 !default; +$euiColorTextWarning: $euiColorWarning30 !default; +$euiColorTextDanger: $euiColorDanger60 !default; + +// Borders +$euiColorBorderBasePrimary: $euiColorPrimary120 !default; +$euiColorBorderBaseAccent: $euiColorAccent120 !default; +$euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary120 !default; +$euiColorBorderBaseSuccess: $euiColorSuccess120 !default; +$euiColorBorderBaseWarning: $euiColorWarning120 !default; +$euiColorBorderBaseDanger: $euiColorDanger120 !default; + +$euiColorBorderBasePlain: $euiColorShade100 !default; +$euiColorBorderBaseSubdued: $euiColorShade120 !default; +$euiColorBorderBaseDisabled: $euiColorShade100 !default; +$euiColorBorderBaseFloating: $euiColorShade120 !default; +$euiColorBorderBaseFormsColorSwatch: $euiColorPlainLightAlpha32 !default; +$euiColorBorderBaseFormsControl: $euiColorShade80 !default; + +$euiColorBorderStrongPrimary: $euiColorPrimary60 !default; +$euiColorBorderStrongAccent: $euiColorAccent60 !default; +$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorBorderStrongSuccess: $euiColorSuccess60 !default; +$euiColorBorderStrongWarning: $euiColorWarning40 !default; +$euiColorBorderStrongDanger: $euiColorDanger60 !default; + +// Charts +$euiColorChartLines: $euiColorShade85 !default; +$euiColorChartBand: $euiColorShade125 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts new file mode 100644 index 00000000000..c989a192c1b --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -0,0 +1,180 @@ +/* + * 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 { + type _EuiThemeBrandColors, + type _EuiThemeBrandTextColors, + type _EuiThemeShadeColors, + type _EuiThemeSpecialColors, + type _EuiThemeTextColors, + type _EuiThemeColorsMode, + _EuiThemeBackgroundColors, + _EuiThemeBorderColors, + _EuiThemeTransparentBackgroundColors, +} from '@elastic/eui-theme-common'; + +import { PRIMITIVE_COLORS } from './_primitive_colors'; +import { SEMANTIC_COLORS } from './_semantic_colors'; + +/* + * DARK THEME + */ + +export const dark_brand_colors: _EuiThemeBrandColors = { + primary: SEMANTIC_COLORS.primary60, + accent: SEMANTIC_COLORS.accent60, + accentSecondary: SEMANTIC_COLORS.accentSecondary60, + success: SEMANTIC_COLORS.success60, + warning: SEMANTIC_COLORS.warning40, + danger: SEMANTIC_COLORS.danger60, +}; + +export const dark_brand_text_colors: _EuiThemeBrandTextColors = { + /* Legacy colors */ + primaryText: SEMANTIC_COLORS.primary60, + accentText: SEMANTIC_COLORS.accent60, + successText: SEMANTIC_COLORS.success60, + warningText: SEMANTIC_COLORS.warning30, + dangerText: SEMANTIC_COLORS.danger60, + + /* New colors */ + textPrimary: SEMANTIC_COLORS.primary60, + textAccent: SEMANTIC_COLORS.accent60, + textAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + textSuccess: SEMANTIC_COLORS.success60, + textWarning: SEMANTIC_COLORS.warning30, + textDanger: SEMANTIC_COLORS.danger60, +}; + +export const dark_text_colors: _EuiThemeTextColors = { + /* Legacy colors */ + text: SEMANTIC_COLORS.shade30, + title: SEMANTIC_COLORS.shade20, + subduedText: SEMANTIC_COLORS.shade60, + link: SEMANTIC_COLORS.primary60, + + /* New colors */ + textParagraph: SEMANTIC_COLORS.shade30, + textHeading: SEMANTIC_COLORS.shade20, + textSubdued: SEMANTIC_COLORS.shade60, + textDisabled: SEMANTIC_COLORS.shade80, + textInverse: SEMANTIC_COLORS.plainDark, +}; + +export const dark_shades: _EuiThemeShadeColors = { + emptyShade: SEMANTIC_COLORS.shade145, + lightestShade: SEMANTIC_COLORS.shade135, + lightShade: SEMANTIC_COLORS.shade125, + mediumShade: SEMANTIC_COLORS.shade95, + darkShade: SEMANTIC_COLORS.shade75, + darkestShade: SEMANTIC_COLORS.shade30, + fullShade: SEMANTIC_COLORS.plainLight, +}; + +export const dark_background_colors: _EuiThemeBackgroundColors = { + backgroundBasePrimary: SEMANTIC_COLORS.primary140, + backgroundBaseAccent: SEMANTIC_COLORS.accent140, + backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary140, + backgroundBaseSuccess: SEMANTIC_COLORS.success140, + backgroundBaseWarning: SEMANTIC_COLORS.warning140, + backgroundBaseDanger: SEMANTIC_COLORS.danger140, + backgroundBaseSubdued: SEMANTIC_COLORS.plainDark, + backgroundBasePlain: SEMANTIC_COLORS.shade145, + backgroundBaseDisabled: SEMANTIC_COLORS.shade130, + backgroundBaseHighlighted: SEMANTIC_COLORS.shade135, + + backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade125, + backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120, + + backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha8, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary130, + backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70, + + backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16, + backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.plainLightAlpha8, + + backgroundLightPrimary: SEMANTIC_COLORS.primary130, + backgroundLightAccent: SEMANTIC_COLORS.accent130, + backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary130, + backgroundLightSuccess: SEMANTIC_COLORS.success130, + backgroundLightWarning: SEMANTIC_COLORS.warning130, + backgroundLightDanger: SEMANTIC_COLORS.danger130, + backgroundLightText: SEMANTIC_COLORS.shade130, + + backgroundFilledPrimary: SEMANTIC_COLORS.primary60, + backgroundFilledAccent: SEMANTIC_COLORS.accent60, + backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + backgroundFilledSuccess: SEMANTIC_COLORS.success60, + backgroundFilledWarning: SEMANTIC_COLORS.warning40, + backgroundFilledDanger: SEMANTIC_COLORS.danger60, + backgroundFilledText: SEMANTIC_COLORS.shade60, +}; + +/** + * NOTE: temp values for migration - these should not be used, + * use backgroundBase tokens instead + * TODO: remove once obsolete + */ +export const dark_transparent_background_colors: _EuiThemeTransparentBackgroundColors = + { + backgroundTransparent: PRIMITIVE_COLORS.transparent, + backgroundTransparentPrimary: dark_background_colors.backgroundBasePrimary, + backgroundTransparentAccent: dark_background_colors.backgroundBaseAccent, + backgroundTransparentAccentSecondary: + dark_background_colors.backgroundBaseAccent, + backgroundTransparentSuccess: dark_background_colors.backgroundBaseSuccess, + backgroundTransparentWarning: dark_background_colors.backgroundBaseWarning, + backgroundTransparentDanger: dark_background_colors.backgroundBaseDanger, + backgroundTransparentSubdued: dark_background_colors.backgroundBaseSubdued, + backgroundTransparentHighlighted: + dark_background_colors.backgroundBaseSubdued, + backgroundTransparentPlain: dark_background_colors.backgroundBasePlain, + }; + +export const dark_border_colors: _EuiThemeBorderColors = { + borderBasePrimary: SEMANTIC_COLORS.primary120, + borderBaseAccent: SEMANTIC_COLORS.accent120, + borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary120, + borderBaseSuccess: SEMANTIC_COLORS.success120, + borderBaseWarning: SEMANTIC_COLORS.warning120, + borderBaseDanger: SEMANTIC_COLORS.danger120, + + borderBasePlain: SEMANTIC_COLORS.shade100, + borderBaseSubdued: SEMANTIC_COLORS.shade120, + borderBaseDisabled: SEMANTIC_COLORS.shade100, + borderBaseFloating: SEMANTIC_COLORS.shade120, + + borderBaseFormsColorSwatch: SEMANTIC_COLORS.plainLightAlpha32, + borderBaseFormsControl: SEMANTIC_COLORS.shade80, + + borderStrongPrimary: SEMANTIC_COLORS.primary60, + borderStrongAccent: SEMANTIC_COLORS.accent60, + borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + borderStrongSuccess: SEMANTIC_COLORS.success60, + borderStrongWarning: SEMANTIC_COLORS.warning40, + borderStrongDanger: SEMANTIC_COLORS.danger60, +}; + +export const dark_special_colors: _EuiThemeSpecialColors = { + body: SEMANTIC_COLORS.plainDark, + highlight: SEMANTIC_COLORS.primary100, + disabled: SEMANTIC_COLORS.shade130, + disabledText: SEMANTIC_COLORS.shade80, + shadow: PRIMITIVE_COLORS.black, +}; + +export const dark_colors: _EuiThemeColorsMode = { + ...dark_brand_colors, + ...dark_shades, + ...dark_special_colors, + ...dark_brand_text_colors, + ...dark_text_colors, + ...dark_background_colors, + ...dark_transparent_background_colors, + ...dark_border_colors, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss new file mode 100644 index 00000000000..667ea531c29 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -0,0 +1,124 @@ +// stylelint-disable color-no-hex + +// This extra import allows any variables that are created via functions to work when loaded into JS +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; + +@import 'semantic_colors'; + +// These colors stay the same no matter the theme +// @deprecated +$euiColorGhost: $euiColorWhite !default; +$euiColorInk: $euiColorBlack !default; + +// Brand +$euiColorPrimary: $euiColorPrimary90 !default; +$euiColorAccent: $euiColorAccent90 !default; +$euiColorAccentSecondary: $euiColorAccentSecondary90 !default; +$euiColorSuccess: $euiColorSuccess90 !default; +$euiColorWarning: $euiColorWarning40 !default; +$euiColorDanger: $euiColorDanger90 !default; + +// Shades +$euiColorEmptyShade: $euiColorPlainLight !default; +$euiColorLightestShade: $euiColorShade15 !default; +$euiColorLightShade: $euiColorShade30 !default; +$euiColorMediumShade: $euiColorShade60 !default; +$euiColorDarkShade: $euiColorShade90 !default; +$euiColorDarkestShade: $euiColorShade120 !default; +$euiColorFullShade: $euiColorPlainDark !default; + +// Backgrounds +$euiPageBackgroundColor: $euiColorShade10 !default; // deprecated +$euiColorHighlight: $euiColorPrimary10 !default; + +$euiColorBackgroundBasePrimary: $euiColorPrimary10 !default; +$euiColorBackgroundBaseAccent: $euiColorAccent10 !default; +$euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary10 !default; +$euiColorBackgroundBaseSuccess: $euiColorSuccess10 !default; +$euiColorBackgroundBaseWarning: $euiColorWarning10 !default; +$euiColorBackgroundBaseDanger: $euiColorDanger10 !default; +$euiColorBackgroundBaseSubdued: $euiColorShade10 !default; +$euiColorBackgroundBasePlain: $euiColorPlainLight !default; +$euiColorBackgroundBaseDisabled: $euiColorShade15 !default; +$euiColorBackgroundBaseHighlighted: $euiColorShade10 !default; +$euiColorBackgroundBaseFormsPrepend: $euiColorShade15 !default; +$euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default; + +$euiColorBackgroundBaseInteractiveHover: $euiColorPrimary100Alpha4 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorPrimary10 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShade100Alpha70 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorShade100Alpha16 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default; + +$euiColorBackgroundLightPrimary: $euiColorPrimary20 !default; +$euiColorBackgroundLightAccent: $euiColorAccent20 !default; +$euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary20 !default; +$euiColorBackgroundLightSuccess: $euiColorSuccess20 !default; +$euiColorBackgroundLightWarning: $euiColorWarning20 !default; +$euiColorBackgroundLightDanger: $euiColorDanger20 !default; +$euiColorBackgroundLightText: $euiColorShade20 !default; + +$euiColorBackgroundFilledPrimary: $euiColorPrimary90 !default; +$euiColorBackgroundFilledAccent: $euiColorAccent90 !default; +$euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary90 !default; +$euiColorBackgroundFilledSuccess: $euiColorSuccess90 !default; +$euiColorBackgroundFilledWarning: $euiColorWarning40 !default; +$euiColorBackgroundFilledDanger: $euiColorDanger90 !default; +$euiColorBackgroundFilledText: $euiColorShade90 !default; + +// Texts (legacy) +$euiTextColor: $euiColorShade130 !default; +$euiTitleColor: $euiColorShade140 !default; +$euiTextSubduedColor: $euiColorShade95 !default; +$euiColorDisabled: $euiColorBackgroundBaseDisabled !default; +$euiColorDisabledText: $euiColorShade70 !default; +$euiLinkColor: $euiColorPrimary100 !default; + +// Texts +$euiColorTextParagraph: $euiColorShade130 !default; +$euiColorTextHeading: $euiColorShade140 !default; +$euiColorTextSubdued: $euiColorShade95 !default; +$euiColorTextDisabled: $euiColorShade70 !default; +$euiColorTextInverse: $euiColorPlainLight !default; + +// Brand texts (legacy) +$euiColorPrimaryText: $euiColorPrimary100 !default; +$euiColorAccentText: $euiColorAccent100 !default; +$euiColorSuccessText: $euiColorSuccess100 !default; +$euiColorWarningText: $euiColorWarning110 !default; +$euiColorDangerText: $euiColorDanger100 !default; + +// Brand texts +$euiColorTextPrimary: $euiColorPrimary100 !default; +$euiColorTextAccent: $euiColorAccent100 !default; +$euiColorTextAccentSecondary: $euiColorAccentSecondary100 !default; +$euiColorTextSuccess: $euiColorSuccess100 !default; +$euiColorTextWarning: $euiColorWarning110 !default; +$euiColorTextDanger: $euiColorDanger100 !default; + +// Borders +$euiColorBorderBasePrimary: $euiColorPrimary30 !default; +$euiColorBorderBaseAccent: $euiColorAccent30 !default; +$euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary30 !default; +$euiColorBorderBaseSuccess: $euiColorSuccess30 !default; +$euiColorBorderBaseWarning: $euiColorWarning30 !default; +$euiColorBorderBaseDanger: $euiColorDanger30 !default; + +$euiColorBorderBasePlain: $euiColorShade30 !default; +$euiColorBorderBaseSubdued: $euiColorShade20 !default; +$euiColorBorderBaseDisabled: $euiColorShade30 !default; +$euiColorBorderBaseFloating: $euiColorTransparent !default; + +$euiColorBorderBaseFormsColorSwatch: $euiColorShade100Alpha24 !default; +$euiColorBorderBaseFormsControl: $euiColorShade60 !default; + +$euiColorBorderStrongPrimary: $euiColorPrimary100 !default; +$euiColorBorderStrongAccent: $euiColorAccent100 !default; +$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary100 !default; +$euiColorBorderStrongSuccess: $euiColorSuccess100 !default; +$euiColorBorderStrongWarning: $euiColorWarning100 !default; +$euiColorBorderStrongDanger: $euiColorDanger100 !default; + +// Charts +$euiColorChartLines: $euiColorShade30 !default; +$euiColorChartBand: $euiColorShade10 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts new file mode 100644 index 00000000000..cb03fd3e03b --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -0,0 +1,179 @@ +/* + * 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 { + type _EuiThemeBrandColors, + type _EuiThemeBrandTextColors, + type _EuiThemeShadeColors, + type _EuiThemeSpecialColors, + type _EuiThemeTextColors, + type _EuiThemeColorsMode, + _EuiThemeBackgroundColors, + _EuiThemeBorderColors, + _EuiThemeTransparentBackgroundColors, +} from '@elastic/eui-theme-common'; + +import { PRIMITIVE_COLORS } from './_primitive_colors'; +import { SEMANTIC_COLORS } from './_semantic_colors'; + +/* + * LIGHT THEME + */ + +export const brand_colors: _EuiThemeBrandColors = { + primary: SEMANTIC_COLORS.primary90, + accent: SEMANTIC_COLORS.accent90, + accentSecondary: SEMANTIC_COLORS.accentSecondary90, + success: SEMANTIC_COLORS.success90, + warning: SEMANTIC_COLORS.warning40, + danger: SEMANTIC_COLORS.danger90, +}; + +export const brand_text_colors: _EuiThemeBrandTextColors = { + /* Legacy colors */ + primaryText: SEMANTIC_COLORS.primary100, + accentText: SEMANTIC_COLORS.accent100, + successText: SEMANTIC_COLORS.success100, + warningText: SEMANTIC_COLORS.warning110, + dangerText: SEMANTIC_COLORS.danger100, + + /* New colors */ + textPrimary: SEMANTIC_COLORS.primary100, + textAccent: SEMANTIC_COLORS.accent100, + textAccentSecondary: SEMANTIC_COLORS.accentSecondary100, + textSuccess: SEMANTIC_COLORS.success100, + textWarning: SEMANTIC_COLORS.warning110, + textDanger: SEMANTIC_COLORS.danger100, +}; + +export const text_colors: _EuiThemeTextColors = { + /* Legacy colors */ + text: SEMANTIC_COLORS.shade130, + title: SEMANTIC_COLORS.shade140, + subduedText: SEMANTIC_COLORS.shade95, + link: SEMANTIC_COLORS.primary100, + + /* New colors */ + textParagraph: SEMANTIC_COLORS.shade130, + textHeading: SEMANTIC_COLORS.shade140, + textSubdued: SEMANTIC_COLORS.shade95, + textDisabled: SEMANTIC_COLORS.shade70, + textInverse: SEMANTIC_COLORS.plainLight, +}; + +export const shade_colors: _EuiThemeShadeColors = { + emptyShade: SEMANTIC_COLORS.plainLight, + lightestShade: SEMANTIC_COLORS.shade15, + lightShade: SEMANTIC_COLORS.shade30, + mediumShade: SEMANTIC_COLORS.shade60, + darkShade: SEMANTIC_COLORS.shade90, + darkestShade: SEMANTIC_COLORS.shade120, + fullShade: SEMANTIC_COLORS.plainDark, +}; + +export const background_colors: _EuiThemeBackgroundColors = { + backgroundBasePrimary: SEMANTIC_COLORS.primary10, + backgroundBaseAccent: SEMANTIC_COLORS.accent10, + backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary10, + backgroundBaseSuccess: SEMANTIC_COLORS.success10, + backgroundBaseWarning: SEMANTIC_COLORS.warning10, + backgroundBaseDanger: SEMANTIC_COLORS.danger10, + backgroundBaseSubdued: SEMANTIC_COLORS.shade10, + backgroundBasePlain: SEMANTIC_COLORS.plainLight, + backgroundBaseDisabled: SEMANTIC_COLORS.shade15, + backgroundBaseHighlighted: SEMANTIC_COLORS.shade10, + + backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade15, + backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade30, + + backgroundBaseInteractiveHover: SEMANTIC_COLORS.primary100Alpha4, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary10, + backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade100Alpha70, + + backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shade100Alpha16, + backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.shade100Alpha4, + + backgroundLightPrimary: SEMANTIC_COLORS.primary20, + backgroundLightAccent: SEMANTIC_COLORS.accent20, + backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary20, + backgroundLightSuccess: SEMANTIC_COLORS.success20, + backgroundLightWarning: SEMANTIC_COLORS.warning20, + backgroundLightDanger: SEMANTIC_COLORS.danger20, + backgroundLightText: SEMANTIC_COLORS.shade20, + + backgroundFilledPrimary: SEMANTIC_COLORS.primary90, + backgroundFilledAccent: SEMANTIC_COLORS.accent90, + backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary90, + backgroundFilledSuccess: SEMANTIC_COLORS.success90, + backgroundFilledWarning: SEMANTIC_COLORS.warning40, + backgroundFilledDanger: SEMANTIC_COLORS.danger90, + backgroundFilledText: SEMANTIC_COLORS.shade90, +}; + +/** + * NOTE: temp values for migration - these should not be used, + * use backgroundBase tokens instead + * TODO: remove once obsolete + */ +export const transparent_background_colors: _EuiThemeTransparentBackgroundColors = + { + backgroundTransparent: PRIMITIVE_COLORS.transparent, + backgroundTransparentPrimary: background_colors.backgroundBasePrimary, + backgroundTransparentAccent: background_colors.backgroundBaseAccent, + backgroundTransparentAccentSecondary: + background_colors.backgroundBaseAccentSecondary, + backgroundTransparentSuccess: background_colors.backgroundBaseSuccess, + backgroundTransparentWarning: background_colors.backgroundBaseWarning, + backgroundTransparentDanger: background_colors.backgroundBaseDanger, + backgroundTransparentSubdued: SEMANTIC_COLORS.shade15, + backgroundTransparentHighlighted: SEMANTIC_COLORS.shade15, + backgroundTransparentPlain: SEMANTIC_COLORS.shade15, + }; + +export const border_colors: _EuiThemeBorderColors = { + borderBasePrimary: SEMANTIC_COLORS.primary30, + borderBaseAccent: SEMANTIC_COLORS.accent30, + borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary30, + borderBaseSuccess: SEMANTIC_COLORS.success30, + borderBaseWarning: SEMANTIC_COLORS.warning30, + borderBaseDanger: SEMANTIC_COLORS.danger30, + + borderBasePlain: SEMANTIC_COLORS.shade30, + borderBaseSubdued: SEMANTIC_COLORS.shade20, + borderBaseDisabled: SEMANTIC_COLORS.shade30, + borderBaseFloating: PRIMITIVE_COLORS.transparent, + + borderBaseFormsColorSwatch: SEMANTIC_COLORS.shade100Alpha24, + borderBaseFormsControl: SEMANTIC_COLORS.shade60, + + borderStrongPrimary: SEMANTIC_COLORS.primary100, + borderStrongAccent: SEMANTIC_COLORS.accent100, + borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary100, + borderStrongSuccess: SEMANTIC_COLORS.success100, + borderStrongWarning: SEMANTIC_COLORS.warning100, + borderStrongDanger: SEMANTIC_COLORS.danger100, +}; + +export const special_colors: _EuiThemeSpecialColors = { + body: SEMANTIC_COLORS.shade10, + highlight: SEMANTIC_COLORS.primary10, + disabled: SEMANTIC_COLORS.shade20, + disabledText: SEMANTIC_COLORS.shade80, + shadow: PRIMITIVE_COLORS.black, +}; + +export const light_colors: _EuiThemeColorsMode = { + ...brand_colors, + ...shade_colors, + ...special_colors, + ...brand_text_colors, + ...text_colors, + ...background_colors, + ...transparent_background_colors, + ...border_colors, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss new file mode 100644 index 00000000000..a06c6f53367 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss @@ -0,0 +1,72 @@ +// Visualization colors +// stylelint-disable color-no-hex + +// Maps allow for easier JSON usage +// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +$euiPaletteColorBlind: ( + euiColorVis0: ( + graphic: #00BEB8, + behindText: #00BEB8, + ), + euiColorVis1: ( + graphic: #93E5E0, + behindText: #93E5E0, + ), + euiColorVis2: ( + graphic: #599DFF, + behindText: #599DFF, + ), + euiColorVis3: ( + graphic: #B4D5FF, + behindText: #B4D5FF, + ), + euiColorVis4: ( + graphic: #ED6BA2, + behindText: #ED6BA2, + ), + euiColorVis5: ( + graphic: #FFBED5, + behindText: #FFBED5, + ), + euiColorVis6: ( + graphic: #F66D64, + behindText: #F66D64, + ), + euiColorVis7: ( + graphic: #FFC0B8, + behindText: #FFC0B8, + ), + euiColorVis8: ( + graphic: #ED9E00, + behindText: #ED9E00, + ), + euiColorVis9: ( + graphic: #FFD569, + behindText: #FFD569, + ) +) !default; + +$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind); + +$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default; +$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default; +$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default; +$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default; +$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default; +$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default; +$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default; +$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default; +$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default; +$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default; + +$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default; +$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default; +$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default; +$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default; +$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default; +$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default; +$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default; +$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default; +$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default; +$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts new file mode 100644 index 00000000000..c2d7d03df47 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts @@ -0,0 +1,128 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { _EuiThemeVisColors } from '@elastic/eui-theme-common'; + +import { SEMANTIC_COLORS } from './_semantic_colors'; +import { PRIMITIVE_COLORS } from './_primitive_colors'; + +// Maps allow for easier JSON usage +// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +const euiPaletteColorBlind = { + euiColorVis0: { + graphic: SEMANTIC_COLORS.accentSecondary60, + }, + euiColorVis1: { + graphic: SEMANTIC_COLORS.accentSecondary30, + }, + euiColorVis2: { + graphic: SEMANTIC_COLORS.primary60, + }, + euiColorVis3: { + graphic: SEMANTIC_COLORS.primary30, + }, + euiColorVis4: { + graphic: SEMANTIC_COLORS.accent60, + }, + euiColorVis5: { + graphic: SEMANTIC_COLORS.accent30, + }, + euiColorVis6: { + graphic: SEMANTIC_COLORS.danger60, + }, + euiColorVis7: { + graphic: SEMANTIC_COLORS.danger30, + }, + euiColorVis8: { + graphic: SEMANTIC_COLORS.warning60, + }, + euiColorVis9: { + graphic: SEMANTIC_COLORS.warning30, + }, +}; + +export const colorVis: _EuiThemeVisColors = { + euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, + euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, + euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, + euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, + euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, + euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, + euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, + euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, + euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, + euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, + + euiColorVisBehindText0: euiPaletteColorBlind.euiColorVis0.graphic, + euiColorVisBehindText1: euiPaletteColorBlind.euiColorVis1.graphic, + euiColorVisBehindText2: euiPaletteColorBlind.euiColorVis2.graphic, + euiColorVisBehindText3: euiPaletteColorBlind.euiColorVis3.graphic, + euiColorVisBehindText4: euiPaletteColorBlind.euiColorVis4.graphic, + euiColorVisBehindText5: euiPaletteColorBlind.euiColorVis5.graphic, + euiColorVisBehindText6: euiPaletteColorBlind.euiColorVis6.graphic, + euiColorVisBehindText7: euiPaletteColorBlind.euiColorVis7.graphic, + euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.graphic, + euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.graphic, + + euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100, + euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100, + euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100, + euiColorVisAsTextLight3: SEMANTIC_COLORS.danger100, + euiColorVisAsTextLight4: SEMANTIC_COLORS.warning100, + euiColorVisAsTextLight5: SEMANTIC_COLORS.success100, + euiColorVisAsTextLight6: SEMANTIC_COLORS.assistance100, + + euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60, + euiColorVisAsTextDark1: SEMANTIC_COLORS.primary60, + euiColorVisAsTextDark2: SEMANTIC_COLORS.accent60, + euiColorVisAsTextDark3: SEMANTIC_COLORS.danger60, + euiColorVisAsTextDark4: SEMANTIC_COLORS.warning60, + euiColorVisAsTextDark5: SEMANTIC_COLORS.success60, + euiColorVisAsTextDark6: SEMANTIC_COLORS.assistance60, + + euiColorVisSuccess0: SEMANTIC_COLORS.success60, + euiColorVisSuccess1: SEMANTIC_COLORS.success30, + euiColorVisWarning0: SEMANTIC_COLORS.warning30, + euiColorVisDanger0: SEMANTIC_COLORS.danger60, + euiColorVisDanger1: SEMANTIC_COLORS.danger30, + + euiColorVisNeutral0: PRIMITIVE_COLORS.mutedGrey10, + + euiColorSeverity0: PRIMITIVE_COLORS.mutedGrey20, + euiColorSeverity1: SEMANTIC_COLORS.shade90, + euiColorSeverity2: SEMANTIC_COLORS.shade75, + euiColorSeverity3: SEMANTIC_COLORS.shade60, + euiColorSeverity4: SEMANTIC_COLORS.shade45, + euiColorSeverity5: SEMANTIC_COLORS.shade30, + euiColorSeverity6: SEMANTIC_COLORS.warning20, + euiColorSeverity7: SEMANTIC_COLORS.warning30, + euiColorSeverity8: SEMANTIC_COLORS.danger30, + euiColorSeverity9: SEMANTIC_COLORS.danger40, + euiColorSeverity10: SEMANTIC_COLORS.danger50, + euiColorSeverity11: SEMANTIC_COLORS.danger60, + euiColorSeverity12: SEMANTIC_COLORS.danger70, + euiColorSeverity13: SEMANTIC_COLORS.danger80, + euiColorSeverity14: SEMANTIC_COLORS.danger90, + + euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30, + euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60, + euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90, + euiColorVisGrey3: PRIMITIVE_COLORS.blueGrey130, + + euiColorVisWarm0: SEMANTIC_COLORS.danger10, + euiColorVisWarm1: SEMANTIC_COLORS.danger40, + euiColorVisWarm2: SEMANTIC_COLORS.danger60, + + euiColorVisCool0: SEMANTIC_COLORS.primary10, + euiColorVisCool1: SEMANTIC_COLORS.primary40, + euiColorVisCool2: SEMANTIC_COLORS.primary60, + + euiColorVisComplementary0: SEMANTIC_COLORS.primary60, + euiColorVisComplementary1: SEMANTIC_COLORS.warning60, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts new file mode 100644 index 00000000000..128d145f947 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts @@ -0,0 +1,178 @@ +/* + * 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. + */ + +export const PRIMITIVE_COLORS = { + white: '#FFFFFF', + black: '#000000', + mutedBlack: '#0E0F12', + blueBlack: '#07101F', + transparent: 'transparent', + + mutedGrey10: '#F6F9FC', + mutedGrey15: '#EDEFF3', + mutedGrey20: '#E3E6EB', + mutedGrey25: '#D9DDE3', + mutedGrey30: '#D0D4DA', + mutedGrey35: '#C6CBD2', + mutedGrey40: '#BDC2CA', + mutedGrey45: '#B3B9C2', + mutedGrey50: '#AAB0BA', + mutedGrey55: '#A1A8B2', + mutedGrey60: '#989FAA', + mutedGrey65: '#8F96A2', + mutedGrey70: '#868E9A', + mutedGrey75: '#7E8691', + mutedGrey80: '#767D89', + mutedGrey85: '#6E7581', + mutedGrey90: '#666D78', + mutedGrey95: '#5D6570', + mutedGrey100: '#555C67', + mutedGrey105: '#4D545E', + mutedGrey110: '#464C56', + mutedGrey115: '#3F444D', + mutedGrey120: '#373D45', + mutedGrey125: '#30353C', + mutedGrey130: '#292E34', + mutedGrey135: '#23262C', + mutedGrey140: '#1C1F24', + mutedGrey145: '#16181D', + + blueGrey10: '#F6F9FC', + blueGrey15: '#ECF1F9', + blueGrey20: '#E3E8F2', + blueGrey25: '#D6DDEA', + blueGrey30: '#CAD3E2', + blueGrey35: '#C0CCDD', + blueGrey40: '#B4C1D5', + blueGrey45: '#ABB9D0', + blueGrey50: '#A2B1C9', + blueGrey55: '#98A8C3', + blueGrey60: '#8E9FBC', + blueGrey65: '#8497B7', + blueGrey70: '#798EAF', + blueGrey75: '#7186A8', + blueGrey80: '#6A7FA0', + blueGrey85: '#627593', + blueGrey90: '#5A6D8C', + blueGrey95: '#516381', + blueGrey100: '#485975', + blueGrey105: '#3F4F69', + blueGrey110: '#384861', + blueGrey115: '#324058', + blueGrey120: '#2B394F', + blueGrey125: '#243147', + blueGrey130: '#1D2A3E', + blueGrey135: '#172336', + blueGrey140: '#111C2C', + blueGrey145: '#0B1628', + + blue10: '#E8F1FF', + blue20: '#D9E8FF', + blue30: '#BFDBFF', + blue40: '#A3CBFF', + blue50: '#85B7FF', + blue60: '#61A2FF', + blue70: '#3788FF', + blue80: '#2476F0', + blue90: '#0B64DD', + blue100: '#1750BA', + blue110: '#154399', + blue120: '#123778', + blue130: '#0D2F5E', + blue140: '#0A2342', + + teal10: '#E2F9F7', + teal20: '#C9F3F0', + teal30: '#A6EDEA', + teal40: '#77E5E0', + teal50: '#51D6D2', + teal60: '#16C5C0', + teal70: '#00B0AA', + teal80: '#009E99', + teal90: '#008B87', + teal100: '#047471', + teal110: '#065B58', + teal120: '#044949', + teal130: '#023436', + teal140: '#03282B', + + pink10: '#FFEBF5', + pink20: '#FDDDE9', + pink30: '#FFC7DB', + pink40: '#FBADCA', + pink50: '#F58EB7', + pink60: '#EE72A6', + pink70: '#E54A91', + pink80: '#D13680', + pink90: '#BC1E70', + pink100: '#A11262', + pink110: '#831652', + pink120: '#5E2140', + pink130: '#481E32', + pink140: '#351725', + + green10: '#E2F8F0', + green20: '#C9F3E3', + green30: '#AEE8D2', + green40: '#88E3C3', + green50: '#59CFAA', + green60: '#24C292', + green70: '#04AE7E', + green80: '#00996B', + green90: '#008A5E', + green100: '#09724D', + green110: '#0C5A3F', + green120: '#094837', + green130: '#0D362B', + green140: '#092A26', + + yellow10: '#FDF3D8', + yellow20: '#FDE9B5', + yellow30: '#FCD883', + yellow40: '#FACB3D', + yellow50: '#F5BC00', + yellow60: '#EAAE01', + yellow70: '#CA9601', + yellow80: '#AD7E00', + yellow90: '#966B03', + yellow100: '#825803', + yellow110: '#6A4906', + yellow120: '#513910', + yellow130: '#3D3014', + yellow140: '#2C2721', + + red10: '#FFE8E5', + red20: '#FDDDD8', + red30: '#FFC9C2', + red40: '#FFB5AD', + red50: '#FC9188', + red60: '#F6726A', + red70: '#EE4C48', + red80: '#DA3737', + red90: '#C61E25', + red100: '#A71627', + red110: '#7F1F27', + red120: '#5E2129', + red130: '#491D27', + red140: '#351721', + + purple10: '#F3ECFE', + purple20: '#ECE2FE', + purple30: '#DECDFE', + purple40: '#CEB6FC', + purple50: '#BF9CF9', + purple60: '#B084F5', + purple70: '#A36DEF', + purple80: '#925CDA', + purple90: '#8144CC', + purple100: '#6B3C9F', + purple110: '#52357E', + purple120: '#3E2C63', + purple130: '#322452', + purple140: '#2A1E3E', +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss new file mode 100644 index 00000000000..ed5ece438ae --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -0,0 +1,185 @@ +/** + * contains primitive & semantic colors + * Temp. manually created file + * TODO: automatically generate scss variable files + */ + + +$euiColorWhite: #FFFFFF !default; +$euiColorBlack: #000000 !default; +$euiColorMutedBlack: #0E0F12 !default; +$euiColorBlueBlack: #050F21 !default; +$euiColorTransparent: 'transparent' !default; + +$euiColorPlainLight: $euiColorWhite !default; +$euiColorPlainDark: $euiColorBlueBlack !default; + +$euiColorPlainLightAlpha8: rgba($euiColorPlainLight, 0.08) !default; +$euiColorPlainLightAlpha12: rgba($euiColorPlainLight, 0.12) !default; +$euiColorPlainLightAlpha16: rgba($euiColorPlainLight, 0.16) !default; +$euiColorPlainLightAlpha32: rgba($euiColorPlainLight, 0.32) !default; + +$euiColorPrimary10: #E8F1FF !default; +$euiColorPrimary20: #D9E8FF !default; +$euiColorPrimary30: #BFDBFF !default; +$euiColorPrimary40: #A3CBFF !default; +$euiColorPrimary50: #85B7FF !default; +$euiColorPrimary60: #61A2FF !default; +$euiColorPrimary70: #3788FF !default; +$euiColorPrimary80: #2476F0 !default; +$euiColorPrimary90: #0B64DD !default; +$euiColorPrimary100: #1750BA !default; +$euiColorPrimary110: #154399 !default; +$euiColorPrimary120: #123778 !default; +$euiColorPrimary130: #0D2F5E !default; +$euiColorPrimary140: #0A2342 !default; + +$euiColorPrimary70Alpha12: rgba($euiColorPrimary70, 0.12) !default; +$euiColorPrimary70Alpha16: rgba($euiColorPrimary70, 0.16) !default; + +$euiColorPrimary100Alpha4: rgba($euiColorPrimary100, 0.04) !default; +$euiColorPrimary100Alpha8: rgba($euiColorPrimary100, 0.08) !default; +$euiColorPrimary100Alpha12: rgba($euiColorPrimary100, 0.12) !default; + +$euiColorAccent10: #FFEBF5 !default; +$euiColorAccent20: #FDDDE9 !default; +$euiColorAccent30: #FFC7DB !default; +$euiColorAccent40: #FBADCA !default; +$euiColorAccent50: #F58EB7 !default; +$euiColorAccent60: #EE72A6 !default; +$euiColorAccent70: #E54A91 !default; +$euiColorAccent80: #D13680 !default; +$euiColorAccent90: #BC1E70 !default; +$euiColorAccent100: #A11262 !default; +$euiColorAccent110: #831652 !default; +$euiColorAccent120: #5E2140 !default; +$euiColorAccent130: #481E32 !default; +$euiColorAccent140: #351725 !default; + +$euiColorAccent70Alpha12: rgba($euiColorAccent70, 0.12) !default; +$euiColorAccent70Alpha16: rgba($euiColorAccent70, 0.16) !default; + +$euiColorAccentSecondary10: #E2F9F7 !default; +$euiColorAccentSecondary20: #C9F3F0 !default; +$euiColorAccentSecondary30: #A6EDEA !default; +$euiColorAccentSecondary40: #77E5E0 !default; +$euiColorAccentSecondary50: #51D6D2 !default; +$euiColorAccentSecondary60: #16C5C0 !default; +$euiColorAccentSecondary70: #00B0AA !default; +$euiColorAccentSecondary80: #009E99 !default; +$euiColorAccentSecondary90: #008B87 !default; +$euiColorAccentSecondary100: #047471 !default; +$euiColorAccentSecondary110: #065B58 !default; +$euiColorAccentSecondary120: #044949 !default; +$euiColorAccentSecondary130: #023436 !default; +$euiColorAccentSecondary140: #03282B !default; + +$euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !default; +$euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !default; + +$euiColorSuccess10: #E2F8F0 !default; +$euiColorSuccess20: #C9F3E3 !default; +$euiColorSuccess30: #AEE8D2 !default; +$euiColorSuccess40: #88E3C3 !default; +$euiColorSuccess50: #59CFAA !default; +$euiColorSuccess60: #24C292 !default; +$euiColorSuccess70: #04AE7E !default; +$euiColorSuccess80: #00996B !default; +$euiColorSuccess90: #008A5E !default; +$euiColorSuccess100: #09724D !default; +$euiColorSuccess110: #0C5A3F !default; +$euiColorSuccess120: #094837 !default; +$euiColorSuccess130: #0D362B !default; +$euiColorSuccess140: #092A26 !default; + +$euiColorSuccess70Alpha12: rgba($euiColorSuccess70, 0.12) !default; +$euiColorSuccess70Alpha16: rgba($euiColorSuccess70, 0.16) !default; + +$euiColorWarning10: #FDF3D8 !default; +$euiColorWarning20: #FDE9B5 !default; +$euiColorWarning30: #FCD883 !default; +$euiColorWarning40: #FACB3D !default; +$euiColorWarning50: #F5BC00 !default; +$euiColorWarning60: #EAAE01 !default; +$euiColorWarning70: #CA9601 !default; +$euiColorWarning80: #AD7E00 !default; +$euiColorWarning90: #966B03 !default; +$euiColorWarning100: #825803 !default; +$euiColorWarning110: #6A4906 !default; +$euiColorWarning120: #513910 !default; +$euiColorWarning130: #3D3014 !default; +$euiColorWarning140: #2C2721 !default; + +$euiColorWarning40Alpha12: rgba($euiColorWarning40, 0.12) !default; +$euiColorWarning40Alpha24: rgba($euiColorWarning40, 0.24) !default; + +$euiColorDanger10: #FFE8E5 !default; +$euiColorDanger20: #FDDDD8 !default; +$euiColorDanger30: #FFC9C2 !default; +$euiColorDanger40: #FFB5AD !default; +$euiColorDanger50: #FC9188 !default; +$euiColorDanger60: #F6726A !default; +$euiColorDanger70: #EE4C48 !default; +$euiColorDanger80: #DA3737 !default; +$euiColorDanger90: #C61E25 !default; +$euiColorDanger100: #A71627 !default; +$euiColorDanger110: #7F1F27 !default; +$euiColorDanger120: #5E2129 !default; +$euiColorDanger130: #491D27 !default; +$euiColorDanger140: #351721 !default; + +$euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default; +$euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default; + +$euiColorAssistance10: #F3ECFE !default; +$euiColorAssistance20: #ECE2FE !default; +$euiColorAssistance30: #DECDFE !default; +$euiColorAssistance40: #CEB6FC !default; +$euiColorAssistance50: #BF9CF9 !default; +$euiColorAssistance60: #B084F5 !default; +$euiColorAssistance70: #A36DEF !default; +$euiColorAssistance80: #925CDA !default; +$euiColorAssistance90: #8144CC !default; +$euiColorAssistance100: #6B3C9F !default; +$euiColorAssistance110: #52357E !default; +$euiColorAssistance120: #3E2C63 !default; +$euiColorAssistance130: #322452 !default; +$euiColorAssistance140: #2A1E3E !default; + +$euiColorShade10: #F6F9FC !default; +$euiColorShade15: #ECF1F9 !default; +$euiColorShade20: #E3E8F2 !default; +$euiColorShade25: #D6DDEA !default; +$euiColorShade30: #CAD3E2 !default; +$euiColorShade35: #C0CCDD !default; +$euiColorShade40: #B4C1D5 !default; +$euiColorShade45: #ABB9D0 !default; +$euiColorShade50: #A2B1C9 !default; +$euiColorShade55: #98A8C3 !default; +$euiColorShade60: #8E9FBC !default; +$euiColorShade65: #8497B7 !default; +$euiColorShade70: #798EAF !default; +$euiColorShade75: #7186A8 !default; +$euiColorShade80: #6A7FA0 !default; +$euiColorShade85: #627593 !default; +$euiColorShade90: #5A6D8C !default; +$euiColorShade95: #516381 !default; +$euiColorShade100: #485975 !default; +$euiColorShade105: #3F4F69 !default; +$euiColorShade110: #384861 !default; +$euiColorShade115: #324058 !default; +$euiColorShade120: #2B394F !default; +$euiColorShade125: #243147 !default; +$euiColorShade130: #1D2A3E !default; +$euiColorShade135: #172336 !default; +$euiColorShade140: #111C2C !default; +$euiColorShade145: #0B1628 !default; + +$euiColorShade100Alpha4: rgba($euiColorShade100, 0.04) !default; +$euiColorShade100Alpha16: rgba($euiColorShade100, 0.16) !default; +$euiColorShade100Alpha24: rgba($euiColorShade100, 0.24) !default; +$euiColorShade100Alpha70: rgba($euiColorShade100, 0.7) !default; + +$euiColorShade120Alpha70: rgba($euiColorShade120, 0.7) !default; + + \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts new file mode 100644 index 00000000000..d96f124a54d --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -0,0 +1,203 @@ +/* + * 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 chroma from 'chroma-js'; +import { PRIMITIVE_COLORS } from './_primitive_colors'; + +const _semantic_colors = { + plainLight: PRIMITIVE_COLORS.white, + plainDark: PRIMITIVE_COLORS.blueBlack, + + primary10: PRIMITIVE_COLORS.blue10, + primary20: PRIMITIVE_COLORS.blue20, + primary30: PRIMITIVE_COLORS.blue30, + primary40: PRIMITIVE_COLORS.blue40, + primary50: PRIMITIVE_COLORS.blue50, + primary60: PRIMITIVE_COLORS.blue60, + primary70: PRIMITIVE_COLORS.blue70, + primary80: PRIMITIVE_COLORS.blue80, + primary90: PRIMITIVE_COLORS.blue90, + primary100: PRIMITIVE_COLORS.blue100, + primary110: PRIMITIVE_COLORS.blue110, + primary120: PRIMITIVE_COLORS.blue120, + primary130: PRIMITIVE_COLORS.blue130, + primary140: PRIMITIVE_COLORS.blue140, + + accent10: PRIMITIVE_COLORS.pink10, + accent20: PRIMITIVE_COLORS.pink20, + accent30: PRIMITIVE_COLORS.pink30, + accent40: PRIMITIVE_COLORS.pink40, + accent50: PRIMITIVE_COLORS.pink50, + accent60: PRIMITIVE_COLORS.pink60, + accent70: PRIMITIVE_COLORS.pink70, + accent80: PRIMITIVE_COLORS.pink80, + accent90: PRIMITIVE_COLORS.pink90, + accent100: PRIMITIVE_COLORS.pink100, + accent110: PRIMITIVE_COLORS.pink110, + accent120: PRIMITIVE_COLORS.pink120, + accent130: PRIMITIVE_COLORS.pink130, + accent140: PRIMITIVE_COLORS.pink140, + + accentSecondary10: PRIMITIVE_COLORS.teal10, + accentSecondary20: PRIMITIVE_COLORS.teal20, + accentSecondary30: PRIMITIVE_COLORS.teal30, + accentSecondary40: PRIMITIVE_COLORS.teal40, + accentSecondary50: PRIMITIVE_COLORS.teal50, + accentSecondary60: PRIMITIVE_COLORS.teal60, + accentSecondary70: PRIMITIVE_COLORS.teal70, + accentSecondary80: PRIMITIVE_COLORS.teal80, + accentSecondary90: PRIMITIVE_COLORS.teal90, + accentSecondary100: PRIMITIVE_COLORS.teal100, + accentSecondary110: PRIMITIVE_COLORS.teal110, + accentSecondary120: PRIMITIVE_COLORS.teal120, + accentSecondary130: PRIMITIVE_COLORS.teal130, + accentSecondary140: PRIMITIVE_COLORS.teal140, + + success10: PRIMITIVE_COLORS.green10, + success20: PRIMITIVE_COLORS.green20, + success30: PRIMITIVE_COLORS.green30, + success40: PRIMITIVE_COLORS.green40, + success50: PRIMITIVE_COLORS.green50, + success60: PRIMITIVE_COLORS.green60, + success70: PRIMITIVE_COLORS.green70, + success80: PRIMITIVE_COLORS.green80, + success90: PRIMITIVE_COLORS.green90, + success100: PRIMITIVE_COLORS.green100, + success110: PRIMITIVE_COLORS.green110, + success120: PRIMITIVE_COLORS.green120, + success130: PRIMITIVE_COLORS.green130, + success140: PRIMITIVE_COLORS.green140, + + warning10: PRIMITIVE_COLORS.yellow10, + warning20: PRIMITIVE_COLORS.yellow20, + warning30: PRIMITIVE_COLORS.yellow30, + warning40: PRIMITIVE_COLORS.yellow40, + warning50: PRIMITIVE_COLORS.yellow50, + warning60: PRIMITIVE_COLORS.yellow60, + warning70: PRIMITIVE_COLORS.yellow70, + warning80: PRIMITIVE_COLORS.yellow80, + warning90: PRIMITIVE_COLORS.yellow90, + warning100: PRIMITIVE_COLORS.yellow100, + warning110: PRIMITIVE_COLORS.yellow110, + warning120: PRIMITIVE_COLORS.yellow120, + warning130: PRIMITIVE_COLORS.yellow130, + warning140: PRIMITIVE_COLORS.yellow140, + + danger10: PRIMITIVE_COLORS.red10, + danger20: PRIMITIVE_COLORS.red20, + danger30: PRIMITIVE_COLORS.red30, + danger40: PRIMITIVE_COLORS.red40, + danger50: PRIMITIVE_COLORS.red50, + danger60: PRIMITIVE_COLORS.red60, + danger70: PRIMITIVE_COLORS.red70, + danger80: PRIMITIVE_COLORS.red80, + danger90: PRIMITIVE_COLORS.red90, + danger100: PRIMITIVE_COLORS.red100, + danger110: PRIMITIVE_COLORS.red110, + danger120: PRIMITIVE_COLORS.red120, + danger130: PRIMITIVE_COLORS.red130, + danger140: PRIMITIVE_COLORS.red140, + + assistance10: PRIMITIVE_COLORS.purple10, + assistance20: PRIMITIVE_COLORS.purple20, + assistance30: PRIMITIVE_COLORS.purple30, + assistance40: PRIMITIVE_COLORS.purple40, + assistance50: PRIMITIVE_COLORS.purple50, + assistance60: PRIMITIVE_COLORS.purple60, + assistance70: PRIMITIVE_COLORS.purple70, + assistance80: PRIMITIVE_COLORS.purple80, + assistance90: PRIMITIVE_COLORS.purple90, + assistance100: PRIMITIVE_COLORS.purple100, + assistance110: PRIMITIVE_COLORS.purple110, + assistance120: PRIMITIVE_COLORS.purple120, + assistance130: PRIMITIVE_COLORS.purple130, + assistance140: PRIMITIVE_COLORS.purple140, + + shade10: PRIMITIVE_COLORS.blueGrey10, + shade15: PRIMITIVE_COLORS.blueGrey15, + shade20: PRIMITIVE_COLORS.blueGrey20, + shade25: PRIMITIVE_COLORS.blueGrey25, + shade30: PRIMITIVE_COLORS.blueGrey30, + shade35: PRIMITIVE_COLORS.blueGrey35, + shade40: PRIMITIVE_COLORS.blueGrey40, + shade45: PRIMITIVE_COLORS.blueGrey45, + shade50: PRIMITIVE_COLORS.blueGrey50, + shade55: PRIMITIVE_COLORS.blueGrey55, + shade60: PRIMITIVE_COLORS.blueGrey60, + shade65: PRIMITIVE_COLORS.blueGrey65, + shade70: PRIMITIVE_COLORS.blueGrey70, + shade75: PRIMITIVE_COLORS.blueGrey75, + shade80: PRIMITIVE_COLORS.blueGrey80, + shade85: PRIMITIVE_COLORS.blueGrey85, + shade90: PRIMITIVE_COLORS.blueGrey90, + shade95: PRIMITIVE_COLORS.blueGrey95, + shade100: PRIMITIVE_COLORS.blueGrey100, + shade105: PRIMITIVE_COLORS.blueGrey105, + shade110: PRIMITIVE_COLORS.blueGrey110, + shade115: PRIMITIVE_COLORS.blueGrey115, + shade120: PRIMITIVE_COLORS.blueGrey120, + shade125: PRIMITIVE_COLORS.blueGrey125, + shade130: PRIMITIVE_COLORS.blueGrey130, + shade135: PRIMITIVE_COLORS.blueGrey135, + shade140: PRIMITIVE_COLORS.blueGrey140, + shade145: PRIMITIVE_COLORS.blueGrey145, +}; + +const plainLightRGB = chroma(_semantic_colors.plainLight).rgb().join(); +const primary70RGB = chroma(_semantic_colors.primary70).rgb().join(); +const primary100RGB = chroma(_semantic_colors.primary100).rgb().join(); +const accent70RGB = chroma(_semantic_colors.accent70).rgb().join(); +const accentSecondary70RGB = chroma(_semantic_colors.accentSecondary70) + .rgb() + .join(); +const success70RGB = chroma(_semantic_colors.success70).rgb().join(); +const warning40RGB = chroma(_semantic_colors.warning40).rgb().join(); +const danger70RGB = chroma(_semantic_colors.danger70).rgb().join(); +const shade100RGB = chroma(_semantic_colors.shade100).rgb().join(); +const shade120RGB = chroma(_semantic_colors.shade120).rgb().join(); + +const _semantic_alpha_colors = { + plainLightAlpha8: `rgba(${plainLightRGB}, 0.08)`, + plainLightAlpha12: `rgba(${plainLightRGB}, 0.12)`, + plainLightAlpha16: `rgba(${plainLightRGB}, 0.16)`, + plainLightAlpha32: `rgba(${plainLightRGB}, 0.32)`, + + primary70Alpha12: `rgba(${primary70RGB}, 0.12)`, + primary70Alpha16: `rgba(${primary70RGB}, 0.16)`, + + primary100Alpha4: `rgba(${primary100RGB}, 0.04)`, + primary100Alpha8: `rgba(${primary100RGB}, 0.08)`, + primary100Alpha12: `rgba(${primary100RGB}, 0.12)`, + + accent70Alpha12: `rgba(${accent70RGB}, 0.12)`, + accent70Alpha16: `rgba(${accent70RGB}, 0.16)`, + + accentSecondary70Alpha12: `rgba(${accentSecondary70RGB}, 0.12)`, + accentSecondary70Alpha16: `rgba(${accentSecondary70RGB}, 0.16)`, + + success70Alpha12: `rgba(${success70RGB}, 0.12)`, + success70Alpha16: `rgba(${success70RGB}, 0.16)`, + + warning40Alpha12: `rgba(${warning40RGB}, 0.12)`, + warning40Alpha24: `rgba(${warning40RGB}, 0.24)`, + + danger70Alpha12: `rgba(${danger70RGB}, 0.12)`, + danger70Alpha16: `rgba(${danger70RGB}, 0.16)`, + + shade100Alpha4: `rgba(${shade100RGB}, 0.04)`, + shade100Alpha16: `rgba(${shade100RGB}, 0.16)`, + shade100Alpha24: `rgba(${shade100RGB}, 0.24)`, + shade100Alpha70: `rgba(${shade100RGB}, 0.7)`, + + shade120Alpha70: `rgba(${shade120RGB}, 0.7)`, +}; + +export const SEMANTIC_COLORS = { + ..._semantic_colors, + ..._semantic_alpha_colors, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/index.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts new file mode 100644 index 00000000000..a6e61366653 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/index.ts @@ -0,0 +1,24 @@ +/* + * 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 type { _EuiThemeColors } from '@elastic/eui-theme-common'; + +import { SEMANTIC_COLORS } from './_semantic_colors'; +import { light_colors } from './_colors_light'; +import { dark_colors } from './_colors_dark'; +import { colorVis } from './_colors_vis'; + +export const colors: _EuiThemeColors = { + ghost: SEMANTIC_COLORS.plainLight, + ink: SEMANTIC_COLORS.plainDark, + plainLight: SEMANTIC_COLORS.plainLight, + plainDark: SEMANTIC_COLORS.plainDark, + LIGHT: light_colors, + DARK: dark_colors, + vis: colorVis, +}; diff --git a/packages/eui-theme-borealis/tsconfig.cjs.json b/packages/eui-theme-borealis/tsconfig.cjs.json new file mode 100644 index 00000000000..6becea42efa --- /dev/null +++ b/packages/eui-theme-borealis/tsconfig.cjs.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/cjs", + "target": "es6", + "module": "CommonJS", + "lib": [ + "es6", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/cjs/.tsbuildinfo", + "importHelpers": false, + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-borealis/tsconfig.json b/packages/eui-theme-borealis/tsconfig.json new file mode 100644 index 00000000000..31450bf12d6 --- /dev/null +++ b/packages/eui-theme-borealis/tsconfig.json @@ -0,0 +1,28 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/esm", + "target": "ES2020", + "module": "ESNext", + "lib": [ + "ESNext", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/esm/.tsbuildinfo" + }, + "include": [ + "src", + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-borealis/tsconfig.types.json b/packages/eui-theme-borealis/tsconfig.types.json new file mode 100644 index 00000000000..54e2031daae --- /dev/null +++ b/packages/eui-theme-borealis/tsconfig.types.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.cjs.json", + "compilerOptions": { + "outDir": "lib/cjs", + "declaration": true, + "declarationMap": true, + "isolatedModules": false, + "noEmit": false, + "allowJs": false, + "emitDeclarationOnly": true + }, + "exclude": ["node_modules", "**/*.test.ts"] +} \ No newline at end of file diff --git a/packages/eui-theme-common/.babelrc.js b/packages/eui-theme-common/.babelrc.js new file mode 100644 index 00000000000..0fc74dd1fe9 --- /dev/null +++ b/packages/eui-theme-common/.babelrc.js @@ -0,0 +1,27 @@ +module.exports = { + // We need to preserve comments as they are used by webpack for + // naming chunks during code-splitting. The compression step during + // bundling will remove them later. + comments: true, + + presets: [ + [ + '@babel/env', + { + // `targets` property set via `.browserslistrc` + useBuiltIns: process.env.NO_COREJS_POLYFILL ? false : 'usage', + corejs: !process.env.NO_COREJS_POLYFILL ? '3.6' : undefined, + modules: process.env.BABEL_MODULES + ? process.env.BABEL_MODULES === 'false' + ? false + : process.env.BABEL_MODULES + : 'commonjs', // babel's default is commonjs + }, + ], + ['@babel/react', { runtime: 'classic' }], + [ + '@babel/typescript', + { isTSX: true, allExtensions: true, allowDeclareFields: true }, + ], + ], +}; diff --git a/packages/eui-theme-common/.eslintignore b/packages/eui-theme-common/.eslintignore new file mode 100644 index 00000000000..c6be7e9a761 --- /dev/null +++ b/packages/eui-theme-common/.eslintignore @@ -0,0 +1,10 @@ +dist +node_modules +lib +types +**/*.d.ts +package.json +scripts +.eslintrc.js +babel.config.js +jest.config.js diff --git a/packages/eui-theme-common/.eslintplugin.js b/packages/eui-theme-common/.eslintplugin.js new file mode 100644 index 00000000000..25ddbe3db65 --- /dev/null +++ b/packages/eui-theme-common/.eslintplugin.js @@ -0,0 +1,3 @@ +exports.rules = { + 'require-license-header': require('./scripts/eslint-plugin-local/require_license_header.js'), +}; diff --git a/packages/eui-theme-common/.eslintrc.js b/packages/eui-theme-common/.eslintrc.js new file mode 100644 index 00000000000..e33853c0255 --- /dev/null +++ b/packages/eui-theme-common/.eslintrc.js @@ -0,0 +1,114 @@ +const SSPL_ELASTIC_2_0_LICENSE_HEADER = ` +/* + * 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. + */ +`; + +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + project: ['./tsconfig.json'], + ecmaFeatures: { + jsx: true, + }, + }, + settings: { + 'import/resolver': { + node: { + extensions: ['.ts', '.tsx', '.js', '.json'], + }, + }, + }, + extends: [ + 'plugin:@typescript-eslint/recommended', + // Prettier options need to come last, in order to override other style rules + 'plugin:prettier/recommended', + ], + plugins: ['local', 'import'], + rules: { + 'block-scoped-var': 'error', + camelcase: 'off', + 'dot-notation': ['error', { allowKeywords: true }], + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'guard-for-in': 'error', + 'new-cap': ['error', { capIsNewExceptions: ['Private'] }], + 'no-caller': 'error', + 'no-const-assign': 'error', + 'no-debugger': 'error', + 'no-empty': ['error', { allowEmptyCatch: true }], + 'no-eval': 'error', + 'no-extend-native': 'error', + 'no-global-assign': 'error', + 'no-loop-func': 'error', + 'no-restricted-globals': ['error', 'context'], + 'no-script-url': 'error', + 'no-sequences': 'error', + 'no-var': 'error', + 'no-with': 'error', + 'prefer-const': 'error', + 'prefer-template': 'error', + strict: ['error', 'never'], + 'valid-typeof': 'error', + + 'local/require-license-header': [ + 'warn', + { + license: SSPL_ELASTIC_2_0_LICENSE_HEADER, + }, + ], + + 'import/no-unresolved': ['error', { amd: true, commonjs: true }], + 'import/namespace': 'error', + 'import/default': 'error', + 'import/export': 'error', + 'import/no-named-as-default': 'error', + 'import/no-named-as-default-member': 'error', + 'import/no-duplicates': 'error', + + '@typescript-eslint/array-type': ['error', { default: 'array-simple' }], + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/explicit-member-accessibility': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/ban-tslint-comment': 'error', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-parameter-properties': 'off', + '@typescript-eslint/no-triple-slash-reference': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { argsIgnorePattern: '^_', ignoreRestSiblings: true }, + ], + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-empty-function': 'off', + // It"s all very well saying that some types are trivially inferrable, + // but being explicit is still clearer. + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/naming-convention': 'off', + '@typescript-eslint/ban-ts-comment': [ + 'error', + { + 'ts-ignore': 'allow-with-description', + 'ts-expect-error': 'allow-with-description', + }, + ], + '@typescript-eslint/consistent-type-exports': [ + 'error', + { fixMixedExportsWithInlineTypeSpecifier: false }, + ], + }, + overrides: [ + { + files: ['*.d.ts'], + rules: { + 'react/prefer-es6-class': 'off', + }, + }, + ], +}; diff --git a/packages/eui-theme-common/.gitignore b/packages/eui-theme-common/.gitignore new file mode 100644 index 00000000000..4450fe8d868 --- /dev/null +++ b/packages/eui-theme-common/.gitignore @@ -0,0 +1,11 @@ +# Dependencies +/node_modules + +# Production +/lib + +yarn-debug.log* +yarn-error.log* + +# Build-related files +.eslintcache \ No newline at end of file diff --git a/packages/eui-theme-common/.prettierrc b/packages/eui-theme-common/.prettierrc new file mode 100644 index 00000000000..b2f0fa8f00e --- /dev/null +++ b/packages/eui-theme-common/.prettierrc @@ -0,0 +1,7 @@ +{ + "parser": "typescript", + "printWidth": 80, + "semi": true, + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/packages/eui-theme-common/.stylelintrc.js b/packages/eui-theme-common/.stylelintrc.js new file mode 100644 index 00000000000..42adc41f28c --- /dev/null +++ b/packages/eui-theme-common/.stylelintrc.js @@ -0,0 +1,163 @@ +const camelCaseRegex = '^[a-z][\\w-]*$'; // Note: also allows `_` as part of BEM naming +const camelCaseValueRegex = '/^[a-z][\\w.]*$/'; // Note: also allows `.` for JS objects +const cssInJsVarRegex = '/\\${[a-zA-Z]+/'; + +module.exports = { + // @see https://stylelint.io/user-guide/rules + rules: { + // Enforce camelCase naming + 'selector-class-pattern': camelCaseRegex, + 'keyframes-name-pattern': camelCaseRegex, + 'custom-property-pattern': camelCaseRegex, + + // Opinionated rules + 'declaration-no-important': true, + 'max-nesting-depth': [ + 2, + { + ignore: ['blockless-at-rules', 'pseudo-classes'], + }, + ], + 'block-no-empty': true, + 'selector-no-qualifying-type': [ + true, + { + ignore: ['attribute'], // Allows input[type=search] + }, + ], + + // Non-Prettier newline rules + // Put a line-break between sections of CSS, but allow quick one-liners for legibility + 'rule-empty-line-before': [ + 'always-multi-line', + { + ignore: ['first-nested', 'after-comment'], + }, + ], + 'comment-empty-line-before': null, + 'declaration-empty-line-before': null, + + // Value preferences + 'number-max-precision': null, + // Attempt to catch/flag non-variable color values + 'color-named': 'never', + 'color-no-hex': true, + // Prefer lowercase values, except for font names and currentColor + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family', '/^\\$eui[\\w]+/'], // Allow fonts and Sass variables + ignoreKeywords: ['currentColor'], + }, + ], + 'declaration-block-no-duplicate-properties': [ + true, + { + ignore: ['consecutive-duplicates'], // We occasionally use duplicate property values for cross-browser fallbacks + }, + ], + + // TODO: It may be worth investigating and updating these rules to their more modern counterparts + 'color-function-notation': 'legacy', + 'alpha-value-notation': 'number', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'no-descending-specificity': null, + 'keyframe-selector-notation': null, + 'declaration-block-no-redundant-longhand-properties': null, + }, + overrides: [ + { + // TODO: Remove Sass-specific config & rules once we're completely off Sass + files: ['**/*.scss'], + ignoreFiles: [ + 'generator-eui/**/*.scss', + 'src/global_styling/react_date_picker/**/*.scss', + 'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss', + 'src/components/date_picker/react-datepicker/**/*.scss', + ], + extends: [ + 'stylelint-config-standard-scss', + 'stylelint-config-prettier-scss', + ], + // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules + rules: { + // Casing + 'scss/dollar-variable-pattern': camelCaseRegex, + 'scss/at-mixin-pattern': camelCaseRegex, + 'scss/at-function-pattern': camelCaseRegex, + 'function-name-case': [ + 'lower', + { + ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'], + }, + ], + + // Whitespace/newlines + 'scss/at-if-closing-brace-space-after': 'always-intermediate', + 'scss/operator-no-unspaced': true, + + // Formatting rules deprecated as of v15 - keep them in Sass styles just in case until end of migration + // @see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/rules.md#deprecated + 'color-hex-case': 'upper', + 'string-quotes': 'single', + // 2 spaces for indentation + indentation: [2, { indentInsideParens: 'once-at-root-twice-in-block' }], + // Mimic 1tbs `} else {` brace style, like our JS + 'block-opening-brace-space-before': 'always', + 'block-closing-brace-newline-before': 'always-multi-line', + // Ensure multiple selectors on one line each + 'selector-list-comma-newline-before': 'never-multi-line', + 'selector-list-comma-newline-after': 'always', + // Trim unnecessary newlines/whitespace + 'block-closing-brace-empty-line-before': 'never', + 'max-empty-lines': 1, + 'no-eol-whitespace': true, + // Enforce spacing around various syntax symbols (colons, operators, etc.) + 'declaration-colon-space-after': 'always-single-line', + 'declaration-colon-space-before': 'never', + 'function-calc-no-unspaced-operator': true, + 'selector-combinator-space-before': 'always', + 'selector-combinator-space-after': 'always', + // Ensure trailing semicolons are always present on non-oneliners + 'declaration-block-semicolon-newline-after': 'always-multi-line', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'scss/no-global-function-names': null, + 'scss/dollar-variable-empty-line-before': null, + 'scss/at-rule-conditional-no-parentheses': null, + 'scss/double-slash-comment-empty-line-before': null, + 'scss/at-if-no-null': null, + 'selector-not-notation': null, // Enforce comma notation for CSS-in-JS moving forward + }, + }, + { + files: ['**/*.styles.ts', '**/*.ts', '**/*.tsx'], + extends: ['stylelint-config-standard'], + customSyntax: 'postcss-styled-syntax', + rules: { + // Unfortunately, double slash comments must be replaced with standard CSS /* */ comments + // Otherwise we get a parsing error - see https://github.com/hudochenkov/postcss-styled-syntax#known-issues + 'no-invalid-double-slash-comments': true, + // Empty style keys should be allowed, as Emotion still uses them for generating classNames + 'no-empty-source': null, + // Don't lint casing on interpolated JS vars + 'function-name-case': ['lower', { ignoreFunctions: [cssInJsVarRegex] }], + 'function-no-unknown': [true, { ignoreFunctions: [cssInJsVarRegex] }], + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family'], + ignoreKeywords: [camelCaseValueRegex], + }, + ], + // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful + // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS()) + 'no-extra-semicolons': true, + + // Emotion uses the `label` property to generate the output className string + 'property-no-unknown': [true, { ignoreProperties: 'label' }], + }, + }, + ], +}; diff --git a/packages/eui-theme-common/LICENSE.txt b/packages/eui-theme-common/LICENSE.txt new file mode 100644 index 00000000000..74327a8f6f3 --- /dev/null +++ b/packages/eui-theme-common/LICENSE.txt @@ -0,0 +1,6 @@ +Source code in this repository is covered by (i) a dual license under the Server +Side Public License, v 1 and the Elastic License 2.0 or (ii) an Apache License +2.0 compatible license or (iii) solely under the Elastic License 2.0, in each +case, as noted in the applicable header. The default throughout the repository +is a dual license under the Server Side Public License, v 1 and the Elastic +License 2.0, unless the header specifies another license. diff --git a/packages/eui-theme-common/README.md b/packages/eui-theme-common/README.md new file mode 100644 index 00000000000..294446d4b30 --- /dev/null +++ b/packages/eui-theme-common/README.md @@ -0,0 +1,11 @@ +# EUI common theming functionality and styling + +This package contains common code related to theming and styling. + +## Installing dependencies + +Please run `yarn` to install dependencies: + +```shell +yarn +``` \ No newline at end of file diff --git a/packages/eui-theme-common/babel.config.js b/packages/eui-theme-common/babel.config.js new file mode 100644 index 00000000000..8165fe45577 --- /dev/null +++ b/packages/eui-theme-common/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: [ + ['@babel/preset-env', { targets: { node: 'current' } }], + '@babel/preset-typescript', + ], +}; diff --git a/packages/eui-theme-common/jest.config.js b/packages/eui-theme-common/jest.config.js new file mode 100644 index 00000000000..1b5b81ebf06 --- /dev/null +++ b/packages/eui-theme-common/jest.config.js @@ -0,0 +1,7 @@ +const config = { + moduleFileExtensions: ['ts', 'tsx', 'js', 'json'], + testEnvironment: 'node', + testMatch: ['**/*.test.js', '**/*.test.ts'], +}; + +module.exports = config; diff --git a/packages/eui-theme-common/licenses/ELASTIC-LICENSE-2.0.md b/packages/eui-theme-common/licenses/ELASTIC-LICENSE-2.0.md new file mode 100644 index 00000000000..809108b857f --- /dev/null +++ b/packages/eui-theme-common/licenses/ELASTIC-LICENSE-2.0.md @@ -0,0 +1,93 @@ +Elastic License 2.0 + +URL: https://www.elastic.co/licensing/elastic-license + +## Acceptance + +By using the software, you agree to all of the terms and conditions below. + +## Copyright License + +The licensor grants you a non-exclusive, royalty-free, worldwide, +non-sublicensable, non-transferable license to use, copy, distribute, make +available, and prepare derivative works of the software, in each case subject to +the limitations and conditions below. + +## Limitations + +You may not provide the software to third parties as a hosted or managed +service, where the service provides users with access to any substantial set of +the features or functionality of the software. + +You may not move, change, disable, or circumvent the license key functionality +in the software, and you may not remove or obscure any functionality in the +software that is protected by the license key. + +You may not alter, remove, or obscure any licensing, copyright, or other notices +of the licensor in the software. Any use of the licensor’s trademarks is subject +to applicable law. + +## Patents + +The licensor grants you a license, under any patent claims the licensor can +license, or becomes able to license, to make, have made, use, sell, offer for +sale, import and have imported the software, in each case subject to the +limitations and conditions in this license. This license does not cover any +patent claims that you cause to be infringed by modifications or additions to +the software. If you or your company make any written claim that the software +infringes or contributes to infringement of any patent, your patent license for +the software granted under these terms ends immediately. If your company makes +such a claim, your patent license ends immediately for work on behalf of your +company. + +## Notices + +You must ensure that anyone who gets a copy of any part of the software from you +also gets a copy of these terms. + +If you modify the software, you must include in any modified copies of the +software prominent notices stating that you have modified the software. + +## No Other Rights + +These terms do not imply any licenses other than those expressly granted in +these terms. + +## Termination + +If you use the software in violation of these terms, such use is not licensed, +and your licenses will automatically terminate. If the licensor provides you +with a notice of your violation, and you cease all violation of this license no +later than 30 days after you receive that notice, your licenses will be +reinstated retroactively. However, if you violate these terms after such +reinstatement, any additional violation of these terms will cause your licenses +to terminate automatically and permanently. + +## No Liability + +*As far as the law allows, the software comes as is, without any warranty or +condition, and the licensor will not be liable to you for any damages arising +out of these terms or the use or nature of the software, under any kind of +legal claim.* + +## Definitions + +The **licensor** is the entity offering these terms, and the **software** is the +software the licensor makes available under these terms, including any portion +of it. + +**you** refers to the individual or entity agreeing to these terms. + +**your company** is any legal entity, sole proprietorship, or other kind of +organization that you work for, plus all organizations that have control over, +are under the control of, or are under common control with that +organization. **control** means ownership of substantially all the assets of an +entity, or the power to direct its management and policies by vote, contract, or +otherwise. Control can be direct or indirect. + +**your licenses** are all the licenses granted to you for the software under +these terms. + +**use** means anything you do with the software requiring one of your licenses. + +**trademark** means trademarks, service marks, and similar rights. diff --git a/packages/eui-theme-common/licenses/SSPL-LICENSE.md b/packages/eui-theme-common/licenses/SSPL-LICENSE.md new file mode 100644 index 00000000000..ea3921393f6 --- /dev/null +++ b/packages/eui-theme-common/licenses/SSPL-LICENSE.md @@ -0,0 +1,557 @@ + Server Side Public License + VERSION 1, OCTOBER 16, 2018 + + Copyright © 2018 MongoDB, Inc. + + Everyone is permitted to copy and distribute verbatim copies of this + license document, but changing it is not allowed. + + TERMS AND CONDITIONS + + 0. Definitions. + + “This License” refers to Server Side Public License. + + “Copyright” also means copyright-like laws that apply to other kinds of + works, such as semiconductor masks. + + “The Program” refers to any copyrightable work licensed under this + License. Each licensee is addressed as “you”. “Licensees” and + “recipients” may be individuals or organizations. + + To “modify” a work means to copy from or adapt all or part of the work in + a fashion requiring copyright permission, other than the making of an + exact copy. The resulting work is called a “modified version” of the + earlier work or a work “based on” the earlier work. + + A “covered work” means either the unmodified Program or a work based on + the Program. + + To “propagate” a work means to do anything with it that, without + permission, would make you directly or secondarily liable for + infringement under applicable copyright law, except executing it on a + computer or modifying a private copy. Propagation includes copying, + distribution (with or without modification), making available to the + public, and in some countries other activities as well. + + To “convey” a work means any kind of propagation that enables other + parties to make or receive copies. Mere interaction with a user through a + computer network, with no transfer of a copy, is not conveying. + + An interactive user interface displays “Appropriate Legal Notices” to the + extent that it includes a convenient and prominently visible feature that + (1) displays an appropriate copyright notice, and (2) tells the user that + there is no warranty for the work (except to the extent that warranties + are provided), that licensees may convey the work under this License, and + how to view a copy of this License. If the interface presents a list of + user commands or options, such as a menu, a prominent item in the list + meets this criterion. + + 1. Source Code. + + The “source code” for a work means the preferred form of the work for + making modifications to it. “Object code” means any non-source form of a + work. + + A “Standard Interface” means an interface that either is an official + standard defined by a recognized standards body, or, in the case of + interfaces specified for a particular programming language, one that is + widely used among developers working in that language. The “System + Libraries” of an executable work include anything, other than the work as + a whole, that (a) is included in the normal form of packaging a Major + Component, but which is not part of that Major Component, and (b) serves + only to enable use of the work with that Major Component, or to implement + a Standard Interface for which an implementation is available to the + public in source code form. A “Major Component”, in this context, means a + major essential component (kernel, window system, and so on) of the + specific operating system (if any) on which the executable work runs, or + a compiler used to produce the work, or an object code interpreter used + to run it. + + The “Corresponding Source” for a work in object code form means all the + source code needed to generate, install, and (for an executable work) run + the object code and to modify the work, including scripts to control + those activities. However, it does not include the work's System + Libraries, or general-purpose tools or generally available free programs + which are used unmodified in performing those activities but which are + not part of the work. For example, Corresponding Source includes + interface definition files associated with source files for the work, and + the source code for shared libraries and dynamically linked subprograms + that the work is specifically designed to require, such as by intimate + data communication or control flow between those subprograms and other + parts of the work. + + The Corresponding Source need not include anything that users can + regenerate automatically from other parts of the Corresponding Source. + + The Corresponding Source for a work in source code form is that same work. + + 2. Basic Permissions. + + All rights granted under this License are granted for the term of + copyright on the Program, and are irrevocable provided the stated + conditions are met. This License explicitly affirms your unlimited + permission to run the unmodified Program, subject to section 13. The + output from running a covered work is covered by this License only if the + output, given its content, constitutes a covered work. This License + acknowledges your rights of fair use or other equivalent, as provided by + copyright law. Subject to section 13, you may make, run and propagate + covered works that you do not convey, without conditions so long as your + license otherwise remains in force. You may convey covered works to + others for the sole purpose of having them make modifications exclusively + for you, or provide you with facilities for running those works, provided + that you comply with the terms of this License in conveying all + material for which you do not control copyright. Those thus making or + running the covered works for you must do so exclusively on your + behalf, under your direction and control, on terms that prohibit them + from making any copies of your copyrighted material outside their + relationship with you. + + Conveying under any other circumstances is permitted solely under the + conditions stated below. Sublicensing is not allowed; section 10 makes it + unnecessary. + + 3. Protecting Users' Legal Rights From Anti-Circumvention Law. + + No covered work shall be deemed part of an effective technological + measure under any applicable law fulfilling obligations under article 11 + of the WIPO copyright treaty adopted on 20 December 1996, or similar laws + prohibiting or restricting circumvention of such measures. + + When you convey a covered work, you waive any legal power to forbid + circumvention of technological measures to the extent such circumvention is + effected by exercising rights under this License with respect to the + covered work, and you disclaim any intention to limit operation or + modification of the work as a means of enforcing, against the work's users, + your or third parties' legal rights to forbid circumvention of + technological measures. + + 4. Conveying Verbatim Copies. + + You may convey verbatim copies of the Program's source code as you + receive it, in any medium, provided that you conspicuously and + appropriately publish on each copy an appropriate copyright notice; keep + intact all notices stating that this License and any non-permissive terms + added in accord with section 7 apply to the code; keep intact all notices + of the absence of any warranty; and give all recipients a copy of this + License along with the Program. You may charge any price or no price for + each copy that you convey, and you may offer support or warranty + protection for a fee. + + 5. Conveying Modified Source Versions. + + You may convey a work based on the Program, or the modifications to + produce it from the Program, in the form of source code under the terms + of section 4, provided that you also meet all of these conditions: + + a) The work must carry prominent notices stating that you modified it, + and giving a relevant date. + + b) The work must carry prominent notices stating that it is released + under this License and any conditions added under section 7. This + requirement modifies the requirement in section 4 to “keep intact all + notices”. + + c) You must license the entire work, as a whole, under this License to + anyone who comes into possession of a copy. This License will therefore + apply, along with any applicable section 7 additional terms, to the + whole of the work, and all its parts, regardless of how they are + packaged. This License gives no permission to license the work in any + other way, but it does not invalidate such permission if you have + separately received it. + + d) If the work has interactive user interfaces, each must display + Appropriate Legal Notices; however, if the Program has interactive + interfaces that do not display Appropriate Legal Notices, your work + need not make them do so. + + A compilation of a covered work with other separate and independent + works, which are not by their nature extensions of the covered work, and + which are not combined with it such as to form a larger program, in or on + a volume of a storage or distribution medium, is called an “aggregate” if + the compilation and its resulting copyright are not used to limit the + access or legal rights of the compilation's users beyond what the + individual works permit. Inclusion of a covered work in an aggregate does + not cause this License to apply to the other parts of the aggregate. + + 6. Conveying Non-Source Forms. + + You may convey a covered work in object code form under the terms of + sections 4 and 5, provided that you also convey the machine-readable + Corresponding Source under the terms of this License, in one of these + ways: + + a) Convey the object code in, or embodied in, a physical product + (including a physical distribution medium), accompanied by the + Corresponding Source fixed on a durable physical medium customarily + used for software interchange. + + b) Convey the object code in, or embodied in, a physical product + (including a physical distribution medium), accompanied by a written + offer, valid for at least three years and valid for as long as you + offer spare parts or customer support for that product model, to give + anyone who possesses the object code either (1) a copy of the + Corresponding Source for all the software in the product that is + covered by this License, on a durable physical medium customarily used + for software interchange, for a price no more than your reasonable cost + of physically performing this conveying of source, or (2) access to + copy the Corresponding Source from a network server at no charge. + + c) Convey individual copies of the object code with a copy of the + written offer to provide the Corresponding Source. This alternative is + allowed only occasionally and noncommercially, and only if you received + the object code with such an offer, in accord with subsection 6b. + + d) Convey the object code by offering access from a designated place + (gratis or for a charge), and offer equivalent access to the + Corresponding Source in the same way through the same place at no + further charge. You need not require recipients to copy the + Corresponding Source along with the object code. If the place to copy + the object code is a network server, the Corresponding Source may be on + a different server (operated by you or a third party) that supports + equivalent copying facilities, provided you maintain clear directions + next to the object code saying where to find the Corresponding Source. + Regardless of what server hosts the Corresponding Source, you remain + obligated to ensure that it is available for as long as needed to + satisfy these requirements. + + e) Convey the object code using peer-to-peer transmission, provided you + inform other peers where the object code and Corresponding Source of + the work are being offered to the general public at no charge under + subsection 6d. + + A separable portion of the object code, whose source code is excluded + from the Corresponding Source as a System Library, need not be included + in conveying the object code work. + + A “User Product” is either (1) a “consumer product”, which means any + tangible personal property which is normally used for personal, family, + or household purposes, or (2) anything designed or sold for incorporation + into a dwelling. In determining whether a product is a consumer product, + doubtful cases shall be resolved in favor of coverage. For a particular + product received by a particular user, “normally used” refers to a + typical or common use of that class of product, regardless of the status + of the particular user or of the way in which the particular user + actually uses, or expects or is expected to use, the product. A product + is a consumer product regardless of whether the product has substantial + commercial, industrial or non-consumer uses, unless such uses represent + the only significant mode of use of the product. + + “Installation Information” for a User Product means any methods, + procedures, authorization keys, or other information required to install + and execute modified versions of a covered work in that User Product from + a modified version of its Corresponding Source. The information must + suffice to ensure that the continued functioning of the modified object + code is in no case prevented or interfered with solely because + modification has been made. + + If you convey an object code work under this section in, or with, or + specifically for use in, a User Product, and the conveying occurs as part + of a transaction in which the right of possession and use of the User + Product is transferred to the recipient in perpetuity or for a fixed term + (regardless of how the transaction is characterized), the Corresponding + Source conveyed under this section must be accompanied by the + Installation Information. But this requirement does not apply if neither + you nor any third party retains the ability to install modified object + code on the User Product (for example, the work has been installed in + ROM). + + The requirement to provide Installation Information does not include a + requirement to continue to provide support service, warranty, or updates + for a work that has been modified or installed by the recipient, or for + the User Product in which it has been modified or installed. Access + to a network may be denied when the modification itself materially + and adversely affects the operation of the network or violates the + rules and protocols for communication across the network. + + Corresponding Source conveyed, and Installation Information provided, in + accord with this section must be in a format that is publicly documented + (and with an implementation available to the public in source code form), + and must require no special password or key for unpacking, reading or + copying. + + 7. Additional Terms. + + “Additional permissions” are terms that supplement the terms of this + License by making exceptions from one or more of its conditions. + Additional permissions that are applicable to the entire Program shall be + treated as though they were included in this License, to the extent that + they are valid under applicable law. If additional permissions apply only + to part of the Program, that part may be used separately under those + permissions, but the entire Program remains governed by this License + without regard to the additional permissions. When you convey a copy of + a covered work, you may at your option remove any additional permissions + from that copy, or from any part of it. (Additional permissions may be + written to require their own removal in certain cases when you modify the + work.) You may place additional permissions on material, added by you to + a covered work, for which you have or can give appropriate copyright + permission. + + Notwithstanding any other provision of this License, for material you add + to a covered work, you may (if authorized by the copyright holders of + that material) supplement the terms of this License with terms: + + a) Disclaiming warranty or limiting liability differently from the + terms of sections 15 and 16 of this License; or + + b) Requiring preservation of specified reasonable legal notices or + author attributions in that material or in the Appropriate Legal + Notices displayed by works containing it; or + + c) Prohibiting misrepresentation of the origin of that material, or + requiring that modified versions of such material be marked in + reasonable ways as different from the original version; or + + d) Limiting the use for publicity purposes of names of licensors or + authors of the material; or + + e) Declining to grant rights under trademark law for use of some trade + names, trademarks, or service marks; or + + f) Requiring indemnification of licensors and authors of that material + by anyone who conveys the material (or modified versions of it) with + contractual assumptions of liability to the recipient, for any + liability that these contractual assumptions directly impose on those + licensors and authors. + + All other non-permissive additional terms are considered “further + restrictions” within the meaning of section 10. If the Program as you + received it, or any part of it, contains a notice stating that it is + governed by this License along with a term that is a further restriction, + you may remove that term. If a license document contains a further + restriction but permits relicensing or conveying under this License, you + may add to a covered work material governed by the terms of that license + document, provided that the further restriction does not survive such + relicensing or conveying. + + If you add terms to a covered work in accord with this section, you must + place, in the relevant source files, a statement of the additional terms + that apply to those files, or a notice indicating where to find the + applicable terms. Additional terms, permissive or non-permissive, may be + stated in the form of a separately written license, or stated as + exceptions; the above requirements apply either way. + + 8. Termination. + + You may not propagate or modify a covered work except as expressly + provided under this License. Any attempt otherwise to propagate or modify + it is void, and will automatically terminate your rights under this + License (including any patent licenses granted under the third paragraph + of section 11). + + However, if you cease all violation of this License, then your license + from a particular copyright holder is reinstated (a) provisionally, + unless and until the copyright holder explicitly and finally terminates + your license, and (b) permanently, if the copyright holder fails to + notify you of the violation by some reasonable means prior to 60 days + after the cessation. + + Moreover, your license from a particular copyright holder is reinstated + permanently if the copyright holder notifies you of the violation by some + reasonable means, this is the first time you have received notice of + violation of this License (for any work) from that copyright holder, and + you cure the violation prior to 30 days after your receipt of the notice. + + Termination of your rights under this section does not terminate the + licenses of parties who have received copies or rights from you under + this License. If your rights have been terminated and not permanently + reinstated, you do not qualify to receive new licenses for the same + material under section 10. + + 9. Acceptance Not Required for Having Copies. + + You are not required to accept this License in order to receive or run a + copy of the Program. Ancillary propagation of a covered work occurring + solely as a consequence of using peer-to-peer transmission to receive a + copy likewise does not require acceptance. However, nothing other than + this License grants you permission to propagate or modify any covered + work. These actions infringe copyright if you do not accept this License. + Therefore, by modifying or propagating a covered work, you indicate your + acceptance of this License to do so. + + 10. Automatic Licensing of Downstream Recipients. + + Each time you convey a covered work, the recipient automatically receives + a license from the original licensors, to run, modify and propagate that + work, subject to this License. You are not responsible for enforcing + compliance by third parties with this License. + + An “entity transaction” is a transaction transferring control of an + organization, or substantially all assets of one, or subdividing an + organization, or merging organizations. If propagation of a covered work + results from an entity transaction, each party to that transaction who + receives a copy of the work also receives whatever licenses to the work + the party's predecessor in interest had or could give under the previous + paragraph, plus a right to possession of the Corresponding Source of the + work from the predecessor in interest, if the predecessor has it or can + get it with reasonable efforts. + + You may not impose any further restrictions on the exercise of the rights + granted or affirmed under this License. For example, you may not impose a + license fee, royalty, or other charge for exercise of rights granted + under this License, and you may not initiate litigation (including a + cross-claim or counterclaim in a lawsuit) alleging that any patent claim + is infringed by making, using, selling, offering for sale, or importing + the Program or any portion of it. + + 11. Patents. + + A “contributor” is a copyright holder who authorizes use under this + License of the Program or a work on which the Program is based. The work + thus licensed is called the contributor's “contributor version”. + + A contributor's “essential patent claims” are all patent claims owned or + controlled by the contributor, whether already acquired or hereafter + acquired, that would be infringed by some manner, permitted by this + License, of making, using, or selling its contributor version, but do not + include claims that would be infringed only as a consequence of further + modification of the contributor version. For purposes of this definition, + “control” includes the right to grant patent sublicenses in a manner + consistent with the requirements of this License. + + Each contributor grants you a non-exclusive, worldwide, royalty-free + patent license under the contributor's essential patent claims, to make, + use, sell, offer for sale, import and otherwise run, modify and propagate + the contents of its contributor version. + + In the following three paragraphs, a “patent license” is any express + agreement or commitment, however denominated, not to enforce a patent + (such as an express permission to practice a patent or covenant not to + sue for patent infringement). To “grant” such a patent license to a party + means to make such an agreement or commitment not to enforce a patent + against the party. + + If you convey a covered work, knowingly relying on a patent license, and + the Corresponding Source of the work is not available for anyone to copy, + free of charge and under the terms of this License, through a publicly + available network server or other readily accessible means, then you must + either (1) cause the Corresponding Source to be so available, or (2) + arrange to deprive yourself of the benefit of the patent license for this + particular work, or (3) arrange, in a manner consistent with the + requirements of this License, to extend the patent license to downstream + recipients. “Knowingly relying” means you have actual knowledge that, but + for the patent license, your conveying the covered work in a country, or + your recipient's use of the covered work in a country, would infringe + one or more identifiable patents in that country that you have reason + to believe are valid. + + If, pursuant to or in connection with a single transaction or + arrangement, you convey, or propagate by procuring conveyance of, a + covered work, and grant a patent license to some of the parties receiving + the covered work authorizing them to use, propagate, modify or convey a + specific copy of the covered work, then the patent license you grant is + automatically extended to all recipients of the covered work and works + based on it. + + A patent license is “discriminatory” if it does not include within the + scope of its coverage, prohibits the exercise of, or is conditioned on + the non-exercise of one or more of the rights that are specifically + granted under this License. You may not convey a covered work if you are + a party to an arrangement with a third party that is in the business of + distributing software, under which you make payment to the third party + based on the extent of your activity of conveying the work, and under + which the third party grants, to any of the parties who would receive the + covered work from you, a discriminatory patent license (a) in connection + with copies of the covered work conveyed by you (or copies made from + those copies), or (b) primarily for and in connection with specific + products or compilations that contain the covered work, unless you + entered into that arrangement, or that patent license was granted, prior + to 28 March 2007. + + Nothing in this License shall be construed as excluding or limiting any + implied license or other defenses to infringement that may otherwise be + available to you under applicable patent law. + + 12. No Surrender of Others' Freedom. + + If conditions are imposed on you (whether by court order, agreement or + otherwise) that contradict the conditions of this License, they do not + excuse you from the conditions of this License. If you cannot use, + propagate or convey a covered work so as to satisfy simultaneously your + obligations under this License and any other pertinent obligations, then + as a consequence you may not use, propagate or convey it at all. For + example, if you agree to terms that obligate you to collect a royalty for + further conveying from those to whom you convey the Program, the only way + you could satisfy both those terms and this License would be to refrain + entirely from conveying the Program. + + 13. Offering the Program as a Service. + + If you make the functionality of the Program or a modified version + available to third parties as a service, you must make the Service Source + Code available via network download to everyone at no charge, under the + terms of this License. Making the functionality of the Program or + modified version available to third parties as a service includes, + without limitation, enabling third parties to interact with the + functionality of the Program or modified version remotely through a + computer network, offering a service the value of which entirely or + primarily derives from the value of the Program or modified version, or + offering a service that accomplishes for users the primary purpose of the + Program or modified version. + + “Service Source Code” means the Corresponding Source for the Program or + the modified version, and the Corresponding Source for all programs that + you use to make the Program or modified version available as a service, + including, without limitation, management software, user interfaces, + application program interfaces, automation software, monitoring software, + backup software, storage software and hosting software, all such that a + user could run an instance of the service using the Service Source Code + you make available. + + 14. Revised Versions of this License. + + MongoDB, Inc. may publish revised and/or new versions of the Server Side + Public License from time to time. Such new versions will be similar in + spirit to the present version, but may differ in detail to address new + problems or concerns. + + Each version is given a distinguishing version number. If the Program + specifies that a certain numbered version of the Server Side Public + License “or any later version” applies to it, you have the option of + following the terms and conditions either of that numbered version or of + any later version published by MongoDB, Inc. If the Program does not + specify a version number of the Server Side Public License, you may + choose any version ever published by MongoDB, Inc. + + If the Program specifies that a proxy can decide which future versions of + the Server Side Public License can be used, that proxy's public statement + of acceptance of a version permanently authorizes you to choose that + version for the Program. + + Later license versions may give you additional or different permissions. + However, no additional obligations are imposed on any author or copyright + holder as a result of your choosing to follow a later version. + + 15. Disclaimer of Warranty. + + THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY + APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT + HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY + OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, + THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR + PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM + IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF + ALL NECESSARY SERVICING, REPAIR OR CORRECTION. + + 16. Limitation of Liability. + + IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING + WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS + THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING + ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF + THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO + LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU + OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER + PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE + POSSIBILITY OF SUCH DAMAGES. + + 17. Interpretation of Sections 15 and 16. + + If the disclaimer of warranty and limitation of liability provided above + cannot be given local legal effect according to their terms, reviewing + courts shall apply local law that most closely approximates an absolute + waiver of all civil liability in connection with the Program, unless a + warranty or assumption of liability accompanies a copy of the Program in + return for a fee. + + END OF TERMS AND CONDITIONS diff --git a/packages/eui-theme-common/package.json b/packages/eui-theme-common/package.json new file mode 100644 index 00000000000..d19ef7fdc02 --- /dev/null +++ b/packages/eui-theme-common/package.json @@ -0,0 +1,85 @@ +{ + "name": "@elastic/eui-theme-common", + "version": "0.0.9", + "description": "EUI theme common", + "license": "SEE LICENSE IN LICENSE.txt", + "scripts": { + "build:clean": "rimraf lib/", + "build": "yarn build:clean && yarn build:compile && yarn build:compile:cjs && yarn build:types", + "build:compile": "tsc --project ./tsconfig.json", + "build:compile:cjs": "NODE_ENV=production NO_COREJS_POLYFILL=true babel src --out-dir=lib/cjs --extensions .js,.ts,.tsx --source-maps=true", + "build:types": "NODE_ENV=production tsc --project tsconfig.types.json", + "build-pack": "yarn build && npm pack", + "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass", + "lint-es": "eslint --cache src/**/*.ts --max-warnings 0", + "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings", + "test": "jest ./src", + "pre-push": "yarn lint && yarn test" + }, + "repository": { + "type": "git", + "url": "https://github.com/elastic/eui.git", + "directory": "packages/eui-theme-common" + }, + "dependencies": { + "@types/lodash": "^4.14.202", + "chroma-js": "^2.4.2", + "lodash": "^4.17.21" + }, + "devDependencies": { + "@babel/cli": "^7.21.5", + "@babel/core": "^7.21.8", + "@babel/preset-env": "^7.21.5", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.5", + "@emotion/react": "^11.11.0", + "@types/chroma-js": "^2.4.0", + "@types/jest": "^29.5.12", + "@types/prettier": "2.7.3", + "@types/react": "^16.9 || ^17.0 || ^18.0", + "@types/react-dom": "^16.9 || ^17.0 || ^18.0", + "@typescript-eslint/eslint-plugin": "^5.59.7", + "@typescript-eslint/parser": "^5.59.7", + "eslint": "^8.41.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jest": "^28.5.0", + "eslint-plugin-local": "^1.0.0", + "eslint-plugin-prettier": "^4.2.1", + "jest": "^29.7.0", + "prettier": "^2.8.8", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "rimraf": "^6.0.1", + "stylelint": "^15.7.0", + "stylelint-config-prettier-scss": "^1.0.0", + "stylelint-config-standard": "^33.0.0", + "stylelint-config-standard-scss": "^9.0.0", + "typescript": "4.5.3" + }, + "peerDependencies": { + "@emotion/react": "11.x", + "react": "^16.12 || ^17.0 || ^18.0", + "react-dom": "^16.12 || ^17.0 || ^18.0" + }, + "main": "lib/cjs/index.js", + "exports": { + "./lib/*": "./lib/*", + "./scripts/*": "./scripts/*", + ".": { + "require": "./lib/cjs/index.js", + "import": "./lib/esm/index.js", + "default": "./lib/cjs/index.js" + } + }, + "files": [ + "lib/", + "src/**/*.scss", + "README.md", + "licenses", + "!lib/**/*.tsbuildinfo" + ], + "installConfig": { + "hoistingLimits": "workspaces" + } +} diff --git a/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js new file mode 100644 index 00000000000..23b83648dd1 --- /dev/null +++ b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js @@ -0,0 +1,132 @@ +const eslintParser = require('@typescript-eslint/parser'); + +function assert(truth, message) { + if (truth) { + return; + } + + const error = new Error(message); + error.failedAssertion = true; + throw error; +} + +function normalizeWhitespace(string) { + return string.replace(/\s+/g, ' '); +} + +function init(context, program, initStep) { + try { + return initStep(); + } catch (error) { + if (error.failedAssertion) { + context.report({ + node: program, + message: error.message, + }); + } else { + throw error; + } + } +} + +function isHashbang(text) { + return text.trim().startsWith('#!') && !text.trim().includes('\n'); +} + +module.exports = { + meta: { + fixable: 'code', + schema: [ + { + type: 'object', + properties: { + license: { + type: 'string', + }, + }, + additionalProperties: false, + }, + ], + }, + create: (context) => { + return { + Program(program) { + const license = init(context, program, function () { + const options = context.options[0] || {}; + const license = options.license; + + assert(!!license, '"license" option is required'); + + const parsed = eslintParser.parse(license, { comment: true }); + assert( + !parsed.body.length, + '"license" option must only include a single comment' + ); + assert( + parsed.comments.length === 1, + '"license" option must only include a single comment' + ); + + return { + source: license, + nodeValue: normalizeWhitespace(parsed.comments[0].value), + }; + }); + + if (!license) { + return; + } + + const sourceCode = context.getSourceCode(); + const comment = sourceCode + .getAllComments() + .find( + (node) => normalizeWhitespace(node.value) === license.nodeValue + ); + + // no licence comment + if (!comment) { + context.report({ + message: 'File must start with a license header', + loc: { + start: { line: 1, column: 0 }, + end: { line: 1, column: sourceCode.lines[0].length - 1 }, + }, + fix(fixer) { + if (isHashbang(sourceCode.lines[0])) { + return undefined; + } + + return fixer.replaceTextRange([0, 0], license.source + '\n\n'); + }, + }); + return; + } + + // ensure there is nothing before the comment + const sourceBeforeNode = sourceCode + .getText() + .slice(0, sourceCode.getIndexFromLoc(comment.loc.start)); + if (sourceBeforeNode.length && !isHashbang(sourceBeforeNode)) { + context.report({ + node: comment, + message: 'License header must be at the very beginning of the file', + fix(fixer) { + // replace leading whitespace if possible + if (sourceBeforeNode.trim() === '') { + return fixer.replaceTextRange([0, sourceBeforeNode.length], ''); + } + + // inject content at top and remove node from current location + // if removing whitespace is not possible + return [ + fixer.remove(comment), + fixer.replaceTextRange([0, 0], license.source + '\n\n'), + ]; + }, + }); + } + }, + }; + }, +}; diff --git a/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.test.js b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.test.js new file mode 100644 index 00000000000..904dff17bc0 --- /dev/null +++ b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.test.js @@ -0,0 +1,177 @@ +const { RuleTester } = require('eslint'); +const rule = require('./require_license_header'); +const dedent = require('dedent'); + +const ruleTester = new RuleTester({ + parser: require.resolve('@typescript-eslint/parser'), +}); + +ruleTester.run('@kbn/eslint/require-license-header', rule, { + valid: [ + { + code: dedent` + /* license */ + + console.log('foo') + `, + + options: [{ license: '/* license */' }], + }, + { + code: dedent` + // license + + console.log('foo') + `, + + options: [{ license: '// license' }], + }, + ], + + invalid: [ + // missing license option + { + code: dedent` + console.log('foo') + `, + + options: [], + errors: [ + { + message: '"license" option is required', + }, + ], + }, + + // content cannot contain multiple block comments + { + code: dedent` + console.log('foo') + `, + + options: [{ license: '/* one *//* two */' }], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // content cannot contain multiple line comments + { + code: dedent` + console.log('foo') + `, + + options: [{ license: `// one\n// two` }], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // content cannot contain expressions + { + code: dedent` + console.log('foo') + `, + + options: [ + { + license: dedent` + /* license */ + console.log('hello world'); + `, + }, + ], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // content is not a single comment + { + code: dedent` + console.log('foo') + `, + + options: [{ license: `console.log('hello world');` }], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // missing license header + { + code: dedent` + console.log('foo') + `, + + options: [{ license: '/* license */' }], + errors: [ + { + message: 'File must start with a license header', + }, + ], + + output: dedent` + /* license */ + + console.log('foo') + `, + }, + + // strips newlines before the license comment + { + code: + '\n\n' + + dedent` + /* license */ + + console.log('foo') + `, + + options: [{ license: '/* license */' }], + errors: [ + { + message: 'License header must be at the very beginning of the file', + }, + ], + + output: dedent` + /* license */ + + console.log('foo') + `, + }, + + // moves license header before other nodes if necessary + { + code: dedent` + /* not license */ + /* license */ + console.log('foo') + `, + + options: [{ license: '/* license */' }], + errors: [ + { + message: 'License header must be at the very beginning of the file', + }, + ], + + output: dedent` + /* license */ + + /* not license */ + + console.log('foo') + `, + }, + ], +}); diff --git a/packages/eui-theme-common/src/global_styling/functions/_colors.scss b/packages/eui-theme-common/src/global_styling/functions/_colors.scss new file mode 100644 index 00000000000..e5ade788667 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_colors.scss @@ -0,0 +1,138 @@ +// Converting a normal hex color to RBG +@function hexToRGB($color) { + @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29'; +} + +// Mixes a provided color with white. +@function tint($color, $percent) { + @return mix($euiColorGhost, $color, $percent); +} + +// Mixes a provided color with black. +@function shade($color, $percent) { + @return mix($euiColorInk, $color, $percent); +} + +// For theming. Checks the text color and tells us whether it's light or dark. +// Based on that we either tint (add white) or shade (add black). +@function tintOrShade($color, $tint, $shade) { + @if (lightness($euiColorTextParagraph) > 50) { + @return shade($color, $shade); + } @else { + @return tint($color, $tint); + } +} + +// The reverse of the above +@function shadeOrTint($color, $shade, $tint) { + @if (lightness($euiColorTextParagraph) < 50) { + @return shade($color, $shade); + } @else { + @return tint($color, $tint); + } +} + +// Similar to above, but uses the light or dark color based +// on whether it's the light or dark theme +@function lightOrDarkTheme($lightColor, $darkColor) { + @if (lightness($euiColorTextParagraph) < 50) { + @return $lightColor; + } @else { + @return $darkColor; + } +} + +// Calculates luminance, which is better than brightness for checking colors +// pow, nth functions come from the _math.scss functions +@function luminance($color) { + // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + $rgba: red($color), green($color), blue($color); + $rgba2: (); + + @for $i from 1 through 3 { + $rgb: nth($rgba, $i); + $rgb: $rgb / 255; + + $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4)); + + $rgba2: append($rgba2, $rgb); + } + + @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3); +} + +// Calculate contrast +@function contrastRatio($background, $foreground) { + $backgroundLum: luminance($background) + .05; + $foregroundLum: luminance($foreground) + .05; + + @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum); +} + +// Given $color, decide whether $lightText or $darkText should be used as the text color +// ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has +// a higher contrast than #FFF against a #EEE background. +@function chooseLightOrDarkText($background, $lightText: $euiColorGhost, $darkText: $euiColorInk) { + $lightContrast: contrastRatio($background, $lightText); + $darkContrast: contrastRatio($background, $darkText); + + @if ($lightContrast > $darkContrast) { + @return $lightText; + } @else { + @return $darkText; + } +} + +// Given a $foreground and a $background, make the $foreground AA accessibility by slightly +// adjusting it till the contrast is high enough +// By default it will compare against the page background color + +// ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until +// it had higher than 4.5 contrast on a white background. +$euiContrastRatioText: 4.5; +@function makeHighContrastColor($foreground, $background: $euiPageBackgroundColor, $ratio: $euiContrastRatioText) { + $contrast: contrastRatio($foreground, $background); + + // Determine the lightness factor of the background color first to + // determine whether to shade or tint the foreground. + $brightness: lightness($background); + + $highContrastTextColor: $foreground; + + @while ($contrast < $ratio) { + @if ($brightness > 50) { + $highContrastTextColor: shade($highContrastTextColor, 5%); + } @else { + $highContrastTextColor: tint($highContrastTextColor, 5%); + } + + $contrast: contrastRatio($highContrastTextColor, $background); + + @if (lightness($highContrastTextColor) < 5) { + @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.'; + @return $highContrastTextColor; + } + + @if (lightness($highContrastTextColor) > 95) { + @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.'; + @return $highContrastTextColor; + } + } + + @return $highContrastTextColor; +} + +// Graphics such as stand alone icons and pieces of a graph only need a minimum ratio of 3:1 with its background. +// Therefore, we can reuse the `makeHighContrastColor()` function but only attain a min contrast of 3.0. +// It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked. +// https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum) +$euiContrastRatioGraphic: 3; +@function makeGraphicContrastColor($color, $background: $euiPageBackgroundColor) { + @return makeHighContrastColor($color, $background, $euiContrastRatioGraphic); +} + +// Disabled content only needs a contrast of at least 2 because there is no interaction available +$euiContrastRatioDisabled: 2; +@function makeDisabledContrastColor($color, $background: $euiPageBackgroundColor) { + @return makeHighContrastColor($color, $background, $euiContrastRatioDisabled); +} diff --git a/packages/eui-theme-common/src/global_styling/functions/_index.scss b/packages/eui-theme-common/src/global_styling/functions/_index.scss new file mode 100644 index 00000000000..de8260b2bba --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_index.scss @@ -0,0 +1,5 @@ +// Math needs to be first in the load order +@import 'math'; + +// Using math, we have functions to manipulate contrast / luminosity for accessibility +@import 'colors'; diff --git a/packages/eui-theme-common/src/global_styling/functions/_math.scss b/packages/eui-theme-common/src/global_styling/functions/_math.scss new file mode 100644 index 00000000000..cdec36f3e60 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_math.scss @@ -0,0 +1 @@ +@import 'math_pow'; \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/functions/_math_pow.scss b/packages/eui-theme-common/src/global_styling/functions/_math_pow.scss new file mode 100644 index 00000000000..2e2d784a845 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_math_pow.scss @@ -0,0 +1,82 @@ +/** +The MIT License (MIT) + +Copyright (c) 2015 strarsis https://github.com/strarsis/sass-math-pow + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + */ + +@function pow($number, $exp) { + $exp1: round($exp); + $result: powInt($number, $exp1); + + @if ($exp1 != $exp) { + $result: $result * mathExp(($exp - $exp1) * mathLn($number)); + } + + @return $result; +} + +@function powInt($number, $exp) { + @if $exp == 0 { + @return 1; + } @else if $exp < 0 { + @return 1 / powInt($number, -$exp); + } @else { + $e: floor($exp / 2); + $pow: pow($number, $e); + @if $e * 2 == $exp { + @return $pow * $pow; + } @else { + @return $pow * $pow * $number; + } + } +} + +@function mathExp($value) { + $item: 1; + $result: 1; + + @for $index from 1 to 100 { + $item: $item * $value / $index; + $result: $result + $item; + } + + @return $result; +} + +@function mathLn($value) { + $tenExp: 0; + $lnTen: 2.30258509; + + @while ($value > 1) { + $tenExp: $tenExp + 1; + $value: $value / 10; + } + + $item: -1; + $result: 0; + + @for $index from 1 to 100 { + $item: $item * (1 - $value); + $result: $result + $item / $index; + } + + @return $result + $tenExp * $lnTen; +} diff --git a/packages/eui-theme-common/src/global_styling/functions/index.ts b/packages/eui-theme-common/src/global_styling/functions/index.ts new file mode 100644 index 00000000000..44d90033c4b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/index.ts @@ -0,0 +1,11 @@ +/* + * 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. + */ + +export * from './size'; +export * from './math'; +export * from './shadows'; diff --git a/packages/eui/src/global_styling/functions/math.test.ts b/packages/eui-theme-common/src/global_styling/functions/math.test.ts similarity index 100% rename from packages/eui/src/global_styling/functions/math.test.ts rename to packages/eui-theme-common/src/global_styling/functions/math.test.ts diff --git a/packages/eui-theme-common/src/global_styling/functions/math.ts b/packages/eui-theme-common/src/global_styling/functions/math.ts new file mode 100644 index 00000000000..233c7136f9f --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/math.ts @@ -0,0 +1,60 @@ +/* + * 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. + */ + +/** + * Utility for performing math callbacks on a string with CSS units + * and returning a string with its unit preserved. + * + * Example usage: + * mathWithUnits('4px', (x) => x / 2) = '2px'; + * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px'; + * mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px'; + */ +type ValueTypes = string | number | undefined; // Unfortunately, this is the CSSProperties[] type used for several euiTheme vars + +export const mathWithUnits = ( + values: ValueTypes | ValueTypes[], // Can accept a single input or array of inputs + callback: (...args: number[]) => number, // Can be multiplication, division, addition, etc. + unit: string = '' // Optional: allow specifying an override unit to return +) => { + if (!Array.isArray(values)) values = [values]; + + const foundNumericValues: number[] = []; + let foundUnit = ''; + + values.forEach((value) => { + if (typeof value === 'string') { + const regex = /(?-?[\d.]+)(?%|[a-zA-Z]*)/; + const matches = regex.exec(value); + + const numericValue = Number(matches?.groups?.value); + + if (!isNaN(numericValue)) { + foundNumericValues.push(numericValue); + } else { + throw new Error('No valid numeric value found'); + } + + if (!unit && matches?.groups?.unit) { + if (!foundUnit) { + foundUnit = matches.groups.unit; + } else if (foundUnit !== matches.groups.unit) { + throw new Error( + 'Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead' + ); + } + } + } else if (typeof value === 'number') { + foundNumericValues.push(value); + } else { + throw new Error('Invalid value type - pass a string or number'); + } + }); + + return `${callback(...foundNumericValues)}${unit || foundUnit}`; +}; diff --git a/packages/eui-theme-common/src/global_styling/functions/shadows.ts b/packages/eui-theme-common/src/global_styling/functions/shadows.ts new file mode 100644 index 00000000000..b3dd876d5ea --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/shadows.ts @@ -0,0 +1,26 @@ +/* + * 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 chroma from 'chroma-js'; +import { + COLOR_MODES_STANDARD, + EuiThemeColorModeStandard, +} from '../../services/theme/types'; + +// 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 +export const getShadowColor = ( + color: string, + opacity: number, + colorMode: EuiThemeColorModeStandard +) => { + const themeOpacity = + colorMode === COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1; + return chroma(color).alpha(themeOpacity).css(); +}; diff --git a/packages/eui-theme-common/src/global_styling/functions/size.ts b/packages/eui-theme-common/src/global_styling/functions/size.ts new file mode 100644 index 00000000000..a96b5b85452 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/size.ts @@ -0,0 +1,26 @@ +/* + * 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. + */ + +/* TODO: move to a shared module package */ + +/** + * Calculates the `px` value based on a scale multiplier + * @param scale - The font scale multiplier + * * + * @param themeOrBase - Theme base value + * * + * @returns string - Rem unit aligned to baseline + */ + +export const sizeToPixel = + (scale: number = 1) => + (themeOrBase: number | { base: number; [key: string]: any }) => { + const base = + typeof themeOrBase === 'object' ? themeOrBase.base : themeOrBase; + return `${base * scale}px`; + }; diff --git a/packages/eui-theme-common/src/global_styling/index.scss b/packages/eui-theme-common/src/global_styling/index.scss new file mode 100644 index 00000000000..8497b0ecf68 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/index.scss @@ -0,0 +1,12 @@ +// Core + +// Functions need to be first, since we use them in our variables and mixin definitions +@import 'functions/index'; + +// Variables come next, and are used in some mixins +@import 'variables/index'; + +// Mixins provide generic code expansion through helpers +@import 'mixins/index'; + +// The reset file has moved to global_styles.tsx diff --git a/packages/eui-theme-common/src/global_styling/index.ts b/packages/eui-theme-common/src/global_styling/index.ts new file mode 100644 index 00000000000..5d64b1fe0da --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/index.ts @@ -0,0 +1,12 @@ +/* + * 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. + */ + +export * from '../services/theme/types'; +export * from './functions'; +export * from './variables'; +export * from './mixins'; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_button.scss b/packages/eui-theme-common/src/global_styling/mixins/_button.scss new file mode 100644 index 00000000000..47c87b6e742 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_button.scss @@ -0,0 +1,149 @@ +// Provides a solid reset and base for handling sizing layout +// Does not include any visual styles +@mixin euiButtonBase { + display: inline-block; + appearance: none; + cursor: pointer; + height: $euiButtonHeight; + line-height: $euiButtonHeight; // prevents descenders from getting cut off + text-align: center; + white-space: nowrap; + max-width: 100%; + vertical-align: middle; +} + +// Adds the focus (and hover) animation for translating up 1px +@mixin euiButtonFocus { + @include euiCanAnimate { + transition: transform $euiAnimSpeedNormal ease-in-out, background-color $euiAnimSpeedNormal ease-in-out; + + &:hover:not(:disabled) { + transform: translateY(-1px); + } + + &:focus { + animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce; + } + + &:active:not(:disabled) { + transform: translateY(1px); + } + } +} + +// All of the button base styles including the base, focus, font, and initial styles +// Does not include individual alterations like color or sizes +@mixin euiButton { + @include euiButtonBase; + @include euiFont; + @include euiFontSize; + @include euiButtonFocus; + + font-weight: $euiButtonFontWeight; + text-decoration: none; + outline-offset: -1px; + + &:hover:not(:disabled), + &:focus { + text-decoration: underline; + } +} + +// Correctly lays out the contents of a button when using the proper dom elements of: +// +// 1. Apply margin to all but last item in the flex. +// 2. Margin gets flipped because of the row-reverse. +@mixin euiButtonContent($isReverse: false) { + height: 100%; + width: 100%; + vertical-align: middle; + + .euiButtonContent__icon, + .euiButtonContent__spinner { + flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size + } + + @if ($isReverse) { + flex-direction: row-reverse; + + > * + * { + margin-inline-start: 0; // 1, 2 + margin-inline-end: $euiSizeS; // 1, 2 + } + } @else { + display: flex; + justify-content: center; + align-items: center; + + > * + * { + margin-inline-start: $euiSizeS; // 1 + } + } +} + +@mixin euiButtonContentDisabled { + pointer-events: auto; + cursor: not-allowed; + + &:hover, + &:focus, + &:focus-within { + text-decoration: none; + } + + .euiButtonContent__spinner { + border-color: euiLoadingSpinnerBorderColors(currentColor); + } +} + +/* + * Creates the Amsterdam style of button with a transparent background + */ +@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + + $percentConversion: $transparency * 100%; + // This variable simulates the possibly darkest background the button could be on + // Simulates the 20% opaque color on top of the page background color + $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion); + // Then we can calculate the darkest text color needed + color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated); + // But still use transparency + background-color: transparentize($backgroundColor, $transparency); + + @if ($includeStates) { + &:not([class*='isDisabled']) { + &:hover, + &:focus { + // Duplicated from inert state simply to override default theme + background-color: transparentize($backgroundColor, $transparency); + } + } + } +} + +/* + * Creates the Amsterdam style of fill button + */ +@mixin euiButtonFillStyle($color: 'primary') { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + + background-color: $backgroundColor; + color: chooseLightOrDarkText($backgroundColor); +} + +// Keyframe animation declarations can be found in +// utility/animations.scss diff --git a/packages/eui-theme-common/src/global_styling/mixins/_form.scss b/packages/eui-theme-common/src/global_styling/mixins/_form.scss new file mode 100644 index 00000000000..c492afa8d90 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_form.scss @@ -0,0 +1,273 @@ +@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { + $iconSize: $euiSize; + $iconPadding: $euiFormControlPadding; + $marginBetweenIcons: $euiFormControlPadding / 2; + + @if ($compressed) { + $iconPadding: $euiFormControlCompressedPadding; + } + + @if variable-exists(numOfIcons) == false { + @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().'; + } @else if $numOfIcons == 1 { + padding-#{$side}: $iconPadding + $iconSize + $iconPadding; + } @else if $numOfIcons == 2 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } @else if $numOfIcons == 3 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } +} + +@mixin euiPlaceholderPerBrowser { + // stylelint-disable selector-no-vendor-prefix + // Each prefix must be its own content block + &::-webkit-input-placeholder { @content; opacity: 1; } + &::-moz-placeholder { @content; opacity: 1; } + &:-ms-input-placeholder { @content; opacity: 1; } + &:-moz-placeholder { @content; opacity: 1; } + &::placeholder { @content; opacity: 1; } +} + +@function euiFormControlGradient($color: $euiColorPrimary) { + @return linear-gradient(to top, + $color, + $color 2px, + transparent 2px, + transparent 100% + ); +} + +@mixin euiFormControlText { + @include euiFont; + font-size: $euiFontSizeS; + color: $euiColorTextParagraph; + + @include euiPlaceholderPerBrowser { + color: $euiFormControlPlaceholderText; + } +} + +@mixin euiFormControlSize( + $height: $euiFormControlHeight, + $includeAlternates: false +) { + // Default + max-width: $euiFormMaxWidth; + width: 100%; + height: $height; + + @if ($includeAlternates) { + &--fullWidth { + max-width: 100%; + } + + &--compressed { + height: $euiFormControlCompressedHeight; + } + + &--inGroup { + height: 100%; + } + } +} + +@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { + @if ($isIconOptional) { + @at-root { + #{&}--withIcon { + @include euiFormControlLayoutPadding(1, $side, $compressed); + } + } + } @else { + @include euiFormControlLayoutPadding(1, $side, $compressed); + } +} + +@mixin euiFormControlIsLoading($isNextToIcon: false) { + @at-root { + #{&}-isLoading { + @if ($isNextToIcon) { + @include euiFormControlLayoutPadding(2); + } @else { + @include euiFormControlLayoutPadding(1); + } + } + + #{&}-isLoading#{&}--compressed { + @if ($isNextToIcon) { + @include euiFormControlLayoutPadding(2, $compressed: true); + } @else { + @include euiFormControlLayoutPadding(1, $compressed: true); + } + } + } +} + +// 1. Must supply both values to background-size or some browsers apply the single value to both directions + +@mixin euiFormControlDefaultShadow($borderOnly: false) { + background-color: $euiFormBackgroundColor; + background-repeat: no-repeat; + background-size: 0% 100%; // 1 + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } @else { + box-shadow: + #{$euiFormControlBoxShadow}, + inset 0 0 0 1px $euiFormBorderColor; + } + + transition: + box-shadow $euiAnimSpeedFast ease-in, + background-image $euiAnimSpeedFast ease-in, + background-size $euiAnimSpeedFast ease-in, + background-color $euiAnimSpeedFast ease-in; + + // Fixes bug in Firefox where adding a transition to the background-color + // caused a flash of differently styled dropdown. + @supports (-moz-appearance: none) { + // List *must* be in the same order as the above. + transition-property: box-shadow, background-image, background-size; + } +} + +@mixin euiFormControlFocusStyle($borderOnly: false) { + background-color: tintOrShade($euiColorEmptyShade, 0%, 40%); + background-image: euiFormControlGradient(); + background-size: 100% 100%; // 1 + outline: none; // Blanket remove all outlines relying on our own bottom border + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } @else { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } +} + +@mixin euiFormControlInvalidStyle { + background-image: euiFormControlGradient($euiColorDanger); + background-size: 100%; +} + +@mixin euiFormControlDisabledTextStyle { + color: $euiFormControlDisabledColor; + -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari +} + +@mixin euiFormControlDisabledStyle { + @include euiFormControlDisabledTextStyle; + cursor: not-allowed; + background: $euiFormBackgroundDisabledColor; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; + + @include euiPlaceholderPerBrowser { + color: $euiFormControlDisabledColor; + } +} + +@mixin euiFormControlReadOnlyStyle { + cursor: default; + color: $euiColorTextParagraph; + -webkit-text-fill-color: $euiColorTextParagraph; // Required for Safari + // Use transparency since there is no border and in case form is on a non-white background + background: $euiFormBackgroundReadOnlyColor; + border-color: transparent; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; +} + +// 2. Override invalid state with focus state. + +@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { + @include euiFormControlSize($includeAlternates: $includeSizes); + @include euiFormControlDefaultShadow; + @include euiFormControlText; + + border: none; + border-radius: $euiFormControlBorderRadius; + padding: $euiFormControlPadding; + + @if ($includeStates) { + &:invalid { // 2 + @include euiFormControlInvalidStyle; + } + + &:focus { // 2 + @include euiFormControlFocusStyle; + } + + &:disabled { + @include euiFormControlDisabledStyle; + } + + &[readOnly] { + @include euiFormControlReadOnlyStyle; + } + + // Needs to be set for autofill + &:-webkit-autofill { + -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade); + + ~ .euiFormControlLayoutIcons { + color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade); + } + } + } + + @if ($includeSizes) { + &--compressed { + @include euiFormControlStyleCompressed($borderOnly, $includeStates); + } + + &--inGroup { + // stylelint-disable-next-line declaration-no-important + box-shadow: none !important; + border-radius: 0; + } + } +} + +@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { + @include euiFormControlDefaultShadow($borderOnly: true); + padding: $euiFormControlCompressedPadding; + border-radius: $euiFormControlCompressedBorderRadius; + + @if ($includeStates) { + &:invalid { // 2 + @include euiFormControlInvalidStyle; + } + + &:focus { // 2 + @include euiFormControlFocusStyle($borderOnly: true); + } + + &:disabled { + @include euiFormControlDisabledStyle; + } + + &[readOnly] { + @include euiFormControlReadOnlyStyle; + } + } +} + +@mixin euiHiddenSelectableInput { + position: absolute; + // stylelint-disable-next-line declaration-no-important + opacity: 0 !important; // Make sure it's still hidden when :disabled + width: 100%; + height: 100%; + cursor: pointer; +} + +// Adjusts form controls border radius +@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) { + @if $internal == true { + $borderRadius: $borderRadius - 1; + } + @if $side == 'left' { + border-radius: $borderRadius 0 0 $borderRadius; + } @else if $side == 'right' { + border-radius: 0 $borderRadius $borderRadius 0; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss b/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss new file mode 100644 index 00000000000..7de426d4a59 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss @@ -0,0 +1,117 @@ +// Helper mixins + +// Set scroll bar appearance on Chrome (and firefox). +@mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent, $size: 'thin') { + // Firefox's scrollbar coloring cascades, but the sizing does not, + // so it's being added to this mixin for allowing support wherever custom scrollbars are + scrollbar-color: transparentize($thumbColor, .5) $trackBackgroundColor; // Firefox support + + @if ($size == 'thin') { + scrollbar-width: thin; + } + + // stylelint-disable selector-no-vendor-prefix + &::-webkit-scrollbar { + width: $euiScrollBar; + height: $euiScrollBar; + } + + &::-webkit-scrollbar-thumb { + background-color: transparentize($thumbColor, .5); + background-clip: content-box; + border-radius: $euiScrollBar; + + @if ($size == 'thin') { + border: $euiScrollBarCornerThin solid $trackBackgroundColor; + } @else { + border: $euiScrollBarCorner solid $trackBackgroundColor; + } + } + + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background-color: $trackBackgroundColor; + } +} + +/** + * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable. + * Browser's supporting `:focus-visible` will still show outline on keyboard focus only. + * Others like Safari, won't show anything at all. + * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable) + */ + +// Just overflow and scrollbars +@mixin euiYScroll { + @include euiScrollBar; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +@mixin euiXScroll { + @include euiScrollBar; + overflow-x: auto; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +// The full overflow with shadow +@mixin euiYScrollWithShadows { + @include euiYScroll; + @include euiOverflowShadow('y'); +} + +@mixin euiXScrollWithShadows { + @include euiXScroll; + @include euiOverflowShadow('x'); +} + +// Hiding elements offscreen to only be read by screen reader +// See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info +@mixin euiScreenReaderOnly { + // Take the element out of the layout + position: absolute; + // Keep it vertically inline + top: auto; + // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text + left: -10000px; + // The element must have a size (for some screen readers) + width: 1px; + height: 1px; + // But reduce the visible size to nothing + clip: rect(0 0 0 0); + clip-path: inset(50%); + // And ensure no overflows occur + overflow: hidden; + // Chrome requires the negative margin to not cause overflows of parent containers + margin: -1px; +} + +// Doesn't have reduced motion turned on +@mixin euiCanAnimate { + @media screen and (prefers-reduced-motion: no-preference) { + @content; + } +} + +// Does have reduced motion turned on +@mixin euiCantAnimate { + @media screen and (prefers-reduced-motion: reduce) { + @content; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_index.scss b/packages/eui-theme-common/src/global_styling/mixins/_index.scss new file mode 100644 index 00000000000..7d0cba8a92e --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_index.scss @@ -0,0 +1,14 @@ +@import 'responsive'; +@import 'shadow'; +@import 'size'; +@import 'typography'; +@import 'helpers'; +@import 'states'; + +@import 'button'; +@import 'form'; +@import 'loading'; +@import 'link'; +@import 'panel'; +@import 'range'; +@import 'tool_tip'; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_link.scss b/packages/eui-theme-common/src/global_styling/mixins/_link.scss new file mode 100644 index 00000000000..98dac59b9cc --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_link.scss @@ -0,0 +1,11 @@ +@mixin euiLink { + text-align: left; + + &:hover { + text-decoration: underline; + } + + &:focus { + text-decoration: underline; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_loading.scss b/packages/eui-theme-common/src/global_styling/mixins/_loading.scss new file mode 100644 index 00000000000..0f72a8433f7 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_loading.scss @@ -0,0 +1,6 @@ +@function euiLoadingSpinnerBorderColors( + $main: $euiColorLightShade, + $highlight: $euiColorPrimary +) { + @return $highlight $main $main $main; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_panel.scss b/packages/eui-theme-common/src/global_styling/mixins/_panel.scss new file mode 100644 index 00000000000..4eb0a5fb55a --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_panel.scss @@ -0,0 +1,55 @@ +@mixin euiPanel($selector) { + @if variable-exists(selector) == false { + @error 'A $selector must be provided to @mixin euiPanel().'; + } @else { + #{$selector} { + flex-grow: 1; + + &#{$selector}--flexGrowZero { + flex-grow: 0; + } + + &#{$selector}--hasShadow { + @include euiBottomShadowMedium; + } + + &#{$selector}--hasBorder { + border: $euiBorderThin; + box-shadow: none; + } + + &#{$selector}--isClickable { + // transition the shadow + transition: all $euiAnimSpeedFast $euiAnimSlightResistance; + + &:enabled { // This is a good selector for buttons since it doesn't exist on divs + // in case of button wrapper which inherently is inline-block and no width + display: block; + width: 100%; + text-align: left; + } + + &:hover, + &:focus { + @include euiBottomShadow; + transform: translateY(-2px); + cursor: pointer; + } + } + + // Border Radii + @each $modifier, $amount in $euiPanelBorderRadiusModifiers { + &#{$selector}--#{$modifier} { + border-radius: $amount; + } + } + + // Background colors + @each $modifier, $amount in $euiPanelBackgroundColorModifiers { + &#{$selector}--#{$modifier} { + background-color: $amount; + } + } + } + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_range.scss b/packages/eui-theme-common/src/global_styling/mixins/_range.scss new file mode 100644 index 00000000000..ec47e39e2d6 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_range.scss @@ -0,0 +1,62 @@ +/* +The CSS in JS version of this file lives in: + - src/components/form/range/range.styles.ts + +The following files still use the Sass version: + - src/themes/amsterdam/overrides/_color_stops.scss + - src/themes/amsterdam/overrides/_hue.scss +*/ + +@mixin euiRangeTrackSize($compressed: false) { + height: $euiRangeTrackHeight; + width: $euiRangeTrackWidth; + + @if ($compressed) { + height: $euiRangeTrackCompressedHeight; + } +} + +@mixin euiRangeTrackPerBrowser { + &::-webkit-slider-runnable-track { @content; } + &::-moz-range-track { @content; } + &::-ms-fill-lower { @content; } + &::-ms-fill-upper { @content; } +} + +@mixin euiRangeThumbBorder { + border: 2px solid $euiRangeThumbBorderColor; +} + +@mixin euiRangeThumbBoxShadow { + box-shadow: + 0 0 0 1px $euiRangeThumbBorderColor, + 0 2px 2px -1px rgba($euiShadowColor, .2), + 0 1px 5px -2px rgba($euiShadowColor, .2); +} + +@mixin euiRangeThumbFocusBoxShadow { + box-shadow: 0 0 0 2px $euiFocusRingColor; +} + +@mixin euiRangeThumbStyle { + @include euiRangeThumbBoxShadow; + @include euiRangeThumbBorder; + cursor: pointer; + background-color: $euiRangeThumbBackgroundColor; + padding: 0; + height: $euiRangeThumbHeight; + width: $euiRangeThumbWidth; + box-sizing: border-box; // required for firefox or the border makes the width and height to increase +} + +@mixin euiRangeThumbPerBrowser { + &::-webkit-slider-thumb { @content; } + &::-moz-range-thumb { @content; } + &::-ms-thumb { @content; } +} + +@mixin euiRangeThumbFocus { + @include euiRangeThumbBorder; + @include euiRangeThumbFocusBoxShadow; + background-color: $euiColorPrimary; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss b/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss new file mode 100644 index 00000000000..0fa3a9b08a8 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss @@ -0,0 +1,44 @@ +// A sem-complicated mixin for breakpoints, that takes any number of +// named breakpoints that exists in $euiBreakpoints. + +@mixin euiBreakpoint($sizes...) { + // Loop through each size parameter + @each $size in $sizes { + // Store the location of the size in the list to check against + $index: index($euiBreakpointKeys, $size); + + // Check to make sure it exists in the allowed breakpoint names + @if ( $index ) { + + // Set the min size to the value of the size + $minSize: map-get($euiBreakpoints, $size); + + // If it is the last item, don't give it a max-width + @if ( $index == length($euiBreakpointKeys) ) { + @media only screen and (min-width: $minSize) { + @content; + } + // If it's not the last item, add a max-width + } @else { + + // Set the max size to the value of the next size (-1px as to not overlap) + $maxSize: map-get($euiBreakpoints, nth($euiBreakpointKeys, $index + 1)) - 1px; + + // If it's the the first item, don't set a min-width + @if ( $index == 1 ) { + @media only screen and (max-width: $maxSize) { + @content; + } + // Otherwise it should have a min and max width + } @else { + @media only screen and (min-width: $minSize) and (max-width: $maxSize) { + @content; + } + } + } + // If it's not a known breakpoint, throw a warning + } @else { + @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'"; + } + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss new file mode 100644 index 00000000000..71162d7978d --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss @@ -0,0 +1,100 @@ +@function shadowOpacity($opacity) { + @if (lightness($euiColorTextParagraph) < 50) { + @return $opacity * 1; + } @else { + @return $opacity * 2.5; + } +} + +@mixin euiSlightShadow($color: $euiShadowColor) { + box-shadow: + 0 .8px .8px rgba($color, shadowOpacity(.04)), + 0 2.3px 2px rgba($color, shadowOpacity(.03)); +} + +@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)); +} + +@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)); +} + +// 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)); +} + +@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)); +} + +@mixin euiBottomShadowLarge( + $color: $euiShadowColor, + $opacity: 0, + $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)); + } @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)); + } +} + +// stylelint-disable color-named +@mixin euiOverflowShadow($direction: 'y', $side: 'both') { + $hideHeight: $euiScrollBarCornerThin * 1.25; + $gradient: null; + $gradientStart: + transparentize(red, .9) 0%, + transparentize(red, 0) $hideHeight; + $gradientEnd: + transparentize(red, 0) calc(100% - #{$hideHeight}), + transparentize(red, .9) 100%; + @if ($side == 'both' or $side == 'start' or $side == 'end') { + @if ($side == 'both') { + $gradient: $gradientStart, $gradientEnd; + } @else if ($side == 'start') { + $gradient: $gradientStart; + } @else { + $gradient: $gradientEnd; + } + } @else { + @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'"; + } + + @if ($direction == 'y') { + mask-image: linear-gradient(to bottom, #{$gradient}); + } @else if ($direction == 'x') { + mask-image: linear-gradient(to right, #{$gradient}); + } @else { + @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'"; + } + + // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working + // This workaround forces a stacking context on the scrolling container, which + // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855 + transform: translateZ(0); +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_size.scss b/packages/eui-theme-common/src/global_styling/mixins/_size.scss new file mode 100644 index 00000000000..809dc870bf8 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_size.scss @@ -0,0 +1,4 @@ +@mixin size($size) { + width: $size; + height: $size; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_states.scss b/packages/eui-theme-common/src/global_styling/mixins/_states.scss new file mode 100644 index 00000000000..a2d1bc83aef --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_states.scss @@ -0,0 +1,50 @@ +@mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) { + @if $size == 'large' { + // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty + // stylelint-disable-next-line declaration-no-important + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important; + } @else { + // stylelint-disable-next-line declaration-no-important + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important; + } +} + +// Keyframe animation declarations can be found in +// utility/animations.scss + +@mixin euiFocusBackground($color: $euiColorPrimary) { + background-color: tintOrShade($euiColorPrimary, ((1 - $euiFocusTransparency) * 100%), ((1 - $euiFocusTransparency) * 100%)); +} + +@mixin euiHoverState { + cursor: pointer; + text-decoration: underline; +} + +@mixin euiFocusState($color: $euiColorPrimary) { + @include euiHoverState; + @include euiFocusBackground($color); +} + +@mixin euiDisabledState($color: $euiButtonColorDisabledText) { + cursor: not-allowed; + text-decoration: none; + + @if ($color) { + color: $color; + } +} + +@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) { + &:hover { + @include euiHoverState; + } + + &:focus { + @include euiFocusState($focusColor); + } + + &:disabled { + @include euiDisabledState($disabledColor); + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss b/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss new file mode 100644 index 00000000000..d8feb0d4258 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss @@ -0,0 +1,25 @@ +@mixin euiToolTipStyle($size: null) { + @include euiBottomShadow($color: $euiColorInk); + + $euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default; + $euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default; + + border-radius: $euiBorderRadius; + background-color: $euiTooltipBackgroundColor; + color: $euiColorGhost; + z-index: $euiZLevel9; + max-width: 256px; + overflow-wrap: break-word; + padding: $euiSizeS; + + .euiHorizontalRule { + background-color: $euiTooltipBorderColor; + } +} + +@mixin euiToolTipTitle { + font-weight: $euiFontWeightBold; + border-bottom: solid $euiBorderWidthThin $euiTooltipBorderColor; + padding-bottom: $euiSizeXS; + margin-bottom: $euiSizeXS; +} \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/mixins/_typography.scss b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss new file mode 100644 index 00000000000..65bea676952 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss @@ -0,0 +1,167 @@ +// stylelint-disable property-no-vendor-prefix +// stylelint-disable declaration-no-important + +@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + @return #{$size / $euiFontSize}rem; + } @else if ($sizingMethod == 'em') { + @return #{$size / $euiFontSize}em; + } +} + +// It can also be applied to calculate paddings +@function marginToRemOrEm($elementSize, $elementFontSize, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + @return #{$elementSize / $euiFontSize}rem; + } @else if ($sizingMethod == 'em') { + @return #{$elementSize / $elementFontSize}em; + } +} + +// Spit out rem and px +@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + font-size: $size; + font-size: fontSizeToRemOrEm($size, 'rem'); + } @else if ($sizingMethod == 'em') { + font-size: fontSizeToRemOrEm($size, 'em'); + } +} + +@mixin lineHeightFromBaseline($multiplier: 3) { + line-height: lineHeightFromBaseline($multiplier); +} + +// Some mixins that help us deal with browser scaling of text more consistently. +// Essentially, fonts across eui should scale against the root html element, not +// against parent inheritance. + +// Our base fonts + +@mixin euiFont { + font-family: $euiFontFamily; + font-weight: $euiFontWeightRegular; + letter-spacing: -.005em; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + font-kerning: normal; +} + +@mixin euiCodeFont { + font-family: $euiCodeFontFamily; + letter-spacing: normal; +} + +@mixin euiText { + color: $euiColorTextParagraph; + font-weight: $euiFontWeightRegular; +} + +@mixin euiTitle($size: 'm') { + @include euiTextBreakWord; + color: $euiColorTextHeading; + + @if (map-has-key($euiTitles, $size)) { + @each $property, $value in map-get($euiTitles, $size) { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + } @else { + @include fontSize($size); + @include lineHeightFromBaseline(3); + } +} + +// Font sizing extends, using rem mixin + +@mixin euiFontSizeXS { + @include fontSize($euiFontSizeXS); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeS { + @include fontSize($euiFontSizeS); + line-height: $euiLineHeight; +} + +@mixin euiFontSize { + @include fontSize($euiFontSize); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeM { + @include fontSize($euiFontSizeM); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeL { + @include fontSize($euiFontSizeL); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeXL { + @each $property, $value in map-get($euiTitles, 'm') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.25; +} + +@mixin euiFontSizeXXL { + @each $property, $value in map-get($euiTitles, 'l') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.25; +} + +@mixin euiTextBreakWord { + // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ + overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container + word-break: break-word; +} + +/** + * Text truncation + * + * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis. + * + * 1. Ensure that the node has a maximum width after which truncation can occur. + */ +@mixin euiTextTruncate { + max-width: 100%; // 1 + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +@mixin euiNumberFormat { + font-feature-settings: $euiFontFeatureSettings, 'tnum' 1; // Fixed-width numbers for tabular data +} + +/** + * Text weight shifting + * + * When changing the font-weight based the state of the component + * this mixin will ensure that the sizing is dependent on the boldest + * weight so it doesn't shifter sibling content. + */ +@mixin euiTextShift($fontWeight: $euiFontWeightBold, $attr: 'data-text') { + &::after { + display: block; + content: attr(#{$attr}); + font-weight: $fontWeight; + height: 0; + overflow: hidden; + visibility: hidden; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/index.ts b/packages/eui-theme-common/src/global_styling/mixins/index.ts new file mode 100644 index 00000000000..2041f2d9aca --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/index.ts @@ -0,0 +1,9 @@ +/* + * 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. + */ + +export * from './shadow'; diff --git a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts new file mode 100644 index 00000000000..2cc0d20d64f --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts @@ -0,0 +1,170 @@ +/* + * 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 type { UseEuiTheme } from '../../services/theme/types'; +import { getShadowColor } from '../functions'; +import { + _EuiThemeShadowSize, + _EuiThemeShadowCustomColor, +} from '../variables/shadow'; + +export interface EuiShadowCustomColor { + color?: string; +} + +/** + * euiSlightShadow + */ +export const euiShadowXSmall = ( + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} +) => { + const color = _color || euiTheme.colors.shadow; + return ` +box-shadow: + 0 .8px .8px ${getShadowColor(color, 0.04, colorMode)}, + 0 2.3px 2px ${getShadowColor(color, 0.03, colorMode)}; +`; +}; + +/** + * bottomShadowSmall + */ +export const euiShadowSmall = ( + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} +) => { + const color = _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)}; +`; +}; + +/** + * bottomShadowMedium + */ +export const euiShadowMedium = ( + { euiTheme, colorMode }: UseEuiTheme, + { color: _color, property }: _EuiThemeShadowCustomColor = {} +) => { + const color = _color || euiTheme.colors.shadow; + + if (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)};`; + } +}; + +/** + * bottomShadow + */ +export const euiShadowLarge = ( + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} +) => { + const color = _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)}; +`; +}; + +/** + * bottomShadowLarge + */ +export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor { + reverse?: boolean; +} +export const euiShadowXLarge = ( + { euiTheme, colorMode }: UseEuiTheme, + { color: _color, reverse }: EuiShadowXLarge = {} +) => { + const color = _color || euiTheme.colors.shadow; + 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)}; +`; +}; + +/** + * slightShadowHover + */ +export const euiSlightShadowHover = ( + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} +) => { + const color = _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)}; +`; +}; + +/** + * bottomShadowFlat + * + * Similar to shadow medium but without the bottom depth. + * Useful for popovers that drop UP rather than DOWN. + */ +export const euiShadowFlat = ( + { euiTheme, colorMode }: UseEuiTheme, + { color: _color }: _EuiThemeShadowCustomColor = {} +) => { + const color = _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)}; +`; +}; + +export const euiShadow = ( + euiThemeContext: UseEuiTheme, + size: _EuiThemeShadowSize = 'l', + { color }: _EuiThemeShadowCustomColor = {} +) => { + switch (size) { + case 'xs': + return euiShadowXSmall(euiThemeContext, { color }); + case 's': + return euiShadowSmall(euiThemeContext, { color }); + case 'm': + return euiShadowMedium(euiThemeContext, { color }); + case 'l': + return euiShadowLarge(euiThemeContext, { color }); + case 'xl': + return euiShadowXLarge(euiThemeContext, { color }); + + default: + console.warn('Please provide a valid size option to useEuiShadow'); + return ''; + } +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/_animations.scss b/packages/eui-theme-common/src/global_styling/variables/_animations.scss new file mode 100644 index 00000000000..93b9daf1641 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_animations.scss @@ -0,0 +1,13 @@ +// Animations + +$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default; +$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default; + +$euiAnimSpeedExtraFast: 90ms !default; +$euiAnimSpeedFast: 150ms !default; +$euiAnimSpeedNormal: 250ms !default; +$euiAnimSpeedSlow: 350ms !default; +$euiAnimSpeedExtraSlow: 500ms !default; + +// Keyframe animation declarations can be found in +// eui/utility/animations.scss diff --git a/packages/eui-theme-common/src/global_styling/variables/_borders.scss b/packages/eui-theme-common/src/global_styling/variables/_borders.scss new file mode 100644 index 00000000000..0caaa11c0da --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_borders.scss @@ -0,0 +1,11 @@ +// Borders + +$euiBorderWidthThin: 1px !default; +$euiBorderWidthThick: 2px !default; + +$euiBorderColor: $euiColorBorderBaseSubdued !default; +$euiBorderRadius: $euiSizeS * .75 !default; +$euiBorderRadiusSmall: $euiSizeS * .5 !default; +$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default; +$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default; +$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_breakpoint.ts b/packages/eui-theme-common/src/global_styling/variables/_breakpoint.ts new file mode 100644 index 00000000000..3284919c1fa --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_breakpoint.ts @@ -0,0 +1,17 @@ +/* + * 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 { _EuiThemeBreakpoints } from './breakpoint'; + +export const breakpoint: _EuiThemeBreakpoints = { + xl: 1200, + l: 992, + m: 768, + s: 575, + xs: 0, +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/_buttons.scss b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss new file mode 100644 index 00000000000..61e36da78bd --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss @@ -0,0 +1,18 @@ +$euiButtonHeight: $euiSizeXXL !default; +$euiButtonHeightSmall: $euiSizeXL !default; +$euiButtonHeightXSmall: $euiSizeL !default; + +// Modifier naming and colors. +$euiButtonTypes: ( + primary: $euiColorPrimary, + accent: $euiColorAccent, + success: $euiColorSuccess, + warning: $euiColorWarning, + danger: $euiColorDanger, + ghost: $euiColorGhost, // Ghost is special, and does not care about theming. + text: $euiColorDarkShade, // Reserved for special use cases +) !default; + +// TODO: Remove this once elastic-charts no longer uses this variable +// @see https://github.com/elastic/elastic-charts/pull/2528 +$euiButtonColorDisabledText: $euiColorTextDisabled !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss b/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss new file mode 100644 index 00000000000..f5dfd287835 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss @@ -0,0 +1,10 @@ +// Separated out to its own file for easy import into docs + +// Font weights +$euiFontWeightLight: 300 !default; +$euiFontWeightRegular: 400 !default; +$euiFontWeightMedium: 500 !default; +$euiFontWeightSemiBold: 600 !default; +$euiFontWeightBold: 700 !default; +$euiCodeFontWeightRegular: 400 !default; +$euiCodeFontWeightBold: 700 !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_form.scss b/packages/eui-theme-common/src/global_styling/variables/_form.scss new file mode 100644 index 00000000000..da5669830e8 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_form.scss @@ -0,0 +1,8 @@ +// Sizing +$euiFormMaxWidth: $euiSizeXXL * 10 !default; +$euiFormControlHeight: $euiSizeXXL !default; +$euiFormControlCompressedHeight: $euiSizeXL !default; +$euiFormControlPadding: $euiSizeM !default; +$euiFormControlCompressedPadding: $euiSizeS !default; +$euiFormControlBorderRadius: $euiBorderRadius !default; +$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall !default; \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/variables/_index.scss b/packages/eui-theme-common/src/global_styling/variables/_index.scss new file mode 100644 index 00000000000..2397647bde9 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_index.scss @@ -0,0 +1,22 @@ +// -------------------------------------------------------------------------------------- +// EUI global variables +// -------------------------------------------------------------------------------------- +// This module contains all global variables available within EUI. Every variable in this +// document should be prefixed with $eui. This lets us know where the variable is +// coming from when looking inside the individual component files. Any component local +// variables should be declared at the top of those documents prefixed with $componentName. + +// Global colors are established and importer per theme, before this manifest +// Import order is important. Size, vis colors, ...etc are used in other variables. +@import 'size'; +@import 'animations'; +@import 'font_weight'; +@import 'typography'; +@import 'borders'; +@import 'responsive'; +@import 'shadows'; +@import 'states'; +@import 'z_index'; + +@import 'buttons'; +@import 'form'; diff --git a/packages/eui-theme-common/src/global_styling/variables/_responsive.scss b/packages/eui-theme-common/src/global_styling/variables/_responsive.scss new file mode 100644 index 00000000000..de6e8ca5b83 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_responsive.scss @@ -0,0 +1,9 @@ +$euiBreakpoints: ( + 'xs': 0, + 's': 575px, + 'm': 768px, + 'l': 992px, + 'xl': 1200px +) !default; + +$euiBreakpointKeys: map-keys($euiBreakpoints); diff --git a/packages/eui-theme-common/src/global_styling/variables/_shadows.scss b/packages/eui-theme-common/src/global_styling/variables/_shadows.scss new file mode 100644 index 00000000000..05e445f27a1 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_shadows.scss @@ -0,0 +1,2 @@ +// Shadows +$euiShadowColor: $euiColorInk !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_size.scss b/packages/eui-theme-common/src/global_styling/variables/_size.scss new file mode 100644 index 00000000000..29eca9c1b00 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_size.scss @@ -0,0 +1,13 @@ +$euiSize: 16px !default; + +$euiSizeXS: $euiSize * .25 !default; +$euiSizeS: $euiSize * .5 !default; +$euiSizeM: $euiSize * .75 !default; +$euiSizeL: $euiSize * 1.5 !default; +$euiSizeXL: $euiSize * 2 !default; +$euiSizeXXL: $euiSize * 2.5 !default; + +$euiScrollBar: $euiSize !default; +// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb +$euiScrollBarCorner: $euiSizeXS !default; +$euiScrollBarCornerThin: $euiSizeS * .75 !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_states.scss b/packages/eui-theme-common/src/global_styling/variables/_states.scss new file mode 100644 index 00000000000..fba4cc59caa --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_states.scss @@ -0,0 +1,14 @@ +// Colors +$euiFocusRingColor: rgba($euiColorPrimary, .3) !default; +$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default; +$euiFocusRingAnimStartSize: 6px !default; +$euiFocusRingAnimStartSizeLarge: 10px !default; + +// Sizing +$euiFocusRingSizeLarge: $euiSizeXS !default; +$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default; + +// Transparency +$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default; +$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default; +$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_typography.scss b/packages/eui-theme-common/src/global_styling/variables/_typography.scss new file mode 100644 index 00000000000..1ca62f3248c --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_typography.scss @@ -0,0 +1,75 @@ +// Families +$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default; +$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default; + +// Careful using ligatures. Code editors like ACE will often error because of width calculations +$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; + +// Font sizes -- scale is loosely based on Major Third (1.250) +$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default; + +$euiFontSize: $euiSize !default; // 5th position in scale +$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7) !default; // 12px +$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6) !default; // 14px +$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4) !default; // 18px +$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3) !default; // 20px +$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; // 28px +$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // 36px + +// Line height +$euiLineHeight: 1.5 !default; +$euiBodyLineHeight: 1 !default; + +// Normally functions are imported before variables in `_index.scss` files +// But because they need to consume some typography variables they need to live here +@function convertToRem($size) { + @return #{$size / $euiFontSize}rem; +} + +// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. +// EX: A proper line-height for text is 1.5 times the font-size. +// If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the +// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. +@function lineHeightFromBaseline($multiplier: 3) { + @return convertToRem(($euiFontSize / 2) * $multiplier); +} + +// Titles map +// Lists all the properties per EuiTitle size that then gets looped through to create the selectors. +// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves +$euiTitles: ( + 'xxxs': ( + 'font-size': $euiFontSizeXS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xxs': ( + 'font-size': $euiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xs': ( + 'font-size': $euiFontSize, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightSemiBold, + 'letter-spacing': -.02em, + ), + 's': ( + 'font-size': $euiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightMedium, + 'letter-spacing': -.025em, + ), + 'm': ( + 'font-size': $euiFontSizeXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.04em, + ), + 'l': ( + 'font-size': $euiFontSizeXXL, + 'line-height': lineHeightFromBaseline(6), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.03em, + ), +) !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_z_index.scss b/packages/eui-theme-common/src/global_styling/variables/_z_index.scss new file mode 100644 index 00000000000..2448a34c61a --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_z_index.scss @@ -0,0 +1,34 @@ +// Z-Index + +// Remember that z-index is relative to parent and based on the stacking context. +// z-indexes only compete against other z-indexes when they exist as children of +// that shared parent. + +// That means a popover with a settings of 2, will still show above a modal +// with a setting of 100, if it is within that modal and not besides it. + +// Generally that means it's a good idea to consider things added to this file +// as competitive only as siblings. + +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + +$euiZLevel0: 0; +$euiZLevel1: 1000; +$euiZLevel2: 2000; +$euiZLevel3: 3000; +$euiZLevel4: 4000; +$euiZLevel5: 5000; +$euiZLevel6: 6000; +$euiZLevel7: 7000; +$euiZLevel8: 8000; +$euiZLevel9: 9000; + +$euiZToastList: $euiZLevel9; +$euiZModal: $euiZLevel8; +$euiZMask: $euiZLevel6; +$euiZNavigation: $euiZLevel6; +$euiZContentMenu: $euiZLevel2; +$euiZHeader: $euiZLevel1; +$euiZFlyout: $euiZHeader; +$euiZMaskBelowHeader: $euiZHeader; +$euiZContent: $euiZLevel0; diff --git a/packages/eui-theme-common/src/global_styling/variables/animations.ts b/packages/eui-theme-common/src/global_styling/variables/animations.ts new file mode 100644 index 00000000000..46bce009c92 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/animations.ts @@ -0,0 +1,66 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * A constant storing the `prefers-reduced-motion` media query + * so that when it is turned off, animations are not run. + */ +export const euiCanAnimate = + '@media screen and (prefers-reduced-motion: no-preference)'; + +/** + * A constant storing the `prefers-reduced-motion` media query that will + * only apply the content if the setting is off (reduce). + */ +export const euiCantAnimate = + '@media screen and (prefers-reduced-motion: reduce)'; + +/** + * Speeds / Durations / Delays + */ + +export const EuiThemeAnimationSpeeds = [ + 'extraFast', + 'fast', + 'normal', + 'slow', + 'extraSlow', +] as const; + +export type _EuiThemeAnimationSpeed = (typeof EuiThemeAnimationSpeeds)[number]; + +export type _EuiThemeAnimationSpeeds = { + /** - Default value: 90ms */ + extraFast: CSSProperties['animationDuration']; + /** - Default value: 150ms */ + fast: CSSProperties['animationDuration']; + /** - Default value: 250ms */ + normal: CSSProperties['animationDuration']; + /** - Default value: 350ms */ + slow: CSSProperties['animationDuration']; + /** - Default value: 500ms */ + extraSlow: CSSProperties['animationDuration']; +}; + +/** + * Easings / Timing functions + */ + +export const EuiThemeAnimationEasings = ['bounce', 'resistance'] as const; + +export type _EuiThemeAnimationEasing = + (typeof EuiThemeAnimationEasings)[number]; + +export type _EuiThemeAnimationEasings = Record< + _EuiThemeAnimationEasing, + CSSProperties['animationTimingFunction'] +>; + +export type _EuiThemeAnimation = _EuiThemeAnimationEasings & + _EuiThemeAnimationSpeeds; diff --git a/packages/eui-theme-common/src/global_styling/variables/borders.ts b/packages/eui-theme-common/src/global_styling/variables/borders.ts new file mode 100644 index 00000000000..10eda82eb9b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/borders.ts @@ -0,0 +1,74 @@ +/* + * 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 { CSSProperties } from 'react'; +import { ColorModeSwitch } from '../../services/theme/types'; + +export interface _EuiThemeBorderWidthValues { + /** + * Thinnest width for border + * - Default value: 1px + */ + thin: CSSProperties['borderWidth']; + /** + * Thickest width for border + * - Default value: 2px + */ + thick: CSSProperties['borderWidth']; +} + +export interface _EuiThemeBorderRadiusValues { + /** + * Primary corner radius size + * - Default value: 6px + */ + medium: CSSProperties['borderRadius']; + /** + * Small corner radius size + * - Default value: 4px + */ + small: CSSProperties['borderRadius']; +} + +export interface _EuiThemeBorderColorValues { + /** + * Color for all borders; Default is `colors.lightShade` + */ + color: ColorModeSwitch; +} + +export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues { + /** + * Varied thicknesses for borders + */ + width: _EuiThemeBorderWidthValues; + /** + * Varied border radii + */ + radius: _EuiThemeBorderRadiusValues; +} + +export interface _EuiThemeBorderTypes { + /** + * Full `border` property string computed using `border.width.thin` and `border.color` + * - Default value: 1px solid [colors.lightShade] + */ + thin: CSSProperties['border']; + /** + * Full `border` property string computed using `border.width.thick` and `border.color` + * - Default value: 2px solid [colors.lightShade] + */ + thick: CSSProperties['border']; + /** + * Full editable style `border` property string computed using `border.width.thick` and `border.color` + * - Default value: 2px dotted [colors.lightShade] + */ + editable: CSSProperties['border']; +} + +export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes; diff --git a/packages/eui-theme-common/src/global_styling/variables/breakpoint.ts b/packages/eui-theme-common/src/global_styling/variables/breakpoint.ts new file mode 100644 index 00000000000..68aef1fba38 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/breakpoint.ts @@ -0,0 +1,28 @@ +/* + * 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. + */ + +export const EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'] as const; + +// This type cannot be a string enum / must be a generic string +// in case consumers add custom breakpoint sizes, such as xxl or xxs +export type _EuiThemeBreakpoint = string; + +// Explicitly list out each key so we can document default values +// via JSDoc (which is available to devs in IDE via intellisense) +export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number> & { + /** - Default value: 0 */ + xs: number; + /** - Default value: 575 */ + s: number; + /** - Default value: 768 */ + m: number; + /** - Default value: 992 */ + l: number; + /** - Default value: 1200 */ + xl: number; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/buttons.ts b/packages/eui-theme-common/src/global_styling/variables/buttons.ts new file mode 100644 index 00000000000..6ba1f96d4ff --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/buttons.ts @@ -0,0 +1,60 @@ +/* + * 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 { + ColorModeSwitch, + StrictColorModeSwitch, +} from '../../services/theme/types'; + +export type _EuiThemeButtonColors = { + backgroundPrimary: ColorModeSwitch; + backgroundAccent: ColorModeSwitch; + backgroundAccentSecondary: ColorModeSwitch; + backgroundSuccess: ColorModeSwitch; + backgroundWarning: ColorModeSwitch; + backgroundDanger: ColorModeSwitch; + backgroundText: ColorModeSwitch; + backgroundDisabled: ColorModeSwitch; + + backgroundFilledPrimary: ColorModeSwitch; + backgroundFilledAccent: ColorModeSwitch; + backgroundFilledAccentSecondary: ColorModeSwitch; + backgroundFilledSuccess: ColorModeSwitch; + backgroundFilledWarning: ColorModeSwitch; + backgroundFilledDanger: ColorModeSwitch; + backgroundFilledText: ColorModeSwitch; + backgroundFilledDisabled: ColorModeSwitch; + + backgroundEmptyPrimaryHover: ColorModeSwitch; + backgroundEmptyAccentHover: ColorModeSwitch; + backgroundEmptyAccentSecondaryHover: ColorModeSwitch; + backgroundEmptySuccessHover: ColorModeSwitch; + backgroundEmptyWarningHover: ColorModeSwitch; + backgroundEmptyDangerHover: ColorModeSwitch; + backgroundEmptyTextHover: ColorModeSwitch; + + textColorPrimary: ColorModeSwitch; + textColorAccent: ColorModeSwitch; + textColorAccentSecondary: ColorModeSwitch; + textColorSuccess: ColorModeSwitch; + textColorWarning: ColorModeSwitch; + textColorDanger: ColorModeSwitch; + textColorText: ColorModeSwitch; + textColorDisabled: ColorModeSwitch; + + textColorFilledPrimary: ColorModeSwitch; + textColorFilledAccent: ColorModeSwitch; + textColorFilledAccentSecondary: ColorModeSwitch; + textColorFilledSuccess: ColorModeSwitch; + textColorFilledWarning: ColorModeSwitch; + textColorFilledDanger: ColorModeSwitch; + textColorFilledText: ColorModeSwitch; + textColorFilledDisabled: ColorModeSwitch; +}; + +export type _EuiThemeButton = StrictColorModeSwitch<_EuiThemeButtonColors> & {}; diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts new file mode 100644 index 00000000000..b84e0fd479d --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -0,0 +1,382 @@ +/* + * 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 { + ColorModeSwitch, + StrictColorModeSwitch, +} from '../../services/theme/types'; + +/** + * Top 5 colors + */ +export type _EuiThemeBrandColors = { + /** + * Main brand color and used for most **call to actions** like buttons and links. + */ + primary: ColorModeSwitch; + /** + * Pulls attention to key indicators like **notifications** or number of selections. + */ + accent: ColorModeSwitch; + /** + * Secondary attention indicator with lower priority. + */ + accentSecondary: ColorModeSwitch; + /** + * Used for **positive** messages/graphics and additive actions. + */ + success: ColorModeSwitch; + /** + * Used for **warnings** and actions that have a potential to be destructive. + */ + warning: ColorModeSwitch; + /** + * Used for **negative** messages/graphics like errors and destructive actions. + */ + danger: ColorModeSwitch; +}; + +/** + * Every brand color must have a contrast computed text equivelant + */ +export type _EuiThemeBrandTextColors = { + /** + * Typically computed against `colors.primary` + * @deprecated - use `textPrimary` instead + */ + primaryText: ColorModeSwitch; + /** + * Typically computed against `colors.accent` + * @deprecated - use `textAccent` instead + */ + accentText: ColorModeSwitch; + /** + * Typically computed against `colors.success` + * @deprecated - use `textSuccess` instead + */ + successText: ColorModeSwitch; + /** + * Typically computed against `colors.warning` + * @deprecated - use `textWarning` instead + */ + warningText: ColorModeSwitch; + /** + * Typically computed against `colors.danger` + * @deprecated - use `textDanger` instead + */ + dangerText: ColorModeSwitch; + + textPrimary: ColorModeSwitch; + textAccent: ColorModeSwitch; + textAccentSecondary: ColorModeSwitch; + textSuccess: ColorModeSwitch; + textWarning: ColorModeSwitch; + textDanger: ColorModeSwitch; +}; + +export type _EuiThemeShadeColors = { + /** + * Used as the background color of primary **page content and panels** including modals and flyouts. + * @deprecated - use specific semantic color tokens instead + */ + emptyShade: ColorModeSwitch; + /** + * Used to lightly shade areas that contain **secondary content** or contain panel-like components. + * @deprecated - use specific semantic color tokens instead + */ + lightestShade: ColorModeSwitch; + /** + * Used for most **borders** and dividers (horizontal rules). + * @deprecated - use specific semantic color tokens instead + */ + lightShade: ColorModeSwitch; + /** + * The middle gray for all themes; this is the base for `colors.subdued`. + * @deprecated - use specific semantic color tokens instead + */ + mediumShade: ColorModeSwitch; + /** + * Slightly subtle graphic color + * @deprecated - use specific semantic color tokens instead + */ + darkShade: ColorModeSwitch; + /** + * Used as the **text** color and the background color for **inverted components** like tooltips and the control bar. + * @deprecated - use specific semantic color tokens instead + */ + darkestShade: ColorModeSwitch; + /** + * The opposite of `emptyShade` + * @deprecated - use specific semantic color tokens instead + */ + fullShade: ColorModeSwitch; +}; + +export type _EuiThemeTextColors = { + /** + * Computed against `colors.darkestShade` + * @deprecated - use `textParagraph` instead + */ + text: ColorModeSwitch; + /** + * Computed against `colors.text` + * @deprecated - use `textHeading` instead + */ + title: ColorModeSwitch; + /** + * Computed against `colors.mediumShade` + * @deprecated - use `textSubdued` instead + */ + subduedText: ColorModeSwitch; + /** + * Computed against `colors.primaryText` + */ + link: ColorModeSwitch; + + textParagraph: ColorModeSwitch; + textHeading: ColorModeSwitch; + textSubdued: ColorModeSwitch; + textDisabled: ColorModeSwitch; + textInverse: ColorModeSwitch; +}; + +export type _EuiThemeSpecialColors = { + /** + * The background color for the **whole window (body)** and is a computed value of `colors.lightestShade`. + * Provides denominator (background) value for **contrast calculations**. + * @deprecated - use backgroundBasePlain or backgroundBaseSubdued instead + */ + body: ColorModeSwitch; + /** + * Used to **highlight text** when matching against search strings + */ + highlight: ColorModeSwitch; + /** + * Computed against `colors.darkestShade` + * @deprecated - use specific semantic tokens instead (e.g. backgroundBaseDisabled, borderBaseDisabled etc) + */ + disabled: ColorModeSwitch; + /** + * Computed against `colors.disabled` + * @deprecated - use textDisabled instead + */ + disabledText: ColorModeSwitch; + /** + * The base color for shadows that gets `transparentized` + * at a value based on the `colorMode` and then layered. + */ + shadow: ColorModeSwitch; +}; + +export type _EuiThemeBackgroundColors = { + backgroundBasePrimary: ColorModeSwitch; + backgroundBaseAccent: ColorModeSwitch; + backgroundBaseAccentSecondary: ColorModeSwitch; + backgroundBaseSuccess: ColorModeSwitch; + backgroundBaseWarning: ColorModeSwitch; + backgroundBaseDanger: ColorModeSwitch; + backgroundBaseSubdued: ColorModeSwitch; + backgroundBasePlain: ColorModeSwitch; + backgroundBaseDisabled: ColorModeSwitch; + backgroundBaseHighlighted: ColorModeSwitch; + backgroundBaseFormsPrepend: ColorModeSwitch; + backgroundBaseFormsControlDisabled: ColorModeSwitch; + backgroundBaseInteractiveHover: ColorModeSwitch; + backgroundBaseInteractiveSelect: ColorModeSwitch; + backgroundBaseInteractiveOverlay: ColorModeSwitch; + backgroundBaseSkeletonEdge: ColorModeSwitch; + backgroundBaseSkeletonMiddle: ColorModeSwitch; + + backgroundLightPrimary: ColorModeSwitch; + backgroundLightAccent: ColorModeSwitch; + backgroundLightAccentSecondary: ColorModeSwitch; + backgroundLightSuccess: ColorModeSwitch; + backgroundLightWarning: ColorModeSwitch; + backgroundLightDanger: ColorModeSwitch; + backgroundLightText: ColorModeSwitch; + + backgroundFilledPrimary: ColorModeSwitch; + backgroundFilledAccent: ColorModeSwitch; + backgroundFilledAccentSecondary: ColorModeSwitch; + backgroundFilledSuccess: ColorModeSwitch; + backgroundFilledWarning: ColorModeSwitch; + backgroundFilledDanger: ColorModeSwitch; + backgroundFilledText: ColorModeSwitch; +}; + +/** TODO: remove once usages are re-mapped */ +export type _EuiThemeTransparentBackgroundColors = { + /** @deprecated - temp. token, was never in use */ + backgroundTransparent: string; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentPrimary: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentAccent: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentAccentSecondary: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentSuccess: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentWarning: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentDanger: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentSubdued: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentHighlighted: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ + backgroundTransparentPlain: ColorModeSwitch; +}; + +export type _EuiThemeBorderColors = { + borderBasePrimary: ColorModeSwitch; + borderBaseAccent: ColorModeSwitch; + borderBaseAccentSecondary: ColorModeSwitch; + borderBaseSuccess: ColorModeSwitch; + borderBaseWarning: ColorModeSwitch; + borderBaseDanger: ColorModeSwitch; + + borderBasePlain: ColorModeSwitch; + borderBaseSubdued: ColorModeSwitch; + borderBaseDisabled: ColorModeSwitch; + /** + * Border used for floating elements on dark mode (e.g. popovers or tooltips) + * to increase the contrast with the background. + */ + borderBaseFloating: ColorModeSwitch; + + borderBaseFormsColorSwatch: ColorModeSwitch; + borderBaseFormsControl: ColorModeSwitch; + + borderStrongPrimary: ColorModeSwitch; + borderStrongAccent: ColorModeSwitch; + borderStrongAccentSecondary: ColorModeSwitch; + borderStrongSuccess: ColorModeSwitch; + borderStrongWarning: ColorModeSwitch; + borderStrongDanger: ColorModeSwitch; +}; + +export type _EuiThemeVisColors = { + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText0: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText1: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText2: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText3: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText4: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText5: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText6: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText7: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText8: string; + /** @deprecated - temp token; used only during theme migration */ + euiColorVisBehindText9: string; + + euiColorVisAsTextLight0: string; + euiColorVisAsTextLight1: string; + euiColorVisAsTextLight2: string; + euiColorVisAsTextLight3: string; + euiColorVisAsTextLight4: string; + euiColorVisAsTextLight5: string; + euiColorVisAsTextLight6: string; + + euiColorVisAsTextDark0: string; + euiColorVisAsTextDark1: string; + euiColorVisAsTextDark2: string; + euiColorVisAsTextDark3: string; + euiColorVisAsTextDark4: string; + euiColorVisAsTextDark5: string; + euiColorVisAsTextDark6: string; + + euiColorVisSuccess0: string; + euiColorVisSuccess1: string; + euiColorVisWarning0: string; + euiColorVisDanger0: string; + euiColorVisDanger1: string; + + euiColorVisNeutral0: string; + + euiColorSeverity0: string; + euiColorSeverity1: string; + euiColorSeverity2: string; + euiColorSeverity3: string; + euiColorSeverity4: string; + euiColorSeverity5: string; + euiColorSeverity6: string; + euiColorSeverity7: string; + euiColorSeverity8: string; + euiColorSeverity9: string; + euiColorSeverity10: string; + euiColorSeverity11: string; + euiColorSeverity12: string; + euiColorSeverity13: string; + euiColorSeverity14: string; + + euiColorVisGrey0: string; + euiColorVisGrey1: string; + euiColorVisGrey2: string; + euiColorVisGrey3: string; + + euiColorVisWarm0: string; + euiColorVisWarm1: string; + euiColorVisWarm2: string; + + euiColorVisCool0: string; + euiColorVisCool1: string; + euiColorVisCool2: string; + + euiColorVisComplementary0: string; + euiColorVisComplementary1: string; +}; + +export type _EuiThemeConstantColors = { + /** + * Purest **white** + * @deprecated + */ + ghost: string; + /** + * Purest **black** + * @deprecated + */ + ink: string; + + plainLight: string; + plainDark: string; + + vis: _EuiThemeVisColors; +}; + +export type _EuiThemeColorsMode = _EuiThemeBrandColors & + _EuiThemeBrandTextColors & + _EuiThemeShadeColors & + _EuiThemeSpecialColors & + _EuiThemeTextColors & + _EuiThemeBackgroundColors & + _EuiThemeTransparentBackgroundColors & + _EuiThemeBorderColors; + +export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & + _EuiThemeConstantColors; diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts new file mode 100644 index 00000000000..ae6a38cac1e --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -0,0 +1,142 @@ +/* + * 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 { + ColorModeSwitch, + StrictColorModeSwitch, +} from '../../services/theme/types'; +import { _EuiThemeButtonColors } from './buttons'; +import { _EuiThemeForm, _EuiThemeFormColors } from './forms'; + +export type _EuiThemeComponentColors = { + buttonGroupBorderColor: ColorModeSwitch; + buttonGroupBorderColorSelected: ColorModeSwitch; + buttonGroupFocusColor: ColorModeSwitch; + + badgeBackground: ColorModeSwitch; + badgeBackgroundSubdued: ColorModeSwitch; + badgeBorderColorHollow: ColorModeSwitch; + badgeIconButtonBackgroundHover: ColorModeSwitch; + + bottomBarBackground: ColorModeSwitch; + + breadcrumbsApplicationBackground: ColorModeSwitch; + breadcrumbsApplicationColor: ColorModeSwitch; + + codeBackground: ColorModeSwitch; + codeBackgroundSelected: ColorModeSwitch; + codeColor: ColorModeSwitch; + codeInlineColor: ColorModeSwitch; + codeCommentColor: ColorModeSwitch; + codeSelectorColor: ColorModeSwitch; + codeStringColor: ColorModeSwitch; + codeTagColor: ColorModeSwitch; + codeNameColor: ColorModeSwitch; + codeNumberColor: ColorModeSwitch; + codeInlineCodeKeywordColor: ColorModeSwitch; + codeKeywordColor: ColorModeSwitch; + codeFunctionTitleColor: ColorModeSwitch; + codeTypeColor: ColorModeSwitch; + codeAttributeColor: ColorModeSwitch; + codeSymbolColor: ColorModeSwitch; + codeParamsColor: ColorModeSwitch; + codeMetaColor: ColorModeSwitch; + codeTitleColor: ColorModeSwitch; + codeSectionColor: ColorModeSwitch; + codeAdditionColor: ColorModeSwitch; + codeDeletionColor: ColorModeSwitch; + codeSelectorClassColor: ColorModeSwitch; + codeSelectorIdColor: ColorModeSwitch; + + collapsibleNavGroupBackground: ColorModeSwitch; + collapsibleNavGroupBackgroundDark: ColorModeSwitch; + + dataGridBorderColor: ColorModeSwitch; + dataGridVerticalLineBorderColor: ColorModeSwitch; + dataGridRowBackgroundStriped: ColorModeSwitch; + dataGridRowBackgroundHover: ColorModeSwitch; + dataGridRowBackgroundSelect: ColorModeSwitch; + + dragDropDraggingBackground: ColorModeSwitch; + dragDropDraggingOverBackground: ColorModeSwitch; + + headerBackground: ColorModeSwitch; + headerDarkBackground: ColorModeSwitch; + headerDarkSearchBorderColor: ColorModeSwitch; + headerDarkSectionItemBackgroundFocus: ColorModeSwitch; + + filterSelectItemBackgroundFocusDisabled: ColorModeSwitch; + + flyoutFooterBackground: ColorModeSwitch; + flyoutCloseButtonInsideBackground: ColorModeSwitch; + + keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch; + + listGroupItemBackgroundPrimaryActive: ColorModeSwitch; + listGroupItemBackgroundSubduedActive: ColorModeSwitch; + listGroupItemBackgroundHover: ColorModeSwitch; + listGroupItemBackgroundPrimaryHover: ColorModeSwitch; + + loadingSpinnerBorder: ColorModeSwitch; + loadingSpinnerHighlight: ColorModeSwitch; + + loadingChartMonoBackground0: ColorModeSwitch; + loadingChartMonoBackground1: ColorModeSwitch; + loadingChartMonoBackground2: ColorModeSwitch; + loadingChartMonoBackground3: ColorModeSwitch; + + markBackground: ColorModeSwitch; + + markdownFormatTableBorderColor: ColorModeSwitch; + + popoverPanelBackground: ColorModeSwitch; + popoverFooterBorderColor: ColorModeSwitch; + + scrollbarTrackColor: ColorModeSwitch; + + sideNavItemEmphasizedBackground: ColorModeSwitch; + + selectableListItemBorderColor: ColorModeSwitch; + + superDatePickerBackgroundSuccees: ColorModeSwitch; + + switchBackgroundOn: ColorModeSwitch; + switchBackgroundOff: ColorModeSwitch; + switchUncompressedBackgroundDisabled: ColorModeSwitch; + switchCompressedBackgroundDisabled: ColorModeSwitch; + switchMiniBackgroundDisabled: ColorModeSwitch; + switchThumbBackgroundDisabled: ColorModeSwitch; + switchThumbBorderOn: ColorModeSwitch; + switchThumbBorderOff: ColorModeSwitch; + switchIconDisabled: ColorModeSwitch; + + tableRowBackgroundHover: ColorModeSwitch; + tableRowBackgroundSelected: ColorModeSwitch; + tableRowBackgroundSelectedHover: ColorModeSwitch; + tableRowInteractiveBackgroundHover: ColorModeSwitch; + tableRowInteractiveBackgroundFocus: ColorModeSwitch; + tableCellSortableIconColor: ColorModeSwitch; + + tooltipBackground: ColorModeSwitch; + tooltipBorder: ColorModeSwitch; + tooltipBorderFloating: ColorModeSwitch; + + tourFooterBackground: ColorModeSwitch; + + treeViewItemBackgroundHover: ColorModeSwitch; +}; + +export type _EuiThemeComponents = { + buttons: StrictColorModeSwitch<_EuiThemeButtonColors>; + forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>; + /** + * internal-only key that holds temporary tokens used while migrating themes + */ + LIGHT: _EuiThemeComponentColors; + DARK: _EuiThemeComponentColors; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/flags.ts b/packages/eui-theme-common/src/global_styling/variables/flags.ts new file mode 100644 index 00000000000..e56ed84a9f1 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/flags.ts @@ -0,0 +1,15 @@ +/* + * 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. + */ + +/** + * Theme specific setting flags + */ +export type _EuiThemeFlags = { + hasGlobalFocusColor: boolean; + hasVisColorAdjustment: boolean; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/forms.ts b/packages/eui-theme-common/src/global_styling/variables/forms.ts new file mode 100644 index 00000000000..844354655b3 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/forms.ts @@ -0,0 +1,32 @@ +/* + * 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 { ColorModeSwitch } from '../../services/theme/types'; + +export type _EuiThemeForm = { + maxWidth: string; +}; + +export type _EuiThemeFormColors = { + background: ColorModeSwitch; + backgroundDisabled: ColorModeSwitch; + backgroundReadOnly: ColorModeSwitch; + backgroundFocused: ColorModeSwitch; + backgroundAutofilled: ColorModeSwitch; + prependBackground: ColorModeSwitch; + border: ColorModeSwitch; + borderAutofilled: ColorModeSwitch; + controlBorder: ColorModeSwitch; + controlBorderSelected: ColorModeSwitch; + controlBorderDisabled: ColorModeSwitch; + controlBackgroundUnselected: ColorModeSwitch; + controlBackgroundDisabled: ColorModeSwitch; + colorHasPlaceholder: ColorModeSwitch; + colorDisabled: ColorModeSwitch; + iconDisabled: ColorModeSwitch; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts new file mode 100644 index 00000000000..ee3d0142c85 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/index.ts @@ -0,0 +1,23 @@ +/* + * 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. + */ + +export * from './animations'; +export * from './borders'; +export * from './breakpoint'; +export * from './_breakpoint'; +export * from './breakpoint'; +export * from './colors'; +export * from './levels'; +export * from './size'; +export * from './shadow'; +export * from './states'; +export * from './typography'; +export * from './buttons'; +export * from './forms'; +export * from './components'; +export * from './flags'; diff --git a/packages/eui-theme-common/src/global_styling/variables/levels.ts b/packages/eui-theme-common/src/global_styling/variables/levels.ts new file mode 100644 index 00000000000..7d38c71791b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/levels.ts @@ -0,0 +1,60 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * Z-Index + * + * Remember that z-index is relative to parent and based on the stacking context. + * z-indexes only compete against other z-indexes when they exist as children of + * that shared parent. + * + * That means a popover with a settings of 2, will still show above a modal + * with a setting of 100, if it is within that modal and not besides it. + * + * Generally that means it's a good idea to consider things added to this file + * as competitive only as siblings. + * + * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ + +export const EuiThemeLevels = [ + 'toast', + 'modal', + 'mask', + 'navigation', + 'menu', + 'header', + 'flyout', + 'maskBelowHeader', + 'content', +] as const; + +export type _EuiThemeLevel = (typeof EuiThemeLevels)[number]; + +export type _EuiThemeLevels = { + /** - Default value: 9000 */ + toast: NonNullable; + /** - Default value: 8000 */ + modal: NonNullable; + /** - Default value: 6000 */ + mask: NonNullable; + /** - Default value: 6000 */ + navigation: NonNullable; + /** - Default value: 2000 */ + menu: NonNullable; + /** - Default value: 1000 */ + header: NonNullable; + /** - Default value: 1000 */ + flyout: NonNullable; + /** - Default value: 1000 */ + maskBelowHeader: NonNullable; + /** - Default value: 0 */ + content: NonNullable; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/shadow.ts b/packages/eui-theme-common/src/global_styling/variables/shadow.ts new file mode 100644 index 00000000000..7761fbdb9a0 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/shadow.ts @@ -0,0 +1,28 @@ +/* + * 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. + */ + +export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const; + +export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number]; + +/** + * Shadow t-shirt sizes descriptions + */ +export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> = + { + xs: 'Very subtle shadow used on small components.', + s: 'Adds subtle depth, usually used in conjunction with a border.', + 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.', + }; + +export interface _EuiThemeShadowCustomColor { + color?: string; + property?: 'box-shadow' | 'filter'; +} diff --git a/packages/eui-theme-common/src/global_styling/variables/size.ts b/packages/eui-theme-common/src/global_styling/variables/size.ts new file mode 100644 index 00000000000..98428346b61 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/size.ts @@ -0,0 +1,47 @@ +/* + * 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. + */ + +export type _EuiThemeBase = number; + +export const EuiThemeSizes = [ + 'xxs', + 'xs', + 's', + 'm', + 'base', + 'l', + 'xl', + 'xxl', + 'xxxl', + 'xxxxl', +] as const; + +export type _EuiThemeSize = (typeof EuiThemeSizes)[number]; + +export type _EuiThemeSizes = { + /** - Default value: 2px */ + xxs: string; + /** - Default value: 4px */ + xs: string; + /** - Default value: 8px */ + s: string; + /** - Default value: 12px */ + m: string; + /** - Default value: 16px */ + base: string; + /** - Default value: 24px */ + l: string; + /** - Default value: 32px */ + xl: string; + /** - Default value: 40px */ + xxl: string; + /** - Default value: 48px */ + xxxl: string; + /** - Default value: 64px */ + xxxxl: string; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/states.ts b/packages/eui-theme-common/src/global_styling/variables/states.ts new file mode 100644 index 00000000000..81db9407f3a --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/states.ts @@ -0,0 +1,33 @@ +/* + * 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 { CSSProperties } from 'react'; +import { ColorModeSwitch } from '../../services/theme/types'; + +export interface _EuiThemeFocus { + /** + * Default color of the focus ring, some components may override this property + * - Default value: currentColor + */ + color: ColorModeSwitch; + /** + * Thickness of the outline + * - Default value: 2px + */ + width: CSSProperties['borderWidth']; + /** + * Used to transparentize the focus background color + * - Default value: { LIGHT: 0.1, DARK: 0.2 } + */ + transparency: ColorModeSwitch; + /** + * Default focus background color. Not all components set a background color on focus + * - Default value: `colors.primary` computed with `focus.transparency` + */ + backgroundColor: ColorModeSwitch; +} diff --git a/packages/eui-theme-common/src/global_styling/variables/typography.ts b/packages/eui-theme-common/src/global_styling/variables/typography.ts new file mode 100644 index 00000000000..80ebbc8b1cb --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/typography.ts @@ -0,0 +1,146 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * Font units of measure + */ + +export const EuiThemeFontUnits = ['rem', 'px', 'em'] as const; + +export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number]; + +/* + * Font scale + */ + +export const EuiThemeFontScales = [ + 'xxxs', + 'xxs', + 'xs', + 's', + 'm', + 'l', + 'xl', + 'xxl', +] as const; + +export type _EuiThemeFontScale = (typeof EuiThemeFontScales)[number]; + +export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>; + +/* + * Font base settings + */ + +export type _EuiThemeFontBase = { + /** + * The whole font family stack for all parts of the UI. + * We encourage only customizing the first font in the stack. + */ + family: string; + /** + * The font family used for monospace UI elements like EuiCode + */ + familyCode?: string; + /** + * The font family used for serif UI elements like blockquotes within EuiText + */ + familySerif?: string; + /** + * Controls advanced features OpenType fonts. + * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings + */ + featureSettings?: string; + /** + * Sets the default units used for font size & line height set by UI components + * like EuiText or EuiTitle. Defaults to `rem`. + * + * NOTE: This may overridden by some internal usages, e.g. + * EuiText's `relative` size which must use `em`. + * + * @default 'rem' + */ + defaultUnits: _EuiThemeFontUnit; + /** + * A computed number that is 1/4 of `base` + */ + baseline: number; + /** + * Establishes the ideal line-height percentage, but it is the `baseline` integer that establishes the final pixel/rem value + */ + lineHeightMultiplier: number; +}; + +/* + * Font weights + */ + +export const EuiThemeFontWeights = [ + 'light', + 'regular', + 'medium', + 'semiBold', + 'bold', +] as const; + +export type _EuiThemeFontWeight = (typeof EuiThemeFontWeights)[number]; + +export type _EuiThemeFontWeights = { + /** - Default value: 300 */ + light: CSSProperties['fontWeight']; + /** - Default value: 400 */ + regular: CSSProperties['fontWeight']; + /** - Default value: 500 */ + medium: CSSProperties['fontWeight']; + /** - Default value: 600 */ + semiBold: CSSProperties['fontWeight']; + /** - Default value: 700 */ + bold: CSSProperties['fontWeight']; +}; + +/** + * Body / Base styles + */ + +export interface _EuiThemeBody { + /** + * A sizing key from one of the font scales to set as the base body font-size + */ + scale: _EuiThemeFontScale; + /** + * A font weight key for setting the base body weight + */ + weight: keyof _EuiThemeFontWeights; +} + +/** + * Title styles + */ + +export interface _EuiThemeTitle { + /** + * A font weight key for setting the base weight for titles and headings + */ + weight: keyof _EuiThemeFontWeights; +} + +/* + * Font + */ + +export type _EuiThemeFont = _EuiThemeFontBase & { + scale: _EuiThemeFontScales; + /** + * @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information + */ + weight: _EuiThemeFontWeights; + body: _EuiThemeBody; + title: _EuiThemeTitle; +}; diff --git a/packages/eui-theme-common/src/index.ts b/packages/eui-theme-common/src/index.ts new file mode 100644 index 00000000000..ae83a067c24 --- /dev/null +++ b/packages/eui-theme-common/src/index.ts @@ -0,0 +1,13 @@ +/* + * 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. + */ + +export * from './global_styling'; +export * from './services'; + +export * from './types'; +export * from './utils'; diff --git a/packages/eui-theme-common/src/services/index.ts b/packages/eui-theme-common/src/services/index.ts new file mode 100644 index 00000000000..464a0a1b58b --- /dev/null +++ b/packages/eui-theme-common/src/services/index.ts @@ -0,0 +1,9 @@ +/* + * 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. + */ + +export * from './vis_color_store'; diff --git a/packages/eui-theme-common/src/services/theme/types.ts b/packages/eui-theme-common/src/services/theme/types.ts new file mode 100644 index 00000000000..01bb7816b2c --- /dev/null +++ b/packages/eui-theme-common/src/services/theme/types.ts @@ -0,0 +1,119 @@ +/* + * 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 type { CSSObject } from '@emotion/react'; + +import type { RecursivePartial, ValueOf } from '../../types'; + +import { _EuiThemeAnimation } from '../../global_styling/variables/animations'; +import { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint'; +import { _EuiThemeBorder } from '../../global_styling/variables/borders'; +import { _EuiThemeColors } from '../../global_styling/variables/colors'; +import { + _EuiThemeBase, + _EuiThemeSizes, +} from '../../global_styling/variables/size'; +import { _EuiThemeFont } from '../../global_styling/variables/typography'; +import { _EuiThemeFocus } from '../../global_styling/variables/states'; +import { _EuiThemeLevels } from '../../global_styling/variables/levels'; +import { _EuiThemeComponents } from '../../global_styling/variables/components'; +import { _EuiThemeFlags } from '../../global_styling/variables'; + +export const COLOR_MODES_STANDARD = { + light: 'LIGHT', + dark: 'DARK', +} as const; +export const COLOR_MODES_INVERSE = 'INVERSE' as const; + +export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE; +export type EuiThemeColorModeStandard = ValueOf; +export type EuiThemeColorMode = + | 'light' + | 'dark' + | EuiThemeColorModeStandard + | 'inverse' + | EuiThemeColorModeInverse; + +export type ColorModeSwitch = + | { + [key in EuiThemeColorModeStandard]: T; + } + | T; + +export type StrictColorModeSwitch = { + [key in EuiThemeColorModeStandard]: T; +}; + +export type EuiThemeShape = { + colors: _EuiThemeColors; + /** - Default value: 16 */ + base: _EuiThemeBase; + /** + * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information + */ + size: _EuiThemeSizes; + font: _EuiThemeFont; + border: _EuiThemeBorder; + focus: _EuiThemeFocus; + animation: _EuiThemeAnimation; + breakpoint: _EuiThemeBreakpoints; + levels: _EuiThemeLevels; + components: _EuiThemeComponents; + flags: _EuiThemeFlags; +}; + +export type EuiThemeSystem = { + root: EuiThemeShape & T; + model: EuiThemeShape & T; + key: string; +}; + +export type EuiThemeModifications = RecursivePartial; + +export type ComputedThemeShape< + T, + P = string | number | bigint | boolean | null | undefined +> = T extends P | ColorModeSwitch + ? T extends ColorModeSwitch + ? X extends P + ? X + : { + [K in keyof (X & + Exclude< + T, + keyof X | keyof StrictColorModeSwitch + >)]: ComputedThemeShape< + (X & Exclude)[K], + P + >; + } + : T + : { + [K in keyof T]: ComputedThemeShape; + }; + +export type EuiThemeComputed = ComputedThemeShape & { + themeName: string; +}; + +export type EuiThemeNested = { + isGlobalTheme: boolean; + hasDifferentColorFromGlobalTheme: boolean; + bodyColor: string; + colorClassName: string; + setGlobalCSSVariables: Function; + globalCSSVariables?: CSSObject; + setNearestThemeCSSVariables: Function; + themeCSSVariables?: CSSObject; +}; + +export interface UseEuiTheme { + euiTheme: EuiThemeComputed; + colorMode: EuiThemeColorModeStandard; + modifications: EuiThemeModifications; +} diff --git a/packages/eui-theme-common/src/services/vis_color_store.test.ts b/packages/eui-theme-common/src/services/vis_color_store.test.ts new file mode 100644 index 00000000000..6405d4e26e2 --- /dev/null +++ b/packages/eui-theme-common/src/services/vis_color_store.test.ts @@ -0,0 +1,95 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { _EuiThemeVisColors } from '../global_styling'; +import { EuiVisColorStore, VIS_COLOR_STORE_EVENTS } from './vis_color_store'; + +jest.useFakeTimers(); + +const visColors: _EuiThemeVisColors = { + euiColorVis0: '#aabbcc', +} as _EuiThemeVisColors; + +describe('EuiVisColorStore', () => { + const visColorStore = EuiVisColorStore.getInstance(visColors, false); + let updateFn: jest.Mock; + + beforeEach(() => { + updateFn = jest.fn(); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + describe('setVisColors()', () => { + const customColors = { + ...visColors, + euiColorVis0: '#00ff00', + }; + + it('has initial colors', () => { + expect(visColorStore.visColors).toEqual(visColors); + }); + + it('updates colors', () => { + visColorStore.setVisColors(customColors); + + expect(visColorStore.visColors).toEqual(customColors); + }); + + it('updates hasVisColorAdjustment', () => { + visColorStore.setVisColors(customColors, true); + + expect(visColorStore.hasVisColorAdjustment).toEqual(true); + }); + }); + + describe('subcribe and unsubscribe', () => { + it('subscribes to store updates', () => { + const customColors = { + ...visColors, + euiColorVis0: '#ff0000', + }; + + const id = visColorStore.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + updateFn + ); + + expect(id).toContain('UPDATE'); + + visColorStore.setVisColors(customColors); + jest.runAllTimers(); + + expect(updateFn).toHaveBeenCalledTimes(1); + expect(updateFn).toHaveBeenCalledWith(customColors); + }); + + it('unsubscribes from store updates', () => { + const customColors = { + ...visColors, + euiColorVis0: '#0000ff', + }; + + const id = visColorStore.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + updateFn + ); + + expect(id).toContain('UPDATE'); + + visColorStore.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, id); + + visColorStore.setVisColors(customColors); + jest.runAllTimers(); + + expect(updateFn).toHaveBeenCalledTimes(0); + }); + }); +}); diff --git a/packages/eui-theme-common/src/services/vis_color_store.ts b/packages/eui-theme-common/src/services/vis_color_store.ts new file mode 100644 index 00000000000..57c6d3d62b4 --- /dev/null +++ b/packages/eui-theme-common/src/services/vis_color_store.ts @@ -0,0 +1,117 @@ +/* + * 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 isEqual from 'lodash/isEqual'; + +import { _EuiThemeVisColors } from '../global_styling'; +import { uniqueId } from 'lodash'; + +export const VIS_COLOR_STORE_EVENTS = { + UPDATE: 'UPDATE', +} as const; +export type VisColorStoreEvents = keyof typeof VIS_COLOR_STORE_EVENTS; +type EventId = string; + +export type _EuiVisColorStore = { + visColors: _EuiThemeVisColors; + hasVisColorAdjustment: boolean; + setVisColors: ( + colors: _EuiThemeVisColors, + hasVisColorAdjustment?: boolean + ) => void; + subscribe: (eventName: VisColorStoreEvents, callback: any) => EventId; + unsubscribe: (eventName: VisColorStoreEvents, id: EventId) => void; +}; + +class EuiVisColorStoreImpl implements _EuiVisColorStore { + private _visColors: _EuiVisColorStore['visColors']; + private _hasVisColorAdjustment: _EuiVisColorStore['hasVisColorAdjustment']; + private events: Record> = {} as Record< + VisColorStoreEvents, + Map + >; + + constructor(dependencies: { + defaultColors: _EuiThemeVisColors; + hasVisColorAdjustment: boolean; + }) { + this._visColors = dependencies.defaultColors; + this._hasVisColorAdjustment = dependencies.hasVisColorAdjustment; + } + + get visColors(): _EuiVisColorStore['visColors'] { + return this._visColors; + } + + get hasVisColorAdjustment(): _EuiVisColorStore['hasVisColorAdjustment'] { + return this._hasVisColorAdjustment; + } + + setVisColors = (colors: _EuiThemeVisColors, hasColorAdjustment?: boolean) => { + if ( + !isEqual(this._visColors, colors) || + hasColorAdjustment !== this._hasVisColorAdjustment + ) { + this._visColors = colors; + + if (hasColorAdjustment != null) { + this._hasVisColorAdjustment = hasColorAdjustment; + } + + this.publishUpdate(VIS_COLOR_STORE_EVENTS.UPDATE, this._visColors); + } + }; + + subscribe = (eventName: VisColorStoreEvents, callback: NonNullable) => { + if (this.events[eventName] == null) { + this.events[eventName] = new Map(); + } + + const id = uniqueId(`${eventName}_`); + + this.events[eventName].set(id, callback); + return id; + }; + + unsubscribe = (eventName: VisColorStoreEvents, id: EventId) => { + if (this.events[eventName] != null && this.events[eventName].has(id)) { + this.events[eventName].delete(id); + } + }; + + private publishUpdate = ( + eventName: VisColorStoreEvents, + colors?: _EuiThemeVisColors + ) => { + if (this.events[eventName]) + this.events[eventName].forEach((callback) => { + // use timeout to execute callbacks after theme updates + setTimeout(() => { + callback?.(colors); + }); + }); + }; +} + +export class EuiVisColorStore { + private static instance: EuiVisColorStoreImpl; + + static getInstance( + defaultColors: _EuiThemeVisColors, + hasVisColorAdjustment: boolean + ): EuiVisColorStoreImpl { + if (!this.instance) { + this.instance = new EuiVisColorStoreImpl({ + defaultColors, + hasVisColorAdjustment, + }); + } + + return this.instance; + } +} diff --git a/packages/eui-theme-common/src/types.ts b/packages/eui-theme-common/src/types.ts new file mode 100644 index 00000000000..68c72d586df --- /dev/null +++ b/packages/eui-theme-common/src/types.ts @@ -0,0 +1,56 @@ +/* + * 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. + */ + +/* TODO: duplicated types from /eui/src/components/common - extract to shared location */ + +/** + * Like `keyof typeof`, but for getting values instead of keys + * ValueOf + * Results in `'value1' | 'value2'` + */ +export type ValueOf = T[keyof T]; + +/** + * Replaces all properties on any type as optional, includes nested types + * + * @example + * ```ts + * interface Person { + * name: string; + * age?: number; + * spouse: Person; + * children: Person[]; + * } + * type PartialPerson = RecursivePartial; + * // results in + * interface PartialPerson { + * name?: string; + * age?: number; + * spouse?: RecursivePartial; + * children?: RecursivePartial[] + * } + * ``` + */ +export type RecursivePartial = { + [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[] + ? T[P] + : T[P] extends readonly NonAny[] // checks for nested ReadonlyArray + ? T[P] + : T[P] extends Array + ? Array> + : T[P] extends ReadonlyArray + ? ReadonlyArray> + : T[P] extends Set // checks for Sets + ? Set> + : T[P] extends Map // checks for Maps + ? Map> + : T[P] extends NonAny // checks for primitive values + ? T[P] + : RecursivePartial; // recurse for all non-array and non-primitive values +}; +type NonAny = number | boolean | string | symbol | null; diff --git a/packages/eui/src/services/theme/utils.test.ts b/packages/eui-theme-common/src/utils.test.ts similarity index 96% rename from packages/eui/src/services/theme/utils.test.ts rename to packages/eui-theme-common/src/utils.test.ts index c654e4d3c22..c8577113e20 100644 --- a/packages/eui/src/services/theme/utils.test.ts +++ b/packages/eui-theme-common/src/utils.test.ts @@ -16,6 +16,7 @@ import { getComputed, buildTheme, mergeDeep, + getTokenName, } from './utils'; describe('isInverseColorMode', () => { @@ -277,3 +278,14 @@ describe('mergeDeep', () => { ).toEqual({ a: 1, b: { c: { d: 3, e: 5 } } }); }); }); + +describe('getTokenName', () => { + it('returns the correct token name', () => { + expect(getTokenName('backgroundBase', 'primary')).toEqual( + 'backgroundBasePrimary' + ); + expect(getTokenName('backgroundBase', 'primary', 'hovered')).toEqual( + 'backgroundBasePrimaryHovered' + ); + }); +}); diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts new file mode 100644 index 00000000000..445e538b582 --- /dev/null +++ b/packages/eui-theme-common/src/utils.ts @@ -0,0 +1,409 @@ +/* + * 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 { + EuiThemeColorMode, + EuiThemeColorModeInverse, + EuiThemeColorModeStandard, + EuiThemeModifications, + EuiThemeSystem, + EuiThemeShape, + EuiThemeComputed, + COLOR_MODES_STANDARD, + COLOR_MODES_INVERSE, +} from './global_styling'; + +export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light; + +/** + * Returns whether the parameter is an object + * @param {any} obj - Anything + */ +const isObject = (obj: any) => obj && typeof obj === 'object'; + +/** + * Returns whether the provided color mode is `inverse` + * @param {string} colorMode - `light`, `dark`, or `inverse` + */ +export const isInverseColorMode = ( + colorMode?: string +): colorMode is EuiThemeColorModeInverse => { + return colorMode === COLOR_MODES_INVERSE; +}; + +/** + * Returns the color mode configured in the current EuiThemeProvider. + * Returns the parent color mode if none is explicity set. + * @param {string} colorMode - `light`, `dark`, or `inverse` + * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback + */ +export const getColorMode = ( + colorMode?: EuiThemeColorMode, + parentColorMode?: EuiThemeColorModeStandard +): EuiThemeColorModeStandard => { + if (colorMode == null) { + return parentColorMode || DEFAULT_COLOR_MODE; + } + const mode = colorMode.toUpperCase() as + | EuiThemeColorModeInverse + | EuiThemeColorModeStandard; + if (isInverseColorMode(mode)) { + return parentColorMode === COLOR_MODES_STANDARD.dark || + parentColorMode === undefined + ? COLOR_MODES_STANDARD.light + : COLOR_MODES_STANDARD.dark; + } else { + return mode; + } +}; + +/** + * Returns a value at a given path on an object. + * If `colorMode` is provided, will scope the value to the appropriate color mode key (LIGHT\DARK) + * @param {object} model - Object + * @param {string} _path - Dot-notated string to a path on the object + * @param {string} colorMode - `light` or `dark` + */ +export const getOn = ( + model: { [key: string]: any }, + _path: string, + colorMode?: EuiThemeColorModeStandard +) => { + const path = _path.split('.'); + let node = model; + while (path.length) { + const segment = path.shift()!; + + if (node.hasOwnProperty(segment) === false) { + if ( + colorMode && + node.hasOwnProperty(colorMode) === true && + node[colorMode].hasOwnProperty(segment) === true + ) { + if (node[colorMode][segment] instanceof Computed) { + node = node[colorMode][segment].getValue(null, {}, node, colorMode); + } else { + node = node[colorMode][segment]; + } + } else { + return undefined; + } + } else { + if (node[segment] instanceof Computed) { + node = node[segment].getValue(null, {}, node, colorMode); + } else { + node = node[segment]; + } + } + } + + return node; +}; + +/** + * Sets a value at a given path on an object. + * @param {object} model - Object + * @param {string} _path - Dot-notated string to a path on the object + * @param {any} string - The value to set + */ +export const setOn = ( + model: { [key: string]: any }, + _path: string, + value: any +) => { + const path = _path.split('.'); + const propertyName = path.pop()!; + let node = model; + + while (path.length) { + const segment = path.shift()!; + if (node.hasOwnProperty(segment) === false) { + node[segment] = {}; + } + node = node[segment]; + } + + node[propertyName] = value; + return true; +}; + +/** + * Creates a class to store the `computer` method and its eventual parameters. + * Allows for on-demand computation with up-to-date parameters via `getValue` method. + * @constructor + * @param {function} computer - Function to be computed + * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters + */ +export class Computed { + constructor( + public computer: (...values: any[]) => T, + public dependencies: string | string[] = [] + ) {} + + /** + * Executes the `computer` method with the current state of the theme + * by taking into account previously computed values and modifications. + * @param {Proxy | object} base - Computed or uncomputed theme + * @param {Proxy | object} modifications - Theme value overrides + * @param {object} working - Partially computed theme + * @param {string} colorMode - `light` or `dark` + */ + getValue( + base: EuiThemeSystem | EuiThemeShape | null, + modifications: EuiThemeModifications = {}, + working: Partial, + colorMode?: EuiThemeColorModeStandard + ) { + if (!this.dependencies.length) { + return this.computer(working); + } + if (!Array.isArray(this.dependencies)) { + return this.computer( + getOn(working, this.dependencies) ?? + getOn(modifications, this.dependencies, colorMode) ?? + (base ? getOn(base, this.dependencies, colorMode) : working) + ); + } + return this.computer( + this.dependencies.map((dependency) => { + return ( + getOn(working, dependency) ?? + getOn(modifications, dependency, colorMode) ?? + (base ? getOn(base, dependency, colorMode) : working) + ); + }) + ); + } +} + +/** + * Returns a Class (`Computed`) that stores the arbitrary computer method + * and references to its optional dependecies. + * @param {function} computer - Arbitrary method to be called at compute time. + * @param {string | array} dependencies - Values that will be provided to `computer` at compute time. + */ +export function computed(computer: (value: EuiThemeComputed) => T): T; +export function computed( + computer: (value: any[]) => T, + dependencies: string[] +): T; +export function computed( + computer: (value: any) => T, + dependencies: string +): T; +export function computed( + comp: ((value: T) => T) | ((value: any) => T) | ((value: any[]) => T), + dep?: string | string[] +) { + return new Computed(comp, dep); +} + +/** + * Type guard to check for a Computed object based on object shape + * without relying on the Computed class directly + */ +const isComputedLike = (key: object): key is Computed => { + if (typeof key !== 'object' || Array.isArray(key)) return false; + + return key.hasOwnProperty('dependencies') && key.hasOwnProperty('computer'); +}; + +/** + * Takes an uncomputed theme, and computes and returns all values taking + * into consideration value overrides and configured color mode. + * Overrides take precedence, and only values in the current color mode + * are computed and returned. + * @param {Proxy} base - Object to transform into Proxy + * @param {Proxy | object} over - Unique identifier or name + * @param {string} colorMode - `light` or `dark` + */ +export const getComputed = ( + base: EuiThemeSystem, + over: Partial>, + colorMode: EuiThemeColorModeStandard +): EuiThemeComputed => { + const output: Partial = { themeName: base.key }; + + function loop( + base: { [key: string]: any }, + over: { [key: string]: any }, + checkExisting: boolean = false, + path?: string + ) { + Object.keys(base).forEach((key) => { + let newPath = path ? `${path}.${key}` : `${key}`; + // @ts-expect-error `key` is not necessarily a colorMode key + if ([...Object.values(COLOR_MODES_STANDARD), colorMode].includes(key)) { + if (key !== colorMode) { + return; + } else { + const colorModeSegment = new RegExp( + `(\\.${colorMode}\\b)|(\\b${colorMode}\\.)` + ); + newPath = newPath.replace(colorModeSegment, ''); + } + } + const existing = checkExisting && getOn(output, newPath); + if (!existing || isObject(existing)) { + // NOTE: the class type check for Computed is not true for themes created externally; + // we additionally check on the object shape to confirm a Computed value + const baseValue = + base[key] instanceof Computed || isComputedLike(base[key]) + ? base[key].getValue(base.root, over.root, output, colorMode) + : base[key]; + const overValue = + over[key] instanceof Computed || isComputedLike(over[key]) + ? over[key].getValue(base.root, over.root, output, colorMode) + : over[key]; + if (isObject(baseValue) && !Array.isArray(baseValue)) { + loop(baseValue, overValue ?? {}, checkExisting, newPath); + } else { + setOn(output, newPath, overValue ?? baseValue); + } + } + }); + } + // Compute standard theme values and apply overrides + loop(base, over); + // Compute and apply extension values only + loop(over, {}, true); + return output as EuiThemeComputed; +}; + +/** + * Builds a Proxy with a custom `handler` designed to self-reference values + * and prevent arbitrary value overrides. + * @param {object} model - Object to transform into Proxy + * @param {string} key - Unique identifier or name + */ +export const buildTheme = (model: T, key: string) => { + const handler: ProxyHandler> = { + getPrototypeOf(target) { + return Reflect.getPrototypeOf(target.model); + }, + + setPrototypeOf(target, prototype) { + return Reflect.setPrototypeOf(target.model, prototype); + }, + + isExtensible(target) { + return Reflect.isExtensible(target); + }, + + preventExtensions(target) { + return Reflect.preventExtensions(target.model); + }, + + getOwnPropertyDescriptor(target, key) { + return Reflect.getOwnPropertyDescriptor(target.model, key); + }, + + defineProperty(target, property, attributes) { + return Reflect.defineProperty(target.model, property, attributes); + }, + + has(target, property) { + return Reflect.has(target.model, property); + }, + + get(_target, property) { + if (property === 'key') { + return _target[property]; + } + + // prevent Safari from locking up when the proxy is used in dev tools + // as it doesn't support getPrototypeOf + if (property === '__proto__') return {}; + + const target = property === 'root' ? _target : _target.model || _target; + // @ts-ignore `string` index signature + const value = target[property]; + if (isObject(value) && !Array.isArray(value)) { + return new Proxy( + { + model: value, + root: _target.root, + key: `_${_target.key}`, + }, + handler + ); + } else { + return value; + } + }, + + set(target: any) { + return target; + }, + + deleteProperty(target: any) { + return target; + }, + + ownKeys(target) { + return Reflect.ownKeys(target.model); + }, + + apply(target: any) { + return target; + }, + + construct(target: any) { + return target; + }, + }; + const themeProxy = new Proxy({ model, root: model, key }, handler); + + return themeProxy; +}; + +/** + * Deeply merges two objects, using `source` values whenever possible. + * @param {object} _target - Object with fallback values + * @param {object} source - Object with desired values + */ +export const mergeDeep = ( + _target: { [key: string]: any }, + source: { [key: string]: any } = {} +) => { + const target = { ..._target }; + + if (!isObject(target) || !isObject(source)) { + return source; + } + + Object.keys(source).forEach((key) => { + const targetValue = target[key]; + const sourceValue = source[key]; + + if (isObject(targetValue) && isObject(sourceValue)) { + target[key] = mergeDeep({ ...targetValue }, { ...sourceValue }); + } else { + target[key] = sourceValue; + } + }); + + return target; +}; + +/** + * Returns token name string based on passed dynamic variants + * and additional prefix/suffix + */ +export const getTokenName = ( + prefix: string, + variant: string, + suffix?: string +) => { + const getCapitalized = (str: string) => + str.charAt(0).toUpperCase() + str.slice(1); + const colorName = variant.charAt(0).toUpperCase() + variant.slice(1); + const _suffix = suffix ? getCapitalized(suffix) : ''; + + return `${prefix}${getCapitalized(colorName)}${_suffix}`; +}; diff --git a/packages/eui-theme-common/tsconfig.cjs.json b/packages/eui-theme-common/tsconfig.cjs.json new file mode 100644 index 00000000000..6becea42efa --- /dev/null +++ b/packages/eui-theme-common/tsconfig.cjs.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/cjs", + "target": "es6", + "module": "CommonJS", + "lib": [ + "es6", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/cjs/.tsbuildinfo", + "importHelpers": false, + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-common/tsconfig.json b/packages/eui-theme-common/tsconfig.json new file mode 100644 index 00000000000..31450bf12d6 --- /dev/null +++ b/packages/eui-theme-common/tsconfig.json @@ -0,0 +1,28 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/esm", + "target": "ES2020", + "module": "ESNext", + "lib": [ + "ESNext", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/esm/.tsbuildinfo" + }, + "include": [ + "src", + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-common/tsconfig.types.json b/packages/eui-theme-common/tsconfig.types.json new file mode 100644 index 00000000000..54e2031daae --- /dev/null +++ b/packages/eui-theme-common/tsconfig.types.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.cjs.json", + "compilerOptions": { + "outDir": "lib/cjs", + "declaration": true, + "declarationMap": true, + "isolatedModules": false, + "noEmit": false, + "allowJs": false, + "emitDeclarationOnly": true + }, + "exclude": ["node_modules", "**/*.test.ts"] +} \ No newline at end of file diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiAspectRatio_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiAspectRatio_Playground.png index b7971487a24..e44c73a2abc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiAspectRatio_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiAspectRatio_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png index 88bfba2aef1..30e7c67c415 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png index d21b5f402dd..f9a8e8bc824 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Custom_Colors.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Custom_Colors.png index ec2cc6047ef..468e9773f34 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Custom_Colors.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Custom_Colors.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png index d395644b59e..906d3e166f2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png index 48a3ae2efc3..be32dc2ef24 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCallOut_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCallOut_Playground.png index 5bb37b590de..61ed24523e2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCallOut_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCallOut_Playground.png differ 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 437dc8ce434..045f48b8af5 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_EuiCheckableCard_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png index a3d64971b25..9427710f99d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png index cb94ac0fc4b..5c6605272f8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png index 185a7e3f18a..e41e0a2fedb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png index 09e7ca679f2..23e5786adf1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png index 3f944d8ccc3..cdf8f40b480 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png index a0d83fb343c..255cc9c92d5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Column.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Column.png index 21b190e45b2..c37b7f9f109 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Column.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Inline.png index 83f3c0c34a4..a8c1e5fa9a3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Inline.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Inline.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Playground.png index e761d4e894b..d4d34c19a45 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Row.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Row.png index e761d4e894b..d4d34c19a45 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png index d3edc8a4bb6..c4fc9e80484 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png index 5dafec61c40..6de66cbddf3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_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 3a19fa07633..554f2601a05 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 2af48209dc9..29ae920f8be 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 e73ea5af0c2..c7f0d14a3c9 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 ef4169ecaad..5bcaf19b87d 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 2cb8efd9273..23889d17096 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_EuiDroppable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Playground.png index 1c43bc87dce..6a7b2f18022 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png index 67e09bb4f09..4821d78a686 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png index 6fbdcd6d15f..c8a6797201c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiHealth_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiHealth_Playground.png index 8c36b7de58a..c9fc956da8e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiHealth_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiHealth_Playground.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 0408af1311a..6f2308aa899 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_EuiIcon_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiIcon_Playground.png index abbf6e06fdb..c4c7138988f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiIcon_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroupItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroupItem_Playground.png index 6e4394a2fea..32b06c4c736 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroupItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroupItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroup_Playground.png index 010b123f9b4..2fb4696b7d0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png index 0ebb110d0d9..da5b2bb2917 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingElastic_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingElastic_Playground.png index 2a99297fd41..25af17886ea 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingElastic_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingElastic_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingLogo_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingLogo_Playground.png index 9bf824a27da..0d30fef5fa6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingLogo_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingLogo_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Custom_Color.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Custom_Color.png index df7e27c4dec..3f6a62e2458 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Custom_Color.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Custom_Color.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png index 20fc80849d5..583f1188e9e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png index 91fb689dcdd..27db870143f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiPinnableListGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiPinnableListGroup_Playground.png index b311bebd95f..1ea6b42b2b4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiPinnableListGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiPinnableListGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.png index ad60b1ca588..2d74ef89905 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Determinate.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png index 35cc52d5ce7..f97e30be190 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png index e15e1e4fd49..fd52549fee9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png index ec423049623..0b139d4f806 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png index 88ed5d64db6..09a9932cb0f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png index 6ee5ee9c848..2ebad58a636 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png index d132af8178a..c0cfc084d1c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiStat_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiStat_Playground.png index a6d343c590e..9f6e91f36ea 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiStat_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiStat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Clone_Element.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Clone_Element.png index dc010e4d76d..841152633c9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Clone_Element.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Clone_Element.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Playground.png index 0d55312f375..ab991ef343a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextAlign_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Clone_Element.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Clone_Element.png index dc010e4d76d..841152633c9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Clone_Element.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Clone_Element.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Playground.png index a86ca4a5954..0baac06fdad 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiTextColor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiText_Playground.png index c5cd6eeb640..0b103cc967f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiText_EuiText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png index 15d957246d6..9ddb3c1fab3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimelineItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png index 38293d03752..880f90b2ae7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_EuiTimeline_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png index 517308bc5a2..4ded0ebdf8a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png index 8d2c84571d0..e01d4a688f3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTitle_Playground.png index 4e9e9aaf325..d8735ce9c8b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTitle_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 f86f65817ba..e93f01da5e2 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 68035b09158..5a63583f8c9 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 ab97f3c7221..a93833a5680 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_EuiToken_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToken_Playground.png index bb956bf733e..bddbaedd174 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToken_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToken_Playground.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 9b5193c7d96..eb3fa12bd24 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_EuiTourStepIndicator_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStepIndicator_Playground.png index f5d538c6f22..e6ccaa2a2c3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStepIndicator_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStepIndicator_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 13215c321ed..913c47dbfd3 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 c2660eb1b38..1911906b940 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Annotations.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Annotations.png index eab653c3752..4630b1e0c5b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Annotations.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Annotations.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png new file mode 100644 index 00000000000..83aae3b991b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png index f50feea42cc..516cd40fcb3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Playground.png index 2535bb75171..925deb4497c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Start_Value.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Start_Value.png index b12524855be..c00cbf6dddd 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Start_Value.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Start_Value.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCode_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCode_Playground.png index 26264ceb03e..940053cd954 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCode_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCode_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png index f1498add612..cedca14e4e0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png index dc91b9ad573..9b0924651b5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index 4d7f23f1996..0e5ddb9cd99 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png index 09d83378cff..cfca4328344 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png index b7042da2aaf..c8d4312e2b2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefreshButton_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 da10d5a2ea4..1d2d8ce2881 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_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png index 8993825b30e..8e2854a91db 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckboxGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png index ed522a8a334..ca51c8f2040 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png index eb3ab63b715..bba16f064a4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_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 95666f47c1b..4b97614cf74 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_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png index 4094099f976..316ec41204a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png index 7e4a4ef3361..9ab7dae324b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png index 6498a30ff4f..fb1d523be31 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png index d1cdeef2dfe..3830e136f32 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png index 10e1b2d2685..d2e87ed83cc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png index 6f699a50ec6..cd4bd9a8a66 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 6f699a50ec6..cd4bd9a8a66 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png index 3911b671f9b..cbc762dc46d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png index 46012eb6d4c..1cbd79b0b32 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png index 0d22a4cfe79..f50a8a53006 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png index 32458b11e54..7ee806e57ec 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png index b3b55800739..8fb41fa35dc 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 c4a961b6415..785d668b7d5 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 bf3953d37be..2e82f8611b5 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 8196c1f80c4..2ef3923d0a6 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 c43ab3fe28f..881600ff1c5 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.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png index 7d3fb2048af..e987082895f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input.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 e79e57f6576..04a2386cae7 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_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png index 1c4dfa789a1..5e46f2aa7e5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Playground.png index 2a378e8174a..b100329b500 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png index 81c85e8ee02..158dea24963 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png index 851024e33ee..de5f6bedc37 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png index 51c88284970..39ef393b3ef 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png index 51021526494..08973a57d8e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png index 80b26b2b00e..e294c92790e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldPassword_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldPassword_Playground.png index e65ce7349ef..14ac63d242b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldPassword_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldPassword_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldSearch_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldSearch_Playground.png index 1c1e0894a3f..77b118491b7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldSearch_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldSearch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png index 3e4ba02ccb8..6df2d1a6fdf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png index 7f4d0634afb..a9858aaaab7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png index 1163f0498b5..d670da7cfd1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Non_Large_Display.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png index 05e1f9b465f..36a37f90ac1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png index 4f368a56ccc..9f14a9ecde2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png index 953a571a030..02f9ed8cfe7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png index e104fba7eb2..4cf9828682b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png index 554e7fac72d..d7329cc3ce2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png index e104fba7eb2..4cf9828682b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png index addc5e8e5d4..8c28f2b6cde 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png index ccd569c8344..c4853452066 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png index 6ed97185b5f..7801282aeab 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png index 8e3238b3b63..50cb1ad98ab 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiDescribedFormGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png index 55b1fd76bef..9d9d68c7c98 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png index 06f8ecb0be7..aaec20abb5e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png index 8dc5fa3c872..fd1fdafb328 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png index ce375a6b3f3..a545adf5f83 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Playground.png index fce1b1972c3..28ed4d2790e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png index 5168aa02f8d..cc71657202c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png index f4e61afca63..fc34bdaa7f8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png index e6c5a8dba4e..5f83866abd9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png index 760f51c7ae0..e565b95fff2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png index 44723ec070b..fff9f11d805 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index d5d3c96d2b2..c8027ee75e9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png index 4fdf4e693dc..3aa21712afa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png index 3dde234364f..dcfb9389667 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Playground.png index ce5932793ae..d542cb462ab 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Edit_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Edit_Mode.png index c69319b0b73..8461b2536f0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Edit_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Edit_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Playground.png index 62462c0185a..e181c30edcf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Edit_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Edit_Mode.png index 73e458f335c..1fdc10550c5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Edit_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Edit_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Playground.png index dc25e138a83..7c8cceda9d3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png index 8fc344b6542..0365a76688d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadioGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png index 62c4d8e920d..34420a8dbd0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRadio_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png index 9a0e81649d4..b9aee7ba98e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input.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 new file mode 100644 index 00000000000..a54747277ca Binary files /dev/null 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_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png index dd549126cb3..f4c128332d3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Playground.png index b6e3afee420..9fa8005c839 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png index bfa99e190a6..b351c218c1a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png index 4864dbf371d..66c2d936076 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Value_Tooltip.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png index b89d7fae227..d4d4e7b6364 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index 727fe9f06db..16dbfef8af7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png index cdb8475fe74..f034f713ac0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelect_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelect_Playground.png index 15e67a2909c..fc1baff16d3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelect_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelect_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png index e2053215198..250d455ab1d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png index af3b7633651..556f3ff4f06 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png index e500bacbda1..33c44a226a9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png index 66a6b0c9197..a57452edd46 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png index dd67dc6dcb4..d872578c8ff 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png index 15aaf1b9ba9..c1f3fea4d38 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png index b20a2a6ad73..150e56a747c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.png index 14147733f30..b8959b0c130 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelectable_With_Tooltip.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 ffa99f4fdca..deb1e5d8ae0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png index ed3edf364f8..e8de4627150 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png index 35521170bbb..9a77c926918 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png index 585d9fdc753..312b351bfd0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png index 57abbb2620a..b76dfd3d2b0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png index 4ed666da03c..ab1af6a4f59 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png index 5d07ea70a4b..c90570fae4f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Playground.png index c7048826c82..e956860acb4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSwitch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png index 499c602733f..941cc14e766 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png index a507d2bc7e0..b3ce75374ee 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiAccordion_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiAccordion_Playground.png index 2e91083db16..967bd0389a4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiAccordion_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiAccordion_Playground.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 0e846cd94d6..0dce09afc21 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 8afd59051ce..b02298e8737 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_EuiFlexGrid_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexGrid_Playground.png index 27a53e136c0..c552b8be4e2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexGrid_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexGroup_Playground.png index da9e48798ff..6121f461776 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexItem_Playground.png index 9cab2f59faf..00d741ef437 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlexItem_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 7a31e99e06b..24f7c3bc62b 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_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png index bb49c5856ed..8e1908cf5f9 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 82bd10e919d..5c069327951 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 da4f3504b6f..6453324ad51 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_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png index 85f3304d2cd..74736778d7e 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_EuiFlyout_Push_Flyouts.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png index f507bfc8552..f824931e163 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png index ab7eeec6914..4d2c24cdbbe 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png index 35747e73899..2b23816980d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png index 729d18cbe29..7c7e7d35989 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png index 851073797ab..86c19378850 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png index 061bde84782..409e4c6cdfe 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png index 5c27f8f48db..0a87c2c4794 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png index 6f9198e45d4..58c6bfac390 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png index 6f9198e45d4..58c6bfac390 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png index e80f6a80f18..b6757489803 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png index 99be28f0d58..f4e6a9bb2b0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png index 8e619b824d1..55d9b0e2bfb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png index b140820e9cf..b610b27fa0e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png index dc22c4e553d..3acee6e5286 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.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 14431b06934..a5af4dcedae 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_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index 3da30b1940a..499f9476909 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_EuiHeader_EuiHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png index e6fa3a95e94..a8cdd2915e9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png index 9376e27fe9c..6bf3ad681e8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHorizontalRule_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHorizontalRule_Playground.png index 04a703be7d4..9187076f848 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHorizontalRule_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHorizontalRule_Playground.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 deaaae32acc..a16c96429df 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 d2a865c1825..7833014931b 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 fa36dceea1c..9bbf1d4209d 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 716703483c6..47b6f22dd23 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 a0e2595ffdd..e4584160832 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 e71197cf72c..ccf8ef9e1e5 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 79e41e742f6..24f4de84d0b 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 4f5cd30635f..31ec6fb2465 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 2d3559978bf..72273e381aa 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_EuiPageBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageBody_Playground.png index 440f7316ace..bcb955477d9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png index ed528607a65..5af22df8385 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index db2b5d6758b..714f7828fab 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png index 235f1b63ffc..3c28ebe7988 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png index 235f1b63ffc..3c28ebe7988 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png index af01fe1d9b3..af098737a0a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png index 849bfb38ec7..55d28e0a7b2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png index 9c54c51967c..307f685d387 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index 50f7c4030d0..f26400cd4ae 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSection_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSection_Playground.png index 5ea191ba6e5..ef332c575fa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSection_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Playground.png index c18ae7a8333..86391faf8a0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png index a1016adf03a..b688a4cf8aa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.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 f3000878467..76a92ad48f2 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 c4170549816..05f28bc3478 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_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png index 5ce41497360..7bdfd6894a5 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 37f84eb5448..9c7045dc4de 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 b9a38da081f..7051288e0d7 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 03be63076af..96904dce4db 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 de240518d89..47c074ddf00 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_EuiResizableContainer_Collapsible_Panels.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png index be431e6092e..a8b574d8958 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png index f86e3afc02d..462c8737538 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableContainer_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 c1e52f4dcd3..5018fb9a5dd 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 655b6a44644..d002a86d130 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 8b875f7e415..685d23c92ad 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_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png index 6a3450edabb..326d40ddf3f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSpacer_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSpacer_Playground.png index c878ad3574b..17f44249380 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSpacer_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSpacer_Playground.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 8434db2cf8c..0f9d5996bac 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 904b22aea60..cd0396c3e92 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 6453ea40d72..1d428f6308e 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_EuiBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png index fc9f81c831a..8611d042933 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png index ea94e15c0a8..776b1a5b702 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png index 9e997512402..f50438b823f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png index 9e997512402..f50438b823f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png index f01cfedf46d..3bb9da82fde 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png index 0b69926358a..c9e8bcf7154 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png index 1f565af1cc1..cfe092a4146 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png index 68b6c917528..add40ad1ca7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png index 77e2faf1a48..b71c2bbe7c3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png index 725db79177d..21da1b9b980 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png index a8db218f74c..ea967dbdc1d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.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 402dea27f81..92dac1853b6 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 227644fbe21..24c7f472c99 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 4d39e15778b..9acdc2dda92 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 bf55655bb13..c1016304e86 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 eb352b3e575..3390dddc868 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_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png index d5129d5aa62..a033123662e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png index d5129d5aa62..a033123662e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Playground.png index bb48d402499..021b1af6230 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Playground.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 d59f1354f70..8fcdc10bf0b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png index b7d7da69df9..213ef79fb99 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png index f8b15c25dd6..50f94777cf9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png index e3703afbabf..3456f15569a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png index d76f39cb563..2ddbb3a8219 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png index 4bb418eb234..ce509c363f3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png index df18c9621d7..1308fca3485 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png index 095c088490e..bafb035b75c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png index 012997da2b2..b5920626cb9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png index e8b3ef6aded..873fe128f89 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png index 419365de7b7..8b22f9eda98 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiLink_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiLink_Playground.png index 3f31fe5a2ec..d01e8e2744c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiLink_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiLink_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png index c8e79d23ce6..95cebae4a35 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png index 160c4c1ac11..94f13acee7e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png index 7b1f640ef58..ef06c874797 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Mobile_Side_Nav.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Mobile_Side_Nav.png index f86d821746e..fc61f694eb7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Mobile_Side_Nav.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Mobile_Side_Nav.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Playground.png index 561bc13bcbf..eda1c275c74 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Render_Item.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Render_Item.png index 8f1c1045b99..f911862fae5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Render_Item.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Render_Item.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png index 3eb1f4d1329..4319fa450f1 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png index 07a077d060e..5a9c73691cf 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png index 422b1ef9920..4d671998e3a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png index 694b893e800..7f8065c523b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png index 45ebf7cec90..728d7c564d9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png index 605102cbce7..bcc597d1445 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png index 5860eed1d89..e4b7176e99e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png index 99d7017b6fc..667171a4a1d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png index 0a441bebe7b..d5878871e80 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png index fdcd3e35ad2..419d753a7b0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabbedContent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabbedContent_Playground.png index 8590aa8f0d5..500932320d8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabbedContent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabbedContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTab_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTab_Playground.png index acea1542476..84acd1c8aed 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTab_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTab_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png index ef9962d0988..c2f3751049c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Playground.png index 6a7a457be16..c48dec6715b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTabs_EuiTabs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png index b196e3a4a27..976d1f85e96 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Playground.png index 814c5bdb84d..f052965e52a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png index 712d47932b7..81102d121c3 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png index 4ff354fd56d..dc144c43812 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png index 9b9429ccd72..0cc56411a7a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png index 593dcccf4b3..6c2af936835 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index aa38d7136f6..ce23fc7b424 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 4952fd9b5a4..c3281aae603 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index c474f891b31..183a6aeef18 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png index 9e8647b9a1a..fee2d0a427d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 9094880a22f..049563d9350 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index 72604cc7467..a500438be43 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png index c4b372315be..f45655b2b54 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png index a343bf2e0cd..dfabebeb461 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index da772208ba2..0f1a52316f5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 718b2b83d00..fbcbaa36764 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index 7f3958e9262..c700446e24a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index 674d7ac5c16..b40283e0e74 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index 87654ab9c8c..d33fe9efefb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index 1c836bf3b25..f69ac487e77 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index 092ccb900cb..e60a19fe0cc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index 6e1f0b4087b..e50e87edaa8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index 9dce6c9f25e..b1cba469305 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index ab5e860851e..28e77f7ac11 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index 677a8004a09..0311868fc19 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index db3b0072178..e29e49621c5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index 3a43d0d4cc3..1a1b0b00d2a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png index 7e6ea43cd60..7ccc57dc668 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index cc890c505a4..9c26ed0275b 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 61d955ea229..d1d48f924c6 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 0fef7b81f8b..c5357cf1d31 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index bcc13d6cd91..3db00aa010b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index dfa13a507e0..590c9e79058 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png index 5b297147b42..705f0f7096e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 4adb9920ad2..015fa53eb85 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index 2f8bde9eb07..b047cbc5066 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png index 1a0c56f1167..ed67cb7f7b6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png index f698f45c194..24e2505b9a7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png index 3f8665a936c..2f7762c3bcc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png index 91e3d35dd2b..7bbe5d64e75 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png index 5d5f8bcd72b..3186c79fa19 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png index 859150df341..c098c639590 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png index 4c567086527..53cdb15b281 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png index 72c02ba6149..71b55ec34d5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png index a344d7ba16c..39c91ccce14 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png index 9f763a44250..d861e708326 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png index c7ac6e09f18..364a3bd717e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png index 7985559d261..c1927a3a936 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png index 2ddeffd08dd..a16f9ad7d32 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png index 3c28ce048a6..f8a4d0ff88b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png index f6b063bfbe2..512ce3a7f3f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png index 8e3fa7596ca..2c64b60402a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png index b26d03f2b34..939eb0e144c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png index 33423d94a0c..e3200109684 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png index 057c8b8cbba..8b170d21ecb 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_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png index efc02c2ffcb..c26bc18a8af 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png index 7ad9e92fc0a..2d5d906af5a 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_Font_Default_Units.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png index 80531851d59..1de668dd68f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png index c026abf05f6..c6e42382119 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png index 8cc2126ebd8..8732cdacbd4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png index d95588d2e63..dda94748361 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.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 1570a8a6a88..3dc28c41d68 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_EuiBeacon_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png index 9b8f908d715..01d94e5d382 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiContext_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiContext_Playground.png index d3cff42dd64..f5bd136c07b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiContext_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiContext_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png index 8a46f628e55..02c69cbba5b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_Playground.png index 0865b42600a..99a843ad9c8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Multiple_Search_Strings.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Multiple_Search_Strings.png index 0b88aba02c7..a1d54019543 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Multiple_Search_Strings.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Multiple_Search_Strings.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Playground.png index 626063a5f87..5ddd24dfdd4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Multiple_Values.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Multiple_Values.png index cedf6575cf1..55a317ff81c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Multiple_Values.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Multiple_Values.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Single_Value.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Single_Value.png index 87d4f565488..cf76139d556 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Single_Value.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Single_Value.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Interpolation.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Interpolation.png index a4d4c9c6c2a..b9c97aaad03 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Interpolation.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Interpolation.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 1cebf1e9b90..0174472c821 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 437dc8ce434..045f48b8af5 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_EuiI18n_Single_Token.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Single_Token.png index f5b069a6db8..06f23991a86 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Single_Token.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Single_Token.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiInnerText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiInnerText_Playground.png index e5ea3c79ce3..52a7688c3bc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiInnerText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiInnerText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_Playground.png index e9b737f2a68..5fd699fbec9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMark_Playground.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 0cc74ca7f9c..a7bcb509981 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_EuiOutsideClickDetector_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiOutsideClickDetector_Playground.png index 12d2c17e37d..1c8d86cfbee 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiOutsideClickDetector_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiOutsideClickDetector_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiOverlayMask_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiOverlayMask_Playground.png index dc712d11582..3ed5c8da8ec 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiOverlayMask_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiOverlayMask_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_Playground.png index 84d57210a6e..4a871ba726f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiPortal_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 235dd620ff9..2db211fc2ae 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 f727e228f22..f691813352c 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_desktop_Utilities_EuiTextTruncate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png index 3e1706ceee7..b58c074bc4d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png index 6f7483e4e91..8ad2474f149 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png index 4493ee51939..c597c6f058c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_useEuiTextDiff_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_useEuiTextDiff_Playground.png index 6acd9e497a9..93a83752e66 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_useEuiTextDiff_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_useEuiTextDiff_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiAspectRatio_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiAspectRatio_Playground.png index 02b23ddda68..67e640474eb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiAspectRatio_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiAspectRatio_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png index 1d10ff60e0e..2c44b4980df 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png index 45fe665c679..628558d9013 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Custom_Colors.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Custom_Colors.png index 0bafd74d2db..98735fa8128 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Custom_Colors.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Custom_Colors.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png index 59cb891b328..8d4bef1a191 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png index 2ef6d0c0e3f..e561565f629 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCallOut_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCallOut_Playground.png index f67da772c83..22e622c9840 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCallOut_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCallOut_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 79a21c368c7..569ce9be66a 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_EuiCheckableCard_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png index ac2f0f68f42..d086635bad4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png index 90b1dbe21bc..be38d6ed5b4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png index 3c55f4206b3..6b3ba601679 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png index 1cd89b52a92..339b3d8841d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png index 4f86fcc10a8..1f564ef7d0d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png index d8d72e3039d..ad641e3aedb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Column.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Column.png index a26a69c6097..dcbf5fb14d8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Column.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Inline.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Inline.png index f9119428934..e6353149633 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Inline.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Inline.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Playground.png index e66c76240ac..315a5dee850 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Row.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Row.png index e66c76240ac..315a5dee850 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png index 47374d6fb1c..50f5060c335 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png index d3581a7b023..df46bc99e58 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_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 5e4cd5a805c..ea003b3f7f2 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 7bc192cf8f0..37d6e9e55c5 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 6aad7ee6e05..9eb7210e7c3 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 ea18c0df61a..572ed33dd25 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 fd1890fff8b..6f03f516aa0 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_EuiDroppable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Playground.png index f1e84ffb1ec..44fcd420ac8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png index e7883f9b715..7a931ca75db 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png index 27ecec8be9f..3b7c79d8e8f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiHealth_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiHealth_Playground.png index 0514da6af76..1fcbdafa178 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiHealth_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiHealth_Playground.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 e72abc9bc64..2e850088d78 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_EuiIcon_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIcon_Playground.png index ccf5b5b6122..46a17e88fd1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiIcon_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiImage_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiImage_Playground.png index 28bb274856e..46439be9ada 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiImage_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiImage_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroupItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroupItem_Playground.png index ba3c7f641fc..0b5950bac73 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroupItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroupItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroup_Playground.png index 049f001180a..0a878ae3702 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png index 4b58a762d8e..2a644432bc8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingElastic_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingElastic_Playground.png index 0eb444f8774..c8d4a585726 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingElastic_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingElastic_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingLogo_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingLogo_Playground.png index dc8820ae34b..f8831ac2390 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingLogo_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingLogo_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Custom_Color.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Custom_Color.png index bc1afcede21..c13c224cf30 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Custom_Color.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Custom_Color.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png index 4d41373ab9a..756049adfff 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png index 2b742522ba7..93f4b25fe0e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiPinnableListGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiPinnableListGroup_Playground.png index b0ca3e9f1d7..8d989e807b1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiPinnableListGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiPinnableListGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.png index 9835a0bd06c..498f6b983a0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Determinate.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png index af55961fb17..1a041190d3e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png index ccd350973aa..57cc4fe1334 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonCircle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png index b5f40241466..978ec98b416 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonLoading_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png index c5f65cf5bf5..77e51109c1a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonRectangle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png index 822cfa8551a..36ba399d506 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png index ca44a1153bd..cf7c820be79 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiSkeletonLoading_EuiSkeletonTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiStat_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiStat_Playground.png index fdf258fd01a..4481e34215e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiStat_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiStat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Clone_Element.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Clone_Element.png index af9fe4c205d..aa02bb9605f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Clone_Element.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Clone_Element.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Playground.png index 4a23855e9cf..95f5f698a87 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextAlign_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Clone_Element.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Clone_Element.png index af9fe4c205d..aa02bb9605f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Clone_Element.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Clone_Element.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Playground.png index 49fefa7a3f7..4bf88693b75 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiTextColor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiText_Playground.png index 52d5ddaf642..3c25a9f62ab 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiText_EuiText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png index c8952125e56..f8ef76e31ee 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimelineItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png index 55ae5a7f7e2..bc5516261cb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_EuiTimeline_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png index 248abcc1f5c..6a77e7543d0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemEvent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png index 9c2ccab6d4f..1ede4615817 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTimeline_Subcomponents_EuiTimelineItemIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTitle_Playground.png index 541e44a1dd0..7f60e5f8f8a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTitle_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 073a9317b22..2037e9a73e4 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 638753620b4..2c95e093c81 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 fa9850a7b37..bdde300b280 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_EuiToken_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToken_Playground.png index 1bf9b742520..424b571b0e4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToken_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToken_Playground.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 3f3a86e1107..2d83cc38944 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_EuiTourStepIndicator_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStepIndicator_Playground.png index 48259cae195..50d5efa1664 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStepIndicator_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStepIndicator_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 b28c58b387c..dba3bd59e24 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 405298cf883..7d7e8c1e613 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Annotations.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Annotations.png index 6258efa04c4..b48fa204978 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Annotations.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Annotations.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png new file mode 100644 index 00000000000..79c9e739db3 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png index a49bed9c0ac..b3b26bb77cb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlighted_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Playground.png index 1b30a262da5..976b33ca053 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Start_Value.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Start_Value.png index 5872a682a17..35c9a8559a8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Start_Value.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Start_Value.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCode_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCode_Playground.png index 2615e14438a..309f68d710f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCode_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCode_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png index 17330f97abb..dd35f1b44ba 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Errors.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png index e30e2f735c7..ae8bcf107ec 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png index d566845c565..ab12069a9a7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_View_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png index fcc5adc6a60..20ff2475849 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownFormat_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png index 017e5ac6d43..01a355fd3c6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefreshButton_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 fd924ac4fe2..a66046dbb16 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_EuiCheckboxGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png index 5321036ba3c..f41fb426e0c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckboxGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png index 5bf1e090823..95295f9f79b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png index 79f3911b1b6..6e85e75793d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_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 be1b0e1abfe..2853e3da5f6 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_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png index a9845bf9d5b..f914ce983ee 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png index 383a825f81b..a68bbeb885e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png index 7b02cd1dae9..bef081036b0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png index f77406d7d8d..87787544aa5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png index 62b2e102851..d8cd860c1b1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png index 661b6537bdb..da9473e6dee 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 661b6537bdb..da9473e6dee 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png index 1e06ba09888..f2b6bbccd41 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png index 88226d2cdf3..c4b8c5b7a44 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png index c8c70f08bce..8a42eca8e05 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_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png index f664661b346..c4b8c5b7a44 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png index 963af9896c3..4e58c4709a8 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 c47290a1b4b..b7ad4f4466f 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 9159441dff0..a5403ca2655 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 a87e7ba5261..a2480645ad5 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 adfa6857b3a..4cc32e4689c 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.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png index 8f73613b183..620aeba1484 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input.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 cb8b4eb2974..48b29f7952a 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_EuiDualRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png index b0223dfbd55..d8de079c0f4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Playground.png index 60f1bfb3811..1b6bb125431 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png index 57cd818c303..582053d896e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png index d8a5829e50e..67bcf98100c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png index 882476dfd7c..7e55c1aea64 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png index 3ed4de4a73d..0724778b7d0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png index cdb797c29a8..e562b58f23e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldPassword_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldPassword_Playground.png index 526e6d26a7b..68d25ef809c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldPassword_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldPassword_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldSearch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldSearch_Playground.png index 5873d9f7345..d255539dc5d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldSearch_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldSearch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png index 33fd945dd3f..0c7359c0eec 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png index a28e26fb662..a2c3d5fc75c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png index 9086ed619f9..a7b31981ac6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Non_Large_Display.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png index 55ea3f9966d..bb5c17a4785 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png index e8974e4a98b..3e7155c5c65 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png index 18d9d55cd28..14bc2c6ecf1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png index b8441ac74fd..181c6571d7b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png index fba5ca718d5..50d67dc156e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png index b8441ac74fd..181c6571d7b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png index 9df3cd6ede3..6a239338663 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png index 2883ad41688..d71fc020739 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png index f9217e4a21f..461f05af79b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Implicit_Titles.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png index 25ad801e4f0..e71466ecd3d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiDescribedFormGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png index 338bbf80b3d..23b8e5ad89c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png index c7a124343a9..241ff079296 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png index 23ef9c369cf..d738b9a4171 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png index e053f335276..1ebdcff9790 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Playground.png index 2bc150c1182..2c825ff283c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png index ba3c8be4126..cc9911de51f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png index 76050a9ffb6..b0a966ac485 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormFieldset_Subcomponents_EuiFormLegend_Playground.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 888bfe42431..7201473c66f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png index 283ce732600..9a4886aadc7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png index 523ec069dbb..694e81c22ed 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index a0235bb6357..b6aa830a279 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png index 9fd1bdee25b..e2ba415be33 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png index f0efe4bc1fa..fbe1d3c24ff 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormLabel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Playground.png index 2bc150c1182..2c825ff283c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Edit_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Edit_Mode.png index 66cd7da986a..ab644a3d558 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Edit_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Edit_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Playground.png index 88be15cf0fe..f7293dc448a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Edit_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Edit_Mode.png index 37c814786dc..40ade79e65a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Edit_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Edit_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Playground.png index e144b6eeba0..e41d9b13b78 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png index 86ac51459b6..0e72ca86ec8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadioGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.png index 02cf0e6a0c4..10d9415abe2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRadio_Playground.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 7cd7f7e4681..9b3dfe241e3 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 new file mode 100644 index 00000000000..4fceb1cac3e Binary files /dev/null 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_EuiRange_Levels.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png index 3f850c9d448..a0be68a5ab7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Levels.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Playground.png index d9f2cade223..c801f964b2f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png index 5f4115f53d8..5cfe332b9fe 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Ticks.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png index b6e46f3124b..4ce360f0d3c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Value_Tooltip.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png index 4eff6fb0bb5..b1049c73cc5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index 4ed63167fe9..77e496f9626 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png index 15d5f3a66dd..1d6d530d702 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png index 2d5e52fffae..29567ec120e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png index 7f4683b976e..273391b5266 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png index a8949e46496..088ae58dae9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableListItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png index cbf122c30f1..f7ef16498de 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Groups.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png index 1fcd460f88e..a8e9f76aea4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png index 5300bd18899..893baea503b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableMessage_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png index 5873d9f7345..d255539dc5d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_Subcomponents_EuiSelectableSearch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png index bbc6d481531..a21a273e6ed 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.png index fb2cd990f97..b94d17b934a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelectable_With_Tooltip.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 6eb2a51e3d3..938999425e1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png index 68a44b5f0d8..dbe88534b2d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Overflowing_Children.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png index 32277cccdf5..7ba39255f18 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png index 32277cccdf5..7ba39255f18 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Restricted_Range.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png index bad8dda6f65..eb0c979f96b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperUpdateButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png index 8be4284d3cd..9ea73d59e7c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png index 66275ef3c65..86151d5243f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png index 6941fed5635..fd6acaae700 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSwitch_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png index dd1133e11c6..7bbed7e60e7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png index ca732808831..53febc1558c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiAccordion_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiAccordion_Playground.png index 66b2a92dc3f..a3e5365db40 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiAccordion_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiAccordion_Playground.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 8c39832ab66..70de0f7fba9 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 17ad877e27b..a65c7b05835 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_EuiFlexGrid_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexGrid_Playground.png index cfa4cdc622a..84e9af4a23b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexGrid_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexGroup_Playground.png index cfa4cdc622a..84e9af4a23b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexItem_Playground.png index 825fb193962..abf439bbc2f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlexItem_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 208419c7ea7..8a31bc5accf 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_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png index 73d4019fef3..d42f145326f 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 c4be4de797f..cfe8cf11a86 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 2037678c00a..8f72586e6d7 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_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png index 2650e3f7e4b..c69d8ba7521 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_EuiFlyout_Push_Flyouts.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png index bd9b17b810a..252acca4fe9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png index 66a36a3e3de..ca17c39a0f3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png index f0b7b1a69dd..781715d04e5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png index 31de872166e..d7144b7c91f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png index 21fd6b0911c..6f4a129fc61 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png index 04dd3ca34e8..5f06d18987b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.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 c3b84d17cb3..d9b796e7217 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_EuiHeaderLogo_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png index 96165d02365..75c0802093c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png index 96165d02365..75c0802093c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png index 7bd032d2d46..6f4342f456b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png index a710821d814..71a4df9dcec 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png index b9e7cdadd35..f8008d3d391 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png index 7fe97effc96..518879c029a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png index 53e445875e3..4bcdb2efeaf 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_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 898be033f44..4de817ef9ba 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_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png index 4b667e21708..1867ad4ebf4 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_EuiHeader_EuiHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png index d2e8e8eab57..ff578dfad09 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png index 3d52b3eea98..67e6e4437d7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHorizontalRule_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHorizontalRule_Playground.png index c33411bba92..abe1adbd8f8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHorizontalRule_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHorizontalRule_Playground.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 87ffe1734c7..0b3be6190dd 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 39f488513dd..34d392f4497 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalBody_Playground.png index 3c2d095b224..949c52e51a4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalFooter_Playground.png index d06fab18cf2..0e1287dfe0e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeaderTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeaderTitle_Playground.png index e2ebdcb4911..b7ac05f67d7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeaderTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeaderTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeader_Playground.png index f7b71de4e9d..d305aff4f04 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png index 9c40f55d559..f119d6a72f5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Playground.png index fc6e048e664..ab46f088aff 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Toggle_Example.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Toggle_Example.png index fc6e048e664..ab46f088aff 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Toggle_Example.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Toggle_Example.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageBody_Playground.png index ad25d6805ea..6a583a66e97 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png index b19c8eaf6d6..efab92101b5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index 278209f056a..2d5e31dee75 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png index 546a9b30701..e02950fbd53 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png index 4d020781596..2596a6d64a1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png index f51ed4b8716..643ecd8152e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Truncated_Right_Side_Items.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png index 4f37df7406e..53a771a0034 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png index 5ac9bd60532..bbdae829c48 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index 0f4bb03bf6d..33ba0702e8c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSection_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSection_Playground.png index 9920d422f7c..3092b38ac6d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSection_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Playground.png index 29ee9f8e36d..fae5da07e51 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png index f4fd63bd9dd..1861a7163df 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.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 82180e28237..0d6cea6a490 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 0029320fb6c..a21cdfb81cb 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_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png index 24837b35c4f..bd32d320eca 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 193cc213528..5ef80c0fb1e 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 34fbaedfb4b..be4620aef2c 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 038157528e4..043e4a11d66 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 5b934428063..452ca6ca025 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_EuiResizableContainer_Collapsible_Panels.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png index a54becc7f34..3642d306c3f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Collapsible_Panels.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png index d67e90a4870..168de84e2a9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableContainer_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 b9ccdb1104b..474b534c623 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 74abcab44d9..41966e443ea 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 1b2a6189ab4..16efbd37edb 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_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png index c4fe9edfa68..3e61428cf5a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizablePanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSpacer_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSpacer_Playground.png index 26b39e11329..5ec790cc7a6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSpacer_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSpacer_Playground.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 2a01ec4115b..81211eef403 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 9e6b49e8a65..1124318e7de 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 b6d07fd928b..0f696316b9e 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_EuiBreadcrumbs_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png index a0f947a7176..bedd6bc0832 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png index db55463c9ba..fec6f7dee08 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png index 9c79216a724..0cf7e511db7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png index 9c79216a724..0cf7e511db7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png index f6d5ea7f8f4..c6b6929d0b4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png index d5910f8b826..b97391660dc 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png index 6731bd56a16..a7b07f9fc09 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png index c0b699f5b12..0f0418a83eb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png index ac48624bde7..53c2a53264a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png index 58899b7f384..44ff205d6ee 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png index 58362047ce9..b9b04a9f6a6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.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 f3711c6cf21..090794a3ee3 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 03a05e0bb02..4213c04b0ef 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_Global_CSS_Variable.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png index ad4f324d261..2d9d7f58da6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.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 e4f56ef3dc2..f53d6ac7cca 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_EuiCollapsibleNavItem_Edge_Case_Testing.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png index e720f1e765e..b4a21ac9ebb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png index b26eeae6653..84793d620a9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Accordion.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png index b26eeae6653..84793d620a9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_EuiCollapsedNavItem_Link.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Playground.png index 9a9780bcf99..6bf42430d1f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_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 7593bd6ca45..2fd83d055c5 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_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png index 34ad38024ba..75f6d68020f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png index 7569f7ef837..50c938cb273 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png index 0c4852a854b..47b4caf9f06 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png index 02960726a4b..179c2162845 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png index 31fe93885c6..d46ab1b8271 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png index 36df8a1e7ee..d2abddcd7ef 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png index 0aeb1e73876..c0ffad3237a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png index f2769fefd26..6f46c816085 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png index 34ab0a5ceae..bf7c92ac8c1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png index 61fa78431c9..1d4930f60ae 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiLink_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiLink_Playground.png index b890d32d4fc..c5cacd29bf2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiLink_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiLink_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPagination_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPagination_Playground.png index 7305c18d52b..8556391e034 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPagination_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png index 9282fa382b3..4149bd503e1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButtonArrow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png index bbbec6702f7..a3008a27441 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiPagination_Subcomponents_EuiPaginationButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png index e74c74a7368..3cbe8dffd1c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png index 98b5316cc01..f2e40509031 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Render_Item.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Render_Item.png index de2be93c161..27eaeb59952 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Render_Item.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Render_Item.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png index 1a2c749526b..922d2a0b8fa 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_EuiStepHorizontal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png index 9b5b0c2e29a..fbe3f40bcb4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png index bef583f0761..1669de1df58 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiStepsHorizontal_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png index a007c7cb121..efbf9c15bbe 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png index fc18ba36cec..fbdd6e49377 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Multiline_Title_XXS.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png index dabfbffe70a..f878863af72 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_EuiStep_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png index 66ac1f3036b..6c70427f2b8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png index 4d38e32e2b6..1b53ffa8a35 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_EuiSteps_Unordered_Steps.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png index 9726d6a375f..c670993bf52 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiStepNumber_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png index 9763626cfb0..e3f92c0fe6b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiSteps_Subcomponents_EuiSubSteps_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabbedContent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabbedContent_Playground.png index d647ec8129f..9d626c4784e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabbedContent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabbedContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTab_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTab_Playground.png index d8df5dd8bc8..bc6103bb39e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTab_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTab_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png index 75ceed23fab..fe14e4bb2d9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Long_Tab_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Playground.png index c6b2eb2c3c8..a774c53b1fa 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTabs_EuiTabs_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png index 6a9bf4744af..51169a1d343 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Playground.png index 277f2d25928..e62fcc00080 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_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 e20bb64413f..0e7629e473d 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 886b40c2667..14eaae98a4f 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_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png index eaf23176076..0a78327f12c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png index da29c1f788b..8a3dffcf5b5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index 137eef593d9..53f21e482bf 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 c986dc99409..c951d1173e5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index 5c98b4f8f8d..5b75c7079e9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png index 32af240df8d..ca0039eaee0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index d4fcb79d797..1a58280ab13 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index ed571c7c894..20989ddf016 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png index 6898c49059f..68407b94863 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png index 46fc5aafde7..f297698912d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index b4463eea22f..04c62052a81 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 7960a220452..5c664806db0 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index d7a0bf532bd..37bb90f1743 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index 0703bbb5c9f..d645d45f443 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index e26c5bb1e1e..33914592ca1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index b96ba5935a7..00124850932 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index 6cef9e165a2..7a73f96c718 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index 657f2e61f7a..4aea25dd191 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index 351cb082070..ff40d684787 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index 9feae4d4a31..1e25103b8c3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index f0e37b80b54..70dc74b08bf 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index 29c412b62da..618cb2c1f6e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index f0b81627601..6b022403d6a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png index f8161979187..90ea1d96b73 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.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 f94ac5b53b2..69d734d8123 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 f91ab2e92b3..6bf807d79f1 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 0c1d3e80dbf..f0b270aa76e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index 15524970384..81ae3ad3c28 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index 97436fab22f..b41db35b5db 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_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png index 6460f4406f3..b2f25e2ecd7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 495ba9e3293..3142fbba65e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index 34eb4c4220a..05b4c889681 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png index e1a065cb5e7..b6030ee84f2 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 2c4b6b752c1..63c71774ff0 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_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png index db75a3cf127..e5b8459ff3c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png index 384d59d4565..6c367469701 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png index 8d7043f9a6d..79151ca60a8 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png index 3fd338b1d40..8a500c1a52c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png index c0790fc000a..b342741e33c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Tooltip.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png index 28312957ee2..01174b87b58 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png index 3315d9f51c0..29b494bef6d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png index e8d47cdbba8..8cd11cc7b8e 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 6212a0f9510..6d56ab7403b 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 ae37345f7ee..52b378cbb50 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 1980ea112b7..38f4e1f90e8 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 ef9aa68e39b..95348b121fe 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 07ed056cd69..c509f80d42f 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_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png index 2a18f17a380..7cf50e25565 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png index 6d40a5e369f..697fb804865 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png index ab01a2af4a0..5664b92672e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png index 8eb8edf4bdf..cd2c368d2cc 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_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png index dbb15894f1d..90e0bbc751f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png index 56ab706f802..6f654f988f3 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_Font_Default_Units.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png index 0c20a607f30..3a7b26448a1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png index 764c9960ab5..b0f220775ea 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png index 434d81242b1..e5a32a89dd6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png index ca7bb824564..5b0b69246a6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.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 b54432a5b61..72de0b87a1f 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_EuiBeacon_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png index 34e4b0616f8..a6591815e54 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiContext_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiContext_Playground.png index b1576ec0191..3a74ce356b1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiContext_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiContext_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png index 2941e9e4cac..f7a575e4418 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_Playground.png index c3fd09a1ed4..683a97054ae 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Multiple_Search_Strings.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Multiple_Search_Strings.png index 17719cf8a89..6a8dc397aed 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Multiple_Search_Strings.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Multiple_Search_Strings.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Playground.png index 65261500a98..8f1886ef529 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Multiple_Values.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Multiple_Values.png index ca3074eea68..201a93f078c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Multiple_Values.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Multiple_Values.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Single_Value.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Single_Value.png index 7a07615f5ed..fa604006a47 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Single_Value.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Single_Value.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Interpolation.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Interpolation.png index 3508b206097..63dc4ea5886 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Interpolation.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Interpolation.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 e95a20a4561..8e1c5167d1f 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 79a21c368c7..569ce9be66a 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_EuiI18n_Single_Token.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Single_Token.png index 0818c03f557..c05a890c4f3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Single_Token.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Single_Token.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiInnerText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiInnerText_Playground.png index 8f54d6ca3e6..a372087b7c4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiInnerText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiInnerText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_Playground.png index f96c89ba3f4..27db8610a9a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMark_Playground.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 1152c77e79e..76ef92eaa59 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_EuiOutsideClickDetector_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiOutsideClickDetector_Playground.png index 9bbd024a92e..d9e5e88c5ca 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiOutsideClickDetector_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiOutsideClickDetector_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiOverlayMask_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiOverlayMask_Playground.png index 9789cd2e089..d696ef6eb99 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiOverlayMask_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiOverlayMask_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_Playground.png index 6f1c10690ee..b9af10df80f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiPortal_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 184d36360af..c06b43bff8e 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 f84c8dcdae9..dad4d75b0df 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/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png index acfba94a277..b378c6c9c7d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png index 4804e6e5efc..f30f15f4392 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png index 4ab0e9bbc6d..e6bcd6d0d7f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_useEuiTextDiff_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_useEuiTextDiff_Playground.png index 11b00efea97..399627e4a61 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_useEuiTextDiff_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_useEuiTextDiff_Playground.png differ diff --git a/packages/eui/.storybook/decorator.tsx b/packages/eui/.storybook/decorator.tsx index 6b78a2e2353..e11f1ac82ad 100644 --- a/packages/eui/.storybook/decorator.tsx +++ b/packages/eui/.storybook/decorator.tsx @@ -6,12 +6,33 @@ * Side Public License, v 1. */ -import React, { useState, useMemo, FunctionComponent } from 'react'; +import React, { + useState, + useMemo, + FunctionComponent, + useEffect, + useCallback, +} from 'react'; import { css } from '@emotion/react'; import type { Preview } from '@storybook/react'; +import { EuiThemeBorealis } from '@elastic/eui-theme-borealis'; import { EuiThemeColorMode } from '../src/services'; import { EuiProvider, EuiProviderProps } from '../src/components/provider'; +import { EuiThemeAmsterdam } from '../src/themes'; + +export const AVAILABLE_THEMES = [ + { + text: 'Borealis', + value: EuiThemeBorealis.key, + provider: EuiThemeBorealis, + }, + { + text: 'Amsterdam', + value: EuiThemeAmsterdam.key, + provider: EuiThemeAmsterdam, + }, +]; /** * Primary EuiProvider decorator to wrap around all stories @@ -20,8 +41,9 @@ import { EuiProvider, EuiProviderProps } from '../src/components/provider'; export const EuiProviderDecorator: FunctionComponent< EuiProviderProps<{}> & { writingMode: WritingModes; + themeName: string; } -> = ({ children, writingMode, ...euiProviderProps }) => { +> = ({ children, writingMode, themeName, theme, ...euiProviderProps }) => { // Append portals into Storybook's root div (rather than ) // so that loki correctly captures them for VRT screenshots const [sibling, setPortalSibling] = useState(null); @@ -39,8 +61,28 @@ export const EuiProviderDecorator: FunctionComponent< [writingMode] ); + const getTheme = useCallback(() => { + return AVAILABLE_THEMES.find((t) => themeName?.includes(t.value)); + }, [themeName]); + + const [_theme, setTheme] = useState(getTheme); + + useEffect(() => { + if (!themeName || theme) return; + + setTheme(getTheme); + }, [themeName, theme, getTheme]); + + const euiThemeProp = { + theme: theme ?? _theme?.provider, + }; + return ( - +
{portalInsert && children}
@@ -121,4 +163,16 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = { dynamicTitle: true, }, }, + theme: { + description: 'Theme for EuiProvider', + defaultValue: EuiThemeBorealis.key, + toolbar: { + title: 'Theme', + items: [ + { value: EuiThemeBorealis.key, title: 'Borealis', icon: 'box' }, + { value: EuiThemeAmsterdam.key, title: 'Amsterdam', icon: 'box' }, + ], + dynamicTitle: true, + }, + }, }; diff --git a/packages/eui/.storybook/preview.tsx b/packages/eui/.storybook/preview.tsx index c34435f5032..475cba632d5 100644 --- a/packages/eui/.storybook/preview.tsx +++ b/packages/eui/.storybook/preview.tsx @@ -48,12 +48,13 @@ const preview: Preview = { colorMode={context.globals.colorMode} {...(context.componentId === 'theming-euiprovider' && context.args)} writingMode={context.globals.writingMode} + themeName={context.globals.theme} > ), ], - globalTypes: { ...euiProviderDecoratorGlobals }, + globalTypes: euiProviderDecoratorGlobals, parameters: { backgrounds: { disable: true }, // Use colorMode instead options: { diff --git a/packages/eui/changelogs/upcoming/8386.md b/packages/eui/changelogs/upcoming/8386.md new file mode 100644 index 00000000000..7a127c349d3 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8386.md @@ -0,0 +1,166 @@ +# eui-theme/borealis Changelog + +- Added new "Borealis" theme as `@elastic/eui-theme-borealis` package ([#8030](https://github.com/elastic/eui/pull/8030)) +- Updated the default `theme` value on `EuiProvider` to "Borealis" ([#8288](https://github.com/elastic/eui/pull/8288)) +- Added shared theme code as `@elastic/eui-theme-common` package ([#8030](https://github.com/elastic/eui/pull/8030)) +- Added new semantic color tokens on `euiTheme.colors` ([#8097](https://github.com/elastic/eui/pull/8097)) + - `textPrimary` + - `textAccent` + - `textAccentSecondary` + - `textSuccess` + - `textWarning` + - `textDanger` + - `textParagraph` + - `textHeading` + - `textSubdued` + - `textDisabled` + - `textInverse` + - `backgroundBasePrimary` + - `backgroundBaseAccent` + - `backgroundBaseAccentSecondary` + - `backgroundBaseSuccess` + - `backgroundBaseWarning` + - `backgroundBaseDanger` + - `backgroundBaseSubdued` + - `backgroundBasePlain` + - `backgroundBaseDisabled` + - `backgroundBaseHighlighted` + - `backgroundBaseFormsPrepend` + - `backgroundBaseFormsControlDisabled` + - `backgroundBaseInteractiveHover` + - `backgroundBaseInteractiveSelect` + - `backgroundBaseInteractiveOverlay` + - `backgroundBaseSkeletonEdge` + - `backgroundBaseSkeletonMiddle` + - `backgroundLightPrimary` + - `backgroundLightAccent` + - `backgroundLightAccentSecondary` + - `backgroundLightSuccess` + - `backgroundLightWarning` + - `backgroundLightDanger` + - `backgroundLightText` + - `backgroundFilledPrimary` + - `backgroundFilledAccent` + - `backgroundFilledAccentSecondary` + - `backgroundFilledSuccess` + - `backgroundFilledWarning` + - `backgroundFilledDanger` + - `backgroundFilledText` + - `borderBasePrimary` + - `borderBaseAccent` + - `borderBaseAccentSecondary` + - `borderBaseSuccess` + - `borderBaseWarning` + - `borderBaseDanger` + - `borderBasePlain` + - `borderBaseSubdued` + - `borderBaseDisabled` + - `borderBaseFloating` + - `borderBaseFormsColorSwatch` + - `borderBaseFormsControl` + - `borderStrongPrimary` + - `borderStrongAccent` + - `borderStrongAccentSecondary` + - `borderStrongSuccess` + - `borderStrongWarning` + - `borderStrongDanger` +- Added deprecation for non-semantic color tokens ([#8097](https://github.com/elastic/eui/pull/8097)) +- Added new component specific tokens on `euiTheme.components` ([#8097](https://github.com/elastic/eui/pull/8097)) + - added `components.buttons`, `components.forms` for shared tokens (e.g. `components.forms.maxWidth`) +- Added data vis color tokens on `euiTheme.colors.vis` ([#8112](https://github.com/elastic/eui/pull/8112)) + - `euiColorVis0` + - `euiColorVis1` + - `euiColorVis2` + - `euiColorVis3` + - `euiColorVis4` + - `euiColorVis5` + - `euiColorVis6` + - `euiColorVis7` + - `euiColorVis8` + - `euiColorVis9` + - `euiColorVisBehindText0` + - `euiColorVisBehindText1` + - `euiColorVisBehindText2` + - `euiColorVisBehindText3` + - `euiColorVisBehindText4` + - `euiColorVisBehindText5` + - `euiColorVisBehindText6` + - `euiColorVisBehindText7` + - `euiColorVisBehindText8` + - `euiColorVisBehindText9` + - `euiColorVisAsTextLight0` + - `euiColorVisAsTextLight1` + - `euiColorVisAsTextLight2` + - `euiColorVisAsTextLight3` + - `euiColorVisAsTextLight4` + - `euiColorVisAsTextLight5` + - `euiColorVisAsTextLight6` + - `euiColorVisAsTextDark0` + - `euiColorVisAsTextDark1` + - `euiColorVisAsTextDark2` + - `euiColorVisAsTextDark3` + - `euiColorVisAsTextDark4` + - `euiColorVisAsTextDark5` + - `euiColorVisAsTextDark6` + - `euiColorVisSuccess0` + - `euiColorVisSuccess1` + - `euiColorVisWarning0` + - `euiColorVisDanger0` + - `euiColorVisDanger1` + - `euiColorVisNeutral0` + - `euiColorVisGrey0` + - `euiColorVisGrey1` + - `euiColorVisGrey2` + - `euiColorVisGrey3` + - `euiColorVisWarm0` + - `euiColorVisWarm1` + - `euiColorVisWarm2` + - `euiColorVisCool0` + - `euiColorVisCool1` + - `euiColorVisCool2` + - `euiColorVisComplementary0` + - `euiColorVisComplementary1` +- Added severity colors to `euiTheme.colors.vis` ([#8247](https://github.com/elastic/eui/pull/8247)) + - `euiColorSeverity0` + - `euiColorSeverity1` + - `euiColorSeverity2` + - `euiColorSeverity3` + - `euiColorSeverity4` + - `euiColorSeverity5` + - `euiColorSeverity6` + - `euiColorSeverity7` + - `euiColorSeverity8` + - `euiColorSeverity9` + - `euiColorSeverity10` + - `euiColorSeverity11` + - `euiColorSeverity12` + - `euiColorSeverity13` + - `euiColorSeverity14` +- Updated color palette functions to support multiple themes by retrieving colors from the new `EuiVisColorStore` ([#8112](https://github.com/elastic/eui/pull/8112)) +- Added new semantic tokens to SCSS variables ([#8097](https://github.com/elastic/eui/pull/8097)) +- Added new semantic tokens to static JSON exports ([#8115](https://github.com/elastic/eui/pull/8115)) +- Updated mixin functions `euiBackgroundColor`, `euiBorderColor`, `euiButtonColor`, `euiButtonFilledColor` and `euiButtonEmptyColor` to return tokens ([#8097](https://github.com/elastic/eui/pull/8097)) +- Updated usages of `transparentize`, `shade` and `tint` with tokens ([#8097](https://github.com/elastic/eui/pull/8097)) +- Added hooks for color palette functions ([#8284](https://github.com/elastic/eui/pull/8284)) + - `useEuiPaletteColorBlind` + - `useEuiPaletteColorBlindBehindText` + - `useEuiPaletteForStatus` + - `useEuiPaletteForTemperature` + - `useEuiPaletteComplementary` + - `useEuiPaletteRed` + - `useEuiPaletteGreen` + - `useEuiPaletteCool` + - `useEuiPaletteWarm` + - `useEuiPaletteGray` +- Updated `EuiPopover`, `EuiToolTip`, `EuiTour` and `EuiRange` with shared popover arrow styles ([#8212](https://github.com/elastic/eui/)pull/8212) +- Updated border styles on `EuiPanel` to use pseudo element borders ([#8270](https://github.com/elastic/eui/pull/8270)) + +**Accessibility** + +- Updated colors of `EuiToken` to increase contrast ([#8250](https://github.com/elastic/eui/pull/8250)) +- Added background to hovered `EuiKeypadMenuItem` to increase visibility ([#8294](https://github.com/elastic/eui/pull/8294)) + +**Breaking changes** + +- Renamed `eui_theme_light.json` and `eui_theme_dark.json` to `eui_theme_amsterdam_light.json` and `eui_theme_amsterdam_dark.json` ([#8115](https://github.com/elastic/eui/pull/8115)) +- Removed `isDefaultTheme` ([#8288](https://github.com/elastic/eui/pull/8288)) diff --git a/packages/eui/generator-eui/component/templates/component.styles.ts b/packages/eui/generator-eui/component/templates/component.styles.ts index 41c0e4db9f2..85cc5a9466a 100644 --- a/packages/eui/generator-eui/component/templates/component.styles.ts +++ b/packages/eui/generator-eui/component/templates/component.styles.ts @@ -12,7 +12,7 @@ import { UseEuiTheme } from '../../services'; export const <%= cssClassName %>Styles = ({ euiTheme }: UseEuiTheme) => { return { <%= cssClassName %>: css` // Always start the object with the first key being the name of the component - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, }; }; \ No newline at end of file diff --git a/packages/eui/package.json b/packages/eui/package.json index 60a799471f9..8e7de031d5d 100644 --- a/packages/eui/package.json +++ b/packages/eui/package.json @@ -1,7 +1,7 @@ { "name": "@elastic/eui", "description": "Elastic UI Component Library", - "version": "99.4.0", + "version": "99.4.0-borealis.0", "license": "SEE LICENSE IN LICENSE.txt", "main": "lib", "module": "es", @@ -16,8 +16,9 @@ ], "scripts": { "start": "cross-env BABEL_MODULES=false webpack serve --config=src-docs/webpack.config.js", + "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-common run build && yarn workspaces foreach -Rti --from @elastic/eui --exclude @elastic/eui --exclude @elastic/eui-theme-common run build", "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js", - "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss", + "build": "node ./scripts/compile-i18n-strings.js && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss", "build-pack": "yarn build && npm pack", "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"", "compile-scss": "node ./scripts/compile-scss.js", @@ -30,7 +31,7 @@ "test": "yarn lint && yarn test-unit", "test-ci": "yarn test && yarn test-cypress", "test-unit": "node ./scripts/test-unit", - "test-staged": "yarn lint && node scripts/test-staged.js", + "test-staged": "yarn build:workspaces && yarn lint && node scripts/test-staged.js", "test-cypress": "node ./scripts/test-cypress", "test-cypress-dev": "yarn test-cypress --dev", "test-cypress-a11y": "yarn test-cypress --a11y", @@ -51,6 +52,7 @@ "url": "https://github.com/elastic/eui.git" }, "dependencies": { + "@elastic/eui-theme-common": "workspace:^", "@elastic/prismjs-esql": "^1.0.0", "@hello-pangea/dnd": "^16.6.0", "@types/lodash": "^4.14.202", @@ -104,6 +106,7 @@ "@cypress/webpack-dev-server": "^1.7.0", "@elastic/charts": "^64.1.0", "@elastic/datemath": "^5.0.3", + "@elastic/eui-theme-borealis": "workspace:^", "@emotion/babel-preset-css-prop": "^11.11.0", "@emotion/cache": "^11.11.0", "@emotion/css": "^11.11.0", @@ -255,6 +258,7 @@ }, "peerDependencies": { "@elastic/datemath": "^5.0.2", + "@elastic/eui-theme-borealis": "0.0.11", "@emotion/css": "11.x", "@emotion/react": "11.x", "@types/react": "^16.9 || ^17.0 || ^18.0", diff --git a/packages/eui/scripts/compile-i18n-strings.js b/packages/eui/scripts/compile-i18n-strings.js new file mode 100644 index 00000000000..f948577d2fd --- /dev/null +++ b/packages/eui/scripts/compile-i18n-strings.js @@ -0,0 +1,26 @@ +/* + * 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. + */ + +const { execSync } = require('child_process'); +const chalk = require('chalk'); +const yargs = require('yargs/yargs'); +const { hideBin } = require('yargs/helpers'); + +const { NODE_ENV } = process.env; + +const info = chalk.white; +const log = chalk.grey; + +if (NODE_ENV !== 'production') return; + +const command = 'yarn extract-i18n-strings'; + +console.log(log(command)); +execSync(command, { + stdio: 'inherit', +}); diff --git a/packages/eui/scripts/compile-scss.js b/packages/eui/scripts/compile-scss.js index 38e6a49ee48..f5be3ceaf32 100755 --- a/packages/eui/scripts/compile-scss.js +++ b/packages/eui/scripts/compile-scss.js @@ -11,10 +11,15 @@ async function compileScssFiles({ }) { // Copy static JSON Sass var files from src-docs/src/views/theme/_json to dist const jsonFilesToCopy = [ - 'eui_theme_dark.json', - 'eui_theme_light.json', - 'eui_theme_dark.json.d.ts', - 'eui_theme_light.json.d.ts', + 'eui_theme_amsterdam_dark.json', + 'eui_theme_amsterdam_light.json', + 'eui_theme_amsterdam_dark.json.d.ts', + 'eui_theme_amsterdam_light.json.d.ts', + /* TODO: temp files only, remove once imports from theme package work as expected */ + 'eui_theme_borealis_dark.json', + 'eui_theme_borealis_light.json', + 'eui_theme_borealis_dark.json.d.ts', + 'eui_theme_borealis_light.json.d.ts', ]; await Promise.all( jsonFilesToCopy.map((fileName) => { diff --git a/packages/eui/scripts/deploy/build_docs b/packages/eui/scripts/deploy/build_docs index ab1207b3337..8e700a97b0b 100755 --- a/packages/eui/scripts/deploy/build_docs +++ b/packages/eui/scripts/deploy/build_docs @@ -12,4 +12,4 @@ docker run \ --volume "$PWD":/app \ --workdir /app \ "$DOCKER_BASE_IMAGE" \ - bash -c 'yarn && yarn --cwd packages/eui build && yarn --cwd packages/eui build-docs && yarn --cwd packages/eui build-storybook' + bash -c 'yarn && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui build && yarn --cwd packages/eui build-docs && yarn --cwd packages/eui build-storybook' diff --git a/packages/eui/src-docs/src/components/guide_locale_selector/guide_locale_selector.js b/packages/eui/src-docs/src/components/guide_locale_selector/guide_locale_selector.js deleted file mode 100644 index 4b53fc35199..00000000000 --- a/packages/eui/src-docs/src/components/guide_locale_selector/guide_locale_selector.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import moment from 'moment'; -import { translateUsingPseudoLocale } from '../../../src/services/string/pseudo_locale_translator'; - -// For testing/demoing EuiDatePicker, process moment's `en` locale config into a babelfished version -const enConfig = moment.localeData('en')._config; -moment.defineLocale('en-xa', { - ...enConfig, - months: enConfig.months.map(translateUsingPseudoLocale), - monthsShort: enConfig.monthsShort.map(translateUsingPseudoLocale), - weekdays: enConfig.weekdays.map(translateUsingPseudoLocale), - weekdaysMin: enConfig.weekdaysMin.map(translateUsingPseudoLocale), - weekdaysShort: enConfig.weekdaysShort.map(translateUsingPseudoLocale), -}); -// Reset default moment locale after using `defineLocale` -moment.locale('en'); - -import { EuiSwitch, EuiToolTip } from '../../../../src/components'; - -export const GuideLocaleSelector = ({ selectedLocale, onToggleLocale }) => { - return ( - - - onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en') - } - /> - - ); -}; - -GuideLocaleSelector.propTypes = { - onToggleLocale: PropTypes.func.isRequired, - selectedLocale: PropTypes.string.isRequired, -}; diff --git a/packages/eui/src-docs/src/components/guide_locale_selector/index.js b/packages/eui/src-docs/src/components/guide_locale_selector/index.js deleted file mode 100644 index 7f4a4fbcfb4..00000000000 --- a/packages/eui/src-docs/src/components/guide_locale_selector/index.js +++ /dev/null @@ -1 +0,0 @@ -export { GuideLocaleSelector } from './guide_locale_selector'; diff --git a/packages/eui/src-docs/src/components/guide_page/_guide_page.scss b/packages/eui/src-docs/src/components/guide_page/_guide_page.scss index 9e45f31f4b7..824d3436456 100644 --- a/packages/eui/src-docs/src/components/guide_page/_guide_page.scss +++ b/packages/eui/src-docs/src/components/guide_page/_guide_page.scss @@ -28,11 +28,11 @@ } .euiSideNavItem--trunk > .euiSideNavItemButton .guideSideNav__item--inSearch .euiMark { - color: $euiColorPrimaryText; + color: $euiColorTextPrimary; } .guideSideNav__item--openSubTitle { - color: $euiTitleColor; + color: $euiColorTextHeading; } @include euiBreakpoint('xs', 's') { diff --git a/packages/eui/src-docs/src/components/guide_section/_guide_section.scss b/packages/eui/src-docs/src/components/guide_section/_guide_section.scss index a79016c6b04..c32e9570840 100644 --- a/packages/eui/src-docs/src/components/guide_section/_guide_section.scss +++ b/packages/eui/src-docs/src/components/guide_section/_guide_section.scss @@ -26,7 +26,7 @@ } .guideDemo__ghostBackground { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { color: $euiColorGhost; // Override EuiPanel specificity background: $euiColorDarkestShade !important; // stylelint-disable-line declaration-no-important diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx index bc9d4449b9d..ab49cad3b0b 100644 --- a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx +++ b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx @@ -1,78 +1,39 @@ /* eslint-disable no-restricted-globals */ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; -import { - EuiThemeProvider, - useEuiTheme, - useIsWithinBreakpoints, -} from '../../../../src/services'; -import { EUI_THEME, EUI_THEMES } from '../../../../src/themes'; +import { EuiThemeProvider, useEuiTheme } from '../../../../src/services'; +import { EUI_THEME } from '../../../../src/themes'; import { ThemeContext } from '../with_theme'; -// @ts-ignore Not TS -import { GuideLocaleSelector } from '../guide_locale_selector'; import { EuiPopover, EuiHorizontalRule, EuiButton, EuiContextMenuPanel, EuiContextMenuItem, + EuiSwitch, + EuiSwitchEvent, } from '../../../../src/components'; +import { AVAILABLE_THEMES } from '../with_theme/theme_context'; type GuideThemeSelectorProps = { - onToggleLocale: () => {}; + onToggleLocale: Function; selectedLocale: string; - context?: any; }; export const GuideThemeSelector: React.FunctionComponent< GuideThemeSelectorProps -> = ({ ...rest }) => { - return ( - - {(context) => } - - ); -}; - -const GuideThemeSelectorComponent: React.FunctionComponent< - GuideThemeSelectorProps -> = ({ context, onToggleLocale, selectedLocale }) => { - const isMobileSize = useIsWithinBreakpoints(['xs', 's']); - const [isPopoverOpen, setPopover] = useState(false); - - const onButtonClick = () => { - setPopover(!isPopoverOpen); - }; - - const closePopover = () => { - setPopover(false); - }; - - const systemColorMode = useEuiTheme().colorMode.toLowerCase(); +> = ({ onToggleLocale, selectedLocale }) => { + const context = useContext(ThemeContext); + const euiThemeContext = useEuiTheme(); + const colorMode = context.colorMode ?? euiThemeContext.colorMode; const currentTheme: EUI_THEME = - EUI_THEMES.find( - (theme) => theme.value === (context.theme ?? systemColorMode) - ) || EUI_THEMES[0]; + AVAILABLE_THEMES.find((theme) => theme.value === context.theme) || + AVAILABLE_THEMES[0]; - const getIconType = (value: EUI_THEME['value']) => { - return value === currentTheme.value ? 'check' : 'empty'; - }; - - const items = EUI_THEMES.map((theme) => { - return ( - { - closePopover(); - context.changeTheme(theme.value); - }} - > - {theme.text} - - ); - }); + const [isPopoverOpen, setPopover] = useState(false); + const onButtonClick = () => setPopover(!isPopoverOpen); + const closePopover = () => setPopover(false); const button = ( @@ -84,11 +45,28 @@ const GuideThemeSelectorComponent: React.FunctionComponent< minWidth={0} onClick={onButtonClick} > - {isMobileSize ? 'Theme' : currentTheme.text} + Theme ); + const toggles = [ + { + label: 'Dark mode', + checked: colorMode.toLowerCase() === 'dark', + onChange: (e: EuiSwitchEvent) => + context.setContext({ + colorMode: e.target.checked ? 'DARK' : 'LIGHT', + }), + }, + location.host.includes('803') && { + label: 'i18n testing', + checked: selectedLocale === 'en-xa', + onChange: (e: EuiSwitchEvent) => + onToggleLocale(e.target.checked ? 'en-xa' : 'en'), + }, + ]; + return ( - - {location.host.includes('803') && ( - <> - -
- { + return ( + { + context.setContext({ theme: theme.value }); + }} + > + {theme.text} + + ); + })} + /> + + {toggles.map((item) => + item ? ( +
({ padding: euiTheme.size.s })} + > +
- + ) : null )} ); diff --git a/packages/eui/src-docs/src/components/with_theme/index.ts b/packages/eui/src-docs/src/components/with_theme/index.ts index 46d6e96d7c1..7cc4f114627 100644 --- a/packages/eui/src-docs/src/components/with_theme/index.ts +++ b/packages/eui/src-docs/src/components/with_theme/index.ts @@ -1,2 +1,6 @@ -export { ThemeProvider, ThemeContext } from './theme_context'; +export { + ThemeProvider, + ThemeContext, + type ThemeContextType, +} from './theme_context'; export { LanguageSelector } from './language_selector'; diff --git a/packages/eui/src-docs/src/components/with_theme/language_selector.tsx b/packages/eui/src-docs/src/components/with_theme/language_selector.tsx index 45931a8d423..aea26bd226b 100644 --- a/packages/eui/src-docs/src/components/with_theme/language_selector.tsx +++ b/packages/eui/src-docs/src/components/with_theme/language_selector.tsx @@ -1,12 +1,6 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext } from 'react'; -import { - EuiButtonGroup, - EuiIcon, - EuiLink, - EuiText, - EuiTourStep, -} from '../../../../src/components'; +import { EuiButtonGroup } from '../../../../src/components'; import { ThemeContext, @@ -14,62 +8,28 @@ import { THEME_LANGUAGES, } from './theme_context'; -const NOTIF_STORAGE_KEY = 'js_vs_sass_notification'; -const NOTIF_STORAGE_VALUE = 'dismissed'; - export const LanguageSelector = ({ onChange, - showTour = false, }: { onChange?: (id: string) => void; - showTour?: boolean; }) => { const themeContext = useContext(ThemeContext); const toggleIdSelected = themeContext.themeLanguage; const onLanguageChange = (optionId: string) => { - themeContext.changeThemeLanguage(optionId as THEME_LANGUAGES['id']); + themeContext.setContext({ + themeLanguage: optionId as THEME_LANGUAGES['id'], + }); onChange?.(optionId); - setTourIsOpen(false); - localStorage.setItem(NOTIF_STORAGE_KEY, NOTIF_STORAGE_VALUE); - }; - - const [isTourOpen, setTourIsOpen] = useState( - localStorage.getItem(NOTIF_STORAGE_KEY) === NOTIF_STORAGE_VALUE - ? false - : showTour - ); - - const onTourDismiss = () => { - setTourIsOpen(false); - localStorage.setItem(NOTIF_STORAGE_KEY, NOTIF_STORAGE_VALUE); }; return ( - -

Select your preferred styling language with this toggle button.

- - } - isStepOpen={isTourOpen} - onFinish={onTourDismiss} - step={1} - stepsTotal={1} - title={ - <> -   Theming update - - } - footerAction={Got it!} - > - onLanguageChange(id)} - /> - + onLanguageChange(id)} + /> ); }; diff --git a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx index f0fc4688557..bbce9b95b29 100644 --- a/packages/eui/src-docs/src/components/with_theme/theme_context.tsx +++ b/packages/eui/src-docs/src/components/with_theme/theme_context.tsx @@ -1,17 +1,66 @@ import React, { PropsWithChildren } from 'react'; -import { EUI_THEMES, EUI_THEME } from '../../../../src/themes'; +import { + EUI_THEME_BOREALIS_KEY, + EuiThemeBorealis, +} from '@elastic/eui-theme-borealis'; + +import { + EUI_THEME, + AMSTERDAM_NAME_KEY, + EuiThemeAmsterdam, +} from '../../../../src/themes'; +import { EuiThemeColorModeStandard } from '../../../../src/services'; // @ts-ignore importing from a JS file -import { applyTheme } from '../../services'; +import { applyTheme, registerTheme } from '../../services'; + +// @ts-ignore Sass +import amsterdamThemeLight from '../../theme_light.scss'; +// @ts-ignore Sass +import amsterdamThemeDark from '../../theme_dark.scss'; + +// @ts-ignore Sass +import borealisThemeLight from '../../theme_borealis_light.scss'; +// @ts-ignore Sass +import borealisThemeDark from '../../theme_borealis_dark.scss'; + +const THEME_CSS_MAP = { + [AMSTERDAM_NAME_KEY]: { + LIGHT: amsterdamThemeLight, + DARK: amsterdamThemeDark, + }, + [EUI_THEME_BOREALIS_KEY]: { + LIGHT: borealisThemeLight, + DARK: borealisThemeDark, + }, +}; -const STYLE_STORAGE_KEY = 'js_vs_sass_preference'; -const URL_PARAM_KEY = 'themeLanguage'; +export const AVAILABLE_THEMES = [ + { + text: 'Borealis', + value: EuiThemeBorealis.key, + provider: EuiThemeBorealis, + }, + { + text: 'Amsterdam', + value: AMSTERDAM_NAME_KEY, + provider: EuiThemeAmsterdam, + }, +]; +const THEME_NAMES = AVAILABLE_THEMES.map(({ value }) => value); + +AVAILABLE_THEMES.forEach((theme) => { + registerTheme( + theme.value, + THEME_CSS_MAP[theme.value as keyof typeof THEME_CSS_MAP] + ); +}); +const URL_PARAM_KEY = 'themeLanguage'; export type THEME_LANGUAGES = { id: 'language--js' | 'language--sass'; label: string; title: string; }; - export const theme_languages: THEME_LANGUAGES[] = [ { id: 'language--js', @@ -24,47 +73,90 @@ export const theme_languages: THEME_LANGUAGES[] = [ title: 'Language selector: Sass', }, ]; - -const THEME_NAMES = EUI_THEMES.map(({ value }) => value); const THEME_LANGS = theme_languages.map(({ id }) => id); -type ThemeContextType = { - theme?: EUI_THEME['value']; - changeTheme: (themeValue: EUI_THEME['value']) => void; +export type ThemeContextType = { + theme: EUI_THEME['value']; + colorMode: EuiThemeColorModeStandard; themeLanguage: THEME_LANGUAGES['id']; - changeThemeLanguage: (language: THEME_LANGUAGES['id']) => void; + setContext: (context: Partial) => void; }; export const ThemeContext = React.createContext({ - theme: undefined, - changeTheme: () => {}, + theme: THEME_NAMES[0], + colorMode: 'LIGHT', themeLanguage: THEME_LANGS[0], - changeThemeLanguage: () => {}, + setContext: () => {}, }); -type State = Pick; +type State = Pick; + +const localStorageKeyToStateMap = { + themeName: 'theme', + colorMode: 'colorMode', + themeLanguage: 'themeLanguage', +} as const; + +type LocalStorageKey = keyof typeof localStorageKeyToStateMap; export class ThemeProvider extends React.Component { constructor(props: object) { super(props); - const theme = localStorage.getItem('theme') || undefined; - applyTheme(theme && THEME_NAMES.includes(theme) ? theme : THEME_NAMES[0]); + const theme = localStorage.getItem('themeName') || THEME_NAMES[0]; + const colorMode = + (localStorage.getItem('colorMode') as EuiThemeColorModeStandard) || + 'LIGHT'; + + applyTheme( + theme && THEME_NAMES.includes(theme) ? theme : THEME_NAMES[0], + colorMode + ); const themeLanguage = this.getThemeLanguage(); this.state = { theme, + colorMode, themeLanguage, }; + + Object.keys(localStorageKeyToStateMap).forEach((key) => + this.updateLocalStorage(key as LocalStorageKey, this.state) + ); } - changeTheme = (themeValue: EUI_THEME['value']) => { - this.setState({ theme: themeValue }, () => { - localStorage.setItem('theme', themeValue); - applyTheme(themeValue); + setContext = (state: Partial) => { + this.setState((prevState) => { + return { ...prevState, ...state }; }); }; + updateLocalStorage = (key: LocalStorageKey, state: State) => { + localStorage.setItem(key, String(state[localStorageKeyToStateMap[key]])); + }; + + componentDidUpdate(_prevProps: never, prevState: State) { + Object.keys(localStorageKeyToStateMap).forEach((key) => { + const _key = key as LocalStorageKey; + const stateKey = localStorageKeyToStateMap[_key]; + + if ( + prevState[stateKey] !== this.state[stateKey] || + localStorage.getItem(_key) === null + ) { + this.updateLocalStorage(_key, this.state); + + // Side effects + if (_key === 'themeName' || _key === 'colorMode') { + applyTheme(this.state.theme, this.state.colorMode); + } + if (_key === 'themeLanguage') { + this.setThemeLanguageParam(this.state.themeLanguage!); + } + } + }); + } + getThemeLanguage = () => { // Allow theme language to be set by URL param, so we can link people // to specific docs, e.g. ?themeLanguage=js, ?themeLanguage=sass @@ -72,7 +164,7 @@ export class ThemeProvider extends React.Component { const urlParams = window?.location?.href?.split('?')[1]; // Note: we can't use location.search because of our hash router const fromUrlParam = new URLSearchParams(urlParams).get(URL_PARAM_KEY); // Otherwise, obtain it from localStorage - const fromLocalStorage = localStorage.getItem(STYLE_STORAGE_KEY); + const fromLocalStorage = localStorage.getItem(URL_PARAM_KEY); let themeLanguage = ( fromUrlParam ? `language--${fromUrlParam}` : fromLocalStorage @@ -96,23 +188,16 @@ export class ThemeProvider extends React.Component { window.location.hash = `${hash[0]}?${params.toString()}`; }; - changeThemeLanguage = (language: THEME_LANGUAGES['id']) => { - this.setState({ themeLanguage: language }, () => { - localStorage.setItem(STYLE_STORAGE_KEY, language); - this.setThemeLanguageParam(language); - }); - }; - render() { const { children } = this.props; - const { theme, themeLanguage } = this.state; + const { theme, colorMode, themeLanguage } = this.state; return ( {children} diff --git a/packages/eui/src-docs/src/index.js b/packages/eui/src-docs/src/index.js index a69a07e3613..7132f648180 100644 --- a/packages/eui/src-docs/src/index.js +++ b/packages/eui/src-docs/src/index.js @@ -10,16 +10,11 @@ import { AppContext } from './views/app_context'; import { AppView } from './views/app_view'; import { HomeView } from './views/home/home_view'; import { NotFoundView } from './views/not_found/not_found_view'; -import { registerTheme, ExampleContext } from './services'; +import { ExampleContext } from './services'; import Routes from './routes'; -import themeLight from './theme_light.scss'; -import themeDark from './theme_dark.scss'; import { ThemeProvider } from './components/with_theme/theme_context'; -registerTheme('light', [themeLight]); -registerTheme('dark', [themeDark]); - // Set up app // Whether the docs app should be wrapped in diff --git a/packages/eui/src-docs/src/services/theme/theme.js b/packages/eui/src-docs/src/services/theme/theme.js index a3bbf6030c2..5f28eed39ff 100644 --- a/packages/eui/src-docs/src/services/theme/theme.js +++ b/packages/eui/src-docs/src/services/theme/theme.js @@ -4,9 +4,16 @@ export function registerTheme(theme, cssFiles) { themes[theme] = cssFiles; } -export function applyTheme(newTheme) { +export function applyTheme(newTheme, colorMode = 'LIGHT') { Object.keys(themes).forEach((theme) => - themes[theme].forEach((cssFile) => cssFile.unuse()) + Object.values(themes[theme]).forEach((cssFile) => cssFile.unuse()) ); - themes[newTheme]?.forEach((cssFile) => cssFile.use()); + + themes[newTheme]?.[colorMode]?.use(); + + if (newTheme.toLowerCase().includes('borealis')) { + document?.body.classList.add('euiTheme--borealis'); + } else { + document?.body.classList.remove('euiTheme--borealis'); + } } diff --git a/packages/eui/src-docs/src/theme_borealis_dark.scss b/packages/eui/src-docs/src/theme_borealis_dark.scss new file mode 100644 index 00000000000..7c76c518a04 --- /dev/null +++ b/packages/eui/src-docs/src/theme_borealis_dark.scss @@ -0,0 +1,7 @@ +@import 'node_modules/@elastic/eui-theme-borealis/src/theme_dark'; +@import './components/index'; +@import './services/playground/index'; +@import './views/index'; + +// Elastic charts +@import '~@elastic/charts/dist/theme'; diff --git a/packages/eui/src-docs/src/theme_borealis_light.scss b/packages/eui/src-docs/src/theme_borealis_light.scss new file mode 100644 index 00000000000..1bee3ff7412 --- /dev/null +++ b/packages/eui/src-docs/src/theme_borealis_light.scss @@ -0,0 +1,7 @@ +@import 'node_modules/@elastic/eui-theme-borealis/src/theme_light'; +@import './components/index'; +@import './services/playground/index'; +@import './views/index'; + +// Elastic charts +@import '~@elastic/charts/dist/theme'; diff --git a/packages/eui/src-docs/src/views/app_context.js b/packages/eui/src-docs/src/views/app_context.js index 729f4c94079..0e0bd6ae658 100644 --- a/packages/eui/src-docs/src/views/app_context.js +++ b/packages/eui/src-docs/src/views/app_context.js @@ -11,7 +11,7 @@ import { setEuiDevProviderWarning, euiStylisPrefixer, } from '../../../src/services'; -import { EUI_THEMES } from '../../../src/themes'; +import { AVAILABLE_THEMES } from '../components/with_theme/theme_context'; import favicon16Prod from '../images/favicon/prod/favicon-16x16.png'; import favicon32Prod from '../images/favicon/prod/favicon-32x32.png'; @@ -33,7 +33,7 @@ const utilityCache = createCache({ }); export const AppContext = ({ children }) => { - const { theme } = useContext(ThemeContext); + const { theme, colorMode } = useContext(ThemeContext); const locale = useSelector((state) => getLocale(state)); const mappingFuncs = { @@ -55,10 +55,8 @@ export const AppContext = ({ children }) => { default: generalEmotionCache, utility: utilityCache, }} - theme={EUI_THEMES.find((t) => t.value === theme)?.provider} - colorMode={ - theme ? (theme.includes('light') ? 'light' : 'dark') : undefined - } + theme={AVAILABLE_THEMES.find((t) => t.value === theme)?.provider} + colorMode={colorMode} > [ { title: 'Max 10 colors', palette: euiPaletteColorBlind(), @@ -44,63 +46,82 @@ const customPalettes = [ }, ]; -export default () => ( - - {customPalettes.map((palette) => ( - - -

{palette.title}

- - - - - - {palette.palette.map((hexCode) => ( - - ))} - - - - - - - - - ))} - -

Behind text variant

- - - - - - {euiPaletteColorBlindBehindText({ sortBy: 'natural' }).map( - (color, i) => ( - - - Text - - - ) - )} - - - - - - - -); +export default () => { + const [customPalettes, setCustomPalettes] = useState(getCustomPalettes); + + const handleVisColorThemeChange = () => { + setCustomPalettes(getCustomPalettes); + }; + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + handleVisColorThemeChange + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); + + return ( + + {customPalettes.map((palette) => ( + + +

{palette.title}

+ + + + + + {palette.palette.map((hexCode) => ( + + ))} + + + + + + + + + ))} + +

Behind text variant

+ + + + + + {euiPaletteColorBlindBehindText({ sortBy: 'natural' }).map( + (color, i) => ( + + + Text + + + ) + )} + + + + + + + + ); +}; diff --git a/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js b/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js index 3adf5608ce2..0e3ed2215eb 100644 --- a/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js +++ b/packages/eui/src-docs/src/views/color_palette/color_palette_custom.js @@ -8,18 +8,23 @@ import { EuiSpacer, } from '../../../../src/components'; -import { euiPaletteColorBlind, colorPalette } from '../../../../src/services'; +import { + colorPalette, + useEuiPaletteColorBlind, +} from '../../../../src/services'; import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared'; -const customPalettes = [ - [euiPaletteColorBlind()[3]], - [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], - [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], -]; - export default () => { const [length, setLength] = useState(10); + const euiPaletteColorBlind = useEuiPaletteColorBlind(); + + const customPalettes = [ + [euiPaletteColorBlind[3]], + [euiPaletteColorBlind[3], euiPaletteColorBlind[4]], + [euiPaletteColorBlind[3], euiPaletteColorBlind[4]], + ]; + const onLengthChange = (e) => { setLength(e.currentTarget.value); }; diff --git a/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js b/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js index ae5cbdbf513..38e9de17da8 100644 --- a/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js +++ b/packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js @@ -1,4 +1,5 @@ -import React, { Fragment, useState } from 'react'; +import React, { Fragment, useEffect, useMemo, useState } from 'react'; +import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; import { EuiFlexGroup, @@ -19,8 +20,10 @@ import { euiPaletteRed, euiPaletteGreen, euiPaletteGray, + EUI_VIS_COLOR_STORE, } from '../../../../src/services'; -const paletteData = { + +const getPaletteData = () => ({ euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, @@ -29,16 +32,33 @@ const paletteData = { euiPaletteCool, euiPaletteWarm, euiPaletteGray, -}; -const paletteNames = Object.keys(paletteData); +}); export default () => { + const [paletteData, setPaletteData] = useState(getPaletteData); const [length, setLength] = useState(5); + const paletteNames = useMemo(() => Object.keys(paletteData), [paletteData]); + const onLengthChange = (e) => { setLength(e.currentTarget.value); }; + const handleVisColorThemeChange = () => { + setPaletteData(getPaletteData); + }; + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + handleVisColorThemeChange + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); + return ( diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js b/packages/eui/src-docs/src/views/color_picker/color_palette_display.js index 4c56ee61d00..cbf7fd37a4c 100644 --- a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js +++ b/packages/eui/src-docs/src/views/color_picker/color_palette_display.js @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; +import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; import { - euiPaletteColorBlind, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, @@ -9,6 +9,8 @@ import { euiPaletteCool, euiPaletteWarm, euiPaletteGray, + EUI_VIS_COLOR_STORE, + useEuiPaletteColorBlind, } from '../../../../src/services/color'; import { @@ -67,11 +69,42 @@ const sizes = [ export default () => { const [palette, setPalette] = useState('1'); + const [categories, setCategories] = useState(5); const [selectionType, setSelectionType] = useState(true); const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [size, setSize] = useState(sizes[1].value); + const euiPaletteColorBlind = useEuiPaletteColorBlind(); + + const getPalettes = useCallback( + () => + paletteNames.map((paletteName, index) => { + return { + value: String(index + 1), + title: paletteName, + palette: paletteData[paletteNames[index]](categories), + type: selectionType ? 'fixed' : 'gradient', + }; + }), + [categories, selectionType] + ); + + const [palettes, setPalettes] = useState(getPalettes()); + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, [getPalettes]); + const onChangeSize = (e) => { setSize(e.target.value); }; @@ -80,15 +113,6 @@ export default () => { setCategories(parseInt(e.target.value)); }; - const palettes = paletteNames.map((paletteName, index) => { - return { - value: String(index + 1), - title: paletteName, - palette: paletteData[paletteNames[index]](categories), - type: selectionType ? 'fixed' : 'gradient', - }; - }); - const selectedPalette = paletteData[paletteNames[palette - 1]](categories); const onButtonClick = () => @@ -113,16 +137,13 @@ export default () => {

Fixed

- +

Gradient

 - +

Fixed with stops

diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js b/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js index ade6337ff1d..8137cf5b16c 100644 --- a/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js +++ b/packages/eui/src-docs/src/views/color_picker/color_palette_picker.js @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { css } from '@emotion/react'; - +import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; import { + EUI_VIS_COLOR_STORE, euiPaletteColorBlind, euiPaletteForStatus, euiPaletteForTemperature, @@ -33,28 +34,28 @@ const AppendedTitleText = ({ label }) => ( const getPalettes = (appendTitles) => [ { - value: 'pallette_1', + value: 'palette_1', title: 'EUI color blind', palette: euiPaletteColorBlind(), append: appendTitles && , type: 'fixed', }, { - value: 'pallette_2', + value: 'palette_2', title: 'EUI palette for status', palette: euiPaletteForStatus(5), append: appendTitles && , type: 'gradient', }, { - value: 'pallette_3', + value: 'palette_3', title: 'EUI palette for temperature', palette: euiPaletteForTemperature(5), append: appendTitles && , type: 'fixed', }, { - value: 'pallette_4', + value: 'palette_4', title: 'Grayscale', palette: [ { @@ -111,7 +112,25 @@ const getPalettes = (appendTitles) => [ export default () => { const [selectionDisplay, setSelectionDisplay] = useState(false); const [showAppendedTitles, setShowAppendedTitles] = useState(false); - const [pallette, setPallette] = useState('pallette_1'); + const [palettes, setPalettes] = useState(getPalettes(showAppendedTitles)); + const [selectedPalette, setSelectedPalette] = useState('palette_1'); + + useEffect(() => { + setPalettes(getPalettes(showAppendedTitles)); + }, [showAppendedTitles]); + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); return ( <> @@ -138,9 +157,9 @@ export default () => { diff --git a/packages/eui/src-docs/src/views/combo_box/colors.js b/packages/eui/src-docs/src/views/combo_box/colors.js index 21fe1e29277..e23c31aa738 100644 --- a/packages/eui/src-docs/src/views/combo_box/colors.js +++ b/packages/eui/src-docs/src/views/combo_box/colors.js @@ -1,11 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { EuiComboBox } from '../../../../src/components'; -import { euiPaletteColorBlindBehindText } from '../../../../src/services'; +import { useEuiPaletteColorBlindBehindText } from '../../../../src/services'; import { DisplayToggles } from '../form_controls/display_toggles'; -const visColorsBehindText = euiPaletteColorBlindBehindText(); -const optionsStatic = [ +const getOptionsStatic = (visColorsBehindText) => [ { label: 'Titan', 'data-test-subj': 'titanOption', @@ -51,9 +50,17 @@ const optionsStatic = [ ]; export default () => { - const [options, setOptions] = useState(optionsStatic); + const visColorsBehindText = useEuiPaletteColorBlindBehindText(); + + const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText)); const [selectedOptions, setSelected] = useState([options[2], options[5]]); + useEffect(() => { + const updatedOptions = getOptionsStatic(visColorsBehindText); + setOptions(updatedOptions); + setSelected([updatedOptions[2], updatedOptions[5]]); + }, [visColorsBehindText]); + const onChange = (selectedOptions) => { setSelected(selectedOptions); }; diff --git a/packages/eui/src-docs/src/views/combo_box/render_option.js b/packages/eui/src-docs/src/views/combo_box/render_option.js index 7f53e0554b5..8a6602cf848 100644 --- a/packages/eui/src-docs/src/views/combo_box/render_option.js +++ b/packages/eui/src-docs/src/views/combo_box/render_option.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { EuiComboBox, @@ -6,13 +6,11 @@ import { EuiHealth, } from '../../../../src/components'; import { - euiPaletteColorBlind, - euiPaletteColorBlindBehindText, + useEuiPaletteColorBlind, + useEuiPaletteColorBlindBehindText, } from '../../../../src/services'; -const visColors = euiPaletteColorBlind(); -const visColorsBehindText = euiPaletteColorBlindBehindText(); -const optionsStatic = [ +const getOptionsStatic = (visColorsBehindText) => [ { value: { size: 5, @@ -88,9 +86,18 @@ const optionsStatic = [ ]; export default () => { - const [options, setOptions] = useState(optionsStatic); + const visColors = useEuiPaletteColorBlind(); + const visColorsBehindText = useEuiPaletteColorBlindBehindText(); + + const [options, setOptions] = useState(getOptionsStatic(visColorsBehindText)); const [selectedOptions, setSelected] = useState([options[2], options[5]]); + useEffect(() => { + const updatedOptions = getOptionsStatic(visColorsBehindText); + setOptions(updatedOptions); + setSelected([updatedOptions[2], updatedOptions[5]]); + }, [visColorsBehindText]); + const onChange = (selectedOptions) => { setSelected(selectedOptions); }; diff --git a/packages/eui/src-docs/src/views/comment/comment_props.tsx b/packages/eui/src-docs/src/views/comment/comment_props.tsx index d81a6c725ce..0a8514b35f0 100644 --- a/packages/eui/src-docs/src/views/comment/comment_props.tsx +++ b/packages/eui/src-docs/src/views/comment/comment_props.tsx @@ -93,7 +93,7 @@ export default ({ snippet }: { snippet: ReactNode }) => { diff --git a/packages/eui/src-docs/src/views/datagrid/_datagrid.scss b/packages/eui/src-docs/src/views/datagrid/_datagrid.scss index 0638086e908..ecf3b822e85 100644 --- a/packages/eui/src-docs/src/views/datagrid/_datagrid.scss +++ b/packages/eui/src-docs/src/views/datagrid/_datagrid.scss @@ -23,3 +23,7 @@ .euiDataGridRow--rowClassesDemoSelected { background: $euiColorHighlight; } + +.euiTheme--borealis .euiDataGridRow--rowClassesDemoSelected { + background: $euiColorBackgroundBaseInteractiveSelect; +} diff --git a/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx b/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx index 7dcb18e0eaa..3daf7994c9f 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/pie_alts.tsx @@ -18,10 +18,10 @@ import { } from '../../../../src/components'; import { - euiPaletteForTemperature, - euiPaletteColorBlind, - euiPaletteGray, useEuiTheme, + useEuiPaletteColorBlind, + useEuiPaletteForTemperature, + useEuiPaletteGray, } from '../../../../src/services'; import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from './data'; @@ -40,15 +40,16 @@ export default () => { const [formattedData, setFormattedData] = useState(false); const [grouped, setGrouped] = useState(false); - let color = euiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( + const paletteTemperature0 = useEuiPaletteForTemperature(0); + const paletteTemperature3 = useEuiPaletteForTemperature(3); + const paletteGray = useEuiPaletteGray(5); + + let color = useEuiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( 18, 20 ); if (formatted) { - color = [ - euiPaletteForTemperature(0)[0], - euiPaletteGray(5)[isDarkTheme ? 4 : 0], - ]; + color = [paletteTemperature0[0], paletteGray[isDarkTheme ? 4 : 0]]; } let data; @@ -58,7 +59,7 @@ export default () => { ? orderBy(DAYS_OF_RAIN, ['precipitation', 'days'], ['desc', 'asc']) : DAYS_OF_RAIN; usesRainData = true; - color = euiPaletteForTemperature(3); + color = paletteTemperature3; } else { const DATASET = grouped ? GITHUB_DATASET_MOD : GITHUB_DATASET; data = orderBy(DATASET, 'issueType', 'asc'); diff --git a/packages/eui/src-docs/src/views/elastic_charts/theming.tsx b/packages/eui/src-docs/src/views/elastic_charts/theming.tsx index 1e696b4362a..fc06267e72f 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/theming.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/theming.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { Chart, @@ -8,6 +8,7 @@ import { BarSeries, DataGenerator, } from '@elastic/charts'; +import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; import { EuiSpacer, @@ -26,10 +27,11 @@ import { euiPaletteRed, euiPaletteGreen, euiPaletteGray, + EUI_VIS_COLOR_STORE, } from '../../../../src/services'; import { useChartBaseTheme } from './utils/use_chart_base_theme'; -const paletteData = { +const getPaletteData = () => ({ euiPaletteColorBlind, euiPaletteForStatus, euiPaletteForTemperature, @@ -39,25 +41,46 @@ const paletteData = { euiPaletteCool, euiPaletteWarm, euiPaletteGray, -}; - -const palettes = Object.entries(paletteData).map(([paletteName, palette]) => { - return { - value: paletteName, - title: paletteName, - palette: - palette === euiPaletteColorBlind - ? euiPaletteColorBlind({ sortBy: 'natural' }) - : palette(10), - type: 'fixed' as const, - }; }); +const getPalettes = () => + Object.entries(getPaletteData()).map(([paletteName, palette]) => { + return { + value: paletteName, + title: paletteName, + palette: + palette === euiPaletteColorBlind + ? euiPaletteColorBlind({ sortBy: 'natural' }) + : palette(10), + type: 'fixed' as const, + }; + }); + export default () => { const chartBaseTheme = useChartBaseTheme(); + const [palettes, setPalettes] = useState(getPalettes()); const [barPalette, setBarPalette] = useState('euiPaletteColorBlind'); + const paletteData = useMemo( + () => getPaletteData(), + // eslint-disable-next-line react-hooks/exhaustive-deps + [palettes] + ); + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); + /** * Create data */ diff --git a/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx b/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx index 6b4932d54a9..ba47cfe10f2 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/theming_categorical.tsx @@ -18,17 +18,18 @@ import { import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared'; import { - euiPaletteColorBlind, euiPaletteGreen, euiPaletteForStatus, euiPaletteGray, + useEuiPaletteColorBlind, } from '../../../../src/services'; import type { EuiPalette } from '../../../../src/services/color/eui_palettes'; import { useChartBaseTheme } from './utils/use_chart_base_theme'; export default () => { + const euiPaletteColorBlind = useEuiPaletteColorBlind(); const chartBaseTheme = useChartBaseTheme(); - const highlightColor = euiPaletteColorBlind()[2]; + const highlightColor = euiPaletteColorBlind[2]; const idPrefix = 'colorType'; @@ -246,7 +247,7 @@ export default () => { data={data} xAccessor={'x'} yAccessors={['y']} - color={[euiPaletteColorBlind()[index < 2 ? 0 : 1]]} + color={[euiPaletteColorBlind[index < 2 ? 0 : 1]]} lineSeriesStyle={{ line: { strokeWidth: isOdd ? 1 : 6, diff --git a/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx b/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx index 91b9732541a..24cab77b385 100644 --- a/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx +++ b/packages/eui/src-docs/src/views/elastic_charts/treemap.tsx @@ -8,7 +8,7 @@ import { EuiTitle, EuiSpacer, } from '../../../../src/components'; -import { euiPaletteColorBlind } from '../../../../src/services'; +import { useEuiPaletteColorBlind } from '../../../../src/services'; import { GITHUB_DATASET_MOD } from './data'; import { useChartBaseTheme } from './utils/use_chart_base_theme'; @@ -20,7 +20,7 @@ export default () => { /** * Create a 3 rotation palette (one for each level) */ - const groupedPalette = euiPaletteColorBlind({ + const groupedPalette = useEuiPaletteColorBlind({ rotations: 3, order: 'group', sortBy: 'natural', diff --git a/packages/eui/src-docs/src/views/facet/facet_layout.js b/packages/eui/src-docs/src/views/facet/facet_layout.js index 95fc6afb02c..8a86ea0223a 100644 --- a/packages/eui/src-docs/src/views/facet/facet_layout.js +++ b/packages/eui/src-docs/src/views/facet/facet_layout.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; +import { useEuiPaletteColorBlind } from '../../../../src/services'; import { EuiFacetButton, EuiFacetGroup, @@ -7,8 +8,6 @@ import { EuiAvatar, } from '../../../../src/components'; -import { euiPaletteColorBlind } from '../../../../src/services'; - export default () => { const [icon, setIcon] = useState(false); const [disabled, setDisabled] = useState(false); @@ -16,6 +15,8 @@ export default () => { const [loading, setLoading] = useState(false); const [selectedOptionId, setSelectedOptionId] = useState(undefined); + const euiPaletteColorBlind = useEuiPaletteColorBlind(); + const facet0Clicked = (id) => { setIcon(false); setDisabled(false); @@ -65,42 +66,42 @@ export default () => { id: 'facet0', label: 'Simple, no icon', quantity: 6, - iconColor: euiPaletteColorBlind()[0], + iconColor: euiPaletteColorBlind[0], onClick: facet0Clicked, }, { id: 'facet1', label: 'Label or color indicator', quantity: 60, - iconColor: euiPaletteColorBlind()[1], + iconColor: euiPaletteColorBlind[1], onClick: facet1Clicked, }, { id: 'facet2', label: 'Disable all others', quantity: 600, - iconColor: euiPaletteColorBlind()[2], + iconColor: euiPaletteColorBlind[2], onClick: facet2Clicked, }, { id: 'facet3', label: 'Avatars instead of icons', quantity: 60, - iconColor: euiPaletteColorBlind()[3], + iconColor: euiPaletteColorBlind[3], onClick: facet3Clicked, }, { id: 'facet4', label: 'Show all as loading', quantity: 6, - iconColor: euiPaletteColorBlind()[4], + iconColor: euiPaletteColorBlind[4], onClick: facet4Clicked, }, { id: 'facet5', label: 'Just here to show truncation of really long labels', quantity: 0, - iconColor: euiPaletteColorBlind()[5], + iconColor: euiPaletteColorBlind[5], }, ]; diff --git a/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js b/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js index 5925855e719..911c803640c 100644 --- a/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js +++ b/packages/eui/src-docs/src/views/facet/facet_layout_horizontal.js @@ -7,7 +7,7 @@ import { EuiAvatar, } from '../../../../src/components'; -import { euiPaletteColorBlind } from '../../../../src/services'; +import { useEuiPaletteColorBlind } from '../../../../src/services'; export default () => { const [icon, setIcon] = useState(false); @@ -16,6 +16,8 @@ export default () => { const [loading, setLoading] = useState(false); const [selectedOptionId, setSelectedOptionId] = useState(undefined); + const euiPaletteColorBlind = useEuiPaletteColorBlind(); + const facet0Clicked = (id) => { setIcon(false); setDisabled(false); @@ -65,42 +67,42 @@ export default () => { id: 'facetHorizontal0', label: 'Simple, no icon', quantity: 6, - iconColor: euiPaletteColorBlind()[0], + iconColor: euiPaletteColorBlind[0], onClick: facet0Clicked, }, { id: 'facetHorizontal1', label: 'Label or color indicator', quantity: 60, - iconColor: euiPaletteColorBlind()[1], + iconColor: euiPaletteColorBlind[1], onClick: facet1Clicked, }, { id: 'facetHorizontal2', label: 'Disable all others', quantity: 600, - iconColor: euiPaletteColorBlind()[2], + iconColor: euiPaletteColorBlind[2], onClick: facet2Clicked, }, { id: 'facetHorizontal3', label: 'Avatars instead of icons', quantity: 60, - iconColor: euiPaletteColorBlind()[3], + iconColor: euiPaletteColorBlind[3], onClick: facet3Clicked, }, { id: 'facetHorizontal4', label: 'Show all as loading', quantity: 6, - iconColor: euiPaletteColorBlind()[4], + iconColor: euiPaletteColorBlind[4], onClick: facet4Clicked, }, { id: 'facetHorizontal5', label: 'Just here to show truncation of really long labels', quantity: 0, - iconColor: euiPaletteColorBlind()[5], + iconColor: euiPaletteColorBlind[5], }, ]; diff --git a/packages/eui/src-docs/src/views/guidelines/_index.scss b/packages/eui/src-docs/src/views/guidelines/_index.scss index 96895733917..081b8513088 100644 --- a/packages/eui/src-docs/src/views/guidelines/_index.scss +++ b/packages/eui/src-docs/src/views/guidelines/_index.scss @@ -227,7 +227,18 @@ } .guideSass__euiColorWarningText { - color: $euiColorWarningText; + color: $euiColorTextWarning; +} + +.guideSass__euiColorBackgroundFilledWarning { + padding: $euiSizeS; + color: $euiColorInk; + background: $euiColorBackgroundFilledWarning; +} + +.guideSass__euiColorBorderBaseWarning { + padding: $euiSizeS; + border: $euiBorderWidthThin solid $euiColorBorderBaseWarning; } .guideSass__tintMediumShade { diff --git a/packages/eui/src-docs/src/views/home/_home.scss b/packages/eui/src-docs/src/views/home/_home.scss index 4a11f02551f..241cae3a4e6 100644 --- a/packages/eui/src-docs/src/views/home/_home.scss +++ b/packages/eui/src-docs/src/views/home/_home.scss @@ -106,7 +106,7 @@ } .guideHome__footerHeart { - color: $euiColorAccentText; + color: $euiColorTextAccent; } .guideHome__footerLogo { @@ -120,7 +120,7 @@ } .guideHome__footerLogoText { - fill: $euiTextColor; + fill: $euiColorTextParagraph; } .guideHome__hero { diff --git a/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx index cb80843b43c..e4ccf739d93 100644 --- a/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx +++ b/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx @@ -105,7 +105,7 @@ export default () => { css: css` .euiSelectableTemplateSitewide__optionMeta--PINK { font-weight: ${euiTheme.font.weight.medium}; - color: ${euiTheme.colors.accentText}; + color: ${euiTheme.colors.textAccent}; } `, }} diff --git a/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js b/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js index d620e3db1bb..4873b5ce27c 100644 --- a/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js +++ b/packages/eui/src-docs/src/views/theme/_json/_get_json_vars.js @@ -1,19 +1,28 @@ import { useContext } from 'react'; -import lightColors from './eui_theme_light.json'; -import darkColors from './eui_theme_dark.json'; +import { EUI_THEME_BOREALIS_KEY } from '@elastic/eui-theme-borealis'; +import borealisLightColors from '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json'; +import borealisDarkColors from '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json'; + import { ThemeContext } from '../../../components'; +import lightColors from './eui_theme_amsterdam_light.json'; +import darkColors from './eui_theme_amsterdam_dark.json'; export const useJsonVars = () => { const themeContext = useContext(ThemeContext); + const isNewTheme = + themeContext.theme?.includes(EUI_THEME_BOREALIS_KEY) ?? false; + + const darkTokens = isNewTheme ? borealisDarkColors : darkColors; + const lightTokens = isNewTheme ? borealisLightColors : lightColors; let palette; - switch (themeContext.theme) { - case 'dark': - palette = darkColors; + switch (themeContext.colorMode) { + case 'DARK': + palette = darkTokens; break; default: - palette = lightColors; + palette = lightTokens; break; } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json similarity index 58% rename from packages/eui/src-docs/src/views/theme/_json/eui_theme_dark.json rename to packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json index 7be75a57aa1..932b64419c0 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_dark.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json @@ -38,75 +38,13 @@ "euiButtonTypes": { "primary": "#36a2ef", "accent": "#f68fbe", + "accentSecondary": "#7dded8", "success": "#7dded8", "warning": "#f3d371", "danger": "#f86b63", "ghost": "#ffffff", "text": "#98a2b3" }, - "euiPaletteColorBlind": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - } - }, - "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#54b399", - "euiColorVis1": "#6092c0", - "euiColorVis2": "#d36086", - "euiColorVis3": "#9170b8", - "euiColorVis4": "#ca8eae", - "euiColorVis5": "#d6bf57", - "euiColorVis6": "#b9a888", - "euiColorVis7": "#da8b45", - "euiColorVis8": "#aa6556", - "euiColorVis9": "#e7664c", - "euiColorVis0_behindText": "#6dccb1", - "euiColorVis1_behindText": "#79aad9", - "euiColorVis2_behindText": "#ee789d", - "euiColorVis3_behindText": "#a987d1", - "euiColorVis4_behindText": "#e4a6c7", - "euiColorVis5_behindText": "#f1d86f", - "euiColorVis6_behindText": "#d2c0a0", - "euiColorVis7_behindText": "#f5a35c", - "euiColorVis8_behindText": "#c47c6c", - "euiColorVis9_behindText": "#ff7e62", "euiFontWeightLight": 300, "euiFontWeightRegular": 400, "euiFontWeightMedium": 500, @@ -181,6 +119,7 @@ "plain": "#1d1e24", "subdued": "#141519", "accent": "#4a2b39", + "accentSecondary": "#264341", "primary": "#103148", "success": "#264341", "warning": "#493f22", @@ -278,10 +217,123 @@ "euiZFlyout": 1000, "euiZMaskBelowHeader": 1000, "euiZContent": 0, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#54B399", + "behindText": "#6DCCB1" + }, + "euiColorVis1": { + "graphic": "#6092C0", + "behindText": "#79AAD9" + }, + "euiColorVis2": { + "graphic": "#D36086", + "behindText": "#EE789D" + }, + "euiColorVis3": { + "graphic": "#9170B8", + "behindText": "#A987D1" + }, + "euiColorVis4": { + "graphic": "#CA8EAE", + "behindText": "#E4A6C7" + }, + "euiColorVis5": { + "graphic": "#D6BF57", + "behindText": "#F1D86F" + }, + "euiColorVis6": { + "graphic": "#B9A888", + "behindText": "#D2C0A0" + }, + "euiColorVis7": { + "graphic": "#DA8B45", + "behindText": "#F5A35C" + }, + "euiColorVis8": { + "graphic": "#AA6556", + "behindText": "#C47C6C" + }, + "euiColorVis9": { + "graphic": "#E7664C", + "behindText": "#FF7E62" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#54B399", + "euiColorVis1": "#6092C0", + "euiColorVis2": "#D36086", + "euiColorVis3": "#9170B8", + "euiColorVis4": "#CA8EAE", + "euiColorVis5": "#D6BF57", + "euiColorVis6": "#B9A888", + "euiColorVis7": "#DA8B45", + "euiColorVis8": "#AA6556", + "euiColorVis9": "#E7664C", + "euiColorVis0_behindText": "#6DCCB1", + "euiColorVis1_behindText": "#79AAD9", + "euiColorVis2_behindText": "#EE789D", + "euiColorVis3_behindText": "#A987D1", + "euiColorVis4_behindText": "#E4A6C7", + "euiColorVis5_behindText": "#F1D86F", + "euiColorVis6_behindText": "#D2C0A0", + "euiColorVis7_behindText": "#F5A35C", + "euiColorVis8_behindText": "#C47C6C", + "euiColorVis9_behindText": "#FF7E62", + "euiColorVisAsTextLight0": "#006BB4", + "euiColorVisAsTextLight1": "#017D73", + "euiColorVisAsTextLight2": "#F5A700", + "euiColorVisAsTextLight3": "#BD271E", + "euiColorVisAsTextLight4": "#DD0A73", + "euiColorVisAsTextLight5": "#006BB4", + "euiColorVisAsTextLight6": "#017D73", + "euiColorVisAsTextDark0": "#1BA9F5", + "euiColorVisAsTextDark1": "#7DE2D1", + "euiColorVisAsTextDark2": "#F990C0", + "euiColorVisAsTextDark3": "#F66", + "euiColorVisAsTextDark4": "#FFCE7A", + "euiColorVisAsTextDark5": "#1BA9F5", + "euiColorVisAsTextDark6": "#7DE2D1", + "euiColorVisSuccess0": "#209280", + "euiColorVisSuccess1": "#54B399", + "euiColorVisWarning0": "#D6BF57", + "euiColorVisDanger0": "#CC5642", + "euiColorVisDanger1": "#E7664C", + "euiColorVisNeutral0": "#FFFFFF", + "euiColorSeverity0": "#D3DAE6", + "euiColorSeverity1": "#6092C0", + "euiColorSeverity2": "#78A2C9", + "euiColorSeverity3": "#90B0D1", + "euiColorSeverity4": "#A6C0DA", + "euiColorSeverity5": "#BECFE3", + "euiColorSeverity6": "#DECC79", + "euiColorSeverity7": "#D6BF57", + "euiColorSeverity8": "#E69D8F", + "euiColorSeverity9": "#E2907F", + "euiColorSeverity10": "#E18773", + "euiColorSeverity11": "#DD7B67", + "euiColorSeverity12": "#D66E5C", + "euiColorSeverity13": "#D2634E", + "euiColorSeverity14": "#CC5642", + "euiColorVisGrey0": "#d3dae6", + "euiColorVisGrey1": "#98a2b3", + "euiColorVisGrey2": "#69707d", + "euiColorVisGrey3": "#343741", + "euiColorVisWarm0": "#FBFBDC", + "euiColorVisWarm1": "#DA8B45", + "euiColorVisWarm2": "#E7664C", + "euiColorVisCool0": "#EBEFF5", + "euiColorVisCool1": "#6092C0", + "euiColorVisCool2": "#6092C0", + "euiColorVisComplementary0": "#6092C0", + "euiColorVisComplementary1": "#DA8B45", + "euiColorChartLines": "#343741", + "euiColorChartBand": "#2a2b33", "euiColorGhost": "#ffffff", "euiColorInk": "#000000", "euiColorPrimary": "#36a2ef", "euiColorAccent": "#f68fbe", + "euiColorAccentSecondary": "#7dded8", "euiColorSuccess": "#7dded8", "euiColorWarning": "#f3d371", "euiColorDanger": "#f86b63", @@ -305,6 +357,66 @@ "euiColorDangerText": "#f86b63", "euiColorDisabledText": "#515761", "euiLinkColor": "#36a2ef", - "euiColorChartLines": "#343741", - "euiColorChartBand": "#2a2b33" + "euiColorPlainLight": "#FFFFFF", + "euiColorPlainDark": "#000000", + "euiColorTextPrimary": "#36a2ef", + "euiColorTextAccent": "#f68fbe", + "euiColorTextAccentSecondary": "#7dded8", + "euiColorTextSuccess": "#7dded8", + "euiColorTextWarning": "#f3d371", + "euiColorTextDanger": "#f86b63", + "euiColorTextParagraph": "#DFE5EF", + "euiColorTextHeading": "#DFE5EF", + "euiColorTextSubdued": "#81858f", + "euiColorTextDisabled": "#515761", + "euiColorTextInverse": "#000000", + "euiColorBackgroundBasePrimary": "#0b2030", + "euiColorBackgroundBaseAccent": "#311d26", + "euiColorBackgroundBaseAccentSecondary": "#192c2b", + "euiColorBackgroundBaseSuccess": "#192c2b", + "euiColorBackgroundBaseWarning": "#312a17", + "euiColorBackgroundBaseDanger": "#321514", + "euiColorBackgroundBaseSubdued": "#141519", + "euiColorBackgroundBaseDisabled": "#515761", + "euiColorBackgroundBaseHighlighted": "#141519", + "euiColorBackgroundBasePlain": "#1D1E24", + "euiColorBackgroundBaseFormsPrepend": "#2c2f37", + "euiColorBackgroundBaseFormsControlDisabled": "#535966", + "euiColorBackgroundBaseInteractiveHover": "rgba(52,55,65,0.2)", + "euiColorBackgroundBaseInteractiveSelect": "#103148", + "euiColorBackgroundBaseInteractiveOverlay": "rgba(0,0,0,0.5)", + "euiColorBackgroundBaseSkeletonEdge": "#2e3039", + "euiColorBackgroundBaseSkeletonMiddle": "#282a31", + "euiColorBackgroundLightPrimary": "#103148", + "euiColorBackgroundLightAccent": "#4a2b39", + "euiColorBackgroundLightAccentSecondary": "#264341", + "euiColorBackgroundLightSuccess": "#264341", + "euiColorBackgroundLightWarning": "#493f22", + "euiColorBackgroundLightDanger": "#4a201e", + "euiColorBackgroundLightText": "#2a2c34", + "euiColorBackgroundFilledPrimary": "#36A2EF", + "euiColorBackgroundFilledAccent": "#F68FBE", + "euiColorBackgroundFilledAccentSecondary": "#7DDED8", + "euiColorBackgroundFilledSuccess": "#7DDED8", + "euiColorBackgroundFilledWarning": "#F3D371", + "euiColorBackgroundFilledDanger": "#F86B63", + "euiColorBackgroundFilledText": "#DFE5EF", + "euiColorBorderBasePrimary": "#164160", + "euiColorBorderBaseAccent": "#62394c", + "euiColorBorderBaseAccentSecondary": "#325956", + "euiColorBorderBaseSuccess": "#325956", + "euiColorBorderBaseWarning": "#927f44", + "euiColorBorderBaseDanger": "#632b28", + "euiColorBorderBaseSubdued": "#343741", + "euiColorBorderBaseDisabled": "rgba(255,255,255,0.1)", + "euiColorBorderBasePlain": "#343741", + "euiColorBorderBaseFloating": "transparent", + "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255,0.1)", + "euiColorBorderBaseFormsControl": "#69696f", + "euiColorBorderStrongPrimary": "#164160", + "euiColorBorderStrongAccent": "#62394c", + "euiColorBorderStrongAccentSecondary": "#325956", + "euiColorBorderStrongSuccess": "#325956", + "euiColorBorderStrongWarning": "#927f44", + "euiColorBorderStrongDanger": "#632b28" } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_dark.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json.d.ts similarity index 67% rename from packages/eui/src-docs/src/views/theme/_json/eui_theme_dark.json.d.ts rename to packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json.d.ts index 9ae0acc2cda..0657faa6809 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_dark.json.d.ts +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json.d.ts @@ -1,4 +1,4 @@ -declare module '@elastic/eui/dist/eui_theme_dark.json' { +declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { const sassVariables: { euiZDataGrid: number; euiZHeaderBelowDataGrid: number; @@ -39,75 +39,13 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' { euiButtonTypes: { primary: string; accent: string; + accentSecondary: string; success: string; warning: string; danger: string; ghost: string; text: string; }; - euiPaletteColorBlind: { - euiColorVis0: { - graphic: string; - behindText: string; - }; - euiColorVis1: { - graphic: string; - behindText: string; - }; - euiColorVis2: { - graphic: string; - behindText: string; - }; - euiColorVis3: { - graphic: string; - behindText: string; - }; - euiColorVis4: { - graphic: string; - behindText: string; - }; - euiColorVis5: { - graphic: string; - behindText: string; - }; - euiColorVis6: { - graphic: string; - behindText: string; - }; - euiColorVis7: { - graphic: string; - behindText: string; - }; - euiColorVis8: { - graphic: string; - behindText: string; - }; - euiColorVis9: { - graphic: string; - behindText: string; - }; - }; - euiPaletteColorBlindKeys: string; - euiColorVis0: string; - euiColorVis1: string; - euiColorVis2: string; - euiColorVis3: string; - euiColorVis4: string; - euiColorVis5: string; - euiColorVis6: string; - euiColorVis7: string; - euiColorVis8: string; - euiColorVis9: string; - euiColorVis0_behindText: string; - euiColorVis1_behindText: string; - euiColorVis2_behindText: string; - euiColorVis3_behindText: string; - euiColorVis4_behindText: string; - euiColorVis5_behindText: string; - euiColorVis6_behindText: string; - euiColorVis7_behindText: string; - euiColorVis8_behindText: string; - euiColorVis9_behindText: string; euiFontWeightLight: number; euiFontWeightRegular: number; euiFontWeightMedium: number; @@ -182,6 +120,7 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' { plain: string; subdued: string; accent: string; + accentSecondary: string; primary: string; success: string; warning: string; @@ -279,10 +218,123 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' { euiZFlyout: number; euiZMaskBelowHeader: number; euiZContent: number; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiColorVisAsTextLight0: string; + euiColorVisAsTextLight1: string; + euiColorVisAsTextLight2: string; + euiColorVisAsTextLight3: string; + euiColorVisAsTextLight4: string; + euiColorVisAsTextLight5: string; + euiColorVisAsTextLight6: string; + euiColorVisAsTextDark0: string; + euiColorVisAsTextDark1: string; + euiColorVisAsTextDark2: string; + euiColorVisAsTextDark3: string; + euiColorVisAsTextDark4: string; + euiColorVisAsTextDark5: string; + euiColorVisAsTextDark6: string; + euiColorVisSuccess0: string; + euiColorVisSuccess1: string; + euiColorVisWarning0: string; + euiColorVisDanger0: string; + euiColorVisDanger1: string; + euiColorVisNeutral0: string; + euiColorVisGrey0: string; + euiColorVisGrey1: string; + euiColorVisGrey2: string; + euiColorVisGrey3: string; + euiColorVisWarm0: string; + euiColorVisWarm1: string; + euiColorVisWarm2: string; + euiColorVisCool0: string; + euiColorVisCool1: string; + euiColorVisCool2: string; + euiColorVisComplementary0: string; + euiColorVisComplementary1: string; + euiColorSeverity0: string; + euiColorSeverity1: string; + euiColorSeverity2: string; + euiColorSeverity3: string; + euiColorSeverity4: string; + euiColorSeverity5: string; + euiColorSeverity6: string; + euiColorSeverity7: string; + euiColorSeverity8: string; + euiColorSeverity9: string; + euiColorSeverity10: string; + euiColorSeverity11: string; + euiColorSeverity12: string; + euiColorSeverity13: string; + euiColorSeverity14: string; + euiColorChartLines: string; + euiColorChartBand: string; euiColorGhost: string; euiColorInk: string; euiColorPrimary: string; euiColorAccent: string; + euiColorAccentSecondary: string; euiColorSuccess: string; euiColorWarning: string; euiColorDanger: string; @@ -306,8 +358,68 @@ declare module '@elastic/eui/dist/eui_theme_dark.json' { euiColorDangerText: string; euiColorDisabledText: string; euiLinkColor: string; - euiColorChartLines: string; - euiColorChartBand: string; + euiColorPlainLight: string; + euiColorPlainDark: string; + euiColorTextPrimary: string; + euiColorTextAccent: string; + euiColorTextAccentSecondary: string; + euiColorTextSuccess: string; + euiColorTextWarning: string; + euiColorTextDanger: string; + euiColorTextParagraph: string; + euiColorTextHeading: string; + euiColorTextSubdued: string; + euiColorTextDisabled: string; + euiColorTextInverse: string; + euiColorBackgroundBasePrimary: string; + euiColorBackgroundBaseAccent: string; + euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseSuccess: string; + euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseDanger: string; + euiColorBackgroundBaseSubdued: string; + euiColorBackgroundBasePlain: string; + euiColorBackgroundBaseDisabled: string; + euiColorBackgroundBaseHighlighted: string; + euiColorBackgroundBaseFormsPrepend: string; + euiColorBackgroundBaseFormsControlDisabled: string; + euiColorBackgroundBaseInteractiveHover: string; + euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveOverlay: string; + euiColorBackgroundBaseSkeletonEdge: string; + euiColorBackgroundBaseSkeletonMiddle: string; + euiColorBackgroundLightPrimary: string; + euiColorBackgroundLightAccent: string; + euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightSuccess: string; + euiColorBackgroundLightWarning: string; + euiColorBackgroundLightDanger: string; + euiColorBackgroundLightText: string; + euiColorBackgroundFilledPrimary: string; + euiColorBackgroundFilledAccent: string; + euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledSuccess: string; + euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledDanger: string; + euiColorBackgroundFilledText: string; + euiColorBorderBasePrimary: string; + euiColorBorderBaseAccent: string; + euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseSuccess: string; + euiColorBorderBaseWarning: string; + euiColorBorderBaseDanger: string; + euiColorBorderBasePlain: string; + euiColorBorderBaseSubdued: string; + euiColorBorderBaseDisabled: string; + euiColorBorderBaseFloating: string; + euiColorBorderBaseFormsColorSwatch: string; + euiColorBorderBaseFormsControl: string; + euiColorBorderStrongPrimary: string; + euiColorBorderStrongAccent: string; + euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongSuccess: string; + euiColorBorderStrongWarning: string; + euiColorBorderStrongDanger: string; }; export default sassVariables; } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_light.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json similarity index 58% rename from packages/eui/src-docs/src/views/theme/_json/eui_theme_light.json rename to packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json index 5b76d949b58..a9f5df6bed0 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_light.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json @@ -38,75 +38,13 @@ "euiButtonTypes": { "primary": "#0077cc", "accent": "#f04e98", + "accentSecondary": "#00bfb3", "success": "#00bfb3", "warning": "#fec514", "danger": "#bd271e", "ghost": "#ffffff", "text": "#69707d" }, - "euiPaletteColorBlind": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - } - }, - "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", - "euiColorVis0": "#54b399", - "euiColorVis1": "#6092c0", - "euiColorVis2": "#d36086", - "euiColorVis3": "#9170b8", - "euiColorVis4": "#ca8eae", - "euiColorVis5": "#d6bf57", - "euiColorVis6": "#b9a888", - "euiColorVis7": "#da8b45", - "euiColorVis8": "#aa6556", - "euiColorVis9": "#e7664c", - "euiColorVis0_behindText": "#6dccb1", - "euiColorVis1_behindText": "#79aad9", - "euiColorVis2_behindText": "#ee789d", - "euiColorVis3_behindText": "#a987d1", - "euiColorVis4_behindText": "#e4a6c7", - "euiColorVis5_behindText": "#f1d86f", - "euiColorVis6_behindText": "#d2c0a0", - "euiColorVis7_behindText": "#f5a35c", - "euiColorVis8_behindText": "#c47c6c", - "euiColorVis9_behindText": "#ff7e62", "euiFontWeightLight": 300, "euiFontWeightRegular": 400, "euiFontWeightMedium": 500, @@ -181,6 +119,7 @@ "plain": "#ffffff", "subdued": "#fafbfd", "accent": "#feedf5", + "accentSecondary": "#e6f9f7", "primary": "#e6f1fa", "success": "#e6f9f7", "warning": "#fff9e8", @@ -278,10 +217,123 @@ "euiZFlyout": 1000, "euiZMaskBelowHeader": 1000, "euiZContent": 0, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#54B399", + "behindText": "#6DCCB1" + }, + "euiColorVis1": { + "graphic": "#6092C0", + "behindText": "#79AAD9" + }, + "euiColorVis2": { + "graphic": "#D36086", + "behindText": "#EE789D" + }, + "euiColorVis3": { + "graphic": "#9170B8", + "behindText": "#A987D1" + }, + "euiColorVis4": { + "graphic": "#CA8EAE", + "behindText": "#E4A6C7" + }, + "euiColorVis5": { + "graphic": "#D6BF57", + "behindText": "#F1D86F" + }, + "euiColorVis6": { + "graphic": "#B9A888", + "behindText": "#D2C0A0" + }, + "euiColorVis7": { + "graphic": "#DA8B45", + "behindText": "#F5A35C" + }, + "euiColorVis8": { + "graphic": "#AA6556", + "behindText": "#C47C6C" + }, + "euiColorVis9": { + "graphic": "#E7664C", + "behindText": "#FF7E62" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#54B399", + "euiColorVis1": "#6092C0", + "euiColorVis2": "#D36086", + "euiColorVis3": "#9170B8", + "euiColorVis4": "#CA8EAE", + "euiColorVis5": "#D6BF57", + "euiColorVis6": "#B9A888", + "euiColorVis7": "#DA8B45", + "euiColorVis8": "#AA6556", + "euiColorVis9": "#E7664C", + "euiColorVis0_behindText": "#6DCCB1", + "euiColorVis1_behindText": "#79AAD9", + "euiColorVis2_behindText": "#EE789D", + "euiColorVis3_behindText": "#A987D1", + "euiColorVis4_behindText": "#E4A6C7", + "euiColorVis5_behindText": "#F1D86F", + "euiColorVis6_behindText": "#D2C0A0", + "euiColorVis7_behindText": "#F5A35C", + "euiColorVis8_behindText": "#C47C6C", + "euiColorVis9_behindText": "#FF7E62", + "euiColorVisAsTextLight0": "#006BB4", + "euiColorVisAsTextLight1": "#017D73", + "euiColorVisAsTextLight2": "#F5A700", + "euiColorVisAsTextLight3": "#BD271E", + "euiColorVisAsTextLight4": "#DD0A73", + "euiColorVisAsTextLight5": "#006BB4", + "euiColorVisAsTextLight6": "#017D73", + "euiColorVisAsTextDark0": "#1BA9F5", + "euiColorVisAsTextDark1": "#7DE2D1", + "euiColorVisAsTextDark2": "#F990C0", + "euiColorVisAsTextDark3": "#F66", + "euiColorVisAsTextDark4": "#FFCE7A", + "euiColorVisAsTextDark5": "#1BA9F5", + "euiColorVisAsTextDark6": "#7DE2D1", + "euiColorVisSuccess0": "#209280", + "euiColorVisSuccess1": "#54B399", + "euiColorVisWarning0": "#D6BF57", + "euiColorVisDanger0": "#CC5642", + "euiColorVisDanger1": "#E7664C", + "euiColorVisNeutral0": "#FFFFFF", + "euiColorSeverity0": "#D3DAE6", + "euiColorSeverity1": "#6092C0", + "euiColorSeverity2": "#78A2C9", + "euiColorSeverity3": "#90B0D1", + "euiColorSeverity4": "#A6C0DA", + "euiColorSeverity5": "#BECFE3", + "euiColorSeverity6": "#DECC79", + "euiColorSeverity7": "#D6BF57", + "euiColorSeverity8": "#E69D8F", + "euiColorSeverity9": "#E2907F", + "euiColorSeverity10": "#E18773", + "euiColorSeverity11": "#DD7B67", + "euiColorSeverity12": "#D66E5C", + "euiColorSeverity13": "#D2634E", + "euiColorSeverity14": "#CC5642", + "euiColorVisGrey0": "#d3dae6", + "euiColorVisGrey1": "#98a2b3", + "euiColorVisGrey2": "#69707d", + "euiColorVisGrey3": "#343741", + "euiColorVisWarm0": "#FBFBDC", + "euiColorVisWarm1": "#DA8B45", + "euiColorVisWarm2": "#E7664C", + "euiColorVisCool0": "#EBEFF5", + "euiColorVisCool1": "#6092C0", + "euiColorVisCool2": "#6092C0", + "euiColorVisComplementary0": "#6092C0", + "euiColorVisComplementary1": "#DA8B45", + "euiColorChartLines": "#eef0f3", + "euiColorChartBand": "#f5f7fa", "euiColorGhost": "#ffffff", "euiColorInk": "#000000", "euiColorPrimary": "#0077cc", "euiColorAccent": "#f04e98", + "euiColorAccentSecondary": "#00bfb3", "euiColorSuccess": "#00bfb3", "euiColorWarning": "#fec514", "euiColorDanger": "#bd271e", @@ -305,6 +357,66 @@ "euiColorDangerText": "#bd271e", "euiColorDisabledText": "#abb4c4", "euiLinkColor": "#0071c2", - "euiColorChartLines": "#eef0f3", - "euiColorChartBand": "#f5f7fa" + "euiColorPlainLight": "#FFFFFF", + "euiColorPlainDark": "#000000", + "euiColorTextPrimary": "#006bb8", + "euiColorTextAccent": "#ba3d76", + "euiColorTextAccentSecondary": "#007871", + "euiColorTextSuccess": "#007871", + "euiColorTextWarning": "#83650a", + "euiColorTextDanger": "#bd271e", + "euiColorTextParagraph": "#343741", + "euiColorTextHeading": "#1a1c21", + "euiColorTextSubdued": "#646a77", + "euiColorTextDisabled": "#a2abba", + "euiColorTextInverse": "#FFFFFF", + "euiColorBackgroundBasePrimary": "#e6f1fa", + "euiColorBackgroundBaseAccent": "#feedf5", + "euiColorBackgroundBaseAccentSecondary": "#e6f9f7", + "euiColorBackgroundBaseSuccess": "#e6f9f7", + "euiColorBackgroundBaseWarning": "#fff9e8", + "euiColorBackgroundBaseDanger": "#f8e9e9", + "euiColorBackgroundBaseSubdued": "#f7f8fc", + "euiColorBackgroundBaseDisabled": "#ABB4C4", + "euiColorBackgroundBaseHighlighted": "#f7f8fc", + "euiColorBackgroundBasePlain": "#FFFFFF", + "euiColorBackgroundBaseFormsPrepend": "#e9edf3", + "euiColorBackgroundBaseFormsControlDisabled": "#98A2B3", + "euiColorBackgroundBaseInteractiveHover": "rgba(211,218,230,0.2)", + "euiColorBackgroundBaseInteractiveSelect": "#f5fafd", + "euiColorBackgroundBaseInteractiveOverlay": "rgba(0,0,0,0.5)", + "euiColorBackgroundBaseSkeletonEdge": "#f0f2f6", + "euiColorBackgroundBaseSkeletonMiddle": "#f6f8fa", + "euiColorBackgroundLightPrimary": "#cce4f5", + "euiColorBackgroundLightAccent": "#fcdcea", + "euiColorBackgroundLightAccentSecondary": "#ccf2f0", + "euiColorBackgroundLightSuccess": "#ccf2f0", + "euiColorBackgroundLightWarning": "#fff3d0", + "euiColorBackgroundLightDanger": "#f2d4d2", + "euiColorBackgroundLightText": "#e9edf3", + "euiColorBackgroundFilledPrimary": "#0077CC", + "euiColorBackgroundFilledAccent": "#f583b7", + "euiColorBackgroundFilledAccentSecondary": "#4dd2ca", + "euiColorBackgroundFilledSuccess": "#4dd2ca", + "euiColorBackgroundFilledWarning": "#FEC514", + "euiColorBackgroundFilledDanger": "#BD271E", + "euiColorBackgroundFilledText": "#69707D", + "euiColorBorderBasePrimary": "#99c9eb", + "euiColorBorderBaseAccent": "#f9b8d6", + "euiColorBorderBaseAccentSecondary": "#99e5e1", + "euiColorBorderBaseSuccess": "#99e5e1", + "euiColorBorderBaseWarning": "#fedc72", + "euiColorBorderBaseDanger": "#e5a9a5", + "euiColorBorderBaseSubdued": "#D3DAE6", + "euiColorBorderBaseDisabled": "rgba(191,198,210,0.1)", + "euiColorBorderBasePlain": "#D3DAE6", + "euiColorBorderBaseFloating": "transparent", + "euiColorBorderBaseFormsColorSwatch": "rgba(0,0,0,0.1)", + "euiColorBorderBaseFormsControl": "#919296", + "euiColorBorderStrongPrimary": "#99c9eb", + "euiColorBorderStrongAccent": "#f9b8d6", + "euiColorBorderStrongAccentSecondary": "#99e5e1", + "euiColorBorderStrongSuccess": "#99e5e1", + "euiColorBorderStrongWarning": "#fedc72", + "euiColorBorderStrongDanger": "#e5a9a5" } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json.d.ts new file mode 100644 index 00000000000..6b7bd9a9d20 --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json.d.ts @@ -0,0 +1,425 @@ +declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { + const sassVariables: { + euiZDataGrid: number; + euiZHeaderBelowDataGrid: number; + euiZDataGridCellPopover: number; + euiDataGridCellPaddingS: string; + euiDataGridCellPaddingM: string; + euiDataGridCellPaddingL: string; + euiTableHoverColor: string; + euiTableSelectedColor: string; + euiTableHoverSelectedColor: string; + euiTableActionsBorderColor: string; + euiTableHoverClickableColor: string; + euiTableFocusClickableColor: string; + euiContrastRatioText: number; + euiContrastRatioGraphic: number; + euiContrastRatioDisabled: number; + euiAnimSlightBounce: string; + euiAnimSlightResistance: string; + euiAnimSpeedExtraFast: string; + euiAnimSpeedFast: string; + euiAnimSpeedNormal: string; + euiAnimSpeedSlow: string; + euiAnimSpeedExtraSlow: string; + euiBorderWidthThin: string; + euiBorderWidthThick: string; + euiBorderColor: string; + euiBorderRadius: string; + euiBorderRadiusSmall: string; + euiBorderThick: string; + euiBorderThin: string; + euiBorderEditable: string; + euiButtonHeight: string; + euiButtonHeightSmall: string; + euiButtonHeightXSmall: string; + euiButtonColorDisabled: string; + euiButtonColorDisabledText: string; + euiButtonColorGhostDisabled: string; + euiButtonTypes: { + primary: string; + accent: string; + accentSecondary: string; + success: string; + warning: string; + danger: string; + ghost: string; + text: string; + }; + euiFontWeightLight: number; + euiFontWeightRegular: number; + euiFontWeightMedium: number; + euiFontWeightSemiBold: number; + euiFontWeightBold: number; + euiCodeFontWeightRegular: number; + euiCodeFontWeightBold: number; + euiFormMaxWidth: string; + euiFormControlHeight: string; + euiFormControlCompressedHeight: string; + euiFormControlPadding: string; + euiFormControlCompressedPadding: string; + euiFormControlBorderRadius: string; + euiFormControlCompressedBorderRadius: string; + euiRadioSize: string; + euiCheckBoxSize: string; + euiCheckboxBorderRadius: string; + euiSwitchHeight: string; + euiSwitchWidth: string; + euiSwitchThumbSize: string; + euiSwitchIconHeight: string; + euiSwitchHeightCompressed: string; + euiSwitchWidthCompressed: string; + euiSwitchThumbSizeCompressed: string; + euiSwitchHeightMini: string; + euiSwitchWidthMini: string; + euiSwitchThumbSizeMini: string; + euiFormBackgroundColor: string; + euiFormBackgroundDisabledColor: string; + euiFormBackgroundReadOnlyColor: string; + euiFormBorderOpaqueColor: string; + euiFormBorderColor: string; + euiFormBorderDisabledColor: string; + euiFormCustomControlDisabledIconColor: string; + euiFormCustomControlBorderColor: string; + euiFormControlDisabledColor: string; + euiFormControlBoxShadow: string; + euiFormControlPlaceholderText: string; + euiFormInputGroupLabelBackground: string; + euiFormInputGroupBorder: string; + euiSwitchOffColor: string; + euiFormControlIconSizes: { + small: string; + medium: string; + large: string; + xLarge: string; + xxLarge: string; + }; + euiFormControlLayoutGroupInputHeight: string; + euiFormControlLayoutGroupInputCompressedHeight: string; + euiFormControlLayoutGroupInputCompressedBorderRadius: string; + euiHeaderBackgroundColor: string; + euiHeaderDarkBackgroundColor: string; + euiHeaderBorderColor: string; + euiHeaderBreadcrumbColor: string; + euiHeaderHeight: string; + euiHeaderChildSize: string; + euiHeaderHeightCompensation: string; + euiPageDefaultMaxWidth: string; + euiPageSidebarMinWidth: string; + euiPanelPaddingModifiers: { + paddingSmall: string; + paddingMedium: string; + paddingLarge: string; + }; + euiPanelBorderRadiusModifiers: { + borderRadiusNone: number; + borderRadiusMedium: string; + }; + euiPanelBackgroundColorModifiers: { + transparent: string; + plain: string; + subdued: string; + accent: string; + accentSecondary: string; + primary: string; + success: string; + warning: string; + danger: string; + }; + euiBreakpoints: { + xs: number; + s: string; + m: string; + l: string; + xl: string; + }; + euiBreakpointKeys: string; + euiShadowColor: string; + euiSize: string; + euiSizeXS: string; + euiSizeS: string; + euiSizeM: string; + euiSizeL: string; + euiSizeXL: string; + euiSizeXXL: string; + euiScrollBar: string; + euiScrollBarCorner: string; + euiScrollBarCornerThin: string; + euiFocusRingColor: string; + euiFocusRingAnimStartColor: string; + euiFocusRingAnimStartSize: string; + euiFocusRingAnimStartSizeLarge: string; + euiFocusRingSizeLarge: string; + euiFocusRingSize: string; + euiFocusTransparency: number; + euiFocusTransparencyPercent: string; + euiFocusBackgroundColor: string; + euiFontFamily: string; + euiCodeFontFamily: string; + euiFontFeatureSettings: string; + euiTextScale: string; + euiFontSize: string; + euiFontSizeXS: string; + euiFontSizeS: string; + euiFontSizeM: string; + euiFontSizeL: string; + euiFontSizeXL: string; + euiFontSizeXXL: string; + euiLineHeight: number; + euiBodyLineHeight: number; + euiTitles: { + xxxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + s: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + m: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + l: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + }; + euiZLevel0: number; + euiZLevel1: number; + euiZLevel2: number; + euiZLevel3: number; + euiZLevel4: number; + euiZLevel5: number; + euiZLevel6: number; + euiZLevel7: number; + euiZLevel8: number; + euiZLevel9: number; + euiZToastList: number; + euiZModal: number; + euiZMask: number; + euiZNavigation: number; + euiZContentMenu: number; + euiZHeader: number; + euiZFlyout: number; + euiZMaskBelowHeader: number; + euiZContent: number; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiColorVisAsTextLight0: string; + euiColorVisAsTextLight1: string; + euiColorVisAsTextLight2: string; + euiColorVisAsTextLight3: string; + euiColorVisAsTextLight4: string; + euiColorVisAsTextLight5: string; + euiColorVisAsTextLight6: string; + euiColorVisAsTextDark0: string; + euiColorVisAsTextDark1: string; + euiColorVisAsTextDark2: string; + euiColorVisAsTextDark3: string; + euiColorVisAsTextDark4: string; + euiColorVisAsTextDark5: string; + euiColorVisAsTextDark6: string; + euiColorVisSuccess0: string; + euiColorVisSuccess1: string; + euiColorVisWarning0: string; + euiColorVisDanger0: string; + euiColorVisDanger1: string; + euiColorVisNeutral0: string; + euiColorVisGrey0: string; + euiColorVisGrey1: string; + euiColorVisGrey2: string; + euiColorVisGrey3: string; + euiColorVisWarm0: string; + euiColorVisWarm1: string; + euiColorVisWarm2: string; + euiColorVisCool0: string; + euiColorVisCool1: string; + euiColorVisCool2: string; + euiColorVisComplementary0: string; + euiColorVisComplementary1: string; + euiColorSeverity0: string; + euiColorSeverity1: string; + euiColorSeverity2: string; + euiColorSeverity3: string; + euiColorSeverity4: string; + euiColorSeverity5: string; + euiColorSeverity6: string; + euiColorSeverity7: string; + euiColorSeverity8: string; + euiColorSeverity9: string; + euiColorSeverity10: string; + euiColorSeverity11: string; + euiColorSeverity12: string; + euiColorSeverity13: string; + euiColorSeverity14: string; + euiColorChartLines: string; + euiColorChartBand: string; + euiColorGhost: string; + euiColorInk: string; + euiColorPrimary: string; + euiColorAccent: string; + euiColorAccentSecondary: string; + euiColorSuccess: string; + euiColorWarning: string; + euiColorDanger: string; + euiColorEmptyShade: string; + euiColorLightestShade: string; + euiColorLightShade: string; + euiColorMediumShade: string; + euiColorDarkShade: string; + euiColorDarkestShade: string; + euiColorFullShade: string; + euiPageBackgroundColor: string; + euiColorHighlight: string; + euiTextColor: string; + euiTitleColor: string; + euiTextSubduedColor: string; + euiColorDisabled: string; + euiColorPrimaryText: string; + euiColorSuccessText: string; + euiColorAccentText: string; + euiColorWarningText: string; + euiColorDangerText: string; + euiColorDisabledText: string; + euiLinkColor: string; + euiColorPlainLight: string; + euiColorPlainDark: string; + euiColorTextPrimary: string; + euiColorTextAccent: string; + euiColorTextAccentSecondary: string; + euiColorTextSuccess: string; + euiColorTextWarning: string; + euiColorTextDanger: string; + euiColorTextParagraph: string; + euiColorTextHeading: string; + euiColorTextSubdued: string; + euiColorTextDisabled: string; + euiColorTextInverse: string; + euiColorBackgroundBasePrimary: string; + euiColorBackgroundBaseAccent: string; + euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseSuccess: string; + euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseDanger: string; + euiColorBackgroundBaseSubdued: string; + euiColorBackgroundBasePlain: string; + euiColorBackgroundBaseDisabled: string; + euiColorBackgroundBaseHighlighted: string; + euiColorBackgroundBaseFormsPrepend: string; + euiColorBackgroundBaseFormsControlDisabled: string; + euiColorBackgroundBaseInteractiveHover: string; + euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveOverlay: string; + euiColorBackgroundBaseSkeletonEdge: string; + euiColorBackgroundBaseSkeletonMiddle: string; + euiColorBackgroundLightPrimary: string; + euiColorBackgroundLightAccent: string; + euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightSuccess: string; + euiColorBackgroundLightWarning: string; + euiColorBackgroundLightDanger: string; + euiColorBackgroundLightText: string; + euiColorBackgroundFilledPrimary: string; + euiColorBackgroundFilledAccent: string; + euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledSuccess: string; + euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledDanger: string; + euiColorBackgroundFilledText: string; + euiColorBorderBasePrimary: string; + euiColorBorderBaseAccent: string; + euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseSuccess: string; + euiColorBorderBaseWarning: string; + euiColorBorderBaseDanger: string; + euiColorBorderBasePlain: string; + euiColorBorderBaseSubdued: string; + euiColorBorderBaseDisabled: string; + euiColorBorderBaseFloating: string; + euiColorBorderBaseFormsColorSwatch: string; + euiColorBorderBaseFormsControl: string; + euiColorBorderStrongPrimary: string; + euiColorBorderStrongAccent: string; + euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongSuccess: string; + euiColorBorderStrongWarning: string; + euiColorBorderStrongDanger: string; + }; + export default sassVariables; +} diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json new file mode 100644 index 00000000000..3f37ab6151b --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json @@ -0,0 +1,422 @@ +{ + "euiZDataGrid": 999, + "euiZHeaderBelowDataGrid": 998, + "euiZDataGridCellPopover": 1000, + "euiDataGridCellPaddingS": "4px", + "euiDataGridCellPaddingM": "6px", + "euiDataGridCellPaddingL": "8px", + "euiTableHoverColor": "rgba(255, 255, 255, 0.06)", + "euiTableSelectedColor": "#243147", + "euiTableHoverSelectedColor": "rgba(255, 255, 255, 0.06)", + "euiTableActionsBorderColor": "#2B394F", + "euiTableHoverClickableColor": "rgba(255, 255, 255, 0.06)", + "euiTableFocusClickableColor": "rgba(255, 255, 255, 0.06)", + "euiContrastRatioText": 4.5, + "euiContrastRatioGraphic": 3, + "euiContrastRatioDisabled": 2, + "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", + "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", + "euiAnimSpeedExtraFast": "90ms", + "euiAnimSpeedFast": "150ms", + "euiAnimSpeedNormal": "250ms", + "euiAnimSpeedSlow": "350ms", + "euiAnimSpeedExtraSlow": "500ms", + "euiBorderWidthThin": "1px", + "euiBorderWidthThick": "2px", + "euiBorderColor": "#2B394F", + "euiBorderRadius": "6px", + "euiBorderRadiusSmall": "4px", + "euiBorderThick": "2px solid #2B394F", + "euiBorderThin": "1px solid #2B394F", + "euiBorderEditable": "2px dotted #2B394F", + "euiButtonHeight": "40px", + "euiButtonHeightSmall": "32px", + "euiButtonHeightXSmall": "24px", + "euiButtonColorDisabled": "#1D2A3E", + "euiButtonColorDisabledText": "#6A7FA0", + "euiButtonColorGhostDisabled": "#1D2A3E", + "euiButtonTypes": { + "primary": "#61A2FF", + "accent": "#EE72A6", + "accentSecondary": "#16C5C0", + "success": "#24C292", + "warning": "#FACB3D", + "danger": "#F6726A", + "ghost": "#07101F", + "text": "#8E9FBC" + }, + "euiFontWeightLight": 300, + "euiFontWeightRegular": 400, + "euiFontWeightMedium": 450, + "euiFontWeightSemiBold": 500, + "euiFontWeightBold": 600, + "euiCodeFontWeightRegular": 400, + "euiCodeFontWeightBold": 600, + "euiFormMaxWidth": "400px", + "euiFormControlHeight": "40px", + "euiFormControlCompressedHeight": "32px", + "euiFormControlPadding": "12px", + "euiFormControlCompressedPadding": "8px", + "euiFormControlBorderRadius": "6px", + "euiFormControlCompressedBorderRadius": "4px", + "euiRadioSize": "16px", + "euiCheckBoxSize": "16px", + "euiCheckboxBorderRadius": "4px", + "euiSwitchHeight": "20px", + "euiSwitchWidth": "44px", + "euiSwitchThumbSize": "20px", + "euiSwitchIconHeight": "16px", + "euiSwitchHeightCompressed": "16px", + "euiSwitchWidthCompressed": "28px", + "euiSwitchThumbSizeCompressed": "16px", + "euiSwitchHeightMini": "10px", + "euiSwitchWidthMini": "22px", + "euiSwitchThumbSizeMini": "10px", + "euiFormBackgroundColor": "#07101F", + "euiFormBackgroundDisabledColor": "#1D2A3E", + "euiFormBackgroundReadOnlyColor": "#0B1628", + "euiFormBorderOpaqueColor": "#5054af", + "euiFormBorderColor": "#485975", + "euiFormBorderDisabledColor": "#485975", + "euiFormCustomControlDisabledIconColor": "#6A7FA0", + "euiFormCustomControlBorderColor": "#485975", + "euiFormControlDisabledColor": "#485975", + "euiFormControlBoxShadow": "0 0 rgba(0, 0, 0, 0)", + "euiFormControlPlaceholderText": "#8E9FBC", + "euiFormInputGroupLabelBackground": "#243147", + "euiFormInputGroupBorder": "none", + "euiSwitchOffColor": "#8E9FBC", + "euiFormControlIconSizes": { + "small": "12px", + "medium": "16px", + "large": "24px", + "xLarge": "32px", + "xxLarge": "40px" + }, + "euiFormControlLayoutGroupInputHeight": "38px", + "euiFormControlLayoutGroupInputCompressedHeight": "30px", + "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px", + "euiHeaderBackgroundColor": "#0B1628", + "euiHeaderDarkBackgroundColor": "#0B1628", + "euiHeaderBorderColor": "#2B394F", + "euiHeaderBreadcrumbColor": "#0D2F5E", + "euiHeaderHeight": "48px", + "euiHeaderChildSize": "40px", + "euiHeaderHeightCompensation": "48px", + "euiPageDefaultMaxWidth": "1200px", + "euiPageSidebarMinWidth": "192px", + "euiPanelPaddingModifiers": { + "paddingSmall": "8px", + "paddingMedium": "16px", + "paddingLarge": "24px" + }, + "euiPanelBorderRadiusModifiers": { + "borderRadiusNone": 0, + "borderRadiusMedium": "6px" + }, + "euiPanelBackgroundColorModifiers": { + "transparent": "rgba(0, 0, 0, 0)", + "plain": "#0B1628", + "subdued": "#07101F", + "accent": "#351725", + "accentSecondary": "#03282B", + "primary": "#0A2342", + "success": "#092A26", + "warning": "#2C2721", + "danger": "#351721" + }, + "euiBreakpoints": { + "xs": 0, + "s": "575px", + "m": "768px", + "l": "992px", + "xl": "1200px" + }, + "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", + "euiShadowColor": "#000000", + "euiSize": "16px", + "euiSizeXS": "4px", + "euiSizeS": "8px", + "euiSizeM": "12px", + "euiSizeL": "24px", + "euiSizeXL": "32px", + "euiSizeXXL": "40px", + "euiScrollBar": "16px", + "euiScrollBarCorner": "4px", + "euiScrollBarCornerThin": "6px", + "euiFocusRingColor": "#61A2FF", + "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", + "euiFocusRingAnimStartSize": "2px", + "euiFocusRingAnimStartSizeLarge": "10px", + "euiFocusRingSizeLarge": "4px", + "euiFocusRingSize": "2px", + "euiFocusTransparency": 0.8, + "euiFocusTransparencyPercent": "80%", + "euiFocusBackgroundColor": "#243147", + "euiFontFamily": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", + "euiFontFeatureSettings": "calt 1 kern 1 liga 1", + "euiTextScale": "1,875, 1.5, 1.25, 1, .875, .75", + "euiFontSize": "14px", + "euiFontSizeXS": "12px", + "euiFontSizeS": "14px", + "euiFontSizeM": "16px", + "euiFontSizeL": "20px", + "euiFontSizeXL": "24px", + "euiFontSizeXXL": "30px", + "euiLineHeight": 1.5, + "euiBodyLineHeight": 1.142857143, + "euiTitles": { + "xxxs": { + "font-size": "12px", + "line-height": "1.1429rem", + "font-weight": 600 + }, + "xxs": { + "font-size": "14px", + "line-height": "1.4286rem", + "font-weight": 600 + }, + "xs": { + "font-size": "16px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "s": { + "font-size": "20px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "m": { + "font-size": "24px", + "line-height": "2rem", + "font-weight": 600 + }, + "l": { + "font-size": "30px", + "line-height": "2.5714rem", + "font-weight": 600 + } + }, + "euiZLevel0": 0, + "euiZLevel1": 1000, + "euiZLevel2": 2000, + "euiZLevel3": 3000, + "euiZLevel4": 4000, + "euiZLevel5": 5000, + "euiZLevel6": 6000, + "euiZLevel7": 7000, + "euiZLevel8": 8000, + "euiZLevel9": 9000, + "euiZToastList": 9000, + "euiZModal": 8000, + "euiZMask": 6000, + "euiZNavigation": 6000, + "euiZContentMenu": 2000, + "euiZHeader": 1000, + "euiZFlyout": 1000, + "euiZMaskBelowHeader": 1000, + "euiZContent": 0, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#16C5C0", + "behindText": "#16C5C0" + }, + "euiColorVis1": { + "graphic": "#A6EDEA", + "behindText": "#A6EDEA" + }, + "euiColorVis2": { + "graphic": "#61A2FF", + "behindText": "#61A2FF" + }, + "euiColorVis3": { + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" + }, + "euiColorVis4": { + "graphic": "#EE72A6", + "behindText": "#EE72A6" + }, + "euiColorVis5": { + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" + }, + "euiColorVis6": { + "graphic": "#F6726A", + "behindText": "#F6726A" + }, + "euiColorVis7": { + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" + }, + "euiColorVis8": { + "graphic": "#EAAE01", + "behindText": "#EAAE01" + }, + "euiColorVis9": { + "graphic": "#FCD883", + "behindText": "#FCD883" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", + "euiColorVis3_behindText": "#BFDBFF", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", + "euiColorVisAsTextLight0": "#047471", + "euiColorVisAsTextLight1": "#1750BA", + "euiColorVisAsTextLight2": "#A11262", + "euiColorVisAsTextLight3": "#A71627", + "euiColorVisAsTextLight4": "#825803", + "euiColorVisAsTextLight5": "#09724D", + "euiColorVisAsTextLight6": "#6B3C9F", + "euiColorVisAsTextDark0": "#16C5C0", + "euiColorVisAsTextDark1": "#61A2FF", + "euiColorVisAsTextDark2": "#EE72A6", + "euiColorVisAsTextDark3": "#F6726A", + "euiColorVisAsTextDark4": "#EAAE01", + "euiColorVisAsTextDark5": "#24C292", + "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisSuccess0": "#24C292", + "euiColorVisSuccess1": "#AEE8D2", + "euiColorVisWarning0": "#FCD883", + "euiColorVisDanger0": "#F6726A", + "euiColorVisDanger1": "#FFC9C2", + "euiColorVisNeutral0": "#F6F9FC", + "euiColorSeverity0": "#E3E6EB", + "euiColorSeverity1": "#5A6D8C", + "euiColorSeverity2": "#7186A8", + "euiColorSeverity3": "#8E9FBC", + "euiColorSeverity4": "#ABB9D0", + "euiColorSeverity5": "#CAD3E2", + "euiColorSeverity6": "#FDE9B5", + "euiColorSeverity7": "#FCD883", + "euiColorSeverity8": "#FFC9C2", + "euiColorSeverity9": "#FFB5AD", + "euiColorSeverity10": "#FC9188", + "euiColorSeverity11": "#F6726A", + "euiColorSeverity12": "#EE4C48", + "euiColorSeverity13": "#DA3737", + "euiColorSeverity14": "#C61E25", + "euiColorVisGrey0": "#CAD3E2", + "euiColorVisGrey1": "#8E9FBC", + "euiColorVisGrey2": "#5A6D8C", + "euiColorVisGrey3": "#1D2A3E", + "euiColorVisWarm0": "#FFE8E5", + "euiColorVisWarm1": "#FFB5AD", + "euiColorVisWarm2": "#F6726A", + "euiColorVisCool0": "#E8F1FF", + "euiColorVisCool1": "#A3CBFF", + "euiColorVisCool2": "#61A2FF", + "euiColorVisComplementary0": "#61A2FF", + "euiColorVisComplementary1": "#EAAE01", + "euiColorChartLines": "#7186A8", + "euiColorChartBand": "#243147", + "euiColorGhost": "#FFFFFF", + "euiColorInk": "#000000", + "euiColorPrimary": "#61A2FF", + "euiColorAccent": "#EE72A6", + "euiColorAccentSecondary": "#16C5C0", + "euiColorSuccess": "#24C292", + "euiColorWarning": "#FACB3D", + "euiColorDanger": "#F6726A", + "euiColorEmptyShade": "#0B1628", + "euiColorLightestShade": "#172336", + "euiColorLightShade": "#243147", + "euiColorMediumShade": "#516381", + "euiColorDarkShade": "#7186A8", + "euiColorDarkestShade": "#CAD3E2", + "euiColorFullShade": "#FFFFFF", + "euiPageBackgroundColor": "#07101F", + "euiColorHighlight": "#1750BA", + "euiTextColor": "#CAD3E2", + "euiTitleColor": "#E3E8F2", + "euiTextSubduedColor": "#8E9FBC", + "euiColorDisabled": "#1D2A3E", + "euiColorPrimaryText": "#61A2FF", + "euiColorSuccessText": "#24C292", + "euiColorAccentText": "#EE72A6", + "euiColorWarningText": "#FCD883", + "euiColorDangerText": "#F6726A", + "euiColorDisabledText": "#6A7FA0", + "euiLinkColor": "#61A2FF", + "euiColorPlainLight": "#FFFFFF", + "euiColorPlainDark": "#07101F", + "euiColorTextPrimary": "#61A2FF", + "euiColorTextAccent": "#EE72A6", + "euiColorTextAccentSecondary": "#16C5C0", + "euiColorTextSuccess": "#24C292", + "euiColorTextWarning": "#FCD883", + "euiColorTextDanger": "#F6726A", + "euiColorTextParagraph": "#CAD3E2", + "euiColorTextHeading": "#E3E8F2", + "euiColorTextSubdued": "#8E9FBC", + "euiColorTextDisabled": "#6A7FA0", + "euiColorTextInverse": "#07101F", + "euiColorBackgroundBasePrimary": "#0A2342", + "euiColorBackgroundBaseAccent": "#351725", + "euiColorBackgroundBaseAccentSecondary": "#03282B", + "euiColorBackgroundBaseSuccess": "#092A26", + "euiColorBackgroundBaseWarning": "#2C2721", + "euiColorBackgroundBaseDanger": "#351721", + "euiColorBackgroundBaseSubdued": "#07101F", + "euiColorBackgroundBasePlain": "#0B1628", + "euiColorBackgroundBaseDisabled": "#1D2A3E", + "euiColorBackgroundBaseHighlighted": "#172336", + "euiColorBackgroundBaseFormsPrepend": "#243147", + "euiColorBackgroundBaseFormsControlDisabled": "#2B394F", + "euiColorBackgroundBaseInteractiveHover": "rgba(255,255,255, 0.08)", + "euiColorBackgroundBaseInteractiveSelect": "#0D2F5E", + "euiColorBackgroundBaseInteractiveOverlay": "rgba(43,57,79, 0.7)", + "euiColorBackgroundBaseSkeletonEdge": "rgba(255,255,255, 0.16)", + "euiColorBackgroundBaseSkeletonMiddle": "rgba(255,255,255, 0.08)", + "euiColorBackgroundLightPrimary": "#0D2F5E", + "euiColorBackgroundLightAccent": "#481E32", + "euiColorBackgroundLightAccentSecondary": "#023436", + "euiColorBackgroundLightSuccess": "#0D362B", + "euiColorBackgroundLightWarning": "#3D3014", + "euiColorBackgroundLightDanger": "#491D27", + "euiColorBackgroundLightText": "#1D2A3E", + "euiColorBackgroundFilledPrimary": "#61A2FF", + "euiColorBackgroundFilledAccent": "#EE72A6", + "euiColorBackgroundFilledAccentSecondary": "#16C5C0", + "euiColorBackgroundFilledSuccess": "#24C292", + "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledDanger": "#F6726A", + "euiColorBackgroundFilledText": "#8E9FBC", + "euiColorBorderBasePrimary": "#123778", + "euiColorBorderBaseAccent": "#5E2140", + "euiColorBorderBaseAccentSecondary": "#044949", + "euiColorBorderBaseSuccess": "#094837", + "euiColorBorderBaseWarning": "#513910", + "euiColorBorderBaseDanger": "#5E2129", + "euiColorBorderBasePlain": "#485975", + "euiColorBorderBaseSubdued": "#2B394F", + "euiColorBorderBaseDisabled": "#485975", + "euiColorBorderBaseFloating": "#2B394F", + "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)", + "euiColorBorderBaseFormsControl": "#6A7FA0", + "euiColorBorderStrongPrimary": "#61A2FF", + "euiColorBorderStrongAccent": "#EE72A6", + "euiColorBorderStrongAccentSecondary": "#16C5C0", + "euiColorBorderStrongSuccess": "#24C292", + "euiColorBorderStrongWarning": "#FACB3D", + "euiColorBorderStrongDanger": "#F6726A" +} diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_light.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts similarity index 67% rename from packages/eui/src-docs/src/views/theme/_json/eui_theme_light.json.d.ts rename to packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts index a80c2b69b00..46176116e6b 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_light.json.d.ts +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts @@ -1,4 +1,4 @@ -declare module '@elastic/eui/dist/eui_theme_light.json' { +declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { const sassVariables: { euiZDataGrid: number; euiZHeaderBelowDataGrid: number; @@ -39,75 +39,13 @@ declare module '@elastic/eui/dist/eui_theme_light.json' { euiButtonTypes: { primary: string; accent: string; + accentSecondary: string; success: string; warning: string; danger: string; ghost: string; text: string; }; - euiPaletteColorBlind: { - euiColorVis0: { - graphic: string; - behindText: string; - }; - euiColorVis1: { - graphic: string; - behindText: string; - }; - euiColorVis2: { - graphic: string; - behindText: string; - }; - euiColorVis3: { - graphic: string; - behindText: string; - }; - euiColorVis4: { - graphic: string; - behindText: string; - }; - euiColorVis5: { - graphic: string; - behindText: string; - }; - euiColorVis6: { - graphic: string; - behindText: string; - }; - euiColorVis7: { - graphic: string; - behindText: string; - }; - euiColorVis8: { - graphic: string; - behindText: string; - }; - euiColorVis9: { - graphic: string; - behindText: string; - }; - }; - euiPaletteColorBlindKeys: string; - euiColorVis0: string; - euiColorVis1: string; - euiColorVis2: string; - euiColorVis3: string; - euiColorVis4: string; - euiColorVis5: string; - euiColorVis6: string; - euiColorVis7: string; - euiColorVis8: string; - euiColorVis9: string; - euiColorVis0_behindText: string; - euiColorVis1_behindText: string; - euiColorVis2_behindText: string; - euiColorVis3_behindText: string; - euiColorVis4_behindText: string; - euiColorVis5_behindText: string; - euiColorVis6_behindText: string; - euiColorVis7_behindText: string; - euiColorVis8_behindText: string; - euiColorVis9_behindText: string; euiFontWeightLight: number; euiFontWeightRegular: number; euiFontWeightMedium: number; @@ -182,6 +120,7 @@ declare module '@elastic/eui/dist/eui_theme_light.json' { plain: string; subdued: string; accent: string; + accentSecondary: string; primary: string; success: string; warning: string; @@ -279,10 +218,123 @@ declare module '@elastic/eui/dist/eui_theme_light.json' { euiZFlyout: number; euiZMaskBelowHeader: number; euiZContent: number; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiColorVisAsTextLight0: string; + euiColorVisAsTextLight1: string; + euiColorVisAsTextLight2: string; + euiColorVisAsTextLight3: string; + euiColorVisAsTextLight4: string; + euiColorVisAsTextLight5: string; + euiColorVisAsTextLight6: string; + euiColorVisAsTextDark0: string; + euiColorVisAsTextDark1: string; + euiColorVisAsTextDark2: string; + euiColorVisAsTextDark3: string; + euiColorVisAsTextDark4: string; + euiColorVisAsTextDark5: string; + euiColorVisAsTextDark6: string; + euiColorVisSuccess0: string; + euiColorVisSuccess1: string; + euiColorVisWarning0: string; + euiColorVisDanger0: string; + euiColorVisDanger1: string; + euiColorVisNeutral0: string; + euiColorVisGrey0: string; + euiColorVisGrey1: string; + euiColorVisGrey2: string; + euiColorVisGrey3: string; + euiColorVisWarm0: string; + euiColorVisWarm1: string; + euiColorVisWarm2: string; + euiColorVisCool0: string; + euiColorVisCool1: string; + euiColorVisCool2: string; + euiColorVisComplementary0: string; + euiColorVisComplementary1: string; + euiColorSeverity0: string; + euiColorSeverity1: string; + euiColorSeverity2: string; + euiColorSeverity3: string; + euiColorSeverity4: string; + euiColorSeverity5: string; + euiColorSeverity6: string; + euiColorSeverity7: string; + euiColorSeverity8: string; + euiColorSeverity9: string; + euiColorSeverity10: string; + euiColorSeverity11: string; + euiColorSeverity12: string; + euiColorSeverity13: string; + euiColorSeverity14: string; + euiColorChartLines: string; + euiColorChartBand: string; euiColorGhost: string; euiColorInk: string; euiColorPrimary: string; euiColorAccent: string; + euiColorAccentSecondary: string; euiColorSuccess: string; euiColorWarning: string; euiColorDanger: string; @@ -306,8 +358,68 @@ declare module '@elastic/eui/dist/eui_theme_light.json' { euiColorDangerText: string; euiColorDisabledText: string; euiLinkColor: string; - euiColorChartLines: string; - euiColorChartBand: string; + euiColorPlainLight: string; + euiColorPlainDark: string; + euiColorTextPrimary: string; + euiColorTextAccent: string; + euiColorTextAccentSecondary: string; + euiColorTextSuccess: string; + euiColorTextWarning: string; + euiColorTextDanger: string; + euiColorTextParagraph: string; + euiColorTextHeading: string; + euiColorTextSubdued: string; + euiColorTextDisabled: string; + euiColorTextInverse: string; + euiColorBackgroundBasePrimary: string; + euiColorBackgroundBaseAccent: string; + euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseSuccess: string; + euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseDanger: string; + euiColorBackgroundBaseSubdued: string; + euiColorBackgroundBasePlain: string; + euiColorBackgroundBaseDisabled: string; + euiColorBackgroundBaseHighlighted: string; + euiColorBackgroundBaseFormsPrepend: string; + euiColorBackgroundBaseFormsControlDisabled: string; + euiColorBackgroundBaseInteractiveHover: string; + euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveOverlay: string; + euiColorBackgroundBaseSkeletonEdge: string; + euiColorBackgroundBaseSkeletonMiddle: string; + euiColorBackgroundLightPrimary: string; + euiColorBackgroundLightAccent: string; + euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightSuccess: string; + euiColorBackgroundLightWarning: string; + euiColorBackgroundLightDanger: string; + euiColorBackgroundLightText: string; + euiColorBackgroundFilledPrimary: string; + euiColorBackgroundFilledAccent: string; + euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledSuccess: string; + euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledDanger: string; + euiColorBackgroundFilledText: string; + euiColorBorderBasePrimary: string; + euiColorBorderBaseAccent: string; + euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseSuccess: string; + euiColorBorderBaseWarning: string; + euiColorBorderBaseDanger: string; + euiColorBorderBasePlain: string; + euiColorBorderBaseSubdued: string; + euiColorBorderBaseDisabled: string; + euiColorBorderBaseFloating: string; + euiColorBorderBaseFormsColorSwatch: string; + euiColorBorderBaseFormsControl: string; + euiColorBorderStrongPrimary: string; + euiColorBorderStrongAccent: string; + euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongSuccess: string; + euiColorBorderStrongWarning: string; + euiColorBorderStrongDanger: string; }; export default sassVariables; } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json new file mode 100644 index 00000000000..6285c91ec37 --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json @@ -0,0 +1,422 @@ +{ + "euiZDataGrid": 999, + "euiZHeaderBelowDataGrid": 998, + "euiZDataGridCellPopover": 1000, + "euiDataGridCellPaddingS": "4px", + "euiDataGridCellPaddingM": "6px", + "euiDataGridCellPaddingL": "8px", + "euiTableHoverColor": "rgba(54, 95, 178, 0.06)", + "euiTableSelectedColor": "#EDEFF3", + "euiTableHoverSelectedColor": "rgba(54, 95, 178, 0.06)", + "euiTableActionsBorderColor": "#E3E8F2", + "euiTableHoverClickableColor": "rgba(54, 95, 178, 0.06)", + "euiTableFocusClickableColor": "rgba(54, 95, 178, 0.06)", + "euiContrastRatioText": 4.5, + "euiContrastRatioGraphic": 3, + "euiContrastRatioDisabled": 2, + "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", + "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", + "euiAnimSpeedExtraFast": "90ms", + "euiAnimSpeedFast": "150ms", + "euiAnimSpeedNormal": "250ms", + "euiAnimSpeedSlow": "350ms", + "euiAnimSpeedExtraSlow": "500ms", + "euiBorderWidthThin": "1px", + "euiBorderWidthThick": "2px", + "euiBorderColor": "#E3E8F2", + "euiBorderRadius": "6px", + "euiBorderRadiusSmall": "4px", + "euiBorderThick": "2px solid #E3E8F2", + "euiBorderThin": "1px solid #E3E8F2", + "euiBorderEditable": "2px dotted #E3E8F2", + "euiButtonHeight": "40px", + "euiButtonHeightSmall": "32px", + "euiButtonHeightXSmall": "24px", + "euiButtonColorDisabled": "#ECF1F9", + "euiButtonColorDisabledText": "#798EAF", + "euiButtonColorGhostDisabled": "#ECF1F9", + "euiButtonTypes": { + "primary": "#0B64DD", + "accent": "#BC1E70", + "accentSecondary": "#008B87", + "success": "#008A5E", + "warning": "#FACB3D", + "danger": "#C61E25", + "ghost": "#ffffff", + "text": "#5A6D8C" + }, + "euiFontWeightLight": 300, + "euiFontWeightRegular": 400, + "euiFontWeightMedium": 450, + "euiFontWeightSemiBold": 500, + "euiFontWeightBold": 600, + "euiCodeFontWeightRegular": 400, + "euiCodeFontWeightBold": 600, + "euiFormMaxWidth": "400px", + "euiFormControlHeight": "40px", + "euiFormControlCompressedHeight": "32px", + "euiFormControlPadding": "12px", + "euiFormControlCompressedPadding": "8px", + "euiFormControlBorderRadius": "6px", + "euiFormControlCompressedBorderRadius": "4px", + "euiRadioSize": "16px", + "euiCheckBoxSize": "16px", + "euiCheckboxBorderRadius": "4px", + "euiSwitchHeight": "20px", + "euiSwitchWidth": "44px", + "euiSwitchThumbSize": "20px", + "euiSwitchIconHeight": "16px", + "euiSwitchHeightCompressed": "16px", + "euiSwitchWidthCompressed": "28px", + "euiSwitchThumbSizeCompressed": "16px", + "euiSwitchHeightMini": "10px", + "euiSwitchWidthMini": "22px", + "euiSwitchThumbSizeMini": "10px", + "euiFormBackgroundColor": "#F6F9FC", + "euiFormBackgroundDisabledColor": "#ECF1F9", + "euiFormBackgroundReadOnlyColor": "#FFFFFF", + "euiFormBorderOpaqueColor": "#1c2390", + "euiFormBorderColor": "#CAD3E2", + "euiFormBorderDisabledColor": "#CAD3E2", + "euiFormCustomControlDisabledIconColor": "#798EAF", + "euiFormCustomControlBorderColor": "#CAD3E2", + "euiFormControlDisabledColor": "#CAD3E2", + "euiFormControlBoxShadow": "0 0 rgba(0, 0, 0, 0)", + "euiFormControlPlaceholderText": "#5A6D8C", + "euiFormInputGroupLabelBackground": "#ECF1F9", + "euiFormInputGroupBorder": "none", + "euiSwitchOffColor": "#5A6D8C", + "euiFormControlIconSizes": { + "small": "12px", + "medium": "16px", + "large": "24px", + "xLarge": "32px", + "xxLarge": "40px" + }, + "euiFormControlLayoutGroupInputHeight": "38px", + "euiFormControlLayoutGroupInputCompressedHeight": "30px", + "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px", + "euiHeaderBackgroundColor": "#FFFFFF", + "euiHeaderDarkBackgroundColor": "#0B1628", + "euiHeaderBorderColor": "#E3E8F2", + "euiHeaderBreadcrumbColor": "#D9E8FF", + "euiHeaderHeight": "48px", + "euiHeaderChildSize": "40px", + "euiHeaderHeightCompensation": "48px", + "euiPageDefaultMaxWidth": "1200px", + "euiPageSidebarMinWidth": "192px", + "euiPanelPaddingModifiers": { + "paddingSmall": "8px", + "paddingMedium": "16px", + "paddingLarge": "24px" + }, + "euiPanelBorderRadiusModifiers": { + "borderRadiusNone": 0, + "borderRadiusMedium": "6px" + }, + "euiPanelBackgroundColorModifiers": { + "transparent": "rgba(0, 0, 0, 0)", + "plain": "#FFFFFF", + "subdued": "#F6F9FC", + "accent": "#FFEBF5", + "accentSecondary": "#E2F9F7", + "primary": "#E8F1FF", + "success": "#E2F8F0", + "warning": "#FDF3D8", + "danger": "#FFE8E5" + }, + "euiBreakpoints": { + "xs": 0, + "s": "575px", + "m": "768px", + "l": "992px", + "xl": "1200px" + }, + "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", + "euiShadowColor": "#000000", + "euiSize": "16px", + "euiSizeXS": "4px", + "euiSizeS": "8px", + "euiSizeM": "12px", + "euiSizeL": "24px", + "euiSizeXL": "32px", + "euiSizeXXL": "40px", + "euiScrollBar": "16px", + "euiScrollBarCorner": "4px", + "euiScrollBarCornerThin": "6px", + "euiFocusRingColor": "#1750BA", + "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", + "euiFocusRingAnimStartSize": "2px", + "euiFocusRingAnimStartSizeLarge": "10px", + "euiFocusRingSizeLarge": "4px", + "euiFocusRingSize": "2px", + "euiFocusTransparency": 0.9, + "euiFocusTransparencyPercent": "90%", + "euiFocusBackgroundColor": "#ECF1F9", + "euiFontFamily": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", + "euiFontFeatureSettings": "calt 1 kern 1 liga 1", + "euiTextScale": "1,875, 1.5, 1.25, 1, .875, .75", + "euiFontSize": "14px", + "euiFontSizeXS": "12px", + "euiFontSizeS": "14px", + "euiFontSizeM": "16px", + "euiFontSizeL": "20px", + "euiFontSizeXL": "24px", + "euiFontSizeXXL": "30px", + "euiLineHeight": 1.5, + "euiBodyLineHeight": 1.142857143, + "euiTitles": { + "xxxs": { + "font-size": "12px", + "line-height": "1.1429rem", + "font-weight": 600 + }, + "xxs": { + "font-size": "14px", + "line-height": "1.4286rem", + "font-weight": 600 + }, + "xs": { + "font-size": "16px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "s": { + "font-size": "20px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "m": { + "font-size": "24px", + "line-height": "2rem", + "font-weight": 600 + }, + "l": { + "font-size": "30px", + "line-height": "2.5714rem", + "font-weight": 600 + } + }, + "euiZLevel0": 0, + "euiZLevel1": 1000, + "euiZLevel2": 2000, + "euiZLevel3": 3000, + "euiZLevel4": 4000, + "euiZLevel5": 5000, + "euiZLevel6": 6000, + "euiZLevel7": 7000, + "euiZLevel8": 8000, + "euiZLevel9": 9000, + "euiZToastList": 9000, + "euiZModal": 8000, + "euiZMask": 6000, + "euiZNavigation": 6000, + "euiZContentMenu": 2000, + "euiZHeader": 1000, + "euiZFlyout": 1000, + "euiZMaskBelowHeader": 1000, + "euiZContent": 0, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#16C5C0", + "behindText": "#16C5C0" + }, + "euiColorVis1": { + "graphic": "#98E6E2", + "behindText": "#98E6E2" + }, + "euiColorVis2": { + "graphic": "#61A2FF", + "behindText": "#61A2FF" + }, + "euiColorVis3": { + "graphic": "#BFDBFF", + "behindText": "#BFDBFF" + }, + "euiColorVis4": { + "graphic": "#EE72A6", + "behindText": "#EE72A6" + }, + "euiColorVis5": { + "graphic": "#FFC7DB", + "behindText": "#FFC7DB" + }, + "euiColorVis6": { + "graphic": "#F6726A", + "behindText": "#F6726A" + }, + "euiColorVis7": { + "graphic": "#FFC9C2", + "behindText": "#FFC9C2" + }, + "euiColorVis8": { + "graphic": "#EAAE01", + "behindText": "#EAAE01" + }, + "euiColorVis9": { + "graphic": "#FCD883", + "behindText": "#FCD883" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#16C5C0", + "euiColorVis1": "#A6EDEA", + "euiColorVis2": "#61A2FF", + "euiColorVis3": "#BFDBFF", + "euiColorVis4": "#EE72A6", + "euiColorVis5": "#FFC7DB", + "euiColorVis6": "#F6726A", + "euiColorVis7": "#FFC9C2", + "euiColorVis8": "#EAAE01", + "euiColorVis9": "#FCD883", + "euiColorVis0_behindText": "#16C5C0", + "euiColorVis1_behindText": "#A6EDEA", + "euiColorVis2_behindText": "#61A2FF", + "euiColorVis3_behindText": "#B4D5FF", + "euiColorVis4_behindText": "#EE72A6", + "euiColorVis5_behindText": "#FFC7DB", + "euiColorVis6_behindText": "#F6726A", + "euiColorVis7_behindText": "#FFC9C2", + "euiColorVis8_behindText": "#EAAE01", + "euiColorVis9_behindText": "#FCD883", + "euiColorVisAsTextLight0": "#047471", + "euiColorVisAsTextLight1": "#1750BA", + "euiColorVisAsTextLight2": "#A11262", + "euiColorVisAsTextLight3": "#A71627", + "euiColorVisAsTextLight4": "#825803", + "euiColorVisAsTextLight5": "#09724D", + "euiColorVisAsTextLight6": "#6B3C9F", + "euiColorVisAsTextDark0": "#16C5C0", + "euiColorVisAsTextDark1": "#61A2FF", + "euiColorVisAsTextDark2": "#EE72A6", + "euiColorVisAsTextDark3": "#F6726A", + "euiColorVisAsTextDark4": "#EAAE01", + "euiColorVisAsTextDark5": "#24C292", + "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisSuccess0": "#24C292", + "euiColorVisSuccess1": "#AEE8D2", + "euiColorVisWarning0": "#FCD883", + "euiColorVisDanger0": "#F6726A", + "euiColorVisDanger1": "#FFC9C2", + "euiColorVisNeutral0": "#F6F9FC", + "euiColorSeverity0": "#E3E6EB", + "euiColorSeverity1": "#5A6D8C", + "euiColorSeverity2": "#7186A8", + "euiColorSeverity3": "#8E9FBC", + "euiColorSeverity4": "#ABB9D0", + "euiColorSeverity5": "#CAD3E2", + "euiColorSeverity6": "#FDE9B5", + "euiColorSeverity7": "#FCD883", + "euiColorSeverity8": "#FFC9C2", + "euiColorSeverity9": "#FFB5AD", + "euiColorSeverity10": "#FC9188", + "euiColorSeverity11": "#F6726A", + "euiColorSeverity12": "#EE4C48", + "euiColorSeverity13": "#DA3737", + "euiColorSeverity14": "#C61E25", + "euiColorVisGrey0": "#CAD3E2", + "euiColorVisGrey1": "#8E9FBC", + "euiColorVisGrey2": "#5A6D8C", + "euiColorVisGrey3": "#1D2A3E", + "euiColorVisWarm0": "#FFE8E5", + "euiColorVisWarm1": "#FFB5AD", + "euiColorVisWarm2": "#F6726A", + "euiColorVisCool0": "#E8F1FF", + "euiColorVisCool1": "#A3CBFF", + "euiColorVisCool2": "#61A2FF", + "euiColorVisComplementary0": "#61A2FF", + "euiColorVisComplementary1": "#EAAE01", + "euiColorChartLines": "#CAD3E2", + "euiColorChartBand": "#F6F9FC", + "euiColorGhost": "#FFFFFF", + "euiColorInk": "#000000", + "euiColorPrimary": "#0B64DD", + "euiColorAccent": "#BC1E70", + "euiColorAccentSecondary": "#008B87", + "euiColorSuccess": "#008A5E", + "euiColorWarning": "#FACB3D", + "euiColorDanger": "#C61E25", + "euiColorEmptyShade": "#FFFFFF", + "euiColorLightestShade": "#ECF1F9", + "euiColorLightShade": "#CAD3E2", + "euiColorMediumShade": "#8E9FBC", + "euiColorDarkShade": "#5A6D8C", + "euiColorDarkestShade": "#2B394F", + "euiColorFullShade": "#07101F", + "euiPageBackgroundColor": "#F6F9FC", + "euiColorHighlight": "#E8F1FF", + "euiTextColor": "#1D2A3E", + "euiTitleColor": "#111C2C", + "euiTextSubduedColor": "#516381", + "euiColorDisabled": "#E3E8F2", + "euiColorPrimaryText": "#1750BA", + "euiColorSuccessText": "#09724D", + "euiColorAccentText": "#A11262", + "euiColorWarningText": "#6A4906", + "euiColorDangerText": "#A71627", + "euiColorDisabledText": "#798EAF", + "euiLinkColor": "#0B64DD", + "euiColorPlainLight": "#FFFFFF", + "euiColorPlainDark": "#07101F", + "euiColorTextPrimary": "#1750BA", + "euiColorTextAccent": "#A11262", + "euiColorTextAccentSecondary": "#047471", + "euiColorTextSuccess": "#09724D", + "euiColorTextWarning": "#6A4906", + "euiColorTextDanger": "#A71627", + "euiColorTextParagraph": "#1D2A3E", + "euiColorTextHeading": "#111C2C", + "euiColorTextSubdued": "#516381", + "euiColorTextDisabled": "#798EAF", + "euiColorTextInverse": "#FFFFFF", + "euiColorBackgroundBasePrimary": "#E8F1FF", + "euiColorBackgroundBaseAccent": "#FFEBF5", + "euiColorBackgroundBaseAccentSecondary": "#E2F9F7", + "euiColorBackgroundBaseSuccess": "#E2F8F0", + "euiColorBackgroundBaseWarning": "#FDF3D8", + "euiColorBackgroundBaseDanger": "#FFE8E5", + "euiColorBackgroundBaseSubdued": "#F6F9FC", + "euiColorBackgroundBasePlain": "#FFFFFF", + "euiColorBackgroundBaseDisabled": "#ECF1F9", + "euiColorBackgroundBaseHighlighted": "#F6F9FC", + "euiColorBackgroundBaseFormsPrepend": "#ECF1F9", + "euiColorBackgroundBaseFormsControlDisabled": "#CAD3E2", + "euiColorBackgroundBaseInteractiveHover": "rgba(23,80,186, 0.04)", + "euiColorBackgroundBaseInteractiveSelect": "#E8F1FF", + "euiColorBackgroundBaseInteractiveOverlay": "rgba(72,89,117, 0.7)", + "euiColorBackgroundBaseSkeletonEdge": "rgba(72,89,117, 0.16)", + "euiColorBackgroundBaseSkeletonMiddle": "rgba(72,89,117, 0.04)", + "euiColorBackgroundLightPrimary": "#D9E8FF", + "euiColorBackgroundLightAccent": "#FDDDE9", + "euiColorBackgroundLightAccentSecondary": "#C9F3F0", + "euiColorBackgroundLightSuccess": "#C9F3E3", + "euiColorBackgroundLightWarning": "#FDE9B5", + "euiColorBackgroundLightDanger": "#FDDDD8", + "euiColorBackgroundLightText": "#E3E8F2", + "euiColorBackgroundFilledPrimary": "#0B64DD", + "euiColorBackgroundFilledAccent": "#BC1E70", + "euiColorBackgroundFilledAccentSecondary": "#008B87", + "euiColorBackgroundFilledSuccess": "#008A5E", + "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledDanger": "#C61E25", + "euiColorBackgroundFilledText": "#5A6D8C", + "euiColorBorderBasePrimary": "#BFDBFF", + "euiColorBorderBaseAccent": "#FFC7DB", + "euiColorBorderBaseAccentSecondary": "#A6EDEA", + "euiColorBorderBaseSuccess": "#AEE8D2", + "euiColorBorderBaseWarning": "#FCD883", + "euiColorBorderBaseDanger": "#FFC9C2", + "euiColorBorderBasePlain": "#CAD3E2", + "euiColorBorderBaseSubdued": "#E3E8F2", + "euiColorBorderBaseDisabled": "#CAD3E2", + "euiColorBorderBaseFloating": "transparent", + "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)", + "euiColorBorderBaseFormsControl": "#8E9FBC", + "euiColorBorderStrongPrimary": "#1750BA", + "euiColorBorderStrongAccent": "#A11262", + "euiColorBorderStrongAccentSecondary": "#047471", + "euiColorBorderStrongSuccess": "#09724D", + "euiColorBorderStrongWarning": "#825803", + "euiColorBorderStrongDanger": "#A71627" +} diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts new file mode 100644 index 00000000000..16afb1dd999 --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts @@ -0,0 +1,425 @@ +declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { + const sassVariables: { + euiZDataGrid: number; + euiZHeaderBelowDataGrid: number; + euiZDataGridCellPopover: number; + euiDataGridCellPaddingS: string; + euiDataGridCellPaddingM: string; + euiDataGridCellPaddingL: string; + euiTableHoverColor: string; + euiTableSelectedColor: string; + euiTableHoverSelectedColor: string; + euiTableActionsBorderColor: string; + euiTableHoverClickableColor: string; + euiTableFocusClickableColor: string; + euiContrastRatioText: number; + euiContrastRatioGraphic: number; + euiContrastRatioDisabled: number; + euiAnimSlightBounce: string; + euiAnimSlightResistance: string; + euiAnimSpeedExtraFast: string; + euiAnimSpeedFast: string; + euiAnimSpeedNormal: string; + euiAnimSpeedSlow: string; + euiAnimSpeedExtraSlow: string; + euiBorderWidthThin: string; + euiBorderWidthThick: string; + euiBorderColor: string; + euiBorderRadius: string; + euiBorderRadiusSmall: string; + euiBorderThick: string; + euiBorderThin: string; + euiBorderEditable: string; + euiButtonHeight: string; + euiButtonHeightSmall: string; + euiButtonHeightXSmall: string; + euiButtonColorDisabled: string; + euiButtonColorDisabledText: string; + euiButtonColorGhostDisabled: string; + euiButtonTypes: { + primary: string; + accent: string; + accentSecondary: string; + success: string; + warning: string; + danger: string; + ghost: string; + text: string; + }; + euiFontWeightLight: number; + euiFontWeightRegular: number; + euiFontWeightMedium: number; + euiFontWeightSemiBold: number; + euiFontWeightBold: number; + euiCodeFontWeightRegular: number; + euiCodeFontWeightBold: number; + euiFormMaxWidth: string; + euiFormControlHeight: string; + euiFormControlCompressedHeight: string; + euiFormControlPadding: string; + euiFormControlCompressedPadding: string; + euiFormControlBorderRadius: string; + euiFormControlCompressedBorderRadius: string; + euiRadioSize: string; + euiCheckBoxSize: string; + euiCheckboxBorderRadius: string; + euiSwitchHeight: string; + euiSwitchWidth: string; + euiSwitchThumbSize: string; + euiSwitchIconHeight: string; + euiSwitchHeightCompressed: string; + euiSwitchWidthCompressed: string; + euiSwitchThumbSizeCompressed: string; + euiSwitchHeightMini: string; + euiSwitchWidthMini: string; + euiSwitchThumbSizeMini: string; + euiFormBackgroundColor: string; + euiFormBackgroundDisabledColor: string; + euiFormBackgroundReadOnlyColor: string; + euiFormBorderOpaqueColor: string; + euiFormBorderColor: string; + euiFormBorderDisabledColor: string; + euiFormCustomControlDisabledIconColor: string; + euiFormCustomControlBorderColor: string; + euiFormControlDisabledColor: string; + euiFormControlBoxShadow: string; + euiFormControlPlaceholderText: string; + euiFormInputGroupLabelBackground: string; + euiFormInputGroupBorder: string; + euiSwitchOffColor: string; + euiFormControlIconSizes: { + small: string; + medium: string; + large: string; + xLarge: string; + xxLarge: string; + }; + euiFormControlLayoutGroupInputHeight: string; + euiFormControlLayoutGroupInputCompressedHeight: string; + euiFormControlLayoutGroupInputCompressedBorderRadius: string; + euiHeaderBackgroundColor: string; + euiHeaderDarkBackgroundColor: string; + euiHeaderBorderColor: string; + euiHeaderBreadcrumbColor: string; + euiHeaderHeight: string; + euiHeaderChildSize: string; + euiHeaderHeightCompensation: string; + euiPageDefaultMaxWidth: string; + euiPageSidebarMinWidth: string; + euiPanelPaddingModifiers: { + paddingSmall: string; + paddingMedium: string; + paddingLarge: string; + }; + euiPanelBorderRadiusModifiers: { + borderRadiusNone: number; + borderRadiusMedium: string; + }; + euiPanelBackgroundColorModifiers: { + transparent: string; + plain: string; + subdued: string; + accent: string; + accentSecondary: string; + primary: string; + success: string; + warning: string; + danger: string; + }; + euiBreakpoints: { + xs: number; + s: string; + m: string; + l: string; + xl: string; + }; + euiBreakpointKeys: string; + euiShadowColor: string; + euiSize: string; + euiSizeXS: string; + euiSizeS: string; + euiSizeM: string; + euiSizeL: string; + euiSizeXL: string; + euiSizeXXL: string; + euiScrollBar: string; + euiScrollBarCorner: string; + euiScrollBarCornerThin: string; + euiFocusRingColor: string; + euiFocusRingAnimStartColor: string; + euiFocusRingAnimStartSize: string; + euiFocusRingAnimStartSizeLarge: string; + euiFocusRingSizeLarge: string; + euiFocusRingSize: string; + euiFocusTransparency: number; + euiFocusTransparencyPercent: string; + euiFocusBackgroundColor: string; + euiFontFamily: string; + euiCodeFontFamily: string; + euiFontFeatureSettings: string; + euiTextScale: string; + euiFontSize: string; + euiFontSizeXS: string; + euiFontSizeS: string; + euiFontSizeM: string; + euiFontSizeL: string; + euiFontSizeXL: string; + euiFontSizeXXL: string; + euiLineHeight: number; + euiBodyLineHeight: number; + euiTitles: { + xxxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + s: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + m: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + l: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + }; + euiZLevel0: number; + euiZLevel1: number; + euiZLevel2: number; + euiZLevel3: number; + euiZLevel4: number; + euiZLevel5: number; + euiZLevel6: number; + euiZLevel7: number; + euiZLevel8: number; + euiZLevel9: number; + euiZToastList: number; + euiZModal: number; + euiZMask: number; + euiZNavigation: number; + euiZContentMenu: number; + euiZHeader: number; + euiZFlyout: number; + euiZMaskBelowHeader: number; + euiZContent: number; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiColorVisAsTextLight0: string; + euiColorVisAsTextLight1: string; + euiColorVisAsTextLight2: string; + euiColorVisAsTextLight3: string; + euiColorVisAsTextLight4: string; + euiColorVisAsTextLight5: string; + euiColorVisAsTextLight6: string; + euiColorVisAsTextDark0: string; + euiColorVisAsTextDark1: string; + euiColorVisAsTextDark2: string; + euiColorVisAsTextDark3: string; + euiColorVisAsTextDark4: string; + euiColorVisAsTextDark5: string; + euiColorVisAsTextDark6: string; + euiColorVisSuccess0: string; + euiColorVisSuccess1: string; + euiColorVisWarning0: string; + euiColorVisDanger0: string; + euiColorVisDanger1: string; + euiColorVisNeutral0: string; + euiColorVisGrey0: string; + euiColorVisGrey1: string; + euiColorVisGrey2: string; + euiColorVisGrey3: string; + euiColorVisWarm0: string; + euiColorVisWarm1: string; + euiColorVisWarm2: string; + euiColorVisCool0: string; + euiColorVisCool1: string; + euiColorVisCool2: string; + euiColorVisComplementary0: string; + euiColorVisComplementary1: string; + euiColorSeverity0: string; + euiColorSeverity1: string; + euiColorSeverity2: string; + euiColorSeverity3: string; + euiColorSeverity4: string; + euiColorSeverity5: string; + euiColorSeverity6: string; + euiColorSeverity7: string; + euiColorSeverity8: string; + euiColorSeverity9: string; + euiColorSeverity10: string; + euiColorSeverity11: string; + euiColorSeverity12: string; + euiColorSeverity13: string; + euiColorSeverity14: string; + euiColorChartLines: string; + euiColorChartBand: string; + euiColorGhost: string; + euiColorInk: string; + euiColorPrimary: string; + euiColorAccent: string; + euiColorAccentSecondary: string; + euiColorSuccess: string; + euiColorWarning: string; + euiColorDanger: string; + euiColorEmptyShade: string; + euiColorLightestShade: string; + euiColorLightShade: string; + euiColorMediumShade: string; + euiColorDarkShade: string; + euiColorDarkestShade: string; + euiColorFullShade: string; + euiPageBackgroundColor: string; + euiColorHighlight: string; + euiTextColor: string; + euiTitleColor: string; + euiTextSubduedColor: string; + euiColorDisabled: string; + euiColorPrimaryText: string; + euiColorSuccessText: string; + euiColorAccentText: string; + euiColorWarningText: string; + euiColorDangerText: string; + euiColorDisabledText: string; + euiLinkColor: string; + euiColorPlainLight: string; + euiColorPlainDark: string; + euiColorTextPrimary: string; + euiColorTextAccent: string; + euiColorTextAccentSecondary: string; + euiColorTextSuccess: string; + euiColorTextWarning: string; + euiColorTextDanger: string; + euiColorTextParagraph: string; + euiColorTextHeading: string; + euiColorTextSubdued: string; + euiColorTextDisabled: string; + euiColorTextInverse: string; + euiColorBackgroundBasePrimary: string; + euiColorBackgroundBaseAccent: string; + euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseSuccess: string; + euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseDanger: string; + euiColorBackgroundBaseSubdued: string; + euiColorBackgroundBasePlain: string; + euiColorBackgroundBaseDisabled: string; + euiColorBackgroundBaseHighlighted: string; + euiColorBackgroundBaseFormsPrepend: string; + euiColorBackgroundBaseFormsControlDisabled: string; + euiColorBackgroundBaseInteractiveHover: string; + euiColorBackgroundBaseInteractiveSelect: string; + euiColorBackgroundBaseInteractiveOverlay: string; + euiColorBackgroundBaseSkeletonEdge: string; + euiColorBackgroundBaseSkeletonMiddle: string; + euiColorBackgroundLightPrimary: string; + euiColorBackgroundLightAccent: string; + euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightSuccess: string; + euiColorBackgroundLightWarning: string; + euiColorBackgroundLightDanger: string; + euiColorBackgroundLightText: string; + euiColorBackgroundFilledPrimary: string; + euiColorBackgroundFilledAccent: string; + euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledSuccess: string; + euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledDanger: string; + euiColorBackgroundFilledText: string; + euiColorBorderBasePrimary: string; + euiColorBorderBaseAccent: string; + euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseSuccess: string; + euiColorBorderBaseWarning: string; + euiColorBorderBaseDanger: string; + euiColorBorderBasePlain: string; + euiColorBorderBaseSubdued: string; + euiColorBorderBaseDisabled: string; + euiColorBorderBaseFloating: string; + euiColorBorderBaseFormsColorSwatch: string; + euiColorBorderBaseFormsControl: string; + euiColorBorderStrongPrimary: string; + euiColorBorderStrongAccent: string; + euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongSuccess: string; + euiColorBorderStrongWarning: string; + euiColorBorderStrongDanger: string; + }; + export default sassVariables; +} diff --git a/packages/eui/src-docs/src/views/theme/_props.tsx b/packages/eui/src-docs/src/views/theme/_props.tsx index 802782b2aa3..b96042b9ad8 100644 --- a/packages/eui/src-docs/src/views/theme/_props.tsx +++ b/packages/eui/src-docs/src/views/theme/_props.tsx @@ -99,7 +99,7 @@ export function getType(type: any, euiTheme: EuiThemeComputed<{}>) { {humanizeType(type.custom.origin.type)} diff --git a/packages/eui/src-docs/src/views/theme/borders/borders.tsx b/packages/eui/src-docs/src/views/theme/borders/borders.tsx index cf0ccca8e82..aeeb1cd7ddd 100644 --- a/packages/eui/src-docs/src/views/theme/borders/borders.tsx +++ b/packages/eui/src-docs/src/views/theme/borders/borders.tsx @@ -1,5 +1,7 @@ import React, { useContext, useMemo } from 'react'; +import { useEuiTheme } from '../../../../../src/services'; +import { AMSTERDAM_NAME_KEY } from '../../../../../src/themes'; import { EuiCode, EuiText } from '../../../../../src/components'; import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; @@ -38,6 +40,7 @@ export const bordersSections = [ ]; export default () => { + const { euiTheme } = useEuiTheme(); const themeContext = useContext(ThemeContext); const currentLanguage = themeContext.themeLanguage; const showSass = currentLanguage.includes('sass'); @@ -113,10 +116,24 @@ export default () => {

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

-

- EUI only has one base color it uses for all borders (or calculated - borders). -

+ {euiTheme.themeName === AMSTERDAM_NAME_KEY ? ( +

+ EUI only has one base color it uses for all borders (or calculated + borders). +

+ ) : ( + <> +

+ EUI has one main base color it uses for almost all borders (or + calculated borders). +

+

+ Only form specific borders use the + euiTheme.colors.borderBasePlain color token + instead. +

+ + )} {colorContent} diff --git a/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx b/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx index 23c749f41b8..003f7ba4a14 100644 --- a/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx +++ b/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx @@ -124,13 +124,13 @@ useIsWithinMinBreakpoint('s')`} font-weight: ${euiTheme.font.weight.bold}; } ${useEuiBreakpoint(['xs', 's'])} { - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; } ${useEuiBreakpoint(['m'])} { - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; } ${useEuiBreakpoint(['l', 'xl'])} { - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } `} > @@ -174,10 +174,10 @@ useIsWithinMinBreakpoint('s')`}

diff --git a/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx b/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx index 041610b9c9c..3ec69060067 100644 --- a/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx +++ b/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx @@ -10,7 +10,7 @@ import { keysOf, } from '../../../../../src'; -import { breakpoint as breakpoints } from '../../../../../src/themes/amsterdam/global_styling/variables/_breakpoint'; +import { breakpoint as breakpoints } from '@elastic/eui-theme-common'; const breakpointKeys = keysOf(breakpoints); import { GuideSection } from '../../../components/guide_section/guide_section'; diff --git a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx index b4749bb0575..0416f635449 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useState } from 'react'; +import React, { FunctionComponent } from 'react'; import { Link } from 'react-router-dom'; import { css } from '@emotion/react'; import { transparentize, useEuiTheme } from '../../../../../src/services'; @@ -9,23 +9,18 @@ import { EuiCode, EuiColorPickerSwatch, EuiText, - useEuiBackgroundColor, - useEuiPaddingSize, BACKGROUND_COLORS, - euiBackgroundColor, - useEuiPaddingCSS, - EuiButtonGroup, - EuiDescribedFormGroup, - EuiPanel, - EuiSpacer, - _EuiBackgroundColorOptions, logicalCSS, + useEuiPaddingCSS, + AMSTERDAM_NAME_KEY, } from '../../../../../src'; import { EuiThemeColors, ThemeRowType } from '../_props'; import { ThemeExample } from '../_components/_theme_example'; import { + background_colors, + border_colors, brand_colors, brand_text_colors, shade_colors, @@ -97,27 +92,31 @@ export const TextJS: FunctionComponent = ({ description }) => { description={ <> {description} -

- If your background color is anything other than or darker than the{' '} - body color, you will want to re-calculate the - high contrast version by using the{' '} - - makeHighContrastColor(foreground)(background) - {' '} - method. -

+ {euiTheme.themeName === AMSTERDAM_NAME_KEY && ( +

+ If your background color is anything other than or darker than + the body color, you will want to re-calculate + the high contrast version by using the{' '} + + + makeHighContrastColor(foreground)(background) + + {' '} + method. +

+ )} } example={
- color: {euiTheme.colors.warningText} + color: {euiTheme.colors.textWarning}
} - snippet={'color: ${euiTheme.colors.warningText};'} + snippet={'color: ${euiTheme.colors.textWarning};'} snippetLanguage="emotion" /> @@ -157,6 +156,111 @@ export const TextValuesJS = () => { ); }; +export const backgroundKeys = Object.keys(background_colors); + +export const BackgroundJS: FunctionComponent = ({ + description, +}) => { + const { euiTheme } = useEuiTheme(); + + return ( + <> + euiTheme.colors[background]} + description={<>{description}} + example={ +
+ + background: {euiTheme.colors.backgroundFilledWarning} + +
+ } + snippet={ + 'background-color: ${euiTheme.colors.backgroundFilledWarning};' + } + snippetLanguage="emotion" + /> + + ); +}; + +export const BackgroundValuesJS = () => { + const { euiTheme } = useEuiTheme(); + const props = getPropsFromComponent(EuiThemeColors); + + return ( + <> + { + return { + id: color, + token: `colors.${color}`, + type: props[color], + // @ts-ignore TODO + value: euiTheme.colors[color], + }; + })} + render={(item) => } + /> + + ); +}; + +export const borderKeys = Object.keys(border_colors); + +export const BorderJS: FunctionComponent = ({ description }) => { + const { euiTheme } = useEuiTheme(); + + return ( + <> + euiTheme.colors[border]} + description={<>{description}} + example={ +
+ border-color: {euiTheme.colors.borderBaseWarning} +
+ } + snippet={'border-color: ${euiTheme.colors.borderBaseWarning};'} + snippetLanguage="emotion" + /> + + ); +}; + +export const BorderValuesJS = () => { + const { euiTheme } = useEuiTheme(); + const props = getPropsFromComponent(EuiThemeColors); + + return ( + <> + { + return { + id: color, + token: `colors.${color}`, + type: props[color], + // @ts-ignore TODO + value: euiTheme.colors[color], + }; + })} + render={(item) => } + /> + + ); +}; + export const shadeKeys = Object.keys(shade_colors); export const ShadeJS: FunctionComponent = ({ description }) => { @@ -224,17 +328,17 @@ export const SpecialJS: FunctionComponent = ({ description }) => {
- This text is always white and the background always black. + This text is always light and the background always dark.
} - snippet={`color: \${euiTheme.colors.ghost}; - background-color: \${euiTheme.colors.ink};`} + snippet={`color: \${euiTheme.colors.plainLight}; + background-color: \${euiTheme.colors.plainDark};`} snippetLanguage="emotion" /> @@ -244,7 +348,12 @@ export const SpecialJS: FunctionComponent = ({ description }) => { export const SpecialValuesJS = () => { const { euiTheme } = useEuiTheme(); const props = getPropsFromComponent(EuiThemeColors); - const allSpecialKeys = specialKeys.concat(['ghost', 'ink']); + const allSpecialKeys = specialKeys.concat([ + 'ghost', + 'ink', + 'plainLight', + 'plainDark', + ]); return ( <> @@ -265,13 +374,15 @@ export const SpecialValuesJS = () => { }; export const UtilsJS = () => { + const { euiTheme } = useEuiTheme(); + return ( <>

To all but ensure proper contrast of text to background, we recommend - using our pre-defined shades of background colors based on the{' '} - EuiTheme brand colors. You can also use{' '} + using the semantic background tokens like{' '} + backgroundBasePrimary. You can also use{' '} EuiPanel {' '} @@ -298,7 +409,9 @@ export const UtilsJS = () => { } example={

- background-color: {useEuiBackgroundColor('accent')} + + background-color: {euiTheme.colors.backgroundBaseAccent} +

} snippetLanguage="tsx" @@ -309,98 +422,6 @@ const cssStyles = [colorStyles['accent']]; /* Your content */ `} /> - - useEuiBackgroundColor(color, method?)} - type="hook" - props={`color: '${BACKGROUND_COLORS.join("' | '")}'; - -method? 'opaque' | 'transparent';`} - description={ -

- Returns just the computed background color for the given{' '} - color. -

- } - example={ -

- {useEuiBackgroundColor('subdued')} -

- } - snippetLanguage="emotion" - snippet={"background: ${useEuiBackgroundColor('subdued')};"} - /> - - ); -}; - -export const UtilsValuesJS = () => { - const euiTheme = useEuiTheme(); - const backgroundButtons = ['opaque', 'transparent'].map((m) => { - return { - id: m, - label: m, - }; - }); - const [backgroundSelected, setBackgroundSelected] = useState( - backgroundButtons[0].id - ); - - return ( - <> - - Different colors for different contexts} - description={ -

- While the hook accepts rendering the value as opaque or - transparent, we highly suggest reserving transparent for use only - during interactive states like hover and focus. -

- } - > - - setBackgroundSelected(id)} - color="accent" - isFullWidth - /> - - - - - { - return { - id: color, - token: - backgroundSelected === 'transparent' - ? `useEuiBackgroundColor('${color}', 'transparent')` - : `useEuiBackgroundColor('${color}')`, - value: euiBackgroundColor(euiTheme, color, { - method: - backgroundSelected as _EuiBackgroundColorOptions['method'], - }), - }; - })} - render={(item) => ( - - )} - /> ); }; diff --git a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx index c39d808a29e..d4c354ddfa2 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx @@ -85,10 +85,10 @@ export const TextSass: FunctionComponent = ({ description }) => { } example={
- color: {values.euiColorWarningText} + color: {values.euiColorTextWarning}
} - snippet={'color: $euiColorWarningText;'} + snippet={'color: $euiColorTextWarning;'} snippetLanguage="scss" /> @@ -97,11 +97,105 @@ export const TextSass: FunctionComponent = ({ description }) => { export const TextValuesSass = () => { const values = useJsonVars(); + const textColors = [ + ...Object.keys(values).filter((v) => v.startsWith('euiColorText')), + ...euiTextColors, + ]; return ( <> { + items={textColors.map((color) => { + return { + id: color, + token: `$${color}`, + value: values[color], + }; + })} + render={(item) => } + /> + + ); +}; + +export const BackgroundSass: FunctionComponent = ({ + description, +}) => { + const values = useJsonVars(); + + return ( + <> + $euiColor[Background]} + description={<>{description}} + example={ +
+ + background: {values.euiColorBackgroundFilledWarning} + +
+ } + snippet={'background-color: $euiColorBackgroundFilledWarning;'} + snippetLanguage="scss" + /> + + ); +}; + +export const BackgroundValuesSass = () => { + const values = useJsonVars(); + const backgroundColors = Object.keys(values).filter((v) => + v.startsWith('euiColorBackground') + ); + + return ( + <> + { + return { + id: color, + token: `$${color}`, + value: values[color], + }; + })} + render={(item) => } + /> + + ); +}; + +export const BorderSass: FunctionComponent = ({ + description, +}) => { + const values = useJsonVars(); + + return ( + <> + $euiColor[Border]} + description={<>{description}} + example={ +
+ border-color: {values.euiColorBorderBaseWarning} +
+ } + snippet={'border-color: $euiColorBorderBaseWarning;'} + snippetLanguage="scss" + /> + + ); +}; + +export const BorderValuesSass = () => { + const values = useJsonVars(); + const borderColors = Object.keys(values).filter((v) => + v.startsWith('euiColorBorder') + ); + + return ( + <> + { return { id: color, token: `$${color}`, @@ -162,6 +256,8 @@ const euiSpecialColors = [ 'euiColorDisabledText', 'euiColorGhost', 'euiColorInk', + 'euiColorPlainLight', + 'euiColorPlainDark', ]; export const SpecialSass: FunctionComponent = ({ @@ -175,12 +271,12 @@ export const SpecialSass: FunctionComponent = ({ example={
- This text is always white and the background always black. + This text is always light and the background always dark.
} - snippet={`color: \$euiColorGhost; -background-color: \$euiColorInk;`} + snippet={`color: \$euiColorPlainLight; +background-color: \$euiColorPlainDark;`} snippetLanguage="scss" /> diff --git a/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx b/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx index ca98bc014b7..aa894dd1ff8 100644 --- a/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx @@ -27,6 +27,7 @@ type ColorSection = { showTextVariants: boolean; matchPanelColor?: boolean; hookName?: string; + tokenName?: string; }; export const ColorSectionJS: FunctionComponent = ({ @@ -36,16 +37,28 @@ export const ColorSectionJS: FunctionComponent = ({ showTextVariants, matchPanelColor, hookName, + tokenName, }) => { const { euiTheme } = useEuiTheme(); + + const colorValue = _colorValue || euiTheme.colors[color]; + const colorsForContrast = showTextVariants ? textVariants : allowedColors; + const colorsWithMinContrast = colorsForContrast.filter((_color) => { + const backgroundColor = colorValue; + const foregroundColor = + euiTheme.colors[_color as keyof _EuiThemeColorsMode] ?? _color; + + const contrast = chroma.contrast(backgroundColor, foregroundColor) ?? 0; + + return contrast && contrast >= minimumContrast; + }); + function colorIsCore(color: string) { return brandKeys.includes(color) || brandTextKeys.includes(color); } - const colorValue = _colorValue || euiTheme.colors[color]; - return ( = ({ minimumContrast={minimumContrast} /> )} - {colorsForContrast.map((color2) => { + {colorsWithMinContrast.map((color2) => { if (colorIsCore(colorValue) && colorIsCore(color2)) { // i.e. don't render if both are core colors return; @@ -80,7 +93,9 @@ export const ColorSectionJS: FunctionComponent = ({ background={_colorValue ? colorValue : color} key={color2} minimumContrast={minimumContrast} - styleString={hookName && `${hookName}('${color}')`} + styleString={ + tokenName ?? (hookName && `${hookName}('${color}')`) + } /> ); })} diff --git a/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx b/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx index ade9ce9dde9..5b7507cfa28 100644 --- a/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx @@ -18,6 +18,7 @@ import { useJsonVars } from '../_json/_get_json_vars'; export const coreColors = [ 'euiColorPrimary', 'euiColorAccent', + 'euiColorAccentSecondary', 'euiColorSuccess', 'euiColorWarning', 'euiColorDanger', @@ -29,6 +30,12 @@ export const coreTextVariants = [ 'euiColorSuccessText', 'euiColorWarningText', 'euiColorDangerText', + 'euiColorTextPrimary', + 'euiColorTextAccent', + 'euiColorTextAccentSecondary', + 'euiColorTextSuccess', + 'euiColorTextWarning', + 'euiColorTextDanger', ]; export const grayColors = [ @@ -43,13 +50,64 @@ export const grayColors = [ export const textOnly = [ 'euiTextColor', - 'euiTextSubduedColor', 'euiTitleColor', + 'euiTextSubduedColor', + 'euiLinkColor', + 'euiColorTextParagraph', + 'euiColorTextHeading', + 'euiColorTextSubdued', + 'euiColorTextDisabled', + 'euiColorTextInverse', +]; + +export const backgroundBaseColors = [ + 'euiColorBackgroundBasePrimary', + 'euiColorBackgroundBaseAccent', + 'euiColorBackgroundBaseAccentSecondary', + 'euiColorBackgroundBaseSuccess', + 'euiColorBackgroundBaseWarning', + 'euiColorBackgroundBaseDanger', + 'euiColorBackgroundBaseSubdued', + 'euiColorBackgroundBaseDisabled', + 'euiColorBackgroundBaseHighlighted', + 'euiColorBackgroundBasePlain', +]; + +export const backgroundLightColors = [ + 'euiColorBackgroundLightPrimary', + 'euiColorBackgroundLightAccent', + 'euiColorBackgroundLightAccentSecondary', + 'euiColorBackgroundLightSuccess', + 'euiColorBackgroundLightWarning', + 'euiColorBackgroundLightDanger', + 'euiColorBackgroundLightText', +]; + +export const backgroundFilledColors = [ + 'euiColorBackgroundFilledPrimary', + 'euiColorBackgroundFilledAccent', + 'euiColorBackgroundFilledAccentSecondary', + 'euiColorBackgroundFilledSuccess', + 'euiColorBackgroundFilledWarning', + 'euiColorBackgroundFilledDanger', + 'euiColorBackgroundFilledText', +]; + +export const backgroundColors = [ + ...backgroundBaseColors, + ...backgroundLightColors, + ...backgroundFilledColors, ]; export const textColors = [...textOnly, 'euiColorGhost', 'euiColorInk']; -export const allowedColors = [...coreColors, ...grayColors]; +export const allowedColors = [ + ...coreColors, + ...grayColors, + 'euiColorDisabled', + 'euiColorGhost', + 'euiColorInk', +]; export const textVariants = [...coreTextVariants, ...textColors]; @@ -71,6 +129,15 @@ export const ColorSectionSass: FunctionComponent = ({ const palette = useJsonVars(); const colorsForContrast = showTextVariants ? textVariants : allowedColors; + const colorsWithMinContrast = colorsForContrast.filter((_color) => { + const backgroundColor = palette[color]; + const foregroundColor = palette[_color]; + + const contrast = chroma.contrast(backgroundColor, foregroundColor); + + return contrast && contrast >= minimumContrast; + }); + function colorIsCore(color: string) { return coreColors.includes(color) || coreTextVariants.includes(color); } @@ -96,7 +163,7 @@ export const ColorSectionSass: FunctionComponent = ({ minimumContrast={minimumContrast} /> )} - {colorsForContrast.map((color2) => { + {colorsWithMinContrast.map((color2) => { if (colorIsCore(color) && colorIsCore(color2)) { // i.e. don't render if both are core colors return; @@ -201,8 +268,10 @@ color: $${foreground};`; function sanitizeColorName(color: string) { const string = color.split('euiColor').pop(); + // Make sure `Color` is removed where `Color` is used at the end of the name + const noColor = string?.replace('Color', ''); // Make sure `eui` is removed if it wasnt the full `euiColor` string - const noEui = string?.split('eui').pop(); + const noEui = noColor?.split('eui').pop(); // Add space between caplital letters return noEui?.replace(/([A-Z])/g, ' $1').trim(); } diff --git a/packages/eui/src-docs/src/views/theme/color/contrast.tsx b/packages/eui/src-docs/src/views/theme/color/contrast.tsx index e9a96a4c286..a8601485b86 100644 --- a/packages/eui/src-docs/src/views/theme/color/contrast.tsx +++ b/packages/eui/src-docs/src/views/theme/color/contrast.tsx @@ -1,4 +1,15 @@ -import React, { useState, useContext, useCallback } from 'react'; +import React, { + useState, + useContext, + useCallback, + FunctionComponent, + useMemo, +} from 'react'; +import { + _EuiThemeBackgroundColors, + getTokenName, +} from '@elastic/eui-theme-common'; + import { ThemeContext } from '../../../components/with_theme'; import { @@ -17,6 +28,9 @@ import { ColorSectionSass, coreColors as sassCoreColors, grayColors as sassGrayColors, + backgroundBaseColors as sassBackgroundBaseColors, + backgroundLightColors as sassBackgroundLightColors, + backgroundFilledColors as sassBackgroundFilledColors, } from './_contrast_sass'; import { ColorSectionJS } from './_contrast_js'; @@ -25,16 +39,12 @@ import { brandKeys, shadeKeys } from './_color_js'; import { ContrastSlider } from './_contrast_slider'; import { ratingAA } from './_contrast_utilities'; import { _EuiThemeColorsMode } from '../../../../../src/global_styling/variables/colors'; -import { - BACKGROUND_COLORS, - _EuiBackgroundColor, - euiBackgroundColor, -} from '../../../../../src/global_styling'; +import { BACKGROUND_COLORS } from '../../../../../src/global_styling'; import { BUTTON_COLORS, euiButtonColor, _EuiButtonColor, -} from '../../../../../src/themes/amsterdam/global_styling/mixins/button'; +} from '../../../../../src/global_styling/mixins/_button'; import { GuideSection } from '../../../components/guide_section/guide_section'; // This array is used inside routes.js to create the sidenav sub-sections @@ -48,6 +58,12 @@ export const contrastSections = [ const background_colors = BACKGROUND_COLORS.filter( (color) => color !== 'transparent' ); +const brand_background_colors = [...BACKGROUND_COLORS, 'text'].filter( + (color) => + !['transparent', 'plain', 'subdued', 'disabled', 'highlighted'].includes( + color + ) +); const backgroundButtons = [ 'container', // 'hover', Commenting out for now since contrast can't be calculated on transparent values @@ -60,15 +76,12 @@ const backgroundButtons = [ }); export default () => { - const euiTheme = useEuiTheme(); const [showTextVariants, setShowTextVariants] = useState(true); const [contrastValue, setContrastValue] = useState(4.5); const [backgroundColors, setBackgroundColors] = useState(background_colors); - const [backgroundFunction, setBackgroundFunction] = useState( - 'useEuiBackgroundColor' - ); + const [backgroundFunction, setBackgroundFunction] = useState(undefined); const [backgroundSelected, setBackgroundSelected] = useState( backgroundButtons[0].id ); @@ -78,12 +91,7 @@ export default () => { case 'container': setBackgroundSelected(id); setBackgroundColors(background_colors); - setBackgroundFunction('useEuiBackgroundColor(color)'); - break; - case 'hover': - setBackgroundSelected(id); - setBackgroundColors(background_colors); - setBackgroundFunction("useEuiBackgroundColor(color, 'transparent')"); + setBackgroundFunction(undefined); break; case 'button': setBackgroundSelected(id); @@ -95,6 +103,33 @@ export default () => { const showSass = useContext(ThemeContext).themeLanguage.includes('sass'); + const backgroundBaseColors = useMemo( + () => + backgroundColors.map((color: string) => { + return getTokenName( + 'backgroundBase', + color + ) as keyof _EuiThemeBackgroundColors; + }), + [backgroundColors] + ); + + const backgroundLightColors = brand_background_colors.map((color: string) => { + return getTokenName( + 'backgroundLight', + color + ) as keyof _EuiThemeBackgroundColors; + }); + + const backgroundFilledColors = brand_background_colors.map( + (color: string) => { + return getTokenName( + 'backgroundFilled', + color + ) as keyof _EuiThemeBackgroundColors; + } + ); + return ( <> @@ -247,20 +282,14 @@ export default () => { })} - +

{`${contrastSections[3].title}`}

 - {showSass ? ( -

- - Background colors only exist for CSS-in-JS styling. - -

- ) : ( + {!showSass && ( <> { description={

These background colors are pre-defined shades of the - brand colors. They are recalled by using the hook{' '} - {backgroundFunction}. + brand colors.{' '} + {backgroundFunction && ( + <> + They are recalled by using the hook{' '} + {backgroundFunction} + + )}

} > @@ -287,73 +321,138 @@ export default () => { - - {backgroundColors.map((color: string) => { - switch (backgroundSelected) { - case 'container': - return ( - - - - - ); - - case 'hover': - return ( - - - - - ); - - case 'button': - return ( - color !== 'disabled' && ( - - - - - ) - ); - } - })} )} + <> + {backgroundSelected === 'button' ? ( + !showSass && ( + + ) + ) : ( + <> + + + + + + + )} +
); }; + +const BackgroundColorSection: FunctionComponent<{ + title: string; + backgroundColors: string[]; + type: string; + language?: 'js' | 'scss'; + contrastValue: number; + showTextVariants: boolean; +}> = ({ + title, + backgroundColors, + type, + language = 'js', + contrastValue, + showTextVariants, +}) => { + const euiThemeContext = useEuiTheme(); + const { euiTheme } = euiThemeContext; + + const content = backgroundColors.map((color: string) => { + switch (type) { + case 'container': + return ( + + {language === 'scss' ? ( + + ) : ( + + )} + + + + ); + + case 'button': + return ( + color !== 'disabled' && ( + + + + + ) + ); + } + }); + + return ( + <> + +

{title}

+ + + {content} + + ); +}; diff --git a/packages/eui/src-docs/src/views/theme/color/functions.tsx b/packages/eui/src-docs/src/views/theme/color/functions.tsx index 22dd2d0f56a..7744d94e35f 100644 --- a/packages/eui/src-docs/src/views/theme/color/functions.tsx +++ b/packages/eui/src-docs/src/views/theme/color/functions.tsx @@ -9,7 +9,7 @@ import { TextSections } from './_functions_isDark'; import { TintShadeSections } from './_functions_shadeTint'; import { TransparencySections } from './_functions_transparency'; -import { UtilsJS, UtilsValuesJS } from './_color_js'; +import { UtilsJS } from './_color_js'; // This array is used inside routes.js to create the sidenav sub-sections export const colorsFunctionsSections = [ @@ -55,14 +55,10 @@ export default () => { - - - - )} - +

Utilities

 @@ -76,7 +72,7 @@ export default () => { - +

{ - +

{ + const { euiTheme } = useEuiTheme(); + + const description = + euiTheme.themeName === AMSTERDAM_NAME_KEY ? ( + <> +

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

+

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

+ + ) : ( + <> +

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

+

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

+ + ); + + return ( + +

{description}

+ + ); +}; + export const colorsInfo = { title: 'Colors', notice: , showThemeLanguageToggle: true, - intro: ( - -

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

-

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

- - ), + intro: , }; // This array is used inside routes.js to create the sidenav sub-sections export const colorsSections = [ { title: 'Brand colors', id: 'brand-colors' }, { title: 'Text colors', id: 'text-colors' }, + { title: 'Background colors', id: 'background-colors' }, + { title: 'Border colors', id: 'border-colors' }, { title: 'Shades', id: 'shades' }, { title: 'Special colors', id: 'special-colors' }, ]; export default () => { + const { euiTheme } = useEuiTheme(); const themeContext = useContext(ThemeContext); const currentLanguage = themeContext.themeLanguage; const showSass = currentLanguage.includes('sass'); @@ -85,15 +129,23 @@ export default () => { return ; }, [showSass]); + const backgroundContent = useMemo(() => { + if (showSass) return ; + return ; + }, [showSass]); + + const borderContent = useMemo(() => { + if (showSass) return ; + return ; + }, [showSass]); + const shadesContent = useMemo(() => { const description = ( <>

Since the EUI colors usually evaluate to a hex value, the easiest way - to perform color operations like transparency, shading, or tinting is - by using the EUI provided methods of{' '} - transparentize(), shade(), and{' '} - tint() respectively. + to perform color operations like transparency by using the EUI + provided method of transparentize().

For all available color functions see the{' '} @@ -137,18 +189,25 @@ export default () => { {showSass ? : } + {/* Text colors */}

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

- Specific text colors calculated off either the brand or shade - colors. -

-

- Each brand color also has a corresponding text variant that has been - calculated for proper (at least 4.5) contrast against{' '} - colors.body and should be used specifically when - coloring text. As is used in{' '} + {euiTheme.themeName === AMSTERDAM_NAME_KEY ? ( + <> + Each brand color also has a corresponding text variant that has + been calculated for proper (at least 4.5) contrast against{' '} + colors.body and should be used specifically + when coloring text. + + ) : ( + <> + Each brand color also has a corresponding text variant that + should be used specifically when coloring text. + + )} + As is used in{' '} EuiTextColor @@ -165,9 +224,60 @@ export default () => { {showSass ? : } + {/* Background colors */}

{`${colorsSections[2].title}`}

+

+ Semantic background colors. These should be used according to their + semantic purpose. +

+

+ If a border is needed use the semantically related border color, + e.g. backgroundBasePrimary with{' '} + borderBasePrimary. +

+ + + + + {backgroundContent} + + + + {showSass ? : } + + + {/* Border colors */} + + +

{`${colorsSections[3].title}`}

+

+ Semantic border colors. These should be used according to their + semantic purpose. +

+

+ The default border color (used as border.color) + is borderBaseSubdued. Use the{' '} + base border colors for most cases. Use{' '} + borderBasePlain for a slightly stronger border + (e.g. for forms). +

+ + + + + {borderContent} + + + + {showSass ? : } + + + {/* Shade colors */} + + +

{`${colorsSections[4].title}`}

A six-color grayscale palette. Variation beyond these colors is minimal and always done through computations against this set. @@ -183,10 +293,11 @@ export default () => { {showSass ? : } + {/* Special colors */} {' '} -

{`${colorsSections[3].title}`}

+

{`${colorsSections[5].title}`}

These are used a lot for special cases.

 diff --git a/packages/eui/src-docs/src/views/theme/computed.tsx b/packages/eui/src-docs/src/views/theme/computed.tsx deleted file mode 100644 index 266da5ff125..00000000000 --- a/packages/eui/src-docs/src/views/theme/computed.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { FunctionComponent, ReactNode } from 'react'; -import { EuiIcon } from '../../../../src/components/icon'; -import { EuiCode } from '../../../../src/components/code'; -import { EuiText } from '../../../../src/components/text'; -import { EuiThemeProvider, useEuiTheme } from '../../../../src/services'; - -const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => { - const { euiTheme } = useEuiTheme(); - - return ( - -

- {children} -

- - ); -}; - -export default () => { - const primaryOverrides = { - colors: { - LIGHT: { - primary: '#db1dde', - }, - DARK: { - primary: '#e378e4', - }, - }, - }; - - return ( -
- - - The colors.primary value has been changed to{' '} - #db1dde (#e378e4 for dark mode) - and so the calculated value of colors.primaryText{' '} - has also been updated. - - -
- ); -}; diff --git a/packages/eui/src-docs/src/views/theme/customizing/_colors.js b/packages/eui/src-docs/src/views/theme/customizing/_colors.js index d73468b02c1..30f67e555c4 100644 --- a/packages/eui/src-docs/src/views/theme/customizing/_colors.js +++ b/packages/eui/src-docs/src/views/theme/customizing/_colors.js @@ -16,6 +16,8 @@ import { } from '../../../../../src'; import { + background_colors, + border_colors, brand_colors, brand_text_colors, shade_colors, @@ -31,6 +33,8 @@ import { EuiThemeColors } from '../_props'; const brandKeys = Object.keys(brand_colors); const brandTextKeys = Object.keys(brand_text_colors); +const backgroundKeys = Object.keys(background_colors); +const borderKeys = Object.keys(border_colors); const shadeKeys = Object.keys(shade_colors); const specialKeys = Object.keys(special_colors); const textKeys = Object.keys(text_colors); @@ -159,13 +163,47 @@ export default ({ onThemeUpdate }) => {

- _EuiThemeShadeColors + _EuiThemeTextColors

- {shadeKeys.map((color) => ( + {textKeys.map((color) => ( + updateColor(color, hex)} + example={ + + } + /> + ))} + + + + + + +

+ _EuiThemeBackgroundColors +

+ + + + + {backgroundKeys.map((color) => ( {

- _EuiThemeTextColors + _EuiThemeBorderColors

- {textKeys.map((color) => ( + {borderKeys.map((color) => ( } + onUpdate={(hex) => updateColor(color, hex)} + /> + ))} + + + + + + +

+ _EuiThemeShadeColors +

+ + + + + {shadeKeys.map((color) => ( + } onUpdate={(hex) => updateColor(color, hex)} - example={ - - } /> ))} diff --git a/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx b/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx index 0f37fa70558..02513c80d79 100644 --- a/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx @@ -4,10 +4,23 @@ import { EuiText, EuiCodeBlock, useEuiTheme, + EuiThemeAmsterdam, } from '../../../../../src'; export default () => { - const { colorMode } = useEuiTheme(); + const { euiTheme, colorMode } = useEuiTheme(); + + const isAmsterdam = euiTheme.themeName === EuiThemeAmsterdam.key; + const themePaths = isAmsterdam + ? { + light: '@elastic/eui/src/themes/amsterdam/theme_light', + dark: '@elastic/eui/src/themes/amsterdam/theme_dark', + } + : { + light: '@elastic/eui-theme-borealis/src/theme_light', + dark: '@elastic/eui-theme-borealis/src/theme_dark', + }; + return ( <> @@ -32,8 +45,8 @@ $euiColorPrimary: #7B61FF; // The following rebuilds the entire EUI component styles ${ colorMode === 'DARK' - ? "@import '@elastic/eui/src/themes/amsterdam/theme_dark';" - : "@import '@elastic/eui/src/themes/amsterdam/theme_light';" + ? `@import ${themePaths.dark};` + : `@import ${themePaths.light};` } @import 'your/custom/styles';`} diff --git a/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx b/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx index f263e09be50..f3a65b6b607 100644 --- a/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx +++ b/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx @@ -12,7 +12,6 @@ import { logicalShorthandCSS, EuiText, useEuiPaddingSize, - useEuiBackgroundColor, useEuiBackgroundColorCSS, useEuiPaddingCSS, EuiAccordion, @@ -363,6 +362,8 @@ export const UtilsJS = () => { }; export const PaddingJS = () => { + const { euiTheme } = useEuiTheme(); + return ( <> @@ -425,7 +426,7 @@ const cssStyles = [paddingStyles['l']]; example={

diff --git a/packages/eui/src-docs/src/views/theme/theme_example.js b/packages/eui/src-docs/src/views/theme/theme_example.js index eb88f718b90..031abd853f2 100644 --- a/packages/eui/src-docs/src/views/theme/theme_example.js +++ b/packages/eui/src-docs/src/views/theme/theme_example.js @@ -19,9 +19,6 @@ const consumingEmotionThemeSource = require('!!raw-loader!./consuming_emotion_th import OverrideSimple from './override_simple'; const overrideSimpleSource = require('!!raw-loader!./override_simple'); -import Computed from './computed'; -const computedSource = require('!!raw-loader!./computed'); - import CreateComputed from './create_computed'; import { ThemeNotice } from './_components/_theme_notice'; const createComputedSource = require('!!raw-loader!./create_computed'); @@ -200,34 +197,6 @@ export const ThemeExample = { ), demo: , }, - { - title: 'Understanding computed values', - source: [ - { - type: GuideSectionTypes.JS, - code: computedSource, - }, - ], - text: ( - <> -

- The benefit of EUI's theme structure is that it only hard-codes - a few color and size variables. The rest are{' '} - computed values based on this base few. When you - update a core variable, this will cascade into the other computed - values. -

-

- For instance, we compute text variants of our base colors. So - locally overriding the colors.primary color will - automatically cascade to the colors.primaryText. - You can however, directly override computed values as well by - passing a custom value to this theme variable. -

- - ), - demo: , - }, { title: 'Creating custom keys', source: [ diff --git a/packages/eui/src-docs/src/views/theme/typography/values.tsx b/packages/eui/src-docs/src/views/theme/typography/values.tsx index 4ec994788d4..10b51709ef8 100644 --- a/packages/eui/src-docs/src/views/theme/typography/values.tsx +++ b/packages/eui/src-docs/src/views/theme/typography/values.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import { css } from '@emotion/react'; // @ts-ignore Importing JSON -import themeVars from '../_json/eui_theme_light.json'; // Only grabbing font weight vars, so color mode is irrelevant +import themeVars from '../_json/eui_theme_amsterdam_light.json'; // Only grabbing font weight vars, so color mode is irrelevant import { GuideSection } from '../../../components/guide_section/guide_section'; diff --git a/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx b/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx index 1be20e290e7..48b2ead0e83 100644 --- a/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx +++ b/packages/eui/src-docs/src/views/timeline/timeline_item_event.tsx @@ -19,7 +19,7 @@ import { import { useGeneratedHtmlId, - euiPaletteColorBlindBehindText, + useEuiPaletteColorBlindBehindText, } from '../../../../src/services'; export default () => { @@ -33,7 +33,7 @@ export default () => { // We could use the `euiPaletteColorBlind` for coloring the avatars // But because we're placing an icon on top of these colors // The `euiPaletteColorBlindBehindText` is a better choice to ensure better contrast - const colorBlindBehindText = euiPaletteColorBlindBehindText({ + const colorBlindBehindText = useEuiPaletteColorBlindBehindText({ sortBy: 'natural', }); diff --git a/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap index 0bfea749762..8c74f3a7dd2 100644 --- a/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap +++ b/packages/eui/src/components/avatar/__snapshots__/avatar.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiAvatar allows a name composed entirely of whitespace 1`] = ` class="euiAvatar euiAvatar--m euiAvatar--user testClass1 testClass2 emotion-euiAvatar-user-m-uppercase-euiTestCss" data-test-subj="test subject string" role="img" - style="background-color: rgb(238, 120, 157); color: rgb(0, 0, 0);" + style="background-color: rgb(97, 162, 255); color: rgb(0, 0, 0);" title=" " > = ({ checkValidInitials(initials); const { casing = type === 'space' ? 'none' : 'uppercase', ...rest } = props; + const visColors = useEuiPaletteColorBlindBehindText(); + const isPlain = color === 'plain'; const isSubdued = color === 'subdued'; const isNamedColor = isPlain || isSubdued || color === null; @@ -172,7 +174,7 @@ export const EuiAvatar: FunctionComponent = ({ color: textColor, }; } - }, [imageUrl, color, isNamedColor, name.length]); + }, [imageUrl, color, isNamedColor, name.length, visColors]); const iconCustomColor = useMemo(() => { // `null` allows icons to keep their default color (e.g. app icons) diff --git a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap index ce00526e2f1..9654eb247b9 100644 --- a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -196,7 +196,7 @@ exports[`EuiBadge props color accepts hex 1`] = ` exports[`EuiBadge props color accepts rgba 1`] = ` { @@ -165,7 +165,8 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => { font-size: 0; /* Makes the button only as large as the icon so it aligns vertically better */ &:focus { - background-color: ${transparentize(euiTheme.colors.ghost, 0.8)}; + background-color: ${euiTheme.components + .badgeIconButtonBackgroundHover}; color: ${euiTheme.colors.ink}; border-radius: ${mathWithUnits( euiTheme.border.radius.small, diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts index 32c1f4a5026..e91b8f6a168 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts @@ -25,6 +25,8 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { s: mathWithUnits(euiTheme.size.base, (x) => x * 1.25), }; + const hasVisColorAdjustment = euiTheme.flags?.hasVisColorAdjustment; + return { euiBetaBadge: css` display: inline-block; @@ -45,7 +47,9 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => { } `, // Colors - accent: css(badgeColors.accentText), + accent: hasVisColorAdjustment + ? css(badgeColors.accentText) + : css(badgeColors.accent), subdued: css(badgeColors.subdued), hollow: css` color: ${badgeColors.hollow.color}; diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index 351404bce19..ef668e5abe5 100644 --- a/packages/eui/src/components/badge/color_utils.ts +++ b/packages/eui/src/components/badge/color_utils.ts @@ -8,15 +8,15 @@ import chroma from 'chroma-js'; -import { UseEuiTheme, isColorDark, tint } from '../../services'; +import { UseEuiTheme, isColorDark } from '../../services'; import { euiButtonColor, euiButtonFillColor, -} from '../../themes/amsterdam/global_styling/mixins'; +} from '../../global_styling/mixins/_button'; import { chromaValid, parseColor } from '../color_picker/utils'; export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { - const { euiTheme, colorMode } = euiThemeContext; + const { euiTheme } = euiThemeContext; return { // Colors shared between buttons and badges @@ -25,23 +25,28 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { warning: euiButtonFillColor(euiThemeContext, 'warning'), danger: euiButtonFillColor(euiThemeContext, 'danger'), accent: euiButtonFillColor(euiThemeContext, 'accent'), + accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'), disabled: euiButtonColor(euiThemeContext, 'disabled'), // Colors unique to badges - default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade), + default: getBadgeColors( + euiThemeContext, + euiTheme.components.badgeBackground + ), // Hollow has a border and is used for autocompleters and beta badges hollow: { ...getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade), - borderColor: - colorMode === 'DARK' - ? tint(euiTheme.border.color, 0.15) - : euiTheme.border.color, + borderColor: euiTheme.components.badgeBorderColorHollow, }, // Colors used by beta and notification badges subdued: getBadgeColors( euiThemeContext, - tint(euiTheme.colors.lightShade, 0.3) + euiTheme.components.badgeBackgroundSubdued + ), + accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent), + accentSecondaryText: getBadgeColors( + euiThemeContext, + euiTheme.colors.textAccentSecondary ), - accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText), }; }; diff --git a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap index c4bcc9134dc..3fc78452fba 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap @@ -48,14 +48,18 @@ exports[`CollapsedItemActions custom actions 1`] = ` data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: -22px; left: -16px; z-index: 2000;" + style="top: -18px; left: -16px; z-index: 2000;" tabindex="0" >
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="top: 9px; left: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="top: 9px; left: 100%;" + > +
+

({ } } `, - subdued: css(_colorCSS(euiTheme.colors.subduedText)), + subdued: css(_colorCSS(euiTheme.colors.textSubdued)), primary: css(_colorCSS(euiTheme.colors.primary)), - success: css(_colorCSS(euiTheme.colors.success)), + success: css(_colorCSS(euiTheme.colors.accentSecondary)), warning: css(_colorCSS(euiTheme.colors.warning)), danger: css(_colorCSS(euiTheme.colors.danger)), accent: css(_colorCSS(euiTheme.colors.accent)), diff --git a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts index eb6dd268e90..8a80deb1b04 100644 --- a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts +++ b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts @@ -7,9 +7,10 @@ */ import { css, keyframes } from '@emotion/react'; +import { euiShadowFlat } from '@elastic/eui-theme-common'; + import { euiCanAnimate } from '../../global_styling'; -import { UseEuiTheme, shade } from '../../services'; -import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins'; +import { UseEuiTheme } from '../../services'; const euiBottomBarAppear = keyframes` 0% { @@ -31,7 +32,7 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => { // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"` euiBottomBar: css` ${euiShadowFlat(euiThemeContext)} - background: ${shade(euiTheme.colors.lightestShade, 0.5)}; + background: ${euiTheme.components.bottomBarBackground}; ${euiCanAnimate} { animation: ${euiBottomBarAppear} ${euiTheme.animation.slow} ${euiTheme.animation.resistance}; diff --git a/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap b/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap index 3cb6081df0d..5dd466d66a5 100644 --- a/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap +++ b/packages/eui/src/components/breadcrumbs/__snapshots__/_breadcrumb_content.test.tsx.snap @@ -46,14 +46,18 @@ exports[`EuiBreadcrumbContent breadcrumbs with popovers renders with \`popoverCo data-popover-open="true" data-popover-panel="true" role="dialog" - style="top: 16px; left: -22px; z-index: 2000;" + style="top: 16px; left: -18px; z-index: 2000;" tabindex="0" >

+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+

, `; +exports[`EuiButton props color accentSecondary is rendered 1`] = ` + +`; + exports[`EuiButton props color danger is rendered 1`] = ` diff --git a/packages/eui/src/components/button/button.tsx b/packages/eui/src/components/button/button.tsx index 63a0ad3a319..c0ee438ad43 100644 --- a/packages/eui/src/components/button/button.tsx +++ b/packages/eui/src/components/button/button.tsx @@ -21,7 +21,7 @@ import { useEuiButtonColorCSS, useEuiButtonFocusCSS, _EuiButtonColor, -} from '../../themes/amsterdam/global_styling/mixins/button'; +} from '../../global_styling/mixins/_button'; import { EuiButtonDisplay, EuiButtonDisplayCommonProps, diff --git a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap index b0e32a19990..2edfef7605c 100644 --- a/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap +++ b/packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap @@ -8,7 +8,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa aria-label="Loading" class="euiLoadingSpinner emotion-euiLoadingSpinner-m" role="progressbar" - style="border-color: #0077cc currentcolor currentcolor currentcolor;" + style="border-color: #1750ba currentcolor currentcolor currentcolor;" /> `; +exports[`EuiButtonEmpty props color accentSecondary is rendered 1`] = ` + +`; + exports[`EuiButtonEmpty props color danger is rendered 1`] = ` + + +

+ +`; + +exports[`EuiButtonGroup button props color accentSecondary is rendered for single 1`] = ` +
+ + test + +
+ + + +
+
+`; + exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
{ ${logicalCSS('min-width', 0)} flex-shrink: 1; flex-grow: 0; + z-index: 0; + + &:focus-visible { + z-index: 1; + } ${euiCanAnimate} { transition: background-color ${euiTheme.animation.normal} ease-in-out, @@ -78,14 +79,19 @@ export const euiButtonGroupButtonStyles = (euiThemeContext: UseEuiTheme) => { } &:focus-visible { - ${euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade)} + ${euiOutline( + euiThemeContext, + 'inset', + euiTheme.components.buttonGroupFocusColor + )} } `, get borders() { const selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected'; - const selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2); - const unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1); + const selectedColor = + euiTheme.components.buttonGroupBorderColorSelected; + const unselectedColor = euiTheme.components.buttonGroupBorderColor; const borderWidth = euiTheme.border.width.thin; // "Borders" between buttons should be present between two of the same colored buttons, diff --git a/packages/eui/src/components/button/button_group/button_group_button.tsx b/packages/eui/src/components/button/button_group/button_group_button.tsx index ab669ac360d..b0742b0b807 100644 --- a/packages/eui/src/components/button/button_group/button_group_button.tsx +++ b/packages/eui/src/components/button/button_group/button_group_button.tsx @@ -15,7 +15,7 @@ import React, { import { CSSInterpolation } from '@emotion/css'; import { useEuiMemoizedStyles } from '../../../services'; -import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button'; +import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button'; import { useInnerText } from '../../inner_text'; import { EuiButtonDisplay } from '../button_display/_button_display'; diff --git a/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap index 00310879bec..96a59cc45c8 100644 --- a/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap +++ b/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap @@ -31,6 +31,21 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = ` `; +exports[`EuiButtonIcon props color accentSecondary is rendered 1`] = ` + +`; + exports[`EuiButtonIcon props color danger is rendered 1`] = ` `; diff --git a/packages/eui/src/components/button/button_icon/button_icon.styles.ts b/packages/eui/src/components/button/button_icon/button_icon.styles.ts index a8f38fc73cb..ea70ba73dd5 100644 --- a/packages/eui/src/components/button/button_icon/button_icon.styles.ts +++ b/packages/eui/src/components/button/button_icon/button_icon.styles.ts @@ -15,7 +15,7 @@ import { _EuiButtonColor, euiButtonEmptyColor, euiButtonSizeMap, -} from '../../../themes/amsterdam/global_styling/mixins/button'; +} from '../../../global_styling/mixins/_button'; import { euiButtonBaseCSS } from '../button_display/_button_display.styles'; diff --git a/packages/eui/src/components/button/button_icon/button_icon.test.tsx b/packages/eui/src/components/button/button_icon/button_icon.test.tsx index e9c06140b6c..97703af1b1d 100644 --- a/packages/eui/src/components/button/button_icon/button_icon.test.tsx +++ b/packages/eui/src/components/button/button_icon/button_icon.test.tsx @@ -13,7 +13,7 @@ import { requiredProps } from '../../../test/required_props'; import { shouldRenderCustomStyles } from '../../../test/internal'; import { EuiButtonIcon, DISPLAYS, SIZES } from './button_icon'; -import { BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins'; +import { BUTTON_COLORS } from '../../../global_styling/mixins'; describe('EuiButtonIcon', () => { shouldRenderCustomStyles( diff --git a/packages/eui/src/components/button/button_icon/button_icon.tsx b/packages/eui/src/components/button/button_icon/button_icon.tsx index 0cb90b4d606..3c62733f083 100644 --- a/packages/eui/src/components/button/button_icon/button_icon.tsx +++ b/packages/eui/src/components/button/button_icon/button_icon.tsx @@ -30,7 +30,7 @@ import { useEuiButtonColorCSS, useEuiButtonFocusCSS, _EuiButtonColor, -} from '../../../themes/amsterdam/global_styling/mixins/button'; +} from '../../../global_styling/mixins/_button'; import { isButtonDisabled } from '../button_display/_button_display'; import { euiButtonIconStyles, _emptyHoverStyles } from './button_icon.styles'; diff --git a/packages/eui/src/components/call_out/call_out.styles.ts b/packages/eui/src/components/call_out/call_out.styles.ts index 49a3b9f01ed..39d20b4c06e 100644 --- a/packages/eui/src/components/call_out/call_out.styles.ts +++ b/packages/eui/src/components/call_out/call_out.styles.ts @@ -59,16 +59,16 @@ export const euiCallOutHeaderStyles = ({ euiTheme }: UseEuiTheme) => { )} `, primary: css` - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, success: css` - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; `, warning: css` - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; `, danger: css` - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; `, accent: css` color: ${euiTheme.colors.accentText}; diff --git a/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap b/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap index d531bcc8448..6d19ab13803 100644 --- a/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap +++ b/packages/eui/src/components/card/__snapshots__/card.test.tsx.snap @@ -347,6 +347,39 @@ exports[`EuiCard props display accent is rendered 1`] = `
`; +exports[`EuiCard props display accentSecondary is rendered 1`] = ` +
+
+
+

+ + Card title + +

+
+

+ Card description +

+
+
+
+
+`; + exports[`EuiCard props display danger is rendered 1`] = `
`; +exports[`EuiCard props display highlighted is rendered 1`] = ` +
+
+
+

+ + Card title + +

+
+

+ Card description +

+
+
+
+
+`; + exports[`EuiCard props display plain is rendered 1`] = `
{ const { euiTheme } = euiThemeContext; const paddingAmount = euiPaddingSize(euiThemeContext, paddingSize!); + const cardPaddingAmount = paddingAmount + ? mathWithUnits( + [paddingAmount, euiTheme.border.width.thin], + (x, y) => x + y + ) + : '0'; const spacing = euiPaddingSize(euiThemeContext, paddingKey); const halfSpacing = euiPaddingSize(euiThemeContext, halfPaddingKey); @@ -150,9 +157,9 @@ export const euiCardStyles = ( overflow: hidden; /* Padding based sizing & negative margins */ - ${logicalCSS('width', `calc(100% + (${paddingAmount} * 2))`)} - ${logicalCSS('left', `-${paddingAmount}`)} - ${logicalCSS('top', `-${paddingAmount}`)} + ${logicalCSS('width', `calc(100% + (${cardPaddingAmount} * 2))`)} + ${logicalCSS('left', `-${cardPaddingAmount}`)} + ${logicalCSS('top', `-${cardPaddingAmount}`)} /* Ensure the parent is only as tall as the image */ ${logicalCSS('margin-bottom', `-${paddingAmount}`)} diff --git a/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap b/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap index 381ac18ad39..b12d9b7efaa 100644 --- a/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap +++ b/packages/eui/src/components/code/__snapshots__/code_block_annotations.test.tsx.snap @@ -41,14 +41,18 @@ exports[`EuiCodeBlockAnnotation renders 1`] = ` data-popover-panel="true" data-test-subj="euiCodeBlockAnnotationPopover" role="dialog" - style="top: 16px; left: -22px; z-index: 6001;" + style="top: 16px; left: -18px; z-index: 6001;" tabindex="0" >
+ class="euiPopover__arrowWrapper emotion-euiPopoverArrowWrapper" + style="left: 9px; bottom: 100%;" + > +
+

= { title: 'Editors & Syntax/EuiCodeBlock', component: EuiCodeBlock, argTypes: { - lineNumbers: { control: 'boolean' }, + lineNumbers: { control: 'object' }, overflowHeight: { control: 'number' }, }, args: { @@ -102,3 +102,18 @@ export const Annotations: Story = { expect(dialog).toHaveTextContent('Hello world'); }, }; + +export const Highlight: Story = { + tags: ['vrt-only'], + args: { + children: `

+ + Lorem ipsum +

`, + lineNumbers: { + start: 1, + highlight: '2-3', + annotations: { 3: 'A special note about this line' }, + }, + }, +}; diff --git a/packages/eui/src/components/code/code_block_annotations.tsx b/packages/eui/src/components/code/code_block_annotations.tsx index b789454a667..0c41433a236 100644 --- a/packages/eui/src/components/code/code_block_annotations.tsx +++ b/packages/eui/src/components/code/code_block_annotations.tsx @@ -14,7 +14,7 @@ import React, { } from 'react'; import { useEuiTheme, useEuiMemoizedStyles } from '../../services'; -import { useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button'; +import { useEuiButtonFocusCSS } from '../../global_styling/mixins/_button'; import { CommonProps } from '../common'; import { useEuiI18n } from '../i18n'; import { EuiPopover } from '../popover'; diff --git a/packages/eui/src/components/code/code_block_line.styles.ts b/packages/eui/src/components/code/code_block_line.styles.ts index 74766b8dbbe..97649a8af12 100644 --- a/packages/eui/src/components/code/code_block_line.styles.ts +++ b/packages/eui/src/components/code/code_block_line.styles.ts @@ -14,7 +14,6 @@ */ import { css } from '@emotion/css'; -import { euiBackgroundColor } from '../../global_styling'; import { UseEuiTheme } from '../../services'; // Note: These styles must be in a separate file due to using `css` from `@emotion/css` @@ -40,7 +39,7 @@ export const euiCodeBlockLineStyles = (euiThemeContext: UseEuiTheme) => { user-select: text; `, isHighlighted: css` - background: ${euiBackgroundColor(euiThemeContext, 'primary')}; + background: ${euiTheme.colors.backgroundBasePrimary}; border-inline-start: ${euiTheme.border.width.thick} solid ${euiTheme.colors.primary}; `, diff --git a/packages/eui/src/components/code/code_syntax.styles.ts b/packages/eui/src/components/code/code_syntax.styles.ts index 50c9b12b2a9..2fba47b039a 100644 --- a/packages/eui/src/components/code/code_syntax.styles.ts +++ b/packages/eui/src/components/code/code_syntax.styles.ts @@ -6,51 +6,35 @@ * Side Public License, v 1. */ -import { - UseEuiTheme, - makeHighContrastColor, - euiPaletteColorBlind, -} from '../../services'; - -const visColors = euiPaletteColorBlind(); +import { UseEuiTheme } from '../../services'; // These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles` export const euiCodeSyntaxVariables = ({ euiTheme }: UseEuiTheme) => { - const backgroundColor = euiTheme.colors.lightestShade; - return { - backgroundColor: backgroundColor, - color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor), - inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor), - selectedBackgroundColor: 'inherit', - commentColor: makeHighContrastColor(euiTheme.colors.subduedText)( - backgroundColor - ), - selectorTagColor: 'inherit', - stringColor: makeHighContrastColor(visColors[2])(backgroundColor), - tagColor: makeHighContrastColor(visColors[1])(backgroundColor), - nameColor: makeHighContrastColor(visColors[1])(backgroundColor), - numberColor: makeHighContrastColor(visColors[0])(backgroundColor), - keywordColor: makeHighContrastColor(visColors[3])(backgroundColor), - inlineCodeKeywordColor: makeHighContrastColor(visColors[6])( - backgroundColor - ), - functionTitleColor: 'inherit', - typeColor: makeHighContrastColor(visColors[1])(backgroundColor), - attributeColor: 'inherit', - symbolColor: makeHighContrastColor(visColors[9])(backgroundColor), - paramsColor: 'inherit', - metaColor: makeHighContrastColor(euiTheme.colors.subduedText)( - backgroundColor - ), - titleColor: makeHighContrastColor(visColors[7])(backgroundColor), - sectionColor: makeHighContrastColor(visColors[9])(backgroundColor), - additionColor: makeHighContrastColor(visColors[0])(backgroundColor), - deletionColor: makeHighContrastColor(euiTheme.colors.danger)( - backgroundColor - ), - selectorClassColor: 'inherit', - selectorIdColor: 'inherit', + backgroundColor: euiTheme.components.codeBackground, + color: euiTheme.components.codeColor, + inlineCodeColor: euiTheme.components.codeInlineColor, + selectedBackgroundColor: euiTheme.components.codeBackgroundSelected, + commentColor: euiTheme.components.codeCommentColor, + selectorTagColor: euiTheme.components.codeSelectorColor, + stringColor: euiTheme.components.codeStringColor, + tagColor: euiTheme.components.codeTagColor, + nameColor: euiTheme.components.codeNameColor, + numberColor: euiTheme.components.codeNumberColor, + keywordColor: euiTheme.components.codeKeywordColor, + inlineCodeKeywordColor: euiTheme.components.codeInlineCodeKeywordColor, + functionTitleColor: euiTheme.components.codeFunctionTitleColor, + typeColor: euiTheme.components.codeTypeColor, + attributeColor: euiTheme.components.codeAttributeColor, + symbolColor: euiTheme.components.codeSymbolColor, + paramsColor: euiTheme.components.codeParamsColor, + metaColor: euiTheme.components.codeMetaColor, + titleColor: euiTheme.components.codeTitleColor, + sectionColor: euiTheme.components.codeSectionColor, + additionColor: euiTheme.components.codeAdditionColor, + deletionColor: euiTheme.components.codeDeletionColor, + selectorClassColor: euiTheme.components.codeSelectorClassColor, + selectorIdColor: euiTheme.components.codeSelectorIdColor, get tokensCss() { return ` diff --git a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap index 16ed32ffd1d..cf6f97a26e0 100644 --- a/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap +++ b/packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap @@ -13,7 +13,7 @@ exports[`EuiCollapsibleNav close button can be hidden 1`] = ` >

} - description={ -

- While the hook accepts rendering the value as opaque or - transparent, we highly suggest reserving transparent for use only - during interactive states like hover and focus. -

- } - > - - setActiveBackground(id)} - color="accent" - isFullWidth - /> - - - ({ - value: euiBackgroundColor(theme, color, { method: activeBackground }), - token: `useEuiBackgroundColor('${color}'${ - activeBackground === 'transparent' ? `, 'transparent'` : '' - })`, - }))} - /> - - ); -}; diff --git a/packages/website/docs/components/theming/colors/values.mdx b/packages/website/docs/components/theming/colors/values.mdx index 73ea3c043d4..eb23d730631 100644 --- a/packages/website/docs/components/theming/colors/values.mdx +++ b/packages/website/docs/components/theming/colors/values.mdx @@ -5,9 +5,10 @@ id: theming_colors # Colors -Elastic UI builds with a very limited palette. It uses a core set of three colors with a green / orange / red qualitative set and combined with a six-color grayscale. Variation beyond these colors is minimal and always done with math manipulation against the original set. +Elastic UI builds with a color palette that is based on predefined 14-step scales for a core set of three colors (blue / teal / pink) as well as a green / yellow / red qualitative set and combined with a 28-step grayscale. +Colors are defined to work well when combined for their semantic purpose. -When switching between light and dark color modes, the theme keys do not change, only their values do. This is why most keys are not named for their **evaluated** value but by their **purpose**. +When switching between light and dark color modes, the theme keys do not change, only their values do. ## Brand colors @@ -43,9 +44,7 @@ import { BrandColorsTable } from './brand_colors_table'; ## Text colors -Specific text colors calculated off either the brand or shade colors. - -Each brand color also has a corresponding text variant that has been calculated for proper (at least 4.5) contrast against `colors.body` and should be used specifically when coloring text. As is used in [**EuiTextColor**](/docs/display/text#coloring-text). +Each brand color also has a corresponding text variant that should be used specifically when coloring text. As is used in [**EuiTextColor**](/docs/display/text#coloring-text). ```mdx-code-block import { TextColorPreview } from './text_color_preview'; @@ -57,8 +56,6 @@ import { TextColorsTable } from './text_colors_table'; ### `euiTheme.colors[colorText]` token Remember, when using any of the EUI colors for text, **use the text specific variant**. - - If your background color is anything other than or darker than the `body` color, you will want to re-calculate the high contrast version by using the [`makeHighContrastColor(foreground)(background)`](/docs/theming/colors/utilities) method. @@ -66,7 +63,7 @@ import { TextColorsTable } from './text_colors_table'; ```tsx css` - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; ` ``` @@ -76,6 +73,69 @@ import { TextColorsTable } from './text_colors_table'; +## Background colors + +Semantic background colors. These should be used according to their semantic purpose. + +If a border is needed use the semantically related border color, e.g. `backgroundBasePrimary` with `borderBasePrimary`. + +```mdx-code-block +import { BackgroundColorPreview } from './background_color_preview'; +import { BackgroundColorsTable } from './background_colors_table'; +``` + + + + ### `euiTheme.colors[background]` token + + + + + + ```tsx + css` + background-color: ${euiTheme.colors.backgroundFilledWarning}; + ` + ``` + + + +
+ + + +## Borders + +Semantic border colors. These should be used according to their semantic purpose. + +The default border color (used as `border.color`) `borderBaseSubdued`. +Use the `base` border colors for most cases. Use `borderBasePlain` for a slightly stronger border (e.g. for forms). + +```mdx-code-block +import { BorderColorPreview } from './border_color_preview'; +import { BorderColorsTable } from './border_colors_table'; +``` + + + + ### `euiTheme.colors[border]` token + + + + + + ```tsx + css` + border-color: ${euiTheme.colors.borderBaseWarning}; + ` + ``` + + + +
+ + + ## Shades A six-color grayscale palette. Variation beyond these colors is minimal and always done through computations against this set. diff --git a/packages/website/docs/components/theming/theme_provider.mdx b/packages/website/docs/components/theming/theme_provider.mdx index 489bb118202..a154c65b889 100644 --- a/packages/website/docs/components/theming/theme_provider.mdx +++ b/packages/website/docs/components/theming/theme_provider.mdx @@ -237,67 +237,6 @@ export default () => { }; ``` -## Understanding computed values - -The benefit of EUI's theme structure is that it only hard-codes a few color and size variables. The rest are **computed** values based on this base few. When you update a core variable, this will cascade into the other computed values. - -For instance, we compute text variants of our base colors. So locally overriding the `colors.primary` color will automatically cascade to the `colors.primaryText`. You can however, directly override computed values as well by passing a custom value to this theme variable. - -```tsx interactive -import React, { FunctionComponent, ReactNode } from 'react'; -import { - EuiIcon, - EuiCode, - EuiText, - EuiThemeProvider, - useEuiTheme, -} from '@elastic/eui'; - -const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => { - const { euiTheme } = useEuiTheme(); - - return ( - -

- {children} -

- - ); -}; - -export default () => { - const primaryOverrides = { - colors: { - LIGHT: { - primary: '#db1dde', - }, - DARK: { - primary: '#e378e4', - }, - }, - }; - - return ( -
- - - The colors.primary value has been changed to{' '} - #db1dde (#e378e4 for dark mode) - and so the calculated value of colors.primaryText{' '} - has also been updated. - - -
- ); -}; -``` - ## Creating custom keys Because of the computed values and possible cascade effects, it may not be advisable to locally **override** any EUI specific theme variables. Instead, you should append custom keys to the theme. diff --git a/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx b/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx index 58c0bc0fcda..892eabe3259 100644 --- a/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx +++ b/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx @@ -11,19 +11,18 @@ export const UseEuiBreakpointPreview = () => { font-weight: ${euiTheme.font.weight.bold}; } ${useEuiBreakpoint(['xs', 's'])} { - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; } ${useEuiBreakpoint(['m'])} { - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; } ${useEuiBreakpoint(['l', 'xl'])} { - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } `} > This text is bold on small to large screens, red on small and below - screens, yellow on medium screens, and green on large and above - screens. + screens, yellow on medium screens, and green on large and above screens.

); }; diff --git a/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx b/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx index 2f4295080fb..11fac4ae681 100644 --- a/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx +++ b/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx @@ -1,5 +1,9 @@ import { css } from '@emotion/react'; -import { useEuiTheme, useEuiMinBreakpoint, useEuiMaxBreakpoint } from '@elastic/eui'; +import { + useEuiTheme, + useEuiMinBreakpoint, + useEuiMaxBreakpoint, +} from '@elastic/eui'; export const UseEuiMinMaxMaxBreakpointPreview = () => { const { euiTheme } = useEuiTheme(); @@ -8,15 +12,15 @@ export const UseEuiMinMaxMaxBreakpointPreview = () => {

- This text is red on screens below the medium breakpoint, and green - on screens above. + This text is red on screens below the medium breakpoint, and green on + screens above.

); }; diff --git a/packages/website/docs/components/utilities/_category_.yml b/packages/website/docs/components/utilities/_category_.yml new file mode 100644 index 00000000000..f0ffe3e2a80 --- /dev/null +++ b/packages/website/docs/components/utilities/_category_.yml @@ -0,0 +1,3 @@ +label: Utilities +collapsed: false +position: 11 diff --git a/packages/website/docs/components/utilities/color_palettes/_category_.yml b/packages/website/docs/components/utilities/color_palettes/_category_.yml new file mode 100644 index 00000000000..02ae549f1be --- /dev/null +++ b/packages/website/docs/components/utilities/color_palettes/_category_.yml @@ -0,0 +1,3 @@ +link: + type: doc + id: component_color_palettes_overview diff --git a/packages/website/docs/components/utilities/color_palettes/overview.mdx b/packages/website/docs/components/utilities/color_palettes/overview.mdx new file mode 100644 index 00000000000..8385fe758e1 --- /dev/null +++ b/packages/website/docs/components/utilities/color_palettes/overview.mdx @@ -0,0 +1,459 @@ +--- +id: component_color_palettes_overview +title: Color Palettes +export_name: EuiColorPalettes +slug: /color_palettes +--- + +# Color palettes + +EUI provides a base set of color palettes that return an array of hexadecimal color for use in other EUI components or charts. + +## Preset qualitative palettes + +Qualitative palettes are best suited for communicating and comparing discrete data series. +EUI recommends using the `euiPaletteColorBlind()` for qualitative and categorical data. + +This palette is restricted to only 10 colors. However, you can add more groups of 10 which +are alternates of the original. This is better than allowing the initial set to loop. + +These colors are meant to be used as graphics and contrasted against the value of `euiColorEmptyShade` +for the current theme. When placing text on top of these colors, use the `euiPaletteColorBlindBehindText()` +variant. It is a brightened version of the base palette to create better contrast with text. + +```tsx interactive +import React, { Fragment } from 'react'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiSpacer, + EuiBadge, + EuiFlexGrid, + euiPaletteColorBlind, + euiPaletteColorBlindBehindText, + ColorPaletteFlexItem, + ColorPaletteCopyCode, + EUI_VIS_COLOR_STORE, +} from '@elastic/eui'; +import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; +import { css } from '@emotion/css'; + +const ColorPaletteFlexItem = ({ hexCode, className, ...rest }) => { + const { euiTheme } = useEuiTheme(); + + return ( + + + + ); +}; + +const ColorPaletteCopyCode = ({ textToCopy, code }) => { + return ( + + + {(copy) => ( + + {code} + + )} + + + ); +}; + +const getCustomPalettes = () => [ + { + title: 'Max 10 colors', + palette: euiPaletteColorBlind(), + code: 'euiPaletteColorBlind()', + }, + { + title: 'More than 10 colors are needed', + palette: euiPaletteColorBlind({ rotations: 2 }), + code: 'euiPaletteColorBlind({rotations: 2})', + }, + { + title: + 'Series may have multiple metrics and so the colors must coordinate but be distinguishable', + palette: euiPaletteColorBlind({ + rotations: 3, + order: 'group', + direction: 'both', + }), + code: "euiPaletteColorBlind({rotations: 3, order: 'group', direction: 'both'})", + }, + { + title: + "The default sort order is close but not exactly aligned with the color wheel. To sort this better add the 'natural' sort param.", + palette: euiPaletteColorBlind({ sortBy: 'natural' }), + code: "euiPaletteColorBlind({sortBy: 'natural'})", + }, +]; + +export default () => { + const { euiTheme } = useEuiTheme(); + + const [customPalettes, setCustomPalettes] = useState(getCustomPalettes); + + const handleVisColorThemeChange = () => { + const palette = getCustomPalettes(); + setCustomPalettes(palette); + }; + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + handleVisColorThemeChange + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); + + return ( + + {customPalettes.map((palette) => ( + + +

{palette.title}

+ + + + + + {palette.palette.map((hexCode) => ( + + ))} + + + + + + + + + ))} + +

Behind text variant

+ + + + + + {euiPaletteColorBlindBehindText({ sortBy: 'natural' }).map( + (color, i) => ( + + + Text + + + ) + )} + + + + + + + + ) +}; +``` + +## Recommended quantitative palettes + +Quantitative palettes are best suited for displaying data on a continuum, as in the case of health statuses +and large geographic or demographic-based data sets. +EUI provides the following common palettes for quantitative data and [charts](#/docs/elastic-charts/creating-charts/). +Just pass in the number of steps needed and the function will interpolate between the colors. + +:::warning +The palette for status is the only palette that has proper contrast ratios. When using the other palettes, consider adding another form of the data for screen readers. +::: + +```tsx interactive +import React, { Fragment, useState } from 'react'; +import { css } from '@emotion/css'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiRange, + EuiFormRow, + EuiSpacer, + euiPaletteComplementary, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteCool, + euiPaletteWarm, + euiPaletteRed, + euiPaletteGreen, + euiPaletteGray, +} from '@elastic/eui'; + +const ColorPaletteFlexItem = ({ hexCode, className, ...rest }) => { + const { euiTheme } = useEuiTheme(); + + return ( + + + + ); +}; + +const ColorPaletteCopyCode = ({ textToCopy, code }) => { + return ( + + + {(copy) => ( + + {code} + + )} + + + ); +}; + +const paletteData = { + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteComplementary, + euiPaletteRed, + euiPaletteGreen, + euiPaletteCool, + euiPaletteWarm, + euiPaletteGray, +}; +const paletteNames = Object.keys(paletteData); + +export default () => { + const { euiTheme } = useEuiTheme(); + const [length, setLength] = useState(5); + + const onLengthChange = (e) => { + setLength(e.currentTarget.value); + }; + + return ( + + + + + + + + {paletteNames.map((paletteName) => ( + + + + {paletteData[paletteName](Number(length)).map((hexCode) => ( + + ))} + + + + + + + ))} + + ); +}; + +``` + +## Custom palettes + +Use the `colorPalette` service to generate a custom, gradiated palette array of any length from one or more +hexadecimal color codes. The third parameter divergent, will interpolate between the two halves of the +spectrums separately. If a middle point is not provided, it will graduate to light gray. + +```tsx interactive +import React, { Fragment, useState } from 'react'; +import { css } from '@emotion/css'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiRange, + EuiFormRow, + EuiSpacer, + euiPaletteColorBlind, + colorPalette +} from '@elastic/eui'; + +const ColorPaletteFlexItem = ({ hexCode, className, ...rest }) => { + const { euiTheme } = useEuiTheme(); + + return ( + + + + ); +}; + +const ColorPaletteCopyCode = ({ textToCopy, code }) => { + return ( + + + {(copy) => ( + + {code} + + )} + + + ); +}; + +const customPalettes = [ + [euiPaletteColorBlind()[3]], + [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], + [euiPaletteColorBlind()[3], euiPaletteColorBlind()[4]], +]; + +export default () => { + const { euiTheme } = useEuiTheme(); + const [length, setLength] = useState(10); + + const onLengthChange = (e) => { + setLength(e.currentTarget.value); + }; + + return ( + + + + + + + + {customPalettes.map((palette, i) => ( + + + + {colorPalette(palette, Number(length), i > 1).map((hexCode) => ( + + ))} + + + + 1 ? ', true' : '' + });`} + code={`colorPalette([${palette}], ${length}${ + i > 1 ? ', true' : '' + });`} + /> + + + ))} + + ); +}; +``` \ No newline at end of file diff --git a/packages/website/docs/data_visualization/theming.mdx b/packages/website/docs/data_visualization/theming.mdx index c965e0f9fa1..f1db8ededcf 100644 --- a/packages/website/docs/data_visualization/theming.mdx +++ b/packages/website/docs/data_visualization/theming.mdx @@ -73,6 +73,7 @@ You'll find an example of these in the demo below. euiPaletteRed, euiPaletteGreen, euiPaletteGray, + EUI_VIS_COLOR_STORE } from '@elastic/eui'; import { Chart, @@ -82,20 +83,22 @@ You'll find an example of these in the demo below. BarSeries, DataGenerator, } from '@elastic/charts'; - - const paletteData = { - euiPaletteColorBlind, - euiPaletteForStatus, - euiPaletteForTemperature, - euiPaletteComplementary, - euiPaletteRed, - euiPaletteGreen, - euiPaletteCool, - euiPaletteWarm, - euiPaletteGray, - }; - - const palettes = Object.entries(paletteData).map(([paletteName, palette]) => { + import { VIS_COLOR_STORE_EVENTS } from '@elastic/eui-theme-common'; + + const getPaletteData = () => ({ + euiPaletteColorBlind, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteComplementary, + euiPaletteRed, + euiPaletteGreen, + euiPaletteCool, + euiPaletteWarm, + euiPaletteGray, +}); + +const getPalettes = () => + Object.entries(getPaletteData()).map(([paletteName, palette]) => { return { value: paletteName, title: paletteName, @@ -107,75 +110,95 @@ You'll find an example of these in the demo below. }; }); - export default () => { - const chartBaseTheme = useChartBaseTheme(); - - const [barPalette, setBarPalette] = useState('euiPaletteColorBlind'); - - /** - * Create data - */ - const dg = new DataGenerator(); - const data1 = dg.generateGroupedSeries(20, 1); - const data2 = dg.generateGroupedSeries(20, 5); - - const themeOverrides = - barPalette !== 'euiPaletteColorBlind' - ? [ - { - colors: { - vizColors: paletteData[barPalette as keyof typeof paletteData](5), - }, +export default () => { + const chartBaseTheme = useChartBaseTheme(); + + const [palettes, setPalettes] = useState(getPalettes()); + const [barPalette, setBarPalette] = useState('euiPaletteColorBlind'); + + const paletteData = useMemo( + () => getPaletteData(), + // eslint-disable-next-line react-hooks/exhaustive-deps + [palettes] + ); + + useEffect(() => { + const storeId = EUI_VIS_COLOR_STORE.subscribe( + VIS_COLOR_STORE_EVENTS.UPDATE, + () => { + setPalettes(getPalettes()); + } + ); + + return () => { + EUI_VIS_COLOR_STORE.unsubscribe(VIS_COLOR_STORE_EVENTS.UPDATE, storeId); + }; + }, []); + + /** + * Create data + */ + const dg = new DataGenerator(); + const data1 = dg.generateGroupedSeries(20, 1); + const data2 = dg.generateGroupedSeries(20, 5); + + const themeOverrides = + barPalette !== 'euiPaletteColorBlind' + ? [ + { + colors: { + vizColors: paletteData[barPalette as keyof typeof paletteData](5), }, - ] - : []; - - return ( - <> - - - - - - Number(d).toFixed(2)} + }, + ] + : []; + + return ( + <> + + + + + + Number(d).toFixed(2)} + /> + + + + + - - - - - - - - - ); - }; + + + + ); +}; ``` diff --git a/packages/website/docs/data_visualization/types/categorical.tsx b/packages/website/docs/data_visualization/types/categorical.tsx index 6bb6001d75f..76131c99b6c 100644 --- a/packages/website/docs/data_visualization/types/categorical.tsx +++ b/packages/website/docs/data_visualization/types/categorical.tsx @@ -14,18 +14,19 @@ import { EuiRadioGroup, EuiIcon, EuiTitle, - euiPaletteColorBlind, euiPaletteGreen, euiPaletteForStatus, euiPaletteGray, + useEuiPaletteColorBlind, } from '@elastic/eui'; import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared'; import { useChartBaseTheme } from '../use_chart_base_theme'; export const Categorical = () => { + const euiPaletteColorBlind = useEuiPaletteColorBlind(); const chartBaseTheme = useChartBaseTheme(); - const highlightColor = euiPaletteColorBlind()[2]; + const highlightColor = euiPaletteColorBlind[2]; const idPrefix = 'colorType'; @@ -245,7 +246,7 @@ export const Categorical = () => { data={data} xAccessor={'x'} yAccessors={['y']} - color={[euiPaletteColorBlind()[index < 2 ? 0 : 1]]} + color={[euiPaletteColorBlind[index < 2 ? 0 : 1]]} lineSeriesStyle={{ line: { strokeWidth: isOdd ? 1 : 6, diff --git a/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx index 5462b6e5250..61df6f2a1a6 100644 --- a/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx +++ b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx @@ -184,7 +184,7 @@ import { GITHUB_DATASET_MOD } from '../data'; EuiFlexItem, EuiTitle, EuiSpacer, - euiPaletteColorBlind, + useEuiPaletteColorBlind, } from '@elastic/eui'; import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts'; @@ -197,7 +197,7 @@ import { GITHUB_DATASET_MOD } from '../data'; /** * Create a 3 rotation palette (one for each level) */ - const groupedPalette = euiPaletteColorBlind({ + const groupedPalette = useEuiPaletteColorBlind({ rotations: 3, order: 'group', sortBy: 'natural', diff --git a/packages/website/docs/data_visualization/types/pie_alts.tsx b/packages/website/docs/data_visualization/types/pie_alts.tsx index b918db9aca8..e778edfd6dd 100644 --- a/packages/website/docs/data_visualization/types/pie_alts.tsx +++ b/packages/website/docs/data_visualization/types/pie_alts.tsx @@ -15,10 +15,10 @@ import { EuiFlexItem, EuiCopy, EuiButton, - euiPaletteForTemperature, - euiPaletteColorBlind, - euiPaletteGray, useEuiTheme, + useEuiPaletteColorBlind, + useEuiPaletteForTemperature, + useEuiPaletteGray, } from '@elastic/eui'; import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from '../data'; @@ -37,15 +37,16 @@ export const PieAlts = () => { const [formattedData, setFormattedData] = useState(false); const [grouped, setGrouped] = useState(false); - let color = euiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( + const paletteTemperature0 = useEuiPaletteForTemperature(0); + const paletteTemperature3 = useEuiPaletteForTemperature(3); + const paletteGray = useEuiPaletteGray(5); + + let color = useEuiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( 18, 20 ); if (formatted) { - color = [ - euiPaletteForTemperature(0)[0], - euiPaletteGray(5)[isDarkTheme ? 4 : 0], - ]; + color = [paletteTemperature0[0], paletteGray[isDarkTheme ? 4 : 0]]; } let data; @@ -55,7 +56,7 @@ export const PieAlts = () => { ? orderBy(DAYS_OF_RAIN, ['precipitation', 'days'], ['desc', 'asc']) : DAYS_OF_RAIN; usesRainData = true; - color = euiPaletteForTemperature(3); + color = paletteTemperature3; } else { const DATASET = grouped ? GITHUB_DATASET_MOD : GITHUB_DATASET; data = orderBy(DATASET, 'issueType', 'asc'); diff --git a/packages/website/package.json b/packages/website/package.json index 6f937045339..c545a94ae36 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "docusaurus": "docusaurus", + "build:workspaces": "yarn workspaces foreach -R --from @elastic/eui-website run build:workspaces && yarn workspaces foreach -Rti --from @elastic/eui-website run build", "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider docusaurus start", "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider docusaurus build", "swizzle": "docusaurus swizzle", @@ -22,6 +23,7 @@ "@elastic/eui": "workspace:^", "@elastic/eui-docgen": "workspace:^", "@elastic/eui-docusaurus-theme": "workspace:^", + "@elastic/eui-theme-common": "workspace:^", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@faker-js/faker": "^8.4.1", @@ -39,7 +41,8 @@ "prism-react-renderer": "^2.3.0", "raw-loader": "^4.0.2", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-element-to-jsx-string": "^15.0.0" }, "devDependencies": { "@babel/preset-react": "^7.24.7", diff --git a/packages/website/src/components/homepage/banner/index.tsx b/packages/website/src/components/homepage/banner/index.tsx index a2b926cdb5b..a9340419342 100644 --- a/packages/website/src/components/homepage/banner/index.tsx +++ b/packages/website/src/components/homepage/banner/index.tsx @@ -14,7 +14,7 @@ const STORAGE_VALUE_DISMISSED = 'dismissed'; const getStyles = ({ euiTheme }: UseEuiTheme) => ({ banner: css` .euiLink { - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; text-decoration: underline; } `, diff --git a/packages/website/src/components/homepage/highlights/index.tsx b/packages/website/src/components/homepage/highlights/index.tsx index e9957110530..680a61474f8 100644 --- a/packages/website/src/components/homepage/highlights/index.tsx +++ b/packages/website/src/components/homepage/highlights/index.tsx @@ -3,7 +3,6 @@ import { EuiButtonEmpty, EuiCard, EuiIcon, - EuiImage, EuiText, EuiTextAlign, useEuiMemoizedStyles, @@ -12,8 +11,6 @@ import { } from '@elastic/eui'; import { HomepageContainer, HomepageSection } from '../layout'; import { css } from '@emotion/react'; -import { useContext } from 'react'; -import { AppThemeContext } from '@elastic/eui-docusaurus-theme/lib/components/theme_context/index.js'; import SvgFlex from './svg/flex.svg'; import SvgSpacer from './svg/spacer.svg'; @@ -223,10 +220,7 @@ const getStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ }); export const HomepageHighlights = () => { - const { theme } = useContext(AppThemeContext); const styles = useEuiMemoizedStyles(getStyles); - const isDarkMode = theme === 'dark'; - const headingId = useGeneratedHtmlId(); return ( diff --git a/packages/website/src/components/homepage/users/index.tsx b/packages/website/src/components/homepage/users/index.tsx index 3d5f0d5ee67..3cdea247b1f 100644 --- a/packages/website/src/components/homepage/users/index.tsx +++ b/packages/website/src/components/homepage/users/index.tsx @@ -82,12 +82,12 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => { card: css` &:hover [data-icon-variant='regular'] { background-color: var(--eui-background-color-success); - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } &:hover [data-icon-variant='alternative'] { background-color: var(--eui-background-color-accent); - color: ${euiTheme.colors.accentText}; + color: ${euiTheme.colors.textAccent}; } .euiCard__content { @@ -128,7 +128,7 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => { `, icon: css` background-color: ${euiTheme.colors.lightestShade}; - color: ${euiTheme.colors.subduedText}; + color: ${euiTheme.colors.textSubdued}; `, text: css` font-size: var(--eui-font-size-m); diff --git a/packages/website/src/theme/Demo/default_scope.ts b/packages/website/src/theme/Demo/default_scope.ts index 64b2ee37217..07508c1962f 100644 --- a/packages/website/src/theme/Demo/default_scope.ts +++ b/packages/website/src/theme/Demo/default_scope.ts @@ -8,13 +8,15 @@ import * as EUI from '@elastic/eui'; import * as EmotionReact from '@emotion/react'; -import moment from 'moment' +import * as EuiThemeCommon from '@elastic/eui-theme-common'; +import moment from 'moment'; import { faker } from '@faker-js/faker'; import { DisplayToggles } from '@site/src/components'; export const demoDefaultScope: Record = { // EUI exports ...EUI, + ...EuiThemeCommon, // Emotion ...EmotionReact, @@ -25,4 +27,4 @@ export const demoDefaultScope: Record = { // Utilities DisplayToggles, -} +}; diff --git a/scripts/release.js b/scripts/release.js new file mode 100644 index 00000000000..acad0053d54 --- /dev/null +++ b/scripts/release.js @@ -0,0 +1,9 @@ +/* + * 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. + */ + +require('@elastic/eui-release-cli'); diff --git a/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md b/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md index 7faf221c044..41a45fb52ed 100644 --- a/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md +++ b/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md @@ -13,7 +13,7 @@ import { UseEuiTheme } from '../../services'; export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => { return { euiComponentName: css` // Always start the object with the first key being the name of the component - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, }; }; diff --git a/yarn.lock b/yarn.lock index 10725401de5..209b9cdc5a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4601,6 +4601,7 @@ __metadata: version: 0.0.0-use.local resolution: "@elastic/eui-docgen@workspace:packages/eui-docgen" dependencies: + "@elastic/eui": "workspace:^" glob: "npm:^11.0.0" react-docgen-typescript: "npm:^2.2.2" rimraf: "npm:^6.0.1" @@ -4620,8 +4621,9 @@ __metadata: "@docusaurus/types": "npm:^3.5.2" "@docusaurus/utils-validation": "npm:^3.5.2" "@elastic/datemath": "npm:^5.0.3" - "@elastic/eui": "npm:97.2.0" + "@elastic/eui": "workspace:^" "@elastic/eui-docgen": "workspace:^" + "@elastic/eui-theme-borealis": "workspace:^" "@emotion/css": "npm:^11.11.2" "@emotion/react": "npm:^11.11.4" "@types/react": "npm:^18.3.3" @@ -4645,10 +4647,108 @@ __metadata: version: 0.0.0-use.local resolution: "@elastic/eui-monorepo@workspace:." dependencies: + "@elastic/eui-release-cli": "link:packages/release-cli" pre-push: "npm:^0.1.4" languageName: unknown linkType: soft +"@elastic/eui-release-cli@link:packages/release-cli::locator=%40elastic%2Feui-monorepo%40workspace%3A.": + version: 0.0.0-use.local + resolution: "@elastic/eui-release-cli@link:packages/release-cli::locator=%40elastic%2Feui-monorepo%40workspace%3A." + languageName: node + linkType: soft + +"@elastic/eui-release-cli@workspace:packages/release-cli": + version: 0.0.0-use.local + resolution: "@elastic/eui-release-cli@workspace:packages/release-cli" + dependencies: + "@types/prompts": "npm:^2.4.9" + chalk: "npm:^4" + glob: "npm:^11.0.1" + prompts: "npm:^2.4.2" + rimraf: "npm:^6.0.1" + typescript: "npm:^5.7.3" + yargs: "npm:^17.7.2" + languageName: unknown + linkType: soft + +"@elastic/eui-theme-borealis@workspace:^, @elastic/eui-theme-borealis@workspace:packages/eui-theme-borealis": + version: 0.0.0-use.local + resolution: "@elastic/eui-theme-borealis@workspace:packages/eui-theme-borealis" + dependencies: + "@babel/cli": "npm:^7.21.5" + "@babel/core": "npm:^7.21.8" + "@babel/preset-env": "npm:^7.21.5" + "@babel/preset-react": "npm:^7.18.6" + "@babel/preset-typescript": "npm:^7.21.5" + "@elastic/eui-theme-common": "workspace:^" + "@types/chroma-js": "npm:^2.4.0" + "@types/jest": "npm:^29.5.12" + "@types/prettier": "npm:2.7.3" + "@typescript-eslint/eslint-plugin": "npm:^5.59.7" + "@typescript-eslint/parser": "npm:^5.59.7" + eslint: "npm:^8.41.0" + eslint-config-prettier: "npm:^8.8.0" + eslint-plugin-import: "npm:^2.27.5" + eslint-plugin-jest: "npm:^28.5.0" + eslint-plugin-local: "npm:^1.0.0" + eslint-plugin-prettier: "npm:^4.2.1" + jest: "npm:^29.7.0" + prettier: "npm:^2.8.8" + rimraf: "npm:^6.0.1" + stylelint: "npm:^15.7.0" + stylelint-config-prettier-scss: "npm:^1.0.0" + stylelint-config-standard: "npm:^33.0.0" + stylelint-config-standard-scss: "npm:^9.0.0" + typescript: "npm:^5.6.2" + peerDependencies: + "@elastic/eui-theme-common": 0.0.9 + languageName: unknown + linkType: soft + +"@elastic/eui-theme-common@workspace:^, @elastic/eui-theme-common@workspace:packages/eui-theme-common": + version: 0.0.0-use.local + resolution: "@elastic/eui-theme-common@workspace:packages/eui-theme-common" + dependencies: + "@babel/cli": "npm:^7.21.5" + "@babel/core": "npm:^7.21.8" + "@babel/preset-env": "npm:^7.21.5" + "@babel/preset-react": "npm:^7.18.6" + "@babel/preset-typescript": "npm:^7.21.5" + "@emotion/react": "npm:^11.11.0" + "@types/chroma-js": "npm:^2.4.0" + "@types/jest": "npm:^29.5.12" + "@types/lodash": "npm:^4.14.202" + "@types/prettier": "npm:2.7.3" + "@types/react": "npm:^16.9 || ^17.0 || ^18.0" + "@types/react-dom": "npm:^16.9 || ^17.0 || ^18.0" + "@typescript-eslint/eslint-plugin": "npm:^5.59.7" + "@typescript-eslint/parser": "npm:^5.59.7" + chroma-js: "npm:^2.4.2" + eslint: "npm:^8.41.0" + eslint-config-prettier: "npm:^8.8.0" + eslint-plugin-import: "npm:^2.27.5" + eslint-plugin-jest: "npm:^28.5.0" + eslint-plugin-local: "npm:^1.0.0" + eslint-plugin-prettier: "npm:^4.2.1" + jest: "npm:^29.7.0" + lodash: "npm:^4.17.21" + prettier: "npm:^2.8.8" + react: "npm:^18.2.0" + react-dom: "npm:^18.2.0" + rimraf: "npm:^6.0.1" + stylelint: "npm:^15.7.0" + stylelint-config-prettier-scss: "npm:^1.0.0" + stylelint-config-standard: "npm:^33.0.0" + stylelint-config-standard-scss: "npm:^9.0.0" + typescript: "npm:4.5.3" + peerDependencies: + "@emotion/react": 11.x + react: ^16.12 || ^17.0 || ^18.0 + react-dom: ^16.12 || ^17.0 || ^18.0 + languageName: unknown + linkType: soft + "@elastic/eui-usage-analytics@workspace:packages/eui-usage-analytics": version: 0.0.0-use.local resolution: "@elastic/eui-usage-analytics@workspace:packages/eui-usage-analytics" @@ -4675,6 +4775,7 @@ __metadata: "@elastic/eui": "workspace:^" "@elastic/eui-docgen": "workspace:^" "@elastic/eui-docusaurus-theme": "workspace:^" + "@elastic/eui-theme-common": "workspace:^" "@emotion/css": "npm:^11.11.2" "@emotion/react": "npm:^11.11.4" "@faker-js/faker": "npm:^8.4.1" @@ -4695,61 +4796,11 @@ __metadata: raw-loader: "npm:^4.0.2" react: "npm:^18.0.0" react-dom: "npm:^18.0.0" + react-element-to-jsx-string: "npm:^15.0.0" typescript: "npm:~5.5.4" languageName: unknown linkType: soft -"@elastic/eui@npm:97.2.0": - version: 97.2.0 - resolution: "@elastic/eui@npm:97.2.0" - dependencies: - "@hello-pangea/dnd": "npm:^16.6.0" - "@types/lodash": "npm:^4.14.202" - "@types/numeral": "npm:^2.0.5" - "@types/react-window": "npm:^1.8.8" - "@types/refractor": "npm:^3.4.0" - chroma-js: "npm:^2.4.2" - classnames: "npm:^2.5.1" - lodash: "npm:^4.17.21" - mdast-util-to-hast: "npm:^10.2.0" - numeral: "npm:^2.0.6" - prop-types: "npm:^15.8.1" - react-dropzone: "npm:^11.7.1" - react-element-to-jsx-string: "npm:^15.0.0" - react-focus-on: "npm:^3.9.1" - react-is: "npm:^17.0.2" - react-remove-scroll-bar: "npm:^2.3.4" - react-virtualized-auto-sizer: "npm:^1.0.24" - react-window: "npm:^1.8.10" - refractor: "npm:^3.6.0" - rehype-raw: "npm:^5.1.0" - rehype-react: "npm:^6.2.1" - rehype-stringify: "npm:^8.0.0" - remark-breaks: "npm:^2.0.2" - remark-emoji: "npm:^2.1.0" - remark-parse-no-trim: "npm:^8.0.4" - remark-rehype: "npm:^8.1.0" - tabbable: "npm:^5.3.3" - text-diff: "npm:^1.0.1" - unified: "npm:^9.2.2" - unist-util-visit: "npm:^2.0.3" - url-parse: "npm:^1.5.10" - uuid: "npm:^8.3.0" - vfile: "npm:^4.2.1" - peerDependencies: - "@elastic/datemath": ^5.0.2 - "@emotion/css": 11.x - "@emotion/react": 11.x - "@types/react": ^16.9 || ^17.0 || ^18.0 - "@types/react-dom": ^16.9 || ^17.0 || ^18.0 - moment: ^2.13.0 - react: ^16.12 || ^17.0 || ^18.0 - react-dom: ^16.12 || ^17.0 || ^18.0 - typescript: ~4.5.3 || ^5 - checksum: 10c0/c8fed61d39cc6d06f00caf8234b97e9579ca4d11d7bf0d3cf4cb5d09a6782d8866a7db66b02d3d5eb4f2947a213aca03837b38b166020d21c9bda2e7eb20ad11 - languageName: node - linkType: hard - "@elastic/eui@workspace:^, @elastic/eui@workspace:packages/eui": version: 0.0.0-use.local resolution: "@elastic/eui@workspace:packages/eui" @@ -4771,6 +4822,8 @@ __metadata: "@cypress/webpack-dev-server": "npm:^1.7.0" "@elastic/charts": "npm:^64.1.0" "@elastic/datemath": "npm:^5.0.3" + "@elastic/eui-theme-borealis": "workspace:^" + "@elastic/eui-theme-common": "workspace:^" "@elastic/prismjs-esql": "npm:^1.0.0" "@emotion/babel-preset-css-prop": "npm:^11.11.0" "@emotion/cache": "npm:^11.11.0" @@ -4955,6 +5008,7 @@ __metadata: yo: "npm:^4.3.1" peerDependencies: "@elastic/datemath": ^5.0.2 + "@elastic/eui-theme-borealis": 0.0.11 "@emotion/css": 11.x "@emotion/react": 11.x "@types/react": ^16.9 || ^17.0 || ^18.0 @@ -8442,6 +8496,16 @@ __metadata: languageName: node linkType: hard +"@types/prompts@npm:^2.4.9": + version: 2.4.9 + resolution: "@types/prompts@npm:2.4.9" + dependencies: + "@types/node": "npm:*" + kleur: "npm:^3.0.3" + checksum: 10c0/22fe0da6807681c85e88ba283184f4be4c8a95c744ea12a638865c98c4e0c22e7f733542f6b0f1fbca02245cdc3fe84feacf9c9adf4ddd8bc98a337fd679d8d2 + languageName: node + linkType: hard + "@types/prop-types@npm:*": version: 15.7.3 resolution: "@types/prop-types@npm:15.7.3" @@ -8479,21 +8543,21 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.6": - version: 18.2.6 - resolution: "@types/react-dom@npm:18.2.6" +"@types/react-dom@npm:^16.9 || ^17.0 || ^18.0, @types/react-dom@npm:^18.3.0": + version: 18.3.0 + resolution: "@types/react-dom@npm:18.3.0" dependencies: "@types/react": "npm:*" - checksum: 10c0/bd734ca04c52b3c96891a7f9c1139486807dac7a2449fb72e8f8e23018bc6eeeb87a490a105cb39d05ccb7ddf80ed7a441e5bd3e5866c6f6ae8870cd723599e8 + checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b languageName: node linkType: hard -"@types/react-dom@npm:^18.3.0": - version: 18.3.0 - resolution: "@types/react-dom@npm:18.3.0" +"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.6": + version: 18.2.6 + resolution: "@types/react-dom@npm:18.2.6" dependencies: "@types/react": "npm:*" - checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b + checksum: 10c0/bd734ca04c52b3c96891a7f9c1139486807dac7a2449fb72e8f8e23018bc6eeeb87a490a105cb39d05ccb7ddf80ed7a441e5bd3e5866c6f6ae8870cd723599e8 languageName: node linkType: hard @@ -12133,7 +12197,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2": +"chalk@npm:4.1.2, chalk@npm:^4, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2": version: 4.1.2 resolution: "chalk@npm:4.1.2" dependencies: @@ -18616,6 +18680,22 @@ __metadata: languageName: node linkType: hard +"glob@npm:^11.0.1": + version: 11.0.1 + resolution: "glob@npm:11.0.1" + dependencies: + foreground-child: "npm:^3.1.0" + jackspeak: "npm:^4.0.1" + minimatch: "npm:^10.0.0" + minipass: "npm:^7.1.2" + package-json-from-dist: "npm:^1.0.0" + path-scurry: "npm:^2.0.0" + bin: + glob: dist/esm/bin.mjs + checksum: 10c0/2b32588be52e9e90f914c7d8dec32f3144b81b84054b0f70e9adfebf37cd7014570489f2a79d21f7801b9a4bd4cca94f426966bfd00fb64a5b705cfe10da3a03 + languageName: node + linkType: hard + "glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0": version: 7.2.3 resolution: "glob@npm:7.2.3" @@ -34676,7 +34756,7 @@ __metadata: languageName: node linkType: hard -"typescript@npm:5.6.2": +"typescript@npm:5.6.2, typescript@npm:^5.6.2": version: 5.6.2 resolution: "typescript@npm:5.6.2" bin: @@ -34686,6 +34766,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^5.7.3": + version: 5.7.3 + resolution: "typescript@npm:5.7.3" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/b7580d716cf1824736cc6e628ab4cd8b51877408ba2be0869d2866da35ef8366dd6ae9eb9d0851470a39be17cbd61df1126f9e211d8799d764ea7431d5435afa + languageName: node + linkType: hard + "typescript@npm:~5.5.4": version: 5.5.4 resolution: "typescript@npm:5.5.4" @@ -34706,7 +34796,7 @@ __metadata: languageName: node linkType: hard -"typescript@patch:typescript@npm%3A5.6.2#optional!builtin": +"typescript@patch:typescript@npm%3A5.6.2#optional!builtin, typescript@patch:typescript@npm%3A^5.6.2#optional!builtin": version: 5.6.2 resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin::version=5.6.2&hash=8c6c40" bin: @@ -34716,6 +34806,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@npm%3A^5.7.3#optional!builtin": + version: 5.7.3 + resolution: "typescript@patch:typescript@npm%3A5.7.3#optional!builtin::version=5.7.3&hash=5786d5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/6fd7e0ed3bf23a81246878c613423730c40e8bdbfec4c6e4d7bf1b847cbb39076e56ad5f50aa9d7ebd89877999abaee216002d3f2818885e41c907caaa192cc4 + languageName: node + linkType: hard + "typescript@patch:typescript@npm%3A~5.5.4#optional!builtin": version: 5.5.4 resolution: "typescript@patch:typescript@npm%3A5.5.4#optional!builtin::version=5.5.4&hash=379a07" @@ -37049,7 +37149,7 @@ __metadata: languageName: node linkType: hard -"yargs@npm:^17.3.1, yargs@npm:^17.5.1": +"yargs@npm:^17.3.1, yargs@npm:^17.5.1, yargs@npm:^17.7.2": version: 17.7.2 resolution: "yargs@npm:17.7.2" dependencies: