@kksdev/ds-angular 1.4.0 → 1.6.0

package/src/styles/tokens/_semantic.scss

@@ -448,6 +448,41 @@ $datepicker-nav-size-sm: 24px;
 $datepicker-nav-size-md: 32px;
 $datepicker-nav-size-lg: 40px;
 
+// === COLOR PICKER ===
+
+$colorpicker-height-sm: 32px;
+$colorpicker-height-md: 40px;
+$colorpicker-height-lg: 48px;
+
+$colorpicker-padding-sm: $space-1 $space-2;
+$colorpicker-padding-md: $space-2;
+$colorpicker-padding-lg: $space-3;
+
+$colorpicker-font-size-sm: $font-size-2;
+$colorpicker-font-size-md: $font-size-3;
+$colorpicker-font-size-lg: $font-size-4;
+
+$colorpicker-preview-size-sm: 20px;
+$colorpicker-preview-size-md: 28px;
+$colorpicker-preview-size-lg: 36px;
+
+$colorpicker-action-size-sm: 20px;
+$colorpicker-action-size-md: 24px;
+$colorpicker-action-size-lg: 28px;
+
+$colorpicker-gap: $space-2;
+$colorpicker-radius: $radius-2;
+
+$colorpicker-panel-width: 300px;
+$colorpicker-panel-padding: $space-4;
+$colorpicker-panel-gap: $space-3;
+$colorpicker-panel-radius: $radius-2;
+$colorpicker-panel-shadow: $shadow-3;
+
+$colorpicker-spectrum-height: 180px;
+$colorpicker-slider-height: 12px;
+$colorpicker-preset-size: 28px;
+
 // === SLIDER ===
 
 $slider-track-height-sm: 4px;
@@ -498,6 +533,21 @@ $file-upload-padding-sm: $space-6;
 $file-upload-padding-md: $space-8;
 $file-upload-padding-lg: $space-10;
 
+// === INPUT NUMBER ===
+
+$input-number-height-sm: 32px;
+$input-number-height-md: 40px;
+$input-number-height-lg: 48px;
+
+$input-number-btn-size-sm: 28px;
+$input-number-btn-size-md: 36px;
+$input-number-btn-size-lg: 44px;
+
+$input-number-btn-bg: $gray-100;
+$input-number-btn-hover: $gray-200;
+$input-number-btn-active: $gray-300;
+$input-number-btn-disabled: $gray-50;
+
 $file-upload-radius: $radius-2;
 $file-upload-file-radius: $radius-2;
 
@@ -634,3 +684,228 @@ $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;
+
+// === SEGMENTED CONTROL ===
+
+$segmented-height-sm: 32px;
+$segmented-height-md: 40px;
+$segmented-height-lg: 48px;
+
+$segmented-padding-sm: $space-2;
+$segmented-padding-md: $space-3;
+$segmented-padding-lg: $space-4;
+
+$segmented-font-size-sm: $font-size-2;
+$segmented-font-size-md: $font-size-3;
+$segmented-font-size-lg: $font-size-4;
+
+$segmented-icon-size-sm: 14px;
+$segmented-icon-size-md: 16px;
+$segmented-icon-size-lg: 18px;
+
+$segmented-gap: 4px;
+$segmented-segment-gap: $space-2;
+$segmented-border-radius: $radius-2;
+$segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+// === 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

@@ -524,6 +524,33 @@
   --datepicker-radius: #{$datepicker-radius};
   --datepicker-shadow: #{$datepicker-shadow};
 
