@kksdev/ds-angular 1.3.0 → 1.5.0

package/src/styles/tokens/_semantic.scss

@@ -545,3 +545,294 @@ $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;
+
+// === PASSWORD STRENGTH ===
+
+$password-strength-bar-height-sm: 4px;
+$password-strength-bar-height-md: 6px;
+$password-strength-bar-height-lg: 8px;
+$password-strength-bar-gap: $space-1;
+$password-strength-bar-radius: $radius-1;
+$password-strength-label-font-size: $font-size-2;
+$password-strength-label-gap: $space-2;
+
+// === TIMELINE ===
+
+$timeline-dot-size-sm: 20px;
+$timeline-dot-size-md: 24px;
+$timeline-dot-size-lg: 32px;
+
+$timeline-dot-border-width: 2px;
+
+$timeline-line-width-sm: 2px;
+$timeline-line-width-md: 2px;
+$timeline-line-width-lg: 3px;
+
+$timeline-item-gap-sm: $space-4;
+$timeline-item-gap-md: $space-6;
+$timeline-item-gap-lg: $space-8;
+
+$timeline-content-gap-sm: $space-3;
+$timeline-content-gap-md: $space-4;
+$timeline-content-gap-lg: $space-6;
+
+$timeline-content-inner-gap-sm: $space-1;
+$timeline-content-inner-gap-md: $space-2;
+$timeline-content-inner-gap-lg: $space-3;
+
+$timeline-date-font-size-sm: $font-size-1;
+$timeline-date-font-size-md: $font-size-2;
+$timeline-date-font-size-lg: $font-size-3;
+
+$timeline-text-font-size-sm: $font-size-2;
+$timeline-text-font-size-md: $font-size-3;
+$timeline-text-font-size-lg: $font-size-4;
+
+$timeline-icon-size-sm: 12px;
+$timeline-icon-size-md: 14px;
+$timeline-icon-size-lg: 18px;
+
+// === TRANSFER ===
+
+$transfer-gap: $space-4;
+$transfer-border-radius: $radius-2;
+
+$transfer-header-padding: $space-3 $space-4;
+$transfer-header-padding-sm: $space-2 $space-3;
+$transfer-header-padding-lg: $space-4 $space-5;
+
+$transfer-search-padding: $space-3 $space-4;
+$transfer-search-padding-sm: $space-2 $space-3;
+$transfer-search-padding-lg: $space-4 $space-5;
+
+$transfer-search-input-padding: $space-2 $space-8 $space-2 $space-3;
+$transfer-search-input-padding-sm: $space-1-5 $space-6 $space-1-5 $space-2;
+$transfer-search-input-padding-lg: $space-3 $space-10 $space-3 $space-4;
+
+$transfer-search-input-radius: $radius-1;
+
+$transfer-list-min-height: 300px;
+$transfer-list-min-height-sm: 200px;
+$transfer-list-min-height-lg: 400px;
+
+$transfer-list-max-height: 400px;
+$transfer-list-max-height-sm: 300px;
+$transfer-list-max-height-lg: 500px;
+
+$transfer-item-padding: $space-3 $space-4;
+$transfer-item-padding-sm: $space-2 $space-3;
+$transfer-item-padding-lg: $space-4 $space-5;
+
+$transfer-title-font-size: $font-size-3;
+$transfer-item-font-size: $font-size-3;
+$transfer-item-font-size-sm: $font-size-2;
+$transfer-item-font-size-lg: $font-size-4;
+
+$transfer-actions-gap: $space-2;
+
+// === CAROUSEL ===
+
+$carousel-container-height: 400px;
+$carousel-container-height-mobile: 250px;
+
+$carousel-radius: $radius-2;
+
+$carousel-content-padding: $space-6;
+$carousel-title-size: $font-size-5;
+$carousel-description-size: $font-size-3;
+
+$carousel-arrow-size: 40px;
+$carousel-arrow-size-mobile: 28px;
+$carousel-arrow-radius: 50%;
+$carousel-arrow-offset: $space-4;
+$carousel-arrow-offset-mobile: $space-2;
+$carousel-arrow-icon-size: $font-size-4;
+$carousel-arrow-icon-size-mobile: $font-size-3;
+
+$carousel-dot-size: 10px;
+$carousel-dot-size-active: 12px;
+$carousel-dots-gap: $space-2;
+$carousel-dots-padding: $space-4;
+
+// === CALENDAR ===
+
+$calendar-radius: $radius-2;
+
+$calendar-header-padding: $space-4;
+$calendar-header-padding-sm: $space-2;
+$calendar-header-padding-lg: $space-6;
+
+$calendar-nav-gap: $space-2;
+$calendar-nav-btn-size: 32px;
+$calendar-nav-btn-radius: $radius-1;
+$calendar-nav-btn-font-size: $font-size-3;
+
+$calendar-title-padding: $space-2 $space-3;
+$calendar-title-radius: $radius-1;
+$calendar-title-font-size: $font-size-4;
+$calendar-title-font-size-sm: $font-size-3;
+$calendar-title-font-size-lg: $font-size-5;
+$calendar-title-font-weight: 600;
+
+$calendar-mode-gap: $space-1;
+$calendar-mode-radius: $radius-1;
+$calendar-mode-padding: 2px;
+$calendar-mode-btn-padding: $space-1 $space-3;
+$calendar-mode-btn-radius: $radius-1;
+$calendar-mode-btn-font-size: $font-size-2;
+
+$calendar-month-view-padding: $space-4;
+
+$calendar-weekday-gap: $space-1;
+$calendar-weekday-margin: $space-2;
+$calendar-weekday-padding: $space-2 0;
+$calendar-weekday-font-size: $font-size-2;
+$calendar-weekday-font-size-sm: $font-size-1;
+$calendar-weekday-font-size-lg: $font-size-3;
+$calendar-weekday-font-weight: 600;
+
+$calendar-grid-gap: $space-1;
+
+$calendar-day-padding: $space-2;
+$calendar-day-padding-sm: $space-1;
+$calendar-day-padding-lg: $space-3;
+$calendar-day-radius: $radius-1;
+$calendar-day-font-size: $font-size-3;
+$calendar-day-font-size-sm: $font-size-2;
+$calendar-day-font-size-lg: $font-size-4;
+
+$calendar-day-number-margin: $space-1;
+
+$calendar-events-gap: 2px;
+
+$calendar-event-gap: $space-1;
+$calendar-event-padding: 2px;
+$calendar-event-radius: $radius-1;
+
+$calendar-event-dot-size: 6px;
+
+$calendar-event-title-font-size: $font-size-1;
+
+$calendar-year-view-padding: $space-4;
+
+$calendar-months-gap: $space-3;
+
+$calendar-month-padding: $space-4;
+$calendar-month-padding-sm: $space-2;
+$calendar-month-padding-lg: $space-6;
+$calendar-month-radius: $radius-2;
+$calendar-month-font-size: $font-size-3;
+$calendar-month-font-size-sm: $font-size-2;
+$calendar-month-font-size-lg: $font-size-4;
+
+// === NOTIFICATION ===
+
+$notification-z-index: 1050;
+$notification-max-width: 384px;
+$notification-gap: $space-3;
+
+$notification-offset-x: $space-6;
+$notification-offset-y: $space-6;
+
+$notification-padding: $space-4;
+$notification-gap-inner: $space-3;
+
+$notification-border-width: 1px;
+$notification-radius: $radius-2;
+
+$notification-icon-size: 20px;
+$notification-icon-gap: $space-2;
+
+$notification-title-size: $font-size-3;
+$notification-title-weight: 600;
+
+$notification-message-size: $font-size-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};
@@ -576,4 +592,253 @@
   --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};
