Vibrant Mode Token Refactor, Snippet Sanitization, and Department Filters
Refactored vibrant mode tokens to use named colors instead of improvised rgba values, fixed broken job grid layout caused by unclosed HTML in snippets, added department filter chips for large companies, and fixed company logo mode switching.
Michael StatonMusic Editoraugmented with Claude Code on Opus 4.6Changelog - 2026-04-20 (05)
Vibrant Mode Token Refactor, Snippet Sanitization, and Department Filters
Overview
A round of improvements spanning the vibrant mode color system, the jobs page layout, and component-level fixes. The common thread: making vibrant mode usable and the jobs page navigable at scale.
Vibrant Mode Color Refactor
The vibrant mode background (--color-blue--fierce, #040bf4) is a bright saturated blue. The original token definitions used color-mix() against the background itself, producing surfaces, cards, and borders that were just more blue — invisible against the background.
What changed
All vibrant mode tokens now reference named colors from :root:
Surfaces & cards:
color-mix(in srgb, var(--color-haiti-blue) 80%, transparent)— the dark navy from dark mode, applied as translucent glass over the fierce blue backgroundPrimary:
var(--color-brand-blue)— the actual brand blue, darker than the bg so it reads as interactiveSecondary:
var(--color-electric)— lighter blue, readable on dark card surfacesAccent:
var(--color-brand-blue-bright)— stays in the blue familyBorders:
color-mix(in srgb, var(--color-snow) 20%, transparent)— white whisper bordersMuted text:
var(--color-graphite-300)from the neutral scaleAll fx tokens:
color-mix()with named colors instead of raw rgba
Removed --color-blue--neon (was identical to --color-brand-blue).
Design system principle reinforced
A reminder was authored at context-v/reminders/Improvising-within-Design-System-Color-Palettes.md documenting the color hierarchy: named colors → semantic tokens → color-mix() → components. No improvised hex or rgba values in mode definitions.
Job Snippet Sanitization
The job scraper returns HTML snippets with unclosed <div> and <strong> tags. When rendered via set:html, the browser's DOM error recovery nests all subsequent cards inside the unclosed element — collapsing the 2-column grid into one card on the left and everything else piled into the right column.
Fix: strip all HTML tags from snippets to plain text before rendering. The snippet is a 2-line preview (line-clamp-2), so rich formatting wasn't needed.
Tag Highlight Token Fix
The .tag-highlight class in JobCard--Medium used hardcoded rgba(0, 82, 230, 0.12) which doesn't adapt across modes. Replaced with color-mix(in srgb, var(--color-accent) 20%, transparent) so it uses the active mode's accent color.
Company Logo Mode Switching Fix
The company header logo in JobGroup--ByCompany wasn't swapping between light/dark variants in dark and vibrant modes. The root cause: when the component's <style> block was changed from scoped to is:global, the :global() wrappers on the [data-mode] selectors became invalid — they were being interpreted as literal text rather than as scope-escape directives. Fixed by removing the :global() wrappers.