@webpros/mui-theme 0.1.6 → 0.2.0

package/dist/src/components/surfaces/Popover/Popover.d.ts

@@ -0,0 +1,4 @@
+import { Popover as MuiPopover } from '@mui/material';
+import './Popover.theme';
+export declare const Popover: typeof MuiPopover;
+export type PopoverComponentType = typeof Popover;

package/dist/src/components/surfaces/Popover/Popover.js

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

package/dist/src/components/surfaces/Popover/Popover.theme.d.ts

@@ -0,0 +1,9 @@
+import { Theme, ComponentsProps } from '@mui/material';
+interface M3Popover {
+    MuiPopover: {
+        defaultProps?: ComponentsProps['MuiPopover'];
+    };
+}
+export declare const getPopover: (_theme: Theme) => M3Popover;
+declare const _default: {};
+export default _default;

package/dist/src/components/surfaces/Popover/Popover.theme.js

@@ -0,0 +1,14 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getPopover = (_theme) => {
+    return {
+        MuiPopover: {
+            defaultProps: {
+                PaperProps: {
+                    elevation: 3,
+                    variant: 'elevation',
+                },
+            },
+        },
+    };
+};
+export default {};

package/dist/src/components/surfaces/Popover/index.d.ts

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

package/dist/src/components/surfaces/Popover/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './Popover.theme';

package/dist/src/components/utils/Backdrop/Backdrop.d.ts

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

package/dist/src/components/utils/Backdrop/Backdrop.js

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

package/dist/src/components/utils/Backdrop/Backdrop.theme.d.ts

