@cnamts/synapse 1.0.24 → 1.0.26

package/src/components/DatePicker/composables/useDateSelection.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 /**
  * Composable pour gérer la sélection de dates dans les composants CalendarMode
@@ -101,7 +102,7 @@ export function useDateSelection(
 		}
 		else if (typeof input === 'string') {
 			// Mode plage de dates
-			const dates = input.split(' - ')
+			const dates = input.split(DATE_PICKER_MESSAGES.RANGE_SEPARATOR)
 			if (dates.length === 2) {
 				const startDate = parseDate(dates[0]!, format)
 				const endDate = parseDate(dates[1]!, format)

package/src/components/DatePicker/composables/useDateTextField.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { ValidationResult } from '@/composables/validation/useValidation'
-import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+import type { DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 import { useManualDateValidation } from './useManualDateValidation'
 
 export interface UseDateTextFieldManualValidationOptions {
@@ -37,7 +37,7 @@ export interface UseDateTextFieldResetOptions {
 	inputValue: Ref<string>
 	selectedDates: Ref<unknown>
 	resetState: () => void
-	emitModel: (value: DateValue) => void
+	emitModel: (value: DateModelValue) => void
 }
 
 export interface UseDateTextFieldOptions {
@@ -80,7 +80,6 @@ export const useDateTextField = (options: UseDateTextFieldOptions) => {
 		isValidating.value = true
 		hasInteracted.value = true
 		const ok = await runRules(inputValue.value)
-		console.log('ok from validateOnSubmit:', ok)
 		isValidating.value = false
 		return ok
 	}

package/src/components/DatePicker/composables/useInputBlurHandler.ts

@@ -1,5 +1,5 @@
 import { type Ref, ref } from 'vue'
-import { type DateValue } from '@/composables/date/useDateInitializationDayjs'
+import { type DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 import { type DateObjectValue } from '../types'
 import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
@@ -27,7 +27,7 @@ export const useInputBlurHandler = (options: {
 	validateDateFormat: (dateStr: string) => { isValid: boolean, message: string }
 	parseDate: (dateStr: string, format: string) => Date | null
 	formatDate: (date: Date, format: string) => string
-	updateModel: (value: DateValue) => void
+	updateModel: (value: DateModelValue) => void
 	validateManualInput: (value: string) => boolean | Promise<boolean>
 
 	// Émetteurs d'événements

package/src/components/DatePicker/composables/useMonthButtonCustomization.ts

@@ -14,6 +14,7 @@ export function useMonthButtonCustomization(
 	const monthButtonText = ref('')
 	const yearText = ref('')
 	const monthButtonObservers: MutationObserver[] = []
+	const primaryThemeColor = 'rgb(var(--v-theme-primary, 12, 65, 154))'
 
 	onBeforeUnmount(() => {
 		monthButtonObservers.forEach(observer => observer.disconnect())
@@ -111,12 +112,12 @@ export function useMonthButtonCustomization(
 						)
 						monthBtnElement.setAttribute('data-ripple', 'false')
 						monthBtnElement.setAttribute('aria-label', monthText)
-						monthBtnElement.style.color = 'var(--v-theme-primary)'
+						monthBtnElement.style.color = primaryThemeColor
 
 						const buttonContentHTML = `
-							<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-								<span style="color: var(--v-theme-primary);">${monthText}</span> 
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+							<div class="v-btn__content" data-no-activator="" style="color: ${primaryThemeColor};">
+								<span style="color: ${primaryThemeColor};">${monthText}</span> 
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: ${primaryThemeColor};" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 							</div>
 						`
 
@@ -167,12 +168,12 @@ export function useMonthButtonCustomization(
 						)
 						yearBtnElement.setAttribute('data-ripple', 'false')
 						yearBtnElement.setAttribute('aria-label', displayedYear)
-						yearBtnElement.style.color = 'var(--v-theme-primary)'
+						yearBtnElement.style.color = primaryThemeColor
 
 						const yearButtonContentHTML = `
-							<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-								<span style="color: var(--v-theme-primary);">${displayedYear}</span> 
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+							<div class="v-btn__content" data-no-activator="" style="color: ${primaryThemeColor};">
+								<span style="color: ${primaryThemeColor};">${displayedYear}</span> 
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: ${primaryThemeColor};" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 							</div>
 						`
 

package/src/components/DatePicker/playground/DatePickerHolidayRule.vue

@@ -135,7 +135,7 @@
 .holiday-list {
 	max-height: 200px;
 	overflow-y: auto;
-	background-color: #fff;
+	background-color: rgb(var(--v-theme-surface));
 	padding: 10px;
 	border-radius: 4px;
 	border: 1px solid #e0e0e0;

package/src/components/DatePicker/types.ts

@@ -9,7 +9,6 @@
 export type DateObjectValue = Date | (Date | null)[] | null
 
 /**
- * Alias pour maintenir la compatibilité avec le code existant
- * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateValue depuis useDateInitializationDayjs pour les chaînes
+ * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateModelValue depuis useDateInitializationDayjs pour les chaînes
  */
 export type DateValue = DateObjectValue

