mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
148 lines
3.1 KiB
TypeScript
148 lines
3.1 KiB
TypeScript
import { createTheme, type MantineColorsTuple } from "@mantine/core";
|
|
|
|
// Brand accent — used sparingly: primary actions, active nav, key highlights.
|
|
const edrGreen: MantineColorsTuple = [
|
|
"#ecfdf5",
|
|
"#d1fae5",
|
|
"#a7f3d0",
|
|
"#6ee7b7",
|
|
"#34d399",
|
|
"#10b981",
|
|
"#059669",
|
|
"#047857",
|
|
"#065f46",
|
|
"#064e3b",
|
|
];
|
|
|
|
// Neutral gray ramp tuned for clean, low-contrast surfaces (Stripe/Notion feel).
|
|
const neutral: MantineColorsTuple = [
|
|
"#f8fafc",
|
|
"#f1f5f9",
|
|
"#e8edf2",
|
|
"#dbe2ea",
|
|
"#c2cbd6",
|
|
"#9aa6b4",
|
|
"#6b7785",
|
|
"#4b5563",
|
|
"#2f3742",
|
|
"#1c2129",
|
|
];
|
|
|
|
export const mantineTheme = createTheme({
|
|
colors: {
|
|
"edr-green": edrGreen,
|
|
gray: neutral,
|
|
},
|
|
primaryColor: "edr-green",
|
|
primaryShade: { light: 6, dark: 5 },
|
|
|
|
white: "#ffffff",
|
|
black: "#1c2129",
|
|
|
|
fontFamily:
|
|
'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
|
|
defaultRadius: "md",
|
|
|
|
radius: {
|
|
xs: "4px",
|
|
sm: "6px",
|
|
md: "8px",
|
|
lg: "12px",
|
|
xl: "16px",
|
|
},
|
|
|
|
spacing: {
|
|
xs: "8px",
|
|
sm: "12px",
|
|
md: "16px",
|
|
lg: "24px",
|
|
xl: "32px",
|
|
},
|
|
|
|
fontSizes: {
|
|
xs: "12px",
|
|
sm: "13px",
|
|
md: "14px",
|
|
lg: "16px",
|
|
xl: "18px",
|
|
},
|
|
|
|
lineHeights: {
|
|
xs: "1.4",
|
|
sm: "1.45",
|
|
md: "1.55",
|
|
lg: "1.55",
|
|
xl: "1.5",
|
|
},
|
|
|
|
// Hierarchy comes from a strong, exponential size scale (~1.25 modular ratio),
|
|
// not from heavy weights. Big steps at the top, calm weights throughout.
|
|
// "Plus Jakarta Sans" gives headings a distinctive geometric character while
|
|
// body text stays on the neutral system stack.
|
|
headings: {
|
|
fontFamily: '"Plus Jakarta Sans", var(--mantine-font-family)',
|
|
fontWeight: "600",
|
|
sizes: {
|
|
h1: { fontSize: "40px", lineHeight: "1.1", fontWeight: "700" },
|
|
h2: { fontSize: "30px", lineHeight: "1.2", fontWeight: "650" },
|
|
h3: { fontSize: "23px", lineHeight: "1.3", fontWeight: "600" },
|
|
h4: { fontSize: "18px", lineHeight: "1.4", fontWeight: "600" },
|
|
h5: { fontSize: "15px", lineHeight: "1.45", fontWeight: "600" },
|
|
h6: { fontSize: "13px", lineHeight: "1.45", fontWeight: "600" },
|
|
},
|
|
},
|
|
|
|
shadows: {
|
|
xs: "0 1px 2px rgba(16, 24, 40, 0.04)",
|
|
sm: "0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04)",
|
|
md: "0 4px 12px rgba(16, 24, 40, 0.06)",
|
|
},
|
|
|
|
components: {
|
|
Card: {
|
|
defaultProps: {
|
|
radius: "lg",
|
|
withBorder: true,
|
|
shadow: "none",
|
|
padding: "lg",
|
|
},
|
|
},
|
|
Button: {
|
|
defaultProps: {
|
|
radius: "md",
|
|
},
|
|
styles: {
|
|
root: { fontWeight: 550 },
|
|
},
|
|
},
|
|
Badge: {
|
|
defaultProps: {
|
|
radius: "sm",
|
|
variant: "light",
|
|
},
|
|
styles: {
|
|
root: { fontWeight: 550, textTransform: "none" },
|
|
},
|
|
},
|
|
Paper: {
|
|
defaultProps: {
|
|
radius: "lg",
|
|
shadow: "none",
|
|
withBorder: true,
|
|
},
|
|
},
|
|
Table: {
|
|
defaultProps: {
|
|
verticalSpacing: "sm",
|
|
horizontalSpacing: "md",
|
|
},
|
|
},
|
|
Title: {
|
|
styles: {
|
|
root: { letterSpacing: "-0.01em" },
|
|
},
|
|
},
|
|
},
|
|
});
|