@webpros/mui-theme 0.1.1 → 0.1.3

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

@@ -0,0 +1,243 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { alpha, } from '@mui/material';
+import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
+export const getButton = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    height: 40,
+                    minWidth: 0,
+                    padding: '0 6px',
+                    borderRadius: 14,
+                    textTransform: 'none',
+                    fontWeight: 500,
+                    '&.Mui-disabled': {
+                        color: alpha(palette.onSurface.main, 0.38),
+                    },
+                    '.MuiButton-startIcon': { marginRight: 4 },
+                    '.MuiButton-endIcon': { marginLeft: 4 },
+                },
+            },
+            variants: [
+                {
+                    props: { size: 'small' },
+                    style: {
+                        height: 32,
+                        borderRadius: 10,
+                        fontSize: '0.875rem',
+                    },
+                },
+                {
+                    props: { variant: 'filled' },
+                    style: {
+                        backgroundColor: palette.primary.main,
+                        color: palette.onPrimary.main,
+                        boxShadow: theme.shadows[0],
+                        padding: '0 24px',
+                        '&:hover': {
+                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.primary.main, palette.onPrimary.main),
+                            boxShadow: theme.shadows[1],
+                        },
+                        '&:focus': {
+                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onPrimary.main),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '&:active': {
+                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main),
+                            boxShadow: theme.shadows[0],
+                            outline: `2px solid ${getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main)}`,
+                            outlineOffset: 2,
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.onSurface.main, 0.04),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '.MuiButton-startIcon': { marginLeft: -8 },
+                        '.MuiButton-endIcon': { marginRight: -8 },
+                    },
+                },
+                {
+                    props: { variant: 'filled', size: 'small' },
+                    style: {
+                        padding: '0 12px',
+                        '.MuiButton-startIcon': { marginLeft: -4 },
+                        '.MuiButton-endIcon': { marginRight: -4 },
+                    },
+                },
+                {
+                    props: { variant: 'outlined' },
+                    style: {
+                        color: palette.primary.main,
+                        borderColor: palette.outline.main,
+                        borderWidth: 1,
+                        padding: '0 24px',
+                        '&:hover': {
+                            backgroundColor: alpha(palette.primary.main, 0.08),
+                            borderColor: palette.outline.main,
+                        },
+                        '&:focus': {
+                            backgroundColor: alpha(palette.primary.main, 0.12),
+                            borderColor: palette.primary.main,
+                        },
+                        '&:active': {
+                            backgroundColor: alpha(palette.primary.main, 0.12),
+                            borderColor: palette.outline.main,
+                        },
+                        '&.Mui-disabled': {
+                            borderColor: alpha(palette.onSurface.main, 0.12),
+                        },
+                        '.MuiButton-startIcon': { marginLeft: -8 },
+                        '.MuiButton-endIcon': { marginRight: -8 },
+                    },
+                },
+                {
+                    props: { variant: 'outlined', size: 'small' },
+                    style: {
+                        padding: '0 12px',
+                        '.MuiButton-startIcon': { marginLeft: 0 },
+                        '.MuiButton-endIcon': { marginRight: 0 },
+                    },
+                },
+                {
+                    props: { variant: 'text' },
+                    style: {
+                        backgroundColor: 'transparent',
+                        color: palette.primary.main,
+                        '&:hover': {
+                            backgroundColor: alpha(palette.primary.main, 0.08),
+                        },
+                        '&:focus': {
+                            backgroundColor: alpha(palette.primary.main, 0.12),
+                        },
+                        '&:active': {
+                            backgroundColor: alpha(palette.primary.main, 0.12),
+                        },
+                        '.MuiButton-startIcon': { marginLeft: -2 },
+                        '.MuiButton-endIcon': { marginRight: -2 },
+                    },
+                },
+                {
+                    props: { variant: 'text', size: 'small' },
+                    style: {
+                        padding: '0 6px',
+                    },
+                },
+                {
+                    props: { variant: 'ghost' },
+                    style: {
+                        backgroundColor: 'transparent',
+                        color: palette.onSurfaceVariant.main,
+                        '&:hover': {
+                            backgroundColor: alpha(palette.primary.main, 0.08),
+                        },
+                        '&:focus': {
+                            backgroundColor: alpha(palette.primary.main, 0.12),
+                        },
+                        '&:active': {
+                            backgroundColor: alpha(palette.primary.main, 0.12),
+                        },
+                        '& .MuiButton-startIcon': {
+                            marginRight: 4,
+                        },
+                        '.MuiButton-startIcon': { marginLeft: -2 },
+                        '.MuiButton-endIcon': { marginRight: -2 },
+                    },
+                },
+                {
+                    props: { variant: 'ghost', size: 'small' },
+                    style: {
+                        padding: '0 6px',
+                    },
+                },
+                {
+                    props: { variant: 'elevated' },
+                    style: {
+                        boxShadow: theme.shadows[1],
+                        backgroundColor: palette.surfaceContainerLow.main,
+                        color: palette.primary.main,
+                        padding: '0 24px',
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerLow.main, palette.primary.main),
+                            boxShadow: theme.shadows[2],
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerLow.main, palette.primary.main),
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerLow.main, palette.primary.main),
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.onSurface.main, 0.04),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '.MuiButton-startIcon': { marginLeft: -8 },
+                        '.MuiButton-endIcon': { marginRight: -8 },
+                    },
+                },
+                {
+                    props: { variant: 'elevated', size: 'small' },
+                    style: {
+                        padding: '0 12px',
+                        '.MuiButton-startIcon': { marginLeft: -4 },
+                        '.MuiButton-endIcon': { marginRight: -4 },
+                    },
+                },
+                {
+                    props: { variant: 'tonal' },
+                    style: {
+                        backgroundColor: palette.secondaryContainer.main,
+                        color: palette.onSecondaryContainer.main,
+                        padding: '0 24px',
+                        '&:hover': {
+                            backgroundColor: palette.primary.main,
+                            color: palette.onPrimary.main,
+                        },
+                        '&:focus': {
+                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onSecondaryContainer.main),
+                            color: palette.onPrimary.main,
+                        },
+                        '&:active': {
+                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onSecondaryContainer.main),
+                            color: palette.onPrimary.main,
+                            outline: `2px solid ${getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onSecondaryContainer.main)}`,
+                            outlineOffset: 2,
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.onSurface.main, 0.04),
+                        },
+                        '.MuiButton-startIcon': { marginLeft: -8 },
+                        '.MuiButton-endIcon': { marginRight: -8 },
+                    },
+                },
+                {
+                    props: { variant: 'tonal', size: 'small' },
+                    style: {
+                        padding: '0 12px',
+                        '.MuiButton-startIcon': { marginLeft: -4 },
+                        '.MuiButton-endIcon': { marginRight: -4 },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'error' },
+                    style: {
+                        backgroundColor: palette.error.main,
+                        color: palette.background.default,
+                        '&:hover': {
+                            backgroundColor: palette.error.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'ghost', color: 'error' },
+                    style: {
+                        backgroundColor: 'transparent',
+                        color: palette.onSurface.main,
+                    },
+                },
+            ],
+        },
+    };
+};
+export default {};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { Theme, ComponentsProps, ComponentsOverrides } from '@mui/material';
+interface M3Checkbox {
+    MuiCheckbox: {
+        defaultProps?: ComponentsProps['MuiCheckbox'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiCheckbox'];
+    };
+}
+export declare const getCheckbox: (theme: Theme) => M3Checkbox;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,20 @@
+export const getCheckbox = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiCheckbox: {
+            styleOverrides: {
+                root: {
+                    color: palette.outline.main,
+                    padding: 8,
+                    '&.Mui-checked': {
+                        color: palette.primary.main,
+                    },
+                    '&.Mui-disabled': {
+                        color: palette.outline.main,
+                    },
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

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

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

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

@@ -0,0 +1,3 @@
+import './Fab.theme';
+export declare const Fab: import("@mui/material").ExtendButtonBase<import("@mui/material").FabTypeMap<{}, "button">>;
+export type FabComponentType = typeof Fab;

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

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

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

@@ -0,0 +1,25 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3Fab {
+    MuiFab: {
+        defaultProps?: ComponentsProps['MuiFab'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiFab'];
+        variants?: ComponentsVariants['MuiFab'];
+    };
+}
+declare module '@mui/material/Fab' {
+    interface FabPropsColorOverrides {
+        primary: true;
+        surface: true;
+        secondary: true;
+        tertiary: true;
+        success: false;
+        info: false;
+        warning: false;
+        error: false;
+        default: false;
+        inherit: false;
+    }
+}
+export declare const getFab: (theme: Theme) => M3Fab;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,135 @@
+import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
+export const getFab = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiFab: {
+            defaultProps: { color: 'secondary' },
+            styleOverrides: {
+                root: {
+                    boxShadow: theme.shadows[3],
+                    borderRadius: '18px',
+                    textTransform: 'capitalize',
+                    fontWeight: 500,
+                },
+            },
+            variants: [
+                {
+                    props: { variant: 'extended', size: 'medium' },
+                    style: {
+                        height: '56px',
+                        borderRadius: '20px',
+                        paddingTop: 16,
+                        paddingRight: 20,
+                        paddingBottom: 16,
+                        paddingLeft: 24,
+                        '& > .MuiTypography-root': {
+                            color: palette.onPrimaryContainer.main,
+                            fontSize: '0.875rem',
+                            fontWeight: 500,
+                            lineHeight: '1.25rem',
+                            letterSpacing: '0.006rem',
+                            paddingLeft: '12px',
+                            paddingRight: '12px',
+                        },
+                        '& > .MuiSvgIcon-root': {
+                            color: palette.onPrimaryContainer.main,
+                        },
+                    },
+                },
+                {
+                    props: { size: 'medium', variant: 'circular' },
+                    style: {
+                        height: 56,
+                        width: 56,
+                    },
+                },
+                {
+                    props: { size: 'large', variant: 'circular' },
+                    style: {
+                        height: 96,
+                        width: 96,
+                        borderRadius: 28,
+                    },
+                },
+                {
+                    props: { color: 'primary' },
+                    style: {
+                        backgroundColor: palette.primaryContainer.main,
+                        color: palette.onPrimaryContainer.main,
+                        boxShadow: theme.shadows[0],
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.primaryContainer.main, palette.onPrimaryContainer.main),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.primaryContainer.main, palette.onPrimaryContainer.main),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.primaryContainer.main, palette.onPrimaryContainer.main),
+                            boxShadow: theme.shadows[0],
+                        },
+                    },
+                },
+                {
+                    props: { color: 'secondary' },
+                    style: {
+                        backgroundColor: palette.secondaryContainer.main,
+                        color: palette.onSecondaryContainer.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[4],
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[3],
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[3],
+                        },
+                    },
+                },
+                {
+                    props: { color: 'surface' },
+                    style: {
+                        backgroundColor: palette.surfaceContainer.main,
+                        color: palette.primary.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainer.main, palette.primary.main),
+                            boxShadow: theme.shadows[4],
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainer.main, palette.primary.main),
+                            boxShadow: theme.shadows[3],
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainer.main, palette.primary.main),
+                            boxShadow: theme.shadows[3],
+                        },
+                    },
+                },
+                {
+                    props: { color: 'tertiary' },
+                    style: {
+                        backgroundColor: palette.tertiaryContainer.main,
+                        color: palette.onTertiaryContainer.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
+                            boxShadow: theme.shadows[4],
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
+                            boxShadow: theme.shadows[3],
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
+                            boxShadow: theme.shadows[3],
+                        },
+                    },
+                },
+            ],
+        },
+    };
+};
+export default {};

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

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

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

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

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

