@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/Customs/SyTabs/accessibilite/Accessibility.mdx

@@ -32,10 +32,11 @@ import '@/stories/styles/shared.css';
         <h3>Structure sémantique</h3>
       </div>
       <ul>
-        <li><strong>Rôles ARIA appropriés</strong> : <code>role="tablist"</code> pour la liste d'onglets, <code>role="tab"</code> pour chaque onglet et <code>role="tabpanel"</code> pour chaque panneau de contenu</li>
-        <li><strong>État des onglets</strong> : <code>aria-selected</code> avec les valeurs <code>true</code> ou <code>false</code> pour indiquer l'onglet actif</li>
-        <li><strong>Relations entre éléments</strong> : <code>aria-controls</code> pour associer chaque onglet à son panneau, et <code>aria-labelledby</code> pour associer chaque panneau à son onglet</li>
-        <li><strong>Navigation structurée</strong> : Utilisation d'éléments <code>&lt;nav&gt;</code> et <code>&lt;ul&gt;</code> pour créer une structure de navigation sémantique et accessible</li>
+        <li><strong>Rôles et sémantique adaptatifs</strong> : Utilisation dynamique de <code>role="tablist"</code> / <code>role="tab"</code> / <code>role="tabpanel"</code> (mode Onglets) ou de la balise native <code>&lt;nav role="navigation"&gt;</code> (mode Navigation)</li>
+        <li><strong>État de l'élément actif</strong> : Utilisation de <code>aria-selected="true"</code> (mode Onglets) ou <code>aria-current="page"</code> (mode Navigation)</li>
+        <li><strong>Relations programmatiques</strong> : <code>aria-controls</code> et <code>aria-labelledby</code> lient les onglets à leurs panneaux respectifs (uniquement en mode Onglets)</li>
+        <li><strong>Nommage accessible</strong> : Le conteneur principal possède un <code>aria-label</code> dynamique (<em>"Onglets de navigation"</em> ou <em>"Menu de navigation"</em> selon le mode)</li>
+        <li><strong>Structure HTML aplatie</strong> : Les éléments interactifs (boutons ou liens) sont contenus directement dans leur parent sémantique (<code>&lt;div&gt;</code> ou <code>&lt;nav&gt;</code>) sans balises de liste (<code>&lt;ul&gt;</code>) superflues, optimisant l'arbre d'accessibilité</li>
       </ul>
     </div>
     
@@ -60,10 +61,11 @@ import '@/stories/styles/shared.css';
         <h3>États et retours d'information</h3>
       </div>
       <ul>
-        <li><strong>État de sélection</strong> : <code>aria-selected="true"</code> indique l'onglet actif aux technologies d'assistance</li>
-        <li><strong>Visibilité des panneaux</strong> : L'attribut <code>hidden</code> sur les panneaux inactifs les rend invisibles aux lecteurs d'écran</li>
-        <li><strong>Indication visuelle</strong> : Styles distinctifs pour l'onglet actif (couleur, bordure inférieure)</li>
-        <li><strong>Association explicite</strong> : Chaque panneau de contenu est clairement associé à son onglet via <code>aria-labelledby</code></li>
+        <li><strong>État de sélection</strong> : <code>aria-selected="true"</code> ou <code>aria-current="page"</code> indique l'élément actif aux technologies d'assistance</li>
+        <li><strong>Éléments désactivés</strong> : Utilisation de l'attribut natif <code>disabled</code> (pour les boutons) ou <code>aria-disabled="true"</code> (pour les liens), qui sont par ailleurs exclus de la navigation au clavier (flèches)</li>
+        <li><strong>Visibilité des panneaux</strong> : L'attribut HTML <code>hidden</code> sur les panneaux inactifs les retire correctement de l'arbre d'accessibilité</li>
+        <li><strong>Indication visuelle</strong> : Styles distinctifs pour l'onglet actif (couleur de texte, barre de soulignement animée)</li>
+        <li><strong>Focus visible</strong> : Un <code>outline</code> de 3px est appliqué lors de la navigation au clavier (<code>:focus-visible</code>)</li>
       </ul>
     </div>
     
