toor
5e1003ceb7
The project shipped a black-and-white theme that was only half converted: the login page looked right, the message page was halfway, and the settings page had not been started. This finishes the move to the CYBER reference in prototype_reference/. Colors now come from a single token source (styles/variables.scss), where every semantic color is declared twice: once as OKLCH for the CSS, and once as an RGB triple so translucent variants can be built as rgba(var(--*-rgb), alpha). Cyan is the system itself, amber means the user has to intervene, green means the machine is working, and red only ever means something broke. The RGB triples are derived from the OKLCH values so the two declarations cannot drift apart. Pages adopt the .cy-* shell classes from the reference (view, panel, kpis, tabs, grid, table, field) instead of ad-hoc markup, which is what makes 19 of 26 views consistent. The remaining seven are deliberately bespoke: chat streams, the kanban board, the workflow canvas, the terminal, and the missing-agent screen. The chart palette and the kanban column colors move into single-source modules so they cannot drift either. A new guard test rejects raw hex colors, named colors, and literal RGB triples anywhere in the client source, with an explicit exemption list for the places that genuinely cannot read a CSS variable. The existing chat semantics spec keeps the chat chain honest. No behavior changes: no logic, no i18n keys, no data structures, and the /chat-run event contract is untouched.
40 lines
1.9 KiB
Markdown
40 lines
1.9 KiB
Markdown
---
|
||
date: 2026-10-20
|
||
pr: pending
|
||
feature: Chat and group chat dark-theme residue cleanup
|
||
impact: Message attachments, file cards, audio blocks, thinking headers and tool detail headers now paint from the CYBER token set instead of the light-theme black/white washes, so they are visible against the dark surfaces. Purely visual; no message shapes, socket events, or emission timing changed.
|
||
---
|
||
|
||
# Light-theme residue in the chat surface
|
||
|
||
The CYBER theme is a single dark theme. A handful of surfaces inside the chat
|
||
chain still carried the light-theme habit of tinting with `rgba(0, 0, 0, α)`:
|
||
a 4% black wash reads as "slightly grey" on white, and as "nothing at all" on
|
||
`--bg-input`. Those surfaces had lost their fill entirely.
|
||
|
||
## What changed
|
||
|
||
| File | Surface | Before | After |
|
||
| --- | --- | --- | --- |
|
||
| `MarkdownRenderer.vue` | audio container, file card | `rgba(0,0,0,0.04)` | `--bg-input` |
|
||
| `MarkdownRenderer.vue` | file card hover | `rgba(0,0,0,0.08)` | `--bg-card-hover` |
|
||
| `MessageItem.vue` | attachment block | `rgba(0,0,0,0.04)` | `--bg-input` |
|
||
| `MessageItem.vue` | thinking header hover, tool row hover | `rgba(0,0,0,0.03)` | `rgba(255,255,255,0.05)` |
|
||
| `MessageItem.vue` | tool detail code header | `rgba(0,0,0,0.02)` | `rgba(255,255,255,0.02)` |
|
||
| `GroupMessageItem.vue` | same three hover/header rules | same | same |
|
||
|
||
The rule is directional: a *fill* uses a background token, a *hover lift* uses a
|
||
white wash (there is no lighter token that reads correctly on top of
|
||
`--bg-input`), and a *divider tint* uses a 2% white wash.
|
||
|
||
## Not changed
|
||
|
||
Message rendering, streaming, tool-call grouping, and the `/chat-run` event
|
||
contract. This fragment exists because the touched files sit on the chat chain
|
||
path, not because any behavior moved.
|
||
|
||
## Verification
|
||
|
||
`npm run harness:check` and `npm run build` pass. The existing
|
||
`tests/e2e/chat-cyber-semantics.spec.ts` still passes unchanged.
|