diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:13:10 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:14:10 -0300 |
commit | 2150f3d96b25772dd608e245cd3508f857478c5b (patch) | |
tree | 7f449ec4df0f90c46774d1934ebee2eabb52cec7 /packages/taler-wallet-webextension/src/mui/style.tsx | |
parent | 60a50babd14de6efbe16d9b427af85acc9da76e9 (diff) | |
download | wallet-core-2150f3d96b25772dd608e245cd3508f857478c5b.tar.xz |
grid implementation
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/style.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/style.tsx | 78 |
1 files changed, 77 insertions, 1 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index 84b0538be..e2af05c49 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -22,6 +22,14 @@ export function pxToRem(size: number): string { return `${(size / htmlFontSize) * coef}rem`; } +export interface Spacing { + (): string; + (value: number): string; + (topBottom: number, rightLeft: number): string; + (top: number, rightLeft: number, bottom: number): string; + (top: number, right: number, bottom: number, left: number): string; +} + export const theme = createTheme(); export const ripple = css` @@ -117,11 +125,78 @@ function createTheme() { const shadows = createAllShadows(); const transitions = createTransitions({}); const breakpoints = createBreakpoints({}); + const spacing = createSpacing(); const shape = { - borderRadius: css` + roundBorder: css` border-radius: 4px; `, + squareBorder: css` + border-radius: 0px; + `, + circularBorder: css` + border-radius: 50%; + `, }; + + ///////////////////// + ///////////////////// SPACING + ///////////////////// + + function createUnaryUnit(theme: { spacing: number }, defaultValue: number) { + const themeSpacing = theme.spacing || defaultValue; + + if (typeof themeSpacing === "number") { + return (abs: number | string) => { + if (typeof abs === "string") { + return abs; + } + + return themeSpacing * abs; + }; + } + + if (Array.isArray(themeSpacing)) { + return (abs: number | string) => { + if (typeof abs === "string") { + return abs; + } + + return themeSpacing[abs]; + }; + } + + if (typeof themeSpacing === "function") { + return themeSpacing; + } + + return (a: string | number) => ""; + } + + function createUnarySpacing(theme: { spacing: number }) { + return createUnaryUnit(theme, 8); + } + + function createSpacing(spacingInput: number = 8): Spacing { + // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. + // Smaller components, such as icons, can align to a 4dp grid. + // https://material.io/design/layout/understanding-layout.html#usage + const transform = createUnarySpacing({ + spacing: spacingInput, + }); + + const spacing = (...argsInput: ReadonlyArray<number | string>): string => { + const args = argsInput.length === 0 ? [1] : argsInput; + + return args + .map((argument) => { + const output = transform(argument); + return typeof output === "number" ? `${output}px` : output; + }) + .join(" "); + }; + + return spacing; + } ///////////////////// ///////////////////// BREAKPOINTS ///////////////////// @@ -691,6 +766,7 @@ function createTheme() { shape, transitions, breakpoints, + spacing, pxToRem, }; } |