Fondations

Modes : métier, thème, densité

stable

Les trois attributs

Attribut	Valeurs	Effet
`data-activity`	`poissonnerie` (défaut), `boucherie`	rebranche `--brand`, `--accent`, `--nav*`, `--info`, `--chart-1`, `--chart-5`
`data-theme`	`light` (défaut), `dark`, `auto`	surfaces, encre, filets, états ; `auto` suit le système
`data-density`	`normal` (défaut), `compact`, `touch` ; `auto` côté script	tailles de texte, hauteur des contrôles (38, 34, 48 px), lignes, icônes, cases

Les boutons en haut de cette page font exactement cela. Le métier peut aussi se poser sur une vue ou une carte seule (<section data-activity="boucherie">) pour un écran de comparaison ; le thème et la densité restent globaux.

Dans une application

// Vue 2 + Vuetify 2 : le plugin pose les attributs et aligne les couleurs Vuetify
Vue.use(HublotVuetify2, { vuetify, activity: 'poissonnerie', density: 'compact' })
this.$hublot.setActivity(shop.activity)   // au changement de rayon
this.$hublot.setTheme('dark')             // bouton de thème : 'light' | 'dark' | 'auto'

// Sans Vuetify (site, WebView, Vue 3)
window.Hublot.setMode({ activity: 'boucherie', density: 'touch' })
window.Hublot.getMode()   // { activity, theme (résolu), density }
window.Hublot.token('brand')   // la valeur calculée du token sur <html>

Densité

normal : magasin et site. compact : crm-front, beaucoup de données par écran. touch : tablette en rayon, iPhone, iPad au doigt : contrôles de 48 px, lignes de 56 px, cases de 28 px, texte à 17 px (la taille du texte courant d'iOS).
auto : Hublot.setMode({ density: 'auto' }) (ou useHublotTheme({ density: 'auto' })) pose touch quand le pointeur principal est le doigt, normal sinon, et suit le changement (un iPad qui reçoit son clavier à pavé tactile repasse en normal). C'est le bon choix pour magasin, ouvert aussi bien sur un poste que sur une tablette ou un téléphone.
Sur tablette, poser data-density="touch" au lancement plutôt que des classes -touch une à une ; ces classes restent pour forcer un élément hors densité (un grand bouton de validation sur un écran compact).
Un écran est conçu dans sa densité cible, puis vérifié dans les deux autres : un tableau prévu en compact doit encore tenir en touch.

Thème

Le thème sombre est servi tel quel par les tokens : aucun composant n'écrit de couleur en dur, donc tout suit. Les contrôles natifs (sélecteurs, barres de défilement, champs date d'iOS) suivent aussi, par color-scheme. Un changement de thème passe par un fondu enchaîné quand le navigateur le permet. L'exception voulue : la barre latérale est sombre dans les deux thèmes.