@@ -0,0 +1,11 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3Backdrop {
+    MuiBackdrop: {
+        defaultProps?: ComponentsProps['MuiBackdrop'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiBackdrop'];
+        variants?: ComponentsVariants['MuiBackdrop'];
+    };
+}
+export declare const getBackdrop: (theme: Theme) => M3Backdrop;
+declare const _default: {};
+export default _default;

package/dist/src/components/utils/Backdrop/Backdrop.theme.js

@@ -0,0 +1,17 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getBackdrop = (theme) => {
+    const { colors } = theme;
+    return {
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: colors.stateLayers.surfaces.scrim.opacity48,
+                    '&.MuiBackdrop-invisible': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

package/dist/src/components/utils/Backdrop/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './Backdrop.theme';

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

@@ -6,9 +6,8 @@ export type ThemeModeContextType = {
 };
 export type ThemeModeProviderProps = {
     children?: React.ReactNode;
-    mode?: ThemeMode;
 };
 export declare const ThemeModeContext: import("react").Context<ThemeModeContextType>;
-declare const ThemeModeProvider: ({ children, mode }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThemeModeProvider: ({ children }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThemeModeProvider;
 export declare const useThemeModeContext: () => ThemeModeContextType;

package/dist/src/providers/ThemeModeProvider.js

@@ -7,9 +7,9 @@ export const ThemeModeContext = createContext({
     toggleTheme: () => { },
     setThemeMode: () => { },
 });
-const ThemeModeProvider = ({ children, mode }) => {
+const ThemeModeProvider = ({ children }) => {
     const [themeMode, toggleTheme, setThemeMode] = useThemeMode();
-    const value = useMemo(() => ({ themeMode: mode || themeMode, toggleTheme, setThemeMode }), [mode, themeMode, toggleTheme, setThemeMode]);
+    const value = useMemo(() => ({ themeMode, toggleTheme, setThemeMode }), [themeMode, toggleTheme, setThemeMode]);
     return _jsx(ThemeModeContext.Provider, { value: value, children: children });
 };
 export default ThemeModeProvider;

package/dist/src/providers/WebProsMuiThemeProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ThemeModeProvider from './ThemeModeProvider';
 import WebProsTheme from './WebProsTheme';
-const WebProsMuiThemeProvider = ({ children, localization, themeMode }) => (_jsx(ThemeModeProvider, { mode: themeMode, children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, children: children }) }));
+const WebProsMuiThemeProvider = ({ children, localization, themeMode }) => (_jsx(ThemeModeProvider, { children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, children: children }) }));
 export default WebProsMuiThemeProvider;

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

@@ -1,3 +1,4 @@
+import '../utils/getMUIThemeCustoimzationType';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { Localization } from '@mui/material/locale';
 type WebProsThemeProps = {

package/dist/src/providers/WebProsTheme.js

@@ -4,22 +4,28 @@ import { useContext, useMemo } from 'react';
 import { CssBaseline, createTheme, ThemeProvider } from '@mui/material';
 import { deepmerge } from '@mui/utils';
 import { ThemeModeContext } from '../providers/ThemeModeProvider';
-import { ThemeSchemeContext } from '../providers/ThemeSchemeProvider';
+import '../utils/getMUIThemeCustoimzationType';
 import { getMUIPalette } from '../utils/getMUIPalette';
 import { getMUIComponents } from '../utils/getMUIComponents';
 import { enUS } from '@mui/material/locale';
 import { patchMUIShadows } from '../utils/patchMUIShadows';
+import { ThemeSchemeDefault } from '../tokens/ThemeScheme';
+import { getMUITypography } from '../utils/getMUITypography';
 export const WebProsTheme = ({ children, mode, localization = enUS }) => {
     const themeModeContext = useContext(ThemeModeContext);
-    const { themeScheme } = useContext(ThemeSchemeContext);
     const themeMode = mode !== null && mode !== void 0 ? mode : themeModeContext.themeMode;
+    const typography = getMUITypography();
     const webprosTheme = useMemo(() => {
-        const muiPalette = getMUIPalette(themeMode, themeScheme);
-        let theme = createTheme(muiPalette, localization);
+        const muiPalette = getMUIPalette(themeMode, ThemeSchemeDefault);
+        let theme = createTheme({
+            palette: muiPalette.palette,
+            colors: muiPalette.colors,
+            typography: Object.assign(Object.assign({}, getMUITypography()), { fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", fontSize: 14, fontWeightLight: 300, fontWeightRegular: 400, fontWeightMedium: 500, fontWeightBold: 700, h1: Object.assign({}, typography.DisplayLarge), h2: Object.assign({}, typography.DisplayMedium), h3: Object.assign({}, typography.DisplaySmall), h4: Object.assign({}, typography.HeadlineLarge), h5: Object.assign({}, typography.HeadlineMedium), h6: Object.assign({}, typography.HeadlineSmall), subtitle1: Object.assign({}, typography.TitleLarge), subtitle2: Object.assign({}, typography.TitleMedium), body1: Object.assign({}, typography.BodyMedium), body2: Object.assign({}, typography.BodySmall), button: Object.assign({}, typography.HeadlineLarge), caption: Object.assign({}, typography.BodySmall), overline: Object.assign({}, typography.LabelSmall) }),
+        }, localization);
         patchMUIShadows(theme);
         theme = deepmerge(theme, getMUIComponents(theme, themeMode));
         return theme;
-    }, [themeMode, themeScheme, localization]);
+    }, [themeMode, localization]);
     return (_jsxs(ThemeProvider, { theme: webprosTheme, children: [_jsx(CssBaseline, { enableColorScheme: true }), children] }));
 };
 export default WebProsTheme;

package/dist/src/shared/rippleEnterKeyframe.d.ts

@@ -0,0 +1,6 @@
+export declare const rippleEnterKeyframe: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;

package/dist/src/shared/rippleEnterKeyframe.js

@@ -0,0 +1,12 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { keyframes } from '@mui/material';
+export const rippleEnterKeyframe = keyframes `
+    0% {
+        transform: scale(0);
+        opacity: 0.3;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+`;

package/dist/src/shared/viewContext/index.d.ts

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

package/dist/src/shared/viewContext/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './viewContext';

package/dist/src/shared/viewContext/viewContext.d.ts

@@ -0,0 +1,4 @@
+export type ViewContext = 'inverse';
+export interface ComponentWithViewContextOwnProps {
+    viewContext?: ViewContext;
+}

package/dist/src/shared/viewContext/viewContext.js

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

package/dist/src/style/additional-color-palette.d.ts

@@ -1,3 +1 @@
-export declare const AdditionalColorPalette: ({ mode }: {
-    mode: "light" | "dark";
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const AdditionalColorPalette: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/style/additional-color-palette.js

@@ -1,13 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { useContext } from 'react';
 import Grid from '@mui/material/Grid2/Grid2';
-import { ThemeSchemeContext } from '../providers/ThemeSchemeProvider';
 import { ColorItem } from '@storybook/addon-docs/blocks';
-export const AdditionalColorPalette = ({ mode = 'light' }) => {
-    const { themeScheme } = useContext(ThemeSchemeContext);
-    const theme = themeScheme[mode];
-    return (_jsx(Grid, { container: true, rowSpacing: 2, direction: 'column', children: Object.entries(theme.additionalColors).map(([key, val]) => (_jsxs(_Fragment, { children: [_jsx("h3", { id: key, children: key }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Primary", subtitle: "", colors: {
+import { LegacyDarkTokensDefault } from '../tokens/legacyColors';
+export const AdditionalColorPalette = () => {
+    return (_jsx(Grid, { container: true, rowSpacing: 2, direction: 'column', children: Object.entries(LegacyDarkTokensDefault.additionalColors).map(([key, val]) => (_jsxs(_Fragment, { children: [_jsx("h3", { id: key, children: key }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Primary", subtitle: "", colors: {
                             [`theme.custom.${key}[50]`]: val[50],
                             [`theme.custom.${key}[100]`]: val[100],
                             [`theme.custom.${key}[200]`]: val[200],

package/dist/src/style/custom-color-palette.js

@@ -1,75 +1,73 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { useContext } from 'react';
 import Grid from '@mui/material/Grid2/Grid2';
-import { ThemeSchemeContext } from '../providers/ThemeSchemeProvider';
 import { ColorItem } from '@storybook/addon-docs/blocks';
+import { LegacyDarkTokensDefault, LegacyLightTokensDefault, } from '../tokens/legacyColors';
 export const CustomColorPalette = ({ mode }) => {
-    const { themeScheme } = useContext(ThemeSchemeContext);
     const modeTitle = mode === 'light' ? 'Light Theme' : 'Dark Theme';
-    const theme = themeScheme[mode];
+    const palette = mode === 'light' ? LegacyLightTokensDefault : LegacyDarkTokensDefault;
     return (_jsxs(Grid, { container: true, rowSpacing: 2, direction: 'column', children: [_jsx("h3", { id: modeTitle, children: modeTitle }), _jsx("h3", { id: `${mode}-base-colors`, children: 'Base colors' }), _jsx("h3", { id: `${mode}-primary`, children: 'Primary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Primary", subtitle: "", colors: {
-                        'theme.primary': theme.primary,
-                        'theme.onPrimary': theme.onPrimary,
-                        'theme.primaryContainer': theme.primaryContainer,
-                        'theme.onPrimaryContainer': theme.onPrimaryContainer,
+                        'theme.primary': palette.primary,
+                        'theme.onPrimary': palette.onPrimary,
+                        'theme.primaryContainer': palette.primaryContainer,
+                        'theme.onPrimaryContainer': palette.onPrimaryContainer,
                     } }) }), _jsx("h3", { id: `${mode}-secondary`, children: 'Secondary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Secondary", subtitle: "", colors: {
-                        'theme.secondary': theme.secondary,
-                        'theme.onSecondary': theme.onSecondary,
-                        'theme.secondaryContainer': theme.secondaryContainer,
-                        'theme.onSecondaryContainer': theme.onSecondaryContainer,
+                        'theme.secondary': palette.secondary,
+                        'theme.onSecondary': palette.onSecondary,
+                        'theme.secondaryContainer': palette.secondaryContainer,
+                        'theme.onSecondaryContainer': palette.onSecondaryContainer,
                     } }) }), _jsx("h3", { id: `${mode}-tertiary`, children: 'Tertiary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Tertiary", subtitle: "", colors: {
-                        'theme.tertiary': theme.tertiary,
-                        'theme.onTertiary': theme.onTertiary,
-                        'theme.tertiaryContainer': theme.tertiaryContainer,
-                        'theme.onTertiaryContainer': theme.onTertiaryContainer,
+                        'theme.tertiary': palette.tertiary,
+                        'theme.onTertiary': palette.onTertiary,
+                        'theme.tertiaryContainer': palette.tertiaryContainer,
+                        'theme.onTertiaryContainer': palette.onTertiaryContainer,
                     } }) }), _jsx("h3", { id: `${mode}-error`, children: 'Error' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Error", subtitle: "", colors: {
-                        'theme.error': theme.error,
-                        'theme.onError': theme.onError,
-                        'theme.errorContainer': theme.errorContainer,
-                        'theme.onErrorContainer': theme.onErrorContainer,
+                        'theme.error': palette.error,
+                        'theme.onError': palette.onError,
+                        'theme.errorContainer': palette.errorContainer,
+                        'theme.onErrorContainer': palette.onErrorContainer,
                     } }) }), _jsx("h3", { id: `${mode}-surface`, children: 'Surface' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Surface", subtitle: "", colors: {
-                        'theme.surfaceDim': theme.surfaceDim,
-                        'theme.surface': theme.surface,
-                        'theme.surfaceBright': theme.surfaceBright,
+                        'theme.surfaceDim': palette.surfaceDim,
+                        'theme.surface': palette.surface,
+                        'theme.surfaceBright': palette.surfaceBright,
                     } }) }), _jsx("h3", { id: `${mode}-surface-container`, children: 'Surface container' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Surface container", subtitle: "", colors: {
-                        'theme.surfaceContainerLowest ': theme.surfaceContainerLowest,
-                        'theme.surfaceContainerLow': theme.surfaceContainerLow,
-                        'theme.surfaceContainer': theme.surfaceContainer,
-                        'theme.surfaceContainerHigh': theme.surfaceContainerHigh,
-                        'theme.surfaceContainerHighest': theme.surfaceContainerHighest,
+                        'theme.surfaceContainerLowest ': palette.surfaceContainerLowest,
+                        'theme.surfaceContainerLow': palette.surfaceContainerLow,
+                        'theme.surfaceContainer': palette.surfaceContainer,
+                        'theme.surfaceContainerHigh': palette.surfaceContainerHigh,
+                        'theme.surfaceContainerHighest': palette.surfaceContainerHighest,
                     } }) }), _jsx("h3", { id: `${mode}-on-surface`, children: 'On surface' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "On surface", subtitle: "", colors: {
-                        'theme.onSurface ': theme.onSurface,
-                        'theme.onSurfaceVariant ': theme.onSurfaceVariant,
-                        'theme.outline ': theme.outline,
-                        'theme.outlineVariant ': theme.outlineVariant,
+                        'theme.onSurface ': palette.onSurface,
+                        'theme.onSurfaceVariant ': palette.onSurfaceVariant,
+                        'theme.outline ': palette.outline,
+                        'theme.outlineVariant ': palette.outlineVariant,
                     } }) }), _jsx("h3", { id: `${mode}-inverse`, children: 'Inverse' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Inverse", subtitle: "", colors: {
-                        'theme.inverseSurface ': theme.inverseSurface,
-                        'theme.inversePrimary ': theme.inversePrimary,
-                        'theme.inverseOnSurface ': theme.inverseOnSurface,
+                        'theme.inverseSurface ': palette.inverseSurface,
+                        'theme.inversePrimary ': palette.inversePrimary,
+                        'theme.inverseOnSurface ': palette.inverseOnSurface,
                     } }) }), _jsx("h3", { id: `${mode}-shadow-and-scrim`, children: 'Shadow and Scrim' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Shadow and Scrim", subtitle: "", colors: {
-                        'theme.shadow ': theme.shadow,
-                        'theme.scrim ': theme.scrim,
+                        'theme.shadow ': palette.shadow,
+                        'theme.scrim ': palette.scrim,
                     } }) }), _jsx("h3", { id: `${mode}-custom-colors`, children: 'Custom state colors' }), _jsx("h3", { id: `${mode}-info`, children: 'Info' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Info", subtitle: "", colors: {
-                        'theme.info': theme.info,
-                        'theme.onInfo': theme.onInfo,
-                        'theme.infoContainer': theme.infoContainer,
-                        'theme.onInfoContainer': theme.onInfoContainer,
+                        'theme.info': palette.info,
+                        'theme.onInfo': palette.onInfo,
+                        'theme.infoContainer': palette.infoContainer,
+                        'theme.onInfoContainer': palette.onInfoContainer,
                     } }) }), _jsx("h3", { id: `${mode}-warning`, children: 'Warning' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Warning", subtitle: "", colors: {
-                        'theme.warning': theme.warning,
-                        'theme.onWarning': theme.onWarning,
-                        'theme.warningContainer': theme.warningContainer,
-                        'theme.onWarningContainer': theme.onWarningContainer,
+                        'theme.warning': palette.warning,
+                        'theme.onWarning': palette.onWarning,
+                        'theme.warningContainer': palette.warningContainer,
+                        'theme.onWarningContainer': palette.onWarningContainer,
                     } }) }), _jsx("h3", { id: `${mode}-success`, children: 'Success' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Success", subtitle: "", colors: {
-                        'theme.success': theme.success,
-                        'theme.onSuccess': theme.onSuccess,
-                        'theme.successContainer': theme.successContainer,
-                        'theme.onSuccessContainer': theme.onSuccessContainer,
+                        'theme.success': palette.success,
+                        'theme.onSuccess': palette.onSuccess,
+                        'theme.successContainer': palette.successContainer,
+                        'theme.onSuccessContainer': palette.onSuccessContainer,
                     } }) }), _jsx("h3", { id: `${mode}-utility-colors`, children: 'Utility colors' }), _jsx("h3", { id: `${mode}-undefined`, children: 'Undefined' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Undefined", subtitle: "", colors: {
-                        'theme.undefined': theme.undefined,
+                        'theme.undefined': palette.undefined,
                     } }) }), _jsx("h3", { id: `${mode}-supportive`, children: 'Supportive' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Supportive", subtitle: "", colors: {
-                        'theme.supportive': theme.supportive,
+                        'theme.supportive': palette.supportive,
                     } }) }), _jsx("h3", { id: `${mode}-divider`, children: 'Outline' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Outline", subtitle: "", colors: {
-                        'theme.outline': theme.outline,
+                        'theme.outline': palette.outline,
                     } }) })] }));
 };

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

