@webpros/mui-theme 0.1.5 → 0.2.0

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

@@ -0,0 +1,31 @@
+import { Schemes, StateLayers, InverseSchemes, InverseStateLayers } from '../tokens/colors';
+import { TypescaleTypographyVariants } from '../index';
+import { BlendSchemaWithStateLayerFunction } from '../utils/getStateLayerColor';
+declare module '@mui/material/styles' {
+    interface TypographyVariants extends TypescaleTypographyVariants {
+    }
+    interface TypographyVariantsOptions extends TypescaleTypographyVariants {
+    }
+}
+declare module '@mui/material/styles/createTheme' {
+    interface Theme {
+        colors: {
+            schemes: Schemes;
+            stateLayers: StateLayers;
+            inverseSchemes: InverseSchemes;
+            inverseStateLayers: InverseStateLayers;
+            blendSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+            blendInverseSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+        };
+    }
+    interface ThemeOptions {
+        colors: {
+            schemes: Schemes;
+            stateLayers: StateLayers;
+            inverseSchemes: InverseSchemes;
+            inverseStateLayers: InverseStateLayers;
+            blendSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+            blendInverseSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+        };
+    }
+}

package/dist/src/utils/getMUIThemeCustoimzationType.js

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

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

@@ -0,0 +1,2 @@
+import { TypescaleTypographyVariants } from '../tokens/typography';
+export declare const getMUITypography: () => TypescaleTypographyVariants;

package/dist/src/utils/getMUITypography.js

@@ -0,0 +1,5 @@
+import { typographyVariants, } from '../tokens/typography';
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getMUITypography = () => {
+    return typographyVariants;
+};

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

