🎨(react) enhance Color and Spacing documentation

Update colors and spacings documentation to reflect new token
architecture. Introduced contextual backgrounds and updated color
classes for consistency.

packages/react/src/docs/colors.mdx

@@ -10,6 +10,19 @@ export const tints = [900, 800, 700, 600, 500, 400, 300, 200, 100];
 
 Cunningham comes with an existing toolkit to deal with colors, and it's easy. 🎨
 
+### Contextual Backgrounds
+
+<Source
+  language='tsx'
+  dark
+  format={false}
+  code={`
+  <div className="bg-brand-primary"/>
+  `}
+/>
+
+<Canvas sourceState="none" of={Stories.ContextualBackgrounds}/>
+
 ## Background color
 
 You can use custom utility classes to set the background color of an element. These classes are named using the format `.bg-{color}`.
@@ -19,7 +32,7 @@ You can use custom utility classes to set the background color of an element. Th
   dark
   format={false}
   code={`
-  <div className="bg-primary-500"></div>
+<div className="bg-brand-500"></div>
   `}
 />
 
@@ -27,6 +40,8 @@ You can find all existing classes below.
 
 <Canvas sourceState="none" of={Stories.BackgroundColors}/>
 
+
+
 ## Text color
 
 You can use custom utility classes to set the color attribute of an element. These classes are named using the format `.clr-{color}`.

packages/react/src/docs/colors.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import { tokens } from ":/cunningham-tokens";
 
 const meta: Meta = {
   title: "Misc/Colors",
@@ -9,20 +10,49 @@ export default meta;
 type Story = StoryObj<{}>;
 
 const colors = [
-  "primary",
-  "secondary",
-  "greyscale",
+  "brand",
+  "gray",
   "success",
   "info",
   "warning",
-  "danger",
+  "error",
+  "red",
+  "orange",
+  "brown",
+  "yellow",
+  "green",
+  "blue-1",
+  "blue-2",
+  "purple",
+  "pink",
+];
+const tints = [
+  950,
+  900,
+  850,
+  800,
+  750,
+  700,
+  650,
+  600,
+  550,
+  500,
+  450,
+  400,
+  350,
+  300,
+  250,
+  200,
+  150,
+  100,
+  "050",
 ];
-const tints = [900, 800, 700, 600, 500, 400, 300, 200, 100];
 
 export const BackgroundColors: Story = {
   render: () => {
     return (
       <div>
+        <div>{}</div>
         {colors.map((color) => (
           <div key={color} style={{ display: "flex", gap: "5px" }}>
             {tints.map((tint) => (
@@ -41,7 +71,7 @@ export const BackgroundColors: Story = {
                   style={{ width: "72px", height: "48px" }}
                   className={"bg-" + color + "-" + tint}
                 />
-                <pre className="clr-greyscale-800 fs-s mt-st">
+                <pre className="clr-gray-800 fs-s mt-st">
                   bg-{color}-{tint}
                 </pre>
               </div>
@@ -53,6 +83,111 @@ export const BackgroundColors: Story = {
   },
 };
 
+export const ContextualBackgrounds: Story = {
+  render: () => {
+    const { background } = tokens.themes.default.contextuals;
+
+    // Extract all background values from the contextuals
+    const backgroundEntries = Object.entries(background).flatMap(
+      ([category, values]) => {
+        if (typeof values === "object" && values !== null) {
+          return Object.entries(values).map(([key, value]) => ({
+            category,
+            key,
+            value,
+            fullKey: `${category}-${key}`,
+          }));
+        }
+        return [];
+      }
+    );
+
+    // Group by category
+    const groupedBackgrounds = backgroundEntries.reduce(
+      (acc, entry) => {
+        if (!acc[entry.category]) {
+          acc[entry.category] = [];
+        }
+        acc[entry.category].push(entry);
+        return acc;
+      },
+      {} as Record<string, typeof backgroundEntries>
+    );
+
+    return (
+      <div>
+        {Object.entries(groupedBackgrounds).map(([category, entries]) => (
+          <section key={category} style={{ marginBottom: "3rem" }}>
+            <h2
+              style={{
+                color: "#626B77",
+                marginBottom: "1rem",
+                textTransform: "capitalize",
+                fontSize: "1.5rem",
+
+                paddingBottom: "0.5rem",
+              }}
+            >
+              {category}
+            </h2>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                maxWidth: "100%",
+                gap: "1rem",
+              }}
+            >
+              {entries.map(({ key, value, fullKey }) => (
+                <div
+                  key={fullKey}
+                  style={{
+                    padding: "1rem",
+                    borderRadius: "8px",
+                    backgroundColor: "#FFFFFF",
+                    border: "1px solid #E1E2E4",
+                    gridColumn: "span 1",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "100%",
+                      height: "80px",
+                      backgroundColor: value,
+                      borderRadius: "4px",
+                      marginBottom: "0.5rem",
+                      border: "1px solid #E1E2E4",
+                    }}
+                  />
+                  <strong style={{ textTransform: "capitalize" }}>{key}</strong>
+                  <div
+                    style={{
+                      fontSize: "0.875rem",
+                      color: "#707882",
+                      marginTop: "0.25rem",
+                    }}
+                  >
+                    {value}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: "0.75rem",
+                      color: "#A7ABB1",
+                      marginTop: "0.25rem",
+                    }}
+                  >
+                    .bg-{fullKey}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+      </div>
+    );
+  },
+};
+
 export const TextColors: Story = {
   render: () => {
     return (
@@ -90,13 +225,13 @@ export const Example: Story = {
   render: () => {
     return (
       <>
-        <div className="bg-primary-500 clr-primary-text fw-medium p-t">
+        <div className="bg-brand-tertiary content-brand-primary fw-medium p-t">
           I am a text on top of a primary-500 background 👋
         </div>
-        <div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-t">
+        <div className="content-neutral-primary bg-neutral-tertiary fw-medium p-t">
           I am a text on top of a secondary-500 background 👋
         </div>
-        <div className="bg-danger-500 clr-danger-text fw-medium p-t">
+        <div className="bg-error-tertiary content-error-primary fw-medium p-t">
           I am a text on top of a danger-500 background 👋
         </div>
       </>

packages/react/src/docs/spacings.stories.tsx

@@ -33,12 +33,12 @@ export const Default: Story = {
                   {value}
                 </div>
                 <div
-                  className={"bg-danger-100 pl-" + key}
+                  className={"bg-error-tertiary pl-" + key}
                   style={{ height: "48px", width: 0 }}
                 />
               </div>
             );
-          },
+          }
         )}
       </div>
     );
@@ -48,11 +48,11 @@ export const Default: Story = {
 export const Example: Story = {
   render: () => {
     return (
-      <div className="clr-greyscale-800 bg-danger-100">
-        <div className="clr-greyscale-800 bg-primary-500 clr-primary-text fw-medium p-t mb-l">
+      <div className="clr-gray-800 bg-error-tertiary">
+        <div className="clr-gray-800 bg-brand-tertiary  fw-medium p-t mb-l">
           Tiny padding + Large margin bottom
         </div>
-        <div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">
+        <div className="content-neutral-primary bg-neutral-tertiary  fw-medium p-l ml-b">
           Large padding + Base margin left
         </div>
       </div>