From d4c9d667b38e75dd4c3b711750c89ffef212a1b3 Mon Sep 17 00:00:00 2001
From: Vadym <v.bezpalko@livechat.com>
Date: Thu, 25 Jan 2024 15:24:53 +0100
Subject: [PATCH] docs(ColorPage): table of colors

---
 .../docs/foundations/Color/Color.stories.mdx  |    5 +-
 .../src/docs/foundations/Color/ColorTable.tsx |   37 +
 .../docs/foundations/Color/ColorTokens.tsx    |  159 --
 .../src/docs/foundations/Color/constants.ts   | 1678 +----------------
 .../src/docs/foundations/Color/types.ts       |   20 +-
 5 files changed, 62 insertions(+), 1837 deletions(-)
 create mode 100644 packages/react-components/src/docs/foundations/Color/ColorTable.tsx
 delete mode 100644 packages/react-components/src/docs/foundations/Color/ColorTokens.tsx

diff --git a/packages/react-components/src/docs/foundations/Color/Color.stories.mdx b/packages/react-components/src/docs/foundations/Color/Color.stories.mdx
index 1b99d1899..5538dd3e3 100644
--- a/packages/react-components/src/docs/foundations/Color/Color.stories.mdx
+++ b/packages/react-components/src/docs/foundations/Color/Color.stories.mdx
@@ -1,5 +1,6 @@
 import { Meta, Canvas } from '@storybook/addon-docs';
-import { ColorTokensPallete } from './ColorTokens';
+import { ColorTable } from './ColorTable';
+import { ColorsTokens } from './constants';
 
 <Meta title="Foundations/Color" />
 
@@ -27,5 +28,5 @@ Content color tokens in a design system help organize information visually. By a
     backgroundColor: 'var(--background)',
   }}
 >
-  <ColorTokensPallete />
+  <ColorTable data={ColorsTokens}></ColorTable>
 </Canvas>
