@webpros/mui-theme 0.1.2 → 0.1.4

package/dist/src/tokens/ThemeColorTokens.js

@@ -0,0 +1,172 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { additionalColors } from './additionalColors';
+// reference
+// https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
+export const LightTokensDefault = {
+    primary: '#4527A0',
+    onPrimary: '#FFFFFF',
+    primaryContainer: '#E2DFFF',
+    onPrimaryContainer: '#1E1A69',
+    secondary: '#5F6690',
+    onSecondary: '#FFFFFF',
+    secondaryContainer: '#D3D5E3',
+    onSecondaryContainer: '#282B40',
+    tertiary: '#546E7A',
+    onTertiary: '#FFFFFF',
+    tertiaryContainer: '#DAE9F0',
+    onTertiaryContainer: '#11262F',
+    error: '#BA1A1A',
+    onError: '#FFFFFF',
+    errorContainer: '#FFDAD6',
+    onErrorContainer: '#940E0F',
+    errorFixedDim: '#EF5350',
+    primaryFixed: '#E7DFFF',
+    primaryFixedDim: '#D0C0FF',
+    onPrimaryFixed: '#281C4C',
+    onPrimaryFixedVariant: '#4F4178',
+    secondaryFixed: '#E4E5F0',
+    secondaryFixedDim: '#C8CBD9',
+    onSecondaryFixed: '#1A1C2C',
+    onSecondaryFixedVariant: '#454859',
+    tertiaryFixed: '#D6E7EF',
+    tertiaryFixedDim: '#B9DAEA',
+    onTertiaryFixed: '#11262F',
+    onTertiaryFixedVariant: '#3C5560',
+    surface: '#F2F3FA',
+    onSurface: '#1B1C21',
+    surfaceDim: '#CED0E0',
+    surfaceBright: '#EDF0FF',
+    surfaceContainerLowest: '#FFFFFF',
+    surfaceContainerLow: '#E7E9F4',
+    surfaceContainer: '#E4E5F0',
+    surfaceContainerHigh: '#FFFFFF',
+    surfaceContainerHighest: '#DDDFED',
+    surfaceVariant: '#E4E6F0',
+    onSurfaceVariant: '#505263',
+    outline: '#8C8E96',
+    outlineVariant: '#EEEEF1',
+    inverseSurface: '#313036',
+    inverseOnSurface: '#F3EFF7',
+    inversePrimary: '#D0C0FF',
+    shadow: '#000000',
+    scrim: '#000000',
+    surfaceTint: '#5D4D8D',
+    background: '#E9EBF6',
+    onBackground: '#1B1C21',
+    // custom colors
+    info: '#0373CE',
+    onInfo: '#FFFFFF',
+    infoContainer: '#C8E8FF',
+    onInfoContainer: '#094A94',
+    infoFixedDim: '#03A9F4',
+    success: '#2D8731',
+    onSuccess: '#FFFFFF',
+    successContainer: '#CAEFCD',
+    onSuccessContainer: '#0F5C13',
+    successFixedDim: '#4CAF50',
+    warning: '#C75300',
+    onWarning: '#FFFFFF',
+    warningContainer: '#FFE0B2',
+    onWarningContainer: '#892303',
+    warningFixedDim: '#FF9800',
+    undefined: '#90A4AE',
+    onUndefined: '#FFFFFF',
+    undefinedContainer: '#DFE2E4',
+    onUndefinedContainer: '#263238',
+    supportive: '#546E7A',
+    // Custom accent colors matching with the theme.
+    // Should not be used in MUI components directly (i.e. for setting background/text somewhere) inside customization.
+    // Only for outer usage
+    // reference -
+    // Charts
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    // Colors
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    additionalColors,
+};
+// reference
+// https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
+export const DarkTokensDefault = {
+    primary: '#B09BEF',
+    onPrimary: '#19132D',
+    primaryContainer: '#4E388E',
+    onPrimaryContainer: '#F9F7FF',
+    secondary: '#9497AC',
+    onSecondary: '#23242A',
+    secondaryContainer: '#464854',
+    onSecondaryContainer: '#EDEEF1',
+    tertiary: '#8FAAB6',
+    onTertiary: '#3B4347',
+    tertiaryContainer: '#325261',
+    onTertiaryContainer: '#EDF0F1',
+    error: '#FA7A9A',
+    onError: '#68182C',
+    errorContainer: '#8C3148',
+    onErrorContainer: '#FFF2F5',
+    errorFixedDim: '#EF5350',
+    primaryFixed: '#E7DFFF',
+    primaryFixedDim: '#D0C0FF',
+    onPrimaryFixed: '#281C4C',
+    onPrimaryFixedVariant: '#4F4178',
+    secondaryFixed: '#E4E5F0',
+    secondaryFixedDim: '#C8CBD9',
+    onSecondaryFixed: '#1A1C2C',
+    onSecondaryFixedVariant: '#454859',
+    tertiaryFixed: '#D6E7EF',
+    tertiaryFixedDim: '#B9DAEA',
+    onTertiaryFixed: '#11262F',
+    onTertiaryFixedVariant: '#3C5560',
+    surface: '#222326',
+    onSurface: '#E5E7F3',
+    surfaceDim: '#131418',
+    surfaceBright: '#38393F',
+    surfaceContainerLowest: '#31323A',
+    surfaceContainerLow: '#25262C',
+    surfaceContainer: '#202126',
+    surfaceContainerHigh: '#1A1B20',
+    surfaceContainerHighest: '#16171A',
+    surfaceVariant: '#2B2C31',
+    onSurfaceVariant: '#AFB3C5',
+    outline: '#7F8293',
+    outlineVariant: '#454652',
+    inverseSurface: '#D9DBE4',
+    inverseOnSurface: '#222326',
+    inversePrimary: '#644EA5',
+    shadow: '#000000',
+    scrim: '#000000',
+    surfaceTint: '#9E8DD3',
+    background: '#151517',
+    onBackground: '#E2E4EE',
+    // custom colors
+    info: '#5696CE',
+    onInfo: '#0A253A',
+    infoContainer: '#124771',
+    onInfoContainer: '#E0ECF6',
+    infoFixedDim: '#03A9F4',
+    // ok
+    success: '#6EBB72',
+    onSuccess: '#0C440F',
+    successContainer: '#125F16',
+    onSuccessContainer: '#F1FDF1',
+    successFixedDim: '#4CAF50',
+    warning: '#DC8A4F',
+    onWarning: '#4E2305',
+    warningContainer: '#7B3C0F',
+    onWarningContainer: '#FAF0E9',
+    warningFixedDim: '#FF9800',
+    // ok
+    undefined: '#9BABB3',
+    onUndefined: '#2A3438',
+    undefinedContainer: '#3D464D',
+    onUndefinedContainer: '#E4EBF0',
+    supportive: '#8FAAB6',
+    // Custom accent colors matching with the theme.
+    // Should not be used in MUI components directly (i.e. for setting background/text somewhere) inside customization.
+    // Only for outer usage
+    // reference -
+    // Charts
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    // Colors
+    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
+    additionalColors,
+};

