@kksdev/ds-angular 1.2.4 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kksdev/ds-angular",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Angular 20 standalone component library - Design System with 30 components, 7 primitives, 3 themes, i18n support",
   "keywords": [
     "angular",

package/src/styles/themes/_custom.scss

@@ -389,5 +389,59 @@
   --accordion-icon-color: var(--text-muted);
   --accordion-focus-color: var(--role-primary);
   --accordion-expanded-border-color: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SEARCH INPUT
+   * ======================================================================== */
+  --search-input-bg: var(--input-bg);
+  --search-input-text: var(--text-default);
+  --search-input-placeholder: var(--text-muted);
+  --search-input-border: var(--input-border-color);
+  --search-input-focus-border: var(--role-primary);
+  --search-input-focus-shadow: 0 0 0 3px color-mix(in oklab, var(--role-primary) 25%, transparent);
+  --search-input-icon-color: var(--text-muted);
+  --search-input-clear-color: var(--text-muted);
+  --search-input-clear-hover-bg: var(--surface-hover);
+  --search-input-clear-hover-color: var(--text-default);
+  --search-input-clear-active-bg: var(--surface-raised);
+  --search-input-disabled-bg: var(--bg-disabled);
+  --search-input-disabled-text: var(--text-disabled);
+  --search-input-loading-color: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DATE PICKER
+   * ======================================================================== */
+  --datepicker-bg: var(--surface-default);
+  --datepicker-border: var(--border-color);
+  --datepicker-header-bg: var(--surface-raised);
+  --datepicker-footer-bg: var(--surface-raised);
+  --datepicker-title-color: var(--text-default);
+  --datepicker-nav-color: var(--text-muted);
+  --datepicker-btn-hover-bg: var(--surface-hover);
+  --datepicker-weekday-color: var(--text-muted);
+  --datepicker-day-color: var(--text-default);
+  --datepicker-day-hover-bg: var(--surface-hover);
+  --datepicker-day-other-color: var(--text-subtle);
+  --datepicker-today-border: var(--role-primary);
+  --datepicker-selected-bg: var(--role-primary);
+  --datepicker-selected-text: var(--gray-50);
+  --datepicker-selected-hover-bg: color-mix(in oklab, var(--role-primary) 85%, var(--background-main));
+  --datepicker-range-bg: color-mix(in oklab, var(--role-primary) 15%, transparent);
+  --datepicker-option-color: var(--text-default);
+  --datepicker-option-hover-bg: var(--surface-hover);
+  --datepicker-action-color: var(--text-default);
+  --datepicker-action-hover-bg: var(--surface-hover);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CONTAINER
+   * ======================================================================== */
+  --ds-container-sm: 540px;
+  --ds-container-md: 720px;
+  --ds-container-lg: 960px;
+  --ds-container-xl: 1140px;
+  --ds-container-2xl: 1320px;
+  --ds-container-gutter-sm: var(--space-4);
+  --ds-container-gutter-md: var(--space-6);
+  --ds-container-gutter-lg: var(--space-8);
 }
 

package/src/styles/themes/_dark.scss

@@ -438,4 +438,46 @@
   --menu-item-disabled-icon: var(--gray-600);
   --menu-divider: var(--gray-700);
   --menu-backdrop: transparent;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SEARCH INPUT
+   * ======================================================================== */
+  --search-input-bg: var(--input-bg);
+  --search-input-text: var(--text-default);
+  --search-input-placeholder: var(--text-muted);
+  --search-input-border: var(--input-border-color);
+  --search-input-focus-border: var(--color-primary);
+  --search-input-focus-shadow: var(--input-focus-shadow);
+  --search-input-icon-color: var(--gray-400);
+  --search-input-clear-color: var(--gray-400);
+  --search-input-clear-hover-bg: var(--gray-700);
+  --search-input-clear-hover-color: var(--gray-100);
+  --search-input-clear-active-bg: var(--gray-600);
+  --search-input-disabled-bg: var(--gray-900);
+  --search-input-disabled-text: var(--gray-500);
+  --search-input-loading-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DATE PICKER
+   * ======================================================================== */
+  --datepicker-bg: var(--gray-800);
+  --datepicker-border: var(--gray-700);
+  --datepicker-header-bg: var(--gray-700);
+  --datepicker-footer-bg: var(--gray-700);
+  --datepicker-title-color: var(--gray-100);
+  --datepicker-nav-color: var(--gray-400);
+  --datepicker-btn-hover-bg: var(--gray-600);
+  --datepicker-weekday-color: var(--gray-400);
+  --datepicker-day-color: var(--gray-100);
+  --datepicker-day-hover-bg: var(--gray-700);
+  --datepicker-day-other-color: var(--gray-500);
+  --datepicker-today-border: var(--color-primary);
+  --datepicker-selected-bg: var(--color-primary);
+  --datepicker-selected-text: var(--gray-900);
+  --datepicker-selected-hover-bg: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
+  --datepicker-range-bg: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --datepicker-option-color: var(--gray-100);
+  --datepicker-option-hover-bg: var(--gray-700);
+  --datepicker-action-color: var(--gray-100);
+  --datepicker-action-hover-bg: var(--gray-600);
 }

