@db-vincent/tokens 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-vincent/tokens",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Minerva design tokens: primitive, semantic and component layers for color, type, space, shape and motion, in light and dark. (Placeholder scope `@ds`; see AGENTS.md.)",
   "license": "UNLICENSED",
   "type": "module",

package/tokens/tokens.css

@@ -133,9 +133,10 @@
     --duration-slower: 420ms;
 
     --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-    --ease-enter: cubic-bezier(0, 0, 0, 1);
+    --ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
     --ease-exit: cubic-bezier(0.3, 0, 1, 1);
-    --ease-spring: cubic-bezier(0.2, 1.25, 0.4, 1);
+    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+    --ease-spring: cubic-bezier(0.23, 1.1, 0.32, 1);
 
     --shadow-sm: 0 1px 2px rgb(5 8 11 / 0.06), 0 1px 3px rgb(5 8 11 / 0.08);
     --shadow-md: 0 4px 12px rgb(5 8 11 / 0.08), 0 1px 3px rgb(5 8 11 / 0.06);
@@ -364,6 +365,10 @@
     --color-selection-dark: #024679;
     --color-selection: var(--color-selection-light);
 
+    /* scrims - theme-independent neutral alphas behind overlays */
+    --scrim-default: rgb(3 6 10 / 0.62);
+    --scrim-subtle: rgb(3 6 10 / 0.32);
+
     /* focus contract - every focusable control uses this ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
@@ -600,7 +605,7 @@
     --card-meta-fg: var(--color-text-tertiary);
 
     /* modal */
-    --modal-backdrop: rgb(3 6 10 / 0.62);
+    --modal-backdrop: var(--scrim-default);
     --modal-footer-bg: var(--color-surface-sunken);
     --modal-bg: var(--color-overlay);
     --modal-fg: var(--color-text-primary);
@@ -612,6 +617,11 @@
     --modal-max-width-sm: 24rem;
     --modal-max-width-md: 32rem;
     --modal-max-width-lg: 44rem;
+    --modal-drawer-width-sm: 20rem;
+    --modal-drawer-width-md: 28rem;
+    --modal-drawer-width-lg: 40rem;
+    --modal-drawer-duration-enter: 300ms;
+    --modal-drawer-duration-exit: 200ms;
     --modal-title-fg: var(--color-text-primary);
     --modal-body-fg: var(--color-text-secondary);
     --modal-close-bg-hover: var(--color-surface-sunken);
@@ -648,7 +658,7 @@
     --nav-focus-color: var(--color-focus);
     --nav-focus-offset: var(--focus-ring-offset);
     --nav-focus-width: var(--focus-ring-width);
-    --nav-mobile-backdrop: rgb(3 6 10 / 0.62);
+    --nav-mobile-backdrop: var(--scrim-default);
     --nav-scrollbar: var(--color-border-default);
 
     /* navbar */
@@ -702,7 +712,7 @@
     --navbar-toggle-bg-hover: var(--color-surface-sunken);
     --navbar-sheet-bg: var(--color-overlay);
     --navbar-sheet-border: var(--color-border-subtle);
-    --navbar-sheet-backdrop: rgb(3 6 10 / 0.32);
+    --navbar-sheet-backdrop: var(--scrim-subtle);
     --navbar-sheet-radius: var(--radius-xl);
     --navbar-sheet-inset: var(--space-2);
     --navbar-sheet-max-width: 26rem;
@@ -930,6 +940,192 @@
     --spinner-duration: 700ms;
     --spinner-stroke: 2px;
 
