@cnamts/synapse 1.0.25 → 1.0.27

package/src/designTokens/tokens/baseTokens.ts

@@ -0,0 +1,232 @@
+export const baseTokens = {
+	color: {
+		none: 'rgba(255,255,255,0)',
+		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',
+			alpha40: 'rgba(152,155,155,0.4000000059604645)',
+		},
+		white: {
+			base: '#FFFFFF',
+			alpha70: 'rgba(255,255,255,0.699999988079071)',
+			alpha40: 'rgba(255,255,255,0.4000000059604645)',
+			alpha38: 'rgba(255,255,255,0.3799999952316284)',
+			alpha20: 'rgba(255,255,255,0.20000000298023224)',
+			alpha08: 'rgba(255,255,255,0.07999999821186066)',
+			alpha00: 'rgba(255,255,255,0)',
+		},
+		transparentBlue: {
+			alpha40: 'rgba(12,65,154,0.4000000059604645)',
+			alpha20: 'rgba(12,65,154,0.20000000298023224)',
+			alpha18: 'rgba(12,65,154,0.18000000715255737)',
+			alpha08: 'rgba(12,65,154,0.07999999821186066)',
+			alpha00: 'rgba(12,65,154,0)',
+		},
+		transparentCyan: {
+			alpha00: 'rgba(0,132,178,0)',
+			alpha08: 'rgba(0,132,178,0.07999999821186066)',
+			alpha18: 'rgba(0,132,178,0.18000000715255737)',
+			alpha20: 'rgba(0,132,178,0.20000000298023224)',
+			alpha40: 'rgba(0,132,178,0.4000000059604645)',
+		},
+		transparentBlack: {
+			alpha00: 'rgba(0,0,0,0)',
+			alpha08: 'rgba(0,0,0,0.07999999821186066)',
+			alpha18: 'rgba(0,0,0,0.18000000715255737)',
+			alpha20: 'rgba(0,0,0,0.20000000298023224)',
+			alpha40: 'rgba(0,0,0,0.4000000059604645)',
+		},
+		amber: {
+			darken80: '#502C01',
+			darken60: '#784201',
+			darken40: '#9F5801',
+			darken20: '#C76E02',
+			base: '#EF8402',
+			lighten20: '#F2992C',
+			lighten40: '#F4AD56',
+			lighten60: '#F7C281',
+			lighten80: '#FAD6AB',
+			lighten90: '#FCE6CC',
+			lighten97: '#FFFAF5',
+		},
+		forestGreen: {
+			darken90: '#001814',
+			darken80: '#002821',
+			darken60: '#003C32',
+			darken40: '#005042',
+			darken20: '#006453',
+			base: '#007863',
+			lighten20: '#2A8F7D',
+			lighten40: '#55A597',
+			lighten60: '#80BCB1',
+			lighten80: '#AAD2CB',
+			lighten90: '#CCE4E0',
+			lighten97: '#EEFFFC',
+		},
+		red: {
+			darken80: '#4D0000',
+			darken60: '#740000',
+			darken40: '#9B0000',
+			darken20: '#B30E0E',
+			base: '#E80000',
+			lighten20: '#EC2A2A',
+			lighten40: '#FF5E5E',
+			lighten60: '#F48080',
+			lighten80: '#F7AAAA',
+			lighten90: '#FACCCC',
+			lighten97: '#FFF4F4',
+		},
+	},
+} as const

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

@@ -16,4 +16,10 @@ export const cnamContextualTokens = {
 		interactiveDisabled: '#fff',
 		interactiveHoverOnSelected: '#CED9EB',
 	},
+	radius: {
+		rounded0: '0',
+		rounded: '4px',
+		roundedLg: '8px',
+		roundedPill: '64px',
+	},
 }

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

@@ -1,5 +1,5 @@
-import { cnamColorsTokens } from './cnamColors'
+import { baseTokens } from '@/designTokens/tokens/baseTokens'
 
 export const cnamDarkTheme = {
-	backgroundSurface: cnamColorsTokens.parma.darken60,
+	backgroundSurface: baseTokens.color.parma.darken60,
 }

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

