@webpros/mui-theme 0.1.5 → 0.2.0

package/dist/src/components/data-display/Chip/get-chip-colors-map.d.ts

@@ -0,0 +1,42 @@
+import { Theme } from '@mui/material';
+import { ViewContext } from '../../../shared/viewContext';
+type ChipColorsMap = {
+    baseColor: {
+        background: string;
+        icon: string;
+        label: string;
+        deleteIcon: {
+            base: string;
+            hover: string;
+        };
+    };
+    disabled: {
+        background: string;
+        color: string;
+        iconColor: string;
+    };
+    selectedColor: {
+        background: string;
+        icon: string;
+        label: string;
+        deleteIcon: {
+            base: string;
+            hover: string;
+        };
+    };
+    hover: string;
+    focus: string;
+    active: string;
+    ripple: string;
+};
+export declare const getChipColorsMap: (theme: Theme, viewContext?: ViewContext) => {
+    primary: ChipColorsMap;
+    secondary: ChipColorsMap;
+    default: ChipColorsMap;
+    undefined: ChipColorsMap;
+    success: ChipColorsMap;
+    error: ChipColorsMap;
+    warning: ChipColorsMap;
+    info: ChipColorsMap;
+};
+export {};

package/dist/src/components/data-display/Chip/get-chip-colors-map.js

