@kksdev/ds-angular 1.2.5 → 1.4.0

package/src/styles/themes/_light.scss

@@ -470,4 +470,248 @@
   --datepicker-option-hover-bg: var(--surface-hover);
   --datepicker-action-color: var(--text-default);
   --datepicker-action-hover-bg: var(--surface-hover);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CARD
+   * ======================================================================== */
+  --card-bg: var(--surface-default);
+  --card-text: var(--text-default);
+  --card-border: var(--border-color);
+  --card-border-strong: var(--border-strong);
+  --card-divider: var(--border-subtle);
+  --card-header-color: var(--text-default);
+  --card-footer-color: var(--text-muted);
+  --card-shadow: var(--shadow-2);
+  --card-shadow-hover: var(--shadow-3);
+  --card-disabled-opacity: 0.5;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS ALERT
+   * ======================================================================== */
+  --alert-success-bg: var(--bg-success);
+  --alert-success-border: var(--success);
+  --alert-success-text: var(--text-success);
+  --alert-success-icon: var(--success);
+  --alert-warning-bg: var(--bg-warning);
+  --alert-warning-border: var(--warning);
+  --alert-warning-text: var(--text-warning);
+  --alert-warning-icon: var(--warning);
+  --alert-error-bg: var(--bg-error);
+  --alert-error-border: var(--error);
+  --alert-error-text: var(--text-error);
+  --alert-error-icon: var(--error);
+  --alert-info-bg: var(--bg-info);
+  --alert-info-border: var(--info);
+  --alert-info-text: var(--text-info);
+  --alert-info-icon: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DIVIDER
+   * ======================================================================== */
+  --divider-color: var(--border-color);
+  --divider-text: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SELECT
+   * ======================================================================== */
+  --select-bg: var(--surface-default);
+  --select-text: var(--text-default);
+  --select-border: var(--border-color);
+  --select-placeholder: var(--text-muted);
+  --select-hover-border: var(--color-primary);
+  --select-focus-border: var(--color-primary);
+  --select-focus-shadow: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --select-disabled-bg: var(--bg-disabled);
+  --select-dropdown-bg: var(--surface-default);
+  --select-dropdown-border: var(--border-color);
+  --select-option-hover-bg: var(--surface-hover);
+  --select-option-selected-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  --select-option-selected-text: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TABLE
+   * ======================================================================== */
+  --table-bg: var(--surface-default);
+  --table-border-color: var(--border-color);
+  --table-header-bg: var(--surface-raised);
+  --table-header-text: var(--text-default);
+  --table-header-hover-bg: var(--surface-hover);
+  --table-row-border: color-mix(in oklab, var(--border-color) 50%, transparent);
+  --table-row-hover-bg: var(--surface-hover);
+  --table-row-selected-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  --table-stripe-bg: var(--surface-raised);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS COMBOBOX
+   * ======================================================================== */
+  --combobox-bg: var(--surface-default);
+  --combobox-text: var(--text-default);
+  --combobox-border: var(--border-color);
+  --combobox-placeholder: var(--text-muted);
+  --combobox-hover-border: var(--color-primary);
+  --combobox-focus-border: var(--color-primary);
+  --combobox-focus-shadow: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --combobox-disabled-bg: var(--bg-disabled);
+  --combobox-dropdown-bg: var(--surface-default);
+  --combobox-dropdown-border: var(--border-color);
+  --combobox-option-hover-bg: var(--surface-hover);
+  --combobox-option-selected-bg: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  --combobox-option-selected-text: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS PROGRESS BAR
+   * ======================================================================== */
+  --progress-track-bg: var(--gray-200);
+  --progress-fill-bg: var(--color-primary);
+  --progress-fill-success: var(--success);
+  --progress-fill-warning: var(--warning);
+  --progress-fill-error: var(--error);
+  --progress-label-color: var(--text-default);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SKELETON
+   * ======================================================================== */
+  --skeleton-bg: var(--gray-200);
+  --skeleton-shimmer: var(--gray-300);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SLIDER
+   * ======================================================================== */
+  --slider-track-bg: var(--gray-200);
+  --slider-fill-bg: var(--color-primary);
+  --slider-thumb-bg: var(--surface-default);
+  --slider-thumb-border-color: var(--color-primary);
+  --slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --slider-thumb-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --slider-thumb-shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-primary) 30%, transparent);
+  --slider-thumb-shadow-active: 0 0 0 4px color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --slider-tick-color: var(--gray-400);
+  --slider-label-color: var(--text-default);
+  --slider-thumb-label-bg: var(--gray-900);
+  --slider-thumb-label-color: var(--white);
+
+  /* ==========================================================================
+   * FILE UPLOAD
+   * ======================================================================== */
+  --file-upload-border: var(--gray-300);
+  --file-upload-border-hover: var(--color-primary);
+  --file-upload-border-active: var(--color-primary);
+  --file-upload-bg: var(--white);
+  --file-upload-bg-hover: var(--gray-50);
+  --file-upload-bg-active: var(--blue-50);
+  --file-upload-text-color: var(--gray-700);
+  --file-upload-label-color: var(--gray-900);
+  --file-upload-help-color: var(--gray-500);
+  --file-upload-hint-color: var(--gray-500);
+  --file-upload-icon-color: var(--gray-400);
+  --file-upload-icon-color-hover: var(--color-primary);
+  --file-upload-icon-color-active: var(--color-primary);
+  --file-upload-file-border: var(--gray-200);
+  --file-upload-file-bg: var(--white);
+  --file-upload-file-bg-hover: var(--gray-50);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CHIP
+   * ======================================================================== */
+  --chip-bg: var(--gray-200);
+  --chip-text: var(--gray-800);
+  --chip-border: transparent;
+  --chip-hover-bg: var(--gray-300);
+  --chip-focus-ring: color-mix(in oklab, var(--color-primary) 30%, transparent);
+  --chip-selected-ring: var(--color-primary);
+  --chip-disabled-opacity: 0.5;
+
+  /* Primary */
+  --chip-primary-bg: var(--color-primary);
+  --chip-primary-text: var(--gray-50);
+  --chip-primary-border: transparent;
+  --chip-primary-hover-bg: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
+  --chip-primary-hover-bg-outlined: color-mix(in oklab, var(--color-primary) 10%, transparent);
+
+  /* Success */
+  --chip-success-bg: var(--bg-success);
+  --chip-success-text: var(--success);
+  --chip-success-border: var(--success);
+  --chip-success-hover-bg: color-mix(in oklab, var(--success) 20%, transparent);
+  --chip-success-hover-bg-outlined: color-mix(in oklab, var(--success) 10%, transparent);
+
+  /* Warning */
+  --chip-warning-bg: var(--bg-warning);
+  --chip-warning-text: var(--warning);
+  --chip-warning-border: var(--warning);
+  --chip-warning-hover-bg: color-mix(in oklab, var(--warning) 25%, transparent);
+  --chip-warning-hover-bg-outlined: color-mix(in oklab, var(--warning) 10%, transparent);
+
+  /* Error */
+  --chip-error-bg: var(--bg-error);
+  --chip-error-text: var(--error);
+  --chip-error-border: var(--error);
+  --chip-error-hover-bg: color-mix(in oklab, var(--error) 25%, transparent);
+  --chip-error-hover-bg-outlined: color-mix(in oklab, var(--error) 10%, transparent);
+
+  /* Info */
+  --chip-info-bg: var(--bg-info);
+  --chip-info-text: var(--info);
+  --chip-info-border: var(--info);
+  --chip-info-hover-bg: color-mix(in oklab, var(--info) 25%, transparent);
+  --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 10%, transparent);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS EMPTY
+   * ======================================================================== */
+  --empty-text: var(--text-muted);
+  --empty-icon-color: var(--text-disabled);
+  --empty-title-color: var(--text-default);
+  --empty-description-color: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS RATING
+   * ======================================================================== */
+  --rating-filled-color: var(--warning);
+  --rating-empty-color: var(--border-color);
+  --rating-hover-color: color-mix(in oklab, var(--warning) 50%, transparent);
+  --rating-focus-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DRAWER
+   * ======================================================================== */
+  --drawer-bg: var(--surface-default);
+  --drawer-border: var(--border-color);
+  --drawer-shadow: var(--shadow-3);
+  --drawer-header-bg: var(--surface-raised);
+  --drawer-footer-bg: var(--surface-raised);
+  --drawer-title-color: var(--text-default);
+  --drawer-body-color: var(--text-default);
+  --drawer-close-color: var(--text-muted);
+  --drawer-close-hover-bg: var(--surface-hover);
+  --drawer-close-hover-color: var(--text-default);
+  --drawer-close-active-bg: var(--surface-raised);
+  --drawer-close-focus-color: var(--color-primary);
+  --drawer-backdrop: rgba(0, 0, 0, 0.5);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TIME PICKER
+   * ======================================================================== */
+  --time-picker-panel-bg: var(--surface-default);
+  --time-picker-panel-border: var(--border-color);
+  --time-picker-column-bg: var(--surface-default);
+  --time-picker-column-border: var(--gray-200);
+  --time-picker-option-text: var(--text-default);
+  --time-picker-option-hover: var(--surface-hover);
+  --time-picker-option-focus: var(--surface-hover);
+  --time-picker-option-selected-bg: var(--color-primary);
+  --time-picker-option-selected-text: var(--white);
+  --time-picker-option-selected-hover: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TREE
+   * ======================================================================== */
+  --tree-bg: var(--surface-default);
+  --tree-border: var(--border-color);
+  --tree-node-hover-bg: var(--surface-hover);
+  --tree-node-selected-bg: var(--blue-100);
+  --tree-node-selected-text: var(--color-primary);
+  --tree-toggle-color: var(--text-muted);
+  --tree-toggle-hover-color: var(--text-default);
+  --tree-icon-color: var(--text-muted);
 }