@@ -1,104 +1,79 @@
-import { cnamColorsTokens } from './cnamColors'
-import { cnamSemanticTokens } from './cnamSemantic'
+import { baseTokens } from '@/designTokens/tokens/baseTokens'
 
 export const cnamLightTheme = {
-	primary: cnamColorsTokens.blue.base,
-	secondary: cnamColorsTokens.cyan.darken40,
-	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,
-	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,
-	onWarning: cnamSemanticTokens.colors.background.warning,
-	overlayFullpage: cnamSemanticTokens.colors.overlay.fullpage,
-	overlayOnDark: cnamSemanticTokens.colors.overlay.onDark,
-	overlayOnLight: cnamSemanticTokens.colors.overlay.onLight,
-	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,
-	backgroundRaised: cnamSemanticTokens.colors.background.raised,
-	backgroundAccent: cnamSemanticTokens.colors.background.accent,
-	backgroundAccentContrasted: cnamSemanticTokens.colors.background.accentContrasted,
-	backgroundAccentAlt: cnamSemanticTokens.colors.background.accentAlt,
-	backgroundInfo: cnamSemanticTokens.colors.background.info,
-	backgroundInfoSubdued: cnamSemanticTokens.colors.background.infoSubdued,
-	backgroundInfoContrasted: cnamSemanticTokens.colors.background.infoContrasted,
-	backgroundSuccess: cnamSemanticTokens.colors.background.success,
-	backgroundSuccessSubdued: cnamSemanticTokens.colors.background.successSubdued,
-	backgroundSuccessContrasted: cnamSemanticTokens.colors.background.successContrasted,
-	backgroundWarning: cnamSemanticTokens.colors.background.warning,
-	backgroundWarningSubdued: cnamSemanticTokens.colors.background.warningSubdued,
-	backgroundWarningContrasted: cnamSemanticTokens.colors.background.warningContrasted,
-	backgroundError: cnamSemanticTokens.colors.background.error,
-	backgroundErrorSubdued: cnamSemanticTokens.colors.background.errorSubdued,
-	backgroundErrorContrasted: cnamSemanticTokens.colors.background.errorContrasted,
-	backgroundDisabled: cnamSemanticTokens.colors.background.disabled,
-	backgroundDisabledOnDark: cnamSemanticTokens.colors.background.disabledOnDark,
-	backgroundAssure: cnamSemanticTokens.colors.background.assure,
-	backgroundProfessionnel: cnamSemanticTokens.colors.background.professionnel,
-	backgroundEntreprise: cnamSemanticTokens.colors.background.entreprise,
-	borderDarker: cnamSemanticTokens.colors.border.darker,
-	borderBase: cnamSemanticTokens.colors.border.base,
-	borderSubdued: cnamSemanticTokens.colors.border.subdued,
-	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,
-	borderError: cnamSemanticTokens.colors.border.error,
-	borderOnDark: cnamSemanticTokens.colors.border.onDark,
-	borderDisabled: cnamSemanticTokens.colors.border.disabled,
-	borderDisabledOnDark: cnamSemanticTokens.colors.border.disabledOnDark,
-	textBase: cnamSemanticTokens.colors.text.base,
-	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,
-	textWarning: cnamSemanticTokens.colors.text.warning,
-	textError: cnamSemanticTokens.colors.text.error,
-	textDisabled: cnamSemanticTokens.colors.text.disabled,
-	textOnDark: cnamSemanticTokens.colors.text.onDark,
-	textSubduedOnDark: cnamSemanticTokens.colors.text.subduedOnDark,
-	textDisabledOnDark: cnamSemanticTokens.colors.text.disabledOnDark,
-	iconBase: cnamSemanticTokens.colors.icon.base,
-	iconSubdued: cnamSemanticTokens.colors.icon.subdued,
-	iconSubduedOnDark: cnamSemanticTokens.colors.icon.subduedOnDark,
-	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,
-	iconError: cnamSemanticTokens.colors.icon.error,
-	iconOnDark: cnamSemanticTokens.colors.icon.onDark,
-	iconDisabled: cnamSemanticTokens.colors.icon.disabled,
-	iconDisabledOnDark: cnamSemanticTokens.colors.icon.disabledOnDark,
+	risquePro: baseTokens.color.brick.base,
+
+	// Border
+	border: baseTokens.color.blue.base,
+	borderVariant: baseTokens.color.grey.lighten40,
+	borderBright: baseTokens.color.white.base,
+	borderDim: baseTokens.color.white.alpha40,
+
+	// Disabled
+	disabled: baseTokens.color.grey.lighten80,
+	onDisabled: baseTokens.color.grey.lighten40,
+	inverseSurface: baseTokens.color.grey.base,
+	onDisabledVariant: baseTokens.color.white.alpha40,
+
+	// Primary
+	primary: baseTokens.color.blue.base,
+	onPrimary: baseTokens.color.white.base,
+	primaryVariant: baseTokens.color.blue.darken40,
+	onPrimaryVariant: baseTokens.color.white.base,
+
+	// Secondary
+	secondary: baseTokens.color.cyan.darken40,
+	onSecondary: baseTokens.color.white.base,
+	secondaryVariant: baseTokens.color.cyan.darken60,
+	onSecondaryVariant: baseTokens.color.white.base,
+
+	// Overlay
+	overlay: baseTokens.color.grey.alpha40,
+
+	// Surface
+	surface: baseTokens.color.white.base,
+	surfaceBright: baseTokens.color.blue.lighten97,
+	surfaceDim: baseTokens.color.blue.lighten90,
+	onSurface: baseTokens.color.grey.darken60,
+	onSurfaceVariant: baseTokens.color.grey.base,
+
+	// Background
+	background: baseTokens.color.blue.lighten90,
+	onBackground: baseTokens.color.grey.darken60,
+	backgroundVariant: baseTokens.color.white.base,
+	onBackgroundVariant: baseTokens.color.grey.lighten40,
+
+	// Feedback
+	info: baseTokens.color.blue.base,
+	infoVariant: baseTokens.color.blue.lighten80,
+	infoVariant90: baseTokens.color.blue.lighten90,
+	onInfo: baseTokens.color.white.base,
+	onInfoVariant: baseTokens.color.blue.darken20,
+	error: baseTokens.color.orange.darken20,
+	onError: baseTokens.color.white.base,
+	errorVariant: baseTokens.color.orange.lighten80,
+	errorVariant90: baseTokens.color.orange.lighten90,
+	onErrorVariant: baseTokens.color.orange.darken60,
+	success: baseTokens.color.green.base,
+	successVariant: baseTokens.color.green.lighten80,
+	successVariant90: baseTokens.color.green.lighten90,
+	onSuccess: baseTokens.color.grey.darken60,
+	onSuccessVariant: baseTokens.color.green.darken60,
+	warning: baseTokens.color.yellow.base,
+	onWarning: baseTokens.color.grey.darken60,
+	warningVariant: baseTokens.color.yellow.lighten80,
+	warningVariant90: baseTokens.color.yellow.lighten90,
+	onWarningVariant: baseTokens.color.yellow.darken60,
+
+	// Interaction
+	interactionLightenEnabled: baseTokens.color.none,
+	interactionLightenHover: baseTokens.color.white.alpha20,
+	interactionLightenSelected: baseTokens.color.white.alpha20,
+	interactionLightenPressed: baseTokens.color.white.alpha38,
+	interactionDarkEnabled: baseTokens.color.transparentBlue.alpha00,
+	interactionDarkHover: baseTokens.color.transparentBlue.alpha08,
+	interactionDarkPressed: baseTokens.color.transparentBlue.alpha18,
+	interactionDarkenEnabled: baseTokens.color.transparentBlack.alpha00,
+	interactionDarkenHover: baseTokens.color.transparentBlack.alpha20,
+	interactionDarkenPressed: baseTokens.color.transparentBlack.alpha40,
 }

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

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

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

