@webpros/mui-theme 0.1.6 → 0.2.0

package/dist/src/tokens/legacyColors/ThemeColorTokensLegacy.d.ts

@@ -0,0 +1,74 @@
+import { AdditionalColors } from '../../tokens/legacyColors/additionalColors/additionalColors';
+export type ThemeColorTokensLegacy = {
+    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;
+};

package/dist/src/tokens/legacyColors/ThemeColorTokensLegacy.js

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

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

@@ -0,0 +1,21 @@
+import { AdditionalColorTone } from '../../../tokens/legacyColors/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;

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

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

package/dist/src/tokens/{additionalColors → legacyColors/additionalColors}/index.d.ts

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

package/dist/src/tokens/{additionalColors → legacyColors/additionalColors}/index.js

@@ -3,3 +3,4 @@
 // 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';
+export * from './additionalColors';

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

@@ -0,0 +1,2 @@
+export * from './LegacyLight';
+export * from './LegacyDark';

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

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

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

@@ -0,0 +1,12 @@
+export type M3ShadowLayer = {
+    offsetX: string;
+    offsetY: string;
+    blur: string;
+    spread: string;
+    color: string;
+};
+export type M3ShadowTokenName = 'Shadows-1' | 'Shadows-2' | 'Shadows-3' | 'Shadows-4';
+export type M3ShadowTokens = Record<M3ShadowTokenName, M3ShadowLayer[]>;
+export declare const shadowTokens: M3ShadowTokens;
+export declare const shadowCssValues: Record<M3ShadowTokenName, string>;
+export declare const muiShadows: string[];

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

