@ponti-studios/ui 0.4.1 → 0.4.2

package/README.md

@@ -4,11 +4,23 @@ The canonical Ponti Studios UI package. It is published from this repository to
 
 ## Release
 
-1. Set `packages/ui/package.json` to the intended immutable version.
-2. Merge the change to `main`.
-3. Create and push a matching `ui-v<version>` tag, for example `ui-v0.1.0`.
+Releases are owned by [release-please](https://github.com/googleapis/release-please), not by hand-edited version numbers or manually pushed tags. The workflow is defined once, in `.github/workflows/publish-ui.yml`, and has three jobs:
 
-The `publish-ui` workflow validates that the tag and package version match, then publishes with the repository’s npm publishing credentials. Do not publish from a workstation.
+1. **`release-ui`** — runs on every push to `main`. It scans commits under `packages/ui/` since the last release and keeps a standing pull request, `chore(main): release ui X.Y.Z`, up to date: `packages/ui/package.json`'s `version`, `.release-please-manifest.json`, and `packages/ui/CHANGELOG.md` are all written by this PR, never by a person. **Never hand-edit the `version` field in `packages/ui/package.json`** — the next push will regenerate the release PR from the real commit history and overwrite whatever you set.
+2. **`publish-ui`** — gated on `release-ui`'s `release_created` output, i.e. it only runs the push immediately after the release PR is *merged*. Merging that PR is what creates the `ui-v<version>` tag and triggers this job. It checks out that exact tag, re-verifies the tag matches `package.json`'s version and `HEAD`, runs `npm publish --provenance --access public`, then confirms the version resolves on the registry.
+3. **`publish-ui-manual`** — a `workflow_dispatch` break-glass path that checks out an arbitrary ref and publishes whatever version is in `package.json` there, with none of `publish-ui`'s tag/version consistency checks. Only use this to recover from a `publish-ui` run that failed for a reason unrelated to versioning (e.g. a broken `prepack` step) after a real release PR already merged — never as a way to skip release-please.
+
+**So the actual release flow is:**
+
+1. Land commits under `packages/ui/` using [Conventional Commits](https://www.conventionalcommits.org/) — the version bump is computed from the commit type: `fix:` → patch, `feat:` → minor, `feat!:`/a `BREAKING CHANGE:` footer → major. This is the *only* way to control the bump; there is no manual override.
+2. Once on `main`, find or wait for the `chore(main): release ui X.Y.Z` PR that `release-ui` opens/updates.
+3. Review and merge it. That merge creates the `ui-v<version>` tag and triggers `publish-ui` automatically. Nothing further to push or tag by hand.
+
+`prepack` (`tokens:check && check:source && typecheck`) runs as part of `pnpm install`/publish tooling and is the last gate before anything reaches npm — see "Generated files" below for the failure mode that most commonly trips it.
+
+### Generated files must never be hand-edited
+
+`src/styles/tokens/generated/**` and `.storybook/generated/**` are produced only by `pnpm run tokens:build` (style-dictionary) from the DTCG source in `src/styles/tokens/source/*.tokens.json`. `tokens:check` enforces this with `git diff --exit-code -- src/styles/tokens/generated` after a fresh rebuild — if the committed file doesn't byte-for-byte match what the tool just produced, the check (and therefore `prepack` and the publish) fails. This has happened in practice when a repo-wide formatter (oxfmt) reformatted a generated CSS file directly; `.oxfmtrc.json`'s `ignorePatterns` now excludes both generated directories specifically to prevent that recurring. If `tokens:check` fails on a file you didn't intend to touch, run `pnpm run tokens:build` and commit the regenerated output — don't hand-format it back into place.
 
 ## Consumers
 
@@ -28,7 +40,7 @@ CI consumers should use a secret-backed npm token with read access.
 
 ### Ships TypeScript source, not a bundle
 
-This package has no build output — every `exports` entry resolves to a file under `src/`. Consumers are expected to transpile the package themselves (Vite, Metro, Next, etc. all do this for workspace/npm packages by default). This is deliberate: Tailwind v4 class detection for consumers of `./styles.css` or `./tokens.css` requires an `@source` directive pointing at the installed package's `src/`, e.g.
+This package has no build output — every `exports` entry resolves to a file under `src/`. Consumers are expected to transpile the package themselves (Vite, Metro, Next, etc. all do this for workspace/npm packages by default). Tailwind v4 class detection for consumers of `./styles.css` requires an `@source` directive pointing at the installed package's `src/`, e.g.
 
 ```css
 @source "../../../node_modules/@ponti-studios/ui/src";

package/THIRD_PARTY_NOTICES.md

@@ -2,7 +2,7 @@
 
 ## Adobe Spectrum Tokens
 
-The light and dark color snapshots in `src/tokens/generated/*colors.generated.ts`
+The light and dark color snapshots in `src/styles/tokens/generated/*colors.generated.ts`
 are derived from Adobe Spectrum Tokens 14.15.0. Spectrum Tokens is distributed
 under the Apache License 2.0.
 
@@ -10,8 +10,8 @@ Source: https://github.com/adobe/spectrum-tokens
 
 ## Tailwind CSS
 
-The non-color foundations in `src/tokens/generated/foundations.generated.ts`
-and `src/tokens/generated/foundations.css` match the Tailwind CSS 4.3.3 default
+The non-color foundations in `src/styles/tokens/generated/foundations.generated.ts`
+and `src/styles/tokens/generated/foundations.css` match the Tailwind CSS 4.3.3 default
 theme. Tailwind CSS is distributed under the MIT License.
 
 Source: https://github.com/tailwindlabs/tailwindcss

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": false,
   "description": "Shared UI component library for ponti-studios labs",
   "license": "MIT",
@@ -9,19 +9,14 @@
     "url": "git+https://github.com/ponti-studios/labs.git",
     "directory": "packages/ui"
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
   "files": [
     "src",
     "THIRD_PARTY_NOTICES.md"
   ],
   "type": "module",
   "sideEffects": [
-    "./src/styles.css",
-    "./src/tokens.css",
-    "./src/animations.css"
+    "./src/styles/index.css",
+    "./src/styles/animations.css"
   ],
   "exports": {
     ".": {
@@ -61,12 +56,12 @@
       "import": "./src/lib/index.ts"
     },
     "./tokens": {
-      "types": "./src/tokens/index.ts",
-      "import": "./src/tokens/index.ts"
+      "types": "./src/styles/tokens/index.ts",
+      "import": "./src/styles/tokens/index.ts"
     },
     "./tokens/css-vars": {
-      "types": "./src/tokens/css-vars.ts",
-      "import": "./src/tokens/css-vars.ts"
+      "types": "./src/styles/tokens/css-vars.ts",
+      "import": "./src/styles/tokens/css-vars.ts"
     },
     "./native": {
       "types": "./src/native/index.ts",
@@ -76,18 +71,21 @@
       "types": "./src/hooks/index.ts",
       "import": "./src/hooks/index.ts"
     },
-    "./styles.css": "./src/styles.css",
-    "./tokens.css": "./src/tokens.css",
-    "./animations.css": "./src/animations.css"
+    "./styles.css": "./src/styles/index.css",
+    "./animations.css": "./src/styles/animations.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   },
   "scripts": {
     "build": "tsc --noEmit",
     "dev": "vite",
-    "storybook": "style-dictionary build --config style-dictionary.dark-storybook.json && storybook dev -p 6006",
-    "check:source": "node tokens/check-source.mjs",
+    "storybook": "style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json && storybook dev -p 6006",
+    "check:source": "node src/styles/tokens/scripts/check-source.mjs",
     "test:a11y": "vitest --run --config vitest.config.ts",
-    "tokens:build": "style-dictionary build --config style-dictionary.foundations.json && style-dictionary build --config style-dictionary.light.json && style-dictionary build --config style-dictionary.dark.json && style-dictionary build --config style-dictionary.dark-storybook.json",
-    "tokens:check": "pnpm run tokens:build && node tokens/check-foundations.mjs && git diff --exit-code -- src/tokens/generated",
+    "tokens:build": "style-dictionary build --config src/styles/tokens/style-dictionary.foundations.json && style-dictionary build --config src/styles/tokens/style-dictionary.light.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark.json && style-dictionary build --config src/styles/tokens/style-dictionary.dark-storybook.json",
+    "tokens:check": "pnpm run tokens:build && node src/styles/tokens/scripts/check-foundations.mjs && git diff --exit-code -- src/styles/tokens/generated",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint src --fix",
     "format": "oxfmt src --write",
@@ -137,7 +135,6 @@
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-native": ">=0.74"
   },
-  "packageManager": "pnpm@10.30.3",
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
@@ -145,5 +142,6 @@
     "react-native": {
       "optional": true
     }
-  }
+  },
+  "packageManager": "pnpm@10.30.3"
 }

package/src/components/feedback/alert.tsx

@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "border-destructive/50 text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          "border-destructive/50 text-destructive-text bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-text",
       },
     },
     defaultVariants: {

package/src/components/feedback/file-upload-status-badge.tsx

@@ -9,7 +9,7 @@ const STATUS_CONFIG: Record<FileUploadStatusValue, { bg: string; text: string; l
   processing: { bg: "bg-muted", text: "text-foreground", label: "Processing" },
   queued: { bg: "bg-secondary", text: "text-secondary-foreground", label: "Queued" },
   done: { bg: "bg-muted", text: "text-muted-foreground", label: "Complete" },
-  error: { bg: "bg-destructive/10", text: "text-destructive", label: "Error" },
+  error: { bg: "bg-destructive/10", text: "text-destructive-text", label: "Error" },
 };
 
 export const FileUploadStatusBadge = memo(function FileUploadStatusBadge({

package/src/components/feedback/file-upload-status.tsx

@@ -86,7 +86,7 @@ export const FileUploadStatus = memo(function FileUploadStatus({
   if (status === "error") {
     return (
       <output className="mt-2" role="alert">
-        <div className="bg-destructive/10 text-destructive flex items-start gap-2 p-3">
+        <div className="bg-destructive/10 text-destructive-text flex items-start gap-2 p-3">
           <XIcon className="mt-0.5 h-5 w-5 flex-shrink-0" aria-hidden="true" />
           <span className="text-sm">{error}</span>
         </div>
@@ -125,7 +125,7 @@ const ProcessingStats = memo(function ProcessingStats({ stats }: { stats: FileUp
         <div className="py-2">
           <dt className="text-foreground text-sm font-medium">Errors</dt>
           <dd className="mt-1">
-            <span className="bg-destructive/10 text-destructive inline-flex items-center px-2 py-1 text-xs font-medium">
+            <span className="bg-destructive/10 text-destructive-text inline-flex items-center px-2 py-1 text-xs font-medium">
               {stats.errors.length} error{stats.errors.length > 1 ? "s" : ""}
             </span>
           </dd>

package/src/components/forms/field.tsx

@@ -30,7 +30,7 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
           htmlFor={id}
           className={cn(
             "text-foreground text-sm font-medium",
-            required && "after:text-destructive after:ml-0.5 after:content-['*']",
+            required && "after:text-destructive-text after:ml-0.5 after:content-['*']",
           )}
         >
           {label}
@@ -50,7 +50,7 @@ function Field({ label, helpText, error, required, children, id: externalId }: F
         : children}
 
       {error ? (
-        <p id={errorId} role="alert" className="text-destructive text-sm">
+        <p id={errorId} role="alert" className="text-destructive-text text-sm">
           {error}
         </p>
       ) : helpText ? (

package/src/components/forms/passkey-management.tsx

@@ -90,7 +90,7 @@ export function PasskeyManagement({
       </div>
 
       {error ? (
-        <p role="alert" className="text-destructive text-sm">
+        <p role="alert" className="text-destructive-text text-sm">
           {error}
         </p>
       ) : null}
@@ -125,7 +125,7 @@ export function PasskeyManagement({
                 onClick={() => void handleDelete(pk.id)}
                 disabled={deletingId === pk.id}
                 aria-label={`Remove passkey ${pk.name ?? pk.id}`}
-                className="hover:text-destructive text-muted-foreground focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                className="hover:text-destructive-text text-muted-foreground focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
               >
                 <Trash2 className="size-4" aria-hidden />
               </button>

package/src/components/overlays/dropdown-menu.tsx

@@ -88,7 +88,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-[variant=destructive]:text-destructive-text data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/components/primitives/button.tsx

@@ -49,6 +49,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       variant,
       size,
       asChild = false,
+      // Defaults to "button" — same safe default the native element loses
+      // once it's rendered inside a <form> — but must stay overridable so
+      // consumers can pass type="submit"/"reset".
+      type = "button",
       "aria-label": ariaLabel,
       ...props
     },
@@ -75,6 +79,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       return (
         <BaseButton
           {...props}
+          type={type}
           render={renderedChild}
           nativeButton={false}
           className={cn(buttonVariants({ variant, size, className }), isLoading && "relative")}
@@ -93,7 +98,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           ...props.style,
           cursor: disabled || isLoading ? "default" : "pointer",
         }}
-        type="button"
+        type={type}
         ref={ref}
         disabled={disabled || isLoading}
         aria-busy={isLoading}

package/src/index.ts

@@ -9,7 +9,7 @@ export { normalizeOtp, OTP_LENGTH } from "./lib/auth";
 export { copyToClipboard } from "./lib/clipboard";
 export { createMemoryStorage } from "./lib/create-memory-storage";
 export { cn } from "./lib/utils";
-export { colors } from "./tokens/css-vars";
+export { colors } from "./styles/tokens/css-vars";
 export {
   animations,
   colorThemes,
@@ -29,7 +29,7 @@ export {
   transitionDurations,
   breakpoints,
   zIndices,
-} from "./tokens/index";
+} from "./styles/tokens/index";
 export type {
   ColorMode,
   ColorTheme,
@@ -41,4 +41,4 @@ export type {
   SpacingToken,
   TextSizeToken,
   TrackingToken,
-} from "./tokens/index";
+} from "./styles/tokens/index";

package/src/native/shadows.ts

@@ -1,4 +1,4 @@
-import { shadows, type ShadowToken } from "../tokens";
+import { shadows, type ShadowToken } from "../styles/tokens/index";
 
 /**
  * One layer of a shadow in the shape React Native's `boxShadow` expects.

package/src/native/use-theme-colors.ts

@@ -1,6 +1,6 @@
 import { useColorScheme } from "react-native";
 
-import { colorThemes, type ColorMode, type ColorTheme } from "../tokens";
+import { colorThemes, type ColorMode, type ColorTheme } from "../styles/tokens/index";
 
 /**
  * Resolves the active color mode from the OS appearance setting.

package/src/{styles.css → styles/index.css}

@@ -1,5 +1,7 @@
 @import "tailwindcss";
-@import "./tokens.css";
+@import "./tokens/generated/foundations.css";
+@import "./tokens/generated/light.css";
+@import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
 @import "./animations.css";
 
 /* shadcn New York semantic contract. Values are generated from the DTCG
@@ -21,6 +23,11 @@
   --color-accent-foreground: var(--primary-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  /* Distinct from --color-destructive: that pairs with white for solid
+   * backgrounds (buttons, badges) and is the same value in both themes.
+   * This pairs with the page background for standalone text (error
+   * messages, alert copy) and must differ per theme to stay AA-compliant. */
+  --color-destructive-text: var(--text-destructive);
   --color-success: var(--success);
   --color-warning: var(--warning);
   --color-border: var(--border-default);

package/src/{tokens → styles/tokens}/chart-colors.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { CHART_CSS_VARS } from "../constants/chart-colors";
+import { CHART_CSS_VARS } from "../../constants/chart-colors";
 
 const meta: Meta = { title: "Foundations/Charts", parameters: { layout: "fullscreen" } };
 export default meta;

package/src/{tokens → styles/tokens}/color-systems.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Button } from "../components/primitives/button";
+import { Button } from "../../components/primitives/button";
 import { colorTokenNames } from "./index";
 
 const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };

package/src/{tokens → styles/tokens}/generated/dark.colors.generated.ts

@@ -11,11 +11,12 @@ export default {
   "text-secondary": "#b0b4ba",
   tertiary: "#777b84",
   primary: "#3e63dd",
-  destructive: "#e5484d",
+  destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
   "primary-foreground": "#ffffff",
   "destructive-foreground": "#ffffff",
+  "text-destructive": "#ff9592",
   "border-default": "#43484e",
   "focus-ring": "#3e63dd",
   "chart-1": "#3e63dd",

package/src/{tokens → styles/tokens}/generated/dark.css

@@ -11,11 +11,12 @@
   --text-secondary: #b0b4ba;
   --tertiary: #777b84;
   --primary: #3e63dd;
-  --destructive: #e5484d;
+  --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
   --primary-foreground: #ffffff;
   --destructive-foreground: #ffffff;
+  --text-destructive: #ff9592;
   --border-default: #43484e;
   --focus-ring: #3e63dd;
   --chart-1: #3e63dd;

package/src/{tokens → styles/tokens}/generated/light.colors.generated.ts

@@ -11,11 +11,12 @@ export default {
   "text-secondary": "#60646c",
   tertiary: "#80838d",
   primary: "#3e63dd",
-  destructive: "#e5484d",
+  destructive: "#ce2c31",
   success: "#30a46c",
   warning: "#ffc53d",
   "primary-foreground": "#ffffff",
   "destructive-foreground": "#ffffff",
+  "text-destructive": "#c82c31",
   "border-default": "#cdced6",
   "focus-ring": "#3e63dd",
   "chart-1": "#3e63dd",

package/src/{tokens → styles/tokens}/generated/light.css

@@ -11,11 +11,12 @@
   --text-secondary: #60646c;
   --tertiary: #80838d;
   --primary: #3e63dd;
-  --destructive: #e5484d;
+  --destructive: #ce2c31;
   --success: #30a46c;
   --warning: #ffc53d;
   --primary-foreground: #ffffff;
   --destructive-foreground: #ffffff;
+  --text-destructive: #c82c31;
   --border-default: #cdced6;
   --focus-ring: #3e63dd;
   --chart-1: #3e63dd;

package/src/styles/tokens/scripts/check-foundations.mjs

@@ -0,0 +1,126 @@
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+const tailwindTheme = require.resolve("tailwindcss/theme.css");
+const tailwind = readFileSync(tailwindTheme, "utf8");
+const sourceTokens = JSON.parse(
+  readFileSync(new URL("../source/foundations.tokens.json", import.meta.url), "utf8"),
+);
+const generated = readFileSync(new URL("../generated/foundations.css", import.meta.url), "utf8");
+
+const declarations = (css) =>
+  [...css.matchAll(/(--[\w-]+):\s*([^;]+);/g)].map(([, name, value]) => [name, value.trim()]);
+const expected = declarations(tailwind);
+const actual = declarations(generated);
+const failures = [];
+const normalize = (value) =>
+  value
+    .replaceAll(/\b0px\b/g, "0")
+    .replaceAll(/ 0 0 (rgb\()/g, " $1")
+    .replaceAll(/\s+/g, " ")
+    .trim();
+const expectedValues = new Map(expected);
+const generatedNames = new Set();
+
+const requiredNames = [
+  "--spacing",
+  "--font-sans",
+  "--font-serif",
+  "--font-mono",
+  ...[
+    "xs",
+    "sm",
+    "base",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+  ].flatMap((name) => [`--text-${name}`, `--text-line-height-${name}`]),
+  ...[
+    "thin",
+    "extralight",
+    "light",
+    "normal",
+    "medium",
+    "semibold",
+    "bold",
+    "extrabold",
+    "black",
+  ].map((name) => `--font-weight-${name}`),
+  ...["tighter", "tight", "normal", "wide", "wider", "widest"].map((name) => `--tracking-${name}`),
+  ...["tight", "snug", "normal", "relaxed", "loose"].map((name) => `--leading-${name}`),
+  ...["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"].map((name) => `--radius-${name}`),
+  ...["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "none"].map((name) => `--shadow-${name}`),
+  ...["sm", "md", "lg", "xl", "2xl"].map((name) => `--breakpoint-${name}`),
+  ...["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"].map(
+    (name) => `--container-${name}`,
+  ),
+  ...["auto", "0", "10", "20", "30", "40", "50"].map((name) => `--z-index-${name}`),
+  ...["in", "out", "in-out"].map((name) => `--ease-${name}`),
+  ...["75", "100", "150", "200", "300", "500", "700", "1000"].map((name) => `--duration-${name}`),
+  ...["spin", "ping", "pulse", "bounce"].map((name) => `--animate-${name}`),
+];
+
+const sourceNames = new Set();
+const collectSourceNames = (node, path = []) => {
+  if (!node || typeof node !== "object") return;
+  if (Object.hasOwn(node, "$value")) {
+    sourceNames.add(`--${path.join("-")}`);
+    return;
+  }
+  for (const [key, value] of Object.entries(node)) {
+    if (!key.startsWith("$")) collectSourceNames(value, [...path, key]);
+  }
+};
+collectSourceNames(sourceTokens);
+
+// Font families use our own system-ui stack ordering rather than Tailwind's
+// exact default wording — every other foundation name is meant to stay
+// aligned with Tailwind's own scale, but font-* is exempt from that check.
+const brandOverrideNames = new Set(["--font-sans", "--font-serif", "--font-mono"]);
+
+for (const [name, value] of actual) {
+  if (generatedNames.has(name)) failures.push(`duplicate generated foundation variable: ${name}`);
+  generatedNames.add(name);
+
+  if (brandOverrideNames.has(name)) continue;
+
+  const tailwindValue = expectedValues.get(name);
+  if (tailwindValue !== undefined && normalize(value) !== normalize(tailwindValue)) {
+    failures.push(`${name}: generated ${value}; Tailwind ${tailwindValue}`);
+  }
+}
+
+for (const name of requiredNames) {
+  if (!generatedNames.has(name))
+    failures.push(`required Tailwind foundation variable is missing: ${name}`);
+}
+
+for (const name of sourceNames) {
+  if (!generatedNames.has(name)) failures.push(`missing generated foundation variable: ${name}`);
+}
+for (const name of generatedNames) {
+  if (!sourceNames.has(name))
+    failures.push(`generated foundation variable has no source token: ${name}`);
+}
+
+if (/--[\w-]+:\s*var\(--[\w-]+\)/.test(generated))
+  failures.push("generated foundations contain a custom-property alias");
+if (/--tracking-[\w-]+:\s*-?\d+(?:\.\d+)?\s*;/.test(generated))
+  failures.push("tracking values must carry a CSS unit");
+
+if (failures.length) {
+  console.error(failures.join("\n"));
+  process.exit(1);
+}
+
+console.log(
+  `Foundation conformance passed (${actual.length} generated variables; ${expectedValues.size} Tailwind variables available for comparison).`,
+);

package/src/styles/tokens/scripts/check-source.mjs

@@ -0,0 +1,43 @@
+import { fileURLToPath } from "node:url";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+
+const sourceDirectory = fileURLToPath(new URL("../../../", import.meta.url));
+const sourceFiles = [];
+
+function collectFiles(directory) {
+  for (const entry of readdirSync(directory)) {
+    const path = join(directory, entry);
+    if (entry === "generated" && statSync(path).isDirectory()) continue;
+    if (statSync(path).isDirectory()) collectFiles(path);
+    else if (/\.(css|ts|tsx)$/.test(entry)) sourceFiles.push(path);
+  }
+}
+
+collectFiles(sourceDirectory);
+
+const checks = [
+  { name: "Radix imports", pattern: /@radix-ui\// },
+  { name: "legacy semantic utility classes", pattern: /(?:\bbg-canvas\b|\bborder-default\b)/ },
+  {
+    name: "invalid shadcn semantic classes",
+    pattern: /(?:text|bg|border)-foreground-foreground\b/,
+  },
+];
+const failures = [];
+
+for (const file of sourceFiles) {
+  const source = readFileSync(file, "utf8");
+  for (const check of checks) {
+    if (check.name === "legacy semantic utility classes" && file.endsWith(".css")) continue;
+    if (check.pattern.test(source))
+      failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
+  }
+}
+
+if (failures.length > 0) {
+  console.error(failures.join("\n"));
+  process.exit(1);
+}
+
+console.log(`Source contract passed (${sourceFiles.length} source files checked).`);

package/src/styles/tokens/source/dark.tokens.json

@@ -0,0 +1,105 @@
+{
+  "$extensions": {
+    "org.ponti.license": "MIT"
+  },
+  "background": {
+    "$type": "color",
+    "$value": "rgb(17, 17, 19)"
+  },
+  "card": {
+    "$type": "color",
+    "$value": "rgb(24, 25, 27)"
+  },
+  "popover": {
+    "$type": "color",
+    "$value": "rgb(33, 34, 37)"
+  },
+  "muted": {
+    "$type": "color",
+    "$value": "rgb(24, 25, 27)"
+  },
+  "text-primary": {
+    "$type": "color",
+    "$value": "rgb(237, 238, 240)"
+  },
+  "text-secondary": {
+    "$type": "color",
+    "$value": "rgb(176, 180, 186)"
+  },
+  "tertiary": {
+    "$type": "color",
+    "$value": "rgb(119, 123, 132)"
+  },
+  "primary": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "destructive": {
+    "$type": "color",
+    "$value": "rgb(206, 44, 49)"
+  },
+  "success": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "warning": {
+    "$type": "color",
+    "$value": "rgb(255, 197, 61)"
+  },
+  "primary-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "destructive-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "text-destructive": {
+    "$type": "color",
+    "$value": "rgb(255, 149, 146)"
+  },
+  "border-default": {
+    "$type": "color",
+    "$value": "rgb(67, 72, 78)"
+  },
+  "focus-ring": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-1": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-2": {
+    "$type": "color",
+    "$value": "rgb(110, 86, 207)"
+  },
+  "chart-3": {
+    "$type": "color",
+    "$value": "rgb(18, 165, 148)"
+  },
+  "chart-4": {
+    "$type": "color",
+    "$value": "rgb(247, 107, 21)"
+  },
+  "chart-5": {
+    "$type": "color",
+    "$value": "rgb(105, 110, 119)"
+  },
+  "chart-positive": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "chart-negative": {
+    "$type": "color",
+    "$value": "rgb(229, 72, 77)"
+  },
+  "chart-neutral": {
+    "$type": "color",
+    "$value": "rgb(90, 97, 105)"
+  },
+  "overlay-scrim": {
+    "$type": "color",
+    "$value": "rgb(0, 0, 0)"
+  }
+}

package/src/styles/tokens/source/foundations.tokens.json

@@ -0,0 +1,341 @@
+{
+  "$description": "Non-color foundations copied from tailwindcss@4.3.3/theme.css. Keep this file value-for-value aligned with Tailwind.",
+  "spacing": { "$type": "dimension", "$value": { "value": 0.25, "unit": "rem" } },
+  "spacing-scale": {
+    "$type": "dimension",
+    "0": { "$value": { "value": 0, "unit": "rem" } },
+    "px": { "$value": { "value": 1, "unit": "px" } },
+    "0-5": { "$value": { "value": 0.125, "unit": "rem" } },
+    "1": { "$value": { "value": 0.25, "unit": "rem" } },
+    "1-5": { "$value": { "value": 0.375, "unit": "rem" } },
+    "2": { "$value": { "value": 0.5, "unit": "rem" } },
+    "2-5": { "$value": { "value": 0.625, "unit": "rem" } },
+    "3": { "$value": { "value": 0.75, "unit": "rem" } },
+    "3-5": { "$value": { "value": 0.875, "unit": "rem" } },
+    "4": { "$value": { "value": 1, "unit": "rem" } },
+    "5": { "$value": { "value": 1.25, "unit": "rem" } },
+    "6": { "$value": { "value": 1.5, "unit": "rem" } },
+    "7": { "$value": { "value": 1.75, "unit": "rem" } },
+    "8": { "$value": { "value": 2, "unit": "rem" } },
+    "9": { "$value": { "value": 2.25, "unit": "rem" } },
+    "10": { "$value": { "value": 2.5, "unit": "rem" } },
+    "11": { "$value": { "value": 2.75, "unit": "rem" } },
+    "12": { "$value": { "value": 3, "unit": "rem" } },
+    "14": { "$value": { "value": 3.5, "unit": "rem" } },
+    "16": { "$value": { "value": 4, "unit": "rem" } },
+    "20": { "$value": { "value": 5, "unit": "rem" } },
+    "24": { "$value": { "value": 6, "unit": "rem" } },
+    "28": { "$value": { "value": 7, "unit": "rem" } },
+    "32": { "$value": { "value": 8, "unit": "rem" } },
+    "36": { "$value": { "value": 9, "unit": "rem" } },
+    "40": { "$value": { "value": 10, "unit": "rem" } },
+    "44": { "$value": { "value": 11, "unit": "rem" } },
+    "48": { "$value": { "value": 12, "unit": "rem" } },
+    "52": { "$value": { "value": 13, "unit": "rem" } },
+    "56": { "$value": { "value": 14, "unit": "rem" } },
+    "60": { "$value": { "value": 15, "unit": "rem" } },
+    "64": { "$value": { "value": 16, "unit": "rem" } },
+    "72": { "$value": { "value": 18, "unit": "rem" } },
+    "80": { "$value": { "value": 20, "unit": "rem" } },
+    "96": { "$value": { "value": 24, "unit": "rem" } }
+  },
+  "font": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": [
+        "system-ui",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Helvetica Neue",
+        "Noto Sans",
+        "Arial",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji"
+      ]
+    },
+    "serif": {
+      "$value": [
+        "system-ui",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Helvetica Neue",
+        "Noto Sans",
+        "Arial",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji"
+      ]
+    },
+    "mono": {
+      "$value": [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Monaco",
+        "Consolas",
+        "Liberation Mono",
+        "Courier New",
+        "monospace"
+      ]
+    }
+  },
+  "text": {
+    "$type": "dimension",
+    "xs": { "$value": { "value": 0.75, "unit": "rem" } },
+    "sm": { "$value": { "value": 0.875, "unit": "rem" } },
+    "base": { "$value": { "value": 1, "unit": "rem" } },
+    "lg": { "$value": { "value": 1.125, "unit": "rem" } },
+    "xl": { "$value": { "value": 1.25, "unit": "rem" } },
+    "2xl": { "$value": { "value": 1.5, "unit": "rem" } },
+    "3xl": { "$value": { "value": 1.875, "unit": "rem" } },
+    "4xl": { "$value": { "value": 2.25, "unit": "rem" } },
+    "5xl": { "$value": { "value": 3, "unit": "rem" } },
+    "6xl": { "$value": { "value": 3.75, "unit": "rem" } },
+    "7xl": { "$value": { "value": 4.5, "unit": "rem" } },
+    "8xl": { "$value": { "value": 6, "unit": "rem" } },
+    "9xl": { "$value": { "value": 8, "unit": "rem" } }
+  },
+  "text-line-height": {
+    "$type": "number",
+    "xs": { "$value": 1.3333333333 },
+    "sm": { "$value": 1.4285714286 },
+    "base": { "$value": 1.5 },
+    "lg": { "$value": 1.5555555556 },
+    "xl": { "$value": 1.4 },
+    "2xl": { "$value": 1.3333333333 },
+    "3xl": { "$value": 1.2 },
+    "4xl": { "$value": 1.1111111111 },
+    "5xl": { "$value": 1 },
+    "6xl": { "$value": 1 },
+    "7xl": { "$value": 1 },
+    "8xl": { "$value": 1 },
+    "9xl": { "$value": 1 }
+  },
+  "font-weight": {
+    "$type": "fontWeight",
+    "thin": { "$value": 100 },
+    "extralight": { "$value": 200 },
+    "light": { "$value": 300 },
+    "normal": { "$value": 400 },
+    "medium": { "$value": 500 },
+    "semibold": { "$value": 600 },
+    "bold": { "$value": 700 },
+    "extrabold": { "$value": 800 },
+    "black": { "$value": 900 }
+  },
+  "tracking": {
+    "$type": "dimension",
+    "tighter": { "$value": { "value": -0.05, "unit": "em" } },
+    "tight": { "$value": { "value": -0.025, "unit": "em" } },
+    "normal": { "$value": { "value": 0, "unit": "em" } },
+    "wide": { "$value": { "value": 0.025, "unit": "em" } },
+    "wider": { "$value": { "value": 0.05, "unit": "em" } },
+    "widest": { "$value": { "value": 0.1, "unit": "em" } }
+  },
+  "leading": {
+    "$type": "number",
+    "tight": { "$value": 1.25 },
+    "snug": { "$value": 1.375 },
+    "normal": { "$value": 1.5 },
+    "relaxed": { "$value": 1.625 },
+    "loose": { "$value": 2 }
+  },
+  "radius": {
+    "$type": "dimension",
+    "xs": { "$value": { "value": 0.125, "unit": "rem" } },
+    "sm": { "$value": { "value": 0.25, "unit": "rem" } },
+    "md": { "$value": { "value": 0.375, "unit": "rem" } },
+    "lg": { "$value": { "value": 0.5, "unit": "rem" } },
+    "xl": { "$value": { "value": 0.75, "unit": "rem" } },
+    "2xl": { "$value": { "value": 1, "unit": "rem" } },
+    "3xl": { "$value": { "value": 1.5, "unit": "rem" } },
+    "4xl": { "$value": { "value": 2, "unit": "rem" } },
+    "full": { "$value": { "value": 9999, "unit": "px" } }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "2xs": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.05)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 0, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        }
+      ]
+    },
+    "xs": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.05)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 2, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        }
+      ]
+    },
+    "sm": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 3, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 2, "unit": "px" },
+          "spread": { "value": -1, "unit": "px" }
+        }
+      ]
+    },
+    "md": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 4, "unit": "px" },
+          "blur": { "value": 6, "unit": "px" },
+          "spread": { "value": -1, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 2, "unit": "px" },
+          "blur": { "value": 4, "unit": "px" },
+          "spread": { "value": -2, "unit": "px" }
+        }
+      ]
+    },
+    "lg": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 10, "unit": "px" },
+          "blur": { "value": 15, "unit": "px" },
+          "spread": { "value": -3, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 4, "unit": "px" },
+          "blur": { "value": 6, "unit": "px" },
+          "spread": { "value": -4, "unit": "px" }
+        }
+      ]
+    },
+    "xl": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 20, "unit": "px" },
+          "blur": { "value": 25, "unit": "px" },
+          "spread": { "value": -5, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 8, "unit": "px" },
+          "blur": { "value": 10, "unit": "px" },
+          "spread": { "value": -6, "unit": "px" }
+        }
+      ]
+    },
+    "2xl": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.25)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 25, "unit": "px" },
+          "blur": { "value": 50, "unit": "px" },
+          "spread": { "value": -12, "unit": "px" }
+        }
+      ]
+    },
+    "none": {
+      "$value": [
+        {
+          "color": "transparent",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 0, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        }
+      ]
+    }
+  },
+  "breakpoint": {
+    "$type": "dimension",
+    "sm": { "$value": { "value": 40, "unit": "rem" } },
+    "md": { "$value": { "value": 48, "unit": "rem" } },
+    "lg": { "$value": { "value": 64, "unit": "rem" } },
+    "xl": { "$value": { "value": 80, "unit": "rem" } },
+    "2xl": { "$value": { "value": 96, "unit": "rem" } }
+  },
+  "container": {
+    "$type": "dimension",
+    "3xs": { "$value": { "value": 16, "unit": "rem" } },
+    "2xs": { "$value": { "value": 18, "unit": "rem" } },
+    "xs": { "$value": { "value": 20, "unit": "rem" } },
+    "sm": { "$value": { "value": 24, "unit": "rem" } },
+    "md": { "$value": { "value": 28, "unit": "rem" } },
+    "lg": { "$value": { "value": 32, "unit": "rem" } },
+    "xl": { "$value": { "value": 36, "unit": "rem" } },
+    "2xl": { "$value": { "value": 42, "unit": "rem" } },
+    "3xl": { "$value": { "value": 48, "unit": "rem" } },
+    "4xl": { "$value": { "value": 56, "unit": "rem" } },
+    "5xl": { "$value": { "value": 64, "unit": "rem" } },
+    "6xl": { "$value": { "value": 72, "unit": "rem" } },
+    "7xl": { "$value": { "value": 80, "unit": "rem" } }
+  },
+  "z-index": {
+    "$type": "number",
+    "auto": { "$value": "auto" },
+    "0": { "$value": 0 },
+    "10": { "$value": 10 },
+    "20": { "$value": 20 },
+    "30": { "$value": 30 },
+    "40": { "$value": 40 },
+    "50": { "$value": 50 }
+  },
+  "ease": {
+    "$type": "cubicBezier",
+    "in": { "$value": [0.4, 0, 1, 1] },
+    "out": { "$value": [0, 0, 0.2, 1] },
+    "in-out": { "$value": [0.4, 0, 0.2, 1] }
+  },
+  "duration": {
+    "$type": "duration",
+    "75": { "$value": "75ms" },
+    "100": { "$value": "100ms" },
+    "150": { "$value": "150ms" },
+    "200": { "$value": "200ms" },
+    "300": { "$value": "300ms" },
+    "500": { "$value": "500ms" },
+    "700": { "$value": "700ms" },
+    "1000": { "$value": "1000ms" }
+  },
+  "animate": {
+    "$type": "string",
+    "spin": { "$value": "spin 1s linear infinite" },
+    "ping": { "$value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
+    "pulse": { "$value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
+    "bounce": { "$value": "bounce 1s infinite" }
+  }
+}

package/src/styles/tokens/source/light.tokens.json

@@ -0,0 +1,105 @@
+{
+  "$extensions": {
+    "org.ponti.license": "MIT"
+  },
+  "background": {
+    "$type": "color",
+    "$value": "rgb(252, 252, 253)"
+  },
+  "card": {
+    "$type": "color",
+    "$value": "rgb(249, 249, 251)"
+  },
+  "popover": {
+    "$type": "color",
+    "$value": "rgb(240, 240, 243)"
+  },
+  "muted": {
+    "$type": "color",
+    "$value": "rgb(249, 249, 251)"
+  },
+  "text-primary": {
+    "$type": "color",
+    "$value": "rgb(28, 32, 36)"
+  },
+  "text-secondary": {
+    "$type": "color",
+    "$value": "rgb(96, 100, 108)"
+  },
+  "tertiary": {
+    "$type": "color",
+    "$value": "rgb(128, 131, 141)"
+  },
+  "primary": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "destructive": {
+    "$type": "color",
+    "$value": "rgb(206, 44, 49)"
+  },
+  "success": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "warning": {
+    "$type": "color",
+    "$value": "rgb(255, 197, 61)"
+  },
+  "primary-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "destructive-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "text-destructive": {
+    "$type": "color",
+    "$value": "rgb(200, 44, 49)"
+  },
+  "border-default": {
+    "$type": "color",
+    "$value": "rgb(205, 206, 214)"
+  },
+  "focus-ring": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-1": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-2": {
+    "$type": "color",
+    "$value": "rgb(110, 86, 207)"
+  },
+  "chart-3": {
+    "$type": "color",
+    "$value": "rgb(18, 165, 148)"
+  },
+  "chart-4": {
+    "$type": "color",
+    "$value": "rgb(247, 107, 21)"
+  },
+  "chart-5": {
+    "$type": "color",
+    "$value": "rgb(139, 141, 152)"
+  },
+  "chart-positive": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "chart-negative": {
+    "$type": "color",
+    "$value": "rgb(229, 72, 77)"
+  },
+  "chart-neutral": {
+    "$type": "color",
+    "$value": "rgb(185, 187, 198)"
+  },
+  "overlay-scrim": {
+    "$type": "color",
+    "$value": "rgb(0, 0, 0)"
+  }
+}

package/src/styles/tokens/style-dictionary.dark-storybook.json

@@ -0,0 +1,16 @@
+{
+  "source": ["src/styles/tokens/source/dark.tokens.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": ".storybook/generated/",
+      "files": [
+        {
+          "destination": "dark-theme-class.css",
+          "format": "css/variables",
+          "options": { "selector": ":root.storybook-theme-dark" }
+        }
+      ]
+    }
+  }
+}

