@techsio/ui-kit 0.10.0 → 0.11.0

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

@@ -1,99 +1,26 @@
+/*
+ * Select — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--color-select-danger` — helper-text color seed (Figma has only
+ *     border validation colors).
+ *   - `--padding-select-item` composite bridge (Figma splits x/y).
+ *   - `--spacing-content` — consumed as a raw var() inside calc() in the
+ *     TSX; aliases Figma's --spacing-select-content.
+ *   - `--z-content` layering (code-side).
+ */
+
 @theme static {
-  /* === BASE COLOR MAPPING === */
-  --color-select: var(--color-form-control-bg);
-  --color-select-accent: var(--color-primary);
   --color-select-danger: var(--color-danger);
-  --color-select-success: var(--color-success);
-  --color-select-warning: var(--color-warning);
-  --color-select-fg: var(--color-fg-primary);
-
-  /* === STATE VARIATIONS === */
-  --color-select-hover: oklch(
-    from var(--color-select) calc(l + var(--state-hover)) c h
-  );
-
-  /* === ROOT === */
-  --gap-select-root: var(--spacing-150);
-
-  /* === TRIGGER === */
-  --color-select-trigger-bg-hover: var(--color-select-hover);
-  --color-select-trigger: var(--color-select-fg);
-  --color-select-trigger-hover: var(--color-select-accent);
-  --color-select-trigger-border-hover: var(--color-form-control-border-hover);
-  --color-select-trigger-border-focus: var(--color-select-accent);
-  --color-select-ring: var(--color-form-control-ring);
-  --padding-select-trigger-sm: var(--padding-input-sm);
-  --padding-select-trigger-md: var(--padding-input-md);
-
-  /* === CLEAR TRIGGER === */
-  --color-select-clear-trigger-fg: var(--color-select-fg);
-  --color-select-clear-trigger-bg: transparent;
-  --padding-select-clear-trigger: var(--spacing-100);
-  --spacing-select-right: var(--spacing-450);
-
-  /* === DROPDOWN CONTENT === */
-  --color-select-content-bg: var(--color-surface);
-  --color-select-content-border: var(--color-border-primary);
-  --shadow-select-content: var(--shadow-md);
-
-  /* === OPTION ITEM === */
-  --color-select-item-bg: transparent;
-  --color-select-item-fg: var(--color-select-fg);
-  --color-select-item-bg-hover: var(--color-select-hover);
-  --color-select-item-bg-selected: oklch(
-    from var(--color-select) calc(l - var(--surface-increment)) c h
-  );
-  --color-select-item-selected-fg: var(--color-select-accent);
-  --padding-select-item: var(--spacing-150) var(--spacing-250);
-
-  /* === INDICATOR === */
-  --color-select-indicator: var(--color-select-accent);
 
-  /* === PLACEHOLDER === */
-  --color-select-placeholder: var(--color-form-control-placeholder);
+  --padding-select-item: var(--padding-select-item-y) var(--padding-select-item-x);
 
-  /* === DISABLED STATES === */
-  --color-select-bg-disabled: var(--color-bg-disabled);
-  --color-select-fg-disabled: var(--color-fg-disabled);
-  --color-select-border-disabled: var(--color-border-disabled);
+  --spacing-content: var(--spacing-select-content);
 
-  /* === SPACING === */
-  --spacing-content: var(--spacing-450);
-
-  /* === TYPOGRAPHY === */
-  /* Trigger typography - size variants */
-  --text-select-trigger-xs: var(--text-xs);
-  --text-select-trigger-sm: var(--text-sm);
-  --text-select-trigger-md: var(--text-md);
-  --text-select-trigger-lg: var(--text-lg);
-
-  /* Item typography - size variants */
-  --text-select-item-xs: var(--text-xs);
-  --text-select-item-sm: var(--text-sm);
-  --text-select-item-md: var(--text-md);
-  --text-select-item-lg: var(--text-lg);
-
-  /* Value text typography - size variants */
-  --text-select-value-xs: var(--text-xs);
-  --text-select-value-sm: var(--text-sm);
-  --text-select-value-md: var(--text-md);
-  --text-select-value-lg: var(--text-lg);
-
-  --text-select-item-group-label-xs: var(--text-xs);
-  --text-select-item-group-label-sm: var(--text-sm);
-  --text-select-item-group-label-md: var(--text-md);
-  --text-select-item-group-label-lg: var(--text-lg);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-select: var(--border-width-form-control);
-  --radius-select: var(--radius-form-control);
-  --radius-select-sm: var(--radius-form-control-sm);
-  --radius-select-md: var(--radius-form-control-md);
-
-  /* === Z-INDEX === */
   --z-content: 50;
 }
 
