P1 fondation : tokens layerés, reset, thèmes (base/renovation/aep/tmip), 9 primitives Astro, pont Tailwind 4, démo kitchen sink
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
192
tokens.css
Normal file
192
tokens.css
Normal file
@@ -0,0 +1,192 @@
|
||||
/* ==========================================================================
|
||||
@transformer/ui — tokens.css
|
||||
Schéma canonique de tokens. Nommage par RÔLE, jamais par couleur brute.
|
||||
Les valeurs ci-dessous sont le thème NEUTRE par défaut ; chaque site les
|
||||
surcharge via un fichier theme/*.css (palette + polices UNIQUEMENT).
|
||||
|
||||
Échelle fluide calibrée entre 360px (22.5rem) et 1280px (80rem).
|
||||
Breakpoints (constantes, voir PROTOCOLE.md) :
|
||||
base 360 · sm 480 · md 768 · lg 1024 · xl 1280
|
||||
|
||||
Tout le fichier vit dans @layer tf-tokens : un theme/*.css (non-layeré)
|
||||
gagne TOUJOURS sur ces valeurs, quel que soit l'ordre de chargement.
|
||||
========================================================================== */
|
||||
|
||||
@layer tf-tokens, tf-reset;
|
||||
|
||||
@layer tf-tokens {
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
/* --- Couleur : rôles (mode clair par défaut) --------------------------- */
|
||||
--bg: #ffffff;
|
||||
--bg-alt: #f5f5f3;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #eeeeeb;
|
||||
|
||||
--text: #1b1b1f;
|
||||
--text-muted: #4b4b52;
|
||||
--text-subtle: #6e6e76;
|
||||
|
||||
--border: #e0e0dd;
|
||||
--border-strong: #a8a8a2;
|
||||
|
||||
--primary: #1b1b1f;
|
||||
--primary-hover: #333338;
|
||||
--on-primary: #ffffff;
|
||||
|
||||
--accent: #1b1b1f;
|
||||
--on-accent: #ffffff;
|
||||
|
||||
--link: #1d4ed8;
|
||||
--link-hover: #1e40af;
|
||||
|
||||
--focus-ring: #2563eb;
|
||||
|
||||
--success: #15803d;
|
||||
--warning: #a16207;
|
||||
--danger: #b91c1c;
|
||||
|
||||
/* --- Ombres (discrètes ; surchargées en sombre) ------------------------ */
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
|
||||
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
|
||||
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
|
||||
|
||||
/* --- Typographie ------------------------------------------------------- */
|
||||
--font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, monospace;
|
||||
|
||||
/* Échelle fluide 360→1280 (min → max) */
|
||||
--fs-xs: clamp(0.75rem, 0.728rem + 0.098vw, 0.8125rem); /* 12 → 13 */
|
||||
--fs-sm: clamp(0.875rem, 0.851rem + 0.109vw, 0.9375rem); /* 14 → 15 */
|
||||
--fs-base: clamp(1rem, 0.951rem + 0.217vw, 1.125rem); /* 16 → 18 */
|
||||
--fs-lg: clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem); /* 18 → 20 */
|
||||
--fs-xl: clamp(1.25rem, 1.152rem + 0.435vw, 1.5rem); /* 20 → 24 */
|
||||
--fs-2xl: clamp(1.5rem, 1.304rem + 0.87vw, 2rem); /* 24 → 32 */
|
||||
--fs-3xl: clamp(1.875rem, 1.533rem + 1.522vw, 2.75rem); /* 30 → 44 */
|
||||
--fs-4xl: clamp(2.25rem, 1.761rem + 2.174vw, 3.5rem); /* 36 → 56 */
|
||||
|
||||
--lh-tight: 1.15;
|
||||
--lh-base: 1.6;
|
||||
--lh-loose: 1.75;
|
||||
|
||||
--fw-regular: 400;
|
||||
--fw-medium: 500;
|
||||
--fw-semibold: 600;
|
||||
--fw-bold: 700;
|
||||
|
||||
/* --- Spacing (base 4/8px, fluide sur les grands paliers) --------------- */
|
||||
--space-2xs: 0.25rem; /* 4 */
|
||||
--space-xs: 0.5rem; /* 8 */
|
||||
--space-sm: 0.75rem; /* 12 */
|
||||
--space-md: 1rem; /* 16 */
|
||||
--space-lg: 1.5rem; /* 24 */
|
||||
--space-xl: 2rem; /* 32 */
|
||||
--space-2xl: clamp(2.5rem, 1.913rem + 2.609vw, 4rem); /* 40 → 64 */
|
||||
--space-3xl: clamp(4rem, 3.217rem + 3.478vw, 6rem); /* 64 → 96 */
|
||||
|
||||
/* --- Rayons ------------------------------------------------------------ */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-full: 999px;
|
||||
|
||||
/* --- Layout ------------------------------------------------------------ */
|
||||
--container-max: 75rem; /* ~1200px */
|
||||
--container-pad: clamp(1rem, 0.609rem + 1.739vw, 2rem); /* 16 → 32 */
|
||||
|
||||
/* --- Z-index ------------------------------------------------------------ */
|
||||
--z-nav: 100;
|
||||
--z-overlay: 200;
|
||||
--z-modal: 300;
|
||||
--z-toast: 400;
|
||||
|
||||
/* --- Motion ------------------------------------------------------------ */
|
||||
--dur-fast: 150ms;
|
||||
--dur-base: 250ms;
|
||||
--dur-slow: 400ms;
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Mode sombre — deux portes d'entrée, le toggle explicite gagne toujours :
|
||||
1. préférence système (tant que data-theme n'est pas forcé à "light")
|
||||
2. attribut data-theme="dark" posé par le toggle du site
|
||||
Un theme/*.css surcharge ces mêmes blocs avec sa palette.
|
||||
========================================================================== */
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg: #121214;
|
||||
--bg-alt: #18181b;
|
||||
--surface: #1e1e21;
|
||||
--surface-2: #26262a;
|
||||
|
||||
--text: #ededf0;
|
||||
--text-muted: #b4b4bb;
|
||||
--text-subtle: #8b8b93;
|
||||
|
||||
--border: #2f2f34;
|
||||
--border-strong: #4d4d55;
|
||||
|
||||
--primary: #ededf0;
|
||||
--primary-hover: #ffffff;
|
||||
--on-primary: #121214;
|
||||
|
||||
--accent: #ededf0;
|
||||
--on-accent: #121214;
|
||||
|
||||
--link: #8ab4f8;
|
||||
--link-hover: #aecbfa;
|
||||
|
||||
--focus-ring: #8ab4f8;
|
||||
|
||||
--success: #34d399;
|
||||
--warning: #fbbf24;
|
||||
--danger: #f87171;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
|
||||
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg: #121214;
|
||||
--bg-alt: #18181b;
|
||||
--surface: #1e1e21;
|
||||
--surface-2: #26262a;
|
||||
|
||||
--text: #ededf0;
|
||||
--text-muted: #b4b4bb;
|
||||
--text-subtle: #8b8b93;
|
||||
|
||||
--border: #2f2f34;
|
||||
--border-strong: #4d4d55;
|
||||
|
||||
--primary: #ededf0;
|
||||
--primary-hover: #ffffff;
|
||||
--on-primary: #121214;
|
||||
|
||||
--accent: #ededf0;
|
||||
--on-accent: #121214;
|
||||
|
||||
--link: #8ab4f8;
|
||||
--link-hover: #aecbfa;
|
||||
|
||||
--focus-ring: #8ab4f8;
|
||||
|
||||
--success: #34d399;
|
||||
--warning: #fbbf24;
|
||||
--danger: #f87171;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
|
||||
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
} /* @layer tf-tokens */
|
||||
Reference in New Issue
Block a user