/** * BoisVision — jetons de design. * * Les couleurs, les familles, les tailles de police et les espacements sont * définis UNE SEULE FOIS, dans theme.json. WordPress les expose sous forme de * custom properties --wp--preset--*. Ce fichier se contente de les aliaser en * --bv-* (plus courts à écrire, et faciles à retrouver par grep), puis ajoute * les jetons que theme.json ne sait pas décrire : z-index, courbes * d'accélération, durées, rayons et points de rupture. * * Conséquence : ne JAMAIS écrire une valeur hexadécimale ailleurs que dans * theme.json. Un `grep -n "#[0-9a-fA-F]\{6\}" assets/css/` doit rester vide. */ :root { /* --------------------------------------------------------------- * Couleurs — alias des presets theme.json * ------------------------------------------------------------ */ --bv-paper: var(--wp--preset--color--paper); --bv-linen: var(--wp--preset--color--linen); --bv-rule: var(--wp--preset--color--rule); --bv-faint: var(--wp--preset--color--faint); --bv-muted: var(--wp--preset--color--muted); --bv-bark: var(--wp--preset--color--bark); --bv-char: var(--wp--preset--color--char); --bv-ember: var(--wp--preset--color--ember); --bv-ember-700: var(--wp--preset--color--ember-700); --bv-ember-050: var(--wp--preset--color--ember-050); --bv-moss: var(--wp--preset--color--moss); --bv-moss-050: var(--wp--preset--color--moss-050); /* Jetons sémantiques — définis pour de bon, jamais improvisés en place. */ --bv-success: var(--bv-moss); --bv-success-bg: var(--bv-moss-050); --bv-warning: var(--wp--preset--color--warning); --bv-warning-bg: var(--wp--preset--color--warning-050); --bv-danger: var(--wp--preset--color--danger); --bv-danger-bg: var(--wp--preset--color--danger-050); /* Surfaces translucides — dérivées, jamais des hex isolés. */ --bv-shade-04: rgb(42 33 26 / 4%); --bv-shade-08: rgb(42 33 26 / 8%); --bv-shade-14: rgb(42 33 26 / 14%); --bv-glow-06: rgb(253 251 247 / 6%); --bv-glow-12: rgb(253 251 247 / 12%); /* --------------------------------------------------------------- * Typographie — alias * ------------------------------------------------------------ */ --bv-font-display: var(--wp--preset--font-family--display); --bv-font-body: var(--wp--preset--font-family--body); --bv-text-xs: var(--wp--preset--font-size--x-small); --bv-text-sm: var(--wp--preset--font-size--small); --bv-text-md: var(--wp--preset--font-size--medium); --bv-text-lg: var(--wp--preset--font-size--large); --bv-text-xl: var(--wp--preset--font-size--x-large); --bv-text-2xl: var(--wp--preset--font-size--xx-large); --bv-text-3xl: var(--wp--preset--font-size--xxx-large); --bv-text-display: var(--wp--preset--font-size--display); /* * Réglages des axes variables de Fraunces. * SOFT adoucit les terminaisons, WONK bascule sur les dessins irréguliers * du g et du y. C'est ce qui donne au thème sa signature typographique. */ --bv-display-soft: 28; --bv-display-wonk: 1; /* --------------------------------------------------------------- * Espacement — alias * ------------------------------------------------------------ */ --bv-space-2xs: var(--wp--preset--spacing--20); --bv-space-xs: var(--wp--preset--spacing--30); --bv-space-sm: var(--wp--preset--spacing--40); --bv-space-md: var(--wp--preset--spacing--50); --bv-space-lg: var(--wp--preset--spacing--60); --bv-space-xl: var(--wp--preset--spacing--70); --bv-space-2xl: var(--wp--preset--spacing--80); /* --------------------------------------------------------------- * Conteneurs * ------------------------------------------------------------ */ --bv-wrap: 1180px; --bv-wrap-wide: 1440px; --bv-wrap-prose: 68ch; --bv-gutter: clamp(1.125rem, 5vw, 3rem); /* * Hauteur réelle du header, publiée par assets/js/chrome.js via un * ResizeObserver. La valeur ci-dessous n'est qu'un plancher utilisé avant * l'exécution du script — jamais une constante à maintenir à la main. */ --bv-header-h: 72px; --bv-sticky-offset: calc(var(--bv-header-h) + var(--bv-space-sm)); /* --------------------------------------------------------------- * Formes * * Les objets (cartes, champs, tableaux) sont anguleux : 4px, la sobriété * du matériau. Les actions sont des pilules. Ce contraste est voulu. * ------------------------------------------------------------ */ --bv-r-xs: 2px; --bv-r: 4px; --bv-r-lg: 8px; --bv-r-pill: 999px; /* Double-bezel : coque externe + cœur interne à rayon concentrique. */ --bv-shell-r: 12px; --bv-shell-pad: 6px; --bv-core-r: calc(var(--bv-shell-r) - var(--bv-shell-pad)); --bv-line: 1px solid var(--bv-rule); /* --------------------------------------------------------------- * Ombres — chaudes, jamais noires * ------------------------------------------------------------ */ --bv-sh-lifted: var(--wp--preset--shadow--lifted); --bv-sh-deep: var(--wp--preset--shadow--deep); --bv-sh-inset: inset 0 1px 0 0 rgb(253 251 247 / 55%); /* --------------------------------------------------------------- * Mouvement * * Une seule famille de courbes, toutes asymétriques : la masse démarre * vite et s'arrête lentement. Jamais linear, jamais ease-in-out. * ------------------------------------------------------------ */ --bv-ease: cubic-bezier(0.22, 0.61, 0.24, 1); --bv-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bv-ease-mass: cubic-bezier(0.32, 0.72, 0, 1); --bv-dur-fast: 180ms; --bv-dur-mid: 420ms; --bv-dur-slow: 720ms; /* --------------------------------------------------------------- * Empilement — une échelle nommée, pas des nombres improvisés * ------------------------------------------------------------ */ --bv-z-base: 1; --bv-z-raised: 10; --bv-z-sticky: 100; --bv-z-header: 200; --bv-z-scrim: 300; --bv-z-drawer: 400; --bv-z-toast: 500; --bv-z-skip: 600; /* --------------------------------------------------------------- * Points de rupture * * CSS natif n'accepte pas var() dans une règle @media : les déclarer * ici en produirait des jetons que rien ne peut lire. Ils sont donc * documentés plutôt que déclarés, et se retrouvent par grep. * * 640px passage aux grilles à deux colonnes * 900px bascule des gabarits en deux colonnes, fin du menu tiroir * pour la barre utilitaire, tableaux en cartes empilées * 1200px affichage de la navigation horizontale * 1440px largeur maximale des conteneurs larges * * Quatre paliers, contre dix non harmonisés dans le thème de référence. * ------------------------------------------------------------ */ }