@kksdev/ds-angular 1.1.0

package/src/styles/tokens/_semantic.scss

@@ -0,0 +1,363 @@
+// ============================================================================
+// TOKENS SÉMANTIQUES — Design System Assist-AI
+// ============================================================================
+//
+// Ce fichier contient les tokens sémantiques de composants du design system.
+// Ces tokens sont construits à partir des tokens primitifs (_primitives.scss)
+// et définissent les valeurs spécifiques pour chaque composant applicatif.
+//
+// CONTENU :
+// - Tokens button (couleurs, tailles, états)
+// - Tokens input (bordures, focus, états)
+// - Tokens icon (tailles)
+// - Tokens badge (couleurs, tailles)
+// - Tokens modal (overlays, tailles)
+// - Tokens toast (couleurs par type)
+//
+// RÈGLES D'USAGE :
+// - Utiliser UNIQUEMENT des tokens primitifs comme valeurs de base
+// - Ces tokens sont destinés aux composants DS (shared/ui/design-system/)
+// - Ne PAS créer de tokens sémantiques dans les composants métier
+// - Maintenir la cohérence avec les tokens primitifs
+//
+// ============================================================================
+
+@use './primitives' as *;
+
+// === BUTTON ===
+
+$btn-height-sm: 32px;
+$btn-height-md: 40px;
+$btn-height-lg: 48px;
+
+$btn-font-size-sm: $font-size-2;
+$btn-font-size-md: $font-size-3;
+$btn-font-size-lg: $font-size-4;
+
+$btn-padding-vertical-sm: $space-1;
+$btn-padding-horizontal-sm: $space-3;
+$btn-padding-vertical-md: $space-2;
+$btn-padding-horizontal-md: $space-4;
+$btn-padding-vertical-lg: $space-3;
+$btn-padding-horizontal-lg: $space-6;
+
+$btn-radius-sm: $radius-1;
+$btn-radius-md: $radius-2;
+$btn-radius-lg: $radius-3;
+
+$btn-primary-border: transparent;
+$btn-secondary-border: transparent;
+$btn-ghost-border: transparent;
+
+// === INPUT ===
+
+$input-height-sm: 32px;
+$input-height-md: 40px;
+$input-height-lg: 48px;
+
+$input-padding-horizontal-sm: $space-2;
+$input-padding-horizontal-md: $space-3;
+$input-padding-horizontal-lg: $space-4;
+
+$input-font-size-sm: $font-size-2;
+$input-font-size-md: $font-size-3;
+$input-font-size-lg: $font-size-4;
+
+$input-border-radius: $radius-2;
+$input-focus-shadow: 0 0 0 3px rgba($primary, 0.25);
+
+// === ICON ===
+
+$icon-size-sm: $font-size-2;
+$icon-size-md: $font-size-3;
+$icon-size-lg: $font-size-5;
+
+$input-icon-sm: 10px;
+$input-icon-md: 12px;
+$input-icon-lg: 16px;
+
+// === BADGE ===
+
+$badge-height: 20px;
+$badge-padding-x: $space-2;
+$badge-padding-y: $space-1;
+
+$badge-padding-horizontal-sm: $badge-padding-x * 0.75;
+$badge-padding-horizontal-md: $badge-padding-x;
+$badge-padding-horizontal-lg: $badge-padding-x * 1.5;
+
+$badge-padding-vertical-sm: $badge-padding-y * 0.75;
+$badge-padding-vertical-md: $badge-padding-y;
+$badge-padding-vertical-lg: $badge-padding-y * 1.5;
+
+$badge-font-size-sm: $font-size-1;
+$badge-font-size-md: $font-size-2;
+$badge-font-size-lg: $font-size-3;
+
+$badge-radius: $radius-1-5;
+$badge-radius-pill: $radius-round;
+
+// === MODAL ===
+
+$modal-padding: $space-4;
+$modal-section-gap: $space-3;
+$modal-footer-padding: $space-4;
+$modal-radius: $radius-3;
+$modal-shadow: $shadow-3;
+$modal-overlay-blur: 6px;
+$modal-size-sm: 360px;
+$modal-size-md: 560px;
+$modal-size-lg: 860px;
+$modal-max-height: 80vh;
+
+// === DROPDOWN ===
+
+$dropdown-min-width: 208px;
+$dropdown-radius: $radius-2;
+$dropdown-shadow: $shadow-2;
+$dropdown-padding: $space-2;
+$dropdown-gap: $space-1;
+$dropdown-item-padding-y: $space-2;
+$dropdown-item-padding-x: $space-3;
+$dropdown-item-radius: $radius-1-5;
+
+// === TOAST ===
+
+$toast-padding: $space-3;
+$toast-radius: $radius-2;
+$toast-shadow: $shadow-2;
+$toast-border-width: 1px;
+$toast-gap: $space-2;
+$toast-icon-size: $icon-size-md;
+
+// === CHECKBOX ===
+
+$checkbox-size-sm: 16px;
+$checkbox-size-md: 18px;
+$checkbox-size-lg: 20px;
+
+$checkbox-border-width: 2px;
+$checkbox-radius: $radius-1;
+
+$checkbox-check-size-sm: 10px;
+$checkbox-check-size-md: 12px;
+$checkbox-check-size-lg: 14px;
+
+// === RADIO ===
+
+$radio-size-sm: 16px;
+$radio-size-md: 18px;
+$radio-size-lg: 20px;
+
+$radio-border-width: 2px;
+
+$radio-dot-size-sm: 8px;
+$radio-dot-size-md: 10px;
+$radio-dot-size-lg: 12px;
+
+// === TOGGLE (SWITCH) ===
+
+$toggle-width-sm: 32px;
+$toggle-width-md: 40px;
+$toggle-width-lg: 48px;
+
+$toggle-height-sm: 18px;
+$toggle-height-md: 22px;
+$toggle-height-lg: 26px;
+
+$toggle-thumb-size-sm: 14px;
+$toggle-thumb-size-md: 18px;
+$toggle-thumb-size-lg: 22px;
+
+$toggle-track-radius: $radius-round;
+
+// === BREADCRUMB ===
+
+$breadcrumb-separator: '/';
+$breadcrumb-font-size: $font-size-2;
+$breadcrumb-spacing: $space-2;
+$breadcrumb-item-padding: $space-1;
+
+// === TABS ===
+
+$tab-height: 44px;
+$tab-padding-x: $space-4;
+$tab-padding-y: $space-2;
+$tab-border-width: 2px;
+$tab-font-size: $font-size-3;
+$tab-gap: $space-2;
+$tab-indicator-height: 2px;
+
+// === TOOLTIP ===
+
+$tooltip-padding-y: $space-1;
+$tooltip-padding-x: $space-2;
+$tooltip-radius: $radius-1;
+$tooltip-max-width: 240px;
+$tooltip-offset: 8px;
+$tooltip-font-size: $font-size-2;
+$tooltip-arrow-size: 6px;
+
+// === POPOVER ===
+
+$popover-padding: $space-3;
+$popover-radius: $radius-2;
+$popover-shadow: $shadow-2;
+$popover-max-width: 320px;
+$popover-arrow-size: 8px;
+$popover-border-width: 1px;
+$popover-header-padding: $space-3;
+$popover-body-padding: $space-3;
+$popover-footer-padding: $space-3;
+
+// === CARD ===
+
+$card-padding-sm: $space-3;
+$card-padding-md: $space-4;
+$card-padding-lg: $space-6;
+$card-radius: $radius-2;
+$card-shadow: $shadow-2;
+$card-shadow-hover: $shadow-3;
+$card-header-font-size: $font-size-4;
+$card-body-font-size: $font-size-3;
+$card-footer-font-size: $font-size-2;
+
+// === ALERT ===
+
+$alert-padding-sm: $space-2;
+$alert-padding-md: $space-3;
+$alert-padding-lg: $space-4;
+$alert-gap: $space-3;
+$alert-radius: $radius-2;
+$alert-font-size-sm: $font-size-2;
+$alert-font-size-md: $font-size-3;
+$alert-font-size-lg: $font-size-4;
+$alert-icon-size-sm: 16px;
+$alert-icon-size-md: 20px;
+$alert-icon-size-lg: 24px;
+
+// === DIVIDER ===
+
+$divider-thickness-sm: 1px;
+$divider-thickness-md: 2px;
+$divider-thickness-lg: 3px;
+$divider-font-size: $font-size-2;
+$divider-spacing-sm-vertical: $space-2;
+$divider-spacing-md-vertical: $space-4;
+$divider-spacing-lg-vertical: $space-6;
+$divider-spacing-sm-horizontal: $space-2;
+$divider-spacing-md-horizontal: $space-4;
+$divider-spacing-lg-horizontal: $space-6;
+
+// === PROGRESS BAR ===
+
+$progress-height-sm: 4px;
+$progress-height-md: 8px;
+$progress-height-lg: 12px;
+$progress-radius: $radius-3;
+$progress-track-bg: $gray-200;
+$progress-fill-bg: $primary;
+
+// === PAGINATION ===
+
+$pagination-btn-size-sm: 24px;
+$pagination-btn-size-md: 32px;
+$pagination-btn-size-lg: 40px;
+$pagination-btn-padding-sm: $space-1;
+$pagination-btn-padding-md: $space-2;
+$pagination-btn-padding-lg: $space-3;
+$pagination-btn-radius: $radius-2;
+$pagination-font-size-sm: $font-size-1;
+$pagination-font-size-md: $font-size-2;
+$pagination-font-size-lg: $font-size-3;
+$pagination-gap-sm: $space-1;
+$pagination-gap-md: $space-2;
+$pagination-gap-lg: $space-4;
+
+// === STEPPER ===
+
+$stepper-indicator-size-sm: 24px;
+$stepper-indicator-size-md: 32px;
+$stepper-indicator-size-lg: 40px;
+$stepper-indicator-border-width: 2px;
+$stepper-indicator-font-size-sm: $font-size-1;
+$stepper-indicator-font-size-md: $font-size-2;
+$stepper-indicator-font-size-lg: $font-size-3;
+$stepper-connector-width: 2px;
+$stepper-connector-min-length: 32px;
+$stepper-label-font-size-sm: $font-size-1;
+$stepper-label-font-size-md: $font-size-2;
+$stepper-label-font-size-lg: $font-size-3;
+$stepper-description-font-size-sm: $font-size-small;
+$stepper-description-font-size-md: $font-size-1;
+$stepper-description-font-size-lg: $font-size-2;
+$stepper-gap-horizontal: $space-2;
+$stepper-gap-vertical: $space-3;
+
+// === ACCORDION ===
+
+$accordion-header-padding-sm: $space-2 $space-3;
+$accordion-header-padding-md: $space-4;
+$accordion-header-padding-lg: $space-5 $space-6;
+$accordion-body-padding-sm: $space-2 $space-3;
+$accordion-body-padding-md: $space-4;
+$accordion-body-padding-lg: $space-5 $space-6;
+$accordion-header-font-size-sm: $font-size-2;
+$accordion-header-font-size-md: $font-size-3;
+$accordion-header-font-size-lg: $font-size-4;
+$accordion-body-font-size-sm: $font-size-1;
+$accordion-body-font-size-md: $font-size-2;
+$accordion-body-font-size-lg: $font-size-3;
+$accordion-radius: $radius-2;
+$accordion-border-width: 1px;
+$accordion-content-max-height: 500px;
+$accordion-item-gap: $space-2;
+
+// === SELECT ===
+
+$select-height-sm: 32px;
+$select-height-md: 40px;
+$select-height-lg: 48px;
+
+$select-padding-sm: $space-1 $space-2;
+$select-padding-md: $space-2 $space-3;
+$select-padding-lg: $space-3 $space-4;
+
+$select-font-size-sm: $font-size-2;
+$select-font-size-md: $font-size-3;
+$select-font-size-lg: $font-size-4;
+
+$select-radius: $radius-2;
+$select-dropdown-radius: $radius-2;
+$select-dropdown-shadow: $shadow-2;
+$select-dropdown-max-height: 200px;
+
+$select-option-padding: $space-2 $space-3;
+$select-option-gap: $space-1;
+
+// === TABLE ===
+
+$table-cell-padding-sm: $space-2;
+$table-cell-padding-md: $space-3;
+$table-cell-padding-lg: $space-4;
+$table-radius: $radius-2;
+$table-header-font-size: $font-size-2;
+$table-body-font-size: $font-size-3;
+
+// === COMBOBOX ===
+
+$combobox-height-sm: 32px;
+$combobox-height-md: 40px;
+$combobox-height-lg: 48px;
+
+$combobox-padding-sm: $space-1 $space-2;
+$combobox-padding-md: $space-2 $space-3;
+$combobox-padding-lg: $space-3 $space-4;
+
+$combobox-font-size-sm: $font-size-2;
+$combobox-font-size-md: $font-size-3;
+$combobox-font-size-lg: $font-size-4;
+
+$combobox-radius: $radius-2;
+$combobox-dropdown-shadow: $shadow-2;
+$combobox-max-height: 250px;