@cnamts/synapse 1.0.17 → 1.0.19

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

@@ -1,81 +1,166 @@
-import type { IndexedObject } from '../../../components/Amelipro/types'
-
 export const apColorsTokens = {
-	apBlack: { base: '#000000' },
-	apBlue: {
-		base: '#0C419A',
-		darken1: '#00749C',
-		darken2: '#00516D',
-		lighten1: '#99DBF2',
-		lighten2: '#CCEDF9',
-		lighten3: '#E6F6FC',
-		lighten4: '#F3FBFE',
+	amber: {
+		darken80: '#502C01',
+		darken60: '#784201',
+		darken40: '#9f5801',
+		darken20: '#c76e02',
+		base: '#ef8402',
+		lighten20: '#f2992c',
+		lighten40: '#f4ad56',
+		lighten60: '#f7c281',
+		lighten80: '#fad6ab',
+		lighten90: '#fce6cc',
+		lighten97: '#FFFAF5',
 	},
-	apGreen: {
-		base: '#56C271',
-		darken1: '#459B5A',
-		darken2: '#337343',
-		lighten1: '#78CE8D',
-		lighten2: '#DDF3E3',
+	yellow: {
+		darken80: '#302407',
+		darken60: '#60480e',
+		darken40: '#906b15',
+		darken20: '#c08f1c',
+		base: '#f0b323',
+		lighten20: '#f3c24f',
+		lighten40: '#f6d17b',
+		lighten60: '#f9e1a7',
+		lighten80: '#fcf0d3',
+		lighten90: '#fdf7e9',
+		lighten97: '#fffdf8',
 	},
-	apGrey: {
-		base: '#545859',
-		darken1: '#1A1B1B',
-		lighten1: '#CCCDCE',
-		lighten2: '#DDDEDE',
-		lighten3: '#EEEEEE',
-		lighten4: '#F3F4F4',
-		lighten5: '#FAFAFA',
-		lighten6: '#F4F8F9',
+	green: {
+		darken80: '#112717',
+		darken60: '#224e2d',
+		darken40: '#347444',
+		darken20: '#459b5a',
+		base: '#56c271',
+		lighten20: '#78ce8d',
+		lighten40: '#9adaaa',
+		lighten60: '#bbe7c6',
+		lighten80: '#ddf3e3',
+		lighten90: '#eef9f1',
+		lighten97: '#fafdfb',
 	},
-	apParme: {
-		base: '#C8D1E6',
-		darken1: '#4D547D',
+	turquoise: {
+		darken80: '#00221c',
+		darken60: '#004439',
+		darken40: '#006755',
+		darken20: '#008972',
+		base: '#00ab8e',
+		lighten20: '#33bca5',
+		lighten40: '#66cdbb',
+		lighten60: '#99ddd2',
+		lighten80: '#cceee8',
+		lighten90: '#e5f7f4',
+		lighten97: '#f7fcfc',
 	},
-	apPink: { base: '#D00063' },
-	apRed: {
-		base: '#B33F2E',
-		darken1: '#9D3728',
-		darken2: '#70281C',
-		lighten1: '#E67261',
-		lighten2: '#EC9588',
-		lighten3: '#F9DCD7',
-		lighten4: '#FDF0EE',
+	blue: {
+		darken80: '#020d1f',
+		darken60: '#051a3e',
+		darken40: '#07275c',
+		darken20: '#0a347b',
+		base: '#0c419a',
+		lighten20: '#3d67ae',
+		lighten40: '#6d8dc2',
+		lighten60: '#9eb3d7',
+		lighten80: '#ced9eb',
+		lighten90: '#e7ecf5',
+		lighten97: '#f8f9fc',
 	},
-	apTurquoise: {
-		base: '#33BCA5',
-		darken1: '#007863',
-		darken2: '#006654',
-		darken3: '#005647',
-		lighten1: '#CCEEE8',
-		lighten2: '#E6F7F4',
+	cyan: {
+		darken80: '#00212d',
+		darken60: '#004259',
+		darken40: '#006386',
+		darken20: '#0084b2',
+		base: '#00a5df',
+		lighten20: '#33b7e5',
+		lighten40: '#66c9ec',
+		lighten60: '#99dbf2',
+		lighten80: '#ccedf9',
+		lighten90: '#e5f6fc',
+		lighten97: '#f7fcfe',
 	},
-	apWhite: { base: '#FFFFFF' },
-	apYellow: {
-		base: '#F0B323',
-		darken1: '#D8A120',
-		darken2: '#C08F1C',
-		darken3: '#A87D19',
-		darken4: '#906C16',
-		lighten1: '#F3C24F',
-		lighten2: '#FED66D',
-		lighten3: '#F7D990',
-		lighten4: '#F9E1A7',
-		lighten5: '#FCF0D3',
+	forestGreen: {
+		darken80: '#002821',
+		darken60: '#003c32',
+		darken40: '#005042',
+		darken20: '#006453',
+		base: '#007863',
+		lighten20: '#2a8f7d',
+		lighten40: '#55a597',
+		lighten60: '#80bcb1',
+		lighten80: '#aad2cb',
+		lighten90: '#cce4e0',
+		lighten97: '#EEFFFC',
+	},
+	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',
+	},
+	red: {
+		darken80: '#4d0000',
+		darken60: '#740000',
+		darken40: '#9b0000',
+		darken20: '#B30E0E',
+		base: '#e80000',
+		lighten20: '#ec2a2a',
+		lighten40: '#FF5E5E',
+		lighten60: '#f48080',
+		lighten80: '#f7aaaa',
+		lighten90: '#facccc',
+		lighten97: '#FFF4F4',
+	},
+	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',
 	},
 }
-
-export const apColorClasses: IndexedObject = {}
-
-export function toKebabCase(value: string): string {
-	return value.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
-}
-
-Object.entries(apColorsTokens).forEach(([colorName, colorValues]) => {
-	Object.entries(colorValues).forEach(([variationName, colorValue]) => {
-		const colorClass = toKebabCase(`${colorName}-${variationName}`
-			.replace(/\d+/, '-$&')
-			.replace('-base', ''))
-		apColorClasses[colorClass] = colorValue as string
-	})
-})

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

@@ -0,0 +1,81 @@
+import type { IndexedObject } from '../../../components/Amelipro/types'
+
+export const apColorsTokens2026 = {
+	apBlack: { base: '#000000' },
+	apBlue: {
+		base: '#0C419A',
+		darken1: '#00749C',
+		darken2: '#00516D',
+		lighten1: '#99DBF2',
+		lighten2: '#CCEDF9',
+		lighten3: '#E6F6FC',
+		lighten4: '#F3FBFE',
+	},
+	apGreen: {
+		base: '#56C271',
+		darken1: '#459B5A',
+		darken2: '#337343',
+		lighten1: '#78CE8D',
+		lighten2: '#DDF3E3',
+	},
+	apGrey: {
+		base: '#545859',
+		darken1: '#1A1B1B',
+		lighten1: '#CCCDCE',
+		lighten2: '#DDDEDE',
+		lighten3: '#EEEEEE',
+		lighten4: '#F3F4F4',
+		lighten5: '#FAFAFA',
+		lighten6: '#F4F8F9',
+	},
+	apParme: {
+		base: '#C8D1E6',
+		darken1: '#4D547D',
+	},
+	apPink: { base: '#D00063' },
+	apRed: {
+		base: '#B33F2E',
+		darken1: '#9D3728',
+		darken2: '#70281C',
+		lighten1: '#E67261',
+		lighten2: '#EC9588',
+		lighten3: '#F9DCD7',
+		lighten4: '#FDF0EE',
+	},
+	apTurquoise: {
+		base: '#33BCA5',
+		darken1: '#007863',
+		darken2: '#006654',
+		darken3: '#005647',
+		lighten1: '#CCEEE8',
+		lighten2: '#E6F7F4',
+	},
+	apWhite: { base: '#FFFFFF' },
+	apYellow: {
+		base: '#F0B323',
+		darken1: '#D8A120',
+		darken2: '#C08F1C',
+		darken3: '#A87D19',
+		darken4: '#906C16',
+		lighten1: '#F3C24F',
+		lighten2: '#FED66D',
+		lighten3: '#F7D990',
+		lighten4: '#F9E1A7',
+		lighten5: '#FCF0D3',
+	},
+}
+
+export const apColorClasses: IndexedObject = {}
+
+export function toKebabCase(value: string): string {
+	return value.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+Object.entries(apColorsTokens2026).forEach(([colorName, colorValues]) => {
+	Object.entries(colorValues).forEach(([variationName, colorValue]) => {
+		const colorClass = toKebabCase(`${colorName}-${variationName}`
+			.replace(/\d+/, '-$&')
+			.replace('-base', ''))
+		apColorClasses[colorClass] = colorValue as string
+	})
+})

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

@@ -1,13 +1,91 @@
+import { apSemanticTokens } from './apSemantic'
 import { apColorsTokens } from './apColors'
-// import { apSemanticTokens } from '../amelipro/apSemantic'
-import { apColorClasses } from './apColors'
 
 export const apLightTheme = {
-	...apColorClasses,
-	error: apColorsTokens.apRed.base,
-	info: apColorsTokens.apParme.darken1 as string,
-	primary: apColorsTokens.apBlue.darken1 as string,
-	secondary: apColorsTokens.apBlue.darken2 as string,
-	success: apColorsTokens.apTurquoise.darken1 as string,
-	warning: apColorsTokens.apYellow.darken4 as string,
+	primary: apColorsTokens.cyan.darken40,
+	secondary: apColorsTokens.cyan.darken60,
+	accent: apColorsTokens.cyan.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,
+	interactiveDefault: apSemanticTokens.colors.interactive.default,
+	interactiveHover: apSemanticTokens.colors.interactive.hover,
+	interactivePressed: apSemanticTokens.colors.interactive.pressed,
+	interactiveFocus: apSemanticTokens.colors.interactive.focus,
+	interactiveDisabled: apSemanticTokens.colors.interactive.disabled,
+	interactiveHoverOnSelected: apSemanticTokens.colors.interactive.hoverOnSelected,
+	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,
+	borderAccent: apSemanticTokens.colors.border.accent,
+	borderAccentContrasted: apSemanticTokens.colors.border.accentContrasted,
+	borderAccentOnDark: apSemanticTokens.colors.border.accentOnDark,
+	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,
+	textAccent: apSemanticTokens.colors.text.accent,
+	textAccentContrasted: apSemanticTokens.colors.text.accentContrasted,
+	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,
+	iconAccent: apSemanticTokens.colors.icon.accent,
+	iconAccentContrasted: apSemanticTokens.colors.icon.accentContrasted,
+	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,
 }

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

@@ -0,0 +1,12 @@
+import { apColorsTokens2026 } from './apColors2026'
+import { apColorClasses } from './apColors2026'
+
+export const apLightTheme2026 = {
+	...apColorClasses,
+	error: apColorsTokens2026.apRed.base,
+	info: apColorsTokens2026.apParme.darken1 as string,
+	primary: apColorsTokens2026.apBlue.darken1 as string,
+	secondary: apColorsTokens2026.apBlue.darken2 as string,
+	success: apColorsTokens2026.apTurquoise.darken1 as string,
+	warning: apColorsTokens2026.apYellow.darken4 as string,
+}

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

@@ -1,87 +1,89 @@
+import { apColorsTokens } from './apColors'
+
 export const apSemanticTokens = {
 	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',
+			main: apColorsTokens.cyan.lighten97,
+			surface: apColorsTokens.white.base,
+			mainAlt: apColorsTokens.white.base,
+			surfaceAlt: apColorsTokens.blue.lighten90,
+			raised: apColorsTokens.blue.lighten97,
+			accent: apColorsTokens.cyan.darken20,
+			accentContrasted: apColorsTokens.cyan.darken60,
+			accentAlt: apColorsTokens.grey.base,
+			info: apColorsTokens.blue.lighten80,
+			infoSubdued: apColorsTokens.blue.lighten90,
+			infoContrasted: apColorsTokens.parma.darken40,
+			success: apColorsTokens.forestGreen.lighten80,
+			successSubdued: apColorsTokens.forestGreen.lighten90,
+			successContrasted: apColorsTokens.forestGreen.base,
+			warning: apColorsTokens.yellow.lighten80,
+			warningSubdued: apColorsTokens.yellow.lighten90,
+			warningContrasted: apColorsTokens.yellow.base,
+			error: apColorsTokens.red.lighten80,
+			errorSubdued: apColorsTokens.red.lighten90,
+			errorContrasted: apColorsTokens.red.darken20,
+			disabled: apColorsTokens.grey.lighten80,
+			disabledOnDark: apColorsTokens.white.lighten8,
+			assure: apColorsTokens.pink.lighten40,
+			professionnel: apColorsTokens.cyan.lighten40,
+			entreprise: apColorsTokens.yellow.base,
 		},
 		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)',
+			darker: apColorsTokens.grey.darken60,
+			base: apColorsTokens.grey.lighten40,
+			subdued: apColorsTokens.grey.lighten80,
+			accent: apColorsTokens.cyan.darken20,
+			accentContrasted: apColorsTokens.cyan.darken40,
+			accentOnDark: apColorsTokens.white.base,
+			info: apColorsTokens.parma.darken40,
+			success: apColorsTokens.forestGreen.base,
+			warning: apColorsTokens.yellow.darken60,
+			error: apColorsTokens.red.darken20,
+			onDark: apColorsTokens.white.lighten70,
+			disabled: apColorsTokens.grey.lighten80,
+			disabledOnDark: apColorsTokens.white.lighten40,
 		},
 		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)',
+			base: apColorsTokens.grey.darken60,
+			accent: apColorsTokens.cyan.darken20,
+			accentContrasted: apColorsTokens.cyan.darken40,
+			subdued: apColorsTokens.grey.base,
+			info: apColorsTokens.parma.darken40,
+			success: apColorsTokens.forestGreen.base,
+			warning: apColorsTokens.yellow.darken60,
+			error: apColorsTokens.red.darken20,
+			disabled: apColorsTokens.grey.lighten40,
+			onDark: apColorsTokens.white.base,
+			subduedOnDark: apColorsTokens.white.lighten70,
+			disabledOnDark: apColorsTokens.white.lighten40,
 		},
 		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)',
+			base: apColorsTokens.grey.darken60,
+			subdued: apColorsTokens.grey.base,
+			subduedOnDark: apColorsTokens.white.lighten70,
+			accent: apColorsTokens.cyan.darken20,
+			accentContrasted: apColorsTokens.cyan.darken40,
+			info: apColorsTokens.parma.darken40,
+			success: apColorsTokens.forestGreen.darken60,
+			warning: apColorsTokens.yellow.darken60,
+			error: apColorsTokens.red.darken20,
+			onDark: apColorsTokens.white.base,
+			disabled: apColorsTokens.grey.lighten40,
+			disabledOnDark: apColorsTokens.white.lighten40,
 		},
 		overlay: {
-			fullpage: '#989b9b',
-			onDark: '#ffffff',
-			onLight: '#0c419a',
+			fullpage: apColorsTokens.grey.darken60,
+			onDark: apColorsTokens.cyan.darken40,
+			onLight: apColorsTokens.white.base,
 		},
 		interactive: {
-			default: 'rgba(255, 255, 255, 0.0000)',
-			hover: '#e7ecf5',
-			pressed: '#ced9eb',
-			focus: '#e7ecf5',
-			disabled: 'rgba(255, 255, 255, 0.0000)',
-			hoverOnSelected: '#ced9eb',
+			default: apColorsTokens.white.base,
+			hover: apColorsTokens.cyan.lighten90,
+			pressed: apColorsTokens.cyan.lighten80,
+			focus: apColorsTokens.blue.lighten90,
+			disabled: apColorsTokens.white.base,
+			hoverOnSelected: apColorsTokens.blue.lighten80,
 		},
 	},
 }