Tokens
Les tokens sont les variables CSS de Hodi, comme var(--text-2). Un plugin les utilise dans ses styles à la place d'une valeur écrite en dur : une couleur de token change avec le thème (Sombre, Clair, Poudré), une couleur en dur ne change pas. Les pastilles de cette page suivent le thème choisi en haut du site.
Utiliser un token
Un token s'utilise avec var(), dans le fichier CSS de la partie web. Hodi définit chaque token sur sa page : le plugin n'a rien à importer.
.hello-world-answer {
color: var(--text-2);
border: 1px solid var(--border);
border-radius: var(--radius-card);
}Les composants de hodi:sdk utilisent déjà ces tokens. Un plugin n'en a besoin que pour ses propres classes.
Les fonds
Du plus profond au plus haut : la page, puis les colonnes, puis les cartes, puis les contrôles posés sur les cartes.
--bgLe fond de la page.
--columnLe fond des colonnes, et de la page sur un téléphone.
--cardLe fond d'une carte, et de la ligne active d'une liste.
--card-hoverLe fond d'une carte survolée dans une liste.
--controlLe fond des boutons, des champs et des pastilles.
--control-hoverLe fond d'un bouton ou d'un champ survolé.
--raisedLe fond d'un élément posé au-dessus d'une carte.
--tileLe fond du carré d'icône des états vides et des erreurs.
Les textes
--textLe texte principal : les titres, les libellés, les valeurs.
--text-strongUn texte un peu moins appuyé que --text.
--text-2Le texte secondaire : les descriptions et les lignes d'aide.
--text-3Le texte discret : les légendes, les icônes au repos.
--text-faintLe texte le plus effacé : un état désactivé.
Les bordures
--borderLa bordure de chaque contrôle et de chaque carte.
--border-strongUne bordure plus marquée, au survol par exemple.
--dividerLa ligne entre deux sections.
L'accent
L'accent est la couleur de la marque : le point du logo, l'onglet actif, les compteurs. Il vaut rouille dans Sombre et Clair, rose dans Poudré, ou la couleur d'accent qu'un profil a choisie dans ses réglages.
--rustLa couleur d'accent elle-même.
--rust-textUn texte dans la couleur d'accent.
--rust-strongUn texte d'accent plus marqué que --rust-text.
--rust-surfaceUn fond teinté d'accent.
--rust-surface-2Un fond teinté d'accent, plus soutenu.
--rust-borderUne bordure dans la couleur d'accent.
--link-hoverUn lien survolé.
Les états
Le rouge dit qu'une chose a échoué ou va être supprimée. Le vert dit qu'une chose est acceptée. Le jaune avertit.
--dangerUne erreur : son texte et son icône.
--destructiveLe fond d'un bouton de suppression (look="danger").
--destructive-borderLa bordure d'un bouton de suppression.
--destructive-textLe texte d'un bouton de suppression.
--approveLe fond d'une chose acceptée.
--approve-borderLa bordure d'une chose acceptée.
--approve-textLe texte d'une chose acceptée.
--warningUn avertissement.
L'IA
Le violet marque un clic qui dépense des crédits d'IA, comme le bouton AiButton.
--aiLa couleur de l'IA : une icône, un trait.
--ai-surfaceLe fond d'une zone d'IA.
--ai-borderLa bordure d'une zone d'IA.
--ai-textLe texte principal d'une zone d'IA.
--ai-text-2Le texte secondaire d'une zone d'IA.
L'information
Le bleu marque une note qui explique comment marche un écran.
--info-surfaceLe fond d'une note d'information.
--info-borderLa bordure d'une note d'information.
--info-iconL'icône d'une note d'information.
--info-textLe texte d'une note d'information.
Les thèmes de l'actu
Chaque thème de l'actu a sa couleur : Belgique, Monde, Tech… Un élément avec l'attribut data-topic reçoit les trois tokens de ce thème. Les pastilles ci-dessous montrent le thème tech.
<span className="hello-world-topic" data-topic="tech">
Tech
</span>--topicLa couleur du thème.
--topic-borderUne bordure dans la couleur du thème, atténuée.
--topic-surfaceUn fond très sombre dans la couleur du thème.
Les calques
--glassLe fond d'un bouton flottant au-dessus d'une image.
--scrimLe voile derrière une fenêtre ouverte.
--shadowL'ombre d'un élément qui flotte.
Les polices
--font-bodyLe texte courant (Geist).
--font-monoLes légendes, les métadonnées et le code (Geist Mono).
--font-displayLes grands titres, en capitales (Bebas Neue).
Les arrondis
--radius-thumb10 px : une vignette, une image.
--radius-card16 px : une carte.
--radius-panel20 px : une fenêtre, un grand panneau.
--radius-pillUne pilule : un bouton, une pastille.
Le mouvement
Chaque transition de Hodi est douce : rien ne saute. Une transition de plugin utilise les mêmes valeurs.
.hello-world-card {
transition: background var(--duration) var(--ease);
}--duration160 ms : la durée d'une transition.
--easeLa courbe d'une transition, cubic-bezier(0.2, 0, 0, 1).