Theme Tokens
CSS-in-JS 🟡 MidDefinition
Valeurs de design abstraites (couleurs, espacements, ombres) stockees comme tokens et consommees par le systeme de style. Forment le vocabulaire du design system.
Analogie
Les ingredients 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 coherence visuelle du projet.