/* * tokens.css — jetons de design. * * Seul fichier à modifier pour changer l'identité visuelle du thème. * La palette et la correspondance clair/sombre sont reprises telles quelles de * src/styles/theme.css du thème Astro Lipi (MIT, The Localhost Studio). * * MÉCANIQUE CLAIR / SOMBRE * Les jetons sémantiques sont écrits une seule fois avec light-dark(), qui * résout la bonne valeur d'après le color-scheme calculé. Par défaut :root * déclare `color-scheme: light dark`, donc le site suit la préférence système * — y compris si le JavaScript ne s'exécute pas. La bascule manuelle se * contente de poser data-theme sur , ce qui épingle le color-scheme. * Aucune valeur de couleur n'est dupliquée. * * Les jetons sont aussi déclarés sur .editor-styles-wrapper : WordPress * préfixe les sélecteurs des feuilles passées à add_editor_style(), et le * canevas d'édition reste volontairement en clair. */ /* ─── Polices auto-hébergées ───────────────────────────────────────────────── Fichiers variables Fontsource, sous-ensemble latin (inclut U+0152-0153, soit Œ et œ : le français est couvert). font-display: swap affiche le texte immédiatement dans la police de repli plutôt que de le masquer. ────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Literata"; src: url("../fonts/literata.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Literata"; src: url("../fonts/literata-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Fira Code"; src: url("../fonts/fira-code.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Caveat"; src: url("../fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* ─── Palette de base ───────────────────────────────────────────────────────── Échelle de gris chauds, du parchemin à l'encre, plus une seule couleur d'accent. Ces douze valeurs ne dépendent pas du mode clair ou sombre. ────────────────────────────────────────────────────────────────────────── */ :root, .editor-styles-wrapper { --base-50: #f5f4ed; --base-100: #eceae2; --base-200: #dddad1; --base-300: #c7c3b9; --base-400: #a9a499; --base-500: #8a867c; --base-600: #6e6a62; --base-700: #56534d; --base-800: #3f3d39; --base-900: #252523; --base-950: #141413; --brand: #e85d2a; /* ─── Typographie ─────────────────────────────────────────────────────── */ --font-content: "Literata", Georgia, "Times New Roman", serif; --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-code: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-annotation: "Caveat", "Brush Script MT", cursive; /* Échelle typographique : valeurs employées par Lipi via Tailwind, converties en rem. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.015em; --tracking-wide: 0.05em; --tracking-widest: 0.15em; /* ─── Mise en page ──────────────────────────────────────────────────────── --measure est LA variable de largeur : en-tête, contenu, listes et pied de page s'y alignent, bords compris. À garder synchronisée avec settings.layout.contentSize dans theme.json. ─────────────────────────────────────────────────────────────────────── */ --measure: 700px; --measure-wide: 52rem; --gutter: 1rem; /* ─── Divers ──────────────────────────────────────────────────────────── */ --radius: 0.25rem; --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1); } /* ─── Jetons sémantiques ───────────────────────────────────────────────────── Une seule déclaration par jeton. light-dark() choisit la valeur d'après le color-scheme calculé sur l'élément. ────────────────────────────────────────────────────────────────────────── */ :root, .editor-styles-wrapper { /* Défaut : la préférence système décide. Ne pas remplacer par `light`. */ color-scheme: light dark; --background: light-dark(var(--base-50), var(--base-950)); --foreground: light-dark(var(--base-900), var(--base-100)); --card: light-dark(var(--base-100), var(--base-900)); --card-foreground: light-dark(var(--base-700), var(--base-200)); --muted: light-dark(var(--base-200), var(--base-800)); --muted-foreground: var(--base-500); --border: light-dark(var(--base-300), var(--base-700)); --accent: light-dark(var(--base-200), var(--base-800)); --accent-foreground: light-dark(var(--base-900), var(--base-100)); --ring: var(--brand); --primary: var(--brand); --primary-foreground: #ffffff; } /* ─── Épinglage manuel ─────────────────────────────────────────────────────── data-theme est posé sur par le script en ligne de inc/enqueue.php, uniquement si l'utilisateur a exprimé un choix. Il ne redéfinit aucune couleur : il bascule le color-scheme, et light-dark() suit. ────────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Le canevas d'édition reste en clair quel que soit le réglage du système. */ .editor-styles-wrapper { color-scheme: light; } /* ─── Opacité de la texture papier ─────────────────────────────────────────── light-dark() n'accepte que des couleurs : ce seul réglage numérique doit donc être décliné à la main. ────────────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="light"] { --texture-opacity: 0.03; } @media (prefers-color-scheme: dark) { :root { --texture-opacity: 0.02; } } :root[data-theme="dark"] { --texture-opacity: 0.02; }