From cdbf324aa043b1bc5705159127d2b55f186d1b9b Mon Sep 17 00:00:00 2001
From: oliver <97427849+flamboh@users.noreply.github.com>
Date: Tue, 1 Sep 2026 18:43:57 -0700
Subject: [PATCH] fix(web): keep generated muted foreground dimmer than entered
 text (#9113)

---
 apps/web/src/themePalette.test.ts | 3 +++
 apps/web/src/themePalette.ts      | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/themePalette.test.ts b/apps/web/src/themePalette.test.ts
index 562ebc26376465807c63421a152b7a037e6348a6..38e393608136fdf882b53b35c308db64bee0a02f 100644
--- a/apps/web/src/themePalette.test.ts
+++ b/apps/web/src/themePalette.test.ts
@@ -156,6 +156,9 @@ describe("theme files", () => {
       expect(contrastRatio(colors.textMuted, colors.canvas)).toBeGreaterThanOrEqual(4.5);
       expect(contrastRatio(colors.textMuted, colors.canvas)).toBeLessThan(5.5);
       expect(contrastRatio(colors.mutedForeground, colors.muted)).toBeGreaterThanOrEqual(4.5);
+      expect(contrastRatio(colors.mutedForeground, colors.muted)).toBeLessThan(
+        contrastRatio(colors.text, colors.muted),
+      );
       expect(contrastRatio(colors.placeholder, colors.surfaceRaised)).toBeGreaterThanOrEqual(4.5);
       expect(contrastRatio(colors.placeholder, colors.surfaceRaised)).toBeLessThan(
         contrastRatio(colors.text, colors.surfaceRaised),
diff --git a/apps/web/src/themePalette.ts b/apps/web/src/themePalette.ts
index 458d4539e270241189ca1de2325b1ff8309fdd59..f7dd111705907a2ec690a651c8ed6f26c626b913 100644
--- a/apps/web/src/themePalette.ts
+++ b/apps/web/src/themePalette.ts
@@ -916,7 +916,7 @@ export function createVividThemeColors(
     themeOklchToThemeColor(
       solveOklchLightness(textBase, surfaceRgb, 4.6, dark ? "lighter" : "darker"),
     );
-  const mutedForeground = foregroundOn(mutedRgb);
+  const mutedForeground = themeRgbToThemeColor(readableThemeText(mutedRgb, textRgb, 1, 4.6));
   const placeholder = themeRgbToThemeColor(readableThemeText(surfaceRaisedRgb, textRgb, 1, 4.6));
 
   const actionHover: ThemeOklch = { ...action, L: action.L + (dark ? 0.06 : -0.06) };
-- 
2.54.0