style: some clean up

apps/edr-freight-web/backoffice/src/theme/freight-brand.ts

@@ -1,4 +1,8 @@
-import { createTheme, type MantineColorsTuple } from "@mantine/core";
+import {
+  colorsTuple,
+  createTheme,
+  type MantineColorsTuple,
+} from "@mantine/core";
 
 /** EDR Freight primary brand green */
 export const FREIGHT_BRAND = "#1B9E7A";
@@ -17,24 +21,155 @@ export const freightBrand = {
   mutedBorder: "#B7EBDC",
 } as const;
 
-/** Mantine green scale with #1B9E7A at index 6 (filled buttons, nav active). */
-const freightGreen: MantineColorsTuple = [
-  "#E7F8F2",
-  "#C5EFE1",
-  "#9CE4CD",
-  "#6BD6B5",
-  "#41C8A0",
-  "#25B58C",
-  FREIGHT_BRAND,
-  FREIGHT_BRAND_DARK,
-  "#105F47",
-  "#0A3D2E",
+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 freightMantineTheme = createTheme({
-  primaryColor: "green",
   colors: {
-    green: freightGreen,
+    "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" } },
+    },
   },
-  fontFamily: "'Outfit', var(--font-sans)",
 });