diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Paper.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Paper.tsx | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx new file mode 100644 index 000000000..52524380b --- /dev/null +++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx @@ -0,0 +1,63 @@ +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 ( + <div + class={[ + baseStyle, + !square && theme.shape.borderRadius, + borderVariant[variant], + ].join(" ")} + style={{ + "--theme-shadow-elevation": theme.shadows[elevation], + "--gradient-white-elevation": `linear-gradient(${alpha( + "#fff", + getOverlayAlpha(elevation), + )}, ${alpha("#fff", getOverlayAlpha(elevation))})`, + }} + > + {children} + </div> + ); +} + +// 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)); +}; |