@webpros/mui-theme 0.1.2 → 0.1.3

package/dist/src/components/surfaces/Card/Card.theme.js

@@ -0,0 +1,100 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { alpha, } from '@mui/material';
+import { StateLayer, getStateLayerColor } from '../../../utils/getStateLayerColor';
+export const getCard = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '20px',
+                    padding: '10px 6px',
+                },
+            },
+            variants: [
+                {
+                    props: { variant: 'elevation' },
+                    style: {
+                        boxShadow: theme.shadows[1],
+                        backgroundColor: palette.surfaceContainerLow.main,
+                        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+                            duration: theme.transitions.duration.short,
+                        }),
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerLow.main, palette.primary.main),
+                            boxShadow: theme.shadows[2],
+                        },
+                        '&:focus': {
+                            boxShadow: theme.shadows[1],
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerLow.main, palette.primary.main),
+                        },
+                        '&:active': {
+                            boxShadow: theme.shadows[1],
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerLow.main, palette.primary.main),
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.surfaceContainerLow.main, 0.38),
+                            // color: palette.surfaceVariant.main,
+                            boxShadow: theme.shadows[0],
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled' },
+                    style: {
+                        boxShadow: theme.shadows[0],
+                        backgroundColor: palette.surfaceContainerHighest.main,
+                        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+                            duration: theme.transitions.duration.short,
+                        }),
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerHighest.main, palette.primary.main),
+                            boxShadow: theme.shadows[1],
+                        },
+                        '&:focus': {
+                            boxShadow: theme.shadows[0],
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerHighest.main, palette.primary.main),
+                        },
+                        '&:active': {
+                            boxShadow: theme.shadows[1],
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerHighest.main, palette.primary.main),
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.surfaceContainerHighest.main, 0.38),
+                            // color: palette.surfaceVariant.main,
+                            boxShadow: theme.shadows[1],
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'outlined' },
+                    style: {
+                        boxShadow: theme.shadows[0],
+                        backgroundColor: palette.surface.main,
+                        borderColor: palette.outline.main,
+                        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+                            duration: theme.transitions.duration.short,
+                        }),
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
+                            boxShadow: theme.shadows[1],
+                        },
+                        '&:focus': {
+                            boxShadow: theme.shadows[0],
+                            background: getStateLayerColor(StateLayer.Focus, palette.surface.main, palette.primary.main),
+                        },
+                        '&:active': {
+                            boxShadow: theme.shadows[2],
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerHighest.main, palette.primary.main),
+                        },
+                        '&.Mui-disabled': {
+                            borderColor: alpha(palette.surfaceContainerHighest.main, 0.12),
+                            boxShadow: theme.shadows[0],
+                        },
+                    },
+                },
+            ],
+        },
+    };
+};
+export default {};

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

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

package/dist/src/components/surfaces/Card/index.js

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

package/dist/src/components/surfaces/Paper/Paper.d.ts

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

package/dist/src/components/surfaces/Paper/Paper.js

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

package/dist/src/components/surfaces/Paper/Paper.theme.d.ts

@@ -0,0 +1,9 @@
+import { Theme, ComponentsOverrides } from '@mui/material';
+interface M3Paper {
+    MuiPaper: {
+        styleOverrides?: ComponentsOverrides<Theme>['MuiPaper'];
+    };
+}
+export declare const getPaper: (theme: Theme) => M3Paper;
+declare const _default: {};
+export default _default;

package/dist/src/components/surfaces/Paper/Paper.theme.js

@@ -0,0 +1,14 @@
+export const getPaper = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: palette.surfaceContainerLowest.main,
+                    borderRadius: 16,
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

package/dist/src/components/surfaces/Paper/index.js

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

package/dist/src/components/utils/CssBaseline/CssBaseline.d.ts

@@ -0,0 +1,4 @@
+import { CssBaseline as MuiCssBaseline } from '@mui/material';
+import './CssBaseline.theme';
+export declare const CssBaseline: typeof MuiCssBaseline;
+export type CssBaselineComponentType = typeof CssBaseline;

package/dist/src/components/utils/CssBaseline/CssBaseline.js

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

package/dist/src/components/utils/CssBaseline/CssBaseline.theme.d.ts

