@cadence-app/theme

Les tokens de design de Cadence, sur trois niveaux : primitive porte la palette brute, semantic lui donne un sens, component traite les cas particuliers. Une référence regarde son propre niveau puis ceux d'en dessous, jamais au-dessus — la palette ne peut donc pas dépendre d'un composant. Zéro dépendance.

Installation

pnpm add @cadence-app/theme

Un preset

definePreset fusionne des surcharges dans un preset existant, sans le modifier. Les clés absentes du preset de base sont refusées à la compilation.

import { basePreset, definePreset } from '@cadence-app/theme';

const preset = definePreset(basePreset, {
  semantic: { accent: { background: '{green.500}' } },
  component: { button: { radius: '{radius.full}' } },
});

Une valeur littérale (#64748b, 12rpx) ou une chaîne portant des références (1px solid {surface.border}) sont toutes deux acceptées.

Pour écrire un preset de zéro, le déclarer avec satisfies Preset plutôt qu'avec une annotation de type : l'annotation efface les clés littérales dont definePreset a besoin.

La feuille de styles

import { themeSheetFor } from '@cadence-app/theme';

const css = themeSheetFor(preset);

Chaque token devient une propriété CSS préfixée par --cadence-. La feuille porte trois blocs de couleur, parce que le lecteur a trois états : le réglage système décide tant que personne n'a tranché, et un choix explicite l'emporte dans les deux sens.

:root { --cadence-accent-background: #14161a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-cadence-color-scheme='light']) { --cadence-accent-background: #eff1f5; }
}
:root[data-cadence-color-scheme='dark'] { --cadence-accent-background: #eff1f5; }

Les deltas de plateforme viennent ensuite, sous [data-cadence-platform='android'] par exemple. Ils ne portent aucune couleur, donc ils ne défont jamais le schéma sombre.

La résolution

resolveTokens(preset) rend une Map de chemins vers valeurs, toutes références résolues. Les défauts lèvent une erreur typée plutôt que de laisser passer une valeur fausse : UnknownTokenReferenceError, CircularTokenReferenceError, TokenShapeMismatchError, InvalidTokenValueError, DuplicateCustomPropertyError, UnknownTokenPathError.

Licence

MIT