/* ============================================================================ Octopus V2 — design tokens · thème « Fleets » ---------------------------------------------------------------------------- Sombre par défaut (attribut data-theme absent ou "dark"). Clair : . Système : résoudre en JS (voir design/README.md) : const m = matchMedia('(prefers-color-scheme: light)'); const apply = () => document.documentElement.dataset.theme = m.matches ? 'light' : 'dark'; Densité : (normal par défaut). Navigation : réduit le rail à 46 px. Mouvement : coupe les animations (prefers-reduced-motion aussi). Règle : aucune couleur, taille ou rayon en dur dans un composant — tout vient d'ici. ========================================================================== */ :root { color-scheme: dark; /* --- Surfaces et texte ------------------------------------------------- */ --bg: #060a15; /* fond de l'application */ --sf: #0f1424; /* surface : panneaux, rail, barres */ --sf2: #151b2e; /* surface relevée : en-têtes, survol, colonnes kanban */ --sf3: #1b2238; /* surface pressée / sélection forte */ --bd: rgba(148, 163, 184, .16); /* bordures et séparateurs */ --bd2: rgba(148, 163, 184, .28); /* bordures au survol, champs actifs */ --fg: #e8ecf5; /* texte principal */ --fg2: #a3adc2; /* texte secondaire fort */ --mut: #94a0b8; /* texte secondaire, libellés, icônes inactives */ --mut2: #6b7690; /* texte tertiaire, placeholders */ /* --- Accent ------------------------------------------------------------ */ --ac: #7dd3fc; /* liens, éléments actifs, focus */ --acs: rgba(14, 165, 233, .16); /* fond de l'élément actif / sélection */ --acfg: #ffffff; /* texte sur accent plein */ --acg: linear-gradient(135deg, #0ea5e9, #3b82f6); /* action principale, barres, repères */ --glow: 0 8px 22px -8px rgba(14, 165, 233, .9); /* halo de l'action principale */ --mesh: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(29, 106, 241, .30), transparent 60%), radial-gradient(ellipse 45% 40% at 100% 100%, rgba(139, 92, 246, .20), transparent 55%), radial-gradient(ellipse 35% 30% at 0% 90%, rgba(14, 165, 233, .14), transparent 55%); /* --- Marque Provectio (logo) et familles de services (logos officiels) --- */ --brand-violet: #6100bf; --brand-deep: #2a0054; --fam-cyber: #e63a56; --fam-infra: #1f55cc; --fam-cloud: #16c8d9; --fam-telecom: #45a632; --fam-infogerance: #ffbf00; /* --- Sémantique (texte / fond) ------------------------------------------ */ --ok: #4ade80; --oks: rgba(34, 197, 94, .14); --warn: #fbbf24; --warns: rgba(245, 158, 11, .14); --crit: #fb7185; --crits: rgba(244, 63, 94, .14); --info: #22d3ee; --infos: rgba(14, 165, 233, .16); /* --- Visualisation de données (ordre d'attribution des séries) ---------- */ --viz-1: #22d3ee; --viz-2: #3b82f6; --viz-3: #8b5cf6; --viz-4: #22c55e; --viz-5: #f59e0b; --viz-6: #f43f5e; --viz-7: #0891b2; --viz-8: #94a3b8; /* --- Élévation ---------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(0, 0, 0, .35); /* posé */ --sh-2: 0 12px 30px -16px rgba(0, 0, 0, .7); /* flottant : menus, popovers */ --sh-3: 0 24px 60px -20px rgba(0, 0, 0, .6); /* modal, tiroir */ --glass: color-mix(in srgb, var(--sf) 88%, transparent); /* surfaces translucides */ --blur: blur(18px); --ring: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); /* focus */ --ring-bd: color-mix(in srgb, var(--info) 55%, transparent); /* --- Typographie -------------------------------------------------------- */ --font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --fs-2xs: 9.5px; /* tags en capitales */ --fs-xs: 10.5px; /* libellés en capitales, en-têtes de tableau, aides */ --fs-sm: 11px; /* textes secondaires, compteurs, barre d'état */ --fs-md: 12px; /* contenu des composants, formulaires */ --fs: 13px; /* base (12 px en compact, 14 px en confortable) */ --fs-lg: 15px; /* titre de page (16 px avec icône) */ --fs-xl: 17px; /* chiffres KPI */ --fs-2xl: 22px; /* chiffres mis en avant (rare) */ --lh: 1.35; --lh-tight: 1.2; /* --- Espacement (échelle serrée) ---------------------------------------- */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 10px; --sp-6: 12px; --sp-7: 16px; --sp-8: 20px; --sp-9: 24px; /* --- Forme -------------------------------------------------------------- */ --r-xs: 4px; /* cases, kbd */ --r-sm: 6px; /* tags, avatars */ --r: 9px; /* boutons, champs, chips carrées */ --r-lg: 12px; /* panneaux, tuiles, cartes, alertes */ --r-xl: 16px; /* modals, tiroirs, palette, menus */ --r-pill: 999px; /* --- Dimensions --------------------------------------------------------- */ --top-h: 40px; --status-h: 22px; --navw: 200px; --ctl: 24px; --ctl-sm: 20px; --ctl-lg: 28px; /* hauteur des contrôles */ --rowh: 28px; --th-h: 26px; --pad: 10px; /* lignes, en-têtes, espacement de page */ /* --- Plans -------------------------------------------------------------- */ --z-sticky: 1; --z-nav: 10; --z-pop: 30; --z-overlay: 40; --z-toast: 50; /* --- Mouvement ---------------------------------------------------------- */ --dur-1: 120ms; --dur-2: 180ms; --dur-3: 400ms; --ease: cubic-bezier(.2, .7, .2, 1); --ease-spring: cubic-bezier(.3, 1.4, .5, 1); } /* --- Thème clair (même structure, mêmes rôles) ---------------------------- `data-theme="light"` est la convention du kit ; `data-mode="light"` celle de web/src/styles.css. */ :root[data-theme="light"], :root[data-mode="light"] { color-scheme: light; --bg: #eef2f9; --sf: #ffffff; --sf2: #f4f7fc; --sf3: #e9eef7; --bd: #d9e1ee; --bd2: #c3cedf; --fg: #0f172a; --fg2: #334155; --mut: #64748b; --mut2: #94a3b8; --ac: #1d6af1; --acs: #e3edff; --ok: #15803d; --oks: rgba(34, 197, 94, .12); --warn: #b45309; --warns: rgba(245, 158, 11, .14); --crit: #be123c; --crits: rgba(244, 63, 94, .12); --info: #0369a1; --infos: rgba(14, 165, 233, .12); --viz-1: #0891b2; --viz-2: #2563eb; --viz-3: #7c3aed; --viz-4: #16a34a; --viz-5: #d97706; --viz-6: #e11d48; --viz-7: #0e7490; --viz-8: #64748b; --mesh: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(29, 106, 241, .12), transparent 60%), radial-gradient(ellipse 45% 40% at 100% 100%, rgba(139, 92, 246, .10), transparent 55%); --sh-1: 0 1px 2px rgba(15, 23, 42, .05); --sh-2: 0 10px 30px -18px rgba(15, 23, 42, .25); --sh-3: 0 20px 60px -20px rgba(15, 23, 42, .35); } /* --- Densité -------------------------------------------------------------- */ :root[data-density="compact"] { --fs: 12px; --rowh: 24px; --ctl: 22px; --ctl-sm: 18px; --ctl-lg: 26px; --th-h: 24px; --pad: 8px; } :root[data-density="comfortable"], :root[data-density="airy"] { --fs: 14px; --rowh: 34px; --ctl: 28px; --ctl-sm: 22px; --ctl-lg: 32px; --th-h: 30px; --pad: 14px; } /* --- Rail en icônes ------------------------------------------------------- */ :root[data-nav="icons"] { --navw: 46px; } /* ============================================================================ Possibilités du thème (démontrées dans design/theme/index.html) Tous ces réglages sont optionnels ; sans attribut, le thème Fleets standard s'applique. ========================================================================== */ /* --- Accent : data-accent sur (défaut : cyan → bleu) ---------------- */ :root[data-accent="violet"], [data-accent="violet"] { --ac: #c9a6ff; --acs: rgba(97, 0, 191, .24); --acg: linear-gradient(135deg, #6100bf, #9b4dff); --glow: 0 8px 22px -8px rgba(97, 0, 191, .9); } /* violet Provectio */ :root[data-accent="emeraude"], [data-accent="emeraude"] { --ac: #6ee7b7; --acs: rgba(16, 185, 129, .16); --acg: linear-gradient(135deg, #10b981, #0ea5e9); --glow: 0 8px 22px -8px rgba(16, 185, 129, .9); } :root[data-accent="ambre"], [data-accent="ambre"] { --ac: #fcd34d; --acs: rgba(245, 158, 11, .16); --acg: linear-gradient(135deg, #f59e0b, #f97316); --glow: 0 8px 22px -8px rgba(245, 158, 11, .9); } :root[data-accent="rose"], [data-accent="rose"] { --ac: #fda4af; --acs: rgba(244, 63, 94, .16); --acg: linear-gradient(135deg, #f43f5e, #ec4899); --glow: 0 8px 22px -8px rgba(244, 63, 94, .9); } :root[data-accent="graphite"], [data-accent="graphite"] { --ac: #e2e8f0; --acs: rgba(148, 163, 184, .18); --acg: linear-gradient(135deg, #64748b, #334155); --glow: 0 8px 22px -8px rgba(100, 116, 139, .8); } :root[data-accent="violet"][data-theme="light"], :root[data-accent="violet"][data-mode="light"], :root[data-theme="light"] [data-accent="violet"], :root[data-mode="light"] [data-accent="violet"] { --ac: #6100bf; --acs: #efe4ff; } :root[data-accent="emeraude"][data-theme="light"], :root[data-accent="emeraude"][data-mode="light"], :root[data-theme="light"] [data-accent="emeraude"], :root[data-mode="light"] [data-accent="emeraude"] { --ac: #047857; --acs: #d1fae5; } :root[data-accent="ambre"][data-theme="light"], :root[data-accent="ambre"][data-mode="light"], :root[data-theme="light"] [data-accent="ambre"], :root[data-mode="light"] [data-accent="ambre"] { --ac: #b45309; --acs: #fef3c7; } :root[data-accent="rose"][data-theme="light"], :root[data-accent="rose"][data-mode="light"], :root[data-theme="light"] [data-accent="rose"], :root[data-mode="light"] [data-accent="rose"] { --ac: #be123c; --acs: #ffe4e6; } :root[data-accent="graphite"][data-theme="light"], :root[data-accent="graphite"][data-mode="light"], :root[data-theme="light"] [data-accent="graphite"], :root[data-mode="light"] [data-accent="graphite"] { --ac: #334155; --acs: #e2e8f0; } /* --- Rayons : data-radius="0" (carrés) · "1" ou absent (standard) · "2" (arrondis) --- */ :root[data-radius="0"] { --r-xs: 2px; --r-sm: 3px; --r: 4px; --r-lg: 6px; --r-xl: 8px; } :root[data-radius="2"] { --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; } /* --- Police : data-font="inter" (défaut) · "avenir" (charger tokens/fonts.css) · "system" --- */ :root[data-font="avenir"] { --font: 'Avenir LT Std', 'Avenir Next', Avenir, system-ui, sans-serif; } :root[data-font="system"] { --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* --- Surfaces : data-mesh="off" (fond uni) · data-surface="flat" (panneaux sans dégradé) --- */ :root[data-mesh="off"] { --mesh: none; } :root[data-surface="flat"] { --pn-bg: var(--sf); --kpi-bg: var(--sf); }