@tac-ui/tokens 0.1.0

package/dist/web/css-variables.js

@@ -0,0 +1,946 @@
+'use strict';
+
+// src/semantic.ts
+var semanticTokens = {
+  light: {
+    // ── Canvas & Surface (Off-white paper base) ──
+    background: "#FAFAFA",
+    // Off-white base
+    backgroundSubtle: "#F4F4F5",
+    // Slightly darker gray
+    surface: "#FCFCFC",
+    // Just faintly off-white surface
+    surfaceHover: "#F4F4F5",
+    surfaceBase: "#FAFAFA",
+    surfaceElevatedLow: "#FCFCFC",
+    surfaceElevatedMid: "#FCFCFC",
+    surfaceElevatedHigh: "#FCFCFC",
+    card: "#FCFCFC",
+    cardForeground: "#121212",
+    // Barely off-black
+    // ── Text ──
+    foreground: "#121212",
+    muted: "#F4F4F5",
+    mutedForeground: "#71717A",
+    // ── Brand ──
+    primary: "#1E232D",
+    // Iron Navy
+    primaryHover: "#2A303D",
+    // Slightly lighter for hover
+    primaryForeground: "#FAFAFA",
+    secondary: "#E4E4E7",
+    // Darkened from F4F4F5 for better visibility
+    secondaryForeground: "#1E232D",
+    ring: "#1E232D",
+    // ── Point / Accent (Steel Navy) ──
+    point: "#323944",
+    pointHover: "#4A5361",
+    pointForeground: "#FAFAFA",
+    pointSubtle: "rgba(30, 35, 45, 0.08)",
+    // ── Border ──
+    border: "#E4E4E7",
+    input: "#E4E4E7",
+    // ── Gray Scale ──
+    gray50: "#FAFAFA",
+    gray100: "#F4F4F5",
+    gray200: "#E4E4E7",
+    gray300: "#D4D4D8",
+    gray400: "#A1A1AA",
+    gray500: "#71717A",
+    gray600: "#52525B",
+    gray700: "#3F3F46",
+    gray800: "#27272A",
+    gray900: "#18181B",
+    // ── Glass & Effects ──
+    glassBg: "rgba(252, 252, 252, 0.85)",
+    glassBorder: "rgba(18, 18, 18, 0.04)",
+    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.6)",
+    glassPanelShadow: "0 12px 40px rgba(18, 18, 18, 0.04), 0 1px 3px rgba(18, 18, 18, 0.02)",
+    accentGlow: "0 0 0 transparent",
+    // ── Gradients ──
+    gradientBrand: "none",
+    gradientBrandHover: "none",
+    gradientSubtle: "none",
+    gradientAccent: "none",
+    gradientAccentVivid: "none",
+    gradientGlow: "none",
+    gradientMesh: "none",
+    gradientSurface: "none",
+    gradientGlowShadow: "none",
+    // ── Shadow ──
+    shadowColor: "rgba(18, 18, 18, 0.05)",
+    // ── Status ──
+    success: "#1A4331",
+    successBg: "#EAF1EC",
+    successForeground: "#1A4331",
+    warning: "#8A6D3B",
+    warningBg: "#F7F3EA",
+    warningForeground: "#8A6D3B",
+    error: "#7C2128",
+    errorBg: "#F4EAEB",
+    errorForeground: "#7C2128",
+    info: "#121212",
+    infoBg: "#FAFAFA",
+    infoForeground: "#121212",
+    // ── Interaction States ──
+    interactiveHover: "rgba(18, 18, 18, 0.04)",
+    interactivePressed: "rgba(18, 18, 18, 0.08)",
+    interactiveFocus: "#121212",
+    interactiveSurfaceTint: "rgba(18, 18, 18, 0.02)",
+    interactiveHoverTint: "rgba(18, 18, 18, 0.04)",
+    focusGlow: "0 0 0 2px #E4E4E7",
+    pointGlow: "0 0 0 2px rgba(18, 18, 18, 0.15)",
+    // ── Components ──
+    btnPrimarySurface: "#1E232D",
+    btnPrimaryHover: "#2A303D",
+    btnPrimaryEnergy: "0 4px 12px rgba(30, 35, 45, 0.16)",
+    btnPrimaryInset: "none",
+    btnSecondarySurface: "#E4E4E7",
+    btnSecondaryHover: "#D4D4D8",
+    btnOutlineBorder: "#E4E4E7",
+    btnOutlineBorderHover: "#D4D4D8",
+    btnOutlineHoverBg: "#F4F4F5",
+    btnGhostHover: "#F4F4F5",
+    btnPointSurface: "#323944",
+    btnPointBorder: "transparent",
+    btnPointHoverSurface: "#4A5361",
+    btnPointHoverBorder: "transparent",
+    btnPointEnergy: "0 4px 12px rgba(50, 57, 68, 0.2)",
+    btnDestructiveSurface: "#7C2128",
+    btnDestructiveHover: "#5B171D",
+    inputBg: "#FCFCFC",
+    inputBorderRest: "#E4E4E7",
+    inputBorderHover: "#A1A1AA",
+    inputHoverGlow: "0 0 0 2px #F4F4F5",
+    inputFocusGlow: "0 0 0 2px #E4E4E7",
+    inputErrorGlow: "0 0 0 2px #F4EAEB",
+    dropdownBg: "#FCFCFC",
+    dropdownShadow: "0 20px 25px -5px rgba(18, 18, 18, 0.08), 0 0 0 1px rgba(18, 18, 18, 0.03)",
+    dropdownItemHover: "#F4F4F5",
+    cardAccentBorder: "#E4E4E7",
+    cardAccentGlow: "none",
+    cardAccentHoverBorder: "#D4D4D8",
+    cardAccentHoverGlow: "0 8px 24px rgba(18, 18, 18, 0.06)"
+  },
+  dark: {
+    // ── Canvas & Surface (High-Contrast Charcoal Base) ──
+    background: "#121214",
+    // Off-black charcoal
+    backgroundSubtle: "#18181A",
+    // Zinc 900
+    surface: "#27272A",
+    // Zinc 800 - distinct from subtle background
+    surfaceHover: "#3F3F46",
+    // Zinc 700
+    surfaceBase: "#121214",
+    surfaceElevatedLow: "#18181A",
+    surfaceElevatedMid: "#27272A",
+    surfaceElevatedHigh: "#3F3F46",
+    card: "#18181A",
+    // Zinc 900
+    cardForeground: "#F4F4F5",
+    // Off-white
+    // ── Text ──
+    foreground: "#F4F4F5",
+    // Off-white
+    muted: "#27272A",
+    // Zinc 800
+    mutedForeground: "#A1A1AA",
+    // Zinc 400
+    // ── Brand (Iron Navy Light / Cold Steel Blue-Gray) ──
+    primary: "#B8C4D9",
+    primaryHover: "#D1DBE8",
+    primaryForeground: "#1E232D",
+    // Deep Iron Navy text
+    secondary: "#27272A",
+    secondaryForeground: "#B8C4D9",
+    ring: "#B8C4D9",
+    // ── Point / Accent (Lighter Steel Blue-Gray) ──
+    point: "#D1DBE8",
+    pointHover: "#E6ECEF",
+    pointForeground: "#1E232D",
+    pointSubtle: "rgba(209, 219, 232, 0.12)",
+    // ── Border (Highly Visible) ──
+    border: "#3F3F46",
+    // Zinc 700
+    input: "#3F3F46",
+    // ── Gray Scale (Zinc) ──
+    gray50: "#121214",
+    gray100: "#18181A",
+    gray200: "#27272A",
+    gray300: "#3F3F46",
+    gray400: "#52525B",
+    gray500: "#71717A",
+    gray600: "#A1A1AA",
+    gray700: "#D4D4D8",
+    gray800: "#E4E4E7",
+    gray900: "#FAFAFA",
+    // ── Glass & Effects ──
+    glassBg: "rgba(18, 18, 20, 0.85)",
+    glassBorder: "rgba(250, 250, 250, 0.1)",
+    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
+    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
+    accentGlow: "none",
+    // ── Gradients ──
+    gradientBrand: "none",
+    gradientBrandHover: "none",
+    gradientSubtle: "none",
+    gradientAccent: "none",
+    gradientAccentVivid: "none",
+    gradientGlow: "none",
+    gradientMesh: "none",
+    gradientSurface: "none",
+    gradientGlowShadow: "none",
+    // ── Shadow ──
+    shadowColor: "rgba(0, 0, 0, 0.9)",
+    // ── Status (Deep & Clear) ──
+    success: "#34D399",
+    successBg: "rgba(52, 211, 153, 0.15)",
+    successForeground: "#34D399",
+    warning: "#FBBF24",
+    warningBg: "rgba(251, 191, 36, 0.15)",
+    warningForeground: "#FBBF24",
+    error: "#F87171",
+    errorBg: "rgba(248, 113, 113, 0.15)",
+    errorForeground: "#F87171",
+    info: "#FAFAFA",
+    infoBg: "rgba(250, 250, 250, 0.15)",
+    infoForeground: "#FAFAFA",
+    // ── Interaction States ──
+    interactiveHover: "rgba(250, 250, 250, 0.08)",
+    interactivePressed: "rgba(250, 250, 250, 0.12)",
+    interactiveFocus: "#FAFAFA",
+    interactiveSurfaceTint: "rgba(250, 250, 250, 0.04)",
+    interactiveHoverTint: "rgba(250, 250, 250, 0.08)",
+    focusGlow: "0 0 0 2px #3F3F46",
+    pointGlow: "0 0 0 2px rgba(250, 250, 250, 0.3)",
+    // ── Components ──
+    btnPrimarySurface: "#B8C4D9",
+    btnPrimaryHover: "#D1DBE8",
+    btnPrimaryEnergy: "0 4px 16px rgba(184, 196, 217, 0.25)",
+    btnPrimaryInset: "none",
+    btnSecondarySurface: "#27272A",
+    btnSecondaryHover: "#3F3F46",
+    btnOutlineBorder: "#3F3F46",
+    btnOutlineBorderHover: "#52525B",
+    btnOutlineHoverBg: "#27272A",
+    btnGhostHover: "#27272A",
+    btnPointSurface: "#D1DBE8",
+    btnPointBorder: "transparent",
+    btnPointHoverSurface: "#E6ECEF",
+    btnPointHoverBorder: "transparent",
+    btnPointEnergy: "0 4px 16px rgba(209, 219, 232, 0.25)",
+    btnDestructiveSurface: "#7C2128",
+    btnDestructiveHover: "#9A2A32",
+    inputBg: "#18181A",
+    inputBorderRest: "#3F3F46",
+    inputBorderHover: "#52525B",
+    inputHoverGlow: "0 0 0 2px #27272A",
+    inputFocusGlow: "0 0 0 2px #3F3F46",
+    inputErrorGlow: "0 0 0 2px #3E1014",
+    dropdownBg: "#18181A",
+    dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250,250,250,0.1)",
+    dropdownItemHover: "#27272A",
+    cardAccentBorder: "#3F3F46",
+    cardAccentGlow: "none",
+    cardAccentHoverBorder: "#52525B",
+    cardAccentHoverGlow: "0 8px 24px rgba(0, 0, 0, 0.8)"
+  }
+};
+
+// src/chart.ts
+var chart = {
+  light: {
+    colors: [
+      "#1E232D",
+      // chart-1: Iron Navy (Primary)
+      "#323944",
+      // chart-2: Steel Navy (Secondary)
+      "#4A5361",
+      // chart-3: Slate Navy (Tertiary)
+      "#71717A",
+      // chart-4: Zinc 500 (Accent 1)
+      "#A1A1AA",
+      // chart-5: Zinc 400 (Accent 2)
+      "#D4D4D8",
+      // chart-6: Zinc 300 (Fill)
+      "#0F172A",
+      // chart-7: Deep Slate 900 (Deep Fill)
+      "#E4E4E7"
+      // chart-8: Zinc 200 (Light Fill)
+    ],
+    grid: "rgba(30, 35, 45, 0.04)",
+    axis: "rgba(30, 35, 45, 0.08)",
+    label: "#71717A",
+    // Zinc 500
+    tooltipBg: "#FFFFFF"
+  },
+  dark: {
+    colors: [
+      "#B8C4D9",
+      // chart-1: Bright Ice Navy (Primary)
+      "#D1DBE8",
+      // chart-2: Ice Steel (Secondary)
+      "#E6ECEF",
+      // chart-3: Pale Silver (Tertiary)
+      "#A1A1AA",
+      // chart-4: Zinc 400 (Accent 1)
+      "#71717A",
+      // chart-5: Zinc 500 (Accent 2)
+      "#808B9D",
+      // chart-6: Cold Steel (Fill)
+      "#FFFFFF",
+      // chart-7: Pure White (Highlight)
+      "#52525B"
+      // chart-8: Zinc 600 (Deep Fill)
+    ],
+    grid: "rgba(255, 255, 255, 0.04)",
+    axis: "rgba(255, 255, 255, 0.06)",
+    label: "#A1A1AA",
+    // Zinc 400
+    tooltipBg: "#18181A"
+    // Off-black chart tooltip matches dropdowns
+  },
+  lineWidth: 1.5,
+  dotSize: 2.5,
+  barRadius: 4,
+  areaOpacity: 0.08
+};
+
+// src/spacing.ts
+var spacing = {
+  "2xs": 2,
+  xs: 4,
+  sm: 8,
+  m: 16,
+  lg: 24,
+  xl: 40,
+  "2xl": 56,
+  "3xl": 80
+};
+var radius = {
+  none: 0,
+  xs: 4,
+  sm: 6,
+  m: 10,
+  lg: 14,
+  xl: 20,
+  "2xl": 24,
+  pill: 9999
+};
+
+// src/elevation.ts
+var elevation = {
+  light: {
+    sm: "0 1px 2px rgba(94,94,94,0.04), 0 1px 3px rgba(94,94,94,0.02)",
+    m: "0 2px 4px rgba(94,94,94,0.04), 0 8px 16px rgba(94,94,94,0.04)",
+    lg: "0 4px 8px rgba(94,94,94,0.05), 0 16px 32px rgba(94,94,94,0.06)",
+    xl: "0 8px 16px rgba(94,94,94,0.06), 0 24px 48px rgba(94,94,94,0.08)",
+    glass: "0 4px 24px rgba(94,94,94,0.05), 0 1px 2px rgba(94,94,94,0.02)",
+    glassLg: "0 8px 32px rgba(94,94,94,0.08), 0 2px 4px rgba(94,94,94,0.03)"
+  },
+  dark: {
+    sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
+    m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
+    lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
+    xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
+    glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)",
+    glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)"
+  }
+};
+var zIndex = {
+  dropdown: 1e3,
+  sticky: 1100,
+  overlay: 1200,
+  modal: 1300,
+  popover: 1400,
+  tooltip: 1500,
+  toast: 1600
+};
+var motion = {
+  duration: {
+    instant: 80,
+    fast: 150,
+    normal: 220,
+    slow: 320,
+    complex: 450
+  },
+  easing: {
+    /** Dia's signature curve — slight overshoot with smooth natural deceleration. */
+    standard: "cubic-bezier(0.22, 1, 0.36, 1)",
+    /** Exit easing — fast acceleration, abrupt departure. */
+    easeIn: "cubic-bezier(0.55, 0, 1, 0.45)",
+    /** Entrance easing — gentle deceleration without overshoot. */
+    easeOut: "cubic-bezier(0, 0.55, 0.45, 1)",
+    /** Symmetric ease — smooth in both directions. */
+    easeInOut: "cubic-bezier(0.65, 0, 0.35, 1)",
+    /** Playful overshoot — for toggles, switches, confirmatory feedback. */
+    bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    /** Stronger spring feel — deliberate physical presence. */
+    spring: "cubic-bezier(0.22, 1.2, 0.36, 1)",
+    /** Subtle rubber-band — elastic resistance with quick snap back. */
+    elastic: "cubic-bezier(0.68, -0.2, 0.265, 1.2)"
+  },
+  /** Standard animation keyframe presets for reuse across components. */
+  keyframes: {
+    fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
+    fadeOut: { from: { opacity: "1" }, to: { opacity: "0" } },
+    /** Blur entrance — element fades in from blurry with subtle upward spring motion. */
+    blurFadeIn: {
+      from: { opacity: "0", filter: "blur(4px)", transform: "translateY(4px)" },
+      to: { opacity: "1", filter: "blur(0px)", transform: "translateY(0)" }
+    },
+    /** Blur scale entrance — deblurs while gently scaling up from slight compression. */
+    blurScaleIn: {
+      from: { opacity: "0", filter: "blur(3px)", transform: "scale(0.98)" },
+      to: { opacity: "1", filter: "blur(0px)", transform: "scale(1)" }
+    },
+    /** Slide entrance from below — element springs up from offset position. */
+    slideInUp: { from: { opacity: "0", transform: "translateY(5px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+    /** Slide entrance from above — element springs down from offset position. */
+    slideInDown: { from: { opacity: "0", transform: "translateY(-5px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+    /** Slide entrance from left — element springs in from offset. */
+    slideInLeft: { from: { opacity: "0", transform: "translateX(-5px)" }, to: { opacity: "1", transform: "translateX(0)" } },
+    /** Slide entrance from right — element springs in from offset. */
+    slideInRight: { from: { opacity: "0", transform: "translateX(5px)" }, to: { opacity: "1", transform: "translateX(0)" } },
+    /** Scale entrance — element inflates from slight compression. */
+    scaleIn: { from: { opacity: "0", transform: "scale(0.98)" }, to: { opacity: "1", transform: "scale(1)" } },
+    scaleOut: { from: { opacity: "1", transform: "scale(1)" }, to: { opacity: "0", transform: "scale(0.98)" } },
+    /** Zoom entrance — element arrives from meaningful distance, not just nearby. */
+    zoomIn: { from: { opacity: "0", transform: "scale(0.92)" }, to: { opacity: "1", transform: "scale(1)" } },
+    /** Press feedback — subtle scale to confirm tap/click with physical weight. */
+    pressDown: { from: { transform: "scale(1)" }, to: { transform: "scale(0.98)" } },
+    /** Press keyframes — clean squish held at destination. */
+    elasticPress: {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(0.98)" },
+      "100%": { transform: "scale(0.98)" }
+    },
+    /** Release keyframes — spring overshoots slightly then resolves to rest. */
+    elasticRelease: {
+      "0%": { transform: "scale(0.98)" },
+      "50%": { transform: "scale(1.005)" },
+      "100%": { transform: "scale(1)" }
+    },
+    /** Lift — subtle elevation shift on hover, element has mass. */
+    liftUp: { from: { transform: "translateY(0)" }, to: { transform: "translateY(-1px)" } },
+    /** Glow pulse — ambient glow to indicate active state. */
+    glowPulse: {
+      "0%, 100%": { boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)" },
+      "50%": { boxShadow: "0 0 12px 2px color-mix(in srgb, var(--point) 20%, transparent)" }
+    },
+    shimmer: {
+      "0%": { backgroundPosition: "-200% 0" },
+      "100%": { backgroundPosition: "200% 0" }
+    },
+    gradientShimmer: {
+      "0%": { backgroundPosition: "0% 50%" },
+      "50%": { backgroundPosition: "100% 50%" },
+      "100%": { backgroundPosition: "0% 50%" }
+    },
+    /** Gradient glow — soft glow for decorative emphasis. */
+    gradientGlow: {
+      "0%, 100%": { boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)" },
+      "50%": { boxShadow: "0 0 16px 3px color-mix(in srgb, var(--point) 15%, transparent)" }
+    },
+    /** Spotlight pulse — radial glow that breathes gently. */
+    spotlightPulse: {
+      "0%, 100%": { opacity: "0" },
+      "50%": { opacity: "1" }
+    },
+    spin: { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } },
+    pulse: { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.5" } },
+    bounce: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-2px)" } },
+    /** Float — gentle hovering motion with spring-like rhythm. */
+    float: {
+      "0%, 100%": { transform: "translateY(0)" },
+      "50%": { transform: "translateY(-2px)" }
+    }
+  }};
+
+// src/typography.ts
+var typography = {
+  fontFamily: {
+    primary: "Pretendard",
+    secondary: "Pretendard",
+    display: "Pretendard"
+  }};
+
+// src/component.ts
+var component = {
+  button: {
+    sm: { height: 34, paddingX: 18, fontSize: 12, borderRadius: 8},
+    md: { height: 42, paddingX: 28, fontSize: 13, borderRadius: 10, iconSize: 18 },
+    lg: { height: 50, paddingX: 36, fontSize: 15, borderRadius: 14}
+  },
+  input: {
+    height: 42,
+    paddingX: 18,
+    paddingY: 12,
+    fontSize: 14,
+    borderRadius: 10,
+    iconSize: 18,
+    iconPadding: 42
+  },
+  card: {
+    padding: 28,
+    gap: 20,
+    borderRadius: 16,
+    titleSize: 17,
+    bodySize: 14
+  },
+  badge: {
+    paddingX: 12,
+    paddingY: 6,
+    fontSize: 12,
+    borderRadius: 9999
+  },
+  checkbox: {
+    gap: 12,
+    size: 20,
+    borderRadius: 6,
+    borderWidth: 2,
+    iconSize: 14,
+    labelSize: 14
+  },
+  radio: {
+    gap: 12,
+    size: 20,
+    borderWidth: 2,
+    checkedBorderWidth: 6,
+    labelSize: 14
+  },
+  switch: {
+    width: 52,
+    height: 32,
+    thumbSize: 24,
+    thumbOffset: 4,
+    thumbTranslateOn: 24,
+    thumbTranslateOff: 4
+  },
+  chip: {
+    paddingX: 16,
+    paddingY: 8,
+    fontSize: 13,
+    borderRadius: 9999,
+    iconSize: 14},
+  tabs: {
+    primary: {
+      paddingX: 20,
+      paddingY: 12,
+      fontSize: 14,
+      indicatorHeight: 2
+    },
+    secondary: {
+      paddingX: 20,
+      paddingY: 8,
+      fontSize: 13,
+      containerPadding: 4,
+      containerRadius: 14,
+      itemRadius: 10
+    }
+  },
+  slider: {
+    trackHeight: 6,
+    thumbSize: 20,
+    thumbBorderWidth: 2
+  },
+  tooltip: {
+    simple: { paddingX: 14, paddingY: 8, fontSize: 13, borderRadius: 10 },
+    rich: { paddingX: 16, paddingY: 10, maxWidth: 240, borderRadius: 10 }},
+  avatar: {
+    sm: { size: 28},
+    md: { size: 36},
+    lg: { size: 48},
+    xl: { size: 64},
+    statusDot: 10,
+    statusBorder: 2
+  },
+  divider: {
+    thickness: 1,
+    thickThickness: 8,
+    insetMargin: 64,
+    labelSize: 12
+  },
+  progress: {
+    linear: { height: 8, borderRadius: 9999 },
+    circular: { strokeWidth: 4, textSize: 14 }
+  },
+  snackbar: {
+    borderRadius: 14,
+    gap: 12,
+    iconSize: 18,
+    messageSize: 14,
+    actionPaddingX: 14,
+    actionPaddingY: 6,
+    actionRadius: 8,
+    actionSize: 13
+  },
+  dialog: {
+    width: 380,
+    borderRadius: 20,
+    headerPaddingX: 28,
+    headerPaddingY: 24,
+    footerPaddingX: 28,
+    footerPaddingY: 20,
+    titleSize: 17,
+    descSize: 14,
+    footerGap: 14
+  },
+  animatedToggle: {
+    size: 40,
+    borderRadius: 10,
+    iconSize: 20
+  }
+};
+
+// src/web/unit-utils.ts
+function rem(v) {
+  return `${v / 16}rem`;
+}
+function px(v) {
+  return `${v}px`;
+}
+function ms(v) {
+  return `${v}ms`;
+}
+function unitless(v) {
+  return `${v}`;
+}
+
+// src/web/css-variables.ts
+function generateCSSVariables(mode) {
+  const colors = semanticTokens[mode];
+  const chartTokens = chart[mode];
+  const elevationMode = elevation[mode];
+  return {
+    // Font
+    "--font-primary": `'${typography.fontFamily.primary}', -apple-system, BlinkMacSystemFont, system-ui, sans-serif`,
+    "--font-secondary": `'${typography.fontFamily.secondary}', sans-serif`,
+    "--font-display": `'${typography.fontFamily.display}', '${typography.fontFamily.primary}', sans-serif`,
+    // Colors
+    "--background": colors.background,
+    "--background-subtle": colors.backgroundSubtle,
+    "--foreground": colors.foreground,
+    "--surface": colors.surface,
+    "--surface-hover": colors.surfaceHover,
+    "--primary": colors.primary,
+    "--primary-hover": colors.primaryHover,
+    "--primary-foreground": colors.primaryForeground,
+    "--secondary": colors.secondary,
+    "--secondary-foreground": colors.secondaryForeground,
+    "--muted": colors.muted,
+    "--muted-foreground": colors.mutedForeground,
+    "--card": colors.card,
+    "--card-foreground": colors.cardForeground,
+    "--border": colors.border,
+    "--input": colors.input,
+    "--ring": colors.ring,
+    "--point": colors.point,
+    "--point-hover": colors.pointHover,
+    "--point-foreground": colors.pointForeground,
+    "--point-subtle": colors.pointSubtle,
+    "--accent-glow": colors.accentGlow,
+    // Glass
+    "--glass-bg": colors.glassBg,
+    "--glass-border": colors.glassBorder,
+    // Gradients
+    "--gradient-brand": colors.gradientBrand,
+    "--gradient-brand-hover": colors.gradientBrandHover,
+    "--gradient-subtle": colors.gradientSubtle,
+    "--gradient-accent": colors.gradientAccent,
+    "--gradient-accent-vivid": colors.gradientAccentVivid,
+    "--gradient-glow": colors.gradientGlow,
+    "--gradient-mesh": colors.gradientMesh,
+    "--gradient-surface": colors.gradientSurface,
+    "--gradient-glow-shadow": colors.gradientGlowShadow,
+    // Status
+    "--success": colors.success,
+    "--success-bg": colors.successBg,
+    "--success-foreground": colors.successForeground,
+    "--warning": colors.warning,
+    "--warning-bg": colors.warningBg,
+    "--warning-foreground": colors.warningForeground,
+    "--error": colors.error,
+    "--error-bg": colors.errorBg,
+    "--error-foreground": colors.errorForeground,
+    "--info": colors.info,
+    "--info-bg": colors.infoBg,
+    "--info-foreground": colors.infoForeground,
+    "--shadow-color": colors.shadowColor,
+    // Gray scale
+    "--gray-50": colors.gray50,
+    "--gray-100": colors.gray100,
+    "--gray-200": colors.gray200,
+    "--gray-300": colors.gray300,
+    "--gray-400": colors.gray400,
+    "--gray-500": colors.gray500,
+    "--gray-600": colors.gray600,
+    "--gray-700": colors.gray700,
+    "--gray-800": colors.gray800,
+    "--gray-900": colors.gray900,
+    // Surface layers
+    "--surface-base": colors.surfaceBase,
+    "--surface-elevated-low": colors.surfaceElevatedLow,
+    "--surface-elevated-mid": colors.surfaceElevatedMid,
+    "--surface-elevated-high": colors.surfaceElevatedHigh,
+    // Interaction states
+    "--interactive-hover": colors.interactiveHover,
+    "--interactive-pressed": colors.interactivePressed,
+    "--interactive-focus": colors.interactiveFocus,
+    // Button tokens
+    "--btn-primary-surface": colors.btnPrimarySurface,
+    "--btn-primary-hover": colors.btnPrimaryHover,
+    "--btn-primary-energy": colors.btnPrimaryEnergy,
+    "--btn-primary-inset": colors.btnPrimaryInset,
+    "--btn-secondary-surface": colors.btnSecondarySurface,
+    "--btn-secondary-hover": colors.btnSecondaryHover,
+    "--btn-outline-border": colors.btnOutlineBorder,
+    "--btn-outline-border-hover": colors.btnOutlineBorderHover,
+    "--btn-outline-hover-bg": colors.btnOutlineHoverBg,
+    "--btn-ghost-hover": colors.btnGhostHover,
+    "--btn-point-surface": colors.btnPointSurface,
+    "--btn-point-border": colors.btnPointBorder,
+    "--btn-point-hover-surface": colors.btnPointHoverSurface,
+    "--btn-point-hover-border": colors.btnPointHoverBorder,
+    "--btn-point-energy": colors.btnPointEnergy,
+    "--btn-destructive-surface": colors.btnDestructiveSurface,
+    "--btn-destructive-hover": colors.btnDestructiveHover,
+    // Shared interactive tokens
+    "--interactive-surface-tint": colors.interactiveSurfaceTint,
+    "--interactive-hover-tint": colors.interactiveHoverTint,
+    "--focus-glow": colors.focusGlow,
+    "--point-glow": colors.pointGlow,
+    "--glass-inset": colors.glassInset,
+    "--glass-panel-shadow": colors.glassPanelShadow,
+    // Input tokens
+    "--input-bg": colors.inputBg,
+    "--input-border-rest": colors.inputBorderRest,
+    "--input-border-hover": colors.inputBorderHover,
+    "--input-hover-glow": colors.inputHoverGlow,
+    "--input-focus-glow": colors.inputFocusGlow,
+    "--input-error-glow": colors.inputErrorGlow,
+    // Dropdown tokens
+    "--dropdown-bg": colors.dropdownBg,
+    "--dropdown-shadow": colors.dropdownShadow,
+    "--dropdown-item-hover": colors.dropdownItemHover,
+    // Card accent tokens
+    "--card-accent-border": colors.cardAccentBorder,
+    "--card-accent-glow": colors.cardAccentGlow,
+    "--card-accent-hover-border": colors.cardAccentHoverBorder,
+    "--card-accent-hover-glow": colors.cardAccentHoverGlow,
+    // Spacing
+    "--spacing-2xs": rem(spacing["2xs"]),
+    "--spacing-xs": rem(spacing.xs),
+    "--spacing-sm": rem(spacing.sm),
+    "--spacing-m": rem(spacing.m),
+    "--spacing-lg": rem(spacing.lg),
+    "--spacing-xl": rem(spacing.xl),
+    "--spacing-2xl": rem(spacing["2xl"]),
+    "--spacing-3xl": rem(spacing["3xl"]),
+    // Radius
+    "--radius-none": unitless(radius.none),
+    "--radius-xs": rem(radius.xs),
+    "--radius-sm": rem(radius.sm),
+    "--radius-m": rem(radius.m),
+    "--radius-lg": rem(radius.lg),
+    "--radius-xl": rem(radius.xl),
+    "--radius-2xl": rem(radius["2xl"]),
+    "--radius-pill": px(radius.pill),
+    // Elevation
+    "--shadow-sm": elevationMode.sm,
+    "--shadow-m": elevationMode.m,
+    "--shadow-lg": elevationMode.lg,
+    "--shadow-xl": elevationMode.xl,
+    "--shadow-glass": elevationMode.glass,
+    "--shadow-glass-lg": elevationMode.glassLg,
+    // Motion
+    "--duration-instant": ms(motion.duration.instant),
+    "--duration-fast": ms(motion.duration.fast),
+    "--duration-normal": ms(motion.duration.normal),
+    "--duration-slow": ms(motion.duration.slow),
+    "--duration-complex": ms(motion.duration.complex),
+    "--ease-standard": motion.easing.standard,
+    "--ease-in": motion.easing.easeIn,
+    "--ease-out": motion.easing.easeOut,
+    "--ease-in-out": motion.easing.easeInOut,
+    "--ease-bounce": motion.easing.bounce,
+    "--ease-spring": motion.easing.spring,
+    "--ease-elastic": motion.easing.elastic,
+    // Chart
+    "--chart-1": chartTokens.colors[0],
+    "--chart-2": chartTokens.colors[1],
+    "--chart-3": chartTokens.colors[2],
+    "--chart-4": chartTokens.colors[3],
+    "--chart-5": chartTokens.colors[4],
+    "--chart-6": chartTokens.colors[5],
+    "--chart-7": chartTokens.colors[6],
+    "--chart-8": chartTokens.colors[7],
+    "--chart-grid": chartTokens.grid,
+    "--chart-axis": chartTokens.axis,
+    "--chart-label": chartTokens.label,
+    "--chart-tooltip-bg": chartTokens.tooltipBg,
+    "--chart-line-width": px(chart.lineWidth),
+    "--chart-dot-size": px(chart.dotSize),
+    "--chart-bar-radius": px(chart.barRadius),
+    "--chart-area-opacity": unitless(chart.areaOpacity),
+    // Tooltip
+    "--tooltip-delay": ms(motion.duration.fast),
+    "--tooltip-padding": rem(16),
+    "--tooltip-radius": rem(12),
+    // Z-Index
+    "--z-dropdown": unitless(zIndex.dropdown),
+    "--z-sticky": unitless(zIndex.sticky),
+    "--z-overlay": unitless(zIndex.overlay),
+    "--z-modal": unitless(zIndex.modal),
+    "--z-popover": unitless(zIndex.popover),
+    "--z-tooltip": unitless(zIndex.tooltip),
+    "--z-toast": unitless(zIndex.toast),
+    // Component: Button
+    "--btn-sm-height": rem(component.button.sm.height),
+    "--btn-sm-px": rem(component.button.sm.paddingX),
+    "--btn-sm-font-size": rem(component.button.sm.fontSize),
+    "--btn-sm-radius": px(component.button.sm.borderRadius),
+    "--btn-md-height": rem(component.button.md.height),
+    "--btn-md-px": rem(component.button.md.paddingX),
+    "--btn-md-font-size": rem(component.button.md.fontSize),
+    "--btn-md-radius": px(component.button.md.borderRadius),
+    "--btn-lg-height": rem(component.button.lg.height),
+    "--btn-lg-px": rem(component.button.lg.paddingX),
+    "--btn-lg-font-size": rem(component.button.lg.fontSize),
+    "--btn-lg-radius": px(component.button.lg.borderRadius),
+    "--btn-icon-size": px(component.button.md.iconSize),
+    // Component: Input
+    "--input-height": rem(component.input.height),
+    "--input-px": rem(component.input.paddingX),
+    "--input-py": rem(component.input.paddingY),
+    "--input-font-size": rem(component.input.fontSize),
+    "--input-radius": px(component.input.borderRadius),
+    "--input-icon-size": px(component.input.iconSize),
+    "--input-icon-padding": rem(component.input.iconPadding),
+    // Component: Card
+    "--card-padding": rem(component.card.padding),
+    "--card-gap": rem(component.card.gap),
+    "--card-radius": px(component.card.borderRadius),
+    "--card-title-size": rem(component.card.titleSize),
+    "--card-body-size": rem(component.card.bodySize),
+    // Component: Badge
+    "--badge-px": rem(component.badge.paddingX),
+    "--badge-py": rem(component.badge.paddingY),
+    "--badge-font-size": rem(component.badge.fontSize),
+    "--badge-radius": px(component.badge.borderRadius),
+    // Component: Checkbox
+    "--checkbox-size": px(component.checkbox.size),
+    "--checkbox-radius": px(component.checkbox.borderRadius),
+    "--checkbox-border-width": px(component.checkbox.borderWidth),
+    "--checkbox-icon-size": px(component.checkbox.iconSize),
+    "--checkbox-gap": rem(component.checkbox.gap),
+    "--checkbox-label-size": rem(component.checkbox.labelSize),
+    // Component: Radio
+    "--radio-size": px(component.radio.size),
+    "--radio-border-width": px(component.radio.borderWidth),
+    "--radio-checked-border-width": px(component.radio.checkedBorderWidth),
+    "--radio-gap": rem(component.radio.gap),
+    "--radio-label-size": rem(component.radio.labelSize),
+    // Component: Switch
+    "--switch-width": px(component.switch.width),
+    "--switch-height": px(component.switch.height),
+    "--switch-thumb-size": px(component.switch.thumbSize),
+    "--switch-thumb-offset": px(component.switch.thumbOffset),
+    "--switch-thumb-translate-on": px(component.switch.thumbTranslateOn),
+    "--switch-thumb-translate-off": px(component.switch.thumbTranslateOff),
+    // Component: Chip
+    "--chip-px": rem(component.chip.paddingX),
+    "--chip-py": rem(component.chip.paddingY),
+    "--chip-font-size": rem(component.chip.fontSize),
+    "--chip-radius": px(component.chip.borderRadius),
+    "--chip-icon-size": px(component.chip.iconSize),
+    // Component: Tabs
+    "--tab-primary-px": rem(component.tabs.primary.paddingX),
+    "--tab-primary-py": rem(component.tabs.primary.paddingY),
+    "--tab-primary-font-size": rem(component.tabs.primary.fontSize),
+    "--tab-primary-indicator": px(component.tabs.primary.indicatorHeight),
+    "--tab-secondary-px": rem(component.tabs.secondary.paddingX),
+    "--tab-secondary-py": rem(component.tabs.secondary.paddingY),
+    "--tab-secondary-font-size": rem(component.tabs.secondary.fontSize),
+    "--tab-secondary-container-padding": px(component.tabs.secondary.containerPadding),
+    "--tab-secondary-container-radius": px(component.tabs.secondary.containerRadius),
+    "--tab-secondary-item-radius": px(component.tabs.secondary.itemRadius),
+    // Component: Slider
+    "--slider-track-height": px(component.slider.trackHeight),
+    "--slider-thumb-size": px(component.slider.thumbSize),
+    "--slider-thumb-border": px(component.slider.thumbBorderWidth),
+    // Component: Tooltip
+    "--tooltip-simple-px": rem(component.tooltip.simple.paddingX),
+    "--tooltip-simple-py": rem(component.tooltip.simple.paddingY),
+    "--tooltip-simple-font-size": rem(component.tooltip.simple.fontSize),
+    "--tooltip-simple-radius": px(component.tooltip.simple.borderRadius),
+    "--tooltip-rich-px": rem(component.tooltip.rich.paddingX),
+    "--tooltip-rich-py": rem(component.tooltip.rich.paddingY),
+    "--tooltip-rich-max-width": px(component.tooltip.rich.maxWidth),
+    "--tooltip-rich-radius": px(component.tooltip.rich.borderRadius),
+    // Component: Avatar
+    "--avatar-sm": px(component.avatar.sm.size),
+    "--avatar-md": px(component.avatar.md.size),
+    "--avatar-lg": px(component.avatar.lg.size),
+    "--avatar-xl": px(component.avatar.xl.size),
+    "--avatar-status-dot": px(component.avatar.statusDot),
+    "--avatar-status-border": px(component.avatar.statusBorder),
+    // Component: Divider
+    "--divider-thickness": px(component.divider.thickness),
+    "--divider-thick": px(component.divider.thickThickness),
+    "--divider-inset-margin": px(component.divider.insetMargin),
+    "--divider-label-size": rem(component.divider.labelSize),
+    // Component: Progress
+    "--progress-height": px(component.progress.linear.height),
+    "--progress-radius": px(component.progress.linear.borderRadius),
+    "--progress-circular-stroke": px(component.progress.circular.strokeWidth),
+    "--progress-circular-text": rem(component.progress.circular.textSize),
+    // Component: Snackbar
+    "--snackbar-radius": px(component.snackbar.borderRadius),
+    "--snackbar-gap": rem(component.snackbar.gap),
+    "--snackbar-icon-size": px(component.snackbar.iconSize),
+    "--snackbar-message-size": rem(component.snackbar.messageSize),
+    "--snackbar-action-px": rem(component.snackbar.actionPaddingX),
+    "--snackbar-action-py": rem(component.snackbar.actionPaddingY),
+    "--snackbar-action-radius": px(component.snackbar.actionRadius),
+    "--snackbar-action-size": rem(component.snackbar.actionSize),
+    // Component: Dialog
+    "--dialog-width": px(component.dialog.width),
+    "--dialog-radius": px(component.dialog.borderRadius),
+    "--dialog-header-px": rem(component.dialog.headerPaddingX),
+    "--dialog-header-py": rem(component.dialog.headerPaddingY),
+    "--dialog-footer-px": rem(component.dialog.footerPaddingX),
+    "--dialog-footer-py": rem(component.dialog.footerPaddingY),
+    "--dialog-title-size": rem(component.dialog.titleSize),
+    "--dialog-desc-size": rem(component.dialog.descSize),
+    "--dialog-footer-gap": rem(component.dialog.footerGap),
+    // Component: AnimatedToggle
+    "--toggle-size": px(component.animatedToggle.size),
+    "--toggle-radius": px(component.animatedToggle.borderRadius),
+    "--toggle-icon-size": px(component.animatedToggle.iconSize)
+  };
+}
+function generateCSSBlock(mode) {
+  const vars = generateCSSVariables(mode);
+  return Object.entries(vars).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+}
+function generateKeyframes() {
+  const { keyframes } = motion;
+  return Object.entries(keyframes).map(([name, frames]) => {
+    const kebab = name.replace(/([A-Z])/g, "-$1").toLowerCase();
+    const body = Object.entries(frames).map(([key, props]) => {
+      const cssProps = Object.entries(props).map(([p, v]) => `    ${p.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v};`).join("\n");
+      return `  ${key} {
+${cssProps}
+  }`;
+    }).join("\n");
+    return `@keyframes ${kebab} {
+${body}
+}`;
+  }).join("\n\n");
+}
+
+exports.generateCSSBlock = generateCSSBlock;
+exports.generateCSSVariables = generateCSSVariables;
+exports.generateKeyframes = generateKeyframes;