Styles

@lrvo/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

// app/layout.js
import '@lrvo/core/styles/core.css';

C'est le seul import de style nécessaire.

Directives @source

Tailwind v4 ne scanne que les fichiers qu'on lui indique. Deux directives couvrent le core et les modules :

@source "../../**/*.js";                        /* node_modules/@lrvo/core/dist/**/*.js */
@source "../../../../module-*/dist/**/*.js";    /* node_modules/@lrvo/module-*/dist/**/*.js */

Les chemins sont relatifs à l'emplacement du fichier une fois installé, node_modules/@lrvo/core/dist/shared/styles/core.css.

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, à deux conditions :

1. Le package est publié sous le nom @lrvo/module-<nom> : convention déjà imposée par la découverte des modules.
2. 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]).

Un module publié sous un autre nom, ou dont les fichiers compilés vivent ailleurs que dans dist/, sortira du scan : ses composants s'afficheront sans style, sans qu'aucune erreur ne soit levée.

Jetons de thème

La feuille déclare les valeurs par défaut de chaque jeton (--lrvo-surface, --lrvo-fg-muted, --lrvo-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 reproduisent l'apparence d'origine. Le theme.js du projet les remplace par <ThemeStyle />, sans toucher à cette feuille.

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 :

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 lrvo-shake

La feuille déclare une seule animation utilitaire, .lrvo-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.