docs(ColorPage): table of colors

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>

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>
+  );
+};