@furystack/shades-common-components/esm/components/paper.js

Common UI components for FuryStack Shades

import { Shade, createComponent } from '@furystack/shades';
import { cssVariableTheme } from '../services/css-variable-theme.js';
export const Paper = Shade({
    customElementName: 'shade-paper',
    elementBase: HTMLDivElement,
    elementBaseName: 'div',
    css: {
        fontFamily: cssVariableTheme.typography.fontFamily,
        borderRadius: cssVariableTheme.shape.borderRadius.md,
        padding: cssVariableTheme.spacing.md,
        background: cssVariableTheme.background.paper,
        backgroundImage: cssVariableTheme.background.paperImage,
        color: cssVariableTheme.text.primary,
        borderStyle: 'solid',
        borderWidth: cssVariableTheme.shape.borderWidth,
        borderColor: `${cssVariableTheme.action.subtleBorder} ${cssVariableTheme.divider} ${cssVariableTheme.divider} ${cssVariableTheme.action.subtleBorder}`,
        '&[data-elevation="0"]': {
            boxShadow: cssVariableTheme.shadows.none,
        },
        '&[data-elevation="1"]': {
            boxShadow: cssVariableTheme.shadows.sm,
        },
        '&[data-elevation="2"]': {
            boxShadow: cssVariableTheme.shadows.md,
        },
        '&[data-elevation="3"]': {
            boxShadow: cssVariableTheme.shadows.lg,
        },
    },
    render: ({ props, children, useHostProps }) => {
        const { elevation = 1 } = props;
        useHostProps({ 'data-elevation': elevation.toString() });
        return createComponent(createComponent, null, children);
    },
});
//# sourceMappingURL=paper.js.map