@phcdevworks/spectre-tokens 0.1.0 → 0.2.0

package/README.md

@@ -6,7 +6,7 @@ Design-token source of truth that powers Spectre UI, Spectre Blocks, Spectre Ast
 
 ## Overview
 
-`@phcdevworks/spectre-tokens` defines Spectre's visual language—colors, typography, spacing, radii, shadows, breakpoints, z-index scales, transitions, and CRO-focused interaction states. The package turns the raw JSON tokens in `tokens/` into multiple consumption modes (JS, TS, Tailwind, CSS variables) so that teams can stay in sync regardless of framework. One token system runs the entire Spectre Suite; every other package simply consumes these values.
+`@phcdevworks/spectre-tokens` defines Spectre's visual language—colors, typography, space, radii, shadows, breakpoints, z-index scales, transitions, and CRO-focused interaction states. The package turns the raw JSON tokens in `tokens/` into multiple consumption modes (JS, TS, Tailwind, CSS variables) so that teams can stay in sync regardless of framework. One token system runs the entire Spectre Suite; every other package simply consumes these values.
 
 - ✅ Centralized token definitions and semantic naming
 - ✅ JS/TS objects, Tailwind theme + preset, and CSS variable outputs
@@ -34,7 +34,7 @@ import tokens, {
 console.log(tokens.colors.brand["500"]); // Brand palette swatches
 ```
 
-- `tokens`: Raw structured tokens (colors, spacing, radii, typography, shadows, z-index, transitions, buttons, forms, accessibility, animations, opacity).
+- `tokens`: Raw structured tokens (colors, space, layout, radii, typography, shadows, z-index, transitions, buttons, forms, badges, accessibility, animations, opacity, fonts).
 - `tailwindTheme`: Ready-to-use Tailwind theme object.
 - `tailwindPreset`: Preset for Tailwind config (includes theme).
 - `generateCssVariables()`: Generate custom `--sp-*` CSS variable strings with scoped selectors or prefixes.
@@ -160,6 +160,78 @@ tokens.opacity.disabled; // 0.38
 tokens.opacity.overlay; // 0.5
 ```
 
+### Typography scale
+
+```ts
+tokens.font.fontSize.xs; // 0.75rem
+tokens.font.fontSize.sm; // 0.875rem
+tokens.font.fontSize.base; // 1rem
+tokens.font.fontSize.lg; // 1.25rem
+tokens.font.fontSize.xl; // 1.5rem
+
+tokens.font.lineHeight.xs; // 1rem
+tokens.font.lineHeight.sm; // 1.25rem
+tokens.font.lineHeight.base; // 1.5rem
+tokens.font.lineHeight.lg; // 1.75rem
+tokens.font.lineHeight.xl; // 2rem
+
+tokens.font.weight.normal; // 400
+tokens.font.weight.medium; // 500
+tokens.font.weight.semibold; // 600
+tokens.font.weight.bold; // 700
+```
+
+```css
+.heading {
+  font-size: var(--sp-font-size-xl);
+  line-height: var(--sp-font-line-height-xl);
+  font-weight: var(--sp-font-weight-semibold);
+}
+
+.body-text {
+  font-size: var(--sp-font-size-base);
+  line-height: var(--sp-font-line-height-base);
+  font-weight: var(--sp-font-weight-normal);
+}
+```
+
+### Badge tokens
+
+```ts
+tokens.component.badge.bg; // Background color
+tokens.component.badge.text; // Text color
+tokens.component.badge.border; // Border color
+```
+
+```css
+.badge {
+  background: var(--sp-component-badge-bg);
+  color: var(--sp-component-badge-text);
+  border: 1px solid var(--sp-component-badge-border);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--sp-radius-sm);
+  font-size: var(--sp-font-size-xs);
+  font-weight: var(--sp-font-weight-medium);
+}
+```
+
+### Meta text
+
+For secondary/metadata text styling:
+
+```ts
+tokens.text.onPage.meta; // Metadata text on page backgrounds
+tokens.text.onSurface.meta; // Metadata text on card/surface backgrounds
+```
+
+```css
+.timestamp,
+.byline {
+  color: var(--sp-text-on-page-meta);
+  font-size: var(--sp-font-size-sm);
+}
+```
+
 ### WCAG targets
 
 - Brand 500 on white → ✅ AAA (4.8:1)
@@ -171,11 +243,21 @@ tokens.opacity.overlay; // 0.5
 
 Always re-run final UI implementations through tools like [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).
 
+## Spacing & Layout Tokens
+
+- **8px grid**: `space.*` follows an 8px rhythm with a single 4px micro step for fine-grain alignment. Scale: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96 (all in px, emitted as rem).
+- **Semantic layout**: `layout.section.padding.{sm,md,lg}` → `space.24/32/48`; `layout.section.gap.{sm,md,lg}` → `space.16/24/32`; `layout.stack.gap.{sm,md,lg}` → `space.8/12/16`; `layout.container.paddingInline.{sm,md,lg}` → `space.16/24/32`.
+- **Outputs**: CSS vars like `--sp-space-24` and `--sp-layout-section-padding-md`; Tailwind `theme.spacing` is sourced from `space.*`.
+- **Usage**: Use `layout.*` for consistent gutters/padding rather than ad-hoc numbers. Example: `gap: var(--sp-layout-stack-gap-md);` or `padding-inline: var(--sp-layout-container-padding-inline-lg);`.
+- **Responsiveness lives in Spectre UI**: apply breakpoint logic and component behavior in `@phcdevworks/spectre-ui` or consumers; keep tokens meaning-only.
+
 ## Surface & Typography Roles
 
 - `surface.page`, `surface.card`, `surface.input`, `surface.overlay`: semantic backgrounds for the app canvas, containers/tiles, form fields, and modal/dropdown layers.
 - `text.onPage.*` vs `text.onSurface.*`: use `onPage` for copy sitting directly on the page canvas; use `onSurface` for text inside cards, tiles, inputs, overlays, and other elevated surfaces.
-- `component.card.text`/`textMuted`, `component.input.text`/`placeholder`, and `component.button.textDefault`/`textOnPrimary` alias the underlying `text.onSurface` roles (with `textOnPrimary` pairing white against the primary button background) to keep component defaults aligned.
+  - `text.onPage.default`, `text.onPage.muted`, `text.onPage.subtle`, `text.onPage.meta`
+  - `text.onSurface.default`, `text.onSurface.muted`, `text.onSurface.subtle`, `text.onSurface.meta`
+- `component.card.text`/`textMuted`, `component.input.text`/`placeholder`, `component.button.textDefault`/`textOnPrimary`, and `component.badge.*` alias the underlying semantic roles to keep component defaults aligned.
 
 ## Modes
 
@@ -195,15 +277,17 @@ Consumers can toggle themes by setting `data-spectre-theme="dark"` on `:root` or
 
 These variables are the contract consumed by `@phcdevworks/spectre-ui`; removing or renaming them will break downstream UI packages.
 
-- Surface: `--sp-surface-page`, `--sp-surface-card`, `--sp-surface-input`, `--sp-surface-overlay`
-- Text: `--sp-text-on-page-default`, `--sp-text-on-page-muted`, `--sp-text-on-surface-default`, `--sp-text-on-surface-muted`
-- Components/buttons: `--sp-component-card-text`, `--sp-component-card-text-muted`, `--sp-component-input-text`, `--sp-component-input-placeholder`, `--sp-button-primary-bg`, `--sp-button-primary-text`, `--sp-button-secondary-bg`, `--sp-button-secondary-text`, `--sp-button-ghost-bg`, `--sp-button-ghost-text`
+- **Surface**: `--sp-surface-page`, `--sp-surface-card`, `--sp-surface-input`, `--sp-surface-overlay`
+- **Text**: `--sp-text-on-page-default`, `--sp-text-on-page-muted`, `--sp-text-on-page-meta`, `--sp-text-on-surface-default`, `--sp-text-on-surface-muted`, `--sp-text-on-surface-meta`
+- **Components**: `--sp-component-card-text`, `--sp-component-card-text-muted`, `--sp-component-input-text`, `--sp-component-input-placeholder`, `--sp-component-badge-bg`, `--sp-component-badge-text`, `--sp-component-badge-border`
+- **Buttons**: `--sp-button-primary-bg`, `--sp-button-primary-text`, `--sp-button-secondary-bg`, `--sp-button-secondary-text`, `--sp-button-ghost-bg`, `--sp-button-ghost-text`
+- **Typography**: `--sp-font-size-{xs,sm,base,lg,xl}`, `--sp-font-line-height-{xs,sm,base,lg,xl}`, `--sp-font-weight-{normal,medium,semibold,bold}`
 
 ## Repository Layout
 
 | Folder     | Responsibility                                                                                                |
 | ---------- | ------------------------------------------------------------------------------------------------------------- |
-| `tokens/`  | Raw JSON tokens owned by design. `core.json` holds colors, spacing, radii, typography scales, and shadows.    |
+| `tokens/`  | Raw JSON tokens owned by design. `core.json` holds colors, space, radii, typography scales, shadows, and layout scales. |
 | `src/`     | TypeScript source that turns JSON into reusable formats (JS/TS exports, Tailwind theme, CSS helpers).         |
 | `scripts/` | Build utilities. `build-css.js` consumes the compiled library and writes `dist/index.css`.                    |
 | `dist/`    | Generated artifacts: `index.js`, `index.cjs`, `index.d.ts`, and `index.css`. Regenerated via `npm run build`. |

package/dist/index.cjs

@@ -167,22 +167,24 @@ var core_default = {
       textOnPrimary: "#ffffff"
     },
     badge: {
-      primary: {
-        bg: "#8652ff",
-        text: "#0f172a"
-      },
-      success: {
-        bg: "#22c55e",
-        text: "#0f172a"
-      },
-      warning: {
-        bg: "#f59e0b",
-        text: "#0f172a"
-      },
-      danger: {
-        bg: "#ef4444",
-        text: "#0f172a"
-      }
+      neutralBg: "#f1f5f9",
+      neutralText: "#334155",
+      infoBg: "#dbeafe",
+      infoText: "#1d4ed8",
+      successBg: "#dcfce7",
+      successText: "#15803d",
+      warningBg: "#fef3c7",
+      warningText: "#b45309",
+      dangerBg: "#fee2e2",
+      dangerText: "#b91c1c"
+    },
+    iconBox: {
+      bg: "#ffffff",
+      border: "#e2e8f0",
+      iconDefault: "#6c32e6",
+      iconSuccess: "#16a34a",
+      iconWarning: "#d97706",
+      iconDanger: "#dc2626"
     }
   },
   modes: {
@@ -257,37 +259,55 @@ var core_default = {
           }
         },
         badge: {
-          primary: {
-            bg: {
-              value: "#8652ff"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          neutralBg: {
+            value: "#f1f5f9"
+          },
+          neutralText: {
+            value: "#334155"
+          },
+          infoBg: {
+            value: "#dbeafe"
+          },
+          infoText: {
+            value: "#1d4ed8"
+          },
+          successBg: {
+            value: "#dcfce7"
+          },
+          successText: {
+            value: "#15803d"
           },
-          success: {
-            bg: {
-              value: "#22c55e"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          warningBg: {
+            value: "#fef3c7"
           },
-          warning: {
-            bg: {
-              value: "#f59e0b"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          warningText: {
+            value: "#b45309"
           },
-          danger: {
-            bg: {
-              value: "#ef4444"
-            },
-            text: {
-              value: "#0f172a"
-            }
+          dangerBg: {
+            value: "#fee2e2"
+          },
+          dangerText: {
+            value: "#b91c1c"
+          }
+        },
+        iconBox: {
+          bg: {
+            value: "#ffffff"
+          },
+          border: {
+            value: "#e2e8f0"
+          },
+          iconDefault: {
+            value: "#6c32e6"
+          },
+          iconSuccess: {
+            value: "#16a34a"
+          },
+          iconWarning: {
+            value: "#d97706"
+          },
+          iconDanger: {
+            value: "#dc2626"
           }
         }
       }
@@ -363,37 +383,55 @@ var core_default = {
           }
         },
         badge: {
-          primary: {
-            bg: {
-              value: "#8652ff"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          neutralBg: {
+            value: "#334155"
+          },
+          neutralText: {
+            value: "#f1f5f9"
+          },
+          infoBg: {
+            value: "#1e40af"
           },
-          success: {
-            bg: {
-              value: "#22c55e"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          infoText: {
+            value: "#dbeafe"
           },
-          warning: {
-            bg: {
-              value: "#f59e0b"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          successBg: {
+            value: "#166534"
           },
-          danger: {
-            bg: {
-              value: "#ef4444"
-            },
-            text: {
-              value: "#f1f5f9"
-            }
+          successText: {
+            value: "#dcfce7"
+          },
+          warningBg: {
+            value: "#92400e"
+          },
+          warningText: {
+            value: "#fef3c7"
+          },
+          dangerBg: {
+            value: "#991b1b"
+          },
+          dangerText: {
+            value: "#fee2e2"
+          }
+        },
+        iconBox: {
+          bg: {
+            value: "#1e293b"
+          },
+          border: {
+            value: "#334155"
+          },
+          iconDefault: {
+            value: "#a37aff"
+          },
+          iconSuccess: {
+            value: "#4ade80"
+          },
+          iconWarning: {
+            value: "#fbbf24"
+          },
+          iconDanger: {
+            value: "#f87171"
           }
         }
       }
@@ -490,17 +528,49 @@ var core_default = {
       text: "#94a3b8"
     }
   },
-  spacing: {
-    none: "0rem",
-    "3xs": "0.125rem",
-    "2xs": "0.25rem",
-    xs: "0.5rem",
-    sm: "0.75rem",
-    md: "1rem",
-    lg: "1.5rem",
-    xl: "2rem",
-    "2xl": "3rem",
-    "3xl": "4rem"
+  layout: {
+    section: {
+      padding: {
+        sm: "1.5rem",
+        md: "2rem",
+        lg: "3rem"
+      },
+      gap: {
+        sm: "1rem",
+        md: "1.5rem",
+        lg: "2rem"
+      }
+    },
+    stack: {
+      gap: {
+        sm: "0.5rem",
+        md: "0.75rem",
+        lg: "1rem"
+      }
+    },
+    container: {
+      paddingInline: {
+        sm: "1rem",
+        md: "1.5rem",
+        lg: "2rem"
+      }
+    }
+  },
+  space: {
+    "0": "0rem",
+    "4": "0.25rem",
+    "8": "0.5rem",
+    "12": "0.75rem",
+    "16": "1rem",
+    "20": "1.25rem",
+    "24": "1.5rem",
+    "32": "2rem",
+    "40": "2.5rem",
+    "48": "3rem",
+    "56": "3.5rem",
+    "64": "4rem",
+    "80": "5rem",
+    "96": "6rem"
   },
   radii: {
     none: "0",
@@ -682,11 +752,31 @@ var toVariableName = (prefix, ...parts) => {
   const filtered = parts.filter(Boolean).map(formatKey);
   return `--${prefix}-${filtered.join("-")}`;
 };
+var BADGE_VARIANTS = [
+  { variant: "neutral", bgKey: "neutralBg", textKey: "neutralText" },
+  { variant: "info", bgKey: "infoBg", textKey: "infoText" },
+  { variant: "success", bgKey: "successBg", textKey: "successText" },
+  { variant: "warning", bgKey: "warningBg", textKey: "warningText" },
+  { variant: "danger", bgKey: "dangerBg", textKey: "dangerText" }
+];
+var ICON_BOX_FIELDS = [
+  { name: "bg", tokenKey: "bg" },
+  { name: "border", tokenKey: "border" },
+  { name: "icon-default", tokenKey: "iconDefault" },
+  { name: "icon-success", tokenKey: "iconSuccess" },
+  { name: "icon-warning", tokenKey: "iconWarning" },
+  { name: "icon-danger", tokenKey: "iconDanger" }
+];
 var createCssVariableMap = (tokens2, options = {}) => {
   const prefix = options.prefix ?? DEFAULT_PREFIX;
   const map = {};
   const baseTokens = tokens2;
   const assign = (name, value) => {
+    const resolved = resolveSemanticValue(value);
+    if (resolved !== void 0) {
+      map[name] = resolved;
+      return;
+    }
     if (value === void 0) return;
     map[name] = String(value);
   };
@@ -695,9 +785,34 @@ var createCssVariableMap = (tokens2, options = {}) => {
       assign(toVariableName(prefix, "color", group, step), value);
     });
   });
-  Object.entries(baseTokens.spacing).forEach(([key, value]) => {
-    assign(toVariableName(prefix, "space", key), value);
-  });
+  if (baseTokens.space) {
+    Object.entries(baseTokens.space).forEach(([key, value]) => {
+      assign(toVariableName(prefix, "space", key), value);
+    });
+  }
+  if (baseTokens.layout) {
+    const { section, stack, container } = baseTokens.layout;
+    if (section?.padding) {
+      Object.entries(section.padding).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "section", "padding", key), value);
+      });
+    }
+    if (section?.gap) {
+      Object.entries(section.gap).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "section", "gap", key), value);
+      });
+    }
+    if (stack?.gap) {
+      Object.entries(stack.gap).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "stack", "gap", key), value);
+      });
+    }
+    if (container?.paddingInline) {
+      Object.entries(container.paddingInline).forEach(([key, value]) => {
+        assign(toVariableName(prefix, "layout", "container", "padding-inline", key), value);
+      });
+    }
+  }
   Object.entries(baseTokens.radii).forEach(([key, value]) => {
     assign(toVariableName(prefix, "radius", key), value);
   });
