fix(sidebar): invert glyph, draft pencil, and DM status on active row (LC-576) #547

Merged

longjacksonle merged 1 commit from fix/lc576-active-row-invert into main

2026-07-13 16:13:31 +02:00

longjacksonle commented

2026-07-13 16:10:09 +02:00

Owner

What

On the active sidebar row (solid accent fill from LC-569), the leading #/speaker glyph, the draft pencil, and the DM custom-status line stayed on their resting grey instead of inverting with the row. The # on saturated accent was both visually wrong and a contrast failure. This inverts all three to --accent-content, de-emphasized with opacity rather than a fixed grey.

Why the fix is in CSS, not the templates

.lc-room-row-active sets color: var(--accent-content), which reaches descendants only by inheritance. Those three descendants set their own colour with a Tailwind utility (text-content-subtle / text-content-muted), and a bare utility (specificity 0,1,0) beats an inherited value. A descendant selector .lc-room-row-active .text-content-subtle (0,2,0) outranks the utility, so resting-state markup is untouched and only the active row inverts. No template churn, no !important.

.lc-room-row-active .text-content-subtle,
.lc-room-row-active .text-content-muted {
    color: var(--accent-content);
    opacity: 0.75;
}

opacity: 0.75 matches the prototype and preserves the hierarchy (glyph quieter than the room name).

Scope

The only descendants of the active <a> carrying these utilities are the three intended targets (glyph, draft pencil, DM status). The mark-read / star / move-to-category action buttons are siblings outside the <a>, so they keep their md:opacity-0 hover-reveal behaviour. The mention badge (self-contained danger pill) and the unread count pill (already inverted explicitly) are unaffected.

Gallery

dev/theme_gallery.html: the mirrored active row hardcoded style="opacity:.75" on the glyph instead of reproducing the real text-content-subtle markup, which is why the gallery did not surface this bug. Mirroring the real class makes the gallery catch this class of regression.

Verification

cargo check clean.
Headless-chrome screenshot of /dev/theme-gallery across all 7 palettes x 4 modes: the active-row # glyph and draft pencil invert to accent-content (de-emphasized) while resting rows keep grey; count pill inversion and mention badge unchanged.

Closes LC-576.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GJbJChgMXj7m1Q8GdnTPyT

## What On the active sidebar row (solid accent fill from LC-569), the leading `#`/speaker glyph, the draft pencil, and the DM custom-status line stayed on their resting grey instead of inverting with the row. The `#` on saturated accent was both visually wrong and a contrast failure. This inverts all three to `--accent-content`, de-emphasized with opacity rather than a fixed grey. ## Why the fix is in CSS, not the templates `.lc-room-row-active` sets `color: var(--accent-content)`, which reaches descendants only by inheritance. Those three descendants set their own colour with a Tailwind utility (`text-content-subtle` / `text-content-muted`), and a bare utility (specificity 0,1,0) beats an inherited value. A descendant selector `.lc-room-row-active .text-content-subtle` (0,2,0) outranks the utility, so resting-state markup is untouched and only the active row inverts. No template churn, no `!important`. ```css .lc-room-row-active .text-content-subtle, .lc-room-row-active .text-content-muted { color: var(--accent-content); opacity: 0.75; } ``` `opacity: 0.75` matches the prototype and preserves the hierarchy (glyph quieter than the room name). ## Scope The only descendants of the active `<a>` carrying these utilities are the three intended targets (glyph, draft pencil, DM status). The mark-read / star / move-to-category action buttons are siblings **outside** the `<a>`, so they keep their `md:opacity-0` hover-reveal behaviour. The mention badge (self-contained danger pill) and the unread count pill (already inverted explicitly) are unaffected. ## Gallery `dev/theme_gallery.html`: the mirrored active row hardcoded `style="opacity:.75"` on the glyph instead of reproducing the real `text-content-subtle` markup, which is why the gallery did not surface this bug. Mirroring the real class makes the gallery catch this class of regression. ## Verification - `cargo check` clean. - Headless-chrome screenshot of `/dev/theme-gallery` across all 7 palettes x 4 modes: the active-row `#` glyph and draft pencil invert to accent-content (de-emphasized) while resting rows keep grey; count pill inversion and mention badge unchanged. Closes LC-576. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01GJbJChgMXj7m1Q8GdnTPyT

longjacksonle added 1 commit

2026-07-13 16:10:09 +02:00

fix(sidebar): invert glyph, draft pencil, and DM status on active row (LC-576)

check-secrets / TruffleHog (push) Successful in 5s

Details

check-secrets / Nosey parker (push) Successful in 5s

Details

check-secrets / Kingfisher (push) Successful in 6s

Details

check-secrets / Nosey parker (pull_request) Successful in 6s

Details

check-secrets / Kingfisher (pull_request) Successful in 7s

Details

check-secrets / TruffleHog (pull_request) Successful in 8s

Details

Check / clippy + fmt + tests (pull_request) Successful in 3m20s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

d11c96b6a0

LC-569 made the active sidebar row a solid accent fill and relied on inheritance to carry --accent-content to descendants. Three descendants set their own colour with a Tailwind utility, which wins over the inherited value, so on the active row the leading #/speaker glyph (text-content-subtle), the draft pencil (text-content-subtle), and the DM custom-status line (text-content-muted) stayed on their resting grey against the saturated accent fill. The # in particular rendered mid-grey on blue: visually wrong and a contrast failure.

Fix in the token layer next to the existing .lc-room-row-active .lc-count-pill rule. A descendant selector (specificity 0,2,0) outranks the bare utility (0,1,0), so resting-state markup is untouched and only the active row inverts. opacity 0.75 (matching the prototype) keeps the glyph quieter than the room name without reintroducing a fixed grey. Scope verified: the only descendants of the active <a> carrying these utilities are the three intended targets; the mark-read/star/category action buttons are siblings outside the <a> and keep their hover-reveal behaviour, and the mention badge (self-contained danger pill) and count pill are unaffected.

Also mirror the real row markup in dev/theme_gallery.html: the active-row glyph now uses text-content-subtle instead of a hardcoded style="opacity:.75", so the gallery renders this class of regression across the 28 palette x mode cells instead of masking it.

Verified: cargo check clean; headless-chrome screenshot of the theme gallery across all 7 palettes x 4 modes shows the active-row glyph and pencil inverting to accent-content while resting rows keep grey.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GJbJChgMXj7m1Q8GdnTPyT

longjacksonle scheduled this pull request to auto merge when all checks succeed

2026-07-13 16:12:16 +02:00