@akanaka/tokens 0.4.0 → 0.6.2

package/DESIGN.md

@@ -0,0 +1,31 @@
+# @akanaka/tokens — design token map
+
+This package is the source of truth for **colors**, **typography**, **spacing**, **radius**, **shadows**, **transitions**, **semantic** (light/dark), and **CSS variable references** (`cssVars`).
+
+## Where things live
+
+| Artifact | Role |
+|----------|------|
+| `src/tokens.ts` | Typed constants for JS/TS (`colors`, `typography`, `spacing`, `semantic`, `semanticDark`, `cssVars`, …). Mirrors the CSS file conceptually. |
+| `src/tokens.css` | `:root` / theme CSS custom properties (e.g. `--color-primary-500`, `--background-default`). Import for global styles. |
+| `dist/tokens.json` | **Generated at build** from the same exports as the main entry — flat JSON for tools, docs, and AI that prefer a scrapeable file. Do not edit by hand. |
+
+Tailwind integration (`./tailwind`, `./tailwind-v4`) is derived from these tokens; it is not the canonical list of values.
+
+## Package entry points
+
+- **`@akanaka/tokens`** — JavaScript/TypeScript API (`import { colors, semantic, … } from '@akanaka/tokens'`).
+- **`@akanaka/tokens/css`** or **`@akanaka/tokens/tokens.css`** — bundled CSS (includes font imports).
+- **`@akanaka/tokens/tokens.json`** — resolved token tree as JSON (build output).
+- **`@akanaka/tokens/tailwind`** — Tailwind v3 preset (CommonJS).
+- **`@akanaka/tokens/tailwind-v4`** — Tailwind v4 CSS layer.
+
+## Naming
+
+- **Primitives**: `colors.primary[500]`, `spacing[4]`, `radius.lg`, etc.
+- **Semantic (theme)**: `semantic.background.default`, `semantic.foreground.muted`, `semantic.border.primary` (light); `semanticDark.*` for dark defaults resolved in TS.
+- **CSS in the browser**: use `tokens.css` variables; **`cssVars`** maps logical groups to `var(--…)` strings for Tailwind or inline style wiring.
+
+## Regenerating `tokens.json`
+
+From `packages/tokens`, run `pnpm build`. The `tsup` `onSuccess` hook runs `scripts/generate-tokens-json.mjs`, which imports the built `dist/index.js` and writes `dist/tokens.json`.

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 declare const colors: {
+    readonly white: "#FFFFFF";
     readonly primary: {
         readonly 50: "#FDF4F1";
         readonly 100: "#FADDD5";
@@ -14,6 +15,7 @@ declare const colors: {
         readonly 300: "#D6D3D1";
         readonly 400: "#A8A29E";
         readonly 500: "#78716C";
+        readonly 600: "#57534E";
         readonly 700: "#44403C";
         readonly 900: "#1C1917";
     };
@@ -121,6 +123,7 @@ declare const semantic: {
         readonly nav: "#FADDD5";
         readonly navHover: "#F4B8A6";
         readonly navActive: "#E07A5F";
+        readonly primarySubtle: "#FADDD5";
     };
     readonly foreground: {
         readonly default: "#1C1917";
@@ -142,6 +145,55 @@ declare const semantic: {
         readonly strong: "#D6D3D1";
         readonly primary: "#E07A5F";
         readonly error: "#EF4444";
+        readonly success: "#BBF7D0";
+        readonly warning: "#FDE68A";
+        readonly info: "#BFDBFE";
+        readonly errorSubtle: "#FECACA";
+    };
+};
+declare const semanticDark: {
+    readonly background: {
+        readonly default: "#1C1917";
+        readonly page: "#0f0e0d";
+        readonly muted: "#44403C";
+        readonly subtle: "#78716C";
+        readonly elevated: "#44403C";
+        readonly overlay: "rgba(0, 0, 0, 0.7)";
+        readonly primary: "#E07A5F";
+        /** Tinted surfaces; see tokens.css for color-mix in runtime */
+        readonly primarySubtle: "#3d2a24";
+        readonly success: "#1a2e1f";
+        readonly warning: "#2e2618";
+        readonly error: "#2e1212";
+        readonly info: "#152238";
+        readonly nav: "#44403C";
+        readonly navHover: "#78716C";
+        readonly navActive: "#E07A5F";
+    };
+    readonly foreground: {
+        readonly default: "#F5F5F4";
+        readonly muted: "#A8A29E";
+        readonly subtle: "#78716C";
+        readonly primary: "#F4B8A6";
+        readonly success: "#BBF7D0";
+        readonly warning: "#FDE68A";
+        readonly error: "#FECACA";
+        readonly info: "#BFDBFE";
+        readonly onPrimary: "#FFFFFF";
+        readonly nav: "#D6D3D1";
+        readonly navHover: "#F5F5F4";
+        readonly navActive: "#FFFFFF";
+    };
+    readonly border: {
+        readonly default: "#78716C";
+        readonly muted: "#57534E";
+        readonly strong: "#A8A29E";
+        readonly primary: "#E07A5F";
+        readonly error: "#EF4444";
+        readonly success: "rgba(34, 197, 94, 0.5)";
+        readonly warning: "rgba(245, 158, 11, 0.5)";
+        readonly info: "rgba(59, 130, 246, 0.5)";
+        readonly errorSubtle: "rgba(239, 68, 68, 0.5)";
     };
 };
 declare const cssVars: {
@@ -161,6 +213,7 @@ declare const cssVars: {
             readonly 300: "var(--color-neutral-300)";
             readonly 400: "var(--color-neutral-400)";
             readonly 500: "var(--color-neutral-500)";
+            readonly 600: "var(--color-neutral-600)";
             readonly 700: "var(--color-neutral-700)";
             readonly 900: "var(--color-neutral-900)";
         };
@@ -185,6 +238,51 @@ declare const cssVars: {
             readonly nav: "var(--background-nav)";
             readonly navHover: "var(--background-nav-hover)";
             readonly navActive: "var(--background-nav-active)";
+            readonly primarySubtle: "var(--background-primary-subtle)";
+        };
+        readonly foreground: {
+            readonly default: "var(--foreground-default)";
+            readonly muted: "var(--foreground-muted)";
+            readonly subtle: "var(--foreground-subtle)";
+            readonly primary: "var(--foreground-primary)";
+            readonly success: "var(--foreground-success)";
+            readonly warning: "var(--foreground-warning)";
+            readonly error: "var(--foreground-error)";
+            readonly info: "var(--foreground-info)";
+            readonly onPrimary: "var(--foreground-on-primary)";
+            readonly nav: "var(--foreground-nav)";
+            readonly navHover: "var(--foreground-nav-hover)";
+            readonly navActive: "var(--foreground-nav-active)";
+        };
+        readonly border: {
+            readonly default: "var(--border-default)";
+            readonly muted: "var(--border-muted)";
+            readonly strong: "var(--border-strong)";
+            readonly primary: "var(--border-primary)";
+            readonly error: "var(--border-error)";
+            readonly success: "var(--border-success)";
+            readonly warning: "var(--border-warning)";
+            readonly info: "var(--border-info)";
+            readonly errorSubtle: "var(--border-error-subtle)";
+        };
+    };
+    readonly semanticDark: {
+        readonly background: {
+            readonly default: "var(--background-default)";
+            readonly page: "var(--background-page)";
+            readonly muted: "var(--background-muted)";
+            readonly subtle: "var(--background-subtle)";
+            readonly elevated: "var(--background-elevated)";
+            readonly overlay: "var(--background-overlay)";
+            readonly primary: "var(--background-primary)";
+            readonly success: "var(--background-success)";
+            readonly warning: "var(--background-warning)";
+            readonly error: "var(--background-error)";
+            readonly info: "var(--background-info)";
+            readonly nav: "var(--background-nav)";
+            readonly navHover: "var(--background-nav-hover)";
+            readonly navActive: "var(--background-nav-active)";
+            readonly primarySubtle: "var(--background-primary-subtle)";
         };
         readonly foreground: {
             readonly default: "var(--foreground-default)";
@@ -206,8 +304,12 @@ declare const cssVars: {
             readonly strong: "var(--border-strong)";
             readonly primary: "var(--border-primary)";
             readonly error: "var(--border-error)";
+            readonly success: "var(--border-success)";
+            readonly warning: "var(--border-warning)";
+            readonly info: "var(--border-info)";
+            readonly errorSubtle: "var(--border-error-subtle)";
         };
     };
 };
 
-export { colors, cssVars, radius, semantic, shadows, spacing, transitions, typography };
+export { colors, cssVars, radius, semantic, semanticDark, shadows, spacing, transitions, typography };

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/tokens.ts
 var colors = {
+  white: "#FFFFFF",
   primary: {
     50: "#FDF4F1",
     100: "#FADDD5",
@@ -15,6 +16,7 @@ var colors = {
     300: "#D6D3D1",
     400: "#A8A29E",
     500: "#78716C",
+    600: "#57534E",
     700: "#44403C",
     900: "#1C1917"
   },
@@ -121,7 +123,8 @@ var semantic = {
     info: "#EFF6FF",
     nav: "#FADDD5",
     navHover: "#F4B8A6",
-    navActive: "#E07A5F"
+    navActive: "#E07A5F",
+    primarySubtle: "#FADDD5"
   },
   foreground: {
     default: "#1C1917",
@@ -142,7 +145,56 @@ var semantic = {
     muted: "#F5F5F4",
     strong: "#D6D3D1",
     primary: "#E07A5F",
-    error: "#EF4444"
+    error: "#EF4444",
+    success: "#BBF7D0",
+    warning: "#FDE68A",
+    info: "#BFDBFE",
+    errorSubtle: "#FECACA"
+  }
+};
+var semanticDark = {
+  background: {
+    default: colors.neutral[900],
+    page: "#0f0e0d",
+    muted: colors.neutral[700],
+    subtle: colors.neutral[500],
+    elevated: colors.neutral[700],
+    overlay: "rgba(0, 0, 0, 0.7)",
+    primary: colors.primary[500],
+    /** Tinted surfaces; see tokens.css for color-mix in runtime */
+    primarySubtle: "#3d2a24",
+    success: "#1a2e1f",
+    warning: "#2e2618",
+    error: "#2e1212",
+    info: "#152238",
+    nav: colors.neutral[700],
+    navHover: colors.neutral[500],
+    navActive: colors.primary[500]
+  },
+  foreground: {
+    default: colors.neutral[100],
+    muted: colors.neutral[400],
+    subtle: colors.neutral[500],
+    primary: colors.primary[200],
+    success: colors.green[200],
+    warning: colors.amber[200],
+    error: colors.red[200],
+    info: colors.blue[200],
+    onPrimary: "#FFFFFF",
+    nav: colors.neutral[300],
+    navHover: colors.neutral[100],
+    navActive: colors.white
+  },
+  border: {
+    default: colors.neutral[500],
+    muted: colors.neutral[600],
+    strong: colors.neutral[400],
+    primary: colors.primary[500],
+    error: colors.semantic.error,
+    success: "rgba(34, 197, 94, 0.5)",
+    warning: "rgba(245, 158, 11, 0.5)",
+    info: "rgba(59, 130, 246, 0.5)",
+    errorSubtle: "rgba(239, 68, 68, 0.5)"
   }
 };
 var cssVars = {
@@ -162,6 +214,7 @@ var cssVars = {
       300: "var(--color-neutral-300)",
       400: "var(--color-neutral-400)",
       500: "var(--color-neutral-500)",
+      600: "var(--color-neutral-600)",
       700: "var(--color-neutral-700)",
       900: "var(--color-neutral-900)"
     },
@@ -185,7 +238,52 @@ var cssVars = {
       info: "var(--background-info)",
       nav: "var(--background-nav)",
       navHover: "var(--background-nav-hover)",
-      navActive: "var(--background-nav-active)"
+      navActive: "var(--background-nav-active)",
+      primarySubtle: "var(--background-primary-subtle)"
+    },
+    foreground: {
+      default: "var(--foreground-default)",
+      muted: "var(--foreground-muted)",
+      subtle: "var(--foreground-subtle)",
+      primary: "var(--foreground-primary)",
+      success: "var(--foreground-success)",
+      warning: "var(--foreground-warning)",
+      error: "var(--foreground-error)",
+      info: "var(--foreground-info)",
+      onPrimary: "var(--foreground-on-primary)",
+      nav: "var(--foreground-nav)",
+      navHover: "var(--foreground-nav-hover)",
+      navActive: "var(--foreground-nav-active)"
+    },
+    border: {
+      default: "var(--border-default)",
+      muted: "var(--border-muted)",
+      strong: "var(--border-strong)",
+      primary: "var(--border-primary)",
+      error: "var(--border-error)",
+      success: "var(--border-success)",
+      warning: "var(--border-warning)",
+      info: "var(--border-info)",
+      errorSubtle: "var(--border-error-subtle)"
+    }
+  },
+  semanticDark: {
+    background: {
+      default: "var(--background-default)",
+      page: "var(--background-page)",
+      muted: "var(--background-muted)",
+      subtle: "var(--background-subtle)",
+      elevated: "var(--background-elevated)",
+      overlay: "var(--background-overlay)",
+      primary: "var(--background-primary)",
+      success: "var(--background-success)",
+      warning: "var(--background-warning)",
+      error: "var(--background-error)",
+      info: "var(--background-info)",
+      nav: "var(--background-nav)",
+      navHover: "var(--background-nav-hover)",
+      navActive: "var(--background-nav-active)",
+      primarySubtle: "var(--background-primary-subtle)"
     },
     foreground: {
       default: "var(--foreground-default)",
@@ -206,7 +304,11 @@ var cssVars = {
       muted: "var(--border-muted)",
       strong: "var(--border-strong)",
       primary: "var(--border-primary)",
-      error: "var(--border-error)"
+      error: "var(--border-error)",
+      success: "var(--border-success)",
+      warning: "var(--border-warning)",
+      info: "var(--border-info)",
+      errorSubtle: "var(--border-error-subtle)"
     }
   }
 };
@@ -215,6 +317,7 @@ export {
   cssVars,
   radius,
   semantic,
+  semanticDark,
   shadows,
   spacing,
   transitions,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/* ==========================================================================\n   Design Tokens — TypeScript Constants\n   Mirrors tokens.css for programmatic access.\n   ========================================================================== */\n\nexport const colors = {\n  primary: {\n    50: \"#FDF4F1\",\n    100: \"#FADDD5\",\n    200: \"#F4B8A6\",\n    500: \"#E07A5F\",\n    600: \"#C9664A\",\n    700: \"#A8503A\",\n  },\n  neutral: {\n    50: \"#FAFAF9\",\n    100: \"#F5F5F4\",\n    200: \"#E7E5E4\",\n    300: \"#D6D3D1\",\n    400: \"#A8A29E\",\n    500: \"#78716C\",\n    700: \"#44403C\",\n    900: \"#1C1917\",\n  },\n  semantic: {\n    success: \"#22C55E\",\n    warning: \"#F59E0B\",\n    error: \"#EF4444\",\n    info: \"#3B82F6\",\n  },\n  green: {\n    50: \"#F0FDF4\",\n    100: \"#DCFCE7\",\n    200: \"#BBF7D0\",\n    500: \"#22C55E\",\n    600: \"#16A34A\",\n    700: \"#15803D\",\n  },\n  amber: {\n    50: \"#FFFBEB\",\n    100: \"#FEF3C7\",\n    200: \"#FDE68A\",\n    500: \"#F59E0B\",\n    600: \"#D97706\",\n    700: \"#B45309\",\n  },\n  red: {\n    50: \"#FEF2F2\",\n    100: \"#FEE2E2\",\n    200: \"#FECACA\",\n    500: \"#EF4444\",\n    600: \"#DC2626\",\n    700: \"#B91C1C\",\n  },\n  blue: {\n    50: \"#EFF6FF\",\n    100: \"#DBEAFE\",\n    200: \"#BFDBFE\",\n    500: \"#3B82F6\",\n    600: \"#2563EB\",\n    700: \"#1D4ED8\",\n  },\n} as const;\n\nexport const typography = {\n  fontFamily: {\n    sans: \"'Manrope', system-ui, -apple-system, sans-serif\",\n    mono: \"'JetBrains Mono', ui-monospace, monospace\",\n  },\n  fontWeight: {\n    regular: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n    extrabold: 800,\n  },\n  fontSize: {\n    caption: \"0.75rem\",\n    overline: \"0.6875rem\",\n    bodySm: \"0.8125rem\",\n    body: \"0.875rem\",\n    h3: \"1rem\",\n    h2: \"1.125rem\",\n    h1: \"1.5rem\",\n    display: \"2.25rem\",\n  },\n} as const;\n\nexport const spacing = {\n  1: \"0.25rem\",\n  2: \"0.5rem\",\n  3: \"0.75rem\",\n  4: \"1rem\",\n  6: \"1.5rem\",\n  8: \"2rem\",\n  12: \"3rem\",\n} as const;\n\nexport const radius = {\n  sm: \"0.25rem\",\n  md: \"0.375rem\",\n  lg: \"0.5rem\",\n  full: \"9999px\",\n} as const;\n\nexport const shadows = {\n  sm: \"0 1px 2px rgba(28, 25, 23, 0.05)\",\n  md: \"0 4px 6px rgba(28, 25, 23, 0.07)\",\n  lg: \"0 10px 15px rgba(28, 25, 23, 0.1)\",\n  focus: \"0 0 0 3px rgba(224, 122, 95, 0.3)\",\n} as const;\n\nexport const transitions = {\n  fast: \"150ms ease\",\n  base: \"200ms ease\",\n  slow: \"300ms ease\",\n} as const;\n\nexport const semantic = {\n  background: {\n    default: \"#FFFFFF\",\n    page: \"#FAFAF9\",\n    muted: \"#F5F5F4\",\n    subtle: \"#E7E5E4\",\n    elevated: \"#FFFFFF\",\n    overlay: \"rgba(28, 25, 23, 0.5)\",\n    primary: \"#E07A5F\",\n    success: \"#F0FDF4\",\n    warning: \"#FFFBEB\",\n    error: \"#FEF2F2\",\n    info: \"#EFF6FF\",\n    nav: \"#FADDD5\",\n    navHover: \"#F4B8A6\",\n    navActive: \"#E07A5F\",\n  },\n  foreground: {\n    default: \"#1C1917\",\n    muted: \"#78716C\",\n    subtle: \"#A8A29E\",\n    primary: \"#A8503A\",\n    success: \"#15803D\",\n    warning: \"#B45309\",\n    error: \"#B91C1C\",\n    info: \"#1D4ED8\",\n    onPrimary: \"#FFFFFF\",\n    nav: \"#44403C\",\n    navHover: \"#1C1917\",\n    navActive: \"#FFFFFF\",\n  },\n  border: {\n    default: \"#E7E5E4\",\n    muted: \"#F5F5F4\",\n    strong: \"#D6D3D1\",\n    primary: \"#E07A5F\",\n    error: \"#EF4444\",\n  },\n} as const;\n\n// CSS variable references for use in Tailwind config or JS\nexport const cssVars = {\n  colors: {\n    primary: {\n      50: \"var(--color-primary-50)\",\n      100: \"var(--color-primary-100)\",\n      200: \"var(--color-primary-200)\",\n      500: \"var(--color-primary-500)\",\n      600: \"var(--color-primary-600)\",\n      700: \"var(--color-primary-700)\",\n    },\n    neutral: {\n      50: \"var(--color-neutral-50)\",\n      100: \"var(--color-neutral-100)\",\n      200: \"var(--color-neutral-200)\",\n      300: \"var(--color-neutral-300)\",\n      400: \"var(--color-neutral-400)\",\n      500: \"var(--color-neutral-500)\",\n      700: \"var(--color-neutral-700)\",\n      900: \"var(--color-neutral-900)\",\n    },\n    success: \"var(--color-success)\",\n    warning: \"var(--color-warning)\",\n    error: \"var(--color-error)\",\n    info: \"var(--color-info)\",\n  },\n  semantic: {\n    background: {\n      default: \"var(--background-default)\",\n      page: \"var(--background-page)\",\n      muted: \"var(--background-muted)\",\n      subtle: \"var(--background-subtle)\",\n      elevated: \"var(--background-elevated)\",\n      overlay: \"var(--background-overlay)\",\n      primary: \"var(--background-primary)\",\n      success: \"var(--background-success)\",\n      warning: \"var(--background-warning)\",\n      error: \"var(--background-error)\",\n      info: \"var(--background-info)\",\n      nav: \"var(--background-nav)\",\n      navHover: \"var(--background-nav-hover)\",\n      navActive: \"var(--background-nav-active)\",\n    },\n    foreground: {\n      default: \"var(--foreground-default)\",\n      muted: \"var(--foreground-muted)\",\n      subtle: \"var(--foreground-subtle)\",\n      primary: \"var(--foreground-primary)\",\n      success: \"var(--foreground-success)\",\n      warning: \"var(--foreground-warning)\",\n      error: \"var(--foreground-error)\",\n      info: \"var(--foreground-info)\",\n      onPrimary: \"var(--foreground-on-primary)\",\n      nav: \"var(--foreground-nav)\",\n      navHover: \"var(--foreground-nav-hover)\",\n      navActive: \"var(--foreground-nav-active)\",\n    },\n    border: {\n      default: \"var(--border-default)\",\n      muted: \"var(--border-muted)\",\n      strong: \"var(--border-strong)\",\n      primary: \"var(--border-primary)\",\n      error: \"var(--border-error)\",\n    },\n  },\n} as const;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/* ==========================================================================\n   Design Tokens — TypeScript Constants\n   Mirrors tokens.css for programmatic access.\n   ========================================================================== */\n\nexport const colors = {\n  white: \"#FFFFFF\",\n  primary: {\n    50: \"#FDF4F1\",\n    100: \"#FADDD5\",\n    200: \"#F4B8A6\",\n    500: \"#E07A5F\",\n    600: \"#C9664A\",\n    700: \"#A8503A\",\n  },\n  neutral: {\n    50: \"#FAFAF9\",\n    100: \"#F5F5F4\",\n    200: \"#E7E5E4\",\n    300: \"#D6D3D1\",\n    400: \"#A8A29E\",\n    500: \"#78716C\",\n    600: \"#57534E\",\n    700: \"#44403C\",\n    900: \"#1C1917\",\n  },\n  semantic: {\n    success: \"#22C55E\",\n    warning: \"#F59E0B\",\n    error: \"#EF4444\",\n    info: \"#3B82F6\",\n  },\n  green: {\n    50: \"#F0FDF4\",\n    100: \"#DCFCE7\",\n    200: \"#BBF7D0\",\n    500: \"#22C55E\",\n    600: \"#16A34A\",\n    700: \"#15803D\",\n  },\n  amber: {\n    50: \"#FFFBEB\",\n    100: \"#FEF3C7\",\n    200: \"#FDE68A\",\n    500: \"#F59E0B\",\n    600: \"#D97706\",\n    700: \"#B45309\",\n  },\n  red: {\n    50: \"#FEF2F2\",\n    100: \"#FEE2E2\",\n    200: \"#FECACA\",\n    500: \"#EF4444\",\n    600: \"#DC2626\",\n    700: \"#B91C1C\",\n  },\n  blue: {\n    50: \"#EFF6FF\",\n    100: \"#DBEAFE\",\n    200: \"#BFDBFE\",\n    500: \"#3B82F6\",\n    600: \"#2563EB\",\n    700: \"#1D4ED8\",\n  },\n} as const;\n\nexport const typography = {\n  fontFamily: {\n    sans: \"'Manrope', system-ui, -apple-system, sans-serif\",\n    mono: \"'JetBrains Mono', ui-monospace, monospace\",\n  },\n  fontWeight: {\n    regular: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n    extrabold: 800,\n  },\n  fontSize: {\n    caption: \"0.75rem\",\n    overline: \"0.6875rem\",\n    bodySm: \"0.8125rem\",\n    body: \"0.875rem\",\n    h3: \"1rem\",\n    h2: \"1.125rem\",\n    h1: \"1.5rem\",\n    display: \"2.25rem\",\n  },\n} as const;\n\nexport const spacing = {\n  1: \"0.25rem\",\n  2: \"0.5rem\",\n  3: \"0.75rem\",\n  4: \"1rem\",\n  6: \"1.5rem\",\n  8: \"2rem\",\n  12: \"3rem\",\n} as const;\n\nexport const radius = {\n  sm: \"0.25rem\",\n  md: \"0.375rem\",\n  lg: \"0.5rem\",\n  full: \"9999px\",\n} as const;\n\nexport const shadows = {\n  sm: \"0 1px 2px rgba(28, 25, 23, 0.05)\",\n  md: \"0 4px 6px rgba(28, 25, 23, 0.07)\",\n  lg: \"0 10px 15px rgba(28, 25, 23, 0.1)\",\n  focus: \"0 0 0 3px rgba(224, 122, 95, 0.3)\",\n} as const;\n\nexport const transitions = {\n  fast: \"150ms ease\",\n  base: \"200ms ease\",\n  slow: \"300ms ease\",\n} as const;\n\nexport const semantic = {\n  background: {\n    default: \"#FFFFFF\",\n    page: \"#FAFAF9\",\n    muted: \"#F5F5F4\",\n    subtle: \"#E7E5E4\",\n    elevated: \"#FFFFFF\",\n    overlay: \"rgba(28, 25, 23, 0.5)\",\n    primary: \"#E07A5F\",\n    success: \"#F0FDF4\",\n    warning: \"#FFFBEB\",\n    error: \"#FEF2F2\",\n    info: \"#EFF6FF\",\n    nav: \"#FADDD5\",\n    navHover: \"#F4B8A6\",\n    navActive: \"#E07A5F\",\n    primarySubtle: \"#FADDD5\",\n  },\n  foreground: {\n    default: \"#1C1917\",\n    muted: \"#78716C\",\n    subtle: \"#A8A29E\",\n    primary: \"#A8503A\",\n    success: \"#15803D\",\n    warning: \"#B45309\",\n    error: \"#B91C1C\",\n    info: \"#1D4ED8\",\n    onPrimary: \"#FFFFFF\",\n    nav: \"#44403C\",\n    navHover: \"#1C1917\",\n    navActive: \"#FFFFFF\",\n  },\n  border: {\n    default: \"#E7E5E4\",\n    muted: \"#F5F5F4\",\n    strong: \"#D6D3D1\",\n    primary: \"#E07A5F\",\n    error: \"#EF4444\",\n    success: \"#BBF7D0\",\n    warning: \"#FDE68A\",\n    info: \"#BFDBFE\",\n    errorSubtle: \"#FECACA\",\n  },\n} as const;\n\nexport const semanticDark = {\n  background: {\n    default: colors.neutral[900],\n    page: \"#0f0e0d\",\n    muted: colors.neutral[700],\n    subtle: colors.neutral[500],\n    elevated: colors.neutral[700],\n    overlay: \"rgba(0, 0, 0, 0.7)\",\n    primary: colors.primary[500],\n    /** Tinted surfaces; see tokens.css for color-mix in runtime */\n    primarySubtle: \"#3d2a24\",\n    success: \"#1a2e1f\",\n    warning: \"#2e2618\",\n    error: \"#2e1212\",\n    info: \"#152238\",\n    nav: colors.neutral[700],\n    navHover: colors.neutral[500],\n    navActive: colors.primary[500],\n  },\n  foreground: {\n    default: colors.neutral[100],\n    muted: colors.neutral[400],\n    subtle: colors.neutral[500],\n    primary: colors.primary[200],\n    success: colors.green[200],\n    warning: colors.amber[200],\n    error: colors.red[200],\n    info: colors.blue[200],\n    onPrimary: \"#FFFFFF\",\n    nav: colors.neutral[300],\n    navHover: colors.neutral[100],\n    navActive: colors.white,\n  },\n  border: {\n    default: colors.neutral[500],\n    muted: colors.neutral[600],\n    strong: colors.neutral[400],\n    primary: colors.primary[500],\n    error: colors.semantic.error,\n    success: \"rgba(34, 197, 94, 0.5)\",\n    warning: \"rgba(245, 158, 11, 0.5)\",\n    info: \"rgba(59, 130, 246, 0.5)\",\n    errorSubtle: \"rgba(239, 68, 68, 0.5)\",\n  },\n} as const;\n\n// CSS variable references for use in Tailwind config or JS\nexport const cssVars = {\n  colors: {\n    primary: {\n      50: \"var(--color-primary-50)\",\n      100: \"var(--color-primary-100)\",\n      200: \"var(--color-primary-200)\",\n      500: \"var(--color-primary-500)\",\n      600: \"var(--color-primary-600)\",\n      700: \"var(--color-primary-700)\",\n    },\n    neutral: {\n      50: \"var(--color-neutral-50)\",\n      100: \"var(--color-neutral-100)\",\n      200: \"var(--color-neutral-200)\",\n      300: \"var(--color-neutral-300)\",\n      400: \"var(--color-neutral-400)\",\n      500: \"var(--color-neutral-500)\",\n      600: \"var(--color-neutral-600)\",\n      700: \"var(--color-neutral-700)\",\n      900: \"var(--color-neutral-900)\",\n    },\n    success: \"var(--color-success)\",\n    warning: \"var(--color-warning)\",\n    error: \"var(--color-error)\",\n    info: \"var(--color-info)\",\n  },\n  semantic: {\n    background: {\n      default: \"var(--background-default)\",\n      page: \"var(--background-page)\",\n      muted: \"var(--background-muted)\",\n      subtle: \"var(--background-subtle)\",\n      elevated: \"var(--background-elevated)\",\n      overlay: \"var(--background-overlay)\",\n      primary: \"var(--background-primary)\",\n      success: \"var(--background-success)\",\n      warning: \"var(--background-warning)\",\n      error: \"var(--background-error)\",\n      info: \"var(--background-info)\",\n      nav: \"var(--background-nav)\",\n      navHover: \"var(--background-nav-hover)\",\n      navActive: \"var(--background-nav-active)\",\n      primarySubtle: \"var(--background-primary-subtle)\",\n    },\n    foreground: {\n      default: \"var(--foreground-default)\",\n      muted: \"var(--foreground-muted)\",\n      subtle: \"var(--foreground-subtle)\",\n      primary: \"var(--foreground-primary)\",\n      success: \"var(--foreground-success)\",\n      warning: \"var(--foreground-warning)\",\n      error: \"var(--foreground-error)\",\n      info: \"var(--foreground-info)\",\n      onPrimary: \"var(--foreground-on-primary)\",\n      nav: \"var(--foreground-nav)\",\n      navHover: \"var(--foreground-nav-hover)\",\n      navActive: \"var(--foreground-nav-active)\",\n    },\n    border: {\n      default: \"var(--border-default)\",\n      muted: \"var(--border-muted)\",\n      strong: \"var(--border-strong)\",\n      primary: \"var(--border-primary)\",\n      error: \"var(--border-error)\",\n      success: \"var(--border-success)\",\n      warning: \"var(--border-warning)\",\n      info: \"var(--border-info)\",\n      errorSubtle: \"var(--border-error-subtle)\",\n    },\n  },\n  semanticDark: {\n    background: {\n      default: \"var(--background-default)\",\n      page: \"var(--background-page)\",\n      muted: \"var(--background-muted)\",\n      subtle: \"var(--background-subtle)\",\n      elevated: \"var(--background-elevated)\",\n      overlay: \"var(--background-overlay)\",\n      primary: \"var(--background-primary)\",\n      success: \"var(--background-success)\",\n      warning: \"var(--background-warning)\",\n      error: \"var(--background-error)\",\n      info: \"var(--background-info)\",\n      nav: \"var(--background-nav)\",\n      navHover: \"var(--background-nav-hover)\",\n      navActive: \"var(--background-nav-active)\",\n      primarySubtle: \"var(--background-primary-subtle)\",\n    },\n    foreground: {\n      default: \"var(--foreground-default)\",\n      muted: \"var(--foreground-muted)\",\n      subtle: \"var(--foreground-subtle)\",\n      primary: \"var(--foreground-primary)\",\n      success: \"var(--foreground-success)\",\n      warning: \"var(--foreground-warning)\",\n      error: \"var(--foreground-error)\",\n      info: \"var(--foreground-info)\",\n      onPrimary: \"var(--foreground-on-primary)\",\n      nav: \"var(--foreground-nav)\",\n      navHover: \"var(--foreground-nav-hover)\",\n      navActive: \"var(--foreground-nav-active)\",\n    },\n    border: {\n      default: \"var(--border-default)\",\n      muted: \"var(--border-muted)\",\n      strong: \"var(--border-strong)\",\n      primary: \"var(--border-primary)\",\n      error: \"var(--border-error)\",\n      success: \"var(--border-success)\",\n      warning: \"var(--border-warning)\",\n      info: \"var(--border-info)\",\n      errorSubtle: \"var(--border-error-subtle)\",\n    },\n  },\n} as const;\n"],"mappings":"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","names":[]}

package/dist/tokens.css

@@ -20,6 +20,7 @@
   --color-neutral-300: #D6D3D1;
   --color-neutral-400: #A8A29E;
   --color-neutral-500: #78716C;
+  --color-neutral-600: #57534E;
   --color-neutral-700: #44403C;
   --color-neutral-900: #1C1917;
   --color-green-50: #F0FDF4;
@@ -101,6 +102,7 @@
   --background-nav: var(--color-primary-100);
   --background-nav-hover: var(--color-primary-200);
   --background-nav-active: var(--color-primary-500);
+  --background-primary-subtle: var(--color-primary-100);
   --foreground-default: var(--color-neutral-900);
   --foreground-muted: var(--color-neutral-500);
   --foreground-subtle: var(--color-neutral-400);
@@ -118,8 +120,90 @@
   --border-strong: var(--color-neutral-300);
   --border-primary: var(--color-primary-500);
   --border-error: var(--color-error);
+  --border-success: var(--color-green-200);
+  --border-warning: var(--color-amber-200);
+  --border-info: var(--color-blue-200);
+  --border-error-subtle: var(--color-red-200);
   --transition-fast: 150ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 300ms ease;
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background-default: var(--color-neutral-900);
+    --background-page: #0f0e0d;
+    --background-muted: var(--color-neutral-700);
+    --background-subtle: var(--color-neutral-500);
+    --background-elevated: var(--color-neutral-700);
+    --background-overlay: rgba(0, 0, 0, 0.7);
+    --background-primary: var(--color-primary-500);
+    --background-nav: var(--color-neutral-700);
+    --background-nav-hover: var(--color-neutral-500);
+    --background-nav-active: var(--color-primary-500);
+    --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));
+    --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));
+    --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));
+    --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));
+    --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));
+    --foreground-default: var(--color-neutral-100);
+    --foreground-muted: var(--color-neutral-400);
+    --foreground-subtle: var(--color-neutral-500);
+    --foreground-primary: var(--color-primary-200);
+    --foreground-success: var(--color-green-200);
+    --foreground-warning: var(--color-amber-200);
+    --foreground-error: var(--color-red-200);
+    --foreground-info: var(--color-blue-200);
+    --foreground-on-primary: #FFFFFF;
+    --foreground-nav: var(--color-neutral-300);
+    --foreground-nav-hover: var(--color-neutral-100);
+    --foreground-nav-active: var(--color-white);
+    --border-default: var(--color-neutral-500);
+    --border-muted: var(--color-neutral-600);
+    --border-strong: var(--color-neutral-400);
+    --border-primary: var(--color-primary-500);
+    --border-error: var(--color-error);
+    --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);
+    --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);
+    --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);
+    --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);
+  }
+}
+.dark {
+  --background-default: var(--color-neutral-900);
+  --background-page: #0f0e0d;
+  --background-muted: var(--color-neutral-700);
+  --background-subtle: var(--color-neutral-500);
+  --background-elevated: var(--color-neutral-700);
+  --background-overlay: rgba(0, 0, 0, 0.7);
+  --background-primary: var(--color-primary-500);
+  --background-nav: var(--color-neutral-700);
+  --background-nav-hover: var(--color-neutral-500);
+  --background-nav-active: var(--color-primary-500);
+  --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));
+  --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));
+  --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));
+  --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));
+  --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));
+  --foreground-default: var(--color-neutral-100);
+  --foreground-muted: var(--color-neutral-400);
+  --foreground-subtle: var(--color-neutral-500);
+  --foreground-primary: var(--color-primary-200);
+  --foreground-success: var(--color-green-200);
+  --foreground-warning: var(--color-amber-200);
+  --foreground-error: var(--color-red-200);
+  --foreground-info: var(--color-blue-200);
+  --foreground-on-primary: #FFFFFF;
+  --foreground-nav: var(--color-neutral-300);
+  --foreground-nav-hover: var(--color-neutral-100);
+  --foreground-nav-active: var(--color-white);
+  --border-default: var(--color-neutral-500);
+  --border-muted: var(--color-neutral-600);
+  --border-strong: var(--color-neutral-400);
+  --border-primary: var(--color-primary-500);
+  --border-error: var(--color-error);
+  --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);
+  --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);
+  --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);
+  --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);
+}
 /*# sourceMappingURL=tokens.css.map */

