Theme Tokens

CSS-in-JS 🟡 Mid

Définition

Valeurs de design abstraites (couleurs, espacements, ombres) stockées comme tokens et consommées par le système de style. Forment le vocabulaire du design system.

Analogie

Les ingrédients de base d'une cuisine : sel, poivre, huile. Tu les combines pour chaque recette.

Exemple de code

const tokens = {
  colors: { primary: '#3498db', danger: '#e74c3c' },
  spacing: { xs: '0.25rem', sm: '0.5rem', md: '1rem' },
  radii: { sm: '4px', md: '8px', full: '9999px' },
  shadows: { sm: '0 1px 3px rgba(0,0,0,0.1)' },
}

Cas d'usage

Centraliser toutes les valeurs de design pour garantir la cohérence visuelle du projet.

#styling#interview#css-in-js

← → au clavier pour passer d'une fiche à l'autre