package/dist/src/tokens/ThemeMode.d.ts

@@ -0,0 +1 @@
+export type ThemeMode = 'light' | 'dark';

package/dist/src/tokens/ThemeMode.js

@@ -0,0 +1 @@
+export {};

package/dist/src/tokens/ThemeScheme.d.ts

@@ -0,0 +1,12 @@
+import { ThemeColorTokens } from './ThemeColorTokens';
+import { TonalPalette } from './TonalPalette';
+export type ThemeScheme = {
+    tones: TonalPalette;
+    light: ThemeColorTokens;
+    dark: ThemeColorTokens;
+};
+export declare const ThemeSchemeDefault: {
+    tones: TonalPalette;
+    light: ThemeColorTokens;
+    dark: ThemeColorTokens;
+};

package/dist/src/tokens/ThemeScheme.js

@@ -0,0 +1,8 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { DarkTokensDefault, LightTokensDefault } from './ThemeColorTokens';
+import { TonalPaletteDefault } from './TonalPalette';
+export const ThemeSchemeDefault = {
+    tones: TonalPaletteDefault,
+    light: LightTokensDefault,
+    dark: DarkTokensDefault,
+};

package/dist/src/tokens/TonalPalette.d.ts

@@ -0,0 +1,10 @@
+import { Tone } from './Tone';
+export type TonalPalette = {
+    primary: Tone;
+    secondary: Tone;
+    tertiary: Tone;
+    neutral: Tone;
+    neutralVariant: Tone;
+    error: Tone;
+};
+export declare const TonalPaletteDefault: TonalPalette;

