@cnamts/synapse 1.0.14 → 1.0.16

package/src/utils/rules/isHolidayDay/IsHolidayDay.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks'
+import { Meta, Source } from '@storybook/blocks'
 
 <Meta title="Guide du dev/Règles De Validation/isHolidayDay" />
 <style>
@@ -31,32 +31,44 @@ import { Meta } from '@storybook/blocks'
 
 ## Utilisation
 
-```ts
+<Source dark code={`
 import { isHolidayDay } from '@/utils/isHolidayDay'
 
 const rules = [
   isHolidayDay,
 ]
-```
+`} />
+
 
 ## Personnalisation des messages d'erreur
 
 Vous pouvez personnaliser le message d'erreur en utilisant la fonction `isHolidayDayFn` :
 
-```ts
+
+<Source dark code={`
 import { isHolidayDayFn } from '@/utils/isHolidayDay'
 
 const customRule = isHolidayDayFn({
   default: 'Veuillez sélectionner une date qui n\'est pas un jour férié.',
 })
-```
+`} />
 
 ## Fonctionnement
 
-Cette règle utilise le composable `useHolidayDay` pour déterminer si une date est un jour férié en France. La règle retourne :
+Cette règle utilise le composable `useHolidayDay` pour déterminer si une date est un jour férié en France. La valeur peut être une chaîne de caractères (format `DD/MM/YYYY`) ou un objet `Date`. La règle retourne :
 
 - `true` si la valeur est vide ou si la date n'est pas un jour férié
-- Un message d'erreur si la date est un jour férié
+- Un message d'erreur si la date est un jour férié ou si le type de valeur n'est pas supporté
+
+## API
+
+<Source dark code={`
+isHolidayDayFn(
+  errorMessages?: {
+    default: string;
+  }
+): (value: string | Date) => true | string;
+`} />
 
 ## Jours fériés pris en compte
 

package/src/utils/rules/isHolidayDay/index.ts

