/* ========================================================================= THEME TOKENS — édite UNIQUEMENT ce fichier pour rebrander un projet. Tout le reste (theme.css) est figé et lit ces variables. ========================================================================= */ :root { /* ╔══════════════════════════════════════════════════════════════════════╗ ║ ÉTAPE 1 — DÉFINIS TES COULEURS DE MARQUE ║ ║ C'est la SEULE chose à changer pour reskinner tout le projet. ║ ║ Tout le reste s'adapte automatiquement. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* Teinte (0–360) : 0 = rouge 30 = orange 60 = jaune 120 = vert lime 158 = émeraude 180 = teal 210 = cyan 230 = bleu 260 = indigo 280 = violet 320 = magenta 350 = rose */ --brand-hue: 155; /* vert Altius (#006839 / #00a85a en OKLCH) */ --brand-chroma: 0.13; /* saturation : 0.05 = pâle, 0.18 = vif */ /* (Optionnel) Si tu veux ABSOLUMENT forcer des couleurs précises au lieu de la teinte calculée, décommente et mets tes valeurs ici. Sinon laisse vide, les sémantiques ci-dessous suivront automatiquement la teinte. */ /* --color-primary: #2ec27e; --color-primary-hover: #26a36b; --color-primary-active: #1e8455; */ /* ╔══════════════════════════════════════════════════════════════════════╗ ║ COULEURS SÉMANTIQUES ║ ║ Les noms simples utilisés partout dans le thème. ║ ║ Par défaut, ils dérivent de --brand-hue ci-dessus. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* PRIMARY — boutons .btn-primary, liens, accents, focus ring */ --color-primary: var(--brand-600); --color-primary-hover: var(--brand-700); --color-primary-active: var(--brand-800); --color-primary-bg: var(--brand-50); /* fond pâle, ex: badges */ --color-primary-border: var(--brand-200); /* bordure pâle */ --color-primary-text: var(--brand-800); /* texte sur fond pâle */ --color-on-primary: #fff; /* texte sur fond plein */ /* SECONDARY — boutons .btn-secondary, surfaces neutres */ --color-secondary: var(--gray-700); --color-secondary-hover: var(--gray-900); --color-secondary-bg: var(--app-surface); /* fond du bouton */ --color-secondary-border: var(--gray-300); --color-secondary-text: var(--gray-800); /* SUCCESS / WARNING / DANGER / INFO — statuts (indépendants de la marque) */ --color-success: var(--success-600); --color-success-bg: var(--success-100); --color-warning: var(--warning-600); --color-warning-bg: var(--warning-100); --color-danger: var(--danger-600); --color-danger-bg: var(--danger-100); --color-info: var(--info-600); --color-info-bg: var(--info-100); /* SURFACE & TEXTE (driven by --gray-*) */ --color-bg: var(--gray-50); /* fond de page */ --color-surface: var(--gray-0); /* cartes, modals */ --color-surface-muted: var(--gray-100); /* zones sunken */ --color-border: var(--gray-200); --color-text: var(--gray-800); --color-text-strong: var(--gray-950); /* titres */ --color-text-muted: var(--gray-600); /* sous-titres, helptext */ /* ╔══════════════════════════════════════════════════════════════════════╗ ║ ÉCHELLE PRIMAIRE COMPLÈTE (générée par OKLCH, ne pas toucher) ║ ║ Utilisée par les classes du thème qui ont besoin de nuances. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ --brand-50: oklch(96.5% calc(var(--brand-chroma) * 0.30) var(--brand-hue)); --brand-100: oklch(92% calc(var(--brand-chroma) * 0.55) var(--brand-hue)); --brand-200: oklch(85% calc(var(--brand-chroma) * 0.80) var(--brand-hue)); --brand-300: oklch(76% calc(var(--brand-chroma) * 1.05) var(--brand-hue)); --brand-400: oklch(68% calc(var(--brand-chroma) * 1.20) var(--brand-hue)); --brand-500: oklch(60% var(--brand-chroma) var(--brand-hue)); --brand-600: oklch(52% calc(var(--brand-chroma) * 0.95) var(--brand-hue)); --brand-700: oklch(44% calc(var(--brand-chroma) * 0.85) var(--brand-hue)); --brand-800: oklch(35% calc(var(--brand-chroma) * 0.70) var(--brand-hue)); --brand-900: oklch(27% calc(var(--brand-chroma) * 0.55) var(--brand-hue)); /* Accent de PREMIER PLAN (texte/icône sur surface). S'éclaircit en mode sombre pour rester lisible sur fond foncé. NE PAS utiliser comme fond. */ --accent-fg: var(--brand-700); /* ─── Neutres (cool slate, légère teinte bleutée) ─────────────────── */ --neutral-hue: 235; --neutral-chroma: 0.012; --gray-0: #ffffff; --gray-50: oklch(98.5% calc(var(--neutral-chroma) * 0.4) var(--neutral-hue)); --gray-100: oklch(96.5% calc(var(--neutral-chroma) * 0.6) var(--neutral-hue)); --gray-200: oklch(92% calc(var(--neutral-chroma) * 0.8) var(--neutral-hue)); --gray-300: oklch(86% var(--neutral-chroma) var(--neutral-hue)); --gray-400: oklch(72% calc(var(--neutral-chroma) * 1.2) var(--neutral-hue)); --gray-500: oklch(58% calc(var(--neutral-chroma) * 1.4) var(--neutral-hue)); --gray-600: oklch(46% calc(var(--neutral-chroma) * 1.4) var(--neutral-hue)); --gray-700: oklch(36% calc(var(--neutral-chroma) * 1.3) var(--neutral-hue)); --gray-800: oklch(24% calc(var(--neutral-chroma) * 1.1) var(--neutral-hue)); --gray-900: oklch(16% calc(var(--neutral-chroma) * 0.9) var(--neutral-hue)); --gray-950: oklch(10% calc(var(--neutral-chroma) * 0.7) var(--neutral-hue)); /* ─── 3. STATUTS (figés, pas dépendants de la marque) ────────────────── */ --status-success-hue: 152; --status-warning-hue: 50; --status-danger-hue: 22; --status-info-hue: 220; --success-500: oklch(58% 0.14 var(--status-success-hue)); --success-600: oklch(50% 0.13 var(--status-success-hue)); --success-100: oklch(94% 0.06 var(--status-success-hue)); --warning-500: oklch(72% 0.16 var(--status-warning-hue)); --warning-600: oklch(62% 0.15 var(--status-warning-hue)); --warning-100: oklch(95% 0.08 var(--status-warning-hue)); --danger-500: oklch(60% 0.20 var(--status-danger-hue)); --danger-600: oklch(52% 0.19 var(--status-danger-hue)); --danger-100: oklch(95% 0.04 var(--status-danger-hue)); --info-500: oklch(60% 0.14 var(--status-info-hue)); --info-600: oklch(52% 0.13 var(--status-info-hue)); --info-100: oklch(95% 0.04 var(--status-info-hue)); /* ─── 4. RAYONS (tranchant / software) ───────────────────────────────── */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-pill: 999px; /* ─── 5. OMBRES (subtiles, fonctionnelles) ───────────────────────────── */ --shadow-xs: 0 1px 0 0 rgba(15, 23, 42, .04); --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, .06), 0 1px 1px 0 rgba(15, 23, 42, .04); --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05); --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, .12), 0 4px 8px -4px rgba(15, 23, 42, .06); --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, .18); --shadow-focus: 0 0 0 3px oklch(60% var(--brand-chroma) var(--brand-hue) / .25); /* ─── 6. ÉCHELLE D'ESPACEMENT (compact / dense) ──────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─── 7. TYPOGRAPHIE ─────────────────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; /* base compact */ --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 48px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.5; /* ─── 8. HAUTEURS DE CONTRÔLES (compact) ─────────────────────────────── */ --control-h-xs: 24px; --control-h-sm: 28px; --control-h-md: 32px; /* défaut */ --control-h-lg: 38px; --control-h-xl: 44px; /* ─── 9. LAYOUT ──────────────────────────────────────────────────────── */ --sidebar-w: 240px; --sidebar-w-collapsed: 56px; --topbar-h: 52px; --content-max-w: 1440px; /* ─── 10. TRANSITIONS ────────────────────────────────────────────────── */ --t-fast: 120ms cubic-bezier(.4, 0, .2, 1); --t-base: 180ms cubic-bezier(.4, 0, .2, 1); --t-slow: 280ms cubic-bezier(.4, 0, .2, 1); } /* ═════════════════════════════════════════════════════════════════════════ POUR LE DARK MODE — on inverse seulement les neutres. La marque reste identique (OKLCH garantit le contraste). ═════════════════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { --gray-0: oklch(11% calc(var(--neutral-chroma) * 0.7) var(--neutral-hue)); --gray-50: oklch(14% calc(var(--neutral-chroma) * 0.8) var(--neutral-hue)); --gray-100: oklch(17% calc(var(--neutral-chroma) * 0.9) var(--neutral-hue)); --gray-200: oklch(22% calc(var(--neutral-chroma) * 1.0) var(--neutral-hue)); --gray-300: oklch(28% calc(var(--neutral-chroma) * 1.1) var(--neutral-hue)); --gray-400: oklch(40% calc(var(--neutral-chroma) * 1.2) var(--neutral-hue)); --gray-500: oklch(55% calc(var(--neutral-chroma) * 1.3) var(--neutral-hue)); --gray-600: oklch(68% calc(var(--neutral-chroma) * 1.2) var(--neutral-hue)); --gray-700: oklch(78% calc(var(--neutral-chroma) * 1.0) var(--neutral-hue)); --gray-800: oklch(88% calc(var(--neutral-chroma) * 0.8) var(--neutral-hue)); --gray-900: oklch(95% calc(var(--neutral-chroma) * 0.5) var(--neutral-hue)); --gray-950: #ffffff; /* Accent lisible sur fond sombre (plus clair que brand-700). */ --accent-fg: var(--brand-400); --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, .3); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .35), 0 1px 1px 0 rgba(0, 0, 0, .25); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .25); --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, .5), 0 4px 8px -4px rgba(0, 0, 0, .3); --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, .6); }