/* ============================================================ DESIGN SYSTEM v6 — THÈME « Créatif » ============================================================ Identité vive et ludique : fuchsia électrique, formes très arrondies, mouvement rapide et rebondissant. Activé par . Voir theme-solaire.css pour le mode d'emploi complet. ============================================================ */ /* ============================================================ 0. PRIMITIVES DE MARQUE ============================================================ */ :root { /* Fuchsia — couleur d'action / marque */ --base-creatif-fuchsia-50: #fdf2fb; --base-creatif-fuchsia-100: #fbe4f6; --base-creatif-fuchsia-200: #f7c8ed; --base-creatif-fuchsia-300: #f19bdd; --base-creatif-fuchsia-400: #e662c4; --base-creatif-fuchsia-500: #d633a8; --base-creatif-fuchsia-600: #b3208a; --base-creatif-fuchsia-700: #8f1870; --base-creatif-fuchsia-800: #74175c; --base-creatif-fuchsia-900: #61174c; /* Raisin — fond sombre à personnalité (remplace le Slate). 975 : cran extrême pour le fond « sunken » du mode sombre. */ --base-creatif-grape-50: #faf5ff; --base-creatif-grape-100: #f3e8ff; --base-creatif-grape-200: #e4ccff; --base-creatif-grape-300: #cfa3ff; --base-creatif-grape-400: #b073f5; --base-creatif-grape-500: #9548e0; --base-creatif-grape-600: #7a34bd; --base-creatif-grape-700: #602897; --base-creatif-grape-800: #452074; --base-creatif-grape-900: #2d1650; --base-creatif-grape-950: #1a0d30; --base-creatif-grape-975: #120a20; --base-creatif-gradient: linear-gradient(135deg, var(--base-creatif-fuchsia-400), var(--base-creatif-grape-500)); --base-creatif-mesh: radial-gradient(at 20% 80%, var(--base-creatif-fuchsia-200) 0, transparent 50%), radial-gradient(at 80% 20%, var(--base-creatif-grape-200) 0, transparent 50%), radial-gradient(at 50% 50%, var(--base-warning-200) 0, transparent 70%); /* Piles d'élévation colorées (halo fuchsia + assise noire en dark) — primitives brutes, consommées par la famille 4. */ --base-creatif-elev-low: 0 2px 8px rgba(214,51,168,0.12); --base-creatif-elev-mid: 0 4px 14px rgba(214,51,168,0.16), 0 2px 4px rgba(214,51,168,0.1); --base-creatif-elev-high: 0 10px 28px rgba(214,51,168,0.22), 0 4px 8px rgba(214,51,168,0.14); --base-creatif-elev-low-dark: 0 2px 8px rgba(0,0,0,0.35); --base-creatif-elev-mid-dark: 0 4px 16px rgba(0,0,0,0.4), 0 0 20px rgba(214,51,168,0.15); --base-creatif-elev-high-dark: 0 10px 30px rgba(0,0,0,0.5), 0 0 30px rgba(214,51,168,0.25); } /* ============================================================ 1. COULEURS — Thème « Créatif » ============================================================ */ [data-theme-style="creatif"] { --surface-base: light-dark(var(--base-warning-50), var(--base-creatif-grape-950)); --surface-raised: light-dark(var(--base-neutral-0), var(--base-creatif-grape-900)); --surface-sunken: light-dark(var(--base-creatif-fuchsia-50), var(--base-creatif-grape-975)); --surface-overlay: light-dark(color-mix(in srgb, var(--base-neutral-0) 90%, transparent), color-mix(in srgb, var(--base-creatif-grape-950) 90%, transparent)); --surface-glass: light-dark(color-mix(in srgb, var(--base-neutral-0) 65%, transparent), color-mix(in srgb, var(--base-creatif-grape-950) 65%, transparent)); --surface-inverse: light-dark(var(--base-creatif-grape-900), var(--base-creatif-grape-100)); --text: light-dark(var(--base-creatif-grape-900), var(--base-creatif-grape-50)); --text-secondary: light-dark(var(--base-neutral-600), var(--base-creatif-grape-300)); --text-tertiary: light-dark(var(--base-neutral-500), var(--base-creatif-grape-400)); --text-inverse: light-dark(var(--base-neutral-0), var(--base-creatif-grape-900)); --text-on-action: var(--base-neutral-0); --text-link: light-dark(var(--base-creatif-fuchsia-600), var(--base-creatif-fuchsia-400)); --text-link-hover: light-dark(var(--base-creatif-fuchsia-700), var(--base-creatif-fuchsia-300)); --text-code: light-dark(var(--base-creatif-fuchsia-700), var(--base-creatif-fuchsia-300)); --text-code-accent: light-dark(var(--base-creatif-grape-600), var(--base-creatif-grape-300)); --text-marker: var(--base-creatif-fuchsia-400); --border: light-dark(var(--base-creatif-fuchsia-100), var(--base-creatif-grape-800)); --border-muted: light-dark(var(--base-neutral-100), color-mix(in srgb, var(--base-creatif-grape-200) 8%, transparent)); --border-strong: light-dark(var(--base-creatif-fuchsia-200), var(--base-creatif-grape-700)); --border-field: light-dark(var(--base-creatif-fuchsia-500), var(--base-creatif-grape-500)); --border-focus: light-dark(var(--base-creatif-fuchsia-500), var(--base-creatif-fuchsia-400)); --border-accent: var(--base-creatif-fuchsia-400); --action-primary: var(--base-creatif-fuchsia-600); --action-primary-hover: var(--base-creatif-fuchsia-700); --action-primary-active: var(--base-creatif-fuchsia-800); --action-secondary: light-dark(var(--base-creatif-fuchsia-50), var(--base-creatif-grape-800)); --action-secondary-hover: light-dark(var(--base-creatif-fuchsia-100), var(--base-creatif-grape-700)); --action-danger: light-dark(var(--base-error-600), var(--base-error-500)); --action-danger-hover: light-dark(var(--base-error-700), var(--base-error-400)); --status-primary-background: light-dark(var(--base-creatif-fuchsia-100), color-mix(in srgb, var(--base-creatif-fuchsia-500) 18%, transparent)); --status-primary-foreground: light-dark(var(--base-creatif-fuchsia-700), var(--base-creatif-fuchsia-300)); --status-primary-border: transparent; --selection-background: light-dark(var(--base-creatif-fuchsia-200), var(--base-creatif-fuchsia-800)); --selection-foreground: light-dark(var(--base-creatif-fuchsia-900), var(--base-creatif-fuchsia-100)); --brand-gradient: var(--base-creatif-gradient); --brand-mesh: var(--base-creatif-mesh); --scrollbar-track: light-dark(var(--base-creatif-fuchsia-50), var(--base-creatif-grape-900)); --scrollbar-thumb: light-dark(var(--base-creatif-fuchsia-200), var(--base-creatif-grape-700)); --scrollbar-thumb-hover: light-dark(var(--base-creatif-fuchsia-300), var(--base-creatif-grape-600)); } /* ============================================================ 2. ESPACES — Thème « Créatif » Flexible, ni compact ni très aéré : l'énergie se joue dans la couleur et le mouvement, pas dans le silence. ============================================================ */ [data-theme-style="creatif"] { --space-inline-gap: var(--base-space-2\.5); --space-stack-gap: var(--base-space-4); --space-group-gap: var(--base-space-6); --space-section-gap: var(--base-space-16); --space-page-padding: var(--base-space-6); --space-card-padding: var(--base-space-6); --space-dialog-padding: var(--base-space-8); --space-fieldset-padding: var(--base-space-6); --space-demo-padding: var(--base-space-6); --space-button-padding-x: var(--base-space-6); --space-button-padding-y: var(--base-space-3); --space-button-padding-x-sm: var(--base-space-4); --space-button-padding-y-sm: var(--base-space-2); --space-button-padding-x-lg: var(--base-space-8); --space-button-padding-y-lg: var(--base-space-4); --space-input-padding-x: var(--base-space-4); --space-input-padding-y: var(--base-space-2\.5); --space-badge-padding-x: var(--base-space-3); --space-badge-padding-y: var(--base-space-1); } /* ============================================================ 3. LAYOUT PRINCIPAL — Thème « Créatif » Tout est arrondi façon autocollant, boutons en pilule. ============================================================ */ [data-theme-style="creatif"] { --layout-content-width: var(--base-width-xl); --layout-radius-card: var(--base-radius-2xl); --layout-radius-button: var(--base-radius-full); --layout-radius-button-sm: var(--base-radius-full); --layout-radius-button-lg: var(--base-radius-full); --layout-radius-input: var(--base-radius-xl); --layout-radius-dialog: var(--base-radius-3xl); --layout-radius-checkbox: var(--base-radius-md); --layout-avatar-size: var(--base-space-10); --layout-avatar-size-sm: var(--base-space-8); --layout-avatar-size-lg: var(--base-space-14); } /* ============================================================ 4. OMBRES — Thème « Créatif » Expressives et colorées plutôt que neutres : le halo reprend la couleur de marque, pas un simple gris. ============================================================ */ /* Seul endroit du design system où la bascule clair/sombre ne peut pas passer par light-dark() : en mode sombre, la deuxième couche n'est pas une ombre portée mais un HALO fuchsia (0 0 20px au lieu de 0 2px 4px). La géométrie change, or light-dark() ne prend que des couleurs. Les trois blocs ci-dessous sont donc la dernière duplication clair/sombre du projet ; `npm run lint:contrast` vérifie qu'ils restent en miroir. */ [data-theme-style="creatif"][data-theme="light"] { --shadow-elev-low: var(--base-creatif-elev-low); --shadow-elev-mid: var(--base-creatif-elev-mid); --shadow-elev-high: var(--base-creatif-elev-high); } [data-theme-style="creatif"][data-theme="dark"] { --shadow-elev-low: var(--base-creatif-elev-low-dark); --shadow-elev-mid: var(--base-creatif-elev-mid-dark); --shadow-elev-high: var(--base-creatif-elev-high-dark); } @media (prefers-color-scheme: dark) { [data-theme-style="creatif"]:not([data-theme]) { --shadow-elev-low: var(--base-creatif-elev-low-dark); --shadow-elev-mid: var(--base-creatif-elev-mid-dark); --shadow-elev-high: var(--base-creatif-elev-high-dark); } } [data-theme-style="creatif"] { --shadow-focus-ring: 0 0 0 4px light-dark( color-mix(in srgb, var(--base-creatif-fuchsia-500) 22%, transparent), color-mix(in srgb, var(--base-creatif-fuchsia-400) 30%, transparent)); } [data-theme-style="creatif"] { --shadow-button: var(--shadow-elev-low); --shadow-button-hover: var(--shadow-elev-mid); --shadow-card-elevated: var(--shadow-elev-mid); --shadow-card-interactive: var(--shadow-elev-low); --shadow-card-interactive-hover: var(--shadow-elev-high); --shadow-glow-accent: 0 0 28px color-mix(in srgb, var(--base-creatif-fuchsia-500) 50%, transparent), 0 0 55px color-mix(in srgb, var(--base-creatif-grape-500) 25%, transparent); --shadow-gradient-card: var(--shadow-elev-mid); --shadow-gradient-card-hover: var(--shadow-elev-high); } /* ============================================================ 5. ANIMATIONS — Thème « Créatif » Vif et rebondissant : ça réagit tout de suite, avec du ressort. ============================================================ */ [data-theme-style="creatif"] { --motion-fast: 120ms var(--base-ease-bounce); --motion-normal: var(--base-duration-fast) var(--base-ease-bounce); --motion-slow: var(--base-duration-normal) var(--base-ease-bounce); --motion-spring: var(--base-duration-normal) var(--base-ease-bounce); --motion-float-distance: 10px; --motion-float-duration: 2.2s; --motion-glow-duration: 1s; --motion-gradient-duration: 4s; --motion-shimmer-duration: 1.1s; } /* ============================================================ 6. TYPOGRAPHIE — Thème « Créatif » Titres arrondis et pleins, interface arrondie assortie. ============================================================ */ [data-theme-style="creatif"] { --font-heading: var(--base-font-rounded); --font-body: var(--base-font-humanist); --font-ui: var(--base-font-rounded); --font-code: var(--base-font-mono-code); --weight-display: var(--base-weight-black); --weight-heading: var(--base-weight-extra); --weight-body: var(--base-weight-regular); --weight-strong: var(--base-weight-bold); --weight-ui: var(--base-weight-bold); --leading-heading: var(--base-leading-tight); --leading-body: var(--base-leading-normal); --leading-paragraph: var(--base-leading-relaxed); --tracking-display: var(--base-tracking-tight); --tracking-heading: var(--base-tracking-normal); --tracking-ui: var(--base-tracking-normal); }