package/dist/tokens.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* Fonts */\n@import \"@fontsource/manrope/400.css\";\n@import \"@fontsource/manrope/500.css\";\n@import \"@fontsource/manrope/600.css\";\n@import \"@fontsource/manrope/700.css\";\n@import \"@fontsource/manrope/800.css\";\n@import \"@fontsource/jetbrains-mono/400.css\";\n\n/* ==========================================================================\n   Design Tokens — CSS Variables\n   Source of truth for the design system.\n   ========================================================================== */\n\n:root {\n  /* -------------------------------------------------------------------------\n     Colors — Primary (Terracotta)\n     ------------------------------------------------------------------------- */\n  --color-white: #FFFFFF;\n  --color-primary-50: #FDF4F1;\n  --color-primary-100: #FADDD5;\n  --color-primary-200: #F4B8A6;\n  --color-primary-500: #E07A5F;\n  --color-primary-600: #C9664A;\n  --color-primary-700: #A8503A;\n\n  /* -------------------------------------------------------------------------\n     Colors — Neutrals (Warm Stone)\n     ------------------------------------------------------------------------- */\n  --color-neutral-50: #FAFAF9;\n  --color-neutral-100: #F5F5F4;\n  --color-neutral-200: #E7E5E4;\n  --color-neutral-300: #D6D3D1;\n  /* Neutral addition */\n  --color-neutral-400: #A8A29E;\n  --color-neutral-500: #78716C;\n  --color-neutral-700: #44403C;\n  --color-neutral-900: #1C1917;\n\n  /* Green */\n  --color-green-50: #F0FDF4;\n  --color-green-100: #DCFCE7;\n  --color-green-200: #BBF7D0;\n  --color-green-500: #22C55E;\n  --color-green-600: #16A34A;\n  --color-green-700: #15803D;\n\n  /* Amber */\n  --color-amber-50: #FFFBEB;\n  --color-amber-100: #FEF3C7;\n  --color-amber-200: #FDE68A;\n  --color-amber-500: #F59E0B;\n  --color-amber-600: #D97706;\n  --color-amber-700: #B45309;\n\n  /* Red */\n  --color-red-50: #FEF2F2;\n  --color-red-100: #FEE2E2;\n  --color-red-200: #FECACA;\n  --color-red-500: #EF4444;\n  --color-red-600: #DC2626;\n  --color-red-700: #B91C1C;\n\n  /* Blue */\n  --color-blue-50: #EFF6FF;\n  --color-blue-100: #DBEAFE;\n  --color-blue-200: #BFDBFE;\n  --color-blue-500: #3B82F6;\n  --color-blue-600: #2563EB;\n  --color-blue-700: #1D4ED8;\n\n  /* -------------------------------------------------------------------------\n     Colors — Semantic\n     ------------------------------------------------------------------------- */\n  --color-success: #22C55E;\n  --color-warning: #F59E0B;\n  --color-error: #EF4444;\n  --color-info: #3B82F6;\n\n  /* -------------------------------------------------------------------------\n     Typography — Font Families\n     ------------------------------------------------------------------------- */\n  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;\n  --font-mono: 'JetBrains Mono', ui-monospace, monospace;\n\n  /* -------------------------------------------------------------------------\n     Typography — Font Weights\n     ------------------------------------------------------------------------- */\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --font-weight-extrabold: 800;\n\n  /* -------------------------------------------------------------------------\n     Typography — Font Sizes\n     ------------------------------------------------------------------------- */\n  --font-size-caption: 0.75rem;    /* 12px */\n  --font-size-overline: 0.6875rem; /* 11px */\n  --font-size-body-sm: 0.8125rem;  /* 13px */\n  --font-size-body: 0.875rem;      /* 14px */\n  --font-size-h3: 1rem;            /* 16px */\n  --font-size-h2: 1.125rem;        /* 18px */\n  --font-size-h1: 1.5rem;          /* 24px */\n  --font-size-display: 2.25rem;    /* 36px */\n\n  /* -------------------------------------------------------------------------\n     Spacing\n     ------------------------------------------------------------------------- */\n  --spacing-1: 0.25rem;  /* 4px */\n  --spacing-2: 0.5rem;   /* 8px */\n  --spacing-3: 0.75rem;  /* 12px */\n  --spacing-4: 1rem;     /* 16px */\n  --spacing-6: 1.5rem;   /* 24px */\n  --spacing-8: 2rem;     /* 32px */\n  --spacing-12: 3rem;    /* 48px */\n\n  /* -------------------------------------------------------------------------\n     Border Radius\n     ------------------------------------------------------------------------- */\n  --radius-sm: 0.25rem;  /* 4px */\n  --radius-md: 0.375rem; /* 6px */\n  --radius-lg: 0.5rem;   /* 8px */\n  --radius-full: 9999px;\n\n  /* -------------------------------------------------------------------------\n     Shadows\n     ------------------------------------------------------------------------- */\n  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);\n  --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);\n  --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);\n  --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);\n\n  /* -------------------------------------------------------------------------\n     Semantic — Backgrounds\n     ------------------------------------------------------------------------- */\n  --background-default: var(--color-white);\n  --background-page: var(--color-neutral-50);\n  --background-muted: var(--color-neutral-100);\n  --background-subtle: var(--color-neutral-200);\n  --background-elevated: var(--color-white);\n  --background-overlay: rgba(28, 25, 23, 0.5);\n  --background-primary: var(--color-primary-500);\n  --background-success: var(--color-green-50);\n  --background-warning: var(--color-amber-50);\n  --background-error: var(--color-red-50);\n  --background-info: var(--color-blue-50);\n  --background-nav: var(--color-primary-100);\n  --background-nav-hover: var(--color-primary-200);\n  --background-nav-active: var(--color-primary-500);\n\n  /* -------------------------------------------------------------------------\n     Semantic — Foregrounds (text/icons)\n     ------------------------------------------------------------------------- */\n  --foreground-default: var(--color-neutral-900);\n  --foreground-muted: var(--color-neutral-500);\n  --foreground-subtle: var(--color-neutral-400);\n  --foreground-primary: var(--color-primary-700);\n  --foreground-success: var(--color-green-700);\n  --foreground-warning: var(--color-amber-700);\n  --foreground-error: var(--color-red-700);\n  --foreground-info: var(--color-blue-700);\n  --foreground-on-primary: #FFFFFF;\n  --foreground-nav: var(--color-neutral-700);\n  --foreground-nav-hover: var(--color-neutral-900);\n  --foreground-nav-active: var(--color-white);\n\n  /* -------------------------------------------------------------------------\n     Semantic — Borders\n     ------------------------------------------------------------------------- */\n  --border-default: var(--color-neutral-200);\n  --border-muted: var(--color-neutral-100);\n  --border-strong: var(--color-neutral-300);\n  --border-primary: var(--color-primary-500);\n  --border-error: var(--color-error);\n\n  /* -------------------------------------------------------------------------\n     Transitions\n     ------------------------------------------------------------------------- */\n  --transition-fast: 150ms ease;\n  --transition-base: 200ms ease;\n  --transition-slow: 300ms ease;\n}"],"mappings":";;;;;;;;AAaA;AAIE,iBAAe;AACf,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAKrB,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAErB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAGrB,oBAAkB;AAClB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AAGnB,oBAAkB;AAClB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AAGnB,kBAAgB;AAChB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AAGjB,mBAAiB;AACjB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAKlB,mBAAiB;AACjB,mBAAiB;AACjB,iBAAe;AACf,gBAAc;AAKd;AAAA,IAAa,SAAS;AAAA,IAAE,SAAS;AAAA,IAAE,aAAa;AAAA,IAAE;AAClD;AAAA,IAAa,gBAAgB;AAAA,IAAE,YAAY;AAAA,IAAE;AAK7C,yBAAuB;AACvB,wBAAsB;AACtB,0BAAwB;AACxB,sBAAoB;AACpB,2BAAyB;AAKzB,uBAAqB;AACrB,wBAAsB;AACtB,uBAAqB;AACrB,oBAAkB;AAClB,kBAAgB;AAChB,kBAAgB;AAChB,kBAAgB;AAChB,uBAAqB;AAKrB,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AAKd,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAKf,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,KAAK,KAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC1C,kBAAgB,EAAE,EAAE,EAAE,IAAI,KAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;AAK7C,wBAAsB,IAAI;AAC1B,qBAAmB,IAAI;AACvB,sBAAoB,IAAI;AACxB,uBAAqB,IAAI;AACzB,yBAAuB,IAAI;AAC3B,wBAAsB,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACvC,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,qBAAmB,IAAI;AACvB,oBAAkB,IAAI;AACtB,0BAAwB,IAAI;AAC5B,2BAAyB,IAAI;AAK7B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,uBAAqB,IAAI;AACzB,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,qBAAmB,IAAI;AACvB,2BAAyB;AACzB,oBAAkB,IAAI;AACtB,0BAAwB,IAAI;AAC5B,2BAAyB,IAAI;AAK7B,oBAAkB,IAAI;AACtB,kBAAgB,IAAI;AACpB,mBAAiB,IAAI;AACrB,oBAAkB,IAAI;AACtB,kBAAgB,IAAI;AAKpB,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AAC3B;","names":[]}
+{"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* Fonts */\n@import \"@fontsource/manrope/400.css\";\n@import \"@fontsource/manrope/500.css\";\n@import \"@fontsource/manrope/600.css\";\n@import \"@fontsource/manrope/700.css\";\n@import \"@fontsource/manrope/800.css\";\n@import \"@fontsource/jetbrains-mono/400.css\";\n\n/* ==========================================================================\n   Design Tokens — CSS Variables\n   Source of truth for the design system.\n   ========================================================================== */\n\n:root {\n  /* -------------------------------------------------------------------------\n     Colors — Primary (Terracotta)\n     ------------------------------------------------------------------------- */\n  --color-white: #FFFFFF;\n  --color-primary-50: #FDF4F1;\n  --color-primary-100: #FADDD5;\n  --color-primary-200: #F4B8A6;\n  --color-primary-500: #E07A5F;\n  --color-primary-600: #C9664A;\n  --color-primary-700: #A8503A;\n\n  /* -------------------------------------------------------------------------\n     Colors — Neutrals (Warm Stone)\n     ------------------------------------------------------------------------- */\n  --color-neutral-50: #FAFAF9;\n  --color-neutral-100: #F5F5F4;\n  --color-neutral-200: #E7E5E4;\n  --color-neutral-300: #D6D3D1;\n  /* Neutral addition */\n  --color-neutral-400: #A8A29E;\n  --color-neutral-500: #78716C;\n  --color-neutral-600: #57534E;\n  --color-neutral-700: #44403C;\n  --color-neutral-900: #1C1917;\n\n  /* Green */\n  --color-green-50: #F0FDF4;\n  --color-green-100: #DCFCE7;\n  --color-green-200: #BBF7D0;\n  --color-green-500: #22C55E;\n  --color-green-600: #16A34A;\n  --color-green-700: #15803D;\n\n  /* Amber */\n  --color-amber-50: #FFFBEB;\n  --color-amber-100: #FEF3C7;\n  --color-amber-200: #FDE68A;\n  --color-amber-500: #F59E0B;\n  --color-amber-600: #D97706;\n  --color-amber-700: #B45309;\n\n  /* Red */\n  --color-red-50: #FEF2F2;\n  --color-red-100: #FEE2E2;\n  --color-red-200: #FECACA;\n  --color-red-500: #EF4444;\n  --color-red-600: #DC2626;\n  --color-red-700: #B91C1C;\n\n  /* Blue */\n  --color-blue-50: #EFF6FF;\n  --color-blue-100: #DBEAFE;\n  --color-blue-200: #BFDBFE;\n  --color-blue-500: #3B82F6;\n  --color-blue-600: #2563EB;\n  --color-blue-700: #1D4ED8;\n\n  /* -------------------------------------------------------------------------\n     Colors — Semantic\n     ------------------------------------------------------------------------- */\n  --color-success: #22C55E;\n  --color-warning: #F59E0B;\n  --color-error: #EF4444;\n  --color-info: #3B82F6;\n\n  /* -------------------------------------------------------------------------\n     Typography — Font Families\n     ------------------------------------------------------------------------- */\n  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;\n  --font-mono: 'JetBrains Mono', ui-monospace, monospace;\n\n  /* -------------------------------------------------------------------------\n     Typography — Font Weights\n     ------------------------------------------------------------------------- */\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --font-weight-extrabold: 800;\n\n  /* -------------------------------------------------------------------------\n     Typography — Font Sizes\n     ------------------------------------------------------------------------- */\n  --font-size-caption: 0.75rem;    /* 12px */\n  --font-size-overline: 0.6875rem; /* 11px */\n  --font-size-body-sm: 0.8125rem;  /* 13px */\n  --font-size-body: 0.875rem;      /* 14px */\n  --font-size-h3: 1rem;            /* 16px */\n  --font-size-h2: 1.125rem;        /* 18px */\n  --font-size-h1: 1.5rem;          /* 24px */\n  --font-size-display: 2.25rem;    /* 36px */\n\n  /* -------------------------------------------------------------------------\n     Spacing\n     ------------------------------------------------------------------------- */\n  --spacing-1: 0.25rem;  /* 4px */\n  --spacing-2: 0.5rem;   /* 8px */\n  --spacing-3: 0.75rem;  /* 12px */\n  --spacing-4: 1rem;     /* 16px */\n  --spacing-6: 1.5rem;   /* 24px */\n  --spacing-8: 2rem;     /* 32px */\n  --spacing-12: 3rem;    /* 48px */\n\n  /* -------------------------------------------------------------------------\n     Border Radius\n     ------------------------------------------------------------------------- */\n  --radius-sm: 0.25rem;  /* 4px */\n  --radius-md: 0.375rem; /* 6px */\n  --radius-lg: 0.5rem;   /* 8px */\n  --radius-full: 9999px;\n\n  /* -------------------------------------------------------------------------\n     Shadows\n     ------------------------------------------------------------------------- */\n  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);\n  --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);\n  --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);\n  --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);\n\n  /* -------------------------------------------------------------------------\n     Semantic — Backgrounds\n     ------------------------------------------------------------------------- */\n  --background-default: var(--color-white);\n  --background-page: var(--color-neutral-50);\n  --background-muted: var(--color-neutral-100);\n  --background-subtle: var(--color-neutral-200);\n  --background-elevated: var(--color-white);\n  --background-overlay: rgba(28, 25, 23, 0.5);\n  --background-primary: var(--color-primary-500);\n  --background-success: var(--color-green-50);\n  --background-warning: var(--color-amber-50);\n  --background-error: var(--color-red-50);\n  --background-info: var(--color-blue-50);\n  --background-nav: var(--color-primary-100);\n  --background-nav-hover: var(--color-primary-200);\n  --background-nav-active: var(--color-primary-500);\n  --background-primary-subtle: var(--color-primary-100);\n\n  /* -------------------------------------------------------------------------\n     Semantic — Foregrounds (text/icons)\n     ------------------------------------------------------------------------- */\n  --foreground-default: var(--color-neutral-900);\n  --foreground-muted: var(--color-neutral-500);\n  --foreground-subtle: var(--color-neutral-400);\n  --foreground-primary: var(--color-primary-700);\n  --foreground-success: var(--color-green-700);\n  --foreground-warning: var(--color-amber-700);\n  --foreground-error: var(--color-red-700);\n  --foreground-info: var(--color-blue-700);\n  --foreground-on-primary: #FFFFFF;\n  --foreground-nav: var(--color-neutral-700);\n  --foreground-nav-hover: var(--color-neutral-900);\n  --foreground-nav-active: var(--color-white);\n\n  /* -------------------------------------------------------------------------\n     Semantic — Borders\n     ------------------------------------------------------------------------- */\n  --border-default: var(--color-neutral-200);\n  --border-muted: var(--color-neutral-100);\n  --border-strong: var(--color-neutral-300);\n  --border-primary: var(--color-primary-500);\n  --border-error: var(--color-error);\n  --border-success: var(--color-green-200);\n  --border-warning: var(--color-amber-200);\n  --border-info: var(--color-blue-200);\n  --border-error-subtle: var(--color-red-200);\n\n  /* -------------------------------------------------------------------------\n     Transitions\n     ------------------------------------------------------------------------- */\n  --transition-fast: 150ms ease;\n  --transition-base: 200ms ease;\n  --transition-slow: 300ms ease;\n}\n\n/* -------------------------------------------------------------------------\n   Dark Mode\n   Activation: .dark class OR prefers-color-scheme (class takes priority)\n   ------------------------------------------------------------------------- */\n\n@media (prefers-color-scheme: dark) {\n  :root:not(.light) {\n    --background-default: var(--color-neutral-900);\n    --background-page: #0f0e0d;\n    --background-muted: var(--color-neutral-700);\n    --background-subtle: var(--color-neutral-500);\n    --background-elevated: var(--color-neutral-700);\n    --background-overlay: rgba(0, 0, 0, 0.7);\n    --background-primary: var(--color-primary-500);\n    --background-nav: var(--color-neutral-700);\n    --background-nav-hover: var(--color-neutral-500);\n    --background-nav-active: var(--color-primary-500);\n    --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));\n    --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));\n    --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));\n    --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));\n    --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));\n\n    --foreground-default: var(--color-neutral-100);\n    --foreground-muted: var(--color-neutral-400);\n    --foreground-subtle: var(--color-neutral-500);\n    --foreground-primary: var(--color-primary-200);\n    --foreground-success: var(--color-green-200);\n    --foreground-warning: var(--color-amber-200);\n    --foreground-error: var(--color-red-200);\n    --foreground-info: var(--color-blue-200);\n    --foreground-on-primary: #FFFFFF;\n    --foreground-nav: var(--color-neutral-300);\n    --foreground-nav-hover: var(--color-neutral-100);\n    --foreground-nav-active: var(--color-white);\n\n    --border-default: var(--color-neutral-500);\n    --border-muted: var(--color-neutral-600);\n    --border-strong: var(--color-neutral-400);\n    --border-primary: var(--color-primary-500);\n    --border-error: var(--color-error);\n    --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);\n    --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);\n    --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);\n    --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);\n  }\n}\n\n.dark {\n  --background-default: var(--color-neutral-900);\n  --background-page: #0f0e0d;\n  --background-muted: var(--color-neutral-700);\n  --background-subtle: var(--color-neutral-500);\n  --background-elevated: var(--color-neutral-700);\n  --background-overlay: rgba(0, 0, 0, 0.7);\n  --background-primary: var(--color-primary-500);\n  --background-nav: var(--color-neutral-700);\n  --background-nav-hover: var(--color-neutral-500);\n  --background-nav-active: var(--color-primary-500);\n  --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));\n  --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));\n  --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));\n  --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));\n  --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));\n\n  --foreground-default: var(--color-neutral-100);\n  --foreground-muted: var(--color-neutral-400);\n  --foreground-subtle: var(--color-neutral-500);\n  --foreground-primary: var(--color-primary-200);\n  --foreground-success: var(--color-green-200);\n  --foreground-warning: var(--color-amber-200);\n  --foreground-error: var(--color-red-200);\n  --foreground-info: var(--color-blue-200);\n  --foreground-on-primary: #FFFFFF;\n  --foreground-nav: var(--color-neutral-300);\n  --foreground-nav-hover: var(--color-neutral-100);\n  --foreground-nav-active: var(--color-white);\n\n  --border-default: var(--color-neutral-500);\n  --border-muted: var(--color-neutral-600);\n  --border-strong: var(--color-neutral-400);\n  --border-primary: var(--color-primary-500);\n  --border-error: var(--color-error);\n  --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);\n  --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);\n  --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);\n  --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);\n}"],"mappings":"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","names":[]}