@@ -0,0 +1,112 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Auto-generated file - do not edit manually
+export const shadowTokens = {
+    'Shadows-1': [
+        {
+            offsetX: '0px',
+            offsetY: '4px',
+            blur: '3px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.03)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '2px',
+            blur: '2px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.04)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '1px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+    ],
+    'Shadows-2': [
+        {
+            offsetX: '0px',
+            offsetY: '5px',
+            blur: '3px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '2px',
+            blur: '2px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.08)',
+        },
+        { offsetX: '0px', offsetY: '1px', blur: '1px', spread: '0px', color: 'rgba(0, 0, 0, 0.1)' },
+    ],
+    'Shadows-3': [
+        {
+            offsetX: '0px',
+            offsetY: '10px',
+            blur: '6px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '4px',
+            blur: '4px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.08)',
+        },
+        { offsetX: '0px', offsetY: '1px', blur: '2px', spread: '0px', color: 'rgba(0, 0, 0, 0.1)' },
+    ],
+    'Shadows-4': [
+        {
+            offsetX: '0px',
+            offsetY: '17px',
+            blur: '14px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.05)',
+        },
+        {
+            offsetX: '0px',
+            offsetY: '11px',
+            blur: '11px',
+            spread: '0px',
+            color: 'rgba(0, 0, 0, 0.08)',
+        },
+        { offsetX: '0px', offsetY: '0px', blur: '6px', spread: '0px', color: 'rgba(0, 0, 0, 0.1)' },
+    ],
+};
+export const shadowCssValues = {
+    'Shadows-1': '0px 4px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.05)',
+    'Shadows-2': '0px 5px 3px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.1)',
+    'Shadows-3': '0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1)',
+    'Shadows-4': '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+};
+// Preserve the array structure so we can extend shadow slots without refactoring downstream overrides.
+export const muiShadows = [
+    '0px 4px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.05)',
+    '0px 4px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.05)',
+    '0px 5px 3px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.1)',
+    '0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    '0px 17px 14px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+];

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

@@ -0,0 +1,2 @@
+export * from './typescale';
+export * from './typography';

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

@@ -0,0 +1,4 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Auto-generated file - do not edit manually
+export * from './typescale';
+export * from './typography';

package/dist/src/tokens/typography/typescale.d.ts

@@ -0,0 +1,28 @@
+export interface TypescaleTypographyVariants {
+    BodyLarge: React.CSSProperties;
+    BodyLargeProminent: React.CSSProperties;
+    BodyMedium: React.CSSProperties;
+    BodyMediumProminent: React.CSSProperties;
+    BodySmall: React.CSSProperties;
+    BodySmallProminent: React.CSSProperties;
+    DisplayLarge: React.CSSProperties;
+    DisplayMedium: React.CSSProperties;
+    DisplaySmall: React.CSSProperties;
+    DisplayXLarge: React.CSSProperties;
+    HeadlineLarge: React.CSSProperties;
+    HeadlineMedium: React.CSSProperties;
+    HeadlineSmall: React.CSSProperties;
+    LabelLarge: React.CSSProperties;
+    LabelLargeProminent: React.CSSProperties;
+    LabelMedium: React.CSSProperties;
+    LabelMediumProminent: React.CSSProperties;
+    LabelSmall: React.CSSProperties;
+    LabelSmallProminent: React.CSSProperties;
+    TitleLarge: React.CSSProperties;
+    TitleMedium: React.CSSProperties;
+    TitleSmall: React.CSSProperties;
+}
+export type TypescaleTypographyVariantsBooleans = {
+    [K in keyof TypescaleTypographyVariants]: boolean;
+};
+export declare const TypographyVariantsNames: (keyof TypescaleTypographyVariants)[];

package/dist/src/tokens/typography/typescale.js

@@ -0,0 +1,26 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Auto-generated file - do not edit manually
+export const TypographyVariantsNames = [
+    'BodyLarge',
+    'BodyLargeProminent',
+    'BodyMedium',
+    'BodyMediumProminent',
+    'BodySmall',
+    'BodySmallProminent',
+    'DisplayLarge',
+    'DisplayMedium',
+    'DisplaySmall',
+    'DisplayXLarge',
+    'HeadlineLarge',
+    'HeadlineMedium',
+    'HeadlineSmall',
+    'LabelLarge',
+    'LabelLargeProminent',
+    'LabelMedium',
+    'LabelMediumProminent',
+    'LabelSmall',
+    'LabelSmallProminent',
+    'TitleLarge',
+    'TitleMedium',
+    'TitleSmall',
+];

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

@@ -0,0 +1,2 @@
+import { TypescaleTypographyVariants } from '../../tokens/typography/typescale';
+export declare const typographyVariants: TypescaleTypographyVariants;

package/dist/src/tokens/typography/typography.js

@@ -0,0 +1,156 @@
+export const typographyVariants = {
+    BodyLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '16px',
+        lineHeight: '24px',
+        letterSpacing: '0.5px',
+        fontWeight: 400,
+    },
+    BodyLargeProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '16px',
+        lineHeight: '24px',
+        letterSpacing: '0.5px',
+        fontWeight: 600,
+    },
+    BodyMedium: {
+        fontFamily: 'Roboto',
+        fontWeight: 400,
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.25px',
+    },
+    BodyMediumProminent: {
+        fontFamily: 'Roboto',
+        fontWeight: 600,
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.25px',
+    },
+    BodySmall: {
+        fontFamily: 'Roboto',
+        fontSize: '12px',
+        lineHeight: '16px',
+        letterSpacing: '0.4px',
+        fontWeight: 400,
+    },
+    BodySmallProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '12px',
+        lineHeight: '16px',
+        letterSpacing: '0.4px',
+        fontWeight: 600,
+    },
+    DisplayLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '45px',
+        lineHeight: '52px',
+        letterSpacing: '-0.25px',
+        fontWeight: 400,
+    },
+    DisplayMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '32px',
+        lineHeight: '44px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    DisplaySmall: {
+        fontFamily: 'Roboto',
+        fontSize: '24px',
+        lineHeight: '32px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    DisplayXLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '52px',
+        lineHeight: '86px',
+        letterSpacing: '-0.25px',
+        fontWeight: 400,
+    },
+    HeadlineLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '20px',
+        lineHeight: '28px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    HeadlineMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '18px',
+        lineHeight: '28px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    HeadlineSmall: {
+        fontFamily: 'Roboto',
+        fontSize: '16px',
+        lineHeight: '28px',
+        letterSpacing: '0px',
+        fontWeight: 700,
+    },
+    LabelLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '17px',
+        lineHeight: '24px',
+        letterSpacing: '0.1px',
+        fontWeight: 400,
+    },
+    LabelLargeProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '17px',
+        lineHeight: '24px',
+        letterSpacing: '0.1px',
+        fontWeight: 500,
+    },
+    LabelMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.5px',
+        fontWeight: 400,
+    },
+    LabelMediumProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.5px',
+        fontWeight: 500,
+    },
+    LabelSmall: {
+        fontFamily: 'Roboto',
+        fontSize: '13px',
+        lineHeight: '16px',
+        letterSpacing: '0.5px',
+        fontWeight: 400,
+    },
+    LabelSmallProminent: {
+        fontFamily: 'Roboto',
+        fontSize: '13px',
+        lineHeight: '16px',
+        letterSpacing: '0.5px',
+        fontWeight: 500,
+    },
+    TitleLarge: {
+        fontFamily: 'Roboto',
+        fontSize: '20px',
+        lineHeight: '24px',
+        letterSpacing: '0px',
+        fontWeight: 400,
+    },
+    TitleMedium: {
+        fontFamily: 'Roboto',
+        fontSize: '15px',
+        lineHeight: '20px',
+        letterSpacing: '0.15px',
+        fontWeight: 400,
+    },
+    TitleSmall: {
+        fontFamily: 'Roboto',
+        fontSize: '14px',
+        lineHeight: '20px',
+        letterSpacing: '0.1px',
+        fontWeight: 500,
+    },
+};

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

