@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -1,106 +1,76 @@
-import { apSemanticTokens } from './apSemantic'
-import { apColorsTokens } from './apColors'
-import { baseColors } from '../baseColors'
+import { baseTokens } from '../baseTokens'
 
 export const apLightTheme = {
-	primary: apColorsTokens.cyan.darken20,
-	secondary: apColorsTokens.cyan.darken60,
-	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,
-	success: apColorsTokens.turquoise.darken20,
-	warning: apColorsTokens.yellow.darken60,
-	risquePro: apColorsTokens.red.base,
-	light: apColorsTokens.grey.lighten60,
-	dark: apColorsTokens.grey.darken80,
-	onBackground: apSemanticTokens.colors.background.surface,
-	onSurfaceAlt: apSemanticTokens.colors.background.surfaceAlt,
-	onSurface: apSemanticTokens.colors.background.surface,
-	onWarning: apSemanticTokens.colors.background.warning,
-	overlayFullpage: apSemanticTokens.colors.overlay.fullpage,
-	overlayOnDark: apSemanticTokens.colors.overlay.onDark,
-	overlayOnLight: apSemanticTokens.colors.overlay.onLight,
-	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,
-	backgroundMainAlt: apSemanticTokens.colors.background.mainAlt,
-	backgroundRaised: apSemanticTokens.colors.background.raised,
-	backgroundAccent: apSemanticTokens.colors.background.accent,
-	backgroundAccentContrasted: apSemanticTokens.colors.background.accentContrasted,
-	backgroundAccentAlt: apSemanticTokens.colors.background.accentAlt,
-	backgroundInfo: apSemanticTokens.colors.background.info,
-	backgroundInfoSubdued: apSemanticTokens.colors.background.infoSubdued,
-	backgroundInfoContrasted: apSemanticTokens.colors.background.infoContrasted,
-	backgroundSuccess: apSemanticTokens.colors.background.success,
-	backgroundSuccessSubdued: apSemanticTokens.colors.background.successSubdued,
-	backgroundSuccessContrasted: apSemanticTokens.colors.background.successContrasted,
-	backgroundWarning: apSemanticTokens.colors.background.warning,
-	backgroundWarningSubdued: apSemanticTokens.colors.background.warningSubdued,
-	backgroundWarningContrasted: apSemanticTokens.colors.background.warningContrasted,
-	backgroundError: apSemanticTokens.colors.background.error,
-	backgroundErrorSubdued: apSemanticTokens.colors.background.errorSubdued,
-	backgroundErrorContrasted: apSemanticTokens.colors.background.errorContrasted,
-	backgroundDisabled: apSemanticTokens.colors.background.disabled,
-	backgroundDisabledOnDark: apSemanticTokens.colors.background.disabledOnDark,
-	backgroundAssure: apSemanticTokens.colors.background.assure,
-	backgroundProfessionnel: apSemanticTokens.colors.background.professionnel,
-	backgroundEntreprise: apSemanticTokens.colors.background.entreprise,
-	borderDarker: apSemanticTokens.colors.border.darker,
-	borderBase: apSemanticTokens.colors.border.base,
-	borderSubdued: apSemanticTokens.colors.border.subdued,
-	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,
-	borderError: apSemanticTokens.colors.border.error,
-	borderOnDark: apSemanticTokens.colors.border.onDark,
-	borderDisabled: apSemanticTokens.colors.border.disabled,
-	borderDisabledOnDark: apSemanticTokens.colors.border.disabledOnDark,
-	textBase: apSemanticTokens.colors.text.base,
-	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,
-	textWarning: apSemanticTokens.colors.text.warning,
-	textError: apSemanticTokens.colors.text.error,
-	textDisabled: apSemanticTokens.colors.text.disabled,
-	textOnDark: apSemanticTokens.colors.text.onDark,
-	textSubduedOnDark: apSemanticTokens.colors.text.subduedOnDark,
-	textDisabledOnDark: apSemanticTokens.colors.text.disabledOnDark,
-	iconBase: apSemanticTokens.colors.icon.base,
-	iconSubdued: apSemanticTokens.colors.icon.subdued,
-	iconSubduedOnDark: apSemanticTokens.colors.icon.subduedOnDark,
-	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,
-	iconError: apSemanticTokens.colors.icon.error,
-	iconOnDark: apSemanticTokens.colors.icon.onDark,
-	iconDisabled: apSemanticTokens.colors.icon.disabled,
-	iconDisabledOnDark: apSemanticTokens.colors.icon.disabledOnDark,
-	feedbackOnSuccess: baseColors.white.base,
-	colorPrimary: baseColors.cyan.base,
+	risquePro: baseTokens.color.red.base,
+
+	// Border
+	border: baseTokens.color.cyan.darken20,
+	borderVariant: baseTokens.color.grey.lighten40,
+	borderBright: baseTokens.color.white.base,
+	borderDim: baseTokens.color.white.alpha40,
+
+	// Disabled
+	disabled: baseTokens.color.grey.lighten80,
+	inverseSurface: baseTokens.color.grey.base,
+	onDisabled: baseTokens.color.grey.lighten40,
+	onDisabledVariant: baseTokens.color.white.alpha40,
+
+	// Primary
+	primary: baseTokens.color.cyan.darken20,
+	onPrimary: baseTokens.color.white.base,
+	primaryVariant: baseTokens.color.cyan.darken40,
+	onPrimaryVariant: baseTokens.color.white.base,
+
+	// Secondary
+	secondary: baseTokens.color.cyan.darken60,
+	onSecondary: baseTokens.color.white.base,
+	secondaryVariant: baseTokens.color.cyan.darken80,
+	onSecondaryVariant: baseTokens.color.white.base,
+
+	// Overlay
+	overlay: baseTokens.color.grey.alpha40,
+
+	// Surface
+	surface: baseTokens.color.white.base,
+	surfaceBright: baseTokens.color.cyan.lighten97,
+	surfaceDim: baseTokens.color.cyan.lighten80,
+	onSurface: baseTokens.color.grey.darken60,
+	onSurfaceVariant: baseTokens.color.grey.base,
+
+	// Background
+	background: baseTokens.color.cyan.lighten97,
+	backgroundVariant: baseTokens.color.white.base,
+	onBackground: baseTokens.color.grey.darken60,
+	onBackgroundVariant: baseTokens.color.grey.lighten40,
+
+	// Feedback
+	info: baseTokens.color.parma.darken40,
+	infoVariant: baseTokens.color.parma.lighten80,
+	infoVariant90: baseTokens.color.parma.lighten90,
+	onInfo: baseTokens.color.white.base,
+	onInfoVariant: baseTokens.color.parma.darken60,
+	error: baseTokens.color.red.darken20,
+	onError: baseTokens.color.white.base,
+	errorVariant: baseTokens.color.red.lighten90,
+	onErrorVariant: baseTokens.color.red.darken60,
+	success: baseTokens.color.forestGreen.base,
+	onSuccess: baseTokens.color.white.base,
+	successVariant: baseTokens.color.forestGreen.lighten90,
+	onSuccessVariant: baseTokens.color.forestGreen.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.transparentCyan.alpha00,
+	interactionDarkHover: baseTokens.color.transparentCyan.alpha08,
+	interactionDarkPressed: baseTokens.color.transparentCyan.alpha18,
+	interactionDarkenEnabled: baseTokens.color.transparentBlack.alpha00,
+	interactionDarkenHover: baseTokens.color.transparentBlack.alpha20,
+	interactionDarkenPressed: baseTokens.color.transparentBlack.alpha40,
 }

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

