@webpros/mui-theme 0.1.2 → 0.1.3

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

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

package/dist/src/utils/getMUIComponents.js

@@ -0,0 +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';
+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)),
+});

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

@@ -0,0 +1,101 @@
+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;
+    }
+}
+declare module '@mui/material/styles/createPalette' {
+    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 M3PaletteOptions extends Record<keyof M3Palette, PaletteColorOptions> {
+        themeMode: string;
+        additional: M3AdditionalColors;
+    }
+    interface Palette extends M3Palette {
+        additional: M3AdditionalColors;
+    }
+    interface PaletteOptions extends M3PaletteOptions {
+    }
+}
+export declare const getMUIPalette: (themeMode: ThemeMode, themescheme: ThemeScheme) => ThemeOptions;

package/dist/src/utils/getMUIPalette.js

@@ -0,0 +1,263 @@
+export const getMUIPalette = (themeMode, themescheme) => {
+    const scheme = themescheme[themeMode];
+    return {
+        palette: {
+            themeMode,
+            primary: {
+                main: scheme.primary,
+                contrastText: scheme.onPrimary,
+            },
+            onPrimary: {
+                main: scheme.onPrimary,
+                contrastText: scheme.primary,
+            },
+            primaryContainer: {
+                main: scheme.primaryContainer,
+                contrastText: scheme.onPrimaryContainer,
+            },
+            onPrimaryContainer: {
+                main: scheme.onPrimaryContainer,
+                contrastText: scheme.primaryContainer,
+            },
+            secondary: {
+                main: scheme.secondary,
+                contrastText: scheme.onSecondary,
+            },
+            onSecondary: {
+                main: scheme.onSecondary,
+                contrastText: scheme.secondary,
+            },
+            secondaryContainer: {
+                main: scheme.secondaryContainer,
+                contrastText: scheme.onSecondaryContainer,
+            },
+            onSecondaryContainer: {
+                main: scheme.onSecondaryContainer,
+                contrastText: scheme.secondaryContainer,
+            },
+            tertiary: {
+                main: scheme.tertiary,
+                contrastText: scheme.onTertiary,
+            },
+            onTertiary: {
+                main: scheme.onTertiary,
+                contrastText: scheme.tertiary,
+            },
+            tertiaryContainer: {
+                main: scheme.tertiaryContainer,
+                contrastText: scheme.onTertiaryContainer,
+            },
+            onTertiaryContainer: {
+                main: scheme.onTertiaryContainer,
+                contrastText: scheme.tertiaryContainer,
+            },
+            error: {
+                main: scheme.error,
+                contrastText: scheme.onError,
+            },
+            onError: {
+                main: scheme.onError,
+                contrastText: scheme.error,
+            },
+            errorContainer: {
+                main: scheme.errorContainer,
+                contrastText: scheme.onErrorContainer,
+            },
+            onErrorContainer: {
+                main: scheme.onErrorContainer,
+                contrastText: scheme.errorContainer,
+            },
+            primaryFixed: {
+                main: scheme.primaryFixed,
+            },
+            primaryFixedDim: {
+                main: scheme.primaryFixedDim,
+            },
+            onPrimaryFixed: {
+                main: scheme.onPrimaryFixed,
+            },
+            onPrimaryFixedVariant: {
+                main: scheme.onPrimaryFixedVariant,
+            },
+            secondaryFixed: {
+                main: scheme.secondaryFixed,
+            },
+            secondaryFixedDim: {
+                main: scheme.secondaryFixedDim,
+            },
+            onSecondaryFixed: {
+                main: scheme.onSecondaryFixed,
+            },
+            onSecondaryFixedVariant: {
+                main: scheme.onSecondaryFixedVariant,
+            },
+            tertiaryFixed: {
+                main: scheme.tertiaryFixed,
+            },
+            tertiaryFixedDim: {
+                main: scheme.tertiaryFixedDim,
+            },
+            onTertiaryFixed: {
+                main: scheme.onTertiaryFixed,
+            },
+            onTertiaryFixedVariant: {
+                main: scheme.onTertiaryFixedVariant,
+            },
+            surface: {
+                main: scheme.surface,
+                contrastText: scheme.onSurface,
+            },
+            onSurface: {
+                main: scheme.onSurface,
+                contrastText: scheme.surface,
+            },
+            surfaceDim: {
+                main: scheme.surfaceDim,
+            },
+            surfaceBright: {
+                main: scheme.surfaceBright,
+            },
+            surfaceContainerLowest: {
+                main: scheme.surfaceContainerLowest,
+            },
+            surfaceContainerLow: {
+                main: scheme.surfaceContainerLow,
+            },
+            surfaceContainer: {
+                main: scheme.surfaceContainer,
+            },
+            surfaceContainerHigh: {
+                main: scheme.surfaceContainerHigh,
+            },
+            surfaceContainerHighest: {
+                main: scheme.surfaceContainerHighest,
+            },
+            // surfaceVariant: {
+            //     main: scheme.surfaceVariant,
+            //     contrastText: scheme.onSurfaceVariant,
+            // },
+            onSurfaceVariant: {
+                main: scheme.onSurfaceVariant,
+                // contrastText: scheme.surfaceVariant,
+            },
+            outline: {
+                main: scheme.outline,
+            },
+            outlineVariant: {
+                main: scheme.outlineVariant,
+            },
+            inversePrimary: {
+                main: scheme.inversePrimary,
+                // contrastText: scheme.inverseOnPrimary
+            },
+            // inverseOnPrimary: {
+            //     main: scheme.inverseOnPrimary,
+            //     contrastText: scheme.inversePrimary,
+            // },
+            inverseSurface: {
+                main: scheme.inverseSurface,
+                contrastText: scheme.inverseSurface,
+            },
+            inverseOnSurface: {
+                main: scheme.inverseOnSurface,
+                contrastText: scheme.inverseSurface,
+            },
+            action: {},
+            shadow: {
+                main: scheme.shadow,
+            },
+            scrim: {
+                main: scheme.scrim,
+            },
+            // surfaceTintColor: {
+            //     main: scheme.surfaceTintColor,
+            // },
+            /**/
+            background: {
+                default: scheme.surface,
+                paper: scheme.surfaceContainerLowest,
+            },
+            onBackground: {
+                main: scheme.onSurface,
+            },
+            common: {
+                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,
+            },
+            infoContainer: {
+                main: scheme.infoContainer,
+                contrastText: scheme.onInfoContainer,
+            },
+            onInfoContainer: {
+                main: scheme.onInfoContainer,
+                contrastText: scheme.infoContainer,
+            },
+            success: {
+                main: scheme.success,
+                contrastText: scheme.onSuccess,
+            },
+            onSuccess: {
+                main: scheme.onSuccess,
+                contrastText: scheme.success,
+            },
+            successContainer: {
+                main: scheme.successContainer,
+                contrastText: scheme.onSuccessContainer,
+            },
+            onSuccessContainer: {
+                main: scheme.onSuccessContainer,
+                contrastText: scheme.successContainer,
+            },
+            warning: {
+                main: scheme.warning,
+                contrastText: scheme.onWarning,
+            },
+            onWarning: {
+                main: scheme.onWarning,
+                contrastText: scheme.warning,
+            },
+            warningContainer: {
+                main: scheme.warningContainer,
+                contrastText: scheme.onWarningContainer,
+            },
+            onWarningContainer: {
+                main: scheme.onWarningContainer,
+                contrastText: scheme.warningContainer,
+            },
+            undefined: {
+                main: scheme.undefined,
+                contrastText: scheme.onUndefined,
+            },
+            onUndefined: {
+                main: scheme.onUndefined,
+                contrastText: scheme.undefined,
+            },
+            undefinedContainer: {
+                main: scheme.undefinedContainer,
+                contrastText: scheme.onUndefinedContainer,
+            },
+            onUndefinedContainer: {
+                main: scheme.onUndefinedContainer,
+                contrastText: scheme.undefinedContainer,
+            },
+            supportive: {
+                main: scheme.supportive,
+            },
+            divider: scheme.outlineVariant,
+            additional: scheme.additionalColors,
+        },
+        tones: themescheme.tones,
+    };
+};

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

