@webpros/mui-theme 0.3.10 → 0.3.11

package/dist/package.json

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

package/dist/src/components/feedback/Alert/Alert.theme.d.ts

@@ -8,7 +8,7 @@ declare module '@mui/material/Alert' {
         success: true;
         primary: true;
     }
-    interface AlertsOwnProps extends ComponentWithViewContextOwnProps {
+    interface AlertOwnProps extends ComponentWithViewContextOwnProps {
     }
 }
 interface M3Alert {

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

@@ -63,6 +63,26 @@ export const getCheckbox = (theme) => {
                         },
                     },
                 },
+                {
+                    props: { viewContext: 'onPrimary' },
+                    style: {
+                        '&.Mui-disabled': {
+                            color: colors.onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity28,
+                        },
+                    },
+                },
+                {
+                    props: { color: 'default', viewContext: 'onPrimary' },
+                    style: {
+                        color: colors.onPrimarySchemes.base.primary,
+                        '&.Mui-checked': {
+                            color: colors.onPrimarySchemes.base.primary,
+                        },
+                        '&.MuiCheckbox-indeterminate': {
+                            color: colors.onPrimarySchemes.base.primary,
+                        },
+                    },
+                },
             ],
         },
     };

package/dist/src/shared/viewContext/viewContext.d.ts

@@ -1,4 +1,4 @@
-export type ViewContext = 'inverse';
+export type ViewContext = 'inverse' | 'onPrimary';
 export interface ComponentWithViewContextOwnProps {
     viewContext?: ViewContext;
 }

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

@@ -1,13 +1,17 @@
-import { Schemes, SchemesGenerated, StateLayers, StateLayersGenerated, InverseSchemes, InverseSchemesGenerated, InverseStateLayers, InverseStateLayersGenerated } from '../tokens/colors';
+import { Schemes, SchemesGenerated, StateLayers, StateLayersGenerated, InverseSchemes, InverseSchemesGenerated, InverseStateLayers, InverseStateLayersGenerated, OnPrimarySchemes, OnPrimarySchemesGenerated, OnPrimaryStateLayers, OnPrimaryStateLayersGenerated } from '../tokens/colors';
 export type ThemeColorTokens = {
     schemes: Schemes;
     stateLayers: StateLayers;
     inverseSchemes: InverseSchemes;
     inverseStateLayers: InverseStateLayers;
+    onPrimarySchemes: OnPrimarySchemes;
+    onPrimaryStateLayers: OnPrimaryStateLayers;
     generatedSchemes: SchemesGenerated;
     generatedStateLayers: StateLayersGenerated;
     generatedInverseSchemes: InverseSchemesGenerated;
     generatedInverseStateLayers: InverseStateLayersGenerated;
+    generatedOnPrimarySchemes: OnPrimarySchemesGenerated;
+    generatedOnPrimaryStateLayers: OnPrimaryStateLayersGenerated;
 };
 export declare const LightTokensDefault: ThemeColorTokens;
 export declare const DarkTokensDefault: ThemeColorTokens;

package/dist/src/tokens/ThemeColorTokens.js

@@ -1,15 +1,19 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { DarkSchemes, DarkSchemesGenerated, DarkStateLayers, DarkStateLayersGenerated, DarkInverseSchemes, DarkInverseSchemesGenerated, DarkInverseStateLayers, DarkInverseStateLayersGenerated, LightSchemes, LightSchemesGenerated, LightStateLayers, LightStateLayersGenerated, LightInverseSchemes, LightInverseSchemesGenerated, LightInverseStateLayers, LightInverseStateLayersGenerated, } from '../tokens/colors';
+import { DarkSchemes, DarkSchemesGenerated, DarkStateLayers, DarkStateLayersGenerated, DarkInverseSchemes, DarkInverseSchemesGenerated, DarkInverseStateLayers, DarkInverseStateLayersGenerated, DarkOnPrimarySchemes, DarkOnPrimarySchemesGenerated, DarkOnPrimaryStateLayers, DarkOnPrimaryStateLayersGenerated, LightSchemes, LightSchemesGenerated, LightStateLayers, LightStateLayersGenerated, LightInverseSchemes, LightInverseSchemesGenerated, LightInverseStateLayers, LightInverseStateLayersGenerated, LightOnPrimarySchemes, LightOnPrimarySchemesGenerated, LightOnPrimaryStateLayers, LightOnPrimaryStateLayersGenerated, } from '../tokens/colors';
 // reference
 export const LightTokensDefault = {
     schemes: LightSchemes,
     stateLayers: LightStateLayers,
     inverseSchemes: LightInverseSchemes,
     inverseStateLayers: LightInverseStateLayers,
+    onPrimarySchemes: LightOnPrimarySchemes,
+    onPrimaryStateLayers: LightOnPrimaryStateLayers,
     generatedSchemes: LightSchemesGenerated,
     generatedStateLayers: LightStateLayersGenerated,
     generatedInverseSchemes: LightInverseSchemesGenerated,
     generatedInverseStateLayers: LightInverseStateLayersGenerated,
+    generatedOnPrimarySchemes: LightOnPrimarySchemesGenerated,
+    generatedOnPrimaryStateLayers: LightOnPrimaryStateLayersGenerated,
 };
 // reference
 // https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