@@ -0,0 +1,3 @@
+import './IconButton.theme';
+export declare const IconButton: import("@mui/material").ExtendButtonBase<import("@mui/material").IconButtonTypeMap<{}, "button">>;
+export type IconButtonComponentType = typeof IconButton;

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

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

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

@@ -0,0 +1,19 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+declare module '@mui/material/IconButton' {
+    interface IconButtonOwnProps {
+        variant?: 'standard' | 'filled' | 'elevated' | 'tonal' | 'outlined';
+    }
+    interface IconButtonPropsColorOverrides {
+        asDisabled: true;
+    }
+}
+interface M3IconButton {
+    MuiIconButton: {
+        defaultProps?: ComponentsProps['MuiIconButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiIconButton'];
+        variants?: ComponentsVariants['MuiIconButton'];
+    };
+}
+export declare const getIconButton: (theme: Theme) => M3IconButton;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,116 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { alpha, } from '@mui/material';
+import { getStateLayerColor, StateLayer } from '../../../utils/getStateLayerColor';
+export const getIconButton = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    height: 40,
+                    width: 40,
+                    borderRadius: 14,
+                    color: palette.onSurfaceVariant.main,
+                    padding: 0,
+                    '&:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main),
+                    },
+                    '&:focus': {
+                        background: getStateLayerColor(StateLayer.Focus, palette.onSurfaceVariant.main),
+                    },
+                    '&:active': {
+                        background: getStateLayerColor(StateLayer.Active, palette.onSurfaceVariant.main),
+                    },
+                    '&.Mui-disabled': {
+                        color: getStateLayerColor(StateLayer.Disabled, palette.onSurface.main),
+                    },
+                },
+            },
+            variants: [
+                {
+                    props: { size: 'small' },
+                    style: {
+                        height: 32,
+                        width: 32,
+                        borderRadius: 10,
+                    },
+                },
+                {
+                    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),
+                        },
+                    },
+                },
+                {
+                    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: '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: 'outlined' },
+                    style: {
+                        borderColor: palette.outline.main,
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                        '&.Mui-disabled': {
+                            borderColor: getStateLayerColor(StateLayer.Disabled, palette.outline.main, palette.onSurface.main),
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'outlined', color: 'asDisabled' },
+                    style: {
+                        color: alpha(palette.onSurface.main, 0.38),
+                        borderColor: alpha(palette.onSurface.main, 0.12),
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                    },
+                },
+            ],
+        },
+    };
+};
+export default {};

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

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

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

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