ui chnages

libs/shared/src/lib/theme/base-theme.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import { createTheme, rem } from '@mantine/core';
 
 /**
@@ -97,6 +98,40 @@ export const baseTheme = createTheme({
     Select: { defaultProps: { radius: 'md' } },
     PasswordInput: { defaultProps: { radius: 'md' } },
 
+    // The page sits on a tinted surface and cards float on white. Without this
+    // the main area is the same white as every Paper on it, and the card
+    // borders are the only thing separating content from chrome.
+    AppShell: {
+      styles: { main: { background: 'var(--ema-surface-page)' } },
+    },
+
+    // Tables — the registry look: quiet uppercase headers, hairline row
+    // borders, a tint on hover, no zebra striping and no column rules. Set
+    // once here so the 14 pages rendering a raw <Table> match the 28 that go
+    // through AdvancedTable instead of each picking their own density.
+    //
+    // Header text is `text-secondary` rather than the lighter dimmed gray the
+    // mockup used: at 11px uppercase, gray-5 on white fails 4.5:1.
+    Table: {
+      defaultProps: { highlightOnHover: true, verticalSpacing: 'sm', horizontalSpacing: 'md' },
+      styles: {
+        table: {
+          '--table-border-color': 'var(--ema-border-subtle)',
+          '--table-hover-color': 'var(--ema-surface-page)',
+          '--table-striped-color': 'var(--ema-surface-sunken)',
+        } as CSSProperties,
+        th: {
+          fontSize: rem(11),
+          fontWeight: 700,
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+          color: 'var(--ema-text-secondary)',
+          whiteSpace: 'nowrap',
+        },
+        td: { fontSize: rem(13) },
+      },
+    },
+
     // Mantine's stock scroll wrapper (NativeScrollArea) discards the
     // max-height it's handed unless scrollAreaComponent is set, so a modal
     // taller than the viewport just gets clipped with no way to scroll it.