@webpros/mui-theme 0.1.6 → 0.3.0

package/dist/src/utils/getMUIPalette.js

@@ -1,12 +1,35 @@
-export const getMUIPalette = (themeMode, themescheme) => {
-    const scheme = themescheme[themeMode];
+import { getBlendSchemaWithStateLayer, getInverseBlendSchemaWithStateLayer, } from '../index';
+export const getMUIPalette = (themeMode, themeScheme) => {
+    const scheme = themeScheme[themeMode];
     return {
         palette: {
+            /** Basic MUI overrides */
             themeMode,
             primary: {
                 main: scheme.primary,
                 contrastText: scheme.onPrimary,
             },
+            error: {
+                main: scheme.schemes.status.error,
+                contrastText: scheme.schemes.status.onError,
+            },
+            text: {
+                primary: scheme.schemes.surfaces.onSurface,
+                secondary: scheme.schemes.surfaces.onSurfaceVariant,
+                disabled: scheme.stateLayers.surfaces.onSurface.opacity38,
+            },
+            info: {
+                main: scheme.schemes.status.info,
+                contrastText: scheme.schemes.status.onInfo,
+            },
+            success: {
+                main: scheme.schemes.status.success,
+                contrastText: scheme.schemes.status.onSuccess,
+            },
+            warning: {
+                main: scheme.schemes.status.warning,
+                contrastText: scheme.schemes.status.onWarning,
+            },
             onPrimary: {
                 main: scheme.onPrimary,
                 contrastText: scheme.primary,
@@ -51,10 +74,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.onTertiaryContainer,
                 contrastText: scheme.tertiaryContainer,
             },
-            error: {
-                main: scheme.error,
-                contrastText: scheme.onError,
-            },
             onError: {
                 main: scheme.onError,
                 contrastText: scheme.error,
@@ -162,9 +181,23 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.inverseOnSurface,
                 contrastText: scheme.inverseSurface,
             },
-            action: {},
+            action: {
+                // active
+                hover: scheme.stateLayers.surfaces.onSurface.opacity08,
+                hoverOpacity: scheme.generatedStateLayers['stateLayers.surfaces.onSurface.opacity08'].a,
+                selected: scheme.schemes.base.secondaryContainer, // TODO verify
+                // TODO verify
+                selectedOpacity: scheme.generatedStateLayers['stateLayers.surfaces.onSurface.opacity12'].a,
+                disabled: scheme.stateLayers.surfaces.onSurface.opacity38,
+                // disabledBackground:
+                disabledOpacity: scheme.generatedStateLayers['stateLayers.surfaces.onSurface.opacity38'].a,
+                // TODO verify
+                // focus
+                // focusOpacity
+                // activatedOpacity
+            },
             shadow: {
-                main: scheme.shadow,
+                main: scheme.shadow, // TODO: verify if it is needed
             },
             scrim: {
                 main: scheme.scrim,
@@ -184,14 +217,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 white: scheme.background,
                 black: scheme.onBackground,
             },
-            text: {
-                primary: scheme.onSurface,
-                secondary: scheme.onSecondaryContainer,
-            },
-            info: {
-                main: scheme.info,
-                contrastText: scheme.onInfo,
-            },
             onInfo: {
                 main: scheme.onInfo,
                 contrastText: scheme.info,
@@ -204,10 +229,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.onInfoContainer,
                 contrastText: scheme.infoContainer,
             },
-            success: {
-                main: scheme.success,
-                contrastText: scheme.onSuccess,
-            },
             onSuccess: {
                 main: scheme.onSuccess,
                 contrastText: scheme.success,
@@ -220,10 +241,6 @@ export const getMUIPalette = (themeMode, themescheme) => {
                 main: scheme.onSuccessContainer,
                 contrastText: scheme.successContainer,
             },
-            warning: {
-                main: scheme.warning,
-                contrastText: scheme.onWarning,
-            },
             onWarning: {
                 main: scheme.onWarning,
                 contrastText: scheme.warning,
@@ -258,6 +275,13 @@ export const getMUIPalette = (themeMode, themescheme) => {
             divider: scheme.outlineVariant,
             additional: scheme.additionalColors,
         },
-        tones: themescheme.tones,
+        colors: {
+            schemes: scheme.schemes,
+            stateLayers: scheme.stateLayers,
+            inverseSchemes: scheme.inverseSchemes,
+            inverseStateLayers: scheme.inverseStateLayers,
+            blendSchemaWithStateLayer: getBlendSchemaWithStateLayer(scheme.generatedSchemes, scheme.generatedStateLayers),
+            blendInverseSchemaWithStateLayer: getInverseBlendSchemaWithStateLayer(scheme.generatedInverseSchemes, scheme.generatedInverseStateLayers),
+        },
     };
 };

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

@@ -0,0 +1,31 @@
+import { Schemes, StateLayers, InverseSchemes, InverseStateLayers } from '../tokens/colors';
+import { TypescaleTypographyVariants } from '../index';
+import { BlendSchemaWithStateLayerFunction } from '../utils/getStateLayerColor';
+declare module '@mui/material/styles' {
+    interface TypographyVariants extends TypescaleTypographyVariants {
+    }
+    interface TypographyVariantsOptions extends TypescaleTypographyVariants {
+    }
+}
+declare module '@mui/material/styles' {
+    interface Theme {
+        colors: {
+            schemes: Schemes;
+            stateLayers: StateLayers;
+            inverseSchemes: InverseSchemes;
+            inverseStateLayers: InverseStateLayers;
+            blendSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+            blendInverseSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+        };
+    }
+    interface ThemeOptions {
+        colors: {
+            schemes: Schemes;
+            stateLayers: StateLayers;
+            inverseSchemes: InverseSchemes;
+            inverseStateLayers: InverseStateLayers;
+            blendSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+            blendInverseSchemaWithStateLayer: BlendSchemaWithStateLayerFunction;
+        };
+    }
+}

package/dist/src/utils/getMUIThemeCustoimzationType.js

@@ -0,0 +1,2 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export {};

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

@@ -0,0 +1,2 @@
+import { TypescaleTypographyVariants } from '../tokens/typography';
+export declare const getMUITypography: () => TypescaleTypographyVariants;

package/dist/src/utils/getMUITypography.js

@@ -0,0 +1,5 @@
+import { typographyVariants, } from '../tokens/typography';
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getMUITypography = () => {
+    return typographyVariants;
+};

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

@@ -1,3 +1,8 @@
+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;
@@ -6,7 +11,15 @@ export declare const StateLayerOpacity: {
     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,
@@ -16,10 +29,34 @@ export declare enum StateLayer {
     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;
+/**
+ * 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;

package/dist/src/utils/getStateLayerColor.js

@@ -2,7 +2,10 @@
 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*/
-// We should have ONLY those values of opacity inside the theme
+/**
+ * @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,
@@ -11,6 +14,10 @@ export const StateLayerOpacity = {
     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";
@@ -21,16 +28,51 @@ export var StateLayer;
     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);
+/**
+ * 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 const blendSchemaWithStateLayer = (schemesGenerated, stateLayersGenerated) => (schemaKey, stateLayerKey) => {
+    // Get the GeneratedRgba values directly using the keys
+    const rgb1 = schemesGenerated[schemaKey];
+    const rgb2 = stateLayersGenerated[stateLayerKey];
+    // Convert RGBA objects to color strings
+    const schemaColor = `rgba(${rgb1.r}, ${rgb1.g}, ${rgb1.b}, ${rgb1.a})`;
+    const stateLayerColor = `rgba(${rgb2.r}, ${rgb2.g}, ${rgb2.b}, 1)`; // Remove alpha from state layer
+    // Get the amount from the state layer opacity (alpha channel as percentage)
+    const percentage = Math.round(rgb2.a * 100);
+    // Use CSS color-mix for blending
+    return `color-mix(in srgb, ${schemaColor} 100%, ${stateLayerColor} ${percentage}%)`;
+};

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

@@ -1,6 +1,6 @@
-export * from './generateTokens';
 export * from './getMUIComponents';
 export * from './getMUIPalette';
 export * from './getMuiLocaleByCode';
+export * from './getMUIThemeCustoimzationType';
 export * from './getStateLayerColor';
 export * from './patchMUIShadows';

package/dist/src/utils/index.js

@@ -1,7 +1,7 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-export * from './generateTokens';
 export * from './getMUIComponents';
 export * from './getMUIPalette';
 export * from './getMuiLocaleByCode';
+export * from './getMUIThemeCustoimzationType';
 export * from './getStateLayerColor';
 export * from './patchMUIShadows';

package/dist/src/utils/patchMUIShadows.js

@@ -1,5 +1,6 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha } from '@mui/material';
+import { muiShadows } from '../tokens/shadows';
 export const patchMUIShadows = (theme) => {
-    theme.shadows[2] = `0px 0px 2px ${alpha(theme.palette.shadow.main, 0.08)}, 0px 8px 24px ${alpha(theme.palette.shadow.main, 0.08)}`;
+    muiShadows.forEach((shadowValue, index) => {
+        theme.shadows[index] = shadowValue;
+    });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
-  "description": "MUI v6 theme for WebPros products",
-  "version": "0.1.6",
+  "description": "MUI v7 theme for WebPros products",
+  "version": "0.3.0",
   "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",
@@ -42,15 +46,17 @@
     "eslint": "eslint",
     "prettier:test": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "extract-tokens": "node tools/extractM3Tokens.js",
+    "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",
@@ -66,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",
@@ -79,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",
@@ -93,12 +99,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^9.1.16",
+    "storybook-addon-pseudo-states": "^10.0.3",
     "tsc-alias": "^1.8.16",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.1",
+    "usehooks-ts": "^3.1.1",
     "vite": "^7.1.10",
-    "vite-plugin-dts": "^4.5.4",
-    "usehooks-ts": "^3.1.1"
+    "vite-plugin-dts": "^4.5.4"
   },
   "browserslist": [
     "last 2 versions",
@@ -110,5 +117,8 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "resolutions": {
+    "react-is": "^18.3.1"
   }
 }

package/dist/src/components/inputs/Autocomplete/components/AutocompletePopupIcon.d.ts

@@ -1 +0,0 @@
-export declare const AutocompletePopupIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/navigation/PaginationItem/PaginationItem.d.ts

@@ -1,3 +0,0 @@
-import './PaginationItem.theme';
-export declare const PaginationItem: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").PaginationItemTypeMap<{}, "div">>;
-export type PaginationItemComponentType = typeof PaginationItem;

package/dist/src/components/navigation/PaginationItem/PaginationItem.js

@@ -1,4 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { PaginationItem as MuiPaginationItem } from '@mui/material';
-import './PaginationItem.theme';
-export const PaginationItem = MuiPaginationItem;

package/dist/src/components/navigation/TabList/TabList.d.ts

@@ -1,3 +0,0 @@
-import './TabList.theme';
-export declare const TabList: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TabsTypeMap<{}, "div">>;
-export type TabListComponentType = typeof TabList;

package/dist/src/components/navigation/TabList/TabList.js

@@ -1,4 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { Tabs as MuiTabList } from '@mui/material';
-import './TabList.theme';
-export const TabList = MuiTabList;

package/dist/src/components/navigation/TabList/TabList.theme.d.ts

@@ -1,10 +0,0 @@
-import { Theme, ComponentsOverrides, ComponentsProps } from '@mui/material';
-interface M3TabList {
-    MuiTabs: {
-        defaultProps?: ComponentsProps['MuiTabs'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiTabs'];
-    };
-}
-export declare const getTabList: (theme: Theme) => M3TabList;
-declare const _default: {};
-export default _default;

package/dist/src/components/navigation/TabList/TabList.theme.js

@@ -1,17 +0,0 @@
-export const getTabList = (theme) => {
-    const { palette: _ } = theme;
-    return {
-        MuiTabs: {
-            styleOverrides: {
-                root: {
-                    '& > .MuiTabs-scroller > .MuiTabs-indicator': {
-                        height: '3px',
-                        borderTopLeftRadius: '3px',
-                        borderTopRightRadius: '3px',
-                    },
-                },
-            },
-        },
-    };
-};
-export default {};

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

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

package/dist/src/hooks/useTonalPalette.d.ts

@@ -1,3 +0,0 @@
-import { TonalPalette } from '../tokens/TonalPalette';
-export declare const TONAL_PALETTE_KEY = "TonalPaletteKey";
-export declare const useTonalPalette: () => readonly [TonalPalette, (hexColor: string) => void];

package/dist/src/hooks/useTonalPalette.js

@@ -1,32 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities';
-import { useLayoutEffect, useState } from 'react';
-import { TonalPaletteDefault } from '../tokens/TonalPalette';
-export const TONAL_PALETTE_KEY = 'TonalPaletteKey';
-const LEVELS = [
-    0, 4, 6, 10, 12, 17, 20, 22, 24, 30, 40, 50, 60, 70, 80, 87, 90, 92, 94, 95, 96, 98, 99, 100,
-];
-export const useTonalPalette = () => {
-    const [tonalPalette, setTonalPalette] = useState(TonalPaletteDefault);
-    useLayoutEffect(() => {
-        if (localStorage.getItem(TONAL_PALETTE_KEY)) {
-            const localTonalPalette = JSON.parse(localStorage.getItem(TONAL_PALETTE_KEY) || '{}');
-            setTonalPalette(localTonalPalette);
-        }
-    }, []);
-    const generatePalette = (hexColor) => {
-        const intColor = argbFromHex(hexColor);
-        const { palettes } = themeFromSourceColor(intColor);
-        const tones = {};
-        for (const [key, palette] of Object.entries(palettes)) {
-            const tonelevel = {};
-            for (const level of LEVELS) {
-                tonelevel[level] = hexFromArgb(palette.tone(level));
-            }
-            tones[key] = tonelevel;
-        }
-        setTonalPalette(tones);
-        localStorage.setItem(TONAL_PALETTE_KEY, JSON.stringify(tones));
-    };
-    return [tonalPalette, generatePalette];
-};

package/dist/src/providers/ThemeSchemeProvider.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ThemeScheme } from '../tokens/ThemeScheme';
-export type ThemeSchemeContextType = {
-    generateScheme: (hexColor: string) => void;
-    themeScheme: ThemeScheme;
-};
-export type ThemeSchemeProviderProps = {
-    children?: React.ReactNode;
-};
-export declare const ThemeSchemeContext: import("react").Context<ThemeSchemeContextType>;
-declare const ThemeSchemeProvider: FC<ThemeSchemeProviderProps>;
-export default ThemeSchemeProvider;

package/dist/src/providers/ThemeSchemeProvider.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { createContext, useCallback, useLayoutEffect, useMemo, useState } from 'react';
-import { ThemeSchemeDefault } from '../tokens/ThemeScheme';
-import { useTonalPalette } from '../hooks/useTonalPalette';
-import { generateDesignTokens } from '../utils/generateTokens';
-export const ThemeSchemeContext = createContext({
-    generateScheme: () => { },
-    themeScheme: ThemeSchemeDefault,
-});
-const ThemeSchemeProvider = ({ children }) => {
-    const [tonalPalette, generatePalette] = useTonalPalette();
-    const [themeScheme, setThemeScheme] = useState(ThemeSchemeDefault);
-    useLayoutEffect(() => {
-        const lightTokens = generateDesignTokens('light', tonalPalette);
-        const darkTokens = generateDesignTokens('dark', tonalPalette);
-        setThemeScheme({
-            light: lightTokens,
-            dark: darkTokens,
-            tones: tonalPalette,
-        });
-    }, [tonalPalette]);
-    const generateScheme = useCallback((hexColor) => {
-        generatePalette(hexColor);
-    }, [generatePalette]);
-    const value = useMemo(() => ({ generateScheme, themeScheme }), [generateScheme, themeScheme]);
-    return _jsx(ThemeSchemeContext.Provider, { value: value, children: children });
-};
-export default ThemeSchemeProvider;

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

@@ -1,10 +0,0 @@
-import { Tone } from './Tone';
-export type TonalPalette = {
-    primary: Tone;
-    secondary: Tone;
-    tertiary: Tone;
-    neutral: Tone;
-    neutralVariant: Tone;
-    error: Tone;
-};
-export declare const TonalPaletteDefault: TonalPalette;

package/dist/src/tokens/TonalPalette.js

@@ -1,10 +0,0 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { ErrorDefault, NeutralDefault, NeutralVariantDefault, PrimaryDefault, SecondaryDefault, TertiaryDefault, } from './Tone';
-export const TonalPaletteDefault = {
-    primary: PrimaryDefault,
-    secondary: SecondaryDefault,
-    tertiary: TertiaryDefault,
-    neutral: NeutralDefault,
-    neutralVariant: NeutralVariantDefault,
-    error: ErrorDefault,
-};

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

@@ -1,4 +0,0 @@
-import { ThemeMode } from '../tokens/ThemeMode';
-import { ThemeColorTokens } from '../tokens/ThemeColorTokens';
-import { TonalPalette } from '../tokens/TonalPalette';
-export declare const generateDesignTokens: (themeMode: ThemeMode, tonalPalette: TonalPalette) => ThemeColorTokens;