+  /* === COLOR PICKER === */
+  --colorpicker-height-sm: #{$colorpicker-height-sm};
+  --colorpicker-height-md: #{$colorpicker-height-md};
+  --colorpicker-height-lg: #{$colorpicker-height-lg};
+  --colorpicker-padding-sm: #{$colorpicker-padding-sm};
+  --colorpicker-padding-md: #{$colorpicker-padding-md};
+  --colorpicker-padding-lg: #{$colorpicker-padding-lg};
+  --colorpicker-font-size-sm: #{$colorpicker-font-size-sm};
+  --colorpicker-font-size-md: #{$colorpicker-font-size-md};
+  --colorpicker-font-size-lg: #{$colorpicker-font-size-lg};
+  --colorpicker-preview-size-sm: #{$colorpicker-preview-size-sm};
+  --colorpicker-preview-size-md: #{$colorpicker-preview-size-md};
+  --colorpicker-preview-size-lg: #{$colorpicker-preview-size-lg};
+  --colorpicker-action-size-sm: #{$colorpicker-action-size-sm};
+  --colorpicker-action-size-md: #{$colorpicker-action-size-md};
+  --colorpicker-action-size-lg: #{$colorpicker-action-size-lg};
+  --colorpicker-gap: #{$colorpicker-gap};
+  --colorpicker-radius: #{$colorpicker-radius};
+  --colorpicker-panel-width: #{$colorpicker-panel-width};
+  --colorpicker-panel-padding: #{$colorpicker-panel-padding};
+  --colorpicker-panel-gap: #{$colorpicker-panel-gap};
+  --colorpicker-panel-radius: #{$colorpicker-panel-radius};
+  --colorpicker-panel-shadow: #{$colorpicker-panel-shadow};
+  --colorpicker-spectrum-height: #{$colorpicker-spectrum-height};
+  --colorpicker-slider-height: #{$colorpicker-slider-height};
+  --colorpicker-preset-size: #{$colorpicker-preset-size};
+
   /* === SLIDER === */
   --slider-track-height-sm: #{$slider-track-height-sm};
   --slider-track-height-md: #{$slider-track-height-md};
@@ -593,6 +620,18 @@
   --chip-remove-icon-size-lg: #{$chip-remove-icon-size-lg};
   --chip-border-radius: #{$chip-border-radius};
 
+  /* === INPUT NUMBER === */
+  --input-number-height-sm: #{$input-number-height-sm};
+  --input-number-height-md: #{$input-number-height-md};
+  --input-number-height-lg: #{$input-number-height-lg};
+  --input-number-btn-size-sm: #{$input-number-btn-size-sm};
+  --input-number-btn-size-md: #{$input-number-btn-size-md};
+  --input-number-btn-size-lg: #{$input-number-btn-size-lg};
+  --input-number-btn-bg: #{$input-number-btn-bg};
+  --input-number-btn-hover: #{$input-number-btn-hover};
+  --input-number-btn-active: #{$input-number-btn-active};
+  --input-number-btn-disabled: #{$input-number-btn-disabled};
+
   /* === EMPTY === */
   --empty-padding-sm: #{$empty-padding-sm};
   --empty-padding-md: #{$empty-padding-md};
@@ -661,6 +700,196 @@
   --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};
+
+  /* === SEGMENTED CONTROL === */
+  --segmented-height-sm: #{$segmented-height-sm};
+  --segmented-height-md: #{$segmented-height-md};
+  --segmented-height-lg: #{$segmented-height-lg};
+
+  --segmented-padding-sm: #{$segmented-padding-sm};
+  --segmented-padding-md: #{$segmented-padding-md};
+  --segmented-padding-lg: #{$segmented-padding-lg};
+
+  --segmented-font-size-sm: #{$segmented-font-size-sm};
+  --segmented-font-size-md: #{$segmented-font-size-md};
+  --segmented-font-size-lg: #{$segmented-font-size-lg};
+
+  --segmented-icon-size-sm: #{$segmented-icon-size-sm};
+  --segmented-icon-size-md: #{$segmented-icon-size-md};
+  --segmented-icon-size-lg: #{$segmented-icon-size-lg};
+
+  --segmented-gap: #{$segmented-gap};
+  --segmented-segment-gap: #{$segmented-segment-gap};
+  --segmented-border-radius: #{$segmented-border-radius};
+  --segmented-active-shadow: #{$segmented-active-shadow};
 }
 
 /* === ACCESSIBILITY: REDUCED MOTION === */