From 2a9e35c93bfd22e840c951ecf2b638893b261120 Mon Sep 17 00:00:00 2001 From: t0ng7u Date: Sat, 11 Jul 2026 18:39:03 +0800 Subject: [PATCH] feat(web): bundle web fonts and refine low-emphasis text colors - Replace self-hosted @font-face declarations (font-display: optional) with direct Fontsource imports (swap), so the UI always settles on bundled fonts instead of staying on system fonts after first paint - Add JetBrains Mono (@fontsource-variable/jetbrains-mono) as the built-in monospace face: it backs --font-mono, .font-mono utilities, and code/pre - Add a "mono" option to the theme font axis (CSS token, ThemeFont type, resolver, and config drawer with live preview); default body font stays Public Sans, Anthropic preset keeps Lora serif - Lighten --subtle-foreground/--faint-foreground in light mode to 60%/40% translucent mixes of muted-foreground so secondary metadata (log sub-labels, placeholders) reads properly grey; declare once since the var() reference resolves per light/dark mode on --- web/default/src/styles/theme.css | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/web/default/src/styles/theme.css b/web/default/src/styles/theme.css index 0b992d89f4..52d670e918 100644 --- a/web/default/src/styles/theme.css +++ b/web/default/src/styles/theme.css @@ -248,8 +248,21 @@ For commercial licensing, please contact support@quantumnous.com --secondary-foreground: oklch(0.145 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.49 0 0); - --subtle-foreground: var(--muted-foreground); - --faint-foreground: var(--muted-foreground); + /* Low-emphasis text tiers below `muted-foreground`, used for secondary + * metadata (log sub-labels, placeholders). Translucent mixes keep them + * visibly greyer than `muted-foreground` on any background. Declared once: + * both `:root` and `.dark` target , so the `var(--muted-foreground)` + * reference resolves against the active mode's value automatically. */ + --subtle-foreground: color-mix( + in oklch, + var(--muted-foreground) 60%, + transparent + ); + --faint-foreground: color-mix( + in oklch, + var(--muted-foreground) 40%, + transparent + ); --accent: oklch(0.95 0 0); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); @@ -326,16 +339,6 @@ For commercial licensing, please contact support@quantumnous.com --secondary-foreground: oklch(0.965 0 0); --muted: oklch(0.305 0 0); --muted-foreground: oklch(0.78 0 0); - --subtle-foreground: color-mix( - in oklch, - var(--muted-foreground) 60%, - transparent - ); - --faint-foreground: color-mix( - in oklch, - var(--muted-foreground) 40%, - transparent - ); --accent: oklch(0.365 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216);