Classes CSS utilitaires

Une seule classe utilitaire est livrée, et c'est délibéré : un design system qui livre des utilitaires entre en concurrence avec le framework que le consommateur a déjà choisi.

Sort un élément de la vue tout en le laissant dans l'arbre d'accessibilité, ce qu'exige un libellé dont un lecteur d'écran a besoin et dont un lecteur voyant n'a que faire. Elle vit dans vectis.utilities, la couche la plus forte, et l'emporte donc sur n'importe quelle règle de composant.

css

.v-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Notez ce qu'elle n'est PAS. display: none et visibility: hidden retirent l'élément de l'arbre d'accessibilité autant que de la page, et width: 0 est annoncé par certains lecteurs d'écran et sauté par d'autres. C'est le rognage qui la garde lisible et invisible à la fois.

Les couches

Quatre, déclarées dans cet ordre, et l'ordre est tout le modèle de surcharge :

css

@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;

/* your rule, in no layer at all, wins */
.checkout-cta { border-radius: 9999px; }

Tout style non calqué écrit côté consommateur l'emporte automatiquement. Écrivez une règle sans couche, ou écrivez dans vectis.utilities. Jamais de guerre de spécificité, et jamais d'!important. Chaque ligne de CSS de ce site emprunte ce chemin : sa mise en page, ses polices et son accent sont tous des règles non calquées posées par-dessus la bibliothèque.

Un piège vient avec. Un nom de couche est GLOBAL et non préfixé : écrire @layer vectis.components { … } dans votre propre feuille met votre règle à l'intérieur de la couche de la bibliothèque, où elle est arbitrée par l'ordre ci-dessus au lieu de l'emporter dessus. Laisser votre CSS sans couche est à la fois plus simple et plus fort.

Les classes internes que vous verrez dans le DOM

Ce n'est pas une API. Elles sont nommées ici parce que vous les lirez dans les devtools, et parce qu'une surcharge ciblée a besoin du bon point d'accroche. Elles peuvent changer ; une propriété personnalisée, non.

Classe	Ce qui la porte
`.v-control`	Tout contrôle. Elle lit la table des tailles et publie `--control-height`, `--control-padding-inline`, `--control-font-size` et `--control-gap` pour ses enfants.
`.v-panel`	Le décor commun des panneaux flottants : surface de survol, bordure de 1px, `radius-overlay`, `shadow-lg`.
`.v-overlay` · `.v-floating`	Le placement dans la couche supérieure et l'animation d'entrée ancrée (fondu plus `scale(0.97)`).
`.v-tone`	La table des tons, sur l'élément qui porte `data-tone`. Elle publie `--tone-bg-solid`, `--tone-text-tinted` et les leurs, que les variantes consomment.
`.v-icon-symbol`	Une icône rendue en ligature de police plutôt qu'en tracé intégré.
`[data-theme]`	Pas une classe : l'unique signal du document. Il déplace les rôles et pilote `color-scheme`.

Les propriétés personnalisées à viser

Préférez repointer une propriété à réécrire une règle : --vectis-color-accent, --vectis-radius-interactive, --vectis-icon-size, --vectis-focus-ring-color, --vectis-text-family-heading. Un composant les lit à chaque rendu, si bien que le changement suit tous ses états, survol, focus et désactivé compris, sans qu'aucun d'eux soit redit.