ksv741
f6db28defa
Frontend security / security (push) Successful in 10s
Frontend verify / verify (push) Successful in 4m57s
Conventional commits / commits (pull_request) Successful in 28s
Frontend security / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Successful in 5m10s
Repair investment recovery, draft preservation, date validation, currency presentation, accessibility, and route error recovery. Correct Docker and dependency checks and consume explicit income roles.
89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import "./styles.css";
|
|
import {
|
|
type CSSVariablesResolver,
|
|
colorsTuple,
|
|
createTheme,
|
|
getThemeColor,
|
|
type MantinePrimaryShade,
|
|
Modal,
|
|
rem,
|
|
rgba,
|
|
} from "@mantine/core";
|
|
import designTokens from "@wealthledger/tokens/tokens.json";
|
|
|
|
const { color, typography, spacing, radius, shadows, breakpoints } =
|
|
designTokens;
|
|
const mapValues = <T, U>(values: Record<string, T>, convert: (value: T) => U) =>
|
|
Object.fromEntries(
|
|
Object.entries(values).map(([name, value]) => [name, convert(value)]),
|
|
);
|
|
|
|
const colorRoles = mapValues(color.roles, (role) =>
|
|
role.shade === null ? role.color : `${role.color}.${role.shade}`,
|
|
);
|
|
|
|
const theme = createTheme({
|
|
respectReducedMotion: true,
|
|
components: {
|
|
Modal: Modal.extend({
|
|
defaultProps: {
|
|
overlayProps: { blur: 3 },
|
|
transitionProps: {
|
|
transition: "fade-down",
|
|
duration: 220,
|
|
exitDuration: 180,
|
|
timingFunction: "ease-out",
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
primaryColor: color.roles.primary.color,
|
|
primaryShade: color.primaryShade as MantinePrimaryShade,
|
|
defaultRadius: radius.default,
|
|
white: color.base.white,
|
|
black: color.base.black,
|
|
colors: mapValues(color.palettes, colorsTuple),
|
|
fontFamily: typography.fontFamily,
|
|
fontFamilyMonospace: typography.fontFamilyMonospace,
|
|
fontSizes: mapValues(typography.fontSizes, (value) => rem(value)),
|
|
fontWeights: mapValues(typography.fontWeights, String),
|
|
lineHeights: mapValues(typography.lineHeights, String),
|
|
headings: {
|
|
fontFamily: typography.fontFamily,
|
|
fontWeight: String(typography.fontWeights.bold),
|
|
sizes: mapValues(typography.headings, (value) => ({
|
|
fontSize: rem(value.fontSize),
|
|
lineHeight: String(value.lineHeight),
|
|
})),
|
|
},
|
|
spacing: mapValues(spacing.values, (value) => rem(value)),
|
|
radius: mapValues(radius.values, (value) => rem(value)),
|
|
shadows: mapValues(shadows.values, (layers) =>
|
|
layers
|
|
.map(
|
|
(layer) =>
|
|
`${rem(layer.offsetX)} ${rem(layer.offsetY)} ${rem(layer.blur)} ${rem(layer.spread)} ${rgba(color.base[layer.color as keyof typeof color.base], layer.opacity)}`,
|
|
)
|
|
.join(", "),
|
|
),
|
|
breakpoints: mapValues(
|
|
breakpoints.values,
|
|
(value) => `${value}${breakpoints.unit}`,
|
|
),
|
|
});
|
|
|
|
const cssVariablesResolver: CSSVariablesResolver = (resolvedTheme) => ({
|
|
variables: Object.fromEntries(
|
|
Object.entries(colorRoles).map(([role, reference]) => [
|
|
`--wl-color-${role}`,
|
|
getThemeColor(reference, resolvedTheme),
|
|
]),
|
|
),
|
|
light: {
|
|
"--mantine-color-dimmed": getThemeColor(colorRoles.muted, resolvedTheme),
|
|
},
|
|
dark: {},
|
|
});
|
|
|
|
export { colorRoles, cssVariablesResolver, designTokens, theme };
|