@@ -0,0 +1,11 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+interface M3CssBaseline {
+    MuiCssBaseline: {
+        defaultProps?: ComponentsProps['MuiCssBaseline'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiCssBaseline'];
+        variants?: ComponentsVariants['MuiCssBaseline'];
+    };
+}
+export declare const getCssBaseline: (_theme: Theme) => M3CssBaseline;
+declare const _default: {};
+export default _default;

package/dist/src/components/utils/CssBaseline/CssBaseline.theme.js

@@ -0,0 +1,8 @@
+export const getCssBaseline = (_theme) => ({
+    MuiCssBaseline: {
+        defaultProps: {
+            enableColorScheme: true,
+        },
+    },
+});
+export default {};

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

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

package/dist/src/components/utils/CssBaseline/index.js

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

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

@@ -0,0 +1,3 @@
+import { ThemeMode } from '../tokens/ThemeMode';
+export declare const THEME_MODE_KEY = "ThemeModeKey";
+export declare const useThemeMode: () => readonly [ThemeMode, () => void, import("react").Dispatch<import("react").SetStateAction<ThemeMode>>];

package/dist/src/hooks/useThemeMode.js

@@ -0,0 +1,20 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useState } from 'react';
+import { useMediaQuery } from '@mui/material';
+export const THEME_MODE_KEY = 'ThemeModeKey';
+export const useThemeMode = () => {
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    const [themeMode, setThemeMode] = useState(() => {
+        const saved = localStorage.getItem(THEME_MODE_KEY);
+        if (saved) {
+            return JSON.parse(saved);
+        }
+        return prefersDarkMode ? 'dark' : 'light';
+    });
+    const toggleTheme = () => {
+        const value = themeMode === 'light' ? 'dark' : 'light';
+        setThemeMode(value);
+        localStorage.setItem(THEME_MODE_KEY, JSON.stringify(value));
+    };
+    return [themeMode, toggleTheme, setThemeMode];
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,32 @@
+// 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/index.d.ts

@@ -0,0 +1,5 @@
+export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeProvider';
+export { useThemeModeContext } from './providers/ThemeModeProvider';
+export * from './utils';
+export * from './tokens';
+export * from './components';

package/dist/src/index.js

@@ -0,0 +1,7 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeProvider';
+export { useThemeModeContext } from './providers/ThemeModeProvider';
+export * from './utils';
+export * from './tokens';
+// Only used for exporting types.
+export * from './components';

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

@@ -0,0 +1,13 @@
+import { ThemeMode } from '../tokens/ThemeMode';
+export type ThemeModeContextType = {
+    themeMode: ThemeMode;
+    toggleTheme: () => void;
+    setThemeMode: (mode: ThemeMode) => void;
+};
+export type ThemeModeProviderProps = {
+    children?: React.ReactNode;
+};
+export declare const ThemeModeContext: import("react").Context<ThemeModeContextType>;
+declare const ThemeModeProvider: ({ children }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ThemeModeProvider;
+export declare const useThemeModeContext: () => ThemeModeContextType;

package/dist/src/providers/ThemeModeProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { createContext, useContext, useMemo } from 'react';
+import { useThemeMode } from '../hooks/useThemeMode';
+export const ThemeModeContext = createContext({
+    themeMode: 'light',
+    toggleTheme: () => { },
+    setThemeMode: () => { },
+});
+const ThemeModeProvider = ({ children }) => {
+    const [themeMode, toggleTheme, setThemeMode] = useThemeMode();
+    const value = useMemo(() => ({ themeMode, toggleTheme, setThemeMode }), [themeMode, toggleTheme, setThemeMode]);
+    return _jsx(ThemeModeContext.Provider, { value: value, children: children });
+};
+export default ThemeModeProvider;
+export const useThemeModeContext = () => useContext(ThemeModeContext);

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,29 @@
+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/providers/WebProsMuiThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import { Localization } from '@mui/material/locale';
+import { ThemeMode } from '../tokens/ThemeMode';
+type WebProsProps = {
+    children?: React.ReactNode;
+    themeMode?: ThemeMode;
+    localization?: Localization;
+};
+declare const WebProsMuiThemeProvider: ({ children, localization, themeMode }: WebProsProps) => import("react/jsx-runtime").JSX.Element;
+export default WebProsMuiThemeProvider;

package/dist/src/providers/WebProsMuiThemeProvider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ThemeModeProvider from './ThemeModeProvider';
+import WebProsTheme from './WebProsTheme';
+const WebProsMuiThemeProvider = ({ children, localization, themeMode }) => (_jsx(ThemeModeProvider, { children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, children: children }) }));
+export default WebProsMuiThemeProvider;

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

