Design tokens
Les tokens sémantiques que Vectis UI expose sous forme de variables CSS, avec ce que chacun contrôle et sa valeur par défaut. Ce sont les noms à surcharger pour adapter la bibliothèque à votre propre design ou à votre charte graphique.
Quand une valeur pointe vers un autre token, le tableau l'affiche deux fois : la valeur à laquelle elle se résout, puis la référence telle que la feuille de styles l'écrit, par exemple var(--vectis-color-gray-900). Surcharger le rôle garde cohérents tous les composants qui le lisent, alors que modifier la primitive derrière lui modifie aussi tous les autres rôles qui pointent vers elle.
Les primitives (les cinq palettes et les échelles d'espacement, de typographie, de rayons, d'ombres et de durées) ne sont pas listées à part : elles apparaissent dans ces références. La façon de surcharger un token pour toute la page ou pour une partie seulement est expliquée sur la page Thématisation.
Ce site redéfinit son propre accent en violet : les boutons et les liens autour de ces tableaux ne correspondent donc pas aux valeurs indigo par défaut qui y sont listées.
Couleurs
Surfaces, texte, bordures et les quatre tons. Chaque ton est une famille de six rôles : la couleur pleine, ses états survolé et appuyé, une surface teintée, la bordure assortie à cette surface et une couleur de texte qui y reste lisible. Les trois couleurs d'événement du calendrier contiennent une variable de teinte que le calendrier pose sur chaque événement, d'où sa présence dans leur valeur.
| Token | Description | Clair | Sombre |
|---|---|---|---|
| Surfaces | |||
--vectis-color-surface | Le fond de page par défaut | oklch(100% 0 0)var(--vectis-color-white) | oklch(13% 0.028 261.692)var(--vectis-color-gray-950) |
--vectis-color-surface-muted | Un fond atténué, pour les zones secondaires | oklch(96.7% 0.003 264.542)var(--vectis-color-gray-100) | oklch(27.8% 0.033 256.848)var(--vectis-color-gray-800) |
--vectis-color-surface-raised | Les surfaces surélevées : cartes | oklch(100% 0 0)var(--vectis-color-white) | oklch(21% 0.034 264.665)var(--vectis-color-gray-900) |
--vectis-color-surface-overlay | Les surfaces flottantes : dialogues, popovers, menus | oklch(100% 0 0)var(--vectis-color-white) | oklch(21% 0.034 264.665)var(--vectis-color-gray-900) |
--vectis-color-surface-sunken | Les surfaces en creux : encarts, zones de code | oklch(98.5% 0.002 247.839)var(--vectis-color-gray-50) | oklch(11% 0.006 260) |
--vectis-color-surface-inverse | Les surfaces à contraste inversé : infobulles | oklch(21% 0.034 264.665)var(--vectis-color-gray-900) | oklch(27.8% 0.033 256.848)var(--vectis-color-gray-800) |
--vectis-color-surface-skeleton | Le fond des silhouettes de VSkeletonLoader, dont son reflet est dérivé | oklch(92.8% 0.006 264.531)var(--vectis-color-gray-200) | oklch(27.8% 0.033 256.848)var(--vectis-color-gray-800) |
| Texte | |||
--vectis-color-text-on-inverse | Le texte posé sur une surface inversée | oklch(100% 0 0)var(--vectis-color-white) | oklch(98.5% 0.002 247.839)var(--vectis-color-gray-50) |
--vectis-color-text | Le texte courant de l'interface | oklch(21% 0.034 264.665)var(--vectis-color-gray-900) | oklch(98.5% 0.002 247.839)var(--vectis-color-gray-50) |
--vectis-color-text-muted | Le texte secondaire : aides, légendes, descriptions, icônes de début | oklch(44.6% 0.03 256.802)var(--vectis-color-gray-600) | oklch(87.2% 0.01 258.338)var(--vectis-color-gray-300) |
--vectis-color-text-subtle | Placeholders, texte désactivé | oklch(55.1% 0.027 264.364)var(--vectis-color-gray-500) | oklch(70.7% 0.022 261.325)var(--vectis-color-gray-400) |
--vectis-color-text-on-accent | Le texte posé sur un fond d'accent, de danger ou de succès | oklch(100% 0 0)var(--vectis-color-white) | oklch(100% 0 0)var(--vectis-color-white) |
--vectis-color-text-on-warning | Le texte posé sur un fond d'avertissement plein (l'ambre est trop clair pour du blanc) | oklch(13% 0.028 261.692)var(--vectis-color-gray-950) | Identique au thème clair |
| Bordures | |||
--vectis-color-border | Les séparateurs, et le cadre des cartes, des tableaux et des panneaux | oklch(92.8% 0.006 264.531)var(--vectis-color-gray-200) | oklch(27.8% 0.033 256.848)var(--vectis-color-gray-800) |
--vectis-color-border-strong | La bordure des contrôles de formulaire | oklch(87.2% 0.01 258.338)var(--vectis-color-gray-300) | oklch(37.3% 0.034 259.733)var(--vectis-color-gray-700) |
| Accent | |||
--vectis-color-accent | La couleur de marque : boutons pleins, contrôles cochés, l'élément sélectionné | oklch(51.1% 0.262 276.966)var(--vectis-color-indigo-600) | oklch(58.5% 0.233 277.117)var(--vectis-color-indigo-500) |
--vectis-color-accent-hover | La couleur d'accent au survol | oklch(45.7% 0.24 277.023)var(--vectis-color-indigo-700) | oklch(67.3% 0.182 276.935)var(--vectis-color-indigo-400) |
--vectis-color-accent-active | La couleur d'accent à l'appui | oklch(39.8% 0.195 277.366)var(--vectis-color-indigo-800) | oklch(78.5% 0.115 274.713)var(--vectis-color-indigo-300) |
--vectis-color-accent-surface | Un fond teinté d'accent (badges, sélections) | oklch(96.2% 0.018 272.314)var(--vectis-color-indigo-50) | oklch(25.7% 0.09 281.288)var(--vectis-color-indigo-950) |
--vectis-color-accent-border | La bordure d'un élément teinté d'accent, assortie à la surface d'accent | oklch(87% 0.065 274.039)var(--vectis-color-indigo-200) | oklch(35.9% 0.144 278.697)var(--vectis-color-indigo-900) |
--vectis-color-accent-text | Le texte d'accent sur un fond neutre ou teinté | oklch(45.7% 0.24 277.023)var(--vectis-color-indigo-700) | oklch(78.5% 0.115 274.713)var(--vectis-color-indigo-300) |
| Danger | |||
--vectis-color-danger | Actions destructrices et erreurs : boutons pleins, états en erreur | oklch(57.7% 0.245 27.325)var(--vectis-color-red-600) | oklch(57.7% 0.245 27.325)var(--vectis-color-red-600) |
--vectis-color-danger-hover | La couleur de danger au survol | oklch(50.5% 0.213 27.518)var(--vectis-color-red-700) | oklch(50.5% 0.213 27.518)var(--vectis-color-red-700) |
--vectis-color-danger-active | La couleur de danger à l'appui | oklch(44.4% 0.177 26.899)var(--vectis-color-red-800) | oklch(44.4% 0.177 26.899)var(--vectis-color-red-800) |
--vectis-color-danger-surface | Un fond teinté de danger (boutons et chips soft, un élément de menu destructeur) | oklch(97.1% 0.013 17.38)var(--vectis-color-red-50) | oklch(25.8% 0.092 26.042)var(--vectis-color-red-950) |
--vectis-color-danger-border | La bordure d'un élément teinté de danger, assortie à la surface de danger | oklch(88.5% 0.062 18.334)var(--vectis-color-red-200) | oklch(39.6% 0.141 25.723)var(--vectis-color-red-900) |
--vectis-color-danger-text | Le texte de danger sur un fond neutre ou teinté : messages d'erreur, élément de menu destructeur | oklch(50.5% 0.213 27.518)var(--vectis-color-red-700) | oklch(80.8% 0.114 19.571)var(--vectis-color-red-300) |
| Succès | |||
--vectis-color-success | Une issue positive : chips pleins, badges, notifications | oklch(52.7% 0.154 150.069)var(--vectis-color-green-700) | oklch(52.7% 0.154 150.069)var(--vectis-color-green-700) |
--vectis-color-success-hover | La couleur de succès au survol | oklch(44.8% 0.119 151.328)var(--vectis-color-green-800) | oklch(44.8% 0.119 151.328)var(--vectis-color-green-800) |
--vectis-color-success-active | La couleur de succès à l'appui | oklch(39.3% 0.095 152.535)var(--vectis-color-green-900) | oklch(39.3% 0.095 152.535)var(--vectis-color-green-900) |
--vectis-color-success-surface | Un fond teinté de succès (chips soft, badges, notifications) | oklch(98.2% 0.018 155.826)var(--vectis-color-green-50) | oklch(26.6% 0.065 152.934)var(--vectis-color-green-950) |
--vectis-color-success-border | La bordure d'un élément teinté de succès, assortie à la surface de succès | oklch(92.5% 0.084 155.995)var(--vectis-color-green-200) | oklch(39.3% 0.095 152.535)var(--vectis-color-green-900) |
--vectis-color-success-text | Le texte de succès sur un fond neutre ou teinté | oklch(44.8% 0.119 151.328)var(--vectis-color-green-800) | oklch(87.1% 0.15 154.449)var(--vectis-color-green-300) |
| Avertissement | |||
--vectis-color-warning | Une situation qui demande de l'attention : chips pleins, badges, notifications | oklch(66.6% 0.179 58.318)var(--vectis-color-amber-600) | oklch(76.9% 0.188 70.08)var(--vectis-color-amber-500) |
--vectis-color-warning-hover | La couleur d'avertissement au survol | oklch(55.5% 0.163 48.998)var(--vectis-color-amber-700) | oklch(82.8% 0.189 84.429)var(--vectis-color-amber-400) |
--vectis-color-warning-active | La couleur d'avertissement à l'appui | oklch(47.3% 0.137 46.201)var(--vectis-color-amber-800) | oklch(87.9% 0.169 91.605)var(--vectis-color-amber-300) |
--vectis-color-warning-surface | Un fond teinté d'avertissement (chips soft, badges, notifications) | oklch(98.7% 0.022 95.277)var(--vectis-color-amber-50) | oklch(27.9% 0.077 45.635)var(--vectis-color-amber-950) |
--vectis-color-warning-border | La bordure d'un élément teinté d'avertissement, assortie à la surface d'avertissement | oklch(92.4% 0.12 95.746)var(--vectis-color-amber-200) | oklch(41.4% 0.112 45.904)var(--vectis-color-amber-900) |
--vectis-color-warning-text | Le texte d'avertissement sur un fond neutre ou teinté | oklch(41.4% 0.112 45.904)var(--vectis-color-amber-900) | oklch(87.9% 0.169 91.605)var(--vectis-color-amber-300) |
| Voile | |||
--vectis-color-backdrop | Le voile derrière les dialogues modaux | oklch(0% 0 0 / 0.45) | oklch(0% 0 0 / 0.6) |
| Événements du calendrier | |||
--vectis-color-event-surface | La face d'un événement de calendrier qui n'a pas de couleur propre | oklch(0.95 0.045 var(--vectis-calendar-event-hue, 265)) | oklch(0.3 0.05 var(--vectis-calendar-event-hue, 265)) |
--vectis-color-event-border | Le contour de cet événement, et la barre qui marque son bord de début | oklch(0.85 0.08 var(--vectis-calendar-event-hue, 265)) | oklch(0.42 0.08 var(--vectis-calendar-event-hue, 265)) |
--vectis-color-event-text | Le titre de cet événement | oklch(0.4 0.11 var(--vectis-calendar-event-hue, 265)) | oklch(0.9 0.06 var(--vectis-calendar-event-hue, 265)) |
Anneau de focus
L'anneau dessiné autour d'un contrôle qui reçoit le focus au clavier. Sa couleur est un rôle à part entière plutôt que l'accent : l'accent doit porter du texte blanc, l'anneau doit ressortir sur la page.
| Token | Description | Clair | Sombre |
|---|---|---|---|
--vectis-focus-ring-color | L'anneau de focus clavier, qui doit ressortir sur le fond de la page | oklch(58.5% 0.233 277.117)var(--vectis-color-indigo-500) | oklch(67.3% 0.182 276.935)var(--vectis-color-indigo-400) |
--vectis-focus-ring-width | L'épaisseur de l'anneau de focus | 2px | Identique au thème clair |
--vectis-focus-ring-offset | L'écart entre un contrôle et son anneau de focus | 2px | Identique au thème clair |
Typographie
Trois familles de polices, puis les rôles de texte. Un rôle est une recette complète : sa taille, sa graisse et son interlignage, plus une approche quand elle compte. Les composants demandent un rôle, donc surcharger l'une de ses valeurs modifie tous les endroits où ce rôle est utilisé.
Le chargement d'une police web et son affectation aux familles sont expliqués sur la page Famille de police.
| Token | Description | Valeur par défaut |
|---|---|---|
--vectis-text-family | La police courante de tous les composants | system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serifvar(--vectis-font-family-sans) |
--vectis-text-family-heading | La police des rôles display et heading, celle du texte courant tant qu'elle n'est pas surchargée | system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serifvar(--vectis-font-family-display) |
--vectis-text-family-code | La police du code (le rôle code, VInputOTP) | ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospacevar(--vectis-font-family-mono) |
| Rôle | Taille | Graisse | Interlignage | Approche |
|---|---|---|---|---|
--vectis-text-display-*Le plus grand texte, pour un titre de une | 3remvar(--vectis-font-size-5xl) | 700var(--vectis-font-weight-bold) | 1var(--vectis-font-leading-none) | -0.015emvar(--vectis-font-tracking-tight) |
--vectis-text-heading-1-*Le titre d'une page | 2.25remvar(--vectis-font-size-4xl) | 700var(--vectis-font-weight-bold) | 1.25var(--vectis-font-leading-tight) | -0.015emvar(--vectis-font-tracking-tight) |
--vectis-text-heading-2-*Un titre de section | 1.5remvar(--vectis-font-size-2xl) | 600var(--vectis-font-weight-semibold) | 1.25var(--vectis-font-leading-tight) | -0.015emvar(--vectis-font-tracking-tight) |
--vectis-text-heading-3-*Un titre de sous-section | 1.125remvar(--vectis-font-size-lg) | 600var(--vectis-font-weight-semibold) | 1.4var(--vectis-font-leading-snug) | aucun |
--vectis-text-heading-4-*Le plus petit titre : un groupe au sein d'une section, le titre d'une carte | 1remvar(--vectis-font-size-md) | 600var(--vectis-font-weight-semibold) | 1.4var(--vectis-font-leading-snug) | aucun |
--vectis-text-subtitle-*La ligne sous un titre, dans un dialogue ou un élément d'accordéon | 0.875remvar(--vectis-font-size-sm) | 400var(--vectis-font-weight-regular) | 1.5var(--vectis-font-leading-normal) | aucun |
--vectis-text-body-xl-*Le paragraphe d'introduction qui ouvre une page ou une section | 1.125remvar(--vectis-font-size-lg) | 400var(--vectis-font-weight-regular) | 1.65var(--vectis-font-leading-relaxed) | aucun |
--vectis-text-body-lg-*Le texte courant avec plus de place, pour une lecture plus longue | 1remvar(--vectis-font-size-md) | 400var(--vectis-font-weight-regular) | 1.65var(--vectis-font-leading-relaxed) | aucun |
--vectis-text-body-md-*Le texte courant par défaut, aussi utilisé par les lignes de menu, les notifications et les champs | 0.875remvar(--vectis-font-size-sm) | 400var(--vectis-font-weight-regular) | 1.5var(--vectis-font-leading-normal) | aucun |
--vectis-text-body-sm-*Le petit texte courant : détails secondaires, notes | 0.75remvar(--vectis-font-size-xs) | 400var(--vectis-font-weight-regular) | 1.5var(--vectis-font-leading-normal) | aucun |
--vectis-text-label-*Le libellé au-dessus d'un champ de formulaire | 0.875remvar(--vectis-font-size-sm) | 500var(--vectis-font-weight-medium) | 1.4var(--vectis-font-leading-snug) | aucun |
--vectis-text-caption-*Un court texte d'appoint : l'aide d'un champ, un compteur | 0.75remvar(--vectis-font-size-xs) | 400var(--vectis-font-weight-regular) | 1.4var(--vectis-font-leading-snug) | aucun |
--vectis-text-overline-*Le titre d'un groupe de lignes dans un menu, la liste d'un combobox ou une navigation latérale, avec un espacement des lettres élargi | 0.75remvar(--vectis-font-size-xs) | 500var(--vectis-font-weight-medium) | 1.4var(--vectis-font-leading-snug) | 0.05emvar(--vectis-font-tracking-wide) |
--vectis-text-code-*Le code en ligne et les contenus de code | 0.875remvar(--vectis-font-size-sm) | 400var(--vectis-font-weight-regular) | 1.5var(--vectis-font-leading-normal) | aucun |
--vectis-text-control-*Le libellé d'un contrôle comme un bouton, un chip ou un onglet. Il n'a pas de taille propre : le texte suit la taille donnée au contrôle | aucun | 500var(--vectis-font-weight-medium) | 1var(--vectis-font-leading-none) | aucun |
Rayons
Les rayons d'angle par rôle. --vectis-radius-chip pointe vers --vectis-radius-interactive : les chips suivent donc les autres contrôles tant que vous ne leur donnez pas un rayon propre. La référence est résolue là où les tokens sont déclarés, sur la racine : une surcharge du rayon interactive sur un sélecteur plus étroit doit aussi redéfinir le rayon des chips.
| Token | Description | Valeur par défaut |
|---|---|---|
--vectis-radius-interactive | Boutons, champs, contrôles | 0.375remvar(--vectis-radius-md) |
--vectis-radius-surface | Cartes, alertes | 0.5remvar(--vectis-radius-lg) |
--vectis-radius-overlay | Dialogues, popovers, menus | 0.75remvar(--vectis-radius-xl) |
--vectis-radius-pill | Arrondi complet : interrupteurs, badges, chips en pilule | 9999pxvar(--vectis-radius-full) |
--vectis-radius-chip | Les chips en shape="chip", qui suivent le rayon interactive par défaut | 0.375remvar(--vectis-radius-interactive) |
Mouvement
Les trois durées qu'utilise une transition. Elles sont les mêmes dans les deux thèmes. Les animations en boucle, comme celle du spinner, utilisent directement l'échelle des durées et ne suivent pas ces rôles.
| Token | Description | Valeur par défaut |
|---|---|---|
--vectis-duration-fast | Changements de couleur et de bordure au survol, au focus, à l'appui | 150msvar(--vectis-duration-150) |
--vectis-duration-base | La durée par défaut : un panneau qui s'ouvre, une valeur qui bouge | 200msvar(--vectis-duration-200) |
--vectis-duration-slow | Les mouvements assez amples pour être suivis de l'œil | 300msvar(--vectis-duration-300) |
Tailles
La hauteur de chaque palier de l'échelle de taille des contrôles, et les trois tailles d'icône. Un contrôle en compact mesure 4px de moins que son palier.
| Token | Description | Valeur par défaut |
|---|---|---|
| Hauteurs des contrôles | ||
--vectis-control-height-xs | La hauteur de tout contrôle en size="xs" (24px), 4px de moins en compact | 1.5rem |
--vectis-control-height-sm | La hauteur de tout contrôle en size="sm" (32px), 4px de moins en compact | 2rem |
--vectis-control-height-md | La hauteur de tout contrôle en size="md" (40px), 4px de moins en compact | 2.5rem |
--vectis-control-height-lg | La hauteur de tout contrôle en size="lg" (48px), 4px de moins en compact | 3rem |
--vectis-control-height-xl | La hauteur de tout contrôle en size="xl" (56px), 4px de moins en compact | 3.5rem |
| Tailles d'icône | ||
--vectis-icon-size-sm | La taille d'icône des contrôles xs (16px) | 1rem |
--vectis-icon-size-md | La taille d'icône des contrôles sm et md (20px) | 1.25rem |
--vectis-icon-size-lg | La taille d'icône des contrôles lg et xl (24px) | 1.5rem |
Dimensions des composants
Les dimensions propres à un seul composant : un rail, un curseur, la largeur d'un panneau. Chaque groupe renvoie vers la page de son composant.
| Token | Description | Valeur par défaut |
|---|---|---|
| Groupe d'avatars | ||
--vectis-control-size-avatar-ring | L'anneau qui sépare les avatars empilés (VAvatarGroup) | 2px |
| Badge | ||
--vectis-control-size-badge-h | La hauteur d'un VBadge en pilule | 1.25rem |
--vectis-control-size-badge-dot | Le diamètre d'un VBadge en mode point | 0.625rem |
--vectis-control-size-badge-ring | L'anneau qui détache un VBadge bordé | 2px |
| Calendrier | ||
--vectis-control-size-calendar-hour | La hauteur d'une heure dans la grille horaire de VCalendar | 4rem |
--vectis-control-size-calendar-gutter | La colonne des heures à côté de la grille horaire de VCalendar, assez large pour « 12:00 AM » d'une horloge sur 12 heures sur une ligne | 4.5rem |
--vectis-control-size-calendar-tick | La longueur dont le trait d'une heure déborde dans la colonne des heures de VCalendar, pour relier le libellé à sa ligne | 0.375rem |
--vectis-control-size-calendar-edge | La bande sur le côté de VCalendar qui change de période quand un événement déplacé s'y arrête | 3rem |
--vectis-control-size-calendar-day-min | La largeur minimale d'une colonne de jour de VCalendar, en dessous de laquelle la grille défile | 5rem |
--vectis-control-size-calendar-handle | La bande le long du bord inférieur d'une carte de VCalendar, par laquelle on étire sa fin | 0.5rem |
--vectis-control-size-calendar-allday-lane | Une ligne du bandeau « toute la journée » de VCalendar | 1.5rem |
--vectis-control-size-calendar-allday-max | La hauteur au-delà de laquelle le bandeau « toute la journée » de VCalendar défile au lieu de grandir | 7rem |
--vectis-control-size-calendar-now-dot | Le point sur la ligne de l'heure actuelle de VCalendar | 0.625rem |
--vectis-control-size-calendar-month-cell | La hauteur minimale d'un jour dans la vue mois de VCalendar | 8.5rem |
--vectis-control-size-calendar-year-cell | Le côté d'une case de jour dans les mini-mois de la vue année de VCalendar | 1.5rem |
| Carrousel | ||
--vectis-control-size-carousel-block | La hauteur par défaut de la zone visible de VCarousel, nécessaire à un carrousel vertical pour disposer ses diapositives | 24rem |
--vectis-control-size-carousel-indicator | Le diamètre d'un point indicateur de VCarousel (sa zone cliquable vient de --vectis-control-height-xs) | 0.625rem |
--vectis-control-size-carousel-indicator-active | La longueur de l'indicateur actif de VCarousel, qui s'étire d'un point en pilule | 1.25rem |
| Case à cocher, Bouton radio | ||
--vectis-control-border-width | La bordure des contrôles à cocher (VCheckbox, VRadio) | 2px |
--vectis-control-size-check | La boîte des contrôles à cocher (VCheckbox, VRadio) | 1.25rem |
--vectis-control-size-check-mark | La coche dans la boîte de VCheckbox | 0.875rem |
--vectis-control-size-check-dot | Le point dans le cercle de VRadio | 0.5rem |
| Liste déroulante | ||
--vectis-control-size-combobox-list-max-block | La hauteur maximale du panneau de liste de VCombobox (la zone qui défile) | 18rem |
| Tableau de données | ||
--vectis-control-size-table-search | La largeur du champ de recherche de VDataTable | 16rem |
| Sélecteur de date | ||
--vectis-control-size-date-picker-cell | Le côté d'une case de jour de VDatePicker | 2.5rem |
--vectis-control-size-date-picker-day | Le diamètre du disque sur lequel un jour de VDatePicker est dessiné ; la case grandit pour le contenir | 2.5remvar(--vectis-control-height-md) |
--vectis-control-size-date-picker-dot | Le diamètre d'un point d'événement de VDatePicker | 0.25rem |
--vectis-control-size-date-picker-nav-min | La largeur minimale des boutons de choix du mois et de l'année de VDatePicker (environ 86px) | 5.375rem |
| Boîte de dialogue | ||
--vectis-control-size-dialog-width | La largeur par défaut de VDialog et VDialogAlert (400px), en l'absence de width | 25rem |
| Sélecteur de fichiers | ||
--vectis-control-size-file-picker-min-block | La hauteur minimale de la zone de dépôt de VFilePicker : icône, deux lignes, séparateur et bouton | 10rem |
--vectis-control-size-file-picker-icon | La grande icône en haut de la zone de dépôt de VFilePicker | 2.5rem |
--vectis-control-size-file-picker-thumb | La vignette carrée d'une ligne d'aperçu de VFilePicker (une image, ou l'icône de son type) | 2.5rem |
| Champ de saisie | ||
--vectis-control-action-size-sm | Les boutons internes des champs sm (effacement, icône cliquable) | 1.25rem |
--vectis-control-action-size-md | Les boutons internes des champs md (effacement, icône cliquable) | 1.5rem |
--vectis-control-action-size-lg | Les boutons internes des champs lg (effacement, icône cliquable) | 1.75rem |
| Menu | ||
--vectis-control-size-menu-min | La largeur minimale du panneau de VMenu | 11rem |
--vectis-control-size-menu-max | La largeur maximale du panneau de VMenu | 20rem |
| Progression circulaire | ||
--vectis-control-size-progress-circular-diameter | Le diamètre par défaut de VProgressCircular | 3rem |
--vectis-control-size-progress-circular-thickness | L'épaisseur de trait par défaut de VProgressCircular (4px) | 0.25rem |
| Progression linéaire | ||
--vectis-control-size-progress-linear-thickness | L'épaisseur par défaut de la barre de VProgressLinear (4px) | 0.25rem |
--vectis-control-size-progress-linear-length | La longueur par défaut d'un VProgressLinear vertical, que remplace une hauteur posée sur la barre | 10rem |
| Squelette de chargement | ||
--vectis-control-size-skeleton-surface | La hauteur par défaut d'un VSkeletonLoader de forme surface : une carte, une image (96px) | 6rem |
| Curseur | ||
--vectis-control-size-slider-track | L'épaisseur du rail de VSlider | 0.375rem |
--vectis-control-size-slider-thumb | Le diamètre du curseur de VSlider | 1.25rem |
--vectis-control-size-slider-length | La longueur par défaut d'un VSlider vertical | 10rem |
--vectis-control-size-slider-field | La largeur des champs numériques de VSlider | 5rem |
| Barre de confirmation | ||
--vectis-control-size-snackbar-min | La largeur minimale d'une snackbar (288px) | 18rem |
--vectis-control-size-snackbar-max | La largeur maximale d'une snackbar (576px) | 36rem |
| Interrupteur | ||
--vectis-control-size-switch-w | La largeur du rail de VSwitch | 2.5rem |
--vectis-control-size-switch-h | La hauteur du rail de VSwitch | 1.25rem |
--vectis-control-size-switch-pad | L'écart entre le curseur de VSwitch et le bord de son rail | 0.125rem |
| Onglets | ||
--vectis-control-size-tab-indicator | L'épaisseur de l'indicateur de l'onglet actif (VTabs, flat et outlined) | 2px |
| Sélecteur d'heure | ||
--vectis-control-size-time-picker-dial | Le diamètre du cadran de VTimePicker | 16rem |
--vectis-control-size-time-picker-number | La case d'un chiffre sur le cadran de VTimePicker, et le disque de l'aiguille sur un repère | 3rem |
--vectis-control-size-time-picker-center | Le point central du cadran de VTimePicker | 0.5rem |
--vectis-control-size-time-picker-hand | L'épaisseur de l'aiguille du cadran de VTimePicker | 2px |
--vectis-control-size-time-picker-hand-minor | Le disque de l'aiguille de VTimePicker sur une minute hors des repères de 5 minutes | 1rem |
| Notification | ||
--vectis-control-size-toast-width | La largeur par défaut d'un toast | 22rem |
| Infobulle | ||
--vectis-control-size-tooltip-max | La largeur maximale d'une infobulle avant qu'elle ne passe à la ligne (288px) | 18rem |