aboutsummaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/mui/Paper.tsx
blob: eeb4083d45615b08fb172f63417daff9d8a9c71b (plain)
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));
}