@@ -0,0 +1 @@
+export declare const flatten: <T>(array: (T | T[])[]) => T[];

package/dist/src/utils/flatten.js

@@ -0,0 +1,12 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const flatten = (array) => {
+    return array.reduce((acc, el) => {
+        if (Array.isArray(el)) {
+            acc.push(...el);
+        }
+        else {
+            acc.push(el);
+        }
+        return acc;
+    }, []);
+};

package/dist/src/utils/getMUIComponents.js

@@ -1,4 +1,4 @@
-import { getAccordion, getAlert, getAppBar, getBadge, getButton, getCard, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getSwitch, getTab, getTabList, getTextField, getToggleButton, getToggleButtonGroup, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getDataGrid, getTable, getAutocomplete, getInputBase, } from '../components';
+import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCard, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getToggleButton, getToggleButtonGroup, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getDataGrid, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFormHelperText, getRadio, } from '../components';
 export const getMUIComponents = (theme, _mode) => ({
-    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getAccordion(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getSelect(theme)), getTimePicker(theme)), getInputLabel(theme)), getButton(theme)), getCard(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getSwitch(theme)), getTab(theme)), getTabList(theme)), getTextField(theme)), getToggleButton(theme)), getToggleButtonGroup(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getDataGrid(theme)), getTable(theme)), getAutocomplete(theme)), getInputBase(theme)),
+    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getBackdrop(theme)), getAccordion(theme)), getAccordionSummary(theme)), getAccordionDetails(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getBreadcrumbs(theme)), getSelect()), getTimePicker(theme)), getInputLabel()), getButton(theme)), getCard(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getList(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getPopover(theme)), getSwitch(theme)), getTab(theme)), getTabs(theme)), getTextField(theme)), getToggleButton(theme)), getToggleButtonGroup(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getDataGrid(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput()), getFormHelperText()), getRadio(theme)),
 });

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

@@ -1,13 +1,8 @@
 import { ThemeOptions } from '@mui/material';