package/src/styles/themes/_light.scss

@@ -428,4 +428,46 @@
   --menu-item-disabled-icon: var(--text-disabled-alt);
   --menu-divider: var(--border-subtle);
   --menu-backdrop: transparent;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SEARCH INPUT
+   * ======================================================================== */
+  --search-input-bg: var(--input-bg);
+  --search-input-text: var(--text-default);
+  --search-input-placeholder: var(--text-muted);
+  --search-input-border: var(--input-border-color);
+  --search-input-focus-border: var(--color-primary);
+  --search-input-focus-shadow: var(--input-focus-shadow);
+  --search-input-icon-color: var(--text-muted);
+  --search-input-clear-color: var(--text-muted);
+  --search-input-clear-hover-bg: var(--surface-hover);
+  --search-input-clear-hover-color: var(--text-default);
+  --search-input-clear-active-bg: var(--surface-raised);
+  --search-input-disabled-bg: var(--input-disabled-bg);
+  --search-input-disabled-text: var(--text-disabled);
+  --search-input-loading-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DATE PICKER
+   * ======================================================================== */
+  --datepicker-bg: var(--background-main);
+  --datepicker-border: var(--border-default);
+  --datepicker-header-bg: var(--surface-raised);
+  --datepicker-footer-bg: var(--surface-raised);
+  --datepicker-title-color: var(--text-default);
+  --datepicker-nav-color: var(--text-muted);
+  --datepicker-btn-hover-bg: var(--surface-hover);
+  --datepicker-weekday-color: var(--text-muted);
+  --datepicker-day-color: var(--text-default);
+  --datepicker-day-hover-bg: var(--surface-hover);
+  --datepicker-day-other-color: var(--text-muted);
+  --datepicker-today-border: var(--color-primary);
+  --datepicker-selected-bg: var(--color-primary);
+  --datepicker-selected-text: var(--gray-50);
+  --datepicker-selected-hover-bg: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
+  --datepicker-range-bg: color-mix(in oklab, var(--color-primary) 15%, transparent);
+  --datepicker-option-color: var(--text-default);
+  --datepicker-option-hover-bg: var(--surface-hover);
+  --datepicker-action-color: var(--text-default);
+  --datepicker-action-hover-bg: var(--surface-hover);
 }

package/src/styles/tokens/_semantic.scss

@@ -401,3 +401,70 @@ $menu-font-size-md: $font-size-2;
 $menu-font-size-lg: $font-size-3;
 
 $menu-divider-margin: $space-2;
+
+// === SEARCH INPUT ===
+
+$search-input-height-sm: 32px;
+$search-input-height-md: 40px;
+$search-input-height-lg: 48px;
+
+$search-input-padding-sm: $space-2;
+$search-input-padding-md: $space-3;
+$search-input-padding-lg: $space-4;
+
+$search-input-font-size-sm: $font-size-2;
+$search-input-font-size-md: $font-size-3;
+$search-input-font-size-lg: $font-size-4;
+
+$search-input-icon-size-sm: 12px;
+$search-input-icon-size-md: 14px;
+$search-input-icon-size-lg: 16px;
+
+$search-input-clear-size-sm: 20px;
+$search-input-clear-size-md: 24px;
+$search-input-clear-size-lg: 28px;
+
+$search-input-radius: $radius-2;
+
+// === DATE PICKER ===
+
+$datepicker-width-sm: 260px;
+$datepicker-width-md: 300px;
+$datepicker-width-lg: 360px;
+
+$datepicker-header-padding-sm: $space-2;
+$datepicker-header-padding-md: $space-3;
+$datepicker-header-padding-lg: $space-4;
+
+$datepicker-day-size-sm: 28px;
+$datepicker-day-size-md: 36px;
+$datepicker-day-size-lg: 44px;
+
+$datepicker-weekday-height-sm: 24px;
+$datepicker-weekday-height-md: 28px;
+$datepicker-weekday-height-lg: 32px;
+
+$datepicker-nav-size-sm: 24px;
+$datepicker-nav-size-md: 32px;
+$datepicker-nav-size-lg: 40px;
+
+$datepicker-font-size-sm: $font-size-2;
+$datepicker-font-size-md: $font-size-3;
+$datepicker-font-size-lg: $font-size-4;
+
+$datepicker-radius: $radius-2;
+$datepicker-shadow: $shadow-2;
+$datepicker-calendar-padding: $space-2;
+$datepicker-calendar-gap: $space-1;
+
+// === CONTAINER ===
+
+$ds-container-sm: 540px;
+$ds-container-md: 720px;
+$ds-container-lg: 960px;
+$ds-container-xl: 1140px;
+$ds-container-2xl: 1320px;
+
+$ds-container-gutter-sm: $space-4;
+$ds-container-gutter-md: $space-6;
+$ds-container-gutter-lg: $space-8;

