/* ============================================================ QCDESK — Design tokens LIGHT Light est désormais le thème par défaut : les overrides s'appliquent dès qu'aucun data-theme="dark" n'est posé sur . Le dark reste accessible via data-theme="dark" et continue de lire les tokens :root définis dans tokens.css. ============================================================ */ :root:not([data-theme="dark"]), :root:not([data-theme="dark"])[data-variant="modern"] { /* ---------- Surfaces ---------- */ --bg-0: #e8e8e8; --bg-1: #ececec; --bg-2: #e4e4e4; --bg-3: #dddddd; --bg-4: #0e0e0e; --bg-sidebar: #ffffff; --bg-topbar: #ffffff; --bg-main: #f7f7f7; /* ---------- Borders ---------- */ --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); --divider: rgba(0, 0, 0, 0.05); /* ---------- Text ---------- */ --text-0: #0e0e0e; --text-1: #1a1a1a; --text-2: #4a4a4a; --text-3: #767676; --text-on-accent: #ffffff; --text-0-inverted: #ffffff; --text-1-inverted: #e5e5e5; --text-2-inverted: #b0b0b0; --text-3-inverted: #808080; --text-on-accent-inverted: #ffffff; /* ---------- Marque (logo + nom dans la topbar) ---------- Light : bleu du logo QCDesk. Dark : blanc (voir tokens.css). */ --brand-mark: #2d2bb5; /* ---------- Variantes pastel des couleurs sémantiques ---------- Les -lo servent de fond pour chips/badges statut. En dark ils sont très sombres ; en light on passe en pastel clairs pour conserver la lisibilité du texte sémantique posé par-dessus. */ --c-red-lo: #fde4e6; --c-orange-lo: #feeed0; --c-yellow-lo: #fdf3c9; --c-green-lo: #d7f4e3; --c-teal-lo: #cdf1ec; --c-blue-lo: #dbe8fe; --c-indigo-lo: #e1e2fd; --c-purple-lo: #efe0fc; --c-pink-lo: #fcdaeb; --c-gray-lo: #eceff4; /* ---------- Teintes de fond (panneaux, alertes) ---------- En clair on garde `oklch` : le fond --bg-1 est clair, donc pas de décalage de teinte, et le mélange donne des pastels nets. ~40 % = pastel lisible. (Le sombre redéfinit ces tokens en srgb — cf. tokens.css.) */ --tint-blue: color-mix(in oklch, var(--c-blue) 40%, var(--bg-1)); --tint-purple: color-mix(in oklch, var(--c-purple) 40%, var(--bg-1)); --tint-green: color-mix(in oklch, var(--c-green) 40%, var(--bg-1)); --tint-orange: color-mix(in oklch, var(--c-orange) 40%, var(--bg-1)); --tint-red: color-mix(in oklch, var(--c-red) 40%, var(--bg-1)); --tint-teal: color-mix(in oklch, var(--c-teal) 40%, var(--bg-1)); --tint-accent: color-mix(in oklch, var(--accent) 40%, var(--bg-1)); /* ---------- Shadow ---------- Légèrement plus marquée en light, sinon les cards flottent mal sur un fond clair (le dark s'en passe grâce au contraste). */ --shadow-alpha: 0.10; } /* ============================================================ Scrollbar : thumb foncé sur fond clair ============================================================ */ :root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: rgba(10, 10, 15, 0.14); } :root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: rgba(10, 10, 15, 0.24); } /* ============================================================ Grain radial du body : alpha réduit en light pour ne pas virer gris sale sur un fond blanc. ============================================================ */ :root:not([data-theme="dark"]) body::before { background: radial-gradient(900px 500px at -10% -20%, color-mix(in oklch, var(--accent) 4%, transparent), transparent 55%), radial-gradient(800px 450px at 115% 120%, color-mix(in oklch, var(--c-purple) 4%, transparent), transparent 55%); } /* ============================================================ Overrides de composants dont les couleurs sont en dur et deviendraient illisibles sur fond clair. ============================================================ */ /* Bouton Déconnexion : en dark il est blanc sur topbar sombre. En light, on inverse pour garder le contraste fort. */ :root:not([data-theme="dark"]) .topbar-logout:hover { color: var(--text-0); } /* Nav-link sidebar : le hover défini dans components.css utilise rgba(255,255,255,0.04), invisible sur une sidebar light. On passe sur --bg-2 (surface hover sémantique) pour garder la lisibilité. */ :root:not([data-theme="dark"]) #sidebarMenu .nav-link:hover, :root:not([data-theme="dark"]) #sidebarMenu .nav-link--sub:hover { background: var(--bg-1); }