feat(web): unify appearance and session surfaces

docs/architecture/theme-token-optimization.md

@@ -65,6 +65,16 @@ Token 只按职责分四层：
 兼容别名不是第五层。它只服务已确认的迁移调用方，必须声明 canonical 目标、owner 和移除条件；新代码不得继续
 读取历史别名。
 
+应用结构层可以使用 `--bf-appearance-token-chrome-*` 这一窄化的 component token 家族，表达导航、标签栏和
+工作台外壳相对于内容面的稳定反相关系。它由 Web UI builtin Appearance 投影拥有，只能在结构层 scope 内重绑定
+普通 semantic token；未声明独立 chrome palette 的内置或导入外观沿用所属 light/dark 基础外观的内容色，不能让
+组件按 Appearance ID 硬编码颜色特例。
+
+共享设置页可以使用 `--bf-appearance-token-config-page-*` 这一窄化的 component token 家族，分别表达 section
+块面、section 边界、行分隔线与 hover 填充。它只由 `ConfigPageLayout` 消费，默认映射回普通 element/border
+semantic token；仅当某个 Appearance 需要让“信息块面”和“表单控件边界”采用不同层级时才覆写，不能扩散成
+通用卡片色板或按 Appearance ID 编写 CSS 特例。
+
 新增颜色按以下顺序判断：
 
 1. 语义相同：复用现有 Token。

scripts/theme-color-governance-baseline.json

