Frontend redesign chunk 1: design tokens and type

Replace hardcoded dark-palette Tailwind classes with semantic CSS custom properties (page/surface/raised/line/ink/accent/sev-moderate/sev-major/ map-*) defined on :root (light) and .dark (dark), wired through tailwind.config.ts theme.extend.colors. Add IBM Plex Sans/Mono via next/font/google: sans for everything a person reads, mono reserved for machine identifiers only. Drop font-mono from body and Button's base classes. Existing !important light-mode overrides kept temporarily so nothing goes unreadable mid-migration (removed in chunk 4). Per UI_REDESIGN.md chunk 1.
2026-08-19 22:53:20 -04:00
parent d041c8648d
commit c6bc712b54
4 changed files with 105 additions and 6 deletions
@@ -1,9 +1,26 @@
 import type { Metadata } from "next";
+import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
 import { AuthProvider } from "@/components/AuthProvider";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { ChromeSwitcher } from "@/components/ChromeSwitcher";
 import "./globals.css";

+/* Sans for humans (headings, summaries, transcripts, buttons, nav);
+ * mono for machines (timestamps, talkgroups, unit ids). See UI_REDESIGN.md §2.1. */
+const plexSans = IBM_Plex_Sans({
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  variable: "--font-sans",
+  display: "swap",
+});
+
+const plexMono = IBM_Plex_Mono({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
  title: "DRB — Public-Safety Radio Intelligence",
  description: "Live incident awareness from field SDR nodes — transcribed, correlated, and mapped in real time.",
@@ -11,12 +28,14 @@ export const metadata: Metadata = {

 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="en">
+    // suppressHydrationWarning: the inline script below adds `.dark` to <html>
+    // before hydration, so the server/client className legitimately differs.
+    <html lang="en" suppressHydrationWarning className={`${plexSans.variable} ${plexMono.variable}`}>
      <head>
        {/* Prevent flash of wrong theme before React hydrates */}
        <script dangerouslySetInnerHTML={{ __html: `(function(){try{var t=localStorage.getItem('drb-theme');if(t!=='light')document.documentElement.classList.add('dark');}catch(e){}})();` }} />
      </head>
-      <body className="min-h-screen bg-gray-950">
+      <body className="min-h-screen bg-page text-ink">
        <ThemeProvider>
          <AuthProvider>
            <ChromeSwitcher>{children}</ChromeSwitcher>