+    /* tabs */
+    --tabs-list-border: var(--color-border-default);
+    --tabs-list-gap: var(--space-1);
+    --tabs-tab-height: var(--space-10);
+    --tabs-tab-padding-x: var(--space-4);
+    --tabs-tab-radius: var(--radius-md);
+    --tabs-tab-font-size: var(--text-sm);
+    --tabs-tab-font-weight: var(--weight-medium);
+    --tabs-tab-fg: var(--color-text-secondary);
+    --tabs-tab-fg-hover: var(--color-text-primary);
+    --tabs-tab-fg-selected: var(--color-text-primary);
+    --tabs-tab-fg-disabled: var(--color-text-tertiary);
+    --tabs-tab-bg-hover: var(--color-surface-sunken);
+    --tabs-indicator-bg: var(--color-accent);
+    --tabs-indicator-height: 2px;
+    --tabs-panel-padding: var(--space-4);
+    --tabs-duration: var(--duration-base);
+    --tabs-ease: var(--ease-standard);
+    --tabs-focus-color: var(--color-focus);
+    --tabs-focus-offset: calc(-1 * var(--focus-ring-offset));
+    --tabs-focus-width: var(--focus-ring-width);
+
+    /* switch */
+    --switch-gap: var(--space-2-5);
+    --switch-track-width-sm: var(--space-8);
+    --switch-track-height-sm: var(--space-5);
+    --switch-track-width-md: var(--space-10);
+    --switch-track-height-md: var(--space-6);
+    --switch-thumb-inset: var(--space-0-5);
+    --switch-track-bg: var(--color-border-strong);
+    --switch-track-bg-hover: var(--color-border-control-hover);
+    --switch-track-bg-checked: var(--color-accent);
+    --switch-track-bg-checked-hover: var(--color-accent-hover);
+    --switch-track-bg-disabled: var(--color-surface-sunken);
+    --switch-track-border-disabled: var(--color-border-default);
+    --switch-track-border-invalid: var(--color-danger);
+    --switch-thumb-bg: var(--color-surface);
+    --switch-thumb-bg-checked: var(--color-accent-on);
+    --switch-thumb-bg-disabled: var(--color-border-strong);
+    --switch-label-fg: var(--color-text-primary);
+    --switch-label-fg-disabled: var(--color-text-tertiary);
+    --switch-hint-fg: var(--color-text-secondary);
+    --switch-error-fg: var(--color-danger-fg);
+    --switch-press-scale: 0.97;
+    --switch-duration: var(--duration-base);
+    --switch-ease: var(--ease-standard);
+    --switch-focus-color: var(--color-focus);
+    --switch-focus-offset: var(--focus-ring-offset);
+    --switch-focus-width: var(--focus-ring-width);
+
+    /* progress */
+    --progress-height-sm: var(--space-1-5);
+    --progress-height-md: var(--space-2);
+    --progress-radius: var(--radius-full);
+    --progress-gap: var(--space-1-5);
+    --progress-track: var(--color-border-default);
+    --progress-accent: var(--color-accent);
+    --progress-success: var(--color-success);
+    --progress-warning: var(--color-warning);
+    --progress-danger: var(--color-danger);
+    --progress-indicator-static: var(--color-text-tertiary);
+    --progress-label-fg: var(--color-text-primary);
+    --progress-value-fg: var(--color-text-secondary);
+    --progress-font-size: var(--text-sm);
+    --progress-value-font: var(--font-mono);
+    --progress-indeterminate-width: 40%;
+    --progress-indeterminate-travel: 250%;
+    --progress-indeterminate-duration: 1400ms;
+    --progress-duration: var(--duration-base);
+    --progress-ease: var(--ease-standard);
+
+    /* popover */
+    --popover-bg: var(--color-surface-raised);
+    --popover-border: var(--color-border-control);
+    --popover-fg: var(--color-text-primary);
+    --popover-radius: var(--radius-md);
+    --popover-shadow: var(--shadow-lg);
+    --popover-padding: var(--space-4);
+    --popover-gap: var(--space-2);
+    --popover-max-width: 20rem;
+    --popover-scale-from: 0.96;
+    --popover-duration-enter: var(--duration-base);
+    --popover-duration-exit: var(--duration-fast);
+    --popover-duration-reduced: 120ms;
+    --popover-ease-enter: var(--ease-enter);
+    --popover-ease-exit: var(--ease-exit);
+
+    /* tooltip */
+    --tooltip-bg: var(--color-text-primary);
+    --tooltip-fg: var(--color-text-inverse);
+    --tooltip-radius: var(--radius-sm);
+    --tooltip-padding-x: var(--space-2);
+    --tooltip-padding-y: var(--space-1);
+    --tooltip-font-size: var(--text-xs);
+    --tooltip-line-height: var(--leading-xs);
+    --tooltip-max-width: 16rem;
+    --tooltip-gap: var(--space-2);
+    --tooltip-scale-from: 0.97;
+    --tooltip-duration: 125ms;
+    --tooltip-ease-enter: var(--ease-enter);
+    --tooltip-ease-exit: var(--ease-exit);
+
+    /* menu */
+    --menu-min-width: 12rem;
+    --menu-max-height: 24rem;
+    --menu-padding: var(--space-1);
+    --menu-item-gap: var(--space-2-5);
+    --menu-item-padding-x: var(--space-3);
+    --menu-item-padding-y: var(--space-2);
+    --menu-item-radius: var(--radius-sm);
+    --menu-item-font-size: var(--text-sm);
+    --menu-item-line-height: var(--leading-sm);
+    --menu-item-fg: var(--color-text-primary);
+    --menu-item-fg-disabled: var(--color-text-tertiary);
+    --menu-item-bg-active: var(--color-surface-sunken);
+    --menu-item-danger-fg: var(--color-danger-fg);
+    --menu-item-danger-bg-active: var(--color-danger-bg);
+    --menu-icon-fg: var(--color-text-secondary);
+    --menu-shortcut-fg: var(--color-text-tertiary);
+    --menu-indicator-fg: var(--color-accent);
+    --menu-indicator-size: var(--space-4);
+    --menu-label-fg: var(--color-text-tertiary);
+    --menu-label-font-size: var(--text-xs);
+    --menu-separator: var(--color-border-subtle);
+    --menu-focus-color: var(--color-focus);
+    --menu-focus-offset: calc(-1 * var(--focus-ring-offset));
+    --menu-focus-width: var(--focus-ring-width);
+
+    /* avatar */
+    --avatar-size-sm: var(--space-6);
+    --avatar-size-md: var(--space-8);
+    --avatar-size-lg: var(--space-12);
+    --avatar-radius-circle: var(--radius-full);
+    --avatar-radius-square: var(--radius-md);
+    --avatar-bg: var(--color-surface-sunken);
+    --avatar-fg: var(--color-text-secondary);
+    --avatar-border: var(--color-border-default);
+    --avatar-font: var(--font-body);
+    --avatar-font-weight: var(--weight-semibold);
+    --avatar-font-size-sm: var(--text-xs);
+    --avatar-font-size-md: var(--text-sm);
+    --avatar-font-size-lg: var(--text-lg);
+    --avatar-count-font: var(--font-mono);
+    --avatar-ring: var(--color-surface);
+    --avatar-ring-width: 2px;
+    --avatar-overlap-ratio: 0.15;
+    --avatar-status-size-sm: var(--space-2);
+    --avatar-status-size-md: var(--space-2-5);
+    --avatar-status-size-lg: var(--space-3);
+    --avatar-status-online: var(--color-success);
+    --avatar-status-away: var(--color-warning);
+    --avatar-status-busy: var(--color-danger);
+    --avatar-status-offline: var(--color-text-tertiary);
+    --avatar-status-mark: var(--color-surface);
+
+    /* stepper */
+    --stepper-marker-size: var(--space-8);
+    --stepper-marker-border-width: 2px;
+    --stepper-marker-font: var(--font-mono);
+    --stepper-marker-font-size: var(--text-sm);
+    --stepper-marker-bg-upcoming: var(--color-surface);
+    --stepper-marker-border-upcoming: var(--color-border-control);
+    --stepper-marker-fg-upcoming: var(--color-text-secondary);
+    --stepper-marker-bg-current: var(--color-accent-subtle);
+    --stepper-marker-border-current: var(--color-accent);
+    --stepper-marker-fg-current: var(--color-accent-subtle-fg);
+    --stepper-marker-bg-complete: var(--color-accent);
+    --stepper-marker-border-complete: var(--color-accent);
+    --stepper-marker-fg-complete: var(--color-accent-on);
+    --stepper-marker-bg-error: var(--color-danger-bg);
+    --stepper-marker-border-error: var(--color-danger);
+    --stepper-marker-fg-error: var(--color-danger-fg);
+    --stepper-connector-size: 2px;
+    --stepper-connector-bg: var(--color-border-default);
+    --stepper-connector-bg-complete: var(--color-accent);
+    --stepper-connector-gap: var(--space-2);
+    --stepper-gap: var(--space-2);
+    --stepper-step-gap: var(--space-6);
+    --stepper-label-fg: var(--color-text-primary);
+    --stepper-label-fg-upcoming: var(--color-text-secondary);
+    --stepper-label-fg-error: var(--color-danger-fg);
+    --stepper-description-fg: var(--color-text-secondary);
+    --stepper-description-fg-error: var(--color-danger-fg);
+    --stepper-duration: var(--duration-base);
+    --stepper-ease: var(--ease-standard);
+
     /* empty */
     --empty-padding: var(--space-16) var(--space-6);
     --empty-icon-size: var(--space-12);