package/src/styles/tokens/_primitives.scss

@@ -33,9 +33,15 @@ $gray-400: #a3a3a3;
 $gray-500: #737373;
 $gray-600: #525252;
 $gray-700: #404040;
+$gray-750: #333333;  // Intermédiaire dark pour drawer/time-picker
 $gray-800: #262626;
+$gray-850: #1f1f1f;  // Intermédiaire très dark pour time-picker
 $gray-900: #171717;
 
+// Couleurs de base
+$white: #ffffff;
+$black: #000000;
+
 // Couleurs de feedback
 $success: #4caf50;
 $warning: #ff9800;
@@ -55,7 +61,10 @@ $space-3: 0.75rem;
 $space-4: 1rem;
 $space-5: 1.25rem;
 $space-6: 1.5rem;
+$space-7: 1.75rem;
 $space-8: 2rem;
+$space-10: 2.5rem;
+$space-12: 3rem;
 
 // === RADIUS ===
 

package/src/styles/tokens/_semantic.scss

@@ -448,6 +448,25 @@ $datepicker-nav-size-sm: 24px;
 $datepicker-nav-size-md: 32px;
 $datepicker-nav-size-lg: 40px;
 
+// === SLIDER ===
+
+$slider-track-height-sm: 4px;
+$slider-track-height-md: 6px;
+$slider-track-height-lg: 8px;
+
+$slider-thumb-size-sm: 16px;
+$slider-thumb-size-md: 20px;
+$slider-thumb-size-lg: 24px;
+
+$slider-thumb-border-width: 2px;
+
+$slider-tick-size: 2px;
+
+$slider-label-gap: $space-3;
+$slider-label-font-size: $font-size-2;
+
+$slider-track-radius: $radius-round;
+
 $datepicker-font-size-sm: $font-size-2;
 $datepicker-font-size-md: $font-size-3;
 $datepicker-font-size-lg: $font-size-4;