@@ -0,0 +1,9 @@
+import { ThemeMode } from '../tokens/ThemeMode';
+import { Localization } from '@mui/material/locale';
+type WebProsThemeProps = {
+    children?: React.ReactNode;
+    mode?: ThemeMode;
+    localization?: Localization;
+};
+export declare const WebProsTheme: ({ children, mode, localization }: WebProsThemeProps) => import("react/jsx-runtime").JSX.Element;
+export default WebProsTheme;

package/dist/src/providers/WebProsTheme.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useContext, useMemo } from 'react';
+import { CssBaseline, createTheme, ThemeProvider } from '@mui/material';
+import { deepmerge } from '@mui/utils';
+import { ThemeModeContext } from '../providers/ThemeModeProvider';
+import { ThemeSchemeContext } from '../providers/ThemeSchemeProvider';
+import { getMUIPalette } from '../utils/getMUIPalette';
+import { getMUIComponents } from '../utils/getMUIComponents';
+import { enUS } from '@mui/material/locale';
+import { patchMUIShadows } from '../utils/patchMUIShadows';
+export const WebProsTheme = ({ children, mode, localization = enUS }) => {
+    const themeModeContext = useContext(ThemeModeContext);
+    const { themeScheme } = useContext(ThemeSchemeContext);
+    const themeMode = mode !== null && mode !== void 0 ? mode : themeModeContext.themeMode;
+    const webprosTheme = useMemo(() => {
+        const muiPalette = getMUIPalette(themeMode, themeScheme);
+        let theme = createTheme(muiPalette, localization);
+        patchMUIShadows(theme);
+        theme = deepmerge(theme, getMUIComponents(theme, themeMode));
+        return theme;
+    }, [themeMode, themeScheme, localization]);
+    return (_jsxs(ThemeProvider, { theme: webprosTheme, children: [_jsx(CssBaseline, { enableColorScheme: true }), children] }));
+};
+export default WebProsTheme;

package/dist/src/style/additional-color-palette.d.ts

@@ -0,0 +1,3 @@
+export declare const AdditionalColorPalette: ({ mode }: {
+    mode: "light" | "dark";
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useContext } from 'react';
+import Grid from '@mui/material/Grid2/Grid2';
+import { ThemeSchemeContext } from '../providers/ThemeSchemeProvider';
+import { ColorItem } from '@storybook/addon-docs/blocks';
+export const AdditionalColorPalette = ({ mode = 'light' }) => {
+    const { themeScheme } = useContext(ThemeSchemeContext);
+    const theme = themeScheme[mode];
+    return (_jsx(Grid, { container: true, rowSpacing: 2, direction: 'column', children: Object.entries(theme.additionalColors).map(([key, val]) => (_jsxs(_Fragment, { children: [_jsx("h3", { id: key, children: key }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Primary", subtitle: "", colors: {
+                            [`theme.custom.${key}[50]`]: val[50],
+                            [`theme.custom.${key}[100]`]: val[100],
+                            [`theme.custom.${key}[200]`]: val[200],
+                            [`theme.custom.${key}[300]`]: val[300],
+                            [`theme.custom.${key}[400]`]: val[400],
+                            [`theme.custom.${key}[500]`]: val[500],
+                            [`theme.custom.${key}[600]`]: val[600],
+                            [`theme.custom.${key}[700]`]: val[700],
+                            [`theme.custom.${key}[800]`]: val[800],
+                            [`theme.custom.${key}[900]`]: val[900],
+                            [`theme.custom.${key}[A100]`]: val.A100,
+                            [`theme.custom.${key}[A200]`]: val.A200,
+                            [`theme.custom.${key}[A400]`]: val.A400,
+                            [`theme.custom.${key}[A700]`]: val.A700,
+                        } }) })] }))) }));
+};

