Files

Yaojia Wang 38274a5271 fix(projects): style the diff panel — 52 classes had no CSS at all

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.

2026-07-30 22:34:40 +02:00

3.0 KiB

Raw Blame History

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。

3.0 KiB Raw Blame History Unescape Escape