@synapsly/tokens 0.1.0

package/dist/index.js

@@ -0,0 +1,1344 @@
+import { createTheme as createTheme$1, createGlobalTheme } from '@vanilla-extract/css';
+
+// src/primitive.css.ts
+var primitiveVars = { color: { white: "var(--color-white__1r0ife40)", black: "var(--color-black__1r0ife41)", transparent: "var(--color-transparent__1r0ife42)", neutral: { "25": "var(--color-neutral-25__1r0ife43)", "50": "var(--color-neutral-50__1r0ife44)", "100": "var(--color-neutral-100__1r0ife45)", "200": "var(--color-neutral-200__1r0ife46)", "300": "var(--color-neutral-300__1r0ife47)", "400": "var(--color-neutral-400__1r0ife48)", "500": "var(--color-neutral-500__1r0ife49)", "600": "var(--color-neutral-600__1r0ife4a)", "700": "var(--color-neutral-700__1r0ife4b)", "800": "var(--color-neutral-800__1r0ife4c)", "900": "var(--color-neutral-900__1r0ife4d)", "950": "var(--color-neutral-950__1r0ife4e)", "975": "var(--color-neutral-975__1r0ife4f)" }, brand: { "25": "var(--color-brand-25__1r0ife4g)", "50": "var(--color-brand-50__1r0ife4h)", "100": "var(--color-brand-100__1r0ife4i)", "200": "var(--color-brand-200__1r0ife4j)", "300": "var(--color-brand-300__1r0ife4k)", "400": "var(--color-brand-400__1r0ife4l)", "500": "var(--color-brand-500__1r0ife4m)", "600": "var(--color-brand-600__1r0ife4n)", "700": "var(--color-brand-700__1r0ife4o)", "800": "var(--color-brand-800__1r0ife4p)", "900": "var(--color-brand-900__1r0ife4q)", "950": "var(--color-brand-950__1r0ife4r)", "975": "var(--color-brand-975__1r0ife4s)" }, blue: { "50": "var(--color-blue-50__1r0ife4t)", "100": "var(--color-blue-100__1r0ife4u)", "200": "var(--color-blue-200__1r0ife4v)", "300": "var(--color-blue-300__1r0ife4w)", "400": "var(--color-blue-400__1r0ife4x)", "500": "var(--color-blue-500__1r0ife4y)", "600": "var(--color-blue-600__1r0ife4z)", "700": "var(--color-blue-700__1r0ife410)", "800": "var(--color-blue-800__1r0ife411)", "900": "var(--color-blue-900__1r0ife412)", "950": "var(--color-blue-950__1r0ife413)" }, green: { "50": "var(--color-green-50__1r0ife414)", "100": "var(--color-green-100__1r0ife415)", "200": "var(--color-green-200__1r0ife416)", "300": "var(--color-green-300__1r0ife417)", "400": "var(--color-green-400__1r0ife418)", "500": "var(--color-green-500__1r0ife419)", "600": "var(--color-green-600__1r0ife41a)", "700": "var(--color-green-700__1r0ife41b)", "800": "var(--color-green-800__1r0ife41c)", "900": "var(--color-green-900__1r0ife41d)", "950": "var(--color-green-950__1r0ife41e)" }, yellow: { "50": "var(--color-yellow-50__1r0ife41f)", "100": "var(--color-yellow-100__1r0ife41g)", "200": "var(--color-yellow-200__1r0ife41h)", "300": "var(--color-yellow-300__1r0ife41i)", "400": "var(--color-yellow-400__1r0ife41j)", "500": "var(--color-yellow-500__1r0ife41k)", "600": "var(--color-yellow-600__1r0ife41l)", "700": "var(--color-yellow-700__1r0ife41m)", "800": "var(--color-yellow-800__1r0ife41n)", "900": "var(--color-yellow-900__1r0ife41o)", "950": "var(--color-yellow-950__1r0ife41p)" }, orange: { "50": "var(--color-orange-50__1r0ife41q)", "100": "var(--color-orange-100__1r0ife41r)", "200": "var(--color-orange-200__1r0ife41s)", "300": "var(--color-orange-300__1r0ife41t)", "400": "var(--color-orange-400__1r0ife41u)", "500": "var(--color-orange-500__1r0ife41v)", "600": "var(--color-orange-600__1r0ife41w)", "700": "var(--color-orange-700__1r0ife41x)", "800": "var(--color-orange-800__1r0ife41y)", "900": "var(--color-orange-900__1r0ife41z)", "950": "var(--color-orange-950__1r0ife420)" }, red: { "50": "var(--color-red-50__1r0ife421)", "100": "var(--color-red-100__1r0ife422)", "200": "var(--color-red-200__1r0ife423)", "300": "var(--color-red-300__1r0ife424)", "400": "var(--color-red-400__1r0ife425)", "500": "var(--color-red-500__1r0ife426)", "600": "var(--color-red-600__1r0ife427)", "700": "var(--color-red-700__1r0ife428)", "800": "var(--color-red-800__1r0ife429)", "900": "var(--color-red-900__1r0ife42a)", "950": "var(--color-red-950__1r0ife42b)" }, purple: { "50": "var(--color-purple-50__1r0ife42c)", "100": "var(--color-purple-100__1r0ife42d)", "200": "var(--color-purple-200__1r0ife42e)", "300": "var(--color-purple-300__1r0ife42f)", "400": "var(--color-purple-400__1r0ife42g)", "500": "var(--color-purple-500__1r0ife42h)", "600": "var(--color-purple-600__1r0ife42i)", "700": "var(--color-purple-700__1r0ife42j)", "800": "var(--color-purple-800__1r0ife42k)", "900": "var(--color-purple-900__1r0ife42l)", "950": "var(--color-purple-950__1r0ife42m)" }, cyan: { "50": "var(--color-cyan-50__1r0ife42n)", "100": "var(--color-cyan-100__1r0ife42o)", "200": "var(--color-cyan-200__1r0ife42p)", "300": "var(--color-cyan-300__1r0ife42q)", "400": "var(--color-cyan-400__1r0ife42r)", "500": "var(--color-cyan-500__1r0ife42s)", "600": "var(--color-cyan-600__1r0ife42t)", "700": "var(--color-cyan-700__1r0ife42u)", "800": "var(--color-cyan-800__1r0ife42v)", "900": "var(--color-cyan-900__1r0ife42w)", "950": "var(--color-cyan-950__1r0ife42x)" }, pink: { "50": "var(--color-pink-50__1r0ife42y)", "100": "var(--color-pink-100__1r0ife42z)", "200": "var(--color-pink-200__1r0ife430)", "300": "var(--color-pink-300__1r0ife431)", "400": "var(--color-pink-400__1r0ife432)", "500": "var(--color-pink-500__1r0ife433)", "600": "var(--color-pink-600__1r0ife434)", "700": "var(--color-pink-700__1r0ife435)", "800": "var(--color-pink-800__1r0ife436)", "900": "var(--color-pink-900__1r0ife437)", "950": "var(--color-pink-950__1r0ife438)" } }, fontFamily: { sans: "var(--fontFamily-sans__1r0ife439)", serif: "var(--fontFamily-serif__1r0ife43a)", mono: "var(--fontFamily-mono__1r0ife43b)" }, fontSize: { "75": "var(--fontSize-75__1r0ife43c)", "87": "var(--fontSize-87__1r0ife43d)", "100": "var(--fontSize-100__1r0ife43e)", "112": "var(--fontSize-112__1r0ife43f)", "125": "var(--fontSize-125__1r0ife43g)", "150": "var(--fontSize-150__1r0ife43h)", "187": "var(--fontSize-187__1r0ife43i)", "225": "var(--fontSize-225__1r0ife43j)", "300": "var(--fontSize-300__1r0ife43k)" }, fontWeight: { "400": "var(--fontWeight-400__1r0ife43l)", "500": "var(--fontWeight-500__1r0ife43m)", "600": "var(--fontWeight-600__1r0ife43n)", "700": "var(--fontWeight-700__1r0ife43o)" }, lineHeight: { "100": "var(--lineHeight-100__1r0ife43p)", "120": "var(--lineHeight-120__1r0ife43q)", "150": "var(--lineHeight-150__1r0ife43r)", "175": "var(--lineHeight-175__1r0ife43s)" }, letterSpacing: { "0": "var(--letterSpacing-0__1r0ife43t)", "1": "var(--letterSpacing-1__1r0ife43u)", "2": "var(--letterSpacing-2__1r0ife43v)", "4": "var(--letterSpacing-4__1r0ife43w)", "-2": "var(--letterSpacing--2__1r0ife43x)", "-1": "var(--letterSpacing--1__1r0ife43y)" }, space: { "0": "var(--space-0__1r0ife43z)", "1": "var(--space-1__1r0ife440)", "2": "var(--space-2__1r0ife441)", "3": "var(--space-3__1r0ife442)", "4": "var(--space-4__1r0ife443)", "5": "var(--space-5__1r0ife444)", "6": "var(--space-6__1r0ife445)", "8": "var(--space-8__1r0ife446)", "10": "var(--space-10__1r0ife447)", "12": "var(--space-12__1r0ife448)", "16": "var(--space-16__1r0ife449)", "20": "var(--space-20__1r0ife44a)", "24": "var(--space-24__1r0ife44b)", "32": "var(--space-32__1r0ife44c)", "64": "var(--space-64__1r0ife44d)" }, radius: { "0": "var(--radius-0__1r0ife44e)", "2": "var(--radius-2__1r0ife44f)", "4": "var(--radius-4__1r0ife44g)", "8": "var(--radius-8__1r0ife44h)", "12": "var(--radius-12__1r0ife44i)", "9999": "var(--radius-9999__1r0ife44j)" }, shadow: { "0": "var(--shadow-0__1r0ife44k)", "1": "var(--shadow-1__1r0ife44l)", "2": "var(--shadow-2__1r0ife44m)", "3": "var(--shadow-3__1r0ife44n)", "4": "var(--shadow-4__1r0ife44o)", "5": "var(--shadow-5__1r0ife44p)", inner: "var(--shadow-inner__1r0ife44q)", focus: "var(--shadow-focus__1r0ife44r)" }, zIndex: { "0": "var(--zIndex-0__1r0ife44s)", "10": "var(--zIndex-10__1r0ife44t)", "100": "var(--zIndex-100__1r0ife44u)", "1000": "var(--zIndex-1000__1r0ife44v)", "1100": "var(--zIndex-1100__1r0ife44w)", "1200": "var(--zIndex-1200__1r0ife44x)" }, duration: { "0": "var(--duration-0__1r0ife44y)", "120": "var(--duration-120__1r0ife44z)", "200": "var(--duration-200__1r0ife450)", "320": "var(--duration-320__1r0ife451)" }, easing: { standard: "var(--easing-standard__1r0ife452)", emphasized: "var(--easing-emphasized__1r0ife453)", entrance: "var(--easing-entrance__1r0ife454)", exit: "var(--easing-exit__1r0ife455)" }, breakpoint: { "360": "var(--breakpoint-360__1r0ife456)", "640": "var(--breakpoint-640__1r0ife457)", "768": "var(--breakpoint-768__1r0ife458)", "1024": "var(--breakpoint-1024__1r0ife459)", "1280": "var(--breakpoint-1280__1r0ife45a)" }, opacity: { "0": "var(--opacity-0__1r0ife45b)", "40": "var(--opacity-40__1r0ife45c)", "60": "var(--opacity-60__1r0ife45d)", "64": "var(--opacity-64__1r0ife45e)", "100": "var(--opacity-100__1r0ife45f)" }, borderWidth: { "0": "var(--borderWidth-0__1r0ife45g)", "1": "var(--borderWidth-1__1r0ife45h)", "2": "var(--borderWidth-2__1r0ife45i)", "4": "var(--borderWidth-4__1r0ife45j)" }, borderStyle: { solid: "var(--borderStyle-solid__1r0ife45k)", dashed: "var(--borderStyle-dashed__1r0ife45l)" }, iconSize: { "12": "var(--iconSize-12__1r0ife45m)", "16": "var(--iconSize-16__1r0ife45n)", "20": "var(--iconSize-20__1r0ife45o)", "24": "var(--iconSize-24__1r0ife45p)", "32": "var(--iconSize-32__1r0ife45q)" } };
+
+// src/primitiveTokens.ts
+var primitiveTokens = {
+  color: {
+    white: "#ffffff",
+    black: "#000000",
+    transparent: "transparent",
+    neutral: {
+      25: "#fcfbfb",
+      50: "#f8f7f6",
+      100: "#efedea",
+      200: "#dedad5",
+      300: "#ccc5be",
+      400: "#beb6ad",
+      500: "#b4aba3",
+      600: "#9d9389",
+      700: "#7e756e",
+      800: "#645d57",
+      900: "#514c47",
+      950: "#2a2624",
+      975: "#161413"
+    },
+    brand: {
+      25: "#fdfbf8",
+      50: "#fbf7f1",
+      100: "#f5ecdf",
+      200: "#ead8bf",
+      300: "#dec29d",
+      400: "#d5b186",
+      500: "#cca67b",
+      600: "#b88c5d",
+      700: "#966f49",
+      800: "#76583b",
+      900: "#604832",
+      950: "#332419",
+      975: "#1c130d"
+    },
+    blue: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554"
+    },
+    green: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d",
+      950: "#052e16"
+    },
+    yellow: {
+      50: "#fefce8",
+      100: "#fef9c3",
+      200: "#fef08a",
+      300: "#fde047",
+      400: "#facc15",
+      500: "#eab308",
+      600: "#ca8a04",
+      700: "#a16207",
+      800: "#854d0e",
+      900: "#713f12",
+      950: "#422006"
+    },
+    orange: {
+      50: "#fff7ed",
+      100: "#ffedd5",
+      200: "#fed7aa",
+      300: "#fdba74",
+      400: "#fb923c",
+      500: "#f97316",
+      600: "#ea580c",
+      700: "#c2410c",
+      800: "#9a3412",
+      900: "#7c2d12",
+      950: "#431407"
+    },
+    red: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
+    },
+    purple: {
+      50: "#faf5ff",
+      100: "#f3e8ff",
+      200: "#e9d5ff",
+      300: "#d8b4fe",
+      400: "#c084fc",
+      500: "#a855f7",
+      600: "#9333ea",
+      700: "#7e22ce",
+      800: "#6b21a8",
+      900: "#581c87",
+      950: "#3b0764"
+    },
+    cyan: {
+      50: "#ecfeff",
+      100: "#cffafe",
+      200: "#a5f3fc",
+      300: "#67e8f9",
+      400: "#22d3ee",
+      500: "#06b6d4",
+      600: "#0891b2",
+      700: "#0e7490",
+      800: "#155e75",
+      900: "#164e63",
+      950: "#083344"
+    },
+    pink: {
+      50: "#fdf2f8",
+      100: "#fce7f3",
+      200: "#fbcfe8",
+      300: "#f9a8d4",
+      400: "#f472b6",
+      500: "#ec4899",
+      600: "#db2777",
+      700: "#be185d",
+      800: "#9d174d",
+      900: "#831843",
+      950: "#500724"
+    }
+  },
+  fontFamily: {
+    sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    mono: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace'
+  },
+  fontSize: {
+    75: "0.75rem",
+    87: "0.875rem",
+    100: "1rem",
+    112: "1.125rem",
+    125: "1.25rem",
+    150: "1.5rem",
+    187: "1.875rem",
+    225: "2.25rem",
+    300: "3rem"
+  },
+  fontWeight: {
+    400: "400",
+    500: "500",
+    600: "600",
+    700: "700"
+  },
+  lineHeight: {
+    100: "1",
+    120: "1.2",
+    150: "1.5",
+    175: "1.75"
+  },
+  letterSpacing: {
+    "-2": "-0.02em",
+    "-1": "-0.01em",
+    0: "0",
+    1: "0.01em",
+    2: "0.02em",
+    4: "0.04em"
+  },
+  space: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    32: "8rem",
+    64: "16rem"
+  },
+  radius: {
+    0: "0",
+    2: "0.125rem",
+    4: "0.25rem",
+    8: "0.5rem",
+    12: "0.75rem",
+    9999: "9999px"
+  },
+  shadow: {
+    0: "none",
+    1: "0 1px 2px rgb(17 24 39 / 8%)",
+    2: "0 2px 8px rgb(17 24 39 / 10%)",
+    3: "0 8px 24px rgb(17 24 39 / 12%)",
+    4: "0 16px 40px rgb(17 24 39 / 16%)",
+    5: "0 24px 64px rgb(17 24 39 / 20%)",
+    inner: "inset 0 1px 2px rgb(17 24 39 / 8%)",
+    focus: "0 0 0 3px rgb(184 140 93 / 28%)"
+  },
+  zIndex: {
+    0: "0",
+    10: "10",
+    100: "100",
+    1e3: "1000",
+    1100: "1100",
+    1200: "1200"
+  },
+  duration: {
+    0: "0ms",
+    120: "120ms",
+    200: "200ms",
+    320: "320ms"
+  },
+  easing: {
+    standard: "cubic-bezier(0.2, 0, 0, 1)",
+    emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+    entrance: "cubic-bezier(0, 0, 0.2, 1)",
+    exit: "cubic-bezier(0.4, 0, 1, 1)"
+  },
+  breakpoint: {
+    360: "360px",
+    640: "640px",
+    768: "768px",
+    1024: "1024px",
+    1280: "1280px"
+  },
+  opacity: {
+    0: "0",
+    40: "0.4",
+    60: "0.6",
+    64: "0.64",
+    100: "1"
+  },
+  borderWidth: {
+    0: "0",
+    1: "1px",
+    2: "2px",
+    4: "4px"
+  },
+  borderStyle: {
+    solid: "solid",
+    dashed: "dashed"
+  },
+  iconSize: {
+    12: "0.75rem",
+    16: "1rem",
+    20: "1.25rem",
+    24: "1.5rem",
+    32: "2rem"
+  }
+};
+
+// src/semanticContract.ts
+var semanticContract = {
+  color: {
+    bg: {
+      canvas: "",
+      surface: "",
+      elevated: "",
+      inverse: "",
+      disabled: "",
+      overlay: ""
+    },
+    fg: {
+      primary: "",
+      secondary: "",
+      tertiary: "",
+      inverse: "",
+      disabled: "",
+      brand: "",
+      success: "",
+      warning: "",
+      danger: "",
+      info: ""
+    },
+    border: {
+      subtle: "",
+      default: "",
+      strong: "",
+      focus: "",
+      disabled: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    action: {
+      primary: {
+        bg: "",
+        bgHover: "",
+        bgActive: "",
+        border: "",
+        icon: "",
+        fg: ""
+      },
+      secondary: {
+        bg: "",
+        bgHover: "",
+        bgActive: "",
+        border: "",
+        icon: "",
+        fg: ""
+      },
+      danger: {
+        bg: "",
+        bgHover: "",
+        bgActive: "",
+        border: "",
+        icon: "",
+        fg: ""
+      },
+      disabled: {
+        bg: "",
+        border: "",
+        icon: "",
+        fg: ""
+      }
+    },
+    state: {
+      hover: {
+        bg: ""
+      },
+      pressed: {
+        bg: ""
+      },
+      selected: {
+        bg: "",
+        border: "",
+        fg: ""
+      },
+      focus: {
+        ring: ""
+      },
+      loading: {
+        bg: "",
+        fg: ""
+      },
+      visited: {
+        fg: ""
+      },
+      readonly: {
+        bg: "",
+        border: "",
+        fg: ""
+      }
+    },
+    form: {
+      bg: "",
+      bgHover: "",
+      border: "",
+      borderHover: "",
+      borderFocus: "",
+      borderInvalid: "",
+      fg: "",
+      placeholder: "",
+      caret: "",
+      disabled: {
+        bg: "",
+        border: "",
+        fg: ""
+      },
+      readonly: {
+        bg: "",
+        border: "",
+        fg: ""
+      }
+    },
+    feedback: {
+      success: {
+        bg: "",
+        fg: ""
+      },
+      warning: {
+        bg: "",
+        fg: ""
+      },
+      danger: {
+        bg: "",
+        fg: ""
+      },
+      info: {
+        bg: "",
+        fg: ""
+      }
+    }
+  },
+  typography: {
+    fontFamily: {
+      body: "",
+      heading: "",
+      code: ""
+    },
+    fontSize: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: "",
+      "2xl": "",
+      "3xl": "",
+      "4xl": ""
+    },
+    fontWeight: {
+      regular: "",
+      medium: "",
+      semibold: "",
+      bold: ""
+    },
+    lineHeight: {
+      tight: "",
+      normal: "",
+      relaxed: ""
+    },
+    letterSpacing: {
+      tighter: "",
+      tight: "",
+      normal: "",
+      wide: "",
+      wider: "",
+      widest: ""
+    },
+    text: {
+      display: {
+        fontFamily: "",
+        fontSize: "",
+        fontWeight: "",
+        lineHeight: "",
+        letterSpacing: ""
+      },
+      heading: {
+        lg: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        },
+        md: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        },
+        sm: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        }
+      },
+      body: {
+        lg: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        },
+        md: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        },
+        sm: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        }
+      },
+      label: {
+        md: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        },
+        sm: {
+          fontFamily: "",
+          fontSize: "",
+          fontWeight: "",
+          lineHeight: "",
+          letterSpacing: ""
+        }
+      },
+      caption: {
+        fontFamily: "",
+        fontSize: "",
+        fontWeight: "",
+        lineHeight: "",
+        letterSpacing: ""
+      },
+      code: {
+        fontFamily: "",
+        fontSize: "",
+        fontWeight: "",
+        lineHeight: "",
+        letterSpacing: ""
+      }
+    }
+  },
+  spacing: {
+    none: "",
+    "2xs": "",
+    xs: "",
+    sm: "",
+    md: "",
+    lg: "",
+    xl: "",
+    "2xl": "",
+    "3xl": "",
+    "4xl": ""
+  },
+  radius: {
+    none: "",
+    xs: "",
+    sm: "",
+    md: "",
+    lg: "",
+    full: ""
+  },
+  shadow: {
+    none: "",
+    sm: "",
+    md: "",
+    lg: "",
+    focus: ""
+  },
+  zIndex: {
+    base: "",
+    raised: "",
+    sticky: "",
+    overlay: "",
+    modal: "",
+    toast: ""
+  },
+  motion: {
+    duration: {
+      instant: "",
+      fast: "",
+      normal: "",
+      slow: ""
+    },
+    easing: {
+      standard: "",
+      emphasized: "",
+      entrance: "",
+      exit: ""
+    }
+  },
+  breakpoint: {
+    xs: "",
+    sm: "",
+    md: "",
+    lg: "",
+    xl: ""
+  },
+  opacity: {
+    disabled: "",
+    muted: "",
+    overlay: ""
+  },
+  border: {
+    width: {
+      none: "",
+      thin: "",
+      medium: "",
+      thick: ""
+    },
+    style: {
+      solid: "",
+      dashed: ""
+    }
+  },
+  iconSize: {
+    xs: "",
+    sm: "",
+    md: "",
+    lg: "",
+    xl: ""
+  },
+  size: {
+    control: {
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    iconButton: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  padding: {
+    control: {
+      x: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      y: {
+        sm: "",
+        md: "",
+        lg: ""
+      }
+    },
+    page: {
+      xMobile: "",
+      xDesktop: ""
+    }
+  },
+  gap: {
+    inline: {
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    stack: {
+      sm: "",
+      md: "",
+      lg: ""
+    },
+    section: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  layout: {
+    container: {
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    },
+    gutter: {
+      mobile: "",
+      desktop: ""
+    },
+    sidebar: {
+      width: "",
+      collapsedWidth: ""
+    }
+  }
+};
+
+// src/semantic.css.ts
+var vars = { color: { bg: { canvas: "var(--color-bg-canvas__14cvtqa0)", surface: "var(--color-bg-surface__14cvtqa1)", elevated: "var(--color-bg-elevated__14cvtqa2)", inverse: "var(--color-bg-inverse__14cvtqa3)", disabled: "var(--color-bg-disabled__14cvtqa4)", overlay: "var(--color-bg-overlay__14cvtqa5)" }, fg: { primary: "var(--color-fg-primary__14cvtqa6)", secondary: "var(--color-fg-secondary__14cvtqa7)", tertiary: "var(--color-fg-tertiary__14cvtqa8)", inverse: "var(--color-fg-inverse__14cvtqa9)", disabled: "var(--color-fg-disabled__14cvtqaa)", brand: "var(--color-fg-brand__14cvtqab)", success: "var(--color-fg-success__14cvtqac)", warning: "var(--color-fg-warning__14cvtqad)", danger: "var(--color-fg-danger__14cvtqae)", info: "var(--color-fg-info__14cvtqaf)" }, border: { subtle: "var(--color-border-subtle__14cvtqag)", "default": "var(--color-border-default__14cvtqah)", strong: "var(--color-border-strong__14cvtqai)", focus: "var(--color-border-focus__14cvtqaj)", disabled: "var(--color-border-disabled__14cvtqak)", success: "var(--color-border-success__14cvtqal)", warning: "var(--color-border-warning__14cvtqam)", danger: "var(--color-border-danger__14cvtqan)" }, action: { primary: { bg: "var(--color-action-primary-bg__14cvtqao)", bgHover: "var(--color-action-primary-bgHover__14cvtqap)", bgActive: "var(--color-action-primary-bgActive__14cvtqaq)", border: "var(--color-action-primary-border__14cvtqar)", icon: "var(--color-action-primary-icon__14cvtqas)", fg: "var(--color-action-primary-fg__14cvtqat)" }, secondary: { bg: "var(--color-action-secondary-bg__14cvtqau)", bgHover: "var(--color-action-secondary-bgHover__14cvtqav)", bgActive: "var(--color-action-secondary-bgActive__14cvtqaw)", border: "var(--color-action-secondary-border__14cvtqax)", icon: "var(--color-action-secondary-icon__14cvtqay)", fg: "var(--color-action-secondary-fg__14cvtqaz)" }, danger: { bg: "var(--color-action-danger-bg__14cvtqa10)", bgHover: "var(--color-action-danger-bgHover__14cvtqa11)", bgActive: "var(--color-action-danger-bgActive__14cvtqa12)", border: "var(--color-action-danger-border__14cvtqa13)", icon: "var(--color-action-danger-icon__14cvtqa14)", fg: "var(--color-action-danger-fg__14cvtqa15)" }, disabled: { bg: "var(--color-action-disabled-bg__14cvtqa16)", border: "var(--color-action-disabled-border__14cvtqa17)", icon: "var(--color-action-disabled-icon__14cvtqa18)", fg: "var(--color-action-disabled-fg__14cvtqa19)" } }, state: { hover: { bg: "var(--color-state-hover-bg__14cvtqa1a)" }, pressed: { bg: "var(--color-state-pressed-bg__14cvtqa1b)" }, selected: { bg: "var(--color-state-selected-bg__14cvtqa1c)", border: "var(--color-state-selected-border__14cvtqa1d)", fg: "var(--color-state-selected-fg__14cvtqa1e)" }, focus: { ring: "var(--color-state-focus-ring__14cvtqa1f)" }, loading: { bg: "var(--color-state-loading-bg__14cvtqa1g)", fg: "var(--color-state-loading-fg__14cvtqa1h)" }, visited: { fg: "var(--color-state-visited-fg__14cvtqa1i)" }, readonly: { bg: "var(--color-state-readonly-bg__14cvtqa1j)", border: "var(--color-state-readonly-border__14cvtqa1k)", fg: "var(--color-state-readonly-fg__14cvtqa1l)" } }, form: { bg: "var(--color-form-bg__14cvtqa1m)", bgHover: "var(--color-form-bgHover__14cvtqa1n)", border: "var(--color-form-border__14cvtqa1o)", borderHover: "var(--color-form-borderHover__14cvtqa1p)", borderFocus: "var(--color-form-borderFocus__14cvtqa1q)", borderInvalid: "var(--color-form-borderInvalid__14cvtqa1r)", fg: "var(--color-form-fg__14cvtqa1s)", placeholder: "var(--color-form-placeholder__14cvtqa1t)", caret: "var(--color-form-caret__14cvtqa1u)", disabled: { bg: "var(--color-form-disabled-bg__14cvtqa1v)", border: "var(--color-form-disabled-border__14cvtqa1w)", fg: "var(--color-form-disabled-fg__14cvtqa1x)" }, readonly: { bg: "var(--color-form-readonly-bg__14cvtqa1y)", border: "var(--color-form-readonly-border__14cvtqa1z)", fg: "var(--color-form-readonly-fg__14cvtqa20)" } }, feedback: { success: { bg: "var(--color-feedback-success-bg__14cvtqa21)", fg: "var(--color-feedback-success-fg__14cvtqa22)" }, warning: { bg: "var(--color-feedback-warning-bg__14cvtqa23)", fg: "var(--color-feedback-warning-fg__14cvtqa24)" }, danger: { bg: "var(--color-feedback-danger-bg__14cvtqa25)", fg: "var(--color-feedback-danger-fg__14cvtqa26)" }, info: { bg: "var(--color-feedback-info-bg__14cvtqa27)", fg: "var(--color-feedback-info-fg__14cvtqa28)" } } }, typography: { fontFamily: { body: "var(--typography-fontFamily-body__14cvtqa29)", heading: "var(--typography-fontFamily-heading__14cvtqa2a)", code: "var(--typography-fontFamily-code__14cvtqa2b)" }, fontSize: { xs: "var(--typography-fontSize-xs__14cvtqa2c)", sm: "var(--typography-fontSize-sm__14cvtqa2d)", md: "var(--typography-fontSize-md__14cvtqa2e)", lg: "var(--typography-fontSize-lg__14cvtqa2f)", xl: "var(--typography-fontSize-xl__14cvtqa2g)", "2xl": "var(--typography-fontSize-2xl__14cvtqa2h)", "3xl": "var(--typography-fontSize-3xl__14cvtqa2i)", "4xl": "var(--typography-fontSize-4xl__14cvtqa2j)" }, fontWeight: { regular: "var(--typography-fontWeight-regular__14cvtqa2k)", medium: "var(--typography-fontWeight-medium__14cvtqa2l)", semibold: "var(--typography-fontWeight-semibold__14cvtqa2m)", bold: "var(--typography-fontWeight-bold__14cvtqa2n)" }, lineHeight: { tight: "var(--typography-lineHeight-tight__14cvtqa2o)", normal: "var(--typography-lineHeight-normal__14cvtqa2p)", relaxed: "var(--typography-lineHeight-relaxed__14cvtqa2q)" }, letterSpacing: { tighter: "var(--typography-letterSpacing-tighter__14cvtqa2r)", tight: "var(--typography-letterSpacing-tight__14cvtqa2s)", normal: "var(--typography-letterSpacing-normal__14cvtqa2t)", wide: "var(--typography-letterSpacing-wide__14cvtqa2u)", wider: "var(--typography-letterSpacing-wider__14cvtqa2v)", widest: "var(--typography-letterSpacing-widest__14cvtqa2w)" }, text: { display: { fontFamily: "var(--typography-text-display-fontFamily__14cvtqa2x)", fontSize: "var(--typography-text-display-fontSize__14cvtqa2y)", fontWeight: "var(--typography-text-display-fontWeight__14cvtqa2z)", lineHeight: "var(--typography-text-display-lineHeight__14cvtqa30)", letterSpacing: "var(--typography-text-display-letterSpacing__14cvtqa31)" }, heading: { lg: { fontFamily: "var(--typography-text-heading-lg-fontFamily__14cvtqa32)", fontSize: "var(--typography-text-heading-lg-fontSize__14cvtqa33)", fontWeight: "var(--typography-text-heading-lg-fontWeight__14cvtqa34)", lineHeight: "var(--typography-text-heading-lg-lineHeight__14cvtqa35)", letterSpacing: "var(--typography-text-heading-lg-letterSpacing__14cvtqa36)" }, md: { fontFamily: "var(--typography-text-heading-md-fontFamily__14cvtqa37)", fontSize: "var(--typography-text-heading-md-fontSize__14cvtqa38)", fontWeight: "var(--typography-text-heading-md-fontWeight__14cvtqa39)", lineHeight: "var(--typography-text-heading-md-lineHeight__14cvtqa3a)", letterSpacing: "var(--typography-text-heading-md-letterSpacing__14cvtqa3b)" }, sm: { fontFamily: "var(--typography-text-heading-sm-fontFamily__14cvtqa3c)", fontSize: "var(--typography-text-heading-sm-fontSize__14cvtqa3d)", fontWeight: "var(--typography-text-heading-sm-fontWeight__14cvtqa3e)", lineHeight: "var(--typography-text-heading-sm-lineHeight__14cvtqa3f)", letterSpacing: "var(--typography-text-heading-sm-letterSpacing__14cvtqa3g)" } }, body: { lg: { fontFamily: "var(--typography-text-body-lg-fontFamily__14cvtqa3h)", fontSize: "var(--typography-text-body-lg-fontSize__14cvtqa3i)", fontWeight: "var(--typography-text-body-lg-fontWeight__14cvtqa3j)", lineHeight: "var(--typography-text-body-lg-lineHeight__14cvtqa3k)", letterSpacing: "var(--typography-text-body-lg-letterSpacing__14cvtqa3l)" }, md: { fontFamily: "var(--typography-text-body-md-fontFamily__14cvtqa3m)", fontSize: "var(--typography-text-body-md-fontSize__14cvtqa3n)", fontWeight: "var(--typography-text-body-md-fontWeight__14cvtqa3o)", lineHeight: "var(--typography-text-body-md-lineHeight__14cvtqa3p)", letterSpacing: "var(--typography-text-body-md-letterSpacing__14cvtqa3q)" }, sm: { fontFamily: "var(--typography-text-body-sm-fontFamily__14cvtqa3r)", fontSize: "var(--typography-text-body-sm-fontSize__14cvtqa3s)", fontWeight: "var(--typography-text-body-sm-fontWeight__14cvtqa3t)", lineHeight: "var(--typography-text-body-sm-lineHeight__14cvtqa3u)", letterSpacing: "var(--typography-text-body-sm-letterSpacing__14cvtqa3v)" } }, label: { md: { fontFamily: "var(--typography-text-label-md-fontFamily__14cvtqa3w)", fontSize: "var(--typography-text-label-md-fontSize__14cvtqa3x)", fontWeight: "var(--typography-text-label-md-fontWeight__14cvtqa3y)", lineHeight: "var(--typography-text-label-md-lineHeight__14cvtqa3z)", letterSpacing: "var(--typography-text-label-md-letterSpacing__14cvtqa40)" }, sm: { fontFamily: "var(--typography-text-label-sm-fontFamily__14cvtqa41)", fontSize: "var(--typography-text-label-sm-fontSize__14cvtqa42)", fontWeight: "var(--typography-text-label-sm-fontWeight__14cvtqa43)", lineHeight: "var(--typography-text-label-sm-lineHeight__14cvtqa44)", letterSpacing: "var(--typography-text-label-sm-letterSpacing__14cvtqa45)" } }, caption: { fontFamily: "var(--typography-text-caption-fontFamily__14cvtqa46)", fontSize: "var(--typography-text-caption-fontSize__14cvtqa47)", fontWeight: "var(--typography-text-caption-fontWeight__14cvtqa48)", lineHeight: "var(--typography-text-caption-lineHeight__14cvtqa49)", letterSpacing: "var(--typography-text-caption-letterSpacing__14cvtqa4a)" }, code: { fontFamily: "var(--typography-text-code-fontFamily__14cvtqa4b)", fontSize: "var(--typography-text-code-fontSize__14cvtqa4c)", fontWeight: "var(--typography-text-code-fontWeight__14cvtqa4d)", lineHeight: "var(--typography-text-code-lineHeight__14cvtqa4e)", letterSpacing: "var(--typography-text-code-letterSpacing__14cvtqa4f)" } } }, spacing: { none: "var(--spacing-none__14cvtqa4g)", "2xs": "var(--spacing-2xs__14cvtqa4h)", xs: "var(--spacing-xs__14cvtqa4i)", sm: "var(--spacing-sm__14cvtqa4j)", md: "var(--spacing-md__14cvtqa4k)", lg: "var(--spacing-lg__14cvtqa4l)", xl: "var(--spacing-xl__14cvtqa4m)", "2xl": "var(--spacing-2xl__14cvtqa4n)", "3xl": "var(--spacing-3xl__14cvtqa4o)", "4xl": "var(--spacing-4xl__14cvtqa4p)" }, radius: { none: "var(--radius-none__14cvtqa4q)", xs: "var(--radius-xs__14cvtqa4r)", sm: "var(--radius-sm__14cvtqa4s)", md: "var(--radius-md__14cvtqa4t)", lg: "var(--radius-lg__14cvtqa4u)", full: "var(--radius-full__14cvtqa4v)" }, shadow: { none: "var(--shadow-none__14cvtqa4w)", sm: "var(--shadow-sm__14cvtqa4x)", md: "var(--shadow-md__14cvtqa4y)", lg: "var(--shadow-lg__14cvtqa4z)", focus: "var(--shadow-focus__14cvtqa50)" }, zIndex: { base: "var(--zIndex-base__14cvtqa51)", raised: "var(--zIndex-raised__14cvtqa52)", sticky: "var(--zIndex-sticky__14cvtqa53)", overlay: "var(--zIndex-overlay__14cvtqa54)", modal: "var(--zIndex-modal__14cvtqa55)", toast: "var(--zIndex-toast__14cvtqa56)" }, motion: { duration: { instant: "var(--motion-duration-instant__14cvtqa57)", fast: "var(--motion-duration-fast__14cvtqa58)", normal: "var(--motion-duration-normal__14cvtqa59)", slow: "var(--motion-duration-slow__14cvtqa5a)" }, easing: { standard: "var(--motion-easing-standard__14cvtqa5b)", emphasized: "var(--motion-easing-emphasized__14cvtqa5c)", entrance: "var(--motion-easing-entrance__14cvtqa5d)", exit: "var(--motion-easing-exit__14cvtqa5e)" } }, breakpoint: { xs: "var(--breakpoint-xs__14cvtqa5f)", sm: "var(--breakpoint-sm__14cvtqa5g)", md: "var(--breakpoint-md__14cvtqa5h)", lg: "var(--breakpoint-lg__14cvtqa5i)", xl: "var(--breakpoint-xl__14cvtqa5j)" }, opacity: { disabled: "var(--opacity-disabled__14cvtqa5k)", muted: "var(--opacity-muted__14cvtqa5l)", overlay: "var(--opacity-overlay__14cvtqa5m)" }, border: { width: { none: "var(--border-width-none__14cvtqa5n)", thin: "var(--border-width-thin__14cvtqa5o)", medium: "var(--border-width-medium__14cvtqa5p)", thick: "var(--border-width-thick__14cvtqa5q)" }, style: { solid: "var(--border-style-solid__14cvtqa5r)", dashed: "var(--border-style-dashed__14cvtqa5s)" } }, iconSize: { xs: "var(--iconSize-xs__14cvtqa5t)", sm: "var(--iconSize-sm__14cvtqa5u)", md: "var(--iconSize-md__14cvtqa5v)", lg: "var(--iconSize-lg__14cvtqa5w)", xl: "var(--iconSize-xl__14cvtqa5x)" }, size: { control: { sm: "var(--size-control-sm__14cvtqa5y)", md: "var(--size-control-md__14cvtqa5z)", lg: "var(--size-control-lg__14cvtqa60)" }, iconButton: { sm: "var(--size-iconButton-sm__14cvtqa61)", md: "var(--size-iconButton-md__14cvtqa62)", lg: "var(--size-iconButton-lg__14cvtqa63)" } }, padding: { control: { x: { sm: "var(--padding-control-x-sm__14cvtqa64)", md: "var(--padding-control-x-md__14cvtqa65)", lg: "var(--padding-control-x-lg__14cvtqa66)" }, y: { sm: "var(--padding-control-y-sm__14cvtqa67)", md: "var(--padding-control-y-md__14cvtqa68)", lg: "var(--padding-control-y-lg__14cvtqa69)" } }, page: { xMobile: "var(--padding-page-xMobile__14cvtqa6a)", xDesktop: "var(--padding-page-xDesktop__14cvtqa6b)" } }, gap: { inline: { sm: "var(--gap-inline-sm__14cvtqa6c)", md: "var(--gap-inline-md__14cvtqa6d)", lg: "var(--gap-inline-lg__14cvtqa6e)" }, stack: { sm: "var(--gap-stack-sm__14cvtqa6f)", md: "var(--gap-stack-md__14cvtqa6g)", lg: "var(--gap-stack-lg__14cvtqa6h)" }, section: { sm: "var(--gap-section-sm__14cvtqa6i)", md: "var(--gap-section-md__14cvtqa6j)", lg: "var(--gap-section-lg__14cvtqa6k)" } }, layout: { container: { sm: "var(--layout-container-sm__14cvtqa6l)", md: "var(--layout-container-md__14cvtqa6m)", lg: "var(--layout-container-lg__14cvtqa6n)", xl: "var(--layout-container-xl__14cvtqa6o)" }, gutter: { mobile: "var(--layout-gutter-mobile__14cvtqa6p)", desktop: "var(--layout-gutter-desktop__14cvtqa6q)" }, sidebar: { width: "var(--layout-sidebar-width__14cvtqa6r)", collapsedWidth: "var(--layout-sidebar-collapsedWidth__14cvtqa6s)" } } };
+var semanticVars = vars;
+var themeContract = vars;
+
+// src/themeNames.ts
+var themeNames = {
+  light: "light",
+  dark: "dark"
+};
+var themeAttribute = "data-theme";
+function getThemeSelector(name) {
+  return `[${themeAttribute}="${name}"]`;
+}
+
+// src/semanticTokens.ts
+var defaultLightSemanticTokenReferences = {
+  color: {
+    bg: {
+      canvas: "{primitive.color.white}",
+      surface: "{primitive.color.neutral.50}",
+      elevated: "{primitive.color.white}",
+      inverse: "{primitive.color.neutral.950}",
+      disabled: "{primitive.color.neutral.100}",
+      overlay: "rgb(3 7 18 / 60%)"
+    },
+    fg: {
+      primary: "{primitive.color.neutral.950}",
+      secondary: "{primitive.color.neutral.600}",
+      tertiary: "{primitive.color.neutral.500}",
+      inverse: "{primitive.color.white}",
+      disabled: "{primitive.color.neutral.400}",
+      brand: "{primitive.color.brand.700}",
+      success: "{primitive.color.green.700}",
+      warning: "{primitive.color.yellow.700}",
+      danger: "{primitive.color.red.700}",
+      info: "{primitive.color.cyan.700}"
+    },
+    border: {
+      subtle: "{primitive.color.neutral.100}",
+      default: "{primitive.color.neutral.200}",
+      strong: "{primitive.color.neutral.400}",
+      focus: "{primitive.color.brand.600}",
+      disabled: "{primitive.color.neutral.200}",
+      success: "{primitive.color.green.300}",
+      warning: "{primitive.color.yellow.300}",
+      danger: "{primitive.color.red.300}"
+    },
+    action: {
+      primary: {
+        bg: "{primitive.color.brand.500}",
+        bgHover: "{primitive.color.brand.600}",
+        bgActive: "{primitive.color.brand.700}",
+        border: "{primitive.color.brand.500}",
+        icon: "{primitive.color.white}",
+        fg: "{primitive.color.white}"
+      },
+      secondary: {
+        bg: "{primitive.color.brand.50}",
+        bgHover: "{primitive.color.brand.100}",
+        bgActive: "{primitive.color.brand.200}",
+        border: "{primitive.color.brand.200}",
+        icon: "{primitive.color.brand.800}",
+        fg: "{primitive.color.brand.800}"
+      },
+      danger: {
+        bg: "{primitive.color.red.600}",
+        bgHover: "{primitive.color.red.700}",
+        bgActive: "{primitive.color.red.800}",
+        border: "{primitive.color.red.600}",
+        icon: "{primitive.color.white}",
+        fg: "{primitive.color.white}"
+      },
+      disabled: {
+        bg: "{primitive.color.neutral.200}",
+        border: "{primitive.color.neutral.200}",
+        icon: "{primitive.color.neutral.400}",
+        fg: "{primitive.color.neutral.400}"
+      }
+    },
+    state: {
+      hover: {
+        bg: "{primitive.color.neutral.100}"
+      },
+      pressed: {
+        bg: "{primitive.color.neutral.200}"
+      },
+      selected: {
+        bg: "{primitive.color.brand.50}",
+        border: "{primitive.color.brand.500}",
+        fg: "{primitive.color.brand.800}"
+      },
+      focus: {
+        ring: "{primitive.color.brand.600}"
+      },
+      loading: {
+        bg: "{primitive.color.neutral.100}",
+        fg: "{primitive.color.neutral.500}"
+      },
+      visited: {
+        fg: "{primitive.color.purple.700}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.50}",
+        border: "{primitive.color.neutral.200}",
+        fg: "{primitive.color.neutral.700}"
+      }
+    },
+    form: {
+      bg: "{primitive.color.white}",
+      bgHover: "{primitive.color.neutral.50}",
+      border: "{primitive.color.neutral.300}",
+      borderHover: "{primitive.color.neutral.400}",
+      borderFocus: "{primitive.color.brand.600}",
+      borderInvalid: "{primitive.color.red.600}",
+      fg: "{primitive.color.neutral.950}",
+      placeholder: "{primitive.color.neutral.500}",
+      caret: "{primitive.color.brand.700}",
+      disabled: {
+        bg: "{primitive.color.neutral.100}",
+        border: "{primitive.color.neutral.200}",
+        fg: "{primitive.color.neutral.400}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.50}",
+        border: "{primitive.color.neutral.200}",
+        fg: "{primitive.color.neutral.700}"
+      }
+    },
+    feedback: {
+      success: {
+        bg: "{primitive.color.green.50}",
+        fg: "{primitive.color.green.700}"
+      },
+      warning: {
+        bg: "{primitive.color.yellow.50}",
+        fg: "{primitive.color.yellow.700}"
+      },
+      danger: {
+        bg: "{primitive.color.red.50}",
+        fg: "{primitive.color.red.700}"
+      },
+      info: {
+        bg: "{primitive.color.cyan.50}",
+        fg: "{primitive.color.cyan.700}"
+      }
+    }
+  },
+  typography: {
+    fontFamily: {
+      body: "{primitive.fontFamily.sans}",
+      heading: "{primitive.fontFamily.sans}",
+      code: "{primitive.fontFamily.mono}"
+    },
+    fontSize: {
+      xs: "{primitive.fontSize.75}",
+      sm: "{primitive.fontSize.87}",
+      md: "{primitive.fontSize.100}",
+      lg: "{primitive.fontSize.112}",
+      xl: "{primitive.fontSize.125}",
+      "2xl": "{primitive.fontSize.150}",
+      "3xl": "{primitive.fontSize.187}",
+      "4xl": "{primitive.fontSize.225}"
+    },
+    fontWeight: {
+      regular: "{primitive.fontWeight.400}",
+      medium: "{primitive.fontWeight.500}",
+      semibold: "{primitive.fontWeight.600}",
+      bold: "{primitive.fontWeight.700}"
+    },
+    lineHeight: {
+      tight: "{primitive.lineHeight.120}",
+      normal: "{primitive.lineHeight.150}",
+      relaxed: "{primitive.lineHeight.175}"
+    },
+    letterSpacing: {
+      tighter: "{primitive.letterSpacing.-2}",
+      tight: "{primitive.letterSpacing.-1}",
+      normal: "{primitive.letterSpacing.0}",
+      wide: "{primitive.letterSpacing.1}",
+      wider: "{primitive.letterSpacing.2}",
+      widest: "{primitive.letterSpacing.4}"
+    },
+    text: {
+      display: {
+        fontFamily: "{primitive.fontFamily.sans}",
+        fontSize: "{primitive.fontSize.225}",
+        fontWeight: "{primitive.fontWeight.700}",
+        lineHeight: "{primitive.lineHeight.120}",
+        letterSpacing: "{primitive.letterSpacing.-1}"
+      },
+      heading: {
+        lg: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.187}",
+          fontWeight: "{primitive.fontWeight.700}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.-1}"
+        },
+        md: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.150}",
+          fontWeight: "{primitive.fontWeight.600}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        sm: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.125}",
+          fontWeight: "{primitive.fontWeight.600}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        }
+      },
+      body: {
+        lg: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.112}",
+          fontWeight: "{primitive.fontWeight.400}",
+          lineHeight: "{primitive.lineHeight.150}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        md: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.100}",
+          fontWeight: "{primitive.fontWeight.400}",
+          lineHeight: "{primitive.lineHeight.150}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        sm: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.87}",
+          fontWeight: "{primitive.fontWeight.400}",
+          lineHeight: "{primitive.lineHeight.150}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        }
+      },
+      label: {
+        md: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.87}",
+          fontWeight: "{primitive.fontWeight.500}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.0}"
+        },
+        sm: {
+          fontFamily: "{primitive.fontFamily.sans}",
+          fontSize: "{primitive.fontSize.75}",
+          fontWeight: "{primitive.fontWeight.500}",
+          lineHeight: "{primitive.lineHeight.120}",
+          letterSpacing: "{primitive.letterSpacing.1}"
+        }
+      },
+      caption: {
+        fontFamily: "{primitive.fontFamily.sans}",
+        fontSize: "{primitive.fontSize.75}",
+        fontWeight: "{primitive.fontWeight.400}",
+        lineHeight: "{primitive.lineHeight.150}",
+        letterSpacing: "{primitive.letterSpacing.0}"
+      },
+      code: {
+        fontFamily: "{primitive.fontFamily.mono}",
+        fontSize: "{primitive.fontSize.87}",
+        fontWeight: "{primitive.fontWeight.400}",
+        lineHeight: "{primitive.lineHeight.150}",
+        letterSpacing: "{primitive.letterSpacing.0}"
+      }
+    }
+  },
+  spacing: {
+    none: "{primitive.space.0}",
+    "2xs": "{primitive.space.1}",
+    xs: "{primitive.space.2}",
+    sm: "{primitive.space.3}",
+    md: "{primitive.space.4}",
+    lg: "{primitive.space.6}",
+    xl: "{primitive.space.8}",
+    "2xl": "{primitive.space.12}",
+    "3xl": "{primitive.space.16}",
+    "4xl": "{primitive.space.32}"
+  },
+  radius: {
+    none: "{primitive.radius.0}",
+    xs: "{primitive.radius.2}",
+    sm: "{primitive.radius.4}",
+    md: "{primitive.radius.8}",
+    lg: "{primitive.radius.12}",
+    full: "{primitive.radius.9999}"
+  },
+  shadow: {
+    none: "{primitive.shadow.0}",
+    sm: "{primitive.shadow.1}",
+    md: "{primitive.shadow.3}",
+    lg: "{primitive.shadow.4}",
+    focus: "{primitive.shadow.focus}"
+  },
+  zIndex: {
+    base: "{primitive.zIndex.0}",
+    raised: "{primitive.zIndex.10}",
+    sticky: "{primitive.zIndex.100}",
+    overlay: "{primitive.zIndex.1000}",
+    modal: "{primitive.zIndex.1100}",
+    toast: "{primitive.zIndex.1200}"
+  },
+  motion: {
+    duration: {
+      instant: "{primitive.duration.0}",
+      fast: "{primitive.duration.120}",
+      normal: "{primitive.duration.200}",
+      slow: "{primitive.duration.320}"
+    },
+    easing: {
+      standard: "{primitive.easing.standard}",
+      emphasized: "{primitive.easing.emphasized}",
+      entrance: "{primitive.easing.entrance}",
+      exit: "{primitive.easing.exit}"
+    }
+  },
+  breakpoint: {
+    xs: "{primitive.breakpoint.360}",
+    sm: "{primitive.breakpoint.640}",
+    md: "{primitive.breakpoint.768}",
+    lg: "{primitive.breakpoint.1024}",
+    xl: "{primitive.breakpoint.1280}"
+  },
+  opacity: {
+    disabled: "{primitive.opacity.40}",
+    muted: "{primitive.opacity.64}",
+    overlay: "{primitive.opacity.60}"
+  },
+  border: {
+    width: {
+      none: "{primitive.borderWidth.0}",
+      thin: "{primitive.borderWidth.1}",
+      medium: "{primitive.borderWidth.2}",
+      thick: "{primitive.borderWidth.4}"
+    },
+    style: {
+      solid: "{primitive.borderStyle.solid}",
+      dashed: "{primitive.borderStyle.dashed}"
+    }
+  },
+  iconSize: {
+    xs: "{primitive.iconSize.12}",
+    sm: "{primitive.iconSize.16}",
+    md: "{primitive.iconSize.20}",
+    lg: "{primitive.iconSize.24}",
+    xl: "{primitive.iconSize.32}"
+  },
+  size: {
+    control: {
+      sm: "{primitive.space.8}",
+      md: "{primitive.space.10}",
+      lg: "{primitive.space.12}"
+    },
+    iconButton: {
+      sm: "{primitive.space.8}",
+      md: "{primitive.space.10}",
+      lg: "{primitive.space.12}"
+    }
+  },
+  padding: {
+    control: {
+      x: {
+        sm: "{primitive.space.3}",
+        md: "{primitive.space.4}",
+        lg: "{primitive.space.5}"
+      },
+      y: {
+        sm: "{primitive.space.1}",
+        md: "{primitive.space.2}",
+        lg: "{primitive.space.3}"
+      }
+    },
+    page: {
+      xMobile: "{primitive.space.4}",
+      xDesktop: "{primitive.space.8}"
+    }
+  },
+  gap: {
+    inline: {
+      sm: "{primitive.space.1}",
+      md: "{primitive.space.2}",
+      lg: "{primitive.space.3}"
+    },
+    stack: {
+      sm: "{primitive.space.2}",
+      md: "{primitive.space.4}",
+      lg: "{primitive.space.6}"
+    },
+    section: {
+      sm: "{primitive.space.8}",
+      md: "{primitive.space.12}",
+      lg: "{primitive.space.16}"
+    }
+  },
+  layout: {
+    container: {
+      sm: "{primitive.breakpoint.640}",
+      md: "{primitive.breakpoint.768}",
+      lg: "{primitive.breakpoint.1024}",
+      xl: "{primitive.breakpoint.1280}"
+    },
+    gutter: {
+      mobile: "{primitive.space.4}",
+      desktop: "{primitive.space.8}"
+    },
+    sidebar: {
+      width: "{primitive.space.64}",
+      collapsedWidth: "{primitive.space.16}"
+    }
+  }
+};
+var defaultDarkSemanticTokenReferences = {
+  ...defaultLightSemanticTokenReferences,
+  color: {
+    bg: {
+      canvas: "{primitive.color.neutral.975}",
+      surface: "{primitive.color.neutral.950}",
+      elevated: "{primitive.color.neutral.950}",
+      inverse: "{primitive.color.white}",
+      disabled: "{primitive.color.neutral.900}",
+      overlay: "rgb(0 0 0 / 70%)"
+    },
+    fg: {
+      primary: "{primitive.color.neutral.50}",
+      secondary: "{primitive.color.neutral.300}",
+      tertiary: "{primitive.color.neutral.400}",
+      inverse: "{primitive.color.neutral.950}",
+      disabled: "{primitive.color.neutral.500}",
+      brand: "{primitive.color.brand.300}",
+      success: "{primitive.color.green.300}",
+      warning: "{primitive.color.yellow.300}",
+      danger: "{primitive.color.red.300}",
+      info: "{primitive.color.cyan.300}"
+    },
+    border: {
+      subtle: "{primitive.color.neutral.800}",
+      default: "{primitive.color.neutral.700}",
+      strong: "{primitive.color.neutral.500}",
+      focus: "{primitive.color.brand.400}",
+      disabled: "{primitive.color.neutral.800}",
+      success: "{primitive.color.green.700}",
+      warning: "{primitive.color.yellow.700}",
+      danger: "{primitive.color.red.700}"
+    },
+    action: {
+      primary: {
+        bg: "{primitive.color.brand.400}",
+        bgHover: "{primitive.color.brand.300}",
+        bgActive: "{primitive.color.brand.200}",
+        border: "{primitive.color.brand.400}",
+        icon: "{primitive.color.neutral.950}",
+        fg: "{primitive.color.neutral.950}"
+      },
+      secondary: {
+        bg: "{primitive.color.neutral.800}",
+        bgHover: "{primitive.color.neutral.700}",
+        bgActive: "{primitive.color.neutral.600}",
+        border: "{primitive.color.neutral.700}",
+        icon: "{primitive.color.brand.200}",
+        fg: "{primitive.color.brand.200}"
+      },
+      danger: {
+        bg: "{primitive.color.red.500}",
+        bgHover: "{primitive.color.red.400}",
+        bgActive: "{primitive.color.red.300}",
+        border: "{primitive.color.red.500}",
+        icon: "{primitive.color.white}",
+        fg: "{primitive.color.white}"
+      },
+      disabled: {
+        bg: "{primitive.color.neutral.800}",
+        border: "{primitive.color.neutral.800}",
+        icon: "{primitive.color.neutral.500}",
+        fg: "{primitive.color.neutral.500}"
+      }
+    },
+    state: {
+      hover: {
+        bg: "{primitive.color.neutral.800}"
+      },
+      pressed: {
+        bg: "{primitive.color.neutral.700}"
+      },
+      selected: {
+        bg: "{primitive.color.brand.950}",
+        border: "{primitive.color.brand.400}",
+        fg: "{primitive.color.brand.200}"
+      },
+      focus: {
+        ring: "{primitive.color.brand.400}"
+      },
+      loading: {
+        bg: "{primitive.color.neutral.800}",
+        fg: "{primitive.color.neutral.400}"
+      },
+      visited: {
+        fg: "{primitive.color.purple.300}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.900}",
+        border: "{primitive.color.neutral.700}",
+        fg: "{primitive.color.neutral.300}"
+      }
+    },
+    form: {
+      bg: "{primitive.color.neutral.900}",
+      bgHover: "{primitive.color.neutral.800}",
+      border: "{primitive.color.neutral.700}",
+      borderHover: "{primitive.color.neutral.600}",
+      borderFocus: "{primitive.color.brand.400}",
+      borderInvalid: "{primitive.color.red.400}",
+      fg: "{primitive.color.neutral.50}",
+      placeholder: "{primitive.color.neutral.500}",
+      caret: "{primitive.color.brand.300}",
+      disabled: {
+        bg: "{primitive.color.neutral.800}",
+        border: "{primitive.color.neutral.800}",
+        fg: "{primitive.color.neutral.500}"
+      },
+      readonly: {
+        bg: "{primitive.color.neutral.900}",
+        border: "{primitive.color.neutral.700}",
+        fg: "{primitive.color.neutral.300}"
+      }
+    },
+    feedback: {
+      success: {
+        bg: "{primitive.color.green.950}",
+        fg: "{primitive.color.green.300}"
+      },
+      warning: {
+        bg: "{primitive.color.yellow.950}",
+        fg: "{primitive.color.yellow.300}"
+      },
+      danger: {
+        bg: "{primitive.color.red.950}",
+        fg: "{primitive.color.red.300}"
+      },
+      info: {
+        bg: "{primitive.color.cyan.950}",
+        fg: "{primitive.color.cyan.300}"
+      }
+    }
+  }
+};
+var defaultLightSemanticTokens = resolveTokenReferences(
+  defaultLightSemanticTokenReferences,
+  { primitive: primitiveVars }
+);
+var defaultDarkSemanticTokens = resolveTokenReferences(
+  defaultDarkSemanticTokenReferences,
+  { primitive: primitiveVars }
+);
+var defaultSemanticTokenReferences = defaultLightSemanticTokenReferences;
+var defaultSemanticTokens = defaultLightSemanticTokens;
+var defaultResolvedLightSemanticTokens = resolveTokenReferences(
+  defaultLightSemanticTokenReferences,
+  {
+    primitive: primitiveTokens
+  }
+);
+var defaultResolvedDarkSemanticTokens = resolveTokenReferences(
+  defaultDarkSemanticTokenReferences,
+  {
+    primitive: primitiveTokens
+  }
+);
+var defaultResolvedSemanticTokens = defaultResolvedLightSemanticTokens;
+var defaultLightTokens = {
+  primitive: primitiveTokens,
+  semantic: defaultResolvedLightSemanticTokens
+};
+var defaultDarkTokens = {
+  primitive: primitiveTokens,
+  semantic: defaultResolvedDarkSemanticTokens
+};
+var defaultTokens = {
+  primitive: primitiveTokens,
+  semantic: defaultResolvedSemanticTokens
+};
+var defaultLightTokenReferences = {
+  primitive: primitiveTokens,
+  semantic: defaultLightSemanticTokenReferences
+};
+var defaultDarkTokenReferences = {
+  primitive: primitiveTokens,
+  semantic: defaultDarkSemanticTokenReferences
+};
+var defaultTokenReferences = {
+  primitive: primitiveTokens,
+  semantic: defaultSemanticTokenReferences
+};
+function resolveTokenReferences(value, source) {
+  if (typeof value === "string") {
+    const match = value.match(/^\{(.+)\}$/);
+    if (!match) {
+      return value;
+    }
+    const referencePath = match[1];
+    if (!referencePath) {
+      return value;
+    }
+    return getPath(source, referencePath);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => resolveTokenReferences(item, source));
+  }
+  if (typeof value === "object" && value !== null) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, childValue]) => [
+        key,
+        resolveTokenReferences(childValue, source)
+      ])
+    );
+  }
+  return value;
+}
+function getPath(source, path) {
+  return path.split(".").reduce((current, segment) => {
+    if (typeof current !== "object" || current === null || !(segment in current)) {
+      throw new Error(`Unable to resolve token reference: {${path}}`);
+    }
+    return current[segment];
+  }, source);
+}
+
+// src/createTheme.ts
+function createTheme(options) {
+  const tokens = createThemeTokens(
+    options.tokens ?? defaultLightSemanticTokens,
+    options.overrides ?? {}
+  );
+  const selector = options.selector ?? getThemeSelector(options.name);
+  createGlobalThemeForSemantic(selector, themeContractForTheme, tokens);
+  return {
+    attributes: {
+      [themeAttribute]: options.name
+    },
+    className: createVanillaThemeForSemantic(vars, tokens),
+    name: options.name,
+    selector
+  };
+}
+function createThemeTokens(base, overrides = {}) {
+  return mergeTokens(base, overrides);
+}
+function mergeTokens(base, overrides) {
+  if (!isRecord(base) || !isRecord(overrides)) {
+    return overrides ?? base;
+  }
+  const merged = { ...base };
+  for (const key of Reflect.ownKeys(overrides)) {
+    merged[key] = mergeTokens(base[key], overrides[key]);
+  }
+  return merged;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+var createVanillaThemeForSemantic = createTheme$1;
+var createGlobalThemeForSemantic = createGlobalTheme;
+var themeContractForTheme = themeContract;
+
+// src/defaultTheme.css.ts
+var defaultDarkTheme = { attributes: { "data-theme": "dark" }, className: "defaultTheme__eb1mul1", name: "dark", selector: '[data-theme="dark"]' };
+var defaultDarkThemeClass = "defaultTheme__eb1mul1";
+var defaultLightTheme = { attributes: { "data-theme": "light" }, className: "defaultTheme__eb1mul0", name: "light", selector: ':root, [data-theme="light"]' };
+var defaultLightThemeClass = "defaultTheme__eb1mul0";
+var defaultThemeClass = "defaultTheme__eb1mul0";
+
+export { createTheme, createThemeTokens, defaultDarkSemanticTokenReferences, defaultDarkSemanticTokens, defaultDarkTheme, defaultDarkThemeClass, defaultDarkTokenReferences, defaultDarkTokens, defaultLightSemanticTokenReferences, defaultLightSemanticTokens, defaultLightTheme, defaultLightThemeClass, defaultLightTokenReferences, defaultLightTokens, defaultResolvedDarkSemanticTokens, defaultResolvedLightSemanticTokens, defaultResolvedSemanticTokens, defaultSemanticTokenReferences, defaultSemanticTokens, defaultThemeClass, defaultTokenReferences, defaultTokens, getThemeSelector, primitiveTokens, primitiveVars, semanticContract, semanticVars, themeAttribute, themeNames, vars };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map