@kksdev/ds-angular 1.1.0

package/src/styles/themes/_light.scss

@@ -0,0 +1,405 @@
+:root.theme-light {
+  /* ==========================================================================
+   * BACKGROUNDS
+   * ======================================================================== */
+  --background-main: var(--gray-50);
+  --background-secondary: var(--gray-100);
+  --background-header: var(--gray-200);
+  --background-panel: var(--surface-default, var(--gray-50));
+  --background-panel-hover: var(--surface-hover);
+
+  /* ==========================================================================
+   * TEXT
+   * ======================================================================== */
+  --text-default: var(--gray-900);
+  --text-muted: var(--gray-700);
+  --text-disabled: var(--gray-500);
+  --text-disabled-alt: var(--gray-400);
+  --text-subtle: var(--gray-600);
+
+  /* ==========================================================================
+   * LINKS & SELECTIONS
+   * ======================================================================== */
+  --link: var(--role-primary);
+  --link-hover: color-mix(in oklab, var(--role-primary) 85%, var(--background-main));
+  --selection-bg: color-mix(in oklab, var(--role-primary) 25%, transparent);
+  --selection-text: var(--text-default);
+
+  /* ==========================================================================
+   * BORDERS
+   * ======================================================================== */
+  --border-color: var(--gray-300);
+  --border-subtle: var(--gray-200);
+  --border-strong: var(--gray-400);
+  --border-default: var(--border-color);
+  /* Feedback border variants */
+  --border-success: var(--success);
+  --border-warning: var(--warning);
+  --border-error: var(--error);
+  --border-info: var(--info);
+
+  /* ==========================================================================
+   * ROLES (override light)
+   * ======================================================================== */
+  --role-primary: var(--brand-primary);   /* violet */
+  --role-secondary: var(--brand-secondary); /* jaune */
+
+  /* ==========================================================================
+   * ACCENT & STATE
+   * ======================================================================== */
+  --accent: var(--role-primary);
+  --accent-alt: var(--role-secondary);
+  --accent-warn: var(--role-secondary);
+
+  /* ==========================================================================
+   * SURFACES
+   * ======================================================================== */
+  --surface-default: var(--gray-50);
+  --surface-raised: var(--gray-100);
+  --surface-hover: color-mix(in oklab, var(--gray-200) 60%, var(--gray-100));
+  --surface-overlay: color-mix(in oklab, var(--gray-900) 15%, transparent);
+
+  /* ==========================================================================
+   * FEEDBACK (bg + text)
+   * ======================================================================== */
+  /* Feedback backgrounds */
+  --bg-success: color-mix(in oklab, var(--success) 12%, var(--background-main));
+  --bg-warning: color-mix(in oklab, var(--warning) 16%, var(--background-main));
+  --bg-error:   color-mix(in oklab, var(--error) 16%, var(--background-main));
+  --bg-info:    color-mix(in oklab, var(--info) 16%, var(--background-main));
+  /* Feedback text */
+  --text-success: var(--success);
+  --text-warning: var(--warning);
+  --text-error:   var(--error);
+  --text-info:    var(--info);
+
+  /* ==========================================================================
+   * DISABLED
+   * ======================================================================== */
+  --bg-disabled: var(--gray-100);
+  --border-disabled: var(--gray-200);
+
+  /* ==========================================================================
+   * EFFECTS (scrollbar, hover, focus)
+   * ======================================================================== */
+  --scrollbar-thumb: var(--border-color);
+  --scrollbar-thumb-hover: var(--accent);
+  --hover-bg: color-mix(in oklab, var(--accent) 12%, transparent);
+  --focus-ring: 0 0 0 2px var(--focus-color);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS BUTTON
+   * ======================================================================== */
+  --btn-radius-sm: var(--radius-1);
+  --btn-radius: var(--radius-2);
+  --btn-radius-lg: var(--radius-3);
+
+  /* Primary */
+  --btn-primary-bg: var(--color-primary);
+  --btn-primary-text: var(--text-default);
+  --btn-primary-border: transparent;
+  --btn-primary-hover-bg: color-mix(in oklab, var(--color-primary) 90%, var(--background-main));
+  --btn-primary-hover-text: var(--text-default);
+  --btn-primary-hover-border: transparent;
+  --btn-primary-disabled-bg: var(--bg-disabled);
+  --btn-primary-disabled-text: var(--text-disabled);
+  --btn-primary-disabled-border: var(--border-disabled);
+
+  /* Secondary */
+  --btn-secondary-bg: var(--color-secondary);
+  --btn-secondary-text: var(--gray-900);
+  --btn-secondary-border: var(--border-color);
+  --btn-secondary-hover-bg: color-mix(in oklab, var(--color-secondary) 85%, var(--background-main));
+  --btn-secondary-hover-text: var(--gray-900);
+  --btn-secondary-hover-border: var(--border-color);
+  --btn-secondary-disabled-bg: var(--bg-disabled);
+  --btn-secondary-disabled-text: var(--text-disabled);
+  --btn-secondary-disabled-border: var(--border-disabled);
+
+  /* Ghost */
+  --btn-ghost-bg: transparent;
+  --btn-ghost-text: var(--text-default);
+  --btn-ghost-border: transparent;
+  --btn-ghost-hover-bg: var(--hover-bg);
+  --btn-ghost-hover-text: var(--text-default);
+  --btn-ghost-disabled-bg: transparent;
+  --btn-ghost-disabled-text: var(--text-disabled);
+
+  /* Success */
+  --btn-success-bg: var(--success);
+  --btn-success-text: var(--gray-50);
+  --btn-success-border: transparent;
+  --btn-success-hover-bg: color-mix(in oklab, var(--success) 85%, var(--background-main));
+  --btn-success-hover-text: var(--gray-50);
+  --btn-success-hover-border: transparent;
+  --btn-success-disabled-bg: var(--bg-disabled);
+  --btn-success-disabled-text: var(--text-disabled);
+  --btn-success-disabled-border: var(--border-disabled);
+
+  /* Warning */
+  --btn-warning-bg: var(--warning);
+  --btn-warning-text: var(--gray-900);
+  --btn-warning-border: transparent;
+  --btn-warning-hover-bg: color-mix(in oklab, var(--warning) 85%, var(--background-main));
+  --btn-warning-hover-text: var(--gray-900);
+  --btn-warning-hover-border: transparent;
+  --btn-warning-disabled-bg: var(--bg-disabled);
+  --btn-warning-disabled-text: var(--text-disabled);
+  --btn-warning-disabled-border: var(--border-disabled);
+
+  /* Error */
+  --btn-error-bg: var(--error);
+  --btn-error-text: var(--gray-50);
+  --btn-error-border: transparent;
+  --btn-error-hover-bg: color-mix(in oklab, var(--error) 85%, var(--background-main));
+  --btn-error-hover-text: var(--gray-50);
+  --btn-error-hover-border: transparent;
+  --btn-error-disabled-bg: var(--bg-disabled);
+  --btn-error-disabled-text: var(--text-disabled);
+  --btn-error-disabled-border: var(--border-disabled);
+
+  /* Info */
+  --btn-info-bg: var(--info);
+  --btn-info-text: var(--gray-50);
+  --btn-info-border: transparent;
+  --btn-info-hover-bg: color-mix(in oklab, var(--info) 85%, var(--background-main));
+  --btn-info-hover-text: var(--gray-50);
+  --btn-info-hover-border: transparent;
+  --btn-info-disabled-bg: var(--bg-disabled);
+  --btn-info-disabled-text: var(--text-disabled);
+  --btn-info-disabled-border: var(--border-disabled);
+
+  /* Focus */
+  --btn-focus-outline: var(--accent);
+
+  /* Spinner */
+  --spinner-size: 1em;
+  --spinner-border: rgba(0, 0, 0, 0.2);
+  --spinner-border-active: currentColor;
+
+
+  /* ==========================================================================
+  * SÉMANTIQUES DS INPUT FIELDS
+  * ======================================================================== */
+  --input-bg: var(--surface-default);
+  --input-text: var(--text-default);
+  --input-placeholder: var(--text-subtle);
+  --input-border: var(--border-color);
+  --input-hover-border: color-mix(in oklab, var(--border-color) 85%, var(--background-main));
+  --input-focus-border: var(--accent);
+  --input-focus-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
+  --input-icon: var(--text-muted);
+  --input-disabled-bg: var(--bg-disabled);
+  --input-disabled-text: var(--text-disabled);
+  --input-success-border: var(--success);
+  --input-warning-border: var(--warning);
+  --input-error-border: var(--error);
+  --input-label-color: var(--text-default);
+  --input-label-font-size: var(--font-size-2);
+  --input-label-margin-bottom: var(--space-1);
+  --input-padding-default: var(--space-2);
+
+  /* ==========================================================================
+  * SÉMANTIQUES DS MODALS
+  * ======================================================================== */
+  --modal-bg: var(--surface-overlay);
+  --modal-text: var(--text-default);
+  --modal-border-color: var(--border-strong);
+  --modal-box-shadow: var(--shadow-3);
+  --modal-divider: var(--border-subtle);
+  --modal-footer-shadow: inset 0 1px 0 var(--modal-divider);
+  --modal-backdrop: color-mix(in oklab, var(--gray-900) 30%, transparent);
+  --modal-type-success-color: var(--success);
+  --modal-type-success-contrast: var(--gray-50);
+  --modal-type-warning-color: var(--warning);
+  --modal-type-warning-contrast: var(--gray-900);
+  --modal-type-error-color: var(--error);
+  --modal-type-error-contrast: var(--gray-50);
+  --modal-type-info-color: var(--info);
+  --modal-type-info-contrast: var(--gray-50);
+
+  /* ==========================================================================
+  * SÉMANTIQUES DS DROPDOWN
+  * ======================================================================== */
+  --dropdown-bg: var(--surface-default);
+  --dropdown-border-color: var(--border-color);
+  --dropdown-backdrop: color-mix(in oklab, var(--gray-900) 20%, transparent);
+  --dropdown-item-color: var(--text-muted);
+  --dropdown-item-hover-bg: var(--surface-hover);
+  --dropdown-item-hover-color: var(--text-default);
+  --dropdown-item-active-bg: var(--color-primary);
+  --dropdown-item-active-color: var(--gray-50);
+  --dropdown-separator: var(--border-subtle);
+
+  /* ==========================================================================
+  * SÉMANTIQUES DS BADGES
+  * ======================================================================== */
+  --badge-bg: var(--accent);
+  --badge-text: var(--text-default);
+  --badge-bg-secondary: var(--accent-alt);
+  --badge-text-secondary: var(--text-default);
+  --badge-bg-muted: var(--surface-raised);
+  --badge-text-muted: var(--text-muted);
+  --badge-default-bg: var(--gray-200);
+  --badge-default-text: var(--gray-900);
+  --badge-primary-bg: var(--color-primary);
+  --badge-primary-text: var(--text-default);
+  --badge-secondary-bg: var(--color-secondary);
+  --badge-secondary-text: var(--gray-900);
+  --badge-success-bg: var(--success);
+  --badge-success-text: var(--gray-50);
+  --badge-warning-bg: var(--warning);
+  --badge-warning-text: var(--gray-900);
+  --badge-error-bg: var(--error);
+  --badge-error-text: var(--gray-50);
+  --badge-info-bg: var(--info);
+  --badge-info-text: var(--gray-50);
+  --badge-neutral-bg: var(--gray-300);
+  --badge-neutral-text: var(--gray-900);
+  --badge-accent-bg: var(--color-alt);
+  --badge-accent-text: var(--gray-900);
+  --badge-radius-default: var(--badge-radius);
+  --badge-radius-pill: var(--badge-pill-radius);
+  --badge-radius-square: 0;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TOASTS
+   * ======================================================================== */
+  --toast-bg: var(--surface-default);
+  --toast-text: var(--text-default);
+  --toast-border: var(--border-color);
+
+  --toast-success-bg: var(--bg-success);
+  --toast-success-text: var(--text-success);
+  --toast-success-border: var(--success);
+  --toast-warning-bg: var(--bg-warning);
+  --toast-warning-text: var(--text-warning);
+  --toast-warning-border: var(--warning);
+  --toast-error-bg: var(--bg-error);
+  --toast-error-text: var(--text-error);
+  --toast-error-border: var(--error);
+  --toast-info-bg: var(--bg-info);
+  --toast-info-text: var(--text-info);
+  --toast-info-border: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CHECKBOX
+   * ======================================================================== */
+  --checkbox-bg: var(--surface-default);
+  --checkbox-border: var(--border-color);
+  --checkbox-checked-bg: var(--color-primary);
+  --checkbox-checked-border: var(--color-primary);
+  --checkbox-check-color: var(--gray-50);
+  --checkbox-hover-border: color-mix(in oklab, var(--border-color) 85%, var(--background-main));
+  --checkbox-focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent);
+  --checkbox-disabled-bg: var(--bg-disabled);
+  --checkbox-disabled-border: var(--border-disabled);
+  --checkbox-disabled-check: var(--text-disabled);
+  --checkbox-indeterminate-bg: var(--color-primary);
+  --checkbox-indeterminate-border: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS RADIO
+   * ======================================================================== */
+  --radio-bg: var(--surface-default);
+  --radio-border: var(--border-color);
+  --radio-checked-bg: var(--surface-default);
+  --radio-checked-border: var(--color-primary);
+  --radio-dot-color: var(--color-primary);
+  --radio-hover-border: color-mix(in oklab, var(--border-color) 85%, var(--background-main));
+  --radio-focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent);
+  --radio-disabled-bg: var(--bg-disabled);
+  --radio-disabled-border: var(--border-disabled);
+  --radio-disabled-dot: var(--text-disabled);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TOGGLE
+   * ======================================================================== */
+  --toggle-track-bg: var(--gray-300);
+  --toggle-track-checked-bg: var(--color-primary);
+  --toggle-thumb-bg: var(--gray-50);
+  --toggle-thumb-shadow: var(--shadow-1);
+  --toggle-hover-track-bg: color-mix(in oklab, var(--gray-300) 85%, var(--background-main));
+  --toggle-hover-track-checked-bg: color-mix(in oklab, var(--color-primary) 90%, var(--background-main));
+  --toggle-focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent);
+  --toggle-disabled-track-bg: var(--bg-disabled);
+  --toggle-disabled-thumb-bg: var(--gray-200);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS BREADCRUMB
+   * ======================================================================== */
+  --breadcrumb-link: var(--text-muted);
+  --breadcrumb-link-hover: var(--text-default);
+  --breadcrumb-active: var(--text-default);
+  --breadcrumb-separator-color: var(--text-subtle);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TABS
+   * ======================================================================== */
+  --tab-bg: transparent;
+  --tab-text: var(--text-muted);
+  --tab-hover-bg: var(--surface-hover);
+  --tab-hover-text: var(--text-default);
+  --tab-active-bg: transparent;
+  --tab-active-text: var(--text-default);
+  --tab-active-border: var(--color-primary);
+  --tab-border: var(--border-subtle);
+  --tab-disabled-text: var(--text-disabled);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TOOLTIP
+   * ======================================================================== */
+  --tooltip-bg: var(--gray-800);
+  --tooltip-text: var(--gray-50);
+  --tooltip-shadow: var(--shadow-2);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS POPOVER
+   * ======================================================================== */
+  --popover-bg: var(--surface-default);
+  --popover-text: var(--text-default);
+  --popover-border: var(--border-color);
+  --popover-header-bg: var(--surface-raised);
+  --popover-header-border: var(--border-subtle);
+  --popover-backdrop: color-mix(in oklab, var(--gray-900) 20%, transparent);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS PAGINATION
+   * ======================================================================== */
+  --pagination-btn-bg: var(--surface-default);
+  --pagination-btn-text: var(--text-default);
+  --pagination-btn-border: var(--border-color);
+  --pagination-btn-hover-bg: var(--surface-hover);
+  --pagination-btn-hover-border: var(--color-primary);
+  --pagination-btn-focus-border: var(--color-primary);
+  --pagination-active-bg: var(--color-primary);
+  --pagination-active-text: var(--gray-50);
+  --pagination-active-hover-bg: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
+  --pagination-info-color: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS STEPPER
+   * ======================================================================== */
+  --stepper-pending-bg: var(--background-secondary);
+  --stepper-pending-text: var(--text-muted);
+  --stepper-pending-border: var(--border-color);
+  --stepper-active-bg: var(--color-primary);
+  --stepper-active-text: var(--gray-50);
+  --stepper-completed-bg: var(--success);
+  --stepper-completed-text: var(--gray-50);
+  --stepper-error-bg: var(--error);
+  --stepper-error-text: var(--gray-50);
+  --stepper-connector-color: var(--border-color);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS ACCORDION
+   * ======================================================================== */
+  --accordion-header-bg: var(--surface-default);
+  --accordion-header-hover-bg: var(--surface-hover);
+  --accordion-header-text: var(--text-default);
+  --accordion-body-text: var(--text-muted);
+  --accordion-border-color: var(--border-color);
+  --accordion-icon-color: var(--text-muted);
+  --accordion-focus-color: var(--color-primary);
+  --accordion-expanded-border-color: var(--color-primary);
+}