package/dist/src/style/custom-color-palette.d.ts

@@ -0,0 +1,3 @@
+export declare const CustomColorPalette: ({ mode }: {
+    mode: "light" | "dark";
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useContext } from 'react';
+import Grid from '@mui/material/Grid2/Grid2';
+import { ThemeSchemeContext } from '../providers/ThemeSchemeProvider';
+import { ColorItem } from '@storybook/addon-docs/blocks';
+export const CustomColorPalette = ({ mode }) => {
+    const { themeScheme } = useContext(ThemeSchemeContext);
+    const modeTitle = mode === 'light' ? 'Light Theme' : 'Dark Theme';
+    const theme = themeScheme[mode];
+    return (_jsxs(Grid, { container: true, rowSpacing: 2, direction: 'column', children: [_jsx("h3", { id: modeTitle, children: modeTitle }), _jsx("h3", { id: `${mode}-base-colors`, children: 'Base colors' }), _jsx("h3", { id: `${mode}-primary`, children: 'Primary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Primary", subtitle: "", colors: {
+                        'theme.primary': theme.primary,
+                        'theme.onPrimary': theme.onPrimary,
+                        'theme.primaryContainer': theme.primaryContainer,
+                        'theme.onPrimaryContainer': theme.onPrimaryContainer,
+                    } }) }), _jsx("h3", { id: `${mode}-secondary`, children: 'Secondary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Secondary", subtitle: "", colors: {
+                        'theme.secondary': theme.secondary,
+                        'theme.onSecondary': theme.onSecondary,
+                        'theme.secondaryContainer': theme.secondaryContainer,
+                        'theme.onSecondaryContainer': theme.onSecondaryContainer,
+                    } }) }), _jsx("h3", { id: `${mode}-tertiary`, children: 'Tertiary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Tertiary", subtitle: "", colors: {
+                        'theme.tertiary': theme.tertiary,
+                        'theme.onTertiary': theme.onTertiary,
+                        'theme.tertiaryContainer': theme.tertiaryContainer,
+                        'theme.onTertiaryContainer': theme.onTertiaryContainer,
+                    } }) }), _jsx("h3", { id: `${mode}-error`, children: 'Error' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Error", subtitle: "", colors: {
+                        'theme.error': theme.error,
+                        'theme.onError': theme.onError,
+                        'theme.errorContainer': theme.errorContainer,
+                        'theme.onErrorContainer': theme.onErrorContainer,
+                    } }) }), _jsx("h3", { id: `${mode}-surface`, children: 'Surface' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Surface", subtitle: "", colors: {
+                        'theme.surfaceDim': theme.surfaceDim,
+                        'theme.surface': theme.surface,
+                        'theme.surfaceBright': theme.surfaceBright,
+                    } }) }), _jsx("h3", { id: `${mode}-surface-container`, children: 'Surface container' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Surface container", subtitle: "", colors: {
+                        'theme.surfaceContainerLowest ': theme.surfaceContainerLowest,
+                        'theme.surfaceContainerLow': theme.surfaceContainerLow,
+                        'theme.surfaceContainer': theme.surfaceContainer,
+                        'theme.surfaceContainerHigh': theme.surfaceContainerHigh,
+                        'theme.surfaceContainerHighest': theme.surfaceContainerHighest,
+                    } }) }), _jsx("h3", { id: `${mode}-on-surface`, children: 'On surface' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "On surface", subtitle: "", colors: {
+                        'theme.onSurface ': theme.onSurface,
+                        'theme.onSurfaceVariant ': theme.onSurfaceVariant,
+                        'theme.outline ': theme.outline,
+                        'theme.outlineVariant ': theme.outlineVariant,
+                    } }) }), _jsx("h3", { id: `${mode}-inverse`, children: 'Inverse' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Inverse", subtitle: "", colors: {
+                        'theme.inverseSurface ': theme.inverseSurface,
+                        'theme.inversePrimary ': theme.inversePrimary,
+                        'theme.inverseOnSurface ': theme.inverseOnSurface,
+                    } }) }), _jsx("h3", { id: `${mode}-shadow-and-scrim`, children: 'Shadow and Scrim' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Shadow and Scrim", subtitle: "", colors: {
+                        'theme.shadow ': theme.shadow,
+                        'theme.scrim ': theme.scrim,
+                    } }) }), _jsx("h3", { id: `${mode}-custom-colors`, children: 'Custom state colors' }), _jsx("h3", { id: `${mode}-info`, children: 'Info' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Info", subtitle: "", colors: {
+                        'theme.info': theme.info,
+                        'theme.onInfo': theme.onInfo,
+                        'theme.infoContainer': theme.infoContainer,
+                        'theme.onInfoContainer': theme.onInfoContainer,
+                    } }) }), _jsx("h3", { id: `${mode}-warning`, children: 'Warning' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Warning", subtitle: "", colors: {
+                        'theme.warning': theme.warning,
+                        'theme.onWarning': theme.onWarning,
+                        'theme.warningContainer': theme.warningContainer,
+                        'theme.onWarningContainer': theme.onWarningContainer,
+                    } }) }), _jsx("h3", { id: `${mode}-success`, children: 'Success' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Success", subtitle: "", colors: {
+                        'theme.success': theme.success,
+                        'theme.onSuccess': theme.onSuccess,
+                        'theme.successContainer': theme.successContainer,
+                        'theme.onSuccessContainer': theme.onSuccessContainer,
+                    } }) }), _jsx("h3", { id: `${mode}-utility-colors`, children: 'Utility colors' }), _jsx("h3", { id: `${mode}-undefined`, children: 'Undefined' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Undefined", subtitle: "", colors: {
+                        'theme.undefined': theme.undefined,
+                    } }) }), _jsx("h3", { id: `${mode}-supportive`, children: 'Supportive' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Supportive", subtitle: "", colors: {
+                        'theme.supportive': theme.supportive,
+                    } }) }), _jsx("h3", { id: `${mode}-divider`, children: 'Outline' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Outline", subtitle: "", colors: {
+                        'theme.outline': theme.outline,
+                    } }) })] }));
+};

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