@@ -468,3 +487,150 @@ $ds-container-2xl: 1320px;
 $ds-container-gutter-sm: $space-4;
 $ds-container-gutter-md: $space-6;
 $ds-container-gutter-lg: $space-8;
+
+// === FILE UPLOAD ===
+
+$file-upload-min-height-sm: 150px;
+$file-upload-min-height-md: 200px;
+$file-upload-min-height-lg: 250px;
+
+$file-upload-padding-sm: $space-6;
+$file-upload-padding-md: $space-8;
+$file-upload-padding-lg: $space-10;
+
+$file-upload-radius: $radius-2;
+$file-upload-file-radius: $radius-2;
+
+$file-upload-preview-size-sm: 48px;
+$file-upload-preview-size-md: 60px;
+$file-upload-preview-size-lg: 80px;
+
+$file-upload-icon-size-sm: 48px;
+$file-upload-icon-size-md: 60px;
+$file-upload-icon-size-lg: 80px;
+
+$file-upload-remove-btn-size: 32px;
+
+// === CHIP ===
+
+$chip-height-sm: 24px;
+$chip-height-md: 32px;
+$chip-height-lg: 40px;
+
+$chip-padding-y-sm: 2px;
+$chip-padding-x-sm: $space-2;
+$chip-padding-y-md: $space-1;
+$chip-padding-x-md: $space-3;
+$chip-padding-y-lg: $space-2;
+$chip-padding-x-lg: $space-4;
+
+$chip-font-size-sm: $font-size-1;
+$chip-font-size-md: $font-size-2;
+$chip-font-size-lg: $font-size-3;
+
+$chip-gap-sm: $space-1;
+$chip-gap-md: $space-2;
+$chip-gap-lg: $space-2;
+
+$chip-avatar-size-sm: 16px;
+$chip-avatar-size-md: 20px;
+$chip-avatar-size-lg: 24px;
+
+$chip-icon-size-sm: 12px;
+$chip-icon-size-md: 14px;
+$chip-icon-size-lg: 16px;
+
+$chip-remove-icon-size-sm: 10px;
+$chip-remove-icon-size-md: 12px;
+$chip-remove-icon-size-lg: 14px;
+
+$chip-border-radius: $radius-round;
+
+// === EMPTY ===
+
+$empty-padding-sm: $space-6;
+$empty-padding-md: $space-8;
+$empty-padding-lg: $space-10;
+
+$empty-icon-margin: $space-4;
+$empty-icon-size-sm: 40px;
+$empty-icon-size-md: 56px;
+$empty-icon-size-lg: 80px;
+
+$empty-image-margin: $space-4;
+$empty-image-size-sm: 120px;
+$empty-image-size-md: 180px;
+$empty-image-size-lg: 240px;
+
+$empty-content-margin: $space-4;
+$empty-title-font-size: $font-size-4;
+$empty-title-font-weight: 600;
+
+$empty-description-font-size: $font-size-2;
+$empty-description-max-width: 400px;
+
+$empty-actions-gap: $space-3;
+
+// === RATING ===
+
+$rating-gap-sm: 2px;
+$rating-gap-md: $space-1;
+$rating-gap-lg: $space-2;
+
+$rating-icon-size-sm: 16px;
+$rating-icon-size-md: 20px;
+$rating-icon-size-lg: 28px;
+
+$rating-hover-scale: 1.1;
+$rating-active-scale: 0.95;
+$rating-disabled-opacity: 0.5;
+
+$rating-focus-radius: $radius-1;
+
+// === DRAWER ===
+
+$drawer-width-sm: 320px;
+$drawer-width-md: 480px;
+$drawer-width-lg: 640px;
+
+$drawer-header-padding: $space-4;
+$drawer-body-padding: $space-4;
+$drawer-footer-padding: $space-4;
+
+$drawer-title-font-size: $font-size-4;
+$drawer-title-font-weight: 600;
+
+$drawer-close-size: 32px;
+$drawer-close-radius: $radius-1;
+
+$drawer-backdrop-z-index: 1000;
+$drawer-z-index: 1001;
+
+// === TIME PICKER ===
+
+$time-picker-panel-padding: $space-2;
+$time-picker-panel-border-radius: $radius-2;
+$time-picker-panel-min-width: 200px;
+
+$time-picker-column-gap: $space-2;
+$time-picker-column-min-width: 60px;
+$time-picker-column-period-width: 50px;
+$time-picker-column-max-height: 200px;
+$time-picker-column-border-radius: $radius-1;
+
+$time-picker-option-padding: $space-2;
+$time-picker-option-font-size: $font-size-2;
+
+$time-picker-scrollbar-width: 6px;
+$time-picker-scrollbar-radius: $radius-1;
+
+// === TREE ===
+
+$tree-node-padding: $space-1 $space-2;
+$tree-node-gap: $space-2;
+$tree-toggle-size: 20px;
+$tree-icon-size: 16px;
+$tree-label-font-size: $font-size-3;
+$tree-indent: 20px;
+$tree-max-height: 400px;
+$tree-border-radius: $radius-2;