@@ -1,3 +1,8 @@
+import { SchemesKey, InverseSchemesKey, StateLayersKey, InverseStateLayersKey, SchemesGenerated, InverseSchemesGenerated, StateLayersGenerated, InverseStateLayersGenerated } from '../tokens/colors';
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export declare const StateLayerOpacity: {
     readonly 0.08: 0.08;
     readonly 0.12: 0.12;
@@ -6,7 +11,15 @@ export declare const StateLayerOpacity: {
     readonly 0.28: 0.28;
     readonly 0.48: 0.48;
 };
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export type StateLayerOpacityKey = keyof typeof StateLayerOpacity;
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export declare enum StateLayer {
     Hover = 0.08,
     Focus = 0.12,
@@ -16,10 +29,34 @@ export declare enum StateLayer {
     Disabled = 0.08,
     Active = 0.12
 }
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export declare enum OnStateLayer {
     Disabled = 0.38,
     Active = 1
 }
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export declare const getStateLayerColor: (state: StateLayer, containerColor: string, contentColor?: string) => string;
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export declare const getOnStateLayerColor: (state: OnStateLayer, onContainerColor: string, containerColor?: string) => string;
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export declare const getStateLayerColorByOpacityKey: (opacity: StateLayerOpacityKey, color: string) => string;
+export type BlendSchemaWithStateLayerFunction = (schemaKey: SchemesKey | InverseSchemesKey, stateLayerKey: StateLayersKey | InverseStateLayersKey) => string;
+export declare const getBlendSchemaWithStateLayer: (schemesGenerated: SchemesGenerated | InverseSchemesGenerated, stateLayersGenerated: StateLayersGenerated | InverseStateLayersGenerated) => BlendSchemaWithStateLayerFunction;
+export declare const getInverseBlendSchemaWithStateLayer: (schemesGenerated: InverseSchemesGenerated, stateLayersGenerated: InverseStateLayersGenerated) => BlendSchemaWithStateLayerFunction;
+/**
+ * Blends a schema color by color-mix
+ * Color mix is 2023 Baseline https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
+ */
+export declare const blendSchemaWithStateLayer: (schemesGenerated: SchemesGenerated | InverseSchemesGenerated, stateLayersGenerated: StateLayersGenerated | InverseStateLayersGenerated) => (schemaKey: SchemesKey | InverseSchemesKey, stateLayerKey: StateLayersKey | InverseStateLayersKey) => string;

package/dist/src/utils/getStateLayerColor.js

@@ -2,7 +2,10 @@
 import { Blend, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
 import { alpha } from '@mui/material';
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values -- Need same value*/
-// We should have ONLY those values of opacity inside the theme
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export const StateLayerOpacity = {
     0.08: 0.08,
     0.12: 0.12,
@@ -11,6 +14,10 @@ export const StateLayerOpacity = {
     0.28: 0.28,
     0.48: 0.48,
 };
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export var StateLayer;
 (function (StateLayer) {
     StateLayer[StateLayer["Hover"] = 0.08] = "Hover";
@@ -21,16 +28,51 @@ export var StateLayer;
     StateLayer[StateLayer["Disabled"] = 0.08] = "Disabled";
     StateLayer[StateLayer["Active"] = 0.12] = "Active";
 })(StateLayer || (StateLayer = {}));
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export var OnStateLayer;
 (function (OnStateLayer) {
     OnStateLayer[OnStateLayer["Disabled"] = 0.38] = "Disabled";
     OnStateLayer[OnStateLayer["Active"] = 1] = "Active";
 })(OnStateLayer || (OnStateLayer = {}));
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export const getStateLayerColor = (state, containerColor, contentColor) => contentColor
     ? hexFromArgb(Blend.cam16Ucs(argbFromHex(containerColor), argbFromHex(contentColor), state))
     : alpha(containerColor, state);
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export const getOnStateLayerColor = (state, onContainerColor, containerColor) => containerColor
     ? hexFromArgb(Blend.cam16Ucs(argbFromHex(onContainerColor), argbFromHex(containerColor), state))
     : alpha(onContainerColor, state);
 // Was introduced due to fact that StateLayer enums does not correlate with values presented. So State layer is more like "const opacity value" rather then actual state
+/**
+ * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
+ * We're migrating to tokens based values of states. Do not use that enum in new code.
+ */
 export const getStateLayerColorByOpacityKey = (opacity, color) => alpha(color, StateLayerOpacity[opacity]);
+// Function to get the blend function
+export const getBlendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => blendSchemaWithStateLayer(schemesGenerated, stateLayersGenerated);
+export const getInverseBlendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => blendSchemaWithStateLayer(schemesGenerated, stateLayersGenerated);
+/**
+ * Blends a schema color by color-mix
+ * Color mix is 2023 Baseline https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
+ */
+export const blendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => (schemaKey, stateLayerKey) => {
+    // Get the GeneratedRgba values directly using the keys
+    const rgb1 = schemesGenerated[schemaKey];
+    const rgb2 = stateLayersGenerated[stateLayerKey];
+    // Convert RGBA objects to color strings
+    const schemaColor = `rgba(${rgb1.r}, ${rgb1.g}, ${rgb1.b}, ${rgb1.a})`;
+    const stateLayerColor = `rgba(${rgb2.r}, ${rgb2.g}, ${rgb2.b}, 1)`; // Remove alpha from state layer
+    // Get the amount from the state layer opacity (alpha channel as percentage)
+    const percentage = Math.round(rgb2.a * 100);
+    // Use CSS color-mix for blending
+    return `color-mix(in srgb, ${schemaColor} 100%, ${stateLayerColor} ${percentage}%)`;
+};

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

@@ -1,6 +1,6 @@
-export * from './generateTokens';
 export * from './getMUIComponents';
 export * from './getMUIPalette';
 export * from './getMuiLocaleByCode';
+export * from './getMUIThemeCustoimzationType';
 export * from './getStateLayerColor';
 export * from './patchMUIShadows';

package/dist/src/utils/index.js

@@ -1,7 +1,7 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-export * from './generateTokens';
 export * from './getMUIComponents';
 export * from './getMUIPalette';
 export * from './getMuiLocaleByCode';
+export * from './getMUIThemeCustoimzationType';
 export * from './getStateLayerColor';
 export * from './patchMUIShadows';

package/dist/src/utils/patchMUIShadows.js

@@ -1,5 +1,6 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha } from '@mui/material';
+import { muiShadows } from '../tokens/shadows';
 export const patchMUIShadows = (theme) => {
-    theme.shadows[2] = `0px 0px 2px ${alpha(theme.palette.shadow.main, 0.08)}, 0px 8px 24px ${alpha(theme.palette.shadow.main, 0.08)}`;
+    muiShadows.forEach((shadowValue, index) => {
+        theme.shadows[index] = shadowValue;
+    });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
   "description": "MUI v6 theme for WebPros products",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -42,7 +42,8 @@
     "eslint": "eslint",
     "prettier:test": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "extract-tokens": "node tools/extractM3Tokens.js"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
@@ -93,12 +94,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^9.1.16",
+    "storybook-addon-pseudo-states": "^10.0.3",
     "tsc-alias": "^1.8.16",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.1",
+    "usehooks-ts": "^3.1.1",
     "vite": "^7.1.10",
-    "vite-plugin-dts": "^4.5.4",
-    "usehooks-ts": "^3.1.1"
+    "vite-plugin-dts": "^4.5.4"
   },
   "browserslist": [
     "last 2 versions",

package/dist/src/components/inputs/Autocomplete/components/AutocompletePopupIcon.d.ts

@@ -1 +0,0 @@
-export declare const AutocompletePopupIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/navigation/PaginationItem/PaginationItem.d.ts

@@ -1,3 +0,0 @@
-import './PaginationItem.theme';
-export declare const PaginationItem: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").PaginationItemTypeMap<{}, "div">>;
-export type PaginationItemComponentType = typeof PaginationItem;

package/dist/src/components/navigation/PaginationItem/PaginationItem.js

@@ -1,4 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { PaginationItem as MuiPaginationItem } from '@mui/material';
-import './PaginationItem.theme';
-export const PaginationItem = MuiPaginationItem;

package/dist/src/components/navigation/TabList/TabList.d.ts

@@ -1,3 +0,0 @@
-import './TabList.theme';
-export declare const TabList: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TabsTypeMap<{}, "div">>;
-export type TabListComponentType = typeof TabList;

package/dist/src/components/navigation/TabList/TabList.js

@@ -1,4 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { Tabs as MuiTabList } from '@mui/material';
-import './TabList.theme';
-export const TabList = MuiTabList;

package/dist/src/components/navigation/TabList/TabList.theme.d.ts

@@ -1,10 +0,0 @@
-import { Theme, ComponentsOverrides, ComponentsProps } from '@mui/material';
-interface M3TabList {
-    MuiTabs: {
-        defaultProps?: ComponentsProps['MuiTabs'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiTabs'];
-    };
-}
-export declare const getTabList: (theme: Theme) => M3TabList;
-declare const _default: {};
-export default _default;

package/dist/src/components/navigation/TabList/TabList.theme.js

@@ -1,17 +0,0 @@
-export const getTabList = (theme) => {
-    const { palette: _ } = theme;
-    return {
-        MuiTabs: {
-            styleOverrides: {
-                root: {
-                    '& > .MuiTabs-scroller > .MuiTabs-indicator': {
-                        height: '3px',
-                        borderTopLeftRadius: '3px',
-                        borderTopRightRadius: '3px',
-                    },
-                },
-            },
-        },
-    };
-};
-export default {};

package/dist/src/components/navigation/TabList/index.d.ts

@@ -1 +0,0 @@
-export * from './TabList.theme';

package/dist/src/hooks/useTonalPalette.d.ts

@@ -1,3 +0,0 @@
-import { TonalPalette } from '../tokens/TonalPalette';
-export declare const TONAL_PALETTE_KEY = "TonalPaletteKey";
-export declare const useTonalPalette: () => readonly [TonalPalette, (hexColor: string) => void];

package/dist/src/hooks/useTonalPalette.js

@@ -1,32 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities';
-import { useLayoutEffect, useState } from 'react';
-import { TonalPaletteDefault } from '../tokens/TonalPalette';
-export const TONAL_PALETTE_KEY = 'TonalPaletteKey';
-const LEVELS = [
-    0, 4, 6, 10, 12, 17, 20, 22, 24, 30, 40, 50, 60, 70, 80, 87, 90, 92, 94, 95, 96, 98, 99, 100,
-];
-export const useTonalPalette = () => {
-    const [tonalPalette, setTonalPalette] = useState(TonalPaletteDefault);
-    useLayoutEffect(() => {
-        if (localStorage.getItem(TONAL_PALETTE_KEY)) {
-            const localTonalPalette = JSON.parse(localStorage.getItem(TONAL_PALETTE_KEY) || '{}');
-            setTonalPalette(localTonalPalette);
-        }
-    }, []);
-    const generatePalette = (hexColor) => {
-        const intColor = argbFromHex(hexColor);
-        const { palettes } = themeFromSourceColor(intColor);
-        const tones = {};
-        for (const [key, palette] of Object.entries(palettes)) {
-            const tonelevel = {};
-            for (const level of LEVELS) {
-                tonelevel[level] = hexFromArgb(palette.tone(level));
-            }
-            tones[key] = tonelevel;
-        }
-        setTonalPalette(tones);
-        localStorage.setItem(TONAL_PALETTE_KEY, JSON.stringify(tones));
-    };
-    return [tonalPalette, generatePalette];
-};

package/dist/src/providers/ThemeSchemeProvider.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ThemeScheme } from '../tokens/ThemeScheme';
-export type ThemeSchemeContextType = {
-    generateScheme: (hexColor: string) => void;
-    themeScheme: ThemeScheme;
-};
-export type ThemeSchemeProviderProps = {
-    children?: React.ReactNode;
-};
-export declare const ThemeSchemeContext: import("react").Context<ThemeSchemeContextType>;
-declare const ThemeSchemeProvider: FC<ThemeSchemeProviderProps>;
-export default ThemeSchemeProvider;

package/dist/src/providers/ThemeSchemeProvider.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { createContext, useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import { ThemeSchemeDefault } from '../tokens/ThemeScheme';
-import { useTonalPalette } from '../hooks/useTonalPalette';
-import { generateDesignTokens } from '../utils/generateTokens';
-export const ThemeSchemeContext = createContext({
-    generateScheme: () => { },
-    themeScheme: ThemeSchemeDefault,
-});
-const ThemeSchemeProvider = ({ children }) => {
-    const [tonalPalette, generatePalette] = useTonalPalette();
-    const [themeScheme, setThemeScheme] = useState(ThemeSchemeDefault);
-    useLayoutEffect(() => {
-        const lightTokens = generateDesignTokens('light', tonalPalette);
-        const darkTokens = generateDesignTokens('dark', tonalPalette);
-        setThemeScheme({
-            light: lightTokens,
-            dark: darkTokens,
-            tones: tonalPalette,
-        });
-    }, [tonalPalette]);
-    const generateScheme = useCallback((hexColor) => {
-        generatePalette(hexColor);
-    }, [generatePalette]);
-    const value = useMemo(() => ({ generateScheme, themeScheme }), [generateScheme, themeScheme]);
-    return _jsx(ThemeSchemeContext.Provider, { value: value, children: children });
-};
-export default ThemeSchemeProvider;

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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-// 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/utils/generateTokens.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,107 +0,0 @@
-// 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: '',
-    };
-};