@one-nexty/tokens

Source de vérité de l'identité visuelle. Ce package ne connaît aucune plateforme.

src/*.json  ──▶  build.mjs  ──▶  dist/

Sources (src/)

| Fichier | Contenu | | ----------------- | -------------------------------------------------------------- | | colors.json | Palette primitive en OKLCH (primary, secondary, neutral, green, amber, red, blue) | | semantic.json | Tokens d'usage (surface, fg, accent…) + variantes sombres | | typography.json | Familles, tailles, graisses, interlettrage | | spacing.json | Échelle d'espacement (grille 4px) + rayons | | shadows.json | Élévations |

Format W3C Design Tokens (DTCG) : chaque feuille porte $type / $value. Les tokens sémantiques référencent la palette par alias :

{ "$type": "color", "$value": "{color.primary.500}" }

Artefacts (dist/)

| Fichier | Cible | | ------------------ | -------------------------------------------------------------- | | index.js .d.ts | JS/TS — import { tokens, tokenList } from '@one-nexty/tokens' | | variables.css | Web sans Tailwind — variables --nx-* (:root et .dark) | | tokens.json | Liste plate résolue — pipeline Figma, scripts, autres langages | | react-native.js | Natif — lightTokens / darkTokens, hex et px numériques |

Deux conversions faites par le pipeline

OKLCH → hexadécimal. La palette est écrite en OKLCH ; React Native, Flutter et les clients e-mail ne le comprennent pas. build.mjs implémente la chaîne complète OKLCH → OKLab → LMS → sRGB linéaire → sRGB (matrices de Björn Ottosson, 2020) et attache un hex à chaque token couleur.

rem → px. Les dimensions sont exprimées en rem pour le web ; StyleSheet.create() n'accepte que des nombres. La conversion se fait dans le formatter natif, pas dans les sources.

Contrôle de contraste

check-contrast.mjs mesure 34 paires premier-plan / fond dans les deux thèmes et fait échouer le build sous le seuil WCAG AA (4,5:1 pour le texte, 3:1 pour les contours de composants). Il tourne automatiquement après chaque pnpm build.

Toute nouvelle combinaison de couleurs utilisée par un composant doit être ajoutée à la liste PAIRS — c'est elle qui fait foi, pas l'inspection visuelle.

Règles

1. Un composant ne consomme jamais la palette primitive, uniquement les tokens sémantiques. Sinon le thème sombre et le rebranding deviennent impossibles.
2. On n'édite jamais dist/ — il est gitignoré et régénéré par pnpm build.
3. Ajouter une plateforme = ajouter un formatter dans build.mjs. Le reste du pipeline (parsing, alias, aplatissement) est déjà mutualisé.