@@ -0,0 +1,11 @@
+export declare const MuiLocales: {
+    readonly enUS: import("@mui/material/locale").Localization;
+    readonly ruRU: import("@mui/material/locale").Localization;
+    readonly deDE: import("@mui/material/locale").Localization;
+    readonly esES: import("@mui/material/locale").Localization;
+    readonly frFR: import("@mui/material/locale").Localization;
+    readonly itIT: import("@mui/material/locale").Localization;
+    readonly jaJP: import("@mui/material/locale").Localization;
+    readonly ptPT: import("@mui/material/locale").Localization;
+};
+export declare const getMuiLocaleByCode: (locale: keyof typeof MuiLocales) => import("@mui/material/locale").Localization;

package/dist/src/utils/getMuiLocaleByCode.js

@@ -0,0 +1,13 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { deDE, enUS, esES, frFR, itIT, jaJP, ptPT, ruRU } from '@mui/material/locale';
+export const MuiLocales = {
+    enUS,
+    ruRU,
+    deDE,
+    esES,
+    frFR,
+    itIT,
+    jaJP,
+    ptPT,
+};
+export const getMuiLocaleByCode = (locale) => MuiLocales[locale];

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

@@ -0,0 +1,25 @@
+export declare const StateLayerOpacity: {
+    readonly 0.08: 0.08;
+    readonly 0.12: 0.12;
+    readonly 0.16: 0.16;
+    readonly 0.2: 0.2;
+    readonly 0.28: 0.28;
+    readonly 0.48: 0.48;
+};
+export type StateLayerOpacityKey = keyof typeof StateLayerOpacity;
+export declare enum StateLayer {
+    Hover = 0.08,
+    Focus = 0.12,
+    Press = 0.12,
+    Drag = 0.16,
+    Selected = 0.2,
+    Disabled = 0.08,
+    Active = 0.12
+}
+export declare enum OnStateLayer {
+    Disabled = 0.38,
+    Active = 1
+}
+export declare const getStateLayerColor: (state: StateLayer, containerColor: string, contentColor?: string) => string;
+export declare const getOnStateLayerColor: (state: OnStateLayer, onContainerColor: string, containerColor?: string) => string;
+export declare const getStateLayerColorByOpacityKey: (opacity: StateLayerOpacityKey, color: string) => string;

