@kksdev/ds-angular 1.5.0 → 1.7.0

package/src/styles/tokens/_tokens.scss

@@ -19,18 +19,18 @@
 
   /* === CUSTOM THEME PLACEHOLDERS === */
   --custom-bg: #ffffff;
-  --custom-bg-secondary: #f5f5f5;
-  --custom-bg-header: #e0e0e0;
-  --custom-text-default: #1a1c22;
-  --custom-text-muted: #2c2f36;
-  --custom-text-disabled: #8e95a2;
-  --custom-text-disabled-alt: #b0b4bd;
-  --custom-text-subtle: #4a4e5a;
-  --custom-border: #d0d0d0;
-  --custom-border-subtle: #e0e0e0;
-  --custom-border-strong: #b6bac3;
-  --custom-accent-primary: #7d4bc0;
-  --custom-accent-secondary: #fbc224;
+  --custom-bg-secondary: #f8fafc;
+  --custom-bg-header: #f1f5f9;
+  --custom-text-default: #0f172a;
+  --custom-text-muted: #475569;
+  --custom-text-disabled: #94a3b8;
+  --custom-text-disabled-alt: #cbd5e1;
+  --custom-text-subtle: #64748b;
+  --custom-border: #e2e8f0;
+  --custom-border-subtle: #f1f5f9;
+  --custom-border-strong: #cbd5e1;
+  --custom-accent-primary: #6366f1;
+  --custom-accent-secondary: #f59e0b;
 
   /* === TYPOGRAPHY === */
   --font-family-base: #{$font-family-base};
@@ -124,12 +124,12 @@
   --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;
+  --color-primary-rgb: 99, 102, 241;
+  --color-secondary-rgb: 245, 158, 11;
+  --success-rgb: 34, 197, 94;
+  --warning-rgb: 249, 115, 22;
+  --error-rgb: 239, 68, 68;
+  --info-rgb: 59, 130, 246;
   --black-rgb: 0, 0, 0;
   --white-rgb: 255, 255, 255;
 
@@ -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};
@@ -829,6 +868,42 @@
   --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};
+
+  /* === SIDEBAR === */
+  --sidebar-width-sm: #{$sidebar-width-sm};
+  --sidebar-width-md: #{$sidebar-width-md};
+  --sidebar-width-lg: #{$sidebar-width-lg};
+  --sidebar-width-collapsed: #{$sidebar-width-collapsed};
+  --sidebar-item-height: #{$sidebar-item-height};
+  --sidebar-item-padding: #{$sidebar-item-padding};
+  --sidebar-item-radius: #{$sidebar-item-radius};
+  --sidebar-nested-indent: #{$sidebar-nested-indent};
+  --sidebar-badge-size: #{$sidebar-badge-size};
+  --sidebar-transition-duration: #{$sidebar-transition-duration};
+  --sidebar-header-padding: #{$sidebar-header-padding};
+  --sidebar-footer-padding: #{$sidebar-footer-padding};
 }
 
 /* === ACCESSIBILITY: REDUCED MOTION === */