@cnamts/synapse 1.0.20 → 1.0.22

package/src/composables/date/useDateInitializationDayjs.ts

@@ -29,16 +29,13 @@ const parseToUTCDate = (dateStr: string, format: string): Date | null => {
 	if (!parsedDate.isValid()) return null
 
 	// Extraire les composants de la date à partir de la chaîne
-	// Créer une date UTC avec les composants exacts pour éviter les décalages de fuseau horaire
-	// Utiliser set pour définir explicitement l'année, le mois et le jour
-	return dayjs.utc()
+	// Créer une date à minuit en timezone locale pour éviter les décalages jour-1/jour+1
+	// dans les fuseaux négatifs/positifs lors des conversions en chaîne (ex: YYYY-MM-DD).
+	return dayjs()
 		.year(parsedDate.year())
 		.month(parsedDate.month())
 		.date(parsedDate.date())
-		.hour(0)
-		.minute(0)
-		.second(0)
-		.millisecond(0)
+		.startOf('day')
 		.toDate()
 }
 

package/src/composables/date/useDatePickerAccessibility.ts

@@ -172,13 +172,12 @@ export function useDatePickerAccessibility() {
 
 				container.removeAttribute('aria-expanded')
 				container.removeAttribute('aria-haspopup')
-				container.removeAttribute('aria-controls')
 				// Find all elements with invalid ARIA attributes
 				const elementsWithAriaHaspopup = container.querySelectorAll('[aria-haspopup="menu"]')
 				elementsWithAriaHaspopup.forEach((element) => {
 					if (!element) return
 					element.removeAttribute('aria-haspopup')
-					element.removeAttribute('aria-controls')
+					// Intentionally keep aria-controls intact so valid popup relationships remain
 				})
 
 				// Find input elements with invalid ARIA attributes
@@ -187,7 +186,7 @@ export function useDatePickerAccessibility() {
 					if (!input) return
 					input.removeAttribute('aria-haspopup')
 					input.removeAttribute('aria-expanded')
-					input.removeAttribute('aria-controls')
+					// Leave aria-controls untouched to avoid stripping required relationships
 				})
 			})
 		}

package/src/composables/rules/tests/useFieldValidation.spec.ts

@@ -284,6 +284,18 @@ describe('useFieldValidation', () => {
 		}])[0]!
 		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
 		expect(rule('')).toEqual({}) // Empty string should be ignored
+
+		const ruleWithEmptyDate = generateRules([{
+			type: 'notBeforeDate',
+			options: { date: '', message: 'Date cannot be before reference date.' },
+		}])[0]!
+		expect(ruleWithEmptyDate(new Date())).toEqual({})
+
+		const ruleWithUndefinedDate = generateRules([{
+			type: 'notBeforeDate',
+			options: { date: undefined as unknown as string, message: 'Date cannot be before reference date.' },
+		}])[0]!
+		expect(ruleWithUndefinedDate(new Date())).toEqual({})
 	})
 
 	it('should throw when date reference is not a string in notBeforeDate rule', () => {
@@ -296,7 +308,7 @@ describe('useFieldValidation', () => {
 				},
 			}])[0]!
 			invalidRule(new Date())
-		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+		}).toThrow('La date de référence doit être une chaîne au format DD/MM/YYYY')
 	})
 
 	it('should validate notAfterDate rule', () => {
@@ -324,6 +336,18 @@ describe('useFieldValidation', () => {
 		}])[0]!
 		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
 		expect(rule('')).toEqual({}) // Empty string should be ignored
+
+		const ruleWithEmptyDate = generateRules([{
+			type: 'notAfterDate',
+			options: { date: '', message: 'Date cannot be after reference date.' },
+		}])[0]!
+		expect(ruleWithEmptyDate(new Date())).toEqual({})
+
+		const ruleWithUndefinedDate = generateRules([{
+			type: 'notAfterDate',
+			options: { date: undefined as unknown as string, message: 'Date cannot be after reference date.' },
+		}])[0]!
+		expect(ruleWithUndefinedDate(new Date())).toEqual({})
 	})
 
 	it('should throw when date reference is not a string in notAfterDate rule', () => {
@@ -336,7 +360,7 @@ describe('useFieldValidation', () => {
 				},
 			}])[0]!
 			invalidRule(new Date())
