@webpros/mui-theme 0.3.0 → 0.3.1

package/README.md

@@ -21,7 +21,7 @@ yarn add @webpros/mui-theme
 
 ```typescript
 // global.d.ts
-import type _ from '@webpros/@webpros/mui-theme';
+import type _ from '@webpros/mui-theme';
 ```
 
 2. **Create new wrapper-component for the theme provider**
@@ -78,3 +78,25 @@ const App = () => (
 ```tsx
 import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-theme';
 ```
+
+# Tools configuration
+
+## Webpack
+
+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,
+        },
+      },
+      
+      // 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.0",
+    "version": "0.3.1",
     "license": "MIT",
     "repository": {
         "type": "git",

package/dist/src/components/data-display/Table/Table.theme.js

@@ -1,14 +1,13 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import { tableRowClasses, } from '@mui/material';
-import { getStateLayerColor, StateLayer } from '../../../utils/getStateLayerColor';
 export const getTable = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiTable: {
             styleOverrides: {
                 root: {
                     '.MuiTableHead-root .MuiTableCell-root': {
-                        color: palette.supportive.main,
+                        color: colors.schemes.surfaces.onSurface,
                         fontWeight: 400,
                     },
                 },
@@ -17,7 +16,7 @@ export const getTable = (theme) => {
         MuiTableCell: {
             styleOverrides: {
                 root: {
-                    borderColor: palette.outlineVariant.main,
+                    borderColor: colors.schemes.surfaces.outlineVariant,
                 },
             },
         },
@@ -25,7 +24,7 @@ export const getTable = (theme) => {
             styleOverrides: {
                 root: {
                     [`&.${tableRowClasses.selected}`]: {
-                        backgroundColor: getStateLayerColor(StateLayer.Active, palette.secondary.main),
+                        backgroundColor: colors.schemes.base.secondaryContainer,
                     },
                 },
             },
@@ -33,7 +32,7 @@ export const getTable = (theme) => {
         MuiTableHead: {
             styleOverrides: {
                 root: {
-                    borderColor: palette.outlineVariant.main,
+                    borderColor: colors.schemes.surfaces.outlineVariant,
                 },
             },
         },

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

@@ -1,5 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-// eslint-disable-next-line no-restricted-imports
 import { Dialog as MuiDialog } from '@mui/material';
 import './Dialog.theme';
 export const Dialog = MuiDialog;

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

@@ -14,7 +14,6 @@ export * from './inputs/TimePicker';
 export * from './inputs/Autocomplete';
 export * from './data-display/Badge';
 export * from './inputs/Button';
-export * from './surfaces/Card';
 export * from './inputs/Checkbox';
 export * from './data-display/Chip';
 export * from './navigation/Drawer';
@@ -27,7 +26,6 @@ export * from './data-display/ListItemButton';
 export * from './data-display/ListItemIcon';
 export * from './data-display/ListItemAvatar';
 export * from './data-display/ListSubheader';
-export * from './data-display/DataGrid';
 export * from './data-display/Table';
 export * from './navigation/Menu';
 export * from './navigation/MenuItem';

package/dist/src/components/index.js

@@ -15,7 +15,6 @@ export * from './inputs/TimePicker';
 export * from './inputs/Autocomplete';
 export * from './data-display/Badge';
 export * from './inputs/Button';
-export * from './surfaces/Card';
 export * from './inputs/Checkbox';
 export * from './data-display/Chip';
 export * from './navigation/Drawer';
@@ -28,7 +27,6 @@ export * from './data-display/ListItemButton';
 export * from './data-display/ListItemIcon';
 export * from './data-display/ListItemAvatar';
 export * from './data-display/ListSubheader';
-export * from './data-display/DataGrid';
 export * from './data-display/Table';
 export * from './navigation/Menu';
 export * from './navigation/MenuItem';

package/dist/src/components/inputs/Button/Button.theme.d.ts

@@ -20,7 +20,7 @@ declare module '@mui/material/Button' {
 }
 interface M3Button {
     MuiButton: {
-        defaultProps?: ComponentsProps['MuiButtonBase'];
+        defaultProps?: ComponentsProps['MuiButton'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiButtonBase'];
         variants?: ComponentsVariants['MuiButton'];
     };

package/dist/src/components/inputs/Button/Button.theme.js

@@ -75,6 +75,9 @@ export const getButton = (theme) => {
     };
     return {
         MuiButton: {
+            defaultProps: {
+                variant: 'ghost',
+            },
             styleOverrides: {
                 root: {
                     textTransform: 'none',

package/dist/src/components/inputs/IconButton/IconButton.theme.js

@@ -83,6 +83,9 @@ export const getIconButton = (theme) => {
     };
     return {
         MuiIconButton: {
+            defaultProps: {
+                variant: 'ghost',
+            },
             styleOverrides: {
                 root: {
                     padding: 0,

package/dist/src/components/inputs/TimePicker/TimePicker.theme.js

@@ -1,12 +1,12 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import '@mui/x-date-pickers/themeAugmentation';
 export const getTimePicker = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiPickersPopper: {
             styleOverrides: {
                 paper: {
-                    background: palette.surfaceContainer.main,
+                    background: colors.schemes.surfaces.surfaceContainer,
                     borderRadius: 16,
                 },
                 root: {

package/dist/src/components/inputs/ToggleButton/ToggleButton.theme.d.ts

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

package/dist/src/components/inputs/ToggleButton/ToggleButton.theme.js

@@ -1,23 +1,23 @@
-export const getToggleButton = (theme) => {
-    const { palette } = theme;
+export const getToggleButton = (_theme) => {
+    // const { palette } = theme;
     return {
         MuiToggleButton: {
             styleOverrides: {
                 root: {
                     borderRadius: '50px',
                     textTransform: 'none',
-                    color: palette.onSurface.main,
-                    '&.Mui-selected': {
-                        color: palette.onSecondaryContainer.main,
-                        backgroundColor: palette.secondaryContainer.main,
-                    },
-                    '&.MuiToggleButton-primary': {
-                        borderColor: 'transparent',
-                    },
-                    '&.MuiToggleButton-primary.Mui-selected': {
-                        color: palette.onPrimary.main,
-                        backgroundColor: palette.primary.main,
-                    },
+                    // color: palette.onSurface.main,
+                    // '&.Mui-selected': {
+                    //     color: palette.onSecondaryContainer.main,
+                    //     backgroundColor: palette.secondaryContainer.main,
+                    // },
+                    // '&.MuiToggleButton-primary': {
+                    //     borderColor: 'transparent',
+                    // },
+                    // '&.MuiToggleButton-primary.Mui-selected': {
+                    //     color: palette.onPrimary.main,
+                    //     backgroundColor: palette.primary.main,
+                    // },
                 },
             },
         },

package/dist/src/components/inputs/ToggleButtonGroup/ToggleButtonGroup.theme.js

@@ -1,22 +1,15 @@
-import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
 export const getToggleButtonGroup = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiToggleButtonGroup: {
             styleOverrides: {
                 grouped: {
                     borderRadius: '50px',
-                    borderColor: palette.outline.main,
+                    borderColor: colors.schemes.surfaces.outline,
                     '&:not(:first-of-type)': {
                         marginLeft: 0,
                         borderLeft: 0,
                     },
-                    '&:hover': {
-                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
-                    },
-                    '&.Mui-selected:hover': {
-                        background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                    },
                 },
             },
         },

package/dist/src/constants.js

@@ -1,7 +1,7 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export const underlineTypographySxProps = (theme, open = false, 
 // If color is null - undeline's color will be the same as the text color
-color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', '&:hover': {
+color = theme.colors.schemes.surfaces.onSurface) => (Object.assign({ cursor: 'pointer', '&:hover': {
         textDecoration: 'underline',
         textUnderlineOffset: theme.spacing(0.5),
         textDecorationColor: color,
@@ -14,7 +14,7 @@ color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', '&
 })));
 export const underlineBorderSxProps = (theme, open = false, 
 // If color is null - undeline's color will be the same as the text color
-color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', position: 'relative', '&:hover::after': {
+color = theme.colors.schemes.surfaces.onSurface) => (Object.assign({ cursor: 'pointer', position: 'relative', '&:hover::after': {
         bottom: 0,
         position: 'absolute',
         content: "''",

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

@@ -1,5 +1,3 @@
-export type { AdditionalColorKey } from './legacyColors/additionalColors';
-export type { AdditionalColorTone } from './legacyColors/Tone';
 export type { TypescaleTypographyVariants } from './typography';
 export { typographyVariants } from './typography';
 export type { M3ShadowLayer, M3ShadowTokenName, M3ShadowTokens } from './shadows';

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

@@ -1,5 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { additionalColors } from '../../tokens/legacyColors/additionalColors';
 // reference
 // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
 export const LegacyDarkTokensDefault = {
@@ -76,13 +75,4 @@ export const LegacyDarkTokensDefault = {
     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,
 };

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

@@ -1,5 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { additionalColors } from '../../tokens/legacyColors/additionalColors';
 // reference
 // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
 export const LegacyLightTokensDefault = {
@@ -74,13 +73,4 @@ export const LegacyLightTokensDefault = {
     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,
 };

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

@@ -1,4 +1,3 @@
-import { AdditionalColors } from '../../tokens/legacyColors/additionalColors/additionalColors';
 export type ThemeColorTokensLegacy = {
     primary: string;
     onPrimary: string;
@@ -70,5 +69,4 @@ export type ThemeColorTokensLegacy = {
     undefinedContainer: string;
     onUndefinedContainer: string;
     supportive: string;
-    additionalColors: AdditionalColors;
 };

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

@@ -156,19 +156,3 @@ export declare const ErrorDefault: {
     '99': string;
     '100': string;
 };
-export type AdditionalColorTone = {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    A100: string;
-    A200: string;
-    A400: string;
-    A700: string;
-};

package/dist/src/utils/getMUIComponents.js

@@ -1,4 +1,4 @@
-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';
+import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, 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, 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(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)),
+    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({}, 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)), 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)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput()), getFormHelperText()), getRadio(theme)),
 });

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

@@ -2,93 +2,24 @@ import { PaletteColor, PaletteColorOptions, ThemeOptions } from '@mui/material';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { ThemeScheme } from '../tokens/ThemeScheme';
 import { Schemes, StateLayers } from '../tokens/colors';
-import { AdditionalColorTone } from '../tokens/legacyColors/Tone';
 declare module '@mui/material/styles' {
     interface M3Palette {
         onPrimary: PaletteColor;
-        primaryContainer: PaletteColor;
         onPrimaryContainer: PaletteColor;
         secondary: PaletteColor;
-        onSecondary: PaletteColor;
-        secondaryContainer: PaletteColor;
-        onSecondaryContainer: PaletteColor;
-        tertiary: PaletteColor;
-        onTertiary: PaletteColor;
-        tertiaryContainer: PaletteColor;
-        onTertiaryContainer: PaletteColor;
         onError: PaletteColor;
-        errorContainer: PaletteColor;
-        onErrorContainer: PaletteColor;
-        primaryFixed: PaletteColor;
-        primaryFixedDim: PaletteColor;
-        onPrimaryFixed: PaletteColor;
-        onPrimaryFixedVariant: PaletteColor;
-        secondaryFixed: PaletteColor;
-        secondaryFixedDim: PaletteColor;
-        onSecondaryFixed: PaletteColor;
-        onSecondaryFixedVariant: PaletteColor;
-        tertiaryFixed: PaletteColor;
-        tertiaryFixedDim: PaletteColor;
-        onTertiaryFixed: PaletteColor;
-        onTertiaryFixedVariant: PaletteColor;
         surface: PaletteColor;
         onSurface: PaletteColor;
         surfaceDim: PaletteColor;
-        surfaceBright: PaletteColor;
         surfaceContainerLowest: PaletteColor;
-        surfaceContainerLow: PaletteColor;
         surfaceContainer: PaletteColor;
-        surfaceContainerHigh: PaletteColor;
-        surfaceContainerHighest: PaletteColor;
         onSurfaceVariant: PaletteColor;
-        outline: PaletteColor;
-        outlineVariant: PaletteColor;
-        inversePrimary: PaletteColor;
-        inverseSurface: PaletteColor;
-        inverseOnSurface: PaletteColor;
-        shadow: PaletteColor;
-        scrim: PaletteColor;
-        onBackground: PaletteColor;
-        onInfo: PaletteColor;
-        infoContainer: PaletteColor;
-        onInfoContainer: PaletteColor;
-        onSuccess: PaletteColor;
-        successContainer: PaletteColor;
-        onSuccessContainer: PaletteColor;
-        onWarning: PaletteColor;
-        warningContainer: PaletteColor;
-        onWarningContainer: PaletteColor;
-        undefined: PaletteColor;
-        onUndefined: PaletteColor;
-        undefinedContainer: PaletteColor;
-        onUndefinedContainer: PaletteColor;
         supportive: PaletteColor;
     }
-    interface M3AdditionalColors {
-        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;
+    interface Palette extends M3Palette {
     }
     interface M3PaletteOptions extends Record<keyof M3Palette, PaletteColorOptions | StateLayers | Schemes> {
         themeMode: string;
-        additional: M3AdditionalColors;
-    }
-    interface Palette extends M3Palette {
-        additional: M3AdditionalColors;
     }
     interface PaletteOptions extends M3PaletteOptions {
     }