@webpros/mui-theme 0.1.5 → 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/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;

package/dist/src/tokens/ThemeColorTokens.js

@@ -1,172 +1,8 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { additionalColors } from './additionalColors';
+import { DarkSchemes, DarkSchemesGenerated, DarkStateLayers, DarkStateLayersGenerated, DarkInverseSchemes, DarkInverseSchemesGenerated, DarkInverseStateLayers, DarkInverseStateLayersGenerated, LightSchemes, LightSchemesGenerated, LightStateLayers, LightStateLayersGenerated, LightInverseSchemes, LightInverseSchemesGenerated, LightInverseStateLayers, LightInverseStateLayersGenerated, } from '../tokens/colors';
+import { LegacyDarkTokensDefault, LegacyLightTokensDefault, } from '../tokens/legacyColors';
 // 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,
-};
+export const LightTokensDefault = Object.assign(Object.assign({}, LegacyLightTokensDefault), { schemes: LightSchemes, stateLayers: LightStateLayers, inverseSchemes: LightInverseSchemes, inverseStateLayers: LightInverseStateLayers, generatedSchemes: LightSchemesGenerated, generatedStateLayers: LightStateLayersGenerated, generatedInverseSchemes: LightInverseSchemesGenerated, generatedInverseStateLayers: LightInverseStateLayersGenerated });
 // 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,
-};
+export const DarkTokensDefault = Object.assign(Object.assign({}, LegacyDarkTokensDefault), { schemes: DarkSchemes, stateLayers: DarkStateLayers, inverseSchemes: DarkInverseSchemes, inverseStateLayers: DarkInverseStateLayers, generatedSchemes: DarkSchemesGenerated, generatedStateLayers: DarkStateLayersGenerated, generatedInverseSchemes: DarkInverseSchemesGenerated, generatedInverseStateLayers: DarkInverseStateLayersGenerated });

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

@@ -1,12 +1,9 @@
 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;
 };