-		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+		}).toThrow('La date de référence doit être une chaîne au format DD/MM/YYYY')
 	})
 
 	it('should validate dateExact rule', () => {
@@ -364,6 +388,18 @@ describe('useFieldValidation', () => {
 		}])[0]!
 		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
 		expect(rule('')).toEqual({}) // Empty string should be ignored
+
+		const ruleWithEmptyDate = generateRules([{
+			type: 'dateExact',
+			options: { date: '', message: 'Date must be exactly the reference date.' },
+		}])[0]!
+		expect(ruleWithEmptyDate(new Date())).toEqual({})
+
+		const ruleWithUndefinedDate = generateRules([{
+			type: 'dateExact',
+			options: { date: undefined as unknown as string, message: 'Date must be exactly the reference date.' },
+		}])[0]!
+		expect(ruleWithUndefinedDate(new Date())).toEqual({})
 	})
 
 	it('should throw when date reference is not a string in dateExact rule', () => {
@@ -376,7 +412,7 @@ describe('useFieldValidation', () => {
 				},
 			}])[0]!
 			invalidRule(new Date())
-		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+		}).toThrow('La date de référence doit être une chaîne au format DD/MM/YYYY')
 	})
 
 	it('should validate custom rule', () => {

package/src/composables/rules/useFieldValidation.ts

@@ -233,14 +233,19 @@ export function useFieldValidation() {
 				}
 
 				case 'notBeforeDate': {
-					if (typeof options.date === 'undefined') {
+					const hasDateOption = Object.prototype.hasOwnProperty.call(options, 'date')
+					if (!hasDateOption) {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
-					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+					if (
+						options.date === undefined
+						|| options.date === null
+						|| (typeof options.date === 'string' && options.date.trim() === '')
+					) {
 						return {}
 					}
 					const dateValue = parseDate(value)
@@ -250,7 +255,7 @@ export function useFieldValidation() {
 
 					// Check if options.date is a string and in DD/MM/YYYY format
 					if (typeof options.date !== 'string') {
-						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+						throw new Error('La date de référence doit être une chaîne au format DD/MM/YYYY')
 					}
 
 					const referenceDate = parseDate(options.date)
@@ -269,14 +274,19 @@ export function useFieldValidation() {
 				}
 
 				case 'notAfterDate': {
-					if (typeof options.date === 'undefined') {
+					const hasDateOption = Object.prototype.hasOwnProperty.call(options, 'date')
+					if (!hasDateOption) {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
-					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+					if (
+						options.date === undefined
+						|| options.date === null
+						|| (typeof options.date === 'string' && options.date.trim() === '')
+					) {
 						return {}
 					}
 					const dateValue = parseDate(value)
@@ -286,7 +296,7 @@ export function useFieldValidation() {
 
 					// Check if options.date is a string and in DD/MM/YYYY format
 					if (typeof options.date !== 'string') {
-						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+						throw new Error('La date de référence doit être une chaîne au format DD/MM/YYYY')
 					}
 
 					const referenceDate = parseDate(options.date)
@@ -305,14 +315,19 @@ export function useFieldValidation() {
 				}
 
 				case 'dateExact': {
-					if (typeof options.date === 'undefined') {
+					const hasDateOption = Object.prototype.hasOwnProperty.call(options, 'date')
+					if (!hasDateOption) {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
-					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+					if (
+						options.date === undefined
+						|| options.date === null
+						|| (typeof options.date === 'string' && options.date.trim() === '')
+					) {
 						return {}
 					}
 					const dateValue = parseDate(value)
@@ -321,7 +336,7 @@ export function useFieldValidation() {
 					}
 
 					if (typeof options.date !== 'string') {
-						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+						throw new Error('La date de référence doit être une chaîne au format DD/MM/YYYY')
 					}
 
 					const referenceDate = parseDate(options.date)

package/src/composables/useFilterable/useFilterable.spec.ts

@@ -5,15 +5,65 @@ import { nextTick, ref } from 'vue'
 
 describe('Filterable', () => {
 	describe('formatFilterName', () => {
-		it('returns the correct slugified name', () => {
+		it('preserves existing behavior for names with spaces', () => {
 			const { formatFilterName } = useFilterable(
 				ref([]),
 				() => {},
 			)
 
 			const name = formatFilterName('Test Name')
-
 			expect(name).toBe('test-name')
+
+			const anotherName = formatFilterName('My Filter Name')
+			expect(anotherName).toBe('my-filter-name')
+		})
+
+		it('preserves existing behavior for names with special characters', () => {
+			const { formatFilterName } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const nameWithSpecialChars = formatFilterName('Filter@Name#Test')
+			expect(nameWithSpecialChars).toBe('filternametest')
+
+			const nameWithSpacesAndSpecial = formatFilterName('My Filter-Name')
+			expect(nameWithSpacesAndSpecial).toBe('my-filter-name')
+		})
+
+		it('fixes camelCase issue by preserving case for single words', () => {
+			const { formatFilterName } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			const camelCaseName = formatFilterName('totoCase')
+			expect(camelCaseName).toBe('totoCase')
+
+			const anotherCamelCase = formatFilterName('myFilterName')
+			expect(anotherCamelCase).toBe('myFilterName')
+
+			const pascalCase = formatFilterName('MyFilter')
+			expect(pascalCase).toBe('MyFilter')
+		})
+
+		it('handles edge cases correctly', () => {
+			const { formatFilterName } = useFilterable(
+				ref([]),
+				() => {},
+			)
+
+			// Single lowercase word
+			expect(formatFilterName('name')).toBe('name')
+
+			// Single uppercase word
+			expect(formatFilterName('NAME')).toBe('NAME')
+
+			// Mixed case with numbers
+			expect(formatFilterName('filter123Test')).toBe('filter123Test')
+
+			// Empty string
+			expect(formatFilterName('')).toBe('')
 		})
 	})
 

package/src/composables/useFilterable/useFilterable.ts

@@ -25,7 +25,13 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 	}
 
 	function formatFilterName(name: string): string {
-		return slugify(name, { lower: true })
+		// Si le nom contient des espaces ou caractères spéciaux, comportement actuel
+		if (/\s|[^\w]/.test(name)) {
+			return slugify(name, { lower: true, strict: true })
+		}
+
+		// Si c'est un seul mot (camelCase ou autre), préserver la casse
+		return slugify(name, { strict: true })
 	}
 
 	/**

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

@@ -2,9 +2,15 @@ import { apSemanticTokens } from './apSemantic'
 import { apColorsTokens } from './apColors'
 
 export const apLightTheme = {
-	primary: apColorsTokens.cyan.darken40,
+	primary: apColorsTokens.cyan.darken20,
 	secondary: apColorsTokens.cyan.darken60,
-	accent: apColorsTokens.cyan.base,
+	accentPrimaryLight: apColorsTokens.blue.lighten20,
+	accentPrimary: apColorsTokens.cyan.darken20,
+	accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+	accentSecondaryLight: apColorsTokens.cyan.base,
+	accentSecondary: apColorsTokens.cyan.darken60,
+	accentSecondaryContrasted: apColorsTokens.cyan.darken80,
+	accentAlt: apColorsTokens.grey.base,
 	error: apColorsTokens.red.darken20,
 	info: apColorsTokens.parma.darken40,
 	avatar: apColorsTokens.cyan.darken20,
@@ -20,12 +26,14 @@ export const apLightTheme = {
 	overlayFullpage: apSemanticTokens.colors.overlay.fullpage,
 	overlayOnDark: apSemanticTokens.colors.overlay.onDark,
 	overlayOnLight: apSemanticTokens.colors.overlay.onLight,
-	interactiveDefault: apSemanticTokens.colors.interactive.default,
-	interactiveHover: apSemanticTokens.colors.interactive.hover,
-	interactivePressed: apSemanticTokens.colors.interactive.pressed,
-	interactiveFocus: apSemanticTokens.colors.interactive.focus,
-	interactiveDisabled: apSemanticTokens.colors.interactive.disabled,
-	interactiveHoverOnSelected: apSemanticTokens.colors.interactive.hoverOnSelected,
+	interactiveSelectionEnabled: apSemanticTokens.colors.interactive.selectionEnabled,
+	interactiveSelectionHover: apSemanticTokens.colors.interactive.selectionHover,
+	interactiveSelectionPressed: apSemanticTokens.colors.interactive.selectionPressed,
+	interactiveSelectionSelected: apSemanticTokens.colors.interactive.selectionSelected,
+	interactiveSelectionHoverOnSelected: apSemanticTokens.colors.interactive.selectionHoverOnSelected,
+	interactiveSelectionSelectedAccent: apSemanticTokens.colors.interactive.selectionselectedAccent,
+	interactiveSelectionHoverOnSelectedAccent: apSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
+	interactiveSelectionDisabled: apSemanticTokens.colors.interactive.selectionDisabled,
 	backgroundMain: apSemanticTokens.colors.background.main,
 	backgroundSurface: apSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: apSemanticTokens.colors.background.surfaceAlt,
@@ -54,9 +62,11 @@ export const apLightTheme = {
 	borderDarker: apSemanticTokens.colors.border.darker,
 	borderBase: apSemanticTokens.colors.border.base,
 	borderSubdued: apSemanticTokens.colors.border.subdued,
-	borderAccent: apSemanticTokens.colors.border.accent,
-	borderAccentContrasted: apSemanticTokens.colors.border.accentContrasted,
-	borderAccentOnDark: apSemanticTokens.colors.border.accentOnDark,
+	borderAccentPrimary: apSemanticTokens.colors.border.accentPrimary,
+	borderAccentPrimaryContrasted: apSemanticTokens.colors.border.accentPrimaryContrasted,
+	borderAccentPrimaryOnDark: apSemanticTokens.colors.border.accentPrimaryOnDark,
+	borderAccentSecondary: apSemanticTokens.colors.border.accentSecondary,
+	borderAccentSecondaryContrasted: apSemanticTokens.colors.border.accentSecondaryContrasted,
 	borderInfo: apSemanticTokens.colors.border.info,
 	borderSuccess: apSemanticTokens.colors.border.success,
 	borderWarning: apSemanticTokens.colors.border.warning,
@@ -65,8 +75,9 @@ export const apLightTheme = {
 	borderDisabled: apSemanticTokens.colors.border.disabled,
 	borderDisabledOnDark: apSemanticTokens.colors.border.disabledOnDark,
 	textBase: apSemanticTokens.colors.text.base,
-	textAccent: apSemanticTokens.colors.text.accent,
-	textAccentContrasted: apSemanticTokens.colors.text.accentContrasted,
+	textAccentPrimary: apSemanticTokens.colors.text.accentPrimary,
+	textAccentPrimaryContrasted: apSemanticTokens.colors.text.accentPrimaryContrasted,
+	textAccentSecondary: apSemanticTokens.colors.text.accentSecondary,
 	textSubdued: apSemanticTokens.colors.text.subdued,
 	textInfo: apSemanticTokens.colors.text.info,
 	textSuccess: apSemanticTokens.colors.text.success,
@@ -79,8 +90,9 @@ export const apLightTheme = {
 	iconBase: apSemanticTokens.colors.icon.base,
 	iconSubdued: apSemanticTokens.colors.icon.subdued,
 	iconSubduedOnDark: apSemanticTokens.colors.icon.subduedOnDark,
-	iconAccent: apSemanticTokens.colors.icon.accent,
-	iconAccentContrasted: apSemanticTokens.colors.icon.accentContrasted,
+	iconAccentPrimary: apSemanticTokens.colors.icon.accentPrimary,
+	iconAccentPrimaryContrasted: apSemanticTokens.colors.icon.accentPrimaryContrasted,
+	iconAccentSecondary: apSemanticTokens.colors.icon.accentSecondary,
 	iconInfo: apSemanticTokens.colors.icon.info,
 	iconSuccess: apSemanticTokens.colors.icon.success,
 	iconWarning: apSemanticTokens.colors.icon.warning,

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

@@ -6,8 +6,8 @@ export const apSemanticTokens = {
 			main: apColorsTokens.cyan.lighten97,
 			surface: apColorsTokens.white.base,
 			mainAlt: apColorsTokens.white.base,
-			surfaceAlt: apColorsTokens.blue.lighten90,
-			raised: apColorsTokens.blue.lighten97,
+			surfaceAlt: apColorsTokens.cyan.lighten80,
+			raised: apColorsTokens.cyan.lighten97,
 			accent: apColorsTokens.cyan.darken20,
 			accentContrasted: apColorsTokens.cyan.darken60,
 			accentAlt: apColorsTokens.grey.base,
@@ -33,9 +33,11 @@ export const apSemanticTokens = {
 			darker: apColorsTokens.grey.darken60,
 			base: apColorsTokens.grey.lighten40,
 			subdued: apColorsTokens.grey.lighten80,
-			accent: apColorsTokens.cyan.darken20,
-			accentContrasted: apColorsTokens.cyan.darken40,
-			accentOnDark: apColorsTokens.white.base,
+			accentPrimary: apColorsTokens.cyan.darken20,
+			accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+			accentPrimaryOnDark: apColorsTokens.white.base,
+			accentSecondary: apColorsTokens.cyan.darken60,
+			accentSecondaryContrasted: apColorsTokens.cyan.darken40,
 			info: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.base,
 			warning: apColorsTokens.yellow.darken60,
@@ -46,8 +48,9 @@ export const apSemanticTokens = {
 		},
 		text: {
 			base: apColorsTokens.grey.darken60,
-			accent: apColorsTokens.cyan.darken20,
-			accentContrasted: apColorsTokens.cyan.darken40,
+			accentPrimary: apColorsTokens.cyan.darken20,
+			accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+			accentSecondary: apColorsTokens.cyan.darken60,
 			subdued: apColorsTokens.grey.base,
 			info: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.base,
@@ -62,8 +65,9 @@ export const apSemanticTokens = {
 			base: apColorsTokens.grey.darken60,
 			subdued: apColorsTokens.grey.base,
 			subduedOnDark: apColorsTokens.white.lighten70,
-			accent: apColorsTokens.cyan.darken20,
-			accentContrasted: apColorsTokens.cyan.darken40,
+			accentPrimary: apColorsTokens.cyan.darken20,
+			accentPrimaryContrasted: apColorsTokens.cyan.darken40,
+			accentSecondary: apColorsTokens.cyan.darken80,
 			info: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.darken60,
 			warning: apColorsTokens.yellow.darken60,
@@ -78,12 +82,14 @@ export const apSemanticTokens = {
 			onLight: apColorsTokens.white.base,
 		},
 		interactive: {
-			default: apColorsTokens.white.base,
-			hover: apColorsTokens.cyan.lighten90,
-			pressed: apColorsTokens.cyan.lighten80,
-			focus: apColorsTokens.blue.lighten90,
-			disabled: apColorsTokens.white.base,
-			hoverOnSelected: apColorsTokens.blue.lighten80,
+			selectionEnabled: apColorsTokens.white.base,
+			selectionHover: apColorsTokens.blue.lighten80,
+			selectionPressed: apColorsTokens.blue.lighten60,
+			selectionSelected: apColorsTokens.blue.lighten80,
+			selectionHoverOnSelected: apColorsTokens.blue.lighten60,
+			selectionselectedAccent: apColorsTokens.cyan.darken20,
+			selectionHoverOnSelectedAccent: apColorsTokens.cyan.lighten20,
+			selectionDisabled: apColorsTokens.white.base,
 		},
 	},
 }

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

@@ -4,7 +4,13 @@ import { cnamSemanticTokens } from './cnamSemantic'
 export const cnamLightTheme = {
 	primary: cnamColorsTokens.blue.base,
 	secondary: cnamColorsTokens.cyan.darken40,
-	accent: cnamColorsTokens.cyan.base,
+	accentPrimaryLight: cnamColorsTokens.blue.lighten20,
+	accentPrimary: cnamColorsTokens.blue.base,
+	accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+	accentSecondaryLight: cnamColorsTokens.cyan.lighten60,
+	accentSecondary: cnamColorsTokens.cyan.base,
+	accentSecondaryContrasted: cnamColorsTokens.cyan.darken40,
+	accentAlt: cnamColorsTokens.grey.base,
 	error: cnamColorsTokens.orange.darken20,
 	info: cnamColorsTokens.blue.base,
 	avatar: cnamColorsTokens.cyan.darken20,
@@ -20,16 +26,19 @@ export const cnamLightTheme = {
 	overlayFullpage: cnamSemanticTokens.colors.overlay.fullpage,
 	overlayOnDark: cnamSemanticTokens.colors.overlay.onDark,
 	overlayOnLight: cnamSemanticTokens.colors.overlay.onLight,
-	interactiveDefault: cnamSemanticTokens.colors.interactive.default,
-	interactiveHover: cnamSemanticTokens.colors.interactive.hover,
-	interactivePressed: cnamSemanticTokens.colors.interactive.pressed,
-	interactiveFocus: cnamSemanticTokens.colors.interactive.focus,
-	interactiveDisabled: cnamSemanticTokens.colors.interactive.disabled,
-	interactiveHoverOnSelected: cnamSemanticTokens.colors.interactive.hoverOnSelected,
+	interactiveSelectionEnabled: cnamSemanticTokens.colors.interactive.selectionEnabled,
+	interactiveSelectionHover: cnamSemanticTokens.colors.interactive.selectionHover,
+	interactiveSelectionPressed: cnamSemanticTokens.colors.interactive.selectionPressed,
+	interactiveSelectionSelected: cnamSemanticTokens.colors.interactive.selectionSelected,
+	interactiveSelectionHoverOnSelected: cnamSemanticTokens.colors.interactive.selectionHoverOnSelected,
+	interactiveSelectionSelectedAccent: cnamSemanticTokens.colors.interactive.selectionselectedAccent,
+	interactiveSelectionHoverOnSelectedAccent: cnamSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
+	interactiveSelectionDisabled: cnamSemanticTokens.colors.interactive.selectionDisabled,
 	backgroundMain: cnamSemanticTokens.colors.background.main,
+	backgroundMainAlt: cnamSemanticTokens.colors.background.mainAlt,
+	backgroundMainTer: cnamSemanticTokens.colors.background.mainTer,
 	backgroundSurface: cnamSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: cnamSemanticTokens.colors.background.surfaceAlt,
-	backgroundMainAlt: cnamSemanticTokens.colors.background.mainAlt,
 	backgroundRaised: cnamSemanticTokens.colors.background.raised,
 	backgroundAccent: cnamSemanticTokens.colors.background.accent,
 	backgroundAccentContrasted: cnamSemanticTokens.colors.background.accentContrasted,
@@ -54,9 +63,11 @@ export const cnamLightTheme = {
 	borderDarker: cnamSemanticTokens.colors.border.darker,
 	borderBase: cnamSemanticTokens.colors.border.base,
 	borderSubdued: cnamSemanticTokens.colors.border.subdued,
-	borderAccent: cnamSemanticTokens.colors.border.accent,
-	borderAccentContrasted: cnamSemanticTokens.colors.border.accentContrasted,
-	borderAccentOnDark: cnamSemanticTokens.colors.border.accentOnDark,
+	borderAccentPrimary: cnamSemanticTokens.colors.border.accentPrimary,
+	borderAccentPrimaryContrasted: cnamSemanticTokens.colors.border.accentPrimaryContrasted,
+	borderAccentPrimaryOnDark: cnamSemanticTokens.colors.border.accentPrimaryOnDark,
+	borderAccentSecondary: cnamSemanticTokens.colors.border.accentSecondary,
+	borderAccentSecondaryContrasted: cnamSemanticTokens.colors.border.accentSecondaryContrasted,
 	borderInfo: cnamSemanticTokens.colors.border.info,
 	borderSuccess: cnamSemanticTokens.colors.border.success,
 	borderWarning: cnamSemanticTokens.colors.border.warning,
@@ -65,8 +76,9 @@ export const cnamLightTheme = {
 	borderDisabled: cnamSemanticTokens.colors.border.disabled,
 	borderDisabledOnDark: cnamSemanticTokens.colors.border.disabledOnDark,
 	textBase: cnamSemanticTokens.colors.text.base,
-	textAccent: cnamSemanticTokens.colors.text.accent,
-	textAccentContrasted: cnamSemanticTokens.colors.text.accentContrasted,
+	textAccentPrimary: cnamSemanticTokens.colors.text.accentPrimary,
+	textAccentPrimaryContrasted: cnamSemanticTokens.colors.text.accentPrimaryContrasted,
+	textAccentSecondary: cnamSemanticTokens.colors.text.accentSecondary,
 	textSubdued: cnamSemanticTokens.colors.text.subdued,
 	textInfo: cnamSemanticTokens.colors.text.info,
 	textSuccess: cnamSemanticTokens.colors.text.success,
@@ -79,8 +91,9 @@ export const cnamLightTheme = {
 	iconBase: cnamSemanticTokens.colors.icon.base,
 	iconSubdued: cnamSemanticTokens.colors.icon.subdued,
 	iconSubduedOnDark: cnamSemanticTokens.colors.icon.subduedOnDark,
-	iconAccent: cnamSemanticTokens.colors.icon.accent,
-	iconAccentContrasted: cnamSemanticTokens.colors.icon.accentContrasted,
+	iconAccentPrimary: cnamSemanticTokens.colors.icon.accentPrimary,
+	iconAccentPrimaryContrasted: cnamSemanticTokens.colors.icon.accentPrimaryContrasted,
+	iconAccentSecondary: cnamSemanticTokens.colors.icon.accentSecondary,
 	iconInfo: cnamSemanticTokens.colors.icon.info,
 	iconSuccess: cnamSemanticTokens.colors.icon.success,
 	iconWarning: cnamSemanticTokens.colors.icon.warning,

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

@@ -6,6 +6,7 @@ export const cnamSemanticTokens = {
 			main: cnamColorsTokens.blue.lighten90,
 			surface: cnamColorsTokens.white.base,
 			mainAlt: cnamColorsTokens.white.base,
+			mainTer: cnamColorsTokens.grey.lighten97,
 			surfaceAlt: cnamColorsTokens.blue.lighten90,
 			raised: cnamColorsTokens.blue.lighten97,
 			accent: cnamColorsTokens.blue.base,
@@ -14,7 +15,7 @@ export const cnamSemanticTokens = {
 			info: cnamColorsTokens.blue.lighten80,
 			infoSubdued: cnamColorsTokens.blue.lighten90,
 			infoContrasted: cnamColorsTokens.blue.base,
-			success: cnamColorsTokens.orange.darken40,
+			success: cnamColorsTokens.turquoise.lighten80,
 			successSubdued: cnamColorsTokens.turquoise.lighten90,
 			successContrasted: cnamColorsTokens.green.base,
 			warning: cnamColorsTokens.yellow.lighten80,
@@ -33,9 +34,11 @@ export const cnamSemanticTokens = {
 			darker: cnamColorsTokens.grey.darken60,
 			base: cnamColorsTokens.grey.lighten40,
 			subdued: cnamColorsTokens.grey.lighten80,
-			accent: cnamColorsTokens.blue.base,
-			accentContrasted: cnamColorsTokens.blue.darken40,
-			accentOnDark: cnamColorsTokens.white.base,
+			accentPrimary: cnamColorsTokens.blue.base,
+			accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+			accentPrimaryOnDark: cnamColorsTokens.white.base,
+			accentSecondary: cnamColorsTokens.cyan.base,
+			accentSecondaryContrasted: cnamColorsTokens.cyan.darken40,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
 			warning: cnamColorsTokens.yellow.darken40,
@@ -46,8 +49,9 @@ export const cnamSemanticTokens = {
 		},
 		text: {
 			base: cnamColorsTokens.grey.darken60,
-			accent: cnamColorsTokens.blue.base,
-			accentContrasted: cnamColorsTokens.blue.darken40,
+			accentPrimary: cnamColorsTokens.blue.base,
+			accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+			accentSecondary: cnamColorsTokens.cyan.darken60,
 			subdued: cnamColorsTokens.grey.base,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
@@ -62,8 +66,9 @@ export const cnamSemanticTokens = {
 			base: cnamColorsTokens.grey.darken60,
 			subdued: cnamColorsTokens.grey.base,
 			subduedOnDark: cnamColorsTokens.white.lighten70,
-			accent: cnamColorsTokens.blue.base,
-			accentContrasted: cnamColorsTokens.blue.darken40,
+			accentPrimary: cnamColorsTokens.blue.base,
+			accentPrimaryContrasted: cnamColorsTokens.blue.darken40,
+			accentSecondary: cnamColorsTokens.cyan.darken40,
 			info: cnamColorsTokens.blue.base,
 			success: cnamColorsTokens.green.darken60,
 			warning: cnamColorsTokens.yellow.darken40,
@@ -78,12 +83,14 @@ export const cnamSemanticTokens = {
 			onLight: cnamColorsTokens.blue.base,
 		},
 		interactive: {
-			default: cnamColorsTokens.white.base,
-			hover: cnamColorsTokens.blue.lighten90,
-			pressed: cnamColorsTokens.blue.lighten80,
-			focus: cnamColorsTokens.blue.lighten90,
-			disabled: cnamColorsTokens.white.base,
-			hoverOnSelected: cnamColorsTokens.blue.lighten80,
+			selectionEnabled: cnamColorsTokens.white.base,
+			selectionHover: cnamColorsTokens.blue.lighten90,
+			selectionPressed: cnamColorsTokens.blue.lighten80,
+			selectionSelected: cnamColorsTokens.blue.lighten90,
+			selectionHoverOnSelected: cnamColorsTokens.blue.lighten80,
+			selectionselectedAccent: cnamColorsTokens.blue.base,
+			selectionHoverOnSelectedAccent: cnamColorsTokens.blue.lighten20,
+			selectionDisabled: cnamColorsTokens.white.base,
 		},
 	},
 }