-import { TonalPalette } from '../tokens/TonalPalette';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { ThemeScheme } from '../tokens/ThemeScheme';
-import { AdditionalColorTone } from '../tokens/Tone';
-declare module '@mui/material/styles/createTheme' {
-    interface ThemeOptions {
-        tones?: TonalPalette;
-    }
-}
+import { Schemes, StateLayers } from '../tokens/colors';
+import { AdditionalColorTone } from '../tokens/legacyColors/Tone';
 declare module '@mui/material/styles/createPalette' {
     interface M3Palette {
         onPrimary: PaletteColor;
@@ -88,7 +83,7 @@ declare module '@mui/material/styles/createPalette' {
         deepOrange: AdditionalColorTone;
         brown: AdditionalColorTone;
     }
-    interface M3PaletteOptions extends Record<keyof M3Palette, PaletteColorOptions> {
+    interface M3PaletteOptions extends Record<keyof M3Palette, PaletteColorOptions | StateLayers | Schemes> {
         themeMode: string;
         additional: M3AdditionalColors;
     }
@@ -98,4 +93,4 @@ declare module '@mui/material/styles/createPalette' {
     interface PaletteOptions extends M3PaletteOptions {
     }
 }
-export declare const getMUIPalette: (themeMode: ThemeMode, themescheme: ThemeScheme) => ThemeOptions;
+export declare const getMUIPalette: (themeMode: ThemeMode, themeScheme: ThemeScheme) => ThemeOptions;

package/dist/src/utils/getMUIPalette.js

@@ -1,12 +1,35 @@
-export const getMUIPalette = (themeMode, themescheme) => {
-    const scheme = themescheme[themeMode];
+import { getBlendSchemaWithStateLayer, getInverseBlendSchemaWithStateLayer, } from '../index';
+export const getMUIPalette = (themeMode, themeScheme) => {
+    const scheme = themeScheme[themeMode];
     return {
         palette: {
+            /** Basic MUI overrides */
             themeMode,
             primary: {
                 main: scheme.primary,
                 contrastText: scheme.onPrimary,
             },
+            error: {
+                main: scheme.schemes.status.error,
+                contrastText: scheme.schemes.status.onError,
+            },
+            text: {
+                primary: scheme.schemes.surfaces.onSurface,
+                secondary: scheme.schemes.surfaces.onSurfaceVariant,
+                disabled: scheme.stateLayers.surfaces.onSurface.opacity38,
+            },
+            info: {
+                main: scheme.schemes.status.info,
+                contrastText: scheme.schemes.status.onInfo,
+            },
+            success: {
+                main: scheme.schemes.status.success,
+                contrastText: scheme.schemes.status.onSuccess,
+            },
+            warning: {
+                main: scheme.schemes.status.warning,
+                contrastText: scheme.schemes.status.onWarning,
+            },
             onPrimary: {
                 main: scheme.onPrimary,
                 contrastText: scheme.primary,
@@ -51,10 +74,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.onTertiaryContainer,
                 contrastText: scheme.tertiaryContainer,
             },
-            error: {
-                main: scheme.error,
-                contrastText: scheme.onError,
-            },
             onError: {
                 main: scheme.onError,
                 contrastText: scheme.error,
@@ -162,9 +181,23 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.inverseOnSurface,
                 contrastText: scheme.inverseSurface,
             },
-            action: {},
+            action: {
+                // active
+                hover: scheme.stateLayers.surfaces.onSurface.opacity08,
+                hoverOpacity: scheme.generatedStateLayers['stateLayers.surfaces.onSurface.opacity08'].a,
+                selected: scheme.schemes.base.secondaryContainer, // TODO verify
+                // TODO verify
+                selectedOpacity: scheme.generatedStateLayers['stateLayers.surfaces.onSurface.opacity12'].a,
+                disabled: scheme.stateLayers.surfaces.onSurface.opacity38,
+                // disabledBackground:
+                disabledOpacity: scheme.generatedStateLayers['stateLayers.surfaces.onSurface.opacity38'].a,
+                // TODO verify
+                // focus
+                // focusOpacity
+                // activatedOpacity
+            },
             shadow: {
-                main: scheme.shadow,
+                main: scheme.shadow, // TODO: verify if it is needed
             },
             scrim: {
                 main: scheme.scrim,
@@ -184,14 +217,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 white: scheme.background,
                 black: scheme.onBackground,
             },
-            text: {
-                primary: scheme.onSurface,
-                secondary: scheme.onSecondaryContainer,
-            },
-            info: {
-                main: scheme.info,
-                contrastText: scheme.onInfo,
-            },
             onInfo: {
                 main: scheme.onInfo,
                 contrastText: scheme.info,
@@ -204,10 +229,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.onInfoContainer,
                 contrastText: scheme.infoContainer,
             },
-            success: {
-                main: scheme.success,
-                contrastText: scheme.onSuccess,
-            },
             onSuccess: {
                 main: scheme.onSuccess,
                 contrastText: scheme.success,
@@ -220,10 +241,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.onSuccessContainer,
                 contrastText: scheme.successContainer,
             },
-            warning: {
-                main: scheme.warning,
-                contrastText: scheme.onWarning,
-            },
             onWarning: {
                 main: scheme.onWarning,
                 contrastText: scheme.warning,
@@ -258,6 +275,13 @@ export const getMUIPalette = (themeMode, themescheme) => {
             divider: scheme.outlineVariant,
             additional: scheme.additionalColors,
         },
-        tones: themescheme.tones,
+        colors: {
+            schemes: scheme.schemes,
+            stateLayers: scheme.stateLayers,
+            inverseSchemes: scheme.inverseSchemes,
+            inverseStateLayers: scheme.inverseStateLayers,
+            blendSchemaWithStateLayer: getBlendSchemaWithStateLayer(scheme.generatedSchemes, scheme.generatedStateLayers),
+            blendInverseSchemaWithStateLayer: getInverseBlendSchemaWithStateLayer(scheme.generatedInverseSchemes, scheme.generatedInverseStateLayers),
+        },
     };
 };