@@ -729,14 +844,16 @@ var createCssVariableMap = (tokens2, options = {}) => {
   assign(toVariableName(prefix, "text", "on", "surface", "meta"), tokens2.text.onSurface.meta);
   const badge = tokens2.component?.badge;
   if (badge) {
-    assign(toVariableName(prefix, "badge", "primary", "bg"), badge.primary.bg);
-    assign(toVariableName(prefix, "badge", "primary", "text"), badge.primary.text);
-    assign(toVariableName(prefix, "badge", "success", "bg"), badge.success.bg);
-    assign(toVariableName(prefix, "badge", "success", "text"), badge.success.text);
-    assign(toVariableName(prefix, "badge", "warning", "bg"), badge.warning.bg);
-    assign(toVariableName(prefix, "badge", "warning", "text"), badge.warning.text);
-    assign(toVariableName(prefix, "badge", "danger", "bg"), badge.danger.bg);
-    assign(toVariableName(prefix, "badge", "danger", "text"), badge.danger.text);
+    BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
+      assign(toVariableName(prefix, "badge", variant, "bg"), badge[bgKey]);
+      assign(toVariableName(prefix, "badge", variant, "text"), badge[textKey]);
+    });
+  }
+  const iconBox = tokens2.component?.iconBox;
+  if (iconBox) {
+    ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
+      assign(toVariableName(prefix, "icon-box", name), iconBox[tokenKey]);
+    });
   }
   Object.entries(baseTokens.shadows).forEach(([key, value]) => {
     assign(toVariableName(prefix, "shadow", key), value);
@@ -823,38 +940,22 @@ var generateCssVariables = (tokens2, options = {}) => {
   addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
   addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
   addBase(toVariableName(prefix, "button", "text", "on", "primary"), pickSemantic(getPath(defaultMode, ["component", "button", "textOnPrimary"]), getPath(componentAliases, ["button", "textOnPrimary"])));
-  addBase(
-    toVariableName(prefix, "badge", "primary", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "primary", "bg"]), getPath(componentAliases, ["badge", "primary", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "primary", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "primary", "text"]), getPath(componentAliases, ["badge", "primary", "text"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "success", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "success", "bg"]), getPath(componentAliases, ["badge", "success", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "success", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "success", "text"]), getPath(componentAliases, ["badge", "success", "text"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "warning", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "warning", "bg"]), getPath(componentAliases, ["badge", "warning", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "warning", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "warning", "text"]), getPath(componentAliases, ["badge", "warning", "text"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "danger", "bg"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "danger", "bg"]), getPath(componentAliases, ["badge", "danger", "bg"]))
-  );
-  addBase(
-    toVariableName(prefix, "badge", "danger", "text"),
-    pickSemantic(getPath(defaultMode, ["component", "badge", "danger", "text"]), getPath(componentAliases, ["badge", "danger", "text"]))
-  );
+  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
+    addBase(
+      toVariableName(prefix, "badge", variant, "bg"),
+      pickSemantic(getPath(defaultMode, ["component", "badge", bgKey]), getPath(componentAliases, ["badge", bgKey]))
+    );
+    addBase(
+      toVariableName(prefix, "badge", variant, "text"),
+      pickSemantic(getPath(defaultMode, ["component", "badge", textKey]), getPath(componentAliases, ["badge", textKey]))
+    );
+  });
+  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
+    addBase(
+      toVariableName(prefix, "icon-box", name),
+      pickSemantic(getPath(defaultMode, ["component", "iconBox", tokenKey]), getPath(componentAliases, ["iconBox", tokenKey]))
+    );
+  });
   const rootLines = [...baseLines, ...mapLines];
   const darkLines = [];
   const addDark = (name, value) => {
@@ -972,70 +1073,34 @@ var generateCssVariables = (tokens2, options = {}) => {
       getPath(componentAliases, ["button", "textOnPrimary"])
     )
   );
