From 3e4ffa9312e190095aeb580e89f60212c478fa03 Mon Sep 17 00:00:00 2001 From: iris Date: Fri, 28 Aug 2026 23:54:25 +0200 Subject: [PATCH] badge: mix accent color into --fg for a contrast floor on any theme Badge.css's colored-value classes (positive/warning/negative/accent) used the raw semantic accent color directly on --purple-dim, same class of bug already fixed by hand for the bundled Latte palette (see colors.css's comment on --latte-base08..0F) but never applied to an arbitrary stylix-fed scheme. Blend each accent 60/40 with --fg via color-mix() instead of using it bare -- --fg is the one color the base16 contract already guarantees legible on every surface, so mixing toward it gives every accent a contrast floor without trying to compute/fix an operator's own theme. --- frontend/packages/shared/src/badge/Badge.css | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/frontend/packages/shared/src/badge/Badge.css b/frontend/packages/shared/src/badge/Badge.css index 1b9c81f6..232c9f40 100644 --- a/frontend/packages/shared/src/badge/Badge.css +++ b/frontend/packages/shared/src/badge/Badge.css @@ -44,15 +44,27 @@ font-size: 0.75em; color: var(--muted); } +/* Blended with `--fg`, not the raw accent — a stylix-fed scheme can pick + any hue/lightness for `--green`/`--amber`/etc., and nothing guarantees + an arbitrary accent clears 4.5:1 against `--purple-dim` the way the two + bundled palettes were hand-tuned to (see colors.css's comment above + `--latte-base08..0F`). `--fg` is the one color the base16 contract + already guarantees is legible on every surface in the theme, so mixing + toward it gives every accent a contrast floor without trying to + compute/fix an operator's own theme (mara, on the low-contrast-badges + report: "we cant fix a broken theme ... we need to follow base16 + conventions or css mix new colors" — this is that; stock mocha/latte + keep their existing look, since both accents already sit close to + `--fg` in contrast terms). */ .ui-badge-positive .ui-badge-value { - color: var(--green); + color: color-mix(in srgb, var(--green) 60%, var(--fg)); } .ui-badge-warning .ui-badge-value { - color: var(--amber); + color: color-mix(in srgb, var(--amber) 60%, var(--fg)); } .ui-badge-negative .ui-badge-value { - color: var(--red); + color: color-mix(in srgb, var(--red) 60%, var(--fg)); } .ui-badge-accent .ui-badge-value { - color: var(--purple); + color: color-mix(in srgb, var(--purple) 60%, var(--fg)); }