Données de démonstration tirées du portail Maitre'D (période Last 7 days). Les valeurs de la période précédente sont estimées.
Assemblages de composants L1 avec leur propre mise en page et leur comportement. Les 53 premiers suivent la numérotation d'Aura (L2-01 à L2-53, sans L2-29 à L2-33 qui sont ajoutés ici) ; L2-54 à L2-57 complètent la liste. Les exemples sont interactifs quand c'est utile.
Panneau arrondi .app-panel-rounded
Votre propre tableau de bord.
| Chèque | Ouvert à | Serveur | Total | Annulé | ||
|---|---|---|---|---|---|---|
| 380 | 30 sept. 2026, 14:18 | Giancarlo Manager | 39,34 $ | Non | ||
| 3 | 30 sept. 2026, 12:07 | Michel Untel | 1,89 $ | Non | ||
| 30 | 29 sept. 2026, 16:59 | Jagdeep Manager | -5,18 $ | Non | ||
| 11 | 24 sept. 2026, 18:39 | Michel Untel | 54,62 $ | Oui |
Suivez vos tickets de support auprès de PayFacto.
| Catégorie | Part | Montant |
|---|---|---|
| Hamburgers | 49,15 % | 29,00 $ |
| Appetizers | 27,12 % | 16,00 $ |
| Mains | 20,34 % | 12,00 $ |
| Drinks | 3,39 % | 2,00 $ |
| Groupe / catégorie / article | Qté | % global | Revenu |
|---|---|---|---|
| expand_moreFood | 14 | 96,61 % | 57,00 $ |
| Appetizers | 3 | 27,12 % | 16,00 $ |
| Hamburgers | 2 | 49,15 % | 29,00 $ |
| Mains | 1 | 20,34 % | 12,00 $ |
| expand_moreNon Alc Beverages | 1 | 3,39 % | 2,00 $ |
| Drinks | 1 | 3,39 % | 2,00 $ |
| Total général | 15 | 100,00 % | 59,00 $ |
Non, le remboursement suit vos ventes par carte.
Après la validation du dossier par un spécialiste.
Remplissez les champs obligatoires pour voir un aperçu.
Éléments atomiques du portail : chaque composant est montré avec ses variantes et ses états (par défaut, survol, focus, erreur, chargement, désactivé). Les exemples sont interactifs.
data-brand="maitred"
La palette du portail branchée sur les tokens sémantiques d'Aura, en OKLCH. Les composants L1, L2 et la page L3 n'ont pas changé : seules les valeurs des tokens sont remplacées, et presque toutes sont calculées à partir d'une couleur source. Les icônes de la barre du haut permettent de comparer avec le thème Aura d'origine (étincelles) et de passer du mode clair au mode sombre (soleil ou lune).
| Rôle | Clair | Sombre |
|---|---|---|
| Fond de page | ||
| Panneau (opaque) | ||
| Carte | ||
| Tuile d'icône | ||
| Texte | ||
| Texte secondaire | ||
| Séparateur |
| Rôle Maitre'D | Jetons Aura remplacés |
|---|---|
| Accent (source) | --mt-accent → --brand-default, --color-primary-500, --color-orange-500, --series-1 |
| Accent foncé / clair, rampe | --color-primary-50 à -950 (et --color-orange-*), calculés par --ramp-top, --ramp-bottom et un poids par palier |
| Survol et pressé de l'accent | --brand-hover, --brand-active (formule d'Aura, doses --brand-hover-shade, --brand-active-shade) |
| Texte sur l'accent | --text-on-brand, choisi selon --on-brand-threshold |
| Teinte claire, ligne active | --brand-subtle (palier 50 en clair, accent à --state-selected-amount en sombre) |
| Survol et pressé neutres | --state-hover, --state-pressed, appliqués aux boutons, pills, navigation, menus et lignes de tableau |
| Fond de page, panneau | --surface-canvas ; --surface-panel (fond opaque de .app-sidebar : carte à 50 % en clair, texte à 5 % en sombre, mélangés sur la page) |
| Carte, tuile d'icône | --surface-overlay ; --surface-sunken (et --surface-raised pour les en-têtes de tableau) |
| Texte, texte secondaire, séparateur | --text-primary, --text-secondary, --border-subtle, --border-strong (séparateurs dérivés de la couleur du texte) |
| Gris | --color-neutral-0 à -1000, teintés par --mt-neutral-c et --mt-neutral-h |
| Statuts | --color-success|warning|danger|info avec -bg, -fg, -border, dérivés de --mt-success|warning|error|info |
| Séries 1 à 6 | --series-1 à --series-6 (les séries 7 et 8 restent celles d'Aura) |
| Ombres, barres de période précédente | --shadow-color, --shadow-color-ambient, --bar-previous |
| Token | Formule (OKLCH) | Résultat actuel |
|---|---|---|
--color-primary-500 (accent, source) | oklch(0.696 0.194 43) | |
--color-primary-400 (accent clair) | oklch(from accent calc(l + (top - l) * 0.21) calc(c * (1 - 0.21 * fade)) h) | |
--color-primary-50 (teinte claire) | oklch(from accent calc(l + (top - l) * 0.96) calc(c * (1 - 0.96 * fade)) h) | |
--color-primary-600 (accent foncé) | oklch(from accent calc(l + (bottom - l) * 0.15) calc(c * (1 - 0.15 * fade)) h) | |
--color-primary-950 | oklch(from accent calc(l + (bottom - l) * 0.93) calc(c * (1 - 0.93 * fade)) h) | |
--brand-hover (formule d'Aura, dose réglable) | color-mix(in oklch, accent calc(100% - var(--brand-hover-shade)), black) | |
--brand-active | color-mix(in oklch, accent calc(100% - var(--brand-active-shade)), black) | |
--text-on-brand (automatique) | oklch(from accent clamp(0.218, (var(--on-brand-threshold) - l) * 1000, 0.99) 0 0) | |
--state-hover (survol neutre) | oklch(from var(--text-primary) l c h / var(--state-hover-amount)) | |
--state-pressed (pressé neutre) | oklch(from var(--text-primary) l c h / var(--state-pressed-amount)) | |
--brand-subtle (ligne active) | light-dark(primary-50, oklch(from accent l c h / var(--state-selected-amount))) | |
--color-success-bg (idem avertissement, erreur, info) | light-dark(oklch(from base var(--status-bg-l) calc(c * var(--status-bg-c)) h), color-mix(in oklch, base 16%, transparent)) | |
--color-success-fg | light-dark(oklch(from base var(--status-fg-l-light) calc(c * 0.95) h), oklch(from base var(--status-fg-l-dark) calc(c * 0.85) h)) | |
--border-subtle | light-dark(oklch(from text l c h / 0.12), oklch(from text l c h / 0.16)) |
La colonne « Résultat actuel » n'est pas écrite à la main : elle est relue dans le navigateur et se met à jour quand vous changez de mode, de thème ou de curseur (le navigateur arrondit parfois le dernier chiffre, à 0,001 près). accent désigne --mt-accent, base la couleur du statut, top et bottom les réglages --ramp-top et --ramp-bottom.
Le texte du bouton passe seul du blanc au foncé quand l'accent devient clair (seuil --on-brand-threshold). Les curseurs agissent sur cette page seulement.
| Réglage | Défaut | Effet |
|---|---|---|
--mt-accent | oklch(0.696 0.194 43) | Rampe, survol, pressé, focus, liens, ligne active, ombres, fond décoratif, texte sur l'accent |
--mt-success|warning|error|info | 4 couleurs | Fond, texte et bordure de chaque statut, en clair et en sombre |
--mt-neutral-c, --mt-neutral-h | 0, 0 | Chroma et teinte de tous les gris (0 = gris pur) |
--ramp-top, --ramp-bottom | 0.97, 0.16 | Luminosité des deux extrémités de la rampe d'accent |
--ramp-chroma-fade-light|dark | 0.90, 0.75 | Vitesse à laquelle le chroma s'estompe vers les extrémités |
--brand-hover-shade, --brand-active-shade | 15%, 25% | Part de noir mélangée à l'accent (formule d'Aura) |
--state-hover|pressed|selected-amount | 6%, 12%, 16% | Opacité de la couleur du texte posée sur la surface |
--on-brand-threshold | 0.75 | Luminosité de l'accent au-dessus de laquelle le texte devient foncé |
--status-* | 7 réglages | Luminosité et chroma des fonds, textes et bordures de statut |
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components.css"> <!-- + base, components-l2, motion -->
<link rel="stylesheet" href="maitred-theme.css"> <!-- après les feuilles d'Aura -->
<html data-brand="maitred"> <!-- retirer l'attribut pour revenir à Aura -->| Paire | Ratio | Verdict |
|---|---|---|
| Texte sur carte (clair / sombre) | 17,4 / 11,6 | Conforme |
| Statuts, texte sur fond (clair) | 7,56 à 8,78 | Conforme (AAA) |
| Statuts, texte sur fond (sombre) | 5,08 à 6,02 | Conforme |
| Texte secondaire sur carte (clair / sombre) | 3,95 / 5,63 | Clair sous le seuil |
Lien --brand-text sur carte (clair / sombre) | 3,96 / 5,43 | Clair sous le seuil |
| Texte de bouton sur l'accent | 2,85 | Sous le seuil |
| Texte de bouton au survol | 4,27 | Sous le seuil |
Les paires sous le seuil viennent de l'accent et du gris secondaire du portail. Pour que les boutons passent, descendre --on-brand-threshold sous la luminosité de l'accent (par exemple 0.65) bascule le texte en foncé, environ 5,9:1.