dc5d073374
Prior-session prep for the v0.6 Project Manager, checkpointed on the v0.6-projects branch as a clean base for the parallel builders: - P1 (src/types.ts): ProjectInfo + ProjectSessionRef contracts; Config gains projectRoots/projectScanDepth/projectScanTtlMs/projectDirtyCheck. - P3 (src/config.ts): parseBool + parseProjectRoots helpers; parse the 4 PROJECT_* env vars with defaults ([homeDir]/4/10000/true). - UI: public/style.css indigo -> Amber (#e3a64a) accent theme. - Docs: FEATURE_PROJECT_MANAGER.md (1:N session design), THEME.md, docs/mockups/ (final-amber.png is the locked visual). Typecheck (backend + web) green. No behavior change to runtime code yet; P2/P4/P5/P6 implement the feature on top of this.
51 lines
2.7 KiB
Markdown
51 lines
2.7 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` | **金色底上的文字色**（深墨，保证对比度——金底配白字会糊） |
|
||
|
||
## 状态色（语义独立，勿与强调色混用）
|
||
|
||
连接状态点沿用既有语义，**不随主题强调色变**：
|
||
|
||
| Token | 值 | 含义 |
|
||
|-------|-----|------|
|
||
| `--green` | `#46d07f` | 已连接 connected |
|
||
| `--amber` | `#f5b14c` | 连接中 connecting |
|
||
| `--red` | `#ff6b6b` | 断开 / 出错 disconnected / error |
|
||
|
||
> Project 面板里的 session 状态语义（v0.6）：`working = --accent 金` · `waiting = --amber 琥珀(闪)` · `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`。
|