From bc0494fe0e7c3534ee765b01edfa48170025e009 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Thu, 13 Aug 2026 08:57:25 -0700 Subject: [PATCH] Keep template tag text colored in light themes Tag text was black in light themes and correctly tinted in dark. Both came from liftMax(), which pushes lightness to an extreme, and the two extremes are not symmetric: lightening past the sRGB gamut clips to a still-tinted color, so dark kept its hue by accident, while darkening to zero lightness collapses every hue to black. Stopping short of the extreme keeps the hue in both appearances with no branch on appearance, and still clears 6:1 against the tag's own surface across every accent. Dark shifts from washed out toward the accent, so a purple tag now reads purple rather than near-white pink. --- packages/theme/src/window.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/window.ts b/packages/theme/src/window.ts index 830a81ae..485eb840 100644 --- a/packages/theme/src/window.ts +++ b/packages/theme/src/window.ts @@ -147,8 +147,13 @@ function normalizeColorVariables(theme: Theme, vars: CSSVariables): CSSVariables function templateTagColorVariables(theme: Theme, color: YaakColor): CSSVariables { return completeFullColorVariables(theme, { - text: color.liftMax().lower(0.05).css(), - textSubtle: color.liftMax().lower(0.08).css(), + // Lift toward the foreground, but not all the way. liftMax() pushes lightness to an + // extreme, and the two extremes don't behave alike: lightening past the sRGB gamut clips + // to a still-tinted color, while darkening to zero lightness collapses every hue to black. + // That's why tags kept their color in dark mode and turned black in light. Stopping short + // keeps the hue in both, and still clears 6:1 against the tag's own surface. + text: color.lift(0.6).css(), + textSubtle: color.lift(0.5).css(), textSubtlest: color.css(), surface: color.lower(0.2).translucify(0.8).css(), border: color.translucify(0.6).css(),