# 正式视觉系统与现有 token 映射 Type: grilling Status: resolved Labels: wayfinder:grilling Blocked by: 01, 02 ## Question 蓝湖正式视觉如何映射到现有驾驶舱 token 和组件 CSS?需要逐项裁定品牌、字体、字号、间距、面板层次、边框、底色、语义色、状态色、渐变、辉光、网格和扫描线:哪些替换现有 token,哪些保留为组件局部表现,哪些因缺少设计依据继续使用系统回退。 裁定必须保持现有一级模式、二级面板、地图与业务交互契约不变,并给出设计稿与现有结构冲突时的处理边界。 ## 进度 - 已认领(`Status: claimed`),阻塞票 01/02 均 resolved。 - 事实侧已自查:`styles/tokens.css` 现有 token 结构(`--u` 设计像素、底色/面板、主色、语义色 lv1–lv4+neutral、文字、字体、字号四档、间距三档、栏宽、层级、阴影);装饰性渐变/辉光为组件内散落 rgba 的例外声明;面板四角为 `CockpitPanel.vue` 内联 SVG data-URL;地图网格/扫描线/暗角与外壳氛围为代码生成装饰。 - 蓝湖侧色值/字号/字体明细仍待逐项人工盘点,本票只裁定映射规则,不预设蓝湖具体取值。 - 第一轮已确认:Q1=B(保留现有 token 名称,可新增语义 token);Q2=D(可复现效果进入 token/CSS,复杂纹理才进资源);Q3=B(面板优先 CSS/SVG,无法无损复现才切图);Q4=A(票 03 锁字体槽位,票 06 锁授权/回退);Q5=C(按需新增语义字号/间距 token,不建裸像素海量档位);Q6=B(`--u` 以蓝湖主画板宽度为基准);Q7=A(事件与点位继续共用语义调色板);Q8=A(本次只交付一套深色主题)。 - 第二轮已确认:Q9=B(同一 token 冲突时以主画板/首页画板为准,其他为局部例外);Q10=B(局部例外使用带语义的局部 token,记录适用组件/状态);Q11=C(1280px 优先文字可读、按钮可操作和不重叠,左右栏保持宽度自动换行,面板内纵向滚动并支持卷轴式展开/折叠,装饰可缩放/隐藏/降级);Q12=基于默认态推导缺失状态,但推导状态必须标记为非蓝湖确认;Q13=B(可读性不足时提高对比度/线宽/不透明度并记录偏差);Q14=C(静态 token 检查、四模式结构回归、主画板与 `/cockpit` 对照、1280px 检查)。 - 第三轮已确认:Q15=B(局部 token 使用视觉语义+适用状态命名,必须记录消费点);Q16=B(缺失状态按统一规则推导并标记为非蓝湖确认);Q17=B(左右栏宽度/标题/收放控制稳定,内容区独立纵向滚动,展开折叠只改变可视高度);Q18=C(主画板为默认值,仅可解释的组件/状态/模式差异建立局部 token,未解释冲突回设计确认)。 - Q19 已确认:B(`## Answer` 记录决策,同时产出独立视觉 token 规格 Markdown)。 ## Answer 已形成独立规格:[正式视觉系统与现有 token 映射规格](../specs/03-visual-token-mapping.md)。最终裁定如下: 1. 保留现有 token 名称和消费关系,可按需新增语义 token;不重建全套命名,不散落裸色值/裸像素。 2. 可由 CSS/SVG/渐变/几何无损复现的视觉效果继续代码化;复杂位图纹理、噪声和无法无损复现的光效才进入运行时资源。 3. 面板外框和切角优先使用可伸缩的 CSS/SVG;无法无损复现时才切图。 4. 票 03 锁定 `--font`、`--num` 等字体语义槽位,字体授权、Web 字体文件、加载失败和回退由票 06 裁定。 5. 字号和间距保留语义 token,按实际消费新增必要档位,不建立大量裸像素档位。 6. `--u` 以蓝湖主画板宽度为设计基准;主画板为 1920px 时保持现有基准。 7. 事件等级与点位状态继续共用 `--lv1`–`--lv4` 语义调色板;如设计稿要求拆色,另立决策,不在本票隐式修改既有语义。 8. 本次只交付一套深色主题。 9. 全局冲突以主画板/首页画板为默认值;只有能明确绑定到组件、状态或模式的差异才建立局部 token。局部 token 使用“视觉语义 + 状态”命名并记录消费点,未解释的冲突回设计确认。 10. 1280px 下优先文字可读、按钮可操作和面板不重叠;左右栏保持宽度自动换行,面板内容区独立纵向滚动,支持卷轴式展开/折叠,装饰可缩放/隐藏/降级。 11. 蓝湖缺少状态稿时,按统一规则从默认态推导 hover/active/selected/disabled/loading/error,但必须标记为非蓝湖确认;各组件不得自行发明不同规则。 12. 低对比/细线影响运行时可读性时,允许提高对比度、线宽或不透明度,并记录偏差。 13. 验收必须同时包含 token/引用静态检查、四模式结构回归、蓝湖主画板与真实 `/cockpit` 对照、1280px 检查和局部例外/推导状态清单。 ## 真实状态与下一步 - 状态:已完成并关闭。 - 交付物:`specs/03-visual-token-mapping.md`。 - 下一步:推进[运行时资产 manifest 与版本策略](04-runtime-asset-manifest-and-versioning.md)、[监测点与监测设备位置符号映射](05-point-device-marker-mapping.md)和[字体授权与缺失资源降级](06-font-and-fallback-policy.md)。