@dalexto/lexsys-registry 0.1.2 → 0.1.3

package/templates/styles/tokens.css

@@ -3,7 +3,7 @@
  *
  * Generated by @dalexto/lexsys-tokens.
  * Manual changes will be overwritten.
- * Last generated: 2026-06-06T23:24:29.234Z
+ * Last generated: 2026-06-07T16:48:33.996Z
  */
 
 :root {
@@ -186,6 +186,11 @@
   --lex-size-selection-control-sm: var(--lex-size-3);
   --lex-size-selection-control-md: var(--lex-size-4);
   --lex-size-selection-control-lg: var(--lex-size-5);
+  --lex-size-icon-xs: var(--lex-size-2);
+  --lex-size-icon-sm: var(--lex-size-3);
+  --lex-size-icon-md: var(--lex-size-4);
+  --lex-size-icon-lg: var(--lex-size-5);
+  --lex-size-icon-xl: var(--lex-size-6);
   --lex-size-area-swipe-sm: var(--lex-size-12);
   --lex-size-area-swipe-md: var(--lex-size-16);
   --lex-size-area-swipe-lg: var(--lex-size-20);
@@ -254,16 +259,15 @@
   --lex-letter-spacing-wider: 0.05em;
   --lex-letter-spacing-widest: 0.1em;
   --lex-duration-instant: 0ms;
-  --lex-duration-fastest: 100ms;
   --lex-duration-fast: 150ms;
-  --lex-duration-normal: 200ms;
-  --lex-duration-slow: 300ms;
+  --lex-duration-normal: 250ms;
+  --lex-duration-slow: 350ms;
   --lex-duration-slower: 500ms;
   --lex-duration-control: var(--lex-duration-fast);
-  --lex-duration-surface: var(--lex-duration-fast);
-  --lex-duration-overlay-enter: var(--lex-duration-normal);
+  --lex-duration-surface: var(--lex-duration-normal);
+  --lex-duration-overlay-enter: var(--lex-duration-slow);
   --lex-duration-overlay-exit: var(--lex-duration-fast);
-  --lex-duration-layout: var(--lex-duration-normal);
+  --lex-duration-layout: var(--lex-duration-slow);
   --lex-easing-linear: cubic-bezier(0, 0, 1, 1);
   --lex-easing-standard: cubic-bezier(0.2, 0, 0, 1);
   --lex-easing-enter: cubic-bezier(0, 0, 0.2, 1);
@@ -610,7 +614,7 @@
   --lex-accordion-panel-font-line-height: var(--lex-typography-body-sm-line-height);
   --lex-accordion-focus-ring-color: var(--lex-border-focus);
   --lex-accordion-focus-ring-width: var(--lex-outline-width-inset);
-  --lex-accordion-transition-duration: var(--lex-duration-control);
+  --lex-accordion-transition-duration: var(--lex-duration-surface);
   --lex-accordion-transition-easing: var(--lex-easing-control);
   --lex-alert-dialog-backdrop-background: var(--lex-color-text-primary);
   --lex-alert-dialog-backdrop-opacity: 0.56;
@@ -653,8 +657,8 @@
   --lex-alert-dialog-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-alert-dialog-focus-ring-width: var(--lex-outline-width-focus);
   --lex-alert-dialog-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-alert-dialog-transition-duration: var(--lex-duration-control);
-  --lex-alert-dialog-transition-easing: var(--lex-easing-control);
+  --lex-alert-dialog-transition-duration: var(--lex-duration-overlay-enter);
+  --lex-alert-dialog-transition-easing: var(--lex-easing-ease-in);
   --lex-alert-radius: var(--lex-radius-surface);
   --lex-alert-padding: var(--lex-space-surface-sm);
   --lex-alert-gap: var(--lex-space-surface-gap-sm);
@@ -675,6 +679,9 @@
   --lex-alert-danger-background: var(--lex-color-feedback-danger-background);
   --lex-alert-danger-foreground: var(--lex-color-feedback-danger-foreground);
   --lex-alert-danger-border-color: var(--lex-color-feedback-danger-foreground);
+  --lex-auth-form-root-foreground: var(--lex-color-text-primary);
+  --lex-auth-form-content-gap: var(--lex-space-surface-sm);
+  --lex-auth-form-footer-gap: var(--lex-space-surface-gap-md);
   --lex-autocomplete-background: var(--lex-color-background-base);
   --lex-autocomplete-foreground: var(--lex-color-text-primary);
   --lex-autocomplete-border-color: var(--lex-border-default);
@@ -713,7 +720,7 @@
   --lex-autocomplete-invalid-border-color: var(--lex-action-danger-base);
   --lex-autocomplete-invalid-ring-color: var(--lex-action-danger-base);
   --lex-autocomplete-invalid-ring-width: var(--lex-outline-width-focus);
-  --lex-autocomplete-transition-duration: var(--lex-duration-control);
+  --lex-autocomplete-transition-duration: var(--lex-duration-surface);
   --lex-autocomplete-transition-easing: var(--lex-easing-control);
   --lex-avatar-background: var(--lex-color-background-subtle);
   --lex-avatar-foreground: var(--lex-color-text-secondary);
@@ -902,8 +909,21 @@
   --lex-combobox-invalid-border-color: var(--lex-action-danger-base);
   --lex-combobox-invalid-ring-color: var(--lex-action-danger-base);
   --lex-combobox-invalid-ring-width: var(--lex-outline-width-focus);
-  --lex-combobox-transition-duration: var(--lex-duration-control);
+  --lex-combobox-transition-duration: var(--lex-duration-surface);
   --lex-combobox-transition-easing: var(--lex-easing-control);
+  --lex-command-palette-root-gap: var(--lex-space-control-gap-md);
+  --lex-command-palette-list-max-height: var(--lex-size-command-palette-list-max-height);
+  --lex-command-palette-group-label-padding-x: var(--lex-space-control-x-sm);
+  --lex-command-palette-group-label-padding-y: var(--lex-space-control-y-xs);
+  --lex-command-palette-item-gap: var(--lex-space-control-gap-sm);
+  --lex-command-palette-item-padding-x: var(--lex-space-control-x-sm);
+  --lex-command-palette-item-padding-y: var(--lex-space-control-y-sm);
+  --lex-command-palette-item-radius: var(--lex-radius-control);
+  --lex-command-palette-item-foreground: var(--lex-color-text-primary);
+  --lex-command-palette-item-hover-background: var(--lex-action-secondary-hover);
+  --lex-command-palette-item-description-foreground: var(--lex-color-text-secondary);
+  --lex-command-palette-empty-padding-x: var(--lex-space-control-x-sm);
+  --lex-command-palette-empty-padding-y: var(--lex-space-surface-sm);
   --lex-context-menu-radius: var(--lex-radius-surface);
   --lex-context-menu-popup-background: var(--lex-color-background-base);
   --lex-context-menu-popup-foreground: var(--lex-color-text-primary);
@@ -929,7 +949,7 @@
   --lex-context-menu-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-context-menu-focus-ring-width: var(--lex-outline-width-focus);
   --lex-context-menu-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-context-menu-transition-duration: var(--lex-duration-control);
+  --lex-context-menu-transition-duration: var(--lex-duration-surface);
   --lex-context-menu-transition-easing: var(--lex-easing-control);
   --lex-collapsible-background: var(--lex-color-background-surface);
   --lex-collapsible-foreground: var(--lex-color-text-primary);
@@ -941,7 +961,7 @@
   --lex-collapsible-trigger-gap: var(--lex-space-control-gap-sm);
   --lex-collapsible-trigger-padding-x: var(--lex-space-surface-md);
   --lex-collapsible-trigger-padding-y: var(--lex-space-surface-sm);
-  --lex-collapsible-trigger-icon-size: var(--lex-size-selection-control-md);
+  --lex-collapsible-trigger-icon-size: var(--lex-size-icon-md);
   --lex-collapsible-trigger-font-size: var(--lex-typography-label-sm-font-size);
   --lex-collapsible-trigger-font-weight: var(--lex-typography-label-sm-font-weight);
   --lex-collapsible-trigger-font-line-height: var(--lex-typography-label-sm-line-height);
@@ -952,6 +972,17 @@
   --lex-collapsible-panel-font-line-height: var(--lex-typography-body-sm-line-height);
   --lex-collapsible-transition-duration: var(--lex-duration-surface);
   --lex-collapsible-transition-easing: var(--lex-easing-surface);
+  --lex-dashboard-shell-root-background: var(--lex-color-background-base);
+  --lex-dashboard-shell-root-foreground: var(--lex-color-text-primary);
+  --lex-dashboard-shell-main-background: var(--lex-color-background-base);
+  --lex-dashboard-shell-header-padding-x: var(--lex-space-control-x-md);
+  --lex-dashboard-shell-header-padding-y: var(--lex-space-control-x-sm);
+  --lex-dashboard-shell-header-background: var(--lex-color-background-base);
+  --lex-dashboard-shell-header-border-color: var(--lex-border-default);
+  --lex-dashboard-shell-content-padding: var(--lex-space-surface-sm);
+  --lex-dashboard-shell-content-background: var(--lex-color-background-base);
+  --lex-data-table-root-gap: var(--lex-space-surface-sm);
+  --lex-data-table-footer-gap: var(--lex-space-surface-gap-md);
   --lex-date-picker-calendar-background: var(--lex-color-background-base);
   --lex-date-picker-calendar-foreground: var(--lex-color-text-primary);
   --lex-date-picker-calendar-border-color: var(--lex-border-default);
@@ -959,6 +990,7 @@
   --lex-date-picker-calendar-padding: var(--lex-space-surface-md);
   --lex-date-picker-calendar-gap: var(--lex-space-surface-gap-sm);
   --lex-date-picker-calendar-width: var(--lex-size-panel-width-sm);
+  --lex-date-picker-calendar-grid-gap: var(--lex-space-surface-gap-sm);
   --lex-date-picker-header-foreground: var(--lex-color-text-primary);
   --lex-date-picker-header-font-size: var(--lex-typography-heading-xs-font-size);
   --lex-date-picker-header-font-weight: var(--lex-typography-heading-xs-font-weight);
@@ -990,6 +1022,9 @@
   --lex-date-picker-focus-ring-offset: var(--lex-outline-offset-focus);
   --lex-date-picker-transition-duration: var(--lex-duration-control);
   --lex-date-picker-transition-easing: var(--lex-easing-control);
+  --lex-date-picker-trigger-input-embedded-height: var(--lex-size-control-sm);
+  --lex-date-picker-trigger-input-embedded-background: transparent;
+  --lex-date-picker-trigger-input-embedded-padding-x: var(--lex-space-control-x-sm);
   --lex-dialog-backdrop-background: var(--lex-color-text-primary);
   --lex-dialog-backdrop-opacity: 0.48;
   --lex-dialog-backdrop-z-index: var(--lex-elevation-backdrop-z-index);
@@ -1031,8 +1066,8 @@
   --lex-dialog-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-dialog-focus-ring-width: var(--lex-outline-width-focus);
   --lex-dialog-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-dialog-transition-duration: var(--lex-duration-control);
-  --lex-dialog-transition-easing: var(--lex-easing-control);
+  --lex-dialog-transition-duration: var(--lex-duration-overlay-enter);
+  --lex-dialog-transition-easing: var(--lex-easing-ease-in);
   --lex-empty-padding: var(--lex-space-surface-md);
   --lex-empty-gap: var(--lex-space-surface-gap-md);
   --lex-empty-header-gap: var(--lex-space-surface-gap-sm);
@@ -1104,8 +1139,8 @@
   --lex-drawer-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-drawer-focus-ring-width: var(--lex-outline-width-focus);
   --lex-drawer-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-drawer-transition-duration: var(--lex-duration-control);
-  --lex-drawer-transition-easing: var(--lex-easing-control);
+  --lex-drawer-transition-duration: var(--lex-duration-overlay-enter);
+  --lex-drawer-transition-easing: var(--lex-easing-ease-in);
   --lex-field-gap: var(--lex-space-control-gap-sm);
   --lex-field-foreground: var(--lex-color-text-primary);
   --lex-field-label-foreground: var(--lex-color-text-primary);
@@ -1167,6 +1202,7 @@
   --lex-fieldset-legend-font-letter-spacing: var(--lex-typography-label-md-letter-spacing);
   --lex-form-gap: var(--lex-space-surface-gap-md);
   --lex-form-foreground: var(--lex-color-text-primary);
+  --lex-form-field-root-gap: var(--lex-space-control-gap-md);
   --lex-input-background: var(--lex-color-background-base);
   --lex-input-foreground: var(--lex-color-text-primary);
   --lex-input-placeholder-color: var(--lex-color-text-secondary);
@@ -1230,12 +1266,12 @@
   --lex-menu-item-highlight-foreground: var(--lex-color-text-primary);
   --lex-menu-item-checked-background: var(--lex-action-primary-base);
   --lex-menu-item-checked-foreground: var(--lex-color-text-inverse);
-  --lex-menu-item-indicator-size: var(--lex-size-selection-control-sm);
+  --lex-menu-item-indicator-size: var(--lex-size-icon-sm);
   --lex-menu-item-focus-ring-width: var(--lex-outline-width-focus);
   --lex-menu-item-focus-ring-color: var(--lex-border-focus);
   --lex-menu-item-focus-ring-offset: var(--lex-outline-offset-focus);
   --lex-menu-item-focus-ring-offset-color: var(--lex-color-background-base);
-  --lex-menu-submenu-icon-size: var(--lex-size-selection-control-sm);
+  --lex-menu-submenu-icon-size: var(--lex-size-icon-sm);
   --lex-menu-group-gap: var(--lex-space-control-gap-sm);
   --lex-menu-group-label-foreground: var(--lex-color-text-secondary);
   --lex-menu-group-label-padding-y: var(--lex-space-control-y-xs);
@@ -1253,7 +1289,7 @@
   --lex-menu-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-menu-focus-ring-width: var(--lex-outline-width-focus);
   --lex-menu-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-menu-transition-duration: var(--lex-duration-control);
+  --lex-menu-transition-duration: var(--lex-duration-surface);
   --lex-menu-transition-easing: var(--lex-easing-control);
   --lex-menubar-radius: var(--lex-radius-surface);
   --lex-menubar-trigger-background: var(--lex-color-background-surface);
@@ -1274,7 +1310,7 @@
   --lex-menubar-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-menubar-focus-ring-width: var(--lex-outline-width-focus);
   --lex-menubar-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-menubar-transition-duration: var(--lex-duration-control);
+  --lex-menubar-transition-duration: var(--lex-duration-surface);
   --lex-menubar-transition-easing: var(--lex-easing-control);
   --lex-meter-gap: var(--lex-space-control-gap-sm);
   --lex-meter-header-gap: var(--lex-space-control-gap-sm);
@@ -1314,7 +1350,7 @@
   --lex-navigation-menu-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-navigation-menu-focus-ring-width: var(--lex-outline-width-focus);
   --lex-navigation-menu-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-navigation-menu-transition-duration: var(--lex-duration-control);
+  --lex-navigation-menu-transition-duration: var(--lex-duration-surface);
   --lex-navigation-menu-transition-easing: var(--lex-easing-control);
   --lex-number-field-gap: var(--lex-space-control-gap-sm);
   --lex-number-field-foreground: var(--lex-color-text-primary);
@@ -1385,6 +1421,12 @@
   --lex-otp-field-separator-font-weight: var(--lex-typography-control-md-font-weight);
   --lex-otp-field-transition-duration: var(--lex-duration-control);
   --lex-otp-field-transition-easing: var(--lex-easing-control);
+  --lex-page-header-root-gap: var(--lex-space-surface-sm);
+  --lex-page-header-root-padding-bottom: var(--lex-space-surface-sm);
+  --lex-page-header-root-border-color: var(--lex-border-default);
+  --lex-page-header-top-gap: var(--lex-space-surface-gap-md);
+  --lex-page-header-heading-gap: var(--lex-space-surface-gap-sm);
+  --lex-page-header-actions-gap: var(--lex-space-control-gap-md);
   --lex-preview-card-backdrop-background: var(--lex-color-text-primary);
   --lex-preview-card-backdrop-opacity: 0.24;
   --lex-preview-card-backdrop-z-index: var(--lex-elevation-backdrop-z-index);
@@ -1397,7 +1439,7 @@
   --lex-preview-card-popup-max-width: var(--lex-size-panel-width-sm);
   --lex-preview-card-popup-padding: var(--lex-space-surface-md);
   --lex-preview-card-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
-  --lex-preview-card-arrow-size: var(--lex-size-selection-control-sm);
+  --lex-preview-card-arrow-size: var(--lex-size-icon-sm);
   --lex-preview-card-trigger-focus-ring-color: var(--lex-border-focus);
   --lex-preview-card-trigger-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-preview-card-trigger-focus-ring-width: var(--lex-outline-width-focus);
@@ -1442,7 +1484,7 @@
   --lex-popover-popup-padding: var(--lex-space-surface-md);
   --lex-popover-popup-gap: var(--lex-space-surface-gap-sm);
   --lex-popover-popup-shadow: var(--lex-elevation-shadow-floating-box-shadow);
-  --lex-popover-arrow-size: var(--lex-size-selection-control-sm);
+  --lex-popover-arrow-size: var(--lex-size-icon-sm);
   --lex-popover-title-foreground: var(--lex-color-text-primary);
   --lex-popover-title-padding-end: var(--lex-size-control-lg);
   --lex-popover-title-font-size: var(--lex-typography-heading-xs-font-size);
@@ -1471,7 +1513,7 @@
   --lex-popover-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-popover-focus-ring-width: var(--lex-outline-width-focus);
   --lex-popover-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-popover-transition-duration: var(--lex-duration-control);
+  --lex-popover-transition-duration: var(--lex-duration-surface);
   --lex-popover-transition-easing: var(--lex-easing-control);
   --lex-progress-gap: var(--lex-space-control-gap-sm);
   --lex-progress-label-foreground: var(--lex-color-text-secondary);
@@ -1536,7 +1578,7 @@
   --lex-select-label-font-weight: var(--lex-typography-label-sm-font-weight);
   --lex-select-label-font-line-height: var(--lex-typography-label-sm-line-height);
   --lex-select-icon-foreground: var(--lex-color-text-secondary);
-  --lex-select-icon-size: var(--lex-size-selection-control-md);
+  --lex-select-icon-size: var(--lex-size-icon-md);
   --lex-select-popup-background: var(--lex-color-background-base);
   --lex-select-popup-foreground: var(--lex-color-text-primary);
   --lex-select-popup-border-color: var(--lex-border-default);
@@ -1558,7 +1600,7 @@
   --lex-select-item-highlight-foreground: var(--lex-color-text-primary);
   --lex-select-item-selected-background: var(--lex-action-primary-base);
   --lex-select-item-selected-foreground: var(--lex-color-text-inverse);
-  --lex-select-item-indicator-size: var(--lex-size-selection-control-sm);
+  --lex-select-item-indicator-size: var(--lex-size-icon-sm);
   --lex-select-group-gap: var(--lex-space-control-gap-sm);
   --lex-select-group-label-foreground: var(--lex-color-text-secondary);
   --lex-select-group-label-padding-y: var(--lex-space-control-y-xs);
@@ -1578,20 +1620,55 @@
   --lex-select-invalid-border-color: var(--lex-action-danger-base);
   --lex-select-invalid-ring-color: var(--lex-action-danger-base);
   --lex-select-invalid-ring-width: var(--lex-outline-width-focus);
-  --lex-select-transition-duration: var(--lex-duration-control);
+  --lex-select-transition-duration: var(--lex-duration-surface);
   --lex-select-transition-easing: var(--lex-easing-control);
   --lex-separator-color: var(--lex-border-default);
   --lex-separator-thickness: 1px;
+  --lex-settings-page-layout-root-background: var(--lex-color-background-base);
+  --lex-settings-page-layout-root-foreground: var(--lex-color-text-primary);
+  --lex-settings-page-layout-header-padding-x: var(--lex-space-surface-sm);
+  --lex-settings-page-layout-header-padding-top: var(--lex-space-surface-sm);
+  --lex-settings-page-layout-body-gap: var(--lex-space-surface-sm);
+  --lex-settings-page-layout-body-padding-x: var(--lex-space-surface-sm);
+  --lex-settings-page-layout-body-padding-bottom: var(--lex-space-surface-sm);
+  --lex-settings-page-layout-nav-gap: var(--lex-space-surface-gap-md);
+  --lex-settings-page-layout-nav-width: var(--lex-size-sidebar-width);
+  --lex-settings-page-layout-main-gap: var(--lex-space-surface-sm);
   --lex-sidebar-width-default: var(--lex-size-sidebar-width);
   --lex-sidebar-width-collapsed: var(--lex-size-sidebar-width-collapsed);
   --lex-sidebar-transition-duration: var(--lex-duration-layout);
   --lex-sidebar-transition-easing: var(--lex-easing-layout);
+  --lex-sidebar-nav-padding: var(--lex-space-control-x-sm);
+  --lex-sidebar-list-gap: var(--lex-space-control-gap-md);
+  --lex-sidebar-group-gap: var(--lex-space-control-gap-md);
+  --lex-sidebar-separator-margin-y: var(--lex-space-control-gap-md);
+  --lex-sidebar-separator-margin-x: var(--lex-space-control-gap-md);
+  --lex-sidebar-brand-padding-x: var(--lex-space-control-x-md);
+  --lex-sidebar-brand-padding-y: var(--lex-space-control-x-sm);
+  --lex-sidebar-brand-border-color: var(--lex-border-default);
+  --lex-sidebar-footer-padding: var(--lex-space-control-x-xs);
+  --lex-sidebar-footer-border-color: var(--lex-border-default);
+  --lex-sidebar-drawer-footer-padding: var(--lex-space-control-x-xs);
+  --lex-sidebar-drawer-footer-border-color: var(--lex-border-default);
+  --lex-sidebar-mobile-bar-gap: var(--lex-space-control-gap-lg);
+  --lex-sidebar-mobile-bar-padding-x: var(--lex-space-control-x-md);
+  --lex-sidebar-mobile-bar-padding-y: var(--lex-space-control-x-sm);
+  --lex-sidebar-mobile-bar-background: var(--lex-color-background-base);
+  --lex-sidebar-mobile-bar-border-color: var(--lex-border-default);
+  --lex-sidebar-group-label-gap: var(--lex-space-control-gap-md);
+  --lex-sidebar-group-label-padding-x: var(--lex-space-control-x-sm);
+  --lex-sidebar-group-label-padding-y: var(--lex-space-control-y-xs);
+  --lex-sidebar-group-collapsible-trigger-gap: var(--lex-space-control-gap-md);
+  --lex-sidebar-desktop-background: var(--lex-color-background-subtle);
+  --lex-sidebar-desktop-border-color: var(--lex-border-default);
   --lex-sidebar-item-foreground: var(--lex-color-text-secondary);
   --lex-sidebar-item-foreground-active: var(--lex-color-text-primary);
-  --lex-sidebar-item-gap: var(--lex-space-control-gap-sm);
+  --lex-sidebar-item-gap: var(--lex-space-control-gap-md);
+  --lex-sidebar-item-height-min: var(--lex-size-control-sm);
+  --lex-sidebar-item-adornment-height: var(--lex-size-control-xs);
   --lex-sidebar-item-radius: var(--lex-radius-control);
-  --lex-sidebar-item-padding-x: var(--lex-space-control-x-sm);
-  --lex-sidebar-item-padding-y: var(--lex-space-control-y-xs);
+  --lex-sidebar-item-padding-x: var(--lex-space-control-x-md);
+  --lex-sidebar-item-padding-y: var(--lex-space-control-y-sm);
   --lex-sidebar-item-font-size: var(--lex-typography-control-sm-font-size);
   --lex-sidebar-item-font-weight: var(--lex-typography-control-md-font-weight);
   --lex-sidebar-item-font-weight-active: var(--lex-typography-label-sm-font-weight);
@@ -1600,13 +1677,13 @@
   --lex-sidebar-item-background-active: var(--lex-color-background-base);
   --lex-sidebar-item-accent-width: var(--lex-outline-width-focus);
   --lex-sidebar-item-accent-color: var(--lex-action-primary-base);
-  --lex-sidebar-item-icon-size: var(--lex-size-selection-control-md);
+  --lex-sidebar-item-icon-size: var(--lex-size-icon-md);
+  --lex-sidebar-item-icon-size-collapsed: var(--lex-size-icon-lg);
   --lex-sidebar-item-badge-max-width: var(--lex-size-panel-width-sm);
   --lex-sidebar-item-sub-indent: var(--lex-space-control-x-sm);
-  --lex-sidebar-item-focus-ring-width: var(--lex-outline-width-focus);
+  --lex-sidebar-item-shortcut-padding-x: var(--lex-space-control-x-xs);
+  --lex-sidebar-item-focus-ring-width: var(--lex-outline-width-inset);
   --lex-sidebar-item-focus-ring-color: var(--lex-border-focus);
-  --lex-sidebar-item-focus-ring-offset: var(--lex-outline-offset-focus);
-  --lex-sidebar-item-focus-ring-offset-color: var(--lex-color-background-base);
   --lex-slider-gap: var(--lex-space-control-gap-md);
   --lex-slider-control-padding-y: var(--lex-space-control-y-sm);
   --lex-slider-track-background: var(--lex-color-background-subtle);
@@ -1623,6 +1700,13 @@
   --lex-slider-focus-ring-offset: var(--lex-outline-offset-focus);
   --lex-slider-transition-duration: var(--lex-duration-control);
   --lex-slider-transition-easing: var(--lex-easing-control);
+  --lex-stats-card-value-foreground: var(--lex-color-text-primary);
+  --lex-stats-card-value-font-size: var(--lex-typography-heading-md-font-size);
+  --lex-stats-card-value-font-weight: var(--lex-typography-heading-md-font-weight);
+  --lex-stats-card-value-font-line-height: var(--lex-typography-heading-md-line-height);
+  --lex-stats-card-trend-foreground: var(--lex-color-text-secondary);
+  --lex-stats-card-trend-font-size: var(--lex-typography-body-xs-font-size);
+  --lex-stats-card-trend-font-line-height: var(--lex-typography-body-xs-line-height);
   --lex-switch-background: var(--lex-color-background-subtle);
   --lex-switch-checked-background: var(--lex-action-primary-base);
   --lex-switch-radius: var(--lex-radius-pill);
@@ -1684,7 +1768,7 @@
   --lex-tabs-panel-font-line-height: var(--lex-typography-body-sm-line-height);
   --lex-tabs-focus-ring-color: var(--lex-border-focus);
   --lex-tabs-focus-ring-width: var(--lex-outline-width-inset);
-  --lex-tabs-transition-duration: var(--lex-duration-control);
+  --lex-tabs-transition-duration: var(--lex-duration-surface);
   --lex-tabs-transition-easing: var(--lex-easing-control);
   --lex-textarea-background: var(--lex-color-background-base);
   --lex-textarea-foreground: var(--lex-color-text-primary);
@@ -1743,7 +1827,7 @@
   --lex-toast-gap: var(--lex-space-surface-gap-sm);
   --lex-toast-content-gap: var(--lex-space-surface-gap-sm);
   --lex-toast-content-behind-opacity: 0.72;
-  --lex-toast-arrow-size: var(--lex-size-selection-control-sm);
+  --lex-toast-arrow-size: var(--lex-size-icon-sm);
   --lex-toast-title-foreground: var(--lex-color-text-primary);
   --lex-toast-title-font-size: var(--lex-typography-heading-xs-font-size);
   --lex-toast-title-font-weight: var(--lex-typography-heading-xs-font-weight);
@@ -1812,6 +1896,7 @@
   --lex-toolbar-root-border-color: var(--lex-border-default);
   --lex-toolbar-root-padding: var(--lex-space-control-x-sm);
   --lex-toolbar-group-gap: var(--lex-space-control-gap-sm);
+  --lex-toolbar-separator-margin: var(--lex-space-control-gap-sm);
   --lex-toolbar-button-height: var(--lex-size-control-sm);
   --lex-toolbar-button-radius: var(--lex-radius-control);
   --lex-toolbar-button-padding-x: var(--lex-space-control-x-sm);

package/templates/templates/DashboardShell/DashboardShell.variants.ts

@@ -5,7 +5,11 @@
  */
 
 export const dashboardShellClasses = (): string => {
-  return "lex-dashboard-shell flex min-h-full flex-col bg-[var(--lex-color-background-base)] text-[var(--lex-color-text-primary)] md:flex-row"
+  return [
+    "lex-dashboard-shell flex min-h-full flex-col",
+    "bg-(--lex-dashboard-shell-root-background) text-(--lex-dashboard-shell-root-foreground)",
+    "md:flex-row",
+  ].join(" ")
 }
 
 export const dashboardShellSidebarClasses = (): string => {
@@ -13,13 +17,24 @@ export const dashboardShellSidebarClasses = (): string => {
 }
 
 export const dashboardShellMainClasses = (): string => {
-  return "lex-dashboard-shell__main flex min-h-full flex-1 flex-col bg-[var(--lex-color-background-base)]"
+  return [
+    "lex-dashboard-shell__main flex min-h-full flex-1 flex-col",
+    "bg-(--lex-dashboard-shell-main-background)",
+  ].join(" ")
 }
 
 export const dashboardShellHeaderClasses = (): string => {
-  return "lex-dashboard-shell__header border-b border-[var(--lex-border-default)] bg-[var(--lex-color-background-base)] px-[var(--lex-space-4)] py-[var(--lex-space-3)]"
+  return [
+    "lex-dashboard-shell__header border-b border-(--lex-dashboard-shell-header-border-color)",
+    "bg-(--lex-dashboard-shell-header-background)",
+    "px-(--lex-dashboard-shell-header-padding-x) py-(--lex-dashboard-shell-header-padding-y)",
+  ].join(" ")
 }
 
 export const dashboardShellContentClasses = (): string => {
-  return "lex-dashboard-shell__content flex-1 bg-[var(--lex-color-background-base)] p-[var(--lex-space-4)]"
+  return [
+    "lex-dashboard-shell__content flex-1",
+    "bg-(--lex-dashboard-shell-content-background)",
+    "p-(--lex-dashboard-shell-content-padding)",
+  ].join(" ")
 }

package/templates/templates/SettingsPageLayout/SettingsPageLayout.variants.ts

@@ -8,19 +8,25 @@ export const settingsPageLayoutClasses = (): string => {
   return [
     "lex-settings-page-layout",
     "flex min-h-full flex-col",
-    "bg-(--lex-color-background-base) text-(--lex-color-text-primary)",
+    "bg-(--lex-settings-page-layout-root-background)",
+    "text-(--lex-settings-page-layout-root-foreground)",
   ].join(" ")
 }
 
 export const settingsPageLayoutHeaderClasses = (): string => {
-  return "lex-settings-page-layout__header px-(--lex-space-4) pt-(--lex-space-4)"
+  return [
+    "lex-settings-page-layout__header",
+    "px-(--lex-settings-page-layout-header-padding-x)",
+    "pt-(--lex-settings-page-layout-header-padding-top)",
+  ].join(" ")
 }
 
 export const settingsPageLayoutBodyClasses = (): string => {
   return [
     "lex-settings-page-layout__body",
-    "flex flex-1 flex-col gap-(--lex-space-4)",
-    "px-(--lex-space-4) pb-(--lex-space-4)",
+    "flex flex-1 flex-col gap-(--lex-settings-page-layout-body-gap)",
+    "px-(--lex-settings-page-layout-body-padding-x)",
+    "pb-(--lex-settings-page-layout-body-padding-bottom)",
     "lg:flex-row lg:items-start",
   ].join(" ")
 }
@@ -28,13 +34,16 @@ export const settingsPageLayoutBodyClasses = (): string => {
 export const settingsPageLayoutNavClasses = (): string => {
   return [
     "lex-settings-page-layout__nav",
-    "flex w-full shrink-0 flex-col gap-(--lex-space-3)",
-    "lg:w-(--lex-size-settings-page-nav-width,16rem)",
+    "flex w-full shrink-0 flex-col gap-(--lex-settings-page-layout-nav-gap)",
+    "lg:w-(--lex-settings-page-layout-nav-width)",
   ].join(" ")
 }
 
 export const settingsPageLayoutMainClasses = (): string => {
-  return "lex-settings-page-layout__main flex min-w-0 flex-1 flex-col gap-(--lex-space-4)"
+  return [
+    "lex-settings-page-layout__main",
+    "flex min-w-0 flex-1 flex-col gap-(--lex-settings-page-layout-main-gap)",
+  ].join(" ")
 }
 
 export const settingsPageLayoutPanelClasses = (): string => {