@cnamts/synapse 0.0.7-alpha → 0.0.8-alpha

package/src/components/SyAlert/SyAlert.vue

@@ -95,7 +95,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 @use 'sass:map';
 
 .alert {
@@ -115,7 +115,7 @@
 }
 
 :deep(.v-btn--variant-text .v-btn__overlay) {
-  background: transparent !important;
+	background: transparent !important;
 }
 
 .alert-icon :deep(.v-icon__svg) {
@@ -132,13 +132,13 @@
 }
 
 .v-btn {
-  text-transform: none;
-  font-weight: bold;
-  font-size: 0.75rem;
-  letter-spacing: normal;
+	text-transform: none;
+	font-weight: bold;
+	font-size: 0.75rem;
+	letter-spacing: normal;
 }
 
-@media screen and (max-width: 440px) {
+@media screen and (width <= 440px) {
 	.alert {
 		display: flex;
 		flex-direction: column;
@@ -160,8 +160,8 @@
 	}
 }
 
-@media screen and (min-width: 441px) {
-	.alert{
+@media screen and (width >= 441px) {
+	.alert {
 		.alert-icon {
 			width: 3.5rem !important;
 			height: 3.5rem !important;
@@ -175,6 +175,7 @@
 	&.alert--#{$type}.v-alert--variant-tonal {
 		background: map.get($map, 'background') !important;
 		color: tokens.$colors-text-base !important;
+
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
 			opacity: 1 !important;
@@ -184,6 +185,7 @@
 
 	&.alert--#{$type}.v-alert--variant-outlined {
 		background: transparent !important;
+
 		:deep(.v-alert__border) {
 			border-color: map.get($map, 'border') !important;
 			opacity: 1 !important;
@@ -194,6 +196,7 @@
 	&.text-#{$type} {
 		.v-alert__prepend > .v-icon {
 			background: map.get($map, 'icon-bg');
+
 			:deep(svg) {
 				fill: map.get($map, 'accent');
 			}
@@ -217,7 +220,6 @@
 			'icon-bg': tokens.$colors-background-warning-subdued,
 		)
 	);
-
 	@include redesign(
 		'success',
 		(
@@ -228,7 +230,6 @@
 			'icon-bg': tokens.$colors-background-success-subdued,
 		)
 	);
-
 	@include redesign(
 		'error',
 		(
@@ -239,7 +240,6 @@
 			'icon-bg': tokens.$colors-background-error-subdued,
 		)
 	);
-
 	@include redesign(
 		'info',
 		(

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -84,7 +84,7 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .vd-user-icon {
 	width: 40px;

package/src/components/UserMenuBtn/config.ts

@@ -11,7 +11,7 @@ export const defaultOptions = {
 		height: 'auto',
 	},
 	icon: {
-		color: 'avatar',
+		color: 'secondary',
 	},
 	logoutListItem: {
 		class: 'text-primary',

package/src/components/index.ts

@@ -1,7 +1,12 @@
-export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { useNotificationService } from '../services/NotificationService'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
+export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
+export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
+export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
+export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
+export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'
 export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
 export { default as SyBtnSelect } from './Customs/SyBtnSelect/SyBtnSelect.vue'
 export { default as SyInputSelect } from './Customs/SyInputSelect/SyInputSelect.vue'
@@ -13,6 +18,7 @@ export { default as DataListItem } from './DataListItem/DataListItem.vue'
 export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
+export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
@@ -29,19 +35,16 @@ export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
 export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
-export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 export { default as NirField } from './NirField/NirField.vue'
 export * from './NirField/nirValidation'
+export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
-export { useNotificationService } from '../services/NotificationService'
 export * from './NotificationBar/types'
 export { default as PageContainer } from './PageContainer/PageContainer.vue'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
+export { default as SyAlert } from './SyAlert/SyAlert.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
-export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
-export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
-export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
-export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'
+export { default as PasswordField } from './PasswordField/PasswordField.vue'

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 '@/designTokens/tokens/pa/paColors'
+import { paLightTheme } from '@/designTokens/tokens/pa/paLightTheme'
+import { paDarkTheme } from '@/designTokens/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,
+}

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

@@ -0,0 +1,87 @@
+export const paSemanticTokens = {
+	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',
+		},
+	},
+}