package/src/styles/tokens/style-dictionary.dark.json

@@ -0,0 +1,21 @@
+{
+  "source": ["src/styles/tokens/source/dark.tokens.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "src/styles/tokens/generated/",
+      "files": [{ "destination": "dark.css", "format": "css/variables" }]
+    },
+    "typescript": {
+      "transformGroup": "js",
+      "buildPath": "src/styles/tokens/generated/",
+      "files": [
+        {
+          "destination": "dark.colors.generated.ts",
+          "format": "javascript/esm",
+          "options": { "minify": true }
+        }
+      ]
+    }
+  }
+}

package/src/styles/tokens/style-dictionary.foundations.json

@@ -0,0 +1,21 @@
+{
+  "source": ["src/styles/tokens/source/foundations.tokens.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "src/styles/tokens/generated/",
+      "files": [{ "destination": "foundations.css", "format": "css/variables" }]
+    },
+    "typescript": {
+      "transformGroup": "js",
+      "buildPath": "src/styles/tokens/generated/",
+      "files": [
+        {
+          "destination": "foundations.generated.ts",
+          "format": "javascript/esm",
+          "options": { "minify": true }
+        }
+      ]
+    }
+  }
+}

package/src/styles/tokens/style-dictionary.light.json

@@ -0,0 +1,21 @@
+{
+  "source": ["src/styles/tokens/source/light.tokens.json"],
+  "platforms": {
+    "css": {
+      "transformGroup": "css",
+      "buildPath": "src/styles/tokens/generated/",
+      "files": [{ "destination": "light.css", "format": "css/variables" }]
+    },
+    "typescript": {
+      "transformGroup": "js",
+      "buildPath": "src/styles/tokens/generated/",
+      "files": [
+        {
+          "destination": "light.colors.generated.ts",
+          "format": "javascript/esm",
+          "options": { "minify": true }
+        }
+      ]
+    }
+  }
+}

package/src/tokens.css

@@ -1,3 +0,0 @@
-@import "./tokens/generated/foundations.css";
-@import "./tokens/generated/light.css";
-@import "./tokens/generated/dark.css" (prefers-color-scheme: dark);