package/src/components/DialogBox/DialogBox.stories.ts

@@ -730,7 +730,7 @@ export const VuetifyOptions: Story = {
 				rounded: 'xl',
 			},
 			cardTitle: {
-				class: 'pa-5 mb-4 accent--text',
+				class: 'pa-5 mb-4 secondary--text',
 			},
 			closeBtn: {
 				class: {
@@ -738,14 +738,14 @@ export const VuetifyOptions: Story = {
 				},
 			},
 			icon: {
-				color: 'accent',
+				color: 'secondary',
 			},
 			cancelBtn: {
-				color: 'accent',
+				color: 'secondary',
 				text: false,
 			},
 			confirmBtn: {
-				color: 'accent',
+				color: 'secondary',
 				text: true,
 			},
 		},
@@ -813,7 +813,7 @@ export const VuetifyOptions: Story = {
 							rounded: 'xl',
 						},
 						cardTitle: {
-							class: 'pa-5 mb-4 accent--text',
+							class: 'pa-5 mb-4 secondary--text',
 						},
 						closeBtn: {
 							class: {
@@ -821,14 +821,14 @@ export const VuetifyOptions: Story = {
 							},
 						},
 						icon: {
-							color: 'accent',
+							color: 'secondary',
 						},
 						cancelBtn: {
-							color: 'accent',
+							color: 'secondary',
 							text: false,
 						},
 						confirmBtn: {
-							color: 'accent',
+							color: 'secondary',
 							text: true,
 						},
 					}

package/src/components/DialogBox/DialogBox.vue

@@ -244,8 +244,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens' as *;
-
 .sy-dialog-box-actions :deep(.v-btn) {
 	box-shadow: none;
 }
@@ -255,7 +253,7 @@
 }
 
 .v-btn--icon {
-	color: $colors-icon-base;
+	color: rgb(var(--v-theme-iconBase));
 	position: absolute;
 	right: 24px;
 }
