style: update

apps/edr-freight-web/portal/src/theme/mantine.ts

@@ -1,46 +1,71 @@
-import { createTheme, type MantineColorsTuple } from "@mantine/core";
+import { colorsTuple, 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",
+  "#0EA371",
+  "#0A8A5F",
+  "#0A6F4D",
   "#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",
+  "#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("#F4F7FA"),
+    "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: 6, dark: 5 },
+  primaryShade: { light: 5, dark: 4 },
 
   white: "#ffffff",
-  black: "#1c2129",
+  black: "#10202F",
 
   fontFamily:
-    '"Plus Jakarta Sans",ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
 
   defaultRadius: "md",
 
@@ -49,7 +74,7 @@ export const mantineTheme = createTheme({
     sm: "6px",
     md: "8px",
     lg: "12px",
-    xl: "16px",
+    xl: "18px",
   },
 
   spacing: {
@@ -76,17 +101,13 @@ export const mantineTheme = createTheme({
     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",
+    fontFamily: '"Inter", var(--mantine-font-family)',
+    fontWeight: "700",
     sizes: {
-      h1: { fontSize: "40px", lineHeight: "1.1", fontWeight: "800" },
-      h2: { fontSize: "30px", lineHeight: "1.2", fontWeight: "700" },
-      h3: { fontSize: "23px", lineHeight: "1.3", fontWeight: "600" },
+      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" },
@@ -95,53 +116,39 @@ export const mantineTheme = createTheme({
 
   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)",
+    sm: "0 1px 3px rgba(16, 24, 40, 0.06)",
     md: "0 4px 12px rgba(16, 24, 40, 0.06)",
   },
 
   components: {
     Card: {
       defaultProps: {
-        radius: "lg",
+        radius: "xl",
         withBorder: true,
         shadow: "none",
         padding: "lg",
       },
+      styles: {
+        root: { borderColor: "#E6ECF2" },
+      },
     },
     Button: {
-      defaultProps: {
-        radius: "md",
-      },
-      styles: {
-        root: { fontWeight: 550 },
-      },
+      defaultProps: { radius: "md" },
+      styles: { root: { fontWeight: 600 } },
     },
     Badge: {
-      defaultProps: {
-        radius: "sm",
-        variant: "light",
-      },
-      styles: {
-        root: { fontWeight: 550, textTransform: "none" },
-      },
+      defaultProps: { radius: "xl", variant: "light" },
+      styles: { root: { fontWeight: 600, textTransform: "none" } },
     },
     Paper: {
-      defaultProps: {
-        radius: "lg",
-        shadow: "none",
-        withBorder: true,
-      },
+      defaultProps: { radius: "xl", shadow: "none", withBorder: true },
+      styles: { root: { borderColor: "#E6ECF2" } },
     },
     Table: {
-      defaultProps: {
-        verticalSpacing: "sm",
-        horizontalSpacing: "md",
-      },
+      defaultProps: { verticalSpacing: "sm", horizontalSpacing: "md" },
     },
     Title: {
-      styles: {
-        root: { letterSpacing: "-0.01em" },
-      },
+      styles: { root: { letterSpacing: "-0.01em" } },
     },
   },
 });