@webpros/mui-theme 0.1.6 → 0.2.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,74 @@
 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',
+                    '& 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/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 {};

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

@@ -1,13 +1,87 @@
-export const getLinearProgress = (_theme) => ({
-    MuiLinearProgress: {
-        styleOverrides: {
-            root: {
-                borderRadius: '20px',
-                '.MuiLinearProgress-bar': {
-                    strokeLinecap: 'round',
+export const getLinearProgress = (theme) => {
+    const getLinearProgressColors = (color, viewContext) => {
+        const isInverseView = viewContext === 'inverse';
+        const { colors } = theme;
+        const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+        const layersPath = isInverseView ? 'inverseStateLayers' : 'stateLayers';
+        const palette = colors[schemesPath];
+        const layers = colors[layersPath];
+        const colorMap = {
+            primary: { primary: palette.base.primary, secondary: layers.base.primary.opacity28 },
+            secondary: {
+                primary: palette.base.secondary,
+                secondary: layers.base.secondary.opacity12,
+            },
+            error: { primary: palette.status.error, secondary: layers.status.error.opacity28 },
+            info: { primary: palette.status.info, secondary: layers.status.undefined.opacity28 },
+            success: {
+                primary: palette.status.success,
+                secondary: layers.status.success.opacity28,
+            },
+            warning: {
+                primary: palette.status.warning,
+                secondary: layers.status.undefined.opacity28,
+            },
+            inherit: { primary: 'inherit', secondary: 'inherit' },
+        };
+        const simpleVariants = ['determinate', 'indeterminate', 'query'].map((variant) => ({
+            props: { color, viewContext, variant },
+            style: {
+                background: colorMap[color].secondary,
+                '.MuiLinearProgress-bar1': {
+                    background: colorMap[color].primary,
+                },
+                '.MuiLinearProgress-bar2': {
+                    background: colorMap[color].primary,
+                },
+            },
+        }));
+        return [
+            ...simpleVariants,
+            {
+                props: { color, viewContext, variant: 'buffer' },
+                style: {
+                    '.MuiLinearProgress-bar1': {
+                        background: colorMap[color].primary,
+                    },
+                    '.MuiLinearProgress-bar2': {
+                        background: colorMap[color].secondary,
+                    },
+                    '.MuiLinearProgress-dashed': {
+                        background: colorMap[color].secondary,
+                    },
+                },
+            },
+        ];
+    };
+    return {
+        MuiLinearProgress: {
+            styleOverrides: {
+                root: {
                     borderRadius: '20px',
+                    '.MuiLinearProgress-bar': {
+                        strokeLinecap: 'round',
+                        borderRadius: '20px',
+                    },
                 },
             },
+            // @ts-expect-error
+            variants: [
+                ...getLinearProgressColors('primary'),
+                ...getLinearProgressColors('secondary'),
+                ...getLinearProgressColors('error'),
+                ...getLinearProgressColors('info'),
+                ...getLinearProgressColors('success'),
+                ...getLinearProgressColors('warning'),
+                ...getLinearProgressColors('inherit'),
+                ...getLinearProgressColors('primary', 'inverse'),
+                ...getLinearProgressColors('secondary', 'inverse'),
+                ...getLinearProgressColors('error', 'inverse'),
+                ...getLinearProgressColors('info', 'inverse'),
+                ...getLinearProgressColors('success', 'inverse'),
+                ...getLinearProgressColors('warning', 'inverse'),
+                ...getLinearProgressColors('inherit', 'inverse'),
+            ],
         },
-    },
-});
+    };
+};

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

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

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

@@ -1,11 +1,15 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export const getSnackbar = (theme) => {
-    const { spacing } = theme;
+    const { colors } = theme;
     return {
-        MuiSnackbarContent: {
+        MuiSnackbar: {
             styleOverrides: {
                 root: {
-                    borderRadius: spacing(1),
+                    borderRadius: '10px',
+                    '& .MuiSnackbarContent-root': {
+                        backgroundColor: colors.inverseSchemes.surfaces.elevatedContainerLowest,
+                        alignItems: 'baseline',
+                    },
                 },
             },
         },

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

@@ -1,4 +1,5 @@
 export * from './utils/CssBaseline';
+export * from './utils/Backdrop';
 export * from './feedback/Alert';
 export * from './feedback/Snackbar';
 export * from './feedback/CircularProgress';
@@ -20,6 +21,7 @@ export * from './navigation/Drawer';
 export * from './inputs/Fab';
 export * from './inputs/IconButton';
 export * from './data-display/Divider';
+export * from './data-display/List';
 export * from './data-display/ListItem';
 export * from './data-display/ListItemButton';
 export * from './data-display/ListItemIcon';
@@ -30,14 +32,21 @@ export * from './data-display/Table';
 export * from './navigation/Menu';
 export * from './navigation/MenuItem';
 export * from './surfaces/Paper';
+export * from './surfaces/Popover';
 export * from './inputs/Switch';
 export * from './navigation/Link';
+export * from './navigation/Breadcrumbs';
 export * from './navigation/PaginationItem';
 export * from './navigation/Tab';
-export * from './navigation/TabList';
+export * from './navigation/Tabs';
 export * from './inputs/TextField';
 export * from './inputs/ToggleButton';
 export * from './inputs/ToggleButtonGroup';
 export * from './data-display/Tooltip';
 export * from './data-display/Typography';
 export * from './inputs/InputBase';
+export * from './data-display/Skeleton';
+export * from './inputs/FormLabel';
+export * from './inputs/OutlinedInput';
+export * from './inputs/FormHelperText';
+export * from './inputs/Radio';