@webpros/mui-theme 0.2.0 → 0.3.1

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 v6 theme for WebPros products",
-    "version": "0.2.0",
+    "description": "MUI v7 theme for WebPros products",
+    "version": "0.3.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -20,6 +20,10 @@
         ".": {
             "import": "./dist/src/index.js",
             "types": "./dist/src/index.d.ts"
+        },
+        "./icons": {
+            "import": "./dist/src/icons/index.js",
+            "types": "./dist/src/icons/index.d.ts"
         }
     },
     "type": "module",
@@ -43,15 +47,16 @@
         "prettier:test": "prettier --check \"**/*.{ts,tsx}\"",
         "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
         "typecheck": "tsc --noEmit",
-        "extract-tokens": "node tools/extractM3Tokens.js"
+        "extract-tokens": "node tools/extractM3Tokens.js",
+        "generate:icons": "node scripts/generate-icons.cjs"
     },
     "peerDependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@fontsource/roboto": "^5.2.6",
         "@material/material-color-utilities": "^0.3.0",
-        "@mui/material": "^6.4.0",
-        "@mui/utils": "^6.4.0",
+        "@mui/material": "^7.3.6",
+        "@mui/utils": "^7.3.6",
         "@mui/x-data-grid": "^7.29.0",
         "@mui/x-date-pickers": "^7.29.0",
         "@phosphor-icons/react": "^2.1.0",
@@ -67,8 +72,8 @@
         "@eslint/js": "^9.38.0",
         "@fontsource/roboto": "^5.2.6",
         "@material/material-color-utilities": "^0.3.0",
-        "@mui/material": "^6.4.0",
-        "@mui/utils": "^6.4.0",
+        "@mui/material": "^7.3.6",
+        "@mui/utils": "^7.3.6",
         "@mui/x-data-grid": "^7.29.0",
         "@mui/x-date-pickers": "^7.29.0",
         "@phosphor-icons/react": "^2.1.0",
@@ -80,8 +85,8 @@
         "@storybook/react-vite": "^9.1.16",
         "@stylistic/eslint-plugin": "^5.5.0",
         "@types/node": "^24.8.1",
-        "@types/react": "^19.2.2",
-        "@types/react-dom": "^19.2.2",
+        "@types/react": "18.3.1",
+        "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^5.0.4",
         "eslint": "^9.38.0",
         "eslint-config-prettier": "^10.1.8",
@@ -112,5 +117,8 @@
         "extends": [
             "plugin:storybook/recommended"
         ]
+    },
+    "resolutions": {
+        "react-is": "^18.3.1"
     }
 }

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/Alert/Alert.theme.js

