1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import { css } from "@linaria/core";
import { h, JSX, VNode, ComponentChildren } from "preact";
// eslint-disable-next-line import/extensions
import { alpha } from "./colors/manipulation";
// eslint-disable-next-line import/extensions
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);
}
`;
interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
elevation?: number;
square?: boolean;
variant?: "elevation" | "outlined";
children?: ComponentChildren;
}
export function Paper({
elevation = 1,
square,
variant = "elevation",
children,
...rest
}: Props): VNode {
return (
<div
class={[
baseStyle,
!square && theme.shape.roundBorder,
borderVariant[variant],
].join(" ")}
style={{
"--theme-shadow-elevation": theme.shadows[elevation],
"--gradient-white-elevation": `linear-gradient(${alpha(
"#fff",
getOverlayAlpha(elevation),
)}, ${alpha("#fff", getOverlayAlpha(elevation))})`,
}}
{...rest}
>
{children}
</div>
);
}
// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
function 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));
}
|
