feat: document brand colors, semantic colors, and dark values

src/docs/Foundation.DesignTokens.stories.mdx

@@ -1,4 +1,5 @@
 import { ColorPalette, ColorItem, Meta } from '@storybook/addon-docs';
+import { color } from '@palmetto/palmetto-design-tokens/build/js/variables-color';
 import { size } from '@palmetto/palmetto-design-tokens/build/js/variables-size';
 import { asset } from '@palmetto/palmetto-design-tokens/build/js/variables-asset';
 import { Canvas } from '@storybook/addon-docs';
@@ -17,34 +18,6 @@ We use [Style Dictionary](https://amzn.github.io/style-dictionary/) to generate
 
 [Palmetto Design Tokens](https://github.com/palmetto/palmetto-design-tokens) are available as an [npm package](https://www.npmjs.com/package/@palmetto/palmetto-design-tokens) so that you can create a Palmetto unified product experience for your platform of choice.
 
-## Types
-
-### Global Tokens
-
-Global tokens are the primitive values in our design language, represented by context-agnostic names. Color palette, spacing, typography, and dimension values are all recorded as global tokens. These can be directly used, and are inherited by all other token types.
-
-```css
---color-brand-grey-500: #2f8459;
-```
-
-### Alias Tokens or Common Tokens
-
-Alias tokens relate to a specific context or abstraction. Aliases help communicate the intended purpose of a token, and are effective when a value with a single intent will appear in multiple places.
-
-```css
---color-brand-primary-500: #008433; /* alias */
---form-control-background-color: --color-background-white; /* common */
-```
-
-### Component Specific Tokens
-
-Component-specific tokens have the most specific component level context. They often inherit from alias or global tokens, but are named in a way that allows consumers to be as specific as possible in applying tokens in component development.
-
-```css
---button-background-color: --color-brand-primary-500; /* component */
---badge-size-xl-font-size: --size-font-md;
-```
-
 ## Border Radius
 
 Use these tokens for `border-radius`. They are defined in `rem`, which means they will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
@@ -163,6 +136,194 @@ The following breakpoints are used in utility classes, but you can use them to m
 
 Refer to the [Palmetto Design Tokens Figma](https://www.figma.com/design/abGRptpr7iPaMsXdEPVm6W/Design-Tokens?node-id=0-1&t=oY6gZSqBDdP10U54-1) for colors.
 
+### Brand Palette
+
+<ColorPalette>
+  <ColorItem
+    title="color-brand-primary"
+    subtitle="Primary colors"
+    colors={Object.keys(color.brand.primary).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.primary).map(
+        g => color.brand.primary[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-secondary"
+    subtitle="secondary colors"
+    colors={Object.keys(color.brand.secondary).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.secondary).map(
+        g => color.brand.secondary[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-tertiary"
+    subtitle="tertiary colors"
+    colors={Object.keys(color.brand.tertiary).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.tertiary).map(
+        g => color.brand.tertiary[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-success"
+    subtitle="success colors"
+    colors={Object.keys(color.brand.success).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.success).map(
+        g => color.brand.success[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-info"
+    subtitle="info colors"
+    colors={Object.keys(color.brand.info).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.info).map(
+        g => color.brand.info[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-warning"
+    subtitle="warning colors"
+    colors={Object.keys(color.brand.warning).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.warning).map(
+        g => color.brand.warning[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-orange"
+    subtitle="orange colors"
+    colors={Object.keys(color.brand.orange).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.orange).map(
+        g => color.brand.orange[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-danger"
+    subtitle="danger colors"
+    colors={Object.keys(color.brand.danger).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.danger).map(
+        g => color.brand.danger[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-brand-grey"
+    subtitle="All greys"
+    colors={Object.keys(color.brand.grey).reduce((acc, item, i) => {
+      acc[item] = Object.keys(color.brand.grey).map(
+        g => color.brand.grey[g].value,
+      )[i];
+      return acc;
+    }, {})}
+  />
+</ColorPalette>
+
+### Background Color Tokens
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Token Name</th>
+      <th>Prop Value</th>
+      <th>Value</th>
+      <th></th>
+      <th>Dark Value</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(color.background).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`color-background-${name}`}</code>
+        </td>
+        <td>
+          <code>{name}</code>
+        </td>
+        <td>{entry.value}</td>
+        <td style={{ background: entry.value }}></td>
+        <td>{entry.darkValue}</td>
+        <td style={{ background: entry.darkValue }}></td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+### Border Color Tokens
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Token Name</th>
+      <th>Prop Value</th>
+      <th>Value</th>
+      <th></th>
+      <th>Dark Value</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(color.border).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`color-border-${name}`}</code>
+        </td>
+        <td>
+          <code>{name}</code>
+        </td>
+        <td>{entry.value}</td>
+        <td style={{ background: entry.value }}></td>
+        <td>{entry.darkValue}</td>
+        <td style={{ background: entry.darkValue }}></td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+### Font Color Tokens
+
+<table style={{ width: '100%' }}>
+  <thead>
+    <tr>
+      <th>Token Name</th>
+      <th>Prop Value</th>
+      <th>Value</th>
+      <th></th>
+      <th>Dark Value</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(color.text).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`color-text-${name}`}</code>
+        </td>
+        <td>
+          <code>{name}</code>
+        </td>
+        <td>{entry.value}</td>
+        <td style={{ background: entry.value }}></td>
+        <td>{entry.darkValue}</td>
+        <td style={{ background: entry.darkValue }}></td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
 ## Font Family
 
 Use these tokens for `font-family`.