starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-08-13 23:22:00 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Keep template tag text colored in light themes

Browse Source 
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.
This commit is contained in:
Gregory Schier
2026-08-13 08:57:25 -07:00
parent c57a64d455
commit bc0494fe0e
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/theme/src/window.ts
+7 -2
View File
@@ -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(),