@webpros/mui-theme 0.1.6 → 0.3.0

package/dist/src/components/surfaces/Accordion/AccordionDetails.theme.js

@@ -0,0 +1,19 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+const BORDER_RADIUS = 6;
+export const getAccordionDetails = (theme) => {
+    const { colors } = theme;
+    return {
+        MuiAccordionDetails: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: colors.schemes.surfaces.surfaceContainerLow,
+                    color: colors.schemes.surfaces.onSurfaceVariant,
+                    padding: '0 16px 16px 18px',
+                    borderBottomLeftRadius: BORDER_RADIUS,
+                    borderBottomRightRadius: BORDER_RADIUS,
+                },
+            },
+        },
+    };
+};
+export default {};

package/dist/src/components/surfaces/Accordion/AccordionSummary.theme.d.ts

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

package/dist/src/components/surfaces/Accordion/AccordionSummary.theme.js

@@ -0,0 +1,37 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+const BORDER_RADIUS = 6;
+export const getAccordionSummary = (theme) => {
+    const { colors, typography } = theme;
+    return {
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: Object.assign(Object.assign({ backgroundColor: colors.schemes.surfaces.surfaceContainerLow, color: colors.schemes.surfaces.onSurfaceVariant, minHeight: 'auto', padding: '3px 16px 3px 18px', borderRadius: BORDER_RADIUS }, typography.BodyMedium), { '& .MuiTypography-root:first-of-type': Object.assign({}, typography.BodyMediumProminent), '&.Mui-expanded': {
+                        minHeight: 'auto',
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
+                    } }),
+                content: {
+                    margin: '8px 0',
+                    gap: 0,
+                    flex: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    '& .MuiTypography-root': {
+                        flex: 1,
+                    },
+                    '&.Mui-expanded': {
+                        margin: '8px 0',
+                    },
+                },
+                expandIconWrapper: {
+                    color: colors.schemes.surfaces.onSurfaceVariant,
+                    marginLeft: 'auto',
+                    '&.Mui-expanded': {
+                        transform: 'rotate(180deg)',
+                    },
+                },
+            },
+        },
+    };
+};
+export default {};

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

@@ -1 +1,3 @@
 export * from './Accordion.theme';
+export * from './AccordionSummary.theme';
+export * from './AccordionDetails.theme';

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

@@ -1,2 +1,4 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export * from './Accordion.theme';
+export * from './AccordionSummary.theme';
+export * from './AccordionDetails.theme';

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

