vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

badge: mix accent color into --fg for a contrast floor on any theme

Browse source 
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.
This commit is contained in:
iris 2026-08-28 23:54:25 +02:00
commit 3e4ffa9312
1 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/packages/shared/src/badge/Badge.css
View file

@ -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));
}