@techsio/ui-kit 0.10.1 → 0.12.0

package/src/tokens/components/molecules/_steps.css

@@ -1,133 +1,23 @@
-@theme static {
-  /* === REFERENCE LAYER === */
-  --color-steps-base: var(--color-surface);
-  --color-steps-overlay: var(--color-overlay);
-  --color-steps-float: var(--color-float);
-  --color-steps-accent: var(--color-primary);
-  --color-steps-success: var(--color-success);
-  --color-steps-fg-reverse: var(--color-fg-reverse);
-
-  /* === DERIVED COLORS === */
-  --color-steps-fg: var(--color-fg-primary);
-
-  --color-steps-trigger-bg-hover: oklch(
-    from var(--color-steps-overlay) calc(l - var(--surface-increment)) c h
-  );
-  --color-steps-trigger-bg-current: oklch(
-    from var(--color-steps-accent) l c h /
-    0.12
-  );
-  --color-steps-trigger-bg-complete: oklch(
-    from var(--color-steps-success) l c h /
-    0.12
-  );
-
-  --color-steps-indicator-bg: var(--color-steps-overlay);
-  --color-steps-indicator-bg-hover: var(--color-steps-float);
-  --color-steps-indicator-bg-current: var(--color-steps-accent);
-  --color-steps-indicator-bg-complete: var(--color-steps-success);
-  --color-steps-indicator-border: var(--color-border-primary);
-  --color-steps-indicator-border-hover: var(--color-steps-accent);
-  --color-steps-indicator-border-current: var(--color-steps-accent);
-  --color-steps-indicator-border-complete: var(--color-steps-success);
-  --color-steps-indicator-fg: var(--color-fg-secondary);
-  --color-steps-indicator-fg-current: var(--color-steps-fg-reverse);
-  --color-steps-indicator-fg-complete: var(--color-steps-fg-reverse);
-
-  --color-steps-indicator-bg-solid: var(--color-steps-float);
-  --color-steps-indicator-bg-solid-hover: oklch(
-    from var(--color-steps-float) calc(l - var(--surface-increment)) c h
-  );
-  --color-steps-indicator-bg-solid-current: var(--color-steps-accent);
-  --color-steps-indicator-bg-solid-complete: var(--color-steps-success);
-  --color-steps-indicator-fg-solid: var(--color-fg-primary);
-  --color-steps-indicator-fg-solid-current: var(--color-steps-fg-reverse);
-  --color-steps-indicator-fg-solid-complete: var(--color-steps-fg-reverse);
-
-  --color-steps-title-fg: var(--color-fg-primary);
-  --color-steps-title-fg-current: var(--color-primary);
-  --color-steps-title-fg-complete: var(--color-success);
-  --color-steps-description-fg: var(--color-fg-secondary);
-  --color-steps-description-fg-current: var(--color-fg-primary);
-  --color-steps-description-fg-complete: var(--color-fg-primary);
-
-  --color-steps-separator-bg: var(--color-border-primary);
-  --color-steps-separator-bg-current: var(--color-primary-light);
-  --color-steps-separator-bg-complete: var(--color-success);
-
-  --color-steps-progress-bg: var(--color-border-primary);
-  --color-steps-progress-range-bg: var(--color-steps-accent);
-
-  --color-steps-content-bg: var(--color-steps-base);
-  --color-steps-content-bg-complete: var(--color-steps-overlay);
-  --color-steps-content-border: var(--color-border-primary);
-  --color-steps-content-border-complete: var(--color-success);
-  --color-steps-content-fg: var(--color-fg-primary);
+/*
+ * Steps — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--spacing-steps-list-vertical` (container-based width).
+ *   - bare text defaults (Figma exports per-size only).
+ *   - h-/w- aliases for the Figma progress/separator size axes.
+ */
 
-  /* === SPACING === */
-  --gap-steps-root: var(--spacing-300);
-  --gap-steps-list: var(--spacing-150);
-  --gap-steps-panels: var(--spacing-250);
-  --gap-steps-item: var(--spacing-150);
-  --gap-steps-trigger: var(--spacing-150);
-  --gap-steps-text: var(--spacing-50);
-  --gap-steps-navigation: var(--spacing-150);
-
-  --padding-steps-trigger-x: var(--spacing-150);
-  --padding-steps-trigger-y: var(--spacing-100);
-  --padding-steps-content-sm: var(--spacing-200);
-  --padding-steps-content-md: var(--spacing-250);
-  --padding-steps-content-lg: var(--spacing-300);
-
-  --spacing-steps-indicator-sm: var(--spacing-300);
-  --spacing-steps-indicator-md: var(--spacing-350);
-  --spacing-steps-indicator-lg: var(--spacing-400);
+@theme static {
   --spacing-steps-list-vertical: var(--container-xs);
-  --spacing-steps-separator-offset: var(--spacing-200);
-  --spacing-steps-separator-vertical: var(--spacing-400);
-
-  /* === TYPOGRAPHY === */
-  --font-weight-steps-title: var(--font-weight-medium);
-  --font-weight-steps-number: var(--font-weight-semibold);
 
   --text-steps-title: var(--text-md);
-  --text-steps-title-sm: var(--text-sm);
-  --text-steps-title-md: var(--text-md);
-  --text-steps-title-lg: var(--text-lg);
-
   --text-steps-description: var(--text-sm);
-  --text-steps-description-sm: var(--text-xs);
-  --text-steps-description-md: var(--text-sm);
-  --text-steps-description-lg: var(--text-md);
-
-  --text-steps-content-sm: var(--text-sm);
-  --text-steps-content-md: var(--text-md);
-  --text-steps-content-lg: var(--text-lg);
-
-  --text-steps-number-sm: var(--text-sm);
-  --text-steps-number-md: var(--text-md);
-  --text-steps-number-lg: var(--text-lg);
-
   --text-steps-icon: var(--text-md);
-  --text-steps-icon-sm: var(--text-sm);
-  --text-steps-icon-md: var(--text-md);
-  --text-steps-icon-lg: var(--text-lg);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-steps-indicator: var(--border-width-sm);
-  --border-width-steps-content: var(--border-width-sm);
-  --radius-steps-indicator: 999px;
-  --radius-steps-trigger: var(--radius-sm);
-  --radius-steps-content: var(--radius-md);
-  --radius-steps-progress: 999px;
-  --radius-steps-separator: 999px;
-  --height-steps-progress: 4px;
-  --height-steps-separator: 2px;
-  --width-steps-progress: 4px;
-  --width-steps-separator: 2px;
 
-  /* === FOCUS RINGS === */
-  --color-steps-ring: var(--color-ring);
+  --height-steps-progress: var(--size-steps-progress-height);
+  --width-steps-progress: var(--size-steps-progress-width);
+  --height-steps-separator: var(--size-steps-separator-height);
+  --width-steps-separator: var(--size-steps-separator-width);
 }
 
 @utility token-icon-steps-check {

package/src/tokens/components/molecules/_switch.css

@@ -1,60 +1,15 @@
-:root {
-  /* The red colour will be less noticeable. */
-  --opacity-switch-invalid: 80%;
-}
+/*
+ * Switch — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--spacing-switch-translate-track` — runtime calc() of Figma track
+ *     tokens (thumb travel distance); can't be a static Figma variable.
+ */
 
 @theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-switch-bg: var(--color-overlay);
-  --color-switch-success: var(--color-success);
-  --color-switch-invalid: --alpha(
-    var(--color-danger) /
-    var(--opacity-switch-invalid)
-  );
-  --color-switch-border: var(--color-border-primary);
-  --color-switch-thumb-bg: var(--color-base-light);
-  --color-switch-label-fg: var(--color-fg-primary);
-  --color-switch-label-fg-disabled: var(--color-fg-disabled);
-
-  /* Backgrounds colors */
-  --color-switch-bg-checked: var(--color-switch-success);
-
-  /* === STATE VARIATIONS === */
-  --color-switch-bg-hover: oklch(
-    from var(--color-switch-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-switch-bg-checked-hover: oklch(
-    from var(--color-switch-success) calc(l + var(--state-hover)) c h
-  );
-
-  /* === DISABLED STATES === */
-  /* Using unified disabled tokens for consistency across all components */
-  --color-switch-bg-disabled: var(--color-bg-disabled);
-  --color-switch-thumb-bg-disabled: var(--color-fg-disabled);
-  --color-switch-border-disabled: var(--color-border-disabled);
-
-  /* === INVALID STATES === */
-  --color-switch-bg-invalid: var(--color-switch-invalid);
-
-  /* === SPACING === */
-  --spacing-switch-root: var(--spacing-200);
-  --spacing-switch-control: var(--spacing-50);
-  --spacing-switch-track-width: var(--spacing-600);
-  --spacing-switch-track-height: var(--spacing-350);
-  --spacing-switch-thumb-height: calc(
-    var(--spacing-switch-track-height) -
-    (var(--spacing-switch-control) * 2)
-  );
   --spacing-switch-translate-track: calc(
     var(--spacing-switch-track-width) -
     var(--spacing-switch-track-height) -
     var(--spacing-switch-control)
   );
-
-  /* === BORDERS & RADIUS === */
-  --border-width-switch: var(--border-width-sm);
-  --radius-switch: var(--radius-full);
-
-  /* === FOCUS RINGS === */
-  --color-switch-ring: var(--color-ring);
 }

package/src/tokens/components/molecules/_tabs.css

@@ -1,69 +1,17 @@
-@theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-tabs-bg: var(--color-surface);
-  --color-tabs-fg: var(--color-fg-secondary);
-  --color-tabs-active: var(--color-primary);
-  --color-tabs-fg-primary: var(--color-fg-primary);
-  --color-tabs-fg-secondary: var(--color-fg-reverse);
-
-  /* === LIST COMPONENT === */
-  --color-tabs-list-bg: oklch(
-    from var(--color-tabs-bg) calc(l - var(--surface-increment)) c h
-  );
-
-  /* === TRIGGER COMPONENT === */
-  --color-tabs-trigger-fg: var(--color-tabs-fg);
-  --color-tabs-trigger-solid-fg: var(--color-tabs-fg-secondary);
-  --color-tabs-trigger-fg-selected: var(--color-tabs-active);
-  --color-tabs-trigger-bg-selected: var(--color-tabs-active);
-  --color-tabs-trigger-bg-outline-selected: oklch(
-    from var(--color-tabs-active) l c h /
-    0.1
-  );
-
-  --color-tabs-trigger-bg-hover: oklch(
-    from var(--color-tabs-bg) calc(l - var(--surface-increment) * 2) c h
-  );
-
-  /* === INDICATOR === */
-  --color-tabs-indicator-bg: var(--color-tabs-active);
-  --width-tabs-indicator: 2px;
-  --height-tabs-indicator: 2px;
-
-  /* === CONTENT === */
-  --color-tabs-content-fg: var(--color-tabs-fg-primary);
+/*
+ * Tabs — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--padding-tabs-trigger-{sm,md,lg}` combined shorthands for the
+ *     `p-tabs-trigger-{size}` utility (Figma has split x/y axes).
+ *   - `--width-tabs-indicator` — alias for the Figma width axis (w-
+ *     utility can't read --size-*).
+ */
 
-  /* === FOCUS RING === */
-  --color-tabs-ring: var(--color-ring);
-
-  /* === PADDING === */
-  /* Trigger padding */
-  --padding-tabs-trigger-sm: var(--spacing-100) var(--spacing-150);
-  --padding-tabs-trigger-md: var(--spacing-150) var(--spacing-200);
-  --padding-tabs-trigger-lg: var(--spacing-200) var(--spacing-250);
-
-  /* Content padding */
-  --spacing-tabs-content-sm: var(--spacing-200);
-  --spacing-tabs-content-md: var(--spacing-250);
-  --spacing-tabs-content-lg: var(--spacing-350);
-
-  /* === TYPOGRAPHY === */
-  --text-tabs-trigger-sm: var(--text-sm);
-  --text-tabs-trigger-md: var(--text-md);
-  --text-tabs-trigger-lg: var(--text-lg);
-
-  --text-tabs-content-sm: var(--text-sm);
-  --text-tabs-content-md: var(--text-md);
-  --text-tabs-content-lg: var(--text-lg);
-
-  /* === BORDER & RADIUS === */
-  --border-width-tabs: var(--border-width-md);
-  --color-tabs-border: var(--color-border-primary);
-  --color-tabs-border-selected: var(--color-tabs-active);
-  --radius-tabs: 0;
-  --radius-tabs-trigger: 0;
-  --radius-tabs-indicator: 0;
+@theme static {
+  --padding-tabs-trigger-sm: var(--padding-tabs-trigger-y-sm) var(--padding-tabs-trigger-x-sm);
+  --padding-tabs-trigger-md: var(--padding-tabs-trigger-y-md) var(--padding-tabs-trigger-x-md);
+  --padding-tabs-trigger-lg: var(--padding-tabs-trigger-y-lg) var(--padding-tabs-trigger-x-lg);
 
-  /* === DISABLED STATE === */
-  --color-tabs-fg-disabled: var(--color-fg-disabled);
+  --width-tabs-indicator: var(--size-tabs-indicator-width);
 }

package/src/tokens/components/molecules/_toast.css

@@ -1,58 +1,11 @@
-@theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-toast-bg: var(--color-highlight);
-  --color-toast-fg: var(--color-fg-dark);
-  --color-toast-error: var(--color-danger);
-  --color-toast-success: var(--color-success);
-  --color-toast-info: var(--color-info);
-  --color-toast-warning: var(--color-warning);
-
-  /* === TYPE SPECIFIC COLORS === */
-  /* Error */
-  --color-toast-error-bg: var(--color-toast-error);
-  --color-toast-error-border: var(--color-toast-error);
-  --color-toast-error-title: var(--color-toast-fg);
-  --color-toast-error-icon: var(--color-toast-fg);
-
-  /* Success */
-  --color-toast-success-bg: var(--color-toast-success);
-  --color-toast-success-border: var(--color-toast-success);
-  --color-toast-success-title: var(--color-toast-fg);
-  --color-toast-success-icon: var(--color-toast-fg);
-
-  /* Info */
-  --color-toast-info-bg: var(--color-toast-info);
-  --color-toast-info-border: var(--color-toast-info);
-  --color-toast-info-title: var(--color-toast-fg);
-  --color-toast-info-icon: var(--color-toast-fg);
-
-  /* Warning */
-  --color-toast-warning-bg: var(--color-toast-warning);
-  --color-toast-warning-border: var(--color-toast-warning);
-  --color-toast-warning-title: var(--color-toast-fg);
-  --color-toast-warning-icon: var(--color-toast-fg);
+/*
+ * Toast — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--spacing-toast-width` alias — w- utility can't read --size-*.
+ */
 
-  /* === CLOSE BUTTON === */
-  --color-toast-close-fg: var(--color-toast-fg);
-  --color-toast-close-fg-hover: var(--color-fg-primary);
-
-  /* === ROOT === */
-  --spacing-toast-width: 360px;
-
-  /* === SPACING === */
-  --padding-toast-root: var(--spacing-250);
-  --gap-toast-content: var(--spacing-200);
-  --spacing-toast-description-gap: var(--spacing-100);
-
-  /* === TYPOGRAPHY === */
-  --font-weight-toast-title: var(--font-weight-medium);
-  --text-toast-title-size: var(--text-md);
-  --text-toast-description-size: var(--text-sm);
-  --text-toast-icon-size: var(--text-lg);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-toast: var(--border-width-sm);
-  --radius-toast-root: var(--radius-sm);
+@theme static {
+  --spacing-toast-width: var(--size-toast-width);
 }
 
 /* Icons */

package/src/tokens/components/molecules/_tree-view.css

@@ -1,59 +1,13 @@
-@theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-tree-bg: var(--color-base);
-  --color-tree-fg: var(--color-fg-primary);
-  --color-tree-border: var(--color-border-primary);
-  --color-tree-icon-hover: var(--color-fg-primary);
-  --color-tree-accent: var(--color-primary);
-
-  /* === STATE VARIATIONS === */
-  --color-tree-node-bg-hover: var(--color-primary-hover);
-  --color-tree-fg-hover: var(--color-fg-reverse);
-  --color-tree-fg-selected: var(--color-tree-accent);
-
-  /* === ROOT === */
-  --color-tree-root-bg: transparent;
-
-  /* === LABEL === */
-  --color-tree-label-fg: var(--color-tree-fg);
-
-  /* === NODE === */
-  --color-tree-ring: var(--color-ring);
-
-  /* === INDENT GUIDE === */
-  --color-tree-indent-bg: var(--color-tree-border);
-  --width-tree-indent: 1px;
-
-  /* === DISABLED STATES === */
-  --color-tree-fg-disabled: var(--color-fg-disabled);
+/*
+ * TreeView — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css (tree-view namespace).
+ *
+ * Kept: `--tree-indent-per-level` — consumed as a raw var() in the TSX
+ * indent calc; aliases Figma's indent-per-level token.
+ */
 
-  /* === SPACING === */
-  --tree-indent-per-level: var(--spacing-100);
-  --spacing-tree-icon: var(--spacing-150);
-  --padding-tree-node: var(--spacing-100);
-
-  /* === TYPOGRAPHY === */
-  /* Tree text size */
-  --text-tree-sm: var(--text-sm);
-  --text-tree-md: var(--text-md);
-  --text-tree-lg: var(--text-lg);
-
-  /* Node icon size */
-  --text-tree-icon-sm: var(--text-icon-sm);
-  --text-tree-icon-md: var(--text-icon-md);
-  --text-tree-icon-lg: var(--text-icon-lg);
-
-  --text-tree-indicator-sm: var(--text-icon-md);
-  --text-tree-indicator-md: var(--text-icon-lg);
-  --text-tree-indicator-lg: var(--text-icon-xl);
-
-  /* Tree font weight */
-  --font-weight-tree-label: var(--font-weight-medium);
-
-  /* === BORDERS & RADIUS === */
-  --radius-tree: 0;
-  /* === OPACITY === */
-  --opacity-tree-indent: 100%;
+@theme static {
+  --tree-indent-per-level: var(--spacing-tree-view-indent-per-level);
 }
 
 /* Tree Icons - using semantic tokens */

package/src/tokens/components/organisms/_footer.css

@@ -1,85 +1,11 @@
+/*
+ * Footer — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--footer-cols` runtime grid-template-columns value
+ * (repeat/minmax can't be expressed as a Figma variable).
+ */
+
 @theme static {
   --footer-cols: repeat(auto-fit, minmax(22%, 1fr));
-
-  /* === COLORS === */
-  --color-footer: var(--color-surface);
-
-  /* Background */
-  --color-footer-bg: var(--color-footer);
-  --color-footer-container-bg: var(--color-footer);
-  --color-footer-section-bg: var(--color-footer);
-  --color-footer-list-bg: var(--color-footer);
-  --color-footer-bottom-bg: var(--color-footer);
-
-  /* Foreground */
-  --color-footer-fg-primary: var(--color-fg-primary);
-  --color-footer-fg-secondary: var(--color-fg-secondary);
-
-  --color-footer-title-fg: var(--color-footer-fg-primary);
-  --color-footer-title-fg-hover: var(--color-primary);
-  --color-footer-link-fg: var(--color-footer-fg-secondary);
-  --color-footer-link-fg-hover: var(--color-primary);
-  --color-footer-text-fg: var(--color-footer-fg-secondary);
-
-  /* Divider & Bottom */
-  --color-footer-divider-bg: var(--color-fg-reverse);
-
-  /* === TYPOGRAPHY === */
-  --text-footer-title-sm: var(--text-md);
-  --text-footer-title-md: var(--text-lg);
-  --text-footer-title-lg: var(--text-xl);
-
-  --text-footer-link-sm: var(--text-sm);
-  --text-footer-link-md: var(--text-md);
-  --text-footer-link-lg: var(--text-lg);
-
-  --text-footer-text-sm: var(--text-xs);
-  --text-footer-text-md: var(--text-sm);
-  --text-footer-text-lg: var(--text-md);
-
-  --font-weight-footer-title: var(--font-weight-semibold);
-  --font-weight-footer-link: var(--font-weight-normal);
-
-  /* === SIZES === */
-  --container-footer-max: var(--container-max-w);
-
-  /* === SPACING === */
-  /* Root padding */
-  --padding-footer-root-sm: var(--spacing-100);
-  --padding-footer-root-md: var(--spacing-200);
-  --padding-footer-root-lg: var(--spacing-300);
-
-  /* Container spacing */
-  --spacing-footer-container-sm: var(--spacing-300);
-  --spacing-footer-container-md: var(--spacing-400);
-  --spacing-footer-container-lg: var(--spacing-500);
-
-  /* Section spacing */
-  --spacing-footer-section-sm: var(--spacing-50);
-  --spacing-footer-section-md: var(--spacing-100);
-  --spacing-footer-section-lg: var(--spacing-150);
-
-  /* List spacing */
-  --spacing-footer-list-gap: var(--spacing-100);
-  --spacing-footer-list-gap-sm: var(--spacing-50);
-  --spacing-footer-list-gap-md: var(--spacing-100);
-  --spacing-footer-list-gap-lg: var(--spacing-150);
-
-  /* Bottom padding */
-  --padding-footer-bottom: var(--spacing-300);
-  --padding-footer-bottom-sm: var(--spacing-200);
-  --padding-footer-bottom-md: var(--spacing-300);
-  --padding-footer-bottom-lg: var(--spacing-400);
-
-  /* Divider margins */
-  --margin-footer-divider-sm: var(--spacing-200);
-  --margin-footer-divider-md: var(--spacing-300);
-  --margin-footer-divider-lg: var(--spacing-400);
-
-  /* === BORDERS & EFFECTS === */
-  --border-width-footer: var(--border-width-md);
-  --color-footer-border: var(--color-border-primary);
-  --height-footer-divider: 2px;
-
-  --radius-footer: 0;
 }

package/src/tokens/components/organisms/_gallery.css

@@ -1,35 +1,13 @@
-@theme static {
-  /* === REFERENCE LAYER === */
-  --color-gallery: var(--color-surface);
-  --color-gallery-accent: var(--color-primary);
-
-  /* === DERIVED COLORS === */
-  --color-gallery-trigger-bg: oklch(
-    from var(--color-gallery) calc(l - var(--surface-increment) * 2) c h
-  );
-  --color-gallery-trigger-bg-active: oklch(
-    from var(--color-gallery) calc(l - var(--surface-increment) * 3) c h
-  );
-  --color-gallery-trigger-border: var(--color-border-primary);
-  --color-gallery-trigger-border-active: var(--color-gallery-accent);
-  --color-gallery-trigger-ring: var(--color-ring);
-
-  /* === SPACING === */
-  --spacing-gallery-xs: var(--spacing-50);
-  --spacing-gallery-sm: var(--spacing-100);
-  --spacing-gallery-md: var(--spacing-200);
-  --spacing-gallery-lg: var(--spacing-300);
-  --spacing-gallery-root: var(--spacing-200);
-  --padding-gallery-trigger: 0 0;
-
-  /* === DIMENSIONS === */
+/*
+ * Gallery — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--height-gallery` responsive cap. Figma flattens it to a fixed
+ * dimension (576px); the `min(60svh, 36rem)` viewport behaviour can't be
+ * expressed as a Figma variable, so an unlayered `:root` override (which
+ * beats Figma's `@theme static`) restores it.
+ */
+
+:root {
   --height-gallery: min(60svh, 36rem);
-
-  /* === EFFECTS === */
-  --brightness-gallery-trigger: 70%;
-  --brightness-gallery-trigger-active: 100%;
-  --shadow-gallery-trigger: var(--shadow-sm);
-
-  /* === BORDERS === */
-  --radius-gallery-trigger: var(--radius-sm);
 }

package/src/tokens/components/organisms/_header.css

@@ -1,3 +1,13 @@
+/*
+ * Header — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept:
+ * - `:root @media (width < 48rem)` nav-spacing override (responsive,
+ *   conditional value — can't be expressed as a Figma variable).
+ * - glyph utilities mapping the menu/close icons.
+ */
+
 :root {
   @media (width < 48rem) {
     --spacing-header-nav-sm: var(--spacing-50);
@@ -6,89 +16,10 @@
   }
 }
 
-@theme static {
-  /* === REFERENCE LAYER === */
-  /* These tokens reference semantic tokens from _semantic.css */
-  --color-header: var(--color-surface);
-  --color-header-accent: var(--color-primary);
-
-  /* Reference typhography */
-  --text-header-sm: var(--text-sm);
-  --text-header-md: var(--text-md);
-  --text-header-lg: var(--text-lg);
-
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-header-bg: var(--color-header);
-
-  /* === ITEMS === */
-  --color-header-nav-item-bg: transparent;
-  --color-header-nav-item-bg-hover: transparent;
-
-  --text-header-item-sm: var(--text-header-sm);
-  --text-header-item-md: var(--text-header-md);
-  --text-header-item-lg: var(--text-header-lg);
-
-  /* === ACTIONS === */
-
-  /* Foreground colors */
-  --color-header-fg: var(--color-fg-primary);
-  --color-header-nav-fg: var(--color-fg-secondary);
-  --color-header-nav-fg-hover: var(--color-header-fg);
-  --color-header-nav-fg-active: var(--color-header-accent);
-  --color-header-actions-fg: var(--color-primary);
-  --color-header-actions-fg-hover: var(--color-header-fg);
-
-  /* Border colors */
-
-  /* === SIZE === */
-  /* Width constraints */
-  --width-header-max: 100%;
-
-  /* === SPACING === */
-  /* Section spacing */
-  --spacing-header-container: var(--spacing-100);
-
-  --padding-header-item-sm: var(--spacing-100);
-  --padding-header-item-md: var(--spacing-150);
-  --padding-header-item-lg: var(--spacing-200);
-
-  --spacing-header-nav-sm: var(--spacing-200);
-  --spacing-header-nav-md: var(--spacing-300);
-  --spacing-header-nav-lg: var(--spacing-400);
-
-  --spacing-header-actions-sm: var(--spacing-200);
-  --spacing-header-actions-md: var(--spacing-300);
-  --spacing-header-actions-lg: var(--spacing-400);
-
-  /* === TYPOGRAPHY === */
-  --font-weight-header-nav: var(--font-weight-medium);
-  --font-weight-header-nav-active: var(--font-weight-semibold);
-
-  /* === Z-INDEX === */
-  /* Mobile menu hamburger colors */
-  --color-header-hamburger-fg: var(--color-fg-primary);
-  --color-header-hamburger-fg-hover: var(--color-fg-secondary);
-
-  /* hamburger button */
-  --text-header-hamburger-sm: var(--text-header-sm);
-  --text-header-hamburger-md: var(--text-header-md);
-  --text-header-hamburger-lg: var(--text-header-lg);
-
-  --padding-header-hamburger-sm: var(--spacing-100);
-  --padding-header-hamburger-md: var(--spacing-150);
-  --padding-header-hamburger-lg: var(--spacing-200);
-
-  /* breakpoint */
-  --container-header-desktop: 48rem;
-
-  --duration-header: 300ms;
-}
-
 @utility token-icon-header-menu {
   @apply token-icon-menu;
 }
 
 @utility token-icon-header-close {
   @apply token-icon-close;
-}
+}