Residual hard-coded theme literals left out of the #160 badge-contrast fix
- Dominant language
- Go
- Stars
- 9
- Forks
- 10
- Avg merge
- 16h 55m
- Merged PRs (30d)
- 6
Description
## Problem
#160 (dark-mode badge contrast) was fixed on `main` by `90a5993e`/`689bb2ef`/`84bd3d95`, converting nearly every badge in `LfxProfilesPanel.module.css` and `MaintainerIdentityPanel.module.css` to the theme-aware `--md-status-*`/`--md-chip-*` tokens. A few literals were out of that fix's scope:
- `web/src/components/MaintainerIdentityPanel.module.css` `.count` (~line 42) — `background: rgba(15,23,42,0.08)` with **no `color` set at all**. In dark mode this 8% slate overlay on the `#1d2025` card is effectively invisible; the count pill disappears. Fix: `var(--md-chip-bg)` / `var(--md-chip-text)`, mirroring the already-fixed `LfxProfilesPanel.module.css` count pill (~lines 39-47).
- Same file, `.badge_conflict` (~lines 206-210) — hardcodes `background: #7f1d1d; color: #fee2e2;` — the only opaque-fill badge among translucent siblings, inconsistent in both themes. Fix: use the danger triple (`--md-status-danger-bg/-text`) plus `--md-status-danger-border` for the box-shadow.
- `web/src/components/LfxProfilesPanel.module.css` `.notice` (~lines 53-54) — hardcodes translucent amber (`rgba(245,158,11,...)`) instead of the warning tokens.
- Same file, `.badge_linked` (~line 162) — references `--md-status-info-bg`/`--md-status-info-text`, which **do not exist** in `globals.css`; it silently falls back to inherited/chip styling and renders identically to `.badge_default` in both themes. Either add a real info triple (derive from `--md-link-blue`: `#2563eb` → `#60a5fa`) or drop the dead reference.
- `web/src/components/ProjectCard.module.css` (~line 80) — uses `@media (prefers-color-scheme: dark)` rather than the app's `[data-theme="dark"]` attribute mechanism (set in `layout.tsx`/`ThemeProvider.tsx`), so it ignores the in-app light/dark toggle. Not a badge, but the same class of bug.
## Origin
Surfaced during PR #157 post-merge issue triage, while verifying #160 was fixed.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with web/src/components/MaintainerIdentityPanel.module.css, LfxProfilesPanel.module.css, and ProjectCard.module.css, then compare their theme handling with globals.css and the data-theme mechanism in layout.tsx/ThemeProvider.tsx. Replace the listed residual literals or dead info-token references with consistent theme-aware values, and ensure ProjectCard follows the in-app theme toggle. Done means the affected count, conflict, notice, linked, and project-card styles work correctly in both themes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 74/100