package/dist/src/tokens/TonalPalette.js

@@ -0,0 +1,10 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { ErrorDefault, NeutralDefault, NeutralVariantDefault, PrimaryDefault, SecondaryDefault, TertiaryDefault, } from './Tone';
+export const TonalPaletteDefault = {
+    primary: PrimaryDefault,
+    secondary: SecondaryDefault,
+    tertiary: TertiaryDefault,
+    neutral: NeutralDefault,
+    neutralVariant: NeutralVariantDefault,
+    error: ErrorDefault,
+};

package/dist/src/tokens/Tone.d.ts

@@ -0,0 +1,174 @@
+export type Tone = {
+    [index: number]: string;
+    '0': string;
+    '4': string;
+    '6': string;
+    '10': string;
+    '12': string;
+    '17': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '30': string;
+    '40': string;
+    '50': string;
+    '60': string;
+    '70': string;
+    '80': string;
+    '87': string;
+    '90': string;
+    '92': string;
+    '94': string;
+    '95': string;
+    '96': string;
+    '98': string;
+    '99': string;
+    '100': string;
+};
+export declare const PrimaryDefault: Tone;
+export declare const SecondaryDefault: {
+    '0': string;
+    '4': string;
+    '6': string;
+    '10': string;
+    '12': string;
+    '17': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '30': string;
+    '40': string;
+    '50': string;
+    '60': string;
+    '70': string;
+    '80': string;
+    '87': string;
+    '90': string;
+    '92': string;
+    '94': string;
+    '95': string;
+    '96': string;
+    '98': string;
+    '99': string;
+    '100': string;
+};
+export declare const TertiaryDefault: {
+    '0': string;
+    '4': string;
+    '6': string;
+    '10': string;
+    '12': string;
+    '17': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '30': string;
+    '40': string;
+    '50': string;
+    '60': string;
+    '70': string;
+    '80': string;
+    '87': string;
+    '90': string;
+    '92': string;
+    '94': string;
+    '95': string;
+    '96': string;
+    '98': string;
+    '99': string;
+    '100': string;
+};
+export declare const NeutralDefault: {
+    '0': string;
+    '4': string;
+    '6': string;
+    '10': string;
+    '12': string;
+    '17': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '30': string;
+    '40': string;
+    '50': string;
+    '60': string;
+    '70': string;
+    '80': string;
+    '87': string;
+    '90': string;
+    '92': string;
+    '94': string;
+    '95': string;
+    '96': string;
+    '98': string;
+    '99': string;
+    '100': string;
+};
+export declare const NeutralVariantDefault: {
+    '0': string;
+    '4': string;
+    '6': string;
+    '10': string;
+    '12': string;
+    '17': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '30': string;
+    '40': string;
+    '50': string;
+    '60': string;
+    '70': string;
+    '80': string;
+    '87': string;
+    '90': string;
+    '92': string;
+    '94': string;
+    '95': string;
+    '96': string;
+    '98': string;
+    '99': string;
+    '100': string;
+};
+export declare const ErrorDefault: {
+    '0': string;
+    '4': string;
+    '6': string;
+    '10': string;
+    '12': string;
+    '17': string;
+    '20': string;
+    '22': string;
+    '24': string;
+    '30': string;
+    '40': string;
+    '50': string;
+    '60': string;
+    '70': string;
+    '80': string;
+    '87': string;
+    '90': string;
+    '92': string;
+    '94': string;
+    '95': string;
+    '96': string;
+    '98': string;
+    '99': string;
+    '100': string;
+};
+export type AdditionalColorTone = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    A100: string;
+    A200: string;
+    A400: string;
+    A700: string;
+};

package/dist/src/tokens/Tone.js