@@ -11,7 +11,7 @@ export const apSemanticTokens = {
 			accent: apColorsTokens.cyan.darken20,
 			accentContrasted: apColorsTokens.cyan.darken60,
 			accentAlt: apColorsTokens.grey.base,
-			info: apColorsTokens.blue.lighten80,
+			info: apColorsTokens.parma.lighten80,
 			infoSubdued: apColorsTokens.blue.lighten90,
 			infoContrasted: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.lighten80,
@@ -79,7 +79,7 @@ export const apSemanticTokens = {
 		overlay: {
 			fullpage: apColorsTokens.grey.darken60,
 			onDark: apColorsTokens.cyan.darken40,
-			onLight: apColorsTokens.white.base,
+			onLight: apColorsTokens.cyan.darken20,
 		},
 		interactive: {
 			selectionEnabled: apColorsTokens.white.base,

package/src/designTokens/tokens/baseContextualTokens.ts

@@ -26,12 +26,6 @@ export const baseContextualTokens = {
 		default: '24px',
 		large: '32px',
 	},
-	radius: {
-		rounded0: '0',
-		rounded: '4px',
-		roundedLg: '8px',
-		roundedPill: '64px',
-	},
 	padding: {
 		0: '0',
 		2: '8px',
@@ -43,6 +37,7 @@ export const baseContextualTokens = {
 		14: '56px',
 		16: '64px',
 	},
+
 	fontSize: {
 		titres: '24px',
 		titresAlternatifs: '20px',

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,
 }