@webpros/mui-theme 0.1.6 → 0.2.0

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v6 theme for WebPros products",
-    "version": "0.1.6",
+    "version": "0.2.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -42,7 +42,8 @@
         "eslint": "eslint",
         "prettier:test": "prettier --check \"**/*.{ts,tsx}\"",
         "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-        "typecheck": "tsc --noEmit"
+        "typecheck": "tsc --noEmit",
+        "extract-tokens": "node tools/extractM3Tokens.js"
     },
     "peerDependencies": {
         "@emotion/react": "^11.14.0",
@@ -93,12 +94,13 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "storybook": "^9.1.16",
+        "storybook-addon-pseudo-states": "^10.0.3",
         "tsc-alias": "^1.8.16",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.1",
+        "usehooks-ts": "^3.1.1",
         "vite": "^7.1.10",
-        "vite-plugin-dts": "^4.5.4",
-        "usehooks-ts": "^3.1.1"
+        "vite-plugin-dts": "^4.5.4"
     },
     "browserslist": [
         "last 2 versions",

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

@@ -1,19 +1,22 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export const getAvatar = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiAvatar: {
             styleOverrides: {
                 root: {
-                    width: 40,
-                    height: 40,
-                    borderRadius: '50%',
-                    color: palette.primary.main,
-                    img: {
-                        borderRadius: '50%',
-                    },
+                    color: colors.schemes.base.primary,
+                    backgroundColor: colors.schemes.base.primaryContainer,
                 },
             },
+            variants: [
+                {
+                    props: { variant: 'rounded' },
+                    style: {
+                        borderRadius: '6px',
+                    },
+                },
+            ],
         },
     };
 };

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

@@ -1,15 +1,18 @@
 import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
 declare module '@mui/material/Badge' {
     interface BadgePropsColorOverrides {
         tertiary: true;
         outlined: true;
+        undefined: true;
     }
-    interface BadgeOwnProps {
+    interface BadgeOwnProps extends ComponentWithViewContextOwnProps {
         size?: 'small' | 'medium' | 'large';
         horizontal?: 'left' | 'center' | 'right';
         vertical?: 'bottom' | 'center' | 'top';
         transformVertical?: number;
         transformHorizontal?: number;
+        icon?: boolean;
     }
 }
 interface M3Badge {

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

@@ -1,129 +1,290 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { badgeClasses, } from '@mui/material';
+// Clip paths for special shapes
+const OCTAGON_CLIP_PATH = 'polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px)';
+const OCTAGON_SMALL_CLIP_PATH = 'polygon(2.5px 0, calc(100% - 2.5px) 0, 100% 2.5px, 100% calc(100% - 2.5px), calc(100% - 2.5px) 100%, 2.5px 100%, 0 calc(100% - 2.5px), 0 2.5px)';
+const DIAMOND_CLIP_PATH = 'polygon(50% 0, 100% 50%, 50% 100%, 0 50%)';
+// Base styles for icon badges
+const iconBaseStyle = (size) => ({
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size,
+    padding: 0,
+});
+const DIAMOND_STRETCH_CLIP_PATH = 'polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%)';
 export const getBadge = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiBadge: {
-            defaultProps: { color: 'default', size: 'small' },
+            defaultProps: { color: 'error', size: 'small', max: 999 },
+            styleOverrides: {
+                badge: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+            },
             variants: [
+                // Color variants
+                {
+                    props: { color: 'error' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.schemes.status.error,
+                            color: colors.schemes.status.onError,
+                        },
+                    },
+                },
                 {
-                    props: { color: 'default' },
+                    props: { color: 'warning' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            backgroundColor: palette.error.main,
-                            color: palette.onError.main,
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.schemes.status.warning,
+                            color: colors.schemes.status.onWarning,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'success' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.schemes.status.success,
+                            color: colors.schemes.status.onSuccess,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'undefined' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.schemes.base.primary,
+                            color: colors.schemes.base.onPrimary,
                         },
                     },
                 },
                 {
                     props: { color: 'outlined' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            backgroundColor: palette.surfaceContainerLowest.main,
-                            color: palette.onSurfaceVariant.main,
-                            borderColor: palette.outline.main,
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.schemes.surfaces.surfaceContainerLowest,
+                            color: colors.schemes.surfaces.onSurfaceVariant,
                             borderWidth: 1,
                             borderStyle: 'solid',
+                            borderColor: colors.schemes.surfaces.outline,
+                        },
+                    },
+                },
+                // Inverse color variants
+                {
+                    props: { color: 'error', viewContext: 'inverse' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.inverseSchemes.status.error,
+                            color: colors.inverseSchemes.status.onError,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'warning', viewContext: 'inverse' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.inverseSchemes.status.warning,
+                            color: colors.inverseSchemes.status.onWarning,
                         },
                     },
                 },
-                // BadgeOwnProps['size']
+                {
+                    props: { color: 'success', viewContext: 'inverse' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.inverseSchemes.status.success,
+                            color: colors.inverseSchemes.status.onSuccess,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'undefined', viewContext: 'inverse' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            backgroundColor: colors.inverseSchemes.base.primary,
+                            color: colors.inverseSchemes.base.onPrimary,
+                        },
+                    },
+                },
+                // Size variants
                 {
                     props: { size: 'small' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
+                        '& .MuiBadge-badge': {
                             minWidth: 6,
                             minHeight: 6,
-                            width: 6,
-                            height: 6,
-                            borderRadius: 6,
+                            borderRadius: 999,
                         },
                     },
                 },
                 {
                     props: { size: 'medium' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            minWidth: 12,
-                            minHeight: 12,
-                            width: 12,
-                            height: 12,
-                            borderRadius: 12,
+                        '& .MuiBadge-badge': {
+                            minWidth: 9,
+                            minHeight: 9,
+                            borderRadius: 999,
                         },
                     },
                 },
                 {
                     props: { size: 'large' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            minWidth: 16,
-                            minHeight: 16,
-                            width: 16,
-                            height: 16,
-                            borderRadius: 16,
+                        '& .MuiBadge-badge': {
+                            minWidth: 18,
+                            minHeight: 18,
+                            borderRadius: 999,
                         },
                     },
                 },
