Quand six agents IA construisent 70 composants simultanément, comment garantir qu'ils appartiennent tous au même système de design ? La réponse est les tokens de design -- un ensemble centralisé de valeurs pour les couleurs, espacements, typographie, ombres et rayons de bordure que chaque composant référence au lieu de coder en dur.
Le système de tokens de design de FlinUI a été la première chose construite lors de la Session 037, avant qu'un seul composant ne soit écrit. Plus de cinquante tokens ont défini le langage visuel. Chaque Button, chaque Card, chaque Modal puise dans la même source. Changez un token, et chaque composant qui le référence se met à jour. Passez du thème clair au sombre, et toute l'application se transforme en un seul changement d'état.
Les catégories de tokens
- Couleurs : marque (primary, secondary), sémantiques (success, warning, danger, info), neutres (gray_50 à gray_900), surfaces (bg_primary, text_primary, border_color)
- Espacements : échelle basée sur une grille de 4 px (space_1 = 4 px à space_24 = 96 px)
- Typographie : familles de polices, tailles (text_xs à text_4xl), graisses, hauteurs de ligne, espacement de lettres
- Ombres : shadow_xs à shadow_xl plus shadow_inner
- Rayons de bordure : radius_none à radius_full
- Transitions : transition_fast (150 ms), transition_normal (250 ms), transition_slow (350 ms)
Mode sombre : remplacement de tokens
Le mode sombre est un ensemble complet de remplacements de tokens qui substituent les valeurs du thème clair. Quand le thème change, les valeurs CSS custom properties changent, et chaque composant qui les référence se met à jour automatiquement via le moteur CSS du navigateur.
Plus de cinquante tokens. Deux variantes de thème. Six breakpoints. Neuf animations.
Ensemble, ils définissent un langage visuel complet qui s'adapte d'un simple bouton à une bibliothèque de 365 composants sans une seule incohérence visuelle.
Ceci est la partie 85 de la série "How We Built FLIN".
Navigation de la série : - [84] Charts and Data Visualization Components - [85] Design Tokens and Theming System (vous êtes ici) - [86] The Layout System - [87] Icons Library Integration