Fondations
Focus & sélection
Un seul anneau de focus pour toutes les surfaces Forme, et un état « sélectionné » qui se lit sans couleur. L'accent Forme est monochrome : un anneau d'accent devenait un trait blanc dur en sombre. L'anneau est donc gris, et seulement au clavier.
Tokens
| Token | Valeur (clair · sombre) | Usage |
|---|---|---|
--focus-outline-width | 2px | Épaisseur unique de l'anneau. |
--focus-outline-style | solid | Trait plein, jamais pointillé. |
--focus-outline-color | #737373 · #a3a3a3 | Gris moyen : ≥ 3:1 sur tous les fonds (4.7:1 sur blanc, 6.4:1 sur #262626). |
--focus-outline-offset | 2px | Air entre le contrôle et l'anneau. Rangées : −2 px (en retrait). |
--color-accent-muted | 8 % · 11 % d'encre | Fond « sélectionné » : rangée choisie, ligne de tableau, plage de dates, option courante. |
Définis dans formeTheme (design-system ≥ 0.3.9). Astryx dessine l'anneau
de tous ses composants à partir de ces tokens ; une règle maison les réutilise, elle ne redéfinit
jamais une couleur, une épaisseur ou un rayon de focus.
Contrôle isolé — autour
Bouton, champ, puce, lien : l'anneau entoure le contrôle à 2 px. Appuie sur Tab pour le voir.
Un champ texte ne prend pas d'anneau : sa bordure passe au même gris (--color-focus-ring).
Rangée — en retrait
Dans une liste, un menu, un arbre ou la navigation, l'anneau se pose à l'intérieur de la rangée. Un anneau extérieur est rogné par le conteneur qui défile et déborde sur les rangées voisines. La rangée choisie porte un fond neutre et un repère d'encre à gauche ; le survol reste plus léger et ne masque jamais la sélection.
Règles
- Clavier seulement :
:focus-visible(ou:has(:focus-visible)pour une rangée), jamais:focusni:focus-withinseuls. - Un anneau à la fois : le filet global d'une app est en
:where()(spécificité nulle) et ne passe jamais par-dessus un composant Astryx. - Pas de rayon forcé au focus : l'anneau suit le rayon du contrôle.
- Sélection ≠ survol ≠ focus : fond 8–11 % pour le choix, 5 % pour le survol, anneau pour le clavier. Un composant maison qui a les trois les garde distincts.
- Pas de texte « Sélectionné : … » en béquille : la rangée suffit. On ne rappelle le choix en texte que s'il sort de la vue (liste filtrée).