@@ -0,0 +1,253 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// Here are extracted colors for `Chip` component, not applicable to other components
+export const getChipColorsMap = (theme, viewContext) => {
+    const isInverseView = viewContext === 'inverse';
+    const { colors } = theme;
+    const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+    const stateLayersPath = isInverseView ? 'inverseStateLayers' : 'stateLayers';
+    const blendColors = isInverseView
+        ? colors.blendInverseSchemaWithStateLayer
+        : colors.blendSchemaWithStateLayer;
+    const DEFAULT_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].surfaces.surfaceContainerHigh,
+            icon: colors[schemesPath].base.primary,
+            label: colors[schemesPath].surfaces.onSurface,
+            deleteIcon: {
+                base: colors[stateLayersPath].surfaces.onSurface.opacity28,
+                hover: colors[stateLayersPath].surfaces.onSurface.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].base.primaryContainer,
+            icon: colors[schemesPath].base.primary,
+            label: colors[schemesPath].base.onPrimaryContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].base.onPrimaryContainer.opacity28,
+                hover: colors[stateLayersPath].base.onPrimaryContainer.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.surfaces.surfaceContainerHigh`, `${stateLayersPath}.surfaces.onSurface.opacity08`),
+        focus: blendColors(`${schemesPath}.surfaces.surfaceContainerHigh`, `${stateLayersPath}.surfaces.onSurface.opacity12`),
+        active: blendColors(`${schemesPath}.surfaces.surfaceContainerHigh`, `${stateLayersPath}.surfaces.onSurface.opacity08`),
+        ripple: colors[stateLayersPath].surfaces.onSurface.opacity12,
+    };
+    const PRIMARY_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].base.primaryContainer,
+            icon: colors[schemesPath].base.onPrimaryContainer,
+            label: colors[schemesPath].base.onPrimaryContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].base.onPrimaryContainer.opacity28,
+                hover: colors[stateLayersPath].base.onPrimaryContainer.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].base.primary,
+            icon: colors[schemesPath].base.onPrimary,
+            label: colors[schemesPath].base.onPrimary,
+            deleteIcon: {
+                base: colors[stateLayersPath].base.onPrimary.opacity28,
+                hover: colors[stateLayersPath].base.onPrimary.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity08`),
+        focus: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity12`),
+        active: blendColors(`${schemesPath}.base.primaryContainer`, `${stateLayersPath}.base.onPrimaryContainer.opacity08`),
+        ripple: colors[stateLayersPath].base.onPrimaryContainer.opacity12,
+    };
+    const UNDEFINED_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].status.undefinedContainer,
+            icon: colors[schemesPath].status.onUndefinedContainer,
+            label: colors[schemesPath].status.onUndefinedContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onUndefinedContainer.opacity28,
+                hover: colors[stateLayersPath].status.onUndefinedContainer.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].status.undefined,
+            icon: colors[schemesPath].status.onUndefined,
+            label: colors[schemesPath].status.onUndefined,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onUndefined.opacity28,
+                hover: colors[stateLayersPath].status.onUndefined.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.status.undefinedContainer`, `${stateLayersPath}.status.onUndefinedContainer.opacity08`),
+        focus: blendColors(`${schemesPath}.status.undefinedContainer`, `${stateLayersPath}.status.onUndefinedContainer.opacity12`),
+        active: blendColors(`${schemesPath}.status.undefinedContainer`, `${stateLayersPath}.status.onUndefinedContainer.opacity08`),
+        ripple: colors[stateLayersPath].status.onUndefinedContainer.opacity12,
+    };
+    const SECONDARY_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].base.secondaryContainer,
+            icon: colors[schemesPath].base.onSecondaryContainer,
+            label: colors[schemesPath].base.onSecondaryContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].base.onSecondaryContainer.opacity28,
+                hover: colors[stateLayersPath].base.onSecondaryContainer.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].base.secondary,
+            icon: colors[schemesPath].base.onSecondary,
+            label: colors[schemesPath].base.onSecondary,
+            deleteIcon: {
+                base: colors[stateLayersPath].base.onSecondary.opacity28,
+                hover: colors[stateLayersPath].base.onSecondary.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity08`),
+        focus: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity12`),
+        active: blendColors(`${schemesPath}.base.secondaryContainer`, `${stateLayersPath}.base.onSecondaryContainer.opacity08`),
+        ripple: colors[stateLayersPath].base.onSecondaryContainer.opacity12,
+    };
+    const ERROR_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].status.errorContainer,
+            icon: colors[schemesPath].status.onErrorContainer,
+            label: colors[schemesPath].status.onErrorContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onErrorContainer.opacity28,
+                hover: colors[stateLayersPath].status.onErrorContainer.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].status.error,
+            icon: colors[schemesPath].status.onError,
+            label: colors[schemesPath].status.onError,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onError.opacity28,
+                hover: colors[stateLayersPath].status.onError.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity08`),
+        focus: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity12`),
+        active: blendColors(`${schemesPath}.status.errorContainer`, `${stateLayersPath}.status.onErrorContainer.opacity08`),
+        ripple: colors[stateLayersPath].status.onErrorContainer.opacity12,
+    };
+    const WARNING_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].status.warningContainer,
+            icon: colors[schemesPath].status.onWarningContainer,
+            label: colors[schemesPath].status.onWarningContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onWarningContainer.opacity28,
+                hover: colors[stateLayersPath].status.onWarningContainer.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].status.warning,
+            icon: colors[schemesPath].status.onWarning,
+            label: colors[schemesPath].status.onWarning,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onWarningContainer.opacity28,
+                hover: colors[stateLayersPath].status.onWarningContainer.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.status.warningContainer`, `${stateLayersPath}.status.onWarningContainer.opacity08`),
+        focus: blendColors(`${schemesPath}.status.warningContainer`, `${stateLayersPath}.status.onWarningContainer.opacity12`),
+        active: blendColors(`${schemesPath}.status.warningContainer`, `${stateLayersPath}.status.onWarningContainer.opacity08`),
+        ripple: colors[stateLayersPath].status.onWarningContainer.opacity12,
+    };
+    const INFO_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].status.infoContainer,
+            icon: colors[schemesPath].status.onInfoContainer,
+            label: colors[schemesPath].status.onInfoContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onInfoContainer.opacity28,
+                hover: colors[stateLayersPath].status.onInfoContainer.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].status.info,
+            icon: colors[schemesPath].status.onInfo,
+            label: colors[schemesPath].status.onInfo,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onInfo.opacity28,
+                hover: colors[stateLayersPath].status.onInfo.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.status.infoContainer`, `${stateLayersPath}.status.onInfoContainer.opacity08`),
+        focus: blendColors(`${schemesPath}.status.infoContainer`, `${stateLayersPath}.status.onInfoContainer.opacity12`),
+        active: blendColors(`${schemesPath}.status.infoContainer`, `${stateLayersPath}.status.onInfoContainer.opacity08`),
+        ripple: colors[stateLayersPath].status.onInfoContainer.opacity12,
+    };
+    const SUCCESS_COLORS = {
+        baseColor: {
+            background: colors[schemesPath].status.successContainer,
+            icon: colors[schemesPath].status.onSuccessContainer,
+            label: colors[schemesPath].status.onSuccessContainer,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onSuccessContainer.opacity28,
+                hover: colors[stateLayersPath].status.onSuccessContainer.opacity38,
+            },
+        },
+        disabled: {
+            background: colors[stateLayersPath].surfaces.onSurface.opacity12,
+            color: colors[schemesPath].surfaces.onSurface,
+            iconColor: colors[stateLayersPath].surfaces.onSurface.opacity28,
+        },
+        selectedColor: {
+            background: colors[schemesPath].status.success,
+            icon: colors[schemesPath].status.onSuccess,
+            label: colors[schemesPath].status.onSuccess,
+            deleteIcon: {
+                base: colors[stateLayersPath].status.onSuccess.opacity28,
+                hover: colors[stateLayersPath].status.onSuccess.opacity38,
+            },
+        },
+        hover: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity08`),
+        focus: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity12`),
+        active: blendColors(`${schemesPath}.status.successContainer`, `${stateLayersPath}.status.onSuccessContainer.opacity08`),
+        ripple: colors[stateLayersPath].status.onSuccessContainer.opacity12,
+    };
+    return {
+        primary: PRIMARY_COLORS,
+        secondary: SECONDARY_COLORS,
+        default: DEFAULT_COLORS,
+        undefined: UNDEFINED_COLORS,
+        success: SUCCESS_COLORS,
+        error: ERROR_COLORS,
+        warning: WARNING_COLORS,
+        info: INFO_COLORS,
+    };
+};

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

