/* ============================================================ DESIGN SYSTEM v6 — THÈME « Solaire » ============================================================ Identité chaude, arrondie, généreuse et « rebondissante ». Couche de SURCHARGE, chargée après tokens.css + components.css. N'est active que si . Sans cet attribut, le thème « Moderne » de tokens.css reste inchangé — ce fichier peut même être retiré du sans rien casser. Pour créer VOTRE thème : dupliquez ce fichier, changez data-theme-style="solaire" en data-theme-style="votre-nom" (et mettez à jour index.html), puis ne redéfinissez QUE les familles qui vous intéressent — toute famille non redéfinie retombe sur « Moderne ». Voir aussi theme-luxe.css, theme-creatif.css et theme-puissant.css pour d'autres exemples. ============================================================ */ /* ============================================================ 0. PRIMITIVES DE MARQUE — propres à ce thème Un thème personnalisé n'est pas obligé de rester dans la palette « Moderne » : il peut apporter ses propres couleurs brutes, tant que les composants ne les consomment que via les tokens sémantiques ci-dessous. ============================================================ */ :root { /* Argile — neutres chauds (remplace le Slate de « Moderne »). 975 : cran extrême pour le fond « sunken » du mode sombre ; cream : blanc chaud des voiles translucides (overlay/glass). */ --base-solaire-clay-50: #fdf8f3; --base-solaire-clay-100: #f7ece1; --base-solaire-clay-200: #eed9c4; --base-solaire-clay-300: #e0bd97; --base-solaire-clay-400: #cf9a68; --base-solaire-clay-500: #ba7a42; --base-solaire-clay-600: #9c6134; --base-solaire-clay-700: #7d4c2c; --base-solaire-clay-800: #5c3822; --base-solaire-clay-900: #3d2517; --base-solaire-clay-950: #241609; --base-solaire-clay-975: #1a0f06; --base-solaire-cream: #fffcf8; /* Corail — couleur d'action / marque (remplace l'Indigo) */ --base-solaire-coral-50: #fff4ed; --base-solaire-coral-100: #ffe6d5; --base-solaire-coral-200: #ffcbac; --base-solaire-coral-300: #ffab78; --base-solaire-coral-400: #ff8a4c; --base-solaire-coral-500: #f9682c; --base-solaire-coral-600: #e04f18; --base-solaire-coral-700: #b93d13; --base-solaire-coral-800: #933116; --base-solaire-coral-900: #772a15; /* Dégradé de marque et fond d'ambiance */ --base-solaire-gradient: linear-gradient(135deg, var(--base-solaire-coral-400), var(--base-warning-500)); --base-solaire-mesh: radial-gradient(at 20% 80%, var(--base-solaire-coral-200) 0, transparent 50%), radial-gradient(at 80% 20%, var(--base-warning-200) 0, transparent 50%), radial-gradient(at 50% 50%, var(--base-solaire-clay-200) 0, transparent 70%); /* Piles d'élévation teintées chaudes — primitives brutes, consommées par la famille 4 ci-dessous. La géométrie est la même dans les deux modes : seule la TEINTE bascule (light-dark() ne prend que des couleurs, jamais une pile d'ombres entière). */ --base-solaire-tint-1: light-dark(hsl(20 60% 30%/0.12), hsl(20 70% 3%/0.4)); --base-solaire-tint-2: light-dark(hsl(20 60% 30%/0.14), hsl(20 70% 3%/0.45)); --base-solaire-tint-3: light-dark(hsl(20 60% 30%/0.18), hsl(20 70% 3%/0.5)); --base-solaire-tint-4: light-dark(hsl(20 60% 30%/0.22), hsl(20 70% 3%/0.65)); --base-solaire-elev-low: 0.5px 1px 1.4px var(--base-solaire-tint-1), 0.8px 1.6px 2px var(--base-solaire-tint-1); --base-solaire-elev-mid: 0.5px 1px 1.4px var(--base-solaire-tint-2), 1.6px 3.2px 4px var(--base-solaire-tint-2), 4px 8px 10px var(--base-solaire-tint-2); --base-solaire-elev-high: 0.5px 1px 1.4px var(--base-solaire-tint-1), 3px 6px 7.4px var(--base-solaire-tint-3), 10px 20px 25px var(--base-solaire-tint-4); } /* ============================================================ 1. COULEURS — Thème « Solaire » Les statuts (succès/alerte/danger/info) restent universels : seules les couleurs de marque (surfaces/texte/action) changent. ============================================================ */ [data-theme-style="solaire"] { --surface-base: light-dark(var(--base-solaire-clay-50), var(--base-solaire-clay-950)); --surface-raised: light-dark(var(--base-neutral-0), var(--base-solaire-clay-900)); --surface-sunken: light-dark(var(--base-solaire-clay-100), var(--base-solaire-clay-975)); --surface-overlay: light-dark(color-mix(in srgb, var(--base-solaire-cream) 88%, transparent), color-mix(in srgb, var(--base-solaire-clay-950) 90%, transparent)); --surface-glass: light-dark(color-mix(in srgb, var(--base-solaire-cream) 65%, transparent), color-mix(in srgb, var(--base-solaire-clay-950) 65%, transparent)); --surface-inverse: light-dark(var(--base-solaire-clay-900), var(--base-solaire-clay-100)); --text: light-dark(var(--base-solaire-clay-900), var(--base-solaire-clay-50)); --text-secondary: light-dark(var(--base-solaire-clay-700), var(--base-solaire-clay-300)); --text-tertiary: light-dark(var(--base-solaire-clay-600), var(--base-solaire-clay-400)); --text-inverse: light-dark(var(--base-solaire-clay-50), var(--base-solaire-clay-900)); /* Le mode sombre pose un corail vif, sur lequel c'est le texte SOMBRE qui est lisible (7,2:1) là où le blanc plafonne à 3:1 ; le mode clair, dont l'action est un corail profond, garde du blanc. */ --text-on-action: light-dark(var(--base-neutral-0), var(--base-solaire-clay-975)); --text-link: light-dark(var(--base-solaire-coral-700), var(--base-solaire-coral-400)); --text-link-hover: light-dark(var(--base-solaire-coral-800), var(--base-solaire-coral-300)); --text-code: light-dark(var(--base-solaire-coral-700), var(--base-solaire-coral-300)); --text-code-accent: light-dark(var(--base-warning-600), var(--base-warning-400)); --text-marker: var(--base-solaire-coral-400); --border: light-dark(var(--base-solaire-clay-200), var(--base-solaire-clay-800)); --border-muted: light-dark(var(--base-solaire-clay-100), color-mix(in srgb, var(--base-solaire-clay-100) 8%, transparent)); --border-strong: light-dark(var(--base-solaire-clay-300), var(--base-solaire-clay-700)); --border-field: light-dark(var(--base-solaire-clay-500), var(--base-solaire-clay-600)); --border-focus: light-dark(var(--base-solaire-coral-600), var(--base-solaire-coral-400)); --border-accent: var(--base-solaire-coral-400); --action-primary: light-dark(var(--base-solaire-coral-700), var(--base-solaire-coral-500)); --action-primary-hover: light-dark(var(--base-solaire-coral-800), var(--base-solaire-coral-400)); --action-primary-active: light-dark(var(--base-solaire-coral-900), var(--base-solaire-coral-600)); --action-secondary: light-dark(var(--base-solaire-clay-100), var(--base-solaire-clay-800)); --action-secondary-hover: light-dark(var(--base-solaire-clay-200), var(--base-solaire-clay-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-solaire-coral-100), color-mix(in srgb, var(--base-solaire-coral-500) 15%, transparent)); --status-primary-foreground: light-dark(var(--base-solaire-coral-700), var(--base-solaire-coral-300)); --status-primary-border: transparent; --selection-background: light-dark(var(--base-solaire-coral-200), var(--base-solaire-coral-800)); --selection-foreground: light-dark(var(--base-solaire-coral-900), var(--base-solaire-coral-100)); --brand-gradient: var(--base-solaire-gradient); --brand-mesh: var(--base-solaire-mesh); --scrollbar-track: light-dark(var(--base-solaire-clay-100), var(--base-solaire-clay-900)); --scrollbar-thumb: light-dark(var(--base-solaire-clay-300), var(--base-solaire-clay-700)); --scrollbar-thumb-hover: light-dark(var(--base-solaire-clay-400), var(--base-solaire-clay-600)); } /* ============================================================ 2. ESPACES — Thème « Solaire » Rythme plus généreux et aéré que « Moderne ». ============================================================ */ [data-theme-style="solaire"] { --space-inline-gap: var(--base-space-2\.5); --space-stack-gap: var(--base-space-5); --space-group-gap: var(--base-space-8); --space-section-gap: var(--base-space-24); --space-page-padding: var(--base-space-8); --space-card-padding: var(--base-space-8); --space-dialog-padding: var(--base-space-10); --space-fieldset-padding: var(--base-space-8); --space-demo-padding: var(--base-space-8); --space-button-padding-x: var(--base-space-7); --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-3); --space-badge-padding-x: var(--base-space-3); --space-badge-padding-y: var(--base-space-1); --space-heading-gap-lg: var(--base-space-8); --space-heading-gap-sm: var(--base-space-4); --space-heading-top-gap: var(--base-space-12); } /* ============================================================ 3. LAYOUT PRINCIPAL — Thème « Solaire » Silhouette plus ronde, conteneur plus étroit (lecture cosy). ============================================================ */ [data-theme-style="solaire"] { --layout-content-width: var(--base-width-lg); --layout-content-narrow: var(--base-width-sm); --layout-header-min-height: var(--base-space-20); --layout-radius-card: var(--base-radius-3xl); --layout-radius-button: var(--base-radius-full); --layout-radius-button-sm: var(--base-radius-xl); --layout-radius-button-lg: var(--base-radius-full); --layout-radius-input: var(--base-radius-2xl); --layout-radius-dialog: var(--base-radius-3xl); --layout-avatar-size: var(--base-space-12); --layout-avatar-size-sm: var(--base-space-10); --layout-avatar-size-lg: var(--base-space-16); } /* ============================================================ 4. OMBRES — Thème « Solaire » Ombres teintées chaudes (au lieu de neutres/froides) + halo corail plus marqué. ============================================================ */ [data-theme-style="solaire"] { --shadow-elev-low: var(--base-solaire-elev-low); --shadow-elev-mid: var(--base-solaire-elev-mid); --shadow-elev-high: var(--base-solaire-elev-high); --shadow-focus-ring: 0 0 0 4px light-dark( color-mix(in srgb, var(--base-solaire-coral-500) 18%, transparent), color-mix(in srgb, var(--base-solaire-coral-400) 25%, transparent)); } [data-theme-style="solaire"] { --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 24px color-mix(in srgb, var(--base-solaire-coral-500) 45%, transparent), 0 0 50px color-mix(in srgb, var(--base-solaire-coral-500) 20%, transparent); --shadow-gradient-card: var(--shadow-elev-mid); --shadow-gradient-card-hover: var(--shadow-elev-high); } /* ============================================================ 5. ANIMATIONS — Thème « Solaire » Plus lent, plus « rebondissant » (spring) que « Moderne », pour une sensation chaleureuse plutôt que rapide/efficace. ============================================================ */ [data-theme-style="solaire"] { --motion-fast: var(--base-duration-normal) var(--base-ease-spring); --motion-normal: var(--base-duration-slow) var(--base-ease-spring); --motion-slow: var(--base-duration-slower) var(--base-ease-bounce); --motion-spring: var(--base-duration-slow) var(--base-ease-bounce); --motion-float-distance: 14px; --motion-float-duration: 4.5s; --motion-glow-duration: 1.4s; --motion-gradient-duration: 9s; --motion-shimmer-duration: 2.2s; } /* ============================================================ 6. TYPOGRAPHIE — Thème « Solaire » Voix chaleureuse et accueillante : titres Geometric Humanist (Avenir/Montserrat), corps Humanist, interface arrondie. ============================================================ */ [data-theme-style="solaire"] { --font-heading: var(--base-font-geo-humanist); --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-bold); --weight-body: var(--base-weight-regular); --weight-strong: var(--base-weight-bold); --weight-ui: var(--base-weight-semi); --leading-heading: var(--base-leading-snug); --leading-body: var(--base-leading-relaxed); --leading-paragraph: var(--base-leading-loose); --tracking-display: var(--base-tracking-tight); --tracking-heading: var(--base-tracking-normal); --tracking-ui: var(--base-tracking-normal); }