@@ -18,8 +22,12 @@ export const DarkTokensDefault = {
     stateLayers: DarkStateLayers,
     inverseSchemes: DarkInverseSchemes,
     inverseStateLayers: DarkInverseStateLayers,
+    onPrimarySchemes: DarkOnPrimarySchemes,
+    onPrimaryStateLayers: DarkOnPrimaryStateLayers,
     generatedSchemes: DarkSchemesGenerated,
     generatedStateLayers: DarkStateLayersGenerated,
     generatedInverseSchemes: DarkInverseSchemesGenerated,
     generatedInverseStateLayers: DarkInverseStateLayersGenerated,
+    generatedOnPrimarySchemes: DarkOnPrimarySchemesGenerated,
+    generatedOnPrimaryStateLayers: DarkOnPrimaryStateLayersGenerated,
 };

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

@@ -2,15 +2,23 @@ import { Schemes } from './schemes';
 import { StateLayers } from './stateLayers';
 import { InverseSchemes } from './inverseSchemes';
 import { InverseStateLayers } from './inverseStateLayers';
+import { OnPrimarySchemes } from './onPrimarySchemes';
+import { OnPrimaryStateLayers } from './onPrimaryStateLayers';
 import { SchemesGenerated } from './schemes';
 import { StateLayersGenerated } from './stateLayers';
 import { InverseSchemesGenerated } from './inverseSchemes';
 import { InverseStateLayersGenerated } from './inverseStateLayers';
+import { OnPrimarySchemesGenerated } from './onPrimarySchemes';
+import { OnPrimaryStateLayersGenerated } from './onPrimaryStateLayers';
 export declare const DarkSchemes: Schemes;
 export declare const DarkStateLayers: StateLayers;
 export declare const DarkInverseSchemes: InverseSchemes;
 export declare const DarkInverseStateLayers: InverseStateLayers;
+export declare const DarkOnPrimarySchemes: OnPrimarySchemes;
+export declare const DarkOnPrimaryStateLayers: OnPrimaryStateLayers;
 export declare const DarkSchemesGenerated: SchemesGenerated;
 export declare const DarkStateLayersGenerated: StateLayersGenerated;
 export declare const DarkInverseSchemesGenerated: InverseSchemesGenerated;
 export declare const DarkInverseStateLayersGenerated: InverseStateLayersGenerated;
+export declare const DarkOnPrimarySchemesGenerated: OnPrimarySchemesGenerated;
+export declare const DarkOnPrimaryStateLayersGenerated: OnPrimaryStateLayersGenerated;

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

@@ -801,6 +801,45 @@ export const DarkInverseStateLayers = {
         },
     },
 };
