Fondations

Fondations

Les fondations définissent les règles visuelles, structurelles et techniques qui assurent la cohérence du Design System.

Couleurs de fondation

Lecture fonctionnelle des tokens réellement utilisés par le Design System. Les couleurs proches sont regroupées en rampes pour montrer leur rôle plutôt que comme une simple liste de nuances.

Marque et actions

Couleurs qui portent l’identité, les actions principales et les accents éditoriaux.

--app-color-primary
Primary
action principale, liens actifs
--app-color-primary-hover
Primary hover
état pressé / hover fort
--app-color-primary-soft
Primary soft
fonds actifs doux
--app-color-secondary
Secondary
navigation active, contraste
--app-color-secondary-soft
Secondary soft
fonds secondaires discrets
--app-color-accent
Accent
accent éditorial
--app-color-accent-soft
Accent soft
fond d’accent éditorial

Rampe de surfaces

Ces tons proches construisent la profondeur : page, zones, cartes, panels et séparations légères.

Surfacesurface
Softsurface-soft
Backgroundbackground
Mutedbackground-muted
Neutralsurface-neutral
Mediumsurface-medium
Strongsurface-strong
--app-color-surface-glass
Surface glass
cartes et panels translucides
--app-color-overlay
Overlay
fond de modale
--app-color-overlay-soft
Overlay soft
surcouche discrète

Texte et bordures

Tokens de lisibilité et de structure. Ils ne servent pas de couleurs décoratives.

--app-color-text
Text
texte principal
--app-color-muted
Muted
texte secondaire
--app-color-text-soft
Text soft
texte discret
--app-color-text-inverse
Text inverse
texte sur fond sombre
--app-link-color
Link
lien par défaut
--app-link-active-color
Link active
lien actif
--app-color-border-soft
Border soft
séparations légères
--app-color-border
Border
bordure standard
--app-color-border-strong
Border strong
bordure accentuée

États sémantiques

Chaque état possède une couleur de texte ou d’icône, un fond doux et une bordure. Cette logique évite de multiplier les couleurs au cas par cas dans les composants.

--app-color-success
Success
validation
--app-color-success-bg
Success bg
fond succès
--app-color-success-border
Success border
bordure succès
--app-color-warning
Warning
attention
--app-color-warning-bg
Warning bg
fond attention
--app-color-warning-border
Warning border
bordure attention
--app-color-error
Error
erreur
--app-color-error-bg
Error bg
fond erreur
--app-color-error-border
Error border
bordure erreur
--app-color-info
Info
information
--app-color-info-bg
Info bg
fond information
--app-color-info-border
Info border
bordure information

Tokens d’usage composants

Ces variables ne créent pas de nouvelles couleurs. Elles affectent les couleurs de fondation aux composants configurables.

--app-card-background
Card background
cartes, listes, empty states
--app-card-border-color
Card border
bordure de carte
--app-card-active-border-color
Card active border
carte active ou sélectionnée
--app-panel-background
Panel background
panels et modales
--app-panel-border-color
Panel border
bordure de panel, fallback border
--app-page-header-background
Page header background
fond des page headers
--app-content-card-media-background
Content card media
zone média des content cards