@cnamts/synapse 1.0.27 → 1.1.1

package/src/stories/DesignTokens/colors.stories.ts

@@ -8,6 +8,7 @@ import { apColorsTokens2026 } from '@/designTokens/tokens/amelipro/apColors2026'
 import { apColorsTokens } from '@/designTokens/tokens/amelipro/apColors'
 import ColorDisplay from './ColorDisplay.vue'
 import ColorIntegrationExample from './ColorIntegrationExample.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { h } from 'vue'
 import { useTheme } from 'vuetify'
 import type { StoryObj } from '@storybook/vue3'
@@ -57,6 +58,18 @@ export default {
 
 type ThemeKey = 'cnam' | 'pa' | 'ap' | 'ap2026'
 
+export const TokenOptimisationWarning: StoryObj = {
+	render: () => ({
+		components: { SyAlert },
+		template: `
+			<SyAlert type="warning" style="margin-bottom: 25px;">
+				Suite à l'ajout du thème Amelipro dans Synapse, nous avons dû procéder à une simplification et optimisation des tokens.
+			</SyAlert>
+		`,
+	}),
+	tags: ['!dev'],
+}
+
 export const Theme: StoryObj = {
 	render: () => {
 		return {
@@ -108,17 +121,17 @@ export const mainColors: StoryObj = {
 				const colorTitleLevel = 3
 				const colorDescription = 'Fond et texte (sous condition de contraste) un texte pourrait être en : On-surface ou On-surface variant ...'
 				const cnamColors = {
-					'primary': cnamLightTheme.primary,
-					'primary-variant': cnamLightTheme.primaryVariant,
-					'secondary': cnamLightTheme.secondary,
-					'secondary-variant': cnamLightTheme.secondaryVariant,
-					'risque-pro': cnamLightTheme.risquePro,
+					primary: cnamLightTheme.primary,
+					primaryVariant: cnamLightTheme.primaryVariant,
+					secondary: cnamLightTheme.secondary,
+					secondaryVariant: cnamLightTheme.secondaryVariant,
+					risquePro: cnamLightTheme.risquePro,
 				}
 				const paColors = {
-					'primary': paLightTheme.primary,
-					'primary-variant': paLightTheme.primaryVariant,
-					'secondary': paLightTheme.secondary,
-					'secondary-variant': paLightTheme.secondaryVariant,
+					primary: paLightTheme.primary,
+					primaryVariant: paLightTheme.primaryVariant,
+					secondary: paLightTheme.secondary,
+					secondaryVariant: paLightTheme.secondaryVariant,
 				}
 				const apColors2026 = {
 					primary: apLightTheme2026.primary,
@@ -129,10 +142,10 @@ export const mainColors: StoryObj = {
 					warning: apLightTheme2026.warning,
 				}
 				const apColors = {
-					'primary': apLightTheme.primary,
-					'primary-variant': apLightTheme.primaryVariant,
-					'secondary': apLightTheme.secondary,
-					'secondary-variant': apLightTheme.secondaryVariant,
+					primary: apLightTheme.primary,
+					primaryVariant: apLightTheme.primaryVariant,
+					secondary: apLightTheme.secondary,
+					secondaryVariant: apLightTheme.secondaryVariant,
 				}
 				return {
 					cnamColors,
@@ -171,22 +184,22 @@ export const ColorOn: StoryObj = {
 				const colorTitleLevel = 3
 				const colorDescription = 'Texte/icône sur fond'
 				const cnamColors = {
-					'on-primary': cnamLightTheme.onPrimary,
-					'on-primary-variant': cnamLightTheme.onPrimaryVariant,
-					'on-secondary': cnamLightTheme.onSecondary,
-					'on-secondary-variant': cnamLightTheme.onSecondaryVariant,
+					onPrimary: cnamLightTheme.onPrimary,
+					onPrimaryVariant: cnamLightTheme.onPrimaryVariant,
+					onSecondary: cnamLightTheme.onSecondary,
+					onSecondaryVariant: cnamLightTheme.onSecondaryVariant,
 				}
 				const paColors = {
-					'on-primary': paLightTheme.onPrimary,
-					'on-primary-variant': paLightTheme.onPrimaryVariant,
-					'on-secondary': paLightTheme.onSecondary,
-					'on-secondary-variant': paLightTheme.onSecondaryVariant,
+					onPrimary: paLightTheme.onPrimary,
+					onPrimaryVariant: paLightTheme.onPrimaryVariant,
+					onSecondary: paLightTheme.onSecondary,
+					onSecondaryVariant: paLightTheme.onSecondaryVariant,
 				}
 				const apColors = {
-					'on-primary': apLightTheme.onPrimary,
-					'on-primary-variant': apLightTheme.onPrimaryVariant,
-					'on-secondary': apLightTheme.onSecondary,
-					'on-secondary-variant': apLightTheme.onSecondaryVariant,
+					onPrimary: apLightTheme.onPrimary,
+					onPrimaryVariant: apLightTheme.onPrimaryVariant,
+					onSecondary: apLightTheme.onSecondary,
+					onSecondaryVariant: apLightTheme.onSecondaryVariant,
 				}
 				const apColors2026 = {}
 				return {
@@ -227,40 +240,40 @@ export const Interaction: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'interaction-lighten-enabled': cnamLightTheme.interactionLightenEnabled,
-					'interactiion-lighten-hover': cnamLightTheme.interactionLightenHover,
-					'interaction-lighten-selected': cnamLightTheme.interactionLightenSelected,
-					'interaction-lighten-pressed': cnamLightTheme.interactionLightenPressed,
-					'interaction-darke-hover': cnamLightTheme.interactionDarkEnabled,
-					'interaction-dark-hover': cnamLightTheme.interactionDarkHover,
-					'interaction-dark-pressed': cnamLightTheme.interactionDarkPressed,
-					'interaction-darken-enabled': cnamLightTheme.interactionDarkenEnabled,
-					'interaction-darken-hover': cnamLightTheme.interactionDarkenHover,
-					'interaction-darken-pressed': cnamLightTheme.interactionDarkenPressed,
+					interactionLightenEnabled: cnamLightTheme.interactionLightenEnabled,
+					interactionLightenHover: cnamLightTheme.interactionLightenHover,
+					interactionLightenSelected: cnamLightTheme.interactionLightenSelected,
+					interactionLightenPressed: cnamLightTheme.interactionLightenPressed,
+					interactionDarkEnabled: cnamLightTheme.interactionDarkEnabled,
+					interactionDarkHover: cnamLightTheme.interactionDarkHover,
+					interactionDarkPressed: cnamLightTheme.interactionDarkPressed,
+					interactionDarkenEnabled: cnamLightTheme.interactionDarkenEnabled,
+					interactionDarkenHover: cnamLightTheme.interactionDarkenHover,
+					interactionDarkenPressed: cnamLightTheme.interactionDarkenPressed,
 				}
 				const paColors = {
-					'interaction-lighten-enabled': paLightTheme.interactionLightenEnabled,
-					'interactiion-lighten-hover': paLightTheme.interactionLightenHover,
-					'interaction-lighten-selected': paLightTheme.interactionLightenSelected,
-					'interaction-lighten-pressed': paLightTheme.interactionLightenPressed,
-					'interaction-darke-hover': paLightTheme.interactionDarkEnabled,
-					'interaction-dark-hover': paLightTheme.interactionDarkHover,
-					'interaction-dark-pressed': paLightTheme.interactionDarkPressed,
-					'interaction-darken-enabled': paLightTheme.interactionDarkenEnabled,
-					'interaction-darken-hover': paLightTheme.interactionDarkenHover,
-					'interaction-darken-pressed': paLightTheme.interactionDarkenPressed,
+					interactionLightenEnabled: paLightTheme.interactionLightenEnabled,
+					interactionLightenHover: paLightTheme.interactionLightenHover,
+					interactionLightenSelected: paLightTheme.interactionLightenSelected,
+					interactionLightenPressed: paLightTheme.interactionLightenPressed,
+					interactionDarkEnabled: paLightTheme.interactionDarkEnabled,
+					interactionDarkHover: paLightTheme.interactionDarkHover,
+					interactionDarkPressed: paLightTheme.interactionDarkPressed,
+					interactionDarkenEnabled: paLightTheme.interactionDarkenEnabled,
+					interactionDarkenHover: paLightTheme.interactionDarkenHover,
+					interactionDarkenPressed: paLightTheme.interactionDarkenPressed,
 				}
 				const apColors = {
-					'interaction-lighten-enabled': apLightTheme.interactionLightenEnabled,
-					'interactiion-lighten-hover': apLightTheme.interactionLightenHover,
-					'interaction-lighten-selected': apLightTheme.interactionLightenSelected,
-					'interaction-lighten-pressed': apLightTheme.interactionLightenPressed,
-					'interaction-darke-hover': apLightTheme.interactionDarkEnabled,
-					'interaction-dark-hover': apLightTheme.interactionDarkHover,
-					'interaction-dark-pressed': apLightTheme.interactionDarkPressed,
-					'interaction-darken-enabled': apLightTheme.interactionDarkenEnabled,
-					'interaction-darken-hover': apLightTheme.interactionDarkenHover,
-					'interaction-darken-pressed': apLightTheme.interactionDarkenPressed,
+					interactionLightenEnabled: apLightTheme.interactionLightenEnabled,
+					interactionLightenHover: apLightTheme.interactionLightenHover,
+					interactionLightenSelected: apLightTheme.interactionLightenSelected,
+					interactionLightenPressed: apLightTheme.interactionLightenPressed,
+					interactionDarkEnabled: apLightTheme.interactionDarkEnabled,
+					interactionDarkHover: apLightTheme.interactionDarkHover,
+					interactionDarkPressed: apLightTheme.interactionDarkPressed,
+					interactionDarkenEnabled: apLightTheme.interactionDarkenEnabled,
+					interactionDarkenHover: apLightTheme.interactionDarkenHover,
+					interactionDarkenPressed: apLightTheme.interactionDarkenPressed,
 				}
 				const apColors2026 = {}
 				return {
@@ -356,18 +369,18 @@ export const Backgrounds: StoryObj = {
 				const colorDescription = 'backgrounds principaux de la plateforme'
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'background': cnamLightTheme.background,
-					'background-variant': cnamLightTheme.backgroundVariant,
+					background: cnamLightTheme.background,
+					backgroundVariant: cnamLightTheme.backgroundVariant,
 				}
 				const paColors = {
-					'background': paLightTheme.background,
-					'background-variant': paLightTheme.backgroundVariant,
+					background: paLightTheme.background,
+					backgroundVariant: paLightTheme.backgroundVariant,
 				}
 				const apColors = {
-					'background': apLightTheme.background,
-					'background-variant': apLightTheme.backgroundVariant,
+					background: apLightTheme.background,
+					backgroundVariant: apLightTheme.backgroundVariant,
 				}
-				const apColors2026 = { 'ap-grey-lighten-6': apColorsTokens2026.apGrey.lighten6 }
+				const apColors2026 = { 'apGrey-lighten6': apColorsTokens2026.apGrey.lighten6 }
 				return {
 					cnamColors,
 					paColors,
@@ -404,16 +417,16 @@ export const OnBackgrounds: StoryObj = {
 				const colorDescription = 'Texte/icône sur fond'
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'on-background': cnamLightTheme.onBackground,
-					'on-background-variant': cnamLightTheme.onBackgroundVariant,
+					onBackground: cnamLightTheme.onBackground,
+					onBackgroundVariant: cnamLightTheme.onBackgroundVariant,
 				}
 				const paColors = {
-					'on-background': paLightTheme.onBackground,
-					'on-background-variant': paLightTheme.onBackgroundVariant,
+					onBackground: paLightTheme.onBackground,
+					onBackgroundVariant: paLightTheme.onBackgroundVariant,
 				}
 				const apColors = {
-					'on-background': apLightTheme.onBackground,
-					'on-background-variant': apLightTheme.onBackgroundVariant,
+					onBackground: apLightTheme.onBackground,
+					onBackgroundVariant: apLightTheme.onBackgroundVariant,
 				}
 				const apColors2026 = {}
 				return {
@@ -452,22 +465,22 @@ export const Surfaces: StoryObj = {
 				const colorDescription = ' Surface en superposition du background principal.'
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'surface': cnamLightTheme.surface,
-					'surface-dim': cnamLightTheme.surfaceDim,
-					'surface-bright': cnamLightTheme.surfaceBright,
-					'inverse-surface': cnamLightTheme.inverseSurface,
+					surface: cnamLightTheme.surface,
+					surfaceDim: cnamLightTheme.surfaceDim,
+					surfaceBright: cnamLightTheme.surfaceBright,
+					inverseSurface: cnamLightTheme.inverseSurface,
 				}
 				const paColors = {
-					'surface': paLightTheme.surface,
-					'surface-dim': paLightTheme.surfaceDim,
-					'surface-bright': paLightTheme.surfaceBright,
-					'inverse-surface': paLightTheme.inverseSurface,
+					surface: paLightTheme.surface,
+					surfaceDim: paLightTheme.surfaceDim,
+					surfaceBright: paLightTheme.surfaceBright,
+					inverseSurface: paLightTheme.inverseSurface,
 				}
 				const apColors = {
-					'surface': apLightTheme.surface,
-					'surface-dim': apLightTheme.surfaceDim,
-					'surface-bright': apLightTheme.surfaceBright,
-					'inverse-surface': apLightTheme.inverseSurface,
+					surface: apLightTheme.surface,
+					surfaceDim: apLightTheme.surfaceDim,
+					surfaceBright: apLightTheme.surfaceBright,
+					inverseSurface: apLightTheme.inverseSurface,
 				}
 				const apColors2026 = {}
 				return {
@@ -506,16 +519,16 @@ export const OnSurfaces: StoryObj = {
 				const colorDescription = 'Texte/icône sur une surface '
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'on-surface': cnamLightTheme.onSurface,
-					'on-surface-variant': cnamLightTheme.onSurfaceVariant,
+					onSurface: cnamLightTheme.onSurface,
+					onSurfaceVariant: cnamLightTheme.onSurfaceVariant,
 				}
 				const paColors = {
-					'on-surface': paLightTheme.onSurface,
-					'on-surface-variant': paLightTheme.onSurfaceVariant,
+					onSurface: paLightTheme.onSurface,
+					onSurfaceVariant: paLightTheme.onSurfaceVariant,
 				}
 				const apColors = {
-					'on-surface': apLightTheme.onSurface,
-					'on-surface-variant': apLightTheme.onSurfaceVariant,
+					onSurface: apLightTheme.onSurface,
+					onSurfaceVariant: apLightTheme.onSurfaceVariant,
 				}
 				const apColors2026 = {}
 				return {
@@ -596,22 +609,22 @@ export const Borders: StoryObj = {
 				const colorTitleLevel = 3
 				const colorDescription = 'Ce sont les couleurs à utiliser pour les contours de tous les éléments d’interface (quand nécessaire)'
 				const cnamColors = {
-					'border': cnamLightTheme.border,
-					'border-variant': cnamLightTheme.borderVariant,
-					'border-bright': cnamLightTheme.borderBright,
-					'border-dim': cnamLightTheme.borderDim,
+					border: cnamLightTheme.border,
+					borderVariant: cnamLightTheme.borderVariant,
+					borderBright: cnamLightTheme.borderBright,
+					borderDim: cnamLightTheme.borderDim,
 				}
 				const paColors = {
-					'border': paLightTheme.border,
-					'border-variant': paLightTheme.borderVariant,
-					'border-bright': paLightTheme.borderBright,
-					'border-dim': paLightTheme.borderDim,
+					border: paLightTheme.border,
+					borderVariant: paLightTheme.borderVariant,
+					borderBright: paLightTheme.borderBright,
+					borderDim: paLightTheme.borderDim,
 				}
 				const apColors = {
-					'border': apLightTheme.border,
-					'border-variant': apLightTheme.borderVariant,
-					'border-bright': apLightTheme.borderBright,
-					'border-dim': apLightTheme.borderDim,
+					border: apLightTheme.border,
+					borderVariant: apLightTheme.borderVariant,
+					borderBright: apLightTheme.borderBright,
+					borderDim: apLightTheme.borderDim,
 				}
 				const apColors2026 = {}
 				return {
@@ -693,34 +706,34 @@ export const Feedback: StoryObj = {
 				const colorTitleLevel = 3
 				const colorDescription = 'Fonds de composants (ou de containers) indiquant un message de statut'
 				const cnamColors = {
-					'error': cnamLightTheme.error,
-					'error-variant': cnamLightTheme.errorVariant,
-					'success': cnamLightTheme.success,
-					'success-variant': cnamLightTheme.successVariant,
-					'warning': cnamLightTheme.warning,
-					'warning-variant': cnamLightTheme.warningVariant,
-					'info': cnamLightTheme.info,
-					'info-variant': cnamLightTheme.infoVariant,
+					error: cnamLightTheme.error,
+					errorVariant: cnamLightTheme.errorVariant,
+					success: cnamLightTheme.success,
+					successVariant: cnamLightTheme.successVariant,
+					warning: cnamLightTheme.warning,
+					warningVariant: cnamLightTheme.warningVariant,
+					info: cnamLightTheme.info,
+					infoVariant: cnamLightTheme.infoVariant,
 				}
 				const paColors = {
-					'error': paLightTheme.error,
-					'error-variant': paLightTheme.errorVariant,
-					'success': paLightTheme.success,
-					'success-variant': paLightTheme.successVariant,
-					'warning': paLightTheme.warning,
-					'warning-variant': paLightTheme.warningVariant,
-					'info': paLightTheme.info,
-					'info-variant': paLightTheme.infoVariant,
+					error: paLightTheme.error,
+					errorVariant: paLightTheme.errorVariant,
+					success: paLightTheme.success,
+					successVariant: paLightTheme.successVariant,
+					warning: paLightTheme.warning,
+					warningVariant: paLightTheme.warningVariant,
+					info: paLightTheme.info,
+					infoVariant: paLightTheme.infoVariant,
 				}
 				const apColors = {
-					'error': apLightTheme.error,
-					'error-variant': apLightTheme.errorVariant,
-					'success': apLightTheme.success,
-					'success-variant': apLightTheme.successVariant,
-					'warning': apLightTheme.warning,
-					'warning-variant': apLightTheme.warningVariant,
-					'info': apLightTheme.info,
-					'info-variant': apLightTheme.infoVariant,
+					error: apLightTheme.error,
+					errorVariant: apLightTheme.errorVariant,
+					success: apLightTheme.success,
+					successVariant: apLightTheme.successVariant,
+					warning: apLightTheme.warning,
+					warningVariant: apLightTheme.warningVariant,
+					info: apLightTheme.info,
+					infoVariant: apLightTheme.infoVariant,
 				}
 				const apColors2026 = {}
 				return {
@@ -760,34 +773,34 @@ export const OnFeedback: StoryObj = {
 				const colorTitleLevel = 3
 				const colorDescription = 'Textes/ Icônes sur fond de statut.'
 				const cnamColors = {
-					'on-error': cnamLightTheme.onError,
-					'on-error-variant': cnamLightTheme.onErrorVariant,
-					'on-success': cnamLightTheme.onSuccess,
-					'on-success-variant': cnamLightTheme.onSuccessVariant,
-					'on-warning': cnamLightTheme.onWarning,
-					'on-warning-variant': cnamLightTheme.onWarningVariant,
-					'on-info': cnamLightTheme.onInfo,
-					'on-info-variant': cnamLightTheme.onInfoVariant,
+					onError: cnamLightTheme.onError,
+					onErrorVariant: cnamLightTheme.onErrorVariant,
+					onSuccess: cnamLightTheme.onSuccess,
+					onSuccessVariant: cnamLightTheme.onSuccessVariant,
+					onWarning: cnamLightTheme.onWarning,
+					onWarningVariant: cnamLightTheme.onWarningVariant,
+					onInfo: cnamLightTheme.onInfo,
+					onInfoVariant: cnamLightTheme.onInfoVariant,
 				}
 				const paColors = {
-					'on-error': paLightTheme.onError,
-					'on-error-variant': paLightTheme.onErrorVariant,
-					'on-success': paLightTheme.onSuccess,
-					'on-success-variant': paLightTheme.onSuccessVariant,
-					'on-warning': paLightTheme.onWarning,
-					'on-warning-variant': paLightTheme.onWarningVariant,
-					'on-info': paLightTheme.onInfo,
-					'on-info-variant': paLightTheme.onInfoVariant,
+					onError: paLightTheme.onError,
+					onErrorVariant: paLightTheme.onErrorVariant,
+					onSuccess: paLightTheme.onSuccess,
+					onSuccessVariant: paLightTheme.onSuccessVariant,
+					onWarning: paLightTheme.onWarning,
+					onWarningVariant: paLightTheme.onWarningVariant,
+					onInfo: paLightTheme.onInfo,
+					onInfoVariant: paLightTheme.onInfoVariant,
 				}
 				const apColors = {
-					'on-error': apLightTheme.onError,
-					'on-error-variant': apLightTheme.onErrorVariant,
-					'on-success': apLightTheme.onSuccess,
-					'on-success-variant': apLightTheme.onSuccessVariant,
-					'on-warning': apLightTheme.onWarning,
-					'on-warning-variant': apLightTheme.onWarningVariant,
-					'on-info': apLightTheme.onInfo,
-					'on-info-variant': apLightTheme.onInfoVariant,
+					onError: apLightTheme.onError,
+					onErrorVariant: apLightTheme.onErrorVariant,
+					onSuccess: apLightTheme.onSuccess,
+					onSuccessVariant: apLightTheme.onSuccessVariant,
+					onWarning: apLightTheme.onWarning,
+					onWarningVariant: apLightTheme.onWarningVariant,
+					onInfo: apLightTheme.onInfo,
+					onInfoVariant: apLightTheme.onInfoVariant,
 				}
 				const apColors2026 = {}
 				return {
@@ -836,43 +849,43 @@ export const PaletteOrange: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'orange-darken-80': cnamColorsTokens.orange.darken80,
-					'orange-darken-60': cnamColorsTokens.orange.darken60,
-					'orange-darken-40': cnamColorsTokens.orange.darken40,
-					'orange-darken-20': cnamColorsTokens.orange.darken20,
+					'orange-darken80': cnamColorsTokens.orange.darken80,
+					'orange-darken60': cnamColorsTokens.orange.darken60,
+					'orange-darken40': cnamColorsTokens.orange.darken40,
+					'orange-darken20': cnamColorsTokens.orange.darken20,
 					'orange-base': cnamColorsTokens.orange.base,
-					'orange-lighten-20': cnamColorsTokens.orange.lighten20,
-					'orange-lighten-40': cnamColorsTokens.orange.lighten40,
-					'orange-lighten-60': cnamColorsTokens.orange.lighten60,
-					'orange-lighten-80': cnamColorsTokens.orange.lighten80,
-					'orange-lighten-90': cnamColorsTokens.orange.lighten90,
-					'orange-lighten-97': cnamColorsTokens.orange.lighten97,
+					'orange-lighten20': cnamColorsTokens.orange.lighten20,
+					'orange-lighten40': cnamColorsTokens.orange.lighten40,
+					'orange-lighten60': cnamColorsTokens.orange.lighten60,
+					'orange-lighten80': cnamColorsTokens.orange.lighten80,
+					'orange-lighten90': cnamColorsTokens.orange.lighten90,
+					'orange-lighten97': cnamColorsTokens.orange.lighten97,
 				}
 				const paColors = {
-					'orange-darken-80': paColorsTokens.orange.darken80,
-					'orange-darken-60': paColorsTokens.orange.darken60,
-					'orange-darken-40': paColorsTokens.orange.darken40,
-					'orange-darken-20': paColorsTokens.orange.darken20,
+					'orange-darken80': paColorsTokens.orange.darken80,
+					'orange-darken60': paColorsTokens.orange.darken60,
+					'orange-darken40': paColorsTokens.orange.darken40,
+					'orange-darken20': paColorsTokens.orange.darken20,
 					'orange-base': paColorsTokens.orange.base,
-					'orange-lighten-20': paColorsTokens.orange.lighten20,
-					'orange-lighten-40': paColorsTokens.orange.lighten40,
-					'orange-lighten-60': paColorsTokens.orange.lighten60,
-					'orange-lighten-80': paColorsTokens.orange.lighten80,
-					'orange-lighten-90': paColorsTokens.orange.lighten90,
-					'orange-lighten-97': paColorsTokens.orange.lighten97,
+					'orange-lighten20': paColorsTokens.orange.lighten20,
+					'orange-lighten40': paColorsTokens.orange.lighten40,
+					'orange-lighten60': paColorsTokens.orange.lighten60,
+					'orange-lighten80': paColorsTokens.orange.lighten80,
+					'orange-lighten90': paColorsTokens.orange.lighten90,
+					'orange-lighten97': paColorsTokens.orange.lighten97,
 				}
 				const apColors = {
-					'amber-darken-80': apColorsTokens.amber.darken80,
-					'amber-darken-60': apColorsTokens.amber.darken60,
-					'amber-darken-40': apColorsTokens.amber.darken40,
-					'amber-darken-20': apColorsTokens.amber.darken20,
+					'amber-darken80': apColorsTokens.amber.darken80,
+					'amber-darken60': apColorsTokens.amber.darken60,
+					'amber-darken40': apColorsTokens.amber.darken40,
+					'amber-darken20': apColorsTokens.amber.darken20,
 					'amber-base': apColorsTokens.amber.base,
-					'amber-lighten-20': apColorsTokens.amber.lighten20,
-					'amber-lighten-40': apColorsTokens.amber.lighten40,
-					'amber-lighten-60': apColorsTokens.amber.lighten60,
-					'amber-lighten-80': apColorsTokens.amber.lighten80,
-					'amber-lighten-90': apColorsTokens.amber.lighten90,
-					'amber-lighten-97': apColorsTokens.amber.lighten97,
+					'amber-lighten20': apColorsTokens.amber.lighten20,
+					'amber-lighten40': apColorsTokens.amber.lighten40,
+					'amber-lighten60': apColorsTokens.amber.lighten60,
+					'amber-lighten80': apColorsTokens.amber.lighten80,
+					'amber-lighten90': apColorsTokens.amber.lighten90,
+					'amber-lighten97': apColorsTokens.amber.lighten97,
 				}
 				const apColors2026 = {}
 				return {
@@ -913,26 +926,26 @@ export const PaletteRed: StoryObj = {
 				const cnamColors = {}
 				const paColors = {}
 				const apColors = {
-					'red-darken-80': apColorsTokens.red.darken80,
-					'red-darken-60': apColorsTokens.red.darken60,
-					'red-darken-40': apColorsTokens.red.darken40,
-					'red-darken-20': apColorsTokens.red.darken20,
+					'red-darken80': apColorsTokens.red.darken80,
+					'red-darken60': apColorsTokens.red.darken60,
+					'red-darken40': apColorsTokens.red.darken40,
+					'red-darken20': apColorsTokens.red.darken20,
 					'red-base': apColorsTokens.red.base,
-					'red-lighten-20': apColorsTokens.red.lighten20,
-					'red-lighten-40': apColorsTokens.red.lighten40,
-					'red-lighten-60': apColorsTokens.red.lighten60,
-					'red-lighten-80': apColorsTokens.red.lighten80,
-					'red-lighten-90': apColorsTokens.red.lighten90,
-					'red-lighten-97': apColorsTokens.red.lighten97,
+					'red-lighten20': apColorsTokens.red.lighten20,
+					'red-lighten40': apColorsTokens.red.lighten40,
+					'red-lighten60': apColorsTokens.red.lighten60,
+					'red-lighten80': apColorsTokens.red.lighten80,
+					'red-lighten90': apColorsTokens.red.lighten90,
+					'red-lighten97': apColorsTokens.red.lighten97,
 				}
 				const apColors2026 = {
-					'ap-red-darken-2': apColorsTokens2026.apRed.darken2,
-					'ap-red-darken-1': apColorsTokens2026.apRed.darken1,
-					'ap-red': apColorsTokens2026.apRed.base,
-					'ap-red-lighten-1': apColorsTokens2026.apRed.lighten1,
-					'ap-red-lighten-2': apColorsTokens2026.apRed.lighten2,
-					'ap-red-lighten-3': apColorsTokens2026.apRed.lighten3,
-					'ap-red-lighten-4': apColorsTokens2026.apRed.lighten4,
+					'apRed-darken2': apColorsTokens2026.apRed.darken2,
+					'apRed-darken1': apColorsTokens2026.apRed.darken1,
+					'apRed-base': apColorsTokens2026.apRed.base,
+					'apRed-lighten1': apColorsTokens2026.apRed.lighten1,
+					'apRed-lighten2': apColorsTokens2026.apRed.lighten2,
+					'apRed-lighten3': apColorsTokens2026.apRed.lighten3,
+					'apRed-lighten4': apColorsTokens2026.apRed.lighten4,
 				}
 				return {
 					displayEmptyColors,
@@ -969,55 +982,55 @@ export const PaletteYellow: StoryObj = {
 				const colorTitle = 'Yellow'
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'yellow-darken-80': cnamColorsTokens.yellow.darken80,
-					'yellow-darken-60': cnamColorsTokens.yellow.darken60,
-					'yellow-darken-40': cnamColorsTokens.yellow.darken40,
-					'yellow-darken-20': cnamColorsTokens.yellow.darken20,
+					'yellow-darken80': cnamColorsTokens.yellow.darken80,
+					'yellow-darken60': cnamColorsTokens.yellow.darken60,
+					'yellow-darken40': cnamColorsTokens.yellow.darken40,
+					'yellow-darken20': cnamColorsTokens.yellow.darken20,
 					'yellow-base': cnamColorsTokens.yellow.base,
-					'yellow-lighten-20': cnamColorsTokens.yellow.lighten20,
-					'yellow-lighten-40': cnamColorsTokens.yellow.lighten40,
-					'yellow-lighten-60': cnamColorsTokens.yellow.lighten60,
-					'yellow-lighten-80': cnamColorsTokens.yellow.lighten80,
-					'yellow-lighten-90': cnamColorsTokens.yellow.lighten90,
-					'yellow-lighten-97': cnamColorsTokens.yellow.lighten97,
+					'yellow-lighten20': cnamColorsTokens.yellow.lighten20,
+					'yellow-lighten40': cnamColorsTokens.yellow.lighten40,
+					'yellow-lighten60': cnamColorsTokens.yellow.lighten60,
+					'yellow-lighten80': cnamColorsTokens.yellow.lighten80,
+					'yellow-lighten90': cnamColorsTokens.yellow.lighten90,
+					'yellow-lighten97': cnamColorsTokens.yellow.lighten97,
 				}
 				const paColors = {
-					'yellow-darken-80': paColorsTokens.yellow.darken80,
-					'yellow-darken-60': paColorsTokens.yellow.darken60,
-					'yellow-darken-40': paColorsTokens.yellow.darken40,
-					'yellow-darken-20': paColorsTokens.yellow.darken20,
+					'yellow-darken80': paColorsTokens.yellow.darken80,
+					'yellow-darken60': paColorsTokens.yellow.darken60,
+					'yellow-darken40': paColorsTokens.yellow.darken40,
+					'yellow-darken20': paColorsTokens.yellow.darken20,
 					'yellow-base': paColorsTokens.yellow.base,
-					'yellow-lighten-20': paColorsTokens.yellow.lighten20,
-					'yellow-lighten-40': paColorsTokens.yellow.lighten40,
-					'yellow-lighten-60': paColorsTokens.yellow.lighten60,
-					'yellow-lighten-80': paColorsTokens.yellow.lighten80,
-					'yellow-lighten-90': paColorsTokens.yellow.lighten90,
-					'yellow-lighten-97': paColorsTokens.yellow.lighten97,
+					'yellow-lighten20': paColorsTokens.yellow.lighten20,
+					'yellow-lighten40': paColorsTokens.yellow.lighten40,
+					'yellow-lighten60': paColorsTokens.yellow.lighten60,
+					'yellow-lighten80': paColorsTokens.yellow.lighten80,
+					'yellow-lighten90': paColorsTokens.yellow.lighten90,
+					'yellow-lighten97': paColorsTokens.yellow.lighten97,
 				}
 				const apColors = {
-					'yellow-darken-80': apColorsTokens.yellow.darken80,
-					'yellow-darken-60': apColorsTokens.yellow.darken60,
-					'yellow-darken-40': apColorsTokens.yellow.darken40,
-					'yellow-darken-20': apColorsTokens.yellow.darken20,
+					'yellow-darken80': apColorsTokens.yellow.darken80,
+					'yellow-darken60': apColorsTokens.yellow.darken60,
+					'yellow-darken40': apColorsTokens.yellow.darken40,
+					'yellow-darken20': apColorsTokens.yellow.darken20,
 					'yellow-base': apColorsTokens.yellow.base,
-					'yellow-lighten-20': apColorsTokens.yellow.lighten20,
-					'yellow-lighten-40': apColorsTokens.yellow.lighten40,
-					'yellow-lighten-60': apColorsTokens.yellow.lighten60,
-					'yellow-lighten-80': apColorsTokens.yellow.lighten80,
-					'yellow-lighten-90': apColorsTokens.yellow.lighten90,
-					'yellow-lighten-97': apColorsTokens.yellow.lighten97,
+					'yellow-lighten20': apColorsTokens.yellow.lighten20,
+					'yellow-lighten40': apColorsTokens.yellow.lighten40,
+					'yellow-lighten60': apColorsTokens.yellow.lighten60,
+					'yellow-lighten80': apColorsTokens.yellow.lighten80,
+					'yellow-lighten90': apColorsTokens.yellow.lighten90,
+					'yellow-lighten97': apColorsTokens.yellow.lighten97,
 				}
 				const apColors2026 = {
-					'ap-yellow-darken-4': apColorsTokens2026.apYellow.darken4,
-					'ap-yellow-darken-3': apColorsTokens2026.apYellow.darken3,
-					'ap-yellow-darken-2': apColorsTokens2026.apYellow.darken2,
-					'ap-yellow-darken-1': apColorsTokens2026.apYellow.darken1,
-					'ap-yellow': apColorsTokens2026.apYellow.base,
-					'ap-yellow-lighten-1': apColorsTokens2026.apYellow.lighten1,
-					'ap-yellow-lighten-2': apColorsTokens2026.apYellow.lighten2,
-					'ap-yellow-lighten-3': apColorsTokens2026.apYellow.lighten3,
-					'ap-yellow-lighten-4': apColorsTokens2026.apYellow.lighten4,
-					'ap-yellow-lighten-5': apColorsTokens2026.apYellow.lighten5,
+					'apYellow-darken4': apColorsTokens2026.apYellow.darken4,
+					'apYellow-darken3': apColorsTokens2026.apYellow.darken3,
+					'apYellow-darken2': apColorsTokens2026.apYellow.darken2,
+					'apYellow-darken1': apColorsTokens2026.apYellow.darken1,
+					'apYellow-base': apColorsTokens2026.apYellow.base,
+					'apYellow-lighten1': apColorsTokens2026.apYellow.lighten1,
+					'apYellow-lighten2': apColorsTokens2026.apYellow.lighten2,
+					'apYellow-lighten3': apColorsTokens2026.apYellow.lighten3,
+					'apYellow-lighten4': apColorsTokens2026.apYellow.lighten4,
+					'apYellow-lighten5': apColorsTokens2026.apYellow.lighten5,
 				}
 				return {
 					cnamColors,
@@ -1054,17 +1067,17 @@ export const PaletteForestGreen: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const apColors = {
-					'forest-green-darken-80': apColorsTokens.forestGreen.darken80,
-					'forest-green-darken-60': apColorsTokens.forestGreen.darken60,
-					'forest-green-darken-40': apColorsTokens.forestGreen.darken40,
-					'forest-green-darken-20': apColorsTokens.forestGreen.darken20,
-					'forest-green-base': apColorsTokens.forestGreen.base,
-					'forest-green-lighten-20': apColorsTokens.forestGreen.lighten20,
-					'forest-green-lighten-40': apColorsTokens.forestGreen.lighten40,
-					'forest-green-lighten-60': apColorsTokens.forestGreen.lighten60,
-					'forest-green-lighten-80': apColorsTokens.forestGreen.lighten80,
-					'forest-green-lighten-90': apColorsTokens.forestGreen.lighten90,
-					'forest-green-lighten-97': apColorsTokens.forestGreen.lighten97,
+					'forestGreen-darken80': apColorsTokens.forestGreen.darken80,
+					'forestGreen-darken60': apColorsTokens.forestGreen.darken60,
+					'forestGreen-darken40': apColorsTokens.forestGreen.darken40,
+					'forestGreen-darken20': apColorsTokens.forestGreen.darken20,
+					'forestGreen-base': apColorsTokens.forestGreen.base,
+					'forestGreen-lighten20': apColorsTokens.forestGreen.lighten20,
+					'forestGreen-lighten40': apColorsTokens.forestGreen.lighten40,
+					'forestGreen-lighten60': apColorsTokens.forestGreen.lighten60,
+					'forestGreen-lighten80': apColorsTokens.forestGreen.lighten80,
+					'forestGreen-lighten90': apColorsTokens.forestGreen.lighten90,
+					'forestGreen-lighten97': apColorsTokens.forestGreen.lighten97,
 				}
 				const cnamColors = {}
 				const paColors = {}
@@ -1104,50 +1117,50 @@ export const PaletteGreen: StoryObj = {
 				const colorTitle = 'Green'
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'green-darken-80': cnamColorsTokens.green.darken80,
-					'green-darken-60': cnamColorsTokens.green.darken60,
-					'green-darken-40': cnamColorsTokens.green.darken40,
-					'green-darken-20': cnamColorsTokens.green.darken20,
+					'green-darken80': cnamColorsTokens.green.darken80,
+					'green-darken60': cnamColorsTokens.green.darken60,
+					'green-darken40': cnamColorsTokens.green.darken40,
+					'green-darken20': cnamColorsTokens.green.darken20,
 					'green-base': cnamColorsTokens.green.base,
-					'green-lighten-20': cnamColorsTokens.green.lighten20,
-					'green-lighten-40': cnamColorsTokens.green.lighten40,
-					'green-lighten-60': cnamColorsTokens.green.lighten60,
-					'green-lighten-80': cnamColorsTokens.green.lighten80,
-					'green-lighten-90': cnamColorsTokens.green.lighten90,
-					'green-lighten-97': cnamColorsTokens.green.lighten97,
+					'green-lighten20': cnamColorsTokens.green.lighten20,
+					'green-lighten40': cnamColorsTokens.green.lighten40,
+					'green-lighten60': cnamColorsTokens.green.lighten60,
+					'green-lighten80': cnamColorsTokens.green.lighten80,
+					'green-lighten90': cnamColorsTokens.green.lighten90,
+					'green-lighten97': cnamColorsTokens.green.lighten97,
 				}
 				const paColors = {
-					'green-darken-80': paColorsTokens.green.darken80,
-					'green-darken-60': paColorsTokens.green.darken60,
-					'green-darken-40': paColorsTokens.green.darken40,
-					'green-darken-20': paColorsTokens.green.darken20,
+					'green-darken80': paColorsTokens.green.darken80,
+					'green-darken60': paColorsTokens.green.darken60,
+					'green-darken40': paColorsTokens.green.darken40,
+					'green-darken20': paColorsTokens.green.darken20,
 					'green-base': paColorsTokens.green.base,
-					'green-lighten-20': paColorsTokens.green.lighten20,
-					'green-lighten-40': paColorsTokens.green.lighten40,
-					'green-lighten-60': paColorsTokens.green.lighten60,
-					'green-lighten-80': paColorsTokens.green.lighten80,
-					'green-lighten-90': paColorsTokens.green.lighten90,
-					'green-lighten-97': paColorsTokens.green.lighten97,
+					'green-lighten20': paColorsTokens.green.lighten20,
+					'green-lighten40': paColorsTokens.green.lighten40,
+					'green-lighten60': paColorsTokens.green.lighten60,
+					'green-lighten80': paColorsTokens.green.lighten80,
+					'green-lighten90': paColorsTokens.green.lighten90,
+					'green-lighten97': paColorsTokens.green.lighten97,
 				}
 				const apColors = {
-					'green-darken-80': apColorsTokens.green.darken80,
-					'green-darken-60': apColorsTokens.green.darken60,
-					'green-darken-40': apColorsTokens.green.darken40,
-					'green-darken-20': apColorsTokens.green.darken20,
+					'green-darken80': apColorsTokens.green.darken80,
+					'green-darken60': apColorsTokens.green.darken60,
+					'green-darken40': apColorsTokens.green.darken40,
+					'green-darken20': apColorsTokens.green.darken20,
 					'green-base': apColorsTokens.green.base,
-					'green-lighten-20': apColorsTokens.green.lighten20,
-					'green-lighten-40': apColorsTokens.green.lighten40,
-					'green-lighten-60': apColorsTokens.green.lighten60,
-					'green-lighten-80': apColorsTokens.green.lighten80,
-					'green-lighten-90': apColorsTokens.green.lighten90,
-					'green-lighten-97': apColorsTokens.green.lighten97,
+					'green-lighten20': apColorsTokens.green.lighten20,
+					'green-lighten40': apColorsTokens.green.lighten40,
+					'green-lighten60': apColorsTokens.green.lighten60,
+					'green-lighten80': apColorsTokens.green.lighten80,
+					'green-lighten90': apColorsTokens.green.lighten90,
+					'green-lighten97': apColorsTokens.green.lighten97,
 				}
 				const apColors2026 = {
-					'ap-green-darken-2': apColorsTokens2026.apGreen.darken2,
-					'ap-green-darken-1': apColorsTokens2026.apGreen.darken1,
-					'ap-green': apColorsTokens2026.apGreen.base,
-					'ap-green-lighten-1': apColorsTokens2026.apGreen.lighten1,
-					'ap-green-lighten-2': apColorsTokens2026.apGreen.lighten2,
+					'apGreen-darken2': apColorsTokens2026.apGreen.darken2,
+					'apGreen-darken1': apColorsTokens2026.apGreen.darken1,
+					'apGreen-base': apColorsTokens2026.apGreen.base,
+					'apGreen-lighten1': apColorsTokens2026.apGreen.lighten1,
+					'apGreen-lighten2': apColorsTokens2026.apGreen.lighten2,
 				}
 				return {
 					cnamColors,
@@ -1183,51 +1196,51 @@ export const PaletteTurquoise: StoryObj = {
 				const colorTitle = 'Turquoise'
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'turquoise-darken-80': cnamColorsTokens.turquoise.darken80,
-					'turquoise-darken-60': cnamColorsTokens.turquoise.darken60,
-					'turquoise-darken-40': cnamColorsTokens.turquoise.darken40,
-					'turquoise-darken-20': cnamColorsTokens.turquoise.darken20,
+					'turquoise-darken80': cnamColorsTokens.turquoise.darken80,
+					'turquoise-darken60': cnamColorsTokens.turquoise.darken60,
+					'turquoise-darken40': cnamColorsTokens.turquoise.darken40,
+					'turquoise-darken20': cnamColorsTokens.turquoise.darken20,
 					'turquoise-base': cnamColorsTokens.turquoise.base,
-					'turquoise-lighten-20': cnamColorsTokens.turquoise.lighten20,
-					'turquoise-lighten-40': cnamColorsTokens.turquoise.lighten40,
-					'turquoise-lighten-60': cnamColorsTokens.turquoise.lighten60,
-					'turquoise-lighten-80': cnamColorsTokens.turquoise.lighten80,
-					'turquoise-lighten-90': cnamColorsTokens.turquoise.lighten90,
-					'turquoise-lighten-97': cnamColorsTokens.turquoise.lighten97,
+					'turquoise-lighten20': cnamColorsTokens.turquoise.lighten20,
+					'turquoise-lighten40': cnamColorsTokens.turquoise.lighten40,
+					'turquoise-lighten60': cnamColorsTokens.turquoise.lighten60,
+					'turquoise-lighten80': cnamColorsTokens.turquoise.lighten80,
+					'turquoise-lighten90': cnamColorsTokens.turquoise.lighten90,
+					'turquoise-lighten97': cnamColorsTokens.turquoise.lighten97,
 				}
 				const paColors = {
-					'turquoise-darken-80': paColorsTokens.turquoise.darken80,
-					'turquoise-darken-60': paColorsTokens.turquoise.darken60,
-					'turquoise-darken-40': paColorsTokens.turquoise.darken40,
-					'turquoise-darken-20': paColorsTokens.turquoise.darken20,
+					'turquoise-darken80': paColorsTokens.turquoise.darken80,
+					'turquoise-darken60': paColorsTokens.turquoise.darken60,
+					'turquoise-darken40': paColorsTokens.turquoise.darken40,
+					'turquoise-darken20': paColorsTokens.turquoise.darken20,
 					'turquoise-base': paColorsTokens.turquoise.base,
-					'turquoise-lighten-20': paColorsTokens.turquoise.lighten20,
-					'turquoise-lighten-40': paColorsTokens.turquoise.lighten40,
-					'turquoise-lighten-60': paColorsTokens.turquoise.lighten60,
-					'turquoise-lighten-80': paColorsTokens.turquoise.lighten80,
-					'turquoise-lighten-90': paColorsTokens.turquoise.lighten90,
-					'turquoise-lighten-97': paColorsTokens.turquoise.lighten97,
+					'turquoise-lighten20': paColorsTokens.turquoise.lighten20,
+					'turquoise-lighten40': paColorsTokens.turquoise.lighten40,
+					'turquoise-lighten60': paColorsTokens.turquoise.lighten60,
+					'turquoise-lighten80': paColorsTokens.turquoise.lighten80,
+					'turquoise-lighten90': paColorsTokens.turquoise.lighten90,
+					'turquoise-lighten97': paColorsTokens.turquoise.lighten97,
 				}
 				const apColors = {
-					'turquoise-darken-80': apColorsTokens.turquoise.darken80,
-					'turquoise-darken-60': apColorsTokens.turquoise.darken60,
-					'turquoise-darken-40': apColorsTokens.turquoise.darken40,
-					'turquoise-darken-20': apColorsTokens.turquoise.darken20,
+					'turquoise-darken80': apColorsTokens.turquoise.darken80,
+					'turquoise-darken60': apColorsTokens.turquoise.darken60,
+					'turquoise-darken40': apColorsTokens.turquoise.darken40,
+					'turquoise-darken20': apColorsTokens.turquoise.darken20,
 					'turquoise-base': apColorsTokens.turquoise.base,
-					'turquoise-lighten-20': apColorsTokens.turquoise.lighten20,
-					'turquoise-lighten-40': apColorsTokens.turquoise.lighten40,
-					'turquoise-lighten-60': apColorsTokens.turquoise.lighten60,
-					'turquoise-lighten-80': apColorsTokens.turquoise.lighten80,
-					'turquoise-lighten-90': apColorsTokens.turquoise.lighten90,
-					'turquoise-lighten-97': apColorsTokens.turquoise.lighten97,
+					'turquoise-lighten20': apColorsTokens.turquoise.lighten20,
+					'turquoise-lighten40': apColorsTokens.turquoise.lighten40,
+					'turquoise-lighten60': apColorsTokens.turquoise.lighten60,
+					'turquoise-lighten80': apColorsTokens.turquoise.lighten80,
+					'turquoise-lighten90': apColorsTokens.turquoise.lighten90,
+					'turquoise-lighten97': apColorsTokens.turquoise.lighten97,
 				}
 				const apColors2026 = {
-					'ap-turquoise-darken-3': apColorsTokens2026.apTurquoise.darken3,
-					'ap-turquoise-darken-2': apColorsTokens2026.apTurquoise.darken2,
-					'ap-turquoise-darken-1': apColorsTokens2026.apTurquoise.darken1,
-					'ap-Turquoise': apColorsTokens2026.apTurquoise.base,
-					'ap-turquoise-lighten-1': apColorsTokens2026.apTurquoise.lighten1,
-					'ap-turquoise-lighten-2': apColorsTokens2026.apTurquoise.lighten2,
+					'apTurquoise-darken3': apColorsTokens2026.apTurquoise.darken3,
+					'apTurquoise-darken2': apColorsTokens2026.apTurquoise.darken2,
+					'apTurquoise-darken1': apColorsTokens2026.apTurquoise.darken1,
+					'apTurquoise-base': apColorsTokens2026.apTurquoise.base,
+					'apTurquoise-lighten1': apColorsTokens2026.apTurquoise.lighten1,
+					'apTurquoise-lighten2': apColorsTokens2026.apTurquoise.lighten2,
 				}
 				return {
 					cnamColors,
@@ -1263,52 +1276,52 @@ export const PaletteBlue: StoryObj = {
 				const colorTitle = 'Blue'
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'blue-darken-80': cnamColorsTokens.blue.darken80,
-					'blue-darken-60': cnamColorsTokens.blue.darken60,
-					'blue-darken-40': cnamColorsTokens.blue.darken40,
-					'blue-darken-20': cnamColorsTokens.blue.darken20,
+					'blue-darken80': cnamColorsTokens.blue.darken80,
+					'blue-darken60': cnamColorsTokens.blue.darken60,
+					'blue-darken40': cnamColorsTokens.blue.darken40,
+					'blue-darken20': cnamColorsTokens.blue.darken20,
 					'blue-base': cnamColorsTokens.blue.base,
-					'blue-lighten-20': cnamColorsTokens.blue.lighten20,
-					'blue-lighten-40': cnamColorsTokens.blue.lighten40,
-					'blue-lighten-60': cnamColorsTokens.blue.lighten60,
-					'blue-lighten-80': cnamColorsTokens.blue.lighten80,
-					'blue-lighten-90': cnamColorsTokens.blue.lighten90,
-					'blue-lighten-97': cnamColorsTokens.blue.lighten97,
+					'blue-lighten20': cnamColorsTokens.blue.lighten20,
+					'blue-lighten40': cnamColorsTokens.blue.lighten40,
+					'blue-lighten60': cnamColorsTokens.blue.lighten60,
+					'blue-lighten80': cnamColorsTokens.blue.lighten80,
+					'blue-lighten90': cnamColorsTokens.blue.lighten90,
+					'blue-lighten97': cnamColorsTokens.blue.lighten97,
 				}
 				const paColors = {
-					'blue-darken-80': paColorsTokens.blue.darken80,
-					'blue-darken-60': paColorsTokens.blue.darken60,
-					'blue-darken-40': paColorsTokens.blue.darken40,
-					'blue-darken-20': paColorsTokens.blue.darken20,
+					'blue-darken80': paColorsTokens.blue.darken80,
+					'blue-darken60': paColorsTokens.blue.darken60,
+					'blue-darken40': paColorsTokens.blue.darken40,
+					'blue-darken20': paColorsTokens.blue.darken20,
 					'blue-base': paColorsTokens.blue.base,
-					'blue-lighten-20': paColorsTokens.blue.lighten20,
-					'blue-lighten-40': paColorsTokens.blue.lighten40,
-					'blue-lighten-60': paColorsTokens.blue.lighten60,
-					'blue-lighten-80': paColorsTokens.blue.lighten80,
-					'blue-lighten-90': paColorsTokens.blue.lighten90,
-					'blue-lighten-97': paColorsTokens.blue.lighten97,
+					'blue-lighten20': paColorsTokens.blue.lighten20,
+					'blue-lighten40': paColorsTokens.blue.lighten40,
+					'blue-lighten60': paColorsTokens.blue.lighten60,
+					'blue-lighten80': paColorsTokens.blue.lighten80,
+					'blue-lighten90': paColorsTokens.blue.lighten90,
+					'blue-lighten97': paColorsTokens.blue.lighten97,
 				}
 				const apColors = {
-					'blue-darken-80': apColorsTokens.blue.darken80,
-					'blue-darken-60': apColorsTokens.blue.darken60,
-					'blue-darken-40': apColorsTokens.blue.darken40,
-					'blue-darken-20': apColorsTokens.blue.darken20,
+					'blue-darken80': apColorsTokens.blue.darken80,
+					'blue-darken60': apColorsTokens.blue.darken60,
+					'blue-darken40': apColorsTokens.blue.darken40,
+					'blue-darken20': apColorsTokens.blue.darken20,
 					'blue-base': apColorsTokens.blue.base,
-					'blue-lighten-20': apColorsTokens.blue.lighten20,
-					'blue-lighten-40': apColorsTokens.blue.lighten40,
-					'blue-lighten-60': apColorsTokens.blue.lighten60,
-					'blue-lighten-80': apColorsTokens.blue.lighten80,
-					'blue-lighten-90': apColorsTokens.blue.lighten90,
-					'blue-lighten-97': apColorsTokens.blue.lighten97,
+					'blue-lighten20': apColorsTokens.blue.lighten20,
+					'blue-lighten40': apColorsTokens.blue.lighten40,
+					'blue-lighten60': apColorsTokens.blue.lighten60,
+					'blue-lighten80': apColorsTokens.blue.lighten80,
+					'blue-lighten90': apColorsTokens.blue.lighten90,
+					'blue-lighten97': apColorsTokens.blue.lighten97,
 				}
 				const apColors2026 = {
-					'ap-blue-darken-2': apColorsTokens2026.apBlue.darken2,
-					'ap-blue-darken-1': apColorsTokens2026.apBlue.darken1,
-					'ap-blue': apColorsTokens2026.apBlue.base,
-					'ap-blue-lighten-1': apColorsTokens2026.apBlue.lighten1,
-					'ap-blue-lighten-2': apColorsTokens2026.apBlue.lighten2,
-					'ap-blue-lighten-3': apColorsTokens2026.apBlue.lighten3,
-					'ap-blue-lighten-4': apColorsTokens2026.apBlue.lighten4,
+					'apBlue-darken2': apColorsTokens2026.apBlue.darken2,
+					'apBlue-darken1': apColorsTokens2026.apBlue.darken1,
+					'apBlue-base': apColorsTokens2026.apBlue.base,
+					'apBlue-lighten1': apColorsTokens2026.apBlue.lighten1,
+					'apBlue-lighten2': apColorsTokens2026.apBlue.lighten2,
+					'apBlue-lighten3': apColorsTokens2026.apBlue.lighten3,
+					'apBlue-lighten4': apColorsTokens2026.apBlue.lighten4,
 				}
 				return {
 					cnamColors,
@@ -1345,43 +1358,43 @@ export const PaletteCyan: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'cyan-darken-80': cnamColorsTokens.cyan.darken80,
-					'cyan-darken-60': cnamColorsTokens.cyan.darken60,
-					'cyan-darken-40': cnamColorsTokens.cyan.darken40,
-					'cyan-darken-20': cnamColorsTokens.cyan.darken20,
+					'cyan-darken80': cnamColorsTokens.cyan.darken80,
+					'cyan-darken60': cnamColorsTokens.cyan.darken60,
+					'cyan-darken40': cnamColorsTokens.cyan.darken40,
+					'cyan-darken20': cnamColorsTokens.cyan.darken20,
 					'cyan-base': cnamColorsTokens.cyan.base,
-					'cyan-lighten-20': cnamColorsTokens.cyan.lighten20,
-					'cyan-lighten-40': cnamColorsTokens.cyan.lighten40,
-					'cyan-lighten-60': cnamColorsTokens.cyan.lighten60,
-					'cyan-lighten-80': cnamColorsTokens.cyan.lighten80,
-					'cyan-lighten-90': cnamColorsTokens.cyan.lighten90,
-					'cyan-lighten-97': cnamColorsTokens.cyan.lighten97,
+					'cyan-lighten20': cnamColorsTokens.cyan.lighten20,
+					'cyan-lighten40': cnamColorsTokens.cyan.lighten40,
+					'cyan-lighten60': cnamColorsTokens.cyan.lighten60,
+					'cyan-lighten80': cnamColorsTokens.cyan.lighten80,
+					'cyan-lighten90': cnamColorsTokens.cyan.lighten90,
+					'cyan-lighten97': cnamColorsTokens.cyan.lighten97,
 				}
 				const paColors = {
-					'cyan-darken-80': paColorsTokens.cyan.darken80,
-					'cyan-darken-60': paColorsTokens.cyan.darken60,
-					'cyan-darken-40': paColorsTokens.cyan.darken40,
-					'cyan-darken-20': paColorsTokens.cyan.darken20,
+					'cyan-darken80': paColorsTokens.cyan.darken80,
+					'cyan-darken60': paColorsTokens.cyan.darken60,
+					'cyan-darken40': paColorsTokens.cyan.darken40,
+					'cyan-darken20': paColorsTokens.cyan.darken20,
 					'cyan-base': paColorsTokens.cyan.base,
-					'cyan-lighten-20': paColorsTokens.cyan.lighten20,
-					'cyan-lighten-40': paColorsTokens.cyan.lighten40,
-					'cyan-lighten-60': paColorsTokens.cyan.lighten60,
-					'cyan-lighten-80': paColorsTokens.cyan.lighten80,
-					'cyan-lighten-90': paColorsTokens.cyan.lighten90,
-					'cyan-lighten-97': paColorsTokens.cyan.lighten97,
+					'cyan-lighten20': paColorsTokens.cyan.lighten20,
+					'cyan-lighten40': paColorsTokens.cyan.lighten40,
+					'cyan-lighten60': paColorsTokens.cyan.lighten60,
+					'cyan-lighten80': paColorsTokens.cyan.lighten80,
+					'cyan-lighten90': paColorsTokens.cyan.lighten90,
+					'cyan-lighten97': paColorsTokens.cyan.lighten97,
 				}
 				const apColors = {
-					'cyan-darken-80': apColorsTokens.cyan.darken80,
-					'cyan-darken-60': apColorsTokens.cyan.darken60,
-					'cyan-darken-40': apColorsTokens.cyan.darken40,
-					'cyan-darken-20': apColorsTokens.cyan.darken20,
+					'cyan-darken80': apColorsTokens.cyan.darken80,
+					'cyan-darken60': apColorsTokens.cyan.darken60,
+					'cyan-darken40': apColorsTokens.cyan.darken40,
+					'cyan-darken20': apColorsTokens.cyan.darken20,
 					'cyan-base': apColorsTokens.cyan.base,
-					'cyan-lighten-20': apColorsTokens.cyan.lighten20,
-					'cyan-lighten-40': apColorsTokens.cyan.lighten40,
-					'cyan-lighten-60': apColorsTokens.cyan.lighten60,
-					'cyan-lighten-80': apColorsTokens.cyan.lighten80,
-					'cyan-lighten-90': apColorsTokens.cyan.lighten90,
-					'cyan-lighten-97': apColorsTokens.cyan.lighten97,
+					'cyan-lighten20': apColorsTokens.cyan.lighten20,
+					'cyan-lighten40': apColorsTokens.cyan.lighten40,
+					'cyan-lighten60': apColorsTokens.cyan.lighten60,
+					'cyan-lighten80': apColorsTokens.cyan.lighten80,
+					'cyan-lighten90': apColorsTokens.cyan.lighten90,
+					'cyan-lighten97': apColorsTokens.cyan.lighten97,
 				}
 				const apColors2026 = {}
 				return {
@@ -1420,30 +1433,30 @@ export const PaletteFrostedBlue: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'frosted-blue-darken-80': cnamColorsTokens.frostedBlue.darken80,
-					'frosted-blue-darken-60': cnamColorsTokens.frostedBlue.darken60,
-					'frosted-blue-darken-40': cnamColorsTokens.frostedBlue.darken40,
-					'frosted-blue-darken-20': cnamColorsTokens.frostedBlue.darken20,
-					'frosted-blue-base': cnamColorsTokens.frostedBlue.base,
-					'frosted-blue-lighten-20': cnamColorsTokens.frostedBlue.lighten20,
-					'frosted-blue-lighten-40': cnamColorsTokens.frostedBlue.lighten40,
-					'frosted-blue-lighten-60': cnamColorsTokens.frostedBlue.lighten60,
-					'frosted-blue-lighten-80': cnamColorsTokens.frostedBlue.lighten80,
-					'frosted-blue-lighten-90': cnamColorsTokens.frostedBlue.lighten90,
-					'frosted-blue-lighten-97': cnamColorsTokens.frostedBlue.lighten97,
+					'frostedBlue-darken80': cnamColorsTokens.frostedBlue.darken80,
+					'frostedBlue-darken60': cnamColorsTokens.frostedBlue.darken60,
+					'frostedBlue-darken40': cnamColorsTokens.frostedBlue.darken40,
+					'frostedBlue-darken20': cnamColorsTokens.frostedBlue.darken20,
+					'frostedBlue-base': cnamColorsTokens.frostedBlue.base,
+					'frostedBlue-lighten20': cnamColorsTokens.frostedBlue.lighten20,
+					'frostedBlue-lighten40': cnamColorsTokens.frostedBlue.lighten40,
+					'frostedBlue-lighten60': cnamColorsTokens.frostedBlue.lighten60,
+					'frostedBlue-lighten80': cnamColorsTokens.frostedBlue.lighten80,
+					'frostedBlue-lighten90': cnamColorsTokens.frostedBlue.lighten90,
+					'frostedBlue-lighten97': cnamColorsTokens.frostedBlue.lighten97,
 				}
 				const paColors = {
-					'frosted-blue-darken-80': paColorsTokens.frostedBlue.darken80,
-					'frosted-blue-darken-60': paColorsTokens.frostedBlue.darken60,
-					'frosted-blue-darken-40': paColorsTokens.frostedBlue.darken40,
-					'frosted-blue-darken-20': paColorsTokens.frostedBlue.darken20,
-					'frosted-blue-base': paColorsTokens.frostedBlue.base,
-					'frosted-blue-lighten-20': paColorsTokens.frostedBlue.lighten20,
-					'frosted-blue-lighten-40': paColorsTokens.frostedBlue.lighten40,
-					'frosted-blue-lighten-60': paColorsTokens.frostedBlue.lighten60,
-					'frosted-blue-lighten-80': paColorsTokens.frostedBlue.lighten80,
-					'frosted-blue-lighten-90': paColorsTokens.frostedBlue.lighten90,
-					'frosted-blue-lighten-97': paColorsTokens.frostedBlue.lighten97,
+					'frostedBlue-darken80': paColorsTokens.frostedBlue.darken80,
+					'frostedBlue-darken60': paColorsTokens.frostedBlue.darken60,
+					'frostedBlue-darken40': paColorsTokens.frostedBlue.darken40,
+					'frostedBlue-darken20': paColorsTokens.frostedBlue.darken20,
+					'frostedBlue-base': paColorsTokens.frostedBlue.base,
+					'frostedBlue-lighten20': paColorsTokens.frostedBlue.lighten20,
+					'frostedBlue-lighten40': paColorsTokens.frostedBlue.lighten40,
+					'frostedBlue-lighten60': paColorsTokens.frostedBlue.lighten60,
+					'frostedBlue-lighten80': paColorsTokens.frostedBlue.lighten80,
+					'frostedBlue-lighten90': paColorsTokens.frostedBlue.lighten90,
+					'frostedBlue-lighten97': paColorsTokens.frostedBlue.lighten97,
 				}
 				const apColors = {}
 				const apColors2026 = {}
@@ -1483,47 +1496,47 @@ export const PaletteParma: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'parma-darken-80': cnamColorsTokens.parma.darken80,
-					'parma-darken-60': cnamColorsTokens.parma.darken60,
-					'parma-darken-40': cnamColorsTokens.parma.darken40,
-					'parma-darken-20': cnamColorsTokens.parma.darken20,
+					'parma-darken80': cnamColorsTokens.parma.darken80,
+					'parma-darken60': cnamColorsTokens.parma.darken60,
+					'parma-darken40': cnamColorsTokens.parma.darken40,
+					'parma-darken20': cnamColorsTokens.parma.darken20,
 					'parma-base': cnamColorsTokens.parma.base,
-					'parma-lighten-20': cnamColorsTokens.parma.lighten20,
-					'parma-lighten-40': cnamColorsTokens.parma.lighten40,
-					'parma-lighten-60': cnamColorsTokens.parma.lighten60,
-					'parma-lighten-80': cnamColorsTokens.parma.lighten80,
-					'parma-lighten-90': cnamColorsTokens.parma.lighten90,
-					'parma-lighten-97': cnamColorsTokens.parma.lighten97,
+					'parma-lighten20': cnamColorsTokens.parma.lighten20,
+					'parma-lighten40': cnamColorsTokens.parma.lighten40,
+					'parma-lighten60': cnamColorsTokens.parma.lighten60,
+					'parma-lighten80': cnamColorsTokens.parma.lighten80,
+					'parma-lighten90': cnamColorsTokens.parma.lighten90,
+					'parma-lighten97': cnamColorsTokens.parma.lighten97,
 				}
 				const paColors = {
-					'parma-darken-80': paColorsTokens.parma.darken80,
-					'parma-darken-60': paColorsTokens.parma.darken60,
-					'parma-darken-40': paColorsTokens.parma.darken40,
-					'parma-darken-20': paColorsTokens.parma.darken20,
+					'parma-darken80': paColorsTokens.parma.darken80,
+					'parma-darken60': paColorsTokens.parma.darken60,
+					'parma-darken40': paColorsTokens.parma.darken40,
+					'parma-darken20': paColorsTokens.parma.darken20,
 					'parma-base': paColorsTokens.parma.base,
-					'parma-lighten-20': paColorsTokens.parma.lighten20,
-					'parma-lighten-40': paColorsTokens.parma.lighten40,
-					'parma-lighten-60': paColorsTokens.parma.lighten60,
-					'parma-lighten-80': paColorsTokens.parma.lighten80,
-					'parma-lighten-90': paColorsTokens.parma.lighten90,
-					'parma-lighten-97': paColorsTokens.parma.lighten97,
+					'parma-lighten20': paColorsTokens.parma.lighten20,
+					'parma-lighten40': paColorsTokens.parma.lighten40,
+					'parma-lighten60': paColorsTokens.parma.lighten60,
+					'parma-lighten80': paColorsTokens.parma.lighten80,
+					'parma-lighten90': paColorsTokens.parma.lighten90,
+					'parma-lighten97': paColorsTokens.parma.lighten97,
 				}
 				const apColors = {
-					'parma-darken-80': apColorsTokens.parma.darken80,
-					'parma-darken-60': apColorsTokens.parma.darken60,
-					'parma-darken-40': apColorsTokens.parma.darken40,
-					'parma-darken-20': apColorsTokens.parma.darken20,
+					'parma-darken80': apColorsTokens.parma.darken80,
+					'parma-darken60': apColorsTokens.parma.darken60,
+					'parma-darken40': apColorsTokens.parma.darken40,
+					'parma-darken20': apColorsTokens.parma.darken20,
 					'parma-base': apColorsTokens.parma.base,
-					'parma-lighten-20': apColorsTokens.parma.lighten20,
-					'parma-lighten-40': apColorsTokens.parma.lighten40,
-					'parma-lighten-60': apColorsTokens.parma.lighten60,
-					'parma-lighten-80': apColorsTokens.parma.lighten80,
-					'parma-lighten-90': apColorsTokens.parma.lighten90,
-					'parma-lighten-97': apColorsTokens.parma.lighten97,
+					'parma-lighten20': apColorsTokens.parma.lighten20,
+					'parma-lighten40': apColorsTokens.parma.lighten40,
+					'parma-lighten60': apColorsTokens.parma.lighten60,
+					'parma-lighten80': apColorsTokens.parma.lighten80,
+					'parma-lighten90': apColorsTokens.parma.lighten90,
+					'parma-lighten97': apColorsTokens.parma.lighten97,
 				}
 				const apColors2026 = {
-					'ap-parme-darken-1': apColorsTokens2026.apParme.darken1,
-					'ap-parme': apColorsTokens2026.apParme.base,
+					'apParme-darken1': apColorsTokens2026.apParme.darken1,
+					'apParme-base': apColorsTokens2026.apParme.base,
 				}
 				return {
 					cnamColors,
@@ -1561,43 +1574,43 @@ export const PaletteMauve: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'mauve-darken-80': cnamColorsTokens.mauve.darken80,
-					'mauve-darken-60': cnamColorsTokens.mauve.darken60,
-					'mauve-darken-40': cnamColorsTokens.mauve.darken40,
-					'mauve-darken-20': cnamColorsTokens.mauve.darken20,
+					'mauve-darken80': cnamColorsTokens.mauve.darken80,
+					'mauve-darken60': cnamColorsTokens.mauve.darken60,
+					'mauve-darken40': cnamColorsTokens.mauve.darken40,
+					'mauve-darken20': cnamColorsTokens.mauve.darken20,
 					'mauve-base': cnamColorsTokens.mauve.base,
-					'mauve-lighten-20': cnamColorsTokens.mauve.lighten20,
-					'mauve-lighten-40': cnamColorsTokens.mauve.lighten40,
-					'mauve-lighten-60': cnamColorsTokens.mauve.lighten60,
-					'mauve-lighten-80': cnamColorsTokens.mauve.lighten80,
-					'mauve-lighten-90': cnamColorsTokens.mauve.lighten90,
-					'mauve-lighten-97': cnamColorsTokens.mauve.lighten97,
+					'mauve-lighten20': cnamColorsTokens.mauve.lighten20,
+					'mauve-lighten40': cnamColorsTokens.mauve.lighten40,
+					'mauve-lighten60': cnamColorsTokens.mauve.lighten60,
+					'mauve-lighten80': cnamColorsTokens.mauve.lighten80,
+					'mauve-lighten90': cnamColorsTokens.mauve.lighten90,
+					'mauve-lighten97': cnamColorsTokens.mauve.lighten97,
 				}
 				const paColors = {
-					'mauve-darken-80': paColorsTokens.mauve.darken80,
-					'mauve-darken-60': paColorsTokens.mauve.darken60,
-					'mauve-darken-40': paColorsTokens.mauve.darken40,
-					'mauve-darken-20': paColorsTokens.mauve.darken20,
+					'mauve-darken80': paColorsTokens.mauve.darken80,
+					'mauve-darken60': paColorsTokens.mauve.darken60,
+					'mauve-darken40': paColorsTokens.mauve.darken40,
+					'mauve-darken20': paColorsTokens.mauve.darken20,
 					'mauve-base': paColorsTokens.mauve.base,
-					'mauve-lighten-20': paColorsTokens.mauve.lighten20,
-					'mauve-lighten-40': paColorsTokens.mauve.lighten40,
-					'mauve-lighten-60': paColorsTokens.mauve.lighten60,
-					'mauve-lighten-80': paColorsTokens.mauve.lighten80,
-					'mauve-lighten-90': paColorsTokens.mauve.lighten90,
-					'mauve-lighten-97': paColorsTokens.mauve.lighten97,
+					'mauve-lighten20': paColorsTokens.mauve.lighten20,
+					'mauve-lighten40': paColorsTokens.mauve.lighten40,
+					'mauve-lighten60': paColorsTokens.mauve.lighten60,
+					'mauve-lighten80': paColorsTokens.mauve.lighten80,
+					'mauve-lighten90': paColorsTokens.mauve.lighten90,
+					'mauve-lighten97': paColorsTokens.mauve.lighten97,
 				}
 				const apColors = {
-					'mauve-darken-80': apColorsTokens.mauve.darken80,
-					'mauve-darken-60': apColorsTokens.mauve.darken60,
-					'mauve-darken-40': apColorsTokens.mauve.darken40,
-					'mauve-darken-20': apColorsTokens.mauve.darken20,
+					'mauve-darken80': apColorsTokens.mauve.darken80,
+					'mauve-darken60': apColorsTokens.mauve.darken60,
+					'mauve-darken40': apColorsTokens.mauve.darken40,
+					'mauve-darken20': apColorsTokens.mauve.darken20,
 					'mauve-base': apColorsTokens.mauve.base,
-					'mauve-lighten-20': apColorsTokens.mauve.lighten20,
-					'mauve-lighten-40': apColorsTokens.mauve.lighten40,
-					'mauve-lighten-60': apColorsTokens.mauve.lighten60,
-					'mauve-lighten-80': apColorsTokens.mauve.lighten80,
-					'mauve-lighten-90': apColorsTokens.mauve.lighten90,
-					'mauve-lighten-97': apColorsTokens.mauve.lighten97,
+					'mauve-lighten20': apColorsTokens.mauve.lighten20,
+					'mauve-lighten40': apColorsTokens.mauve.lighten40,
+					'mauve-lighten60': apColorsTokens.mauve.lighten60,
+					'mauve-lighten80': apColorsTokens.mauve.lighten80,
+					'mauve-lighten90': apColorsTokens.mauve.lighten90,
+					'mauve-lighten97': apColorsTokens.mauve.lighten97,
 				}
 				const apColors2026 = {}
 				return {
@@ -1636,46 +1649,46 @@ export const PalettePink: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'pink-darken-80': cnamColorsTokens.pink.darken80,
-					'pink-darken-60': cnamColorsTokens.pink.darken60,
-					'pink-darken-40': cnamColorsTokens.pink.darken40,
-					'pink-darken-20': cnamColorsTokens.pink.darken20,
+					'pink-darken80': cnamColorsTokens.pink.darken80,
+					'pink-darken60': cnamColorsTokens.pink.darken60,
+					'pink-darken40': cnamColorsTokens.pink.darken40,
+					'pink-darken20': cnamColorsTokens.pink.darken20,
 					'pink-base': cnamColorsTokens.pink.base,
-					'pink-lighten-20': cnamColorsTokens.pink.lighten20,
-					'pink-lighten-40': cnamColorsTokens.pink.lighten40,
-					'pink-lighten-60': cnamColorsTokens.pink.lighten60,
-					'pink-lighten-80': cnamColorsTokens.pink.lighten80,
-					'pink-lighten-90': cnamColorsTokens.pink.lighten90,
-					'pink-lighten-97': cnamColorsTokens.pink.lighten97,
+					'pink-lighten20': cnamColorsTokens.pink.lighten20,
+					'pink-lighten40': cnamColorsTokens.pink.lighten40,
+					'pink-lighten60': cnamColorsTokens.pink.lighten60,
+					'pink-lighten80': cnamColorsTokens.pink.lighten80,
+					'pink-lighten90': cnamColorsTokens.pink.lighten90,
+					'pink-lighten97': cnamColorsTokens.pink.lighten97,
 				}
 				const paColors = {
-					'pink-darken-80': paColorsTokens.pink.darken80,
-					'pink-darken-60': paColorsTokens.pink.darken60,
-					'pink-darken-40': paColorsTokens.pink.darken40,
-					'pink-darken-20': paColorsTokens.pink.darken20,
+					'pink-darken80': paColorsTokens.pink.darken80,
+					'pink-darken60': paColorsTokens.pink.darken60,
+					'pink-darken40': paColorsTokens.pink.darken40,
+					'pink-darken20': paColorsTokens.pink.darken20,
 					'pink-base': paColorsTokens.pink.base,
-					'pink-lighten-20': paColorsTokens.pink.lighten20,
-					'pink-lighten-40': paColorsTokens.pink.lighten40,
-					'pink-lighten-60': paColorsTokens.pink.lighten60,
-					'pink-lighten-80': paColorsTokens.pink.lighten80,
-					'pink-lighten-90': paColorsTokens.pink.lighten90,
-					'pink-lighten-97': paColorsTokens.pink.lighten97,
+					'pink-lighten20': paColorsTokens.pink.lighten20,
+					'pink-lighten40': paColorsTokens.pink.lighten40,
+					'pink-lighten60': paColorsTokens.pink.lighten60,
+					'pink-lighten80': paColorsTokens.pink.lighten80,
+					'pink-lighten90': paColorsTokens.pink.lighten90,
+					'pink-lighten97': paColorsTokens.pink.lighten97,
 				}
 				const apColors = {
-					'pink-darken-80': apColorsTokens.pink.darken80,
-					'pink-darken-60': apColorsTokens.pink.darken60,
-					'pink-darken-40': apColorsTokens.pink.darken40,
-					'pink-darken-20': apColorsTokens.pink.darken20,
+					'pink-darken80': apColorsTokens.pink.darken80,
+					'pink-darken60': apColorsTokens.pink.darken60,
+					'pink-darken40': apColorsTokens.pink.darken40,
+					'pink-darken20': apColorsTokens.pink.darken20,
 					'pink-base': apColorsTokens.pink.base,
-					'pink-lighten-20': apColorsTokens.pink.lighten20,
-					'pink-lighten-40': apColorsTokens.pink.lighten40,
-					'pink-lighten-60': apColorsTokens.pink.lighten60,
-					'pink-lighten-80': apColorsTokens.pink.lighten80,
-					'pink-lighten-90': apColorsTokens.pink.lighten90,
-					'pink-lighten-97': apColorsTokens.pink.lighten97,
+					'pink-lighten20': apColorsTokens.pink.lighten20,
+					'pink-lighten40': apColorsTokens.pink.lighten40,
+					'pink-lighten60': apColorsTokens.pink.lighten60,
+					'pink-lighten80': apColorsTokens.pink.lighten80,
+					'pink-lighten90': apColorsTokens.pink.lighten90,
+					'pink-lighten97': apColorsTokens.pink.lighten97,
 				}
 				const apColors2026 = {
-					'ap-pink': apColorsTokens2026.apPink.base,
+					'apPink-base': apColorsTokens2026.apPink.base,
 				}
 				return {
 					cnamColors,
@@ -1713,30 +1726,30 @@ export const PaletteBrick: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'brick-darken-80': cnamColorsTokens.brick.darken80,
-					'brick-darken-60': cnamColorsTokens.brick.darken60,
-					'brick-darken-40': cnamColorsTokens.brick.darken40,
-					'brick-darken-20': cnamColorsTokens.brick.darken20,
+					'brick-darken80': cnamColorsTokens.brick.darken80,
+					'brick-darken60': cnamColorsTokens.brick.darken60,
+					'brick-darken40': cnamColorsTokens.brick.darken40,
+					'brick-darken20': cnamColorsTokens.brick.darken20,
 					'brick-base': cnamColorsTokens.brick.base,
-					'brick-lighten-20': cnamColorsTokens.brick.lighten20,
-					'brick-lighten-40': cnamColorsTokens.brick.lighten40,
-					'brick-lighten-60': cnamColorsTokens.brick.lighten60,
-					'brick-lighten-80': cnamColorsTokens.brick.lighten80,
-					'brick-lighten-90': cnamColorsTokens.brick.lighten90,
-					'brick-lighten-97': cnamColorsTokens.brick.lighten97,
+					'brick-lighten20': cnamColorsTokens.brick.lighten20,
+					'brick-lighten40': cnamColorsTokens.brick.lighten40,
+					'brick-lighten60': cnamColorsTokens.brick.lighten60,
+					'brick-lighten80': cnamColorsTokens.brick.lighten80,
+					'brick-lighten90': cnamColorsTokens.brick.lighten90,
+					'brick-lighten97': cnamColorsTokens.brick.lighten97,
 				}
 				const paColors = {
-					'brick-darken-80': paColorsTokens.brick.darken80,
-					'brick-darken-60': paColorsTokens.brick.darken60,
-					'brick-darken-40': paColorsTokens.brick.darken40,
-					'brick-darken-20': paColorsTokens.brick.darken20,
+					'brick-darken80': paColorsTokens.brick.darken80,
+					'brick-darken60': paColorsTokens.brick.darken60,
+					'brick-darken40': paColorsTokens.brick.darken40,
+					'brick-darken20': paColorsTokens.brick.darken20,
 					'brick-base': paColorsTokens.brick.base,
-					'brick-lighten-20': paColorsTokens.brick.lighten20,
-					'brick-lighten-40': paColorsTokens.brick.lighten40,
-					'brick-lighten-60': paColorsTokens.brick.lighten60,
-					'brick-lighten-80': paColorsTokens.brick.lighten80,
-					'brick-lighten-90': paColorsTokens.brick.lighten90,
-					'brick-lighten-97': paColorsTokens.brick.lighten97,
+					'brick-lighten20': paColorsTokens.brick.lighten20,
+					'brick-lighten40': paColorsTokens.brick.lighten40,
+					'brick-lighten60': paColorsTokens.brick.lighten60,
+					'brick-lighten80': paColorsTokens.brick.lighten80,
+					'brick-lighten90': paColorsTokens.brick.lighten90,
+					'brick-lighten97': paColorsTokens.brick.lighten97,
 				}
 				const apColors = {}
 				const apColors2026 = {}
@@ -1776,53 +1789,53 @@ export const PaletteGrey: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'grey-darken-80': cnamColorsTokens.grey.darken80,
-					'grey-darken-60': cnamColorsTokens.grey.darken60,
-					'grey-darken-40': cnamColorsTokens.grey.darken40,
-					'grey-darken-20': cnamColorsTokens.grey.darken20,
+					'grey-darken80': cnamColorsTokens.grey.darken80,
+					'grey-darken60': cnamColorsTokens.grey.darken60,
+					'grey-darken40': cnamColorsTokens.grey.darken40,
+					'grey-darken20': cnamColorsTokens.grey.darken20,
 					'grey-base': cnamColorsTokens.grey.base,
-					'grey-lighten-20': cnamColorsTokens.grey.lighten20,
-					'grey-lighten-40': cnamColorsTokens.grey.lighten40,
-					'grey-lighten-60': cnamColorsTokens.grey.lighten60,
-					'grey-lighten-80': cnamColorsTokens.grey.lighten80,
-					'grey-lighten-90': cnamColorsTokens.grey.lighten90,
-					'grey-lighten-97': cnamColorsTokens.grey.lighten97,
+					'grey-lighten20': cnamColorsTokens.grey.lighten20,
+					'grey-lighten40': cnamColorsTokens.grey.lighten40,
+					'grey-lighten60': cnamColorsTokens.grey.lighten60,
+					'grey-lighten80': cnamColorsTokens.grey.lighten80,
+					'grey-lighten90': cnamColorsTokens.grey.lighten90,
+					'grey-lighten97': cnamColorsTokens.grey.lighten97,
 				}
 				const paColors = {
-					'grey-darken-80': paColorsTokens.grey.darken80,
-					'grey-darken-60': paColorsTokens.grey.darken60,
-					'grey-darken-40': paColorsTokens.grey.darken40,
-					'grey-darken-20': paColorsTokens.grey.darken20,
+					'grey-darken80': paColorsTokens.grey.darken80,
+					'grey-darken60': paColorsTokens.grey.darken60,
+					'grey-darken40': paColorsTokens.grey.darken40,
+					'grey-darken20': paColorsTokens.grey.darken20,
 					'grey-base': paColorsTokens.grey.base,
-					'grey-lighten-20': paColorsTokens.grey.lighten20,
-					'grey-lighten-40': paColorsTokens.grey.lighten40,
-					'grey-lighten-60': paColorsTokens.grey.lighten60,
-					'grey-lighten-80': paColorsTokens.grey.lighten80,
-					'grey-lighten-90': paColorsTokens.grey.lighten90,
-					'grey-lighten-97': paColorsTokens.grey.lighten97,
+					'grey-lighten20': paColorsTokens.grey.lighten20,
+					'grey-lighten40': paColorsTokens.grey.lighten40,
+					'grey-lighten60': paColorsTokens.grey.lighten60,
+					'grey-lighten80': paColorsTokens.grey.lighten80,
+					'grey-lighten90': paColorsTokens.grey.lighten90,
+					'grey-lighten97': paColorsTokens.grey.lighten97,
 				}
 				const apColors = {
-					'grey-darken-80': apColorsTokens.grey.darken80,
-					'grey-darken-60': apColorsTokens.grey.darken60,
-					'grey-darken-40': apColorsTokens.grey.darken40,
-					'grey-darken-20': apColorsTokens.grey.darken20,
+					'grey-darken80': apColorsTokens.grey.darken80,
+					'grey-darken60': apColorsTokens.grey.darken60,
+					'grey-darken40': apColorsTokens.grey.darken40,
+					'grey-darken20': apColorsTokens.grey.darken20,
 					'grey-base': apColorsTokens.grey.base,
-					'grey-lighten-20': apColorsTokens.grey.lighten20,
-					'grey-lighten-40': apColorsTokens.grey.lighten40,
-					'grey-lighten-60': apColorsTokens.grey.lighten60,
-					'grey-lighten-80': apColorsTokens.grey.lighten80,
-					'grey-lighten-90': apColorsTokens.grey.lighten90,
-					'grey-lighten-97': apColorsTokens.grey.lighten97,
+					'grey-lighten20': apColorsTokens.grey.lighten20,
+					'grey-lighten40': apColorsTokens.grey.lighten40,
+					'grey-lighten60': apColorsTokens.grey.lighten60,
+					'grey-lighten80': apColorsTokens.grey.lighten80,
+					'grey-lighten90': apColorsTokens.grey.lighten90,
+					'grey-lighten97': apColorsTokens.grey.lighten97,
 				}
 				const apColors2026 = {
-					'ap-grey-darken-1': apColorsTokens2026.apGrey.darken1,
-					'ap-grey': apColorsTokens2026.apGrey.base,
-					'ap-grey-lighten-1': apColorsTokens2026.apGrey.lighten1,
-					'ap-grey-lighten-2': apColorsTokens2026.apGrey.lighten2,
-					'ap-grey-lighten-3': apColorsTokens2026.apGrey.lighten3,
-					'ap-grey-lighten-4': apColorsTokens2026.apGrey.lighten4,
-					'ap-grey-lighten-5': apColorsTokens2026.apGrey.lighten5,
-					'ap-grey-lighten-6': apColorsTokens2026.apGrey.lighten6,
+					'apGrey-darken1': apColorsTokens2026.apGrey.darken1,
+					'apGrey-base': apColorsTokens2026.apGrey.base,
+					'apGrey-lighten1': apColorsTokens2026.apGrey.lighten1,
+					'apGrey-lighten2': apColorsTokens2026.apGrey.lighten2,
+					'apGrey-lighten3': apColorsTokens2026.apGrey.lighten3,
+					'apGrey-lighten4': apColorsTokens2026.apGrey.lighten4,
+					'apGrey-lighten5': apColorsTokens2026.apGrey.lighten5,
+					'apGrey-lighten6': apColorsTokens2026.apGrey.lighten6,
 				}
 				return {
 					cnamColors,
@@ -1860,28 +1873,28 @@ export const PaletteWhite: StoryObj = {
 				const displayEmptyColors = false
 				const colorTitleLevel = 3
 				const cnamColors = {
-					'white-lighten-70': cnamColorsTokens.white.lighten70,
-					'white-lighten-60': cnamColorsTokens.white.lighten40,
-					'white-lighten-40': cnamColorsTokens.white.lighten38,
-					'white-lighten-20': cnamColorsTokens.white.lighten20,
+					'white-lighten70': cnamColorsTokens.white.lighten70,
+					'white-lighten40': cnamColorsTokens.white.lighten40,
+					'white-lighten38': cnamColorsTokens.white.lighten38,
+					'white-lighten20': cnamColorsTokens.white.lighten20,
 					'white-base': cnamColorsTokens.white.base,
 				}
 				const paColors = {
-					'white-lighten-80': paColorsTokens.white.lighten70,
-					'white-lighten-60': paColorsTokens.white.lighten40,
-					'white-lighten-40': paColorsTokens.white.lighten38,
-					'white-lighten-20': paColorsTokens.white.lighten20,
+					'white-lighten70': paColorsTokens.white.lighten70,
+					'white-lighten40': paColorsTokens.white.lighten40,
+					'white-lighten38': paColorsTokens.white.lighten38,
+					'white-lighten20': paColorsTokens.white.lighten20,
 					'white-base': paColorsTokens.white.base,
 				}
 				const apColors = {
-					'white-lighten-80': apColorsTokens.white.lighten70,
-					'white-lighten-60': apColorsTokens.white.lighten40,
-					'white-lighten-40': apColorsTokens.white.lighten38,
-					'white-lighten-20': apColorsTokens.white.lighten20,
+					'white-lighten70': apColorsTokens.white.lighten70,
+					'white-lighten40': apColorsTokens.white.lighten40,
+					'white-lighten38': apColorsTokens.white.lighten38,
+					'white-lighten20': apColorsTokens.white.lighten20,
 					'white-base': apColorsTokens.white.base,
 				}
 				const apColors2026 = {
-					'ap-white': apColorsTokens2026.apWhite.base,
+					'apWhite-base': apColorsTokens2026.apWhite.base,
 				}
 				return {
 					cnamColors,
@@ -1922,7 +1935,7 @@ export const PaletteBlack: StoryObj = {
 				const paColors = {}
 				const apColors = {}
 				const apColors2026 = {
-					'ap-black': apColorsTokens2026.apBlack.base,
+					'apBlack-base': apColorsTokens2026.apBlack.base,
 				}
 				return {
 					displayEmptyColors,