+export const DarkOnPrimarySchemes = {
+    base: {
+        primary: 'rgba(255, 255, 255, 1)',
+    },
+    surfaces: {
+        surface: 'rgba(176, 155, 239, 1)',
+        onSurfaceVariant: 'rgba(255, 255, 255, 1)',
+    },
+};
+export const DarkOnPrimaryStateLayers = {
+    base: {
+        primary: {
+            opacity08: 'rgba(255, 255, 255, 0.08)',
+            opacity12: 'rgba(255, 255, 255, 0.12)',
+            opacity16: 'rgba(255, 255, 255, 0.2)',
+            opacity64: 'rgba(255, 255, 255, 0.64)',
+        },
+    },
+    surfaces: {
+        onSurface: {
+            opacity08: 'rgba(245, 239, 247, 0.08)',
+            opacity12: 'rgba(245, 239, 247, 0.12)',
+            opacity16: 'rgba(245, 239, 247, 0.16)',
+            opacity28: 'rgba(245, 239, 247, 0.28)',
+            opacity38: 'rgba(245, 239, 247, 0.38)',
+            opacity48: 'rgba(245, 239, 247, 0.48)',
+            opacity64: 'rgba(245, 239, 247, 0.64)',
+            opacity10: 'rgba(245, 239, 247, 0.1)',
+        },
+        onSurfaceVariant: {
+            opacity08: 'rgba(255, 255, 255, 0.08)',
+            opacity12: 'rgba(255, 255, 255, 0.12)',
+            opacity16: 'rgba(255, 255, 255, 0.16)',
+            opacity28: 'rgba(255, 255, 255, 0.28)',
+            opacity48: 'rgba(255, 255, 255, 0.48)',
+            opacity64: 'rgba(255, 255, 255, 0.64)',
+        },
+    },
+};
 export const DarkSchemesGenerated = {
     'schemes.base.primary': { r: 176, g: 155, b: 239, a: 1 },
     'schemes.base.onPrimary': { r: 25, g: 19, b: 45, a: 1 },
@@ -1430,3 +1469,28 @@ export const DarkInverseStateLayersGenerated = {
     '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 },
 };
+export const DarkOnPrimarySchemesGenerated = {
+    'onPrimarySchemes.base.primary': { r: 255, g: 255, b: 255, a: 1 },
+    'onPrimarySchemes.surfaces.surface': { r: 176, g: 155, b: 239, a: 1 },
+    'onPrimarySchemes.surfaces.onSurfaceVariant': { r: 255, g: 255, b: 255, a: 1 },
+};
+export const DarkOnPrimaryStateLayersGenerated = {
+    'onPrimaryStateLayers.base.primary.opacity08': { r: 255, g: 255, b: 255, a: 0.08 },
+    'onPrimaryStateLayers.base.primary.opacity12': { r: 255, g: 255, b: 255, a: 0.12 },
+    'onPrimaryStateLayers.base.primary.opacity16': { r: 255, g: 255, b: 255, a: 0.2 },
+    'onPrimaryStateLayers.base.primary.opacity64': { r: 255, g: 255, b: 255, a: 0.64 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity08': { r: 245, g: 239, b: 247, a: 0.08 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity12': { r: 245, g: 239, b: 247, a: 0.12 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity16': { r: 245, g: 239, b: 247, a: 0.16 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity28': { r: 245, g: 239, b: 247, a: 0.28 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity38': { r: 245, g: 239, b: 247, a: 0.38 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity48': { r: 245, g: 239, b: 247, a: 0.48 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity64': { r: 245, g: 239, b: 247, a: 0.64 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity10': { r: 245, g: 239, b: 247, a: 0.1 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity08': { r: 255, g: 255, b: 255, a: 0.08 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity12': { r: 255, g: 255, b: 255, a: 0.12 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity16': { r: 255, g: 255, b: 255, a: 0.16 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity28': { r: 255, g: 255, b: 255, a: 0.28 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity48': { r: 255, g: 255, b: 255, a: 0.48 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity64': { r: 255, g: 255, b: 255, a: 0.64 },
+};

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

@@ -2,15 +2,23 @@ import { Schemes } from './schemes';
 import { StateLayers } from './stateLayers';
 import { InverseSchemes } from './inverseSchemes';
 import { InverseStateLayers } from './inverseStateLayers';
+import { OnPrimarySchemes } from './onPrimarySchemes';
+import { OnPrimaryStateLayers } from './onPrimaryStateLayers';
 import { SchemesGenerated } from './schemes';
 import { StateLayersGenerated } from './stateLayers';
 import { InverseSchemesGenerated } from './inverseSchemes';
 import { InverseStateLayersGenerated } from './inverseStateLayers';
+import { OnPrimarySchemesGenerated } from './onPrimarySchemes';
+import { OnPrimaryStateLayersGenerated } from './onPrimaryStateLayers';
 export declare const LightSchemes: Schemes;
 export declare const LightStateLayers: StateLayers;
 export declare const LightInverseSchemes: InverseSchemes;
 export declare const LightInverseStateLayers: InverseStateLayers;
+export declare const LightOnPrimarySchemes: OnPrimarySchemes;
+export declare const LightOnPrimaryStateLayers: OnPrimaryStateLayers;
 export declare const LightSchemesGenerated: SchemesGenerated;
 export declare const LightStateLayersGenerated: StateLayersGenerated;
 export declare const LightInverseSchemesGenerated: InverseSchemesGenerated;
 export declare const LightInverseStateLayersGenerated: InverseStateLayersGenerated;
+export declare const LightOnPrimarySchemesGenerated: OnPrimarySchemesGenerated;
+export declare const LightOnPrimaryStateLayersGenerated: OnPrimaryStateLayersGenerated;

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

@@ -801,6 +801,45 @@ export const LightInverseStateLayers = {
         },
     },
 };
+export const LightOnPrimarySchemes = {
+    base: {
+        primary: 'rgba(255, 255, 255, 1)',
+    },
+    surfaces: {
+        surface: 'rgba(95, 77, 152, 1)',
+        onSurfaceVariant: 'rgba(255, 255, 255, 1)',
+    },
+};
+export const LightOnPrimaryStateLayers = {
+    base: {
+        primary: {
+            opacity08: 'rgba(255, 255, 255, 0.08)',
+            opacity12: 'rgba(255, 255, 255, 0.12)',
+            opacity16: 'rgba(255, 255, 255, 0.2)',
+            opacity64: 'rgba(255, 255, 255, 0.64)',
+        },
+    },
+    surfaces: {
+        onSurface: {
+            opacity08: 'rgba(255, 255, 255, 0.08)',
+            opacity12: 'rgba(255, 255, 255, 0.12)',
+            opacity16: 'rgba(255, 255, 255, 0.16)',
+            opacity28: 'rgba(255, 255, 255, 0.28)',
+            opacity38: 'rgba(255, 255, 255, 0.38)',
+            opacity48: 'rgba(255, 255, 255, 0.48)',
+            opacity64: 'rgba(255, 255, 255, 0.64)',
+            opacity10: 'rgba(255, 255, 255, 0.1)',
+        },
+        onSurfaceVariant: {
+            opacity08: 'rgba(255, 255, 255, 0.08)',
+            opacity12: 'rgba(255, 255, 255, 0.12)',
+            opacity16: 'rgba(255, 255, 255, 0.16)',
+            opacity28: 'rgba(255, 255, 255, 0.28)',
+            opacity48: 'rgba(255, 255, 255, 0.48)',
+            opacity64: 'rgba(255, 255, 255, 0.64)',
+        },
+    },
+};
 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 },
@@ -1400,3 +1439,28 @@ export const LightInverseStateLayersGenerated = {
     'inverseStateLayers.status.warning.opacity28': { r: 222, g: 144, b: 66, a: 0.28 },
     'inverseStateLayers.status.warning.opacity38': { r: 222, g: 144, b: 66, a: 0.38 },
 };
+export const LightOnPrimarySchemesGenerated = {
+    'onPrimarySchemes.base.primary': { r: 255, g: 255, b: 255, a: 1 },
+    'onPrimarySchemes.surfaces.surface': { r: 95, g: 77, b: 152, a: 1 },
+    'onPrimarySchemes.surfaces.onSurfaceVariant': { r: 255, g: 255, b: 255, a: 1 },
+};
+export const LightOnPrimaryStateLayersGenerated = {
+    'onPrimaryStateLayers.base.primary.opacity08': { r: 255, g: 255, b: 255, a: 0.08 },
+    'onPrimaryStateLayers.base.primary.opacity12': { r: 255, g: 255, b: 255, a: 0.12 },
+    'onPrimaryStateLayers.base.primary.opacity16': { r: 255, g: 255, b: 255, a: 0.2 },
+    'onPrimaryStateLayers.base.primary.opacity64': { r: 255, g: 255, b: 255, a: 0.64 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity08': { r: 255, g: 255, b: 255, a: 0.08 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity12': { r: 255, g: 255, b: 255, a: 0.12 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity16': { r: 255, g: 255, b: 255, a: 0.16 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity28': { r: 255, g: 255, b: 255, a: 0.28 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity38': { r: 255, g: 255, b: 255, a: 0.38 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity48': { r: 255, g: 255, b: 255, a: 0.48 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity64': { r: 255, g: 255, b: 255, a: 0.64 },
+    'onPrimaryStateLayers.surfaces.onSurface.opacity10': { r: 255, g: 255, b: 255, a: 0.1 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity08': { r: 255, g: 255, b: 255, a: 0.08 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity12': { r: 255, g: 255, b: 255, a: 0.12 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity16': { r: 255, g: 255, b: 255, a: 0.16 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity28': { r: 255, g: 255, b: 255, a: 0.28 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity48': { r: 255, g: 255, b: 255, a: 0.48 },
+    'onPrimaryStateLayers.surfaces.onSurfaceVariant.opacity64': { r: 255, g: 255, b: 255, a: 0.64 },
+};

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

@@ -3,5 +3,7 @@ export type { Schemes, SchemesKey, SchemesGenerated } from './schemes';
 export type { StateLayers, StateLayersKey, StateLayersGenerated } from './stateLayers';
 export type { InverseSchemes, InverseSchemesKey, InverseSchemesGenerated } from './inverseSchemes';
 export type { InverseStateLayers, InverseStateLayersKey, InverseStateLayersGenerated, } from './inverseStateLayers';
-export { LightSchemes, LightStateLayers, LightInverseSchemes, LightInverseStateLayers, LightSchemesGenerated, LightStateLayersGenerated, LightInverseSchemesGenerated, LightInverseStateLayersGenerated, } from './Light';
-export { DarkSchemes, DarkStateLayers, DarkInverseSchemes, DarkInverseStateLayers, DarkSchemesGenerated, DarkStateLayersGenerated, DarkInverseSchemesGenerated, DarkInverseStateLayersGenerated, } from './Dark';
+export type { OnPrimarySchemes, OnPrimarySchemesKey, OnPrimarySchemesGenerated, } from './onPrimarySchemes';
+export type { OnPrimaryStateLayers, OnPrimaryStateLayersKey, OnPrimaryStateLayersGenerated, } from './onPrimaryStateLayers';
+export { LightSchemes, LightStateLayers, LightInverseSchemes, LightInverseStateLayers, LightOnPrimarySchemes, LightOnPrimaryStateLayers, LightSchemesGenerated, LightStateLayersGenerated, LightInverseSchemesGenerated, LightInverseStateLayersGenerated, LightOnPrimarySchemesGenerated, LightOnPrimaryStateLayersGenerated, } from './Light';
+export { DarkSchemes, DarkStateLayers, DarkInverseSchemes, DarkInverseStateLayers, DarkOnPrimarySchemes, DarkOnPrimaryStateLayers, DarkSchemesGenerated, DarkStateLayersGenerated, DarkInverseSchemesGenerated, DarkInverseStateLayersGenerated, DarkOnPrimarySchemesGenerated, DarkOnPrimaryStateLayersGenerated, } from './Dark';

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

@@ -1,4 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 // Auto-generated file - do not edit manually
-export { LightSchemes, LightStateLayers, LightInverseSchemes, LightInverseStateLayers, LightSchemesGenerated, LightStateLayersGenerated, LightInverseSchemesGenerated, LightInverseStateLayersGenerated, } from './Light';
-export { DarkSchemes, DarkStateLayers, DarkInverseSchemes, DarkInverseStateLayers, DarkSchemesGenerated, DarkStateLayersGenerated, DarkInverseSchemesGenerated, DarkInverseStateLayersGenerated, } from './Dark';
+export { LightSchemes, LightStateLayers, LightInverseSchemes, LightInverseStateLayers, LightOnPrimarySchemes, LightOnPrimaryStateLayers, LightSchemesGenerated, LightStateLayersGenerated, LightInverseSchemesGenerated, LightInverseStateLayersGenerated, LightOnPrimarySchemesGenerated, LightOnPrimaryStateLayersGenerated, } from './Light';
+export { DarkSchemes, DarkStateLayers, DarkInverseSchemes, DarkInverseStateLayers, DarkOnPrimarySchemes, DarkOnPrimaryStateLayers, DarkSchemesGenerated, DarkStateLayersGenerated, DarkInverseSchemesGenerated, DarkInverseStateLayersGenerated, DarkOnPrimarySchemesGenerated, DarkOnPrimaryStateLayersGenerated, } from './Dark';

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

@@ -0,0 +1,12 @@
+import { RecursiveKeyOf, GeneratedRgba } from './types';
+export type OnPrimarySchemes = {
+    base: {
+        primary: string;
+    };
+    surfaces: {
+        surface: string;
+        onSurfaceVariant: string;
+    };
+};
+export type OnPrimarySchemesKey = `onPrimarySchemes.${RecursiveKeyOf<OnPrimarySchemes>}`;
+export type OnPrimarySchemesGenerated = Record<OnPrimarySchemesKey, GeneratedRgba>;

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

@@ -0,0 +1,33 @@
+import { RecursiveKeyOf, GeneratedRgba } from './types';
+export type OnPrimaryStateLayers = {
+    base: {
+        primary: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity64: string;
+        };
+    };
+    surfaces: {
+        onSurface: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity38: string;
+            opacity48: string;
+            opacity64: string;
+            opacity10: string;
+        };
+        onSurfaceVariant: {
+            opacity08: string;
+            opacity12: string;
+            opacity16: string;
+            opacity28: string;
+            opacity48: string;
+            opacity64: string;
+        };
+    };
+};
+export type OnPrimaryStateLayersKey = `onPrimaryStateLayers.${RecursiveKeyOf<OnPrimaryStateLayers>}`;
+export type OnPrimaryStateLayersGenerated = Record<OnPrimaryStateLayersKey, GeneratedRgba>;

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

@@ -1,15 +1,18 @@
 import { ThemeOptions, PaletteColor } from '@mui/material';
-import { getBlendSchemaWithStateLayer, getInverseBlendSchemaWithStateLayer } from '../index';
+import { getBlendSchemaWithStateLayer, getInverseBlendSchemaWithStateLayer, getOnPrimaryBlendSchemaWithStateLayer } from '../index';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { ThemeScheme } from '../tokens/ThemeScheme';
-import { Schemes, StateLayers, InverseSchemes, InverseStateLayers } from '../tokens/colors';
+import { Schemes, StateLayers, InverseSchemes, InverseStateLayers, OnPrimarySchemes, OnPrimaryStateLayers } from '../tokens/colors';
 export type ThemeColors = {
     schemes: Schemes;
     stateLayers: StateLayers;
     inverseSchemes: InverseSchemes;
     inverseStateLayers: InverseStateLayers;
+    onPrimarySchemes: OnPrimarySchemes;
+    onPrimaryStateLayers: OnPrimaryStateLayers;
     blendSchemaWithStateLayer: ReturnType<typeof getBlendSchemaWithStateLayer>;
     blendInverseSchemaWithStateLayer: ReturnType<typeof getInverseBlendSchemaWithStateLayer>;
+    blendOnPrimarySchemaWithStateLayer: ReturnType<typeof getOnPrimaryBlendSchemaWithStateLayer>;
 };
 declare module '@mui/material/styles' {
     interface M3PaletteOptions {

package/dist/src/utils/getMUIPalette.js

@@ -1,4 +1,4 @@
-import { getBlendSchemaWithStateLayer, getInverseBlendSchemaWithStateLayer, } from '../index';
+import { getBlendSchemaWithStateLayer, getInverseBlendSchemaWithStateLayer, getOnPrimaryBlendSchemaWithStateLayer, } from '../index';
 export const getMUIPalette = (themeMode, themeScheme) => {
     const scheme = themeScheme[themeMode];
     return {
@@ -57,8 +57,11 @@ export const getMUIPalette = (themeMode, themeScheme) => {
             stateLayers: scheme.stateLayers,
             inverseSchemes: scheme.inverseSchemes,
             inverseStateLayers: scheme.inverseStateLayers,
+            onPrimarySchemes: scheme.onPrimarySchemes,
+            onPrimaryStateLayers: scheme.onPrimaryStateLayers,
             blendSchemaWithStateLayer: getBlendSchemaWithStateLayer(scheme.generatedSchemes, scheme.generatedStateLayers),
             blendInverseSchemaWithStateLayer: getInverseBlendSchemaWithStateLayer(scheme.generatedInverseSchemes, scheme.generatedInverseStateLayers),
+            blendOnPrimarySchemaWithStateLayer: getOnPrimaryBlendSchemaWithStateLayer(scheme.generatedOnPrimarySchemes, scheme.generatedOnPrimaryStateLayers),
         },
     };
 };

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

@@ -1,4 +1,4 @@
-import { Schemes, StateLayers, InverseSchemes, InverseStateLayers } from '../tokens/colors';
+import { Schemes, StateLayers, InverseSchemes, InverseStateLayers, OnPrimarySchemes, OnPrimaryStateLayers } from '../tokens/colors';
 import { TypescaleTypographyVariants } from '../index';
 import { BlendSchemaWithStateLayerFunction } from '../utils/getStateLayerColor';
 declare module '@mui/material/styles' {
@@ -14,8 +14,11 @@ declare module '@mui/material/styles' {
             stateLayers: StateLayers;
             inverseSchemes: InverseSchemes;
             inverseStateLayers: InverseStateLayers;
+            onPrimarySchemes: OnPrimarySchemes;
+            onPrimaryStateLayers: OnPrimaryStateLayers;
             blendSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
             blendInverseSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+            blendOnPrimarySchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
         };
     }
     interface ThemeOptions {
@@ -24,8 +27,11 @@ declare module '@mui/material/styles' {
             stateLayers: StateLayers;
             inverseSchemes: InverseSchemes;
             inverseStateLayers: InverseStateLayers;
+            onPrimarySchemes: OnPrimarySchemes;
+            onPrimaryStateLayers: OnPrimaryStateLayers;
             blendSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
             blendInverseSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+            blendOnPrimarySchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
         };
     }
 }

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

@@ -1,9 +1,10 @@
-import { SchemesKey, InverseSchemesKey, StateLayersKey, InverseStateLayersKey, SchemesGenerated, InverseSchemesGenerated, StateLayersGenerated, InverseStateLayersGenerated } from '../tokens/colors';
-export type BlendSchemaWithStateLayerFunction = (schemaKey: SchemesKey | InverseSchemesKey, stateLayerKey: StateLayersKey | InverseStateLayersKey) => string;
-export declare const getBlendSchemaWithStateLayer: (schemesGenerated: SchemesGenerated | InverseSchemesGenerated, stateLayersGenerated: StateLayersGenerated | InverseStateLayersGenerated) => BlendSchemaWithStateLayerFunction;
+import { SchemesKey, InverseSchemesKey, OnPrimarySchemesKey, StateLayersKey, InverseStateLayersKey, OnPrimaryStateLayersKey, SchemesGenerated, InverseSchemesGenerated, OnPrimarySchemesGenerated, StateLayersGenerated, InverseStateLayersGenerated, OnPrimaryStateLayersGenerated } from '../tokens/colors';
+export type BlendSchemaWithStateLayerFunction = (schemaKey: SchemesKey | InverseSchemesKey | OnPrimarySchemesKey, stateLayerKey: StateLayersKey | InverseStateLayersKey | OnPrimaryStateLayersKey) => string;
+export declare const getBlendSchemaWithStateLayer: (schemesGenerated: SchemesGenerated | InverseSchemesGenerated | OnPrimarySchemesGenerated, stateLayersGenerated: StateLayersGenerated | InverseStateLayersGenerated | OnPrimaryStateLayersGenerated) => BlendSchemaWithStateLayerFunction;
 export declare const getInverseBlendSchemaWithStateLayer: (schemesGenerated: InverseSchemesGenerated, stateLayersGenerated: InverseStateLayersGenerated) => BlendSchemaWithStateLayerFunction;
+export declare const getOnPrimaryBlendSchemaWithStateLayer: (schemesGenerated: OnPrimarySchemesGenerated, stateLayersGenerated: OnPrimaryStateLayersGenerated) => BlendSchemaWithStateLayerFunction;
 /**
  * Blends a schema color by color-mix
  * Color mix is 2023 Baseline https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
  */
-export declare const blendSchemaWithStateLayer: (schemesGenerated: SchemesGenerated | InverseSchemesGenerated, stateLayersGenerated: StateLayersGenerated | InverseStateLayersGenerated) => (schemaKey: SchemesKey | InverseSchemesKey, stateLayerKey: StateLayersKey | InverseStateLayersKey) => string;
+export declare const blendSchemaWithStateLayer: (schemesGenerated: SchemesGenerated | InverseSchemesGenerated | OnPrimarySchemesGenerated, stateLayersGenerated: StateLayersGenerated | InverseStateLayersGenerated | OnPrimaryStateLayersGenerated) => (schemaKey: SchemesKey | InverseSchemesKey | OnPrimarySchemesKey, stateLayerKey: StateLayersKey | InverseStateLayersKey | OnPrimaryStateLayersKey) => string;

package/dist/src/utils/getStateLayerColor.js

@@ -2,6 +2,7 @@
 // Function to get the blend function
 export const getBlendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => blendSchemaWithStateLayer(schemesGenerated, stateLayersGenerated);
 export const getInverseBlendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => blendSchemaWithStateLayer(schemesGenerated, stateLayersGenerated);
+export const getOnPrimaryBlendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => blendSchemaWithStateLayer(schemesGenerated, stateLayersGenerated);
 /**
  * Blends a schema color by color-mix
  * Color mix is 2023 Baseline https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

package/package.json

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

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

@@ -1,40 +0,0 @@
-import { RecursiveKeyOf, GeneratedRgba } from './types';
-export type InverseSchemes = {
-    surface: {
-        surface: string;
-        onSurface: string;
-        onSurfaceVariant: string;
-        outlineVariant: string;
-        surfaceContainer: string;
-        onSurfaceContainer: string;
-        outline: string;
-        surfaceContainerLowest: string;
-        surfaceContainerLow: string;
-        surfaceContainerHigh: string;
-        surfaceContainerHighest: string;
-        elevatedContainerLowest: string;
-        elevatedContainerLow: string;
-        elevatedContainer: string;
-        elevatedContainerHigh: string;
-    };
-    base: {
-        primary: string;
-        onPrimary: string;
-        secondary: string;
-        onSecondary: string;
-    };
-    status: {
-        error: string;
-        warning: string;
-        success: string;
-        info: string;
-        onError: string;
-        onWarning: string;
-        onInfo: string;
-        onSuccess: string;
-        undefined: string;
-        onUndefined: string;
-    };
-};
-export type InverseSchemesKey = `inverseSchemes.${RecursiveKeyOf<InverseSchemes>}`;
-export type InverseSchemesGenerated = Record<InverseSchemesKey, GeneratedRgba>;

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

@@ -1,111 +0,0 @@
-import { RecursiveKeyOf, GeneratedRgba } from './types';
-export type Schemes = {
-    base: {
-        primary: string;
-        onPrimary: string;
-        primaryContainer: string;
-        onPrimaryContainer: string;
-        secondary: string;
-        onSecondary: string;
-        secondaryContainer: string;
-        onSecondaryContainer: string;
-        tertiary: string;
-        onTertiary: string;
-        tertiaryContainer: string;
-        onTertiaryContainer: string;
-        primaryVariant: string;
-        onPrimaryVariant: string;
-        onPrimaryBase: string;
-        onPrimaryBaseVariant: string;
-    };
-    surfaces: {
-        surfaceTint: string;
-        background: string;
-        onBackground: string;
-        surface: string;
-        onSurface: string;
-        surfaceVariant: string;
-        onSurfaceVariant: string;
-        outline: string;
-        outlineVariant: string;
-        shadow: string;
-        scrim: string;
-        surfaceDim: string;
-        surfaceBright: string;
-        surfaceContainerLowest: string;
-        surfaceContainerLow: string;
-        surfaceContainer: string;
-        surfaceContainerHigh: string;
-        surfaceContainerHighest: string;
-        elevatedContainerLowest: string;
-        elevatedContainerLow: string;
-        elevatedContainer: string;
-        elevatedContainerHigh: string;
-    };
-    status: {
-        error: string;
-        onError: string;
-        errorContainer: string;
-        onErrorContainer: string;
-        warning: string;
-        onWarning: string;
-        warningContainer: string;
-        onWarningContainer: string;
-        info: string;
-        onInfo: string;
-        infoContainer: string;
-        onInfoContainer: string;
-        onSuccess: string;
-        successContainer: string;
-        onSuccessContainer: string;
-        success: string;
-        undefined: string;
-        onUndefined: string;
-        undefinedContainer: string;
-        onUndefinedContainer: string;
-    };
-    fixed: {
-        primaryFixed: string;
-        onPrimaryFixed: string;
-        primaryFixedDim: string;
-        onPrimaryFixedVariant: string;
-        secondaryFixed: string;
-        onSecondaryFixed: string;
-        secondaryFixedDim: string;
-        onSecondaryFixedVariant: string;
-        tertiaryFixed: string;
-        onTertiaryFixed: string;
-        tertiaryFixedDim: string;
-        onTertiaryFixedVariant: string;
-        errorFixedDim: string;
-        warningFixedDim: string;
-        infoFixedDim: string;
-        successFixedDim: string;
-    };
-    charts: {
-        chart01: string;
-        chart02: string;
-        chart03: string;
-        chart04: string;
-        chart05: string;
-        chart06: string;
-        chart07: string;
-        chart08: string;
-        chart09: string;
-        chartError: string;
-        chartWarning: string;
-        chartSuccess: string;
-        chartUndefined: string;
-        chart10: string;
-    };
-    typography: {
-        primary: string;
-        error: string;
-        onSurface: string;
-        primaryVisited: string;
-        errorVisited: string;
-        onSurfaceVisited: string;
-    };
-};
-export type SchemesKey = `schemes.${RecursiveKeyOf<Schemes>}`;
-export type SchemesGenerated = Record<SchemesKey, GeneratedRgba>;