From b39efcad4e998dc2c4ee404d0992136514b22203 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Mon, 18 May 2026 13:01:38 -0400 Subject: [PATCH] =?UTF-8?q?fix:=20MPS-24=20=E2=80=94=20Suggest-categories?= =?UTF-8?q?=20cards=20broken=20in=20dark=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- make_post_sell/static/css/common.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 7cd643e..129e558 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -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); }