@@ -0,0 +1,157 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const PrimaryDefault = {
+    '0': '#000000',
+    '4': '#13003a',
+    '6': '#190048',
+    '10': '#22005d',
+    '12': '#260561',
+    '17': '#31166c',
+    '20': '#381e72',
+    '22': '#3c2377',
+    '24': '#41287c',
+    '30': '#4f378a',
+    '40': '#6750a4',
+    '50': '#8069bf',
+    '60': '#9a83db',
+    '70': '#b69df8',
+    '80': '#cfbcff',
+    '87': '#e1d3ff',
+    '90': '#e9ddff',
+    '92': '#eee4ff',
+    '94': '#f3eaff',
+    '95': '#f6eeff',
+    '96': '#f8f1ff',
+    '98': '#fdf7ff',
+    '99': '#fffbff',
+    '100': '#ffffff',
+};
+export const SecondaryDefault = {
+    '0': '#000000',
+    '4': '#100b1d',
+    '6': '#151022',
+    '10': '#1e192b',
+    '12': '#221d2f',
+    '17': '#2c273a',
+    '20': '#332d41',
+    '22': '#373245',
+    '24': '#3c364a',
+    '30': '#4a4458',
+    '40': '#625b71',
+    '50': '#7b748a',
+    '60': '#958da4',
+    '70': '#b0a7c0',
+    '80': '#cbc2db',
+    '87': '#dfd6ef',
+    '90': '#e8def8',
+    '92': '#eee4fe',
+    '94': '#f3eaff',
+    '95': '#f6eeff',
+    '96': '#f8f1ff',
+    '98': '#fdf7ff',
+    '99': '#fffbff',
+    '100': '#ffffff',
+};
+export const TertiaryDefault = {
+    '0': '#000000',
+    '4': '#210410',
+    '6': '#270815',
+    '10': '#31101d',
+    '12': '#361421',
+    '17': '#421f2c',
+    '20': '#4a2532',
+    '22': '#4f2936',
+    '24': '#542e3b',
+    '30': '#633b48',
+    '40': '#7e5260',
+    '50': '#996a79',
+    '60': '#b58392',
+    '70': '#d29dad',
+    '80': '#efb8c8',
+    '87': '#ffcddb',
+    '90': '#ffd9e3',
+    '92': '#ffe1e8',
+    '94': '#ffe8ed',
+    '95': '#ffecf0',
+    '96': '#fff0f2',
+    '98': '#fff8f8',
+    '99': '#fffbff',
+    '100': '#ffffff',
+};
+export const NeutralDefault = {
+    '0': '#000000',
+    '4': '#0f0e11',
+    '6': '#141316',
+    '10': '#1c1b1e',
+    '12': '#201f22',
+    '17': '#2b292d',
+    '20': '#313033',
+    '22': '#363438',
+    '24': '#3a383c',
+    '30': '#48464a',
+    '40': '#605d62',
+    '50': '#79767a',
+    '60': '#938f94',
+    '70': '#aeaaae',
+    '80': '#cac5ca',
+    '87': '#ddd8dd',
+    '90': '#e6e1e6',
+    '92': '#ece7eb',
+    '94': '#F3EFF4',
+    '95': '#F3EFF4',
+    '96': '#f7f2f7',
+    '98': '#fdf8fd',
+    '99': '#fffbff',
+    '100': '#ffffff',
+};
+export const NeutralVariantDefault = {
+    '0': '#000000',
+    '4': '#0f0d14',
+    '6': '#14121a',
+    '10': '#1d1a22',
+    '12': '#211e26',
+    '17': '#2b2931',
+    '20': '#322f38',
+    '22': '#36333c',
+    '24': '#3b3840',
+    '30': '#49454e',
+    '40': '#615d66',
+    '50': '#7a757f',
+    '60': '#948f99',
+    '70': '#afa9b4',
+    '80': '#cac4cf',
+    '87': '#ded8e3',
+    '90': '#e7e0eb',
+    '92': '#ece6f1',
+    '94': '#f2ebf7',
+    '95': '#f5eefa',
+    '96': '#f8f1fd',
+    '98': '#fdf7ff',
+    '99': '#fffbff',
+    '100': '#ffffff',
+};
+export const ErrorDefault = {
+    '0': '#000000',
+    '4': '#280001',
+    '6': '#310001',
+    '10': '#410002',
+    '12': '#490002',
+    '17': '#5c0004',
+    '20': '#690005',
+    '22': '#710005',
+    '24': '#790006',
+    '30': '#93000a',
+    '40': '#ba1a1a',
+    '50': '#de3730',
+    '60': '#ff5449',
+    '70': '#ff897d',
+    '80': '#ffb4ab',
+    '87': '#ffcfc9',
+    '90': '#ffdad6',
+    '92': '#ffe2de',
+    '94': '#ffe9e6',
+    '95': '#ffedea',
+    '96': '#fff0ee',
+    '98': '#fff8f7',
+    '99': '#fffbff',
+    '100': '#ffffff',
+};

