From 33d24095c4a375e2a6fc6f68b353a61f21a9e1bb Mon Sep 17 00:00:00 2001
From: Allard Quek <allard.quek@singtel.com>
Date: Wed, 29 Apr 2026 10:41:20 +0800
Subject: [PATCH] fix(dashboard): normalize typography and layout across
 built-in themes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All built-in themes now spread DEFAULT_TYPOGRAPHY, removing independent
baseSize overrides and converging on 15px. All themes also use
density: comfortable, removing the compact/spacious divergence that
caused item-count shifts on fixed-height pages (e.g. Skills).

Two additional per-theme overrides are also normalized:

- rose: lineHeight: "1.7" removed — was paired with density: spacious
  for an airy feel; once density was normalised the elevated line-height
  became an orphaned artefact causing nav item height drift.

- cyberpunk: letterSpacing changed from "0.02em" to "0" — extra tracking
  on top of an already-wide monospace font caused text to wrap earlier
  than in other themes.

Switching themes is now a purely cosmetic change — color palette,
font family, border-radius, and typographic style differ; font size,
spacing, line-height, and letter-spacing do not.
---
 web/src/themes/presets.ts | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/web/src/themes/presets.ts b/web/src/themes/presets.ts
index d8ae293cd0..a387e9a569 100644
--- a/web/src/themes/presets.ts
+++ b/web/src/themes/presets.ts
@@ -65,11 +65,11 @@ export const midnightTheme: DashboardTheme = {
     noiseOpacity: 0.8,
   },
   typography: {
+    ...DEFAULT_TYPOGRAPHY,
     fontSans: `"Inter", ${SYSTEM_SANS}`,
     fontMono: `"JetBrains Mono", ${SYSTEM_MONO}`,
     fontUrl:
       "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap",
-    baseSize: "14px",
     lineHeight: "1.6",
     letterSpacing: "-0.005em",
   },
@@ -91,11 +91,11 @@ export const emberTheme: DashboardTheme = {
     noiseOpacity: 1,
   },
   typography: {
+    ...DEFAULT_TYPOGRAPHY,
     fontSans: `"Spectral", Georgia, "Times New Roman", serif`,
     fontMono: `"IBM Plex Mono", ${SYSTEM_MONO}`,
     fontUrl:
       "https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap",
-    baseSize: "15px",
     lineHeight: "1.6",
     letterSpacing: "0",
   },
@@ -121,17 +121,17 @@ export const monoTheme: DashboardTheme = {
     noiseOpacity: 0.6,
   },
   typography: {
+    ...DEFAULT_TYPOGRAPHY,
     fontSans: `"IBM Plex Sans", ${SYSTEM_SANS}`,
     fontMono: `"IBM Plex Mono", ${SYSTEM_MONO}`,
     fontUrl:
       "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap",
-    baseSize: "13px",
     lineHeight: "1.5",
     letterSpacing: "0",
   },
   layout: {
     radius: "0",
-    density: "compact",
+    density: "comfortable",
   },
 };
 
@@ -147,17 +147,17 @@ export const cyberpunkTheme: DashboardTheme = {
     noiseOpacity: 1.2,
   },
   typography: {
+    ...DEFAULT_TYPOGRAPHY,
     fontSans: `"Share Tech Mono", "JetBrains Mono", ${SYSTEM_MONO}`,
     fontMono: `"Share Tech Mono", "JetBrains Mono", ${SYSTEM_MONO}`,
     fontUrl:
       "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=JetBrains+Mono:wght@400;700&display=swap",
-    baseSize: "14px",
     lineHeight: "1.5",
-    letterSpacing: "0.02em",
+    letterSpacing: "0",
   },
   layout: {
     radius: "0",
-    density: "compact",
+    density: "comfortable",
   },
   colorOverrides: {
     success: "#00ff88",
@@ -178,17 +178,16 @@ export const roseTheme: DashboardTheme = {
     noiseOpacity: 0.9,
   },
   typography: {
+    ...DEFAULT_TYPOGRAPHY,
     fontSans: `"Fraunces", Georgia, serif`,
     fontMono: `"DM Mono", ${SYSTEM_MONO}`,
     fontUrl:
       "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=DM+Mono:wght@400;500&display=swap",
-    baseSize: "16px",
-    lineHeight: "1.7",
     letterSpacing: "0",
   },
   layout: {
     radius: "1rem",
-    density: "spacious",
+    density: "comfortable",
   },
 };