Composants & états

Rendu direct des classes de @orbity/design-system. Basculez le thème dans l’en-tête pour vérifier les deux palettes.

Bouton principal

reposchargement : le libellé change, pas seulement la couleurdésactivé

Bouton secondaire

reposdésactivé

Champ de saisie

repos, avec texte indicatifinvalide : l’erreur est aussi écritedésactivé

Étiquettes de phase

La jauge est décorative (aria-hidden) : c’est le mot qui porte l’information. Chaque étiquette rappelle sa définition au survol et au focus clavier, via aria-describedby, jamais l’attributtitle.

État de liaison, page d’état

Liaison établieLiaison dégradéeLiaison perdueLiaison inconnue

Famille et forme distinctes des phases : pastille ronde ici, jauge segmentée là-bas. Ne jamais mélanger les deux vocabulaires. La pastille creuse de « liaison inconnue » dit que rien n’a été mesuré, ce qui n’est pas la même chose qu’une mesure négative.

Messages d’état

Lien raccourci et copié dans le presse-papiers.

Cet outil interroge l’API d’Orbity : votre requête quitte le navigateur.

Adresse invalide : il manque le protocole (https://).

Bloc de sortie : ce que la machine produit

e3b0c44298fc1c149afbf4c8996fb924
27ae41e4649b934ca495991b7852b855

2001:db8::1
192.0.2.1

Palette du thème courant

--bgfond de page

--surfacecartes, champs

--surface-raisedsurvol de carte, popover

--borderséparateurs décoratifs

--border-strongcontours de champs · 4,7:1

--texttexte · 17,4:1 sur fond

--text-secondarysecondaire · 8,7:1

--text-muteddiscret · 5,9:1 sur surface

--accentpérivenche · 6,9:1 sur fond

--signalambre : focus et alertes

--successsuccès

--dangererreur

Typographie

Une constellation d’outils

Titre de section

Corps de texte en Inter. La mesure est limitée à 68 caractères pour rester confortable à lire, même sur un grand écran.

sorties d’outils : 192.0.2.1 · q7RmvX2t9Kd