Centre de recette
Charte, composants et cas renvoyés par l'API, pour la recette du site. Servi seulement si TEST_CENTER_ENABLED est activé, jamais en production.
Tokens du thème, définis dans src/shared/styles/theme.css.
Couleurs
Palettes
Primary
- Token
- primary-50
- Classe
- bg-primary-50
- Figma
- Primary/50
- Token
- primary-100
- Classe
- bg-primary-100
- Figma
- Primary/100
- Token
- primary-200
- Classe
- bg-primary-200
- Figma
- Primary/200
- Token
- primary-300
- Classe
- bg-primary-300
- Figma
- Primary/300
- Token
- primary-400
- Classe
- bg-primary-400
- Figma
- Primary/400
- Token
- primary-500
- Classe
- bg-primary-500
- Figma
- Primary/500
- Token
- primary-600
- Classe
- bg-primary-600
- Figma
- Primary/600
- Token
- primary-700
- Classe
- bg-primary-700
- Figma
- Primary/700
- Token
- primary-800
- Classe
- bg-primary-800
- Figma
- Primary/800
- Token
- primary-900
- Classe
- bg-primary-900
- Figma
- Primary/900
Neutral
- Token
- neutral-50
- Classe
- bg-neutral-50
- Figma
- Neutral/50
- Token
- neutral-100
- Classe
- bg-neutral-100
- Figma
- Neutral/100
- Token
- neutral-200
- Classe
- bg-neutral-200
- Figma
- Neutral/200
- Token
- neutral-300
- Classe
- bg-neutral-300
- Figma
- Neutral/300
- Token
- neutral-400
- Classe
- bg-neutral-400
- Figma
- Neutral/400
- Token
- neutral-500
- Classe
- bg-neutral-500
- Figma
- Neutral/500
- Token
- neutral-600
- Classe
- bg-neutral-600
- Figma
- Neutral/600
- Token
- neutral-700
- Classe
- bg-neutral-700
- Figma
- Neutral/700
- Token
- neutral-800
- Classe
- bg-neutral-800
- Figma
- Neutral/800
- Token
- neutral-900
- Classe
- bg-neutral-900
- Figma
- Neutral/900
Blanc et noir
- Token
- white
- Classe
- bg-white
- Figma
- White
- Token
- black
- Classe
- bg-black
- Figma
- Black
Couleurs liturgiques
- Token
- liturgy-violet
- Classe
- bg-liturgy-violet
- Figma
- Temps liturgique
Fraîcheur d'un horaire et erreurs de saisie
- Token
- status-green
- Classe
- bg-status-green
- Figma
- Dernière maj (pastille)
- Token
- status-orange
- Classe
- bg-status-orange
- Token
- status-red
- Classe
- bg-status-red
Rôles
Les composants emploient les rôles, jamais directement les palettes.
Aa — Messe du dimanche
Cartes, barre de recherche
- Token
- surface
- Source
- white
Aa — Messe du dimanche
Bandeau d'en-tête
- Token
- surface-muted
- Source
- neutral-50
Aa — Messe du dimanche
Puces, survol, emplacement photo
- Token
- surface-subtle
- Source
- neutral-100
Aa — Messe du dimanche
Bordures de cartes, séparateurs
- Token
- line
- Source
- neutral-200
Aa — Messe du dimanche
Boutons contour
- Token
- line-strong
- Source
- neutral-900
Aa — Messe du dimanche
Texte courant, libellés
- Token
- fg
- Source
- neutral-900
Aa — Messe du dimanche
Titre d'accueil
- Token
- fg-heading
- Source
- neutral-800
Aa — Messe du dimanche
Heures, titres de cartes
- Token
- fg-secondary
- Source
- neutral-700
Aa — Messe du dimanche
Informations secondaires, texte indicatif des champs
- Token
- fg-muted
- Source
- neutral-500
Aa — Messe du dimanche
Bouton plein, puce sélectionnée
- Token
- action
- Source
- neutral-900
Aa — Messe du dimanche
Texte sur fond d'action
- Token
- on-action
- Source
- white
Aa — Messe du dimanche
Fond de la visionneuse plein écran, à 95 % d'opacité
- Token
- scrim
- Source
- black
Aa — Messe du dimanche
Légende sur le fond de la visionneuse
- Token
- on-scrim
- Source
- white
Aa — Messe du dimanche
Pastille d'un horaire confirmé (EXIG-FO-12)
- Token
- fresh
- Source
- status-green
Aa — Messe du dimanche
Pastille d'un horaire à vérifier (EXIG-FO-12)
- Token
- to-verify
- Source
- status-orange
Aa — Messe du dimanche
Message et bordure d'un champ de formulaire invalide
- Token
- error
- Source
- status-red
Aa — Messe du dimanche
Repère d'une date dans un calendrier (fête religieuse)
- Token
- accent
- Source
- primary-500
Aa — Messe du dimanche
Anneau de focus
- Token
- focus
- Source
- primary-600
Typographie
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- display-sm
- Classe
- text-display-sm font-medium
- Figma
- M3/display/small
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- title-lg
- Classe
- text-title-lg font-medium
- Figma
- M3/title/large
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- title-md
- Classe
- text-title-md font-semibold
- Figma
- M3/title/medium
Trouvez une célébration, partout en France
- Token
- title-sm
- Classe
- text-title-sm
- Figma
- M3/title/small
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- body-lg
- Classe
- text-body-lg font-medium
- Figma
- M3/body/large
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- body-md
- Classe
- text-body-md font-medium
- Figma
- M3/body/medium
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- body-sm
- Classe
- text-body-sm font-medium
- Figma
- M3/body/small
Trouvez une célébration, partout en France
- Token
- label-lg
- Classe
- text-label-lg
- Figma
- M3/label/large
Trouvez une célébration, partout en France
- Token
- label-md
- Classe
- text-label-md
- Figma
- M3/label/medium
Trouvez une célébration, partout en France
- Token
- label-sm
- Classe
- text-label-sm
- Figma
- M3/label/small
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- caption-md
- Classe
- text-caption-md font-medium
- Figma
- M3/label/medium, Regular
Trouvez une célébration, partout en France
Trouvez une célébration, partout en France
- Token
- caption-sm
- Classe
- text-caption-sm font-medium
- Figma
- M3/label/small, Regular
Rayons
- Token
- xs
- Classe
- rounded-xs
- Figma
- Corner/Extra-small
- Token
- sm
- Classe
- rounded-sm
- Token
- md
- Classe
- rounded-md
- Figma
- Corner/Medium
- Token
- lg
- Classe
- rounded-lg
Ombres
- Token
- raised
- Classe
- shadow-raised
- Token
- overlay
- Classe
- shadow-overlay
- Figma
- Drop shadow
Espacements
Un pas vaut 4 px.
- Token
- 1
- Classe
- w-1
- Token
- 1.5
- Classe
- w-1.5
- Token
- 2
- Classe
- w-2
- Token
- 3
- Classe
- w-3
- Token
- 4
- Classe
- w-4
- Token
- 6
- Classe
- w-6
- Token
- 8
- Classe
- w-8
- Token
- 12
- Classe
- w-12
- Token
- 16
- Classe
- w-16
Animations
Désactivées quand le visiteur demande moins d'animations (prefers-reduced-motion).
- Token
- sheet-in
- Classe
- animate-sheet-in
- Token
- sheet-out
- Classe
- animate-sheet-out
- Token
- fade-in
- Classe
- animate-fade-in
- Token
- fade-out
- Classe
- animate-fade-out
Focus visible
Chaque élément interactif affiche cet anneau à la navigation au clavier.