package/dist/src/utils/getStateLayerColor.js

@@ -0,0 +1,36 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { Blend, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
+import { alpha } from '@mui/material';
+/* eslint-disable @typescript-eslint/no-duplicate-enum-values -- Need same value*/
+// We should have ONLY those values of opacity inside the theme
+export const StateLayerOpacity = {
+    0.08: 0.08,
+    0.12: 0.12,
+    0.16: 0.16,
+    0.2: 0.2,
+    0.28: 0.28,
+    0.48: 0.48,
+};
+export var StateLayer;
+(function (StateLayer) {
+    StateLayer[StateLayer["Hover"] = 0.08] = "Hover";
+    StateLayer[StateLayer["Focus"] = 0.12] = "Focus";
+    StateLayer[StateLayer["Press"] = 0.12] = "Press";
+    StateLayer[StateLayer["Drag"] = 0.16] = "Drag";
+    StateLayer[StateLayer["Selected"] = 0.2] = "Selected";
+    StateLayer[StateLayer["Disabled"] = 0.08] = "Disabled";
+    StateLayer[StateLayer["Active"] = 0.12] = "Active";
+})(StateLayer || (StateLayer = {}));
+export var OnStateLayer;
+(function (OnStateLayer) {
+    OnStateLayer[OnStateLayer["Disabled"] = 0.38] = "Disabled";
+    OnStateLayer[OnStateLayer["Active"] = 1] = "Active";
+})(OnStateLayer || (OnStateLayer = {}));
+export const getStateLayerColor = (state, containerColor, contentColor) => contentColor
+    ? hexFromArgb(Blend.cam16Ucs(argbFromHex(containerColor), argbFromHex(contentColor), state))
+    : alpha(containerColor, state);
+export const getOnStateLayerColor = (state, onContainerColor, containerColor) => containerColor
+    ? hexFromArgb(Blend.cam16Ucs(argbFromHex(onContainerColor), argbFromHex(containerColor), state))
+    : alpha(onContainerColor, state);
+// Was introduced due to fact that StateLayer enums does not correlate with values presented. So State layer is more like "const opacity value" rather then actual state
+export const getStateLayerColorByOpacityKey = (opacity, color) => alpha(color, StateLayerOpacity[opacity]);

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

@@ -0,0 +1,6 @@
+export * from './generateTokens';
+export * from './getMUIComponents';
+export * from './getMUIPalette';
+export * from './getMuiLocaleByCode';
+export * from './getStateLayerColor';
+export * from './patchMUIShadows';

package/dist/src/utils/index.js

@@ -0,0 +1,7 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './generateTokens';
+export * from './getMUIComponents';
+export * from './getMUIPalette';
+export * from './getMuiLocaleByCode';
+export * from './getStateLayerColor';
+export * from './patchMUIShadows';

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

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material';
+export declare const patchMUIShadows: (theme: Theme) => void;

package/dist/src/utils/patchMUIShadows.js

@@ -0,0 +1,5 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { alpha } from '@mui/material';
+export const patchMUIShadows = (theme) => {
+    theme.shadows[2] = `0px 0px 2px ${alpha(theme.palette.shadow.main, 0.08)}, 0px 8px 24px ${alpha(theme.palette.shadow.main, 0.08)}`;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
   "description": "MUI v6 theme for WebPros products",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "keywords": [
     "react",
@@ -46,13 +46,24 @@
     "@mui/utils": "^6.4.0",
     "@mui/x-data-grid": "^7.29.0",
     "@mui/x-date-pickers": "^7.29.0",
-    "@phosphor-icons/react": "^2.1.0"
+    "@phosphor-icons/react": "^2.1.0",
+    "@fontsource/roboto": "^5.2.6",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@stylistic/eslint-plugin": "^5.5.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@fontsource/roboto": "^5.2.6",
     "@eslint/js": "^9.38.0",
     "@material/material-color-utilities": "^0.3.0",
     "@mui/material": "^6.4.0",
@@ -60,23 +71,23 @@
     "@mui/x-data-grid": "^7.29.0",
     "@mui/x-date-pickers": "^7.29.0",
     "@phosphor-icons/react": "^2.1.0",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-onboarding": "^9.1.13",
-    "@storybook/addon-themes": "^9.1.13",
-    "@storybook/builder-vite": "^9.1.13",
-    "@storybook/react-vite": "^9.1.13",
-    "@storybook/react-webpack5": "^9.1.13",
+    "@storybook/addon-a11y": "^9.1.16",
+    "@storybook/addon-docs": "^9.1.16",
+    "@storybook/addon-onboarding": "^9.1.16",
+    "@storybook/addon-themes": "^9.1.16",
+    "@storybook/builder-vite": "^9.1.16",
+    "@storybook/react-vite": "^9.1.16",
     "@types/node": "^24.8.1",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.0.4",
     "eslint": "^9.38.0",
-    "eslint-plugin-storybook": "^9.1.13",
+    "eslint-plugin-storybook": "^9.1.16",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^9.1.13",
+    "storybook": "^9.1.16",
     "tsc-alias": "^1.8.16",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.1",
@@ -93,12 +104,5 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
-  },
-  "dependencies": {
-    "@stylistic/eslint-plugin": "^5.5.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0"
   }
-}
+}