({
+ id: color.value,
+ ...color,
+ }))}
+ columns={[
+ {
+ field: 'value',
+ name: 'Sample',
+ align: 'center',
+ width: '60px',
+ render: (value: string) => {
+ if (sampleType === 'swatch') {
+ return ;
+ }
+ return (
+
+ Aa
+
+ );
+ },
+ mobileOptions: {
+ render: (item: Color) => (
+
+ {sampleType === 'swatch' ? (
+
+ ) : (
+
+ Aa
+
+ )}
+ {item.token}
+
+ ),
+ header: false,
+ width: '100%',
+ enlarge: true,
+ },
+ },
+ {
+ field: 'token',
+ name: 'Token',
+ render: (token: string, item: Color) => (
+
+ {token}
+ {item.description}
+
+ ),
+ mobileOptions: {
+ render: (item: Color) => {item.description},
+ header: false,
+ width: '100%',
+ },
+ },
+ {
+ field: 'value',
+ name: 'Value',
+ align: 'right',
+ width: '100px',
+ },
+ ]}
+ />
+);
diff --git a/packages/website/docs/components/theming/colors/is_color_dark_preview.tsx b/packages/website/docs/components/theming/colors/is_color_dark_preview.tsx
new file mode 100644
index 00000000000..54118deedf7
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/is_color_dark_preview.tsx
@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { useEuiTheme, isColorDark } from '@elastic/eui';
+
+export const IsColorDarkPreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ {isColorDark(0, 179, 164) ? 'Dark' : 'Light'}
+
+ );
+}
diff --git a/packages/website/docs/components/theming/colors/make_high_contrast_color_eui_theme_preview.tsx b/packages/website/docs/components/theming/colors/make_high_contrast_color_eui_theme_preview.tsx
new file mode 100644
index 00000000000..8d6f2d72eda
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/make_high_contrast_color_eui_theme_preview.tsx
@@ -0,0 +1,24 @@
+import chroma from 'chroma-js';
+import { css } from '@emotion/react';
+import { useEuiTheme, makeHighContrastColor } from '@elastic/eui';
+import React from 'react';
+
+export const MakeHighContrastColorEuiThemePreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ {chroma
+ .contrast(
+ makeHighContrastColor('#fdc791')(euiTheme),
+ euiTheme.colors.body
+ )
+ .toFixed(2)}
+ {': makeHighContrastColor(#fdc791, euiTheme)'}
+
+ );
+};
diff --git a/packages/website/docs/components/theming/colors/make_high_contrast_color_preview.tsx b/packages/website/docs/components/theming/colors/make_high_contrast_color_preview.tsx
new file mode 100644
index 00000000000..1ebf1d999ab
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/make_high_contrast_color_preview.tsx
@@ -0,0 +1,23 @@
+import chroma from 'chroma-js';
+import { css } from '@emotion/react';
+import { useEuiTheme, makeHighContrastColor } from '@elastic/eui';
+
+export const MakeHighContrastColorPreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ {chroma
+ .contrast(makeHighContrastColor('white')('pink'), 'pink')
+ .toFixed(2)}
+ {": makeHighContrastColor('white')('pink')"}
+
+ );
+};
diff --git a/packages/website/docs/components/theming/colors/shade_color_preview.tsx b/packages/website/docs/components/theming/colors/shade_color_preview.tsx
new file mode 100644
index 00000000000..c1653c9fa20
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/shade_color_preview.tsx
@@ -0,0 +1,17 @@
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const ShadeColorPreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ background: {euiTheme.colors.lightShade}
+
+ )
+}
diff --git a/packages/website/docs/components/theming/colors/shade_colors_table.tsx b/packages/website/docs/components/theming/colors/shade_colors_table.tsx
new file mode 100644
index 00000000000..b28f116a12c
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/shade_colors_table.tsx
@@ -0,0 +1,48 @@
+import { useEuiTheme } from '@elastic/eui';
+import { ColorsTable } from './colors_table';
+
+export const ShadeColorsTable = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+ Used as the background color of primary page content and panels including modals and flyouts.,
+ },
+ {
+ value: euiTheme.colors.lightestShade,
+ token: 'colors.lightestShade',
+ description: <>Used to lightly shade areas that contain secondary content or contain panel-like components.,
+ },
+ {
+ value: euiTheme.colors.lightShade,
+ token: 'colors.lightShade',
+ description: <>Used for most borders and dividers (horizontal rules).,
+ },
+ {
+ value: euiTheme.colors.mediumShade,
+ token: 'colors.mediumShade',
+ description: <>The middle gray for all themes; this is the base for colors.subdued,
+ },
+ {
+ value: euiTheme.colors.darkShade,
+ token: 'colors.darkShade',
+ description: <>Slightly subtle graphic color,
+ },
+ {
+ value: euiTheme.colors.darkestShade,
+ token: 'colors.darkestShade',
+ description: <>Used as the text color and the background color for inverted components like tooltips and the control bar.,
+ },
+ {
+ value: euiTheme.colors.fullShade,
+ token: 'colors.fullShade',
+ description: <>The opposite of emptyShade,
+ },
+ ]}
+ />
+ )
+};
diff --git a/packages/website/docs/components/theming/colors/shade_preview.tsx b/packages/website/docs/components/theming/colors/shade_preview.tsx
new file mode 100644
index 00000000000..8ef2a737a48
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/shade_preview.tsx
@@ -0,0 +1,19 @@
+import { useEuiTheme, EuiBadge, shade } from '@elastic/eui';
+import React from 'react';
+
+export const ShadePreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ shade(
+
+ {euiTheme.colors.danger}
+
+ , 0.75) ={' '}
+
+ {shade(euiTheme.colors.danger, 0.25)}
+
+
+ );
+};
diff --git a/packages/website/docs/components/theming/colors/special_colors_preview.tsx b/packages/website/docs/components/theming/colors/special_colors_preview.tsx
new file mode 100644
index 00000000000..176a83b471a
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/special_colors_preview.tsx
@@ -0,0 +1,18 @@
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const SpecialColorsPreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ This text is always white and the background always black.
+
+ )
+}
diff --git a/packages/website/docs/components/theming/colors/special_colors_table.tsx b/packages/website/docs/components/theming/colors/special_colors_table.tsx
new file mode 100644
index 00000000000..afa4b3f36e6
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/special_colors_table.tsx
@@ -0,0 +1,46 @@
+import { useEuiTheme } from '@elastic/eui';
+import { ColorsTable } from './colors_table';
+
+export const SpecialColorsTable = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+ The background color for the whole window (body) and is a computed value of colors.lightestShade. Provides denominator (background) value for contrast calculations,
+ },
+ {
+ value: euiTheme.colors.highlight,
+ token: 'colors.highlight',
+ description: <>Used to highlight text when matching against search strings.,
+ },
+ {
+ value: euiTheme.colors.disabled,
+ token: 'colors.disabled',
+ description: <>Computed against colors.darkestShade.,
+ },
+ {
+ value: euiTheme.colors.disabledText,
+ token: 'colors.disabledText',
+ description: <>Computed against colors.disabled,
+ },
+ {
+ value: euiTheme.colors.shadow,
+ token: 'colors.shadow',
+ description: <>The base color for shadows that gets transparentized at a base value on the colorMode and then layered.,
+ },
+ {
+ value: euiTheme.colors.ghost,
+ token: 'colors.ghost',
+ },
+ {
+ value: euiTheme.colors.ink,
+ token: 'colors.ink',
+ },
+ ]}
+ />
+ )
+};
diff --git a/packages/website/docs/components/theming/colors/text_color_preview.tsx b/packages/website/docs/components/theming/colors/text_color_preview.tsx
new file mode 100644
index 00000000000..0570f7d966d
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/text_color_preview.tsx
@@ -0,0 +1,16 @@
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const TextColorPreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ color: {euiTheme.colors.warningText}
+
+ )
+}
diff --git a/packages/website/docs/components/theming/colors/text_colors_table.tsx b/packages/website/docs/components/theming/colors/text_colors_table.tsx
new file mode 100644
index 00000000000..a86ef693918
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/text_colors_table.tsx
@@ -0,0 +1,50 @@
+import { useEuiTheme } from '@elastic/eui';
+import { ColorsTable } from './colors_table';
+
+export const TextColorsTable = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ )
+};
diff --git a/packages/website/docs/components/theming/colors/tint_preview.tsx b/packages/website/docs/components/theming/colors/tint_preview.tsx
new file mode 100644
index 00000000000..4fffba85acf
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/tint_preview.tsx
@@ -0,0 +1,18 @@
+import { useEuiTheme, EuiBadge, tint } from '@elastic/eui';
+
+export const TintPreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ tint(
+
+ {euiTheme.colors.danger}
+
+ , 0.75) ={' '}
+
+ {tint(euiTheme.colors.danger, 0.75)}
+
+
+ );
+};
diff --git a/packages/website/docs/components/theming/colors/transparentize_preview.tsx b/packages/website/docs/components/theming/colors/transparentize_preview.tsx
new file mode 100644
index 00000000000..46f53c4bf90
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/transparentize_preview.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useEuiTheme, EuiBadge, transparentize } from '@elastic/eui';
+
+export const TransparentizePreview = () => {
+ const { euiTheme, colorMode } = useEuiTheme();
+
+ return (
+
+ transparentize(
+ #006837, 0.75) ={' '}
+
+ {transparentize('#006837', 0.25)}
+
+
+ );
+};
diff --git a/packages/website/docs/components/theming/colors/utilities.mdx b/packages/website/docs/components/theming/colors/utilities.mdx
new file mode 100644
index 00000000000..a88a3b482e6
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/utilities.mdx
@@ -0,0 +1,244 @@
+---
+slug: /theming/colors/utilities
+id: theming_colors_utilities
+---
+
+# Color utilities
+
+## Background colors
+
+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 [**EuiPanel**](/docs/layout/panel) for the same effect plus more options like padding and rounded corners.
+
+```mdx-code-block
+import { Example } from '@site/src/components';
+import { UseEuiBackgroundColorCSSPreview } from './utilities/use_eui_background_color_css_preview';
+```
+
+
+
+ ### `useEuiBackgroundColorCSS()[color]` style hook
+
+ Returns an object of the available color keys containing the css string of the computed background version for the given `color`.
+
+ This is best used to map component prop styles to padding output.
+
+ ```tsx
+ color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+ ```
+
+
+
+
+
+ ```tsx
+ const colorStyles = useEuiBackgroundColorCSS();
+ const cssStyles = [colorStyles['accent']];
+
+
+ /* Your content */
+
+ ```
+
+
+
+```mdx-code-block
+import { UseEuiBackgroundColorPreview } from './utilities/use_eui_background_color_preview';
+```
+
+
+
+ ### `useEuiBackgroundColor(color, method?)` hook
+
+ Returns just the computed background color for the given `color`.
+
+ ```
+ color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'primary' | 'success' | 'warning' | 'danger';
+
+ method? 'opaque' | 'transparent';
+ ```
+
+
+
+
+
+ ```
+ css`
+ background: ${useEuiBackgroundColor('subdued')};
+ `
+ ```
+
+
+
+```mdx-code-block
+import { UseEuiBackgroundColorTable } from './utilities/use_eui_background_color_table';
+```
+
+
+
+
+## Utilities
+
+### Contrast
+
+:::warning
+
+Note that color contrast cannot be accurately detected when using transparency (colors with alpha channels).
+
+:::
+
+```mdx-code-block
+import { MakeHighContrastColorPreview } from './make_high_contrast_color_preview';
+import { MakeHighContrastColorEuiThemePreview } from './make_high_contrast_color_eui_theme_preview';
+```
+
+
+
+ ### `makeHighContrastColor(foreground, ratio)(background)` function
+
+ Use this function to calculate the appropriate foreground color (usually text) based on a background color.
+
+ ```
+ foreground: string;
+ ratio?: number = 4.5;
+ background?: string = euiTheme.colors.body;
+ ```
+
+
+
+
+
+ ```tsx
+ css`
+ color: ${makeHighContrastColor(foreground)(background)};
+ `
+ ```
+
+
+
+
+
+ If you want to use the same background color that the EUI theme uses for all of its contrast calculations, you can pass in the `euiTheme` as the background.
+
+
+
+
+
+ ```tsx
+ css`
+ color: ${makeHighContrastColor(foreground)(euiTheme)};
+ `
+ ```
+
+
+
+```mdx-code-block
+import { IsColorDarkPreview } from './is_color_dark_preview';
+```
+
+
+
+ ### `isColorDark(red, green, blue)` function
+
+ Use this function to determine whether or not to use light or dark text against the given background color. It requires the values to be passed in as rgb integers and will return a `boolean` if the color is dark based on luminance.
+
+ If the function returns `true`, use `euiTheme.colors.ghost` otherwise use `euiTheme.colors.ink` as the text color.
+
+ ```
+ red: 0-255;
+ green: 0-255;
+ blue: 0-255;
+ ```
+
+
+
+
+
+ ```tsx
+ css`
+ color: ${isColorDark(color)
+ ? euiTheme.colors.ghost
+ : euiTheme.colors.ink;}
+ `
+ ```
+
+
+
+---
+
+### Transparency
+
+```mdx-code-block
+import { TransparentizePreview } from './transparentize_preview';
+```
+
+
+
+ ### `transparentize(color, alpha)` function
+
+ Use this function to convert any color to `rgba()` with the provided alpha value.
+
+ ```
+ color: string;
+ alpha: decimal = 0-1;
+ ```
+
+
+
+
+
+ ```tsx
+ transparentize(color, 0.75)
+ ```
+
+
+
+---
+
+### Tint and shade
+
+```mdx-code-block
+import { TintPreview } from './tint_preview';
+import { ShadePreview } from './shade_preview';
+```
+
+
+
+ ### `tint(color, ratio)` function
+
+ Use this function to mix any color with **white**. The higher the ratio, the more white will be mixed.
+
+ ```
+ color: string;
+ ratio: decimal = 0-1;
+ ```
+
+
+
+
+
+ ```tsx
+ tint(euiTheme.colors.danger, 0.75)
+ ```
+
+
+
+
+
+ ### `shade(color, ratio)` function
+
+ Use this function to mix any color with **black**. The higher the ratio, the more black will be mixed.
+
+ ```
+ color: string;
+ ratio: decimal = 0-1;
+ ```
+
+
+
+
+
+ ```tsx
+ shade(euiTheme.colors.danger, 0.25)
+ ```
+
+
diff --git a/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_css_preview.tsx b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_css_preview.tsx
new file mode 100644
index 00000000000..895ad86c9fb
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_css_preview.tsx
@@ -0,0 +1,12 @@
+import { useEuiBackgroundColorCSS, useEuiPaddingCSS } from '@elastic/eui';
+import { useEuiBackgroundColor } from '@elastic/eui/src/global_styling/mixins/_color';
+
+export const UseEuiBackgroundColorCSSPreview = () => {
+ const accentStyles = useEuiBackgroundColorCSS().accent;
+
+ return (
+
+ background-color: {useEuiBackgroundColor('accent')}
+
+ )
+}
diff --git a/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_preview.tsx b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_preview.tsx
new file mode 100644
index 00000000000..64fd05d2d7f
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_preview.tsx
@@ -0,0 +1,18 @@
+import { useEuiBackgroundColor } from '@elastic/eui/src/global_styling/mixins/_color';
+import { css } from '@emotion/react';
+import { useEuiPaddingCSS } from '@elastic/eui/src/global_styling/mixins/_padding';
+
+export const UseEuiBackgroundColorPreview = () => {
+ return (
+
+ {useEuiBackgroundColor('subdued')}
+
+ )
+}
diff --git a/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_table.tsx b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_table.tsx
new file mode 100644
index 00000000000..b065f93e59c
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_table.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import {
+ EuiPanel,
+ EuiDescribedFormGroup,
+ EuiSpacer,
+ EuiButtonGroup,
+ useEuiTheme,
+} from '@elastic/eui';
+import { ColorsTable } from '../colors_table';
+import { euiBackgroundColor } from '@elastic/eui/src/global_styling/mixins/_color';
+
+const colors = [
+ 'transparent',
+ 'plain',
+ 'subdued',
+ 'accent',
+ 'primary',
+ 'success',
+ 'warning',
+ 'danger',
+] as const;
+
+export const UseEuiBackgroundColorTable = () => {
+ const theme = useEuiTheme();
+ const [activeBackground, setActiveBackground] = useState<
+ 'transparent' | 'opaque'
+ >('opaque');
+
+ 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.
+
+ }
+ >
+
+ 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
new file mode 100644
index 00000000000..73ea3c043d4
--- /dev/null
+++ b/packages/website/docs/components/theming/colors/values.mdx
@@ -0,0 +1,142 @@
+---
+slug: /theming/colors
+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.
+
+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**.
+
+## Brand colors
+
+Elastic has two main brand colors. The other three are used for statefulness like indicating between successful and dangerous actions.
+
+```mdx-code-block
+import { Example } from '@site/src/components';
+import { BrandColorPreview } from './brand_color_preview';
+import { BrandColorsTable } from './brand_colors_table';
+```
+
+
+
+ ### `euiTheme.colors[brand]` token
+
+ Most usages of the colors can be implemented simply by pulling and applying the values.
+
+
+
+
+
+ ```tsx
+ css`
+ background: ${euiTheme.colors.warning};
+ `
+ ```
+
+
+
+
+
+
+
+## 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).
+
+```mdx-code-block
+import { TextColorPreview } from './text_color_preview';
+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.
+
+
+
+
+
+ ```tsx
+ css`
+ color: ${euiTheme.colors.warningText};
+ `
+ ```
+
+
+
+
+
+
+
+## Shades
+
+A six-color grayscale palette. Variation beyond these colors is minimal and always done through computations against this set.
+
+```mdx-code-block
+import { ShadeColorPreview } from './shade_color_preview';
+import { ShadeColorsTable } from './shade_colors_table';
+```
+
+
+
+ ### `euiTheme.colors[colorShade]` token
+
+ 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.
+
+ For all available color functions see the [Colors Utilities page](/docs/theming/colors/utilities).
+
+
+
+
+
+ ```tsx
+ css`
+ background: ${euiTheme.colors.lightShade};
+ `
+ ```
+
+
+
+
+
+
+
+## Special colors
+
+These are used a lot for special cases.
+
+```mdx-code-block
+import { SpecialColorsPreview } from './special_colors_preview';
+import { SpecialColorsTable } from './special_colors_table';
+```
+
+
+
+ ### `euiTheme.colors[special]` token
+
+ Constant colors are those that do not change no matter the theme or color mode and typically represent the polar extremes.
+
+
+
+
+
+ ```
+ css`
+ color: ${euiTheme.colors.ghost};
+ background-color: ${euiTheme.colors.ink};
+ `
+ ```
+
+
+
+
+
+
diff --git a/packages/website/docs/components/theming/sizing.mdx b/packages/website/docs/components/theming/sizing.mdx
new file mode 100644
index 00000000000..17a3cd135c6
--- /dev/null
+++ b/packages/website/docs/components/theming/sizing.mdx
@@ -0,0 +1,77 @@
+---
+slug: /theming/sizing
+id: theming_sizing
+---
+
+# Sizing
+
+```mdx-code-block
+import { Example } from '@site/src/components';
+import { BasePreview } from './sizing/base_preview';
+import { SizePreview } from './sizing/size_preview';
+import { CalcPreview } from './sizing/calc_preview';
+import { SizesTable } from './sizing/sizes_table';
+```
+
+## Base
+
+All sizing values, including font sizes, are calculated from a single base integer and converted to pixel or rem string values.
+
+
+
+ ### `euiTheme.base = 16` token
+
+ This `base` integer sets the scale for the entire theme. You can use calculations on top of the base value, just be sure to append the `px` unit to the end.
+
+
+
+
+
+ ```tsx
+ css`
+ padding: ${euiTheme.base * 2}px;
+ `
+ ```
+
+
+
+## Scale
+
+
+
+ ### `euiTheme.size[size]` token
+
+ Use the named keys as as much as possible.
+
+
+
+
+
+ ```tsx
+ css`
+ padding: ${euiTheme.size.xl};
+ `
+ ```
+
+
+
+
+
+ ### `calc()` CSS function
+
+ When doing calculations on top of the named key values, you have to use the [CSS `calc()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/calc\(\)) because the value that is returned is a string value with the appended unit.
+
+
+
+
+
+ ```tsx
+ css`
+ padding: calc(${euiTheme.size.base} * 2);
+ `
+ ```
+
+
+
+
+
diff --git a/packages/website/docs/components/theming/sizing/base_preview.tsx b/packages/website/docs/components/theming/sizing/base_preview.tsx
new file mode 100644
index 00000000000..8db85423d6b
--- /dev/null
+++ b/packages/website/docs/components/theming/sizing/base_preview.tsx
@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+
+export const BasePreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ {`padding: ${euiTheme.base * 2}px`}
+
+ );
+};
diff --git a/packages/website/docs/components/theming/sizing/calc_preview.tsx b/packages/website/docs/components/theming/sizing/calc_preview.tsx
new file mode 100644
index 00000000000..69a8b19d7a0
--- /dev/null
+++ b/packages/website/docs/components/theming/sizing/calc_preview.tsx
@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+
+export const CalcPreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ {`padding: calc(${euiTheme.size.base} * 2)`}
+
+ );
+}
diff --git a/packages/website/docs/components/theming/sizing/size_preview.tsx b/packages/website/docs/components/theming/sizing/size_preview.tsx
new file mode 100644
index 00000000000..631e733cfe0
--- /dev/null
+++ b/packages/website/docs/components/theming/sizing/size_preview.tsx
@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+
+export const SizePreview = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+
+ {`padding: ${euiTheme.size.xl}`}
+
+ );
+};
diff --git a/packages/website/docs/components/theming/sizing/sizes_table.tsx b/packages/website/docs/components/theming/sizing/sizes_table.tsx
new file mode 100644
index 00000000000..b852b420cd9
--- /dev/null
+++ b/packages/website/docs/components/theming/sizing/sizes_table.tsx
@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import { logicalSizeCSS, useEuiTheme } from '@elastic/eui';
+import { ThemeValuesTable } from '../theme_values_table';
+
+export const SizesTable = () => {
+ const { euiTheme } = useEuiTheme();
+
+ return (
+ ({
+ id: size,
+ token: `size.${size}`,
+ value: euiTheme.size[size],
+ }))}
+ render={(size) => (
+
+ )}
+ sampleColumnProps={{
+ width: '100px',
+ }}
+ />
+ );
+}
diff --git a/packages/website/package.json b/packages/website/package.json
index ae64a5faeb7..a3937745371 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -27,6 +27,7 @@
"@faker-js/faker": "^8.4.1",
"@mdx-js/react": "^3.0.0",
"@types/lodash": "^4.14.202",
+ "chroma-js": "^3.1.2",
"classnames": "^2.5.1",
"clsx": "^2.0.0",
"cross-env": "^7.0.3",
diff --git a/yarn.lock b/yarn.lock
index 86a02c77364..f49dfbf49ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5802,6 +5802,7 @@ __metadata:
"@types/lodash": "npm:^4.14.202"
"@types/react": "npm:^18.3.3"
"@types/react-dom": "npm:^18.3.0"
+ chroma-js: "npm:^3.1.2"
classnames: "npm:^2.5.1"
clsx: "npm:^2.0.0"
cross-env: "npm:^7.0.3"
@@ -13965,6 +13966,13 @@ __metadata:
languageName: node
linkType: hard
+"chroma-js@npm:^3.1.2":
+ version: 3.1.2
+ resolution: "chroma-js@npm:3.1.2"
+ checksum: 10c0/145ce9aea91dac81c6158082675084778e8c83e6959032e37fd4ba9b01db9f5c29c520453ec4bab7e87689f12756fcc63821e3c6b866e083ea41d341c7b2bf71
+ languageName: node
+ linkType: hard
+
"chrome-launcher@npm:0.15.2":
version: 0.15.2
resolution: "chrome-launcher@npm:0.15.2"