mirror of
https://github.com/openclaw/openclaw.git
synced 2026-08-27 12:56:01 -06:00
Peter Steinberger
08a42a561c
* chore(control-ui): vendor JetBrains Mono and Atkinson Hyperlegible Next Adds the woff2 faces for the Beacon and Phosphor themes plus the stylesheets that declare them. Both families are SIL Open Font License 1.1 and ship unmodified with their upstream license text, as the license requires. Atkinson Hyperlegible Next was drawn by the Braille Institute for low vision: its letterforms disambiguate the pairs that blur first at low acuity (I/l/1, O/0, rn/m), which is why it belongs to the accessibility theme specifically. base.css has always named JetBrains Mono first in --mono, but nothing shipped it, so code blocks rendered in it only for people who happened to have it installed locally. Phosphor makes that deterministic. Latin and latin-ext subsets only, 195 KB. Served from the gateway rather than a font CDN so font-src 'self' holds, no third-party request happens on load, and an offline or LAN-only gateway still renders correctly. The url() references are relative to their stylesheet so they follow a configured Control UI mount. * feat(control-ui): add the Tide, Beacon, and Phosphor themes Three built-in themes, each filling a gap the existing four share rather than adding a fifth variation on them. Every shipped accent today is warm — coral, crimson, chocolate, clay — and the only cool token anywhere is Claw's teal secondary. Tide is the cool one: steel cyan on deep slate, deep teal-blue on cool paper. It deliberately ships no webfonts, so it costs nothing beyond its tokens. Beacon is the accessibility one. It targets WCAG AAA (7:1) rather than the AA 4.5:1 floor the other themes hold, for low vision, direct sunlight, projectors, and poor panels, and sets everything in Atkinson Hyperlegible Next. Reaching AAA forced one deliberate break from the status-token convention: elsewhere each --x-subtle is --x at 8%, but a label on a tint of its own hue caps achievable contrast because the tint pulls the background toward the text. Beacon tints neutrally and lets the label carry the contrast. Its focus ring is opaque and 3px for the same reason — a translucent ring is the first thing to vanish on a bad panel. The contrast guardrail now enforces 7:1 for Beacon specifically, so a later palette edit cannot quietly demote it to an ordinary dark theme. Phosphor is the terminal one: phosphor green on green-cast black with the whole surface, chat prose included, in JetBrains Mono. Monospace prose is a character choice for an operator console, not a readability claim, which is why it is opt-in. Every palette was solved against the real guardrail before any CSS was written. Worst text pairing per theme: Tide 6.12:1 dark / 4.63:1 light, Beacon 10.29:1 / 9.72:1, Phosphor 6.69:1 / 4.76:1. Worst status label on its own tint: Beacon 7.05:1 / 7.02:1, the others above 4.6:1. Budgets: the startup CSS ceiling moves 45 -> 47 KiB and the JS ratchet baseline moves 523 B. Every built-in theme's tokens ship in the startup sheet, so each new theme costs ~0.5 KiB gzip whether or not anyone selects it. Moving per-theme palettes to lazily linked stylesheets (as theme webfonts already are) would take this back under the old ceiling, but it needs a first-paint story first: a late palette flashes default colors where a late font only swaps. * fix(control-ui): use Beacon's destructive foreground in chat confirmations The chat confirmation button paints from --danger under --media-foreground, a theme-invariant white, and each dark palette opts out of that pairing through a selector list in chat/grouped.css. Beacon defines a deliberately light --danger (#ffabab, chosen so status labels clear AAA) but was missing from that list, so its confirm button rendered white on pale pink at 1.80:1 — on the theme whose entire promise is contrast. Adds Beacon to the list, which routes it to --destructive over --destructive-foreground at 11.67:1. Also adds a guardrail for the bug class, since the selector list has to be extended by hand for every new dark theme and I have now missed it once. The test reads membership back out of grouped.css rather than restating it, resolves each theme's effective (background, color) pair, and holds it to that theme's floor. It reproduces this defect at 1.80:1 against the pre-fix stylesheet. Reported by ClawSweeper review on #130232.