@cnamts/synapse 1.0.24 → 1.0.25

package/src/designTokens/tokens/baseColors.ts

@@ -0,0 +1,129 @@
+// Color scales shared across all themes (CNAM, PA, AP).
+// Theme-specific scales are added in each variant's colors file.
+export const baseColors = {
+	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',
+	},
+	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',
+	},
+	grey: {
+		darken80: '#111212',
+		darken60: '#222324',
+		darken40: '#323535',
+		darken20: '#434647',
+		base: '#545859',
+		lighten20: '#76797a',
+		lighten40: '#989b9b',
+		lighten60: '#bbbcbd',
+		lighten80: '#dddede',
+		lighten90: '#eeeeee',
+		lighten97: '#fafafa',
+	},
+	white: {
+		lighten20: 'rgba(255, 255, 255, 0.20)',
+		lighten38: 'rgba(255, 255, 255, 0.38)',
+		lighten40: 'rgba(255, 255, 255, 0.40)',
+		lighten70: 'rgba(255, 255, 255, 0.70)',
+		lighten8: 'rgba(255, 255, 255, 0.080)',
+		base: '#ffffff',
+	},
+}

package/src/designTokens/tokens/baseContextualTokens.ts

@@ -0,0 +1,52 @@
+// Shared contextual token values across all themes (CNAM, PA, AP).
+// Each theme provides its own `colors` on top of this base.
+export const baseContextualTokens = {
+	gap: {
+		0: '0',
+		1: '4px',
+		2: '8px',
+		3: '12px',
+		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/cnam/cnamColors.ts

@@ -1,4 +1,7 @@
+import { baseColors } from '../baseColors'
+
 export const cnamColorsTokens = {
+	...baseColors,
 	orange: {
 		darken80: '#2d100b',
 		darken60: '#5a2017',
@@ -12,71 +15,6 @@ export const cnamColorsTokens = {
 		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',
@@ -90,45 +28,6 @@ export const cnamColorsTokens = {
 		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',
@@ -142,25 +41,4 @@ export const cnamColorsTokens = {
 		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: {
-		lighten20: 'rgba(255, 255, 255, 0.20)',
-		lighten38: 'rgba(255, 255, 255, 0.38)',
-		lighten40: 'rgba(255, 255, 255, 0.40)',
-		lighten70: 'rgba(255, 255, 255, 0.70)',
-		lighten8: 'rgba(255, 255, 255, 0.080)',
-		base: '#ffffff',
-	},
 }

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

@@ -1,4 +1,7 @@
+import { baseContextualTokens } from '../baseContextualTokens'
+
 export const cnamContextualTokens = {
+	...baseContextualTokens,
 	colors: {
 		background: '#ffffff',
 		border: '#dddddd',
@@ -6,58 +9,11 @@ export const cnamContextualTokens = {
 		icon: '#666666',
 		overlay: 'rgba(0, 0, 0, 0.5)',
 		interactive: '#fff',
+		// Vuetify theme keys — not output as SCSS tokens; consumed by Vuetify's theme system
 		interactiveHover: '#E7ECF5',
 		interactivePressed: '#CED9EB',
 		interactiveFocus: '#E7ECF5',
 		interactiveDisabled: '#fff',
 		interactiveHoverOnSelected: '#CED9EB',
 	},
-	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/cnam/cnamLightTheme.ts

@@ -31,7 +31,7 @@ export const cnamLightTheme = {
 	interactiveSelectionPressed: cnamSemanticTokens.colors.interactive.selectionPressed,
 	interactiveSelectionSelected: cnamSemanticTokens.colors.interactive.selectionSelected,
 	interactiveSelectionHoverOnSelected: cnamSemanticTokens.colors.interactive.selectionHoverOnSelected,
-	interactiveSelectionSelectedAccent: cnamSemanticTokens.colors.interactive.selectionselectedAccent,
+	interactiveSelectionSelectedAccent: cnamSemanticTokens.colors.interactive.selectionSelectedAccent,
 	interactiveSelectionHoverOnSelectedAccent: cnamSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
 	interactiveSelectionDisabled: cnamSemanticTokens.colors.interactive.selectionDisabled,
 	backgroundMain: cnamSemanticTokens.colors.background.main,

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

@@ -88,7 +88,7 @@ export const cnamSemanticTokens = {
 			selectionPressed: cnamColorsTokens.blue.lighten80,
 			selectionSelected: cnamColorsTokens.blue.lighten90,
 			selectionHoverOnSelected: cnamColorsTokens.blue.lighten80,
-			selectionselectedAccent: cnamColorsTokens.blue.base,
+			selectionSelectedAccent: cnamColorsTokens.blue.base,
 			selectionHoverOnSelectedAccent: cnamColorsTokens.blue.lighten20,
 			selectionDisabled: cnamColorsTokens.white.base,
 		},

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

@@ -1,166 +1,2 @@
-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: {
-		lighten20: 'rgba(255, 255, 255, 0.20)',
-		lighten38: 'rgba(255, 255, 255, 0.38)',
-		lighten40: 'rgba(255, 255, 255, 0.40)',
-		lighten70: 'rgba(255, 255, 255, 0.70)',
-		lighten8: 'rgba(255, 255, 255, 0.080)',
-		base: '#ffffff',
-	},
-}
+// PA uses the same color palette as CNAM.
+export { cnamColorsTokens as paColorsTokens } from '../cnam/cnamColors'

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

@@ -1,4 +1,7 @@
+import { baseContextualTokens } from '../baseContextualTokens'
+
 export const paContextualTokens = {
+	...baseContextualTokens,
 	colors: {
 		background: '#ffffff',
 		border: '#dddddd',
@@ -7,52 +10,4 @@ export const paContextualTokens = {
 		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/paLightTheme.ts

@@ -30,7 +30,7 @@ export const paLightTheme = {
 	interactiveSelectionPressed: paSemanticTokens.colors.interactive.selectionPressed,
 	interactiveSelectionSelected: paSemanticTokens.colors.interactive.selectionSelected,
 	interactiveSelectionHoverOnSelected: paSemanticTokens.colors.interactive.selectionHoverOnSelected,
-	interactiveSelectionSelectedAccent: paSemanticTokens.colors.interactive.selectionselectedAccent,
+	interactiveSelectionSelectedAccent: paSemanticTokens.colors.interactive.selectionSelectedAccent,
 	interactiveSelectionHoverOnSelectedAccent: paSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
 	interactiveSelectionDisabled: paSemanticTokens.colors.interactive.selectionDisabled,
 	backgroundMain: paSemanticTokens.colors.background.main,

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

@@ -14,7 +14,7 @@ export const paSemanticTokens = {
 			info: paColorsTokens.blue.lighten80,
 			infoSubdued: paColorsTokens.blue.lighten90,
 			infoContrasted: paColorsTokens.blue.base,
-			success: paColorsTokens.orange.darken40,
+			success: paColorsTokens.turquoise.lighten80,
 			successSubdued: paColorsTokens.turquoise.lighten90,
 			successContrasted: paColorsTokens.green.base,
 			warning: paColorsTokens.yellow.lighten80,
@@ -87,7 +87,7 @@ export const paSemanticTokens = {
 			selectionPressed: paColorsTokens.blue.lighten80,
 			selectionSelected: paColorsTokens.blue.lighten90,
 			selectionHoverOnSelected: paColorsTokens.blue.lighten80,
-			selectionselectedAccent: paColorsTokens.blue.base,
+			selectionSelectedAccent: paColorsTokens.blue.base,
 			selectionHoverOnSelectedAccent: paColorsTokens.blue.lighten20,
 			selectionDisabled: paColorsTokens.white.base,
 		},