package/src/styles/tokens/_tokens.scss

@@ -75,6 +75,7 @@
   --space-4: #{$space-4};
   --space-5: #{$space-5};
   --space-6: #{$space-6};
+  --space-7: #{$space-7};
   --space-8: #{$space-8};
   --space-s: var(--space-2);
   --space-l: var(--space-6);
@@ -108,15 +109,30 @@
   --gray-500: #{$gray-500};
   --gray-600: #{$gray-600};
   --gray-700: #{$gray-700};
+  --gray-750: #{$gray-750};
   --gray-800: #{$gray-800};
+  --gray-850: #{$gray-850};
   --gray-900: #{$gray-900};
 
+  --white: #{$white};
+  --black: #{$black};
+
   --success: #{$success};
   --warning: #{$warning};
   --error: #{$error};
   --info: #{$info};
   --focus-color: var(--color-secondary);
 
+  /* === RGB VALUES (for rgba() with custom opacity) === */
+  --color-primary-rgb: 125, 75, 192;
+  --color-secondary-rgb: 251, 194, 36;
+  --success-rgb: 76, 175, 80;
+  --warning-rgb: 255, 152, 0;
+  --error-rgb: 244, 67, 54;
+  --info-rgb: 33, 150, 243;
+  --black-rgb: 0, 0, 0;
+  --white-rgb: 255, 255, 255;
+
   /* === SIZES & LAYOUT === */
   --container-xs: #{$container-xs};
   --container-sm: #{$container-sm};