package/dist/tokens.json

@@ -0,0 +1,314 @@
+{
+  "colors": {
+    "white": "#FFFFFF",
+    "primary": {
+      "50": "#FDF4F1",
+      "100": "#FADDD5",
+      "200": "#F4B8A6",
+      "500": "#E07A5F",
+      "600": "#C9664A",
+      "700": "#A8503A"
+    },
+    "neutral": {
+      "50": "#FAFAF9",
+      "100": "#F5F5F4",
+      "200": "#E7E5E4",
+      "300": "#D6D3D1",
+      "400": "#A8A29E",
+      "500": "#78716C",
+      "600": "#57534E",
+      "700": "#44403C",
+      "900": "#1C1917"
+    },
+    "semantic": {
+      "success": "#22C55E",
+      "warning": "#F59E0B",
+      "error": "#EF4444",
+      "info": "#3B82F6"
+    },
+    "green": {
+      "50": "#F0FDF4",
+      "100": "#DCFCE7",
+      "200": "#BBF7D0",
+      "500": "#22C55E",
+      "600": "#16A34A",
+      "700": "#15803D"
+    },
+    "amber": {
+      "50": "#FFFBEB",
+      "100": "#FEF3C7",
+      "200": "#FDE68A",
+      "500": "#F59E0B",
+      "600": "#D97706",
+      "700": "#B45309"
+    },
+    "red": {
+      "50": "#FEF2F2",
+      "100": "#FEE2E2",
+      "200": "#FECACA",
+      "500": "#EF4444",
+      "600": "#DC2626",
+      "700": "#B91C1C"
+    },
+    "blue": {
+      "50": "#EFF6FF",
+      "100": "#DBEAFE",
+      "200": "#BFDBFE",
+      "500": "#3B82F6",
+      "600": "#2563EB",
+      "700": "#1D4ED8"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": "'Manrope', system-ui, -apple-system, sans-serif",
+      "mono": "'JetBrains Mono', ui-monospace, monospace"
+    },
+    "fontWeight": {
+      "regular": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700,
+      "extrabold": 800
+    },
+    "fontSize": {
+      "caption": "0.75rem",
+      "overline": "0.6875rem",
+      "bodySm": "0.8125rem",
+      "body": "0.875rem",
+      "h3": "1rem",
+      "h2": "1.125rem",
+      "h1": "1.5rem",
+      "display": "2.25rem"
+    }
+  },
+  "spacing": {
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "6": "1.5rem",
+    "8": "2rem",
+    "12": "3rem"
+  },
+  "radius": {
+    "sm": "0.25rem",
+    "md": "0.375rem",
+    "lg": "0.5rem",
+    "full": "9999px"
+  },
+  "shadows": {
+    "sm": "0 1px 2px rgba(28, 25, 23, 0.05)",
+    "md": "0 4px 6px rgba(28, 25, 23, 0.07)",
+    "lg": "0 10px 15px rgba(28, 25, 23, 0.1)",
+    "focus": "0 0 0 3px rgba(224, 122, 95, 0.3)"
+  },
+  "transitions": {
+    "fast": "150ms ease",
+    "base": "200ms ease",
+    "slow": "300ms ease"
+  },
+  "semantic": {
+    "background": {
+      "default": "#FFFFFF",
+      "page": "#FAFAF9",
+      "muted": "#F5F5F4",
+      "subtle": "#E7E5E4",
+      "elevated": "#FFFFFF",
+      "overlay": "rgba(28, 25, 23, 0.5)",
+      "primary": "#E07A5F",
+      "success": "#F0FDF4",
+      "warning": "#FFFBEB",
+      "error": "#FEF2F2",
+      "info": "#EFF6FF",
+      "nav": "#FADDD5",
+      "navHover": "#F4B8A6",
+      "navActive": "#E07A5F",
+      "primarySubtle": "#FADDD5"
+    },
+    "foreground": {
+      "default": "#1C1917",
+      "muted": "#78716C",
+      "subtle": "#A8A29E",
+      "primary": "#A8503A",
+      "success": "#15803D",
+      "warning": "#B45309",
+      "error": "#B91C1C",
+      "info": "#1D4ED8",
+      "onPrimary": "#FFFFFF",
+      "nav": "#44403C",
+      "navHover": "#1C1917",
+      "navActive": "#FFFFFF"
+    },
+    "border": {
+      "default": "#E7E5E4",
+      "muted": "#F5F5F4",
+      "strong": "#D6D3D1",
+      "primary": "#E07A5F",
+      "error": "#EF4444",
+      "success": "#BBF7D0",
+      "warning": "#FDE68A",
+      "info": "#BFDBFE",
+      "errorSubtle": "#FECACA"
+    }
+  },
+  "semanticDark": {
+    "background": {
+      "default": "#1C1917",
+      "page": "#0f0e0d",
+      "muted": "#44403C",
+      "subtle": "#78716C",
+      "elevated": "#44403C",
+      "overlay": "rgba(0, 0, 0, 0.7)",
+      "primary": "#E07A5F",
+      "primarySubtle": "#3d2a24",
+      "success": "#1a2e1f",
+      "warning": "#2e2618",
+      "error": "#2e1212",
+      "info": "#152238",
+      "nav": "#44403C",
+      "navHover": "#78716C",
+      "navActive": "#E07A5F"
+    },
+    "foreground": {
+      "default": "#F5F5F4",
+      "muted": "#A8A29E",
+      "subtle": "#78716C",
+      "primary": "#F4B8A6",
+      "success": "#BBF7D0",
+      "warning": "#FDE68A",
+      "error": "#FECACA",
+      "info": "#BFDBFE",
+      "onPrimary": "#FFFFFF",
+      "nav": "#D6D3D1",
+      "navHover": "#F5F5F4",
+      "navActive": "#FFFFFF"
+    },
+    "border": {
+      "default": "#78716C",
+      "muted": "#57534E",
+      "strong": "#A8A29E",
+      "primary": "#E07A5F",
+      "error": "#EF4444",
+      "success": "rgba(34, 197, 94, 0.5)",
+      "warning": "rgba(245, 158, 11, 0.5)",
+      "info": "rgba(59, 130, 246, 0.5)",
+      "errorSubtle": "rgba(239, 68, 68, 0.5)"
+    }
+  },
+  "cssVars": {
+    "colors": {
+      "primary": {
+        "50": "var(--color-primary-50)",
+        "100": "var(--color-primary-100)",
+        "200": "var(--color-primary-200)",
+        "500": "var(--color-primary-500)",
+        "600": "var(--color-primary-600)",
+        "700": "var(--color-primary-700)"
+      },
+      "neutral": {
+        "50": "var(--color-neutral-50)",
+        "100": "var(--color-neutral-100)",
+        "200": "var(--color-neutral-200)",
+        "300": "var(--color-neutral-300)",
+        "400": "var(--color-neutral-400)",
+        "500": "var(--color-neutral-500)",
+        "600": "var(--color-neutral-600)",
+        "700": "var(--color-neutral-700)",
+        "900": "var(--color-neutral-900)"
+      },
+      "success": "var(--color-success)",
+      "warning": "var(--color-warning)",
+      "error": "var(--color-error)",
+      "info": "var(--color-info)"
+    },
+    "semantic": {
+      "background": {
+        "default": "var(--background-default)",
+        "page": "var(--background-page)",
+        "muted": "var(--background-muted)",
+        "subtle": "var(--background-subtle)",
+        "elevated": "var(--background-elevated)",
+        "overlay": "var(--background-overlay)",
+        "primary": "var(--background-primary)",
+        "success": "var(--background-success)",
+        "warning": "var(--background-warning)",
+        "error": "var(--background-error)",
+        "info": "var(--background-info)",
+        "nav": "var(--background-nav)",
+        "navHover": "var(--background-nav-hover)",
+        "navActive": "var(--background-nav-active)",
+        "primarySubtle": "var(--background-primary-subtle)"
+      },
+      "foreground": {
+        "default": "var(--foreground-default)",
+        "muted": "var(--foreground-muted)",
+        "subtle": "var(--foreground-subtle)",
+        "primary": "var(--foreground-primary)",
+        "success": "var(--foreground-success)",
+        "warning": "var(--foreground-warning)",
+        "error": "var(--foreground-error)",
+        "info": "var(--foreground-info)",
+        "onPrimary": "var(--foreground-on-primary)",
+        "nav": "var(--foreground-nav)",
+        "navHover": "var(--foreground-nav-hover)",
+        "navActive": "var(--foreground-nav-active)"
+      },
+      "border": {
+        "default": "var(--border-default)",
+        "muted": "var(--border-muted)",
+        "strong": "var(--border-strong)",
+        "primary": "var(--border-primary)",
+        "error": "var(--border-error)",
+        "success": "var(--border-success)",
+        "warning": "var(--border-warning)",
+        "info": "var(--border-info)",
+        "errorSubtle": "var(--border-error-subtle)"
+      }
+    },
+    "semanticDark": {
+      "background": {
+        "default": "var(--background-default)",
+        "page": "var(--background-page)",
+        "muted": "var(--background-muted)",
+        "subtle": "var(--background-subtle)",
+        "elevated": "var(--background-elevated)",
+        "overlay": "var(--background-overlay)",
+        "primary": "var(--background-primary)",
+        "success": "var(--background-success)",
+        "warning": "var(--background-warning)",
+        "error": "var(--background-error)",
+        "info": "var(--background-info)",
+        "nav": "var(--background-nav)",
+        "navHover": "var(--background-nav-hover)",
+        "navActive": "var(--background-nav-active)",
+        "primarySubtle": "var(--background-primary-subtle)"
+      },
+      "foreground": {
+        "default": "var(--foreground-default)",
+        "muted": "var(--foreground-muted)",
+        "subtle": "var(--foreground-subtle)",
+        "primary": "var(--foreground-primary)",
+        "success": "var(--foreground-success)",
+        "warning": "var(--foreground-warning)",
+        "error": "var(--foreground-error)",
+        "info": "var(--foreground-info)",
+        "onPrimary": "var(--foreground-on-primary)",
+        "nav": "var(--foreground-nav)",
+        "navHover": "var(--foreground-nav-hover)",
+        "navActive": "var(--foreground-nav-active)"
+      },
+      "border": {
+        "default": "var(--border-default)",
+        "muted": "var(--border-muted)",
+        "strong": "var(--border-strong)",
+        "primary": "var(--border-primary)",
+        "error": "var(--border-error)",
+        "success": "var(--border-success)",
+        "warning": "var(--border-warning)",
+        "info": "var(--border-info)",
+        "errorSubtle": "var(--border-error-subtle)"
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanaka/tokens",
-  "version": "0.4.0",
+  "version": "0.6.2",
   "description": "Design tokens for the design system",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,11 +12,14 @@
       "import": "./dist/index.js"
     },
     "./css": "./dist/tokens.css",
+    "./tokens.css": "./dist/tokens.css",
     "./tailwind": "./dist/tailwind.preset.cjs",
-    "./tailwind-v4": "./dist/tailwind-v4.css"
+    "./tailwind-v4": "./dist/tailwind-v4.css",
+    "./tokens.json": "./dist/tokens.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "DESIGN.md"
   ],
   "sideEffects": [
     "*.css"
@@ -36,6 +39,9 @@
     "design-system"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
     "tsup": "^8.4.0",
     "typescript": "^5.7.0"
   },
@@ -45,6 +51,8 @@
   },
   "scripts": {
     "build": "tsup",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint .",
+    "lint:fix": "ESLINT_USE_FLAT_CONFIG=false eslint . --fix"
   }
 }