Vibrant Mode Token Refactor, Snippet Sanitization, and Department Filters
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.