@@ -507,6 +523,19 @@
   --datepicker-font-size-lg: #{$datepicker-font-size-lg};
   --datepicker-radius: #{$datepicker-radius};
   --datepicker-shadow: #{$datepicker-shadow};
+
+  /* === SLIDER === */
+  --slider-track-height-sm: #{$slider-track-height-sm};
+  --slider-track-height-md: #{$slider-track-height-md};
+  --slider-track-height-lg: #{$slider-track-height-lg};
+  --slider-thumb-size-sm: #{$slider-thumb-size-sm};
+  --slider-thumb-size-md: #{$slider-thumb-size-md};
+  --slider-thumb-size-lg: #{$slider-thumb-size-lg};
+  --slider-thumb-border-width: #{$slider-thumb-border-width};
+  --slider-tick-size: #{$slider-tick-size};
+  --slider-label-gap: #{$slider-label-gap};
+  --slider-label-font-size: #{$slider-label-font-size};
+  --slider-track-radius: #{$slider-track-radius};
   --datepicker-calendar-padding: #{$datepicker-calendar-padding};
   --datepicker-calendar-gap: #{$datepicker-calendar-gap};
 
@@ -519,4 +548,129 @@
   --ds-container-gutter-sm: #{$ds-container-gutter-sm};
   --ds-container-gutter-md: #{$ds-container-gutter-md};
   --ds-container-gutter-lg: #{$ds-container-gutter-lg};
