@luxflow/tokens

CSS design tokens for LuxFlow. Source de vérité pour toutes les variables --lf-*.

Exports

| Export | Rôle | |--------|------| | @luxflow/tokens/contract.css | 91 variables --lf-* canoniques — source de vérité | | @luxflow/tokens/compat.css | Aliases bare (--bg, --primary, etc.) → --lf-* | | @luxflow/tokens/semantics.css | Classes utilitaires (.lf-card, .lf-btn, etc.) | | @luxflow/tokens/theme.template.css | Template d'override projet (couvre 91/91 vars) | | @luxflow/tokens/package.json | Le manifeste — exporté parce que plusieurs outils le lisent |

⛔ Il n'y a PAS de point d'entrée racine, et c'est VOULU

import '@luxflow/tokens' échoue en ERR_PACKAGE_PATH_NOT_EXPORTED. Ce n'est pas un oubli.

[mesuré le 23/08/2026] Personne n'écrit from '@luxflow/tokens' — ni dans le monorepo, ni dans les projets consommateurs hors dépôt. Les 95 usages sont tous des sous-chemins CSS :

43  @luxflow/tokens/semantics.css        6  @luxflow/tokens/compat.css
41  @luxflow/tokens/contract.css         2  @luxflow/tokens/theme.template.css
 0  @luxflow/tokens          ← la racine

Ce paquet ne contient aucun JavaScript. Lui donner une clé . reviendrait à inventer un point d'entrée que personne ne demande, et qui devrait ensuite être maintenu. L'absence est documentée ici précisément pour qu'elle ne se lise pas comme un défaut — un ERR_PACKAGE_PATH_NOT_EXPORTED non expliqué finit toujours par être « corrigé ».

components.css n'est PAS exporté — également voulu

Il existe dans le tarball (files: ["src/*.css"] l'embarque) mais il est hors carte : c'est un stub deprecated (ADR-009), remplacé par @luxflow/ui/styles/components.css. Les trois mentions qui en restent dans le dépôt sont des interdictions, pas des usages.

Import order canonique

@import '@luxflow/tokens/contract.css';
@import '@luxflow/tokens/compat.css';
@import '@luxflow/ui/styles/components.css';
@import '@luxflow/tokens/semantics.css';

/* Puis dans theme/theme.css : overrides --lf-* uniquement */
:root {
  --lf-accent: #votre-couleur;
}

Créer un thème projet

cp node_modules/@luxflow/tokens/src/theme.template.css theme/theme.css

Tokens disponibles (102 variables --lf-*)

• Colors : --lf-bg, --lf-surface-1/2/3, --lf-text, --lf-titles, --lf-accent, --lf-accent-hover/-foreground/-ghost, --lf-border, --lf-muted
• Status : --lf-success, --lf-warning, --lf-danger, --lf-info, --lf-on-*, --lf-*-bg
• Spacing : --lf-gap-*, --lf-padding-*, --lf-margin-*, --lf-padding-section-*
• Containers : --lf-container-sm/md/lg/xl/nav
• Typography : --lf-font-sans, --lf-font-heading, --lf-font-mono, --lf-text-h1..h6, --lf-font-*, --lf-leading-tight/normal/relaxed
• Radius : --lf-radius-xs/sm/md/lg/xl/2xl/full
• Shadows : --lf-shadow-sm/md/lg/xl
• Z-index : --lf-z-base/raised/dropdown/sticky/header/modal/overlay/toast
• Motion : --lf-motion-duration-*, --lf-motion-easing-*

Les 11 élargissements du contrat (T-005, 18/08/2026)

Le contrat est passé de 91 à 102 variables. Chaque ajout répond à un usage mesuré dans le dépôt, pas à une anticipation. Les valeurs par défaut sont dérivées quand c'est possible, pour qu'un thème qui surcharge --lf-accent seul reste cohérent.

| Variable | Défaut | Justification | | --- | --- | --- | | --lf-success-bg --lf-warning-bg --lf-danger-bg --lf-info-bg | color-mix(in srgb, var(--lf-X) 10%, transparent) | 13 usages réclamaient une teinte de statut (rgba(…, 0.1) avec la couleur pleine sur la bordure ou le texte). Le contrat avait les couleurs de statut et leurs contrastes, jamais leurs fonds. | | --lf-accent-hover | color-mix(in srgb, var(--lf-accent) 90%, black) | Deux projets l'ont inventée indépendamment (iae-sport-site, test-landing). Réserve : ce défaut assombrit. Un thème sombre dont le survol doit éclaircir la surcharge — iae-sport-site le fait déjà (#e0952a en clair, #ffb347 en sombre). | | --lf-accent-foreground | #ffffff | Déclarée par iae-sport-site. Le défaut suppose un accent sombre ; avec un accent clair il faut le surcharger — iae-sport-site utilise #111111. | | --lf-accent-ghost | color-mix(… 12%, transparent) | Couvre trois usages distincts d'apps/os : anneau de focus, fond de survol, fond d'état actif. | | --lf-font-heading | var(--lf-font-sans) | Défaut neutre : un thème qui ne la surcharge pas garde une seule police. | | --lf-font-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | Le besoin existait sous trois formes concurrentes, dont six références à un --font-mono sans préfixe qui tombaient sur la police système. | | --lf-leading-normal --lf-leading-relaxed | 1.5 1.7 | Le contrat n'avait que --lf-leading-tight. Le 1.7 est le fallback déjà utilisé par les templates. |

Documentation complète

docs/TOKENS_THEME_CONTRACT.md