@@ -11,6 +11,7 @@ export const getAlert = (theme) => {
             styleOverrides: {
                 root: {
                     borderRadius: '6px',
+                    padding: '8px',
                     '& svg': {
                         width: '20px',
                         height: '20px',

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/feedback/Dialog/Dialog.theme.d.ts

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

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

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

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

@@ -7,31 +7,40 @@ export const getLinearProgress = (theme) => {
         const palette = colors[schemesPath];
         const layers = colors[layersPath];
         const colorMap = {
-            primary: { primary: palette.base.primary, secondary: layers.base.primary.opacity28 },
+            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 },
+            error: {
+                primary: palette.status.error,
+                secondary: layers.status.error.opacity28,
+            },
+            info: {
+                primary: palette.status.info,
+                secondary: layers.status.info.opacity28,
+            },
             success: {
                 primary: palette.status.success,
                 secondary: layers.status.success.opacity28,
             },
             warning: {
                 primary: palette.status.warning,
-                secondary: layers.status.undefined.opacity28,
+                secondary: layers.status.warning.opacity28,
+            },
+            inherit: {
+                primary: palette.surfaces.onSurface,
+                secondary: layers.surfaces.onSurface.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': {
+                '.MuiLinearProgress-bar': {
                     background: colorMap[color].primary,
                 },
             },
@@ -58,14 +67,13 @@ export const getLinearProgress = (theme) => {
         MuiLinearProgress: {
             styleOverrides: {
                 root: {
-                    borderRadius: '20px',
+                    borderRadius: '2px',
                     '.MuiLinearProgress-bar': {
                         strokeLinecap: 'round',
-                        borderRadius: '20px',
+                        borderRadius: '2px',
                     },
                 },
             },
-            // @ts-expect-error
             variants: [
                 ...getLinearProgressColors('primary'),
                 ...getLinearProgressColors('secondary'),

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

@@ -9,6 +9,10 @@ export const getSnackbar = (theme) => {
                     '& .MuiSnackbarContent-root': {
                         backgroundColor: colors.inverseSchemes.surfaces.elevatedContainerLowest,
                         alignItems: 'baseline',
+                        paddingTop: 0,
+                    },
+                    '& .MuiSnackbarContent-action': {
+                        marginRight: 0,
                     },
                 },
             },

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/OutlinedInput/OutlinedInput.theme.js

@@ -54,7 +54,7 @@ export const getOutlinedInput = () => {
                             },
                         },
                         {
-                            props: ({ ownerState }) => ownerState.multiline,
+                            props: ({ ownerState }) => !!ownerState.multiline,
                             style: {
                                 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/components/navigation/Tabs/Tabs.theme.js

@@ -28,7 +28,7 @@ export const getTabs = (theme) => ({
             root: {
                 [`&.${tabsClasses.vertical}`]: {
                     [`& .${tabClasses.root}`]: {
-                        padding: '10px 16px 10px 10px',
+                        padding: '10px 52px 10px 10px',
                         flexDirection: 'row',
                         justifyContent: 'flex-start',
                         textAlign: 'left',

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/icons/index.d.ts

@@ -0,0 +1,4 @@
+export declare const CaretDoubleRightSmall: import("@phosphor-icons/react").Icon;
+export declare const CloseSmall: import("@phosphor-icons/react").Icon;
+export declare const Domino: import("@phosphor-icons/react").Icon;
+export declare const Error: import("@phosphor-icons/react").Icon;

package/dist/src/icons/index.js

@@ -0,0 +1,12 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+// This file is auto-generated by scripts/generate-icons.cjs
+// Do not edit manually. Run "yarn generate:icons" to regenerate.
+import { createIcon, createStaticIcon } from '../utils/createIcon';
+import caretDoubleRightSmallSvg from './svg/caret-double-right-small.svg?raw';
+import closeSmallSvg from './svg/close-small.svg?raw';
+import dominoSvg from './svg/domino.svg?raw';
+import errorSvg from './svg/error.svg?raw';
+export const CaretDoubleRightSmall = createIcon('CaretDoubleRightSmall', caretDoubleRightSmallSvg);
+export const CloseSmall = createIcon('CloseSmall', closeSmallSvg);
+export const Domino = createIcon('Domino', dominoSvg);
+export const Error = createStaticIcon('Error', errorSvg);

package/dist/src/style/custom-color-palette.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import Grid from '@mui/material/Grid2/Grid2';
+import Grid from '@mui/material/Grid';
 import { ColorItem } from '@storybook/addon-docs/blocks';
 import { LegacyDarkTokensDefault, LegacyLightTokensDefault, } from '../tokens/legacyColors';
 export const CustomColorPalette = ({ mode }) => {

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

@@ -319,7 +319,7 @@ export const DarkStateLayers = {
             opacity08: 'rgba(86, 150, 206, 0.08)',
             opacity12: 'rgba(86, 150, 206, 0.12)',
             opacity16: 'rgba(86, 150, 206, 0.16)',
-            opacity28: 'rgba(86, 150, 206, 0.2)',
+            opacity28: 'rgba(86, 150, 206, 0.28)',
             opacity48: 'rgba(86, 150, 206, 0.48)',
         },
         success: {
@@ -780,6 +780,20 @@ export const DarkInverseStateLayers = {
             opacity28: 'rgba(191, 197, 202, 0.28)',
             opacity38: 'rgba(191, 197, 202, 0.38)',
         },
+        info: {
+            opacity08: 'rgba(71, 189, 243, 0.08)',
+            opacity12: 'rgba(71, 189, 243, 0.12)',
+            opacity16: 'rgba(71, 189, 243, 0.2)',
+            opacity28: 'rgba(71, 189, 243, 0.28)',
+            opacity38: 'rgba(68, 119, 187, 0.38)',
+        },
+        warning: {
+            opacity08: 'rgba(242, 154, 66, 0.08)',
+            opacity12: 'rgba(242, 154, 66, 0.12)',
+            opacity16: 'rgba(242, 154, 66, 0.2)',
+            opacity28: 'rgba(242, 154, 66, 0.28)',
+            opacity38: 'rgba(242, 154, 66, 0.38)',
+        },
     },
 };
 export const DarkSchemesGenerated = {
@@ -1025,7 +1039,7 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.info.opacity08': { r: 86, g: 150, b: 206, a: 0.08 },
     'stateLayers.status.info.opacity12': { r: 86, g: 150, b: 206, a: 0.12 },
     'stateLayers.status.info.opacity16': { r: 86, g: 150, b: 206, a: 0.16 },
-    'stateLayers.status.info.opacity28': { r: 86, g: 150, b: 206, a: 0.2 },
+    'stateLayers.status.info.opacity28': { r: 86, g: 150, b: 206, a: 0.28 },
     'stateLayers.status.info.opacity48': { r: 86, g: 150, b: 206, a: 0.48 },
     'stateLayers.status.success.opacity08': { r: 110, g: 187, b: 114, a: 0.08 },
     'stateLayers.status.success.opacity12': { r: 110, g: 187, b: 114, a: 0.12 },
@@ -1395,4 +1409,14 @@ export const DarkInverseStateLayersGenerated = {
     'inverseStateLayers.status.onUndefinedContainer.opacity16': { r: 191, g: 197, b: 202, a: 0.16 },
     'inverseStateLayers.status.onUndefinedContainer.opacity28': { r: 191, g: 197, b: 202, a: 0.28 },
     'inverseStateLayers.status.onUndefinedContainer.opacity38': { r: 191, g: 197, b: 202, a: 0.38 },
+    'inverseStateLayers.status.info.opacity08': { r: 71, g: 189, b: 243, a: 0.08 },
+    'inverseStateLayers.status.info.opacity12': { r: 71, g: 189, b: 243, a: 0.12 },
+    'inverseStateLayers.status.info.opacity16': { r: 71, g: 189, b: 243, a: 0.2 },
+    'inverseStateLayers.status.info.opacity28': { r: 71, g: 189, b: 243, a: 0.28 },
+    'inverseStateLayers.status.info.opacity38': { r: 68, g: 119, b: 187, a: 0.38 },
+    'inverseStateLayers.status.warning.opacity08': { r: 242, g: 154, b: 66, a: 0.08 },
+    'inverseStateLayers.status.warning.opacity12': { r: 242, g: 154, b: 66, a: 0.12 },
+    'inverseStateLayers.status.warning.opacity16': { r: 242, g: 154, b: 66, a: 0.2 },
+    'inverseStateLayers.status.warning.opacity28': { r: 242, g: 154, b: 66, a: 0.28 },
+    'inverseStateLayers.status.warning.opacity38': { r: 242, g: 154, b: 66, a: 0.38 },
 };