@akanaka-design/tokens 0.6.2

package/DESIGN.md

@@ -0,0 +1,31 @@
+# @akanaka-design/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-design/tokens`** — JavaScript/TypeScript API (`import { colors, semantic, … } from '@akanaka-design/tokens'`).
+- **`@akanaka-design/tokens/css`** or **`@akanaka-design/tokens/tokens.css`** — bundled CSS (includes font imports).
+- **`@akanaka-design/tokens/tokens.json`** — resolved token tree as JSON (build output).
+- **`@akanaka-design/tokens/tailwind`** — Tailwind v3 preset (CommonJS).
+- **`@akanaka-design/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/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,326 @@
+// src/tokens.ts
+var 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"
+  }
+};
+var 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"
+  }
+};
+var spacing = {
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  6: "1.5rem",
+  8: "2rem",
+  12: "3rem"
+};
+var radius = {
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  full: "9999px"
+};
+var 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)"
+};
+var transitions = {
+  fast: "150ms ease",
+  base: "200ms ease",
+  slow: "300ms ease"
+};
+var 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"
+  }
+};
+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 = {
+  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)"
+    }
+  }
+};
+export {
+  colors,
+  cssVars,
+  radius,
+  semantic,
+  semanticDark,
+  shadows,
+  spacing,
+  transitions,
+  typography
+};
+//# sourceMappingURL=index.js.map