/* ========================================================================== vbx-tokens.css -------------------------------------------------------------------------- Rôle : Source de vérité unique pour toutes les valeurs de design du projet VBX. Ce fichier ne contient QUE des custom properties. Aucune classe, aucune règle CSS. Chargé : EN PREMIER dans le Head, avant tout autre fichier CSS. Règle : Ne jamais écrire de valeur en dur dans un autre fichier CSS. -------------------------------------------------------------------------- TABLE DES MATIÈRES ------------------ 1. Couleurs 1a. Palette brute — Greyscale 1b. Palette brute — BLG (primary) 1c. Palette brute — Feedbacks 1d. Tokens sémantiques — Texte 1e. Tokens sémantiques — Bordures 1f. Tokens sémantiques — Backgrounds 1g. Overlays & Focus 2. Typographie 3. Espacements 4. Border Radius 5. Ombres 6. Transitions 7. Z-index 8. Breakpoints ========================================================================== */ :root { /* ------------------------------------------------------------------ 1a. PALETTE BRUTE — GREYSCALE Source : Design system Anaïs — Figma ------------------------------------------------------------------ */ --vbx-grey-900: #2D2D2D; /* AAA 13.77:1 */ --vbx-grey-800: #484848; /* AAA 9.14:1 */ --vbx-grey-700: #767676; /* AA 4.54:1 */ --vbx-grey-500: #C5C5C5; /* AAA 11.4:1 */ --vbx-grey-300: #DADADA; /* AAA 14.07:1 */ --vbx-grey-100: #E4E4E4; /* AAA 15.48:1 */ --vbx-grey-50: #F2F2F2; /* AAA 17.58:1 */ --vbx-grey-10: #FDFDFD; /* AAA 19.34:1 */ --vbx-color-black: #0B0B0B; --vbx-color-white: #FFFFFF; /* ------------------------------------------------------------------ 1b. PALETTE BRUTE — BLG (PRIMARY) Source : Design system Anaïs — Figma ------------------------------------------------------------------ */ --vbx-blg: #008489; --vbx-blg-gradient: linear-gradient(78deg, #008489 -4.87%, #00BABE 106.4%); /* BLG Gradient — valeurs exactes Figma */ --vbx-blg-gradient-dark: linear-gradient(72deg, #017A7F 0%, #01A4A7 100%); /* BLG Gradient Dark — hover */ --vbx-blg-dark: #017A7F; /* BLG Grad Dark — start color */ --vbx-blg-dark-end: #01A4A7; /* BLG Grad Dark — end color */ --vbx-blg-light: #DCECEC; /* BLG Light */ --vbx-blg-lightest: #F2F9F9; /* BLG Lightest */ /* ------------------------------------------------------------------ 1c. PALETTE BRUTE — FEEDBACKS Source : Design system Anaïs — Figma CORRECTIFS vs ancienne version : Positive : #007758 → #009D74 Positive Light: #D4F5E9 → #F0FFFF Alert Light : #FFF5D8 → #FFF9EF Error : #AA0000 → #FF0000 Error Light : #FFD3D3 → #FFEAEA ------------------------------------------------------------------ */ --vbx-positive: #009D74; /* Positive — AA 16.9:1 sur fond blanc */ --vbx-positive-light: #F0FFFF; /* Positive Light */ --vbx-alert: #F67E2E; /* Alert — AAA 7.44:1 */ --vbx-alert-light: #FFF9EF; /* Alert Light */ --vbx-error: #FF0000; /* Error */ --vbx-error-light: #FFEAEA; /* Error Light */ --vbx-neutral: #0030A6; /* Neutral (Info) — AAA 10.64:1 */ --vbx-neutral-light: #E6F2FD; /* Neutral Light */ /* ------------------------------------------------------------------ 1d. TOKENS SÉMANTIQUES — TEXTE Référencent la palette brute — ne jamais mettre de valeur en dur. ------------------------------------------------------------------ */ --vbx-color-text-primary: var(--vbx-grey-900); /* Text Main — Grey 900 */ --vbx-color-text-secondary: var(--vbx-grey-700); /* Text Secondary — Grey 700 */ /* ------------------------------------------------------------------ 1e. TOKENS SÉMANTIQUES — BORDURES ------------------------------------------------------------------ */ --vbx-color-border: var(--vbx-grey-300); /* Border Main — Grey 300 */ --vbx-color-border-dark: var(--vbx-grey-500); /* Border Dark — Grey 500 */ --vbx-color-border-darker: var(--vbx-grey-700); /* Border Darker — Grey 700 */ /* ------------------------------------------------------------------ 1f. TOKENS SÉMANTIQUES — BACKGROUNDS ------------------------------------------------------------------ */ --vbx-color-bg-main: var(--vbx-color-white); /* Background Main — White */ --vbx-color-bg-secondary: var(--vbx-grey-50); /* Background Secondary — Grey 50 */ --vbx-color-bg-alt: var(--vbx-grey-10); /* Background Alt — Grey 10 */ --vbx-color-bg-alt-secondary: #FBFBFB; /* Background Alt Secondary — hors palette */ --vbx-color-bg-hover: #F5F5F5; /* Hover générique — hors palette */ /* ------------------------------------------------------------------ 1g. TOKENS SÉMANTIQUES — PRIMARY (compatibilité code existant) Alias vers la palette BLG — conservés pour ne pas casser le code. ------------------------------------------------------------------ */ --vbx-color-primary: var(--vbx-blg); --vbx-color-primary-hover: var(--vbx-blg-dark); --vbx-color-primary-dark: var(--vbx-blg-dark); --vbx-color-primary-gradient: var(--vbx-blg-gradient); --vbx-color-primary-gradient-dark: var(--vbx-blg-gradient-dark); --vbx-color-primary-light: var(--vbx-blg-light); --vbx-color-primary-light-hover: #C8E0E0; /* Valeur intermédiaire — non dans Figma */ --vbx-color-primary-lightest: var(--vbx-blg-lightest); /* ------------------------------------------------------------------ 1h. TOKENS SÉMANTIQUES — FEEDBACKS (compatibilité code existant) Alias vers la palette brute Feedbacks. CORRECTIFS appliqués ici — voir section 1c. ------------------------------------------------------------------ */ /* Warning (Alert) */ --vbx-color-warning-text: var(--vbx-alert); --vbx-color-warning-bg: var(--vbx-alert-light); --vbx-color-warning-border: #FDE68A; /* Valeur intermédiaire — hors palette Figma */ /* Error (Danger) */ --vbx-color-danger: var(--vbx-error); --vbx-color-danger-light: var(--vbx-error-light); /* Neutral (Info) */ --vbx-color-neutral: var(--vbx-neutral); --vbx-color-neutral-light: var(--vbx-neutral-light); /* Positive (Success) */ --vbx-color-success-text: var(--vbx-positive); --vbx-color-success-bg: var(--vbx-positive-light); --vbx-color-success-border: #A7F3D0; /* Valeur intermédiaire — hors palette Figma */ /* ------------------------------------------------------------------ 1i. OVERLAYS & FOCUS ------------------------------------------------------------------ */ --vbx-color-overlay: rgba(45, 45, 45, 0.30); --vbx-color-focus-ring: rgba(0, 132, 137, 0.25); --vbx-color-focus-ring-solid: #000000; /* Noir pur — accessibilité clavier */ /* ------------------------------------------------------------------ 2. TYPOGRAPHIE Source : Design system Anaïs — Figma CORRECTIFS vs ancienne version : --vbx-line-height-h2 : 32px → 31px --vbx-line-height-h3 : 24px → 22px (H3, H4, Sub1, Body1, Link1) --vbx-line-height-body : 1.5 → 22px (valeur fixe, alignée Figma) --vbx-line-height-body2 : 1.538 → 19px (Body2, Link2) --vbx-line-height-label : 20px → 19px (Label) --vbx-letter-spacing-btn: 0.1px → 0.5px (Button) Ajout : --vbx-line-height-field 18px (Button, Helper, Error) Ajout : --vbx-line-height-input 20px (Placeholder, Input) Ajout : --vbx-letter-spacing-sm 0.25px (Body2, Label, Helper, Error, Input, Link2) ------------------------------------------------------------------ */ --vbx-font-family: "Public Sans", system-ui, sans-serif; /* Tailles */ --vbx-font-size-xs: 12px; /* usage interne */ --vbx-font-size-sm: 13px; /* Body2, Link2 */ --vbx-font-size-md: 14px; /* Button, Helper Text, Error Text */ --vbx-font-size-label: 15px; /* Label */ --vbx-font-size-base: 16px; /* Body1, Link1, Input, Placeholder */ --vbx-font-size-lg: 18px; /* H4, Sub1 */ --vbx-font-size-xl: 20px; /* H3 */ --vbx-font-size-2xl: 27px; /* H2 */ --vbx-font-size-h1: 32px; /* H1 */ /* Graisses */ --vbx-font-weight-light: 300; --vbx-font-weight-normal: 400; /* Body1, Body2, Link1, Link2, Helper, Error, Placeholder, Input */ --vbx-font-weight-medium: 500; /* Body1-Medium, Sub1 */ --vbx-font-weight-semibold: 600; /* H2, H3 */ --vbx-font-weight-bold: 700; /* H1, H4, Body1-Bold, Body2-Bold, Button, Label */ /* Interlignes — valeurs exactes Figma */ --vbx-line-height-h1: 36px; /* H1 */ --vbx-line-height-h2: 31px; /* H2 CORRIGÉ 32→31 */ --vbx-line-height-h3: 24px; /* H3 */ --vbx-line-height-ui: 22px; /* H4, Sub1, Body1, Body1-Medium, Body1-Bold, Link1 CORRIGÉ 24→22 */ --vbx-line-height-body: 22px; /* alias de --vbx-line-height-ui — compatibilité CORRIGÉ 1.5→22px */ --vbx-line-height-body2: 19px; /* Body2, Body2-Bold, Link2 CORRIGÉ 1.538→19px */ --vbx-line-height-field: 18px; /* Button, Helper Text, Error Text AJOUT */ --vbx-line-height-input: 20px; /* Placeholder, Input AJOUT */ --vbx-line-height-label: 19px; /* Label CORRIGÉ 20→19 */ /* Letter spacing — valeurs exactes Figma */ --vbx-letter-spacing-none: 0px; /* H1, H2, H3, H4, Sub1, Body1, Link1, Placeholder */ --vbx-letter-spacing-sm: 0.25px; /* Body2, Body2-Bold, Link2, Label, Helper, Error, Input AJOUT */ --vbx-letter-spacing-btn: 0.5px; /* Button CORRIGÉ 0.1→0.5 */ /* ------------------------------------------------------------------ 3. ESPACEMENTS Règle : multiples de 5px — design system officiel VBX ------------------------------------------------------------------ */ --vbx-space-xs: 5px; --vbx-space-btn: 10px; /* Espacement entre boutons — valeur fixée par le design system */ --vbx-space-sm: 10px; /* Espacement small — usage général */ --vbx-space-md: 15px; --vbx-space-lg: 20px; --vbx-space-xl: 25px; --vbx-space-2xl: 30px; --vbx-space-3xl: 40px; --vbx-space-4xl: 50px; --vbx-header-h: 80px; /* ------------------------------------------------------------------ 4. BORDER RADIUS ------------------------------------------------------------------ */ --vbx-radius-btn: 6px; /* Boutons — design system officiel */ --vbx-radius-sm: 5px; /* Images, petits éléments */ --vbx-radius-md: 10px; /* Cards, inputs, modals */ --vbx-radius-lg: 15px; /* Panels larges */ --vbx-radius-round: 999px; /* Pills, avatars */ /* ------------------------------------------------------------------ 5. OMBRES ------------------------------------------------------------------ */ --vbx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10); --vbx-shadow-md: 0 4px 21px rgba(0, 0, 0, 0.10); --vbx-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15); /* ------------------------------------------------------------------ 6. TRANSITIONS ------------------------------------------------------------------ */ --vbx-transition: 160ms ease; /* ------------------------------------------------------------------ 7. Z-INDEX ------------------------------------------------------------------ */ --vbx-z-dropdown: 100; --vbx-z-overlay: 500; --vbx-z-modal-backdrop: 1000; --vbx-z-modal: 1010; --vbx-z-toast: 2000; } /* ================================================================== 8. BREAKPOINTS ================================================================== Alignées sur les standards 2026 (Tailwind v4, Bootstrap 5) : Mobile : max-width: 767px Tablette : 768px – 1024px Desktop : min-width: 1025px Desktop large : min-width: 1280px ------------------------------------------------------------------ MEDIA QUERIES STANDARD — copier-coller dans les fichiers CSS : ------------------------------------------------------------------ Mobile uniquement : @media (max-width: 767px) { } Tablette uniquement : @media (min-width: 768px) and (max-width: 1024px) { } Mobile + Tablette (= -touch, tout sauf desktop) : @media (max-width: 1024px) { } Desktop large uniquement : @media (min-width: 1280px) { } ================================================================== */