package/src/styles/tokens/_tokens.scss

@@ -467,4 +467,56 @@
   --menu-font-size-md: #{$menu-font-size-md};
   --menu-font-size-lg: #{$menu-font-size-lg};
   --menu-divider-margin: #{$menu-divider-margin};
+
+  /* === SEARCH INPUT === */
+  --search-input-height-sm: #{$search-input-height-sm};
+  --search-input-height-md: #{$search-input-height-md};
+  --search-input-height-lg: #{$search-input-height-lg};
+  --search-input-padding-sm: #{$search-input-padding-sm};
+  --search-input-padding-md: #{$search-input-padding-md};
+  --search-input-padding-lg: #{$search-input-padding-lg};
+  --search-input-font-size-sm: #{$search-input-font-size-sm};
+  --search-input-font-size-md: #{$search-input-font-size-md};
+  --search-input-font-size-lg: #{$search-input-font-size-lg};
+  --search-input-icon-size-sm: #{$search-input-icon-size-sm};
+  --search-input-icon-size-md: #{$search-input-icon-size-md};
+  --search-input-icon-size-lg: #{$search-input-icon-size-lg};
+  --search-input-clear-size-sm: #{$search-input-clear-size-sm};
+  --search-input-clear-size-md: #{$search-input-clear-size-md};
+  --search-input-clear-size-lg: #{$search-input-clear-size-lg};
+  --search-input-radius: #{$search-input-radius};
+
+  /* === DATE PICKER === */
+  --datepicker-width-sm: #{$datepicker-width-sm};
+  --datepicker-width-md: #{$datepicker-width-md};
+  --datepicker-width-lg: #{$datepicker-width-lg};
+  --datepicker-header-padding-sm: #{$datepicker-header-padding-sm};
+  --datepicker-header-padding-md: #{$datepicker-header-padding-md};
+  --datepicker-header-padding-lg: #{$datepicker-header-padding-lg};
+  --datepicker-day-size-sm: #{$datepicker-day-size-sm};
+  --datepicker-day-size-md: #{$datepicker-day-size-md};
+  --datepicker-day-size-lg: #{$datepicker-day-size-lg};
+  --datepicker-weekday-height-sm: #{$datepicker-weekday-height-sm};
+  --datepicker-weekday-height-md: #{$datepicker-weekday-height-md};
+  --datepicker-weekday-height-lg: #{$datepicker-weekday-height-lg};
+  --datepicker-nav-size-sm: #{$datepicker-nav-size-sm};
+  --datepicker-nav-size-md: #{$datepicker-nav-size-md};
+  --datepicker-nav-size-lg: #{$datepicker-nav-size-lg};
+  --datepicker-font-size-sm: #{$datepicker-font-size-sm};
+  --datepicker-font-size-md: #{$datepicker-font-size-md};
+  --datepicker-font-size-lg: #{$datepicker-font-size-lg};
+  --datepicker-radius: #{$datepicker-radius};
+  --datepicker-shadow: #{$datepicker-shadow};
+  --datepicker-calendar-padding: #{$datepicker-calendar-padding};
+  --datepicker-calendar-gap: #{$datepicker-calendar-gap};
+
+  /* === CONTAINER (DS) === */
+  --ds-container-sm: #{$ds-container-sm};
+  --ds-container-md: #{$ds-container-md};
+  --ds-container-lg: #{$ds-container-lg};
+  --ds-container-xl: #{$ds-container-xl};
+  --ds-container-2xl: #{$ds-container-2xl};
+  --ds-container-gutter-sm: #{$ds-container-gutter-sm};
+  --ds-container-gutter-md: #{$ds-container-gutter-md};
+  --ds-container-gutter-lg: #{$ds-container-gutter-lg};
 }