@webpros/mui-theme 0.1.6 → 0.2.0

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

@@ -1,8 +1,16 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-export const getPagination = (theme) => {
-    const { palette: _ } = theme;
+export const getPagination = (_theme) => {
     return {
-        MuiPagination: {},
+        MuiPagination: {
+            defaultProps: {
+                shape: 'rounded',
+            },
+            styleOverrides: {
+                ul: {
+                    gap: 0,
+                },
+            },
+        },
     };
 };
 export default {};

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

@@ -1,25 +1,80 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { alpha } from '@mui/material';
+import { PaginationFirstIcon, PaginationLastIcon, PaginationPreviousIcon, PaginationNextIcon, } from './components';
+// Figma tokens
+const ITEM_SIZE = 34;
+const BORDER_RADIUS = 17;
 export const getPaginationItem = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
+    // Reusable state styles
+    const hoverState = {
+        backgroundColor: colors.stateLayers.surfaces.onSurface.opacity08,
+    };
+    const focusActiveState = {
+        backgroundColor: colors.stateLayers.surfaces.onSurface.opacity12,
+    };
+    const disabledState = {
+        opacity: 0.38,
+        color: colors.schemes.surfaces.onSurfaceVariant,
+    };
+    // Navigation button styles (prev, next, first, last)
+    const navigationButtonStyles = {
+        color: colors.schemes.surfaces.onSurface,
+        '&:hover': hoverState,
+        '&.Mui-focusVisible': focusActiveState,
+        '&:active': focusActiveState,
+        '&.Mui-disabled': disabledState,
+    };
     return {
         MuiPaginationItem: {
-            styleOverrides: {
-                rounded: {
-                    borderRadius: 10,
+            defaultProps: {
+                slots: {
+                    first: PaginationFirstIcon,
+                    last: PaginationLastIcon,
+                    previous: PaginationPreviousIcon,
+                    next: PaginationNextIcon,
                 },
-                page: {
-                    fontWeight: 500,
+            },
+            styleOverrides: {
+                root: {
+                    minWidth: ITEM_SIZE,
+                    height: ITEM_SIZE,
+                    margin: '0 2px',
+                    padding: '7px 6px',
+                    borderRadius: BORDER_RADIUS,
+                    fontSize: 14,
+                    fontWeight: 400,
+                    lineHeight: '20px',
+                    letterSpacing: 0.5,
+                    color: colors.schemes.surfaces.onSurfaceVariant,
+                    '&:hover': hoverState,
+                    '&.Mui-focusVisible': focusActiveState,
+                    '&:active': focusActiveState,
                     '&.Mui-selected': {
-                        backgroundColor: alpha(palette.primary.main, 0.08),
+                        backgroundColor: colors.schemes.base.primaryContainer,
+                        color: colors.schemes.base.onPrimaryContainer,
                         '&:hover': {
-                            backgroundColor: alpha(palette.primary.main, 0.12),
+                            backgroundColor: colors.blendSchemaWithStateLayer('schemes.base.primaryContainer', 'stateLayers.base.onPrimaryContainer.opacity08'),
+                        },
+                        '&.Mui-focusVisible, &:active': {
+                            backgroundColor: colors.blendSchemaWithStateLayer('schemes.base.primaryContainer', 'stateLayers.base.onPrimaryContainer.opacity12'),
                         },
                     },
+                    '&.Mui-disabled': disabledState,
+                },
+                ellipsis: {
+                    minWidth: ITEM_SIZE,
+                    height: ITEM_SIZE,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: colors.schemes.surfaces.onSurfaceVariant,
+                    cursor: 'default',
                     '&:hover': {
-                        backgroundColor: alpha(palette.primary.main, 0.08),
+                        backgroundColor: 'transparent',
                     },
                 },
+                previousNext: navigationButtonStyles,
+                firstLast: navigationButtonStyles,
             },
         },
     };

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

@@ -0,0 +1,4 @@
+export declare const PaginationFirstIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationLastIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationPreviousIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationNextIcon: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { CaretLeftIcon, CaretRightIcon, SkipBackIcon, SkipForwardIcon, } from '@phosphor-icons/react';
+// Navigation icons for PaginationItem
+export const PaginationFirstIcon = () => _jsx(SkipBackIcon, { size: 20 });
+export const PaginationLastIcon = () => _jsx(SkipForwardIcon, { size: 20 });
+export const PaginationPreviousIcon = () => _jsx(CaretLeftIcon, { size: 20 });
+export const PaginationNextIcon = () => _jsx(CaretRightIcon, { size: 20 });

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

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

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

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

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

@@ -1,8 +1,14 @@
-import { Theme, ComponentsOverrides, ComponentsProps } from '@mui/material';
+import { Theme, ComponentsOverrides, ComponentsProps, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Tab' {
+    interface TabOwnProps extends ComponentWithViewContextOwnProps {
+    }
+}
 interface M3Tab {
     MuiTab: {
         defaultProps?: ComponentsProps['MuiTab'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiTab'];
+        variants?: ComponentsVariants['MuiTab'];
     };
 }
 export declare const getTab: (theme: Theme) => M3Tab;

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

@@ -1,18 +1,57 @@
-export const getTab = (theme) => {
-    const { palette } = theme;
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { touchRippleClasses, tabClasses, } from '@mui/material';
+import { rippleEnterKeyframe } from '../../../shared/rippleEnterKeyframe';
+const getStylesByContext = (theme, viewContext) => {
+    const { colors, typography } = theme;
+    const isInverseView = viewContext === 'inverse';
+    const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+    const stateLayersPath = isInverseView ? 'inverseStateLayers' : 'stateLayers';
     return {
-        MuiTab: {
-            styleOverrides: {
-                root: {
-                    textTransform: 'capitalize',
-                    fontSize: '0.875rem',
-                    fontWeight: 500,
-                    lineHeight: '1.25rem',
-                    letterSpacing: '0.006rem',
-                    color: palette.onSurfaceVariant.main,
+        props: { viewContext },
+        style: Object.assign(Object.assign({}, typography.LabelMedium), { textTransform: 'none', color: colors[schemesPath].surfaces.onSurfaceVariant, opacity: 1, padding: '18px 12px', minHeight: 'auto', minWidth: 'auto', borderRadius: 10, '&:hover': {
+                backgroundColor: colors[stateLayersPath].surfaces.onSurface.opacity08,
+                color: colors[schemesPath].surfaces.onSurface,
+            }, '&:focus': {
+                backgroundColor: colors[stateLayersPath].surfaces.onSurface.opacity12,
+                color: colors[schemesPath].surfaces.onSurface,
+            }, '&:active': {
+                backgroundColor: colors[stateLayersPath].surfaces.onSurface.opacity12,
+                color: colors[schemesPath].surfaces.onSurface,
+            }, [`&.${tabClasses.selected}`]: {
+                color: colors[schemesPath].base.primary,
+                '&:hover': {
+                    backgroundColor: colors[stateLayersPath].base.primary.opacity08,
                 },
-            },
-        },
+                '&:focus': {
+                    backgroundColor: colors[stateLayersPath].base.primary.opacity12,
+                },
+                '&:active': {
+                    backgroundColor: colors[stateLayersPath].base.primary.opacity12,
+                },
+                [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                    color: colors[stateLayersPath].base.primary.opacity12,
+                },
+            }, [`&.${tabClasses.disabled}`]: {
+                color: colors[stateLayersPath].surfaces.onSurface.opacity38,
+                opacity: 1,
+            }, [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]: {
+                color: colors[stateLayersPath].surfaces.onSurface.opacity12,
+                opacity: 1,
+                animationName: rippleEnterKeyframe,
+            } }),
     };
 };
+export const getTab = (theme) => ({
+    MuiTab: {
+        styleOverrides: {
+            root: {},
+            icon: {
+                width: 20,
+                height: 20,
+                marginBottom: 4,
+            },
+        },
+        variants: [getStylesByContext(theme), getStylesByContext(theme, 'inverse')],
+    },
+});
 export default {};

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { Theme, ComponentsOverrides, ComponentsProps, ComponentsVariants } from '@mui/material';
+import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
+declare module '@mui/material/Tabs' {
+    interface TabsOwnProps extends ComponentWithViewContextOwnProps {
+    }
+}
+interface M3Tabs {
+    MuiTabs: {
+        defaultProps?: ComponentsProps['MuiTabs'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiTabs'];
+        variants?: ComponentsVariants['MuiTabs'];
+    };
+}
+export declare const getTabs: (theme: Theme) => M3Tabs;
+declare const _default: {};
+export default _default;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { tabsClasses, tabClasses, } from '@mui/material';
+const getStylesByContext = (theme, viewContext) => {
+    const { colors } = theme;
+    const isInverseView = viewContext === 'inverse';
+    const schemesPath = isInverseView ? 'inverseSchemes' : 'schemes';
+    return {
+        props: { viewContext },
+        style: {
+            [`& .${tabsClasses.indicator}Span`]: {
+                width: '100%',
+                backgroundColor: colors[schemesPath].base.primary,
+            },
+        },
+    };
+};
+export const getTabs = (theme) => ({
+    MuiTabs: {
+        defaultProps: {
+            slotProps: {
+                indicator: {
+                    children: _jsx("span", { className: `${tabsClasses.indicator}Span` }),
+                },
+            },
+        },
+        styleOverrides: {
+            root: {
+                [`&.${tabsClasses.vertical}`]: {
+                    [`& .${tabClasses.root}`]: {
+                        padding: '10px 16px 10px 10px',
+                        flexDirection: 'row',
+                        justifyContent: 'flex-start',
+                        textAlign: 'left',
+                        [`& .${tabClasses.icon}`]: {
+                            marginBottom: 0,
+                        },
+                    },
+                    [`& .${tabsClasses.indicator}`]: {
+                        width: 3,
+                        padding: '10px 0',
+                    },
+                },
+            },
+            indicator: {
+                display: 'flex',
+                height: 3,
+                padding: '0 12px',
+                backgroundColor: 'transparent',
+            },
+        },
+        variants: [getStylesByContext(theme), getStylesByContext(theme, 'inverse')],
+    },
+});
+export default {};

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

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

package/dist/src/components/navigation/Tabs/index.js

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

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

@@ -1,39 +1,71 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
+const BORDER_RADIUS = 6;
+const GAP = 8;
 export const getAccordion = (theme) => {
-    const { palette } = theme;
+    const { colors } = theme;
     return {
         MuiAccordion: {
+            defaultProps: {
+                disableGutters: true,
+                square: false,
+            },
             styleOverrides: {
                 root: {
                     boxShadow: 'none',
-                    borderTop: `1px solid ${palette.outlineVariant.main}`,
-                    borderBottom: `1px solid ${palette.outlineVariant.main}`,
-                    borderRadius: 0,
-                    color: palette.onBackground.main,
-                    backgroundColor: 'none',
+                    backgroundColor: 'transparent',
+                    color: colors.schemes.surfaces.onSurfaceVariant,
+                    '&:before': {
+                        display: 'none',
+                    },
+                    borderRadius: BORDER_RADIUS,
+                    '&:not(:last-of-type)': {
+                        borderBottom: `1px solid ${colors.schemes.surfaces.surfaceContainerLowest}`,
+                    },
                     '&:first-of-type': {
-                        borderRadius: 0,
+                        borderTopLeftRadius: BORDER_RADIUS,
+                        borderTopRightRadius: BORDER_RADIUS,
                     },
                     '&:last-of-type': {
+                        borderBottomLeftRadius: BORDER_RADIUS,
+                        borderBottomRightRadius: BORDER_RADIUS,
+                    },
+                    '&:not(:first-of-type):not(:last-of-type)': {
                         borderRadius: 0,
                     },
-                    '&:before': {
-                        backgroundColor: palette.surfaceBright.main,
-                        display: 'none',
+                    '&.Mui-expanded': {
+                        marginTop: GAP,
+                        marginBottom: GAP,
+                        borderBottom: 'none',
+                        '&:first-of-type': {
+                            marginTop: 0,
+                        },
+                        '&:last-of-type': {
+                            marginBottom: 0,
+                        },
+                    },
+                    '&.Mui-expanded + &': {
+                        borderTop: 'none',
                     },
                     '&.Mui-disabled': {
-                        backgroundColor: palette.inverseOnSurface.main,
-                        color: palette.inverseSurface.main,
-                        border: `0px solid ${palette.outlineVariant.main}`,
-                    },
-                    '& .MuiAccordionSummary-root': {
-                        fontSize: theme.typography.fontSize,
-                        fontWeight: 700,
-                        paddingLeft: 2,
-                        paddingRight: 2,
-                    },
-                    '& .MuiAccordionSummary-root > .MuiAccordionSummary-expandIconWrapper ': {
-                        color: palette.onBackground.main,
+                        backgroundColor: colors.schemes.surfaces.surfaceContainerLow,
+                    },
+                    '&:not(:first-of-type):not(:last-of-type) .MuiAccordionSummary-root': {
+                        borderRadius: 0,
+                    },
+                    '&:first-of-type .MuiAccordionSummary-root': {
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
+                    },
+                    '&:last-of-type:not(.Mui-expanded) .MuiAccordionSummary-root': {
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: 0,
+                    },
+                    '&:last-of-type.Mui-expanded .MuiAccordionSummary-root': {
+                        borderRadius: 0,
+                    },
+                    '&:not(:last-of-type) .MuiAccordionDetails-root': {
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: 0,
                     },
                 },
             },

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

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

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];