docs: add missing theming pages

packages/website/docs/components/theming/colors/_category_.yml

@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: theming_colors

packages/website/docs/components/theming/colors/brand_color_preview.tsx

@@ -0,0 +1,17 @@
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const BrandColorPreview = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <div
+      css={css`
+        padding: ${euiTheme.size.s};
+        background: ${euiTheme.colors.warning};
+      `}
+    >
+      <strong>background: {euiTheme.colors.warning}</strong>
+    </div>
+  )
+}

packages/website/docs/components/theming/colors/brand_colors_table.tsx

@@ -0,0 +1,38 @@
+import { useEuiTheme } from '@elastic/eui';
+import { ColorsTable } from './colors_table';
+
+export const BrandColorsTable = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <ColorsTable
+      colors={[
+        {
+          value: euiTheme.colors.primary,
+          token: 'colors.primary',
+          description: <>Main brand color and used for most <strong>call to actions</strong> like buttons and links.</>,
+        },
+        {
+          value: euiTheme.colors.accent,
+          token: 'colors.accent',
+          description: <>Pulls attention to key indicators like <strong>notifications</strong> or number of selections.</>,
+        },
+        {
+          value: euiTheme.colors.success,
+          token: 'colors.success',
+          description: <>Used for <strong>positive</strong> messages/graphics and additive actions.</>,
+        },
+        {
+          value: euiTheme.colors.warning,
+          token: 'colors.warning',
+          description: <>Used for <strong>warnings</strong> and actions that have potential to be destructive.</>,
+        },
+        {
+          value: euiTheme.colors.danger,
+          token: 'colors.danger',
+          description: <>Used for <strong>negative</strong> messages/graphics like errors and destructive elements.</>,
+        },
+      ]}
+    />
+  )
+};

