npm - @dalexto/lexsys-registry - Versions diffs - 0.1.1 → 0.1.3 - Mend

@dalexto/lexsys-registry 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/templates/styles/theme.css CHANGED Viewed

@@ -3,7 +3,7 @@
  *
  * Generated by @dalexto/lexsys-tokens.
  * Manual changes will be overwritten.
- * Last generated: 2026-06-06T12:57:40.698Z
+ * Last generated: 2026-06-07T16:48:33.996Z
  */
 :root {
@@ -72,6 +72,11 @@
   --spacing-twix-selection-control-sm: var(--lex-size-selection-control-sm);
   --spacing-twix-selection-control-md: var(--lex-size-selection-control-md);
   --spacing-twix-selection-control-lg: var(--lex-size-selection-control-lg);
+  --spacing-twix-icon-xs: var(--lex-size-icon-xs);
+  --spacing-twix-icon-sm: var(--lex-size-icon-sm);
+  --spacing-twix-icon-md: var(--lex-size-icon-md);
+  --spacing-twix-icon-lg: var(--lex-size-icon-lg);
+  --spacing-twix-icon-xl: var(--lex-size-icon-xl);
   --spacing-twix-area-swipe-sm: var(--lex-size-area-swipe-sm);
   --spacing-twix-area-swipe-md: var(--lex-size-area-swipe-md);
   --spacing-twix-area-swipe-lg: var(--lex-size-area-swipe-lg);
@@ -100,12 +105,20 @@
   --spacing-twix-overlay-list-max-height: var(--lex-size-overlay-list-max-height);
   --spacing-twix-overlay-viewport-max-height: var(--lex-size-overlay-viewport-max-height);
   --spacing-twix-sidebar-width: var(--lex-size-sidebar-width);
+  --spacing-twix-sidebar-width-collapsed: var(--lex-size-sidebar-width-collapsed);
   --spacing-twix-command-palette-list-max-height: var(--lex-size-command-palette-list-max-height);
   --duration-twix-control: var(--lex-duration-control);
   --duration-twix-surface: var(--lex-duration-surface);
+  --duration-twix-overlay-enter: var(--lex-duration-overlay-enter);
+  --duration-twix-overlay-exit: var(--lex-duration-overlay-exit);
+  --duration-twix-layout: var(--lex-duration-layout);
   --ease-twix-control: var(--lex-easing-control);
   --ease-twix-surface: var(--lex-easing-surface);
+  --ease-twix-ease-in: var(--lex-easing-ease-in);
+  --ease-twix-ease-out: var(--lex-easing-ease-out);
+  --ease-twix-layout: var(--lex-easing-layout);
   --twix-motion-offset-entry-y: var(--lex-motion-offset-entry-y);
+  --twix-motion-offset-slide-panel: var(--lex-motion-offset-slide-panel);
   --text-twix-family-sans: var(--lex-typography-family-sans);
   --text-twix-family-serif: var(--lex-typography-family-serif);
   --text-twix-family-mono: var(--lex-typography-family-mono);

package/templates/styles/tokens.css CHANGED Viewed

@@ -3,7 +3,7 @@
  *
  * Generated by @dalexto/lexsys-tokens.
  * Manual changes will be overwritten.
- * Last generated: 2026-06-06T12:57:40.698Z
+ * 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);
@@ -214,6 +219,7 @@
   --lex-size-overlay-list-max-height: var(--lex-size-panel-height-sm);
   --lex-size-overlay-viewport-max-height: var(--lex-layout-viewport-full);
   --lex-size-sidebar-width: var(--lex-size-64);
+  --lex-size-sidebar-width-collapsed: var(--lex-size-16);
   --lex-size-command-palette-list-max-height: var(--lex-size-64);
   --lex-font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --lex-font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
@@ -253,13 +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-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-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);
@@ -267,7 +275,11 @@
   --lex-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
   --lex-easing-control: var(--lex-easing-standard);
   --lex-easing-surface: var(--lex-easing-standard);
+  --lex-easing-ease-in: var(--lex-easing-enter);
+  --lex-easing-ease-out: var(--lex-easing-exit);
+  --lex-easing-layout: var(--lex-easing-standard);
   --lex-motion-offset-entry-y: var(--lex-space-2);
+  --lex-motion-offset-slide-panel: var(--lex-size-64);
   --lex-aspect-ratio-1-1: 1;
   --lex-aspect-ratio-4-3: 1.333333;
   --lex-aspect-ratio-3-2: 1.5;
@@ -602,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;
@@ -645,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);
@@ -667,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);
@@ -705,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);
@@ -894,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);
@@ -921,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);
@@ -933,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);
@@ -944,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);
@@ -951,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);
@@ -982,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);
@@ -1023,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);
@@ -1096,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);
@@ -1159,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);
@@ -1222,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);
@@ -1245,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);
@@ -1266,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);
@@ -1306,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);
@@ -1377,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);
@@ -1389,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);
@@ -1434,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);
@@ -1463,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);
@@ -1528,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);
@@ -1550,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);
@@ -1570,10 +1620,70 @@
   --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-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-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);
+  --lex-sidebar-item-font-line-height: var(--lex-typography-control-sm-line-height);
+  --lex-sidebar-item-background-hover: var(--lex-action-secondary-hover);
+  --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-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-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-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);
@@ -1590,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);
@@ -1651,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);
@@ -1710,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);
@@ -1779,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 CHANGED Viewed

@@ -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.tsx CHANGED Viewed

@@ -4,7 +4,7 @@
  * Reference SettingsPageLayout template — settings page shell with header and panels.
  */
-import { PageHeader } from "@/components/blocks/PageHeader"
+import { PageHeader } from "@/components/blocks/PageHeader/PageHeader"
 import {
   SettingsPanel,
   SettingsPanelContent,
@@ -12,7 +12,7 @@ import {
   SettingsPanelFooter,
   SettingsPanelHeader,
   SettingsPanelTitle,
-} from "@/components/blocks/SettingsPanel"
+} from "@/components/blocks/SettingsPanel/SettingsPanel"
 import type {
   SettingsPageLayoutBodyProps,
   SettingsPageLayoutHeaderProps,

package/templates/templates/SettingsPageLayout/SettingsPageLayout.types.ts CHANGED Viewed

@@ -5,7 +5,7 @@
  */
 import type { HTMLAttributes, ReactNode, Ref } from "react"
-import type { PageHeaderProps } from "@/components/blocks/PageHeader"
+import type { PageHeaderProps } from "@/components/blocks/PageHeader/PageHeader.types"
 import type {
   SettingsPanelContentProps,
   SettingsPanelDescriptionProps,
@@ -13,7 +13,7 @@ import type {
   SettingsPanelHeaderProps,
   SettingsPanelProps,
   SettingsPanelTitleProps,
-} from "@/components/blocks/SettingsPanel"
+} from "@/components/blocks/SettingsPanel/SettingsPanel.types"
 export interface SettingsPageLayoutProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>

package/templates/templates/SettingsPageLayout/SettingsPageLayout.variants.ts CHANGED Viewed

@@ -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 => {