@@ -1,102 +1,76 @@
-import { paColorsTokens } from './paColors'
-import { paSemanticTokens } from './paSemantic'
+import { baseTokens } from '../baseTokens'
 
 export const paLightTheme = {
-	primary: paColorsTokens.blue.base,
-	secondary: paColorsTokens.cyan.darken40,
-	accentPrimaryLight: paColorsTokens.blue.lighten20,
-	accentPrimary: paColorsTokens.blue.base,
-	accentPrimaryContrasted: paColorsTokens.blue.darken40,
-	accentSecondaryLight: paColorsTokens.cyan.lighten60,
-	accentSecondary: paColorsTokens.cyan.base,
-	accentSecondaryContrasted: paColorsTokens.cyan.darken40,
-	accentAlt: paColorsTokens.grey.base,
-	error: paColorsTokens.orange.darken20,
-	info: paColorsTokens.blue.base,
-	success: paColorsTokens.turquoise.darken60,
-	warning: paColorsTokens.yellow.darken60,
-	risquePro: paColorsTokens.brick.base,
-	light: paColorsTokens.grey.lighten60,
-	dark: paColorsTokens.grey.darken80,
-	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,
-	interactiveSelectionEnabled: paSemanticTokens.colors.interactive.selectionEnabled,
-	interactiveSelectionHover: paSemanticTokens.colors.interactive.selectionHover,
-	interactiveSelectionPressed: paSemanticTokens.colors.interactive.selectionPressed,
-	interactiveSelectionSelected: paSemanticTokens.colors.interactive.selectionSelected,
-	interactiveSelectionHoverOnSelected: paSemanticTokens.colors.interactive.selectionHoverOnSelected,
-	interactiveSelectionSelectedAccent: paSemanticTokens.colors.interactive.selectionSelectedAccent,
-	interactiveSelectionHoverOnSelectedAccent: paSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
-	interactiveSelectionDisabled: paSemanticTokens.colors.interactive.selectionDisabled,
-	backgroundMain: paSemanticTokens.colors.background.main,
-	backgroundSurface: paSemanticTokens.colors.background.surface,
-	backgroundSurfaceAlt: paSemanticTokens.colors.background.surfaceAlt,
-	backgroundMainAlt: paSemanticTokens.colors.background.mainAlt,
-	backgroundRaised: paSemanticTokens.colors.background.raised,
-	backgroundAccent: paSemanticTokens.colors.background.accent,
-	backgroundAccentContrasted: 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,
-	borderAccentPrimary: paSemanticTokens.colors.border.accentPrimary,
-	borderAccentPrimaryContrasted: paSemanticTokens.colors.border.accentPrimaryContrasted,
-	borderAccentPrimaryOnDark: paSemanticTokens.colors.border.accentPrimaryOnDark,
-	borderAccentSecondary: paSemanticTokens.colors.border.accentSecondary,
-	borderAccentSecondaryContrasted: paSemanticTokens.colors.border.accentSecondaryContrasted,
-	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,
-	textAccentPrimary: paSemanticTokens.colors.text.accentPrimary,
-	textAccentPrimaryContrasted: paSemanticTokens.colors.text.accentPrimaryContrasted,
-	textAccentSecondary: paSemanticTokens.colors.text.accentSecondary,
-	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,
-	iconAccentPrimary: paSemanticTokens.colors.icon.accentPrimary,
-	iconAccentPrimaryContrasted: paSemanticTokens.colors.icon.accentPrimaryContrasted,
-	iconAccentSecondary: paSemanticTokens.colors.icon.accentSecondary,
-	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,
+	risquePro: baseTokens.color.brick.base,
+
+	// Border
+	border: baseTokens.color.blue.base,
+	borderVariant: baseTokens.color.grey.lighten40,
+	borderBright: baseTokens.color.white.base,
+	borderDim: baseTokens.color.white.alpha40,
+
+	// Disabled
+	disabled: baseTokens.color.grey.lighten80,
+	onDisabled: baseTokens.color.grey.lighten40,
+	inverseSurface: baseTokens.color.grey.base,
+	onDisabledVariant: baseTokens.color.white.alpha40,
+
+	// Primary
+	primary: baseTokens.color.blue.base,
+	onPrimary: baseTokens.color.white.base,
+	primaryVariant: baseTokens.color.blue.darken40,
+	onPrimaryVariant: baseTokens.color.white.base,
+
+	// Secondary
+	secondary: baseTokens.color.cyan.darken40,
+	onSecondary: baseTokens.color.white.base,
+	secondaryVariant: baseTokens.color.cyan.darken60,
+	onSecondaryVariant: baseTokens.color.white.base,
+
+	// Overlay
+	overlay: baseTokens.color.grey.alpha40,
+
+	// Surface
+	surface: baseTokens.color.white.base,
+	surfaceBright: baseTokens.color.blue.lighten97,
+	surfaceDim: baseTokens.color.blue.lighten90,
+	onSurface: baseTokens.color.grey.darken60,
+	onSurfaceVariant: baseTokens.color.grey.base,
+
+	// Background
+	background: baseTokens.color.blue.lighten90,
+	onBackground: baseTokens.color.grey.darken60,
+	backgroundVariant: baseTokens.color.white.base,
+	onBackgroundVariant: baseTokens.color.grey.lighten40,
+
+	// Feedback
+	info: baseTokens.color.blue.base,
+	infoVariant: baseTokens.color.blue.lighten80,
+	onInfo: baseTokens.color.white.base,
+	onInfoVariant: baseTokens.color.blue.darken20,
+	error: baseTokens.color.orange.darken20,
+	onError: baseTokens.color.white.base,
+	errorVariant: baseTokens.color.orange.lighten80,
+	onErrorVariant: baseTokens.color.orange.darken60,
+	success: baseTokens.color.green.base,
+	successVariant: baseTokens.color.green.lighten80,
+	onSuccess: baseTokens.color.grey.darken60,
+	onSuccessVariant: baseTokens.color.grey.darken60,
+	warning: baseTokens.color.yellow.base,
+	onWarning: baseTokens.color.grey.darken60,
+	warningVariant: baseTokens.color.yellow.lighten80,
+	onWarningVariant: baseTokens.color.yellow.darken60,
+
+	// Interaction
+	interactionLightenEnabled: baseTokens.color.none,
+	interactionLightenHover: baseTokens.color.white.alpha20,
+	interactionLightenSelected: baseTokens.color.white.alpha20,
+	interactionLightenPressed: baseTokens.color.white.alpha38,
+	interactionDarkEnabled: baseTokens.color.transparentBlue.alpha00,
+	interactionDarkHover: baseTokens.color.transparentBlue.alpha08,
+	interactionDarkPressed: baseTokens.color.transparentBlue.alpha18,
+	interactionDarkenEnabled: baseTokens.color.transparentBlack.alpha00,
+	interactionDarkenHover: baseTokens.color.transparentBlack.alpha20,
+	interactionDarkenPressed: baseTokens.color.transparentBlack.alpha40,
+
 }

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

@@ -1,4 +1,5 @@
 import { paColorsTokens } from './paColors'
+import { cnamColorsTokens } from '@/designTokens'
 
 export const paSemanticTokens = {
 	colors: {
@@ -6,6 +7,7 @@ export const paSemanticTokens = {
 			main: paColorsTokens.blue.lighten90,
 			surface: paColorsTokens.white.base,
 			mainAlt: paColorsTokens.white.base,
+			mainTer: cnamColorsTokens.grey.lighten97,
 			surfaceAlt: paColorsTokens.blue.lighten90,
 			raised: paColorsTokens.blue.lighten97,
 			accent: paColorsTokens.blue.base,