@kksdev/ds-angular 1.1.0

package/src/styles/tokens/_tokens.scss

@@ -0,0 +1,439 @@
+@use './primitives' as *;
+@use './semantic' as *;
+
+:root {
+  /* === BRAND (palette source-of-truth, fixe) === */
+  --brand-primary: #{$primary};
+  --brand-secondary: #{$secondary};
+  --brand-alt: #{$alt};
+
+  /* === ROLES (mappés sur la marque, surchargés par thème) === */
+  --role-primary: var(--brand-primary);
+  --role-secondary: var(--brand-secondary);
+  --role-accent: var(--role-secondary);
+
+  /* === EXPOSITION COMPOSANTS (API) === */
+  --color-primary: var(--role-primary);
+  --color-secondary: var(--role-secondary);
+  --color-alt: var(--brand-alt);
+
+  /* === 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;
+
+  /* === TYPOGRAPHY === */
+  --font-family-base: #{$font-family-base};
+
+  --font-size-small: #{$font-size-small};
+  --font-size-1: #{$font-size-1};
+  --font-size-2: #{$font-size-2};
+  --font-size-3: #{$font-size-3};
+  --font-size-4: #{$font-size-4};
+  --font-size-5: #{$font-size-5};
+  --font-size-6: #{$font-size-6};
+
+  /* aliases (t-shirt) */
+  --font-size-s: var(--font-size-2);
+  --font-size-m: var(--font-size-5);   /* 1.25rem */
+  --font-size-l: var(--font-size-6);   /* 1.5rem  */
+  --font-size-xl: 2rem;
+  --font-size-xxl: 3rem;
+
+  /* === LINE-HEIGHT === */
+  --line-height-tight: #{$line-height-tight};
+  --line-height-normal: #{$line-height-normal};
+  --line-height-relaxed: #{$line-height-relaxed};
+  --line-height-loose: #{$line-height-loose};
+
+  /* === FONT-WEIGHT === */
+  --font-weight-light: #{$font-weight-light};
+  --font-weight-normal: #{$font-weight-normal};
+  --font-weight-medium: #{$font-weight-medium};
+  --font-weight-semibold: #{$font-weight-semibold};
+  --font-weight-bold: #{$font-weight-bold};
+
+  /* === LETTER-SPACING === */
+  --letter-spacing-tight: #{$letter-spacing-tight};
+  --letter-spacing-normal: #{$letter-spacing-normal};
+  --letter-spacing-wide: #{$letter-spacing-wide};
+
+  /* === SPACING === */
+  --space-1: #{$space-1};
+  --space-2: #{$space-2};
+  --space-3: #{$space-3};
+  --space-4: #{$space-4};
+  --space-5: #{$space-5};
+  --space-6: #{$space-6};
+  --space-8: #{$space-8};
+  --space-s: var(--space-2);
+  --space-l: var(--space-6);
+
+  /* === Z-INDEX === */
+  --z-index-1: #{$z-index-1};
+  --z-index-2: #{$z-index-2};
+  --z-index-3: #{$z-index-3};
+  --z-index-4: #{$z-index-4};
+  --z-index-full: #{$z-index-full};
+
+  /* === RADIUS === */
+  --radius-1: #{$radius-1};
+  --radius-1-5: #{$radius-1-5};
+  --radius-2: #{$radius-2};
+  --radius-3: #{$radius-3};
+  --radius-4: #{$radius-4};
+  --radius-round: #{$radius-round};
+
+  /* === SHADOWS & ELEVATION === */
+  --shadow-1: #{$shadow-1};
+  --shadow-2: #{$shadow-2};
+  --shadow-3: #{$shadow-3};
+
+  /* === COLORS === */
+  --gray-50: #{$gray-50};
+  --gray-100: #{$gray-100};
+  --gray-200: #{$gray-200};
+  --gray-300: #{$gray-300};
+  --gray-400: #{$gray-400};
+  --gray-500: #{$gray-500};
+  --gray-600: #{$gray-600};
+  --gray-700: #{$gray-700};
+  --gray-800: #{$gray-800};
+  --gray-900: #{$gray-900};
+
+  --success: #{$success};
+  --warning: #{$warning};
+  --error: #{$error};
+  --info: #{$info};
+  --focus-color: var(--color-secondary);
+
+  /* === SIZES & LAYOUT === */
+  --container-xs: #{$container-xs};
+  --container-sm: #{$container-sm};
+  --container-md: #{$container-md};
+  --container-lg: #{$container-lg};
+  --container-xl: #{$container-xl};
+
+  --header-height: #{$header-height};
+  --footer-height: #{$footer-height};
+  --sidebar-width: #{$sidebar-width};
+  --layout-gap: #{$layout-gap};
+
+  /* === ANIMATIONS === */
+  --duration-fast: #{$duration-fast};
+  --duration-normal: #{$duration-normal};
+  --duration-slow: #{$duration-slow};
+  --easing-default: #{$easing-default};
+  --easing-in: #{$easing-in};
+  --easing-out: #{$easing-out};
+
+  /* === COMPONENT DIMENSIONS === */
+  --btn-height-sm: #{$btn-height-sm};
+  --btn-height-md: #{$btn-height-md};
+  --btn-height-lg: #{$btn-height-lg};
+  --btn-font-size-sm: #{$btn-font-size-sm};
+  --btn-font-size-md: #{$btn-font-size-md};
+  --btn-font-size-lg: #{$btn-font-size-lg};
+  --btn-padding-vertical-sm: #{$btn-padding-vertical-sm};
+  --btn-padding-horizontal-sm: #{$btn-padding-horizontal-sm};
+  --btn-padding-vertical-md: #{$btn-padding-vertical-md};
+  --btn-padding-horizontal-md: #{$btn-padding-horizontal-md};
+  --btn-padding-vertical-lg: #{$btn-padding-vertical-lg};
+  --btn-padding-horizontal-lg: #{$btn-padding-horizontal-lg};
+  --btn-radius-sm: #{$btn-radius-sm};
+  --btn-radius: #{$btn-radius-md};
+  --btn-radius-md: var(--btn-radius);
+  --btn-radius-lg: #{$btn-radius-lg};
+
+  --input-height-sm: #{$input-height-sm};
+  --input-height-md: #{$input-height-md};
+  --input-height-lg: #{$input-height-lg};
+  --input-padding-horizontal-sm: #{$input-padding-horizontal-sm};
+  --input-padding-horizontal-md: #{$input-padding-horizontal-md};
+  --input-padding-horizontal-lg: #{$input-padding-horizontal-lg};
+  --input-font-size-sm: #{$input-font-size-sm};
+  --input-font-size-md: #{$input-font-size-md};
+  --input-font-size-lg: #{$input-font-size-lg};
+  --input-radius: #{$input-border-radius};
+  --input-focus-shadow: #{$input-focus-shadow};
+
+  --icon-size-sm: #{$icon-size-sm};
+  --icon-size-md: #{$icon-size-md};
+  --icon-size-lg: #{$icon-size-lg};
+  --input-icon-size-sm: #{$input-icon-sm};
+  --input-icon-size-md: #{$input-icon-md};
+  --input-icon-size-lg: #{$input-icon-lg};
+
+  --badge-height: #{$badge-height};
+  --badge-padding-horizontal-sm: #{$badge-padding-horizontal-sm};
+  --badge-padding-horizontal-md: #{$badge-padding-horizontal-md};
+  --badge-padding-horizontal-lg: #{$badge-padding-horizontal-lg};
+  --badge-padding-vertical-sm: #{$badge-padding-vertical-sm};
+  --badge-padding-vertical-md: #{$badge-padding-vertical-md};
+  --badge-padding-vertical-lg: #{$badge-padding-vertical-lg};
+  --badge-font-size-sm: #{$badge-font-size-sm};
+  --badge-font-size-md: #{$badge-font-size-md};
+  --badge-font-size-lg: #{$badge-font-size-lg};
+  --badge-radius: #{$badge-radius};
+  --badge-pill-radius: #{$badge-radius-pill};
+
+  /* Variables conservées pour compatibilité */
+  --badge-border-color: var(--badge-bg, transparent);
+  --badge-outline-text-color: var(--badge-text);
+
+  /* Modal structural tokens */
+  --modal-padding: #{$modal-padding};
+  --modal-section-gap: #{$modal-section-gap};
+  --modal-footer-padding: #{$modal-footer-padding};
+  --modal-radius: #{$modal-radius};
+  --modal-shadow-depth: #{$modal-shadow};
+  --modal-overlay-blur: #{$modal-overlay-blur};
+  --modal-overlay-z-index: var(--z-index-full);
+  --modal-size-sm: #{$modal-size-sm};
+  --modal-size-md: #{$modal-size-md};
+  --modal-size-lg: #{$modal-size-lg};
+  --modal-max-height: #{$modal-max-height};
+
+  /* Dropdown structural tokens */
+  --dropdown-min-width: #{$dropdown-min-width};
+  --dropdown-radius: #{$dropdown-radius};
+  --dropdown-shadow: #{$dropdown-shadow};
+  --dropdown-padding: #{$dropdown-padding};
+  --dropdown-gap: #{$dropdown-gap};
+  --dropdown-item-padding-y: #{$dropdown-item-padding-y};
+  --dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --dropdown-item-radius: #{$dropdown-item-radius};
+
+  /* Toast structural tokens */
+  --toast-padding: #{$toast-padding};
+  --toast-radius-base: #{$toast-radius};
+  --toast-shadow-depth: #{$toast-shadow};
+  --toast-border-width: #{$toast-border-width};
+  --toast-gap: #{$toast-gap};
+  --toast-icon-size: #{$toast-icon-size};
+
+  /* === CHECKBOX === */
+  --checkbox-size-sm: #{$checkbox-size-sm};
+  --checkbox-size-md: #{$checkbox-size-md};
+  --checkbox-size-lg: #{$checkbox-size-lg};
+  --checkbox-border-width: #{$checkbox-border-width};
+  --checkbox-radius: #{$checkbox-radius};
+  --checkbox-check-size-sm: #{$checkbox-check-size-sm};
+  --checkbox-check-size-md: #{$checkbox-check-size-md};
+  --checkbox-check-size-lg: #{$checkbox-check-size-lg};
+
+  /* === RADIO === */
+  --radio-size-sm: #{$radio-size-sm};
+  --radio-size-md: #{$radio-size-md};
+  --radio-size-lg: #{$radio-size-lg};
+  --radio-border-width: #{$radio-border-width};
+  --radio-dot-size-sm: #{$radio-dot-size-sm};
+  --radio-dot-size-md: #{$radio-dot-size-md};
+  --radio-dot-size-lg: #{$radio-dot-size-lg};
+
+  /* === TOGGLE === */
+  --toggle-width-sm: #{$toggle-width-sm};
+  --toggle-width-md: #{$toggle-width-md};
+  --toggle-width-lg: #{$toggle-width-lg};
+  --toggle-height-sm: #{$toggle-height-sm};
+  --toggle-height-md: #{$toggle-height-md};
+  --toggle-height-lg: #{$toggle-height-lg};
+  --toggle-thumb-size-sm: #{$toggle-thumb-size-sm};
+  --toggle-thumb-size-md: #{$toggle-thumb-size-md};
+  --toggle-thumb-size-lg: #{$toggle-thumb-size-lg};
+  --toggle-track-radius: #{$toggle-track-radius};
+
+  /* === BREADCRUMB === */
+  --breadcrumb-separator: #{$breadcrumb-separator};
+  --breadcrumb-font-size: #{$breadcrumb-font-size};
+  --breadcrumb-spacing: #{$breadcrumb-spacing};
+  --breadcrumb-item-padding: #{$breadcrumb-item-padding};
+
+  /* === TABS === */
+  --tab-height: #{$tab-height};
+  --tab-padding-x: #{$tab-padding-x};
+  --tab-padding-y: #{$tab-padding-y};
+  --tab-border-width: #{$tab-border-width};
+  --tab-font-size: #{$tab-font-size};
+  --tab-gap: #{$tab-gap};
+  --tab-indicator-height: #{$tab-indicator-height};
+
+  /* === TOOLTIP === */
+  --tooltip-padding-y: #{$tooltip-padding-y};
+  --tooltip-padding-x: #{$tooltip-padding-x};
+  --tooltip-radius: #{$tooltip-radius};
+  --tooltip-max-width: #{$tooltip-max-width};
+  --tooltip-offset: #{$tooltip-offset};
+  --tooltip-font-size: #{$tooltip-font-size};
+  --tooltip-arrow-size: #{$tooltip-arrow-size};
+
+  /* === POPOVER === */
+  --popover-padding: #{$popover-padding};
+  --popover-radius: #{$popover-radius};
+  --popover-shadow: #{$popover-shadow};
+  --popover-max-width: #{$popover-max-width};
+  --popover-arrow-size: #{$popover-arrow-size};
+  --popover-border-width: #{$popover-border-width};
+  --popover-header-padding: #{$popover-header-padding};
+  --popover-body-padding: #{$popover-body-padding};
+  --popover-footer-padding: #{$popover-footer-padding};
+
+  /* === CARD === */
+  --card-padding-sm: #{$card-padding-sm};
+  --card-padding-md: #{$card-padding-md};
+  --card-padding-lg: #{$card-padding-lg};
+  --card-radius: #{$card-radius};
+  --card-shadow: #{$card-shadow};
+  --card-shadow-hover: #{$card-shadow-hover};
+  --card-header-font-size: #{$card-header-font-size};
+  --card-body-font-size: #{$card-body-font-size};
+  --card-footer-font-size: #{$card-footer-font-size};
+
+  /* === ALERT === */
+  --alert-padding-sm: #{$alert-padding-sm};
+  --alert-padding-md: #{$alert-padding-md};
+  --alert-padding-lg: #{$alert-padding-lg};
+  --alert-gap: #{$alert-gap};
+  --alert-radius: #{$alert-radius};
+  --alert-font-size-sm: #{$alert-font-size-sm};
+  --alert-font-size-md: #{$alert-font-size-md};
+  --alert-font-size-lg: #{$alert-font-size-lg};
+  --alert-icon-size-sm: #{$alert-icon-size-sm};
+  --alert-icon-size-md: #{$alert-icon-size-md};
+  --alert-icon-size-lg: #{$alert-icon-size-lg};
+
+  /* === DIVIDER === */
+  --divider-thickness-sm: #{$divider-thickness-sm};
+  --divider-thickness-md: #{$divider-thickness-md};
+  --divider-thickness-lg: #{$divider-thickness-lg};
+  --divider-font-size: #{$divider-font-size};
+  --divider-spacing-sm-vertical: #{$divider-spacing-sm-vertical};
+  --divider-spacing-md-vertical: #{$divider-spacing-md-vertical};
+  --divider-spacing-lg-vertical: #{$divider-spacing-lg-vertical};
+  --divider-spacing-sm-horizontal: #{$divider-spacing-sm-horizontal};
+  --divider-spacing-md-horizontal: #{$divider-spacing-md-horizontal};
+  --divider-spacing-lg-horizontal: #{$divider-spacing-lg-horizontal};
+
+  /* === PROGRESS BAR === */
+  --progress-height-sm: #{$progress-height-sm};
+  --progress-height-md: #{$progress-height-md};
+  --progress-height-lg: #{$progress-height-lg};
+  --progress-radius: #{$progress-radius};
+  --progress-track-bg: #{$progress-track-bg};
+  --progress-fill-bg: #{$progress-fill-bg};
+
+  /* === PAGINATION === */
+  --pagination-btn-size-sm: #{$pagination-btn-size-sm};
+  --pagination-btn-size-md: #{$pagination-btn-size-md};
+  --pagination-btn-size-lg: #{$pagination-btn-size-lg};
+  --pagination-btn-padding-sm: #{$pagination-btn-padding-sm};
+  --pagination-btn-padding-md: #{$pagination-btn-padding-md};
+  --pagination-btn-padding-lg: #{$pagination-btn-padding-lg};
+  --pagination-btn-radius: #{$pagination-btn-radius};
+  --pagination-font-size-sm: #{$pagination-font-size-sm};
+  --pagination-font-size-md: #{$pagination-font-size-md};
+  --pagination-font-size-lg: #{$pagination-font-size-lg};
+  --pagination-gap-sm: #{$pagination-gap-sm};
+  --pagination-gap-md: #{$pagination-gap-md};
+  --pagination-gap-lg: #{$pagination-gap-lg};
+
+  /* === STEPPER === */
+  --stepper-indicator-size-sm: #{$stepper-indicator-size-sm};
+  --stepper-indicator-size-md: #{$stepper-indicator-size-md};
+  --stepper-indicator-size-lg: #{$stepper-indicator-size-lg};
+  --stepper-indicator-border-width: #{$stepper-indicator-border-width};
+  --stepper-indicator-font-size-sm: #{$stepper-indicator-font-size-sm};
+  --stepper-indicator-font-size-md: #{$stepper-indicator-font-size-md};
+  --stepper-indicator-font-size-lg: #{$stepper-indicator-font-size-lg};
+  --stepper-connector-width: #{$stepper-connector-width};
+  --stepper-connector-min-length: #{$stepper-connector-min-length};
+  --stepper-label-font-size-sm: #{$stepper-label-font-size-sm};
+  --stepper-label-font-size-md: #{$stepper-label-font-size-md};
+  --stepper-label-font-size-lg: #{$stepper-label-font-size-lg};
+  --stepper-description-font-size-sm: #{$stepper-description-font-size-sm};
+  --stepper-description-font-size-md: #{$stepper-description-font-size-md};
+  --stepper-description-font-size-lg: #{$stepper-description-font-size-lg};
+  --stepper-gap-horizontal: #{$stepper-gap-horizontal};
+  --stepper-gap-vertical: #{$stepper-gap-vertical};
+
+  /* === ACCORDION === */
+  --accordion-header-padding-sm: #{$accordion-header-padding-sm};
+  --accordion-header-padding-md: #{$accordion-header-padding-md};
+  --accordion-header-padding-lg: #{$accordion-header-padding-lg};
+  --accordion-body-padding-sm: #{$accordion-body-padding-sm};
+  --accordion-body-padding-md: #{$accordion-body-padding-md};
+  --accordion-body-padding-lg: #{$accordion-body-padding-lg};
+  --accordion-header-font-size-sm: #{$accordion-header-font-size-sm};
+  --accordion-header-font-size-md: #{$accordion-header-font-size-md};
+  --accordion-header-font-size-lg: #{$accordion-header-font-size-lg};
+  --accordion-body-font-size-sm: #{$accordion-body-font-size-sm};
+  --accordion-body-font-size-md: #{$accordion-body-font-size-md};
+  --accordion-body-font-size-lg: #{$accordion-body-font-size-lg};
+  --accordion-radius: #{$accordion-radius};
+  --accordion-border-width: #{$accordion-border-width};
+  --accordion-content-max-height: #{$accordion-content-max-height};
+  --accordion-item-gap: #{$accordion-item-gap};
+
+  /* === SELECT === */
+  --select-height-sm: #{$select-height-sm};
+  --select-height-md: #{$select-height-md};
+  --select-height-lg: #{$select-height-lg};
+  --select-padding-sm: #{$select-padding-sm};
+  --select-padding-md: #{$select-padding-md};
+  --select-padding-lg: #{$select-padding-lg};
+  --select-font-size-sm: #{$select-font-size-sm};
+  --select-font-size-md: #{$select-font-size-md};
+  --select-font-size-lg: #{$select-font-size-lg};
+  --select-radius: #{$select-radius};
+  --select-dropdown-radius: #{$select-dropdown-radius};
+  --select-dropdown-shadow: #{$select-dropdown-shadow};
+  --select-max-height: #{$select-dropdown-max-height};
+  --select-option-padding: #{$select-option-padding};
+  --select-option-gap: #{$select-option-gap};
+
+  /* === TABLE === */
+  --table-cell-padding-sm: #{$table-cell-padding-sm};
+  --table-cell-padding-md: #{$table-cell-padding-md};
+  --table-cell-padding-lg: #{$table-cell-padding-lg};
+  --table-radius: #{$table-radius};
+  --table-header-font-size: #{$table-header-font-size};
+  --table-body-font-size: #{$table-body-font-size};
+
+  /* === COMBOBOX === */
+  --combobox-height-sm: #{$combobox-height-sm};
+  --combobox-height-md: #{$combobox-height-md};
+  --combobox-height-lg: #{$combobox-height-lg};
+  --combobox-padding-sm: #{$combobox-padding-sm};
+  --combobox-padding-md: #{$combobox-padding-md};
+  --combobox-padding-lg: #{$combobox-padding-lg};
+  --combobox-font-size-sm: #{$combobox-font-size-sm};
+  --combobox-font-size-md: #{$combobox-font-size-md};
+  --combobox-font-size-lg: #{$combobox-font-size-lg};
+  --combobox-radius: #{$combobox-radius};
+  --combobox-dropdown-shadow: #{$combobox-dropdown-shadow};
+  --combobox-max-height: #{$combobox-max-height};
+
+  /* === BREAKPOINTS === */
+  --breakpoint-xs: #{$breakpoint-xs};
+  --breakpoint-sm: #{$breakpoint-sm};
+  --breakpoint-md: #{$breakpoint-md};
+  --breakpoint-lg: #{$breakpoint-lg};
+  --breakpoint-xl: #{$breakpoint-xl};
+  --breakpoint-2xl: #{$breakpoint-2xl};
+
+  /* === FONT SIZE ALIASES (t-shirt sizes) === */
+  --font-size-xs: var(--font-size-1);
+  --font-size-sm: var(--font-size-2);
+  --font-size-base: var(--font-size-3);
+  --font-size-lg: var(--font-size-4);
+}