@webpros/mui-theme 0.3.0 → 0.3.2

package/README.md

@@ -21,7 +21,7 @@ yarn add @webpros/mui-theme
 
 ```typescript
 // global.d.ts
-import type _ from '@webpros/@webpros/mui-theme';
+import type _ from '@webpros/mui-theme';
 ```
 
 2. **Create new wrapper-component for the theme provider**
@@ -78,3 +78,25 @@ const App = () => (
 ```tsx
 import { Box } from '@mui/material'; // NOT import { Box } from '@webpros/mui-theme';
 ```
+
+# Tools configuration
+
+## Webpack
+
+If you use Webpack, you probably need to add the following rules to your configuration:
+
+```js
+  module: {
+    rules: [
+      {
+        test: /\.m?js/,
+        type: "javascript/auto",
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+      
+      // your other rules
+    ]
+  }
+```

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.3.0",
+    "version": "0.3.2",
     "license": "MIT",
     "repository": {
         "type": "git",

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

@@ -1,14 +1,13 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import { tableRowClasses, } from '@mui/material';
-import { getStateLayerColor, StateLayer } from '../../../utils/getStateLayerColor';
 export const getTable = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiTable: {
             styleOverrides: {
                 root: {
                     '.MuiTableHead-root .MuiTableCell-root': {
-                        color: palette.supportive.main,
+                        color: colors.schemes.surfaces.onSurface,
                         fontWeight: 400,
                     },
                 },
@@ -17,7 +16,7 @@ export const getTable = (theme) => {
         MuiTableCell: {
             styleOverrides: {
                 root: {
-                    borderColor: palette.outlineVariant.main,
+                    borderColor: colors.schemes.surfaces.outlineVariant,
                 },
             },
         },
@@ -25,7 +24,7 @@ export const getTable = (theme) => {
             styleOverrides: {
                 root: {
                     [`&.${tableRowClasses.selected}`]: {
-                        backgroundColor: getStateLayerColor(StateLayer.Active, palette.secondary.main),
+                        backgroundColor: colors.schemes.base.secondaryContainer,
                     },
                 },
             },
@@ -33,7 +32,7 @@ export const getTable = (theme) => {
         MuiTableHead: {
             styleOverrides: {
                 root: {
-                    borderColor: palette.outlineVariant.main,
+                    borderColor: colors.schemes.surfaces.outlineVariant,
                 },
             },
         },

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

@@ -1,5 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-// eslint-disable-next-line no-restricted-imports
 import { Dialog as MuiDialog } from '@mui/material';
 import './Dialog.theme';
 export const Dialog = MuiDialog;

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

@@ -14,7 +14,6 @@ export * from './inputs/TimePicker';
 export * from './inputs/Autocomplete';
 export * from './data-display/Badge';
 export * from './inputs/Button';
-export * from './surfaces/Card';
 export * from './inputs/Checkbox';
 export * from './data-display/Chip';
 export * from './navigation/Drawer';
@@ -27,7 +26,6 @@ export * from './data-display/ListItemButton';
 export * from './data-display/ListItemIcon';
 export * from './data-display/ListItemAvatar';
 export * from './data-display/ListSubheader';
-export * from './data-display/DataGrid';
 export * from './data-display/Table';
 export * from './navigation/Menu';
 export * from './navigation/MenuItem';

package/dist/src/components/index.js

@@ -15,7 +15,6 @@ export * from './inputs/TimePicker';
 export * from './inputs/Autocomplete';
 export * from './data-display/Badge';
 export * from './inputs/Button';
-export * from './surfaces/Card';
 export * from './inputs/Checkbox';
 export * from './data-display/Chip';
 export * from './navigation/Drawer';
@@ -28,7 +27,6 @@ export * from './data-display/ListItemButton';
 export * from './data-display/ListItemIcon';
 export * from './data-display/ListItemAvatar';
 export * from './data-display/ListSubheader';
-export * from './data-display/DataGrid';
 export * from './data-display/Table';
 export * from './navigation/Menu';
 export * from './navigation/MenuItem';

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

@@ -20,7 +20,7 @@ declare module '@mui/material/Button' {
 }
 interface M3Button {
     MuiButton: {
-        defaultProps?: ComponentsProps['MuiButtonBase'];
+        defaultProps?: ComponentsProps['MuiButton'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiButtonBase'];
         variants?: ComponentsVariants['MuiButton'];
     };

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

@@ -75,6 +75,9 @@ export const getButton = (theme) => {
     };
     return {
         MuiButton: {
+            defaultProps: {
+                variant: 'ghost',
+            },
             styleOverrides: {
                 root: {
                     textTransform: 'none',

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

@@ -83,6 +83,9 @@ export const getIconButton = (theme) => {
     };
     return {
         MuiIconButton: {
+            defaultProps: {
+                variant: 'ghost',
+            },
             styleOverrides: {
                 root: {
                     padding: 0,

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

@@ -1,12 +1,12 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import '@mui/x-date-pickers/themeAugmentation';
 export const getTimePicker = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiPickersPopper: {
             styleOverrides: {
                 paper: {
-                    background: palette.surfaceContainer.main,
+                    background: colors.schemes.surfaces.surfaceContainer,
                     borderRadius: 16,
                 },
                 root: {

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

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

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

@@ -1,23 +1,23 @@
-export const getToggleButton = (theme) => {
-    const { palette } = theme;
+export const getToggleButton = (_theme) => {
+    // const { palette } = theme;
     return {
         MuiToggleButton: {
             styleOverrides: {
                 root: {
                     borderRadius: '50px',
                     textTransform: 'none',
-                    color: palette.onSurface.main,
-                    '&.Mui-selected': {
-                        color: palette.onSecondaryContainer.main,
-                        backgroundColor: palette.secondaryContainer.main,
-                    },
-                    '&.MuiToggleButton-primary': {
-                        borderColor: 'transparent',
-                    },
-                    '&.MuiToggleButton-primary.Mui-selected': {
-                        color: palette.onPrimary.main,
-                        backgroundColor: palette.primary.main,
-                    },
+                    // color: palette.onSurface.main,
+                    // '&.Mui-selected': {
+                    //     color: palette.onSecondaryContainer.main,
+                    //     backgroundColor: palette.secondaryContainer.main,
+                    // },
+                    // '&.MuiToggleButton-primary': {
+                    //     borderColor: 'transparent',
+                    // },
+                    // '&.MuiToggleButton-primary.Mui-selected': {
+                    //     color: palette.onPrimary.main,
+                    //     backgroundColor: palette.primary.main,
+                    // },
                 },
             },
         },

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

@@ -1,22 +1,15 @@
-import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
 export const getToggleButtonGroup = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiToggleButtonGroup: {
             styleOverrides: {
                 grouped: {
                     borderRadius: '50px',
-                    borderColor: palette.outline.main,
+                    borderColor: colors.schemes.surfaces.outline,
                     '&:not(:first-of-type)': {
                         marginLeft: 0,
                         borderLeft: 0,
                     },
-                    '&:hover': {
-                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
-                    },
-                    '&.Mui-selected:hover': {
-                        background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
-                    },
                 },
             },
         },

package/dist/src/constants.js

@@ -1,7 +1,7 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export const underlineTypographySxProps = (theme, open = false, 
 // If color is null - undeline's color will be the same as the text color
-color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', '&:hover': {
+color = theme.colors.schemes.surfaces.onSurface) => (Object.assign({ cursor: 'pointer', '&:hover': {
         textDecoration: 'underline',
         textUnderlineOffset: theme.spacing(0.5),
         textDecorationColor: color,
@@ -14,7 +14,7 @@ color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', '&
 })));
 export const underlineBorderSxProps = (theme, open = false, 
 // If color is null - undeline's color will be the same as the text color
-color = theme.palette.supportive.main) => (Object.assign({ cursor: 'pointer', position: 'relative', '&:hover::after': {
+color = theme.colors.schemes.surfaces.onSurface) => (Object.assign({ cursor: 'pointer', position: 'relative', '&:hover::after': {
         bottom: 0,
         position: 'absolute',
         content: "''",

package/dist/src/tokens/colors/Dark.js

@@ -298,6 +298,8 @@ export const DarkStateLayers = {
             opacity12: 'rgba(140, 49, 72, 0.12)',
             opacity16: 'rgba(140, 49, 72, 0.16)',
             opacity10: 'rgba(140, 49, 72, 0.1)',
+            opacity56: 'rgba(140, 49, 72, 0.56)',
+            opacity78: 'rgba(140, 49, 72, 0.78)',
         },
         onErrorContainer: {
             opacity08: 'rgba(255, 242, 245, 0.08)',
@@ -399,6 +401,8 @@ export const DarkStateLayers = {
             opacity08: 'rgba(123, 60, 15, 0.08)',
             opacity12: 'rgba(123, 60, 15, 0.12)',
             opacity16: 'rgba(123, 60, 15, 0.16)',
+            opacity56: 'rgba(123, 60, 15, 0.56)',
+            opacity78: 'rgba(123, 60, 15, 0.78)',
         },
         successContainer: {
             opacity08: 'rgba(18, 95, 22, 0.08)',
@@ -470,6 +474,7 @@ export const DarkStateLayers = {
             opacity16: 'rgba(159, 162, 179, 0.16)',
             opacity38: 'rgba(159, 162, 179, 0.38)',
             opacity10: 'rgba(159, 162, 179, 0.1)',
+            opacity78: 'rgba(159, 162, 179, 0.78)',
         },
         shadow: {
             opacity08: 'rgba(0, 0, 0, 0.08)',
@@ -1024,6 +1029,8 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.errorContainer.opacity12': { r: 140, g: 49, b: 72, a: 0.12 },
     'stateLayers.status.errorContainer.opacity16': { r: 140, g: 49, b: 72, a: 0.16 },
     'stateLayers.status.errorContainer.opacity10': { r: 140, g: 49, b: 72, a: 0.1 },
+    'stateLayers.status.errorContainer.opacity56': { r: 140, g: 49, b: 72, a: 0.56 },
+    'stateLayers.status.errorContainer.opacity78': { r: 140, g: 49, b: 72, a: 0.78 },
     'stateLayers.status.onErrorContainer.opacity08': { r: 255, g: 242, b: 245, a: 0.08 },
     'stateLayers.status.onErrorContainer.opacity12': { r: 255, g: 242, b: 245, a: 0.12 },
     'stateLayers.status.onErrorContainer.opacity16': { r: 255, g: 242, b: 245, a: 0.16 },
@@ -1097,6 +1104,8 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.warningContainer.opacity08': { r: 123, g: 60, b: 15, a: 0.08 },
     'stateLayers.status.warningContainer.opacity12': { r: 123, g: 60, b: 15, a: 0.12 },
     'stateLayers.status.warningContainer.opacity16': { r: 123, g: 60, b: 15, a: 0.16 },
+    'stateLayers.status.warningContainer.opacity56': { r: 123, g: 60, b: 15, a: 0.56 },
+    'stateLayers.status.warningContainer.opacity78': { r: 123, g: 60, b: 15, a: 0.78 },
     'stateLayers.status.successContainer.opacity08': { r: 18, g: 95, b: 22, a: 0.08 },
     'stateLayers.status.successContainer.opacity12': { r: 18, g: 95, b: 22, a: 0.12 },
     'stateLayers.status.successContainer.opacity16': { r: 18, g: 95, b: 22, a: 0.16 },
@@ -1146,6 +1155,7 @@ export const DarkStateLayersGenerated = {
     'stateLayers.surfaces.onSurfaceVariant.opacity16': { r: 159, g: 162, b: 179, a: 0.16 },
     'stateLayers.surfaces.onSurfaceVariant.opacity38': { r: 159, g: 162, b: 179, a: 0.38 },
     'stateLayers.surfaces.onSurfaceVariant.opacity10': { r: 159, g: 162, b: 179, a: 0.1 },
+    'stateLayers.surfaces.onSurfaceVariant.opacity78': { r: 159, g: 162, b: 179, a: 0.78 },
     'stateLayers.surfaces.shadow.opacity08': { r: 0, g: 0, b: 0, a: 0.08 },
     'stateLayers.surfaces.shadow.opacity12': { r: 0, g: 0, b: 0, a: 0.12 },
     'stateLayers.surfaces.shadow.opacity16': { r: 0, g: 0, b: 0, a: 0.16 },

package/dist/src/tokens/colors/Light.js

@@ -4,7 +4,7 @@ export const LightSchemes = {
     base: {
         primary: 'rgba(95, 77, 152, 1)',
         onPrimary: 'rgba(255, 255, 255, 1)',
-        primaryContainer: 'rgba(237, 235, 255, 1)',
+        primaryContainer: 'rgba(227, 224, 252, 1)',
         onPrimaryContainer: 'rgba(84, 66, 138, 1)',
         secondary: 'rgba(95, 102, 144, 1)',
         onSecondary: 'rgba(255, 255, 255, 1)',
@@ -14,7 +14,7 @@ export const LightSchemes = {
         onTertiary: 'rgba(255, 255, 255, 1)',
         tertiaryContainer: 'rgba(218, 233, 240, 1)',
         onTertiaryContainer: 'rgba(17, 38, 47, 1)',
-        primaryVariant: 'rgba(120, 100, 183, 1)',
+        primaryVariant: 'rgba(115, 95, 173, 1)',
         onPrimaryVariant: 'rgba(230, 228, 235, 1)',
         onPrimaryBase: 'rgba(255, 255, 255, 1)',
         onPrimaryBaseVariant: 'rgba(230, 228, 235, 1)',
@@ -23,7 +23,7 @@ export const LightSchemes = {
         surfaceTint: 'rgba(86, 77, 130, 1)',
         background: 'rgba(233, 235, 246, 1)',
         onBackground: 'rgba(27, 28, 33, 1)',
-        surface: 'rgba(233, 233, 247, 1)',
+        surface: 'rgba(235, 235, 244, 1)',
         onSurface: 'rgba(27, 28, 33, 1)',
         surfaceVariant: 'rgba(247, 247, 252, 1)',
         onSurfaceVariant: 'rgba(83, 86, 111, 1)',
@@ -128,10 +128,10 @@ export const LightStateLayers = {
             opacity28: 'rgba(255, 255, 255, 0.28)',
         },
         primaryContainer: {
-            opacity08: 'rgba(237, 235, 255, 0.08)',
-            opacity12: 'rgba(237, 235, 255, 0.12)',
-            opacity16: 'rgba(237, 235, 255, 0.16)',
-            opacity10: 'rgba(237, 235, 255, 0.1)',
+            opacity08: 'rgba(227, 224, 252, 0.08)',
+            opacity12: 'rgba(227, 224, 252, 0.12)',
+            opacity16: 'rgba(227, 224, 252, 0.16)',
+            opacity10: 'rgba(227, 224, 252, 0.1)',
         },
         onPrimaryContainer: {
             opacity08: 'rgba(84, 66, 138, 0.08)',
@@ -298,6 +298,8 @@ export const LightStateLayers = {
             opacity12: 'rgba(255, 233, 230, 0.12)',
             opacity16: 'rgba(255, 233, 230, 0.16)',
             opacity10: 'rgba(255, 233, 230, 0.1)',
+            opacity56: 'rgba(255, 233, 230, 0.56)',
+            opacity78: 'rgba(255, 233, 230, 0.78)',
         },
         onErrorContainer: {
             opacity08: 'rgba(155, 30, 30, 0.08)',
@@ -399,6 +401,8 @@ export const LightStateLayers = {
             opacity08: 'rgba(255, 239, 210, 0.08)',
             opacity12: 'rgba(255, 239, 210, 0.12)',
             opacity16: 'rgba(255, 239, 210, 0.16)',
+            opacity56: 'rgba(255, 239, 210, 0.56)',
+            opacity78: 'rgba(255, 239, 210, 0.78)',
         },
         successContainer: {
             opacity08: 'rgba(225, 245, 227, 0.08)',
@@ -470,6 +474,7 @@ export const LightStateLayers = {
             opacity16: 'rgba(83, 86, 111, 0.07)',
             opacity38: 'rgba(83, 86, 111, 0.38)',
             opacity10: 'rgba(83, 86, 111, 0.1)',
+            opacity78: 'rgba(83, 86, 111, 0.78)',
         },
         shadow: {
             opacity08: 'rgba(0, 0, 0, 0.08)',
@@ -799,7 +804,7 @@ export const LightInverseStateLayers = {
 export const LightSchemesGenerated = {
     'schemes.base.primary': { r: 95, g: 77, b: 152, a: 1 },
     'schemes.base.onPrimary': { r: 255, g: 255, b: 255, a: 1 },
-    'schemes.base.primaryContainer': { r: 237, g: 235, b: 255, a: 1 },
+    'schemes.base.primaryContainer': { r: 227, g: 224, b: 252, a: 1 },
     'schemes.base.onPrimaryContainer': { r: 84, g: 66, b: 138, a: 1 },
     'schemes.base.secondary': { r: 95, g: 102, b: 144, a: 1 },
     'schemes.base.onSecondary': { r: 255, g: 255, b: 255, a: 1 },
@@ -809,14 +814,14 @@ export const LightSchemesGenerated = {
     'schemes.base.onTertiary': { r: 255, g: 255, b: 255, a: 1 },
     'schemes.base.tertiaryContainer': { r: 218, g: 233, b: 240, a: 1 },
     'schemes.base.onTertiaryContainer': { r: 17, g: 38, b: 47, a: 1 },
-    'schemes.base.primaryVariant': { r: 120, g: 100, b: 183, a: 1 },
+    'schemes.base.primaryVariant': { r: 115, g: 95, b: 173, a: 1 },
     'schemes.base.onPrimaryVariant': { r: 230, g: 228, b: 235, a: 1 },
     'schemes.base.onPrimaryBase': { r: 255, g: 255, b: 255, a: 1 },
     'schemes.base.onPrimaryBaseVariant': { r: 230, g: 228, b: 235, a: 1 },
     'schemes.surfaces.surfaceTint': { r: 86, g: 77, b: 130, a: 1 },
     'schemes.surfaces.background': { r: 233, g: 235, b: 246, a: 1 },
     'schemes.surfaces.onBackground': { r: 27, g: 28, b: 33, a: 1 },
-    'schemes.surfaces.surface': { r: 233, g: 233, b: 247, a: 1 },
+    'schemes.surfaces.surface': { r: 235, g: 235, b: 244, a: 1 },
     'schemes.surfaces.onSurface': { r: 27, g: 28, b: 33, a: 1 },
     'schemes.surfaces.surfaceVariant': { r: 247, g: 247, b: 252, a: 1 },
     'schemes.surfaces.onSurfaceVariant': { r: 83, g: 86, b: 111, a: 1 },
@@ -906,10 +911,10 @@ export const LightStateLayersGenerated = {
     'stateLayers.base.onPrimary.opacity10': { r: 255, g: 255, b: 255, a: 0.1 },
     'stateLayers.base.onPrimary.opacity38': { r: 255, g: 255, b: 255, a: 0.38 },
     'stateLayers.base.onPrimary.opacity28': { r: 255, g: 255, b: 255, a: 0.28 },
-    'stateLayers.base.primaryContainer.opacity08': { r: 237, g: 235, b: 255, a: 0.08 },
-    'stateLayers.base.primaryContainer.opacity12': { r: 237, g: 235, b: 255, a: 0.12 },
-    'stateLayers.base.primaryContainer.opacity16': { r: 237, g: 235, b: 255, a: 0.16 },
-    'stateLayers.base.primaryContainer.opacity10': { r: 237, g: 235, b: 255, a: 0.1 },
+    'stateLayers.base.primaryContainer.opacity08': { r: 227, g: 224, b: 252, a: 0.08 },
+    'stateLayers.base.primaryContainer.opacity12': { r: 227, g: 224, b: 252, a: 0.12 },
+    'stateLayers.base.primaryContainer.opacity16': { r: 227, g: 224, b: 252, a: 0.16 },
+    'stateLayers.base.primaryContainer.opacity10': { r: 227, g: 224, b: 252, a: 0.1 },
     'stateLayers.base.onPrimaryContainer.opacity08': { r: 84, g: 66, b: 138, a: 0.08 },
     'stateLayers.base.onPrimaryContainer.opacity12': { r: 84, g: 66, b: 138, a: 0.12 },
     'stateLayers.base.onPrimaryContainer.opacity16': { r: 84, g: 66, b: 138, a: 0.16 },
@@ -1024,6 +1029,8 @@ export const LightStateLayersGenerated = {
     'stateLayers.status.errorContainer.opacity12': { r: 255, g: 233, b: 230, a: 0.12 },
     'stateLayers.status.errorContainer.opacity16': { r: 255, g: 233, b: 230, a: 0.16 },
     'stateLayers.status.errorContainer.opacity10': { r: 255, g: 233, b: 230, a: 0.1 },
+    'stateLayers.status.errorContainer.opacity56': { r: 255, g: 233, b: 230, a: 0.56 },
+    'stateLayers.status.errorContainer.opacity78': { r: 255, g: 233, b: 230, a: 0.78 },
     'stateLayers.status.onErrorContainer.opacity08': { r: 155, g: 30, b: 30, a: 0.08 },
     'stateLayers.status.onErrorContainer.opacity12': { r: 155, g: 30, b: 30, a: 0.12 },
     'stateLayers.status.onErrorContainer.opacity16': { r: 155, g: 30, b: 30, a: 0.16 },
@@ -1097,6 +1104,8 @@ export const LightStateLayersGenerated = {
     'stateLayers.status.warningContainer.opacity08': { r: 255, g: 239, b: 210, a: 0.08 },
     'stateLayers.status.warningContainer.opacity12': { r: 255, g: 239, b: 210, a: 0.12 },
     'stateLayers.status.warningContainer.opacity16': { r: 255, g: 239, b: 210, a: 0.16 },
+    'stateLayers.status.warningContainer.opacity56': { r: 255, g: 239, b: 210, a: 0.56 },
+    'stateLayers.status.warningContainer.opacity78': { r: 255, g: 239, b: 210, a: 0.78 },
     'stateLayers.status.successContainer.opacity08': { r: 225, g: 245, b: 227, a: 0.08 },
     'stateLayers.status.successContainer.opacity12': { r: 225, g: 245, b: 227, a: 0.12 },
     'stateLayers.status.successContainer.opacity16': { r: 225, g: 245, b: 227, a: 0.16 },
@@ -1146,6 +1155,7 @@ export const LightStateLayersGenerated = {
     'stateLayers.surfaces.onSurfaceVariant.opacity16': { r: 83, g: 86, b: 111, a: 0.07 },
     'stateLayers.surfaces.onSurfaceVariant.opacity38': { r: 83, g: 86, b: 111, a: 0.38 },
     'stateLayers.surfaces.onSurfaceVariant.opacity10': { r: 83, g: 86, b: 111, a: 0.1 },
+    'stateLayers.surfaces.onSurfaceVariant.opacity78': { r: 83, g: 86, b: 111, a: 0.78 },
     'stateLayers.surfaces.shadow.opacity08': { r: 0, g: 0, b: 0, a: 0.08 },
     'stateLayers.surfaces.shadow.opacity12': { r: 0, g: 0, b: 0, a: 0.12 },
     'stateLayers.surfaces.shadow.opacity16': { r: 0, g: 0, b: 0, a: 0.16 },

package/dist/src/tokens/colors/stateLayers.d.ts

@@ -189,6 +189,8 @@ export type StateLayers = {
             opacity12: string;
             opacity16: string;
             opacity10: string;
+            opacity56: string;
+            opacity78: string;
         };
         onErrorContainer: {
             opacity08: string;
@@ -290,6 +292,8 @@ export type StateLayers = {
             opacity08: string;
             opacity12: string;
             opacity16: string;
+            opacity56: string;
+            opacity78: string;
         };
         successContainer: {
             opacity08: string;
@@ -361,6 +365,7 @@ export type StateLayers = {
             opacity16: string;
             opacity38: string;
             opacity10: string;
+            opacity78: string;
         };
         shadow: {
             opacity08: string;

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

@@ -1,5 +1,3 @@
-export type { AdditionalColorKey } from './legacyColors/additionalColors';
-export type { AdditionalColorTone } from './legacyColors/Tone';
 export type { TypescaleTypographyVariants } from './typography';
 export { typographyVariants } from './typography';
 export type { M3ShadowLayer, M3ShadowTokenName, M3ShadowTokens } from './shadows';

package/dist/src/tokens/legacyColors/LegacyDark.js

@@ -1,5 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { additionalColors } from '../../tokens/legacyColors/additionalColors';
 // reference
 // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
 export const LegacyDarkTokensDefault = {
@@ -76,13 +75,4 @@ export const LegacyDarkTokensDefault = {
     undefinedContainer: '#3D464D',
     onUndefinedContainer: '#E4EBF0',
     supportive: '#8FAAB6',
-    // Custom accent colors matching with the theme.
-    // Should not be used in MUI components directly (i.e. for setting background/text somewhere) inside customization.
-    // Only for outer usage
-    // reference -
-    // Charts
-    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
-    // Colors
-    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
-    additionalColors,
 };

package/dist/src/tokens/legacyColors/LegacyLight.js

@@ -1,5 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { additionalColors } from '../../tokens/legacyColors/additionalColors';
 // reference
 // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
 export const LegacyLightTokensDefault = {
@@ -74,13 +73,4 @@ export const LegacyLightTokensDefault = {
     undefinedContainer: '#DFE2E4',
     onUndefinedContainer: '#263238',
     supportive: '#546E7A',
-    // Custom accent colors matching with the theme.
-    // Should not be used in MUI components directly (i.e. for setting background/text somewhere) inside customization.
-    // Only for outer usage
-    // reference -
-    // Charts
-    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
-    // Colors
-    // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=7648-60043&t=DhlQVfQGF7gEbkuU-0
-    additionalColors,
 };

package/dist/src/tokens/legacyColors/ThemeColorTokensLegacy.d.ts

@@ -1,4 +1,3 @@
-import { AdditionalColors } from '../../tokens/legacyColors/additionalColors/additionalColors';
 export type ThemeColorTokensLegacy = {
     primary: string;
     onPrimary: string;
@@ -70,5 +69,4 @@ export type ThemeColorTokensLegacy = {
     undefinedContainer: string;
     onUndefinedContainer: string;
     supportive: string;
-    additionalColors: AdditionalColors;
 };

package/dist/src/tokens/legacyColors/Tone.d.ts

@@ -156,19 +156,3 @@ export declare const ErrorDefault: {
     '99': string;
     '100': string;
 };
-export type AdditionalColorTone = {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    A100: string;
-    A200: string;
-    A400: string;
-    A700: string;
-};

package/dist/src/tokens/typography/typography.js

@@ -57,8 +57,8 @@ export const typographyVariants = {
     },
     DisplaySmall: {
         fontFamily: 'Roboto',
-        fontSize: '24px',
-        lineHeight: '32px',
+        fontSize: '26px',
+        lineHeight: '44px',
         letterSpacing: '0px',
         fontWeight: 400,
     },
@@ -71,8 +71,8 @@ export const typographyVariants = {
     },
     HeadlineLarge: {
         fontFamily: 'Roboto',
-        fontSize: '20px',
-        lineHeight: '28px',
+        fontSize: '19px',
+        lineHeight: '32px',
         letterSpacing: '0px',
         fontWeight: 400,
     },

package/dist/src/utils/getMUIComponents.js

@@ -1,4 +1,4 @@
-import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCard, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getToggleButton, getToggleButtonGroup, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getDataGrid, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFormHelperText, getRadio, } from '../components';
+import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getToggleButton, getToggleButtonGroup, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFormHelperText, getRadio, } from '../components';
 export const getMUIComponents = (theme, _mode) => ({
-    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getBackdrop(theme)), getAccordion(theme)), getAccordionSummary(theme)), getAccordionDetails(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getBreadcrumbs(theme)), getSelect()), getTimePicker(theme)), getInputLabel()), getButton(theme)), getCard(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getList(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getPopover(theme)), getSwitch(theme)), getTab(theme)), getTabs(theme)), getTextField(theme)), getToggleButton(theme)), getToggleButtonGroup(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getDataGrid(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput()), getFormHelperText()), getRadio(theme)),
+    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getBackdrop(theme)), getAccordion(theme)), getAccordionSummary(theme)), getAccordionDetails(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getBreadcrumbs(theme)), getSelect()), getTimePicker(theme)), getInputLabel()), getButton(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getList(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getPopover(theme)), getSwitch(theme)), getTab(theme)), getTabs(theme)), getTextField(theme)), getToggleButton(theme)), getToggleButtonGroup(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput()), getFormHelperText()), getRadio(theme)),
 });