From ebe60abc4f22c8d8f9360da76249cc55499210f4 Mon Sep 17 00:00:00 2001
From: Allard Quek <allard.quek@singtel.com>
Date: Thu, 30 Apr 2026 10:38:14 +0800
Subject: [PATCH] fix(dashboard): separate theme identity from layout scale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Themes previously embedded layout-affecting values (baseSize, lineHeight,
density, letterSpacing) alongside visual identity properties, coupling
user ergonomic preferences to color theme selection.

This change establishes a clear separation of concerns:

- Themes own: palette, font family, border-radius, and font-coupled
  letterSpacing (e.g. Inter's -0.005em tracking)
- Layout scale (baseSize, lineHeight, density) is standardized via
  DEFAULT_TYPOGRAPHY and DEFAULT_LAYOUT — not overridden per theme

All themes now spread DEFAULT_TYPOGRAPHY and DEFAULT_LAYOUT as their
base, removing silent divergence and making future layout settings
(e.g. user-configurable density) trivially applicable across all themes
without per-theme special-casing.
---
 web/src/themes/presets.ts | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/web/src/themes/presets.ts b/web/src/themes/presets.ts
index a387e9a569..956bb68c21 100644
--- a/web/src/themes/presets.ts
+++ b/web/src/themes/presets.ts
@@ -70,12 +70,11 @@ export const midnightTheme: DashboardTheme = {
     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",
-    lineHeight: "1.6",
     letterSpacing: "-0.005em",
   },
   layout: {
+    ...DEFAULT_LAYOUT,
     radius: "0.75rem",
-    density: "comfortable",
   },
 };
 
@@ -96,12 +95,10 @@ export const emberTheme: DashboardTheme = {
     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",
-    lineHeight: "1.6",
-    letterSpacing: "0",
   },
   layout: {
+    ...DEFAULT_LAYOUT,
     radius: "0.25rem",
-    density: "comfortable",
   },
   colorOverrides: {
     destructive: "#c92d0f",
@@ -126,12 +123,10 @@ export const monoTheme: DashboardTheme = {
     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",
-    lineHeight: "1.5",
-    letterSpacing: "0",
   },
   layout: {
+    ...DEFAULT_LAYOUT,
     radius: "0",
-    density: "comfortable",
   },
 };
 
@@ -152,12 +147,10 @@ export const cyberpunkTheme: DashboardTheme = {
     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",
-    lineHeight: "1.5",
-    letterSpacing: "0",
   },
   layout: {
+    ...DEFAULT_LAYOUT,
     radius: "0",
-    density: "comfortable",
   },
   colorOverrides: {
     success: "#00ff88",
@@ -183,11 +176,10 @@ export const roseTheme: DashboardTheme = {
     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",
-    letterSpacing: "0",
   },
   layout: {
+    ...DEFAULT_LAYOUT,
     radius: "1rem",
-    density: "comfortable",
   },
 };