@@ -252,10 +252,10 @@
       "max": 0
     },
     "colorDomainScopes.themePreset.occurrences": {
-      "max": 158
+      "max": 153
     },
     "colorDomainScopes.themePreset.uniqueColors": {
-      "max": 112
+      "max": 111
     },
     "colorDomainScopes.themeRuntime.occurrences": {
       "max": 0

scripts/theme-color-near-pair-decisions.json

@@ -23,10 +23,10 @@
     {
       "root": "src/web-ui/src",
       "domain": "themePreset",
-      "key": "#fafafa <-> #ffffff",
+      "key": "#fdfdfd <-> #ffffff",
       "decision": "keep",
       "owner": "src/web-ui/src/infrastructure/appearance/builtins",
-      "reason": "The default Light primary background intentionally uses the requested off-white surface while secondary, elevated, and scene surfaces remain pure white. These adjacent roles need a restrained but visible hierarchy.",
+      "reason": "The default Light navigation and app background intentionally uses the sampled near-white surface while secondary, elevated, editor, and scene surfaces remain pure white. These adjacent roles preserve the reference hierarchy without introducing a tinted canvas.",
       "reevaluateWhen": "Only after a focused Light-theme surface review proves primary and elevated surfaces no longer need separate values."
     },
     {
@@ -44,7 +44,7 @@
       "key": "#f3f3f5 <-> #faf8f0",
       "decision": "keep",
       "owner": "src/web-ui/src/infrastructure/appearance/builtins",
-      "reason": "China Style paper uses a warm first-paint surface while #f3f3f5 is the default Light editor line highlight and a button state stop. This is cross-theme and renderer identity, not a duplicate role.",
+      "reason": "China Style paper uses a warm first-paint surface while #f3f3f5 is the default Light soft surface and a dark-theme primary button text stop. This is cross-theme and component identity, not a duplicate role.",
       "reevaluateWhen": "Only after China Style paper identity is intentionally neutralized."
     },
     {

scripts/theme-visual-governance-contract.json

@@ -7,9 +7,9 @@
       "owner": "src/web-ui/src/app/layout; src/web-ui/src/app/components/NavPanel",
       "platforms": ["desktop-webview", "web"],
       "formFactors": ["desktop", "narrow"],
-      "themes": ["dark", "light", "system"],
+      "themes": ["dark", "light", "system", "bitfun-monochrome"],
       "states": ["default", "hover", "focus", "selected", "disabled"],
-      "tokenFamilies": ["--bf-appearance-token-color-bg-*", "--bf-appearance-token-color-text-*", "--bf-appearance-token-element-bg-*", "--bf-appearance-token-border-*", "--bitfun-nav-*"],
+      "tokenFamilies": ["--bf-appearance-token-color-bg-*", "--bf-appearance-token-color-text-*", "--bf-appearance-token-chrome-*", "--bf-appearance-token-element-bg-*", "--bf-appearance-token-border-*", "--bitfun-nav-*"],
       "evidence": [
         {
           "type": "theme-color-audit",
@@ -31,7 +31,7 @@
       "owner": "src/web-ui/src/flow_chat; src/web-ui/src/app/scenes/session",
       "platforms": ["desktop-webview", "web"],
       "formFactors": ["desktop", "narrow"],
-      "themes": ["dark", "light", "system"],
+      "themes": ["dark", "light", "system", "bitfun-monochrome"],
       "states": ["default", "streaming", "hover", "focus", "selected", "error", "empty"],
       "tokenFamilies": ["--bf-appearance-token-flowchat-*", "--bf-appearance-token-tool-card-*", "--bf-appearance-token-color-bg-scene", "--bf-appearance-token-color-text-*", "--bf-appearance-token-color-accent-*"],
       "evidence": [
@@ -175,9 +175,9 @@
       "owner": "src/web-ui/src/app/scenes/settings; src/web-ui/src/infrastructure/appearance",
       "platforms": ["desktop-webview", "web"],
       "formFactors": ["desktop", "narrow"],
-      "themes": ["dark", "light", "system"],
+      "themes": ["dark", "light", "system", "bitfun-monochrome"],
       "states": ["default", "selected", "hover", "focus", "imported-appearance", "system-appearance"],
-      "tokenFamilies": ["--bf-appearance-token-color-accent-*", "--bf-appearance-token-color-bg-*", "--bf-appearance-token-color-text-*"],
+      "tokenFamilies": ["--bf-appearance-token-color-accent-*", "--bf-appearance-token-color-bg-*", "--bf-appearance-token-color-text-*", "--bf-appearance-token-border-*", "--bf-appearance-token-element-bg-*", "--bf-appearance-token-config-page-*"],
       "evidence": [
         {
           "type": "theme-color-audit",

scripts/validate-theme-visual-contract.mjs

@@ -21,6 +21,7 @@ const ALLOWED_THEMES = new Set([
   'system',
   'bitfun-dark',
   'bitfun-light',
+  'bitfun-monochrome',
   'bitfun-midnight',
   'bitfun-china-style',
   'bitfun-china-night',

src/apps/desktop/src/generated/startup_appearance_bootstrap.json

@@ -5,13 +5,23 @@
   "appearances": [
     {
       "id": "bitfun-light",
-      "bgPrimary": "#fafafa",
+      "bgPrimary": "#fdfdfd",
       "bgSecondary": "#ffffff",
       "bgScene": "#ffffff",
       "isLight": true,
-      "textPrimary": "#1e293b",
-      "textMuted": "#64748b",
-      "accentColor": "#64748b"
+      "textPrimary": "#1c1c1f",
+      "textMuted": "#6a6a6a",
+      "accentColor": "#101a27"
+    },
+    {
+      "id": "bitfun-monochrome",
+      "bgPrimary": "#1c1c1f",
+      "bgSecondary": "#262626",
+      "bgScene": "#ffffff",
+      "isLight": true,
+      "textPrimary": "#f3f3f5",
+      "textMuted": "#9a9a9a",
+      "accentColor": "#f3f3f5"
     },
     {
       "id": "bitfun-slate",

src/crates/assembly/core/src/agentic/tools/implementations/generated/appearance_prompt_snapshots.json

@@ -6,19 +6,36 @@
     {
       "id": "bitfun-light",
       "mode": "light",
-      "bgPrimary": "#fafafa",
+      "bgPrimary": "#fdfdfd",
       "bgSecondary": "#ffffff",
       "bgScene": "#ffffff",
-      "textPrimary": "#1e293b",
-      "textMuted": "#64748b",
-      "accent500": "#64748b",
-      "accent600": "#475569",
-      "borderBase": "rgba(100, 116, 139, 0.22)",
-      "elementBase": "rgba(15, 23, 42, 0.09)",
+      "textPrimary": "#1c1c1f",
+      "textMuted": "#6a6a6a",
+      "accent500": "#101a27",
+      "accent600": "#1c1c1f",
+      "borderBase": "rgba(16, 26, 39, 0.15)",
+      "elementBase": "rgba(16, 26, 39, 0.09)",
+      "radiusBase": "8px",
+      "spacing4": "16px",
+      "shadowBase": "0 4px 8px rgba(16, 26, 39, 0.07)",
+      "styleNotes": "Light appearance - Crisp white surfaces, soft neutral grays, deep navy actions"
+    },
+    {
+      "id": "bitfun-monochrome",
+      "mode": "light",
+      "bgPrimary": "#ffffff",
+      "bgSecondary": "#ffffff",
+      "bgScene": "#ffffff",
+      "textPrimary": "#1c1c1f",
+      "textMuted": "#6a6a6a",
+      "accent500": "#1c1c1f",
+      "accent600": "#000000",
+      "borderBase": "rgba(16, 26, 39, 0.15)",
+      "elementBase": "rgba(16, 26, 39, 0.09)",
       "radiusBase": "8px",
       "spacing4": "16px",
-      "shadowBase": "0 4px 8px rgba(71, 85, 105, 0.1)",
-      "styleNotes": "Light appearance - Neutral gray surfaces, black primary actions"
+      "shadowBase": "0 4px 8px rgba(16, 26, 39, 0.07)",
+      "styleNotes": "Black-and-white contrast appearance - Deep black chrome, bright white workspace, soft neutral blocks"
     },
     {
       "id": "bitfun-slate",

src/web-ui/index.html

@@ -10,7 +10,7 @@
       (function () {
         var dark = '#121214';
         /* Keep in sync with infrastructure/appearance/builtins/light.ts colors.background.primary */
-        var light = '#fafafa';
+        var light = '#fdfdfd';
         var m = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
         var root = document.documentElement;
         var fallbackMessages = {
@@ -85,7 +85,7 @@
       }
       @media (prefers-color-scheme: light) {
         html {
-          background-color: #fafafa;
+          background-color: #fdfdfd;
         }
       }