import { css } from "@linaria/core"; import { h, Fragment, VNode, ComponentChildren } from "preact"; import { alpha } from "./colors/manipulation"; import { theme } from "./style"; const borderVariant = { outlined: css` border: 1px solid ${theme.palette.divider}; `, elevation: css` box-shadow: var(--theme-shadow-elevation); `, }; const baseStyle = css` background-color: ${theme.palette.background.paper}; color: ${theme.palette.text.primary}; .theme-dark & { background-image: var(--gradient-white-elevation); } `; export function Paper({ elevation = 1, square, variant = "elevation", children, }: { elevation?: number; square?: boolean; variant?: "elevation" | "outlined"; children?: ComponentChildren; }): VNode { return (
{children}
); } // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61 const getOverlayAlpha = (elevation: number): number => { let alphaValue; if (elevation < 1) { alphaValue = 5.11916 * elevation ** 2; } else { alphaValue = 4.5 * Math.log(elevation + 1) + 2; } return Number((alphaValue / 100).toFixed(2)); };