mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-28 17:10:56 +00:00
159 lines
3.7 KiB
TypeScript
159 lines
3.7 KiB
TypeScript
import {
|
|
colorsTuple,
|
|
createTheme,
|
|
type MantineColorsTuple,
|
|
} from "@mantine/core";
|
|
|
|
const edrGreen: MantineColorsTuple = [
|
|
"#ecfdf5",
|
|
"#d1fae5",
|
|
"#a7f3d0",
|
|
"#6ee7b7",
|
|
"#34d399",
|
|
"#0EA371",
|
|
"#0A8A5F",
|
|
"#0A6F4D",
|
|
"#065f46",
|
|
"#064e3b",
|
|
];
|
|
|
|
const neutral: MantineColorsTuple = [
|
|
"#F4F7FA",
|
|
"#eef2f7",
|
|
"#E6ECF2",
|
|
"#d0dae6",
|
|
"#b0bfce",
|
|
"#8fa0b2",
|
|
"#6B7C8E",
|
|
"#4b5a6a",
|
|
"#10202F",
|
|
"#0C1A2B",
|
|
];
|
|
|
|
export const mantineTheme = createTheme({
|
|
colors: {
|
|
"edr-green": edrGreen,
|
|
gray: neutral,
|
|
|
|
// Brand surface + text tokens (single-value semantic colors).
|
|
// Each generates --mantine-color-{name}-{0..9} CSS variables.
|
|
"edr-bg": colorsTuple("#F7FAFC"),
|
|
"edr-card": colorsTuple("#FFFFFF"),
|
|
"edr-border": colorsTuple("#E6ECF2"),
|
|
"edr-divider": colorsTuple("#EEF1F5"),
|
|
"edr-text": colorsTuple("#10202F"),
|
|
"edr-muted": colorsTuple("#6B7C8E"),
|
|
"edr-soft": colorsTuple("#ECF6F1"),
|
|
"edr-ink": colorsTuple("#0C1A2B"),
|
|
"edr-accent": colorsTuple("#F2A516"),
|
|
|
|
// Semantic status shades (from the design system).
|
|
"edr-amber-soft": colorsTuple("#FDF3E0"),
|
|
"edr-amber-text": colorsTuple("#9A5B00"),
|
|
"edr-blue": colorsTuple("#2E5B96"),
|
|
"edr-blue-soft": colorsTuple("#E9F0F8"),
|
|
"edr-blue-dot": colorsTuple("#3B6FB0"),
|
|
"edr-red": colorsTuple("#C0392B"),
|
|
"edr-red-soft": colorsTuple("#FBEAE7"),
|
|
"edr-slate": colorsTuple("#475569"),
|
|
"edr-slate-soft": colorsTuple("#F1F4F7"),
|
|
"edr-slate-soft2": colorsTuple("#EEF2F6"),
|
|
"edr-step": colorsTuple("#94A3B8"),
|
|
"edr-step-idle": colorsTuple("#D5DBE2"),
|
|
"edr-conn-idle": colorsTuple("#E6EAEF"),
|
|
},
|
|
primaryColor: "edr-green",
|
|
primaryShade: { light: 5, dark: 4 },
|
|
|
|
white: "#ffffff",
|
|
black: "#10202F",
|
|
|
|
fontFamily:
|
|
'"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
|
|
defaultRadius: "md",
|
|
|
|
radius: {
|
|
xs: "4px",
|
|
sm: "6px",
|
|
md: "8px",
|
|
lg: "12px",
|
|
xl: "18px",
|
|
},
|
|
|
|
spacing: {
|
|
xs: "8px",
|
|
sm: "12px",
|
|
md: "16px",
|
|
lg: "24px",
|
|
xl: "32px",
|
|
},
|
|
|
|
fontSizes: {
|
|
xs: "12px",
|
|
sm: "14px",
|
|
md: "16px",
|
|
lg: "20px",
|
|
xl: "24px",
|
|
},
|
|
|
|
lineHeights: {
|
|
xs: "1.4",
|
|
sm: "1.45",
|
|
md: "1.55",
|
|
lg: "1.55",
|
|
xl: "1.5",
|
|
},
|
|
|
|
headings: {
|
|
fontFamily: '"Inter", var(--mantine-font-family)',
|
|
fontWeight: "700",
|
|
sizes: {
|
|
h1: { fontSize: "36px", lineHeight: "1.1", fontWeight: "800" },
|
|
h2: { fontSize: "28px", lineHeight: "1.2", fontWeight: "700" },
|
|
h3: { fontSize: "22px", 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)",
|
|
md: "0 4px 12px rgba(16, 24, 40, 0.06)",
|
|
},
|
|
|
|
components: {
|
|
Card: {
|
|
defaultProps: {
|
|
radius: "xl",
|
|
withBorder: true,
|
|
shadow: "none",
|
|
padding: "lg",
|
|
},
|
|
styles: {
|
|
root: { borderColor: "#E6ECF2" },
|
|
},
|
|
},
|
|
Button: {
|
|
defaultProps: { radius: "md" },
|
|
styles: { root: { fontWeight: 600 } },
|
|
},
|
|
Badge: {
|
|
defaultProps: { radius: "xl", variant: "light" },
|
|
styles: { root: { fontWeight: 600, textTransform: "none" } },
|
|
},
|
|
Paper: {
|
|
defaultProps: { radius: "xl", shadow: "none", withBorder: true },
|
|
styles: { root: { borderColor: "#E6ECF2" } },
|
|
},
|
|
Table: {
|
|
defaultProps: { verticalSpacing: "sm", horizontalSpacing: "md" },
|
|
},
|
|
Title: {
|
|
styles: { root: { letterSpacing: "-0.01em" } },
|
|
},
|
|
},
|
|
});
|