@@ -1,4 +1,3 @@
-import { ruleMessage } from '@/utils/ruleMessage'
 import { useHolidayDay } from '@/composables/date/useHolidayDay'
 import type {
 	ErrorMessages,
@@ -7,6 +6,7 @@ import type {
 	Value,
 } from '@/utils/rules/types'
 import { defaultErrorMessages } from './locales'
+import { validateDateValue } from '../validateDateValue'
 
 /**
  * Vérifie qu'une date n'est pas un jour férié
@@ -17,16 +17,14 @@ export function isHolidayDayFn(
 	errorMessages: ErrorMessages = defaultErrorMessages,
 ): ValidationRule {
 	return (value: Value): ValidationResult => {
-		// Si la valeur est vide, on considère que c'est valide
-		if (!value) {
-			return true
-		}
-
 		// Utiliser le composable pour vérifier si la date est un jour férié
 		const { isHolidayDay } = useHolidayDay()
-
 		// On retourne true si ce n'est PAS un jour férié, sinon on retourne le message d'erreur
-		return ((typeof value === 'string' || value instanceof Date) && !isHolidayDay(value)) || ruleMessage(errorMessages, 'default')
+		return validateDateValue(
+			value,
+			formatted => !isHolidayDay(formatted),
+			{ errorMessages },
+		)
 	}
 }
 

package/src/utils/rules/isHolidayDay/tests/isHolidayDay.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { isHolidayDay } from '../index'
+import { isHolidayDay, isHolidayDayFn } from '../index'
 
 // Mock du composable useHolidayDay
 // => du coup on ne teste plus la vrai fonction isHolidayDay mais son mock !
@@ -42,4 +42,16 @@ describe('isHolidayDay', () => {
 		expect(isHolidayDay(new Date('2025-07-14'))).toBe('La date ne peut pas être un jour férié.')
 		expect(isHolidayDay(new Date('2025-12-25'))).toBe('La date ne peut pas être un jour férié.')
 	})
+
+	it('devrait retourner un message d\'erreur si le type de valeur n\'est pas supporté', () => {
+		expect(isHolidayDay(123)).toBe('La date ne peut pas être un jour férié.')
+	})
+
+	it('devrait permettre de définir un message d\'erreur personnalisé via isHolidayDayFn', () => {
+		const rule = isHolidayDayFn({
+			default: 'Veuillez sélectionner une journée non fériée.',
+		})
+
+		expect(rule('01/01/2025')).toBe('Veuillez sélectionner une journée non fériée.')
+	})
 })

package/src/utils/rules/isNotAfterDate/IsNotAfterDate.mdx

@@ -72,7 +72,7 @@ isNotAfterDateFn(
 	errorMessages?: {
 		default: (date: string) => string;
 	}
-): (value: string) => true | string;
+): (value: string | Date) => true | string;
 
 `} />
 
@@ -84,7 +84,7 @@ isNotAfterDateFn(
 
 ### Valeurs de retour
 
-Retourne une fonction de validation qui vérifie si la date passée en paramètre n'est pas postérieure à la date de référence.
+Retourne une fonction de validation qui accepte une chaîne de caractères ou un objet `Date` représentant une date et vérifie que cette date n'est pas postérieure à la date de référence.
 
 ## Exemples
 

package/src/utils/rules/isNotAfterDate/IsNotAfterDate.stories.ts

@@ -63,16 +63,19 @@ export const CustomMessage: StoryObj<unknown> = {
 		return {
 			components: { VTextField },
 			setup() {
+				const model = ref('12/12/2023')
 				const date = isNotAfterDateFn('01/01/2022', {
 					default: (date: string) => `The date must not be after ${date}`,
 				})
-				return { date }
+				return { date, model }
 			},
 			template: `
 				<VTextField
+					v-model="model"
 					:rules="[date]"
 					label="Date"
 					variant="outlined"
+					validate-on="eager blur"
 				/>
 			`,
 		}
@@ -84,11 +87,13 @@ export const CustomMessage: StoryObj<unknown> = {
 				code: `
 				<script setup lang="ts">
 					import { VTextField } from 'vuetify/components'
+					import { ref } from 'vue'
 					import { isNotAfterDateFn } from '@cnamts/synapse'
 
 					const date = isNotAfterDateFn('01/01/2022', {
-						default: (date: string) => \`The date must not be after \${date}\`,
+						default: (date: string) => 'The date must not be after ' + date,
 					})
+					const model = ref('12/12/2023')
 				</script>
 				`,
 			},
@@ -97,9 +102,11 @@ export const CustomMessage: StoryObj<unknown> = {
 				code: `
 				<template>
 					<VTextField
+						v-model="model"
 						:rules="[date]"
 						label="Date"
 						variant="outlined"
+						validate-on="eager blur"
 					/>
 				</template>
 				`,

package/src/utils/rules/isNotAfterDate/index.ts

@@ -1,9 +1,9 @@
 import { formatDate } from '@/utils/formatDate'
 import { parseDate } from '@/utils/parseDate'
-import { ruleMessage } from '@/utils/ruleMessage'
 import { isDateAfter } from '../../functions/validation/isDateAfter'
 import type { ValidationResult, ValidationRule, Value } from '../types'
 import { defaultErrorMessages } from './locales'
+import { validateDateValue } from '../validateDateValue'
 
 /** Check that the value is not after the specified date (DD/MM/YYYY format) */
 export function isNotAfterDateFn(
@@ -11,19 +11,12 @@ export function isNotAfterDateFn(
 	errorMessages = defaultErrorMessages,
 ): ValidationRule {
 	return (value: Value): ValidationResult => {
-		if (!value) {
-			return true
-		}
-
-		if (typeof value !== 'string') {
-			return ruleMessage(errorMessages, 'default')
-		}
-
 		const formattedValue = formatDate(parseDate(date))
 
-		return (
-			!isDateAfter(date, value)
-			|| ruleMessage(errorMessages, 'default', [formattedValue])
+		return validateDateValue(
+			value,
+			formatted => !isDateAfter(date, formatted),
+			{ errorMessages, messageArgs: [formattedValue] },
 		)
 	}
 }

package/src/utils/rules/isNotAfterDate/tests/isNotAfterDate.spec.ts

@@ -8,6 +8,9 @@ describe('notAfterDate', () => {
 	const currentDate = formatDate(dayjs())
 	const pastDate = formatDate(dayjs().subtract(1, 'year'))
 	const futureDate = formatDate(dayjs().add(1, 'year'))
+	const pastDateObject = dayjs().subtract(1, 'year').toDate()
+	const futureDateObject = dayjs().add(1, 'year').toDate()
+	const todayDateObject = dayjs().toDate()
 
 	const rule = isNotAfterDateFn(currentDate)
 
@@ -22,4 +25,21 @@ describe('notAfterDate', () => {
 	it('returns true if the value is falsy', () => {
 		expect(rule('')).toBe(true)
 	})
+
+	it('returns true with a past Date object', () => {
+		expect(rule(pastDateObject)).toBe(true)
+	})
+
+	it('returns an error with a future Date object', () => {
+		expect(typeof rule(futureDateObject)).toBe('string')
+	})
+
+	it('returns true when the value is the reference date as a Date object', () => {
+		expect(rule(todayDateObject)).toBe(true)
+	})
+
+	it('returns an error when the value type is not supported', () => {
+		// number is allowed by Value type but is not handled by the rule
+		expect(typeof rule(123 as unknown as string)).toBe('string')
+	})
 })

package/src/utils/rules/isNotAfterToday/IsNotAfterToday.mdx

@@ -88,7 +88,7 @@ isNotAfterTodayFn(
 	errorMessages?: {
 		default: string;
 	}
-): (value: string) => true | string;
+): (value: string | Date) => true | string;
 
 `} />
 
@@ -99,7 +99,7 @@ isNotAfterTodayFn(
 
 ### Valeurs de retour
 
-Retourne une fonction qui prend en paramètre une chaîne de caractères représentant une date et retourne `true` si la date n'est pas postérieure à la date du jour, sinon retourne un message d'erreur.
+Retourne une fonction qui prend en paramètre une chaîne de caractères ou un objet `Date` représentant une date et retourne `true` si la date n'est pas postérieure à la date du jour, sinon retourne un message d'erreur.
 
 ## Exemples
 

package/src/utils/rules/isNotAfterToday/IsNotAfterToday.stories.ts

@@ -60,15 +60,17 @@ export const CustomMessage: StoryObj<unknown> = {
 		return {
 			components: { VTextField },
 			setup() {
+				const model = ref('31/12/2999')
 				const messages = {
 					default: 'The date must not be after today.',
 				}
 				const dateRule = isNotAfterTodayFn(messages)
 
-				return { dateRule }
+				return { dateRule, model }
 			},
 			template: `
 				<VTextField
+					v-model="model"
 					:rules="[dateRule]"
 					label="Date"
 					variant="outlined"
@@ -84,12 +86,14 @@ export const CustomMessage: StoryObj<unknown> = {
 				code: `
 				<script setup lang="ts">
 					import { VTextField } from 'vuetify/components'
+					import { ref } from 'vue'
 					import { isNotAfterTodayFn } from '@cnamts/synapse'
-				
+
 					const messages = {
 						default: 'The date must not be after today.',
 					}
 					const dateRule = isNotAfterTodayFn(messages)
+					const model = ref('31/12/2999')
 				</script>
 				`,
 			},
@@ -98,9 +102,11 @@ export const CustomMessage: StoryObj<unknown> = {
 				code: `
 				<template>
 					<VTextField
+						v-model="model"
 						:rules="[dateRule]"
 						label="Date"
 						variant="outlined"
+						validate-on="eager blur"
 					/>
 				</template>
 				`,

package/src/utils/rules/isNotAfterToday/index.ts

@@ -1,5 +1,4 @@
 import { formatDate } from '@/utils/formatDate'
-import { ruleMessage } from '@/utils/ruleMessage'
 import dayjs from 'dayjs'
 import { isDateAfter } from '../../functions/validation/isDateAfter'
 import type {
@@ -9,18 +8,19 @@ import type {
 	Value,
 } from '../types'
 import { defaultErrorMessages } from './locales'
+import { validateDateValue } from '../validateDateValue'
 
 /** Check that the value is not after today (DD/MM/YYYY format) */
 export function isNotAfterTodayFn(
 	errorMessages: ErrorMessages = defaultErrorMessages,
 ): ValidationRule {
 	return (value: Value): ValidationResult => {
-		if (!value) {
-			return true
-		}
+		const today = formatDate(dayjs())
 
-		return (
-			(typeof value === 'string' && !isDateAfter(formatDate(dayjs()), value)) || ruleMessage(errorMessages, 'default')
+		return validateDateValue(
+			value,
+			formatted => !isDateAfter(today, formatted),
+			{ errorMessages },
 		)
 	}
 }

package/src/utils/rules/isNotAfterToday/tests/isNotAfterToday.spec.ts

@@ -8,6 +8,9 @@ const DATE_FORMAT = 'DD/MM/YYYY'
 const pastDate = dayjs().subtract(1, 'year').format(DATE_FORMAT)
 const futureDate = dayjs().add(1, 'year').format(DATE_FORMAT)
 const today = dayjs().format(DATE_FORMAT)
+const pastDateObject = dayjs().subtract(1, 'year').toDate()
+const futureDateObject = dayjs().add(1, 'year').toDate()
+const todayDateObject = dayjs().toDate()
 
 describe('notAfterTodayFn', () => {
 	const notAfterToday = isNotAfterTodayFn(defaultErrorMessages)
@@ -27,4 +30,21 @@ describe('notAfterTodayFn', () => {
 	it('returns true when value is today', () => {
 		expect(notAfterToday(today)).toBe(true)
 	})
+
+	it('returns true when value is a past Date object', () => {
+		expect(notAfterToday(pastDateObject)).toBe(true)
+	})
+
+	it('returns error message when value is a future Date object', () => {
+		expect(notAfterToday(futureDateObject)).toBe(defaultErrorMessages.default)
+	})
+
+	it('returns true when value is today as a Date object', () => {
+		expect(notAfterToday(todayDateObject)).toBe(true)
+	})
+
+	it('returns error message when value type is not supported', () => {
+		// number is allowed by Value type but is not handled by the rule
+		expect(notAfterToday(123 as unknown as string)).toBe(defaultErrorMessages.default)
+	})
 })

package/src/utils/rules/isNotBeforeDate/IsNotBeforeDate.mdx

@@ -72,7 +72,7 @@ isNotBeforeDateFn(
 	errorMessages?: {
 		default?: (date: string) => string;
 	}
-): (value: string) => true | string;
+): (value: string | Date) => true | string;
 
 `} />
 
@@ -84,7 +84,7 @@ isNotBeforeDateFn(
 
 ### Valeurs de retour
 
-Retourne une fonction de validation utilisable dans un champs de formulaire Vuetify qui permet de vérifier si la date passée en paramètre n'est pas antérieure à la date de référence.
+Retourne une fonction de validation utilisable dans un champs de formulaire Vuetify qui accepte une chaîne de caractères ou un objet `Date` représentant une date et permet de vérifier que cette date n'est pas antérieure à la date de référence.
 
 ## Exemples
 

package/src/utils/rules/isNotBeforeDate/index.ts

@@ -3,7 +3,7 @@ import { defaultErrorMessages } from './locales'
 import { isDateBefore } from '../../functions/validation/isDateBefore'
 import { formatDate } from '@/utils/formatDate'
 import { parseDate } from '@/utils/parseDate'
-import { ruleMessage } from '@/utils/ruleMessage'
+import { validateDateValue } from '../validateDateValue'
 
 /** Check that the value is not after the specified date (DD/MM/YYYY format) */
 export function isNotBeforeDateFn(
@@ -11,19 +11,12 @@ export function isNotBeforeDateFn(
 	errorMessages = defaultErrorMessages,
 ): ValidationRule {
 	return (value: Value): ValidationResult => {
-		if (!value) {
-			return true
-		}
-
-		if (typeof value !== 'string') {
-			return ruleMessage(errorMessages, 'default')
-		}
-
 		const formattedValue = formatDate(parseDate(date))
 
-		return (
-			!isDateBefore(date, value)
-			|| ruleMessage(errorMessages, 'default', [formattedValue])
+		return validateDateValue(
+			value,
+			formatted => !isDateBefore(date, formatted),
+			{ errorMessages, messageArgs: [formattedValue] },
 		)
 	}
 }

package/src/utils/rules/isNotBeforeDate/tests/IsNotBeforeDate.spec.ts

@@ -8,6 +8,9 @@ describe('isNotBeforeDate', () => {
 	const currentDate = formatDate(dayjs())
 	const pastDate = formatDate(dayjs().subtract(1, 'year'))
 	const futureDate = formatDate(dayjs().add(1, 'year'))
+	const pastDateObject = dayjs().subtract(1, 'year').toDate()
+	const futureDateObject = dayjs().add(1, 'year').toDate()
+	const todayDateObject = dayjs().toDate()
 
 	const rule = isNotBeforeDateFn(currentDate)
 
@@ -22,4 +25,21 @@ describe('isNotBeforeDate', () => {
 	it('returns true if the value is falsy', () => {
 		expect(rule('')).toBe(true)
 	})
+
+	it('returns true with a future Date object', () => {
+		expect(rule(futureDateObject)).toBe(true)
+	})
+
+	it('returns an error with a past Date object', () => {
+		expect(typeof rule(pastDateObject)).toBe('string')
+	})
+
+	it('returns true when the value is the reference date as a Date object', () => {
+		expect(rule(todayDateObject)).toBe(true)
+	})
+
+	it('returns an error when the value type is not supported', () => {
+		// number is allowed by Value type but is not handled by the rule
+		expect(typeof rule(123 as unknown as string)).toBe('string')
+	})
 })

package/src/utils/rules/isNotBeforeToday/IsNotBeforeToday.mdx

@@ -89,7 +89,7 @@ isNotBeforeTodayFn(
 	errorMessages?: {
 		default: string;
 	}
-): (value: string) => true | string;
+): (value: string | Date) => true | string;
 
 `} />
 
@@ -100,7 +100,7 @@ isNotBeforeTodayFn(
 
 ### Valeurs de retour
 
-Retourne une fonction qui prend en paramètre une chaîne de caractères représentant une date et retourne `true` si la date n'est pas antérieur à la date du jour, sinon retourne un message d'erreur.
+Retourne une fonction qui prend en paramètre une chaîne de caractères ou un objet `Date` représentant une date et retourne `true` si la date n'est pas antérieure à la date du jour, sinon retourne un message d'erreur.
 
 ## Exemples
 

package/src/utils/rules/isNotBeforeToday/IsNotBeforeToday.stories.ts

@@ -60,15 +60,17 @@ export const CustomMessage: StoryObj<unknown> = {
 		return {
 			components: { VTextField },
 			setup() {
+				const model = ref('01/01/2000')
 				const messages = {
 					default: 'The date must not be Before today.',
 				}
 				const dateRule = isNotBeforeTodayFn(messages)
 
-				return { dateRule }
+				return { dateRule, model }
 			},
 			template: `
 				<VTextField
+					v-model="model"
 					:rules="[dateRule]"
 					label="Date"
 					variant="outlined"
@@ -84,12 +86,14 @@ export const CustomMessage: StoryObj<unknown> = {
 				code: `
 				<script setup lang="ts">
 					import { VTextField } from 'vuetify/components'
+					import { ref } from 'vue'
 					import { isNotBeforeTodayFn } from '@cnamts/synapse'
-				
+
 					const messages = {
 						default: 'The date must not be Before today.',
 					}
 					const dateRule = isNotBeforeTodayFn(messages)
+					const model = ref('01/01/2000')
 				</script>
 				`,
 			},
@@ -98,9 +102,11 @@ export const CustomMessage: StoryObj<unknown> = {
 				code: `
 				<template>
 					<VTextField
+						v-model="model"
 						:rules="[dateRule]"
 						label="Date"
 						variant="outlined"
+						validate-on="eager blur"
 					/>
 				</template>
 				`,

package/src/utils/rules/isNotBeforeToday/index.ts

@@ -1,5 +1,4 @@
 import { formatDate } from '@/utils/formatDate'
-import { ruleMessage } from '@/utils/ruleMessage'
 import dayjs from 'dayjs'
 import { isDateBefore } from '../../functions/validation/isDateBefore'
 import type {
@@ -9,18 +8,19 @@ import type {
 	Value,
 } from '../types'
 import { defaultErrorMessages } from './locales'
+import { validateDateValue } from '../validateDateValue'
 
 /** Check that the value is not before today (DD/MM/YYYY format) */
 export function isNotBeforeTodayFn(
 	errorMessages: ErrorMessages = defaultErrorMessages,
 ): ValidationRule {
 	return (value: Value): ValidationResult => {
-		if (!value) {
-			return true
-		}
+		const today = formatDate(dayjs())
 
-		return (
-			(typeof value === 'string' && !isDateBefore(formatDate(dayjs()), value)) || ruleMessage(errorMessages, 'default')
+		return validateDateValue(
+			value,
+			formatted => !isDateBefore(today, formatted),
+			{ errorMessages },
 		)
 	}
 }

package/src/utils/rules/isNotBeforeToday/tests/notBeforeToday.spec.ts

@@ -8,6 +8,9 @@ const DATE_FORMAT = 'DD/MM/YYYY'
 const pastDate = dayjs().subtract(1, 'year').format(DATE_FORMAT)
 const futureDate = dayjs().add(1, 'year').format(DATE_FORMAT)
 const today = dayjs().format(DATE_FORMAT)
+const pastDateObject = dayjs().subtract(1, 'year').toDate()
+const futureDateObject = dayjs().add(1, 'year').toDate()
+const todayDateObject = dayjs().toDate()
 
 describe('isNotBeforeToday', () => {
 	it('returns an error when the date is past', () => {
@@ -33,4 +36,20 @@ describe('isNotBeforeToday', () => {
 	it('returns true when value is today', () => {
 		expect(isNotBeforeToday(today)).toBe(true)
 	})
+
+	it('returns an error when the value is a past Date object', () => {
+		expect(typeof isNotBeforeToday(pastDateObject)).toBe('string')
+	})
+
+	it('returns true when the value is a future Date object', () => {
+		expect(isNotBeforeToday(futureDateObject)).toBe(true)
+	})
+
+	it('returns true when the value is today as a Date object', () => {
+		expect(isNotBeforeToday(todayDateObject)).toBe(true)
+	})
+
+	it('returns an error when the value is neither a string nor a Date', () => {
+		expect(typeof isNotBeforeToday(123)).toBe('string')
+	})
 })

package/src/utils/rules/validateDateValue.ts

@@ -0,0 +1,37 @@
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatDate'
+import { ruleMessage } from '@/utils/ruleMessage'
+import type { ErrorMessages, ValidationResult, Value } from './types'
+
+interface ValidateDateOptions {
+	errorMessages: ErrorMessages
+	messageKey?: string
+	messageArgs?: unknown[]
+}
+
+/**
+ * Utility to validate date-like values (string | Date) in rules.
+ * - returns true when the value is falsy
+ * - supports string and Date inputs
+ * - falls back to a rule message for unsupported types or invalid dates
+ */
+export function validateDateValue(
+	value: Value,
+	isValid: (formatted: string) => boolean,
+	{ errorMessages, messageKey = 'default', messageArgs }: ValidateDateOptions,
+): ValidationResult {
+	if (!value) {
+		return true
+	}
+
+	if (value instanceof Date) {
+		const formatted = formatDate(dayjs(value))
+		return isValid(formatted) || ruleMessage(errorMessages, messageKey, messageArgs)
+	}
+
+	if (typeof value === 'string') {
+		return isValid(value) || ruleMessage(errorMessages, messageKey, messageArgs)
+	}
+
+	return ruleMessage(errorMessages, messageKey, messageArgs)
+}

package/src/vuetifyConfig.ts

@@ -18,6 +18,7 @@ import {
 	apContextualTokens,
 	apLightTheme,
 	apDarkTheme,
+	apColorsTokens,
 } from './designTokens'
 import { createFlattenTheme, createFontVariables } from './designTokens/utils'
 import { fr } from 'vuetify/locale'
@@ -39,12 +40,13 @@ export const createVuetifyInstance = () => createVuetify({
 				colors: {
 					...cnamLightTheme,
 					...cnamDarkTheme,
+					...createFlattenTheme(cnamColorsTokens),
 				},
 				variables: {
 					'border-color': cnamColorsTokens.grey.base,
 					'font-family': cnamFontsTokens.family.primary,
-					...createFlattenTheme(cnamContextualTokens),
 					...createFontVariables(cnamFontsTokens),
+					...createFlattenTheme(cnamContextualTokens),
 				},
 			},
 			pa: {
@@ -52,12 +54,13 @@ export const createVuetifyInstance = () => createVuetify({
 				colors: {
 					...paLightTheme,
 					...paDarkTheme,
+					...createFlattenTheme(paColorsTokens),
 				},
 				variables: {
 					'border-color': paColorsTokens.grey.base,
 					'font-family': paFontsTokens.family.primary,
-					...createFlattenTheme(paContextualTokens),
 					...createFontVariables(paFontsTokens),
+					...createFlattenTheme(paContextualTokens),
 				},
 			},
 			ap: {
@@ -65,6 +68,7 @@ export const createVuetifyInstance = () => createVuetify({
 				colors: {
 					...apLightTheme,
 					...apDarkTheme,
+					...createFlattenTheme(apColorsTokens),
 				},
 				variables: {
 					'font-family': '"Arial", sans-serif',