@@ -81,25 +83,52 @@ import '@/stories/styles/shared.css';
     </div>
   </div>
 
+  <div className="adaptive-mode-section">
+    <h2>Mode adaptatif (Onglets vs Navigation)</h2>
+    <div className="section-description">
+      Le composant SyTabs détecte automatiquement son contexte d'utilisation et adapte sa structure sémantique en conséquence :
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">📑</span>
+        <h3>Mode Onglets (par défaut)</h3>
+      </div>
+      <p>Utilisé pour permuter du contenu local sans changer d'URL.</p>
+      <ul>
+        <li>Utilise le modèle WAI-ARIA complet pour les onglets (<code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code>).</li>
+        <li>L'activation de l'onglet par les flèches du clavier est <strong>automatique</strong>.</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🧭</span>
+        <h3>Mode Navigation (Routing)</h3>
+      </div>
+      <p>Activé automatiquement si au moins un onglet utilise les attributs <code>to</code> ou <code>href</code>.</p>
+      <ul>
+        <li>Utilise une sémantique de navigation standard (<code>&lt;nav role="navigation"&gt;</code>) au lieu des rôles ARIA d'onglets pour éviter la confusion des utilisateurs de lecteurs d'écran.</li>
+        <li>Indique l'élément actif via <code>aria-current="page"</code> au lieu de <code>aria-selected</code>.</li>
+        <li>L'activation au clavier est <strong>manuelle</strong> : les flèches déplacent le focus sans déclencher le lien, la touche Entrée valide le choix.</li>
+        <li>Les rôles <code>tabpanel</code> ne sont pas générés car ce concept n'est pas applicable à la navigation entre différentes pages.</li>
+      </ul>
+    </div>
+  </div>
+
   <div className="automatic-section">
-    <h2>Activation automatique des onglets</h2>
+    <h2>Activation automatique (Mode Onglets)</h2>
     <div className="section-description">
-      Le composant SyTabs implémente un modèle d'activation automatique, ce qui signifie que :
+      En <strong>Mode Onglets</strong>, le composant implémente un modèle d'activation automatique :
     </div>
     <ul>
-      <li>La sélection d'un nouvel onglet via la navigation par flèches active immédiatement cet onglet</li>
-      <li>Le contenu du panneau associé est affiché sans nécessiter une action supplémentaire</li>
-      <li>Le focus reste sur l'onglet activé pour permettre de continuer la navigation par clavier</li>
+      <li>La sélection d'un nouvel onglet via la navigation par flèches (Gauche/Droite) active immédiatement cet onglet</li>
+      <li>Le contenu du panneau associé est affiché sans nécessiter une action supplémentaire (Entrée/Espace)</li>
+      <li>Le focus reste sur l'onglet activé pour permettre de continuer la navigation au clavier</li>
     </ul>
     <div className="section-description">
-      Cette implémentation suit les meilleures pratiques WAI-ARIA pour les interfaces à onglets :
+      <em>Note : En Mode Navigation (Routing), l'activation est manuelle (déplacement du focus avec les flèches, puis validation avec Entrée) pour éviter les redirections inattendues.</em>
     </div>
-    <ul>
-      <li>Réduction du nombre d'actions nécessaires pour naviguer entre les contenus</li>
-      <li>Mise à jour dynamique de l'attribut <code>aria-selected</code> pour informer des changements</li>
-      <li>Gestion efficace du focus pour éviter les sauts d'interface désorientants</li>
-      <li>Mise à jour de l'affichage des panneaux avec l'attribut <code>hidden</code> pour les panneaux inactifs</li>
-    </ul>
   </div>
 
   <div className="demo-section">
@@ -112,9 +141,9 @@ import '@/stories/styles/shared.css';
   </div>
 
   <div className="tab-panel-section">
-    <h2>Relation onglet-panneau</h2>
+    <h2>Relation onglet-panneau (Mode Onglets)</h2>
     <div className="section-description">
-      Le composant SyTabs établit une relation claire entre chaque onglet et son panneau de contenu associé :
+      Lorsqu'il n'est pas utilisé pour la navigation de pages, le composant établit une relation programmatique stricte :
     </div>
     <ul>
       <li>Chaque onglet (<code>role="tab"</code>) est associé à un panneau de contenu via <code>aria-controls</code></li>
@@ -132,6 +161,13 @@ import '@/stories/styles/shared.css';
     </div>
   </div>
 
+    <div className="warning-section">
+    <h2>Note d'audit (Faux positif Tanaguru)</h2>
+    <p>
+      Un faux positif (éléments interactifs non atteignables en navigation clavier) est remonté par Tanaguru. En réalité, le composant gère intentionnellement le focus via un <em>roving tabindex</em> dans ses deux modes (Onglets et Navigation) pour une meilleure ergonomie : seul l'élément actif est dans l'ordre de tabulation classique (Tab), les autres éléments étant atteignables via les touches fléchées. Une vérification manuelle au clavier confirme que tous les éléments sont parfaitement accessibles et activables, conformément aux comportements attendus.
+    </p>
+  </div>
+
   <div className="best-practices">
     <h2>Bonnes pratiques d'utilisation</h2>
     <ul>
@@ -195,11 +231,15 @@ import '@/stories/styles/shared.css';
   }
 
   .criteria-section h2,
+  .adaptive-mode-section h2,
   .demo-section h2,
   .tri-state-section h2,
   .parent-child-section h2,
   .best-practices h2,
-  .resources-section h2 {
+  .automatic-section h2,
+  .tab-panel-section h2,
+  .resources-section h2,
+  .warning-section h2 {
     border-bottom: 2px solid #eaecef;
     padding-bottom: 10px;
     margin-top: 30px;
@@ -207,6 +247,12 @@ import '@/stories/styles/shared.css';
     color: #0077cc;
   }
 
+  .warning-section h2 {
+    color: #856404;
+    border-bottom-color: #ffeeba;
+    margin-top: 0;
+  }
+
   .criteria-card {
     background-color: #fff;
     border-radius: 8px;
@@ -257,6 +303,20 @@ import '@/stories/styles/shared.css';
     margin-bottom: 30px;
   }
 
+  .warning-section {
+    background-color: #fff3cd;
+    border-left: 5px solid #ffeeba;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 40px;
+  }
+
+  .warning-section p {
+    color: #856404;
+    line-height: 1.6;
+    margin: 0;
+  }
+
   .tri-state-section p,
   .parent-child-section p {
     line-height: 1.6;

package/src/components/Customs/SyTabs/tests/SyTabs.a11y.spec.ts

@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyTabs from '../SyTabs.vue'
+
+// Mock RouterLink component since SyTabs uses it
+const RouterLink = {
+	name: 'RouterLink',
+	props: ['to'],
+	template: '<a :href="to"><slot /></a>',
+}
+
+const testItems = [
+	{ label: 'Tab 1', value: 'tab1', content: 'Contenu du Tab 1' },
+	{ label: 'Tab 2', value: 'tab2', content: 'Contenu du Tab 2' },
+	{ label: 'Tab 3', value: 'tab3', content: 'Contenu du Tab 3', disabled: true },
+]
+
+describe('SyTabs – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: testItems,
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations after switching tabs', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: testItems,
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const tabs = wrapper.findAll('[role="tab"]')
+		if (tabs.length > 1) {
+			await tabs[1]?.trigger('click')
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – after switching tabs', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in navigation mode', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: [
+					{ label: 'Nav 1', value: 'nav1', to: '/path-1' },
+					{ label: 'Nav 2', value: 'nav2', href: 'https://example.com' },
+					{ label: 'Nav 3', value: 'nav3', to: '/path-3', disabled: true },
+				],
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – navigation mode', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/Customs/SyTabs/tests/SyTabs.spec.ts

@@ -162,6 +162,51 @@ describe('SyTabs', () => {
 		})
 	})
 
+	// Tests du mode Navigation
+	describe('Mode Navigation', () => {
+		const navItems = [
+			{ label: 'Nav 1', value: 'nav1', to: '/path-1' },
+			{ label: 'Nav 2', value: 'nav2', href: 'https://example.com' },
+			{ label: 'Nav 3', value: 'nav3', to: '/path-3', disabled: true },
+		]
+
+		it('doit utiliser la sémantique de navigation', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: navItems,
+				},
+			})
+
+			// Vérifier les attributs du conteneur
+			const nav = wrapper.find('nav[role="navigation"]')
+			expect(nav.exists()).toBe(true)
+			expect(nav.attributes('aria-label')).toBeDefined()
+
+			// Vérifier les attributs des liens
+			const buttons = wrapper.findAll('.sy-tabs__button')
+			expect(buttons[0]!.attributes('role')).toBeUndefined()
+			expect(buttons[0]!.attributes('aria-current')).toBe('page')
+			expect(buttons[0]!.attributes('aria-selected')).toBeUndefined()
+			expect(buttons[0]!.attributes('aria-controls')).toBeUndefined()
+
+			expect(buttons[1]!.attributes('aria-current')).toBeUndefined()
+		})
+
+		it('ne doit pas générer les rôles tabpanel pour les panneaux', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: navItems,
+				},
+			})
+
+			const panel = wrapper.find('.sy-tabs-panel')
+			expect(panel.attributes('role')).toBeUndefined()
+			expect(panel.attributes('aria-labelledby')).toBeUndefined()
+		})
+	})
+
 	// Tests d'accessibilité et navigation clavier
 	describe('Accessibilité et navigation clavier', () => {
 		it('doit contenir les attributs ARIA appropriés', () => {
@@ -434,7 +479,7 @@ describe('SyTabs', () => {
 			expect(tabList.exists()).toBe(true)
 
 			// Vérifier que tous les items sont rendus
-			const tabItems = wrapper.findAll('.sy-tabs__item')
+			const tabItems = wrapper.findAll('.sy-tabs__button')
 			expect(tabItems.length).toBe(testItems.length)
 		})
 	})

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -4,6 +4,8 @@ import { VIcon } from 'vuetify/components'
 import { ref, watch } from 'vue'
 import { mdiAccountBox } from '@mdi/js'
 import { VBtn } from 'vuetify/components'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
+import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Formulaires/SyTextField',
@@ -15,7 +17,6 @@ const meta = {
 	],
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['modelValue', 'appendInnerIconColor', 'errorMessages', 'warningMessages', 'successMessages'] },
 		docs: {
 			description: {
 				component: `SyTextField`,
@@ -23,6 +24,7 @@ const meta = {
 		},
 	},
 	argTypes: {
+		...getValidationDocumentation('string'),
 		'modelValue': { control: 'text' },
 		'label': {
 			description: 'Texte affiché comme label du champ',
@@ -62,27 +64,6 @@ const meta = {
 			options: ['default', 'comfortable', 'compact'],
 			description: 'Densité du champ',
 		},
-		'customRules': {
-			description: 'Règles de validation personnalisées',
-			control: 'object',
-		},
-		'customWarningRules': {
-			description: 'Règles d\'avertissement personnalisées',
-			control: 'object',
-		},
-		'showSuccessMessages': {
-			description: 'Afficher les messages de succès',
-			control: 'boolean',
-		},
-		'isValidateOnBlur': {
-			description: 'Vérifie la validité lors de la perte de focus',
-			control: 'boolean',
-			default: true,
-		},
-		'disableErrorHandling': {
-			control: 'boolean',
-			description: 'Désactive complètement la validation des règles et l\'affichage des erreurs',
-		},
 		'isActive': {
 			description: 'Force l\'état actif du champ (label flottant et styles visuels)',
 			control: 'boolean',
@@ -107,31 +88,16 @@ const meta = {
 			options: ['top', 'bottom', 'start', 'end'],
 			default: 'top',
 		},
-		'required': {
-			description: 'Indique si le champ est obligatoire',
-			control: 'boolean',
-			default: false,
-		},
 		'displayAsterisk': {
 			description: 'Affiche un astérisque à côté du label',
 			control: 'boolean',
 			default: false,
 		},
-		'disabled': {
-			description: 'Désactive le champ',
-			control: 'boolean',
-			default: false,
-		},
 		'disableClickButton': {
 			description: 'Désactive le click sur les icônes append et prepend',
 			control: 'boolean',
 			default: true,
 		},
-		'readonly': {
-			description: 'Rend le champ en lecture seule',
-			control: 'boolean',
-			default: false,
-		},
 		'baseColor': {
 			description: 'Couleur de base du champ (par défaut hérite de color)',
 			control: 'text',
@@ -193,10 +159,6 @@ const meta = {
 			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',
 		},
-		'maxErrors': {
-			description: 'Nombre maximum de messages d\'erreur à afficher',
-			control: { type: 'text' },
-		},
 		'maxWidth': {
 			description: 'Largeur maximale du champ',
 			control: { type: 'text' },
@@ -323,6 +285,24 @@ const meta = {
 				category: 'slots',
 			},
 		},
+		'showDivider': {
+			description: 'Affiche une ligne de séparation entre le champ et les icônes prepend-inner et append-inner',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+	},
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onKeydown': fn(),
+		'onClear': fn(),
+		'onPrependIconClick': fn(),
+		'onAppendIconClick': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 } as Meta<typeof SyTextField>
 

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -44,7 +44,6 @@
 			direction?: 'horizontal' | 'vertical'
 			isDirty?: boolean
 			disabled?: boolean
-			isOnError?: boolean
 			isFlat?: boolean
 			isFocused?: boolean
 			areDetailsHidden?: boolean | 'auto'
@@ -101,7 +100,6 @@
 			density: 'default',
 			direction: 'horizontal',
 			isDirty: false,
-			isOnError: false,
 			isFlat: false,
 			isFocused: false,
 			areDetailsHidden: false,
@@ -636,7 +634,7 @@
 			:maxlength="props.maxlength"
 			:max-errors="props.maxErrors"
 			:max-width="props.maxWidth"
-			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : messages))"
 			:min-width="props.minWidth"
 			:name="props.name"
 			:persistent-clear="props.displayPersistentClear"
@@ -925,13 +923,13 @@
 	}
 
 	:deep(.v-field--focused .v-field__outline) {
-		color: rgb(var(--v-theme-accentPrimary)) !important;
+		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
 		opacity: 1 !important;
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid rgb(var(--v-theme-accentPrimary));
+		outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
 		outline-offset: 2px;
 		opacity: 1;
 	}
@@ -939,7 +937,7 @@
 
 .help-text-below {
 	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-	font-size: 14px;
+	font-size: var(--v-fontSize-liensEtLibelles);
 	line-height: 1.2;
 }
 

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -1170,8 +1170,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .date-picker-title {
 	display: block;
 	text-transform: lowercase;
@@ -1185,7 +1183,7 @@
 /* Style pour les jours fériés */
 :deep(.holiday-day) {
 	background-color: rgb(255 193 7 / 10%);
-	border: 2px dotted tokens.$neutral-black;
+	border: 2px dotted rgb(var(--v-theme-grey-darken60));
 	border-radius: 50%;
 }
 
@@ -1216,13 +1214,13 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-success !important;
+		color: rgb(var(--v-theme-textSuccess)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 	}
 }
 
@@ -1240,38 +1238,38 @@
 
 .v-messages__message--error {
 	:deep(.v-input__control) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
 .v-messages__message--warning {
 	:deep(.v-input__control) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 }
 
 :deep(.v-btn__content) {
-	font-size: tokens.$font-size-body-text + 3;
+	font-size: var(--v-fontSize-corpsDeTexte) + 3;
 	font-weight: bold;
 }
 
@@ -1307,7 +1305,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: tokens.$colors-background-main;
+	background-color: rgb(var(--v-theme-backgroundMain));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1315,7 +1313,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: tokens.$colors-background-accent-primary-contrasted !important;
+	background-color: rgb(var(--v-theme-backgroundAccentContrasted)) !important;
 }
 
 .fade-enter-active,