@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/theme/contract.cjs

@@ -0,0 +1,246 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var contract_exports = {};
+__export(contract_exports, {
+  buildDarkThemeVars: () => buildDarkThemeVars,
+  buildLightThemeVars: () => buildLightThemeVars,
+  buildThemeCSS: () => buildThemeCSS,
+  contract: () => contract,
+  cssVar: () => cssVar
+});
+module.exports = __toCommonJS(contract_exports);
+var import_colors = require("../tokens/colors");
+var import_motion = require("../tokens/motion");
+var import_radius = require("../tokens/radius");
+var import_shadows = require("../tokens/shadows");
+var import_typography = require("../tokens/typography");
+var import_z_index = require("../tokens/z-index");
+const colorVarNames = {
+  background: "--background",
+  foreground: "--foreground",
+  surface: "--surface",
+  surfaceRaised: "--surface-raised",
+  surfaceOverlay: "--surface-overlay",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  popover: "--popover",
+  popoverForeground: "--popover-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  primaryHover: "--primary-hover",
+  primaryActive: "--primary-active",
+  primaryMuted: "--primary-muted",
+  primaryMutedForeground: "--primary-muted-foreground",
+  secondary: "--secondary",
+  secondaryForeground: "--secondary-foreground",
+  secondaryHover: "--secondary-hover",
+  secondaryActive: "--secondary-active",
+  accent: "--accent",
+  accentForeground: "--accent-foreground",
+  success: "--success",
+  successForeground: "--success-foreground",
+  successMuted: "--success-muted",
+  successMutedForeground: "--success-muted-foreground",
+  warning: "--warning",
+  warningForeground: "--warning-foreground",
+  warningMuted: "--warning-muted",
+  warningMutedForeground: "--warning-muted-foreground",
+  danger: "--danger",
+  dangerForeground: "--danger-foreground",
+  dangerHover: "--danger-hover",
+  dangerActive: "--danger-active",
+  dangerMuted: "--danger-muted",
+  dangerMutedForeground: "--danger-muted-foreground",
+  destructive: "--destructive",
+  destructiveForeground: "--destructive-foreground",
+  info: "--info",
+  infoForeground: "--info-foreground",
+  infoMuted: "--info-muted",
+  infoMutedForeground: "--info-muted-foreground",
+  border: "--border",
+  borderMuted: "--border-muted",
+  borderStrong: "--border-strong",
+  focusRing: "--focus-ring",
+  ring: "--ring",
+  input: "--input",
+  inputForeground: "--input-foreground",
+  inputPlaceholder: "--input-placeholder",
+  disabled: "--disabled",
+  disabledForeground: "--disabled-foreground",
+  chart1: "--chart-1",
+  chart2: "--chart-2",
+  chart3: "--chart-3",
+  chart4: "--chart-4",
+  chart5: "--chart-5",
+  sidebar: "--sidebar",
+  sidebarForeground: "--sidebar-foreground",
+  sidebarPrimary: "--sidebar-primary",
+  sidebarPrimaryForeground: "--sidebar-primary-foreground",
+  sidebarAccent: "--sidebar-accent",
+  sidebarAccentForeground: "--sidebar-accent-foreground",
+  sidebarBorder: "--sidebar-border",
+  sidebarRing: "--sidebar-ring"
+};
+const radiusVarNames = {
+  none: "--radius-none",
+  sm: "--radius-sm",
+  md: "--radius-md",
+  lg: "--radius-lg",
+  xl: "--radius-xl",
+  full: "--radius-full"
+};
+const shadowVarNames = {
+  none: "--shadow-none",
+  xs: "--shadow-xs",
+  sm: "--shadow-sm",
+  md: "--shadow-md",
+  lg: "--shadow-lg",
+  xl: "--shadow-xl",
+  "2xl": "--shadow-2xl",
+  focusRing: "--shadow-focus-ring"
+};
+const zIndexVarNames = {
+  base: "--z-base",
+  dropdown: "--z-dropdown",
+  sticky: "--z-sticky",
+  overlay: "--z-overlay",
+  modal: "--z-modal",
+  popover: "--z-popover",
+  toast: "--z-toast",
+  tooltip: "--z-tooltip",
+  max: "--z-max"
+};
+const durationVarNames = {
+  instant: "--duration-instant",
+  fast: "--duration-fast",
+  moderate: "--duration-moderate",
+  normal: "--duration-normal",
+  slow: "--duration-slow",
+  slower: "--duration-slower",
+  slowest: "--duration-slowest"
+};
+const easingVarNames = {
+  standard: "--easing-standard",
+  decelerate: "--easing-decelerate",
+  accelerate: "--easing-accelerate",
+  emphasize: "--easing-emphasize",
+  linear: "--easing-linear",
+  snap: "--easing-snap"
+};
+const fontFamilyVarNames = {
+  display: "--font-display",
+  sans: "--font-sans",
+  serif: "--font-serif",
+  mono: "--font-mono",
+  inherit: "--font-inherit"
+};
+function mapRecord(varNames, values) {
+  const result = {};
+  for (const key of Object.keys(varNames)) {
+    result[varNames[key]] = values[key];
+  }
+  return result;
+}
+function buildLightThemeVars() {
+  return {
+    ...mapRecord(colorVarNames, import_colors.semanticLight),
+    ...mapRecord(radiusVarNames, import_radius.radius),
+    ...mapRecord(shadowVarNames, import_shadows.shadow),
+    ...mapRecord(zIndexVarNames, import_z_index.zIndex),
+    ...mapRecord(durationVarNames, import_motion.durationCSS),
+    ...mapRecord(easingVarNames, import_motion.easingCSS),
+    ...mapRecord(fontFamilyVarNames, import_typography.fontFamily)
+  };
+}
+function buildDarkThemeVars() {
+  return {
+    ...mapRecord(colorVarNames, import_colors.semanticDark),
+    ...mapRecord(radiusVarNames, import_radius.radius),
+    ...mapRecord(shadowVarNames, import_shadows.shadowDark),
+    ...mapRecord(zIndexVarNames, import_z_index.zIndex),
+    ...mapRecord(durationVarNames, import_motion.durationCSS),
+    ...mapRecord(easingVarNames, import_motion.easingCSS),
+    ...mapRecord(fontFamilyVarNames, import_typography.fontFamily)
+  };
+}
+function varsToCSS(vars) {
+  return Object.entries(vars).map(([prop, value]) => `  ${prop}: ${value};`).join("\n");
+}
+function buildThemeCSS() {
+  const lightVars = buildLightThemeVars();
+  const darkVars = buildDarkThemeVars();
+  return `:root {
+${varsToCSS(lightVars)}
+}
+
+.dark {
+${varsToCSS(darkVars)}
+}`;
+}
+const contract = {
+  color: colorVarNames,
+  radius: radiusVarNames,
+  shadow: shadowVarNames,
+  zIndex: zIndexVarNames,
+  duration: durationVarNames,
+  easing: easingVarNames,
+  fontFamily: fontFamilyVarNames
+};
+const cssVar = {
+  /** Returns `var(--<key>)` for use in style props */
+  color: (key) => `var(${colorVarNames[key]})`,
+  /**
+   * Returns a color-mix() expression with a custom alpha channel.
+   *
+   * Because oklch values are stored as complete `oklch(L C H)` strings
+   * in the CSS custom property, you cannot directly decompose them with
+   * simple var() references. For alpha-modified colors, prefer using
+   * Tailwind's built-in opacity modifier syntax (e.g. `bg-primary/50`)
+   * or define a dedicated muted token.
+   *
+   * If you need programmatic alpha in JS, use this helper which produces
+   * a color-mix() expression for broad browser support.
+   */
+  colorAlpha: (key, alpha) => `color-mix(in oklch, var(${colorVarNames[key]}) ${Math.round(alpha * 100)}%, transparent)`,
+  /** Returns `var(--radius-<key>)` */
+  radius: (key) => `var(${radiusVarNames[key]})`,
+  /** Returns `var(--shadow-<key>)` */
+  shadow: (key) => `var(${shadowVarNames[key]})`,
+  /** Returns `var(--z-<key>)` */
+  zIndex: (key) => `var(${zIndexVarNames[key]})`,
+  /** Returns `var(--duration-<key>)` */
+  duration: (key) => `var(${durationVarNames[key]})`,
+  /** Returns `var(--easing-<key>)` */
+  easing: (key) => `var(${easingVarNames[key]})`,
+  /** Returns `var(--font-<key>)` */
+  fontFamily: (key) => `var(${fontFamilyVarNames[key]})`,
+  /** Returns the raw `var(--<key>)` — same as color() since values are complete oklch */
+  colorChannels: (key) => `var(${colorVarNames[key]})`
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildDarkThemeVars,
+  buildLightThemeVars,
+  buildThemeCSS,
+  contract,
+  cssVar
+});