package/tokens/tokens.json

@@ -307,9 +307,10 @@
       },
       "ease": {
         "--ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
-        "--ease-enter": "cubic-bezier(0, 0, 0, 1)",
+        "--ease-enter": "cubic-bezier(0.23, 1, 0.32, 1)",
         "--ease-exit": "cubic-bezier(0.3, 0, 1, 1)",
-        "--ease-spring": "cubic-bezier(0.2, 1.25, 0.4, 1)"
+        "--ease-drawer": "cubic-bezier(0.32, 0.72, 0, 1)",
+        "--ease-spring": "cubic-bezier(0.23, 1.1, 0.32, 1)"
       },
       "shadow": {
         "--shadow-sm": "0 1px 2px rgb(5 8 11 / 0.06), 0 1px 3px rgb(5 8 11 / 0.08)",
@@ -399,6 +400,14 @@
       }
     }
   },
+  "scrim": {
+    "default": {
+      "$value": "rgb(3 6 10 / 0.62)"
+    },
+    "subtle": {
+      "$value": "rgb(3 6 10 / 0.32)"
+    }
+  },
   "semantic": {
     "light": {
       "canvas": {
@@ -1056,7 +1065,7 @@
       "--card-meta-fg": "var(--color-text-tertiary)"
     },
     "modal": {
-      "--modal-backdrop": "rgb(3 6 10 / 0.62)",
+      "--modal-backdrop": "var(--scrim-default)",
       "--modal-footer-bg": "var(--color-surface-sunken)",
       "--modal-bg": "var(--color-overlay)",
       "--modal-fg": "var(--color-text-primary)",
@@ -1068,6 +1077,11 @@
       "--modal-max-width-sm": "24rem",
       "--modal-max-width-md": "32rem",
       "--modal-max-width-lg": "44rem",
+      "--modal-drawer-width-sm": "20rem",
+      "--modal-drawer-width-md": "28rem",
+      "--modal-drawer-width-lg": "40rem",
+      "--modal-drawer-duration-enter": "300ms",
+      "--modal-drawer-duration-exit": "200ms",
       "--modal-title-fg": "var(--color-text-primary)",
       "--modal-body-fg": "var(--color-text-secondary)",
       "--modal-close-bg-hover": "var(--color-surface-sunken)",
@@ -1104,7 +1118,7 @@
       "--nav-focus-color": "var(--color-focus)",
       "--nav-focus-offset": "var(--focus-ring-offset)",
       "--nav-focus-width": "var(--focus-ring-width)",
-      "--nav-mobile-backdrop": "rgb(3 6 10 / 0.62)",
+      "--nav-mobile-backdrop": "var(--scrim-default)",
       "--nav-scrollbar": "var(--color-border-default)"
     },
     "navbar": {
@@ -1158,7 +1172,7 @@
       "--navbar-toggle-bg-hover": "var(--color-surface-sunken)",
       "--navbar-sheet-bg": "var(--color-overlay)",
       "--navbar-sheet-border": "var(--color-border-subtle)",
-      "--navbar-sheet-backdrop": "rgb(3 6 10 / 0.32)",
+      "--navbar-sheet-backdrop": "var(--scrim-subtle)",
       "--navbar-sheet-radius": "var(--radius-xl)",
       "--navbar-sheet-inset": "var(--space-2)",
       "--navbar-sheet-max-width": "26rem",
@@ -1386,6 +1400,192 @@
       "--spinner-duration": "700ms",
       "--spinner-stroke": "2px"
     },
+    "tabs": {
+      "--tabs-list-border": "var(--color-border-default)",
+      "--tabs-list-gap": "var(--space-1)",
+      "--tabs-tab-height": "var(--space-10)",
+      "--tabs-tab-padding-x": "var(--space-4)",
+      "--tabs-tab-radius": "var(--radius-md)",
+      "--tabs-tab-font-size": "var(--text-sm)",
+      "--tabs-tab-font-weight": "var(--weight-medium)",
+      "--tabs-tab-fg": "var(--color-text-secondary)",
+      "--tabs-tab-fg-hover": "var(--color-text-primary)",
+      "--tabs-tab-fg-selected": "var(--color-text-primary)",
+      "--tabs-tab-fg-disabled": "var(--color-text-tertiary)",
+      "--tabs-tab-bg-hover": "var(--color-surface-sunken)",
+      "--tabs-indicator-bg": "var(--color-accent)",
+      "--tabs-indicator-height": "2px",
+      "--tabs-panel-padding": "var(--space-4)",
+      "--tabs-duration": "var(--duration-base)",
+      "--tabs-ease": "var(--ease-standard)",
+      "--tabs-focus-color": "var(--color-focus)",
+      "--tabs-focus-offset": "calc(-1 * var(--focus-ring-offset))",
+      "--tabs-focus-width": "var(--focus-ring-width)"
+    },
+    "switch": {
+      "--switch-gap": "var(--space-2-5)",
+      "--switch-track-width-sm": "var(--space-8)",
+      "--switch-track-height-sm": "var(--space-5)",
+      "--switch-track-width-md": "var(--space-10)",
+      "--switch-track-height-md": "var(--space-6)",
+      "--switch-thumb-inset": "var(--space-0-5)",
+      "--switch-track-bg": "var(--color-border-strong)",
+      "--switch-track-bg-hover": "var(--color-border-control-hover)",
+      "--switch-track-bg-checked": "var(--color-accent)",
+      "--switch-track-bg-checked-hover": "var(--color-accent-hover)",
+      "--switch-track-bg-disabled": "var(--color-surface-sunken)",
+      "--switch-track-border-disabled": "var(--color-border-default)",
+      "--switch-track-border-invalid": "var(--color-danger)",
+      "--switch-thumb-bg": "var(--color-surface)",
+      "--switch-thumb-bg-checked": "var(--color-accent-on)",
+      "--switch-thumb-bg-disabled": "var(--color-border-strong)",
+      "--switch-label-fg": "var(--color-text-primary)",
+      "--switch-label-fg-disabled": "var(--color-text-tertiary)",
+      "--switch-hint-fg": "var(--color-text-secondary)",
+      "--switch-error-fg": "var(--color-danger-fg)",
+      "--switch-press-scale": "0.97",
+      "--switch-duration": "var(--duration-base)",
+      "--switch-ease": "var(--ease-standard)",
+      "--switch-focus-color": "var(--color-focus)",
+      "--switch-focus-offset": "var(--focus-ring-offset)",
+      "--switch-focus-width": "var(--focus-ring-width)"
+    },
+    "progress": {
+      "--progress-height-sm": "var(--space-1-5)",
+      "--progress-height-md": "var(--space-2)",
+      "--progress-radius": "var(--radius-full)",
+      "--progress-gap": "var(--space-1-5)",
+      "--progress-track": "var(--color-border-default)",
+      "--progress-accent": "var(--color-accent)",
+      "--progress-success": "var(--color-success)",
+      "--progress-warning": "var(--color-warning)",
+      "--progress-danger": "var(--color-danger)",
+      "--progress-indicator-static": "var(--color-text-tertiary)",
+      "--progress-label-fg": "var(--color-text-primary)",
+      "--progress-value-fg": "var(--color-text-secondary)",
+      "--progress-font-size": "var(--text-sm)",
+      "--progress-value-font": "var(--font-mono)",
+      "--progress-indeterminate-width": "40%",
+      "--progress-indeterminate-travel": "250%",
+      "--progress-indeterminate-duration": "1400ms",
+      "--progress-duration": "var(--duration-base)",
+      "--progress-ease": "var(--ease-standard)"
+    },
+    "popover": {
+      "--popover-bg": "var(--color-surface-raised)",
+      "--popover-border": "var(--color-border-control)",
+      "--popover-fg": "var(--color-text-primary)",
+      "--popover-radius": "var(--radius-md)",
+      "--popover-shadow": "var(--shadow-lg)",
+      "--popover-padding": "var(--space-4)",
+      "--popover-gap": "var(--space-2)",
+      "--popover-max-width": "20rem",
+      "--popover-scale-from": "0.96",
+      "--popover-duration-enter": "var(--duration-base)",
+      "--popover-duration-exit": "var(--duration-fast)",
+      "--popover-duration-reduced": "120ms",
+      "--popover-ease-enter": "var(--ease-enter)",
+      "--popover-ease-exit": "var(--ease-exit)"
+    },
+    "tooltip": {
+      "--tooltip-bg": "var(--color-text-primary)",
+      "--tooltip-fg": "var(--color-text-inverse)",
+      "--tooltip-radius": "var(--radius-sm)",
+      "--tooltip-padding-x": "var(--space-2)",
+      "--tooltip-padding-y": "var(--space-1)",
+      "--tooltip-font-size": "var(--text-xs)",
+      "--tooltip-line-height": "var(--leading-xs)",
+      "--tooltip-max-width": "16rem",
+      "--tooltip-gap": "var(--space-2)",
+      "--tooltip-scale-from": "0.97",
+      "--tooltip-duration": "125ms",
+      "--tooltip-ease-enter": "var(--ease-enter)",
+      "--tooltip-ease-exit": "var(--ease-exit)"
+    },
+    "menu": {
+      "--menu-min-width": "12rem",
+      "--menu-max-height": "24rem",
+      "--menu-padding": "var(--space-1)",
+      "--menu-item-gap": "var(--space-2-5)",
+      "--menu-item-padding-x": "var(--space-3)",
+      "--menu-item-padding-y": "var(--space-2)",
+      "--menu-item-radius": "var(--radius-sm)",
+      "--menu-item-font-size": "var(--text-sm)",
+      "--menu-item-line-height": "var(--leading-sm)",
+      "--menu-item-fg": "var(--color-text-primary)",
+      "--menu-item-fg-disabled": "var(--color-text-tertiary)",
+      "--menu-item-bg-active": "var(--color-surface-sunken)",
+      "--menu-item-danger-fg": "var(--color-danger-fg)",
+      "--menu-item-danger-bg-active": "var(--color-danger-bg)",
+      "--menu-icon-fg": "var(--color-text-secondary)",
+      "--menu-shortcut-fg": "var(--color-text-tertiary)",
+      "--menu-indicator-fg": "var(--color-accent)",
+      "--menu-indicator-size": "var(--space-4)",
+      "--menu-label-fg": "var(--color-text-tertiary)",
+      "--menu-label-font-size": "var(--text-xs)",
+      "--menu-separator": "var(--color-border-subtle)",
+      "--menu-focus-color": "var(--color-focus)",
+      "--menu-focus-offset": "calc(-1 * var(--focus-ring-offset))",
+      "--menu-focus-width": "var(--focus-ring-width)"
+    },
+    "avatar": {
+      "--avatar-size-sm": "var(--space-6)",
+      "--avatar-size-md": "var(--space-8)",
+      "--avatar-size-lg": "var(--space-12)",
+      "--avatar-radius-circle": "var(--radius-full)",
+      "--avatar-radius-square": "var(--radius-md)",
+      "--avatar-bg": "var(--color-surface-sunken)",
+      "--avatar-fg": "var(--color-text-secondary)",
+      "--avatar-border": "var(--color-border-default)",
+      "--avatar-font": "var(--font-body)",
+      "--avatar-font-weight": "var(--weight-semibold)",
+      "--avatar-font-size-sm": "var(--text-xs)",
+      "--avatar-font-size-md": "var(--text-sm)",
+      "--avatar-font-size-lg": "var(--text-lg)",
+      "--avatar-count-font": "var(--font-mono)",
+      "--avatar-ring": "var(--color-surface)",
+      "--avatar-ring-width": "2px",
+      "--avatar-overlap-ratio": "0.15",
+      "--avatar-status-size-sm": "var(--space-2)",
+      "--avatar-status-size-md": "var(--space-2-5)",
+      "--avatar-status-size-lg": "var(--space-3)",
+      "--avatar-status-online": "var(--color-success)",
+      "--avatar-status-away": "var(--color-warning)",
+      "--avatar-status-busy": "var(--color-danger)",
+      "--avatar-status-offline": "var(--color-text-tertiary)",
+      "--avatar-status-mark": "var(--color-surface)"
+    },
+    "stepper": {
+      "--stepper-marker-size": "var(--space-8)",
+      "--stepper-marker-border-width": "2px",
+      "--stepper-marker-font": "var(--font-mono)",
+      "--stepper-marker-font-size": "var(--text-sm)",
+      "--stepper-marker-bg-upcoming": "var(--color-surface)",
+      "--stepper-marker-border-upcoming": "var(--color-border-control)",
+      "--stepper-marker-fg-upcoming": "var(--color-text-secondary)",
+      "--stepper-marker-bg-current": "var(--color-accent-subtle)",
+      "--stepper-marker-border-current": "var(--color-accent)",
+      "--stepper-marker-fg-current": "var(--color-accent-subtle-fg)",
+      "--stepper-marker-bg-complete": "var(--color-accent)",
+      "--stepper-marker-border-complete": "var(--color-accent)",
+      "--stepper-marker-fg-complete": "var(--color-accent-on)",
+      "--stepper-marker-bg-error": "var(--color-danger-bg)",
+      "--stepper-marker-border-error": "var(--color-danger)",
+      "--stepper-marker-fg-error": "var(--color-danger-fg)",
+      "--stepper-connector-size": "2px",
+      "--stepper-connector-bg": "var(--color-border-default)",
+      "--stepper-connector-bg-complete": "var(--color-accent)",
+      "--stepper-connector-gap": "var(--space-2)",
+      "--stepper-gap": "var(--space-2)",
+      "--stepper-step-gap": "var(--space-6)",
+      "--stepper-label-fg": "var(--color-text-primary)",
+      "--stepper-label-fg-upcoming": "var(--color-text-secondary)",
+      "--stepper-label-fg-error": "var(--color-danger-fg)",
+      "--stepper-description-fg": "var(--color-text-secondary)",
+      "--stepper-description-fg-error": "var(--color-danger-fg)",
+      "--stepper-duration": "var(--duration-base)",
+      "--stepper-ease": "var(--ease-standard)"
+    },
     "empty": {
       "--empty-padding": "var(--space-16) var(--space-6)",
       "--empty-icon-size": "var(--space-12)",

package/tokens/tokens.ts

@@ -350,7 +350,7 @@ export const componentTokens = {
     "--card-meta-fg": "var(--color-text-tertiary)"
   },
   "modal": {
-    "--modal-backdrop": "rgb(3 6 10 / 0.62)",
+    "--modal-backdrop": "var(--scrim-default)",
     "--modal-footer-bg": "var(--color-surface-sunken)",
     "--modal-bg": "var(--color-overlay)",
     "--modal-fg": "var(--color-text-primary)",
@@ -362,6 +362,11 @@ export const componentTokens = {
     "--modal-max-width-sm": "24rem",
     "--modal-max-width-md": "32rem",
     "--modal-max-width-lg": "44rem",
+    "--modal-drawer-width-sm": "20rem",
+    "--modal-drawer-width-md": "28rem",
+    "--modal-drawer-width-lg": "40rem",
+    "--modal-drawer-duration-enter": "300ms",
+    "--modal-drawer-duration-exit": "200ms",
     "--modal-title-fg": "var(--color-text-primary)",
     "--modal-body-fg": "var(--color-text-secondary)",
     "--modal-close-bg-hover": "var(--color-surface-sunken)",
@@ -398,7 +403,7 @@ export const componentTokens = {
     "--nav-focus-color": "var(--color-focus)",
     "--nav-focus-offset": "var(--focus-ring-offset)",
     "--nav-focus-width": "var(--focus-ring-width)",
-    "--nav-mobile-backdrop": "rgb(3 6 10 / 0.62)",
+    "--nav-mobile-backdrop": "var(--scrim-default)",
     "--nav-scrollbar": "var(--color-border-default)"
   },
   "navbar": {
@@ -452,7 +457,7 @@ export const componentTokens = {
     "--navbar-toggle-bg-hover": "var(--color-surface-sunken)",
     "--navbar-sheet-bg": "var(--color-overlay)",
     "--navbar-sheet-border": "var(--color-border-subtle)",
-    "--navbar-sheet-backdrop": "rgb(3 6 10 / 0.32)",
+    "--navbar-sheet-backdrop": "var(--scrim-subtle)",
     "--navbar-sheet-radius": "var(--radius-xl)",
     "--navbar-sheet-inset": "var(--space-2)",
     "--navbar-sheet-max-width": "26rem",
@@ -680,6 +685,192 @@ export const componentTokens = {
     "--spinner-duration": "700ms",
     "--spinner-stroke": "2px"
   },
+  "tabs": {
+    "--tabs-list-border": "var(--color-border-default)",
+    "--tabs-list-gap": "var(--space-1)",
+    "--tabs-tab-height": "var(--space-10)",
+    "--tabs-tab-padding-x": "var(--space-4)",
+    "--tabs-tab-radius": "var(--radius-md)",
+    "--tabs-tab-font-size": "var(--text-sm)",
+    "--tabs-tab-font-weight": "var(--weight-medium)",
+    "--tabs-tab-fg": "var(--color-text-secondary)",
+    "--tabs-tab-fg-hover": "var(--color-text-primary)",
+    "--tabs-tab-fg-selected": "var(--color-text-primary)",
+    "--tabs-tab-fg-disabled": "var(--color-text-tertiary)",
+    "--tabs-tab-bg-hover": "var(--color-surface-sunken)",
+    "--tabs-indicator-bg": "var(--color-accent)",
+    "--tabs-indicator-height": "2px",
+    "--tabs-panel-padding": "var(--space-4)",
+    "--tabs-duration": "var(--duration-base)",
+    "--tabs-ease": "var(--ease-standard)",
+    "--tabs-focus-color": "var(--color-focus)",
+    "--tabs-focus-offset": "calc(-1 * var(--focus-ring-offset))",
+    "--tabs-focus-width": "var(--focus-ring-width)"
+  },
+  "switch": {
+    "--switch-gap": "var(--space-2-5)",
+    "--switch-track-width-sm": "var(--space-8)",
+    "--switch-track-height-sm": "var(--space-5)",
+    "--switch-track-width-md": "var(--space-10)",
+    "--switch-track-height-md": "var(--space-6)",
+    "--switch-thumb-inset": "var(--space-0-5)",
+    "--switch-track-bg": "var(--color-border-strong)",
+    "--switch-track-bg-hover": "var(--color-border-control-hover)",
+    "--switch-track-bg-checked": "var(--color-accent)",
+    "--switch-track-bg-checked-hover": "var(--color-accent-hover)",
+    "--switch-track-bg-disabled": "var(--color-surface-sunken)",
+    "--switch-track-border-disabled": "var(--color-border-default)",
+    "--switch-track-border-invalid": "var(--color-danger)",
+    "--switch-thumb-bg": "var(--color-surface)",
+    "--switch-thumb-bg-checked": "var(--color-accent-on)",
+    "--switch-thumb-bg-disabled": "var(--color-border-strong)",
+    "--switch-label-fg": "var(--color-text-primary)",
+    "--switch-label-fg-disabled": "var(--color-text-tertiary)",
+    "--switch-hint-fg": "var(--color-text-secondary)",
+    "--switch-error-fg": "var(--color-danger-fg)",
+    "--switch-press-scale": "0.97",
+    "--switch-duration": "var(--duration-base)",
+    "--switch-ease": "var(--ease-standard)",
+    "--switch-focus-color": "var(--color-focus)",
+    "--switch-focus-offset": "var(--focus-ring-offset)",
+    "--switch-focus-width": "var(--focus-ring-width)"
+  },
+  "progress": {
+    "--progress-height-sm": "var(--space-1-5)",
+    "--progress-height-md": "var(--space-2)",
+    "--progress-radius": "var(--radius-full)",
+    "--progress-gap": "var(--space-1-5)",
+    "--progress-track": "var(--color-border-default)",
+    "--progress-accent": "var(--color-accent)",
+    "--progress-success": "var(--color-success)",
+    "--progress-warning": "var(--color-warning)",
+    "--progress-danger": "var(--color-danger)",
+    "--progress-indicator-static": "var(--color-text-tertiary)",
+    "--progress-label-fg": "var(--color-text-primary)",
+    "--progress-value-fg": "var(--color-text-secondary)",
+    "--progress-font-size": "var(--text-sm)",
+    "--progress-value-font": "var(--font-mono)",
+    "--progress-indeterminate-width": "40%",
+    "--progress-indeterminate-travel": "250%",
+    "--progress-indeterminate-duration": "1400ms",
+    "--progress-duration": "var(--duration-base)",
+    "--progress-ease": "var(--ease-standard)"
+  },
+  "popover": {
+    "--popover-bg": "var(--color-surface-raised)",
+    "--popover-border": "var(--color-border-control)",
+    "--popover-fg": "var(--color-text-primary)",
+    "--popover-radius": "var(--radius-md)",
+    "--popover-shadow": "var(--shadow-lg)",
+    "--popover-padding": "var(--space-4)",
+    "--popover-gap": "var(--space-2)",
+    "--popover-max-width": "20rem",
+    "--popover-scale-from": "0.96",
+    "--popover-duration-enter": "var(--duration-base)",
+    "--popover-duration-exit": "var(--duration-fast)",
+    "--popover-duration-reduced": "120ms",
+    "--popover-ease-enter": "var(--ease-enter)",
+    "--popover-ease-exit": "var(--ease-exit)"
+  },
+  "tooltip": {
+    "--tooltip-bg": "var(--color-text-primary)",
+    "--tooltip-fg": "var(--color-text-inverse)",
+    "--tooltip-radius": "var(--radius-sm)",
+    "--tooltip-padding-x": "var(--space-2)",
+    "--tooltip-padding-y": "var(--space-1)",
+    "--tooltip-font-size": "var(--text-xs)",
+    "--tooltip-line-height": "var(--leading-xs)",
+    "--tooltip-max-width": "16rem",
+    "--tooltip-gap": "var(--space-2)",
+    "--tooltip-scale-from": "0.97",
+    "--tooltip-duration": "125ms",
+    "--tooltip-ease-enter": "var(--ease-enter)",
+    "--tooltip-ease-exit": "var(--ease-exit)"
+  },
+  "menu": {
+    "--menu-min-width": "12rem",
+    "--menu-max-height": "24rem",
+    "--menu-padding": "var(--space-1)",
+    "--menu-item-gap": "var(--space-2-5)",
+    "--menu-item-padding-x": "var(--space-3)",
+    "--menu-item-padding-y": "var(--space-2)",
+    "--menu-item-radius": "var(--radius-sm)",
+    "--menu-item-font-size": "var(--text-sm)",
+    "--menu-item-line-height": "var(--leading-sm)",
+    "--menu-item-fg": "var(--color-text-primary)",
+    "--menu-item-fg-disabled": "var(--color-text-tertiary)",
+    "--menu-item-bg-active": "var(--color-surface-sunken)",
+    "--menu-item-danger-fg": "var(--color-danger-fg)",
+    "--menu-item-danger-bg-active": "var(--color-danger-bg)",
+    "--menu-icon-fg": "var(--color-text-secondary)",
+    "--menu-shortcut-fg": "var(--color-text-tertiary)",
+    "--menu-indicator-fg": "var(--color-accent)",
+    "--menu-indicator-size": "var(--space-4)",
+    "--menu-label-fg": "var(--color-text-tertiary)",
+    "--menu-label-font-size": "var(--text-xs)",
+    "--menu-separator": "var(--color-border-subtle)",
+    "--menu-focus-color": "var(--color-focus)",
+    "--menu-focus-offset": "calc(-1 * var(--focus-ring-offset))",
+    "--menu-focus-width": "var(--focus-ring-width)"
+  },
+  "avatar": {
+    "--avatar-size-sm": "var(--space-6)",
+    "--avatar-size-md": "var(--space-8)",
+    "--avatar-size-lg": "var(--space-12)",
+    "--avatar-radius-circle": "var(--radius-full)",
+    "--avatar-radius-square": "var(--radius-md)",
+    "--avatar-bg": "var(--color-surface-sunken)",
+    "--avatar-fg": "var(--color-text-secondary)",
+    "--avatar-border": "var(--color-border-default)",
+    "--avatar-font": "var(--font-body)",
+    "--avatar-font-weight": "var(--weight-semibold)",
+    "--avatar-font-size-sm": "var(--text-xs)",
+    "--avatar-font-size-md": "var(--text-sm)",
+    "--avatar-font-size-lg": "var(--text-lg)",
+    "--avatar-count-font": "var(--font-mono)",
+    "--avatar-ring": "var(--color-surface)",
+    "--avatar-ring-width": "2px",
+    "--avatar-overlap-ratio": "0.15",
+    "--avatar-status-size-sm": "var(--space-2)",
+    "--avatar-status-size-md": "var(--space-2-5)",
+    "--avatar-status-size-lg": "var(--space-3)",
+    "--avatar-status-online": "var(--color-success)",
+    "--avatar-status-away": "var(--color-warning)",
+    "--avatar-status-busy": "var(--color-danger)",
+    "--avatar-status-offline": "var(--color-text-tertiary)",
+    "--avatar-status-mark": "var(--color-surface)"
+  },
+  "stepper": {
+    "--stepper-marker-size": "var(--space-8)",
+    "--stepper-marker-border-width": "2px",
+    "--stepper-marker-font": "var(--font-mono)",
+    "--stepper-marker-font-size": "var(--text-sm)",
+    "--stepper-marker-bg-upcoming": "var(--color-surface)",
+    "--stepper-marker-border-upcoming": "var(--color-border-control)",
+    "--stepper-marker-fg-upcoming": "var(--color-text-secondary)",
+    "--stepper-marker-bg-current": "var(--color-accent-subtle)",
+    "--stepper-marker-border-current": "var(--color-accent)",
+    "--stepper-marker-fg-current": "var(--color-accent-subtle-fg)",
+    "--stepper-marker-bg-complete": "var(--color-accent)",
+    "--stepper-marker-border-complete": "var(--color-accent)",
+    "--stepper-marker-fg-complete": "var(--color-accent-on)",
+    "--stepper-marker-bg-error": "var(--color-danger-bg)",
+    "--stepper-marker-border-error": "var(--color-danger)",
+    "--stepper-marker-fg-error": "var(--color-danger-fg)",
+    "--stepper-connector-size": "2px",
+    "--stepper-connector-bg": "var(--color-border-default)",
+    "--stepper-connector-bg-complete": "var(--color-accent)",
+    "--stepper-connector-gap": "var(--space-2)",
+    "--stepper-gap": "var(--space-2)",
+    "--stepper-step-gap": "var(--space-6)",
+    "--stepper-label-fg": "var(--color-text-primary)",
+    "--stepper-label-fg-upcoming": "var(--color-text-secondary)",
+    "--stepper-label-fg-error": "var(--color-danger-fg)",
+    "--stepper-description-fg": "var(--color-text-secondary)",
+    "--stepper-description-fg-error": "var(--color-danger-fg)",
+    "--stepper-duration": "var(--duration-base)",
+    "--stepper-ease": "var(--ease-standard)"
+  },
   "empty": {
     "--empty-padding": "var(--space-16) var(--space-6)",
     "--empty-icon-size": "var(--space-12)",