diff --git a/packages/react-components/src/docs/foundations/Color/ColorTable.tsx b/packages/react-components/src/docs/foundations/Color/ColorTable.tsx
new file mode 100644
index 000000000..b1900fe4f
--- /dev/null
+++ b/packages/react-components/src/docs/foundations/Color/ColorTable.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { ColorShape } from './types';
+
+interface IColorTableProps {
+  data: ColorShape[];
+}
+
+export const ColorTable: React.FC<IColorTableProps> = ({ data }) => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Example</th>
+          <th>Enum</th>
+          <th>Token</th>
+          <th>Usage</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((color) => (
+          <tr>
+            <td>
+              <div
+                className="color-example"
+                style={{ backgroundColor: color.value }}
+              />
+            </td>
+            <td>DesignToken.{color.enum}</td>
+            <td>{color.value}</td>
+            <td>{color.desc}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
diff --git a/packages/react-components/src/docs/foundations/Color/ColorTokens.tsx b/packages/react-components/src/docs/foundations/Color/ColorTokens.tsx
deleted file mode 100644
index 649100377..000000000
--- a/packages/react-components/src/docs/foundations/Color/ColorTokens.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from 'react';
-
-import { Text } from '../../../components/Typography';
-import { DesignToken } from '../../../themes/design-token';
-
-interface TokensGroup {
-  background: string[];
-  surface: string[];
-  content: string[];
-  border: string[];
-  action: string[];
-  color: string[];
-  decor: string[];
-  products: string[];
-  illustrations: string[];
-  tag: string[];
-  btn: string[];
-  picker: string[];
-  popover: string[];
-}
-
-type TokenGroupName =
-  | 'background'
-  | 'surface'
-  | 'content'
-  | 'border'
-  | 'action'
-  | 'color'
-  | 'decor'
-  | 'products'
-  | 'illustrations'
-  | 'btn'
-  | 'picker'
-  | 'popover'
-  | 'tag';
-
-const Tokens: TokensGroup = Object.values(
-  DesignToken as { [key: string]: string }
-).reduce(
-  (acc: TokensGroup, value) => {
-    const groupName = value.split('-').filter(Boolean)[0] as TokenGroupName;
-    acc[groupName]?.push(value);
-
-    return acc;
-  },
-  {
-    background: [],
-    surface: [],
-    content: [],
-    border: [],
-    action: [],
-    color: [],
-    decor: [],
-    products: [],
-    illustrations: [],
-    tag: [],
-    btn: [],
-    picker: [],
-    popover: [],
-  }
-);
-
-const CONTENT = {
-  background: {
-    heading: 'Background',
-    content:
-      'Basic layer of the UI – this represents the canvas (for developers) or frame (for designers)',
-  },
-  surface: {
-    heading: 'Surface',
-    content:
-      'Background of components, like cards, input fields, tooltips, ect.',
-  },
-  content: {
-    heading: 'Content',
-    content: 'Fonts & icons (mostly)',
-  },
-  border: {
-    heading: 'Border',
-    content: 'Style for components borders',
-  },
-  action: {
-    heading: 'Action colors',
-    content:
-      'All colors that drive attention in the UI - it can be either action, warning, negative or positive',
-  },
-  color: {
-    heading: 'Accent colors',
-    content:
-      'All colors that drive attention in the UI - it can be either action, warning, negative or positive',
-  },
-  decor: {
-    heading: 'Decor',
-    content:
-      'Those colors can be used for specific elements of the UI, they were purposely separated from all other tokens, as they are used only for decorative means. Those colors are shared between all three themes — Legacy, Light & Dark. This palette is not yet fully supported in dark mode.',
-  },
-  products: {
-    heading: 'Products',
-    content: '',
-  },
-  illustrations: {
-    heading: 'Illustrations',
-    content: '',
-  },
-  tag: {
-    heading: 'Tag',
-    content: '',
-  },
-  btn: {
-    heading: 'Button',
-    content: '',
-  },
-  picker: {
-    heading: 'Picker',
-    content: '',
-  },
-  popover: {
-    heading: 'Popover',
-    content: '',
-  },
-};
-
-export const ColorTokensPallete: React.FC = () => (
-  <React.Fragment>
-    {Object.entries(CONTENT).map(([section, { heading, content }]) => (
-      <React.Fragment key={section}>
-        <h2>{heading}</h2>
-        <Text as="p">{content}</Text>
-        <ul style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
-          {Tokens[section as TokenGroupName].map((colorToken: string) => (
-            <li
-              key={colorToken}
-              style={{
-                display: 'flex',
-                cursor: 'pointer',
-                alignItems: 'center',
-              }}
-              onClick={() => {
-                void navigator.clipboard.writeText(colorToken);
-              }}
-            >
-              <div
-                style={{
-                  background: `var(${colorToken})`,
-                  border: '1px solid var(--border-subtle)',
-                  borderRadius: '4px',
-                  width: '50px',
-                  height: '50px',
-                  margin: '5px',
-                }}
-              />
-              <Text>{colorToken}</Text>
-            </li>
-          ))}
-        </ul>
-      </React.Fragment>
-    ))}
-  </React.Fragment>
-);
diff --git a/packages/react-components/src/docs/foundations/Color/constants.ts b/packages/react-components/src/docs/foundations/Color/constants.ts
index 1ddc24c05..7ad15d84a 100644
--- a/packages/react-components/src/docs/foundations/Color/constants.ts
+++ b/packages/react-components/src/docs/foundations/Color/constants.ts
@@ -1,1668 +1,14 @@
-import { DesignToken } from '../../../themes/design-token';
+import { DesignToken, DesignTokenKey } from '../../../themes/design-token';
 
-import { ColorGroup, ColorsShape } from './types';
+import { ColorGroup, ColorShape } from './types';
 
-export const Colors: ColorsShape = {
-  ActionHighContrastActive: {
-    enum: 'ActionHighContrastActive',
-    variable: DesignToken.ActionHighContrastActive,
-    desc: '',
-    group: ColorGroup.ActionHighContrast,
-  },
-  ActionHighContrastDefault: {
-    enum: 'ActionHighContrastDefault',
-    variable: DesignToken.ActionHighContrastDefault,
-    desc: '',
-    group: ColorGroup.ActionHighContrast,
-  },
-  ActionHighContrastDisabled: {
-    enum: 'ActionHighContrastDisabled',
-    variable: '',
-    desc: DesignToken.ActionHighContrastDisabled,
-    group: ColorGroup.ActionHighContrast,
-  },
-  ActionHighContrastHover: {
-    enum: 'ActionHighContrastHover',
-    variable: DesignToken.ActionHighContrastHover,
-    desc: '',
-    group: ColorGroup.ActionHighContrast,
-  },
-  ActionNegativeActive: {
-    enum: 'ActionNegativeActive',
-    variable: DesignToken.ActionNegativeActive,
-    desc: '',
-    group: ColorGroup.ActionNegative,
-  },
-  ActionNegativeDefault: {
-    enum: 'ActionNegativeDefault',
-    variable: DesignToken.ActionNegativeDefault,
-    desc: '',
-    group: ColorGroup.ActionNegative,
-  },
-  ActionNegativeDisabled: {
-    enum: 'ActionNegativeDisabled',
-    variable: DesignToken.ActionNegativeDisabled,
-    desc: '',
-    group: ColorGroup.ActionNegative,
-  },
-  ActionNegativeHover: {
-    enum: 'ActionNegativeHover',
-    variable: DesignToken.ActionNegativeHover,
-    desc: '',
-    group: ColorGroup.ActionNegative,
-  },
-  ActionNeutralDefault: {
-    enum: 'ActionNeutralDefault',
-    variable: DesignToken.ActionNeutralDefault,
-    desc: '',
-    group: '',
-  },
-  ActionNeutralDisabled: {
-    enum: 'ActionNeutralDisabled',
-    variable: DesignToken.ActionNeutralDisabled,
-    desc: '',
-    group: '',
-  },
-  ActionNeutralHover: {
-    enum: 'ActionNeutralHover',
-    variable: DesignToken.ActionNeutralHover,
-    desc: '',
-    group: '',
-  },
-  ActionPositiveDefault: {
-    enum: 'ActionPositiveDefault',
-    variable: DesignToken.ActionPositiveDefault,
-    desc: '',
-    group: '',
-  },
-  ActionPositiveDisabled: {
-    enum: 'ActionPositiveDisabled',
-    variable: DesignToken.ActionPositiveDisabled,
-    desc: '',
-    group: '',
-  },
-  ActionPositiveHover: {
-    enum: 'ActionPositiveHover',
-    variable: DesignToken.ActionPositiveHover,
-    desc: '',
-    group: '',
-  },
-  ActionPrimaryActive: {
-    enum: 'ActionPrimaryActive',
-    variable: DesignToken.ActionPrimaryActive,
-    desc: '',
-    group: '',
-  },
-  ActionPrimaryDefault: {
-    enum: 'ActionPrimaryDefault',
-    variable: DesignToken.ActionPrimaryDefault,
-    desc: '',
-    group: '',
-  },
-  ActionPrimaryDisabled: {
-    enum: 'ActionPrimaryDisabled',
-    variable: DesignToken.ActionPrimaryDisabled,
-    desc: '',
-    group: '',
-  },
-  ActionPrimaryHover: {
-    enum: 'ActionPrimaryHover',
-    variable: DesignToken.ActionPrimaryHover,
-    desc: '',
-    group: '',
-  },
-  ActionWarningDefault: {
-    enum: 'ActionWarningDefault',
-    variable: DesignToken.ActionWarningDefault,
-    desc: '',
-    group: '',
-  },
-  ActionWarningDisabled: {
-    enum: 'ActionWarningDisabled',
-    variable: DesignToken.ActionWarningDisabled,
-    desc: '',
-    group: '',
-  },
-  ActionWarningHover: {
-    enum: 'ActionWarningHover',
-    variable: DesignToken.ActionWarningHover,
-    desc: '',
-    group: '',
-  },
-  Background: {
-    enum: 'Background',
-    variable: DesignToken.Background,
-    desc: '',
-    group: '',
-  },
-  Background01: {
-    enum: 'Background01',
-    variable: DesignToken.Background01,
-    desc: '',
-    group: '',
-  },
-  Background02: {
-    enum: 'Background02',
-    variable: DesignToken.Background02,
-    desc: '',
-    group: '',
-  },
-  Background03: {
-    enum: 'Background03',
-    variable: DesignToken.Background03,
-    desc: '',
-    group: '',
-  },
-  BorderBasicContrast: {
-    enum: 'BorderBasicContrast',
-    variable: DesignToken.BorderBasicContrast,
-    desc: '',
-    group: '',
-  },
-  BorderBasicDisabled: {
-    enum: 'BorderBasicDisabled',
-    variable: DesignToken.BorderBasicDisabled,
-    desc: '',
-    group: '',
-  },
-  BorderBasicHover: {
-    enum: 'BorderBasicHover',
-    variable: DesignToken.BorderBasicHover,
-    desc: '',
-    group: '',
-  },
-  BorderBasicInfo: {
-    enum: 'BorderBasicInfo',
-    variable: DesignToken.BorderBasicInfo,
-    desc: '',
-    group: '',
-  },
-  BorderBasicNegative: {
-    enum: 'BorderBasicNegative',
-    variable: DesignToken.BorderBasicNegative,
-    desc: '',
-    group: '',
-  },
-  BorderBasicPositive: {
-    enum: 'BorderBasicPositive',
-    variable: DesignToken.BorderBasicPositive,
-    desc: '',
-    group: '',
-  },
-  BorderBasicPrimary: {
-    enum: 'BorderBasicPrimary',
-    variable: DesignToken.BorderBasicPrimary,
-    desc: '',
-    group: '',
-  },
-  BorderBasicPurple: {
-    enum: 'BorderBasicPurple',
-    variable: DesignToken.BorderBasicPurple,
-    desc: '',
-    group: '',
-  },
-  BorderBasicSecondary: {
-    enum: 'BorderBasicSecondary',
-    variable: DesignToken.BorderBasicSecondary,
-    desc: '',
-    group: '',
-  },
-  BorderBasicTertiary: {
-    enum: 'BorderBasicTertiary',
-    variable: DesignToken.BorderBasicTertiary,
-    desc: '',
-    group: '',
-  },
-  BorderBasicWarning: {
-    enum: 'BorderBasicWarning',
-    variable: DesignToken.BorderBasicWarning,
-    desc: '',
-    group: '',
-  },
-  BorderDefault: {
-    enum: 'BorderDefault',
-    variable: DesignToken.BorderDefault,
-    desc: '',
-    group: '',
-  },
-  BorderDisabled: {
-    enum: 'BorderDisabled',
-    variable: DesignToken.BorderDisabled,
-    desc: '',
-    group: '',
-  },
-  BorderHover: {
-    enum: 'BorderHover',
-    variable: DesignToken.BorderHover,
-    desc: '',
-    group: '',
-  },
-  BorderInvertDefault: {
-    enum: 'BorderInvertDefault',
-    variable: DesignToken.BorderInvertDefault,
-    desc: '',
-    group: '',
-  },
-  BorderInvertDisabled: {
-    enum: 'BorderInvertDisabled',
-    variable: DesignToken.BorderInvertDisabled,
-    desc: '',
-    group: '',
-  },
-  BorderInvertHover: {
-    enum: 'BorderInvertHover',
-    variable: DesignToken.BorderInvertHover,
-    desc: '',
-    group: '',
-  },
-  BorderInvertPrimary: {
-    enum: 'BorderInvertPrimary',
-    variable: DesignToken.BorderInvertPrimary,
-    desc: '',
-    group: '',
-  },
-  BorderInvertSecondary: {
-    enum: 'BorderInvertSecondary',
-    variable: DesignToken.BorderInvertSecondary,
-    desc: '',
-    group: '',
-  },
-  BorderInvertSubtle: {
-    enum: 'BorderInvertSubtle',
-    variable: DesignToken.BorderInvertSubtle,
-    desc: '',
-    group: '',
-  },
-  BorderSubtle: {
-    enum: 'BorderSubtle',
-    variable: DesignToken.BorderSubtle,
-    desc: '',
-    group: '',
-  },
-  BtnBasicBackgroundActive: {
-    enum: 'BtnBasicBackgroundActive',
-    variable: DesignToken.BtnBasicBackgroundActive,
-    desc: '',
-    group: '',
-  },
-  BtnBasicBackgroundDisabled: {
-    enum: 'BtnBasicBackgroundDisabled',
-    variable: DesignToken.BtnBasicBackgroundDisabled,
-    desc: '',
-    group: '',
-  },
-  BtnBasicBackgroundEnabled: {
-    enum: 'BtnBasicBackgroundEnabled',
-    variable: DesignToken.BtnBasicBackgroundEnabled,
-    desc: '',
-    group: '',
-  },
-  BtnBasicBackgroundHover: {
-    enum: 'BtnBasicBackgroundHover',
-    variable: DesignToken.BtnBasicBackgroundHover,
-    desc: '',
-    group: '',
-  },
-  BtnBasicBackgroundLoading: {
-    enum: 'BtnBasicBackgroundLoading',
-    variable: DesignToken.BtnBasicBackgroundLoading,
-    desc: '',
-    group: '',
-  },
-  BtnPlainIconBackgroundActive: {
-    enum: 'BtnPlainIconBackgroundActive',
-    variable: DesignToken.BtnPlainIconBackgroundActive,
-    desc: '',
-    group: '',
-  },
-  BtnPlainIconBackgroundHover: {
-    enum: 'BtnPlainIconBackgroundHover',
-    variable: DesignToken.BtnPlainIconBackgroundHover,
-    desc: '',
-    group: '',
-  },
-  BtnSecondaryBackgroundActive: {
-    enum: 'BtnSecondaryBackgroundActive',
-    variable: DesignToken.BtnSecondaryBackgroundActive,
-    desc: '',
-    group: '',
-  },
-  BtnSecondaryBackgroundDisabled: {
-    enum: 'BtnSecondaryBackgroundDisabled',
-    variable: DesignToken.BtnSecondaryBackgroundDisabled,
-    desc: '',
-    group: '',
-  },
-  BtnSecondaryBackgroundEnabled: {
-    enum: 'BtnSecondaryBackgroundEnabled',
-    variable: DesignToken.BtnSecondaryBackgroundEnabled,
-    desc: '',
-    group: '',
-  },
-  BtnSecondaryBackgroundHover: {
-    enum: 'BtnSecondaryBackgroundHover',
-    variable: DesignToken.BtnSecondaryBackgroundHover,
-    desc: '',
-    group: '',
-  },
-  BtnSecondaryBackgroundLoading: {
-    enum: 'BtnSecondaryBackgroundLoading',
-    variable: DesignToken.BtnSecondaryBackgroundLoading,
-    desc: '',
-    group: '',
-  },
-  ColorActionActive: {
-    enum: 'ColorActionActive',
-    variable: DesignToken.ColorActionActive,
-    desc: '',
-    group: '',
-  },
-  ColorActionDefault: {
-    enum: 'ColorActionDefault',
-    variable: DesignToken.ColorActionDefault,
-    desc: '',
-    group: '',
-  },
-  ColorActionDefaultRgb: {
-    enum: 'ColorActionDefaultRgb',
-    variable: DesignToken.ColorActionDefaultRgb,
-    desc: '',
-    group: '',
-  },
-  ColorActionDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorActionHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorBlack: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorBot: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorNegativeActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorNegativeDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorNegativeDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorNegativeHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorPositiveDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorPositiveDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorPositiveHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorWarningDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorWarningHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ColorWhite: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicGradient01: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicInfo: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicNegative: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicPositive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicPrimary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicPurple: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicSecondary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBasicWarning: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentBlackLocked: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentInvertDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentInvertDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentInvertGradient01: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentInvertPrimary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentInvertSecondary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentInvertSubtle: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentLockedActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentLockedBlack: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentLockedDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentLockedDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentLockedHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentLockedWhite: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentSubtle: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ContentWhiteLocked: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue100: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue200: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue300: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue400: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue50: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue500: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue600: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue700: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue800: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorBlue900: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray100: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray150: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray20: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray200: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray300: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray40: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray400: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray50: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray500: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray600: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray700: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray75: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray800: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray900: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGray950: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen100: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen200: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen300: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen400: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen50: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen500: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen600: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen700: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen800: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorGreen900: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange100: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange200: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange300: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange400: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange50: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange500: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange600: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange700: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange800: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorOrange900: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple100: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple200: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple300: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple400: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple50: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple500: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple600: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple700: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple800: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorPurple900: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed100: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed200: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed300: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed400: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed50: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed500: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed600: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed700: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed800: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorRed900: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow100: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow200: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow300: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow400: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow50: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow500: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow600: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow700: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow800: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  DecorYellow900: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  IllustrationsPrimary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  IllustrationsSecondary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  IllustrationsStroke: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  NavbarBackground: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  PickerListBackground: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  PickerListGroupBackground: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  PickerListOptionBackgroundActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  PickerListOptionBackgroundActiveHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  PickerListOptionBackgroundFocus: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  PickerListOptionBackgroundHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  PopoverBackground: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ProductsChatbot: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ProductsHelpdesk: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ProductsKnowledgebase: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  ProductsLivechat: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisHighInfo: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisHighNegative: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisHighPositive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisHighPurple: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisHighWarning: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisLowInfo: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisLowNegative: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisLowPositive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisLowPurple: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisLowWarning: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisMediumNegative: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisMediumPositive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisMinInfo: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisMinNegative: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisMinPositive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisMinPurple: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAccentEmphasisMinWarning: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar1: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar10: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar2: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar3: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar4: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar5: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar6: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar7: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar8: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceAvatar9: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceBasicActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceBasicDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceBasicDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceBasicHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceBasicSubtle: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceFeedbackInfo: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceFeedbackNegative: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceFeedbackPositive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceFeedbackWarning: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient01: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient02: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient03: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient04: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient05: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient06: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient07: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient08: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient09: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient10: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceGradient11: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceInvertDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceInvertDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceInvertPrimary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceInvertSecondary: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceInvertSubtle: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceLockedActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceLockedBlack: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceLockedDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceLockedDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceLockedHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceLockedWhite: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceModerateActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceModerateDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceModerateHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceOtherAgent: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceOtherAgentHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceOtherBot: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceOtherBotHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceOtherOverlay: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceOtherSkeleton: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceOverlay: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfacePrimaryActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfacePrimaryActiveColored: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfacePrimaryDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfacePrimaryDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfacePrimaryHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfacePrimaryHoverOpacity: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceSecondaryActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceSecondaryDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceSecondaryDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceSecondaryHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceSecondarySubtle: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceTertiaryActive: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceTertiaryDefault: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceTertiaryDisabled: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  SurfaceTertiaryHover: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  TagContent01: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  TagSurface01: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-  TooltipBorder: {
-    enum: 'Background',
-    variable: '',
-    desc: '',
-    group: '',
-  },
-};
+const ColorBaseVariants = Object.entries(DesignToken).map(([key, value]) => ({
+  enum: key as DesignTokenKey,
+  value,
+}));
+
+export const ColorsTokens: ColorShape[] = ColorBaseVariants.map((color) => ({
+  ...color,
+  desc: 'Temporary description',
+  group: ColorGroup.Other,
+}));
diff --git a/packages/react-components/src/docs/foundations/Color/types.ts b/packages/react-components/src/docs/foundations/Color/types.ts
index 7afe6740f..d324ffd18 100644
--- a/packages/react-components/src/docs/foundations/Color/types.ts
+++ b/packages/react-components/src/docs/foundations/Color/types.ts
@@ -31,13 +31,13 @@ export enum ColorGroup {
   Deprecated, // ???
 }
 
-export type ColorsShape = Record<
-  DesignTokenKey,
-  {
-    enum: DesignTokenKey;
-    variable: string;
-    desc: string;
-    group: ColorGroup | string; // todo remove string type
-    deprecated?: boolean;
-  }
->;
+export type ColorBaseBody = {
+  enum: DesignTokenKey;
+  value: string;
+};
+
+export type ColorShape = ColorBaseBody & {
+  desc: string;
+  group: ColorGroup | string; // todo remove string type
+  deprecated?: boolean;
+};