docs: split t3 colors stories and remove t3 stories aggregator (#1720)

* docs: split t2 colors stories and remove t2 stories aggregator

* docs: split t3 colors stories and remove t3 stories aggregator

* docs: fix tailwind classes in color tokens stories

* docs: recurse filters tokens to primary value

* test: skip t3 button chromatic

* docs(tokens): style colors into a table

.storybook/components/ColorList/ColorList.module.css

@@ -12,6 +12,10 @@
 .color-list__input {
   width: 100%;
   height: 5rem;
+  border: var(--eds-theme-color-border-neutral-subtle) solid
+    var(--eds-border-width-sm);
+  outline: var(--eds-theme-color-border-neutral-strong) solid
+    var(--eds-border-width-sm);
 }
 
 .color-list__input::-webkit-color-swatch {

.storybook/components/ColorList/ColorList.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Table from '../../../src/components/Table';
 import styles from './ColorList.module.css';
 
 type ListItem = {
@@ -13,30 +14,43 @@ type Props = {
 };
 
 export const ColorList = (props: Props) => (
-  <div className="flex flex-col gap-4">
-    {props.listItems.map(function (listItem) {
-      return (
-        <div className="flex gap-4 bg-neutral-default p-4" key={listItem.name}>
-          <div className="flex w-80 flex-col gap-1">
+  <Table>
+    <Table.Header>
+      <Table.Row variant="header">
+        <Table.HeaderCell className="w-72">CSS Variable</Table.HeaderCell>
+        <Table.HeaderCell className="w-40">Figma Token Name</Table.HeaderCell>
+        <Table.HeaderCell className="w-72">
+          Tailwind Class Name(s)
+        </Table.HeaderCell>
+        <Table.HeaderCell className="w-40">Raw Value</Table.HeaderCell>
+        <Table.HeaderCell>Clickable Color Palatte</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {props.listItems.map((listItem) => (
+        <Table.Row key={listItem.name}>
+          <Table.Cell>
             <label
               className={styles['color-list__label']}
               htmlFor={listItem.name}
             >
               <code>{listItem.name}</code>
             </label>
-            {listItem.figmaToken && <span>{listItem.figmaToken}</span>}
-            {listItem.tailwindClass && <span>{listItem.tailwindClass}</span>}
-            <code>{listItem.value}</code>
-          </div>
-          <input
-            className={styles['color-list__input']}
-            id={listItem.name}
-            readOnly
-            type="color"
-            value={listItem.value}
-          />
-        </div>
-      );
-    })}
-  </div>
+          </Table.Cell>
+          <Table.Cell>{listItem.figmaToken}</Table.Cell>
+          <Table.Cell>{listItem.tailwindClass}</Table.Cell>
+          <Table.Cell>{listItem.value}</Table.Cell>
+          <Table.Cell>
+            <input
+              className={styles['color-list__input']}
+              id={listItem.name}
+              readOnly
+              type="color"
+              value={listItem.value}
+            />
+          </Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
 );