@webpros/mui-theme 0.3.0 → 0.3.1

package/dist/src/utils/getMUIPalette.js

@@ -30,14 +30,16 @@ export const getMUIPalette = (themeMode, themeScheme) => {
                 main: scheme.schemes.status.warning,
                 contrastText: scheme.schemes.status.onWarning,
             },
+            divider: scheme.schemes.surfaces.outlineVariant,
+            /** ---------------- */
             onPrimary: {
                 main: scheme.onPrimary,
                 contrastText: scheme.primary,
             },
-            primaryContainer: {
-                main: scheme.primaryContainer,
-                contrastText: scheme.onPrimaryContainer,
-            },
+            // primaryContainer: {
+            //     main: scheme.primaryContainer,
+            //     contrastText: scheme.onPrimaryContainer,
+            // },
             onPrimaryContainer: {
                 main: scheme.onPrimaryContainer,
                 contrastText: scheme.primaryContainer,
@@ -46,82 +48,82 @@ export const getMUIPalette = (themeMode, themeScheme) => {
                 main: scheme.secondary,
                 contrastText: scheme.onSecondary,
             },
-            onSecondary: {
-                main: scheme.onSecondary,
-                contrastText: scheme.secondary,
-            },
-            secondaryContainer: {
-                main: scheme.secondaryContainer,
-                contrastText: scheme.onSecondaryContainer,
-            },
-            onSecondaryContainer: {
-                main: scheme.onSecondaryContainer,
-                contrastText: scheme.secondaryContainer,
-            },
-            tertiary: {
-                main: scheme.tertiary,
-                contrastText: scheme.onTertiary,
-            },
-            onTertiary: {
-                main: scheme.onTertiary,
-                contrastText: scheme.tertiary,
-            },
-            tertiaryContainer: {
-                main: scheme.tertiaryContainer,
-                contrastText: scheme.onTertiaryContainer,
-            },
-            onTertiaryContainer: {
-                main: scheme.onTertiaryContainer,
-                contrastText: scheme.tertiaryContainer,
-            },
+            // onSecondary: {
+            //     main: scheme.onSecondary,
+            //     contrastText: scheme.secondary,
+            // },
+            // secondaryContainer: {
+            //     main: scheme.secondaryContainer,
+            //     contrastText: scheme.onSecondaryContainer,
+            // },
+            // onSecondaryContainer: {
+            //     main: scheme.onSecondaryContainer,
+            //     contrastText: scheme.secondaryContainer,
+            // },
+            // tertiary: {
+            //     main: scheme.tertiary,
+            //     contrastText: scheme.onTertiary,
+            // },
+            // onTertiary: {
+            //     main: scheme.onTertiary,
+            //     contrastText: scheme.tertiary,
+            // },
+            // tertiaryContainer: {
+            //     main: scheme.tertiaryContainer,
+            //     contrastText: scheme.onTertiaryContainer,
+            // },
+            // onTertiaryContainer: {
+            //     main: scheme.onTertiaryContainer,
+            //     contrastText: scheme.tertiaryContainer,
+            // },
             onError: {
                 main: scheme.onError,
                 contrastText: scheme.error,
             },
-            errorContainer: {
-                main: scheme.errorContainer,
-                contrastText: scheme.onErrorContainer,
-            },
-            onErrorContainer: {
-                main: scheme.onErrorContainer,
-                contrastText: scheme.errorContainer,
-            },
-            primaryFixed: {
-                main: scheme.primaryFixed,
-            },
-            primaryFixedDim: {
-                main: scheme.primaryFixedDim,
-            },
-            onPrimaryFixed: {
-                main: scheme.onPrimaryFixed,
-            },
-            onPrimaryFixedVariant: {
-                main: scheme.onPrimaryFixedVariant,
-            },
-            secondaryFixed: {
-                main: scheme.secondaryFixed,
-            },
-            secondaryFixedDim: {
-                main: scheme.secondaryFixedDim,
-            },
-            onSecondaryFixed: {
-                main: scheme.onSecondaryFixed,
-            },
-            onSecondaryFixedVariant: {
-                main: scheme.onSecondaryFixedVariant,
-            },
-            tertiaryFixed: {
-                main: scheme.tertiaryFixed,
-            },
-            tertiaryFixedDim: {
-                main: scheme.tertiaryFixedDim,
-            },
-            onTertiaryFixed: {
-                main: scheme.onTertiaryFixed,
-            },
-            onTertiaryFixedVariant: {
-                main: scheme.onTertiaryFixedVariant,
-            },
+            // errorContainer: {
+            //     main: scheme.errorContainer,
+            //     contrastText: scheme.onErrorContainer,
+            // },
+            // onErrorContainer: {
+            //     main: scheme.onErrorContainer,
+            //     contrastText: scheme.errorContainer,
+            // },
+            // primaryFixed: {
+            //     main: scheme.primaryFixed,
+            // },
+            // primaryFixedDim: {
+            //     main: scheme.primaryFixedDim,
+            // },
+            // onPrimaryFixed: {
+            //     main: scheme.onPrimaryFixed,
+            // },
+            // onPrimaryFixedVariant: {
+            //     main: scheme.onPrimaryFixedVariant,
+            // },
+            // secondaryFixed: {
+            //     main: scheme.secondaryFixed,
+            // },
+            // secondaryFixedDim: {
+            //     main: scheme.secondaryFixedDim,
+            // },
+            // onSecondaryFixed: {
+            //     main: scheme.onSecondaryFixed,
+            // },
+            // onSecondaryFixedVariant: {
+            //     main: scheme.onSecondaryFixedVariant,
+            // },
+            // tertiaryFixed: {
+            //     main: scheme.tertiaryFixed,
+            // },
+            // tertiaryFixedDim: {
+            //     main: scheme.tertiaryFixedDim,
+            // },
+            // onTertiaryFixed: {
+            //     main: scheme.onTertiaryFixed,
+            // },
+            // onTertiaryFixedVariant: {
+            //     main: scheme.onTertiaryFixedVariant,
+            // },
             surface: {
                 main: scheme.surface,
                 contrastText: scheme.onSurface,
@@ -133,24 +135,24 @@ export const getMUIPalette = (themeMode, themeScheme) => {
             surfaceDim: {
                 main: scheme.surfaceDim,
             },
-            surfaceBright: {
-                main: scheme.surfaceBright,
-            },
+            // surfaceBright: {
+            //     main: scheme.surfaceBright,
+            // },
             surfaceContainerLowest: {
                 main: scheme.surfaceContainerLowest,
             },
-            surfaceContainerLow: {
-                main: scheme.surfaceContainerLow,
-            },
+            // surfaceContainerLow: {
+            //     main: scheme.surfaceContainerLow,
+            // },
             surfaceContainer: {
                 main: scheme.surfaceContainer,
             },
-            surfaceContainerHigh: {
-                main: scheme.surfaceContainerHigh,
-            },
-            surfaceContainerHighest: {
-                main: scheme.surfaceContainerHighest,
-            },
+            // surfaceContainerHigh: {
+            //     main: scheme.surfaceContainerHigh,
+            // },
+            // surfaceContainerHighest: {
+            //     main: scheme.surfaceContainerHighest,
+            // },
             // surfaceVariant: {
             //     main: scheme.surfaceVariant,
             //     contrastText: scheme.onSurfaceVariant,
@@ -159,28 +161,28 @@ export const getMUIPalette = (themeMode, themeScheme) => {
                 main: scheme.onSurfaceVariant,
                 // contrastText: scheme.surfaceVariant,
             },
-            outline: {
-                main: scheme.outline,
-            },
-            outlineVariant: {
-                main: scheme.outlineVariant,
-            },
-            inversePrimary: {
-                main: scheme.inversePrimary,
-                // contrastText: scheme.inverseOnPrimary
-            },
+            // outline: {
+            //     main: scheme.outline,
+            // },
+            // outlineVariant: {
+            //     main: scheme.outlineVariant,
+            // },
+            // inversePrimary: {
+            //     main: scheme.inversePrimary,
+            //     // contrastText: scheme.inverseOnPrimary
+            // },
             // inverseOnPrimary: {
             //     main: scheme.inverseOnPrimary,
             //     contrastText: scheme.inversePrimary,
             // },
-            inverseSurface: {
-                main: scheme.inverseSurface,
-                contrastText: scheme.inverseSurface,
-            },
-            inverseOnSurface: {
-                main: scheme.inverseOnSurface,
-                contrastText: scheme.inverseSurface,
-            },
+            // inverseSurface: {
+            //     main: scheme.inverseSurface,
+            //     contrastText: scheme.inverseSurface,
+            // },
+            // inverseOnSurface: {
+            //     main: scheme.inverseOnSurface,
+            //     contrastText: scheme.inverseSurface,
+            // },
             action: {
                 // active
                 hover: scheme.stateLayers.surfaces.onSurface.opacity08,
@@ -196,84 +198,82 @@ export const getMUIPalette = (themeMode, themeScheme) => {
                 // focusOpacity
                 // activatedOpacity
             },
-            shadow: {
-                main: scheme.shadow, // TODO: verify if it is needed
-            },
-            scrim: {
-                main: scheme.scrim,
-            },
+            // shadow: {
+            //     main: scheme.shadow, // TODO: verify if it is needed
+            // },
+            // scrim: {
+            //     main: scheme.scrim,
+            // },
             // surfaceTintColor: {
             //     main: scheme.surfaceTintColor,
             // },
             /**/
-            background: {
-                default: scheme.surface,
-                paper: scheme.surfaceContainerLowest,
-            },
-            onBackground: {
-                main: scheme.onSurface,
-            },
-            common: {
-                white: scheme.background,
-                black: scheme.onBackground,
-            },
-            onInfo: {
-                main: scheme.onInfo,
-                contrastText: scheme.info,
-            },
-            infoContainer: {
-                main: scheme.infoContainer,
-                contrastText: scheme.onInfoContainer,
-            },
-            onInfoContainer: {
-                main: scheme.onInfoContainer,
-                contrastText: scheme.infoContainer,
-            },
-            onSuccess: {
-                main: scheme.onSuccess,
-                contrastText: scheme.success,
-            },
-            successContainer: {
-                main: scheme.successContainer,
-                contrastText: scheme.onSuccessContainer,
-            },
-            onSuccessContainer: {
-                main: scheme.onSuccessContainer,
-                contrastText: scheme.successContainer,
-            },
-            onWarning: {
-                main: scheme.onWarning,
-                contrastText: scheme.warning,
-            },
-            warningContainer: {
-                main: scheme.warningContainer,
-                contrastText: scheme.onWarningContainer,
-            },
-            onWarningContainer: {
-                main: scheme.onWarningContainer,
-                contrastText: scheme.warningContainer,
-            },
-            undefined: {
-                main: scheme.undefined,
-                contrastText: scheme.onUndefined,
-            },
-            onUndefined: {
-                main: scheme.onUndefined,
-                contrastText: scheme.undefined,
-            },
-            undefinedContainer: {
-                main: scheme.undefinedContainer,
-                contrastText: scheme.onUndefinedContainer,
-            },
-            onUndefinedContainer: {
-                main: scheme.onUndefinedContainer,
-                contrastText: scheme.undefinedContainer,
-            },
+            // background: {
+            //     default: scheme.surface,
+            //     paper: scheme.surfaceContainerLowest,
+            // },
+            // onBackground: {
+            //     main: scheme.onSurface,
+            // },
+            // common: {
+            //     white: scheme.background,
+            //     black: scheme.onBackground,
+            // },
+            // onInfo: {
+            //     main: scheme.onInfo,
+            //     contrastText: scheme.info,
+            // },
+            // infoContainer: {
+            //     main: scheme.infoContainer,
+            //     contrastText: scheme.onInfoContainer,
+            // },
+            // onInfoContainer: {
+            //     main: scheme.onInfoContainer,
+            //     contrastText: scheme.infoContainer,
+            // },
+            // onSuccess: {
+            //     main: scheme.onSuccess,
+            //     contrastText: scheme.success,
+            // },
+            // successContainer: {
+            //     main: scheme.successContainer,
+            //     contrastText: scheme.onSuccessContainer,
+            // },
+            // onSuccessContainer: {
+            //     main: scheme.onSuccessContainer,
+            //     contrastText: scheme.successContainer,
+            // },
+            // onWarning: {
+            //     main: scheme.onWarning,
+            //     contrastText: scheme.warning,
+            // },
+            // warningContainer: {
+            //     main: scheme.warningContainer,
+            //     contrastText: scheme.onWarningContainer,
+            // },
+            // onWarningContainer: {
+            //     main: scheme.onWarningContainer,
+            //     contrastText: scheme.warningContainer,
+            // },
+            // undefined: {
+            //     main: scheme.undefined,
+            //     contrastText: scheme.onUndefined,
+            // },
+            // onUndefined: {
+            //     main: scheme.onUndefined,
+            //     contrastText: scheme.undefined,
+            // },
+            // undefinedContainer: {
+            //     main: scheme.undefinedContainer,
+            //     contrastText: scheme.onUndefinedContainer,
+            // },
+            // onUndefinedContainer: {
+            //     main: scheme.onUndefinedContainer,
+            //     contrastText: scheme.undefinedContainer,
+            // },
             supportive: {
                 main: scheme.supportive,
             },
-            divider: scheme.outlineVariant,
-            additional: scheme.additionalColors,
         },
         colors: {
             schemes: scheme.schemes,

package/dist/src/utils/getStateLayerColor.d.ts

@@ -1,57 +1,4 @@
 import { SchemesKey, InverseSchemesKey, StateLayersKey, InverseStateLayersKey, SchemesGenerated, InverseSchemesGenerated, StateLayersGenerated, InverseStateLayersGenerated } from '../tokens/colors';
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export declare const StateLayerOpacity: {
-    readonly 0.08: 0.08;
-    readonly 0.12: 0.12;
-    readonly 0.16: 0.16;
-    readonly 0.2: 0.2;
-    readonly 0.28: 0.28;
-    readonly 0.48: 0.48;
-};
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export type StateLayerOpacityKey = keyof typeof StateLayerOpacity;
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export declare enum StateLayer {
-    Hover = 0.08,
-    Focus = 0.12,
-    Press = 0.12,
-    Drag = 0.16,
-    Selected = 0.2,
-    Disabled = 0.08,
-    Active = 0.12
-}
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export declare enum OnStateLayer {
-    Disabled = 0.38,
-    Active = 1
-}
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export declare const getStateLayerColor: (state: StateLayer, containerColor: string, contentColor?: string) => string;
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export declare const getOnStateLayerColor: (state: OnStateLayer, onContainerColor: string, containerColor?: string) => string;
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export declare const getStateLayerColorByOpacityKey: (opacity: StateLayerOpacityKey, color: string) => string;
 export type BlendSchemaWithStateLayerFunction = (schemaKey: SchemesKey | InverseSchemesKey, stateLayerKey: StateLayersKey | InverseStateLayersKey) => string;
 export declare const getBlendSchemaWithStateLayer: (schemesGenerated: SchemesGenerated | InverseSchemesGenerated, stateLayersGenerated: StateLayersGenerated | InverseStateLayersGenerated) => BlendSchemaWithStateLayerFunction;
 export declare const getInverseBlendSchemaWithStateLayer: (schemesGenerated: InverseSchemesGenerated, stateLayersGenerated: InverseStateLayersGenerated) => BlendSchemaWithStateLayerFunction;

package/dist/src/utils/getStateLayerColor.js

@@ -1,62 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { Blend, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
-import { alpha } from '@mui/material';
-/* eslint-disable @typescript-eslint/no-duplicate-enum-values -- Need same value*/
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export const StateLayerOpacity = {
-    0.08: 0.08,
-    0.12: 0.12,
-    0.16: 0.16,
-    0.2: 0.2,
-    0.28: 0.28,
-    0.48: 0.48,
-};
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export var StateLayer;
-(function (StateLayer) {
-    StateLayer[StateLayer["Hover"] = 0.08] = "Hover";
-    StateLayer[StateLayer["Focus"] = 0.12] = "Focus";
-    StateLayer[StateLayer["Press"] = 0.12] = "Press";
-    StateLayer[StateLayer["Drag"] = 0.16] = "Drag";
-    StateLayer[StateLayer["Selected"] = 0.2] = "Selected";
-    StateLayer[StateLayer["Disabled"] = 0.08] = "Disabled";
-    StateLayer[StateLayer["Active"] = 0.12] = "Active";
-})(StateLayer || (StateLayer = {}));
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export var OnStateLayer;
-(function (OnStateLayer) {
-    OnStateLayer[OnStateLayer["Disabled"] = 0.38] = "Disabled";
-    OnStateLayer[OnStateLayer["Active"] = 1] = "Active";
-})(OnStateLayer || (OnStateLayer = {}));
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export const getStateLayerColor = (state, containerColor, contentColor) => contentColor
-    ? hexFromArgb(Blend.cam16Ucs(argbFromHex(containerColor), argbFromHex(contentColor), state))
-    : alpha(containerColor, state);
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export const getOnStateLayerColor = (state, onContainerColor, containerColor) => containerColor
-    ? hexFromArgb(Blend.cam16Ucs(argbFromHex(onContainerColor), argbFromHex(containerColor), state))
-    : alpha(onContainerColor, state);
-// Was introduced due to fact that StateLayer enums does not correlate with values presented. So State layer is more like "const opacity value" rather then actual state
-/**
- * @deprecated Use blendSchemaWithStateLayer or color.schemes instead
- * We're migrating to tokens based values of states. Do not use that enum in new code.
- */
-export const getStateLayerColorByOpacityKey = (opacity, color) => alpha(color, StateLayerOpacity[opacity]);
 // Function to get the blend function
 export const getBlendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => blendSchemaWithStateLayer(schemesGenerated, stateLayersGenerated);
 export const getInverseBlendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => blendSchemaWithStateLayer(schemesGenerated, stateLayersGenerated);

package/package.json

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

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

@@ -1,4 +0,0 @@
-import { DataGrid as MuiDataGrid, DataGridProps } from '@mui/x-data-grid';
-import './DataGrid.theme';
-export type DataGridComponentType = typeof MuiDataGrid;
-export declare const DataGrid: (props: DataGridProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { DataGrid as MuiDataGrid } from '@mui/x-data-grid';
-import './DataGrid.theme';
-// Need to wrap in component, as TS throws export error
-// Exported variable 'DataGrid' has or is using name 'DataGridComponent'
-export const DataGrid = (props) => _jsx(MuiDataGrid, Object.assign({}, props));

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

@@ -1,11 +0,0 @@
-import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
-import '@mui/x-data-grid/themeAugmentation';
-interface M3DataGrid {
-    MuiDataGrid: {
-        defaultProps?: ComponentsProps['MuiDataGrid'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiDataGrid'];
-        variants?: ComponentsVariants['MuiDataGrid'];
-    };
-}
-export declare const getDataGrid: (theme: Theme) => M3DataGrid;
-export {};

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

@@ -1,21 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import '@mui/x-data-grid/themeAugmentation';
-export const getDataGrid = (theme) => {
-    const { palette } = theme;
-    return {
-        MuiDataGrid: {
-            styleOverrides: {
-                cell: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignContent: 'center',
-                    alignItems: 'center',
-                    gap: 2,
-                },
-                columnHeaders: {
-                    color: palette.supportive.main,
-                },
-            },
-        },
-    };
-};

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

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

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

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

package/dist/src/components/data-display/DataGrid/mock-data.d.ts

@@ -1,18 +0,0 @@
-import { GridColDef } from '@mui/x-data-grid';
-type Data = {
-    id: number;
-    pid: number;
-    parendProcessId: number;
-    user: string;
-    program: string;
-    cpu: number;
-    mem: number;
-    bytesRead: number;
-    bytesWrite: number;
-    ioRead: number;
-    ioWrite: number;
-    openFiles: string;
-};
-export declare const mockColumns: readonly GridColDef[];
-export declare const mockRows: Data[];
-export {};