engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix: MPS-24 — Suggest-categories cards broken in dark mode

Browse source 
Operator screenshot: candidate-category cards render as WHITE cards
with invisible light labels in dark mode.

Root cause (same class as the well bugs): li.tag-suggest-item used
non-existent tokens var(--color-surface-2)/var(--color-border) ->
fell back to light literals in dark mode (white card), while the
label text inherited the dark theme's light colour -> invisible.

- li.tag-suggest-item: --surface-container bg + --border-light border
  + explicit --text-body colour (all carry dark values).
- div.tag-suggest-samples + span.tag-list-count: --color-text-muted
  (not a token) -> --text-muted (theme-aware). Fixes the per-cluster
  AND per-tag (All-tags list) counts in dark mode too.
CSS-only, cache-busted; no test pins these.
This commit is contained in:
russell@unturf.com 2026-05-18 13:01:38 -04:00
parent 4a47b716ac
commit b39efcad4e
No known key found for this signature in database
1 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
make_post_sell/static/css/common.css
View file

@ -1898,7 +1898,10 @@ form.tag-list-reorder button[disabled] {
}
span.tag-list-count {
color: var(--color-text-muted, #6b7280);
/* --color-text-muted is not a real token; --text-muted carries a
dark value so the per-tag / per-cluster count stays legible in
dark mode (used in the suggest list AND the All-tags list). */
color: var(--text-muted, #6b7280);
font-size: var(--type-body-sm-size, 0.875rem);
}
@ -1941,9 +1944,15 @@ li.tag-suggest-item {
grid-template-columns: 1fr;
gap: var(--space-1, 4px);
padding: var(--space-3, 12px);
border: 1px solid var(--color-border, #e5e7eb);
/* --color-border / --color-surface-2 are NOT real tokens — they
fell back to light literals in dark mode (white card + the
theme's light text = invisible labels). --border-light /
--surface-container carry dark values; --text-body keeps the
label readable on either theme. */
border: 1px solid var(--border-light, #e5e7eb);
border-radius: var(--radius-sm, 4px);
background: var(--color-surface-2, #f9fafb);
background: var(--surface-container, #f9fafb);
color: var(--text-body, #333);
}
div.tag-suggest-label {
@ -1954,7 +1963,9 @@ div.tag-suggest-label {
}
div.tag-suggest-samples {
color: var(--color-text-muted, #6b7280);
/* --color-text-muted is not a token; --text-muted carries a dark
value so samples stay legible in dark mode. */
color: var(--text-muted, #6b7280);
font-size: var(--type-body-sm-size, 0.875rem);
}