@tac-ui/tokens 0.1.0 → 1.0.0

package/dist/web/css-variables.js

@@ -3,44 +3,37 @@
 // src/semantic.ts
 var semanticTokens = {
   light: {
-    // ── Canvas & Surface (Off-white paper base) ──
+    // ── Canvas & Surface ──
     background: "#FAFAFA",
-    // Off-white base
     backgroundSubtle: "#F4F4F5",
-    // Slightly darker gray
-    surface: "#FCFCFC",
-    // Just faintly off-white surface
+    surface: "#FFFFFF",
     surfaceHover: "#F4F4F5",
     surfaceBase: "#FAFAFA",
-    surfaceElevatedLow: "#FCFCFC",
-    surfaceElevatedMid: "#FCFCFC",
-    surfaceElevatedHigh: "#FCFCFC",
-    card: "#FCFCFC",
-    cardForeground: "#121212",
-    // Barely off-black
+    surfaceElevatedLow: "#FFFFFF",
+    surfaceElevatedMid: "#FFFFFF",
+    surfaceElevatedHigh: "#FFFFFF",
+    card: "#FFFFFF",
+    cardForeground: "#18181B",
     // ── Text ──
-    foreground: "#121212",
+    foreground: "#18181B",
     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)",
+    // ── Brand (Ink Black) ──
+    primary: "#18181B",
+    primaryHover: "#27272A",
+    primaryForeground: "#FFFFFF",
+    secondary: "#F4F4F5",
+    secondaryForeground: "#18181B",
+    ring: "#18181B",
+    // ── Point / Accent (Royal Indigo) ──
+    point: "#5856D6",
+    pointHover: "#4B49B8",
+    pointForeground: "#FFFFFF",
+    pointSubtle: "rgba(88, 86, 214, 0.1)",
     // ── Border ──
     border: "#E4E4E7",
     input: "#E4E4E7",
-    // ── Gray Scale ──
+    // ── Gray Scale (Zinc) ──
     gray50: "#FAFAFA",
     gray100: "#F4F4F5",
     gray200: "#E4E4E7",
@@ -52,11 +45,11 @@ var semanticTokens = {
     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",
+    glassBg: "rgba(255, 255, 255, 0.85)",
+    glassBorder: "rgba(24, 24, 27, 0.04)",
+    glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
+    glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
+    accentGlow: "none",
     // ── Gradients ──
     gradientBrand: "none",
     gradientBrandHover: "none",
@@ -68,105 +61,94 @@ var semanticTokens = {
     gradientSurface: "none",
     gradientGlowShadow: "none",
     // ── Shadow ──
-    shadowColor: "rgba(18, 18, 18, 0.05)",
+    shadowColor: "rgba(24, 24, 27, 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",
+    success: "#166534",
+    successBg: "#DCFCE7",
+    successForeground: "#166534",
+    warning: "#854D0E",
+    warningBg: "#FEF9C3",
+    warningForeground: "#854D0E",
+    error: "#991B1B",
+    errorBg: "#FEE2E2",
+    errorForeground: "#991B1B",
+    info: "#18181B",
+    infoBg: "#F4F4F5",
+    infoForeground: "#18181B",
     // ── 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)",
+    interactiveHover: "rgba(24, 24, 27, 0.04)",
+    interactivePressed: "rgba(24, 24, 27, 0.08)",
+    interactiveFocus: "#18181B",
+    interactiveSurfaceTint: "rgba(0, 0, 0, 0.02)",
+    interactiveHoverTint: "rgba(0, 0, 0, 0.04)",
+    focusGlow: "0 0 0 3px rgba(24, 24, 27, 0.1)",
+    pointGlow: "0 0 0 2px rgba(88, 86, 214, 0.2)",
     // ── Components ──
-    btnPrimarySurface: "#1E232D",
-    btnPrimaryHover: "#2A303D",
-    btnPrimaryEnergy: "0 4px 12px rgba(30, 35, 45, 0.16)",
+    btnPrimarySurface: "#18181B",
+    btnPrimaryHover: "#27272A",
+    btnPrimaryEnergy: "0 4px 12px rgba(24, 24, 27, 0.15)",
     btnPrimaryInset: "none",
-    btnSecondarySurface: "#E4E4E7",
-    btnSecondaryHover: "#D4D4D8",
-    btnOutlineBorder: "#E4E4E7",
-    btnOutlineBorderHover: "#D4D4D8",
-    btnOutlineHoverBg: "#F4F4F5",
+    btnSecondarySurface: "#F4F4F5",
+    btnSecondaryHover: "#E4E4E7",
+    btnOutlineBorder: "#D4D4D8",
+    btnOutlineBorderHover: "#A1A1AA",
+    btnOutlineHoverBg: "#F9FAFB",
     btnGhostHover: "#F4F4F5",
-    btnPointSurface: "#323944",
+    btnPointSurface: "#5856D6",
     btnPointBorder: "transparent",
-    btnPointHoverSurface: "#4A5361",
+    btnPointHoverSurface: "#4B49B8",
     btnPointHoverBorder: "transparent",
-    btnPointEnergy: "0 4px 12px rgba(50, 57, 68, 0.2)",
-    btnDestructiveSurface: "#7C2128",
-    btnDestructiveHover: "#5B171D",
-    inputBg: "#FCFCFC",
-    inputBorderRest: "#E4E4E7",
+    btnPointEnergy: "0 4px 12px rgba(88, 86, 214, 0.2)",
+    btnDestructiveSurface: "#DC2626",
+    btnDestructiveHover: "#B91C1C",
+    inputBg: "#F4F4F5",
+    inputBorderRest: "#D4D4D8",
     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)",
+    inputHoverGlow: "0 0 0 2px rgba(0, 0, 0, 0.04)",
+    inputFocusGlow: "0 0 0 2px rgba(24, 24, 27, 0.15)",
+    inputErrorGlow: "0 0 0 2px #FEE2E2",
+    dropdownBg: "#FFFFFF",
+    dropdownShadow: "0 20px 25px -5px rgba(24, 24, 27, 0.08), 0 0 0 1px rgba(24, 24, 27, 0.03)",
     dropdownItemHover: "#F4F4F5",
     cardAccentBorder: "#E4E4E7",
     cardAccentGlow: "none",
     cardAccentHoverBorder: "#D4D4D8",
-    cardAccentHoverGlow: "0 8px 24px rgba(18, 18, 18, 0.06)"
+    cardAccentHoverGlow: "0 8px 24px rgba(24, 24, 27, 0.06)"
   },
   dark: {
-    // ── Canvas & Surface (High-Contrast Charcoal Base) ──
-    background: "#121214",
-    // Off-black charcoal
-    backgroundSubtle: "#18181A",
-    // Zinc 900
+    // ── Canvas & Surface ──
+    background: "#09090B",
+    backgroundSubtle: "#18181B",
     surface: "#27272A",
-    // Zinc 800 - distinct from subtle background
     surfaceHover: "#3F3F46",
-    // Zinc 700
-    surfaceBase: "#121214",
-    surfaceElevatedLow: "#18181A",
+    surfaceBase: "#09090B",
+    surfaceElevatedLow: "#18181B",
     surfaceElevatedMid: "#27272A",
     surfaceElevatedHigh: "#3F3F46",
-    card: "#18181A",
-    // Zinc 900
-    cardForeground: "#F4F4F5",
-    // Off-white
+    card: "#18181B",
+    cardForeground: "#FAFAFA",
     // ── Text ──
-    foreground: "#F4F4F5",
-    // Off-white
+    foreground: "#FAFAFA",
     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
+    // ── Brand (Inverted — Near-White) ──
+    primary: "#FAFAFA",
+    primaryHover: "#E4E4E7",
+    primaryForeground: "#18181B",
     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) ──
+    secondaryForeground: "#FAFAFA",
+    ring: "#FAFAFA",
+    // ── Point / Accent (Royal Indigo) ──
+    point: "#5E5CE6",
+    pointHover: "#7A78F0",
+    pointForeground: "#FFFFFF",
+    pointSubtle: "rgba(94, 92, 230, 0.15)",
+    // ── Border ──
     border: "#3F3F46",
-    // Zinc 700
     input: "#3F3F46",
-    // ── Gray Scale (Zinc) ──
-    gray50: "#121214",
-    gray100: "#18181A",
+    // ── Gray Scale (Zinc Inverted) ──
+    gray50: "#09090B",
+    gray100: "#18181B",
     gray200: "#27272A",
     gray300: "#3F3F46",
     gray400: "#52525B",
@@ -176,7 +158,7 @@ var semanticTokens = {
     gray800: "#E4E4E7",
     gray900: "#FAFAFA",
     // ── Glass & Effects ──
-    glassBg: "rgba(18, 18, 20, 0.85)",
+    glassBg: "rgba(9, 9, 11, 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)",
@@ -193,13 +175,13 @@ var semanticTokens = {
     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",
+    // ── Status ──
+    success: "#4ADE80",
+    successBg: "rgba(74, 222, 128, 0.15)",
+    successForeground: "#4ADE80",
+    warning: "#FACC15",
+    warningBg: "rgba(250, 204, 21, 0.15)",
+    warningForeground: "#FACC15",
     error: "#F87171",
     errorBg: "rgba(248, 113, 113, 0.15)",
     errorForeground: "#F87171",
@@ -210,36 +192,36 @@ var semanticTokens = {
     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)",
+    interactiveSurfaceTint: "rgba(255, 255, 255, 0.04)",
+    interactiveHoverTint: "rgba(255, 255, 255, 0.08)",
+    focusGlow: "0 0 0 3px rgba(250, 250, 250, 0.15)",
+    pointGlow: "0 0 0 2px rgba(94, 92, 230, 0.3)",
     // ── Components ──
-    btnPrimarySurface: "#B8C4D9",
-    btnPrimaryHover: "#D1DBE8",
-    btnPrimaryEnergy: "0 4px 16px rgba(184, 196, 217, 0.25)",
+    btnPrimarySurface: "#FAFAFA",
+    btnPrimaryHover: "#E4E4E7",
+    btnPrimaryEnergy: "0 4px 16px rgba(250, 250, 250, 0.1)",
     btnPrimaryInset: "none",
     btnSecondarySurface: "#27272A",
     btnSecondaryHover: "#3F3F46",
     btnOutlineBorder: "#3F3F46",
     btnOutlineBorderHover: "#52525B",
-    btnOutlineHoverBg: "#27272A",
+    btnOutlineHoverBg: "#18181B",
     btnGhostHover: "#27272A",
-    btnPointSurface: "#D1DBE8",
+    btnPointSurface: "#5E5CE6",
     btnPointBorder: "transparent",
-    btnPointHoverSurface: "#E6ECEF",
+    btnPointHoverSurface: "#7A78F0",
     btnPointHoverBorder: "transparent",
-    btnPointEnergy: "0 4px 16px rgba(209, 219, 232, 0.25)",
-    btnDestructiveSurface: "#7C2128",
-    btnDestructiveHover: "#9A2A32",
-    inputBg: "#18181A",
+    btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
+    btnDestructiveSurface: "#EF4444",
+    btnDestructiveHover: "#F87171",
+    inputBg: "#27272A",
     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)",
+    inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
+    inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
+    inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
+    dropdownBg: "#18181B",
+    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",
@@ -252,54 +234,51 @@ var semanticTokens = {
 var chart = {
   light: {
     colors: [
-      "#1E232D",
-      // chart-1: Iron Navy (Primary)
-      "#323944",
-      // chart-2: Steel Navy (Secondary)
-      "#4A5361",
-      // chart-3: Slate Navy (Tertiary)
+      "#18181B",
+      // chart-1: Ink (Primary)
+      "#5856D6",
+      // chart-2: Royal Indigo (Point)
+      "#854D0E",
+      // chart-3: Dark Gold
+      "#0F766E",
+      // chart-4: Deep Teal (cool contrast)
       "#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)
+      // chart-5: Zinc 500 (Neutral)
+      "#4B49B8",
+      // chart-6: Deep Indigo
+      "#44403C",
+      // chart-7: Stone 700 (Warm gray)
+      "#D4D4D8"
+      // chart-8: Zinc 300 (Light fill)
     ],
-    grid: "rgba(30, 35, 45, 0.04)",
-    axis: "rgba(30, 35, 45, 0.08)",
+    grid: "rgba(24, 24, 27, 0.04)",
+    axis: "rgba(24, 24, 27, 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)
+      "#FAFAFA",
+      // chart-1: Near-white (Primary)
+      "#5E5CE6",
+      // chart-2: Royal Indigo (Point)
+      "#FCD34D",
+      // chart-3: Amber 300 (Gold)
+      "#2DD4BF",
+      // chart-4: Teal 400 (cool contrast)
       "#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)
+      // chart-5: Zinc 400 (Neutral)
+      "#7A78F0",
+      // chart-6: Light Indigo
+      "#78716C",
+      // chart-7: Stone 500 (Warm gray)
       "#52525B"
-      // chart-8: Zinc 600 (Deep Fill)
+      // 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
+    tooltipBg: "#18181B"
   },
   lineWidth: 1.5,
   dotSize: 2.5,
@@ -321,9 +300,9 @@ var spacing = {
 var radius = {
   none: 0,
   xs: 4,
-  sm: 6,
-  m: 10,
-  lg: 14,
+  sm: 8,
+  m: 12,
+  lg: 16,
   xl: 20,
   "2xl": 24,
   pill: 9999
@@ -332,12 +311,12 @@ var radius = {
 // 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)"
+    sm: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
+    m: "0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03)",
+    lg: "0 8px 24px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04)",
+    xl: "0 16px 40px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.04)",
+    glass: "0 8px 32px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.02)",
+    glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
   },
   dark: {
     sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
@@ -366,20 +345,20 @@ var motion = {
     complex: 450
   },
   easing: {
-    /** Dia's signature curve — slight overshoot with smooth natural deceleration. */
-    standard: "cubic-bezier(0.22, 1, 0.36, 1)",
+    /** Slight overshoot with smooth natural deceleration. */
+    standard: "cubic-bezier(0.25, 0.1, 0.25, 1)",
     /** Exit easing — fast acceleration, abrupt departure. */
-    easeIn: "cubic-bezier(0.55, 0, 1, 0.45)",
+    easeIn: "cubic-bezier(0.42, 0, 1, 1)",
     /** Entrance easing — gentle deceleration without overshoot. */
-    easeOut: "cubic-bezier(0, 0.55, 0.45, 1)",
+    easeOut: "cubic-bezier(0, 0, 0.58, 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)",
+    /** Restrained overshoot — for toggles, switches, confirmatory feedback. */
+    bounce: "cubic-bezier(0.34, 1.3, 0.64, 1)",
+    /** Subtle spring feel — deliberate physical presence. */
+    spring: "cubic-bezier(0.22, 1.1, 0.36, 1)",
     /** Subtle rubber-band — elastic resistance with quick snap back. */
-    elastic: "cubic-bezier(0.68, -0.2, 0.265, 1.2)"
+    elastic: "cubic-bezier(0.68, -0.1, 0.265, 1.1)"
   },
   /** Standard animation keyframe presets for reuse across components. */
   keyframes: {
@@ -396,13 +375,25 @@ var motion = {
       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)" } },
+    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)" } },
+    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)" } },
+    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)" } },
+    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)" } },
@@ -469,25 +460,25 @@ var typography = {
 // 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}
+    sm: { height: 32, paddingX: 16, fontSize: 13, borderRadius: 8},
+    md: { height: 44, paddingX: 20, fontSize: 15, borderRadius: 12, iconSize: 18 },
+    lg: { height: 50, paddingX: 28, fontSize: 17, borderRadius: 14}
   },
   input: {
-    height: 42,
-    paddingX: 18,
+    height: 44,
+    paddingX: 16,
     paddingY: 12,
-    fontSize: 14,
-    borderRadius: 10,
+    fontSize: 15,
+    borderRadius: 12,
     iconSize: 18,
     iconPadding: 42
   },
   card: {
-    padding: 28,
-    gap: 20,
+    padding: 24,
+    gap: 16,
     borderRadius: 16,
     titleSize: 17,
-    bodySize: 14
+    bodySize: 15
   },
   badge: {
     paddingX: 12,
@@ -497,26 +488,26 @@ var component = {
   },
   checkbox: {
     gap: 12,
-    size: 20,
+    size: 22,
     borderRadius: 6,
-    borderWidth: 2,
+    borderWidth: 1.5,
     iconSize: 14,
-    labelSize: 14
+    labelSize: 15
   },
   radio: {
     gap: 12,
-    size: 20,
-    borderWidth: 2,
+    size: 22,
+    borderWidth: 1.5,
     checkedBorderWidth: 6,
-    labelSize: 14
+    labelSize: 15
   },
   switch: {
-    width: 52,
-    height: 32,
-    thumbSize: 24,
-    thumbOffset: 4,
-    thumbTranslateOn: 24,
-    thumbTranslateOff: 4
+    width: 51,
+    height: 31,
+    thumbSize: 27,
+    thumbOffset: 2,
+    thumbTranslateOn: 22,
+    thumbTranslateOff: 2
   },
   chip: {
     paddingX: 16,
@@ -536,14 +527,14 @@ var component = {
       paddingY: 8,
       fontSize: 13,
       containerPadding: 4,
-      containerRadius: 14,
-      itemRadius: 10
+      containerRadius: 10,
+      itemRadius: 8
     }
   },
   slider: {
-    trackHeight: 6,
-    thumbSize: 20,
-    thumbBorderWidth: 2
+    trackHeight: 4,
+    thumbSize: 28,
+    thumbBorderWidth: 0
   },
   tooltip: {
     simple: { paddingX: 14, paddingY: 8, fontSize: 13, borderRadius: 10 },
@@ -558,16 +549,16 @@ var component = {
   },
   divider: {
     thickness: 1,
-    thickThickness: 8,
+    thickThickness: 1,
     insetMargin: 64,
     labelSize: 12
   },
   progress: {
-    linear: { height: 8, borderRadius: 9999 },
+    linear: { height: 6, borderRadius: 9999 },
     circular: { strokeWidth: 4, textSize: 14 }
   },
   snackbar: {
-    borderRadius: 14,
+    borderRadius: 12,
     gap: 12,
     iconSize: 18,
     messageSize: 14,
@@ -577,15 +568,15 @@ var component = {
     actionSize: 13
   },
   dialog: {
-    width: 380,
-    borderRadius: 20,
-    headerPaddingX: 28,
-    headerPaddingY: 24,
-    footerPaddingX: 28,
+    width: 320,
+    borderRadius: 14,
+    headerPaddingX: 24,
+    headerPaddingY: 20,
+    footerPaddingX: 24,
     footerPaddingY: 20,
     titleSize: 17,
-    descSize: 14,
-    footerGap: 14
+    descSize: 13,
+    footerGap: 8
   },
   animatedToggle: {
     size: 40,

package/dist/web/css-variables.mjs

@@ -1,4 +1,5 @@
-import { semanticTokens, chart, elevation, motion, typography, px, component, rem, unitless, zIndex, ms, radius, spacing } from '../chunk-T3JFXTDW.mjs';
+import { px, rem, unitless, ms } from '../chunk-GLCF64BD.mjs';
+import { semanticTokens, chart, elevation, motion, typography, component, zIndex, radius, spacing } from '../chunk-7I7QJ2NP.mjs';
 
 // src/web/css-variables.ts
 function generateCSSVariables(mode) {