/* * THÈMES VISUELS (« SKINS ») — la matière de l'interface * ═══════════════════════════════════════════════════════════════════════════ * * Registre : `app/data/skins.yml`. Polices : `themes/skin_fonts.css`. * * ── CE QU'UN THÈME EST ──────────────────────────────────────────────────── * * Un thème ne change PAS la couleur d'accent. L'accent (`data-accent`) reste * le choix de l'utilisateur, et les deux axes se combinent : Papier + teal, * Console + gold, Pastel + coral. Un thème change la MATIÈRE — polices, * rayons, ombres, densité, fonds — c'est-à-dire tout ce qui fait qu'une * interface « a l'air » d'être un carnet, d'un terminal ou d'une enseigne. * * Concrètement, un thème ne fait que redéfinir des tokens déjà consommés * partout dans le design system. Aucune vue, aucun composant n'a besoin de * savoir qu'un thème existe. * * ── LE CONTRAT : CE QU'UN THÈME PEUT TOUCHER ────────────────────────────── * * AUTORISÉ --font-heading/-primary/-display · --radius-* · --r-tile * --shadow-* · --elevation-* · --bg-* · --text-* · --border-* * --gap-bento · --track · --grid · --hero1/2 · --shadow-color * * INTERDIT --accent-* (c'est le réglage voisin, pas le nôtre) * --color-* (palette sémantique : rouge = erreur dans TOUS * les thèmes, sinon le sens des couleurs bouge) * --z-* · --space-* · --header-height · --sidebar-width * (structure : un thème qui déplace la mise en page * casserait le responsive testé par ailleurs) * * ── SPÉCIFICITÉ : POURQUOI CES SÉLECTEURS ───────────────────────────────── * * `tokens/design_tokens.css` déclare le mode sombre sur * `html.dark, [data-theme="dark"], [data-mode="dark"]`, soit (0,1,0). * Un bloc `[data-skin="x"]` vaut aussi (0,1,0) : chargé après, il gagnerait * AUSSI en mode sombre et un thème clair écraserait le sombre. * * D'où la discipline, sans exception : * clair → [data-skin="x"]:not([data-mode="dark"]) (0,2,0) * sombre → [data-skin="x"][data-mode="dark"] (0,2,0) * Deux sélecteurs de même poids, mutuellement exclusifs, tous deux au-dessus * des blocs de base. `theme_helper.rb` garantit que `data-mode` est TOUJOURS * présent sur (helper unique, verrouillé par un spec) — l'exclusion * mutuelle tient donc réellement. * * Exception assumée : `neon` n'a qu'un bloc, sans discriminant de mode, parce * qu'il force le sombre (`forces_mode: dark` dans le registre). S'il recevait * quand même `data-mode="light"` — préférence désynchronisée, vieil onglet — * il resterait néon plutôt que de rendre un hybride illisible. * * ⚠️ `design:check_colors` interdit les hex bruts, sauf sur une ligne dont la * version sans indentation commence par `--`. Toute couleur d'un thème doit * donc être une DÉCLARATION DE VARIABLE. Jamais de `border: 1px solid #333`. */ /* ══════════════════════════════════════════════════════════════════════════ * PAPIER — éditorial. Aucune ombre : la hiérarchie vient des filets et du * contraste de fond. C'est le thème le plus exigeant en contraste, puisqu'il * n'a rien d'autre pour séparer deux surfaces adjacentes. * ══════════════════════════════════════════════════════════════════════════ */ [data-skin="papier"]:not([data-mode="dark"]) { --font-heading: 'DM Serif Display', 'Fraunces', Georgia, 'Times New Roman', serif; --font-display: 'DM Serif Display', 'Fraunces', Georgia, serif; --font-primary: 'Libre Franklin', 'Inter', system-ui, sans-serif; --bg-primary: #F1EBDF; --bg-surface: #FBF7EF; --bg-secondary: #FBF7EF; --bg-surface-hover: #F1EBDF; --bg-tertiary: #EDE5D5; --bg-accent: #E7DDC9; --bg-sidebar: #EDE5D5; --text-primary: #211E18; --text-secondary: #464036; --text-muted: #6B6355; --text-tertiary: #9A9284; /* Bordures nettement plus marquées qu'ailleurs : sans ombre, le filet est le SEUL séparateur. Une bordure à .09 comme le thème par défaut rendrait les cartes flottantes indiscernables du fond. */ --border-default: rgba(33,30,24,.20); --border: rgba(33,30,24,.20); --border-light: rgba(33,30,24,.11); --border-strong: rgba(33,30,24,.38); --radius-sm: 3px; --radius-md: 4px; --radius-lg: 5px; --radius-xl: 6px; --radius-2xl: 8px; --r-tile: 4px; --r-sm: 3px; --r-md: 4px; --r-lg: 5px; --r-xl: 6px; --gap-bento: 20px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-inner: none; --elevation-0: none; --elevation-1: none; --elevation-2: none; --elevation-3: none; --elevation-4: none; --shadow-color: rgba(33,30,24,.16); --hero1: #F4EADA; --hero2: var(--bg-surface); --track: rgba(33,30,24,.12); --grid: rgba(33,30,24,.10); } [data-skin="papier"][data-mode="dark"] { --font-heading: 'DM Serif Display', 'Fraunces', Georgia, 'Times New Roman', serif; --font-display: 'DM Serif Display', 'Fraunces', Georgia, serif; --font-primary: 'Libre Franklin', 'Inter', system-ui, sans-serif; --bg-primary: #16140F; --bg-surface: #1E1B14; --bg-secondary: #1E1B14; --bg-surface-hover: #262218; --bg-tertiary: #262218; --bg-accent: #2F2A1E; --bg-sidebar: #121009; --text-primary: #EFE8D8; --text-secondary: #CDC4B0; --text-muted: #948B78; --text-tertiary: #6B6353; --border-default: rgba(239,232,216,.18); --border: rgba(239,232,216,.18); --border-light: rgba(239,232,216,.10); --border-strong: rgba(239,232,216,.34); --radius-sm: 3px; --radius-md: 4px; --radius-lg: 5px; --radius-xl: 6px; --radius-2xl: 8px; --r-tile: 4px; --r-sm: 3px; --r-md: 4px; --r-lg: 5px; --r-xl: 6px; --gap-bento: 20px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-inner: none; --elevation-0: none; --elevation-1: none; --elevation-2: none; --elevation-3: none; --elevation-4: none; --hero1: #241F14; --hero2: var(--bg-surface); --track: rgba(239,232,216,.14); --grid: rgba(239,232,216,.10); } /* ══════════════════════════════════════════════════════════════════════════ * CONSOLE — monospace, angles vifs, zéro ombre, zéro dégradé. * Le seul thème où `--border-width-base` passe à 2px : les filets épais sont * l'essentiel de son vocabulaire. * ══════════════════════════════════════════════════════════════════════════ */ [data-skin="console"]:not([data-mode="dark"]) { --font-heading: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --font-display: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --font-primary: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --bg-primary: #E3E7EC; --bg-surface: #F1F4F7; --bg-secondary: #F1F4F7; --bg-surface-hover: #E3E7EC; --bg-tertiary: #D7DCE3; --bg-accent: #CBD2DB; --bg-sidebar: #D2D8E0; --text-primary: #0E1319; --text-secondary: #2C343E; --text-muted: #5A6472; --text-tertiary: #8A929E; --border-default: rgba(14,19,25,.30); --border: rgba(14,19,25,.30); --border-light: rgba(14,19,25,.16); --border-strong: rgba(14,19,25,.55); --border-width-base: 2px; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --r-tile: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --gap-bento: 12px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-inner: none; --elevation-0: none; --elevation-1: none; --elevation-2: none; --elevation-3: none; --elevation-4: none; --hero1: #DDE3EA; --hero2: var(--bg-surface); --track: rgba(14,19,25,.16); --grid: rgba(14,19,25,.14); } [data-skin="console"][data-mode="dark"] { --font-heading: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --font-display: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --font-primary: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --bg-primary: #080B0F; --bg-surface: #0F141A; --bg-secondary: #0F141A; --bg-surface-hover: #161D25; --bg-tertiary: #161D25; --bg-accent: #1E2732; --bg-sidebar: #05080B; --text-primary: #C6D2DE; --text-secondary: #9FADBC; --text-muted: #6D7B8B; --text-tertiary: #4A5665; --border-default: rgba(198,210,222,.26); --border: rgba(198,210,222,.26); --border-light: rgba(198,210,222,.13); --border-strong: rgba(198,210,222,.48); --border-width-base: 2px; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --r-tile: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --gap-bento: 12px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-inner: none; --elevation-0: none; --elevation-1: none; --elevation-2: none; --elevation-3: none; --elevation-4: none; --hero1: #101820; --hero2: var(--bg-surface); --track: rgba(198,210,222,.18); --grid: rgba(198,210,222,.12); } /* ══════════════════════════════════════════════════════════════════════════ * PASTEL — aéré et arrondi. Ombres douces et légèrement teintées, jamais * grises : une ombre neutre sur un fond lilas paraît sale. * ══════════════════════════════════════════════════════════════════════════ */ [data-skin="pastel"]:not([data-mode="dark"]) { --font-heading: 'Sen', 'SN Pro', system-ui, sans-serif; --font-display: 'Sen', 'SN Pro', system-ui, sans-serif; --font-primary: 'Cantarell', 'Inter', system-ui, sans-serif; --bg-primary: #F6F1FA; --bg-surface: #FDFBFE; --bg-secondary: #FDFBFE; --bg-surface-hover: #F3ECF8; --bg-tertiary: #EEE5F5; --bg-accent: #E7DBF1; --bg-sidebar: #F1E9F7; --text-primary: #2C2237; --text-secondary: #554863; --text-muted: #7C6F8A; --text-tertiary: #A79BB4; --border-default: rgba(44,34,55,.11); --border: rgba(44,34,55,.11); --border-light: rgba(44,34,55,.06); --border-strong: rgba(44,34,55,.22); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --r-tile: 24px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --gap-bento: 22px; --shadow-xs: 0 1px 3px rgba(126,87,164,.07); --shadow-sm: 0 2px 8px rgba(126,87,164,.09); --shadow-md: 0 4px 16px rgba(126,87,164,.11); --shadow-lg: 0 8px 28px rgba(126,87,164,.13); --shadow-xl: 0 16px 48px rgba(126,87,164,.16); --shadow-color: rgba(126,87,164,.16); --hero1: #F7E9F4; --hero2: var(--bg-surface); --track: rgba(44,34,55,.09); --grid: rgba(44,34,55,.07); } [data-skin="pastel"][data-mode="dark"] { --font-heading: 'Sen', 'SN Pro', system-ui, sans-serif; --font-display: 'Sen', 'SN Pro', system-ui, sans-serif; --font-primary: 'Cantarell', 'Inter', system-ui, sans-serif; --bg-primary: #16121E; --bg-surface: #1F1929; --bg-secondary: #1F1929; --bg-surface-hover: #282034; --bg-tertiary: #282034; --bg-accent: #322843; --bg-sidebar: #120F19; --text-primary: #F1EAF8; --text-secondary: #CDC1DC; --text-muted: #9689A6; --text-tertiary: #6E6280; --border-default: rgba(241,234,248,.12); --border: rgba(241,234,248,.12); --border-light: rgba(241,234,248,.06); --border-strong: rgba(241,234,248,.26); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --r-tile: 24px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --gap-bento: 22px; --shadow-xs: 0 1px 3px rgba(0,0,0,.30); --shadow-sm: 0 2px 10px rgba(0,0,0,.36); --shadow-md: 0 4px 18px rgba(0,0,0,.42); --shadow-lg: 0 8px 32px rgba(0,0,0,.48); --shadow-xl: 0 16px 52px rgba(0,0,0,.56); --hero1: #2A1E33; --hero2: var(--bg-surface); --track: rgba(241,234,248,.11); --grid: rgba(241,234,248,.08); } /* ══════════════════════════════════════════════════════════════════════════ * NUIT NÉON — sombre en toutes circonstances (`forces_mode: dark`). * Un seul bloc, sans discriminant de mode : voir la note de spécificité en * tête de fichier. * * ⚠️ `--bg-surface` reste OPAQUE. La tentation du verre dépoli est de rendre * les surfaces translucides globalement — mais `--bg-surface` est le fond des * en-têtes collants et des menus déroulants : translucide, le texte du dessous * défile visiblement à travers et devient illisible. La translucidité est donc * réservée à `--glass-*`, appliquée aux seules surfaces de chrome (voir plus * bas), et jamais aux cartes de liste — un `backdrop-filter` sur cinquante * cartes ruine le scroll. * ══════════════════════════════════════════════════════════════════════════ */ [data-skin="neon"] { --font-heading: 'SN Pro', 'Inter', system-ui, sans-serif; --font-display: 'SN Pro', 'Inter', system-ui, sans-serif; --font-primary: 'Inter', 'Cantarell', system-ui, sans-serif; --tracking-tight: -0.03em; --bg-primary: #06060C; --bg-surface: #12121F; --bg-secondary: #12121F; --bg-surface-hover: #1A1A2C; --bg-tertiary: #1A1A2C; --bg-accent: #232338; --bg-sidebar: #08080F; --bg-dropdown: #16162A; --text-primary: #ECECFF; --text-secondary: #B6B6DC; --text-muted: #8686AE; --text-tertiary: #5E5E80; --border-default: rgba(150,150,255,.20); --border: rgba(150,150,255,.20); --border-light: rgba(150,150,255,.10); --border-strong: rgba(150,150,255,.44); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 26px; --radius-2xl: 32px; --r-tile: 26px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --gap-bento: 18px; /* Deux couches : une ombre portée franche pour détacher du fond noir, et un halo teinté par l'accent courant — c'est lui qui fait le « néon », et il suit donc la couleur choisie par l'utilisateur. */ --shadow-xs: 0 1px 3px rgba(0,0,0,.60); --shadow-sm: 0 2px 10px rgba(0,0,0,.62), 0 0 10px var(--accent-10); --shadow-md: 0 4px 20px rgba(0,0,0,.66), 0 0 18px var(--accent-10); --shadow-lg: 0 10px 40px rgba(0,0,0,.70), 0 0 28px var(--accent-20); --shadow-xl: 0 18px 64px rgba(0,0,0,.74), 0 0 40px var(--accent-20); --shadow-color: rgba(0,0,0,.70); --hero1: #1A1030; --hero2: var(--bg-surface); --track: rgba(150,150,255,.14); --grid: rgba(150,150,255,.10); --glass-bg: rgba(18,18,31,.72); --glass-blur: blur(14px); } /* Verre dépoli — chrome uniquement (barre latérale, en-tête, menus, modales). Volontairement PAS les cartes : `backdrop-filter` force le navigateur à recomposer la zone sous l'élément à chaque image, et multiplié par une liste il transforme un scroll fluide en diaporama. */ [data-skin="neon"] :is(.sidebar, .app-sidebar, .global-header, .app-header, .fz-modal, .modal-panel, .dropdown-menu, .fz-dropdown) { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* Le halo suit l'accent : une bordure lumineuse au survol des surfaces interactives, jamais sur du texte statique. */ [data-skin="neon"] :is(.card, .fz-tile, .btn):hover { border-color: var(--border-strong); } @media (prefers-reduced-motion: reduce) { [data-skin="neon"] :is(.card, .fz-tile, .btn) { transition: none; } }