@techsio/ui-kit 0.10.0 → 0.11.0

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

@@ -1,72 +1,19 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  --color-accordion-base: var(--color-surface);
-  --color-accordion-border: var(--color-border-primary);
-
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-accordion-bg: var(--color-accordion-base);
-  --color-accordion-title-bg: var(--color-accordion-bg);
-  --color-accordion-content-bg: var(--color-accordion-bg);
-
-  /* Foreground colors */
-  --color-accordion-fg: var(--color-fg-primary);
-  --color-accordion-title-fg: var(--color-accordion-fg);
-  --color-accordion-subtitle-fg: --alpha(
-    var(--color-accordion-fg) /
-    var(--opacity-text-secondary)
-  );
-  --color-accordion-content-fg: var(--color-accordion-fg);
-
-  /* === STATE VARIATIONS === */
-  --color-accordion-bg-hover: oklch(
-    from var(--color-accordion-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-accordion-title-bg-hover: var(--color-accordion-bg-hover);
-
-  /* === COMPONENT VARIANTS === */
-  /* Component variants will be added here when needed */
-
-  /* === VALIDATION STATES === */
-  /* Validation states will be added here when needed */
-
-  /* === SPACING === */
-  --padding-accordion-title-sm: var(--spacing-100) var(--spacing-150);
-  --padding-accordion-title-md: var(--spacing-150) var(--spacing-200);
-  --padding-accordion-title-lg: var(--spacing-200) var(--spacing-250);
+/*
+ * Accordion — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--padding-accordion-{title,content}-{size}` combined shorthands
+ *     for the `p-accordion-*` utilities (Figma has split x/y axes).
+ *   - glyph @utility alias.
+ */
 
-  --padding-accordion-content-sm: var(--spacing-100) var(--spacing-100);
-  --padding-accordion-content-md: var(--spacing-150) var(--spacing-200);
-  --padding-accordion-content-lg: var(--spacing-200) var(--spacing-300);
-
-  --padding-accordion-icon: var(--spacing-200);
-
-  /* === TYPOGRAPHY === */
-  /* Font weights */
-  --font-weight-accordion-title: var(--font-weight-medium);
-
-  /* Default sizes */
-  --text-accordion-title-md: var(--text-md);
-  --text-accordion-content-md: var(--text-md);
-  --text-accordion-subtitle-md: var(--text-sm);
-
-  /* Size variants */
-  --text-accordion-title-lg: var(--text-lg);
-  --text-accordion-content-lg: var(--text-lg);
-  --text-accordion-subtitle-lg: var(--text-md);
-  --text-accordion-title-sm: var(--text-sm);
-  --text-accordion-content-sm: var(--text-sm);
-  --text-accordion-subtitle-sm: var(--text-xs);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-accordion: var(--border-width-sm);
-  --radius-accordion: var(--radius-sm);
+@theme static {
+  --padding-accordion-title-sm: var(--padding-accordion-title-y-sm) var(--padding-accordion-title-x-sm);
+  --padding-accordion-title-md: var(--padding-accordion-title-y-md) var(--padding-accordion-title-x-md);
+  --padding-accordion-title-lg: var(--padding-accordion-title-y-lg) var(--padding-accordion-title-x-lg);
 
-  /* === SHADOWS === */
-  --shadow-accordion-root-sm: var(--shadow-primary);
-  --shadow-accordion-root-md: var(--shadow-xl);
-  --shadow-accordion-content-sm: var(--shadow-sm);
-  --shadow-accordion-content-md: var(--shadow-primary);
+  --padding-accordion-content-md: var(--padding-accordion-content-y-md) var(--padding-accordion-content-x-md);
+  --padding-accordion-content-lg: var(--padding-accordion-content-y-lg) var(--padding-accordion-content-x-lg);
 }
 
 /* Semantic tokens for accordion icons */

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

@@ -1,61 +1,7 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  --color-breadcrumb-base: var(--color-surface);
-  --color-breadcrumb-accent: var(--color-primary);
-  --color-breadcrumb-muted: var(--color-fg-secondary);
-
-  /* === DERIVED COLORS === */
-  --color-breadcrumb-bg: var(--color-breadcrumb-base);
-  --color-breadcrumb-list-fg: var(--color-fg-primary);
-  --color-breadcrumb-item-fg: var(--color-fg-primary);
-  --color-breadcrumb-link-fg: var(--color-fg-primary);
-  --color-breadcrumb-current-link-fg: var(--color-breadcrumb-accent);
-  --color-breadcrumb-separator-fg: var(--color-breadcrumb-muted);
-  --color-breadcrumb-ellipsis-fg: var(--color-breadcrumb-muted);
-
-  /* === STATE VARIATIONS === */
-  --color-breadcrumb-link-fg-hover: var(--color-breadcrumb-accent);
-
-  /* === SPACING === */
-  --padding-breadcrumb-root-sm: var(--spacing-100);
-  --padding-breadcrumb-root-md: var(--spacing-150);
-  --padding-breadcrumb-root-lg: var(--spacing-200);
-
-  --gap-breadcrumb-list-sm: var(--spacing-100);
-  --gap-breadcrumb-list-md: var(--spacing-150);
-  --gap-breadcrumb-list-lg: var(--spacing-200);
-
-  --gap-breadcrumb-link-sm: var(--spacing-100);
-  --gap-breadcrumb-link-md: var(--spacing-150);
-  --gap-breadcrumb-link-lg: var(--spacing-200);
-
-  --gap-breadcrumb-separator-sm: var(--spacing-100);
-  --gap-breadcrumb-separator-md: var(--spacing-150);
-  --gap-breadcrumb-separator-lg: var(--spacing-200);
-
-  /* === TYPOGRAPHY === */
-  --text-breadcrumb-sm: var(--text-xs);
-  --text-breadcrumb-md: var(--text-sm);
-  --text-breadcrumb-lg: var(--text-md);
-
-  --text-breadcrumb-icon-sm: var(--text-breadcrumb-sm);
-  --text-breadcrumb-icon-md: var(--text-breadcrumb-md);
-  --text-breadcrumb-icon-lg: var(--text-breadcrumb-lg);
-
-  --text-breadcrumb-separator-icon-sm: var(--text-breadcrumb-sm);
-  --text-breadcrumb-separator-icon-md: var(--text-breadcrumb-md);
-  --text-breadcrumb-separator-icon-lg: var(--text-breadcrumb-lg);
-
-  --text-breadcrumb-ellipsis-icon-sm: var(--text-breadcrumb-sm);
-  --text-breadcrumb-ellipsis-icon-md: var(--text-breadcrumb-md);
-  --text-breadcrumb-ellipsis-icon-lg: var(--text-breadcrumb-lg);
-
-  /* === BORDERS & RADIUS === */
-  --radius-breadcrumb-link: var(--radius-sm);
-
-  /* === FOCUS RINGS === */
-  --color-breadcrumb-ring: var(--color-ring);
-}
+/*
+ * Breadcrumb — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css. Only glyph aliases live here.
+ */
 
 @utility token-icon-breadcrumb-separator {
   @apply token-icon-chevron-right;

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

@@ -1,65 +1,24 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-carousel: var(--color-surface);
-  --color-carousel-accent: var(--color-primary);
-
-  /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-carousel-trigger-bg: oklch(
-    from var(--color-carousel) calc(l - var(--surface-increment) * 4) c h
-  );
-  --color-carousel-trigger-bg-hover: oklch(
-    from var(--color-carousel) calc(l - var(--surface-increment) * 8) c h
-  );
-  --color-carousel-control-bg: oklch(
-    from var(--color-carousel) calc(l - var(--surface-increment) * 2) c h
-  );
-
-  /* Foreground colors */
-  --color-carousel-trigger-fg: var(--color-fg-dark);
-  --color-carousel-trigger-fg-hover: var(--color-fg-dark);
+/*
+ * Carousel — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--spacing-carousel-root-{sm,md,lg}` aliases — Figma renamed the
+ *     root size axis to --size-carousel-*, but max-w-/max-h- utilities
+ *     don't read the --size-* namespace.
+ *   - `--width-carousel-indicator` alias — same namespace limitation.
+ *   - `--padding-carousel-trigger` composite "0 0".
+ *   - `--aspect-carousel-indicator` (aspect-ratio namespace, code-side).
+ */
 
-  /* Indicator colors */
-  --color-carousel-indicator-bg: oklch(
-    from var(--color-carousel) calc(l - var(--surface-increment) * 4) c h
-  );
-  --color-carousel-indicator-bg-active: var(--color-carousel-accent);
-  --color-carousel-indicator-border: transparent;
-  --color-carousel-indicator-border-active: transparent;
-
-  /* === SPACING === */
-  /* Root spacing */
-  --spacing-carousel-root-sm: var(--container-3xs);
-  --spacing-carousel-root-md: var(--container-sm);
-  --spacing-carousel-root-lg: var(--container-lg);
-
-  --spacing-carousel-trigger-top: var(--spacing-100);
-  --spacing-carousel-trigger-right: var(--spacing-100);
+@theme static {
+  --spacing-carousel-root-sm: var(--size-carousel-sm);
+  --spacing-carousel-root-md: var(--size-carousel-md);
+  --spacing-carousel-root-lg: var(--size-carousel-lg);
 
-  /* Control spacing */
-  --padding-carousel-control: var(--spacing-100);
-  --gap-carousel-control: var(--spacing-200);
+  --width-carousel-indicator: var(--size-carousel-indicator);
 
-  /* Trigger spacing */
   --padding-carousel-trigger: 0 0;
 
-  /* Indicator spacing */
-  --gap-carousel-indicator: var(--spacing-100);
-  --width-carousel-indicator: var(--spacing-200);
-
-  /* === BORDERS & RADIUS === */
-  --radius-carousel: var(--radius-sm);
-  --radius-carousel-indicator: 50%;
-
-  /* === TYPOGRAPHY === */
-  --text-carousel-trigger-size: var(--text-md);
-
-  /* === FOCUS RINGS === */
-  --color-carousel-ring: var(--color-ring);
-
-  /* === ASPECT RATIO === */
-  /* Additional section for aspect ratios */
   --aspect-carousel-indicator: var(--aspect-square);
 }
 
@@ -77,4 +36,4 @@
 
 @utility token-icon-carousel-pause {
   @apply token-icon-pause;
-}
+}

package/src/tokens/components/molecules/_color-select.css

@@ -1,3 +1,16 @@
+/*
+ * ColorSelect — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--cols-num` responsive grid column count (runtime media queries).
+ *   - `--height-color-select-{sm,md,lg}` — Tailwind's h- utility doesn't
+ *     read the --size-* namespace; aliases keep `h-color-select-{size}`
+ *     bound to Figma's swatch sizes.
+ *   - `--padding-color-select-atom` (composite "0 0") and
+ *     `--size-color-select-icon` (50%) — runtime/percent values Figma
+ *     can't model.
+ */
+
 :root {
   --cols-num: 4;
   /*breakpoint md*/
@@ -11,41 +24,12 @@
 }
 
 @theme static {
-  /* === DERIVED COLORS === */
-  --color-color-select-accent: var(--color-fg-primary);
-  --color-color-select-border: var(--color-highlight);
-  --color-color-select-border-hover: var(--color-color-select-accent);
-  --color-color-select-selected: var(--color-color-select-accent);
-  --color-color-select-fg-check: var(--color-white);
-  --color-color-select-ring: var(--color-ring);
-  --color-color-select-label-fg: var(--color-fg-secondary);
+  --height-color-select-sm: var(--size-color-select-sm);
+  --height-color-select-md: var(--size-color-select-md);
+  --height-color-select-lg: var(--size-color-select-lg);
 
-  /* === SPACING === */
   --padding-color-select-atom: 0 0;
-  --spacing-color-select-group-sm: var(--spacing-100);
-  --spacing-color-select-group-md: var(--spacing-200);
-  --spacing-color-select-group-lg: var(--spacing-300);
-  
-  --spacing-color-select-sm: var(--spacing-250);
-  --spacing-color-select-md: var(--spacing-350);
-  --spacing-color-select-lg: var(--spacing-450);
-
-  /* === TYPOGRAPHY === */
-  --text-color-select-sm: var(--text-xs);
-  --text-color-select-md: var(--text-sm);
-  --text-color-select-lg: var(--text-md);
   --size-color-select-icon: 50%;
-
-  /* === BORDERS & RADIUS === */
-  --radius-color-select-full: var(--radius-full);
-  --radius-color-select-sm: var(--radius-sm);
-  --radius-color-select-md: var(--radius-md);
-  --radius-color-select-lg: var(--radius-2xl);
-
-  /* === SHADOWS === */
-  --shadow-color-select: var(--shadow-sm);
-
-  /* === LAYOUT === */
 }
 
 @utility token-icon-color-select {

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

@@ -1,102 +1,20 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-combobox: var(--color-form-control-bg);
-  --color-combobox-accent: var(--color-primary);
-  --color-combobox-success-fg: var(--color-success);
-  --color-combobox-warning-fg: var(--color-warning);
-  --color-combobox-danger-fg: var(--color-danger);
-
-  /* === DERIVED COLORS === */
-  /* Foreground colors */
-  --color-combobox-fg: var(--color-fg-primary);
-  --color-combobox-placeholder: var(--color-form-control-placeholder);
-
-  /* Border colors */
-  --color-combobox-border: var(--color-border-primary);
-  --color-combobox-border-hover: oklch(
-    from var(--color-combobox-border) calc(l + var(--state-hover)) c h
-  );
-  --color-combobox-border-focus: var(--color-combobox-accent);
-
-  /* === STATE VARIATIONS === */
-  /* Auto-calculated using semantic state modifiers */
-  --color-combobox-bg-hover: oklch(
-    from var(--color-combobox) calc(l + var(--state-hover)) c h
-  );
-  --color-combobox-bg-focus: oklch(
-    from var(--color-combobox) calc(l + var(--state-active)) c h
-  );
-
-  /* Input slot states */
-  --color-combobox-input-bg: transparent;
-  --color-combobox-input-bg-hover: var(--color-combobox-input-bg);
-  --color-combobox-input-bg-focused: var(--color-combobox-input-bg);
-
-  /* Trigger button states */
-  --color-combobox-trigger: var(--color-combobox-fg);
-  --color-combobox-trigger-hover: var(--color-combobox-accent);
-  --color-combobox-trigger-bg: transparent;
-  --color-combobox-trigger-bg-hover: var(--color-combobox-trigger-bg);
-  --color-combobox-trigger-bg-active: var(--color-combobox-trigger-bg);
-
-  /* === COMPONENT VARIANTS === */
-  /* Dropdown content */
-  --color-combobox-content-bg: var(--color-surface);
-
-  /* Dropdown items */
-  --color-combobox-item-fg: var(--color-combobox-fg);
-  --color-combobox-item-bg-selected: var(--color-combobox-bg-focus);
-  --color-combobox-item-bg-hover: var(--color-combobox-bg-hover);
-
-  /* === VALIDATION STATES === */
-  /* Success, warning, danger states - defined in BASE COLOR MAPPING */
+/*
+ * Combobox — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--padding-combobox-item-{size}` combined shorthands (Figma splits
+ *     the item padding into x + per-size y).
+ *   - `--padding-combobox-trigger` composite.
+ *   - `--z-combobox-content` layering (code-side).
+ */
 
-  /* === DISABLED STATES === */
-  /* Disabled appearance */
-  --color-combobox-bg-disabled: var(--color-bg-disabled);
-  --color-combobox-fg-disabled: var(--color-fg-disabled);
-  --color-combobox-border-disabled: var(--color-border-disabled);
-
-  /* === SPACING === */
-  /* Padding, margin, gap values */
-  --spacing-combobox-root-sm: var(--spacing-100);
-  --spacing-combobox-root-md: var(--spacing-150);
-  --spacing-combobox-root-lg: var(--spacing-200);
-
-  --padding-combobox-item-sm: var(--spacing-150) var(--spacing-250);
-  --padding-combobox-item-md: var(--spacing-150) var(--spacing-250);
-  --padding-combobox-item-lg: var(--spacing-50) var(--spacing-250);
+@theme static {
+  --padding-combobox-item-sm: var(--spacing-combobox-item-padding-y-sm) var(--spacing-combobox-item-padding-x);
+  --padding-combobox-item-md: var(--spacing-combobox-item-padding-y-md) var(--spacing-combobox-item-padding-x);
+  --padding-combobox-item-lg: var(--spacing-combobox-item-padding-y-lg) var(--spacing-combobox-item-padding-x);
 
   --padding-combobox-trigger: 0 var(--spacing-100);
 
-  --spacing-combobox-clear-right: var(--spacing-250);
-
-  /* === TYPOGRAPHY === */
-  /* Font sizes and weights */
-  --text-combobox-trigger-size: var(--text-lg);
-  --text-combobox-item-sm: var(--text-sm);
-  --text-combobox-item-md: var(--text-md);
-  --text-combobox-item-lg: var(--text-lg);
-  --text-combobox-content-sm: var(--text-sm);
-  --text-combobox-content-md: var(--text-md);
-  --text-combobox-content-lg: var(--text-lg);
-
-  /* === BORDERS & RADIUS === */
-  /* Border widths and radius values */
-  --radius-combobox: var(--radius-form-control);
-  --radius-combobox-sm: var(--radius-form-control-sm);
-  --radius-combobox-md: var(--radius-form-control-md);
-  --border-width-combobox: var(--border-width-input);
-
-  /* === SHADOWS === */
-  /* Box shadow definitions - none for combobox */
-
-  /* === FOCUS RINGS === */
-  /* Focus ring colors and styles */
-  --color-combobox-ring: var(--color-ring);
-
-  /* Z-index */
   --z-combobox-content: 20;
 }
 

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

@@ -1,71 +1,20 @@
-:root {
-  --opacity-backdrop: 10%;
-}
+/*
+ * Dialog — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--container-dialog-center-h-max` — 80svh runtime viewport unit
+ *     (Figma's -center-max-h is a fixed size; svh can't be modelled).
+ *   - `--container-dialog-center-w-max` — kept alongside for symmetry
+ *     with the h-max name the TSX consumes.
+ *   - `--z-dialog-*` — z-index layering, code-side concern.
+ */
 
 @theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-dialog: var(--color-surface);
-
-  /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-dialog-bg: var(--color-dialog);
-  --color-dialog-fg: var(--color-fg-primary);
-  --color-dialog-backdrop-bg: --alpha(
-    var(--color-fg-primary) /
-    var(--opacity-backdrop)
-  );
-
-  /* Content colors */
-  --color-dialog-content-bg: var(--color-dialog-bg);
-  --color-dialog-content-fg: var(--color-dialog-fg);
-  --color-dialog-content-border: var(--color-border-primary);
-
-  /* Foreground colors */
-  --color-dialog-title-fg: var(--color-dialog-fg);
-  --color-dialog-description-fg: var(--color-dialog-fg);
-  --color-dialog-close-trigger-fg: var(--color-dialog-fg);
-
-  /* === SPACING === */
-  --padding-dialog-content: var(--spacing-450);
-  --gap-dialog-content: var(--spacing-250);
-  --padding-dialog-actions: var(--spacing-150);
-  --gap-dialog-actions: var(--spacing-100);
-  --spacing-dialog-close-trigger-padding: var(--spacing-150);
-  --spacing-dialog-close-trigger-offset: var(--spacing-250);
-
-  /* === TYPOGRAPHY === */
-  --text-dialog-title-size: var(--text-xl);
-  --text-dialog-description-size: var(--text-md);
-  --font-weight-dialog-title: var(--font-weight-semibold);
-
-  /* === SIZES === */
-  --container-dialog-xs: var(--container-xs);
-  --container-dialog-sm: var(--container-sm);
-  --container-dialog-md: var(--container-md);
-  --container-dialog-lg: var(--container-lg);
-  --container-dialog-xl: var(--container-xl);
   --container-dialog-center-h-max: 80svh;
-  --container-dialog-center-w-max: var(--container-2xl);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-dialog: var(--border-width-sm);
-  --radius-dialog-center: var(--radius-sm);
-  --radius-dialog-left: 0 0 0 0;
-  --radius-dialog-right: 0 0 0 0;
-  --radius-dialog-top: 0 0 0 0;
-  --radius-dialog-bottom: 0 0 0 0;
-  --radius-dialog-close-trigger: var(--radius-full);
+  --container-dialog-center-w-max: var(--container-dialog-center-max-w);
 
-  /* === SHADOWS === */
-  --shadow-dialog-content: var(--shadow-primary);
-
-  /* === Z-INDEX === */
   --z-dialog-backdrop: 10;
   --z-dialog-positioner: 20;
-
-  /* === FOCUS RINGS === */
-  --color-dialog-ring: var(--color-ring);
 }
 
 /* Semantic tokens for dialog icons */

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

@@ -1,36 +1,14 @@
-@theme static {
-  /* ===== MENU CONTENT PANEL ===== */
-  --color-menu-content-bg: var(--color-surface);
-  --color-menu-content-border: var(--color-border-primary);
-  --radius-menu: var(--radius-sm);
-  --shadow-menu-content-shadow: var(--shadow-lg);
-
-  --padding-menu-content: var(--spacing-200);
-
-  /* ===== MENU ITEM ===== */
-  --color-menu-item-fg: var(--color-fg-primary);
-  --color-menu-item-hover: var(--color-surface-hover);
-  --radius-menu-item: var(--radius-xs);
-
-  --padding-menu-item-x: var(--spacing-250);
-  --padding-menu-item-y: var(--spacing-200);
-  --gap-menu-item: var(--spacing-200);
+/*
+ * Menu — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - semantic glyph @utility aliases.
+ */
 
-  /* ===== MENU ITEM ICON ===== */
-  --text-menu-item-icon-size: var(--text-lg);
-  --color-menu-item-icon-fg: var(--color-fg-secondary);
-
-  /* ===== MENU SEPARATOR ===== */
-  --color-menu-separator-bg: var(--color-border-primary);
-  --height-menu-separator: 1px;
-  --margin-menu-separator: var(--spacing-200);
-
-  /* ===== MENU SUBMENU INDICATOR ===== */
-  --color-menu-submenu-indicator-fg: var(--color-fg-secondary);
-  --spacing-menu-submenu-indicator: var(--spacing-250);
-
-  /* ===== MENU DISABLED STATE ===== */
-  --color-menu-fg-disabled: var(--color-fg-disabled);
+@theme static {
+  /* Tailwind's h- utility doesn't read the --size-* namespace; alias the
+   * Figma token into --height-* so `h-menu-separator` keeps working. */
+  --height-menu-separator: var(--size-menu-separator-height);
 }
 
 /* Semantic tokens for menu icons */

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

@@ -1,59 +1,26 @@
+/*
+ * Pagination — runtime tokens come from libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept here:
+ *   - `--color-pagination-border-hover` — runtime --alpha() of the Figma
+ *     active border (can't be a static Figma variable).
+ *   - `--border-pagination-width` — consumed via border-(length:--…) in
+ *     the TSX; aliases Figma's --border-width-pagination.
+ */
+
 :root {
   --opacity-pagination-hover: 30%;
 }
 
 @theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-pagination: var(--color-surface);
-  --color-pagination-accent: var(--color-primary);
-
-  /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-pagination-bg: var(--color-pagination);
-  --color-pagination-bg-active: var(--color-pagination-accent);
-  --color-pagination-bg-hover: oklch(
-    from var(--color-pagination-accent) calc(l + var(--state-hover)) c h
-  );
-  --color-pagination-neutral-bg: transparent;
-
-  /* Foreground colors */
-  --color-pagination-fg: var(--color-fg-primary);
-  --color-pagination-filled-fg-active: var(--color-fg-dark);
-  --color-pagination-outlined-fg-active: var(--color-pagination-accent);
-  --color-pagination-minimal-fg-active: var(--color-pagination-accent);
-
-  /* Border colors */
-  --color-pagination-border: var(--color-border-primary);
-  --color-pagination-border-active: var(--color-pagination-accent);
+  /* stylelint-disable scss/operator-no-newline-after -- biome wraps long lines */
   --color-pagination-border-hover: --alpha(
     var(--color-pagination-border-active) /
     var(--opacity-pagination-hover)
   );
+  /* stylelint-enable scss/operator-no-newline-after */
 
-  /* === DISABLED STATES === */
-  --color-pagination-bg-disabled: var(--color-bg-disabled);
-  --color-pagination-fg-disabled: var(--color-fg-disabled);
-  --color-pagination-border-disabled: var(--color-border-disabled);
-
-  /* === SPACING === */
-  --spacing-pagination: var(--spacing-200);
-  --spacing-pagination-list: var(--spacing-pagination);
-  --height-pagination-sm: 2em;
-  --height-pagination-md: 2.5em;
-  --height-pagination-lg: 3em;
-
-  /* === TYPOGRAPHY === */
-  --text-pagination-sm: var(--text-xs);
-  --text-pagination-md: var(--text-sm);
-  --text-pagination-lg: var(--text-md);
-
-  /* === BORDERS & RADIUS === */
-  --radius-pagination: var(--radius-sm);
-  --border-pagination-width: var(--border-width-sm);
-
-  /* === FOCUS RINGS === */
-  --color-pagination-ring: var(--color-ring);
+  --border-pagination-width: var(--border-width-pagination);
 }
 
 @utility token-icon-pagination-prev {