cncf / cncf/maintainer-d

Residual hard-coded theme literals left out of the #160 badge-contrast fix

Open
#164 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.