@webpros/mui-theme 0.1.6 → 0.2.0

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

@@ -1,114 +1,109 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha, } from '@mui/material';
-import { getStateLayerColor, StateLayer } from '../../../utils/getStateLayerColor';
+import { flatten } from '../../../utils/flatten';
+import { circularProgressClasses, iconButtonClasses, touchRippleClasses, } from '@mui/material';
+import { getButtonColorsMap, } from '../../../components/inputs/Button/get-button-colors-map';
+import { rippleEnterKeyframe } from '../../../shared/rippleEnterKeyframe';
 export const getIconButton = (theme) => {
-    const { palette } = theme;
-    return {
-        MuiIconButton: {
-            styleOverrides: {
-                root: {
-                    height: 40,
-                    width: 40,
-                    borderRadius: 14,
-                    color: palette.onSurfaceVariant.main,
-                    padding: 0,
+    const sizes = [
+        {
+            props: { size: 'small' },
+            style: {
+                height: 20,
+                width: 20,
+                // `!important` is the only way in this case to rewrite loader icon size
+                [`& .${circularProgressClasses.root}`]: {
+                    width: '12px !important',
+                    height: '12px !important',
+                },
+            },
+        },
+        {
+            props: { size: 'medium' },
+            style: {
+                height: 34,
+                width: 34,
+            },
+        },
+        {
+            props: { size: 'large' },
+            style: {
+                height: 42,
+                width: 42,
+            },
+        },
+    ];
+    const getStylesByColor = (color, viewContext) => {
+        const colorsMap = getButtonColorsMap(theme);
+        const inverseColorsMap = getButtonColorsMap(theme, 'inverse');
+        const colorsPalette = viewContext === 'inverse' ? inverseColorsMap[color] : colorsMap[color];
+        // variants = [filled?, tonal, ghost]
+        const variantsStyles = Object.entries(colorsPalette).map(([variant, variantColors]) => [
+            {
+                props: { variant: variant, color, viewContext },
+                style: {
+                    background: variantColors.background,
+                    color: variantColors.color,
                     '&:hover': {
-                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main),
-                    },
-                    '&:focus': {
-                        background: getStateLayerColor(StateLayer.Focus, palette.onSurfaceVariant.main),
+                        background: variantColors.hover,
                     },
                     '&:active': {
-                        background: getStateLayerColor(StateLayer.Active, palette.onSurfaceVariant.main),
+                        background: variantColors.active,
                     },
-                    '&.Mui-disabled': {
-                        color: getStateLayerColor(StateLayer.Disabled, palette.onSurface.main),
-                    },
-                },
-            },
-            variants: [
-                {
-                    props: { size: 'small' },
-                    style: {
-                        height: 32,
-                        width: 32,
-                        borderRadius: 10,
+                    '&:focus': {
+                        background: variantColors.focus,
                     },
-                },
-                {
-                    props: { variant: 'filled' },
-                    style: {
-                        backgroundColor: palette.primary.main,
-                        color: palette.onPrimary.main,
-                        '&:hover': {
-                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.primary.main, palette.onPrimary.main),
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onPrimary.main),
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main),
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                        },
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        color: variantColors.ripple,
                     },
                 },
-                {
-                    props: { variant: 'elevated' },
-                    style: {
-                        boxShadow: theme.shadows[2],
-                        '&:active': {
-                            boxShadow: theme.shadows[3],
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                            boxShadow: theme.shadows[0],
-                        },
+            },
+            {
+                props: { variant: variant, color, viewContext, disabled: true },
+                style: {
+                    [`&.${iconButtonClasses.disabled}`]: {
+                        color: variantColors.disabledColor,
+                        background: variantColors.disabledBackground,
                     },
                 },
-                {
-                    props: { variant: 'tonal' },
-                    style: {
-                        backgroundColor: palette.secondaryContainer.main,
-                        color: palette.onSecondaryContainer.main,
-                        '&:hover': {
-                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                        },
-                        '&:focus': {
-                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                        },
-                        '&:active': {
-                            backgroundColor: getStateLayerColor(StateLayer.Active, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                        },
-                        '&.Mui-disabled': {
-                            backgroundColor: alpha(palette.onSurface.main, 0.04),
-                        },
-                        '& > svg': {
-                            color: palette.primary.main,
-                        },
+            },
+            {
+                props: { variant: variant, color, viewContext, loading: true },
+                style: {
+                    [`&.${iconButtonClasses.disabled}`]: {
+                        color: variantColors.loadingColor,
+                        background: variantColors.loadingBackground,
                     },
-                },
-                {
-                    props: { variant: 'outlined' },
-                    style: {
-                        borderColor: palette.outline.main,
-                        borderWidth: 1,
-                        borderStyle: 'solid',
-                        '&.Mui-disabled': {
-                            borderColor: getStateLayerColor(StateLayer.Disabled, palette.outline.main, palette.onSurface.main),
-                        },
+                    [`.${iconButtonClasses.loadingIndicator}`]: {
+                        color: variantColors.loadingIndicator,
                     },
                 },
-                {
-                    props: { variant: 'outlined', color: 'asDisabled' },
-                    style: {
-                        color: alpha(palette.onSurface.main, 0.38),
-                        borderColor: alpha(palette.onSurface.main, 0.12),
-                        borderWidth: 1,
-                        borderStyle: 'solid',
+            },
+        ]);
+        return flatten(variantsStyles);
+    };
+    return {
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    padding: 0,
+                    [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                        opacity: 1,
+                        animationName: rippleEnterKeyframe,
                     },
                 },
+            },
+            variants: [
+                ...sizes,
+                ...getStylesByColor('primary'),
+                ...getStylesByColor('default'),
+                ...getStylesByColor('secondary'),
+                ...getStylesByColor('error'),
+                ...getStylesByColor('success'),
+                ...getStylesByColor('primary', 'inverse'),
+                ...getStylesByColor('default', 'inverse'),
+                ...getStylesByColor('secondary', 'inverse'),
+                ...getStylesByColor('error', 'inverse'),
+                ...getStylesByColor('success', 'inverse'),
             ],
         },
     };

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

@@ -1,30 +1,13 @@
-import { ComponentsProps, ComponentsOverrides, ComponentsVariants, Theme } from '@mui/material';
-interface M3Autocomplete {
+import { ComponentsOverrides, Theme } from '@mui/material';
+declare module '@mui/material/InputBase' {
+    interface InputBasePropsSizeOverrides {
+        large: true;
+    }
+}
+interface M3InputBase {
     MuiInputBase: {
-        defaultProps?: ComponentsProps['MuiInputBase'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiInputBase'];
-        variants?: ComponentsVariants['MuiInputBase'];
-    };
-    MuiFormLabel: {
-        defaultProps?: ComponentsProps['MuiFormLabel'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
-        variants?: ComponentsVariants['MuiFormLabel'];
-    };
-    MuiOutlinedInput: {
-        defaultProps?: ComponentsProps['MuiOutlinedInput'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiOutlinedInput'];
-        variants?: ComponentsVariants['MuiOutlinedInput'];
-    };
-    MuiFormHelperText: {
-        defaultProps?: ComponentsProps['MuiFormHelperText'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiFormHelperText'];
-        variants?: ComponentsVariants['MuiFormHelperText'];
     };
 }
-/**
- * There is no separate component for usage outside of MUI, but it is used as base for several inputs
- * better to customized common things here, than in each component
- */
-export declare const getInputBase: (theme: Theme) => M3Autocomplete;
-declare const _default: {};
-export default _default;
+export declare const getInputBase: () => M3InputBase;
+export {};

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

@@ -1,70 +1,8 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { getOnStateLayerColor, OnStateLayer, } from '../../../utils/getStateLayerColor';
-/**
- * There is no separate component for usage outside of MUI, but it is used as base for several inputs
- * better to customized common things here, than in each component
- */
-export const getInputBase = (theme) => {
-    const { palette } = theme;
+export const getInputBase = () => {
     return {
         MuiInputBase: {
-            styleOverrides: {
-                root: {
-                    borderRadius: 8,
-                    borderColor: palette.outline.main,
-                    padding: '4px 8px',
-                    'input::placeholder': {
-                        color: palette.supportive.main,
-                        opacity: 1,
-                    },
-                    '& svg': {
-                        color: palette.onSurfaceVariant.main,
-                    },
-                },
-                input: {
-                    fontSize: '0.875rem',
-                    color: palette.onSurface.main,
-                },
-            },
-        },
-        MuiOutlinedInput: {
-            styleOverrides: {
-                root: {
-                    fieldset: {
-                        borderColor: palette.outline.main,
-                    },
-                    '&.Mui-disabled': {
-                        input: {
-                            WebkitTextFillColor: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                        },
-                        fieldset: {
-                            '&.MuiOutlinedInput-notchedOutline': {
-                                borderColor: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                            },
-                        },
-                    },
-                },
-            },
-        },
-        MuiFormLabel: {
-            styleOverrides: {
-                root: {
-                    color: palette.supportive.main,
-                    '&.Mui-disabled': {
-                        color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                    },
-                },
-            },
-        },
-        MuiFormHelperText: {
-            styleOverrides: {
-                root: {
-                    '&.Mui-disabled': {
-                        color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                    },
-                },
-            },
+            styleOverrides: {},
         },
     };
 };
-export default {};

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

@@ -1,9 +1,12 @@
-import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentsVariants } from '@mui/material';
+declare module '@mui/material/InputLabel' {
+    interface InputLabelPropsSizeOverrides {
+        large: true;
+    }
+}
 export interface M3InputLabel {
     MuiInputLabel: {
-        defaultProps?: ComponentsProps['MuiInputLabel'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiInputLabel'];
         variants?: ComponentsVariants['MuiInputLabel'];
     };
 }
-export declare const getInputLabel: (theme: Theme) => M3InputLabel;
+export declare const getInputLabel: () => M3InputLabel;

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

@@ -1,20 +1,34 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { inputLabelClasses, } from '@mui/material';
-export const getInputLabel = (theme) => {
-    const { palette } = theme;
+export const getInputLabel = () => {
     return {
         MuiInputLabel: {
-            styleOverrides: {
-                root: {
-                    color: palette.supportive.main,
-                    fontSize: '0.875rem',
-                    transform: 'translate(14px, 11px) scale(1)',
-                    // If label is shrunk (input has value or is focused), use normal MUI transform
-                    [`&.${inputLabelClasses.shrink}`]: {
-                        transform: 'translate(14px, -9px) scale(0.75)',
+            // the order matters
+            variants: [
+                {
+                    props: {},
+                    style: {
+                        transform: 'translate(14px, 12px) scale(1)',
                     },
                 },
-            },
+                {
+                    props: { variant: 'outlined', size: 'small' },
+                    style: {
+                        transform: 'translate(14px, 8px) scale(1)',
+                    },
+                },
+                {
+                    props: { variant: 'outlined', size: 'large' },
+                    style: {
+                        transform: 'translate(14px, 14px) scale(1)',
+                    },
+                },
+                {
+                    props: ({ variant, ownerState }) => variant === 'outlined' && !!ownerState.shrink,
+                    style: {
+                        transform: 'translate(14px, -10px) scale(0.8)',
+                    },
+                },
+            ],
         },
     };
 };

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

@@ -0,0 +1,8 @@
+import { ComponentsOverrides, Theme } from '@mui/material';
+interface M3OutlinedInput {
+    MuiOutlinedInput: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiOutlinedInput'];
+    };
+}
+export declare const getOutlinedInput: () => M3OutlinedInput;
+export {};

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

@@ -0,0 +1,67 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getOutlinedInput = () => {
+    return {
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    // the order matters
+                    variants: [
+                        {
+                            props: ({ multiline }) => !!multiline,
+                            style: {
+                                paddingTop: 11,
+                                paddingBottom: 11,
+                            },
+                        },
+                        {
+                            props: ({ multiline, size }) => !!multiline && size === 'small',
+                            style: {
+                                paddingTop: 7,
+                                paddingBottom: 7,
+                            },
+                        },
+                        {
+                            props: ({ multiline, size }) => !!multiline && size === 'large',
+                            style: {
+                                paddingTop: 14,
+                                paddingBottom: 14,
+                            },
+                        },
+                    ],
+                },
+                input: {
+                    height: '20px',
+                    variants: [
+                        {
+                            props: {},
+                            style: {
+                                paddingTop: 11,
+                                paddingBottom: 11,
+                            },
+                        },
+                        {
+                            props: { size: 'small' },
+                            style: {
+                                paddingTop: 7,
+                                paddingBottom: 7,
+                            },
+                        },
+                        {
+                            props: { size: 'large' },
+                            style: {
+                                paddingTop: 14,
+                                paddingBottom: 14,
+                            },
+                        },
+                        {
+                            props: ({ ownerState }) => ownerState.multiline,
+                            style: {
+                                padding: 0,
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    };
+};

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

@@ -0,0 +1 @@
+export * from './OutlinedInput.theme';

package/dist/src/components/inputs/OutlinedInput/index.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export * from './OutlinedInput.theme';

package/dist/src/components/inputs/Radio/Radio.d.ts

@@ -0,0 +1,4 @@
+import { Radio as MuiRadio } from '@mui/material';
+import './Radio.theme';
+export declare const Radio: typeof MuiRadio;
+export type RadioComponentType = typeof Radio;

package/dist/src/components/inputs/Radio/Radio.js

@@ -0,0 +1,4 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { Radio as MuiRadio } from '@mui/material';
+import './Radio.theme';
+export const Radio = MuiRadio;

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

@@ -0,0 +1,11 @@
+import { ComponentsOverrides, ComponentsProps, ComponentsVariants, Theme } from '@mui/material';
+interface M3Radio {
+    MuiRadio: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiRadio'];
+        variants?: ComponentsVariants<Theme>['MuiRadio'];
+        defaultProps?: ComponentsProps['MuiRadio'];
+    };
+}
+export declare const getRadio: (theme: Theme) => M3Radio;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,35 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getRadio = (theme) => {
+    const { colors } = theme;
+    return {
+        MuiRadio: {
+            defaultProps: { size: 'small', color: 'default' },
+            styleOverrides: {
+                root: {
+                    color: colors.schemes.surfaces.onSurfaceVariant,
+                    '&.Mui-checked': {
+                        color: colors.schemes.base.primary,
+                    },
+                    '&.Mui-disabled': {
+                        color: colors.stateLayers.surfaces.onSurfaceVariant.opacity38,
+                    },
+                    '&.Mui-disabled.Mui-checked': {
+                        color: colors.stateLayers.surfaces.onSurface.opacity38,
+                    },
+                },
+            },
+            variants: [
+                {
+                    props: { color: 'error' },
+                    style: {
+                        color: colors.schemes.status.error,
+                        '&.Mui-checked': {
+                            color: colors.schemes.status.error,
+                        },
+                    },
+                },
+            ],
+        },
+    };
+};
+export default {};

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

@@ -0,0 +1 @@
+export * from './Radio.theme';

package/dist/src/components/{navigation/TabList → inputs/Radio}/index.js

@@ -1,2 +1,2 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-export * from './TabList.theme';
+export * from './Radio.theme';

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

@@ -1,9 +1,8 @@
-import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { Theme, ComponentsProps, ComponentsOverrides } from '@mui/material';
 export interface M3Select {
     MuiSelect: {
         defaultProps?: ComponentsProps['MuiSelect'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiSelect'];
-        variants?: ComponentsVariants['MuiSelect'];
     };
 }
-export declare const getSelect: (theme: Theme) => M3Select;
+export declare const getSelect: () => M3Select;

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

@@ -1,46 +1,19 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import { CaretDownIcon } from '@phosphor-icons/react';
-import { getOnStateLayerColor, getStateLayerColor, OnStateLayer, StateLayer, } from '../../../utils/getStateLayerColor';
-export const getSelect = (theme) => {
-    const { palette } = theme;
+export const getSelect = () => {
     return {
         MuiSelect: {
             defaultProps: {
                 IconComponent: CaretDownIcon,
             },
             styleOverrides: {
-                root: {
-                    '& .MuiInputBase-root': {
-                        borderColor: palette.outline.main,
-                    },
-                    '> svg': {
-                        color: palette.supportive.main,
-                    },
-                    padding: '0',
-                },
-                select: {
-                    // Patch for displaying icons in input
-                    '.MuiListItem-root': {
-                        padding: 0,
-                    },
-                    '.MuiListItemText-root': {
-                        margin: 0,
-                    },
-                    '&.Mui-disabled': {
-                        // Mui by default uses -webkit-text-fill-color and if it is set then it is used instead of css color property
-                        WebkitTextFillColor: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
-                        borderColor: getStateLayerColor(StateLayer.Disabled, palette.outline.main),
-                    },
+                icon: {
+                    top: 'calc(50% - 10px)',
+                    right: 13,
+                    width: 20,
+                    height: 20,
                 },
             },
-            variants: [
-                {
-                    props: { variant: 'outlined' },
-                    style: {
-                        borderRadius: 8,
-                    },
-                },
-            ],
         },
     };
 };