@webpros/mui-theme 0.1.6 → 0.3.0

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

@@ -1,17 +1,15 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { tooltipClasses, } from '@mui/material';
 export const getTooltip = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiTooltip: {
             styleOverrides: {
                 tooltip: {
-                    background: palette.inverseSurface.main,
-                    color: palette.inverseOnSurface.main,
-                },
-                popper: {
-                    [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]: {
-                        marginBottom: 2,
+                    background: colors.inverseSchemes.surfaces.surface,
+                    color: colors.inverseSchemes.surfaces.onSurface,
+                    borderRadius: '6px',
+                    padding: '8px 12px',
+                    '& .MuiTooltip-arrow': {
+                        color: colors.inverseSchemes.surfaces.surface,
                     },
                 },
             },

package/dist/src/components/data-display/Typography/Typography.theme.d.ts

@@ -1,4 +1,22 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { TypescaleTypographyVariantsBooleans } from '../../../tokens/typography/typescale';
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides extends TypescaleTypographyVariantsBooleans {
+        h1: true;
+        h2: true;
+        h3: true;
+        h4: true;
+        h5: true;
+        h6: true;
+        subtitle1: true;
+        subtitle2: true;
+        body1: true;
+        body2: true;
+        button: true;
+        caption: true;
+        overline: true;
+    }
+}
 interface M3Typography {
     MuiTypography: {
         defaultProps?: ComponentsProps['MuiTypography'];
@@ -6,31 +24,6 @@ interface M3Typography {
         variants?: ComponentsVariants['MuiTypography'];
     };
 }
-declare module '@mui/material/Typography' {
-    interface TypographyPropsVariantOverrides {
-        DisplayLarge: true;
-        DisplayMedium: true;
-        DisplaySmall: true;
-        HeadlineLarge: true;
-        HeadlineMedium: true;
-        HeadlineSmall: true;
-        TitleLarge: true;
-        TitleMedium: true;
-        TitleSmall: true;
-        LabelLarge: true;
-        LabelMedium: true;
-        LabelSmall: true;
-        BodyLarge: true;
-        BodyMedium: true;
-        BodySmall: true;
-        Caption: true;
-    }
-    interface TypographyPropsColorOverrides {
-        additional: true;
-        supportive: true;
-        undefined: true;
-    }
-}
-export declare const getTypography: (theme: Theme) => M3Typography;
+export declare const getTypography: (_theme: Theme) => M3Typography;
 declare const _default: {};
 export default _default;

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

@@ -1,168 +1,12 @@
-export const getTypography = (theme) => {
-    const { palette } = theme;
+import { TypographyVariantsNames, } from '../../../tokens/typography/typescale';
+import { typographyVariants } from '../../../tokens/typography/typography';
+export const getTypography = (_theme) => {
     return {
         MuiTypography: {
-            styleOverrides: {
-                root: {
-                    fontWeight: 400,
-                },
-            },
-            variants: [
-                {
-                    props: { color: 'supportive' },
-                    style: {
-                        color: palette.supportive.main,
-                    },
-                },
-                {
-                    props: { color: 'undefined' },
-                    style: {
-                        color: palette.undefined.main,
-                    },
-                },
-                {
-                    props: { color: 'additional' },
-                    style: {
-                        color: '#78909C',
-                    },
-                },
-                {
-                    props: { color: 'error' },
-                    style: {
-                        color: palette.error.main,
-                    },
-                },
-                {
-                    props: { variant: 'DisplayLarge' },
-                    style: {
-                        fontSize: '3.563rem',
-                        lineHeight: '4rem',
-                    },
-                },
-                {
-                    props: { variant: 'DisplayMedium' },
-                    style: {
-                        fontSize: '2.8125rem',
-                        lineHeight: '3.25rem',
-                    },
-                },
-                {
-                    props: { variant: 'DisplaySmall' },
-                    style: {
-                        fontSize: '2.25rem',
-                        lineHeight: '2.75rem',
-                    },
-                },
-                {
-                    props: { variant: 'HeadlineLarge' },
-                    style: {
-                        fontSize: '2rem',
-                        lineHeight: '2.5rem',
-                    },
-                },
-                {
-                    props: { variant: 'HeadlineMedium' },
-                    style: {
-                        fontSize: '1.75rem',
-                        lineHeight: '2.25rem',
-                    },
-                },
-                {
-                    props: { variant: 'HeadlineSmall' },
-                    style: {
-                        fontSize: '1.5rem',
-                        lineHeight: '2rem',
-                    },
-                },
-                {
-                    props: { variant: 'TitleLarge' },
-                    style: {
-                        fontSize: '1.375rem',
-                        lineHeight: '1.75rem',
-                    },
-                },
-                {
-                    props: { variant: 'TitleMedium' },
-                    style: {
-                        fontSize: '1rem',
-                        fontWeight: 500,
-                        lineHeight: '1.5rem',
-                        letterSpacing: '0.009rem',
-                    },
-                },
-                {
-                    props: { variant: 'TitleSmall' },
-                    style: {
-                        fontSize: '0.875rem',
-                        fontWeight: 500,
-                        lineHeight: '1.25rem',
-                        letterSpacing: '0.006rem',
-                    },
-                },
-                {
-                    props: { variant: 'LabelLarge' },
-                    style: {
-                        fontSize: '0.875rem',
-                        fontWeight: 500,
-                        lineHeight: '1.25rem',
-                        letterSpacing: '0.006rem',
-                    },
-                },
-                {
-                    props: { variant: 'LabelMedium' },
-                    style: {
-                        fontSize: '0.75rem',
-                        fontWeight: 500,
-                        lineHeight: '1rem',
-                        letterSpacing: '0.031rem',
-                    },
-                },
-                {
-                    props: { variant: 'LabelSmall' },
-                    style: {
-                        fontSize: '0.688rem',
-                        fontWeight: 500,
-                        lineHeight: '1rem',
-                        letterSpacing: '0.031rem',
-                    },
-                },
-                {
-                    props: { variant: 'BodyLarge' },
-                    style: {
-                        fontSize: '1rem',
-                        fontWeight: 400,
-                        lineHeight: '1.5rem',
-                        letterSpacing: '0.031rem',
-                    },
-                },
-                {
-                    props: { variant: 'BodyMedium' },
-                    style: {
-                        fontSize: '0.875rem',
-                        fontWeight: 400,
-                        lineHeight: '1.25rem',
-                        letterSpacing: '0.016rem',
-                    },
-                },
-                {
-                    props: { variant: 'BodySmall' },
-                    style: {
-                        fontSize: '0.75rem',
-                        fontWeight: 400,
-                        lineHeight: '1rem',
-                        letterSpacing: '0.025rem',
-                    },
-                },
-                {
-                    props: { variant: 'Caption' },
-                    style: {
-                        fontSize: '0.75rem',
-                        lineHeight: '1rem',
-                        fontWeight: 400,
-                        letterSpacing: '0.025rem',
-                    },
-                },
-            ],
+            variants: TypographyVariantsNames.map((variantName) => ({
+                props: { variant: variantName },
+                style: Object.assign({}, typographyVariants[variantName]),
+            })),
         },
     };
 };

package/dist/src/components/feedback/Alert/Alert.theme.d.ts

@@ -1,4 +1,16 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Alert' {
+    interface AlertPropsColorOverrides {
+        error: true;
+        warning: true;
+        info: true;
+        success: true;
+        primary: true;
+    }
+    interface AlertsOwnProps extends ComponentWithViewContextOwnProps {
+    }
+}
 interface M3Alert {
     MuiAlert: {
         defaultProps?: ComponentsProps['MuiAlert'];

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

@@ -1,59 +1,75 @@
 export const getAlert = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiAlert: {
-            defaultProps: {
-                variant: 'standard',
-            },
+            // Example of how custom iconMapping can be used, though need to pass severity instead of/along with color for it to work
+            // defaultProps: {
+            //     iconMapping: {
+            //         error: <XCircleIcon />,
+            //     },
+            // },
             styleOverrides: {
                 root: {
-                    borderRadius: '20px',
-                },
-                standardError: {
-                    background: palette.errorContainer.main,
-                    color: palette.onErrorContainer.main,
-                },
-                standardInfo: {
-                    background: palette.infoContainer.main,
-                    color: palette.infoContainer.contrastText,
-                },
-                standardWarning: {
-                    background: palette.warningContainer.main,
-                    color: palette.onWarningContainer.main,
-                },
-                standardSuccess: {
-                    background: palette.successContainer.main,
-                    color: palette.onSuccessContainer.main,
+                    borderRadius: '6px',
+                    padding: '8px',
+                    '& svg': {
+                        width: '20px',
+                        height: '20px',
+                    },
+                    '.MuiAlert-action': {
+                        marginTop: '-6px',
+                    },
                 },
-                filledError: {
-                    background: palette.error.main,
-                    color: palette.onError.main,
-                },
-                filledInfo: {
-                    background: palette.info.main,
-                    color: palette.onInfo.main,
-                },
-                filledWarning: {
-                    background: palette.warning.main,
-                    color: palette.onWarning.main,
-                },
-                filledSuccess: {
-                    background: palette.success.main,
-                    color: palette.onSuccess.main,
+            },
+            variants: [
+                {
+                    props: { variant: 'standard', color: 'error' },
+                    style: {
+                        color: colors.schemes.status.onErrorContainer,
+                        backgroundColor: colors.schemes.status.errorContainer,
+                    },
                 },
-                outlinedError: {
-                    color: palette.error.main,
+                {
+                    props: { variant: 'standard', color: 'warning' },
+                    style: {
+                        backgroundColor: colors.schemes.status.warningContainer,
+                        color: colors.schemes.status.onWarningContainer,
+                        '& svg': {
+                            color: colors.schemes.status.onWarningContainer,
+                        },
+                    },
                 },
-                outlinedInfo: {
-                    color: palette.info.main,
+                {
+                    props: { variant: 'standard', color: 'info' },
+                    style: {
+                        backgroundColor: colors.schemes.status.infoContainer,
+                        color: colors.schemes.status.onInfoContainer,
+                        '& svg': {
+                            color: colors.schemes.status.onInfoContainer,
+                        },
+                    },
                 },
-                outlinedWarning: {
-                    color: palette.warning.main,
+                {
+                    props: { variant: 'standard', color: 'success' },
+                    style: {
+                        backgroundColor: colors.schemes.status.successContainer,
+                        color: colors.schemes.status.onSuccessContainer,
+                        '& svg': {
+                            color: colors.schemes.status.onSuccessContainer,
+                        },
+                    },
                 },
-                outlinedSuccess: {
-                    color: palette.success.main,
+                {
+                    props: { variant: 'standard', color: 'primary' },
+                    style: {
+                        backgroundColor: colors.schemes.base.primaryContainer,
+                        color: colors.schemes.base.onPrimaryContainer,
+                        '& svg': {
+                            color: colors.schemes.base.onPrimaryContainer,
+                        },
+                    },
                 },
-            },
+            ],
         },
     };
 };

package/dist/src/components/feedback/CircularProgress/CircularProgress.theme.d.ts

@@ -1,4 +1,9 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/CircularProgress' {
+    interface CircularProgressProps extends ComponentWithViewContextOwnProps {
+    }
+}
 interface M3CircularProgress {
     MuiCircularProgress: {
         defaultProps?: ComponentsProps['MuiCircularProgress'];
@@ -6,5 +11,5 @@ interface M3CircularProgress {
         variants?: ComponentsVariants['MuiCircularProgress'];
     };
 }
-export declare const getCircularProgress: (_theme: Theme) => M3CircularProgress;
+export declare const getCircularProgress: (theme: Theme) => M3CircularProgress;
 export {};

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

@@ -1,11 +1,52 @@
-export const getCircularProgress = (_theme) => ({
-    MuiCircularProgress: {
-        styleOverrides: {
-            root: {
-                '& .MuiCircularProgress-circle': {
-                    strokeLinecap: 'round',
+export const getCircularProgress = (theme) => {
+    const getCircularProgressColors = (color, viewContext) => {
+        const isInverseView = viewContext === 'inverse';
+        const { colors } = theme;
+        const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+        const palette = colors[schemesPath];
+        const colorMap = {
+            primary: palette.base.primary,
+            secondary: palette.base.secondary,
+            error: palette.status.error,
+            info: palette.status.info,
+            success: palette.status.success,
+            warning: palette.status.warning,
+            inherit: 'inherit',
+        };
+        return [
+            {
+                props: { color, viewContext },
+                style: {
+                    color: colorMap[color],
                 },
             },
+        ];
+    };
+    return {
+        MuiCircularProgress: {
+            styleOverrides: {
+                root: {
+                    '& .MuiCircularProgress-circle': {
+                        strokeLinecap: 'round',
+                    },
+                },
+            },
+            variants: [
+                ...getCircularProgressColors('primary'),
+                ...getCircularProgressColors('secondary'),
+                ...getCircularProgressColors('error'),
+                ...getCircularProgressColors('info'),
+                ...getCircularProgressColors('success'),
+                ...getCircularProgressColors('warning'),
+                ...getCircularProgressColors('inherit'),
+                ...getCircularProgressColors('primary', 'inverse'),
+                ...getCircularProgressColors('secondary', 'inverse'),
+                ...getCircularProgressColors('error', 'inverse'),
+                ...getCircularProgressColors('info', 'inverse'),
+                ...getCircularProgressColors('success', 'inverse'),
+                ...getCircularProgressColors('warning', 'inverse'),
+                ...getCircularProgressColors('inherit', 'inverse'),
+            ],
         },
-    },
-});
+    };
+};

package/dist/src/components/feedback/Dialog/Dialog.theme.d.ts

@@ -1,4 +1,9 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+declare module '@mui/material/DialogActions' {
+    interface DialogActionsProps {
+        alignment?: 'left' | 'right';
+    }
+}
 interface M3Dialog {
     MuiDialog: {
         defaultProps?: ComponentsProps['MuiDialog'];

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

@@ -1,7 +1,12 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { modalClasses, dialogContentClasses, dialogClasses, } from '@mui/material';
+import { modalClasses, dialogContentClasses, dialogClasses, iconButtonClasses, } from '@mui/material';
 export const getDialog = (theme) => {
-    const { spacing, palette } = theme;
+    const { spacing, palette, colors } = theme;
+    const closeButtonPosition = {
+        position: 'absolute',
+        right: spacing(3),
+        top: 25,
+    };
     return {
         MuiDialogTitle: {
             defaultProps: {
@@ -9,21 +14,29 @@ export const getDialog = (theme) => {
             },
             styleOverrides: {
                 root: {
-                    padding: `${spacing(2)} ${spacing(3)} ${spacing(1.5)}`,
-                    // By default, MUI removes top padding from DialogContent when it follows DialogTitle,
-                    // which can cause content to appear 'behind' the title. We're changing default padding to
-                    // create proper spacing between title and content without adjusting design of all dialogs
-                    //  important set because with value 1 it does not work
+                    padding: spacing(3.75, 8.25, 2.375, 4.5),
+                    color: palette.onSurface.main,
                     [`& + .${dialogContentClasses.root}`]: {
-                        paddingTop: `${spacing(1)} !important`,
+                        paddingTop: '0 !important',
                     },
+                    [`& .${iconButtonClasses.root}`]: closeButtonPosition,
                 },
             },
         },
         MuiDialog: {
+            defaultProps: {
+                PaperProps: {
+                    elevation: 3,
+                },
+            },
             styleOverrides: {
                 paper: {
-                    borderRadius: spacing(3.5),
+                    borderRadius: 10,
+                    backgroundColor: colors.schemes.surfaces.elevatedContainer,
+                    [`& > .${iconButtonClasses.root}`]: closeButtonPosition,
+                    [`& > .${iconButtonClasses.root} + .${dialogContentClasses.root}`]: {
+                        paddingTop: spacing(5.125),
+                    },
                     [`&.${dialogClasses.paperFullScreen}`]: {
                         borderRadius: 0,
                         maxWidth: 'none',
@@ -34,9 +47,8 @@ export const getDialog = (theme) => {
                     height: 'auto',
                     [`&.${modalClasses.root}.${dialogClasses.root} .${dialogClasses.paper}`]: {
                         height: 'auto',
-                        minHeight: '200px',
+                        minHeight: spacing(25),
                     },
-                    borderRadius: spacing(1),
                 },
             },
         },
@@ -44,17 +56,34 @@ export const getDialog = (theme) => {
             styleOverrides: {
                 root: {
                     color: palette.onSurfaceVariant.main,
-                    padding: `0 ${spacing(3)} ${spacing(3)}`,
+                    padding: spacing(0, 4.5, 1, 4.5),
+                },
+                dividers: {
+                    padding: spacing(2, 4.5),
+                    borderColor: colors.schemes.surfaces.outlineVariant,
                 },
             },
         },
         MuiDialogActions: {
             styleOverrides: {
                 root: {
-                    padding: `${spacing(1)} ${spacing(3)} ${spacing(3)}`,
-                    justifyContent: 'flex-start',
+                    padding: spacing(2, 4.25, 2.5, 2.375),
+                    justifyContent: 'flex-end',
+                    gap: spacing(0.5),
+                    '& > :not(style) ~ :not(style)': {
+                        marginLeft: 0,
+                    },
                 },
             },
+            variants: [
+                {
+                    props: { alignment: 'left' },
+                    style: {
+                        justifyContent: 'flex-start',
+                        padding: spacing(2, 2.375, 2.5, 4.25),
+                    },
+                },
+            ],
         },
         MuiDialogContentText: {
             styleOverrides: {

package/dist/src/components/feedback/LinearProgress/LinearProgress.theme.d.ts

@@ -1,4 +1,9 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/LinearProgress' {
+    interface LinearProgressProps extends ComponentWithViewContextOwnProps {
+    }
+}
 interface M3LinearProgress {
     MuiLinearProgress: {
         defaultProps?: ComponentsProps['MuiLinearProgress'];
@@ -6,5 +11,5 @@ interface M3LinearProgress {
         variants?: ComponentsVariants['MuiLinearProgress'];
     };
 }
-export declare const getLinearProgress: (_theme: Theme) => M3LinearProgress;
+export declare const getLinearProgress: (theme: Theme) => M3LinearProgress;
 export {};