Alias sémantiques

Couche d’abstraction au-dessus des primitifs. C’est ce qu’un composant doit consommer. Ces alias changent automatiquement entre thème clair et sombre, garantissant la portabilité sans recompilation.

Concrètement : var(--color-text-primary) est neutral-900 en clair et neutral-50 en sombre. Le composant n’a pas à le savoir.

Marque

Couleur primaire et ses déclinaisons d'état.

brand / primary

--color-brand-primary --color-primary-500

brand / primary-hover

--color-brand-primary-hover --color-primary-600

brand / primary-active

--color-brand-primary-active --color-primary-700

brand / primary-subtle

--color-brand-primary-subtle --color-primary-50

brand / on-primary texte sur fond primary

--color-brand-on-primary --color-neutral-0

Surfaces

Fonds des conteneurs (page, cartes, sections).

surface / base fond principal de la page

--color-surface-base --color-neutral-0

surface / muted sections atténuées

--color-surface-muted --color-neutral-50

surface / subtle séparation discrète

--color-surface-subtle --color-neutral-100

surface / inverse fond sombre (banner, code)

--color-surface-inverse --color-neutral-900

Texte

Hiérarchie de couleurs pour le texte.

text / primary corps de texte

--color-text-primary --color-neutral-900

text / secondary titres secondaires, métadonnées

--color-text-secondary --color-neutral-600

text / muted aide, légendes

--color-text-muted --color-neutral-500

text / inverse sur fond sombre

--color-text-inverse --color-neutral-0

text / disabled éléments désactivés

--color-text-disabled --color-neutral-400

text / link liens hypertexte

--color-text-link --color-primary-500

Bordures

Lignes de séparation et contours.

border / subtle séparation discrète

--color-border-subtle --color-neutral-200

border / default bordure standard (input, card)

--color-border-default --color-neutral-300

border / strong bordure marquée

--color-border-strong --color-neutral-500

border / focus anneau de focus

--color-border-focus --color-primary-500

Feedback

Couleurs sémantiques pour les états applicatifs.

feedback / success

--color-feedback-success --color-success-500

feedback / warning

--color-feedback-warning --color-warning-500

feedback / danger

--color-feedback-danger --color-danger-500

feedback / info

--color-feedback-info --color-info-500