+
+  /* === FILE UPLOAD === */
+  --file-upload-min-height-sm: #{$file-upload-min-height-sm};
+  --file-upload-min-height-md: #{$file-upload-min-height-md};
+  --file-upload-min-height-lg: #{$file-upload-min-height-lg};
+  --file-upload-padding-sm: #{$file-upload-padding-sm};
+  --file-upload-padding-md: #{$file-upload-padding-md};
+  --file-upload-padding-lg: #{$file-upload-padding-lg};
+  --file-upload-radius: #{$file-upload-radius};
+  --file-upload-file-radius: #{$file-upload-file-radius};
+  --file-upload-preview-size-sm: #{$file-upload-preview-size-sm};
+  --file-upload-preview-size-md: #{$file-upload-preview-size-md};
+  --file-upload-preview-size-lg: #{$file-upload-preview-size-lg};
+  --file-upload-icon-size-sm: #{$file-upload-icon-size-sm};
+  --file-upload-icon-size-md: #{$file-upload-icon-size-md};
+  --file-upload-icon-size-lg: #{$file-upload-icon-size-lg};
+  --file-upload-remove-btn-size: #{$file-upload-remove-btn-size};
+
+  /* === CHIP === */
+  --chip-height-sm: #{$chip-height-sm};
+  --chip-height-md: #{$chip-height-md};
+  --chip-height-lg: #{$chip-height-lg};
+  --chip-padding-y-sm: #{$chip-padding-y-sm};
+  --chip-padding-x-sm: #{$chip-padding-x-sm};
+  --chip-padding-y-md: #{$chip-padding-y-md};
+  --chip-padding-x-md: #{$chip-padding-x-md};
+  --chip-padding-y-lg: #{$chip-padding-y-lg};
+  --chip-padding-x-lg: #{$chip-padding-x-lg};
+  --chip-font-size-sm: #{$chip-font-size-sm};
+  --chip-font-size-md: #{$chip-font-size-md};
+  --chip-font-size-lg: #{$chip-font-size-lg};
+  --chip-gap-sm: #{$chip-gap-sm};
+  --chip-gap-md: #{$chip-gap-md};
+  --chip-gap-lg: #{$chip-gap-lg};
+  --chip-avatar-size-sm: #{$chip-avatar-size-sm};
+  --chip-avatar-size-md: #{$chip-avatar-size-md};
+  --chip-avatar-size-lg: #{$chip-avatar-size-lg};
+  --chip-icon-size-sm: #{$chip-icon-size-sm};
+  --chip-icon-size-md: #{$chip-icon-size-md};
+  --chip-icon-size-lg: #{$chip-icon-size-lg};
+  --chip-remove-icon-size-sm: #{$chip-remove-icon-size-sm};
+  --chip-remove-icon-size-md: #{$chip-remove-icon-size-md};
+  --chip-remove-icon-size-lg: #{$chip-remove-icon-size-lg};
+  --chip-border-radius: #{$chip-border-radius};
+
+  /* === EMPTY === */
+  --empty-padding-sm: #{$empty-padding-sm};
+  --empty-padding-md: #{$empty-padding-md};
+  --empty-padding-lg: #{$empty-padding-lg};
+  --empty-icon-margin: #{$empty-icon-margin};
+  --empty-icon-size-sm: #{$empty-icon-size-sm};
+  --empty-icon-size-md: #{$empty-icon-size-md};
+  --empty-icon-size-lg: #{$empty-icon-size-lg};
+  --empty-image-margin: #{$empty-image-margin};
+  --empty-image-size-sm: #{$empty-image-size-sm};
+  --empty-image-size-md: #{$empty-image-size-md};
+  --empty-image-size-lg: #{$empty-image-size-lg};
+  --empty-content-margin: #{$empty-content-margin};
+  --empty-title-font-size: #{$empty-title-font-size};
+  --empty-title-font-weight: #{$empty-title-font-weight};
+  --empty-description-font-size: #{$empty-description-font-size};
+  --empty-description-max-width: #{$empty-description-max-width};
+  --empty-actions-gap: #{$empty-actions-gap};
+
+  /* === RATING === */
+  --rating-gap-sm: #{$rating-gap-sm};
+  --rating-gap-md: #{$rating-gap-md};
+  --rating-gap-lg: #{$rating-gap-lg};
+  --rating-icon-size-sm: #{$rating-icon-size-sm};
+  --rating-icon-size-md: #{$rating-icon-size-md};
+  --rating-icon-size-lg: #{$rating-icon-size-lg};
+  --rating-hover-scale: #{$rating-hover-scale};
+  --rating-active-scale: #{$rating-active-scale};
+  --rating-disabled-opacity: #{$rating-disabled-opacity};
+  --rating-focus-radius: #{$rating-focus-radius};
+
+  /* === DRAWER === */
+  --drawer-width-sm: #{$drawer-width-sm};
+  --drawer-width-md: #{$drawer-width-md};
+  --drawer-width-lg: #{$drawer-width-lg};
+  --drawer-header-padding: #{$drawer-header-padding};
+  --drawer-body-padding: #{$drawer-body-padding};
+  --drawer-footer-padding: #{$drawer-footer-padding};
+  --drawer-title-font-size: #{$drawer-title-font-size};
+  --drawer-title-font-weight: #{$drawer-title-font-weight};
+  --drawer-close-size: #{$drawer-close-size};
+  --drawer-close-radius: #{$drawer-close-radius};
+  --drawer-backdrop-z-index: #{$drawer-backdrop-z-index};
+  --drawer-z-index: #{$drawer-z-index};
+
+  /* === TIME PICKER === */
+  --time-picker-panel-padding: #{$time-picker-panel-padding};
+  --time-picker-panel-border-radius: #{$time-picker-panel-border-radius};
+  --time-picker-panel-min-width: #{$time-picker-panel-min-width};
+  --time-picker-column-gap: #{$time-picker-column-gap};
+  --time-picker-column-min-width: #{$time-picker-column-min-width};
+  --time-picker-column-period-width: #{$time-picker-column-period-width};
+  --time-picker-column-max-height: #{$time-picker-column-max-height};
+  --time-picker-column-border-radius: #{$time-picker-column-border-radius};
+  --time-picker-option-padding: #{$time-picker-option-padding};
+  --time-picker-option-font-size: #{$time-picker-option-font-size};
+  --time-picker-scrollbar-width: #{$time-picker-scrollbar-width};
+  --time-picker-scrollbar-radius: #{$time-picker-scrollbar-radius};
+
+  /* === TREE === */
+  --tree-node-padding: #{$tree-node-padding};
+  --tree-node-gap: #{$tree-node-gap};
+  --tree-toggle-size: #{$tree-toggle-size};
+  --tree-icon-size: #{$tree-icon-size};
+  --tree-label-font-size: #{$tree-label-font-size};
+  --tree-indent: #{$tree-indent};
+  --tree-max-height: #{$tree-max-height};
+  --tree-border-radius: #{$tree-border-radius};
+}
+
+/* === ACCESSIBILITY: REDUCED MOTION === */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }