/* ═══════════════════════════════════════════════════════════════════════════ JETONS AKROZON — SOURCE DE VÉRITÉ DU DESIGN ─────────────────────────────────────────────────────────────────────────── Valeurs importées du design system Figma : figma.com/design/s7Yzqf52v25Do9hWv4tAsw · page « 🔵 Design System » Ce fichier ne dépend d'aucun framework. C'est Metronic qui suit ces jetons, pas l'inverse. § 1 Rampes de couleur telles que définies dans Figma § 2 Jetons sémantiques ce que l'application utilise § 3 Typographie et formes échelle Inter du design system § 4 Mode sombre dérivé (absent du Figma, voir la note) § 5 Pont vers Metronic mappe --bs-* sur --ak-* Le § 5 est le seul bloc qui connaît Metronic. → LE JOUR OÙ METRONIC SORT : supprimer le § 5, rien d'autre. RÈGLE : aucune couleur en dur dans un template ou un fichier JS. var(--ak-…) en CSS, akToken('…') en JavaScript. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ § 1 — RAMPES FIGMA ══════════════════════════════════════════════════ */ :root { --ak-primary-50: #EDEFFE; --ak-primary-100: #C8CEFC; --ak-primary-200: #AEB6FB; --ak-primary-300: #8895F9; --ak-primary-400: #7181F8; --ak-primary-500: #4E61F6; --ak-primary-600: #4758E0; --ak-primary-700: #3745AF; --ak-primary-800: #2B3587; --ak-primary-900: #212967; --ak-grey-50: #F9FAFB; --ak-grey-100: #F3F4F6; --ak-grey-200: #E5E7EA; --ak-grey-300: #D2D5DB; --ak-grey-400: #9EA2AE; --ak-grey-500: #6D717F; --ak-grey-600: #4D5461; --ak-grey-700: #394050; --ak-grey-800: #212936; --ak-grey-900: #131927; --ak-green-50: #ECF8EF; --ak-green-100: #C5E9CD; --ak-green-200: #A9DEB4; --ak-green-300: #81CF92; --ak-green-400: #69C57D; --ak-green-500: #43B75D; --ak-green-600: #3DA755; --ak-green-700: #308242; --ak-green-800: #256533; --ak-green-900: #1C4D27; --ak-red-50: #FDECEC; --ak-red-100: #FAC5C3; --ak-red-200: #F7A9A7; --ak-red-300: #F4827E; --ak-red-400: #F16965; --ak-red-500: #EE443F; --ak-red-600: #D93E39; --ak-red-700: #A9302D; --ak-red-800: #832523; --ak-red-900: #641D1A; --ak-yellow-50: #FFF7E6; --ak-yellow-100: #FFE5B0; --ak-yellow-200: #FFD88A; --ak-yellow-300: #FFC654; --ak-yellow-400: #FFBB33; --ak-yellow-500: #FFAA00; --ak-yellow-600: #E89B00; --ak-yellow-700: #B57900; --ak-yellow-800: #8C5E00; --ak-yellow-900: #6B4700; --ak-blue-50: #E6F4FF; --ak-blue-100: #B0DEFF; --ak-blue-200: #8ACEFF; --ak-blue-300: #54B8FF; --ak-blue-400: #33AAFF; --ak-blue-500: #0095FF; --ak-blue-600: #0088E8; --ak-blue-700: #006AB5; --ak-blue-800: #00528C; --ak-blue-900: #003F6B; } /* ═══ § 2 — JETONS SÉMANTIQUES (mode clair) ═══════════════════════════════ Le motif du design system : fond = rampe /50, texte et icône = rampe /500. C'est exactement ce que font nos badges et boutons « soft ». */ :root { /* Surfaces */ --ak-surface: #FFFFFF; --ak-sunken: var(--ak-grey-50); --ak-raised: #FFFFFF; --ak-line: var(--ak-grey-200); --ak-line-firm: var(--ak-grey-300); /* Texte */ --ak-ink: var(--ak-grey-900); /* text-primary-black */ --ak-ink-muted: var(--ak-grey-600); --ak-ink-faint: var(--ak-grey-400); --ak-ink-inverse: #FFFFFF; /* text-primary-white */ /* Action */ --ak-primary: var(--ak-primary-500); --ak-primary-soft: var(--ak-primary-50); --ak-primary-strong: var(--ak-primary-600); --ak-primary-glow: rgba(78, 97, 246, .20); --ak-success-glow: rgba(67, 183, 93, .35); /* États métier */ --ak-success: var(--ak-green-500); /* livré, terminé, encaissé */ --ak-success-soft: var(--ak-green-50); --ak-success-strong: var(--ak-green-600); --ak-warning: var(--ak-yellow-500); /* en attente, à surveiller */ --ak-warning-soft: var(--ak-yellow-50); --ak-warning-strong: var(--ak-yellow-600); --ak-danger: var(--ak-red-500); /* échec, retard, suppression*/ --ak-danger-soft: var(--ak-red-50); --ak-danger-strong: var(--ak-red-600); --ak-info: var(--ak-blue-500); /* information, planifié */ --ak-info-soft: var(--ak-blue-50); /* ── Variantes TEXTE des couleurs d'état ── Les pas /500 servent aux formes (pastilles, barres, marques de graphique) mais échouent au contraste pour du texte sur fond clair : vert 2,6:1 et ambre 1,9:1, loin des 4,5:1 requis. Ces variantes descendent la rampe jusqu'à un pas lisible. success-text #308242 → 4,78:1 warning-text #8C5E00 → 5,65:1 danger-text #A9302D → 6,67:1 (mesurés sur #FFFFFF) */ --ak-success-text: var(--ak-green-700); --ak-warning-text: var(--ak-yellow-800); --ak-danger-text: var(--ak-red-700); --ak-primary-text: var(--ak-primary-500); /* 4,81:1, déjà conforme */ /* États de mission — chargeables = colorés, partis = éteints */ --ak-etat-dispo: var(--ak-success); --ak-etat-dispo-bg: var(--ak-success-soft); --ak-etat-plan: var(--ak-primary); --ak-etat-plan-bg: var(--ak-primary-soft); --ak-etat-pret: var(--ak-warning); --ak-etat-pret-bg: var(--ak-warning-soft); --ak-etat-route: var(--ak-info); --ak-etat-route-bg: var(--ak-info-soft); --ak-etat-retard: var(--ak-danger); --ak-etat-retard-bg: var(--ak-danger-soft); --ak-etat-inactif: var(--ak-ink-faint); --ak-etat-inactif-bg: var(--ak-sunken); /* ── Palette catégorielle ── Pour distinguer plusieurs tournées simultanées sur une carte. Ce n'est PAS de la couleur sémantique : ici la teinte ne veut rien dire, elle sert seulement à séparer. Huit teintes bien écartées, lisibles sur le fond de carte clair. Lire en JS avec akToken('serie-1'). */ --ak-serie-1: #4E61F6; /* indigo */ --ak-serie-2: #43B75D; /* vert */ --ak-serie-3: #FFAA00; /* ambre */ --ak-serie-4: #EE443F; /* rouge */ --ak-serie-5: #0095FF; /* bleu */ --ak-serie-6: #B5479B; /* magenta */ --ak-serie-7: #00A79D; /* turquoise*/ --ak-serie-8: #8C5E00; /* brun */ /* Alias métier */ --ak-statut-livre: var(--ak-success); --ak-statut-attente: var(--ak-primary); --ak-statut-encours: var(--ak-warning); --ak-statut-echec: var(--ak-danger); --ak-statut-planifie: var(--ak-info); } /* ═══ § 3 — TYPOGRAPHIE ET FORMES ═════════════════════════════════════════ Échelle Inter du design system. Inter est déjà chargée par base.html.twig. Chaque jeton porte taille/interlignage/graisse, utilisable en une ligne : font: var(--ak-font-b3); */ :root { --ak-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Titres */ --ak-font-h1: 600 48px/58px var(--ak-font-family); --ak-font-h2: 600 40px/48px var(--ak-font-family); --ak-font-h3: 600 32px/38px var(--ak-font-family); --ak-font-h4: 600 28px/34px var(--ak-font-family); --ak-font-h5: 600 24px/28px var(--ak-font-family); /* Sous-titres */ --ak-font-s1: 600 18px/28px var(--ak-font-family); --ak-font-s2: 600 16px/24px var(--ak-font-family); /* Corps */ --ak-font-b1: 400 16px/24px var(--ak-font-family); --ak-font-b2: 500 16px/24px var(--ak-font-family); --ak-font-b3: 400 14px/20px var(--ak-font-family); --ak-font-b4: 500 14px/20px var(--ak-font-family); /* Légendes et libellés */ --ak-font-c1: 400 12px/16px var(--ak-font-family); --ak-font-c2: 500 12px/16px var(--ak-font-family); --ak-font-c3: 500 10px/14px var(--ak-font-family); --ak-font-label: 500 12px/16px var(--ak-font-family); /* Boutons */ --ak-font-btn-giant: 600 18px/24px var(--ak-font-family); --ak-font-btn-large: 600 16px/20px var(--ak-font-family); --ak-font-btn-medium: 600 14px/16px var(--ak-font-family); --ak-font-btn-small: 600 12px/16px var(--ak-font-family); --ak-font-btn-tiny: 600 10px/12px var(--ak-font-family); /* Rayons — Spacing System du Figma */ --ak-radius-btn: 6px; /* Corner radius/Buttons/Tiny */ --ak-radius-xs: 8px; --ak-radius-sm: 12px; --ak-radius-xl: 24px; /* pastilles, pilules */ --ak-radius: var(--ak-radius-xs); /* Élévation */ --ak-shadow-sm: 0 1px 2px rgba(19, 25, 39, .05); --ak-shadow: 0 2px 8px rgba(19, 25, 39, .07); --ak-shadow-lg: 0 8px 24px rgba(19, 25, 39, .12); } /* ═══ § 4 — MODE SOMBRE ═══════════════════════════════════════════════════ NOTE : le design system Figma ne définit PAS de palette sombre. Les rampes ci-dessous sont dérivées — gris inversés, couleurs sémantiques éclaircies d'un cran (rampe /400) et fonds soft pris dans la rampe /900 assombrie. À remplacer si une palette sombre est ajoutée au Figma. */ :root[data-bs-theme="dark"] { --ak-surface: #171B24; --ak-sunken: #1D2230; --ak-raised: #232938; --ak-line: #2C3342; --ak-line-firm: #3C4457; --ak-ink: #F3F4F6; --ak-ink-muted: #9EA2AE; --ak-ink-faint: #6D717F; --ak-ink-inverse: #131927; --ak-primary: var(--ak-primary-400); --ak-primary-soft: #1E2454; --ak-primary-strong: var(--ak-primary-300); --ak-primary-glow: rgba(113, 129, 248, .25); --ak-success-glow: rgba(105, 197, 125, .35); --ak-success: var(--ak-green-400); --ak-success-soft: #15321D; --ak-success-strong: var(--ak-green-300); --ak-warning: var(--ak-yellow-400); --ak-warning-soft: #3A2A05; --ak-warning-strong: var(--ak-yellow-300); --ak-danger: var(--ak-red-400); --ak-danger-soft: #3A1A18; --ak-danger-strong: var(--ak-red-300); --ak-info: var(--ak-blue-400); --ak-info-soft: #0A2B42; /* Sur fond sombre, les pas /400 passent tous (5,1 à 10,2:1). */ --ak-success-text: var(--ak-green-400); --ak-warning-text: var(--ak-yellow-400); --ak-danger-text: var(--ak-red-400); --ak-primary-text: var(--ak-primary-400); --ak-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --ak-shadow: 0 2px 8px rgba(0, 0, 0, .45); --ak-shadow-lg: 0 8px 24px rgba(0, 0, 0, .65); } /* ═══ § 5 — PONT VERS METRONIC ════════════════════════════════════════════ Fait suivre les composants du thème (boutons, badges, alertes, champs) à nos jetons. Seul bloc de ce fichier qui connaît Metronic. → LE JOUR OÙ METRONIC SORT : supprimer ce § 5, rien d'autre. */ :root, :root[data-bs-theme="dark"] { --bs-primary: var(--ak-primary); --bs-primary-active: var(--ak-primary-strong); --bs-primary-light: var(--ak-primary-soft); --bs-primary-clarity: var(--ak-primary-glow); --bs-success: var(--ak-success); --bs-success-active: var(--ak-success-strong); --bs-success-light: var(--ak-success-soft); --bs-warning: var(--ak-warning); --bs-warning-active: var(--ak-warning-strong); --bs-warning-light: var(--ak-warning-soft); --bs-danger: var(--ak-danger); --bs-danger-active: var(--ak-danger-strong); --bs-danger-light: var(--ak-danger-soft); --bs-info: var(--ak-info); --bs-info-light: var(--ak-info-soft); }