@cnamts/synapse 0.0.0-alpha.0

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

@@ -0,0 +1,171 @@
+export const cnamColorsTokens = {
+	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/cnam/cnamContextual.ts

@@ -0,0 +1,58 @@
+export const cnamContextualTokens = {
+	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/cnam/cnamLightTheme.ts

@@ -0,0 +1,90 @@
+import { cnamColorsTokens } from './cnamColors'
+import { cnamSemanticTokens } from './cnamSemantic'
+
+export const cnamLightTheme = {
+	primary: cnamColorsTokens.blue.base,
+	secondary: cnamColorsTokens.cyan.darken40,
+	accent: cnamColorsTokens.cyan.base,
+	error: cnamColorsTokens.orange.darken20,
+	info: cnamColorsTokens.blue.base,
+	success: cnamColorsTokens.green.base,
+	warning: cnamColorsTokens.yellow.base,
+	risquePro: cnamColorsTokens.brick.base,
+	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,
+	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,
+	backgroundMain: cnamSemanticTokens.colors.background.main,
+	backgroundSurface: cnamSemanticTokens.colors.background.surface,
+	backgroundSurfaceAlt: cnamSemanticTokens.colors.background.surfaceAlt,
+	backgroungMainAlt: cnamSemanticTokens.colors.background.mainAlt,
+	backgroungRaised: cnamSemanticTokens.colors.background.raised,
+	backgroundAccent: cnamSemanticTokens.colors.background.accent,
+	backgroungAccentContrasted: 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,
+	borderAccent: cnamSemanticTokens.colors.border.accent,
+	borderAccentContrasted: cnamSemanticTokens.colors.border.accentContrasted,
+	borderAccentOnDark: cnamSemanticTokens.colors.border.accentOnDark,
+	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,
+	textAccent: cnamSemanticTokens.colors.text.accent,
+	textAccentContrasted: cnamSemanticTokens.colors.text.accentContrasted,
+	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,
+	iconAccent: cnamSemanticTokens.colors.icon.accent,
+	iconAccentContrasted: cnamSemanticTokens.colors.icon.accentContrasted,
+	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,
+	transparentBlue18: cnamColorsTokens.blue.base,
+	transparentBlue8: cnamColorsTokens.transparentBlue.transparentBlue8,
+}

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

@@ -0,0 +1,87 @@
+export const cnamSemanticTokens = {
+	colors: {
+		background: {
+			main: '#e7ecf5',
+			surface: '#ffffff',
+			mainAlt: '#ffffff',
+			surfaceAlt: '#e7ecf5',
+			raised: '#f8f9fc',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentAlt: '#111212',
+			info: '#ced9eb',
+			infoSubdued: '#e7ecf5',
+			infoContrasted: '#0c419a',
+			success: '#cceee8',
+			successSubdued: '#e5f7f4',
+			successContrasted: '#56c271',
+			warning: '#fcf0d3',
+			warningSubdued: '#fdf7e9',
+			warningContrasted: '#f0b323',
+			error: '#f9dcd7',
+			errorSubdued: '#fcedeb',
+			errorContrasted: '#b33f2e',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			assure: '#ed76b3',
+			professionnel: '#66c9ec',
+			entreprise: '#f0b323',
+		},
+		border: {
+			darker: '#222324',
+			base: '#989b9b',
+			subdued: '#dddede',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			accentOnDark: '#ffffff',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: 'rgba(255, 255, 255, 0.7)',
+			disabled: '#dddede',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		text: {
+			base: '#222324',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			subdued: '#545859',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			disabled: '#989b9b',
+			onDark: '#ffffff',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		icon: {
+			base: '#222324',
+			subdued: '#545859',
+			subduedOnDark: 'rgba(255, 255, 255, 0.7)',
+			accent: '#0c419a',
+			accentContrasted: '#07275c',
+			info: '#0c419a',
+			success: '#224e2d',
+			warning: '#60480e',
+			error: '#b33f2e',
+			onDark: '#ffffff',
+			disabled: '#989b9b',
+			disabledOnDark: 'rgba(255, 255, 255, 0.4)',
+		},
+		overlay: {
+			fullpage: '#989b9b',
+			onDark: '#ffffff',
+			onLight: '#0c419a',
+		},
+		interactive: {
+			default: 'rgba(255, 255, 255, 0.0000)',
+			hover: '#e7ecf5',
+			pressed: '#ced9eb',
+			focus: '#e7ecf5',
+			disabled: 'rgba(255, 255, 255, 0.0000)',
+			hoverOnSelected: '#ced9eb',
+		},
+	},
+}

package/src/designTokens/tokens/json/contextual-tokens.json

@@ -0,0 +1,156 @@
+{
+  "contextual-tokens": {
+    "colors": {
+      "background": {
+        "main": { "value": "{Colors.Blue.lighten-90}" },
+        "surface": { "value": "{Neutral.white}" },
+        "main-alt": { "value": "{Neutral.white}" },
+        "surface-alt": { "value": "{Colors.Blue.lighten-90}" },
+        "raised": { "value": "{Colors.Blue.lighten-97}" },
+        "accent": { "value": "{Primary.base}" },
+        "accent-contrasted": { "value": "{Primary.darker-2}" },
+        "accent-alt": { "value": "{Neutral.black-lighter}" },
+        "info": { "value": "{Info.info-lighter}" },
+        "info-subdued": { "value": "{Info.info-lightest}" },
+        "info-contrasted": { "value": "{Info.default}" },
+        "success": { "value": "{Success.lighter}" },
+        "success-subdued": { "value": "{Success.lightest}" },
+        "success-contrasted": { "value": "{Success.default}" },
+        "warning": { "value": "{Warning.lighter}" },
+        "warning-subdued": { "value": "{Warning.lightest}" },
+        "warning-contrasted": { "value": "{Warning.default}" },
+        "error": { "value": "{Danger.lighter}" },
+        "error-subdued": { "value": "{Danger.lightest}" },
+        "error-contrasted": { "value": "{Danger.default}" },
+        "disabled": { "value": "{Neutral.grey}" },
+        "disabled-ondark": { "value": "{Neutral.white-alpha-lighter-3}" },
+        "assure": { "value": "{User.Assure}" },
+        "professionnel": { "value": "{User.Professionnel}" },
+        "entreprise": { "value": "{User.Entreprise}" }
+      },
+      "border": {
+        "darker": { "value": "{Neutral.black}" },
+        "base": { "value": "{Neutral.black-lighter-2}" },
+        "subdued": { "value": "{Neutral.grey}" },
+        "accent": { "value": "{Primary.base}" },
+        "accent-contrasted": { "value": "{Primary.darker-2}" },
+        "accent-ondark": { "value": "{Neutral.white}" },
+        "info": { "value": "{Primary.base}" },
+        "success": { "value": "{Success.darker}" },
+        "warning": { "value": "{Warning.darker}" },
+        "error": { "value": "{Danger.default}" },
+        "ondark": { "value": "{Neutral.white-alpha}" },
+        "disabled": { "value": "{Neutral.grey}" },
+        "disabled-ondark": { "value": "{Neutral.white-alpha-lighter-2}" }
+      },
+      "text": {
+        "base": { "value": "{Neutral.black}" },
+        "accent": { "value": "{Primary.base}" },
+        "accent-contrasted": { "value": "{Primary.darker-2}" },
+        "subdued": { "value": "{Neutral.black-lighter}" },
+        "info": { "value": "{Primary.base}" },
+        "success": { "value": "{Success.darker}" },
+        "warning": { "value": "{Warning.darker}" },
+        "error": { "value": "{Danger.default}" },
+        "disabled": { "value": "{Neutral.black-lighter-2}" },
+        "ondark": { "value": "{Neutral.white}" },
+        "subdued-ondark": { "value": "{Neutral.white-alpha}" },
+        "disabled-ondark": { "value": "{Neutral.white-alpha-lighter}" }
+      },
+      "icon": {
+        "base": { "value": "{Neutral.black}" },
+        "subdued": { "value": "{Neutral.black-lighter}" },
+        "subdued-ondark": { "value": "{Neutral.white-alpha}" },
+        "accent": { "value": "{Primary.base}" },
+        "accent-contrasted": { "value": "{Primary.darker-2}" },
+        "info": { "value": "{Primary.base}" },
+        "success": { "value": "{Success.darker}" },
+        "warning": { "value": "{Warning.darker}" },
+        "error": { "value": "{Danger.default}" },
+        "ondark": { "value": "{Neutral.white}" },
+        "disabled": { "value": "{Neutral.black-lighter-2}" },
+        "disabled-ondark": { "value": "{Neutral.white-alpha-lighter}" }
+      },
+      "overlay": {
+        "fullpage": { "value": "{Neutral.black-lighter-2}" },
+        "ondark": { "value": "{Neutral.white}" },
+        "onlight": { "value": "{Primary.base}" }
+      },
+      "interactive": {
+        "default": { "value": "{Colors.none}" },
+        "hover": { "value": "{Primary.lighter-4}" },
+        "pressed": { "value": "{Primary.lighter-3}" },
+        "focus": { "value": "{Primary.lighter-4}" },
+        "disabled": { "value": "{Colors.none}" },
+        "hover-on-selected": { "value": "{Primary.lighter-3}" }
+      }
+    },
+    "gap": {
+      "0": { "value": "{Values.0}" },
+      "1": { "value": "{Values.4}" },
+      "2": { "value": "{Values.8}" },
+      "3": { "value": "{Values.12}" },
+      "4": { "value": "{Values.16}" },
+      "5": { "value": "{Values.20}" },
+      "6": { "value": "{Values.24}" },
+      "7": { "value": "{Values.28}" },
+      "8": { "value": "{Values.32}" },
+      "9": { "value": "{Values.36}" },
+      "10": { "value": "{Values.40}" },
+      "11": { "value": "{Values.44}" },
+      "12": { "value": "{Values.48}" },
+      "13": { "value": "{Values.52}" },
+      "14": { "value": "{Values.56}" },
+      "15": { "value": "{Values.60}" },
+      "16": { "value": "{Values.64}" }
+    },
+    "icon-size": {
+      "xsmall": { "value": "{Font-size.8}" },
+      "small": { "value": "{Font-size.16}" },
+      "default": { "value": "{Font-size.24}" },
+      "large": { "value": "{Font-size.32}" }
+    },
+    "radius": {
+      "rounded-0": { "value": "{Values.0}" },
+      "rounded": { "value": "{Values.4}" },
+      "rounded-lg": { "value": "{Values.8}" },
+      "rounded-pill": { "value": "{Values.64}" }
+    },
+    "padding": {
+      "0": { "value": "{Values.0}" },
+      "2": { "value": "{Values.8}" },
+      "3": { "value": "{Values.12}" },
+      "4": { "value": "{Values.16}" },
+      "6": { "value": "{Values.24}" },
+      "8": { "value": "{Values.32}" },
+      "10": { "value": "{Values.40}" },
+      "14": { "value": "{Values.56}" },
+      "16": { "value": "{Values.64}" }
+    },
+    "font-size": {
+      "titres": {
+        "h1": { "value": "{Font-size.32}" },
+        "h2": { "value": "{Font-size.28}" },
+        "h3": { "value": "{Font-size.24}" },
+        "h4": { "value": "{Font-size.20}" },
+        "overline": { "value": "{Font-size.18}" }
+      },
+      "titres-alternatifs": {
+        "display-1": { "value": "{Font-size.40}" },
+        "display-2": { "value": "{Font-size.30}" }
+      },
+      "corps-de-texte": {
+        "body": { "value": "{Font-size.16}" },
+        "body-large": { "value": "{Font-size.18}" },
+        "caption": { "value": "{Font-size.14}" }
+      },
+      "liens-et-libelles": {
+        "inline-link": { "value": "{Font-size.16}" },
+        "tab-label": { "value": "{Font-size.14}" },
+        "label-small": { "value": "{Font-size.12}" },
+        "button-label": { "value": "{Font-size.16}" },
+        "button-label-small": { "value": "{Font-size.14}" }
+      }
+    }
+  }
+}