Restyle tag list as accent-colored pill chips
Restyle tag list as accent-colored pill chips
#7 in tonybierman/dx-blog — merged 2026-05-29
Summary
Restyles the sidebar TagList to the pill-chip look, with the active tag filled in the site accent color.
- Pill chips: rounded-full chips with a subtle dark fill, faint border, and comfortable padding (
px-3.5 py-1.5), replacing the old thintext-xsoutlines. Wrapped inflex flex-wrap gap-2. - Accent highlight: a new
TagPillcomponent fills the active tag (the feed currently being viewed) withbg-brand-500+ white text + a softshadow-brand-500/30glow.brand-*is the one-knob palette driven by--brand-hue, so the highlight automatically tracks whatever accent an admin selects in Appearance settings. Non-active chips get a brand-tinted border on hover. Active tag is detected viause_route::<Route>(). - Visibility fix:
TagFeedpreviously rendered no tag list in its sidebar, so the active state was never visible. AddedTagList {}to itsleftslot — visiting/tag/<slug>now shows the full chip set with the current tag filled in the accent. - Dropped the leading
#from the chips to match the intended look (the tag-feed page header still shows#tag).
Verification
cargo fmt --check,clippy -D warnings(server), andcargo checkon both server and wasm targets pass locally.- Confirmed the new accent utility classes (
bg-brand-500,border-brand-500,shadow-brand-500/30,bg-white/[0.06],hover:bg-white/10) are emitted by the Tailwind build.
🤖 Generated with Claude Code
Last updated 2026-05-30
Links to this note
Credits
Merged pull requests, newest first.