docs: split t2 colors stories and remove t2 stories aggregator (#1719)

Author: jinlee93

.storybook/components/DesignTokens/Tier2/Borders.jsx

@@ -0,0 +1,42 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import { Grid, Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
+
+export default {
+  title: 'Design Tokens/Tier 2: Usage',
+  parameters: {
+    axe: {
+      // For documentation purposes only
+      skip: true,
+    },
+  },
+};
+
+export const Borders: StoryObj = {
+  render: () => (
+    <div>
+      <Section title="Border Width">
+        <Grid>
+          {filterTokens(`eds-theme-border-width`).map(function (listItem) {
+            return (
+              <Grid.Item key={listItem.name}>
+                <TokenSpecimen
+                  inlineStyles={{
+                    backgroundColor: 'transparent',
+                    borderWidth: `var(${listItem.name})`,
+                    borderStyle: 'solid',
+                    borderColor: 'black',
+                  }}
+                  name={listItem.name}
+                  value={listItem.value}
+                />
+              </Grid.Item>
+            );
+          })}
+        </Grid>
+      </Section>
+    </div>
+  ),
+};

.storybook/components/DesignTokens/Tier2/Borders.stories.tsx

@@ -0,0 +1,100 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import { Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { ColorList } from '../../ColorList/ColorList';
+
+export default {
+  title: 'Design Tokens/Tier 2: Usage/Colors',
+  parameters: {
+    axe: {
+      // For documentation purposes only
+      skip: true,
+    },
+  },
+};
+
+const getListItems = ({
+  filterTerm,
+  figmaTokenHeader,
+  tailwindClassHeader,
+}: {
+  filterTerm: string;
+  figmaTokenHeader: string;
+  tailwindClassHeader: string;
+}) =>
+  filterTokens(filterTerm).map(({ name, value }) => {
+    const specifier = name.slice(
+      name.indexOf(filterTerm) + filterTerm.length + 1,
+    );
+    return {
+      name,
+      value,
+      figmaToken: figmaTokenHeader + '/' + specifier,
+      tailwindClass: tailwindClassHeader + '-' + specifier,
+    };
+  });
+
+export const Text: StoryObj = {
+  render: () => (
+    <div>
+      <Section title="Text Colors">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-text',
+            figmaTokenHeader: 'text',
+            tailwindClassHeader: 'text',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+export const Icon: StoryObj = {
+  render: () => (
+    <div>
+      <Section title="Icon Colors">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-icon',
+            figmaTokenHeader: 'icon',
+            tailwindClassHeader: 'text-icon',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+export const Background: StoryObj = {
+  render: () => (
+    <div>
+      <Section title="Background Colors">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-background',
+            figmaTokenHeader: 'background',
+            tailwindClassHeader: 'bg',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+export const Border: StoryObj = {
+  render: () => (
+    <div>
+      <Section title="Border Colors">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-border',
+            figmaTokenHeader: 'border',
+            tailwindClassHeader: 'border',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};