fix(craig-web): tokenize the <select> dropdown-arrow data-URI color
Summary
Deferred from #596 (closed). The <select> dropdown-arrow background is an inline SVG data-URI with a hardcoded fill color (%238d8d8d, URL-encoded #8d8d8d) at services/craig-web/static/css/components.css (the .input/select rule). #596 (closed) tokenized every other hardcoded color, but a color INSIDE a url("data:image/svg+xml,…") cannot reference a CSS var(--token), so the arrow ignores the active light/dark palette (a mid-gray arrow on a dark-mode select).
It is currently allow-listed in the raw-hex guard (craig-web theme.rs static_stylesheets_have_no_raw_hex_colors) as a documented carve-out.
Options
- CSS mask:
background: var(--muted); mask-image: url("data:…")(monochrome SVG as a mask, color from a token). Cleanest; needsmask/-webkit-mask+ a visual check on the select control. - Dual SVG via
prefers-color-schememedia query (two data-URIs) — simpler but duplicates the asset.
Acceptance criteria
- The select arrow resolves through a token (adapts to light/dark).
- Remove the
%238d8d8dcarve-out from the raw-hex guard. - Screenshot the select control before/after.
Relates to #596 (closed).