Styles
Feuille Tailwind du core, jetons de thème, variant sombre, directives @source et polices IBM Plex embarquées.
@fraza/core/styles/core.css est la feuille de style que le projet consommateur importe une fois. Elle déclare les polices, les jetons de thème, le variant dark: et les directives qui rendent les classes Tailwind du core et des modules visibles au Tailwind du projet.
Import
Le projet importe la feuille depuis son styles/globals.css, que app/layout.js charge. @fraza/start le génère ainsi :
/* styles/globals.css */
@import "tailwindcss";
@import '@fraza/core/styles/core.css';
@import '../app/.fraza/sources.css';La troisième ligne importe les @source des modules, générés par fraza-modules sync. Voir ci-dessous.
Directives @source
Tailwind v4 ne scanne que les fichiers qu'on lui indique. Le core se déclare lui-même, et les modules passent par un fichier généré.
Le core
@source "../../**/*.js"; /* node_modules/@fraza/core/dist/**/*.js */Le chemin est relatif à l'emplacement du fichier une fois installé, node_modules/@fraza/core/dist/shared/styles/core.css.
Les modules : app/.fraza/sources.css
fraza-modules sync écrit une directive par module activé, avec le chemin du dossier dist/ réel du paquet, relatif à app/.fraza/ :
/* AUTO-GÉNÉRÉ par `npx fraza-modules sync` — ne pas modifier à la main. */
@source "../../node_modules/@fraza/module-posts/dist/**/*.js"; /* @fraza/module-posts */
@source "../../../fraza-module-blog/dist/**/*.js"; /* @fraza/module-blog */La liste est celle de la découverte des modules : @fraza/module-*, @fraza-pro/module-*, fraza-module-* et tout paquet portant le mot-clé fraza-module. Le chemin réel suit un module installé par file: ou npm link, qui n'est dans node_modules qu'en lien symbolique. Le fichier est écrit même sans module, pour que l'import de globals.css ne pointe jamais vers un fichier absent. Comme le reste de app/.fraza/, il n'est pas suivi par git : postinstall, dev et build le régénèrent.
fraza-doctor vérifie que styles/globals.css importe ce fichier, et l'ajoute avec --fix juste après l'import de core.css.
Le filet de core.css
core.css garde deux autres directives, pour les projets dont globals.css n'importe pas encore sources.css :
@source "../../../../module-*/dist/**/*.js"; /* node_modules/@fraza/module-*/dist/**/*.js */
@source "../../../../../@fraza-pro/module-*/dist/**/*.js"; /* node_modules/@fraza-pro/module-*/dist/**/*.js */Elles ne voient que les paquets @fraza/module-* et @fraza-pro/module-* installés depuis le registre. Un module nommé autrement, ou installé par lien, y échappe : il est chargé mais s'affiche sans style, sans aucune erreur.
Conséquence pour un module
Les classes Tailwind utilisées dans les composants d'un module sont générées automatiquement par le Tailwind du projet consommateur. Une seule condition : les fichiers compilés se trouvent dans dist/.
Aucune action n'est requise, ni côté module ni côté consommateur. Un module peut donc utiliser n'importe quelle classe, y compris des variantes responsives (md:, lg:) et des valeurs arbitraires (w-[300px]).
Jetons de thème
La feuille déclare les valeurs par défaut de chaque jeton (--fraza-surface, --fraza-fg-muted, --fraza-danger…) sous :root et .dark, dans @layer base. Un bloc @theme inline les enregistre dans Tailwind, ce qui produit les utilitaires bg-surface, text-fg-muted, border-line, rounded-card, font-ui et le reste. La liste complète est dans Thèmes.
Les défauts sont les valeurs de la charte : fond de page #f8f8f8, cartes blanches, bouton principal à l'encre #0a0a0a, accent bleu fleuve #2457c5, et leurs équivalents sombres sous .dark. Ils correspondent exactement aux valeurs que calcule resolveTheme() sans option. Le theme.js du projet les remplace par <ThemeStyle />, sans toucher à cette feuille, et seulement pour les jetons qui changent.
Les déclinaisons de l'accent, de l'info et de primary sont calculées dans la feuille par color-mix() : accent-soft à 8 % en clair et 14 % en sombre, accent-line à 35 %, info-soft à 8 % et 16 %, info-line à 20 % et 30 %, primary-soft à 10 %. Elles suivent donc un accent changé sans autre déclaration. info-ink vaut info.
Celles de danger, success et warning sont des teintes fixes de la charte, déclarées comme les autres jetons : un fond pâle (-soft), une bordure (-line) et une encre pour le texte posé sur ce fond (-ink). Un mélange de la couleur pleine donnait des fonds grisés et un texte sous 4,5:1. En sombre, les fonds sont des voiles de la couleur et l'encre est la couleur elle-même. Un thème qui change un statut sans ses déclinaisons les reçoit calculées par resolveTheme(). Voir Thèmes.
Parmi les utilitaires produits : bg-line-soft et border-line-soft pour les séparateurs de tableau et les fonds désactivés, bg-field pour le fond des champs, text-accent-hover et hover:bg-accent-hover pour le survol accentué, bg-success-soft text-success-ink pour une pastille, text-danger-hover pour une action destructrice discrète.
La feuille fait aussi pointer font-sans et font-mono, les familles par défaut de Tailwind, sur les polices du thème. Elle pose color-scheme selon le mode, un anneau de focus par défaut sur :focus-visible et une sélection de texte teintée d'accent.
Variant dark:
La feuille déclare @custom-variant dark (&:where(.dark, .dark *)) : le variant suit la classe dark posée sur <html>, pas la préférence du système. Les couleurs n'en ont plus besoin, les jetons changent de valeur seuls. Il reste utile pour ce qui n'est pas une couleur, par exemple afficher un logo différent (dark:hidden, hidden dark:block).
Polices
Deux familles sont embarquées dans le package et déclarées en @font-face :
| Famille | Fichiers | Usage |
|---|---|---|
| IBM Plex Sans | Police variable, normale et italique, graisses 100 à 700 | Toute l'interface. |
| IBM Plex Mono | Fichiers statiques par graisse | Codes, identifiants, montants, dates. |
Toutes en font-display: swap : le texte s'affiche immédiatement dans la police de repli et bascule quand la police est chargée, plutôt que de rester invisible.
Les fichiers sont copiés dans dist/shared/fonts/ par l'étape build:css. Aucun chargement depuis un CDN externe.
Les jetons font-ui et font-code les exposent à Tailwind, et suivent l'option font du thème. font-ibm-plex-sans et font-ibm-plex-mono restent disponibles pour les gabarits existants et pointent sur les mêmes valeurs. font-code porte le style canonique des données tabulaires. Voir Composants.
Animation fraza-shake
La feuille déclare une seule animation utilitaire, .fraza-shake, utilisée pour signaler un refus, par exemple une tentative de quitter un formulaire modifié.
L'appliquer à un élément sans transform de positionnement : ses keyframes portent un translateX qui écraserait un translate(-50%, 0) de centrage, et la boîte sauterait de côté avant de vibrer. Dans un wrapper centré, la poser sur la boîte interne.
Notes
Le fichier est copié tel quel au build, il n'est pas compilé par tsup. npm run build:css copie core.css et le dossier des polices dans dist/.
Pour les règles visuelles (palette, typographie, espace, rayons) voir Design system.