packages/website/docs/components/theming/colors/colors_table.tsx

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import {
+  EuiBasicTable,
+  EuiCode,
+  EuiColorPickerSwatch,
+  EuiFlexGroup,
+  EuiText,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+interface Color {
+  value: string;
+  token: string;
+  description?: ReactNode;
+}
+
+export interface ColorsTableProps {
+  colors: Color[];
+  sampleType?: 'swatch' | 'text';
+}
+
+export const ColorsTable = ({
+  colors,
+  sampleType = 'swatch',
+}: ColorsTableProps) => (
+  <EuiBasicTable
+    items={colors.map((color) => ({
+      id: color.value,
+      ...color,
+    }))}
+    columns={[
+      {
+        field: 'value',
+        name: 'Sample',
+        align: 'center',
+        width: '60px',
+        render: (value: string) => {
+          if (sampleType === 'swatch') {
+            return <EuiColorPickerSwatch color={value} />;
+          }
+          return (
+            <EuiText color={value}>
+              <strong>Aa</strong>
+            </EuiText>
+          );
+        },
+        mobileOptions: {
+          render: (item: Color) => (
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              {sampleType === 'swatch' ? (
+                <EuiColorPickerSwatch color={item.value} />
+              ) : (
+                <EuiText color={item.value}>
+                  <strong>Aa</strong>
+                </EuiText>
+              )}
+              <EuiCode>{item.token}</EuiCode>
+            </EuiFlexGroup>
+          ),
+          header: false,
+          width: '100%',
+          enlarge: true,
+        },
+      },
+      {
+        field: 'token',
+        name: 'Token',
+        render: (token: string, item: Color) => (
+          <EuiFlexGroup
+            direction="column"
+            gutterSize="xs"
+            alignItems="flexStart"
+          >
+            <EuiCode>{token}</EuiCode>
+            <EuiText size="s">{item.description}</EuiText>
+          </EuiFlexGroup>
+        ),
+        mobileOptions: {
+          render: (item: Color) => <EuiText>{item.description}</EuiText>,
+          header: false,
+          width: '100%',
+        },
+      },
+      {
+        field: 'value',
+        name: 'Value',
+        align: 'right',
+        width: '100px',
+      },
+    ]}
+  />
+);

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 (
+    <div
+      css={css`
+            padding: ${euiTheme.size.base};
+            color: ${isColorDark(0, 179, 164)
+        ? euiTheme.colors.ghost
+        : euiTheme.colors.ink};
+            background: rgb(0, 179, 164);
+          `}
+    >
+      {isColorDark(0, 179, 164) ? 'Dark' : 'Light'}
+    </div>
+  );
+}

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 (
+    <div
+      css={css`
+        color: ${makeHighContrastColor('#fdc791')(euiTheme)};
+      `}
+    >
+      {chroma
+        .contrast(
+          makeHighContrastColor('#fdc791')(euiTheme),
+          euiTheme.colors.body
+        )
+        .toFixed(2)}
+      {': makeHighContrastColor(#fdc791, euiTheme)'}
+    </div>
+  );
+};

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 (
+    <div
+      css={css`
+            padding: ${euiTheme.size.base};
+            border-radius: ${euiTheme.border.radius.small};
+            background: pink;
+            color: ${makeHighContrastColor('white')('pink')};
+          `}
+    >
+      {chroma
+        .contrast(makeHighContrastColor('white')('pink'), 'pink')
+        .toFixed(2)}
+      {": makeHighContrastColor('white')('pink')"}
+    </div>
+  );
+};

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 (
+    <div
+      css={css`
+        padding: ${euiTheme.size.s};
+        background: ${euiTheme.colors.lightShade};
+      `}
+    >
+      <strong>background: {euiTheme.colors.lightShade}</strong>
+    </div>
+  )
+}

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 (
+    <ColorsTable
+      colors={[
+        {
+          value: euiTheme.colors.emptyShade,
+          token: 'colors.emptyShade',
+          description: <>Used as the background color of primary <strong>page content and panels</strong> including modals and flyouts.</>,
+        },
+        {
+          value: euiTheme.colors.lightestShade,
+          token: 'colors.lightestShade',
+          description: <>Used to lightly shade areas that contain <strong>secondary content</strong> or contain panel-like components.</>,
+        },
+        {
+          value: euiTheme.colors.lightShade,
+          token: 'colors.lightShade',
+          description: <>Used for most <strong>borders</strong> and dividers (horizontal rules).</>,
+        },
+        {
+          value: euiTheme.colors.mediumShade,
+          token: 'colors.mediumShade',
+          description: <>The middle gray for all themes; this is the base for <code>colors.subdued</code></>,
+        },
+        {
+          value: euiTheme.colors.darkShade,
+          token: 'colors.darkShade',
+          description: <>Slightly subtle graphic color</>,
+        },
+        {
+          value: euiTheme.colors.darkestShade,
+          token: 'colors.darkestShade',
+          description: <>Used as the <strong>text</strong> color and the background color for <strong>inverted components</strong> like tooltips and the control bar.</>,
+        },
+        {
+          value: euiTheme.colors.fullShade,
+          token: 'colors.fullShade',
+          description: <>The opposite of <code>emptyShade</code></>,
+        },
+      ]}
+    />
+  )
+};

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 (
+    <code>
+      shade(
+      <EuiBadge color={euiTheme.colors.danger}>
+        {euiTheme.colors.danger}
+      </EuiBadge>
+      , 0.75) ={' '}
+      <EuiBadge color={shade(euiTheme.colors.danger, 0.25)}>
+        {shade(euiTheme.colors.danger, 0.25)}
+      </EuiBadge>
+    </code>
+  );
+};

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 (
+    <div
+      css={css`
+        padding: ${euiTheme.size.s};
+        background: ${euiTheme.colors.ink};
+        color: ${euiTheme.colors.ghost};
+      `}
+    >
+      <strong>This text is always white and the background always black.</strong>
+    </div>
+  )
+}

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 (
+    <ColorsTable
+      colors={[
+        {
+          value: euiTheme.colors.body,
+          token: 'colors.body',
+          description: <>The background color for the <strong>whole window (body)</strong> and is a computed value of <strong>colors.lightestShade</strong>. Provides denominator (background) value for <strong>contrast calculations</strong></>,
+        },
+        {
+          value: euiTheme.colors.highlight,
+          token: 'colors.highlight',
+          description: <>Used to <strong>highlight text</strong> when matching against search strings.</>,
+        },
+        {
+          value: euiTheme.colors.disabled,
+          token: 'colors.disabled',
+          description: <>Computed against <code>colors.darkestShade</code>.</>,
+        },
+        {
+          value: euiTheme.colors.disabledText,
+          token: 'colors.disabledText',
+          description: <>Computed against <code>colors.disabled</code></>,
+        },
+        {
+          value: euiTheme.colors.shadow,
+          token: 'colors.shadow',
+          description: <>The base color for shadows that gets <code>transparentized</code> at a base value on the <code>colorMode</code> and then layered.</>,
+        },
+        {
+          value: euiTheme.colors.ghost,
+          token: 'colors.ghost',
+        },
+        {
+          value: euiTheme.colors.ink,
+          token: 'colors.ink',
+        },
+      ]}
+    />
+  )
+};

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 (
+    <div
+      css={css`
+        color: ${euiTheme.colors.warningText};
+      `}
+    >
+      <strong>color: {euiTheme.colors.warningText}</strong>
+    </div>
+  )
+}