utils/web_ui/dist
Krzysztof kuhy Rudnicki 2574b21acc design-system: add a categorical ramp; web_ui v0.2.0
awesome-mcp-explorer needs six mutually distinguishable colours for its A-F
grades, and the design system had no answer -- one accent, and semantic roles
that deliberately cluster in one hue wedge. Raised as its own decision (per
PHASE3-PROMPT) and resolved by designing the ramp rather than mapping grades
onto success/warning/danger, which would have collapsed six steps into three.

Chosen by search, not by eye, under four hard constraints:
  - pairwise CIE dE >= 20 under normal vision AND deuteranopia, protanopia and
    tritanopia (worst observed 26.0)
  - >= 3:1 against BOTH backgrounds, since the ramp does not re-theme. This is
    the binding constraint: such colours only exist in L* 44-59.
  - monotonic lightness 58 -> 44, so hue and lightness encode redundantly and
    the ramp survives greyscale as an ordinal scale
  - muted saturation, to sit with the rest of the palette

scripts/ramp_check.py re-runs the whole proof and exits non-zero on a
regression, so this is a gate rather than a paragraph. A seventh hue is not
available (best candidate reaches dE 17.9); group the tail into "other".

This ramp is the only token group that leaves the warm wedge, deliberately:
hue separation is the entire point of a categorical scale.

Also: tokens.test.ts guards every frozen value against drift, and
tokens.md was split (screen-size.md) to hold the 250-line cap.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U4Rj3s7K2qzrLNgJqqPhno
2026-08-15 14:50:43 +02:00
..
index.d.ts web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
index.d.ts.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
index.js web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
index.js.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
quantile.d.ts web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
quantile.d.ts.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
quantile.js web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
quantile.js.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
range-slider.css web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
range-slider.d.ts web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
range-slider.d.ts.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
range-slider.js web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
range-slider.js.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
text.d.ts web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
text.d.ts.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
text.js web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
text.js.map web_ui: shared web token + component layer (Phase 3) 2026-08-15 14:40:45 +02:00
tokens.css design-system: add a categorical ramp; web_ui v0.2.0 2026-08-15 14:50:43 +02:00