@@ -1,96 +1,14 @@
-import { AdditionalColorTone } from './Tone';
-export type AdditionalColors = {
-    red: AdditionalColorTone;
-    pink: AdditionalColorTone;
-    purple: AdditionalColorTone;
-    deepPurple: AdditionalColorTone;
-    indigo: AdditionalColorTone;
-    blue: AdditionalColorTone;
-    lightBlue: AdditionalColorTone;
-    cyan: AdditionalColorTone;
-    teal: AdditionalColorTone;
-    green: AdditionalColorTone;
-    lightGreen: AdditionalColorTone;
-    lime: AdditionalColorTone;
-    yellow: AdditionalColorTone;
-    amber: AdditionalColorTone;
-    orange: AdditionalColorTone;
-    deepOrange: AdditionalColorTone;
-    brown: AdditionalColorTone;
-};
-export type AdditionalColorKey = keyof AdditionalColors;
-export type ThemeColorTokens = {
-    primary: string;
-    onPrimary: string;
-    primaryContainer: string;
-    onPrimaryContainer: string;
-    secondary: string;
-    onSecondary: string;
-    secondaryContainer: string;
-    onSecondaryContainer: string;
-    tertiary: string;
-    onTertiary: string;
-    tertiaryContainer: string;
-    onTertiaryContainer: string;
-    error: string;
-    onError: string;
-    errorContainer: string;
-    onErrorContainer: string;
-    errorFixedDim: string;
-    primaryFixed: string;
-    primaryFixedDim: string;
-    onPrimaryFixed: string;
-    onPrimaryFixedVariant: string;
-    secondaryFixed: string;
-    secondaryFixedDim: string;
-    onSecondaryFixed: string;
-    onSecondaryFixedVariant: string;
-    tertiaryFixed: string;
-    tertiaryFixedDim: string;
-    onTertiaryFixed: string;
-    onTertiaryFixedVariant: string;
-    surface: string;
-    onSurface: string;
-    surfaceDim: string;
-    surfaceBright: string;
-    surfaceContainerLowest: string;
-    surfaceContainerLow: string;
-    surfaceContainer: string;
-    surfaceContainerHigh: string;
-    surfaceContainerHighest: string;
-    surfaceVariant: string;
-    onSurfaceVariant: string;
-    outline: string;
-    outlineVariant: string;
-    inverseSurface: string;
-    inverseOnSurface: string;
-    inversePrimary: string;
-    shadow: string;
-    scrim: string;
-    surfaceTint: string;
-    background: string;
-    onBackground: string;
-    info: string;
-    onInfo: string;
-    infoContainer: string;
-    onInfoContainer: string;
-    infoFixedDim: string;
-    success: string;
-    onSuccess: string;
-    successContainer: string;
-    onSuccessContainer: string;
-    successFixedDim: string;
-    warning: string;
-    onWarning: string;
-    warningContainer: string;
-    onWarningContainer: string;
-    warningFixedDim: string;
-    undefined: string;
-    onUndefined: string;
-    undefinedContainer: string;
-    onUndefinedContainer: string;
-    supportive: string;
-    additionalColors: AdditionalColors;
+import { ThemeColorTokensLegacy } from '../tokens/legacyColors/ThemeColorTokensLegacy';
+import { Schemes, SchemesGenerated, StateLayers, StateLayersGenerated, InverseSchemes, InverseSchemesGenerated, InverseStateLayers, InverseStateLayersGenerated } from '../tokens/colors';
+export type ThemeColorTokens = ThemeColorTokensLegacy & {
+    schemes: Schemes;
+    stateLayers: StateLayers;
+    inverseSchemes: InverseSchemes;
+    inverseStateLayers: InverseStateLayers;
+    generatedSchemes: SchemesGenerated;
+    generatedStateLayers: StateLayersGenerated;
+    generatedInverseSchemes: InverseSchemesGenerated;
+    generatedInverseStateLayers: InverseStateLayersGenerated;
 };
 export declare const LightTokensDefault: ThemeColorTokens;
 export declare const DarkTokensDefault: ThemeColorTokens;