+
+  /* === PASSWORD STRENGTH === */
+  --password-strength-bar-height-sm: #{$password-strength-bar-height-sm};
+  --password-strength-bar-height-md: #{$password-strength-bar-height-md};
+  --password-strength-bar-height-lg: #{$password-strength-bar-height-lg};
+  --password-strength-bar-gap: #{$password-strength-bar-gap};
+  --password-strength-bar-radius: #{$password-strength-bar-radius};
+  --password-strength-label-font-size: #{$password-strength-label-font-size};
+  --password-strength-label-gap: #{$password-strength-label-gap};
+
+  /* === TIMELINE === */
+  --timeline-dot-size-sm: #{$timeline-dot-size-sm};
+  --timeline-dot-size-md: #{$timeline-dot-size-md};
+  --timeline-dot-size-lg: #{$timeline-dot-size-lg};
+  --timeline-dot-border-width: #{$timeline-dot-border-width};
+
+  --timeline-line-width-sm: #{$timeline-line-width-sm};
+  --timeline-line-width-md: #{$timeline-line-width-md};
+  --timeline-line-width-lg: #{$timeline-line-width-lg};
+
+  --timeline-item-gap-sm: #{$timeline-item-gap-sm};
+  --timeline-item-gap-md: #{$timeline-item-gap-md};
+  --timeline-item-gap-lg: #{$timeline-item-gap-lg};
+
+  --timeline-content-gap-sm: #{$timeline-content-gap-sm};
+  --timeline-content-gap-md: #{$timeline-content-gap-md};
+  --timeline-content-gap-lg: #{$timeline-content-gap-lg};
+
+  --timeline-content-inner-gap-sm: #{$timeline-content-inner-gap-sm};
+  --timeline-content-inner-gap-md: #{$timeline-content-inner-gap-md};
+  --timeline-content-inner-gap-lg: #{$timeline-content-inner-gap-lg};
+
+  --timeline-date-font-size-sm: #{$timeline-date-font-size-sm};
+  --timeline-date-font-size-md: #{$timeline-date-font-size-md};
+  --timeline-date-font-size-lg: #{$timeline-date-font-size-lg};
+
+  --timeline-text-font-size-sm: #{$timeline-text-font-size-sm};
+  --timeline-text-font-size-md: #{$timeline-text-font-size-md};
+  --timeline-text-font-size-lg: #{$timeline-text-font-size-lg};
+
+  --timeline-icon-size-sm: #{$timeline-icon-size-sm};
+  --timeline-icon-size-md: #{$timeline-icon-size-md};
+  --timeline-icon-size-lg: #{$timeline-icon-size-lg};
+
+  /* === TRANSFER === */
+  --transfer-gap: #{$transfer-gap};
+  --transfer-border-radius: #{$transfer-border-radius};
+
+  --transfer-header-padding: #{$transfer-header-padding};
+  --transfer-search-padding: #{$transfer-search-padding};
+  --transfer-search-input-padding: #{$transfer-search-input-padding};
+  --transfer-search-input-radius: #{$transfer-search-input-radius};
+
+  --transfer-list-min-height: #{$transfer-list-min-height};
+  --transfer-list-max-height: #{$transfer-list-max-height};
+
+  --transfer-item-padding: #{$transfer-item-padding};
+  --transfer-title-font-size: #{$transfer-title-font-size};
+  --transfer-item-font-size: #{$transfer-item-font-size};
+  --transfer-actions-gap: #{$transfer-actions-gap};
+
+  /* === CAROUSEL === */
+  --carousel-container-height: #{$carousel-container-height};
+  --carousel-radius: #{$carousel-radius};
+  --carousel-content-padding: #{$carousel-content-padding};
+  --carousel-title-size: #{$carousel-title-size};
+  --carousel-description-size: #{$carousel-description-size};
+  --carousel-arrow-size: #{$carousel-arrow-size};
+  --carousel-arrow-radius: #{$carousel-arrow-radius};
+  --carousel-arrow-offset: #{$carousel-arrow-offset};
+  --carousel-arrow-icon-size: #{$carousel-arrow-icon-size};
+  --carousel-dot-size: #{$carousel-dot-size};
+  --carousel-dot-size-active: #{$carousel-dot-size-active};
+  --carousel-dots-gap: #{$carousel-dots-gap};
+  --carousel-dots-padding: #{$carousel-dots-padding};
+
+  /* === NOTIFICATION === */
+  --notification-z-index: #{$notification-z-index};
+  --notification-max-width: #{$notification-max-width};
+  --notification-gap: #{$notification-gap};
+
+  --notification-offset-x: #{$notification-offset-x};
+  --notification-offset-y: #{$notification-offset-y};
+
+  --notification-padding: #{$notification-padding};
+  --notification-gap-inner: #{$notification-gap-inner};
+
+  --notification-border-width: #{$notification-border-width};
+  --notification-radius: #{$notification-radius};
+
+  --notification-icon-size: #{$notification-icon-size};
+  --notification-icon-gap: #{$notification-icon-gap};
+
+  --notification-title-size: #{$notification-title-size};
+  --notification-title-weight: #{$notification-title-weight};
+
+  --notification-message-size: #{$notification-message-size};
+
+  /* === CALENDAR === */
+
+  --calendar-radius: #{$calendar-radius};
+
+  --calendar-header-padding: #{$calendar-header-padding};
+  --calendar-header-padding-sm: #{$calendar-header-padding-sm};
+  --calendar-header-padding-lg: #{$calendar-header-padding-lg};
+
+  --calendar-nav-gap: #{$calendar-nav-gap};
+  --calendar-nav-btn-size: #{$calendar-nav-btn-size};
+  --calendar-nav-btn-radius: #{$calendar-nav-btn-radius};
+  --calendar-nav-btn-font-size: #{$calendar-nav-btn-font-size};
+
+  --calendar-title-padding: #{$calendar-title-padding};
+  --calendar-title-radius: #{$calendar-title-radius};
+  --calendar-title-font-size: #{$calendar-title-font-size};
+  --calendar-title-font-size-sm: #{$calendar-title-font-size-sm};
+  --calendar-title-font-size-lg: #{$calendar-title-font-size-lg};
+  --calendar-title-font-weight: #{$calendar-title-font-weight};
+
+  --calendar-mode-gap: #{$calendar-mode-gap};
+  --calendar-mode-radius: #{$calendar-mode-radius};
+  --calendar-mode-padding: #{$calendar-mode-padding};
+  --calendar-mode-btn-padding: #{$calendar-mode-btn-padding};
+  --calendar-mode-btn-radius: #{$calendar-mode-btn-radius};
+  --calendar-mode-btn-font-size: #{$calendar-mode-btn-font-size};
+
+  --calendar-month-view-padding: #{$calendar-month-view-padding};
+
+  --calendar-weekday-gap: #{$calendar-weekday-gap};
+  --calendar-weekday-margin: #{$calendar-weekday-margin};
+  --calendar-weekday-padding: #{$calendar-weekday-padding};
+  --calendar-weekday-font-size: #{$calendar-weekday-font-size};
+  --calendar-weekday-font-size-sm: #{$calendar-weekday-font-size-sm};
+  --calendar-weekday-font-size-lg: #{$calendar-weekday-font-size-lg};
+  --calendar-weekday-font-weight: #{$calendar-weekday-font-weight};
+
+  --calendar-grid-gap: #{$calendar-grid-gap};
+
+  --calendar-day-padding: #{$calendar-day-padding};
+  --calendar-day-padding-sm: #{$calendar-day-padding-sm};
+  --calendar-day-padding-lg: #{$calendar-day-padding-lg};
+  --calendar-day-radius: #{$calendar-day-radius};
+  --calendar-day-font-size: #{$calendar-day-font-size};
+  --calendar-day-font-size-sm: #{$calendar-day-font-size-sm};
+  --calendar-day-font-size-lg: #{$calendar-day-font-size-lg};
+
+  --calendar-day-number-margin: #{$calendar-day-number-margin};
+
+  --calendar-events-gap: #{$calendar-events-gap};
+
+  --calendar-event-gap: #{$calendar-event-gap};
+  --calendar-event-padding: #{$calendar-event-padding};
+  --calendar-event-radius: #{$calendar-event-radius};
+
+  --calendar-event-dot-size: #{$calendar-event-dot-size};
+
+  --calendar-event-title-font-size: #{$calendar-event-title-font-size};
+
+  --calendar-year-view-padding: #{$calendar-year-view-padding};
+
+  --calendar-months-gap: #{$calendar-months-gap};
+
+  --calendar-month-padding: #{$calendar-month-padding};
+  --calendar-month-padding-sm: #{$calendar-month-padding-sm};
+  --calendar-month-padding-lg: #{$calendar-month-padding-lg};
+  --calendar-month-radius: #{$calendar-month-radius};
+  --calendar-month-font-size: #{$calendar-month-font-size};
+  --calendar-month-font-size-sm: #{$calendar-month-font-size-sm};
+  --calendar-month-font-size-lg: #{$calendar-month-font-size-lg};
+}
+
+/* === 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;
+  }
 }