@@ -285,7 +283,7 @@ h2 {
 	display: flex;
 	flex-direction: column;
 	justify-content: stretch;
-	gap: $spacing-small;
+	gap: 16px;
 }
 
 .sy-dialog-box-draggable .sy-dialog-box-title {
@@ -303,7 +301,7 @@ h2 {
 	user-select: none;
 }
 
-@media screen and (min-width: $container-mobile-max-width) {
+@media screen and (width >= 600px) {
 	.sy-dialog-box-actions-ctn {
 		flex-direction: row;
 	}

package/src/components/DialogBox/accessibilite/Accessibility.mdx

@@ -1,14 +1,13 @@
-import { Meta, Story, Primary } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
 import * as DialogBoxStories from '../DialogBox.stories.ts';
 import '@/stories/styles/shared.css';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
 import {
-	AccessibilityGuideLayout,
-	CriteriaSection,
-	CriteriaCard,
-	DemoSection,
-	BestPracticesSection,
-	ResourcesSection,
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    AuditSection
 } from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={DialogBoxStories} />
@@ -16,20 +15,85 @@ import {
 	componentName="DialogBox"
 	iconSrc={AccessibilityIcon}
 >
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DialogBox.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/798" target="_blank" style={{color:'#0C41BD'}}>issue #798</a>)</p>
-	</div>
-<CriteriaSection>
-<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
-  <ul>
-    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
-      <code>&lt;DialogBox
-          :heading-level="2" /&gt; </code>
-    
-    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
-  </ul>
-</CriteriaCard>
-</CriteriaSection>
+    <AuditSection>
+        <div>Rapport d’audit manuel : <a href="/audits/DialogBox.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
+        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>
+            Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/798" target="_blank" style={{color: '#0C41BD'}}>issue #798</a>)
+        </div>
+    </AuditSection>
+    <CriteriaSection>
+        <CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+            <ul>
+                <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
+                <code>&lt;DialogBox
+                    :heading-level="2" /&gt; </code>
+
+                <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+
+                <li>Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau<strong> h2</strong>.</li>
+
+                <li>Ce titre est rendu via le composant<strong> SyHeading</strong>, ce qui garantit une structure sémantique correcte dans le DOM.</li>
+
+                <li><strong>Accessibilité :</strong> permet de respecter une hiérarchie de titres cohérente et pertinente pour les technologies d’assistance (critère 9.1.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎯" title="Gestion automatique du focus à l’ouverture et à la fermeture">
+            <ul>
+                <li>À l’ouverture de la modale, le focus est déplacé soit sur le bouton de validation (<strong>autofocusValidateBtn</strong>), soit sur la zone de titre si la modale est draggable.</li>
+
+                <li>À la fermeture, le focus est automatiquement restauré sur l’élément qui avait le focus avant l’ouverture.</li>
+
+                <li><strong>Accessibilité :</strong> évite la perte de contexte pour les utilisateurs clavier et lecteurs d’écran (critère 7.3 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Piégeage du focus dans la boîte de dialogue">
+            <ul>
+                <li>La navigation clavier avec la touche<strong> Tab </strong>est maintenue à l’intérieur de la modale.</li>
+
+                <li>Le focus boucle automatiquement entre le premier et le dernier élément interactif.</li>
+
+                <li>La combinaison<strong> Shift + Tab </strong>est également gérée.</li>
+
+                <li><strong>Accessibilité :</strong> empêche la sortie involontaire du focus hors de la fenêtre modale (critère 7.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🏷️" title="Association correcte du titre avec aria-labelledby">
+            <ul>
+                <li>Le composant utilise un identifiant unique généré avec <strong>useId() </strong>.</li>
+
+                <li>Cet identifiant est appliqué au titre et référencé via <strong> aria-labelledby </strong>sur le composant dialog.</li>
+
+                <li>Le composant déclare également<strong> aria-modal="true" </strong>.</li>
+
+                <li><strong>Accessibilité :</strong> permet aux lecteurs d’écran d’annoncer correctement le contexte de la fenêtre modale (critère 7.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="✋" title="Support clavier du mode draggable">
+            <ul>
+                <li>Lorsque la prop<strong> draggable </strong>est activée, le titre devient focusable avec <strong>tabindex="0"</strong>.</li>
+
+                <li>Le déplacement peut être réalisé avec les flèches clavier (gauche, droite, haut, bas).</li>
+
+                <li>Des attributs<strong> title </strong>et <strong> aria-label </strong>expliquent l’usage aux utilisateurs.</li>
+
+                <li><strong>Accessibilité :</strong> rend le déplacement utilisable sans souris et améliore l’accessibilité fonctionnelle.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="❌" title="Bouton de fermeture explicite et accessible">
+            <ul>
+                <li>Le bouton de fermeture possède un<strong> aria-label </strong>explicite.</li>
+
+                <li>L’icône est décorative (<strong>decorative=true</strong>) pour éviter une lecture redondante.</li>
+
+                <li>Le style de focus visible est renforcé pour garantir une navigation clavier claire.</li>
 
+                <li><strong>Accessibilité :</strong> assure une identification immédiate de l’action de fermeture (critère 11.10 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
 </AccessibilityGuideLayout>

package/src/components/DialogBox/tests/DialogBox.visual.cy.ts

@@ -0,0 +1,76 @@
+import { h } from 'vue'
+import DialogBox from '../DialogBox.vue'
+
+const dialogTransitionOptions = {
+	global: {
+		stubs: {
+			'transition': false,
+			'transition-group': false,
+		},
+	},
+} as const
+
+function waitForDialogTransitionEnd() {
+	cy.get('.v-overlay__content')
+		.should('be.visible')
+		.and('not.have.class', 'dialog-transition-enter-active')
+}
+
+describe('DialogBox - Visual regression tests', () => {
+	it('displays the opened dialog box', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Confirmer la suppression',
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Êtes-vous sûr de vouloir supprimer cet élément ?'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-default')
+	})
+
+	it('displays the dialog box without actions', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Information',
+				'hideActions': true,
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Ceci est un message informatif.'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-no-actions')
+	})
+
+	it('displays the dialog box with custom texts', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Valider le formulaire',
+				'cancelBtnText': 'Annuler',
+				'confirmBtnText': 'Valider',
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Souhaitez-vous valider ce formulaire ?'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-custom-texts')
+	})
+})

package/src/components/FileList/FileList.vue

@@ -19,8 +19,14 @@
 	const props = withDefaults(defineProps<{
 		uploadList: Item[]
 		locales?: typeof defaultLocales
+		seeLabel?: string
+		importLabel?: string
+		deleteLabel?: string
 	} & Widthable>(), {
 		locales: () => defaultLocales,
+		seeLabel: undefined,
+		importLabel: undefined,
+		deleteLabel: undefined,
 	})
 
 	const { widthStyles } = useWidthable(props)
@@ -51,6 +57,9 @@
 			:show-delete-btn="item.showDeleteBtn"
 			tag="li"
 			:locales="locales"
+			:see-label="seeLabel"
+			:import-label="importLabel"
+			:delete-label="deleteLabel"
 			@upload="() => $emit('upload', uploadList.find((i) => i.id === item.id) as Item)"
 			@preview="() => $emit('preview', uploadList.find((i) => i.id === item.id) as Item)"
 			@delete="() => $emit('delete', uploadList.find((i) => i.id === item.id) as Item)"
@@ -66,8 +75,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .upload-list {
 	display: flex;
 	flex-direction: column;

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -206,14 +206,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .file-item {
 	display: flex;
 	flex-direction: column;
-	gap: tokens.$gap-3;
-	padding-block: tokens.$padding-4;
-	border-bottom: 1px solid tokens.$colors-border-subdued;
+	gap: var(--v-gap-3);
+	padding-block: var(--v-padding-4);
+	border-bottom: 1px solid rgb(var(--v-theme-borderSubdued));
 
 	&:first-child:last-child {
 		border-bottom: none;
@@ -221,12 +219,12 @@
 }
 
 .file-item__title {
-	font-size: tokens.$font-size-body-text;
+	font-size: var(--v-fontSize-corpsDeTexte);
 }
 
 .file-item__name {
 	font-size: 0.875rem;
-	color: tokens.$colors-text-base;
+	color: rgb(var(--v-theme-textBase));
 }
 
 .file-item__description {
@@ -252,7 +250,7 @@
 
 .file-item__content {
 	display: flex;
-	gap: tokens.$gap-4;
+	gap: var(--v-gap-4);
 	align-items: center;
 }
 
@@ -263,9 +261,9 @@
 	justify-content: center;
 	margin-left: auto;
 	height: 100%;
-	gap: tokens.$gap-1;
+	gap: var(--v-gap-1);
 
-	@media screen and (min-width: tokens.$container-tablet-max-width) {
+	@media screen and (width >= 960px) {
 		flex-direction: row;
 	}
 }
@@ -280,18 +278,18 @@
 
 .file-item__message {
 	font-size: 0.875rem;
-	color: tokens.$colors-text-subdued;
+	color: rgb(var(--v-theme-textSubdued));
 }
 
 .file-item__message-success,
 .file-item__message-error {
-	margin-top: tokens.$gap-3;
+	margin-top: var(--v-gap-3);
 }
 
 .file-item__message-error {
 	display: flex;
 	align-items: center;
-	gap: tokens.$gap-4;
+	gap: var(--v-gap-4);
 }
 
 </style>

package/src/components/FileList/tests/FileList.spec.ts

@@ -135,6 +135,53 @@ describe('FileList', () => {
 		expect(wrapper.emitted('preview')?.[0]?.[0]).toEqual(fileItem2)
 	})
 
+	it('forwards seeLabel, importLabel, deleteLabel to all items', () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{ id: 'file1', title: 'file1', state: 'initial' },
+					{ id: 'file2', title: 'file2', state: 'success', showDeleteBtn: true, showPreviewBtn: true },
+				],
+				importLabel: 'Ajouter',
+				seeLabel: 'Consulter',
+				deleteLabel: 'Retirer',
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.find('.file-item__action-upload').text()).toContain('Ajouter')
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.find('.file-item__action-preview').text()).toContain('Consulter')
+		expect(item2!.find('.file-item__action-delete').text()).toContain('Retirer')
+	})
+
+	it('uses locales for button labels when individual label props are not passed', () => {
+		const customLocales = {
+			...locales,
+			import: 'Déposer',
+			see: 'Afficher',
+			delete: 'Effacer',
+		}
+
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{ id: 'file1', title: 'file1', state: 'initial' },
+					{ id: 'file2', title: 'file2', state: 'success', showDeleteBtn: true, showPreviewBtn: true },
+				],
+				locales: customLocales,
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.find('.file-item__action-upload').text()).toContain('Importer le fichier')
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.find('.file-item__action-preview').text()).toContain('Voir le fichier')
+		expect(item2!.find('.file-item__action-delete').text()).toContain('Supprimer le fichier')
+	})
+
 	it('shows when a file is optional', () => {
 		const wrapper = mount(FileList, {
 			props: {

package/src/components/FileUpload/FileUpload.vue

@@ -167,8 +167,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-file-upload-wrapper {
 	display: contents;
 }
@@ -176,14 +174,14 @@
 .sy-file-upload {
 	cursor: pointer;
 	position: relative;
-	border: 1px dashed tokens.$colors-border-accent-primary;
-	border-radius: tokens.$radius-rounded-lg;
+	border: 1px dashed rgb(var(--v-theme-borderAccentPrimary));
+	border-radius: var(--v-radius-roundedLg);
 	transition: background 0.25s;
 
 	&:hover,
 	&:focus-within,
 	&.dragover {
-		background: tokens.$colors-background-surface-alt;
+		background: rgb(var(--v-theme-backgroundSurfaceAlt));
 	}
 
 	&.dark-mode {

package/src/components/FileUpload/FileUploadContent.vue

@@ -88,8 +88,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-file-upload-placeholder {
 	display: flex;
 	align-items: center;
@@ -98,14 +96,14 @@
 
 .sy-file-upload-caption {
 	font-size: 0.875rem;
-	color: tokens.$colors-text-subdued;
+	color: rgb(var(--v-theme-textSubdued));
 }
 
 .sy-file-upload-btn {
-	border-radius: tokens.$radius-rounded;
+	border-radius: var(--v-radius-rounded);
 	transition: background 0.25s;
 	font-weight: 700 !important;
-	font-size: tokens.$heading-3-font-size;
+	font-size: var(--v-fontSize-corpsDeTexte);
 	padding: 10px 16px;
 }
 </style>

package/src/components/FilterInline/FilterInline.vue

@@ -100,10 +100,8 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .v-badge :deep(.v-badge__badge) {
-	color: tokens.$cyan-darken-40 !important;
+	color: rgb(var(--v-theme-cyan-darken40)) !important;
 	background-color: white;
 }