@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/composables/rules/useFieldValidation.ts

@@ -1,88 +1,216 @@
-type RuleOptions = {
-	fieldName?: string
+export type ValidationResult = {
+	success?: string
+	error?: string
+	warning?: string
+}
+
+export type RuleOptions = {
 	message?: string
 	successMessage?: string
+	warningMessage?: string
+	fieldName?: string
+	fieldIdentifier?: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	value?: any
 	length?: number
-	value?: number
 	pattern?: RegExp
 	ignoreSpace?: boolean
-	fieldIdentifier?: string
+	isWarning?: boolean // Si true, la règle génère un warning au lieu d'une erreur
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	validate?: (value: any) => boolean | string
+	date?: string | Date // Date de référence pour les règles notBeforeDate et notAfterDate
 }
 
-type ValidationResult = {
-	success?: string
-	error?: string
-}
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-type ValidationRule = (value: any) => ValidationResult
+export type ValidationRule = (value: any) => ValidationResult
 
 export function useFieldValidation() {
+	const getValueLength = (value: string, ignoreSpace?: boolean): number => {
+		return ignoreSpace ? value.replace(/\s/g, '').length : value.length
+	}
+
 	const createRule = (type: string, options: RuleOptions = {}): ValidationRule => {
-		const getValueLength = (value: string) => {
-			return options.ignoreSpace ? value.replace(/\s/g, '').length : value.length
-		}
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		return (value: any) => {
+		return (value: any): ValidationResult => {
+			// Gestion des champs vides non obligatoires
 			if (type !== 'required' && typeof value === 'string' && value.trim() === '') {
 				return {}
 			}
+
+			// Identifier de champ pour personnaliser les messages
+			const identifier = options.fieldIdentifier
+				? `${options.fieldIdentifier}`
+				: options.fieldName || 'ce champ'
+
+			const baseMessages = {
+				success: options.successMessage || 'Le champ est valide.',
+				error: options.message || `Validation échouée pour ${identifier}.`,
+				warning: options.warningMessage || `Attention : ${identifier} peut contenir une erreur.`,
+			}
+
+			const createValidationResult = (isValid: boolean, message?: string): ValidationResult => {
+				if (isValid) {
+					return { success: baseMessages.success }
+				}
+				return options.isWarning
+					? { warning: message || baseMessages.warning }
+					: { error: message || baseMessages.error }
+			}
+
 			switch (type) {
 				case 'required':
-					return typeof value === 'string' && value.trim()
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `Vous devez renseigner ${options.fieldName || 'ce champ'}.` }
+					return createValidationResult(
+						typeof value === 'string' && value.trim() !== '',
+						options.message || `Vous devez renseigner ${identifier}.`,
+					)
 
 				case 'min':
-					return typeof value === 'number' && value >= (options.value ?? 0)
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `La valeur doit être supérieure ou égale à ${options.value}.` }
-
-				case 'minLength':
-					return typeof value === 'string' && getValueLength(value) >= (options.length ?? 0)
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `Ce champ doit avoir au moins ${options.length} caractères.` }
+					return createValidationResult(
+						typeof value === 'number' && value >= (options.value ?? 0),
+						options.message || `La valeur de ${identifier} doit être supérieure ou égale à ${options.value}.`,
+					)
 
 				case 'max':
-					return typeof value === 'number' && value <= (options.value ?? Infinity)
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `La valeur doit être inférieure ou égale à ${options.value}.` }
+					return createValidationResult(
+						typeof value === 'number' && value <= (options.value ?? Infinity),
+						options.message || `La valeur de ${identifier} doit être inférieure ou égale à ${options.value}.`,
+					)
+
+				case 'minLength':
+					return createValidationResult(
+						typeof value === 'string' && getValueLength(value, options.ignoreSpace) >= (options.length ?? 0),
+						options.message || `${identifier} doit contenir au moins ${options.length} caractères.`,
+					)
 
 				case 'maxLength':
-					return typeof value === 'string' && getValueLength(value) <= (options.length ?? Infinity)
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `Ce champ ne doit pas dépasser ${options.length} caractères.` }
+					return createValidationResult(
+						typeof value === 'string' && getValueLength(value, options.ignoreSpace) <= (options.length ?? Infinity),
+						options.message || `${identifier} ne doit pas dépasser ${options.length} caractères.`,
+					)
 
 				case 'exactLength':
-					return typeof value === 'string' && getValueLength(value) === (options.length ?? 0)
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `Ce champ doit avoir exactement ${options.length} caractères.` }
+					return createValidationResult(
+						typeof value === 'string' && getValueLength(value, options.ignoreSpace) === (options.length ?? 0),
+						options.message || `${identifier} doit contenir exactement ${options.length} caractères.`,
+					)
 
 				case 'email':
