38274a5271
The project-detail Git panel's diff viewer emitted 52 class names that style.css had no rule for, so it rendered as browser defaults: Working / Staged / the base picker / ✕ Close as native OS buttons on a dark warm panel, and a diff body with no monospace font and no +/- colouring at all. The user's screenshot showed the toolbar; the audit (literal AND template-literal class names) found the rest. Adds the B1 diff-viewer block and the proj-*/tl-* rules, all on :root tokens, following the file's existing two-button-role doctrine. Also fixes, in passing: - .df-commit-btn hardcoded #1a1712 where THEME.md mandates var(--on-accent) for text on a gold background - .proj-pr-hidden — a "hidden" state class with no rule, so it never hid - .proj-dot-stuck — ClaudeStatus has 'stuck' but only four of the five dots were styled, so a stuck session was the same colour as "no signal" - --warn-wash: a derived token for the deletion wash, documented in THEME.md, so a re-skin moves the wash with --warn Notable decisions, recorded in the CSS comments: - .proj-tl-container gets NO height cap. Every capping mechanism tried (overflow-y:auto, mask-image, an ::after fade, a :has() row gate) cost more than the height it saved — the 5s wipe-and-re-append render loop cannot host a scroll position, and mask-clip:border-box ate the well's own border. It grew freely before this CSS existed; maxEvents=50 bounds it. - The horizontal scroller stays per-hunk on .df-lines. Hoisting it to .df-file would drag the file path out of view when you scroll right. - .df-file > .df-file-header keeps a smaller unscoped padding: the terminal page's .approval-preview also calls renderDiffFile(). Verified against the real DOM in a browser at 900px and 390x844 via a throwaway harness (removed before commit), not from the CSS text alone. typecheck exit 0; 2216 unit + 27 e2e tests pass.
52 lines
3.0 KiB
Markdown
52 lines
3.0 KiB
Markdown
# Theme — Amber 琥珀金（设计 token 源）
|
||
|
||
> 全站视觉的**单一事实来源**。强调色全部来自 `--accent / --accent-2 / --accent-soft`，
|
||
> 改这几个 token 即可整体换肤。定义在 `public/style.css` 的 `:root`。
|
||
> 选型经过 10 套候选对比（见 `docs/mockups/palette-compare*.png`），最终定为 **Amber 琥珀金**：
|
||
> 暖中性底 + 金色强调，暗色护眼、长时间看不累，且明确避开蓝/紫/绿。
|
||
|
||
## 调色板 (Design Tokens)
|
||
|
||
| Token | 值 | 用途 |
|
||
|-------|-----|------|
|
||
| `--bg` | `#100f0d` | 终端 / 最深表面（暖中性，非冷蓝灰） |
|
||
| `--surface-1` | `#181613` | 标签栏、键栏 |
|
||
| `--surface-2` | `#1f1c17` | 标签、按钮、卡片 |
|
||
| `--surface-3` | `#2a2620` | hover / active |
|
||
| `--border` | `rgba(255,255,255,.07)` | 普通描边 |
|
||
| `--border-strong` | `rgba(255,255,255,.14)` | 强描边 |
|
||
| `--text` | `#ece9e3` | 主文字（暖白） |
|
||
| `--text-dim` | `#a8a299` | 次要文字 |
|
||
| `--text-faint` | `#6f6a61` | 弱化文字 |
|
||
| **`--accent`** | **`#e3a64a`** | **强调色：金色**（按钮、链接、选中、聚焦环） |
|
||
| `--accent-2` | `#c9892f` | 深金（渐变 / hover） |
|
||
| `--accent-soft` | `rgba(227,166,74,.15)` | 强调色半透明（选中底、chip、聚焦光晕） |
|
||
| `--on-accent` | `#1a1305` | **金色底上的文字色**（深墨，保证对比度——金底配白字会糊） |
|
||
| `--warn-wash` | `color-mix(in srgb, var(--warn) 24%, transparent)` | `--warn` 的 24% 半透明：diff 删除行底色。**由 `--warn` 派生**，换肤自动跟随，勿改写成 rgba 字面量（`--warn` 见 `:root` 的 Git 面板语义） |
|
||
|
||
## 状态色（语义独立，勿与强调色混用）
|
||
|
||
连接状态点沿用既有语义，**不随主题强调色变**：
|
||
|
||
| Token | 值 | 含义 |
|
||
|-------|-----|------|
|
||
| `--green` | `#46d07f` | 已连接 connected |
|
||
| `--amber` | `#f5b14c` | 连接中 connecting |
|
||
| `--red` | `#ff6b6b` | 断开 / 出错 disconnected / error |
|
||
|
||
> Project 面板里的 session 状态语义（v0.6）：`working = --accent 金` · `waiting = --amber 琥珀(闪)` · `stuck = --warn` · `idle = 中性灰 #8b8a86` · `dirty = 暖琥珀`。
|
||
|
||
## 接入约定（改主题只改这里）
|
||
|
||
- 任何"强调"视觉 **只用 token**，不要写死颜色（`#7c8cff` 这类硬编码已清除）。
|
||
- **金色当背景时，文字必须用 `var(--on-accent)`**（深墨），不要用 `#fff`。
|
||
当前 4 处 accent 背景按钮已统一改为 `--on-accent`：`.settings-opt.active` / `.hist-resume` 等。
|
||
- 换肤 = 替换 `:root` 的 `--accent / --accent-2 / --accent-soft / --on-accent`（必要时连 `--bg/--surface-*` 一起）。
|
||
- 历史：原 indigo 靛蓝 `#7c8cff` 已于本次替换为 Amber（git 可回溯）。
|
||
|
||
## 候选存档
|
||
|
||
10 套对比预览（暖底、无蓝/紫/绿）：`docs/mockups/palette-compare.png`（Amber/Copper/Mono/Rose）、
|
||
`docs/mockups/palette-compare-2.png`（Ruby/Sand/Brass/Apricot/Slate/Clay）。
|
||
最终全面板预览：`docs/mockups/final-amber.png`。
|