package/src/styles/tokens/_primitives.scss

@@ -0,0 +1,140 @@
+// ============================================================================
+// TOKENS PRIMITIFS — Design System Assist-AI
+// ============================================================================
+//
+// Ce fichier contient les tokens primitifs globaux du design system.
+// Ces tokens représentent la couche la plus basse de l'architecture de design,
+// et doivent être utilisés pour construire les tokens sémantiques (_semantic.scss).
+//
+// CONTENU :
+// - Palette de couleurs (grays, feedback colors, brand colors)
+// - Échelle de spacing (espacement et marges)
+// - Border radius (arrondis)
+// - Shadows (ombres)
+// - Z-index (superposition)
+// - Animations (durées et easing)
+// - Typographie de base (font-family, font-sizes)
+//
+// RÈGLES D'USAGE :
+// - Ne PAS modifier ces valeurs sans validation design
+// - Ne PAS utiliser directement dans les composants (passer par _semantic.scss)
+// - Maintenir la cohérence avec le système de thème (light/dark)
+//
+// ============================================================================
+
+// === COLORS ===
+
+// Palette de gris
+$gray-50:  #fafafa;
+$gray-100: #f5f5f5;
+$gray-200: #e5e5e5;
+$gray-300: #d4d4d4;
+$gray-400: #a3a3a3;
+$gray-500: #737373;
+$gray-600: #525252;
+$gray-700: #404040;
+$gray-800: #262626;
+$gray-900: #171717;
+
+// Couleurs de feedback
+$success: #4caf50;
+$warning: #ff9800;
+$error:   #f44336;
+$info:    #2196f3;
+
+// Couleurs de marque
+$primary:   #7d4bc0;
+$secondary: #fbc224;
+$alt:       #2dd4bf;
+
+// === SPACING ===
+
+$space-1: 0.25rem;
+$space-2: 0.5rem;
+$space-3: 0.75rem;
+$space-4: 1rem;
+$space-5: 1.25rem;
+$space-6: 1.5rem;
+$space-8: 2rem;
+
+// === RADIUS ===
+
+$radius-1: 4px;
+$radius-1-5: 6px;
+$radius-2: 8px;
+$radius-3: 12px;
+$radius-4: 20px;
+$radius-round: 999px;
+
+// === SHADOWS ===
+
+$shadow-1: 0 1px 2px rgba(0,0,0,.14);
+$shadow-2: 0 6px 16px rgba(0,0,0,.18);
+$shadow-3: 0 15px 40px rgba(0,0,0,.24);
+
+// === Z-INDEX ===
+
+$z-index-1: 100;
+$z-index-2: 200;
+$z-index-3: 300;
+$z-index-4: 400;
+$z-index-full: 999;
+
+// === ANIMATIONS ===
+
+$duration-fast: 150ms;
+$duration-normal: 300ms;
+$duration-slow: 500ms;
+
+$easing-default: ease-in-out;
+$easing-in: ease-in;
+$easing-out: ease-out;
+
+// === TYPOGRAPHY ===
+
+$font-family-base: "Poppins, sans-serif";
+
+$font-size-small: 0.6rem;
+$font-size-1: 0.75rem;
+$font-size-2: 0.875rem;
+$font-size-3: 1rem;
+$font-size-4: 1.125rem;
+$font-size-5: 1.25rem;
+$font-size-6: 1.5rem;
+
+$line-height-tight: 1.2;
+$line-height-normal: 1.5;
+$line-height-relaxed: 1.75;
+$line-height-loose: 2;
+
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+$letter-spacing-tight: -0.02em;
+$letter-spacing-normal: 0;
+$letter-spacing-wide: 0.05em;
+
+// === LAYOUT & SIZES ===
+
+$container-xs: 320px;
+$container-sm: 640px;
+$container-md: 768px;
+$container-lg: 1024px;
+$container-xl: 1280px;
+
+$header-height: 60px;
+$footer-height: 50px;
+$sidebar-width: 260px;
+$layout-gap: 1rem;
+
+// === BREAKPOINTS ===
+// Breakpoints standard (Bootstrap-like)
+$breakpoint-xs: 320px;   // Mobile small
+$breakpoint-sm: 576px;   // Mobile large
+$breakpoint-md: 768px;   // Tablet
+$breakpoint-lg: 992px;   // Desktop
+$breakpoint-xl: 1200px;  // Large desktop
+$breakpoint-2xl: 1400px; // Extra large desktop