package/dist/theme/contract.d.cts

@@ -0,0 +1,76 @@
+import { SemanticColorKey } from '../tokens/colors.cjs';
+import { durationCSS, easingCSS } from '../tokens/motion.cjs';
+import { radius } from '../tokens/radius.cjs';
+import { shadow } from '../tokens/shadows.cjs';
+import { fontFamily } from '../tokens/typography.cjs';
+import { zIndex } from '../tokens/z-index.cjs';
+
+declare const colorVarNames: Record<SemanticColorKey, string>;
+type RadiusKey = keyof typeof radius;
+declare const radiusVarNames: Record<RadiusKey, string>;
+type ShadowKey = keyof typeof shadow;
+declare const shadowVarNames: Record<ShadowKey, string>;
+type ZIndexKey = keyof typeof zIndex;
+declare const zIndexVarNames: Record<ZIndexKey, string>;
+type DurationKey = keyof typeof durationCSS;
+type EasingKey = keyof typeof easingCSS;
+declare const durationVarNames: Record<DurationKey, string>;
+declare const easingVarNames: Record<EasingKey, string>;
+type FontFamilyKey = keyof typeof fontFamily;
+declare const fontFamilyVarNames: Record<FontFamilyKey, string>;
+/** Generate the full set of CSS variables for the light theme */
+declare function buildLightThemeVars(): Record<string, string>;
+/** Generate the full set of CSS variables for the dark theme */
+declare function buildDarkThemeVars(): Record<string, string>;
+/** Returns the complete CSS text for both :root (light) and .dark themes */
+declare function buildThemeCSS(): string;
+declare const contract: {
+    readonly color: Record<"input" | "popover" | "disabled" | "background" | "border" | "info" | "success" | "warning" | "danger" | "primary" | "secondary" | "card" | "muted" | "sidebar" | "foreground" | "focusRing" | "surface" | "surfaceRaised" | "surfaceOverlay" | "cardForeground" | "popoverForeground" | "mutedForeground" | "primaryForeground" | "primaryHover" | "primaryActive" | "primaryMuted" | "primaryMutedForeground" | "secondaryForeground" | "secondaryHover" | "secondaryActive" | "accent" | "accentForeground" | "successForeground" | "successMuted" | "successMutedForeground" | "warningForeground" | "warningMuted" | "warningMutedForeground" | "dangerForeground" | "dangerHover" | "dangerActive" | "dangerMuted" | "dangerMutedForeground" | "destructive" | "destructiveForeground" | "infoForeground" | "infoMuted" | "infoMutedForeground" | "borderMuted" | "borderStrong" | "ring" | "inputForeground" | "inputPlaceholder" | "disabledForeground" | "chart1" | "chart2" | "chart3" | "chart4" | "chart5" | "sidebarForeground" | "sidebarPrimary" | "sidebarPrimaryForeground" | "sidebarAccent" | "sidebarAccentForeground" | "sidebarBorder" | "sidebarRing", string>;
+    readonly radius: Record<"sm" | "md" | "none" | "lg" | "xl" | "full", string>;
+    readonly shadow: Record<"sm" | "md" | "none" | "xs" | "lg" | "xl" | "2xl" | "focusRing", string>;
+    readonly zIndex: Record<"base" | "popover" | "tooltip" | "max" | "modal" | "overlay" | "sticky" | "toast" | "dropdown", string>;
+    readonly duration: Record<"instant" | "fast" | "moderate" | "normal" | "slow" | "slower" | "slowest", string>;
+    readonly easing: Record<"standard" | "decelerate" | "accelerate" | "emphasize" | "linear" | "snap", string>;
+    readonly fontFamily: Record<"inherit" | "display" | "serif" | "sans" | "mono", string>;
+};
+declare const cssVar: {
+    /** Returns `var(--<key>)` for use in style props */
+    readonly color: (key: SemanticColorKey) => string;
+    /**
+     * Returns a color-mix() expression with a custom alpha channel.
+     *
+     * Because oklch values are stored as complete `oklch(L C H)` strings
+     * in the CSS custom property, you cannot directly decompose them with
+     * simple var() references. For alpha-modified colors, prefer using
+     * Tailwind's built-in opacity modifier syntax (e.g. `bg-primary/50`)
+     * or define a dedicated muted token.
+     *
+     * If you need programmatic alpha in JS, use this helper which produces
+     * a color-mix() expression for broad browser support.
+     */
+    readonly colorAlpha: (key: SemanticColorKey, alpha: number) => string;
+    /** Returns `var(--radius-<key>)` */
+    readonly radius: (key: RadiusKey) => string;
+    /** Returns `var(--shadow-<key>)` */
+    readonly shadow: (key: ShadowKey) => string;
+    /** Returns `var(--z-<key>)` */
+    readonly zIndex: (key: ZIndexKey) => string;
+    /** Returns `var(--duration-<key>)` */
+    readonly duration: (key: DurationKey) => string;
+    /** Returns `var(--easing-<key>)` */
+    readonly easing: (key: EasingKey) => string;
+    /** Returns `var(--font-<key>)` */
+    readonly fontFamily: (key: FontFamilyKey) => string;
+    /** Returns the raw `var(--<key>)` — same as color() since values are complete oklch */
+    readonly colorChannels: (key: SemanticColorKey) => string;
+};
+type ThemeVars = ReturnType<typeof buildLightThemeVars>;
+type ColorVarName = (typeof colorVarNames)[SemanticColorKey];
+type RadiusVarName = (typeof radiusVarNames)[RadiusKey];
+type ShadowVarName = (typeof shadowVarNames)[ShadowKey];
+type ZIndexVarName = (typeof zIndexVarNames)[ZIndexKey];
+type DurationVarName = (typeof durationVarNames)[DurationKey];
+type EasingVarName = (typeof easingVarNames)[EasingKey];
+type FontFamilyVarName = (typeof fontFamilyVarNames)[FontFamilyKey];
+
+export { type ColorVarName, type DurationVarName, type EasingVarName, type FontFamilyVarName, type RadiusVarName, type ShadowVarName, type ThemeVars, type ZIndexVarName, buildDarkThemeVars, buildLightThemeVars, buildThemeCSS, contract, cssVar };