-  addDark(
-    toVariableName(prefix, "badge", "primary", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "primary", "bg"]),
-      getPath(defaultMode, ["component", "badge", "primary", "bg"]),
-      getPath(componentAliases, ["badge", "primary", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "primary", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "primary", "text"]),
-      getPath(defaultMode, ["component", "badge", "primary", "text"]),
-      getPath(componentAliases, ["badge", "primary", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "success", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "success", "bg"]),
-      getPath(defaultMode, ["component", "badge", "success", "bg"]),
-      getPath(componentAliases, ["badge", "success", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "success", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "success", "text"]),
-      getPath(defaultMode, ["component", "badge", "success", "text"]),
-      getPath(componentAliases, ["badge", "success", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "warning", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "warning", "bg"]),
-      getPath(defaultMode, ["component", "badge", "warning", "bg"]),
-      getPath(componentAliases, ["badge", "warning", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "warning", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "warning", "text"]),
-      getPath(defaultMode, ["component", "badge", "warning", "text"]),
-      getPath(componentAliases, ["badge", "warning", "text"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "danger", "bg"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "danger", "bg"]),
-      getPath(defaultMode, ["component", "badge", "danger", "bg"]),
-      getPath(componentAliases, ["badge", "danger", "bg"])
-    )
-  );
-  addDark(
-    toVariableName(prefix, "badge", "danger", "text"),
-    pickSemantic(
-      getPath(darkMode, ["component", "badge", "danger", "text"]),
-      getPath(defaultMode, ["component", "badge", "danger", "text"]),
-      getPath(componentAliases, ["badge", "danger", "text"])
-    )
-  );
+  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
+    addDark(
+      toVariableName(prefix, "badge", variant, "bg"),
+      pickSemantic(
+        getPath(darkMode, ["component", "badge", bgKey]),
+        getPath(defaultMode, ["component", "badge", bgKey]),
+        getPath(componentAliases, ["badge", bgKey])
+      )
+    );
+    addDark(
+      toVariableName(prefix, "badge", variant, "text"),
+      pickSemantic(
+        getPath(darkMode, ["component", "badge", textKey]),
+        getPath(defaultMode, ["component", "badge", textKey]),
+        getPath(componentAliases, ["badge", textKey])
+      )
+    );
+  });
+  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
+    addDark(
+      toVariableName(prefix, "icon-box", name),
+      pickSemantic(
+        getPath(darkMode, ["component", "iconBox", tokenKey]),
+        getPath(defaultMode, ["component", "iconBox", tokenKey]),
+        getPath(componentAliases, ["iconBox", tokenKey])
+      )
+    );
+  });
   const rootBlock = `${selector} {
 ${rootLines.join("\n")}
 }`;
@@ -1072,7 +1137,7 @@ var createTailwindTheme = (source = tokens) => {
   }, {});
   return {
     colors,
-    spacing: { ...source.spacing },
+    spacing: { ...source.space ?? {} },
     borderRadius: { ...source.radii },
     fontFamily,
     fontSize,