fix(dashboard): separate theme identity from layout scale

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.
This commit is contained in:
Allard Quek 2026-04-30 10:38:14 +08:00 committed by Teknium
parent 33d24095c4
commit ebe60abc4f

View file

@ -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",
},
};