-					return typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `Veuillez entrer un email valide.` }
+					return createValidationResult(
+						typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+						options.message || `${identifier} doit être un email valide.`,
+					)
 
 				case 'matchPattern':
-					return typeof value === 'string' && options.pattern?.test(value)
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: options.message || `Format invalide.` }
+					return createValidationResult(
+						typeof value === 'string' && !!options.pattern && options.pattern.test(value),
+						options.message || `Le format de ${identifier} est invalide.`,
+					)
+
+				case 'notWeekend': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						!(dateValue.getDay() === 0 || dateValue.getDay() === 6),
+						options.message || `${identifier} ne peut pas être un jour de weekend.`,
+					)
+				}
+
+				case 'notBeforeToday': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						dateValue >= new Date(),
+						options.message || `${identifier} ne peut pas être antérieur à aujourd'hui.`,
+					)
+				}
+
+				case 'notAfterToday': {
+					const dateValue = new Date(value)
+					return createValidationResult(
+						dateValue <= new Date(),
+						options.message || `${identifier} ne peut pas être postérieur à aujourd'hui.`,
+					)
+				}
+
+				case 'notBeforeDate': {
+					if (!options.date) {
+						return { error: 'Configuration de la règle invalide' }
+					}
+
+					const dateValue = new Date(value)
+
+					// 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')
+					}
+
+					// Convert reference date from DD/MM/YYYY format to YYYY-MM-DD
+					const [day, month, year] = options.date.split('/')
+					const referenceDate = new Date(`${year}-${month}-${day}`)
+
+					return createValidationResult(
+						dateValue >= referenceDate,
+						options.message || `${identifier} ne peut pas être avant le ${options.date}.`,
+					)
+				}
+
+				case 'notAfterDate': {
+					if (!options.date) {
+						return { error: 'Configuration de la règle invalide' }
+					}
+
+					const dateValue = new Date(value)
+
+					// 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')
+					}
+
+					// Convert reference date from DD/MM/YYYY format to YYYY-MM-DD
+					const [day, month, year] = options.date.split('/')
+					const referenceDate = new Date(`${year}-${month}-${day}`)
+
+					return createValidationResult(
+						dateValue <= referenceDate,
+						options.message || `${identifier} ne peut pas être après le ${options.date}.`,
+					)
+				}
+
+				case 'dateExact': {
+					if (!options.date) {
+						return { error: 'Configuration de la règle invalide' }
+					}
+
+					const dateValue = new Date(value)
+
+					if (typeof options.date !== 'string') {
+						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+					}
+
+					const [day, month, year] = options.date.split('/')
+					const referenceDate = new Date(`${year}-${month}-${day}`)
+
+					return createValidationResult(
+						dateValue.getTime() === referenceDate.getTime(),
+						options.message || `${identifier} doit être exactement le ${options.date}.`,
+					)
+				}
 
 				case 'custom': {
 					const result = options.validate?.(value)
-					return result === true
-						? { success: options.successMessage || 'Le champ est valide.' }
-						: { error: typeof result === 'string' ? result : options.message || `Validation échouée.` }
+					if (result === true) {
+						return { success: baseMessages.success }
+					}
+					return options.isWarning
+						? { warning: typeof result === 'string' ? result : baseMessages.warning }
+						: { error: typeof result === 'string' ? result : baseMessages.error }
 				}
 
 				default:
-					return { error: `La règle spécifiée n'existe pas.` }
+					return { error: `La règle spécifiée pour ${identifier} n'existe pas.` }
 			}
 		}
 	}
 