+
 /* === ICONS === */
 @utility token-icon-select-indicator {
   @apply token-icon-chevron-down;

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

@@ -1,72 +1,17 @@
-@theme static {
-  --spacing-slider-slim: 2px;
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-slider-primary: var(--color-primary);
-  --color-slider-base: var(--color-surface);
-  --color-slider-error: var(--color-danger);
-  --color-slider-accent: oklch(
-    from var(--color-slider-base) calc(l - var(--surface-increment) * 2) c h
-  );
-
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-slider-range-bg: var(--color-slider-primary);
-  --color-slider-track-bg: var(--color-slider-base);
-  --color-slider-marker-bg: var(--color-slider-accent);
-  --color-slider-thumb-bg: var(--color-base-light);
-
-  /* Border colors */
-  --color-slider-border: var(--color-border-primary);
-
-  /* === STATE VARIATIONS === */
-  /* Hover states */
-  --color-slider-track-bg-hover: oklch(
-    from var(--color-slider-track-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-slider-range-bg-hover: oklch(
-    from var(--color-slider-range-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-slider-thumb-bg-hover: oklch(
-    from var(--color-slider-thumb-bg) calc(l + var(--state-hover)) c h
-  );
-
-  /* === VALIDATION STATES === */
-  --color-slider-range-bg-error: var(--color-slider-error);
-  --color-slider-border-error: var(--color-slider-error);
-
-  /* === DISABLED STATES === */
-  --color-slider-bg-disabled: var(--color-bg-disabled);
-  --color-slider-thumb-bg-disabled: var(--color-fg-disabled);
-  --color-slider-range-bg-disabled: var(--color-fg-disabled);
-  --color-slider-border-disabled: var(--color-border-disabled);
-
-  /* === SPACING === */
-  --spacing-slider-root: var(--spacing-200);
+/*
+ * Slider — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here (namespace aliases — h-/w- utilities can't read --size-*):
+ *   - track sizes, marker size, vertical marker height.
+ *   - `--padding-marker-text` composite built from the Figma offset.
+ */
 
-  --spacing-slider-thumb-sm: var(--spacing-200);
-  --spacing-slider-thumb-md: var(--spacing-250);
-  --spacing-slider-thumb-lg: var(--spacing-350);
-
-  --spacing-slider-track-sm: var(--spacing-100);
-  --spacing-slider-track-md: var(--spacing-150);
-  --spacing-slider-track-lg: var(--spacing-200);
-
-  --spacing-slider-marker: var(--spacing-slider-slim);
-  --padding-marker-text: 0 0 0 var(--spacing-150);
-
-  /* === TYPOGRAPHY === */
-  --text-slider-value-size: var(--text-sm);
-  --height-marker-vertical: var(--spacing-300);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-slider: var(--border-width-sm);
-  --radius-slider-track: var(--radius-full);
-  --radius-slider-thumb: var(--radius-full);
-
-  /* === SHADOWS === */
-  --shadow-slider-thumb: var(--shadow-sm);
+@theme static {
+  --spacing-slider-track-sm: var(--size-slider-track-sm);
+  --spacing-slider-track-md: var(--size-slider-track-md);
+  --spacing-slider-track-lg: var(--size-slider-track-lg);
 
-  /* === FOCUS RINGS === */
-  --color-slider-ring: var(--color-ring);
+  --spacing-slider-marker: var(--size-slider-marker);
+  --height-marker-vertical: var(--size-slider-marker-vertical-height);
+  --padding-marker-text: 0 0 0 var(--spacing-slider-marker-text);
 }

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 */