+                // Dot variants
                 {
-                    props: {
-                        horizontal: 'left',
+                    props: { size: 'small', variant: 'dot' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            width: 6,
+                            height: 6,
+                            borderRadius: 999,
+                        },
                     },
+                },
+                {
+                    props: { size: 'medium', variant: 'dot' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            left: '0',
+                        '& .MuiBadge-badge': {
+                            width: 9,
+                            height: 9,
+                            borderRadius: 999,
                         },
                     },
                 },
                 {
-                    props: {
-                        horizontal: 'center',
+                    props: { size: 'medium', color: 'error', variant: 'dot' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            width: 9,
+                            height: 9,
+                            clipPath: OCTAGON_SMALL_CLIP_PATH,
+                            borderRadius: 0,
+                        },
                     },
+                },
+                {
+                    props: { size: 'medium', color: 'warning', variant: 'dot' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            left: '50%',
+                        '& .MuiBadge-badge': {
+                            width: 9,
+                            height: 9,
+                            clipPath: DIAMOND_CLIP_PATH,
+                            borderRadius: 0,
                         },
                     },
                 },
+                // Large standard variants with special shapes
                 {
-                    props: {
-                        horizontal: 'right',
+                    props: { size: 'large', color: 'error', variant: 'standard' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            height: 18,
+                            minHeight: 18,
+                            padding: '0 6px',
+                            clipPath: OCTAGON_CLIP_PATH,
+                            borderRadius: 0,
+                        },
                     },
+                },
+                {
+                    props: { size: 'large', color: 'warning', variant: 'standard' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            right: '0',
+                        '& .MuiBadge-badge': {
+                            height: 18,
+                            minHeight: 18,
+                            padding: '0 6px',
+                            clipPath: DIAMOND_STRETCH_CLIP_PATH,
+                            borderRadius: 0,
                         },
                     },
                 },
                 {
-                    props: {
-                        vertical: 'bottom',
+                    props: { size: 'large', color: 'success', variant: 'standard' },
+                    style: {
+                        '& .MuiBadge-badge': {
+                            minWidth: 18,
+                            height: 18,
+                            minHeight: 18,
+                            paddingLeft: 4,
+                            paddingRight: 4,
+                            borderRadius: 999,
+                        },
                     },
+                },
+                {
+                    props: { size: 'large', color: 'undefined', variant: 'standard' },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            bottom: '0',
+                        '& .MuiBadge-badge': {
+                            minWidth: 18,
+                            height: 18,
+                            minHeight: 18,
+                            paddingLeft: 4,
+                            paddingRight: 4,
+                            borderRadius: 999,
                         },
                     },
                 },
+                // Icon variants (fixed square size)
                 {
-                    props: {
-                        vertical: 'center',
+                    props: { size: 'large', color: 'error', icon: true },
+                    style: {
+                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(18)), { clipPath: OCTAGON_CLIP_PATH, borderRadius: 0 }),
                     },
+                },
+                {
+                    props: { size: 'large', color: 'warning', icon: true },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            top: '50%',
-                        },
+                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(20)), { clipPath: DIAMOND_CLIP_PATH, borderRadius: 0 }),
                     },
                 },
                 {
-                    props: {
-                        vertical: 'top',
+                    props: { size: 'large', color: 'success', icon: true },
+                    style: {
+                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(18)), { borderRadius: 999 }),
                     },
+                },
+                {
+                    props: { size: 'large', color: 'undefined', icon: true },
                     style: {
-                        [`.${badgeClasses.badge}`]: {
-                            top: '0',
-                        },
+                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(18)), { borderRadius: 999 }),
                     },
                 },
+                // Position variants
+                {
+                    props: { horizontal: 'left' },
+                    style: { '& .MuiBadge-badge': { left: 0 } },
+                },
+                {
+                    props: { horizontal: 'center' },
+                    style: { '& .MuiBadge-badge': { left: '50%' } },
+                },
+                {
+                    props: { horizontal: 'right' },
+                    style: { '& .MuiBadge-badge': { right: 0 } },
+                },
+                {
+                    props: { vertical: 'bottom' },
+                    style: { '& .MuiBadge-badge': { bottom: 0 } },
+                },
+                {
+                    props: { vertical: 'center' },
+                    style: { '& .MuiBadge-badge': { top: '50%' } },
+                },
+                {
+                    props: { vertical: 'top' },
+                    style: { '& .MuiBadge-badge': { top: 0 } },
+                },
             ],
         },
     };

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

@@ -1,9 +1,23 @@
 import { ComponentsProps, ComponentsOverrides, ComponentsVariants, Theme } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
 declare module '@mui/material/Chip' {
-    interface ChipPropsVariantOverrides {
-        ghost: true;
+    interface ChipPropsSizeOverrides {
+        extraSmall: true;
+        small: true;
+        medium: true;
+        large: true;
     }
-    interface ChipOwnProps {
+    interface ChipPropsColorOverrides {
+        primary: true;
+        secondary: true;
+        default: true;
+        undefined: true;
+        error: true;
+        success: true;
+        warning: true;
+        info: true;
+    }
+    interface ChipOwnProps extends ComponentWithViewContextOwnProps {
         selected?: boolean;
     }
 }