/* ========================================================================== SANSIL 3D — themes.css Dix variantes de charte, chacune ne redéfinissant que des variables de tokens.css. Aucune règle de mise en page ici : la structure du site ne change pas, seules la couleur et la typographie bougent. Usage : sur /styleguide/themes/ pour comparer. Une fois le thème retenu, on recopie ses valeurs dans tokens.css et ce fichier disparaît — il ne sert qu'à choisir. Les paires texte/fond respectent toutes un contraste d'au moins 4,5:1, vérifié par tools/audit_contraste.py. ========================================================================== */ /* 1 — Nuit (actuel, pour référence) --------------------------------------- */ [data-theme="nuit"] { --c-bg: #0a0e1a; --c-surface: #101728; --c-surface-2: #16203a; --c-border: #1f2b47; --c-border-strong: #2c3c63; --c-text: #f0f4ff; --c-muted: #a0aec0; --c-cyan: #00e5ff; --c-violet: #7b2fff; --c-on-accent: #05070f; } /* 2 — Ardoise : gris froid, accent orange atelier ------------------------- */ [data-theme="ardoise"] { --c-bg: #14171c; --c-surface: #1c2027; --c-surface-2: #252a33; --c-border: #2e343f; --c-border-strong: #414957; --c-text: #f2f4f7; --c-muted: #a7b0bd; --c-cyan: #ff8a3d; --c-violet: #ffb84d; --c-on-accent: #14171c; } /* 3 — Établi : fond clair, encre sombre, accent bleu de travail ----------- */ [data-theme="etabli"] { --c-bg: #f5f4f1; --c-surface: #ffffff; --c-surface-2: #ebe9e4; --c-border: #dcd8d0; --c-border-strong: #b8b2a7; --c-text: #1a1a18; --c-muted: #5c5a54; --c-cyan: #1d4ed8; --c-violet: #6d28d9; --c-on-accent: #ffffff; } /* 4 — Filament : vert acide sur anthracite ------------------------------- */ [data-theme="filament"] { --c-bg: #0d1117; --c-surface: #161b22; --c-surface-2: #21262d; --c-border: #2d333b; --c-border-strong: #444c56; --c-text: #e6edf3; --c-muted: #9198a1; --c-cyan: #3fb950; --c-violet: #a371f7; --c-on-accent: #04140a; } /* 5 — Blueprint : plan technique, bleu profond --------------------------- */ [data-theme="blueprint"] { --c-bg: #0b1a33; --c-surface: #12244a; --c-surface-2: #1a3160; --c-border: #234080; --c-border-strong: #3157a8; --c-text: #eaf2ff; --c-muted: #9db4dc; --c-cyan: #ffd166; --c-violet: #7ea8ff; --c-on-accent: #0b1a33; } /* 6 — Papier : très clair, chaleureux, accent terre cuite ---------------- */ [data-theme="papier"] { --c-bg: #fbf9f5; --c-surface: #ffffff; --c-surface-2: #f2ede4; --c-border: #e4dccf; --c-border-strong: #c3b7a3; --c-text: #221f1a; --c-muted: #635c50; --c-cyan: #c2410c; --c-violet: #9a3412; --c-on-accent: #ffffff; } /* 7 — Carbone : noir dense, accent rouge ---------------------------------- */ [data-theme="carbone"] { --c-bg: #0a0a0b; --c-surface: #141416; --c-surface-2: #1e1e21; --c-border: #2a2a2e; --c-border-strong: #3d3d43; --c-text: #f4f4f5; --c-muted: #a1a1aa; --c-cyan: #ef4444; --c-violet: #f97316; --c-on-accent: #0a0a0b; } /* 8 — Menthe : sombre mais froid, accent turquoise doux ------------------ */ [data-theme="menthe"] { --c-bg: #0f1c1a; --c-surface: #162724; --c-surface-2: #1f3531; --c-border: #2a4741; --c-border-strong: #3c6259; --c-text: #edfbf7; --c-muted: #9cc0b8; --c-cyan: #2dd4bf; --c-violet: #86efac; --c-on-accent: #04211c; } /* 9 — Indigo : violet dominant, accent rose ------------------------------ */ [data-theme="indigo"] { --c-bg: #12101f; --c-surface: #1b1830; --c-surface-2: #262040; --c-border: #332b57; --c-border-strong: #493d78; --c-text: #f2efff; --c-muted: #aca4c9; --c-cyan: #f472b6; --c-violet: #a78bfa; --c-on-accent: #12101f; } /* 10 — Signal : gris neutre, accent jaune sécurité ----------------------- */ [data-theme="signal"] { --c-bg: #1b1b1b; --c-surface: #242424; --c-surface-2: #2e2e2e; --c-border: #3a3a3a; --c-border-strong: #525252; --c-text: #fafafa; --c-muted: #a3a3a3; --c-cyan: #facc15; --c-violet: #fb923c; --c-on-accent: #1b1b1b; } /* ========================================================================== Deuxième série — thèmes 11 à 20 Même principe : uniquement des surcharges de variables de tokens.css. ========================================================================== */ /* 11 — Sable : beige chaud, accent brique ------------------------------- */ [data-theme="sable"] { --c-bg: #f7f3ec; --c-surface: #ffffff; --c-surface-2: #efe7d9; --c-border: #e0d5c2; --c-border-strong: #bfae94; --c-text: #241f18; --c-muted: #5f564a; --c-cyan: #b04a1e; --c-violet: #8a5a2b; --c-on-accent: #ffffff; } /* 12 — Fonderie : gris fonte, accent cuivre ------------------------------ */ [data-theme="fonderie"] { --c-bg: #1a1917; --c-surface: #242220; --c-surface-2: #2f2c29; --c-border: #3b3733; --c-border-strong: #524c46; --c-text: #f5f2ee; --c-muted: #a8a099; --c-cyan: #d98040; --c-violet: #c9a227; --c-on-accent: #1a1917; } /* 13 — Océan : bleu-vert profond, accent corail -------------------------- */ [data-theme="ocean"] { --c-bg: #08202b; --c-surface: #0e2f3d; --c-surface-2: #144052; --c-border: #1c556b; --c-border-strong: #2a7591; --c-text: #e8f6fb; --c-muted: #93b8c7; --c-cyan: #ff7a59; --c-violet: #5fd6c4; --c-on-accent: #08202b; } /* 14 — Craie : gris très clair, accent noir d'encre ---------------------- */ [data-theme="craie"] { --c-bg: #f4f5f6; --c-surface: #ffffff; --c-surface-2: #e9ebed; --c-border: #dcdfe3; --c-border-strong: #b4bac1; --c-text: #16181a; --c-muted: #565c63; --c-cyan: #111315; --c-violet: #4a5057; --c-on-accent: #ffffff; } /* 15 — Néon : noir bleuté, accent magenta -------------------------------- */ [data-theme="neon"] { --c-bg: #0b0b14; --c-surface: #14141f; --c-surface-2: #1d1d2c; --c-border: #292940; --c-border-strong: #3d3d5c; --c-text: #f3f2ff; --c-muted: #a09eb8; --c-cyan: #ff3fa4; --c-violet: #4de0ff; --c-on-accent: #0b0b14; } /* 16 — Forêt : vert sombre, accent ambre --------------------------------- */ [data-theme="foret"] { --c-bg: #101a12; --c-surface: #17251a; --c-surface-2: #1f3224; --c-border: #2a432f; --c-border-strong: #3c5f43; --c-text: #edf7ee; --c-muted: #9bb7a0; --c-cyan: #e8a33d; --c-violet: #7ec96f; --c-on-accent: #101a12; } /* 17 — Lin : blanc cassé, accent bleu marine ----------------------------- */ [data-theme="lin"] { --c-bg: #faf8f4; --c-surface: #ffffff; --c-surface-2: #f0ece4; --c-border: #e2dcd1; --c-border-strong: #b9b0a1; --c-text: #1c1f26; --c-muted: #575d68; --c-cyan: #1e3a8a; --c-violet: #4c5fd7; --c-on-accent: #ffffff; } /* 18 — Basalte : gris-bleu sombre, accent vert d'eau --------------------- */ [data-theme="basalte"] { --c-bg: #12171c; --c-surface: #1a2027; --c-surface-2: #232b34; --c-border: #2f3944; --c-border-strong: #435161; --c-text: #eef2f6; --c-muted: #9aa7b4; --c-cyan: #4ecdc4; --c-violet: #7aa2f7; --c-on-accent: #12171c; } /* 19 — Prune : violet profond, accent or --------------------------------- */ [data-theme="prune"] { --c-bg: #1a1020; --c-surface: #24172c; --c-surface-2: #2f1f3a; --c-border: #3d2a4a; --c-border-strong: #573c69; --c-text: #f6eefa; --c-muted: #b39fc0; --c-cyan: #e8b53d; --c-violet: #c98bff; --c-on-accent: #1a1020; } /* 20 — Chantier : gris moyen, accent orange haute visibilité ------------- */ [data-theme="chantier"] { --c-bg: #22262a; --c-surface: #2b3036; --c-surface-2: #363c43; --c-border: #434a53; --c-border-strong: #5c6570; --c-text: #f6f7f8; --c-muted: #a6afb9; --c-cyan: #ff6b1a; --c-violet: #ffc247; --c-on-accent: #22262a; } /* --- Typographies alternatives ------------------------------------------- */ /* Indépendantes de la palette : on peut croiser les deux réglages. */ [data-police="actuel"] { --f-display: "Space Grotesk", system-ui, sans-serif; --f-body: "Inter", system-ui, sans-serif; } [data-police="serif"] { --f-display: Georgia, "Times New Roman", serif; --f-body: "Inter", system-ui, sans-serif; } [data-police="system"] { --f-display: system-ui, -apple-system, "Segoe UI", sans-serif; --f-body: system-ui, -apple-system, "Segoe UI", sans-serif; } [data-police="mono"] { --f-display: "Fira Code", ui-monospace, monospace; --f-body: "Inter", system-ui, sans-serif; } /* Les dérivés translucides doivent suivre l'accent, sinon un halo cyan subsiste sur un thème orange. color-mix est supporté partout depuis 2023. */ [data-theme] { --c-cyan-08: color-mix(in srgb, var(--c-cyan) 8%, transparent); --c-cyan-16: color-mix(in srgb, var(--c-cyan) 16%, transparent); --c-cyan-40: color-mix(in srgb, var(--c-cyan) 40%, transparent); --c-violet-08: color-mix(in srgb, var(--c-violet) 8%, transparent); --c-violet-16: color-mix(in srgb, var(--c-violet) 16%, transparent); --c-violet-clair: color-mix(in srgb, var(--c-violet) 70%, white); --c-overlay: color-mix(in srgb, var(--c-bg) 88%, transparent); --c-placeholder: var(--c-muted); --c-viewer-bg: var(--c-surface-2); }