lrdlg
147 lines
6.7 KiB
CSS
147 lines
6.7 KiB
CSS
/* ==========================================================================
|
|
tokens.css — Jetons de conception (design tokens)
|
|
--------------------------------------------------------------------------
|
|
Source unique de vérité pour les couleurs, la typographie et les espacements.
|
|
Aucune règle de style ici : uniquement des variables CSS.
|
|
|
|
Pourquoi séparer ? Changer l'identité visuelle du site ne doit demander
|
|
la modification que d'un seul fichier. Toute valeur littérale (#05BC8A,
|
|
1.5rem…) écrite ailleurs que dans ce fichier est une dette technique.
|
|
========================================================================== */
|
|
|
|
/* --------------------------------------------------------------------------
|
|
ORDRE DE CASCADE
|
|
Déclaré ici en premier, avant toute règle. Une couche listée plus bas
|
|
l'emporte sur celles du dessus, quelle que soit la spécificité des
|
|
sélecteurs et quel que soit l'ordre des balises <link> dans le <head>.
|
|
Cela supprime la cause n°1 des conflits CSS : la course à la spécificité.
|
|
-------------------------------------------------------------------------- */
|
|
@layer tokens, base, layout, components, utilities;
|
|
|
|
@layer tokens {
|
|
:root {
|
|
/* ====================================================================
|
|
COULEURS
|
|
Palette volontairement restreinte. Contrastes vérifiés WCAG 2.1 :
|
|
- ink sur bg : 14,8:1 (AAA, seuil 7:1)
|
|
- ink-soft sur bg : 7,4:1 (AAA)
|
|
- ink-faint sur bg : 4,1:1 (AA sur texte non essentiel ≥ 14px)
|
|
- accent-dark sur bg : 4,3:1 (AA, utilisé pour les liens)
|
|
L'accent pur (#05BC8A) n'est jamais utilisé pour du texte sur fond
|
|
clair : son contraste (2,3:1) est insuffisant. Il sert uniquement de
|
|
couleur de trait, de bordure et de puce décorative.
|
|
==================================================================== */
|
|
|
|
/* ---- Surfaces ---- */
|
|
--color-bg: #f7f8f8; /* Fond de page */
|
|
--color-bg-translucent: rgb(247 248 248 / 85%); /* En-tête collant */
|
|
--color-surface: #ffffff; /* Cartes, fiches */
|
|
--color-surface-alt: #f1f3f3; /* Surfaces secondaires, badges neutres */
|
|
|
|
/* ---- Lignes ---- */
|
|
--color-line: #e3e6e6; /* Séparateurs, bordures de cartes */
|
|
--color-line-strong: #cfd4d4; /* Bordures nécessitant plus de présence */
|
|
|
|
/* ---- Texte ---- */
|
|
--color-ink: #10201c; /* Titres, texte principal */
|
|
--color-ink-soft: #4c5a56; /* Corps de texte, descriptions */
|
|
--color-ink-faint: #7b8783; /* Métadonnées, mentions secondaires */
|
|
--color-ink-inverse: #f7f8f8; /* Texte sur fond sombre */
|
|
|
|
/* ---- Accent : identité underscorelab ---- */
|
|
--color-accent: #05bc8a; /* Traits, puces, bordures */
|
|
--color-accent-dark: #03996f; /* Texte et liens (contraste AA) */
|
|
--color-accent-wash: #eafaf4; /* Fond de badge */
|
|
--color-accent-border: rgb(5 188 138 / 28%);
|
|
--color-accent-glow: rgb(5 188 138 / 12%);
|
|
|
|
/* ---- États ---- */
|
|
--color-focus: #03996f; /* Anneau de focus clavier */
|
|
|
|
/* ====================================================================
|
|
TYPOGRAPHIE
|
|
Deux familles seulement :
|
|
- JetBrains Mono : titres, métadonnées, éléments d'interface.
|
|
Choisie parce que c'est une police de développeur — le sujet du
|
|
site est l'informatique, la forme dit la même chose que le fond.
|
|
- Inter : corps de texte. Optimisée pour la lecture à l'écran,
|
|
hauteur d'x généreuse.
|
|
Les piles de repli listent des polices système présentes partout,
|
|
pour que la page reste lisible avant le chargement des webfonts.
|
|
==================================================================== */
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
|
|
Menlo, Consolas, "Liberation Mono", monospace;
|
|
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
|
|
/* ---- Échelle typographique fluide ----
|
|
clamp(min, préféré, max) : la taille s'adapte à la largeur du viewport
|
|
sans point de rupture. Le terme central mêle rem (respecte le zoom
|
|
utilisateur et la taille de police du navigateur) et vw (fluidité).
|
|
Un vw seul casserait l'accessibilité : le zoom n'aurait plus d'effet. */
|
|
--text-2xs: 0.7rem;
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.85rem;
|
|
--text-base: 1rem;
|
|
--text-md: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
|
|
--text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
|
|
--text-xl: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
|
|
--text-2xl: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
|
|
|
|
/* ---- Graisses ---- */
|
|
--weight-regular: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
|
|
/* ---- Interlignes ---- */
|
|
--leading-tight: 1.15; /* Grands titres */
|
|
--leading-snug: 1.4; /* Sous-titres */
|
|
--leading-normal: 1.7; /* Corps de texte : confort de lecture */
|
|
|
|
/* ====================================================================
|
|
ESPACEMENTS
|
|
Échelle géométrique basée sur 0,25rem (4px). Utiliser une échelle
|
|
plutôt que des valeurs arbitraires produit un rythme vertical
|
|
cohérent sur toute la page.
|
|
==================================================================== */
|
|
--space-2xs: 0.25rem;
|
|
--space-xs: 0.5rem;
|
|
--space-sm: 0.75rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2rem;
|
|
--space-2xl: 3rem;
|
|
--space-3xl: 4.5rem;
|
|
|
|
/* ====================================================================
|
|
DIMENSIONS
|
|
==================================================================== */
|
|
--width-content: 60rem; /* Largeur maximale du contenu */
|
|
--width-prose: 68ch; /* ~68 caractères : optimum de lisibilité
|
|
(au-delà, l'œil perd la ligne au retour) */
|
|
--gutter: clamp(1rem, 4vw, 1.5rem); /* Marge latérale fluide */
|
|
--header-height: 3.5rem; /* Sert au calcul du scroll-padding */
|
|
--tap-target: 2.75rem; /* 44px : cible tactile minimale (WCAG 2.5.5) */
|
|
|
|
/* ---- Rayons ---- */
|
|
--radius-sm: 3px;
|
|
--radius-md: 6px;
|
|
--radius-full: 999px;
|
|
|
|
/* ---- Ombres : très légères, le design repose sur les bordures ---- */
|
|
--shadow-sm: 0 1px 2px rgb(16 32 28 / 4%);
|
|
--shadow-md: 0 4px 12px rgb(16 32 28 / 6%);
|
|
|
|
/* ---- Transitions ---- */
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 200ms ease;
|
|
|
|
/* ---- Plans d'empilement : centralisés pour éviter la surenchère
|
|
de z-index dispersés dans le code ---- */
|
|
--z-sticky: 100;
|
|
--z-overlay: 150;
|
|
--z-skip-link: 200;
|
|
}
|
|
}
|