package/dist/theme/contract.d.ts

@@ -0,0 +1,76 @@
+import { SemanticColorKey } from '../tokens/colors.js';
+import { durationCSS, easingCSS } from '../tokens/motion.js';
+import { radius } from '../tokens/radius.js';
+import { shadow } from '../tokens/shadows.js';
+import { fontFamily } from '../tokens/typography.js';
+import { zIndex } from '../tokens/z-index.js';
+
+declare const colorVarNames: Record<SemanticColorKey, string>;
+type RadiusKey = keyof typeof radius;
+declare const radiusVarNames: Record<RadiusKey, string>;
+type ShadowKey = keyof typeof shadow;
+declare const shadowVarNames: Record<ShadowKey, string>;
+type ZIndexKey = keyof typeof zIndex;
+declare const zIndexVarNames: Record<ZIndexKey, string>;
+type DurationKey = keyof typeof durationCSS;
+type EasingKey = keyof typeof easingCSS;
+declare const durationVarNames: Record<DurationKey, string>;
+declare const easingVarNames: Record<EasingKey, string>;
+type FontFamilyKey = keyof typeof fontFamily;
+declare const fontFamilyVarNames: Record<FontFamilyKey, string>;
+/** Generate the full set of CSS variables for the light theme */
+declare function buildLightThemeVars(): Record<string, string>;
+/** Generate the full set of CSS variables for the dark theme */
+declare function buildDarkThemeVars(): Record<string, string>;
+/** Returns the complete CSS text for both :root (light) and .dark themes */
+declare function buildThemeCSS(): string;
+declare const contract: {
+    readonly color: Record<"input" | "popover" | "disabled" | "background" | "border" | "info" | "success" | "warning" | "danger" | "primary" | "secondary" | "card" | "muted" | "sidebar" | "foreground" | "focusRing" | "surface" | "surfaceRaised" | "surfaceOverlay" | "cardForeground" | "popoverForeground" | "mutedForeground" | "primaryForeground" | "primaryHover" | "primaryActive" | "primaryMuted" | "primaryMutedForeground" | "secondaryForeground" | "secondaryHover" | "secondaryActive" | "accent" | "accentForeground" | "successForeground" | "successMuted" | "successMutedForeground" | "warningForeground" | "warningMuted" | "warningMutedForeground" | "dangerForeground" | "dangerHover" | "dangerActive" | "dangerMuted" | "dangerMutedForeground" | "destructive" | "destructiveForeground" | "infoForeground" | "infoMuted" | "infoMutedForeground" | "borderMuted" | "borderStrong" | "ring" | "inputForeground" | "inputPlaceholder" | "disabledForeground" | "chart1" | "chart2" | "chart3" | "chart4" | "chart5" | "sidebarForeground" | "sidebarPrimary" | "sidebarPrimaryForeground" | "sidebarAccent" | "sidebarAccentForeground" | "sidebarBorder" | "sidebarRing", string>;
+    readonly radius: Record<"sm" | "md" | "none" | "lg" | "xl" | "full", string>;
+    readonly shadow: Record<"sm" | "md" | "none" | "xs" | "lg" | "xl" | "2xl" | "focusRing", string>;
+    readonly zIndex: Record<"base" | "popover" | "tooltip" | "max" | "modal" | "overlay" | "sticky" | "toast" | "dropdown", string>;
+    readonly duration: Record<"instant" | "fast" | "moderate" | "normal" | "slow" | "slower" | "slowest", string>;
+    readonly easing: Record<"standard" | "decelerate" | "accelerate" | "emphasize" | "linear" | "snap", string>;
+    readonly fontFamily: Record<"inherit" | "display" | "serif" | "sans" | "mono", string>;
+};
+declare const cssVar: {
+    /** Returns `var(--<key>)` for use in style props */
+    readonly color: (key: SemanticColorKey) => string;
+    /**
+     * Returns a color-mix() expression with a custom alpha channel.
+     *
+     * Because oklch values are stored as complete `oklch(L C H)` strings
+     * in the CSS custom property, you cannot directly decompose them with
+     * simple var() references. For alpha-modified colors, prefer using
+     * Tailwind's built-in opacity modifier syntax (e.g. `bg-primary/50`)
+     * or define a dedicated muted token.
+     *
+     * If you need programmatic alpha in JS, use this helper which produces
+     * a color-mix() expression for broad browser support.
+     */
+    readonly colorAlpha: (key: SemanticColorKey, alpha: number) => string;
+    /** Returns `var(--radius-<key>)` */
+    readonly radius: (key: RadiusKey) => string;
+    /** Returns `var(--shadow-<key>)` */
+    readonly shadow: (key: ShadowKey) => string;
+    /** Returns `var(--z-<key>)` */
+    readonly zIndex: (key: ZIndexKey) => string;
+    /** Returns `var(--duration-<key>)` */
+    readonly duration: (key: DurationKey) => string;
+    /** Returns `var(--easing-<key>)` */
+    readonly easing: (key: EasingKey) => string;
+    /** Returns `var(--font-<key>)` */
+    readonly fontFamily: (key: FontFamilyKey) => string;
+    /** Returns the raw `var(--<key>)` — same as color() since values are complete oklch */
+    readonly colorChannels: (key: SemanticColorKey) => string;
+};
+type ThemeVars = ReturnType<typeof buildLightThemeVars>;
+type ColorVarName = (typeof colorVarNames)[SemanticColorKey];
+type RadiusVarName = (typeof radiusVarNames)[RadiusKey];
+type ShadowVarName = (typeof shadowVarNames)[ShadowKey];
+type ZIndexVarName = (typeof zIndexVarNames)[ZIndexKey];
+type DurationVarName = (typeof durationVarNames)[DurationKey];
+type EasingVarName = (typeof easingVarNames)[EasingKey];
+type FontFamilyVarName = (typeof fontFamilyVarNames)[FontFamilyKey];
+
+export { type ColorVarName, type DurationVarName, type EasingVarName, type FontFamilyVarName, type RadiusVarName, type ShadowVarName, type ThemeVars, type ZIndexVarName, buildDarkThemeVars, buildLightThemeVars, buildThemeCSS, contract, cssVar };

