Plaza (Wii U / 3DS) et Chrome (Y2K) ne sont pas des styles à part : ce sont des variantes de M3 Expressive. Elles partent des mêmes composants, des mêmes rôles de couleur et des mêmes règles UX, et ne changent que la matière posée dessus. Elles fonctionnent donc avec Material You : couleurs du fond d'écran sur Android 12+, couleur source choisie dans les réglages, thème clair ou sombre.
La règle d'or
Une variante ne définit aucune teinte. Elle ne lit que des rôles M3 (primary, on-primary, secc, on-secc, scl, sc, surface, pc, tc, tertiary, outline-v…) et n'ajoute que :
- des tokens de matière sans teinte :
gloss-hi,gloss-edge,shade,shadow-plaza,shadow-chrome; - des mélanges
color-mix(in oklab, <rôle>, white | black N%)pour les reflets et les arêtes ; - deux familles de police (
rounded,chrome) et des rayons.
Si une couleur en dur apparaît dans une variante, c'est un bug : elle ignorera la couleur source et cassera le thème sombre. La fiche MaterialYou montre les trois matières sur quatre couleurs source réelles.
Le look « console » vient de la couleur source
- Façon Wii U : couleur source cyan (Aqua #009ac7) + Plaza.
- Façon 3DS : couleur source rouge (Flame #d12228) + Plaza, avec le motif deux écrans.
- Façon Y2K : n'importe quelle source + Chrome ; une source bleue ou violette donne l'effet « lecteur multimédia 2001 ».
- Avec Material You actif, la source est le fond d'écran : la variante suit.
Plaza : Wii U / 3DS
L'interface comme un objet en plastique doux et brillant. Calme, accueillant, un peu ludique.
| Élément | Recette à partir des rôles |
|---|---|
| Fond | rayures horizontales surface / sc, 1px tous les 7px |
| Bulle (bouton, panneau, tuile) | gloss-hi en dégradé sur scl, contour outline-v, shadow-plaza |
| Action principale (gel) | dégradé primary mélangé à 45 % de blanc vers primary, reflet blanc sur la moitié haute, texte on-primary |
| Action secondaire | même gel sur secc, texte on-secc |
| Danger | même gel sur error, texte on-error |
| Champ, piste | creux scc (ou schh) + ombre interne shade |
| Sélection de tuile | cadre 3px primary |
| Pastille de notification | tertiary / on-tertiary |
| Statut | ok, warn, bad, fixes |
- Typographie :
rounded(M PLUS Rounded 1c) en 700 et 800 pour titres et boutons, 500 pour le texte. - Icônes : Material Symbols Rounded, comme en M3E.
- Mouvement :
--ease-springsur les switchs et la sélection ; à l'appui, la bulle s'enfonce de 1px et perd son ombre. - Formes : les formes M3E se posent dans des tuiles brillantes ; la tuile sélectionnée prend un cadre
primary. - Motif 3DS (
pz-dual) : un écran du haut pour lire (résumé, chiffre clé), un écran du bas plus étroit pour toucher (actions). Utile sur mobile quand un écran a un chiffre clé et deux ou trois actions. - À éviter : un dégradé sur du texte, des rayures sous du texte long, plus d'un gel
primarypar zone.
Chrome : Y2K
Métal poli, gel, LEDs. Plus technique et nerveux : naturellement adapté aux outils techniques (tableaux de bord, consoles d'administration).
| Élément | Recette à partir des rôles |
|---|---|
| Fond | surface avec halos pc (coin haut droit) et tc (coin bas gauche) |
| Métal (boutons, barres, pouces) | secc en quatre arrêts : +55 % blanc, secc à 48 %, +18 % noir à 52 %, secc. Texte on-secc |
| Action principale (gel) | primary en quatre arrêts avec cassure à 50 %, texte on-primary |
| Panneau | verre dépoli : surface à 70 % + flou, contour outline-v, liseré gloss-edge |
| Accent acide | tertiary / on-tertiary, une touche par écran |
| LED, jauge | LED en ok / bad, jauge segmentée en primary |
- Formes : coins asymétriques (4px / 18px) pour panneaux, champs et chips ; les boutons restent des pilules.
- Icônes : Material Symbols Sharp (angles vifs).
.y2k .msbascule automatiquement. - Typographie :
chrome(Michroma) en capitales espacées, uniquement pour titres, boutons, chips et barres. Le texte courant reste en Google Sans Flex. - À éviter : le chrome sur de grandes surfaces, Michroma en texte courant, une LED colorée avec
primary(elle mentirait sur l'état avec une source verte ou rouge).
Ce qui ne change jamais
- Les composants, leur anatomie et leurs tailles de cible.
- Les règles UX.
- Les statuts
ok,warn,bad. - Les contrastes : la variante pose le texte sur le même rôle qu'en M3 (
on-primarysur le gelprimary,on-seccsur le métalsecc), donc le contraste Material You est conservé. - La structure de l'écran : la variante change la matière, elle ne redessine jamais la page.
Le test du changement à chaud
On doit pouvoir passer d'Expressive à Plaza ou à Chrome à chaud, sans qu'un écran se casse : même hiérarchie, mêmes zones cliquables, mêmes états, mêmes libellés, mêmes espacements, mêmes points de rupture. Seule la matière bouge.
Ce n'est pas une fonctionnalité à livrer, c'est le test qui dit si les trois matières appartiennent encore au même design language. Un écran qu'il faut redessiner pour changer de matière est un écran qui a laissé la matière décider de sa structure, et donc un composant à corriger — pas une variante à adapter. Si les trois versions d'un même écran ne se ressemblent plus du tout, ce n'est plus trois matières mais trois produits.
Comment l'adopter
- Garder la génération des rôles depuis la couleur source (material-color-utilities sur le web,
ColorScheme.fromSeedouDynamicColorBuilderen Flutter). - Ajouter un réglage « Style » : Expressive, Plaza ou Chrome, à côté de Thème et Couleur. Il pose
.plazaou.y2k(ou l'équivalent Flutter : unThemeExtensionde matière). - Migrer composant par composant : boutons et cartes d'abord, puis champs et navigation.