@@ -0,0 +1,96 @@
+import { AdditionalColorTone } from './Tone';
+export type AdditionalColors = {
+    red: AdditionalColorTone;
+    pink: AdditionalColorTone;
+    purple: AdditionalColorTone;
+    deepPurple: AdditionalColorTone;
+    indigo: AdditionalColorTone;
+    blue: AdditionalColorTone;
+    lightBlue: AdditionalColorTone;
+    cyan: AdditionalColorTone;
+    teal: AdditionalColorTone;
+    green: AdditionalColorTone;
+    lightGreen: AdditionalColorTone;
+    lime: AdditionalColorTone;
+    yellow: AdditionalColorTone;
+    amber: AdditionalColorTone;
+    orange: AdditionalColorTone;
+    deepOrange: AdditionalColorTone;
+    brown: AdditionalColorTone;
+};
+export type AdditionalColorKey = keyof AdditionalColors;
+export type ThemeColorTokens = {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    errorFixedDim: string;
+    primaryFixed: string;
+    primaryFixedDim: string;
+    onPrimaryFixed: string;
+    onPrimaryFixedVariant: string;
+    secondaryFixed: string;
+    secondaryFixedDim: string;
+    onSecondaryFixed: string;
+    onSecondaryFixedVariant: string;
+    tertiaryFixed: string;
+    tertiaryFixedDim: string;
+    onTertiaryFixed: string;
+    onTertiaryFixedVariant: string;
+    surface: string;
+    onSurface: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    outline: string;
+    outlineVariant: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    shadow: string;
+    scrim: string;
+    surfaceTint: string;
+    background: string;
+    onBackground: string;
+    info: string;
+    onInfo: string;
+    infoContainer: string;
+    onInfoContainer: string;
+    infoFixedDim: string;
+    success: string;
+    onSuccess: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    successFixedDim: string;
+    warning: string;
+    onWarning: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    warningFixedDim: string;
+    undefined: string;
+    onUndefined: string;
+    undefinedContainer: string;
+    onUndefinedContainer: string;
+    supportive: string;
+    additionalColors: AdditionalColors;
+};
+export declare const LightTokensDefault: ThemeColorTokens;
+export declare const DarkTokensDefault: ThemeColorTokens;