/* /assets/styles/design-system.ho-oh-lore.css */ /* Resilio Design System — Variante "Ho-Oh-Lore" Palette de marque issue du projet team-resilience-flow (Lovable, 2026-03-13) Couleurs sources : src/index.css (variables HSL) ───────────────────────────────────────────────────────────────────────────── Différences clés vs design-system.default.css : - Primary : bleu marine profond hsl(220, 60%, 20%) → #0F2557 (vs bleu vif #3B82F6) - Secondary: bleu ciel lumineux hsl(200, 70%, 65%) → #5BBFE0 (nouveau token issu de Lovable) - Accent : orange chaleureux hsl(25, 90%, 55%) → #F07820 (vs violet #6D28D9) - Header : bleu marine très foncé hsl(220, 60%, 15%) → #0A1A3D (vs slate-900) - Skill expert → orange (accent), skill master → bleu ciel (secondary) Convention couleurs alpha : - PAS de variables dédiées `--color-10`, `--color-15`, etc. - Utiliser color-mix() inline dans les composants : color-mix(in srgb, var(--primary-color) 10%, transparent) - Support navigateurs : Chrome 111+, Firefox 113+, Safari 16.2+ (~95% 2026) - Exception : variables `-hover` pour les hover states (lightness dérivée non triviale) */ :root { /* Surlignage des occurrences de recherche (controller list-filter) */ --resilio-highlight-color: #FEF08A; /* hsl(53, 98%, 77%) */ /* ========================================================================== Color Palette — Base ========================================================================== */ /* Primary Colors */ --primary-color: hsl(204, 77%, 21%); /* Bleu marine profond — #0C3D5E */ --secondary-color: hsl(180, 69%, 29%); /* Bleu ciel lumineux — #177F7F (assombri de 36% à 29%, SPEC 033 É-02 : extrémité teal de --primary-gradient passait sous le seuil AA avec du texte blanc, 3,38:1 — cette valeur corrige à 4,80:1 sans changer la teinte à l'œil. Portée : ce thème seul, direction.css non modifié. */ --accent-color: hsl(25, 90%, 50%); /* Orange chaleureux — #F26E0F */ --primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); --primary-gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 5%, transparent) 0%, color-mix(in srgb, var(--secondary-color) 5%, transparent) 100%); --page-background: linear-gradient(to bottom right, color-mix(in srgb, var(--primary-color) 10%, transparent), var(--background-color), color-mix(in srgb, var(--accent-color) 10%, transparent)); /* Fond neutre de l'accueil invité (097) : sans teinte d'accent, contrairement à --page-background. */ --page-background-neutral: linear-gradient(to bottom right, color-mix(in srgb, var(--primary-color) 6%, var(--background-color)), var(--background-color) 60%); --background-soft: hsla(220, 20%, 97%, 0.5); /* Semantic Colors */ --success-color: hsl(142, 76%, 36%); /* Vert — identique au défaut */ --resilio-high-color: hsl(142, 76%, 36%); --resilio-medium-color: hsl(45, 96%, 50%); /* Jaune ambre — fragile/warning, distinct du rouge */ --resilio-low-color: hsl(0, 84%, 60%); /* Rouge — identique au défaut */ /* Skill Level Colors — palette Lovable */ --skill-expert-color: hsl(25, 90%, 50%); /* Orange — expert = accent Lovable */ --skill-master-color: hsl(200, 70%, 65%); /* Bleu ciel — master = secondary Lovable */ --skill-advanced-color: hsl(220, 60%, 40%); /* Bleu marine médium — intermédiaire */ --skill-beginner-color: hsl(142, 76%, 36%); /* Vert — débutant = succès */ --skill-none-color: hsl(220, 10%, 60%); /* Gris neutre */ /* Role Colors — SPEC 029 (palette dédiée, découplée de --skill-*) */ --resilio-role-membre-color: #6B7280; --resilio-role-membre-text: #4B5563; --resilio-role-contenu-color: #0891B2; --resilio-role-contenu-text: #0E7490; --resilio-role-manager-color: #3B82F6; --resilio-role-manager-text: #1D4ED8; --resilio-role-direction-color: #6D28D9; --resilio-role-direction-text: #5B21B6; --resilio-role-admin-color: var(--primary-color); --resilio-role-admin-text: var(--primary-color); /* Neutral Colors */ --text-primary-color: hsl(220, 40%, 15%); /* Bleu très foncé — #182035 (vs #2D333D) */ /* --text-secondary-color — remonté de 50 % à 43 % (intention 048, D-1 bis, RG-01). Mesuré : 5,43:1 sur --surface-color, 5,11:1 sur --background-color. WCAG 2.2 AA, critère 1.4.3 (texte normal, seuil 4,5:1) : conforme. Conforme AUSSI sur toutes les autres surfaces tokenisées du design system — --muted-color 4,88, --surface-subtle-color 4,63, color-mix 8 % 4,90, 12 % 4,62. ⚠ SEULE exception : --border-color (4,13) — c'est une couleur de BORDURE, pas une surface ; y poser du texte est un défaut d'usage, pas un défaut de token. Les 3 points supplémentaires par rapport à D-1 (46 %) mettent en conformité 17 usages préexistants répartis sur 5 repos, sans en modifier un seul. */ --text-secondary-color: hsl(220, 10%, 43%); --background-color: hsl(220, 20%, 97%); /* Fond clair */ --surface-color: hsl(0, 0%, 100%); --border-color: hsl(220, 15%, 88%); --muted-color: hsl(220, 15%, 95%); /* Accessible text colors on tinted backgrounds (WCAG AA) */ --text-on-success-bg: #15803D; /* vert foncé sur fond vert clair */ --text-on-warning-bg: #78350F; /* brun-doré sur fond jaune ambre (adapté à hsl(45,96%,50%)) */ --text-on-danger-bg: #B91C1C; /* rouge foncé, lisible sur fond rouge clair — intention 032 */ --text-on-primary-bg: #0F2557; /* bleu marine sur fond bleu clair */ /* A-27, SPEC v1.6 (CA-55, RG-34 amendée) : texte du bouton resilio-cta-button--accent, sur --accent-color PLEIN (pas teinté). Dédié, distinct de --text-on-accent-bg plus bas (couleur sémantique "alerte" du tableau de bord dirigeant, non touchée — RG-35). Noir : 6,93:1 au repos sur #F26C0D, 4,66:1 au survol sur --accent-color-hover. */ --text-on-accent-solid: #000000; /* Tokens sémantiques — intention 019 */ /* --text-muted-color — NON TEXTUEL UNIQUEMENT (intention 048, D-1, ADR-C1). Mesuré : 2,75:1 brut, 3,02:1 composé sur --surface-color. Ce token n'est PAS remonté au seuil, volontairement : il porte le 3e niveau de la hiérarchie visuelle, et l'amener à 4,5:1 exigerait une luminosité proche de celle de --text-secondary-color. Les deux tokens deviendraient indiscernables. INTERDIT : `color` sur un texte porteur de sens ; `color` sur un objet graphique porteur de sens. AUTORISÉ : `background-color`, `border-color`, et les glyphes aria-hidden="true" strictement redondants avec un texte ou un ordre visuel adjacent — conformes parce qu'ils sont HORS CHAMP du critère WCAG 2.2 AA 1.4.11 (objets graphiques, seuil 3:1), pas parce qu'ils auraient une marge : à 2,75:1 ils échoueraient ce seuil de 3:1 le jour où ils deviendraient porteurs de sens (1.4.11 s'appliquerait alors). Texte porteur de sens => var(--text-secondary-color), conforme sur toute surface tokenisée sauf --border-color (SPEC 048 RG-04, révisée par DESIGN 048 § 3). */ --text-muted-color: color-mix(in srgb, var(--text-secondary-color) 75%, transparent); /* --text-subtle-color — NON TEXTUEL UNIQUEMENT (intention 048, D-3, ADR-C1). Mesuré : 1,55:1 sur --surface-color. C'est la couleur la moins lisible du design system, sous le seuil de TOUT critère WCAG 2.2 AA. Même doctrine que --text-muted-color ci-dessus, appliquée plus strictement encore : jamais de `color` sur du texte, jamais sur un objet graphique porteur de sens — hors champ du critère 1.4.11 (objets graphiques, seuil 3:1) uniquement pour les glyphes aria-hidden="true" strictement redondants, jamais par marge : à 1,55:1 ce seuil de 3:1 serait lui aussi manqué. Réservé aux filets, séparateurs et fonds très clairs. */ --text-subtle-color: color-mix(in srgb, var(--border-color) 85%, var(--text-secondary-color)); --surface-subtle-color: hsl(220, 18%, 93%); /* ========================================================================== Hover States — lightness dérivée non triviale, variables nommées nécessaires ========================================================================== */ /* primary : hsl(220, 60%, 20%) → +8% lightness */ --primary-color-hover: hsl(220, 60%, 28%); /* accent : hsl(25, 90%, 55%) → -10% lightness */ --accent-color-hover: hsl(25, 90%, 40%);; /* secondary nav : --secondary-color à 15% d'opacité sur fond sombre */ /* → ne peut pas être une variable simple car dépend du fond ; color-mix() inline dans components est plus correct. */ /* ========================================================================== Typography ========================================================================== */ --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-h1: 2rem; --font-size-h2: 1.5rem; --font-size-h3: 1.25rem; --font-size-body: 1rem; --font-size-small: 0.875rem; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* ========================================================================== Layout & Spacing ========================================================================== */ --spacing-unit: 8px; --spacing-xs: var(--spacing-unit); --spacing-sm: calc(var(--spacing-unit) * 2); --spacing-md: calc(var(--spacing-unit) * 3); --spacing-lg: calc(var(--spacing-unit) * 4); --spacing-xl: calc(var(--spacing-unit) * 5); --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; --border-radius-full: 9999px; /* Ombres teintées marine (vs noir neutre dans default) */ --box-shadow-subtle: 0 4px 12px color-mix(in srgb, var(--primary-color) 7%, transparent); --box-shadow-medium: 0 6px 16px color-mix(in srgb, var(--primary-color) 13%, transparent); /* ========================================================================== Animation ========================================================================== */ --transition-duration: 300ms; --transition-timing: ease-in-out; --transition-default: all var(--transition-duration) var(--transition-timing); /* ========================================================================== Header / Navbar ========================================================================== */ --header-bg: hsl(220, 60%, 15%); /* Bleu marine très profond — #0A1A3D */ --header-text-color: hsl(210, 20%, 90%); --header-text-muted: hsl(210, 15%, 65%); --header-border-color: hsl(220, 50%, 25%); --header-brand-hover: hsl(200, 70%, 80%); /* bleu ciel clair au hover */ --header-light-bg: rgba(255, 255, 255, 0.92); --header-light-text: var(--text-primary-color); --header-light-text-muted: var(--text-secondary-color); --header-light-border: var(--border-color); --header-light-brand-hover: var(--primary-color); /* ========================================================================== Footer ========================================================================== */ --footer-bg: transparent; --footer-text-color: hsl(220, 10%, 50%); --footer-heart-color: var(--accent-color); /* Orange au lieu du rouge/bleu */ /* ========================================================================== License Tokens (Générés via color-mix() pour bg/border, cohérence garantie avec la couleur source) ========================================================================== */ /* Active */ --license-active-color: var(--success-color); --license-active-bg: color-mix(in srgb, var(--success-color) 8%, transparent); --license-active-border: color-mix(in srgb, var(--success-color) 25%, transparent); /* Expiring (soon) — orange Lovable */ --license-expiring-color: var(--resilio-medium-color); --license-expiring-bg: color-mix(in srgb, var(--resilio-medium-color) 8%, transparent); --license-expiring-border: color-mix(in srgb, var(--resilio-medium-color) 25%, transparent); --license-expiring-text: #7A2E00; /* texte lisible sur fond orange clair (WCAG AA) */ --license-expiring-bg-solid: #FEF0E0; /* fond orange solide pour bannières */ /* Expired */ --license-expired-color: var(--resilio-low-color); --license-expired-bg: color-mix(in srgb, var(--resilio-low-color) 8%, transparent); --license-expired-border: color-mix(in srgb, var(--resilio-low-color) 25%, transparent); /* Demo — bleu marine (primary Lovable) */ --license-demo-color: var(--primary-color); --license-demo-bg: color-mix(in srgb, var(--primary-color) 8%, transparent); --license-demo-border: color-mix(in srgb, var(--primary-color) 25%, transparent); /* Suspended */ --license-suspended-color: hsl(220, 10%, 50%); --license-suspended-bg: color-mix(in srgb, hsl(220, 10%, 50%) 8%, transparent); --license-suspended-border: color-mix(in srgb, hsl(220, 10%, 50%) 25%, transparent); /* Urgent */ --license-urgent-bg: #FEE2E2; --license-urgent-border: var(--resilio-low-color); --license-urgent-text: #991B1B; /* Feature flags / Bêta */ --license-feature-beta: #8b5cf6; /* Info bannière démo — bleu marine clair */ --license-info-bg: hsl(220, 60%, 94%); --license-info-border: var(--primary-color); --license-info-text: hsl(220, 60%, 20%); /* ========================================================================== Neutral scale + Board Dirigeant — intention 028 8 tokens minimum (option tranchée en DESIGN.md §1.2) : pas de refonte complète du barème neutre --fg-1..4 / --bg-1..4, uniquement les tokens réellement absents nécessaires au Board Dirigeant & CODIR. ========================================================================== */ --fg-2: hsl(220, 15%, 30%); /* corps fort, labels KPI */ --fg-4: hsl(220, 10%, 65%); /* texte discret / décoratif uniquement (cf. A11Y-2) */ --danger-color: var(--resilio-low-color); /* critiques, quadrant action */ --text-on-accent-bg: #7A2E00; /* delta "warn", impact départ (sur fond accent clair) */ --text-on-secondary-bg: #0E6060; /* KPI dynamique, barre transfert "en cours" */ --primary-color-deep: hsl(204, 77%, 14%); /* fin du dégradé page de garde PDF */ --border-radius-xl: 20px; /* carte synthèse, synthèse PDF */ --box-shadow-large: 0 10px 28px color-mix(in srgb, var(--primary-color) 22%, transparent); /* badge note A→E */ /* Correction AA (A11Y-1, DESIGN.md §8.1) : --secondary-color (teal) en petit texte échoue au contraste 4.5:1 sur blanc (~3.4:1). --secondary-text-color le remplace pour tout usage texte/icône informative en teal (eyebrows, titres de section, icônes). */ --secondary-text-color: hsl(180, 60%, 26%); /* ========================================================================== Palette identité d'équipe — Board Dirigeant & CODIR (QO-04) Palette déterministe : 10 teintes assignées par ordre/id d'équipe. Luminance ≤ ~48% pour garantir ≥ 4.5:1 sur blanc (WCAG AA). Ne colore que les marqueurs d'identité (icônes/chips) — jamais les couleurs sémantiques de quadrant (danger/accent/secondary/success). ========================================================================== */ --resilio-team-1: hsl(204, 77%, 28%); /* bleu marine */ --resilio-team-2: hsl(180, 60%, 28%); /* teal profond */ --resilio-team-3: hsl(25, 85%, 40%); /* orange foncé */ --resilio-team-4: hsl(265, 45%, 48%); /* violet */ --resilio-team-5: hsl(150, 45%, 32%); /* vert */ --resilio-team-6: hsl(330, 45%, 44%); /* magenta */ --resilio-team-7: hsl(45, 80%, 32%); /* ocre doré */ --resilio-team-8: hsl(220, 30%, 42%); /* bleu-gris */ --resilio-team-9: hsl(0, 55%, 45%); /* brique */ --resilio-team-10: hsl(190, 70%, 28%); /* cyan profond */ /* ========================================================================== Maintenance Tokens (intention 064) — 4e etat /health : fermeture volontaire, distincte d'une panne. Bleu, ni vert ni rouge (DESIGN.md Section 7.1). ========================================================================== */ --maintenance-color: hsl(217, 91%, 60%); --maintenance-bg: color-mix(in srgb, var(--maintenance-color) 10%, var(--surface-color)); --maintenance-border: color-mix(in srgb, var(--maintenance-color) 24%, transparent); --maintenance-text: var(--text-on-primary-bg); }