-	const generateRules = (fieldRules: Array<{ type: string, options?: RuleOptions }>) => {
+	const generateRules = (fieldRules: Array<{ type: string, options?: RuleOptions }>): ValidationRule[] => {
 		return fieldRules.map(rule => createRule(rule.type, rule.options))
 	}
 

package/src/designTokens/index.ts

@@ -3,8 +3,9 @@ import { cnamContextualTokens } from './tokens/cnam/cnamContextual'
 import { cnamColorsTokens } from './tokens/cnam/cnamColors'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
 import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
-import { bootstrapColorsTokens } from './tokens/bootstrap/bootstrapColors'
-import { bootstrapLightTheme } from './tokens/bootstrap/bootstrapLightTheme'
+import { paColorsTokens } from './tokens/pa/paColors'
+import { paLightTheme } from './tokens/pa/paLightTheme'
+import { paDarkTheme } from './tokens/pa/paDarkTheme'
 
 export {
 	cnamColorsTokens,
@@ -12,6 +13,7 @@ export {
 	cnamContextualTokens,
 	cnamLightTheme,
 	cnamDarkTheme,
-	bootstrapColorsTokens,
-	bootstrapLightTheme,
+	paColorsTokens,
+	paLightTheme,
+	paDarkTheme,
 }

package/src/designTokens/{bootstrapColors.md → paColors.md}

@@ -1,4 +1,4 @@
-# Color Bootstrap Cnam Light
+# Color Palette Portail Agent Light
 
 ## Primary
 

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

@@ -11,6 +11,8 @@ export const cnamLightTheme = {
 	success: cnamColorsTokens.turquoise.darken60,
 	warning: cnamColorsTokens.yellow.darken60,
 	risquePro: cnamColorsTokens.brick.base,
+	light: cnamColorsTokens.grey.lighten60,
+	dark: cnamColorsTokens.grey.darken80,
 	onBackground: cnamSemanticTokens.colors.background.surface,
 	onSurfaceAlt: cnamSemanticTokens.colors.background.surfaceAlt,
 	onSurface: cnamSemanticTokens.colors.background.surface,

package/src/designTokens/tokens/pa/paColors.ts

@@ -0,0 +1,171 @@
+export const paColorsTokens = {
+	orange: {
+		darken80: '#2d100b',
+		darken60: '#5a2017',
+		darken40: '#862f22',
+		darken20: '#b33f2e',
+		base: '#e04f39',
+		lighten20: '#e67261',
+		lighten40: '#ec9588',
+		lighten60: '#f3b9b0',
+		lighten80: '#f9dcd7',
+		lighten90: '#fcedeb',
+		lighten97: '#fefaf9',
+	},
+	yellow: {
+		darken80: '#302407',
+		darken60: '#60480e',
+		darken40: '#906b15',
+		darken20: '#c08f1c',
+		base: '#f0b323',
+		lighten20: '#f3c24f',
+		lighten40: '#f6d17b',
+		lighten60: '#f9e1a7',
+		lighten80: '#fcf0d3',
+		lighten90: '#fdf7e9',
+		lighten97: '#fffdf8',
+	},
+	green: {
+		darken80: '#112717',
+		darken60: '#224e2d',
+		darken40: '#347444',
+		darken20: '#459b5a',
+		base: '#56c271',
+		lighten20: '#78ce8d',
+		lighten40: '#9adaaa',
+		lighten60: '#bbe7c6',
+		lighten80: '#ddf3e3',
+		lighten90: '#eef9f1',
+		lighten97: '#fafdfb',
+	},
+	turquoise: {
+		darken80: '#00221c',
+		darken60: '#004439',
+		darken40: '#006755',
+		darken20: '#008972',
+		base: '#00ab8e',
+		lighten20: '#33bca5',
+		lighten40: '#66cdbb',
+		lighten60: '#99ddd2',
+		lighten80: '#cceee8',
+		lighten90: '#e5f7f4',
+		lighten97: '#f7fcfc',
+	},
+	blue: {
+		darken80: '#020d1f',
+		darken60: '#051a3e',
+		darken40: '#07275c',
+		darken20: '#0a347b',
+		base: '#0c419a',
+		lighten20: '#3d67ae',
+		lighten40: '#6d8dc2',
+		lighten60: '#9eb3d7',
+		lighten80: '#ced9eb',
+		lighten90: '#e7ecf5',
+		lighten97: '#f8f9fc',
+	},
+	cyan: {
+		darken80: '#00212d',
+		darken60: '#004259',
+		darken40: '#006386',
+		darken20: '#0084b2',
+		base: '#00a5df',
+		lighten20: '#33b7e5',
+		lighten40: '#66c9ec',
+		lighten60: '#99dbf2',
+		lighten80: '#ccedf9',
+		lighten90: '#e5f6fc',
+		lighten97: '#f7fcfe',
+	},
+	frostedBlue: {
+		darken80: '#142327',
+		darken60: '#28464d',
+		darken40: '#3d6874',
+		darken20: '#518b9a',
+		base: '#65aec1',
+		lighten20: '#84becd',
+		lighten40: '#a3ceda',
+		lighten60: '#c1dfe6',
+		lighten80: '#e0eff3',
+		lighten90: '#f0f7f9',
+		lighten97: '#fafdfd',
+	},
+	parma: {
+		darken80: '#171c26',
+		darken60: '#2f384d',
+		darken40: '#465473',
+		darken20: '#5e709a',
+		base: '#758cc0',
+		lighten20: '#91a3cd',
+		lighten40: '#acbad9',
+		lighten60: '#c8d1e6',
+		lighten80: '#e3e8f2',
+		lighten90: '#f1f3f9',
+		lighten97: '#fbfcfd',
+	},
+	mauve: {
+		darken80: '#201224',
+		darken60: '#402449',
+		darken40: '#60376d',
+		darken20: '#804992',
+		base: '#a05bb6',
+		lighten20: '#b37cc5',
+		lighten40: '#c69dd3',
+		lighten60: '#d9bde2',
+		lighten80: '#ecdef0',
+		lighten90: '#f5eff8',
+		lighten97: '#fcfafd',
+	},
+	pink: {
+		darken80: '#2d051a',
+		darken60: '#5a0a34',
+		darken40: '#87104d',
+		darken20: '#b41567',
+		base: '#e11a81',
+		lighten20: '#e7489a',
+		lighten40: '#ed76b3',
+		lighten60: '#f3a3cd',
+		lighten80: '#f9d1e6',
+		lighten90: '#fce8f2',
+		lighten97: '#fef8fb',
+	},
+	brick: {
+		darken80: '#291112',
+		darken60: '#522224',
+		darken40: '#7b3237',
+		darken20: '#a44349',
+		base: '#cd545b',
+		lighten20: '#d7767c',
+		lighten40: '#e1989d',
+		lighten60: '#ebbbbd',
+		lighten80: '#f5ddde',
+		lighten90: '#faeeef',
+		lighten97: '#fdfafa',
+	},
+	grey: {
+		darken80: '#111212',
+		darken60: '#222324',
+		darken40: '#323535',
+		darken20: '#434647',
+		base: '#545859',
+		lighten20: '#76797a',
+		lighten40: '#989b9b',
+		lighten60: '#bbbcbd',
+		lighten80: '#dddede',
+		lighten90: '#eeeeee',
+		lighten97: '#fafafa',
+	},
+	white: {
+		20: 'rgba(255, 255, 255, 0.2000)',
+		38: 'rgba(255, 255, 255, 0.3800)',
+		40: 'rgba(255, 255, 255, 0.4000)',
+		70: 'rgba(255, 255, 255, 0.7000)',
+		8: 'rgba(255, 255, 255, 0.0800)',
+		0: 'rgba(255, 255, 255, 0.0000)',
+		base: '#ffffff',
+	},
+	transparentBlue: {
+		transparentBlue18: '#a6d4eb',
+		transparentBlue8: '#ebf0f7',
+	},
+}

package/src/designTokens/tokens/pa/paContextual.ts

@@ -0,0 +1,58 @@
+export const paContextualTokens = {
+	colors: {
+		background: '#ffffff',
+		border: '#dddddd',
+		text: '#333333',
+		icon: '#666666',
+		overlay: 'rgba(0, 0, 0, 0.5)',
+		interactive: '#007bff',
+	},
+	gap: {
+		0: '0',
+		1: '4px',
+		2: '8px',
+		3: '122px',
+		4: '16px',
+		5: '20px',
+		6: '24px',
+		7: '28px',
+		8: '32px',
+		9: '36px',
+		10: '40px',
+		11: '44px',
+		12: '48px',
+		13: '52px',
+		14: '56px',
+		15: '60px',
+		16: '64px',
+	},
+	iconSize: {
+		xsmall: '8px',
+		small: '16px',
+		default: '24px',
+		large: '32px',
+	},
+	radius: {
+		rounded0: '0',
+		rounded: '4px',
+		roundedLg: '8px',
+		roundedPill: '64px',
+	},
+	padding: {
+		0: '0',
+		2: '8px',
+		3: '12px',
+		4: '16px',
+		6: '24px',
+		8: '32px',
+		10: '40px',
+		14: '56px',
+		16: '64px',
+	},
+	fontSize: {
+		titres: '24px',
+		titresAlternatifs: '20px',
+		corpsDeTexte: '16px',
+		liensEtLibelles: '14px',
+	},
+}

package/src/designTokens/tokens/pa/paDarkTheme.ts

@@ -0,0 +1,5 @@
+import { paColorsTokens } from '../pa/paColors'
+
+export const paDarkTheme = {
+	backgroundSurface: paColorsTokens.parma.darken60,
+}

package/src/designTokens/tokens/pa/paLightTheme.ts

@@ -0,0 +1,123 @@
+import { paColorsTokens } from './paColors'
+import { paSemanticTokens } from '../pa/paSemantic'
+
+export const paLightTheme = {
+	primary: '#0062ac',
+	secondary: '#ac1c81',
+	accent: '#6f42c1',
+	error: '#B6052A',
+	info: '#0062AC',
+	success: '#73A839',
+	warning: '#FD7E14',
+	blue: '#007bff',
+	blueBase: '#007bff',
+	indigo: '#6610f2',
+	indigoBase: '#6610f2',
+	purple: '#6f42c1',
+	purpleBase: '#6f42c1',
+	pink: '#e83e8c',
+	pinkBase: '#e83e8c',
+	red: '#dc3545',
+	redBase: '#dc3545',
+	orange: '#fd7e14',
+	orangeBase: '#fd7e14',
+	yellow: '#ffc107',
+	yellowBase: '#ffc107',
+	green: '#28a745',
+	greenBase: '#28a745',
+	teal: '#20c997',
+	tealBase: '#20c997',
+	cyan: '#17a2b8',
+	cyanBase: '#17a2b8',
+	gray: '#8a8b8b',
+	grayBase: '#8a8b8b',
+	grayDark: '#343434',
+	grayDarkBase: '#343434',
+	risquePro: paColorsTokens.brick.base,
+	light: '#f4f5f1',
+	dark: '#343434',
+	default: '#b7cbd6',
+	brand: '#4a3f59',
+	brandSecondary: '#ac1c81',
+	brandMuted: '#b7cbd6',
+	brandMutedLite: '#E7F3F9',
+	hilitePrimary: '#0062ac',
+	hiliteSecondary: '#e6bebf',
+	onBackground: paSemanticTokens.colors.background.surface,
+	onSurfaceAlt: paSemanticTokens.colors.background.surfaceAlt,
+	onSurface: paSemanticTokens.colors.background.surface,
+	onWarning: paSemanticTokens.colors.background.warning,
+	overlayFullpage: paSemanticTokens.colors.overlay.fullpage,
+	overlayOnDark: paSemanticTokens.colors.overlay.onDark,
+	overlayOnLight: paSemanticTokens.colors.overlay.onLight,
+	interactiveDefault: paSemanticTokens.colors.interactive.default,
+	interactiveHover: paSemanticTokens.colors.interactive.hover,
+	interactivePressed: paSemanticTokens.colors.interactive.pressed,
+	interactiveFocus: paSemanticTokens.colors.interactive.focus,
+	interactiveDisabled: paSemanticTokens.colors.interactive.disabled,
+	interactiveHoverOnSelected: paSemanticTokens.colors.interactive.hoverOnSelected,
+	backgroundMain: paSemanticTokens.colors.background.main,
+	backgroundSurface: paSemanticTokens.colors.background.surface,
+	backgroundSurfaceAlt: paSemanticTokens.colors.background.surfaceAlt,
+	backgroungMainAlt: paSemanticTokens.colors.background.mainAlt,
+	backgroungRaised: paSemanticTokens.colors.background.raised,
+	backgroundAccent: paSemanticTokens.colors.background.accent,
+	backgroungAccentContrasted: paSemanticTokens.colors.background.accentContrasted,
+	backgroundAccentAlt: paSemanticTokens.colors.background.accentAlt,
+	backgroundInfo: paSemanticTokens.colors.background.info,
+	backgroundInfoSubdued: paSemanticTokens.colors.background.infoSubdued,
+	backgroundInfoContrasted: paSemanticTokens.colors.background.infoContrasted,
+	backgroundSuccess: paSemanticTokens.colors.background.success,
+	backgroundSuccessSubdued: paSemanticTokens.colors.background.successSubdued,
+	backgroundSuccessContrasted: paSemanticTokens.colors.background.successContrasted,
+	backgroundWarning: paSemanticTokens.colors.background.warning,
+	backgroundWarningSubdued: paSemanticTokens.colors.background.warningSubdued,
+	backgroundWarningContrasted: paSemanticTokens.colors.background.warningContrasted,
+	backgroundError: paSemanticTokens.colors.background.error,
+	backgroundErrorSubdued: paSemanticTokens.colors.background.errorSubdued,
+	backgroundErrorContrasted: paSemanticTokens.colors.background.errorContrasted,
+	backgroundDisabled: paSemanticTokens.colors.background.disabled,
+	backgroundDisabledOnDark: paSemanticTokens.colors.background.disabledOnDark,
+	backgroundAssure: paSemanticTokens.colors.background.assure,
+	backgroundProfessionnel: paSemanticTokens.colors.background.professionnel,
+	backgroundEntreprise: paSemanticTokens.colors.background.entreprise,
+	borderDarker: paSemanticTokens.colors.border.darker,
+	borderBase: paSemanticTokens.colors.border.base,
+	borderSubdued: paSemanticTokens.colors.border.subdued,
+	borderAccent: paSemanticTokens.colors.border.accent,
+	borderAccentContrasted: paSemanticTokens.colors.border.accentContrasted,
+	borderAccentOnDark: paSemanticTokens.colors.border.accentOnDark,
+	borderInfo: paSemanticTokens.colors.border.info,
+	borderSuccess: paSemanticTokens.colors.border.success,
+	borderWarning: paSemanticTokens.colors.border.warning,
+	borderError: paSemanticTokens.colors.border.error,
+	borderOnDark: paSemanticTokens.colors.border.onDark,
+	borderDisabled: paSemanticTokens.colors.border.disabled,
+	borderDisabledOnDark: paSemanticTokens.colors.border.disabledOnDark,
+	textBase: paSemanticTokens.colors.text.base,
+	textAccent: paSemanticTokens.colors.text.accent,
+	textAccentContrasted: paSemanticTokens.colors.text.accentContrasted,
+	textSubdued: paSemanticTokens.colors.text.subdued,
+	textInfo: paSemanticTokens.colors.text.info,
+	textSuccess: paSemanticTokens.colors.text.success,
+	textWarning: paSemanticTokens.colors.text.warning,
+	textError: paSemanticTokens.colors.text.error,
+	textDisabled: paSemanticTokens.colors.text.disabled,
+	textOnDark: paSemanticTokens.colors.text.onDark,
+	textSubduedOnDark: paSemanticTokens.colors.text.subduedOnDark,
+	textDisabledOnDark: paSemanticTokens.colors.text.disabledOnDark,
+	iconBase: paSemanticTokens.colors.icon.base,
+	iconSubdued: paSemanticTokens.colors.icon.subdued,
+	iconSubduedOnDark: paSemanticTokens.colors.icon.subduedOnDark,
+	iconAccent: paSemanticTokens.colors.icon.accent,
+	iconAccentContrasted: paSemanticTokens.colors.icon.accentContrasted,
+	iconInfo: paSemanticTokens.colors.icon.info,
+	iconSuccess: paSemanticTokens.colors.icon.success,
+	iconWarning: paSemanticTokens.colors.icon.warning,
+	iconError: paSemanticTokens.colors.icon.error,
+	iconOnDark: paSemanticTokens.colors.icon.onDark,
+	iconDisabled: paSemanticTokens.colors.icon.disabled,
+	iconDisabledOnDark: paSemanticTokens.colors.icon.disabledOnDark,
+	transparentBlue18: paColorsTokens.blue.base,
+	transparentBlue8: paColorsTokens.transparentBlue.transparentBlue8,
+}