package/dist/src/tokens/additionalColors/index.d.ts

@@ -0,0 +1 @@
+export * as additionalColors from '@mui/material/colors';

package/dist/src/tokens/additionalColors/index.js

@@ -0,0 +1,5 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// MUI has additioinal color palette
+// For now we just re-export it into the theme
+// In case of customization these colors we will create new CustomColorTone and export it here
+export * as additionalColors from '@mui/material/colors';

package/dist/src/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export type { AdditionalColorKey } from './ThemeColorTokens';
+export type { AdditionalColorTone } from './Tone';

package/dist/src/tokens/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export {};

package/dist/src/utils/generateTokens.d.ts

@@ -0,0 +1,4 @@
+import { ThemeMode } from '../tokens/ThemeMode';
+import { ThemeColorTokens } from '../tokens/ThemeColorTokens';
+import { TonalPalette } from '../tokens/TonalPalette';
+export declare const generateDesignTokens: (themeMode: ThemeMode, tonalPalette: TonalPalette) => ThemeColorTokens;

package/dist/src/utils/generateTokens.js

@@ -0,0 +1,107 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities';
+import { additionalColors } from '../tokens/additionalColors';
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- We are sure that Color palette has all possible levels */
+const getColorToken = (themeMode, palette, lightLevel, darkLevel) => palette[themeMode === 'light' ? lightLevel : darkLevel];
+// Generating of colors is not supported for now - we just use ThemeColorTokens
+export const generateDesignTokens = (themeMode, tonalPalette) => {
+    const { primary, secondary, tertiary, neutral, neutralVariant, error } = tonalPalette;
+    const { customColors: customStateColors } = themeFromSourceColor(argbFromHex(tonalPalette.primary[40]), [
+        {
+            name: 'info',
+            value: argbFromHex('#0288d1'),
+            blend: true,
+        },
+        {
+            name: 'success',
+            value: argbFromHex('#2e7d32'),
+            blend: true,
+        },
+        {
+            name: 'warning',
+            value: argbFromHex('#f59e0b'),
+            blend: true,
+        },
+        {
+            name: 'supportive',
+            value: argbFromHex('#546E7A'),
+            blend: true,
+        },
+    ]);
+    return {
+        primary: getColorToken(themeMode, primary, 40, 80),
+        onPrimary: getColorToken(themeMode, primary, 100, 20),
+        primaryContainer: getColorToken(themeMode, primary, 90, 30),
+        onPrimaryContainer: getColorToken(themeMode, primary, 10, 90),
+        secondary: getColorToken(themeMode, secondary, 40, 80),
+        onSecondary: getColorToken(themeMode, secondary, 100, 20),
+        secondaryContainer: getColorToken(themeMode, secondary, 90, 30),
+        onSecondaryContainer: getColorToken(themeMode, secondary, 10, 90),
+        tertiary: getColorToken(themeMode, tertiary, 40, 80),
+        onTertiary: getColorToken(themeMode, tertiary, 100, 20),
+        tertiaryContainer: getColorToken(themeMode, tertiary, 90, 30),
+        onTertiaryContainer: getColorToken(themeMode, tertiary, 10, 90),
+        error: getColorToken(themeMode, error, 40, 80),
+        onError: getColorToken(themeMode, error, 100, 20),
+        errorContainer: getColorToken(themeMode, error, 90, 30),
+        onErrorContainer: getColorToken(themeMode, error, 10, 90),
+        primaryFixed: getColorToken(themeMode, primary, 90, 90),
+        primaryFixedDim: getColorToken(themeMode, primary, 80, 80),
+        onPrimaryFixed: getColorToken(themeMode, primary, 10, 10),
+        onPrimaryFixedVariant: getColorToken(themeMode, primary, 30, 30),
+        secondaryFixed: getColorToken(themeMode, secondary, 90, 90),
+        secondaryFixedDim: getColorToken(themeMode, secondary, 80, 80),
+        onSecondaryFixed: getColorToken(themeMode, secondary, 10, 10),
+        onSecondaryFixedVariant: getColorToken(themeMode, secondary, 30, 30),
+        tertiaryFixed: getColorToken(themeMode, tertiary, 90, 90),
+        tertiaryFixedDim: getColorToken(themeMode, tertiary, 80, 80),
+        onTertiaryFixed: getColorToken(themeMode, tertiary, 10, 10),
+        onTertiaryFixedVariant: getColorToken(themeMode, tertiary, 30, 30),
+        surface: getColorToken(themeMode, neutral, 98, 6),
+        onSurface: getColorToken(themeMode, neutral, 10, 90),
+        surfaceDim: getColorToken(themeMode, neutral, 87, 6),
+        surfaceBright: getColorToken(themeMode, neutral, 98, 24),
+        surfaceContainerLowest: getColorToken(themeMode, neutral, 100, 4),
+        surfaceContainerLow: getColorToken(themeMode, neutral, 96, 10),
+        surfaceContainer: getColorToken(themeMode, neutral, 94, 12),
+        surfaceContainerHigh: getColorToken(themeMode, neutral, 92, 17),
+        surfaceContainerHighest: getColorToken(themeMode, neutral, 90, 22),
+        // surfaceVariant: getColorToken(themeMode, neutralVariant, 90, 30),
+        onSurfaceVariant: getColorToken(themeMode, neutralVariant, 30, 80),
+        outline: getColorToken(themeMode, neutralVariant, 50, 60),
+        outlineVariant: getColorToken(themeMode, neutralVariant, 80, 30),
+        inverseSurface: getColorToken(themeMode, neutral, 20, 90),
+        inverseOnSurface: getColorToken(themeMode, neutral, 95, 20),
+        inversePrimary: getColorToken(themeMode, primary, 80, 40),
+        // inverseOnPrimary: getColorToken(themeMode, primary, 40, 80),
+        shadow: getColorToken(themeMode, neutral, 0, 0),
+        scrim: getColorToken(themeMode, neutral, 0, 0),
+        // surfaceTintColor: getColorToken(themeMode, primary, 40, 80),
+        background: getColorToken(themeMode, neutral, 98, 6),
+        onBackground: getColorToken(themeMode, neutral, 10, 90),
+        info: hexFromArgb(customStateColors[0][themeMode].color),
+        onInfo: hexFromArgb(customStateColors[0][themeMode].onColor),
+        infoContainer: hexFromArgb(customStateColors[0][themeMode].colorContainer),
+        onInfoContainer: hexFromArgb(customStateColors[0][themeMode].onColorContainer),
+        success: hexFromArgb(customStateColors[1][themeMode].color),
+        onSuccess: hexFromArgb(customStateColors[1][themeMode].onColor),
+        successContainer: hexFromArgb(customStateColors[1][themeMode].colorContainer),
+        onSuccessContainer: hexFromArgb(customStateColors[1][themeMode].onColorContainer),
+        warning: hexFromArgb(customStateColors[2][themeMode].color),
+        onWarning: hexFromArgb(customStateColors[2][themeMode].onColor),
+        warningContainer: hexFromArgb(customStateColors[2][themeMode].colorContainer),
+        onWarningContainer: hexFromArgb(customStateColors[2][themeMode].onColorContainer),
+        undefined: '#90A4AE',
+        onUndefined: '#FFF',
+        undefinedContainer: '#ECEFF1',
+        onUndefinedContainer: '#263238',
+        supportive: hexFromArgb(customStateColors[3][themeMode].color),
+        additionalColors,
+        infoFixedDim: '',
+        errorFixedDim: '',
+        surfaceVariant: '',
+        surfaceTint: '',
+        successFixedDim: '',
+        warningFixedDim: '',
+    };
+};