@webpros/mui-theme 0.3.1 → 0.3.3

package/README.md

@@ -79,6 +79,57 @@ const App = () => (
 import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-theme';
 ```
 
+# Development
+
+## Using Custom ESLint Rules
+
+The package exports custom ESLint rules to enforce Material Design 3 design system best practices. To use them in your project:
+
+```js
+// eslint.config.js
+import webprosMuiThemeRules from '@webpros/mui-theme/eslint';
+
+export default [
+  // ... your other config
+  {
+    plugins: {
+      '@webpros/mui-theme': webprosMuiThemeRules,
+    },
+    rules: {
+      '@webpros/mui-theme/no-palette-usage': 'error',
+      '@webpros/mui-theme/no-standard-typography-variants': 'error',
+      '@webpros/mui-theme/no-hardcoded-typography-in-sx': 'error',
+    },
+  },
+];
+```
+
+For detailed documentation of available rules, see [configs/eslint/README.md](configs/eslint/README.md).
+
+## Adding New Custom ESLint Rules
+
+To add a new custom rule:
+
+1. Create a new file in `configs/eslint/rules/` with your rule implementation (use CommonJS format)
+2. Export the rule using `module.exports`
+3. Import and add it to `configs/eslint/index.cjs` using `require()`
+4. Add the rule to `eslint.config.js` in the plugins and rules sections
+5. Document the rule in `configs/eslint/README.md`
+
+### Testing Custom Rules
+
+Test your custom rules by running ESLint on specific files:
+
+```bash
+# Test on a specific file
+npx eslint src/path/to/file.ts
+
+# Test on all TypeScript files
+npx eslint 'src/**/*.{ts,tsx}'
+```
+
+For more information about the existing custom rules and their usage, see [eslint/README.md](eslint/README.md).
+
 # Tools configuration
 
 ## Webpack
@@ -86,17 +137,17 @@ import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-th
 If you use Webpack, you probably need to add the following rules to your configuration:
 
 ```js
-  module: {
-    rules: [
-      {
-        test: /\.m?js/,
-        type: "javascript/auto",
-        resolve: {
-          fullySpecified: false,
-        },
+module: {
+  rules: [
+    {
+      test: /\.m?js/,
+      type: 'javascript/auto',
+      resolve: {
+        fullySpecified: false,
       },
-      
-      // your other rules
-    ]
-  }
+    },
+
+    // your other rules
+  ];
+}
 ```

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.3.1",
+    "version": "0.3.3",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -14,7 +14,7 @@
         "theming",
         "ui"
     ],
-    "main": "dist/index.js",
+    "main": "src/index.js",
     "types": "dist/index.d.ts",
     "exports": {
         ".": {
@@ -38,7 +38,9 @@
         "yarn": "^1.22.0"
     },
     "scripts": {
-        "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+        "build": "yarn build:main && yarn build:eslint",
+        "build:main": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+        "build:eslint": "tsc -p ./eslint/tsconfig.eslint.json",
         "storybook:dev": "storybook dev -p 6006",
         "storybook:build": "storybook build",
         "test": "npm run prettier:test && npm run lint && npm run typecheck",
@@ -48,7 +50,7 @@
         "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
         "typecheck": "tsc --noEmit",
         "extract-tokens": "node tools/extractM3Tokens.js",
-        "generate:icons": "node scripts/generate-icons.cjs"
+        "generate:icons": "node tools/generate-icons.js"
     },
     "peerDependencies": {
         "@emotion/react": "^11.14.0",

package/dist/src/components/feedback/Dialog/Dialog.theme.js

@@ -1,7 +1,7 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import { modalClasses, dialogContentClasses, dialogClasses, iconButtonClasses, } from '@mui/material';
 export const getDialog = (theme) => {
-    const { spacing, palette, colors } = theme;
+    const { spacing, colors } = theme;
     const closeButtonPosition = {
         position: 'absolute',
         right: spacing(3),
@@ -15,7 +15,7 @@ export const getDialog = (theme) => {
             styleOverrides: {
                 root: {
                     padding: spacing(3.75, 8.25, 2.375, 4.5),
-                    color: palette.onSurface.main,
+                    color: colors.schemes.surfaces.onSurface,
                     [`& + .${dialogContentClasses.root}`]: {
                         paddingTop: '0 !important',
                     },
@@ -55,7 +55,7 @@ export const getDialog = (theme) => {
         MuiDialogContent: {
             styleOverrides: {
                 root: {
-                    color: palette.onSurfaceVariant.main,
+                    color: colors.schemes.surfaces.onSurfaceVariant,
                     padding: spacing(0, 4.5, 1, 4.5),
                 },
                 dividers: {
@@ -88,7 +88,7 @@ export const getDialog = (theme) => {
         MuiDialogContentText: {
             styleOverrides: {
                 root: {
-                    color: palette.onSurfaceVariant.main,
+                    color: colors.schemes.surfaces.onSurfaceVariant,
                 },
             },
         },

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

@@ -6,6 +6,6 @@ interface M3AppBar {
         variants?: ComponentsVariants['MuiAppBar'];
     };
 }
-export declare const getAppBar: (theme: Theme) => M3AppBar;
+export declare const getAppBar: (_theme: Theme) => M3AppBar;
 declare const _default: {};
 export default _default;

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

@@ -1,21 +1,10 @@
-export const getAppBar = (theme) => {
-    const { palette } = theme;
+export const getAppBar = (_theme) => {
     return {
         MuiAppBar: {
             defaultProps: {
                 elevation: 0,
                 color: 'default',
             },
-            styleOverrides: {
-                colorDefault: {
-                    background: palette.surface.main,
-                    color: palette.onSurface.main,
-                },
-                colorPrimary: {
-                    background: palette.surface.main,
-                    color: palette.onSurface.main,
-                },
-            },
         },
     };
 };

package/dist/src/index.d.ts

@@ -1,4 +1,5 @@
 export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeProvider';
+export type { WebProsMuiThemeProviderProps } from './providers/WebProsMuiThemeProvider';
 export { useThemeModeContext } from './providers/ThemeModeProvider';
 export * from './utils';
 export * from './tokens';

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

@@ -1,9 +1,25 @@
 import { Localization } from '@mui/material/locale';
 import { ThemeMode } from '../tokens/ThemeMode';
-type WebProsProps = {
+import { ThemeOptions, Theme } from '@mui/material';
+import { M3Components } from '../utils';
+export type WebProsMuiThemeProviderProps = {
     children?: React.ReactNode;
     themeMode?: ThemeMode;
     localization?: Localization;
+    /**
+     * Modifier function to customize theme foundation (palette, typography, spacing, etc.).
+     * This function receives base theme options (without components) and should return modified options.
+     * Changes are applied before component styles are generated.
+     */
+    themeOptionsModifier?: (options: Omit<ThemeOptions, 'components'>) => Omit<ThemeOptions, 'components'>;
+    /**
+     * Modifier function to customize MUI component styles and default props.
+     * This function receives generated component configurations and theme and should return modified configurations.
+     * Changes are applied after the full theme is created.
+     *
+     * **Important:** WebPros component styles are assembled in `getMUIComponents()`.
+     */
+    themeComponentsModifier?: (options: M3Components, theme: Theme) => M3Components;
 };
-declare const WebProsMuiThemeProvider: ({ children, localization, themeMode }: WebProsProps) => import("react/jsx-runtime").JSX.Element;
+declare const WebProsMuiThemeProvider: ({ children, localization, themeMode, themeOptionsModifier, themeComponentsModifier, }: WebProsMuiThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default WebProsMuiThemeProvider;

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, { children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, children: children }) }));
+const WebProsMuiThemeProvider = ({ children, localization, themeMode, themeOptionsModifier, themeComponentsModifier, }) => (_jsx(ThemeModeProvider, { children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, themeOptionsModifier: themeOptionsModifier, themeComponentsModifier: themeComponentsModifier, children: children }) }));
 export default WebProsMuiThemeProvider;

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

@@ -1,10 +1,28 @@
+import { ThemeOptions, Theme } from '@mui/material';
 import '../utils/getMUIThemeCustoimzationType';
+import { M3Components } from '../utils/getMUIComponents';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { Localization } from '@mui/material/locale';
 type WebProsThemeProps = {
     children?: React.ReactNode;
     mode?: ThemeMode;
     localization?: Localization;
+    /**
+     * Modifier function for theme foundation (palette, typography, spacing, etc.).
+     * Applied before component styles generation.
+     *
+     * **Performance Note**: To avoid unnecessary theme recreations, wrap modifier functions
+     * with `useCallback` if they depend on dynamic values, or define them outside component.
+     */
+    themeOptionsModifier?: (options: Omit<ThemeOptions, 'components'>) => Omit<ThemeOptions, 'components'>;
+    /**
+     * Modifier function for MUI component configurations.
+     * Applied after theme creation with access to all theme tokens.
+     *
+     * **Performance Note**: To avoid unnecessary theme recreations, wrap modifier functions
+     * with `useCallback` if they depend on dynamic values, or define them outside component.
+     */
+    themeComponentsModifier?: (options: M3Components, theme: Theme) => M3Components;
 };
-export declare const WebProsTheme: ({ children, mode, localization }: WebProsThemeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WebProsTheme: ({ children, mode, localization, themeOptionsModifier, themeComponentsModifier, }: WebProsThemeProps) => import("react/jsx-runtime").JSX.Element;
 export default WebProsTheme;

package/dist/src/providers/WebProsTheme.js

@@ -11,21 +11,34 @@ 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 }) => {
+export const WebProsTheme = ({ children, mode, localization = enUS, themeOptionsModifier, themeComponentsModifier, }) => {
     const themeModeContext = useContext(ThemeModeContext);
     const themeMode = mode !== null && mode !== void 0 ? mode : themeModeContext.themeMode;
-    const typography = getMUITypography();
     const webprosTheme = useMemo(() => {
+        const typography = getMUITypography();
         const muiPalette = getMUIPalette(themeMode, ThemeSchemeDefault);
-        let theme = createTheme({
+        // Prepare base theme options (without components)
+        const baseThemeOptions = {
             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);
+            typography: Object.assign(Object.assign({}, typography), { 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) }),
+        };
+        // Apply themeOptionsModifier (palette, typography, spacing, etc.)
+        let themeOptions = baseThemeOptions;
+        if (themeOptionsModifier) {
+            themeOptions = themeOptionsModifier(themeOptions);
+        }
+        let theme = createTheme(themeOptions, localization);
         patchMUIShadows(theme);
-        theme = deepmerge(theme, getMUIComponents(theme, themeMode));
+        // Apply themeComponentsModifier (component styles and props)
+        if (themeComponentsModifier) {
+            theme = deepmerge(theme, themeComponentsModifier(getMUIComponents(theme, themeMode), theme));
+        }
+        else {
+            theme = deepmerge(theme, getMUIComponents(theme, themeMode));
+        }
         return theme;
-    }, [themeMode, localization]);
+    }, [themeMode, localization, themeOptionsModifier, themeComponentsModifier]);
     return (_jsxs(ThemeProvider, { theme: webprosTheme, children: [_jsx(CssBaseline, { enableColorScheme: true }), children] }));
 };
 export default WebProsTheme;

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

@@ -1,6 +1,5 @@
-import { ThemeColorTokensLegacy } from '../tokens/legacyColors/ThemeColorTokensLegacy';
 import { Schemes, SchemesGenerated, StateLayers, StateLayersGenerated, InverseSchemes, InverseSchemesGenerated, InverseStateLayers, InverseStateLayersGenerated } from '../tokens/colors';
-export type ThemeColorTokens = ThemeColorTokensLegacy & {
+export type ThemeColorTokens = {
     schemes: Schemes;
     stateLayers: StateLayers;
     inverseSchemes: InverseSchemes;

package/dist/src/tokens/ThemeColorTokens.js

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

package/dist/src/tokens/colors/Dark.js

@@ -298,6 +298,8 @@ export const DarkStateLayers = {
             opacity12: 'rgba(140, 49, 72, 0.12)',
             opacity16: 'rgba(140, 49, 72, 0.16)',
             opacity10: 'rgba(140, 49, 72, 0.1)',
+            opacity56: 'rgba(140, 49, 72, 0.56)',
+            opacity78: 'rgba(140, 49, 72, 0.78)',
         },
         onErrorContainer: {
             opacity08: 'rgba(255, 242, 245, 0.08)',
@@ -399,6 +401,8 @@ export const DarkStateLayers = {
             opacity08: 'rgba(123, 60, 15, 0.08)',
             opacity12: 'rgba(123, 60, 15, 0.12)',
             opacity16: 'rgba(123, 60, 15, 0.16)',
+            opacity56: 'rgba(123, 60, 15, 0.56)',
+            opacity78: 'rgba(123, 60, 15, 0.78)',
         },
         successContainer: {
             opacity08: 'rgba(18, 95, 22, 0.08)',
@@ -470,6 +474,7 @@ export const DarkStateLayers = {
             opacity16: 'rgba(159, 162, 179, 0.16)',
             opacity38: 'rgba(159, 162, 179, 0.38)',
             opacity10: 'rgba(159, 162, 179, 0.1)',
+            opacity78: 'rgba(159, 162, 179, 0.78)',
         },
         shadow: {
             opacity08: 'rgba(0, 0, 0, 0.08)',
@@ -1024,6 +1029,8 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.errorContainer.opacity12': { r: 140, g: 49, b: 72, a: 0.12 },
     'stateLayers.status.errorContainer.opacity16': { r: 140, g: 49, b: 72, a: 0.16 },
     'stateLayers.status.errorContainer.opacity10': { r: 140, g: 49, b: 72, a: 0.1 },
+    'stateLayers.status.errorContainer.opacity56': { r: 140, g: 49, b: 72, a: 0.56 },
+    'stateLayers.status.errorContainer.opacity78': { r: 140, g: 49, b: 72, a: 0.78 },
     'stateLayers.status.onErrorContainer.opacity08': { r: 255, g: 242, b: 245, a: 0.08 },
     'stateLayers.status.onErrorContainer.opacity12': { r: 255, g: 242, b: 245, a: 0.12 },
     'stateLayers.status.onErrorContainer.opacity16': { r: 255, g: 242, b: 245, a: 0.16 },
@@ -1097,6 +1104,8 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.warningContainer.opacity08': { r: 123, g: 60, b: 15, a: 0.08 },
     'stateLayers.status.warningContainer.opacity12': { r: 123, g: 60, b: 15, a: 0.12 },
     'stateLayers.status.warningContainer.opacity16': { r: 123, g: 60, b: 15, a: 0.16 },
+    'stateLayers.status.warningContainer.opacity56': { r: 123, g: 60, b: 15, a: 0.56 },
+    'stateLayers.status.warningContainer.opacity78': { r: 123, g: 60, b: 15, a: 0.78 },
     'stateLayers.status.successContainer.opacity08': { r: 18, g: 95, b: 22, a: 0.08 },
     'stateLayers.status.successContainer.opacity12': { r: 18, g: 95, b: 22, a: 0.12 },
     'stateLayers.status.successContainer.opacity16': { r: 18, g: 95, b: 22, a: 0.16 },
@@ -1146,6 +1155,7 @@ export const DarkStateLayersGenerated = {
     'stateLayers.surfaces.onSurfaceVariant.opacity16': { r: 159, g: 162, b: 179, a: 0.16 },
     'stateLayers.surfaces.onSurfaceVariant.opacity38': { r: 159, g: 162, b: 179, a: 0.38 },
     'stateLayers.surfaces.onSurfaceVariant.opacity10': { r: 159, g: 162, b: 179, a: 0.1 },
+    'stateLayers.surfaces.onSurfaceVariant.opacity78': { r: 159, g: 162, b: 179, a: 0.78 },
     'stateLayers.surfaces.shadow.opacity08': { r: 0, g: 0, b: 0, a: 0.08 },
     'stateLayers.surfaces.shadow.opacity12': { r: 0, g: 0, b: 0, a: 0.12 },
     'stateLayers.surfaces.shadow.opacity16': { r: 0, g: 0, b: 0, a: 0.16 },

package/dist/src/tokens/colors/Light.js

@@ -4,7 +4,7 @@ export const LightSchemes = {
     base: {
         primary: 'rgba(95, 77, 152, 1)',
         onPrimary: 'rgba(255, 255, 255, 1)',
-        primaryContainer: 'rgba(237, 235, 255, 1)',
+        primaryContainer: 'rgba(227, 224, 252, 1)',
         onPrimaryContainer: 'rgba(84, 66, 138, 1)',
         secondary: 'rgba(95, 102, 144, 1)',
         onSecondary: 'rgba(255, 255, 255, 1)',
@@ -14,7 +14,7 @@ export const LightSchemes = {
         onTertiary: 'rgba(255, 255, 255, 1)',
         tertiaryContainer: 'rgba(218, 233, 240, 1)',
         onTertiaryContainer: 'rgba(17, 38, 47, 1)',
-        primaryVariant: 'rgba(120, 100, 183, 1)',
+        primaryVariant: 'rgba(115, 95, 173, 1)',
         onPrimaryVariant: 'rgba(230, 228, 235, 1)',
         onPrimaryBase: 'rgba(255, 255, 255, 1)',
         onPrimaryBaseVariant: 'rgba(230, 228, 235, 1)',
@@ -23,7 +23,7 @@ export const LightSchemes = {
         surfaceTint: 'rgba(86, 77, 130, 1)',
         background: 'rgba(233, 235, 246, 1)',
         onBackground: 'rgba(27, 28, 33, 1)',
-        surface: 'rgba(233, 233, 247, 1)',
+        surface: 'rgba(235, 235, 244, 1)',
         onSurface: 'rgba(27, 28, 33, 1)',
         surfaceVariant: 'rgba(247, 247, 252, 1)',
         onSurfaceVariant: 'rgba(83, 86, 111, 1)',
@@ -128,10 +128,10 @@ export const LightStateLayers = {
             opacity28: 'rgba(255, 255, 255, 0.28)',
         },
         primaryContainer: {
-            opacity08: 'rgba(237, 235, 255, 0.08)',
-            opacity12: 'rgba(237, 235, 255, 0.12)',
-            opacity16: 'rgba(237, 235, 255, 0.16)',
-            opacity10: 'rgba(237, 235, 255, 0.1)',
+            opacity08: 'rgba(227, 224, 252, 0.08)',
+            opacity12: 'rgba(227, 224, 252, 0.12)',
+            opacity16: 'rgba(227, 224, 252, 0.16)',
+            opacity10: 'rgba(227, 224, 252, 0.1)',
         },
         onPrimaryContainer: {
             opacity08: 'rgba(84, 66, 138, 0.08)',
@@ -298,6 +298,8 @@ export const LightStateLayers = {
             opacity12: 'rgba(255, 233, 230, 0.12)',
             opacity16: 'rgba(255, 233, 230, 0.16)',
             opacity10: 'rgba(255, 233, 230, 0.1)',
+            opacity56: 'rgba(255, 233, 230, 0.56)',
+            opacity78: 'rgba(255, 233, 230, 0.78)',
         },
         onErrorContainer: {
             opacity08: 'rgba(155, 30, 30, 0.08)',
@@ -399,6 +401,8 @@ export const LightStateLayers = {
             opacity08: 'rgba(255, 239, 210, 0.08)',
             opacity12: 'rgba(255, 239, 210, 0.12)',
             opacity16: 'rgba(255, 239, 210, 0.16)',
+            opacity56: 'rgba(255, 239, 210, 0.56)',
+            opacity78: 'rgba(255, 239, 210, 0.78)',
         },
         successContainer: {
             opacity08: 'rgba(225, 245, 227, 0.08)',
@@ -470,6 +474,7 @@ export const LightStateLayers = {
             opacity16: 'rgba(83, 86, 111, 0.07)',
             opacity38: 'rgba(83, 86, 111, 0.38)',
             opacity10: 'rgba(83, 86, 111, 0.1)',
+            opacity78: 'rgba(83, 86, 111, 0.78)',
         },
         shadow: {
             opacity08: 'rgba(0, 0, 0, 0.08)',
@@ -799,7 +804,7 @@ export const LightInverseStateLayers = {
 export const LightSchemesGenerated = {
     'schemes.base.primary': { r: 95, g: 77, b: 152, a: 1 },
     'schemes.base.onPrimary': { r: 255, g: 255, b: 255, a: 1 },
-    'schemes.base.primaryContainer': { r: 237, g: 235, b: 255, a: 1 },
+    'schemes.base.primaryContainer': { r: 227, g: 224, b: 252, a: 1 },
     'schemes.base.onPrimaryContainer': { r: 84, g: 66, b: 138, a: 1 },
     'schemes.base.secondary': { r: 95, g: 102, b: 144, a: 1 },
     'schemes.base.onSecondary': { r: 255, g: 255, b: 255, a: 1 },
@@ -809,14 +814,14 @@ export const LightSchemesGenerated = {
     'schemes.base.onTertiary': { r: 255, g: 255, b: 255, a: 1 },
     'schemes.base.tertiaryContainer': { r: 218, g: 233, b: 240, a: 1 },
     'schemes.base.onTertiaryContainer': { r: 17, g: 38, b: 47, a: 1 },
-    'schemes.base.primaryVariant': { r: 120, g: 100, b: 183, a: 1 },
+    'schemes.base.primaryVariant': { r: 115, g: 95, b: 173, a: 1 },
     'schemes.base.onPrimaryVariant': { r: 230, g: 228, b: 235, a: 1 },
     'schemes.base.onPrimaryBase': { r: 255, g: 255, b: 255, a: 1 },
     'schemes.base.onPrimaryBaseVariant': { r: 230, g: 228, b: 235, a: 1 },
     'schemes.surfaces.surfaceTint': { r: 86, g: 77, b: 130, a: 1 },
     'schemes.surfaces.background': { r: 233, g: 235, b: 246, a: 1 },
     'schemes.surfaces.onBackground': { r: 27, g: 28, b: 33, a: 1 },
-    'schemes.surfaces.surface': { r: 233, g: 233, b: 247, a: 1 },
+    'schemes.surfaces.surface': { r: 235, g: 235, b: 244, a: 1 },
     'schemes.surfaces.onSurface': { r: 27, g: 28, b: 33, a: 1 },
     'schemes.surfaces.surfaceVariant': { r: 247, g: 247, b: 252, a: 1 },
     'schemes.surfaces.onSurfaceVariant': { r: 83, g: 86, b: 111, a: 1 },
@@ -906,10 +911,10 @@ export const LightStateLayersGenerated = {
     'stateLayers.base.onPrimary.opacity10': { r: 255, g: 255, b: 255, a: 0.1 },
     'stateLayers.base.onPrimary.opacity38': { r: 255, g: 255, b: 255, a: 0.38 },
     'stateLayers.base.onPrimary.opacity28': { r: 255, g: 255, b: 255, a: 0.28 },
-    'stateLayers.base.primaryContainer.opacity08': { r: 237, g: 235, b: 255, a: 0.08 },
-    'stateLayers.base.primaryContainer.opacity12': { r: 237, g: 235, b: 255, a: 0.12 },
-    'stateLayers.base.primaryContainer.opacity16': { r: 237, g: 235, b: 255, a: 0.16 },
-    'stateLayers.base.primaryContainer.opacity10': { r: 237, g: 235, b: 255, a: 0.1 },
+    'stateLayers.base.primaryContainer.opacity08': { r: 227, g: 224, b: 252, a: 0.08 },
+    'stateLayers.base.primaryContainer.opacity12': { r: 227, g: 224, b: 252, a: 0.12 },
+    'stateLayers.base.primaryContainer.opacity16': { r: 227, g: 224, b: 252, a: 0.16 },
+    'stateLayers.base.primaryContainer.opacity10': { r: 227, g: 224, b: 252, a: 0.1 },
     'stateLayers.base.onPrimaryContainer.opacity08': { r: 84, g: 66, b: 138, a: 0.08 },
     'stateLayers.base.onPrimaryContainer.opacity12': { r: 84, g: 66, b: 138, a: 0.12 },
     'stateLayers.base.onPrimaryContainer.opacity16': { r: 84, g: 66, b: 138, a: 0.16 },
@@ -1024,6 +1029,8 @@ export const LightStateLayersGenerated = {
     'stateLayers.status.errorContainer.opacity12': { r: 255, g: 233, b: 230, a: 0.12 },
     'stateLayers.status.errorContainer.opacity16': { r: 255, g: 233, b: 230, a: 0.16 },
     'stateLayers.status.errorContainer.opacity10': { r: 255, g: 233, b: 230, a: 0.1 },
+    'stateLayers.status.errorContainer.opacity56': { r: 255, g: 233, b: 230, a: 0.56 },
+    'stateLayers.status.errorContainer.opacity78': { r: 255, g: 233, b: 230, a: 0.78 },
     'stateLayers.status.onErrorContainer.opacity08': { r: 155, g: 30, b: 30, a: 0.08 },
     'stateLayers.status.onErrorContainer.opacity12': { r: 155, g: 30, b: 30, a: 0.12 },
     'stateLayers.status.onErrorContainer.opacity16': { r: 155, g: 30, b: 30, a: 0.16 },
@@ -1097,6 +1104,8 @@ export const LightStateLayersGenerated = {
     'stateLayers.status.warningContainer.opacity08': { r: 255, g: 239, b: 210, a: 0.08 },
     'stateLayers.status.warningContainer.opacity12': { r: 255, g: 239, b: 210, a: 0.12 },
     'stateLayers.status.warningContainer.opacity16': { r: 255, g: 239, b: 210, a: 0.16 },
+    'stateLayers.status.warningContainer.opacity56': { r: 255, g: 239, b: 210, a: 0.56 },
+    'stateLayers.status.warningContainer.opacity78': { r: 255, g: 239, b: 210, a: 0.78 },
     'stateLayers.status.successContainer.opacity08': { r: 225, g: 245, b: 227, a: 0.08 },
     'stateLayers.status.successContainer.opacity12': { r: 225, g: 245, b: 227, a: 0.12 },
     'stateLayers.status.successContainer.opacity16': { r: 225, g: 245, b: 227, a: 0.16 },
@@ -1146,6 +1155,7 @@ export const LightStateLayersGenerated = {
     'stateLayers.surfaces.onSurfaceVariant.opacity16': { r: 83, g: 86, b: 111, a: 0.07 },
     'stateLayers.surfaces.onSurfaceVariant.opacity38': { r: 83, g: 86, b: 111, a: 0.38 },
     'stateLayers.surfaces.onSurfaceVariant.opacity10': { r: 83, g: 86, b: 111, a: 0.1 },
+    'stateLayers.surfaces.onSurfaceVariant.opacity78': { r: 83, g: 86, b: 111, a: 0.78 },
     'stateLayers.surfaces.shadow.opacity08': { r: 0, g: 0, b: 0, a: 0.08 },
     'stateLayers.surfaces.shadow.opacity12': { r: 0, g: 0, b: 0, a: 0.12 },
     'stateLayers.surfaces.shadow.opacity16': { r: 0, g: 0, b: 0, a: 0.16 },

package/dist/src/tokens/colors/stateLayers.d.ts

@@ -189,6 +189,8 @@ export type StateLayers = {
             opacity12: string;
             opacity16: string;
             opacity10: string;
+            opacity56: string;
+            opacity78: string;
         };
         onErrorContainer: {
             opacity08: string;
@@ -290,6 +292,8 @@ export type StateLayers = {
             opacity08: string;
             opacity12: string;
             opacity16: string;
+            opacity56: string;
+            opacity78: string;
         };
         successContainer: {
             opacity08: string;
@@ -361,6 +365,7 @@ export type StateLayers = {
             opacity16: string;
             opacity38: string;
             opacity10: string;
+            opacity78: string;
         };
         shadow: {
             opacity08: string;

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

@@ -57,8 +57,8 @@ export const typographyVariants = {
     },
     DisplaySmall: {
         fontFamily: 'Roboto',
-        fontSize: '24px',
-        lineHeight: '32px',
+        fontSize: '26px',
+        lineHeight: '44px',
         letterSpacing: '0px',
         fontWeight: 400,
     },
@@ -71,8 +71,8 @@ export const typographyVariants = {
     },
     HeadlineLarge: {
         fontFamily: 'Roboto',
-        fontSize: '20px',
-        lineHeight: '28px',
+        fontSize: '19px',
+        lineHeight: '32px',
         letterSpacing: '0px',
         fontWeight: 400,
     },

package/dist/src/utils/createIcon.js

@@ -16,29 +16,27 @@ function extractPath(svg) {
 const StyledIconWrapper = styled('span', {
     shouldForwardProp: (prop) => prop !== 'iconColor',
 })(({ theme, iconColor }) => {
+    const { colors } = theme;
     if (!iconColor || iconColor === 'inherit') {
         return { display: 'inline-flex', color: 'inherit' };
     }
-    const paletteColors = [
-        'primary',
-        'secondary',
-        'error',
-        'warning',
-        'info',
-        'success',
-    ];
-    if (paletteColors.includes(iconColor)) {
+    // Map MUI color tokens to M3 color schemes
+    const colorMapping = {
+        primary: colors.schemes.base.primary,
+        secondary: colors.schemes.base.secondary,
+        error: colors.schemes.status.error,
+        warning: colors.schemes.status.warning,
+        info: colors.schemes.status.info,
+        success: colors.schemes.status.success,
+        action: colors.schemes.surfaces.onSurfaceVariant,
+        disabled: colors.stateLayers.surfaces.onSurface.opacity38,
+    };
+    if (colorMapping[iconColor]) {
         return {
             display: 'inline-flex',
-            color: theme.palette[iconColor].main,
+            color: colorMapping[iconColor],
         };
     }
-    if (iconColor === 'action') {
-        return { display: 'inline-flex', color: theme.palette.action.active };
-    }
-    if (iconColor === 'disabled') {
-        return { display: 'inline-flex', color: theme.palette.action.disabled };
-    }
     return { display: 'inline-flex', color: iconColor };
 });
 function extractPathsData(svg) {

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

@@ -1,7 +1,6 @@
 import { Theme } from '@mui/material';
 import { ThemeMode } from '../tokens/ThemeMode';
-type M3Components = {
+export type M3Components = {
     components: Theme['components'];
 };
 export declare const getMUIComponents: (theme: Theme, _mode: ThemeMode) => M3Components;
-export {};