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.
2.7 KiB
2.7 KiB
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。