@cnamts/synapse 1.0.25 → 1.0.26

package/src/composables/unifyValidation/useCustomValidation.ts

@@ -1,6 +1,6 @@
 import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 import { useValidatable } from '@/composables/validation/useValidatable'
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
 /**
@@ -15,13 +15,15 @@ export function useCustomValidation(
 	warnings: Ref<string[]>,
 	successes: Ref<string[]>,
 	showSuccessMessages: Ref<boolean>,
-	label: Ref<string>,
+	label: Ref<string | undefined>,
 	focused: Ref<boolean>,
 	isValidateOnBlur: Ref<boolean>,
 	disableErrorHandling: Ref<boolean>,
 	readonly?: Ref<boolean>,
 	disabled?: Ref<boolean>,
 ) {
+	const hasSuccess = ref(false)
+
 	let validator = useValidation({
 		showSuccessMessages: showSuccessMessages.value,
 		fieldIdentifier: label.value,
@@ -37,7 +39,7 @@ export function useCustomValidation(
 				disableErrorHandling: disableErrorHandling.value,
 			})
 
-			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0
+			const isDirty = errors.value.length > 0 || warnings.value.length > 0 || successes.value.length > 0 || hasSuccess.value
 			if (isDirty) {
 				validate()
 			}
@@ -50,6 +52,7 @@ export function useCustomValidation(
 			errors.value = []
 			warnings.value = []
 			successes.value = []
+			hasSuccess.value = false
 			return { hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [] as string[], warnings: [] as string[], successes: [] as string[] } }
 		}
 
@@ -63,6 +66,7 @@ export function useCustomValidation(
 		errors.value = result.state.errors
 		warnings.value = result.state.warnings
 		successes.value = result.state.successes
+		hasSuccess.value = result.hasSuccess
 
 		return result
 	}
@@ -75,6 +79,7 @@ export function useCustomValidation(
 			errors.value = []
 			warnings.value = []
 			successes.value = []
+			hasSuccess.value = false
 		},
 		() => modelValue.value = undefined,
 	)
@@ -91,5 +96,12 @@ export function useCustomValidation(
 		}
 	})
 
-	return { validate }
+	function clearValidation() {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+		hasSuccess.value = false
+	}
+
+	return { validate, hasSuccess, clearValidation }
 }

package/src/composables/unifyValidation/useValidation.ts

@@ -12,15 +12,21 @@ export interface FieldValidationProps {
 	isValidateOnBlur?: boolean
 	showSuccessMessages?: boolean
 	disableErrorHandling?: boolean
-	// When true (Vuetify native mode), the controller should not handle errors/successes
+	// Quand cette prop vaut true (mode natif Vuetify), c'est Vuetify qui gère les erreurs, avertissements et succès
 	useVuetifyValidation?: boolean
-	label: string
+	label?: string
 	rules?: VuetifyValidationRule[]
+	// Règles de validation personnalisées d'erreur (bloquantes), évaluées à partir de la valeur du champ
 	customRules?: SyValidationRule[]
+	// Règles de validation personnalisées d'avertissement (non bloquantes), évaluées à partir de la valeur du champ
 	customWarningRules?: SyValidationRule[]
+	// Règles de validation personnalisées de succès, évaluées à partir de la valeur du champ
 	customSuccessRules?: SyValidationRule[]
+	// Messages d'erreur injectés par le parent ; ils n'exécutent aucune logique de validation
 	errorMessages?: string[] | null
+	// Messages d'avertissement injectés par le parent ; ils n'exécutent aucune logique de validation
 	warningMessages?: string[] | null
+	// Messages de succès injectés par le parent ; ils n'exécutent aucune logique de validation
 	successMessages?: string[] | null
 	hasError?: boolean
 	hasWarning?: boolean
@@ -29,9 +35,13 @@ export interface FieldValidationProps {
 }
 
 /**
- * Entrypoint to handle validation in fields components.
- * It handles both Vuetify native validation (if useVuetifyValidation is true) and Synapse custom validation (if customRules are provided).
- * It also provides a unified interface to handle errors, warnings and successes, and to trigger validation on demand.
+ * Point d'entrée de la validation pour les composants de champ.
+ * Gère à la fois la validation native Vuetify (si useVuetifyValidation vaut true)
+ * et la validation custom Synapse (si customRules/customWarningRules/customSuccessRules sont fournis).
+ * customRules correspond aux règles d'erreur bloquantes.
+ * errorMessages/warningMessages/successMessages sont des messages externes injectés par le parent
+ * et ne déclenchent aucun calcul de validation.
+ * Expose aussi une interface unifiée pour les erreurs, avertissements, succès et la validation à la demande.
  */
 export const validationPropsDefaults = {
 	readonly: false,
@@ -61,7 +71,7 @@ export function useValidation(params: {
 	isValidateOnBlur: Ref<boolean>
 	showSuccessMessages: Ref<boolean>
 	disableErrorHandling: Ref<boolean>
-	label: Ref<string>
+	label: Ref<string | undefined>
 	focused: Ref<boolean>
 	errorMessages?: Ref<string[] | null | undefined>
 	warningMessages?: Ref<string[] | null | undefined>
@@ -95,13 +105,15 @@ export function useValidation(params: {
 			errors: ref<string[]>([]),
 			warnings: ref<string[]>([]),
 			successes: ref<string[]>([]),
-			hasError: computed(() => false),
-			hasWarning: computed(() => false),
-			hasSuccess: computed(() => false),
+			hasError: computed(() => params.hasErrorProp?.value ?? false),
+			hasWarning: computed(() => params.hasWarningProp?.value ?? false),
+			hasSuccess: computed(() => params.hasSuccessProp?.value ?? false),
 			validate: async () => true,
+			clearValidation: () => {},
 		}
 	}
-	const innerErrors = ref<string[]>([])
+	const vuetifyErrors = ref<string[]>([])
+	const customErrors = ref<string[]>([])
 	const innerWarnings = ref<string[]>([])
 	const innerSuccesses = ref<string[]>([])
 
@@ -112,7 +124,7 @@ export function useValidation(params: {
 			params.modelValue,
 			params.rules,
 			params.disabled,
-			innerErrors,
+			vuetifyErrors,
 			params.hasErrorProp || ref(false),
 			computed(() => params.errorMessages?.value || []),
 			params.focused,
@@ -129,7 +141,7 @@ export function useValidation(params: {
 		params.customRules,
 		params.customWarningRules,
 		params.customSuccessRules,
-		innerErrors,
+		customErrors,
 		innerWarnings,
 		innerSuccesses,
 		params.showSuccessMessages,
@@ -143,7 +155,8 @@ export function useValidation(params: {
 
 	async function validate(): Promise<boolean> {
 		if (params.readonly.value || params.disabled.value || params.disableErrorHandling.value) {
-			innerErrors.value = []
+			vuetifyErrors.value = []
+			customErrors.value = []
 			innerWarnings.value = []
 			innerSuccesses.value = []
 
@@ -162,7 +175,8 @@ export function useValidation(params: {
 	}
 
 	const errors = computed(() => [...new Set([
-		...innerErrors.value,
+		...vuetifyErrors.value,
+		...customErrors.value,
 		...(params.errorMessages?.value || []),
 	])])
 	const warnings = computed(() => [...new Set([
@@ -173,10 +187,26 @@ export function useValidation(params: {
 		...(params.showSuccessMessages.value ? innerSuccesses.value : []),
 		...(params.successMessages?.value || []),
 	])])
+	const internalHasSuccess = computed(() => customValidator.hasSuccess.value)
 
 	const hasError = computed(() => errors.value.length > 0 || params.hasErrorProp?.value)
 	const hasWarning = computed(() => warnings.value.length > 0 || params.hasWarningProp?.value)
-	const hasSuccess = computed(() => (successes.value.length > 0 && !hasError.value && !hasWarning.value) || params.hasSuccessProp?.value)
+	// TODO: vérifier si c'est la meilleure approche pour supprimer le succès en mode Vuetify
+	const hasSuccess = computed(() => {
+		if (toValue(params.useVuetifyValidation)) {
+			return params.hasSuccessProp?.value ?? false
+		}
+		return (
+			(internalHasSuccess.value || (params.successMessages?.value?.length ?? 0) > 0)
+			&& !hasError.value
+			&& !hasWarning.value
+		) || (params.hasSuccessProp?.value ?? false)
+	})
+
+	function clearValidation() {
+		vuetifyErrors.value = []
+		customValidator.clearValidation()
+	}
 
 	return {
 		errors,
@@ -186,5 +216,6 @@ export function useValidation(params: {
 		hasWarning,
 		hasSuccess,
 		validate,
+		clearValidation,
 	}
 }

package/src/composables/unifyValidation/useVuetifyValidation.ts

@@ -12,8 +12,8 @@ export function useVuetifyValidation(
 	errorMessages: Ref<string[]>,
 	focused: Ref<boolean>,
 	maxErrors: Ref<number> | undefined,
-	name: Ref<string>,
-	label: Ref<string>,
+	name: Ref<string | undefined>,
+	label: Ref<string | undefined>,
 	readonly: Ref<boolean>,
 	validateOn: Ref<'input' | 'blur' | 'submit'>,
 ) {

package/src/composables/useFormFieldErrorHandling.ts

@@ -123,7 +123,10 @@ export const useFormFieldErrorHandling = (
 
 	const hasError = computed(() => validation.hasError.value || (props.hasError ?? false))
 	const hasWarning = computed(() => validation.hasWarning.value || (props.hasWarning ?? false))
-	const hasSuccess = computed(() => ((validation.hasSuccess.value && !hasError.value && !hasWarning.value) || (props.hasSuccess ?? false)) && (props.showSuccessMessages ?? true))
+	const hasSuccess = computed(() =>
+		(validation.hasSuccess.value && !hasError.value && !hasWarning.value)
+		|| (props.hasSuccess ?? false),
+	)
 
 	const errors = computed(() => [...validation.errors.value, ...(props.errorMessages || [])])
 	const warnings = computed(() => validation.warnings.value)

package/src/composables/validation/tests/useValidation.spec.ts

@@ -90,7 +90,7 @@ describe('useValidation', () => {
 		expect(validResult.hasSuccess).toBe(true)
 	})
 
-	it('should respect showSuccessMessages option', async () => {
+	it('keeps the success state when showSuccessMessages is false while hiding messages', async () => {
 		const validation = useValidation({ showSuccessMessages: false })
 		const rules = [{
 			type: 'required',
@@ -101,7 +101,7 @@ describe('useValidation', () => {
 		}]
 
 		const result = await validation.validateField('test', rules)
-		expect(result.hasSuccess).toBe(false)
+		expect(result.hasSuccess).toBe(true)
 		expect(result.state.successes).toEqual([])
 	})
 

package/src/composables/validation/useValidation.ts

@@ -59,6 +59,7 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	const errors = ref<string[]>([])
 	const warnings = ref<string[]>([])
 	const successes = ref<string[]>([])
+	const successState = ref(false)
 
 	let currentValidationToken = 0
 
@@ -67,13 +68,17 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 	const hasError = computed(() => errors.value.length > 0)
 	const hasWarning = computed(() => warnings.value.length > 0)
 	const hasSuccess = computed(() =>
-		successes.value.length > 0 && !hasError.value && !hasWarning.value,
+		successState.value && !hasError.value && !hasWarning.value,
+	)
+	const displaySuccesses = computed(() =>
+		options.showSuccessMessages !== false ? successes.value : [],
 	)
 
 	const clearValidation = () => {
 		errors.value = []
 		warnings.value = []
 		successes.value = []
+		successState.value = false
 	}
 
 	/**
@@ -176,8 +181,12 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 				}
 			}
 
-			if (!hasValidationError && value && options.showSuccessMessages !== false && successRules.length === 0) {
-				addDefaultSuccessMessage(rules)
+			const isValueFilled = Array.isArray(value) ? value.length > 0 : !!value
+			if (!hasValidationError && isValueFilled && successRules.length === 0) {
+				successState.value = true
+				if (options.showSuccessMessages !== false) {
+					addDefaultSuccessMessage(rules)
+				}
 			}
 
 			if (!hasValidationError && warningRules.length > 0) {
@@ -206,6 +215,8 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		const successResolved = executeRules(successRules, value, { isSuccess: true })
 
 		return thenOrSync(successResolved, token, (successResults) => {
+			successState.value = successResults.some(result => Boolean(result.success))
+
 			for (const r of successResults) {
 				if (r.success && options.showSuccessMessages !== false) {
 					successes.value.push(r.success)
@@ -223,6 +234,7 @@ export function useValidation(options: ValidationOptions = { showSuccessMessages
 		errors,
 		warnings,
 		successes,
+		displaySuccesses,
 		hasError,
 		hasWarning,
 		hasSuccess,

package/src/composantsVuetify/VCard/VCard.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VCardStories from './v-card.stories'
+
+<Meta title="Composants/Composants Vuetify/VCard" />
+
+<div className="header">
+    <h1>VCard</h1>
+Ce composant utilise directement le composant natif `v-card` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-card/#props).
+</div>
+
+### Composants associés
+
+- `v-card-title` : Titre de la carte
+- `v-card-subtitle` : Sous-titre de la carte
+- `v-card-text` : Contenu textuel de la carte
+- `v-card-actions` : Zone pour les boutons d'action
+
+## Variantes
+
+Le composant `v-card` propose plusieurs variantes de style :
+
+- **elevated** : Carte avec une ombre (par défaut)
+- **flat** : Carte sans ombre
+- **outlined** : Carte avec une bordure
+- **tonal** : Carte avec un fond coloré léger
+- **text** : Carte sans fond ni bordure
+- **plain** : Carte sans style
+
+### Primary
+
+<Canvas of={VCardStories.Primary} />
+
+### Primary - Elevated
+
+<Canvas of={VCardStories.PrimaryElevated} />
+
+### Primary - Outlined
+
+<Canvas of={VCardStories.PrimaryOutlined} />
+
+### Primary - Tonal
+
+<Canvas of={VCardStories.PrimaryTonal} />
+
+### En chargement
+
+<Canvas of={VCardStories.Loading} />
+
+### Désactivée
+
+<Canvas of={VCardStories.Disabled} />
+
+## Accessibilité
+
+- Utilisez des titres descriptifs pour les cartes
+- Assurez-vous que les images ont un attribut `alt` approprié
+- Les actions dans la carte doivent être accessibles au clavier
+- Utilisez des couleurs avec un contraste suffisant

package/src/composantsVuetify/VCard/v-card.stories.ts

@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VCard, VCardTitle, VCardText, VCardActions } from 'vuetify/components'
+import { VBtn } from 'vuetify/components'
+
+const meta: Meta<typeof VCard> = {
+	title: 'Composants/Composants Vuetify/VCard',
+	tags: ['!dev'],
+	component: VCard,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) => {
+					// Extract only the template part
+					const templateMatch = src.match(/template:\s*`([\s\S]*?)`/)
+					if (templateMatch && templateMatch[1]) {
+						return templateMatch[1]
+							.trim()
+							.replace(/<VCard/g, '<v-card')
+							.replace(/<\/VCard>/g, '</v-card>')
+							.replace(/<VCardTitle/g, '<v-card-title')
+							.replace(/<\/VCardTitle>/g, '</v-card-title>')
+							.replace(/<VCardText/g, '<v-card-text')
+							.replace(/<\/VCardText>/g, '</v-card-text>')
+							.replace(/<VCardActions/g, '<v-card-actions')
+							.replace(/<\/VCardActions>/g, '</v-card-actions>')
+							.replace(/<VBtn/g, '<v-btn')
+							.replace(/<\/VBtn>/g, '</v-btn>')
+					}
+					return src
+				},
+			},
+		},
+	},
+	argTypes: {
+		color: {
+			control: { type: 'text' },
+			description: 'Couleur de la carte',
+		},
+		variant: {
+			control: { type: 'select' },
+			options: ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'],
+			description: 'Variante de style de la carte',
+		},
+		elevation: {
+			control: { type: 'number' },
+			description: 'Élévation de la carte (ombre)',
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Désactive la carte',
+		},
+		loading: {
+			control: { type: 'boolean' },
+			description: 'Affiche un état de chargement',
+		},
+		rounded: {
+			control: { type: 'select' },
+			options: ['0', 'sm', 'md', 'lg', 'xl', 'pill', 'circle'],
+			description: 'Arrondi des coins de la carte',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VCard>
+
+export const Primary: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" style="max-width: 400px;">
+    <v-card-title>Carte Primary</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryTonal: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Tonal</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "tonal".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'tonal',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="tonal" style="max-width: 400px;">
+    <v-card-title>Carte Primary Tonal</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "tonal".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryElevated: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Elevated</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "elevated".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'elevated',
+		elevation: 4,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="elevated" :elevation="4" style="max-width: 400px;">
+    <v-card-title>Carte Primary Elevated</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "elevated".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryOutlined: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Outlined</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "outlined". Elle contient également des boutons d'action.
+                </VCardText>
+                <VCardActions class="justify-end">
+                    <VBtn variant="text" color="primary">Annuler</VBtn>
+                    <VBtn variant="tonal" color="primary">Confirmer</VBtn>
+                </VCardActions>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'outlined',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="outlined" style="max-width: 400px;">
+    <v-card-title>Carte Primary Outlined</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "outlined". Elle contient également des boutons d'action.
+    </v-card-text>
+    <v-card-actions class="justify-end">
+        <v-btn variant="text" color="primary">Annuler</v-btn>
+        <v-btn variant="tonal" color="primary">Confirmer</v-btn>
+    </v-card-actions>
+</v-card>`,
+			},
+		},
+	},
+}
+
+// États
+
+export const Loading: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary en chargement</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et affiche un état de chargement.
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		loading: true,
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card :loading="true" color="primary" style="max-width: 400px;">
+    <v-card-title>Carte Primary en chargement</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et affiche un état de chargement.
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const Disabled: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte désactivée</VCardTitle>
+                <VCardText>
+                    Cette carte est désactivée.
+                </VCardText>
+                <VCardActions class="justify-end">
+                    <VBtn>Action</VBtn>
+                </VCardActions>
+            </VCard>
+        `,
+	}),
+	args: {
+		disabled: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card :disabled="true" style="max-width: 400px;">
+    <v-card-title>Carte désactivée</v-card-title>
+    <v-card-text>
+        Cette carte est désactivée.
+    </v-card-text>
+    <v-card-actions class="justify-end">
+        <v-btn>Action</v-btn>
+    </v-card-actions>
+</v-card>`,
+			},
+		},
+	},
+}

package/src/designTokens/tokens/amelipro/apColors2026.ts

@@ -1,4 +1,4 @@
-import type { IndexedObject } from '@/components/Amelipro/types.ts'
+import type { IndexedObject } from '../../../components/Amelipro/types.ts'
 import { buildColorClassMap } from '../../utils/buildColorClassMap'
 
 export const apColorsTokens2026 = {

package/src/designTokens/tokens/amelipro/apLightTheme.ts

@@ -1,5 +1,6 @@
 import { apSemanticTokens } from './apSemantic'
 import { apColorsTokens } from './apColors'
+import { baseColors } from '../baseColors'
 
 export const apLightTheme = {
 	primary: apColorsTokens.cyan.darken20,
@@ -100,4 +101,6 @@ export const apLightTheme = {
 	iconOnDark: apSemanticTokens.colors.icon.onDark,
 	iconDisabled: apSemanticTokens.colors.icon.disabled,
 	iconDisabledOnDark: apSemanticTokens.colors.icon.disabledOnDark,
+	feedbackOnSuccess: baseColors.white.base,
+	colorPrimary: baseColors.cyan.base,
 }

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -1,3 +1,4 @@
+import { baseColors } from '../baseColors'
 import { cnamColorsTokens } from './cnamColors'
 import { cnamSemanticTokens } from './cnamSemantic'
 
@@ -101,4 +102,6 @@ export const cnamLightTheme = {
 	iconOnDark: cnamSemanticTokens.colors.icon.onDark,
 	iconDisabled: cnamSemanticTokens.colors.icon.disabled,
 	iconDisabledOnDark: cnamSemanticTokens.colors.icon.disabledOnDark,
+	feedbackOnSuccess: baseColors.grey.darken60,
+	colorPrimary: baseColors.blue.base,
 }