@@ -1,5 +1,10 @@
 import { Theme, ComponentsOverrides, ComponentsVariants } from '@mui/material';
-declare module '@mui/material/Divider' { }
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Divider' {
+    interface DividerOwnProps extends ComponentWithViewContextOwnProps {
+        paddings?: boolean;
+    }
+}
 export interface M3Divider {
     MuiDivider: {
         styleOverrides?: ComponentsOverrides<Theme>['MuiDivider'];

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

@@ -3,14 +3,71 @@ export const getDivider = (theme) => ({
     MuiDivider: {
         styleOverrides: {
             root: {
-                borderColor: theme.palette.outlineVariant.main,
+                borderColor: theme.colors.schemes.surfaces.outlineVariant,
             },
         },
         variants: [
             {
-                props: { variant: 'inset' },
+                props: { viewContext: 'inverse' },
                 style: {
-                    marginLeft: '5%',
+                    borderColor: theme.colors.inverseSchemes.surfaces.outlineVariant,
+                },
+            },
+            {
+                props: { variant: 'middle', orientation: 'horizontal' },
+                style: {
+                    marginLeft: '36px',
+                    marginRight: '36px',
+                },
+            },
+            {
+                props: { variant: 'middle', orientation: 'vertical' },
+                style: {
+                    marginTop: '36px',
+                    marginBottom: '36px',
+                },
+            },
+            {
+                props: { variant: 'inset', orientation: 'horizontal' },
+                style: {
+                    marginLeft: '36px',
+                },
+            },
+            {
+                props: { variant: 'inset', orientation: 'vertical' },
+                style: {
+                    marginTop: '36px',
+                    marginLeft: 0,
+                },
+            },
+            {
+                props: { paddings: true, orientation: 'horizontal' },
+                style: {
+                    marginTop: '6px',
+                    marginBottom: '6px',
+                },
+            },
+            {
+                props: { paddings: true, orientation: 'vertical' },
+                style: {
+                    marginLeft: '6px',
+                    marginRight: '6px',
+                },
+            },
+            {
+                props: { textAlign: 'left' },
+                style: {
+                    '&:before': {
+                        width: 0,
+                    },
+                },
+            },
+            {
+                props: { textAlign: 'right' },
+                style: {
+                    '&:after': {
+                        width: 0,
+                    },
                 },
             },
         ],

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

@@ -6,6 +6,6 @@ interface M3ListItem {
         variants?: ComponentsVariants['MuiList'];
     };
 }
-export declare const getList: (_: Theme) => M3ListItem;
+export declare const getList: (_theme: Theme) => M3ListItem;
 declare const _default: {};
 export default _default;

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

@@ -1,5 +1,5 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-export const getList = (_) => ({
+export const getList = (_theme) => ({
     MuiListItem: {},
 });
 export default {};

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

@@ -6,6 +6,6 @@ interface M3ListItem {
         variants?: ComponentsVariants['MuiListItem'];
     };
 }
-export declare const getListItem: (_: Theme) => M3ListItem;
+export declare const getListItem: (_theme: Theme) => M3ListItem;
 declare const _default: {};
 export default _default;

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

@@ -1,13 +1,21 @@
-export const getListItem = (_) => ({
+export const getListItem = (_theme) => ({
     MuiListItem: {
-        styleOverrides: {
-            root: {
-                paddingTop: 1,
-                paddingBottom: 1,
-                paddingLeft: 0,
-                paddingRight: 0,
+        variants: [
+            {
+                props: ({ ownerState }) => !ownerState.disablePadding,
+                style: {
+                    paddingTop: 7,
+                    paddingBottom: 7,
+                },
             },
-        },
+            {
+                props: ({ ownerState }) => !ownerState.disablePadding && !ownerState.disableGutters,
+                style: {
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                },
+            },
+        ],
     },
 });
 export default {};

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

@@ -2,8 +2,7 @@ export const getListItemAvatar = (_theme) => ({
     MuiListItemAvatar: {
         styleOverrides: {
             root: {
-                color: 'inherit',
-                minWidth: 36,
+                minWidth: 38,
             },
         },
     },

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

@@ -1,9 +1,4 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
-declare module '@mui/material/ListItemButton' {
-    interface ListItemButtonOwnProps {
-        variant?: 'list' | 'nav';
-    }
-}
 interface M3ListItemButton {
     MuiListItemButton: {
         defaultProps?: ComponentsProps['MuiListItemButton'];

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

@@ -1,64 +1,30 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha, } from '@mui/material';
+import { listItemButtonClasses, } from '@mui/material';
 export const getListItemButton = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiListItemButton: {
             styleOverrides: {
                 root: {
-                    fontSize: '0.875rem',
-                    fontWeight: 500,
-                    lineHeight: '1.25rem',
-                    letterSpacing: '0.006rem',
+                    paddingTop: 5,
+                    paddingBottom: 5,
                     '&:hover': {
-                        backgroundColor: alpha(palette.onSurfaceVariant.main, 0.04),
+                        backgroundColor: colors.stateLayers.base.secondary.opacity08,
+                    },
+                    [`&.${listItemButtonClasses.selected}`]: {
+                        backgroundColor: colors.schemes.base.secondaryContainer,
+                    },
+                    [`&.${listItemButtonClasses.focusVisible}`]: {
+                        backgroundColor: colors.stateLayers.base.secondary.opacity12,
                     },
                 },
             },
             variants: [
                 {
-                    props: { variant: 'list' },
-                    style: {
-                        '&:hover': {
-                            backgroundColor: alpha(palette.onSurfaceVariant.main, 0.04),
-                        },
-                        '&.Mui-selected': {
-                            backgroundColor: alpha(palette.onSurfaceVariant.main, 0.04),
-                            '&:hover': {
-                                backgroundColor: alpha(palette.onSurfaceVariant.main, 0.08),
-                            },
-                        },
-                    },
-                },
-                {
-                    props: { variant: 'nav' },
+                    props: ({ ownerState }) => !ownerState.disableGutters,
                     style: {
-                        borderRadius: 12,
-                        color: palette.onSurfaceVariant.main,
-                        paddingTop: '13px',
-                        paddingBottom: '13px',
-                        paddingLeft: '16px',
-                        '& > .MuiListItemText-root > .MuiTypography-root': {
-                            fontWeight: 500,
-                            fontSize: '0.875rem',
-                            lineHeight: '1.25rem',
-                            letterSpacing: '0.006rem',
-                        },
-                        '&:hover': {},
-                        '&:active': {
-                            color: palette.primary,
-                        },
-                        '&.Mui-selected': {
-                            color: palette.primary.main,
-                            background: 'transparent',
-                            '& > .MuiListItemText-root > .MuiTypography-root': {},
-                            '&:hover': {
-                                backgroundColor: alpha(palette.onSurfaceVariant.main, 0.04),
-                            },
-                            '&:active': {
-                                color: palette.primary.main,
-                            },
-                        },
+                        paddingLeft: 12,
+                        paddingRight: 12,
                     },
                 },
             ],

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

@@ -2,10 +2,10 @@ export const getListItemIcon = (_theme) => ({
     MuiListItemIcon: {
         styleOverrides: {
             root: {
-                color: 'inherit',
-                minWidth: 36,
-                '&.Mui-selected': {
-                    fontWeight: 'bold',
+                minWidth: 32,
+                svg: {
+                    width: 20,
+                    height: 20,
                 },
             },
         },

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

@@ -6,6 +6,6 @@ interface M3ListSubheader {
         variants?: ComponentsVariants['MuiListSubheader'];
     };
 }
-export declare const getListSubheader: (theme: Theme) => M3ListSubheader;
+export declare const getListSubheader: (_theme: Theme) => M3ListSubheader;
 declare const _default: {};
 export default _default;

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

@@ -1,12 +1,9 @@
-export const getListSubheader = (theme) => {
-    const { palette } = theme;
+export const getListSubheader = (_theme) => {
     return {
         MuiListSubheader: {
             styleOverrides: {
                 root: {
-                    lineHeight: '2.5rem',
-                    backgroundColor: palette.surfaceContainerLowest.main,
-                    paddingLeft: 0,
+                    lineHeight: '34px',
                 },
             },
         },

package/dist/src/components/data-display/Skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import './Skeleton.theme';
+export declare const Skeleton: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SkeletonTypeMap<{}, "span">>;
+export type SkeletonComponentType = typeof Skeleton;

package/dist/src/components/data-display/Skeleton/Skeleton.js

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

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

@@ -0,0 +1,15 @@
+import { Theme, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Skeleton' {
+    interface SkeletonOwnProps extends ComponentWithViewContextOwnProps {
+    }
+}
+export interface M3Skeleton {
+    MuiSkeleton: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiSkeleton'];
+        variants?: ComponentsVariants['MuiSkeleton'];
+    };
+}
+export declare const getSkeleton: (theme: Theme) => M3Skeleton;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,31 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getSkeleton = (theme) => ({
+    MuiSkeleton: {
+        styleOverrides: {
+            root: {
+                backgroundColor: theme.colors.stateLayers.base.secondary.opacity08,
+            },
+        },
+        variants: [
+            {
+                props: { variant: 'text' },
+                style: {
+                    borderRadius: '17px',
+                },
+            },
+            {
+                props: { variant: 'rounded' },
+                style: {
+                    borderRadius: '10px',
+                },
+            },
+            {
+                props: { viewContext: 'inverse' },
+                style: {
+                    backgroundColor: theme.colors.inverseStateLayers.base.secondary.opacity08,
+                },
+            },
+        ],
+    },
+});
+export default {};

package/dist/src/components/data-display/Skeleton/index.d.ts

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

package/dist/src/components/data-display/Skeleton/index.js

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