@@ -67,7 +67,7 @@ export const getCard = (theme) => {
                     },
                 },
                 {
-                    props: { variant: 'outlined' },
+                    props: { variant: 'flat' },
                     style: {
                         boxShadow: theme.shadows[0],
                         backgroundColor: palette.surface.main,

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

@@ -1,7 +1,22 @@
-import { Theme, ComponentsOverrides } from '@mui/material';
+import { Theme, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Paper' {
+    interface PaperOwnProps extends ComponentWithViewContextOwnProps {
+    }
+    interface PaperPropsVariantOverrides {
+        flat: true;
+        elevation: true;
+        outlined: false;
+    }
+}
 interface M3Paper {
     MuiPaper: {
+        defaultProps?: {
+            variant?: 'flat' | 'elevation';
+            elevation?: number;
+        };
         styleOverrides?: ComponentsOverrides<Theme>['MuiPaper'];
+        variants?: ComponentsVariants<Theme>['MuiPaper'];
     };
 }
 export declare const getPaper: (theme: Theme) => M3Paper;

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

@@ -1,13 +1,27 @@
+import { getPaperTokens } from './Paper.tokens';
+import { PaperVariantsNames, PaperElevationLevels } from './Paper.variants';
 export const getPaper = (theme) => {
-    const { palette } = theme;
+    const variants = [];
+    PaperVariantsNames.forEach((variant) => {
+        PaperElevationLevels.forEach((elevation) => {
+            const tokens = getPaperTokens(theme, variant, elevation);
+            const tokensInverse = getPaperTokens(theme, variant, elevation, 'inverse');
+            variants.push({
+                props: { variant, elevation },
+                style: Object.assign({ backgroundColor: tokens.backgroundColor, borderRadius: tokens.borderRadius }, (tokens.boxShadow
+                    ? { boxShadow: tokens.boxShadow }
+                    : { boxShadow: 'none' })),
+            }, {
+                props: { variant, elevation, viewContext: 'inverse' },
+                style: Object.assign({ backgroundColor: tokensInverse.backgroundColor, borderRadius: tokensInverse.borderRadius }, (tokensInverse.boxShadow
+                    ? { boxShadow: tokensInverse.boxShadow }
+                    : { boxShadow: 'none' })),
+            });
+        });
+    });
     return {
         MuiPaper: {
-            styleOverrides: {
-                root: {
-                    backgroundColor: palette.surfaceContainerLowest.main,
-                    borderRadius: 16,
-                },
-            },
+            variants,
         },
     };
 };

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

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material';
+import type { PaperVariantName, PaperElevationLevel } from './Paper.variants';
+export type PaperTokens = {
+    backgroundColor: string;
+    borderRadius: number;
+    boxShadow?: string;
+};
+export declare const getPaperTokens: (theme: Theme, variant: PaperVariantName, elevation: PaperElevationLevel, viewContext?: "default" | "inverse") => PaperTokens;

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

@@ -0,0 +1,50 @@
+import { shadowCssValues } from '../../../tokens/shadows';
+export const getPaperTokens = (theme, variant, elevation, viewContext = 'default') => {
+    const { colors } = theme;
+    const isInverse = viewContext === 'inverse';
+    if (variant === 'flat') {
+        const backgroundColors = isInverse
+            ? [
+                colors.inverseSchemes.surfaces.surfaceContainerLowest,
+                colors.inverseSchemes.surfaces.surfaceContainerLow,
+                colors.inverseSchemes.surfaces.surfaceContainer,
+                colors.inverseSchemes.surfaces.surfaceContainerHigh,
+            ]
+            : [
+                colors.schemes.surfaces.surfaceContainerLowest,
+                colors.schemes.surfaces.surfaceContainerLow,
+                colors.schemes.surfaces.surfaceContainer,
+                colors.schemes.surfaces.surfaceContainerHigh,
+            ];
+        const borderRadii = [17, 10, 6, 4];
+        return {
+            backgroundColor: backgroundColors[elevation],
+            borderRadius: borderRadii[elevation],
+        };
+    }
+    if (variant === 'elevation') {
+        const backgroundColors = isInverse
+            ? [
+                colors.inverseSchemes.surfaces.elevatedContainerLowest,
+                colors.inverseSchemes.surfaces.elevatedContainerLow,
+                colors.inverseSchemes.surfaces.elevatedContainer,
+                colors.inverseSchemes.surfaces.elevatedContainerHigh,
+            ]
+            : [
+                colors.schemes.surfaces.elevatedContainerLowest,
+                colors.schemes.surfaces.elevatedContainerLow,
+                colors.schemes.surfaces.elevatedContainer,
+                colors.schemes.surfaces.elevatedContainerHigh,
+            ];
+        const shadowTokenNames = ['Shadows-1', 'Shadows-2', 'Shadows-3', 'Shadows-4'];
+        return {
+            backgroundColor: backgroundColors[elevation],
+            borderRadius: 10,
+            boxShadow: shadowCssValues[shadowTokenNames[elevation]],
+        };
+    }
+    return {
+        backgroundColor: colors.schemes.surfaces.surfaceContainerLowest,
+        borderRadius: 17,
+    };
+};

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

@@ -0,0 +1,4 @@
+export declare const PaperVariantsNames: readonly ["flat", "elevation"];
+export type PaperVariantName = (typeof PaperVariantsNames)[number];
+export declare const PaperElevationLevels: readonly [0, 1, 2, 3];
+export type PaperElevationLevel = (typeof PaperElevationLevels)[number];

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

@@ -0,0 +1,3 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const PaperVariantsNames = ['flat', 'elevation'];
+export const PaperElevationLevels = [0, 1, 2, 3];

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Theme, ComponentsProps } from '@mui/material';
+interface M3Popover {
+    MuiPopover: {
+        defaultProps?: ComponentsProps['MuiPopover'];
+    };
+}
+export declare const getPopover: (_theme: Theme) => M3Popover;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,14 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getPopover = (_theme) => {
+    return {
+        MuiPopover: {
+            defaultProps: {
+                PaperProps: {
+                    elevation: 3,
+                    variant: 'elevation',
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+export const getBackdrop = (theme) => {
+    const { colors } = theme;
+    return {
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: colors.stateLayers.surfaces.scrim.opacity48,
+                    '&.MuiBackdrop-invisible': {
+                        backgroundColor: 'transparent',
+                    },
+                },
+            },
+        },
+    };
+};
+export default {};

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

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

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

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

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

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

package/dist/src/icons/index.js

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

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

@@ -6,9 +6,8 @@ export type ThemeModeContextType = {
 };
 export type ThemeModeProviderProps = {
     children?: React.ReactNode;
-    mode?: ThemeMode;
 };
 export declare const ThemeModeContext: import("react").Context<ThemeModeContextType>;
-declare const ThemeModeProvider: ({ children, mode }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
+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

@@ -7,9 +7,9 @@ export const ThemeModeContext = createContext({
     toggleTheme: () => { },
     setThemeMode: () => { },
 });
-const ThemeModeProvider = ({ children, mode }) => {
+const ThemeModeProvider = ({ children }) => {
     const [themeMode, toggleTheme, setThemeMode] = useThemeMode();
-    const value = useMemo(() => ({ themeMode: mode || themeMode, toggleTheme, setThemeMode }), [mode, themeMode, toggleTheme, setThemeMode]);
+    const value = useMemo(() => ({ themeMode, toggleTheme, setThemeMode }), [themeMode, toggleTheme, setThemeMode]);
     return _jsx(ThemeModeContext.Provider, { value: value, children: children });
 };
 export default ThemeModeProvider;

package/dist/src/providers/WebProsMuiThemeProvider.js

@@ -1,5 +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, { mode: themeMode, children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, children: children }) }));
+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

@@ -1,3 +1,4 @@
+import '../utils/getMUIThemeCustoimzationType';
 import { ThemeMode } from '../tokens/ThemeMode';
 import { Localization } from '@mui/material/locale';
 type WebProsThemeProps = {

package/dist/src/providers/WebProsTheme.js

@@ -4,22 +4,28 @@ 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 '../utils/getMUIThemeCustoimzationType';
 import { getMUIPalette } from '../utils/getMUIPalette';
 import { getMUIComponents } from '../utils/getMUIComponents';
 import { enUS } from '@mui/material/locale';
 import { patchMUIShadows } from '../utils/patchMUIShadows';
+import { ThemeSchemeDefault } from '../tokens/ThemeScheme';
+import { getMUITypography } from '../utils/getMUITypography';
 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 typography = getMUITypography();
     const webprosTheme = useMemo(() => {
-        const muiPalette = getMUIPalette(themeMode, themeScheme);
-        let theme = createTheme(muiPalette, localization);
+        const muiPalette = getMUIPalette(themeMode, ThemeSchemeDefault);
+        let theme = createTheme({
+            palette: muiPalette.palette,
+            colors: muiPalette.colors,
+            typography: Object.assign(Object.assign({}, getMUITypography()), { fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", fontSize: 14, fontWeightLight: 300, fontWeightRegular: 400, fontWeightMedium: 500, fontWeightBold: 700, h1: Object.assign({}, typography.DisplayLarge), h2: Object.assign({}, typography.DisplayMedium), h3: Object.assign({}, typography.DisplaySmall), h4: Object.assign({}, typography.HeadlineLarge), h5: Object.assign({}, typography.HeadlineMedium), h6: Object.assign({}, typography.HeadlineSmall), subtitle1: Object.assign({}, typography.TitleLarge), subtitle2: Object.assign({}, typography.TitleMedium), body1: Object.assign({}, typography.BodyMedium), body2: Object.assign({}, typography.BodySmall), button: Object.assign({}, typography.HeadlineLarge), caption: Object.assign({}, typography.BodySmall), overline: Object.assign({}, typography.LabelSmall) }),
+        }, localization);
         patchMUIShadows(theme);
         theme = deepmerge(theme, getMUIComponents(theme, themeMode));
         return theme;
-    }, [themeMode, themeScheme, localization]);
+    }, [themeMode, localization]);
     return (_jsxs(ThemeProvider, { theme: webprosTheme, children: [_jsx(CssBaseline, { enableColorScheme: true }), children] }));
 };
 export default WebProsTheme;

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

@@ -0,0 +1,6 @@
+export declare const rippleEnterKeyframe: {
+    name: string;
+    styles: string;
+    anim: 1;
+    toString: () => string;
+} & string;

package/dist/src/shared/rippleEnterKeyframe.js

@@ -0,0 +1,12 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { keyframes } from '@mui/material';
+export const rippleEnterKeyframe = keyframes `
+    0% {
+        transform: scale(0);
+        opacity: 0.3;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+`;

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

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

package/dist/src/shared/viewContext/index.js

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

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

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

package/dist/src/shared/viewContext/viewContext.js

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

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

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

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

@@ -1,13 +1,10 @@
 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 Grid from '@mui/material/Grid';
 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: {
+import { LegacyDarkTokensDefault } from '../tokens/legacyColors';
+export const AdditionalColorPalette = () => {
+    return (_jsx(Grid, { container: true, rowSpacing: 2, direction: 'column', children: Object.entries(LegacyDarkTokensDefault.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],

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

@@ -1,75 +1,73 @@
 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 Grid from '@mui/material/Grid';
 import { ColorItem } from '@storybook/addon-docs/blocks';
+import { LegacyDarkTokensDefault, LegacyLightTokensDefault, } from '../tokens/legacyColors';
 export const CustomColorPalette = ({ mode }) => {
-    const { themeScheme } = useContext(ThemeSchemeContext);
     const modeTitle = mode === 'light' ? 'Light Theme' : 'Dark Theme';
-    const theme = themeScheme[mode];
+    const palette = mode === 'light' ? LegacyLightTokensDefault : LegacyDarkTokensDefault;
     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,
+                        'theme.primary': palette.primary,
+                        'theme.onPrimary': palette.onPrimary,
+                        'theme.primaryContainer': palette.primaryContainer,
+                        'theme.onPrimaryContainer': palette.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,
+                        'theme.secondary': palette.secondary,
+                        'theme.onSecondary': palette.onSecondary,
+                        'theme.secondaryContainer': palette.secondaryContainer,
+                        'theme.onSecondaryContainer': palette.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,
+                        'theme.tertiary': palette.tertiary,
+                        'theme.onTertiary': palette.onTertiary,
+                        'theme.tertiaryContainer': palette.tertiaryContainer,
+                        'theme.onTertiaryContainer': palette.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,
+                        'theme.error': palette.error,
+                        'theme.onError': palette.onError,
+                        'theme.errorContainer': palette.errorContainer,
+                        'theme.onErrorContainer': palette.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,
+                        'theme.surfaceDim': palette.surfaceDim,
+                        'theme.surface': palette.surface,
+                        'theme.surfaceBright': palette.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,
+                        'theme.surfaceContainerLowest ': palette.surfaceContainerLowest,
+                        'theme.surfaceContainerLow': palette.surfaceContainerLow,
+                        'theme.surfaceContainer': palette.surfaceContainer,
+                        'theme.surfaceContainerHigh': palette.surfaceContainerHigh,
+                        'theme.surfaceContainerHighest': palette.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,
+                        'theme.onSurface ': palette.onSurface,
+                        'theme.onSurfaceVariant ': palette.onSurfaceVariant,
+                        'theme.outline ': palette.outline,
+                        'theme.outlineVariant ': palette.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,
+                        'theme.inverseSurface ': palette.inverseSurface,
+                        'theme.inversePrimary ': palette.inversePrimary,
+                        'theme.inverseOnSurface ': palette.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,
+                        'theme.shadow ': palette.shadow,
+                        'theme.scrim ': palette.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,
+                        'theme.info': palette.info,
+                        'theme.onInfo': palette.onInfo,
+                        'theme.infoContainer': palette.infoContainer,
+                        'theme.onInfoContainer': palette.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,
+                        'theme.warning': palette.warning,
+                        'theme.onWarning': palette.onWarning,
+                        'theme.warningContainer': palette.warningContainer,
+                        'theme.onWarningContainer': palette.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,
+                        'theme.success': palette.success,
+                        'theme.onSuccess': palette.onSuccess,
+                        'theme.successContainer': palette.successContainer,
+                        'theme.onSuccessContainer': palette.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,
+                        'theme.undefined': palette.undefined,
                     } }) }), _jsx("h3", { id: `${mode}-supportive`, children: 'Supportive' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Supportive", subtitle: "", colors: {
-                        'theme.supportive': theme.supportive,
+                        'theme.supportive': palette.supportive,
                     } }) }), _jsx("h3", { id: `${mode}-divider`, children: 'Outline' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Outline", subtitle: "", colors: {
-                        'theme.outline': theme.outline,
+                        'theme.outline': palette.outline,
                     } }) })] }));
 };