/** * console/assets/selvix-tokens.css — design tokens Console Selvix (thèmes clair/sombre). * * [selvix-theming 2026-07-09] SOURCE UNIQUE de toute couleur/rayon/ombre consommée par console.css * et les styles inline des pages console — aucune couleur en dur ailleurs (cf. rapport de mission). * ADN visuel du site vitrine Selvix (famille de bleus profond → lumineux, cartes très arrondies, * pastilles d'icônes) SANS le fond étoilé/spatial : la console est un outil de travail, fonds UNIS. * * Deux jeux complets : :root (clair, PAR DÉFAUT) et [data-theme="dark"] (sombre, appliqué sur * par le script anti-flash de layout_top.php, AVANT tout rendu). Un attribut CSS sur le même élément * racine que :root ⇒ cascade normale : le thème sombre ne redéclare QUE ce qui change (couleurs), les * géométries (rayons, ombres, espacements) et les éléments PERMANENTS (sidebar toujours sombre, * badges de sidebar déjà calibrés fond sombre) restent hérités de :root sans duplication. * * Sémantique d'état (✅/⚠️/❌, verdicts comparateur, portillons E53/E54) : contraste WCAG AA (≥4.5:1) * vérifié pour CHAQUE paire texte/fond d'état dans LES DEUX thèmes — voir rapport de mission pour les * ratios chiffrés. La lisibilité d'état prime sur l'esthétique : en cas de conflit avec un bleu de * marque, l'état gagne (jamais l'inverse). */ :root { color-scheme: light; /* Fonds */ --bg: #F8FAFC; --bg-white: #FFFFFF; /* Sidebar — TOUJOURS sombre, dans les deux thèmes (branding permanent, cf. docblock ci-dessus). 3 paliers de texte (jamais dépendants du thème, contrairement à --text/--text-muted/--text-faint qui eux changent) : bright = emphase/hover/actif, text = défaut, dim = items nav au repos. */ --sidebar: #0F172A; --sidebar-hover: #1E293B; --sidebar-active: #1E40AF; --sidebar-text-bright: #FFFFFF; --sidebar-text: #E2E8F0; --sidebar-text-dim: #CBD5E1; --sidebar-border: #334155; /* Texte */ --text: #0F172A; --text-muted: #64748B; --text-faint: #94A3B8; /* Bordures */ --border: #E2E8F0; --border-strong: #CBD5E1; /* Bleus Selvix — du profond (accent) au lumineux (accent-luminous, pastilles/gradients) */ --accent: #1E40AF; --accent-hover: #1D4ED8; --accent-soft: #EFF6FF; --accent-luminous: #3B82F6; /* Couleur de TEXTE à utiliser par-dessus un remplissage plein accent/état (bouton primaire, etc.) — blanc en clair ; voir [data-theme="dark"] pour la raison de son changement en sombre. */ --on-accent: #FFFFFF; /* États — AA vérifié sur leur "soft bg" respectif (texte) ET en remplissage plein (--on-accent) */ --success: #047857; --success-soft: #ECFDF5; --success-border: #A7F3D0; --warning: #92400E; --warning-soft: #FEF3C7; --danger: #B91C1C; --danger-soft: #FEE2E2; --danger-border: #FCA5A5; --neutral-soft: #F1F5F9; /* Divers */ --overlay: rgba(15, 23, 42, .5); --avatar-grad-start: #3B82F6; --avatar-grad-end: #1E40AF; --badge-beta-bg: rgba(217, 119, 6, .15); --badge-beta-text: #FBBF24; --badge-soon-bg: rgba(148, 163, 184, .15); --badge-soon-text: #94A3B8; --badge-selvix-bg: rgba(220, 38, 38, .15); --badge-selvix-text: #F87171; --row-hover: rgba(127, 127, 127, .08); /* Texte atténué PAR-DESSUS un remplissage plein/teinté (kpi.accent, kpi-success, kpi-danger) — distinct de --on-accent (plein contraste) : ici une variante réduite pour le sous-texte. */ --on-accent-muted: rgba(255, 255, 255, .75); --kpi-sub-on-tint: rgba(0, 0, 0, .45); /* Rayons — cartes aux coins très arrondis (ADN site), boutons plus mesurés */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* Ombres — légères en clair (élévation discrète) */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05); --shadow-md: 0 4px 16px rgba(15, 23, 42, .08); /* Espacements de référence (nouveaux composants — pas une reprise rétroactive de tout px existant) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; } [data-theme="dark"] { color-scheme: dark; /* Fond bleu nuit UNI (inspiré du site, pas noir, pas étoilé) — même valeur que --sidebar : la page se fond avec la sidebar déjà sombre, cohérence totale plutôt qu'un contraste artificiel. */ --bg: #0F172A; /* Cartes légèrement plus claires, effet "translucide" simulé (teinte + bordure claire, sans backdrop-filter — la console reste un fond uni, cf. docblock). Même valeur que --sidebar-hover : réutilise une teinte DÉJÀ éprouvée en production (sidebar) plutôt qu'une nouvelle valeur inventée. */ --bg-white: #1E293B; --text: #F1F5F9; --text-muted: #94A3B8; --text-faint: #64748B; --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .18); /* Bleus lumineux (site) pour l'interactif sur fond sombre */ --accent: #60A5FA; --accent-hover: #3B82F6; --accent-soft: rgba(96, 165, 250, .15); --accent-luminous: #93C5FD; /* [contraste] Sur fond sombre, les teintes accent/état sont CLAIRES — un texte blanc dessus tombe à 1.7-2.8:1 (échec AA net, vérifié). Un texte foncé (même teinte que --bg) donne 6.5-10.7:1. */ --on-accent: #0F172A; --success: #34D399; --success-soft: rgba(16, 185, 129, .18); --success-border: rgba(52, 211, 153, .35); --warning: #FBBF24; --warning-soft: rgba(217, 119, 6, .18); /* [contraste, correction] #F87171 sur --danger-soft ne tombait qu'à 4.07:1 (échec AA) — #FCA5A5 donne 5.93:1 sur le fond teinté, 7.71:1 sur la carte, 9.41:1 en texte de bouton plein. */ --danger: #FCA5A5; --danger-soft: rgba(220, 38, 38, .18); --danger-border: rgba(248, 113, 113, .35); --neutral-soft: rgba(255, 255, 255, .06); --overlay: rgba(0, 0, 0, .6); --row-hover: rgba(255, 255, 255, .06); --on-accent-muted: rgba(15, 23, 42, .65); --kpi-sub-on-tint: rgba(255, 255, 255, .55); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 4px 20px rgba(0, 0, 0, .4); /* sidebar-*, avatar-grad-*, badge-beta/soon/selvix, radii, espacements : hérités de :root (cascade normale, mêmes valeurs dans les deux thèmes — géométrie et sidebar permanente, cf. docblock). */ }