package/dist/theme/contract.mjs

@@ -0,0 +1,221 @@
+"use client";
+import {
+  semanticDark,
+  semanticLight
+} from "../tokens/colors";
+import { durationCSS, easingCSS } from "../tokens/motion";
+import { radius } from "../tokens/radius";
+import { shadow, shadowDark } from "../tokens/shadows";
+import { fontFamily } from "../tokens/typography";
+import { zIndex } from "../tokens/z-index";
+const colorVarNames = {
+  background: "--background",
+  foreground: "--foreground",
+  surface: "--surface",
+  surfaceRaised: "--surface-raised",
+  surfaceOverlay: "--surface-overlay",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  popover: "--popover",
+  popoverForeground: "--popover-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  primaryHover: "--primary-hover",
+  primaryActive: "--primary-active",
+  primaryMuted: "--primary-muted",
+  primaryMutedForeground: "--primary-muted-foreground",
+  secondary: "--secondary",
+  secondaryForeground: "--secondary-foreground",
+  secondaryHover: "--secondary-hover",
+  secondaryActive: "--secondary-active",
+  accent: "--accent",
+  accentForeground: "--accent-foreground",
+  success: "--success",
+  successForeground: "--success-foreground",
+  successMuted: "--success-muted",
+  successMutedForeground: "--success-muted-foreground",
+  warning: "--warning",
+  warningForeground: "--warning-foreground",
+  warningMuted: "--warning-muted",
+  warningMutedForeground: "--warning-muted-foreground",
+  danger: "--danger",
+  dangerForeground: "--danger-foreground",
+  dangerHover: "--danger-hover",
+  dangerActive: "--danger-active",
+  dangerMuted: "--danger-muted",
+  dangerMutedForeground: "--danger-muted-foreground",
+  destructive: "--destructive",
+  destructiveForeground: "--destructive-foreground",
+  info: "--info",
+  infoForeground: "--info-foreground",
+  infoMuted: "--info-muted",
+  infoMutedForeground: "--info-muted-foreground",
+  border: "--border",
+  borderMuted: "--border-muted",
+  borderStrong: "--border-strong",
+  focusRing: "--focus-ring",
+  ring: "--ring",
+  input: "--input",
+  inputForeground: "--input-foreground",
+  inputPlaceholder: "--input-placeholder",
+  disabled: "--disabled",
+  disabledForeground: "--disabled-foreground",
+  chart1: "--chart-1",
+  chart2: "--chart-2",
+  chart3: "--chart-3",
+  chart4: "--chart-4",
+  chart5: "--chart-5",
+  sidebar: "--sidebar",
+  sidebarForeground: "--sidebar-foreground",
+  sidebarPrimary: "--sidebar-primary",
+  sidebarPrimaryForeground: "--sidebar-primary-foreground",
+  sidebarAccent: "--sidebar-accent",
+  sidebarAccentForeground: "--sidebar-accent-foreground",
+  sidebarBorder: "--sidebar-border",
+  sidebarRing: "--sidebar-ring"
+};
+const radiusVarNames = {
+  none: "--radius-none",
+  sm: "--radius-sm",
+  md: "--radius-md",
+  lg: "--radius-lg",
+  xl: "--radius-xl",
+  full: "--radius-full"
+};
+const shadowVarNames = {
+  none: "--shadow-none",
+  xs: "--shadow-xs",
+  sm: "--shadow-sm",
+  md: "--shadow-md",
+  lg: "--shadow-lg",
+  xl: "--shadow-xl",
+  "2xl": "--shadow-2xl",
+  focusRing: "--shadow-focus-ring"
+};
+const zIndexVarNames = {
+  base: "--z-base",
+  dropdown: "--z-dropdown",
+  sticky: "--z-sticky",
+  overlay: "--z-overlay",
+  modal: "--z-modal",
+  popover: "--z-popover",
+  toast: "--z-toast",
+  tooltip: "--z-tooltip",
+  max: "--z-max"
+};
+const durationVarNames = {
+  instant: "--duration-instant",
+  fast: "--duration-fast",
+  moderate: "--duration-moderate",
+  normal: "--duration-normal",
+  slow: "--duration-slow",
+  slower: "--duration-slower",
+  slowest: "--duration-slowest"
+};
+const easingVarNames = {
+  standard: "--easing-standard",
+  decelerate: "--easing-decelerate",
+  accelerate: "--easing-accelerate",
+  emphasize: "--easing-emphasize",
+  linear: "--easing-linear",
+  snap: "--easing-snap"
+};
+const fontFamilyVarNames = {
+  display: "--font-display",
+  sans: "--font-sans",
+  serif: "--font-serif",
+  mono: "--font-mono",
+  inherit: "--font-inherit"
+};
+function mapRecord(varNames, values) {
+  const result = {};
+  for (const key of Object.keys(varNames)) {
+    result[varNames[key]] = values[key];
+  }
+  return result;
+}
+function buildLightThemeVars() {
+  return {
+    ...mapRecord(colorVarNames, semanticLight),
+    ...mapRecord(radiusVarNames, radius),
+    ...mapRecord(shadowVarNames, shadow),
+    ...mapRecord(zIndexVarNames, zIndex),
+    ...mapRecord(durationVarNames, durationCSS),
+    ...mapRecord(easingVarNames, easingCSS),
+    ...mapRecord(fontFamilyVarNames, fontFamily)
+  };
+}
+function buildDarkThemeVars() {
+  return {
+    ...mapRecord(colorVarNames, semanticDark),
+    ...mapRecord(radiusVarNames, radius),
+    ...mapRecord(shadowVarNames, shadowDark),
+    ...mapRecord(zIndexVarNames, zIndex),
+    ...mapRecord(durationVarNames, durationCSS),
+    ...mapRecord(easingVarNames, easingCSS),
+    ...mapRecord(fontFamilyVarNames, fontFamily)
+  };
+}
+function varsToCSS(vars) {
+  return Object.entries(vars).map(([prop, value]) => `  ${prop}: ${value};`).join("\n");
+}
+function buildThemeCSS() {
+  const lightVars = buildLightThemeVars();
+  const darkVars = buildDarkThemeVars();
+  return `:root {
+${varsToCSS(lightVars)}
+}
+
+.dark {
+${varsToCSS(darkVars)}
+}`;
+}
+const contract = {
+  color: colorVarNames,
+  radius: radiusVarNames,
+  shadow: shadowVarNames,
+  zIndex: zIndexVarNames,
+  duration: durationVarNames,
+  easing: easingVarNames,
+  fontFamily: fontFamilyVarNames
+};
+const cssVar = {
+  /** Returns `var(--<key>)` for use in style props */
+  color: (key) => `var(${colorVarNames[key]})`,
+  /**
+   * Returns a color-mix() expression with a custom alpha channel.
+   *
+   * Because oklch values are stored as complete `oklch(L C H)` strings
+   * in the CSS custom property, you cannot directly decompose them with
+   * simple var() references. For alpha-modified colors, prefer using
+   * Tailwind's built-in opacity modifier syntax (e.g. `bg-primary/50`)
+   * or define a dedicated muted token.
+   *
+   * If you need programmatic alpha in JS, use this helper which produces
+   * a color-mix() expression for broad browser support.
+   */
+  colorAlpha: (key, alpha) => `color-mix(in oklch, var(${colorVarNames[key]}) ${Math.round(alpha * 100)}%, transparent)`,
+  /** Returns `var(--radius-<key>)` */
+  radius: (key) => `var(${radiusVarNames[key]})`,
+  /** Returns `var(--shadow-<key>)` */
+  shadow: (key) => `var(${shadowVarNames[key]})`,
+  /** Returns `var(--z-<key>)` */
+  zIndex: (key) => `var(${zIndexVarNames[key]})`,
+  /** Returns `var(--duration-<key>)` */
+  duration: (key) => `var(${durationVarNames[key]})`,
+  /** Returns `var(--easing-<key>)` */
+  easing: (key) => `var(${easingVarNames[key]})`,
+  /** Returns `var(--font-<key>)` */
+  fontFamily: (key) => `var(${fontFamilyVarNames[key]})`,
+  /** Returns the raw `var(--<key>)` — same as color() since values are complete oklch */
+  colorChannels: (key) => `var(${colorVarNames[key]})`
+};
+export {
+  buildDarkThemeVars,
+  buildLightThemeVars,
+  buildThemeCSS,
+  contract,
+  cssVar
+};