Theme Tokens

CSS-in-JS 🟡 Mid

Definition

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.

#styling#interview#css-in-js