Jetons dans Tailwind, variables CSS et CSS-in-JS

La sortie de la plateforme CSS de Style Dictionary génère un fichier de propriétés personnalisées CSS : --color-primary-500: #3b82f6; --spacing-4: 16px;, et ainsi de suite. Ces variables sont définies sur :root, ce qui les rend disponibles partout. Elles constituent la base de l’utilisation de tous les jetons dans l’application.

Importez le fichier de jetons CSS généré dans votre feuille de style globale ou dans le composant de mise en page racine : @import './tokens/tokens.css'. Dans Next.js, importez-le dans app/layout.tsx ou styles/globals.css. Une fois le fichier importé, chaque règle CSS et chaque composant de l’application peut référencer les propriétés personnalisées.

Référencez les variables CSS dans les feuilles de style des composants ou les modules CSS : background-color: var(--color-primary-500); et padding: var(--spacing-4);. Si la valeur du jeton change dans la source JSON, la reconstruction de Style Dictionary met à jour le fichier CSS et tous les composants qui utilisent cette variable reflètent automatiquement la nouvelle valeur.

Les propriétés personnalisées CSS permettent de changer de thème à l’exécution. Pour le mode sombre, remplacez les valeurs des jetons sous un sélecteur de thème : [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. L’appel à document.documentElement.setAttribute('data-theme', 'dark') remplace instantanément toutes les valeurs des jetons, sans rechargement ni nouvelle compilation.

Étendez le thème de Tailwind dans tailwind.config.js pour utiliser les valeurs des jetons : theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. Importez la sortie JS de Style Dictionary dans la configuration Tailwind afin que les classes Tailwind (bg-primary-500) utilisent toujours les valeurs de référence des jetons.

Pour des thèmes Tailwind commutables à l’exécution, configurez la couleur afin qu’elle référence une variable CSS : 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. Cela exige que votre variable CSS stocke les composantes RGB sans l’encapsuleur rgb() (--color-primary-rgb: 59 130 246). Tailwind gère alors automatiquement les utilitaires d’opacité.

Les bibliothèques de CSS dans JS utilisent un objet de thème JavaScript. Transmettez la sortie JS de Style Dictionary comme valeur du fournisseur de thème : <ThemeProvider theme={tokens}>. Les composants accèdent aux jetons via const theme = useTheme() et theme.color.primary[500]. Style Dictionary génère l’objet de jetons typé et le fournisseur de thème le distribue.

Le plugin stylelint-no-hardcoded-colors et des règles ESLint personnalisées peuvent imposer qu’aucune valeur hexadécimale codée en dur n’apparaisse dans les feuilles de style ou les fichiers de composants. Si un développeur écrit color: #3b82f6 au lieu de color: var(--color-primary-500), l’outil d’analyse le signale. Le système de jetons reste ainsi l’unique source des couleurs.

Lorsque les noms de classes Tailwind sont construits dynamiquement à partir des noms de jetons à l’exécution, la purge de Tailwind peut supprimer ces classes, car elles n’apparaissent pas sous forme de chaînes statiques dans la source. Ajoutez les modèles de classes dynamiques à la safelist dans tailwind.config.js : safelist: [{ pattern: /bg-primary-/ }].

Le plugin Figma Tokens exporte directement les valeurs des jetons Figma au format JSON de Style Dictionary. Le flux de travail est le suivant : les concepteurs mettent à jour les couleurs dans les variables Figma, les exportent avec le plugin, valident le fichier JSON mis à jour, le script de préconstruction exécute Style Dictionary, puis les sorties CSS et JS mises à jour sont utilisées dans l’application React. La conception et le code restent synchronisés.

Les propriétés personnalisées CSS sont limitées à l’élément sur lequel elles sont définies et à ses descendants. Cela permet de remplacer le thème au niveau d’un composant : un composant de type carte peut définir --color-background: var(--color-surface-elevated) sur son élément racine, et tous ses descendants utilisent la couleur de surface surélevée sans transmettre de propriétés de composant en composant.

Quel est le principal avantage de l’utilisation de propriétés personnalisées CSS (variables) pour les jetons de conception par rapport aux valeurs statiques de Tailwind ?

Style Dictionary produit des propriétés personnalisées CSS pour l’importation globale et des objets JS pour l’intégration avec Tailwind et les bibliothèques de CSS dans JS. Les variables CSS permettent de changer de thème à l’exécution grâce aux remplacements [data-theme]. Tailwind étend sa configuration avec les valeurs des jetons issues de la sortie JS ; pour une thématisation tenant compte de l’opacité, configurez Tailwind afin qu’il référence des variables CSS RGB. Les règles d’analyse statique imposent l’utilisation exclusive des jetons pour les couleurs et empêchent les valeurs codées en dur dans la base de code.