diff --git a/docs/architecture/theme-token-optimization.md b/docs/architecture/theme-token-optimization.md index 8defb48b4..6cddb4f51 100644 --- a/docs/architecture/theme-token-optimization.md +++ b/docs/architecture/theme-token-optimization.md @@ -1,6 +1,6 @@ # 主题与颜色 Token 优化方案 -> 当前基线：`gcwing/main` 的 `8d85e236`，扫描日期为 2026-06-18。 +> 当前治理基线以 `scripts/theme-color-governance-baseline.json` 和审计脚本输出为准。 本文档用于梳理 BitFun 前端主题、硬编码颜色、重复 token、近似色冗余、 命名漂移和后续治理方案。目标不是把所有看起来相近的颜色都合并，而是让 @@ -53,9 +53,10 @@ ## 当前现状 -基于最新 `gcwing/main` 的扫描结果，当前 PR 已把普通 app/component 层的 raw color -literal、token-equivalent app literal 和普通组件 near color pair 收敛到 0。剩余色值 -全部落在明确 owner 的专用域：theme preset/runtime、token contract、boundary fallback、 +基于当前审计口径，普通 +app/component 层的 raw color literal、token-equivalent app literal、普通组件 near color pair +和内部旧 alias 读取都已收敛到 0。剩余色值全部落在明确 owner 的专用域： +theme preset/runtime、token contract、boundary fallback、 Mermaid、Monaco/editor、Prism syntax、terminal ANSI、language identity 和 UI exception registry。 @@ -65,8 +66,8 @@ registry。 | 指标 | 当前基线 | | --- | ---: | -| 扫描的生产前端文件数 | 1526 | -| 忽略的测试文件数 | 213 | +| 扫描的生产前端文件数 | 1535 | +| 忽略的测试文件数 | 221 | | 包含颜色字面量的文件数 | 26 | | 颜色字面量出现次数 | 1718 | | 唯一颜色字面量数量 | 913 | @@ -93,16 +94,18 @@ registry。 | non-contract dynamic inputs | 0 | | non-contract component-private vars | 0 | -本轮补充了机器可校验的治理契约，用于把“可删除债务”和“必须保留的兼容/边界” +审计补充了机器可校验的治理契约，用于把“可删除债务”和“必须保留的兼容/边界” 分开： | 治理契约指标 | 当前值 | 说明 | | --- | ---: | --- | -| compatibility alias contracts | 63 | 显式列出历史别名、canonical 目标、owner、保留原因和退场条件 | -| compatibility alias 使用 key | 68 | 包含 `--radius-*`、`--spacing-*` 展开的实际使用 key；这些 key 不能直接删除 | -| compatibility alias 使用次数 | 609 | 当前仍是重要兼容面，后续迁移应逐步降低并同步降低 baseline | +| compatibility alias contracts | 64 | 显式列出历史别名、canonical 目标、owner、保留原因和退场条件；旧 key 只作为对外兼容定义保留 | +| compatibility alias 直接使用 key | 0 | 产品代码不再通过 `var(--legacy-alias)` 读取旧 key；新增直接读取会被 baseline 拦截 | +| compatibility alias 直接使用次数 | 0 | 旧 key 定义仍存在，但内部样式读取统一使用 canonical token | | stale compatibility alias contracts | 0 | 防止 registry 保留已经没有静态/runtime 定义的旧 key | | compatibility alias family contracts | 2 | `--radius-* -> --size-radius-*`、`--spacing-* -> --size-gap-*` | +| compatibility alias family 直接使用 key | 0 | `--radius-*`、`--spacing-*` 旧 family 不再被内部 `var()` 读取 | +| compatibility alias family 直接使用次数 | 0 | generated widget frame 同时暴露 canonical 与 legacy family，内部 shell 读取 canonical family | | stale compatibility alias family contracts | 0 | 防止动态 family 或 canonical family 失配 | | missing compatibility alias family canonicals | 0 | 防止新增 `--radius-x` / `--spacing-x` 但缺少对应 canonical key | | fallback token contracts | 7 | 每个 `var(--token, fallback)` 边界 fallback 都有 owner、reason 和 boundary | @@ -140,7 +143,7 @@ registry。 | `src/web-ui/src/shared/theme/themeBoundaryFallbacks.ts` | 22 | isolated surface 和截图兜底值；集中 owner | | `src/web-ui/src/shared/theme/syntaxHighlightAccents.ts` | 18 | Prism syntax palette；不泛化到 app token | -当前 fallback token 都已进入 allowlist，但仍需要逐项决策是否保留边界 fallback： +当前 fallback token 都已进入 fallback contract registry，但仍需要逐项决策是否保留边界 fallback： | fallback token | 次数 | | --- | ---: | @@ -156,25 +159,25 @@ fallback 决策表： | fallback token | 决策 | 依据 | 后续动作 | | --- | --- | --- | --- | -| `--surface-stagger-index` | 保留 | 运行时 inline 动画序号，`0` 是安全首帧/无动画默认值 | 不迁移为颜色 token；保持 allowlist | +| `--surface-stagger-index` | 保留 | 运行时 inline 动画序号，`0` 是安全首帧/无动画默认值 | 不迁移为颜色 token；保持 contract | | `--mission-control-group-color` | 保留 | 分组身份色由数据或 inline style 驱动，静态删除会丢失未设置分组色时的 accent 兜底 | 后续 content-canvas token 抽取时复核是否改为组件根默认值 | -| `--char-index` | 保留 | StreamText 每字符动画偏移，`0` fallback 是无序号渲染的安全默认值 | 不迁移为颜色 token；保持 allowlist | -| `--gallery-grid-min` | 保留 | runtime layout sizing 输入，不属于颜色债务；`320px` 保持 responsive grid 下限 | 保持 allowlist，后续只在 layout token 方案中处理 | -| `--gallery-skeleton-height` | 保留 | runtime skeleton sizing 输入，不属于颜色债务；`140px` 保持占位高度稳定 | 保持 allowlist，后续只在 layout token 方案中处理 | +| `--char-index` | 保留 | StreamText 每字符动画偏移，`0` fallback 是无序号渲染的安全默认值 | 不迁移为颜色 token；保持 contract | +| `--gallery-grid-min` | 保留 | runtime layout sizing 输入，不属于颜色债务；`320px` 保持 responsive grid 下限 | 保持 contract，后续只在 layout token 方案中处理 | +| `--gallery-skeleton-height` | 保留 | runtime skeleton sizing 输入，不属于颜色债务；`140px` 保持占位高度稳定 | 保持 contract，后续只在 layout token 方案中处理 | | `--primary-color` | 延后 | Markdown 嵌入内容可覆盖 primary accent，边界语义不同于全局 app primary | Markdown token 抽取时决定是否转为 `--markdown-primary-color` contract | -| `--scene-viewport-border-width` | 保留 | viewport border width 是 runtime layout override，`1px` fallback 保持默认边界可见 | 保持 allowlist，后续只在 scene layout token 方案中处理 | +| `--scene-viewport-border-width` | 保留 | viewport border width 是 runtime layout override，`1px` fallback 保持默认边界可见 | 保持 contract，后续只在 scene layout token 方案中处理 | 阶段状态： | 阶段 | 状态 | 当前判断 | | --- | --- | --- | | Phase 0：基线与工具 | 已完成主体 | 审计脚本可区分测试文件、fallback token、dynamic families 和 exception domains | -| Phase 1：canonical token 契约 | 本轮强化 | compatibility alias registry 已记录 63 个显式 alias 和 2 个 alias family，包含 canonical 目标、owner、保留原因和退场条件 | -| Phase 2：精确重复合并 | 本轮完成 | token-equivalent app literal 已从 12/10 清零；截图兜底、language identity 和 review/agent/insights 固定色已迁入显式 registry | -| Phase 3：legacy fallback 迁移 | 本轮强化 | fallback unique token 保持 7，且全部进入 fallback contract registry；新增未登记 fallback 会被审计报告和 baseline 拦截 | -| Phase 4：组件 token 抽取 | 本轮完成 | CodeEditor、StreamText、ChatInputPixelPet、ReferencesPanel、AgentCompanion、tool-card、editor 组件装饰色已抽为组件私有 RGB channel 或复用 contract token | -| Phase 5：近似色合并 | 本轮完成 | 普通组件 near pair 已清零；极近似视觉色只在不相邻或不承担状态差异时合并，Monaco/terminal/Mermaid/syntax 专用 palette 不强行合并 | -| Phase 6：防回退约束 | 本轮强化 | baseline 已同步到 component/non-token=0、appUi=0、token-equivalent=0、nearPair=0，并新增 alias、fallback、domain contract 防回退指标 | +| Phase 1：canonical token 契约 | 已完成调用方迁移 | compatibility alias registry 已记录 64 个显式 alias 和 2 个 alias family；内部 `var()` 读取已清零，定义仍保留给旧主题、payload 和外部内容 | +| Phase 2：精确重复合并 | 已完成主体 | token-equivalent app literal 已清零；截图兜底、language identity 和 review/agent/insights 固定色已迁入显式 registry | +| Phase 3：legacy fallback 迁移 | 已强化 | fallback unique token 保持 7，且全部进入 fallback contract registry；新增未登记 fallback 会被审计报告和 baseline 拦截 | +| Phase 4：组件 token 抽取 | 已完成主体 | CodeEditor、StreamText、ChatInputPixelPet、ReferencesPanel、AgentCompanion、tool-card、editor 组件装饰色已抽为组件私有 RGB channel 或复用 contract token | +| Phase 5：近似色合并 | 已完成主体 | 普通组件 near pair 已清零；极近似视觉色只在不相邻或不承担状态差异时合并，Monaco/terminal/Mermaid/syntax 专用 palette 不强行合并 | +| Phase 6：防回退约束 | 已强化 | baseline 已同步到 component/non-token=0、appUi=0、token-equivalent=0、nearPair=0、compatibility alias 读取=0，并保留 fallback、domain contract 防回退指标 | Phase 5 决策记录： @@ -193,7 +196,7 @@ Phase 5 决策记录： | Monaco theme palette | classify as exception | `tools/editor/themes/bitfun-dark.theme.ts` | 该文件是 Monaco theme 完整色板，不是普通 app UI；归入 editor/exception 后不再被误计为 component raw color | | Flow Chat capture fallback | boundary fallback | `ExportImageButton.tsx`、`captureElementToDownloadsPng.tsx` -> `themeBoundaryFallbacks.ts` | `#121214` 只在 root theme 变量不可用时兜底截图背景，集中 owner 后避免截图工具重复携带 raw fallback | -Phase 6 首轮约束： +Phase 6 防回退约束： | 约束 | 当前值 | baseline | 作用 | | --- | ---: | ---: | --- | @@ -204,6 +207,10 @@ Phase 6 首轮约束： | `tokenAliasLiterals.occurrences` | 0 | 0 | 阻止重新出现可映射到 token 的 app literal | | `colorDomainScopes.appUi.occurrences` | 0 | 0 | 阻止未归类 app UI 色值回涨 | | CSS var governance errors | 0 | 0 | 保持 unresolved、fallback-only、non-contract 和 dynamic family 错误为零 | +| `compatibilityAliases.usedUnique` | 0 | 0 | 阻止产品代码重新通过旧 alias key 读取主题变量 | +| `compatibilityAliases.occurrences` | 0 | 0 | 阻止历史 alias 调用点回涨 | +| `compatibilityAliases.familyUsedUnique` | 0 | 0 | 阻止 `--radius-*`、`--spacing-*` 旧 family 重新成为内部读取面 | +| `compatibilityAliases.familyOccurrences` | 0 | 0 | 阻止旧 family 读取次数回涨 | | `compatibilityAliases.staleRegisteredUnique` | 0 | 0 | 防止兼容 alias registry 保留没有定义或 canonical 目标缺失的 key | | `compatibilityAliases.staleRegisteredFamilyUnique` | 0 | 0 | 防止 `--radius-*`、`--spacing-*` 这类动态 family 与 canonical family 失配 | | `compatibilityAliases.missingCanonicalUnique` | 0 | 0 | 防止 family alias 具体 key 缺失对应 canonical key | @@ -655,7 +662,7 @@ semantic token 描述产品级语义，应作为共享 UI 的默认使用层。 交付物： - 对组件中新 app raw color 的 lint 或 audit 检查。 -- 已知 exception file 与 namespace allowlist。 +- 已知 exception file、namespace contract 与 owner。 - compatibility alias、fallback token、color domain 的机器可校验 owner/reason contract。 - 覆盖 app-shell、Flow Chat、tool card/review、editor/diff、terminal、Mermaid/Markdown、 generated widget、theme settings 和 mobile web 的视觉证据契约。 @@ -680,10 +687,11 @@ semantic token 描述产品级语义，应作为共享 UI 的默认使用层。 | git/diff 色被当作普通 success/error | added/deleted/changed/conflict 扫描效率下降。 | 使用专用 git/diff token，只有复核后才 alias 到 app intent。 | | 主题个性被抹平 | 用户选择主题的价值下降。 | theme preset 保留自己的 primitive/accent 映射。 | | fallback 先删、alias 后补 | embedded 或 early render surface 样式丢失。 | 先加 alias，再删除 fallback。 | +| 兼容 alias 读点清零时误删定义 | 旧主题、生成式 widget、host payload 或外部自定义内容读取旧 key 时样式丢失。 | 只迁移内部 `var()` 读取；`tokens.scss`、runtime 注入和 widget shell 继续暴露 legacy key。 | | 静态 token 与运行时 token 不一致 | widget、SCSS、runtime theme 注入结果不一致。 | `tokens.scss`、`ThemeService.ts`、`themePayload.ts` 同阶段对齐。 | | 动态 CSS 变量 key 被误判为未定义 | inline style 或数据驱动变量失去兜底，导致特定卡片、标签或分组颜色缺失。 | 对动态 key 建立运行时设置清单；删除 fallback 前补组件根默认值或保留边界 fallback。 | | contrast 验证不可信 | 可访问性回归可能漏掉。 | 先实现真实 contrast 检查，再声称可访问性改善。 | -| 迁移 PR 过大 | review 疲劳导致视觉回归漏审。 | 按 surface 拆 PR，每个 PR 附指标和截图。 | +| 迁移 PR 过大 | review 疲劳导致视觉回归漏审。 | 按可验证的大块 contract/surface 组织 PR；每个 PR 附指标，避免拆成难以形成完整治理收益的零碎提交。 | | editor/terminal 颜色被强行泛化 | 代码语法和 terminal 语义下降。 | 建立 exception namespace，而不是直接套普通 app token。 | ## 候选决策 @@ -792,8 +800,8 @@ alpha 差异经常承担 elevation 和交互状态，不应全部压成一个值 | 指标 | 目标 | | --- | --- | | 组件文件 raw color literal | 每个迁移 PR 递减。 | -| 组件级 fallback literal | 兼容 alias 落地后递减。 | -| 未定义或历史 token 使用 | 除文档化 alias 外逐步清零。 | +| 组件级 fallback literal | 明确边界 contract 后递减。 | +| 未定义或历史 token 使用 | 内部 compatibility alias `var()` 读取保持 0；新增旧 key 读取必须先说明兼容边界。 | | token 文件中的精确重复 literal | 改为 alias 表达。 | | 近似色合并候选 | 每个都有 `merge`、`defer` 或 `do not merge` 决策。 | | 视觉回归 | 已复核 surface 无回归。 | @@ -805,7 +813,7 @@ alpha 差异经常承担 elevation 和交互状态，不应全部压成一个值 | app 级 raw color literal | 普通组件中趋近于 0。 | | unique app color literal | 进入 token 层后受预算约束，不再随组件增长。 | | undocumented component color | 0。 | -| exception namespace color | 有 allowlist 和 owner。 | +| exception namespace color | 有 contract 和 owner。 | ## Review Checklist diff --git a/scripts/theme-color-governance-baseline.json b/scripts/theme-color-governance-baseline.json index cf2ce1b8c..18c483ddc 100644 --- a/scripts/theme-color-governance-baseline.json +++ b/scripts/theme-color-governance-baseline.json @@ -15,13 +15,13 @@ "max": 0 }, "compatibilityAliases.registeredUnique": { - "max": 63 + "max": 64 }, "compatibilityAliases.usedUnique": { - "max": 68 + "max": 0 }, "compatibilityAliases.occurrences": { - "max": 608 + "max": 0 }, "compatibilityAliases.staleRegisteredUnique": { "max": 0 @@ -30,10 +30,10 @@ "max": 2 }, "compatibilityAliases.familyUsedUnique": { - "max": 2 + "max": 0 }, "compatibilityAliases.familyOccurrences": { - "max": 51 + "max": 0 }, "compatibilityAliases.staleRegisteredFamilyUnique": { "max": 0 diff --git a/scripts/theme-css-var-contract.mjs b/scripts/theme-css-var-contract.mjs index 9c3a5743a..a17400fee 100644 --- a/scripts/theme-css-var-contract.mjs +++ b/scripts/theme-css-var-contract.mjs @@ -396,6 +396,13 @@ export const TOKEN_COMPATIBILITY_ALIAS_CONTRACTS = [ reason: 'Primary currently means the active accent midpoint; it is kept as compatibility for older primary-button and focus selectors.', removal: 'Retire only after primary action tokens are componentized and widget payload no longer exports this key.', }, + { + key: '--color-primary-rgb', + canonical: '--color-accent-500-rgb', + owner: 'src/web-ui/src/component-library/styles/tokens.scss; src/web-ui/src/infrastructure/theme/core/ThemeService.ts', + reason: 'Primary RGB channels are historical accent channels used for alpha composition; the canonical name follows the accent scale.', + removal: 'Retire after alpha-composition callers and generated widget payload stop exporting primary-rgb.', + }, { key: '--color-primary-hover', canonical: '--color-accent-600', diff --git a/scripts/theme-visual-governance-contract.json b/scripts/theme-visual-governance-contract.json index 46f46f7bb..44ef53cb7 100644 --- a/scripts/theme-visual-governance-contract.json +++ b/scripts/theme-visual-governance-contract.json @@ -22,7 +22,7 @@ } ], "risks": [ - "Short legacy aliases such as --color-primary and --text-secondary are still used by shell-adjacent components.", + "Legacy aliases remain exported for compatibility but must not reappear as internal component reads.", "System theme resolution must not assume desktop-only media query behavior." ] }, @@ -33,7 +33,7 @@ "formFactors": ["desktop", "narrow"], "themes": ["dark", "light", "system"], "states": ["default", "streaming", "hover", "focus", "selected", "error", "empty"], - "tokenFamilies": ["--flowchat-*", "--tool-card-*", "--color-bg-flowchat", "--color-text-*", "--accent-primary"], + "tokenFamilies": ["--flowchat-*", "--tool-card-*", "--color-bg-scene", "--color-text-*", "--color-accent-*"], "evidence": [ { "type": "theme-color-audit", @@ -47,7 +47,7 @@ ], "risks": [ "Streaming and virtualized items can hide token regressions until historical turns are rendered.", - "Several high-use compatibility aliases are still visible in Flow Chat surfaces." + "Flow Chat has many historical alias call sites; the audit baseline must keep internal alias reads at zero." ] }, { @@ -57,7 +57,7 @@ "formFactors": ["desktop", "narrow"], "themes": ["dark", "light", "system"], "states": ["default", "expanded", "collapsed", "hover", "focus", "success", "warning", "error"], - "tokenFamilies": ["--tool-card-*", "--color-success*", "--color-warning*", "--color-error*", "--color-danger*"], + "tokenFamilies": ["--tool-card-*", "--color-success*", "--color-warning*", "--color-error*"], "evidence": [ { "type": "theme-color-audit", @@ -177,7 +177,7 @@ "formFactors": ["desktop", "narrow"], "themes": ["dark", "light", "system"], "states": ["default", "selected", "hover", "focus", "custom-theme", "system-theme"], - "tokenFamilies": ["--color-accent-*", "--color-primary*", "--color-bg-*", "--color-text-*"], + "tokenFamilies": ["--color-accent-*", "--color-bg-*", "--color-text-*"], "evidence": [ { "type": "theme-color-audit", diff --git a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss index a73af71da..012fee1a4 100644 --- a/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss +++ b/src/web-ui/src/app/components/MCPInteractionDialog/MCPInteractionDialog.scss @@ -11,7 +11,7 @@ align-items: center; gap: 8px; font-size: 12px; - color: var(--text-secondary); + color: var(--color-text-secondary); } .mcp-interaction-dialog__server { @@ -21,7 +21,7 @@ } .mcp-interaction-dialog__queue { - color: var(--text-tertiary); + color: var(--color-text-muted); } .mcp-interaction-dialog__section { @@ -32,16 +32,16 @@ .mcp-interaction-dialog__label { font-size: 12px; - color: var(--text-secondary); + color: var(--color-text-secondary); } .mcp-interaction-dialog__params { margin: 0; padding: 10px; border-radius: 8px; - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - color: var(--text-primary); + background: var(--color-bg-tertiary); + border: 1px solid var(--border-base); + color: var(--color-text-primary); font-size: 12px; line-height: 1.5; white-space: pre-wrap; @@ -55,9 +55,9 @@ min-height: 190px; padding: 10px; border-radius: 8px; - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - color: var(--text-primary); + background: var(--color-bg-secondary); + border: 1px solid var(--border-base); + color: var(--color-text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.5; diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss index 9f2914975..01d6f74f0 100644 --- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss +++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss @@ -153,19 +153,19 @@ $_section-header-height: 24px; } &__mode-pill { - --bitfun-mode-pill-liquid-pro-bg: color-mix(in srgb, var(--color-primary) 22%, var(--element-bg-medium)); + --bitfun-mode-pill-liquid-pro-bg: color-mix(in srgb, var(--color-accent-500) 22%, var(--element-bg-medium)); --bitfun-mode-pill-liquid-assistant-bg: color-mix(in srgb, var(--color-accent-500) 28%, var(--element-bg-medium)); --bitfun-mode-pill-liquid-mid-bg: color-mix( in srgb, var(--color-accent-500) 16%, - color-mix(in srgb, var(--color-primary) 14%, var(--element-bg-medium)) + color-mix(in srgb, var(--color-accent-500) 14%, var(--element-bg-medium)) ); position: relative; width: 100%; min-width: 0; padding: 5px; - border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent); + border: 1px solid color-mix(in srgb, var(--color-accent-500) 14%, transparent); border-radius: 999px; display: flex; align-items: stretch; @@ -181,7 +181,7 @@ $_section-header-height: 24px; &:hover { transform: translateY(-1px); - border-color: color-mix(in srgb, var(--color-primary) 28%, transparent); + border-color: color-mix(in srgb, var(--color-accent-500) 28%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-static-white) 5%, transparent), 0 10px 22px var(--color-overlay-black-12); } @@ -223,7 +223,7 @@ $_section-header-height: 24px; background: var(--bitfun-mode-pill-liquid-pro-bg); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-static-white) 12%, transparent), - 0 2px 10px color-mix(in srgb, var(--color-primary) 12%, transparent); + 0 2px 10px color-mix(in srgb, var(--color-accent-500) 12%, transparent); transform: translate3d(0, 0, 0) scale(1, 1); transform-origin: 50% 50%; will-change: transform; @@ -822,7 +822,7 @@ $_section-header-height: 24px; filter: saturate(1); opacity: 1; box-shadow: 0 8px 18px rgba(var(--color-static-black-rgb), 0.22), - 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); + 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 28%, transparent); } &.is-customizing { @@ -832,7 +832,7 @@ $_section-header-height: 24px; &.is-active.is-customizing { box-shadow: 0 8px 18px rgba(var(--color-static-black-rgb), 0.22), - 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent), + 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 28%, transparent), 0 0 0 5px color-mix(in srgb, var(--color-accent-500) 28%, transparent); } @@ -1399,7 +1399,7 @@ $_section-header-height: 24px; 72% { transform: translate3d(16%, 0, 0) scale(1.05, 0.96); border-radius: 17px; - background: color-mix(in srgb, var(--color-primary) 20%, var(--element-bg-medium)); + background: color-mix(in srgb, var(--color-accent-500) 20%, var(--element-bg-medium)); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss index 93a9c73ee..9caec1e19 100644 --- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss +++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss @@ -497,7 +497,7 @@ } &.is-unknown { - background: var(--color-text-tertiary); + background: var(--color-text-muted); } &.is-connecting { diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss index c84db0a2f..737a90dfb 100644 --- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss +++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceSessionBatchModal.scss @@ -300,7 +300,7 @@ justify-content: flex-end; gap: 8px; padding: 8px 0 0; - background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-bg-base) 92%, transparent) 36%); + background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-bg-primary) 92%, transparent) 36%); } .btn { diff --git a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss index 41efcb34a..c41a28560 100644 --- a/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss +++ b/src/web-ui/src/app/components/NewProjectDialog/NewProjectDialog.scss @@ -34,7 +34,7 @@ animation: new-project-icon-enter 0.4s ease-out; svg { - color: var(--color-primary); + color: var(--color-accent-500); } } @@ -229,8 +229,8 @@ align-items: center; gap: 8px; padding: 10px 12px; - background: color-mix(in srgb, var(--color-primary) 8%, transparent); - border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent); + background: color-mix(in srgb, var(--color-accent-500) 8%, transparent); + border: 1px solid color-mix(in srgb, var(--color-accent-500) 16%, transparent); border-radius: 8px; animation: new-project-preview-enter 0.3s ease-out; } diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss index 0d7cfcece..a959a5f30 100644 --- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss +++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss @@ -310,7 +310,7 @@ .bitfun-remote-connect__error { font-size: 12px; - color: var(--color-danger); + color: var(--color-error); text-align: center; margin: 0; } @@ -327,7 +327,7 @@ border: none; padding: 0; font-size: 12px; - color: var(--color-accent); + color: var(--color-accent-500); text-decoration: underline; cursor: pointer; diff --git a/src/web-ui/src/app/components/SceneBar/SceneBar.scss b/src/web-ui/src/app/components/SceneBar/SceneBar.scss index 306c98c9f..c8b891f02 100644 --- a/src/web-ui/src/app/components/SceneBar/SceneBar.scss +++ b/src/web-ui/src/app/components/SceneBar/SceneBar.scss @@ -192,7 +192,7 @@ $_tab-v-margin: 6px; // symmetric top/bottom gap inside SceneBar background $motion-fast $easing-standard; &:hover { - color: var(--color-primary); + color: var(--color-accent-500); background: var(--element-bg-soft); } diff --git a/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss b/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss index 4d957daa2..158ef6635 100644 --- a/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss +++ b/src/web-ui/src/app/components/SplashScreen/SplashScreen.scss @@ -65,7 +65,7 @@ left: 50%; min-width: 220px; max-width: min(360px, calc(100vw - 48px)); - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.4; text-align: center; diff --git a/src/web-ui/src/app/components/panels/FilesPanel.scss b/src/web-ui/src/app/components/panels/FilesPanel.scss index 34fd2373a..89e81c647 100644 --- a/src/web-ui/src/app/components/panels/FilesPanel.scss +++ b/src/web-ui/src/app/components/panels/FilesPanel.scss @@ -209,8 +209,8 @@ } &__search-limit-notice--warning { - background: color-mix(in srgb, var(--element-bg-subtle) 64%, var(--color-warning-100) 36%); - color: var(--color-warning-700); + background: color-mix(in srgb, var(--element-bg-subtle) 64%, var(--color-warning-bg) 36%); + color: var(--color-warning); } &__search-spinner { diff --git a/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss b/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss index 01eca9aa3..8aee3a056 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.scss @@ -56,7 +56,7 @@ // Resizing state &.is-resizing { .canvas-anchor-zone__resizer-line { - background: var(--color-primary); + background: var(--color-accent-500); } } @@ -89,7 +89,7 @@ &:hover { .canvas-anchor-zone__resizer-line { - background: var(--color-primary); + background: var(--color-accent-500); } } } @@ -144,13 +144,13 @@ transition: background-color 0.15s ease, color 0.15s ease; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } &__close-btn:hover { - color: var(--color-danger); + color: var(--color-error); } // Content area diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss b/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss index 2304b7a45..e34273b17 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/DropZone.scss @@ -52,7 +52,7 @@ content: ''; position: absolute; inset: 4px; - border: 1px dashed var(--color-primary); + border: 1px dashed var(--color-accent-500); border-radius: 4px; opacity: 0.4; transition: all 0.15s ease; @@ -68,8 +68,8 @@ opacity: 1; border-style: solid; border-width: 2px; - border-color: var(--color-primary); - background: var(--color-primary-alpha); + border-color: var(--color-accent-500); + background: var(--color-accent-100); } } @@ -79,7 +79,7 @@ justify-content: center; gap: 6px; padding: 6px 14px; - background: var(--color-primary); + background: var(--color-accent-500); border: none; border-radius: 4px; box-shadow: 0 2px 8px var(--color-accent-400); diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss index 9f06ffbb7..bd0fdc3fa 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.scss @@ -62,7 +62,7 @@ flex-direction: column; align-items: center; gap: 12px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); span { font-size: 13px; diff --git a/src/web-ui/src/app/components/panels/content-canvas/editor-area/SplitHandle.scss b/src/web-ui/src/app/components/panels/content-canvas/editor-area/SplitHandle.scss index d1a2a6a9e..26c495d95 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/editor-area/SplitHandle.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/editor-area/SplitHandle.scss @@ -23,7 +23,7 @@ &:hover, &.is-dragging { - background: var(--color-primary-alpha); + background: var(--color-accent-100); } .canvas-split-handle__line { @@ -46,7 +46,7 @@ &:hover, &.is-dragging { - background: var(--color-primary-alpha); + background: var(--color-accent-100); } .canvas-split-handle__line { @@ -70,7 +70,7 @@ &:hover &__line, &.is-dragging &__line { - background: var(--color-primary); + background: var(--color-accent-500); } // Grip handle @@ -82,7 +82,7 @@ background: var(--color-bg-secondary); border: 1px solid var(--border-base); border-radius: 4px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; } @@ -94,8 +94,8 @@ &:hover &__grip, &.is-dragging &__grip { - color: var(--color-primary); - border-color: var(--color-primary); + color: var(--color-accent-500); + border-color: var(--color-accent-500); } } diff --git a/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss b/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss index 3b8cf3188..84507ef2b 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/empty-state/EmptyState.scss @@ -33,7 +33,7 @@ transition: background 0.15s, color 0.15s; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss index 0f75dd7d5..6f8530adf 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/MissionControl.scss @@ -90,7 +90,7 @@ padding: 0; background: none; border: none; - color: var(--color-text-tertiary); + color: var(--color-text-muted); cursor: pointer; border-radius: 3px; transition: all 0.15s ease; @@ -141,7 +141,7 @@ padding: 0; background: transparent; border: none; - color: var(--color-text-tertiary); + color: var(--color-text-muted); cursor: pointer; border-radius: 3px; font-size: 11px; @@ -218,7 +218,7 @@ align-items: center; justify-content: center; padding: 40px 30px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-size: 12px; border: 1px dashed var(--border-base); border-radius: 6px; @@ -232,7 +232,7 @@ gap: 12px; padding: 6px 16px; font-size: 10px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); border-top: 1px dashed var(--border-base); flex-shrink: 0; diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss index 7e5e62580..d0be242a6 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/SearchFilter.scss @@ -29,7 +29,7 @@ &__count { font-size: 11px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); white-space: nowrap; padding: 0 8px; } diff --git a/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss b/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss index cca29ce59..85f113d6f 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/mission-control/ThumbnailCard.scss @@ -29,14 +29,14 @@ // Active state - solid border &.is-active { border-style: solid; - border-color: var(--color-primary); + border-color: var(--color-accent-500); .canvas-thumbnail-card__header { border-color: var(--color-accent-200); } .canvas-thumbnail-card__icon { - color: var(--color-primary); + color: var(--color-accent-500); } } @@ -69,7 +69,7 @@ &__icon { flex-shrink: 0; - color: var(--color-text-tertiary); + color: var(--color-text-muted); transition: color 0.15s ease; } @@ -123,7 +123,7 @@ padding: 0; background: none; border: none; - color: var(--color-text-tertiary); + color: var(--color-text-muted); cursor: pointer; border-radius: 3px; transition: all 0.1s ease; @@ -134,7 +134,7 @@ } &.is-active { - color: var(--color-primary); + color: var(--color-accent-500); } } @@ -194,7 +194,7 @@ justify-content: center; height: 100%; gap: 6px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); opacity: 0.6; svg { @@ -218,7 +218,7 @@ justify-content: center; width: 14px; height: 14px; - background: var(--color-primary); + background: var(--color-accent-500); border-radius: 2px; color: var(--color-text-primary); diff --git a/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss b/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss index a9b01ea1b..6b7898f4b 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/quick-look/QuickLook.scss @@ -70,7 +70,7 @@ flex-shrink: 0; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } @@ -97,17 +97,17 @@ transition: background-color 0.15s ease, color 0.15s ease; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } &__pin-btn:hover { - color: var(--color-primary); + color: var(--color-accent-500); } &__close-btn:hover { - color: var(--color-danger); + color: var(--color-error); } // Content area @@ -138,7 +138,7 @@ gap: 4px; padding: 6px 12px; font-size: 11px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); background: var(--color-bg-secondary); border-top: 1px solid var(--border-subtle); } diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss index bd1de9a7a..7554d24cf 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/Tab.scss @@ -21,7 +21,7 @@ border-bottom: 1px solid transparent; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); } // ==================== State styles ==================== @@ -29,7 +29,7 @@ // Active state - match canvas-tab-bar is-active-group background &.is-active { background: var(--color-bg-scene); - border-bottom: 1px solid var(--color-primary); + border-bottom: 1px solid var(--color-accent-500); } // Preview state - italic title @@ -123,7 +123,7 @@ transition: opacity 0.15s ease, background-color 0.15s ease; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } @@ -152,7 +152,7 @@ transition: opacity 0.15s ease, background-color 0.15s ease; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } @@ -164,7 +164,7 @@ } &__close-btn--pin { - color: var(--color-primary); + color: var(--color-accent-500); opacity: 1; pointer-events: auto; } @@ -179,7 +179,7 @@ top: 0; bottom: 0; width: 2px; - background: var(--color-primary); + background: var(--color-accent-500); border-radius: 1px; z-index: 10; pointer-events: none; diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabBar.scss b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabBar.scss index b6aeb3461..52b922941 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabBar.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabBar.scss @@ -56,7 +56,7 @@ transition: background-color 0.15s ease, color 0.15s ease; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } @@ -74,7 +74,7 @@ top: 4px; bottom: 4px; width: 2px; - background: var(--color-primary); + background: var(--color-accent-500); border-radius: 1px; z-index: 10; pointer-events: none; diff --git a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss index 1cad46447..7baf0aba8 100644 --- a/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss +++ b/src/web-ui/src/app/components/panels/content-canvas/tab-bar/TabOverflowMenu.scss @@ -33,8 +33,8 @@ &.is-open { border-style: solid; - border-color: var(--color-primary); - color: var(--color-primary); + border-color: var(--color-accent-500); + color: var(--color-accent-500); } // Styles when overflow exists @@ -59,19 +59,19 @@ &__badge { font-size: 10px; font-weight: 600; - color: var(--color-primary); + color: var(--color-accent-500); margin-left: 2px; transition: color 0.15s ease; } // Keep badge color on hover &:hover &__badge { - color: var(--color-primary); + color: var(--color-accent-500); } // Badge color when open &.is-open &__badge { - color: var(--color-primary); + color: var(--color-accent-500); } } @@ -126,12 +126,12 @@ background: var(--color-bg-secondary); border: 1px solid var(--border-base); border-radius: 3px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-family: inherit; } svg { - color: var(--color-primary); + color: var(--color-accent-500); } } @@ -186,7 +186,7 @@ background: var(--color-accent-100); .canvas-tab-overflow-menu__item-title { - color: var(--color-primary); + color: var(--color-accent-500); } } @@ -220,7 +220,7 @@ padding: 0; background: none; border: none; - color: var(--color-text-tertiary); + color: var(--color-text-muted); cursor: pointer; border-radius: 3px; flex-shrink: 0; diff --git a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss index b0f15d3c6..1ad477e3c 100644 --- a/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss +++ b/src/web-ui/src/app/components/panels/review-platform/ReviewPlatformPanel.scss @@ -64,10 +64,10 @@ justify-content: center; width: 26px; height: 26px; - border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, var(--border-base)); + border: 1px solid color-mix(in srgb, var(--color-accent-500) 25%, var(--border-base)); border-radius: 6px; - color: var(--accent-primary); - background: color-mix(in srgb, var(--accent-primary) 10%, transparent); + color: var(--color-accent-500); + background: color-mix(in srgb, var(--color-accent-500) 10%, transparent); } &__brand-copy, @@ -268,7 +268,7 @@ } &__loading-inline { - color: var(--accent-primary); + color: var(--color-accent-500); display: inline-block; transform-origin: center; } @@ -334,14 +334,14 @@ transition: border-color $motion-base $easing-standard, background $motion-base $easing-standard, color $motion-base $easing-standard; &:hover { - border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-base)); + border-color: color-mix(in srgb, var(--color-accent-500) 32%, var(--border-base)); color: var(--color-text-primary); } &.is-active { - border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-base)); - color: var(--accent-primary); - background: color-mix(in srgb, var(--accent-primary) 11%, transparent); + border-color: color-mix(in srgb, var(--color-accent-500) 40%, var(--border-base)); + color: var(--color-accent-500); + background: color-mix(in srgb, var(--color-accent-500) 11%, transparent); } } @@ -425,8 +425,8 @@ } &.is-selected { - border-color: color-mix(in srgb, var(--accent-primary) 28%, var(--border-base)); - background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 11%, transparent), color-mix(in srgb, var(--element-bg-soft) 86%, transparent)); + border-color: color-mix(in srgb, var(--color-accent-500) 28%, var(--border-base)); + background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-500) 11%, transparent), color-mix(in srgb, var(--element-bg-soft) 86%, transparent)); } } @@ -580,8 +580,8 @@ box-shadow: none; &:hover:not(:disabled) { - border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-base)); - background: color-mix(in srgb, var(--accent-primary) 9%, var(--element-bg-soft)); + border-color: color-mix(in srgb, var(--color-accent-500) 34%, var(--border-base)); + background: color-mix(in srgb, var(--color-accent-500) 9%, var(--element-bg-soft)); color: var(--color-text-primary); } @@ -604,10 +604,10 @@ gap: 12px; margin: 10px 14px 0; padding: 10px 12px; - border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, var(--border-base)); + border: 1px solid color-mix(in srgb, var(--color-accent-500) 20%, var(--border-base)); border-radius: 7px; background: - linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 8%, transparent), transparent), + linear-gradient(180deg, color-mix(in srgb, var(--color-accent-500) 8%, transparent), transparent), color-mix(in srgb, var(--color-bg-elevated) 70%, transparent); } @@ -638,7 +638,7 @@ } &__agent-link-label { - color: var(--accent-primary) !important; + color: var(--color-accent-500) !important; font-weight: 650; text-transform: uppercase; letter-spacing: 0; @@ -786,7 +786,7 @@ background: transparent; &::after { - background: color-mix(in srgb, var(--accent-primary) 72%, var(--color-text-primary)); + background: color-mix(in srgb, var(--color-accent-500) 72%, var(--color-text-primary)); } } } @@ -874,7 +874,7 @@ } &__review-session--running &__review-session-icon { - color: var(--accent-primary); + color: var(--color-accent-500); } &__review-session--completed &__review-session-icon { @@ -1246,10 +1246,10 @@ align-items: center; width: fit-content; padding: 2px 6px; - border: 1px solid color-mix(in srgb, var(--accent-primary) 26%, var(--border-base)); + border: 1px solid color-mix(in srgb, var(--color-accent-500) 26%, var(--border-base)); border-radius: 5px; - color: var(--accent-primary); - background: color-mix(in srgb, var(--accent-primary) 9%, transparent); + color: var(--color-accent-500); + background: color-mix(in srgb, var(--color-accent-500) 9%, transparent); font-size: 10px; font-weight: 650; line-height: 1.2; @@ -1321,7 +1321,7 @@ span { display: block; margin-bottom: 3px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-size: 10px; font-weight: 650; text-transform: uppercase; @@ -1406,11 +1406,11 @@ &__thread--reply { margin-left: 18px; border-left-width: 3px; - border-left-color: color-mix(in srgb, var(--accent-primary) 42%, var(--border-base)); + border-left-color: color-mix(in srgb, var(--color-accent-500) 42%, var(--border-base)); } &__thread--review { - background: color-mix(in srgb, var(--accent-primary) 7%, var(--color-bg-elevated)); + background: color-mix(in srgb, var(--color-accent-500) 7%, var(--color-bg-elevated)); } &__thread--comment { @@ -1446,9 +1446,9 @@ } &__thread-tag--review { - color: color-mix(in srgb, var(--accent-primary) 92%, var(--color-text-primary)); - border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-base)); - background: color-mix(in srgb, var(--accent-primary) 10%, transparent); + color: color-mix(in srgb, var(--color-accent-500) 92%, var(--color-text-primary)); + border-color: color-mix(in srgb, var(--color-accent-500) 20%, var(--border-base)); + background: color-mix(in srgb, var(--color-accent-500) 10%, transparent); } &__thread-tag--comment { diff --git a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss index 3e441210e..a7225c37c 100644 --- a/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss +++ b/src/web-ui/src/app/components/scheduled-jobs/ScheduledJobsView.scss @@ -234,7 +234,7 @@ &__item-error { font-size: var(--font-size-xs); - color: var(--color-danger-500); + color: var(--color-error); line-height: $line-height-relaxed; word-break: break-word; } @@ -416,7 +416,7 @@ &__warning { font-size: var(--font-size-xs); - color: var(--color-danger-500); + color: var(--color-error); line-height: $line-height-relaxed; padding: $size-gap-2 $size-gap-3; border-radius: $size-radius-base; diff --git a/src/web-ui/src/app/layout/AppLayout.scss b/src/web-ui/src/app/layout/AppLayout.scss index 7ea8348da..273d72bd6 100644 --- a/src/web-ui/src/app/layout/AppLayout.scss +++ b/src/web-ui/src/app/layout/AppLayout.scss @@ -119,7 +119,7 @@ html, body { width: 100%; overflow: hidden; position: relative; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); } .bitfun-app-acp-session-loading { @@ -259,14 +259,14 @@ html, body { // ==================== Dark theme tweaks ==================== @media (prefers-color-scheme: dark) { .bitfun-app-layout { - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); } } // ==================== High-contrast mode ==================== @media (prefers-contrast: high) { .bitfun-app-layout { - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); } } diff --git a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss index a2c8e7582..38e4a0dca 100644 --- a/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss +++ b/src/web-ui/src/app/scenes/agents/components/CreateAgentPage.scss @@ -125,8 +125,8 @@ } &.is-active { - border-color: var(--color-primary); - background: rgba(var(--color-primary-rgb) / 0.08); + border-color: var(--color-accent-500); + background: rgba(var(--color-accent-500-rgb) / 0.08); color: var(--color-text-primary); font-weight: $font-weight-semibold; } @@ -165,8 +165,8 @@ } &.is-on { - border: 1px solid var(--color-primary); - background: rgba(var(--color-primary-rgb) / 0.08); + border: 1px solid var(--color-accent-500); + background: rgba(var(--color-accent-500-rgb) / 0.08); color: var(--color-text-primary); } } diff --git a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss index 0f3203f4d..ca8fc025d 100644 --- a/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss +++ b/src/web-ui/src/app/scenes/file-viewer/FileViewerNav.scss @@ -57,7 +57,7 @@ display: flex; align-items: center; flex-shrink: 0; - color: var(--color-primary); + color: var(--color-accent-500); } &__label { diff --git a/src/web-ui/src/app/scenes/git/GitNav.scss b/src/web-ui/src/app/scenes/git/GitNav.scss index b553f1509..8d8c1d21f 100644 --- a/src/web-ui/src/app/scenes/git/GitNav.scss +++ b/src/web-ui/src/app/scenes/git/GitNav.scss @@ -124,7 +124,7 @@ transform: translateY(-50%); width: 2px; height: 16px; - background: var(--color-primary); + background: var(--color-accent-500); border-radius: 0 2px 2px 0; } } diff --git a/src/web-ui/src/app/scenes/git/views/BranchesView.scss b/src/web-ui/src/app/scenes/git/views/BranchesView.scss index 4e29c9b84..6e8f84783 100644 --- a/src/web-ui/src/app/scenes/git/views/BranchesView.scss +++ b/src/web-ui/src/app/scenes/git/views/BranchesView.scss @@ -68,7 +68,7 @@ } &--current { - background: color-mix(in srgb, var(--color-primary) 10%, transparent); + background: color-mix(in srgb, var(--color-accent-500) 10%, transparent); } &--selected { @@ -96,7 +96,7 @@ flex-shrink: 0; font-size: 10px; font-weight: 600; - color: var(--color-primary); + color: var(--color-accent-500); text-transform: uppercase; } diff --git a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss index e27f97fec..28b9cdb43 100644 --- a/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss +++ b/src/web-ui/src/app/scenes/git/views/WorkingCopyView.scss @@ -140,7 +140,7 @@ &.wcv-status--modified { color: var(--color-warning); } &.wcv-status--added { color: var(--color-success); } - &.wcv-status--deleted { color: var(--color-danger); } + &.wcv-status--deleted { color: var(--color-error); } &.wcv-status--renamed { color: var(--color-info); } } @@ -184,7 +184,7 @@ } .wcv-file--selected { - background: color-mix(in srgb, var(--color-primary) 12%, transparent); + background: color-mix(in srgb, var(--color-accent-500) 12%, transparent); } .wcv-file--loading { diff --git a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss index d08901df8..fe21148e4 100644 --- a/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss +++ b/src/web-ui/src/app/scenes/miniapps/MiniAppScene.scss @@ -87,7 +87,7 @@ gap: $size-gap-3; padding: $size-gap-2 $size-gap-3; border-bottom: 1px solid var(--border-subtle); - background: var(--color-bg-surface); + background: var(--color-bg-secondary); span, small { @@ -177,7 +177,7 @@ padding: $size-gap-2 $size-gap-3; border: 1px solid var(--color-success-border); border-radius: $size-radius-base; - background: var(--color-bg-surface); + background: var(--color-bg-secondary); color: var(--color-text-primary); box-shadow: var(--shadow-base); font-size: var(--font-size-sm); @@ -278,7 +278,7 @@ &--update { border-bottom-color: color-mix(in srgb, var(--color-warning) 28%, var(--border-subtle)); - background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-subtle)); + background: color-mix(in srgb, var(--color-warning) 12%, var(--element-bg-subtle)); } } @@ -301,14 +301,14 @@ border: 1px solid var(--border-subtle); border-radius: $size-radius-base; padding: $size-gap-2; - background: var(--color-bg-subtle); + background: var(--element-bg-subtle); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm); line-height: $line-height-relaxed; &:focus { - outline: 2px solid var(--color-primary); + outline: 2px solid var(--color-accent-500); outline-offset: 1px; } } @@ -335,9 +335,9 @@ } &__error { - border: 1px solid var(--color-danger-border); - background: var(--color-danger-bg); - color: var(--color-danger); + border: 1px solid var(--color-error-border); + background: var(--color-error-bg); + color: var(--color-error); } &__status { @@ -359,12 +359,12 @@ overflow: hidden; border: 1px solid var(--border-subtle); border-radius: $size-radius-base; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); .btw-session-panel { min-height: 0; width: 100%; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); } .btw-session-panel__header-right { @@ -412,7 +412,7 @@ overflow: hidden; border: 1px solid var(--border-subtle); border-radius: $size-radius-base; - background: var(--color-bg-base); + background: var(--color-bg-primary); } &__footer { @@ -480,7 +480,7 @@ overflow: auto; border: 1px solid var(--border-subtle); border-radius: $size-radius-base; - background: var(--color-bg-subtle); + background: var(--element-bg-subtle); font-family: var(--font-family-mono); font-size: var(--font-size-xs); } diff --git a/src/web-ui/src/app/scenes/session/ChatPane.scss b/src/web-ui/src/app/scenes/session/ChatPane.scss index 063f22119..b4294a619 100644 --- a/src/web-ui/src/app/scenes/session/ChatPane.scss +++ b/src/web-ui/src/app/scenes/session/ChatPane.scss @@ -11,9 +11,9 @@ display: flex; flex-direction: column; overflow: hidden; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); position: relative; - font-family: var(--font-sans); + font-family: var(--font-family-sans); font-size: var(--flowchat-font-size-base); } diff --git a/src/web-ui/src/app/scenes/session/SessionScene.scss b/src/web-ui/src/app/scenes/session/SessionScene.scss index 0b7de650f..13bee004e 100644 --- a/src/web-ui/src/app/scenes/session/SessionScene.scss +++ b/src/web-ui/src/app/scenes/session/SessionScene.scss @@ -15,7 +15,7 @@ height: 100%; overflow: hidden; position: relative; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); color: var(--color-text-primary); &--dragging { diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.scss b/src/web-ui/src/app/scenes/settings/SettingsNav.scss index e25309da2..03f76dd79 100644 --- a/src/web-ui/src/app/scenes/settings/SettingsNav.scss +++ b/src/web-ui/src/app/scenes/settings/SettingsNav.scss @@ -153,7 +153,7 @@ &__search-highlight { padding: 0; margin: 0; - background: color-mix(in srgb, var(--color-primary) 28%, transparent); + background: color-mix(in srgb, var(--color-accent-500) 28%, transparent); color: inherit; font-weight: inherit; border-radius: 2px; diff --git a/src/web-ui/src/app/scenes/settings/SettingsScene.scss b/src/web-ui/src/app/scenes/settings/SettingsScene.scss index d33e7ade9..edfe350d8 100644 --- a/src/web-ui/src/app/scenes/settings/SettingsScene.scss +++ b/src/web-ui/src/app/scenes/settings/SettingsScene.scss @@ -27,7 +27,7 @@ &__loading-line, &__loading-block { - border-radius: var(--radius-md); + border-radius: var(--size-radius-md); background: var(--element-bg-soft); opacity: 0.65; } diff --git a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss index 626274e07..4bbb0a679 100644 --- a/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss +++ b/src/web-ui/src/app/scenes/settings/components/KeyboardShortcutsTab.scss @@ -17,7 +17,7 @@ padding: 0 10px; gap: 8px; border-radius: 6px; - /* Match Search defaults; --color-border alone can be undefined and drop the border */ + /* Match Search defaults; the canonical border token must stay defined to avoid a dropped border. */ border: 1px solid var(--border-base); background: var(--input-bg); transition: border-color 0.15s ease, box-shadow 0.15s ease; @@ -30,14 +30,14 @@ &.search--focused .search__wrapper, .search__wrapper:focus-within { border-color: var(--color-accent-500); - box-shadow: 0 0 0 2px var(--color-accent-alpha); + box-shadow: 0 0 0 2px var(--color-accent-100); } .search__input { font-size: 13px; &::placeholder { - color: var(--color-text-tertiary); + color: var(--color-text-muted); } } } @@ -73,11 +73,11 @@ transition: background 0.1s; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); } &--recording { - background: var(--color-accent-alpha); + background: var(--color-accent-100); } &--conflict { @@ -108,7 +108,7 @@ &__item-hint { font-size: 10px; line-height: 1.35; - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-weight: 400; white-space: normal; opacity: 0.62; @@ -136,7 +136,7 @@ user-select: none; &:hover { - border-color: var(--color-border); + border-color: var(--border-base); color: var(--color-text-secondary); } } @@ -146,7 +146,7 @@ align-items: center; padding: 3px 8px; border-radius: 4px; - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); background: var(--element-bg-subtle); color: var(--color-text-secondary); font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; @@ -158,14 +158,14 @@ justify-content: center; &:hover { - border-color: var(--color-accent); + border-color: var(--color-accent-500); color: var(--color-text-primary); } &--recording { - border-color: var(--color-accent); - background: var(--color-accent-alpha); - color: var(--color-accent); + border-color: var(--color-accent-500); + background: var(--color-accent-100); + color: var(--color-accent-500); animation: kb-pulse 1s ease-in-out infinite; } @@ -182,9 +182,9 @@ width: 22px; height: 22px; border-radius: 4px; - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); background: transparent; - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-size: 13px; cursor: pointer; padding: 0; @@ -198,7 +198,7 @@ &__empty { padding: 32px; text-align: center; - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-size: 14px; } } @@ -212,7 +212,7 @@ .kb-shortcuts-page-header.bitfun-config-page-header { .bitfun-config-page-header__subtitle { font-size: var(--font-size-xs); - color: var(--color-text-tertiary); + color: var(--color-text-muted); opacity: 0.88; } } diff --git a/src/web-ui/src/app/scenes/shell/ShellNav.scss b/src/web-ui/src/app/scenes/shell/ShellNav.scss index 1f2776e8c..bd8f952d4 100644 --- a/src/web-ui/src/app/scenes/shell/ShellNav.scss +++ b/src/web-ui/src/app/scenes/shell/ShellNav.scss @@ -52,7 +52,7 @@ border: none; border-radius: 6px; background: transparent; - color: var(--color-text-tertiary); + color: var(--color-text-muted); cursor: default; transition: color $motion-fast $easing-standard, @@ -134,7 +134,7 @@ width: 14px; height: 14px; flex-shrink: 0; - color: var(--color-primary); + color: var(--color-accent-500); } &__workspace-menu-text { @@ -338,7 +338,7 @@ &.is-active { color: var(--color-text-primary); - background: color-mix(in srgb, var(--color-primary) 10%, transparent); + background: color-mix(in srgb, var(--color-accent-500) 10%, transparent); font-weight: 500; &::before { @@ -349,14 +349,14 @@ transform: translateY(-50%); width: 2px; height: 16px; - background: var(--color-primary); + background: var(--color-accent-500); border-radius: 0 2px 2px 0; } &:hover { background: color-mix( in srgb, - var(--color-primary) 14%, + var(--color-accent-500) 14%, var(--element-bg-medium) ); } @@ -397,7 +397,7 @@ opacity: 0.75; &--saved { - color: var(--color-primary); + color: var(--color-accent-500); opacity: 0.9; } } @@ -455,8 +455,8 @@ border-radius: 999px; font-size: var(--font-size-xxs); line-height: 1; - color: var(--color-primary); - background: color-mix(in srgb, var(--color-primary) 14%, transparent); + color: var(--color-accent-500); + background: color-mix(in srgb, var(--color-accent-500) 14%, transparent); } &__empty { diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.scss b/src/web-ui/src/app/scenes/skills/SkillsScene.scss index 62a738e7b..6054764d7 100644 --- a/src/web-ui/src/app/scenes/skills/SkillsScene.scss +++ b/src/web-ui/src/app/scenes/skills/SkillsScene.scss @@ -13,7 +13,7 @@ min-width: 0; min-height: 0; overflow: hidden; - background: var(--color-bg-base); + background: var(--color-bg-primary); color: var(--color-text-primary); } @@ -26,7 +26,7 @@ display: flex; align-items: center; padding: 8px 12px; - background: var(--color-bg-base); + background: var(--color-bg-primary); } .skills-tabs-bar__tabs { @@ -918,7 +918,7 @@ align-items: center; justify-content: center; padding: 40px 24px 32px; - background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-base) 100%); + background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%); border-bottom: 1px solid var(--border-subtle); } diff --git a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss index 7c43662f2..056b98d3c 100644 --- a/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss +++ b/src/web-ui/src/app/scenes/welcome/WelcomeScene.scss @@ -227,7 +227,7 @@ &:focus-visible { color: var(--color-text-primary); - outline: 2px solid var(--color-accent); + outline: 2px solid var(--color-accent-500); outline-offset: -2px; z-index: 1; } diff --git a/src/web-ui/src/app/styles/components/forms.css b/src/web-ui/src/app/styles/components/forms.css index 20a1c87a0..c2b753131 100644 --- a/src/web-ui/src/app/styles/components/forms.css +++ b/src/web-ui/src/app/styles/components/forms.css @@ -105,7 +105,7 @@ .form-input:focus, .form-select:focus, .form-textarea:focus { - border-color: var(--color-primary-400); + border-color: var(--color-accent-400); background: var(--glass-bg-active); box-shadow: 0 4px 16px var(--color-accent-200), @@ -223,7 +223,7 @@ height: 16px; margin: 0; cursor: pointer; - accent-color: var(--color-primary-500); + accent-color: var(--color-accent-500); } .form-checkbox input[type="checkbox"] { @@ -379,7 +379,7 @@ appearance: none; width: 20px; height: 20px; - background: var(--color-primary-500); + background: var(--color-accent-500); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px var(--border-accent-soft); @@ -394,7 +394,7 @@ .form-range::-moz-range-thumb { width: 20px; height: 20px; - background: var(--color-primary-500); + background: var(--color-accent-500); border-radius: 50%; border: none; cursor: pointer; diff --git a/src/web-ui/src/app/styles/utilities/effects.css b/src/web-ui/src/app/styles/utilities/effects.css index 298622754..cf4dc4cf9 100644 --- a/src/web-ui/src/app/styles/utilities/effects.css +++ b/src/web-ui/src/app/styles/utilities/effects.css @@ -16,7 +16,7 @@ } .u-border { - border: 1px solid var(--color-border-primary); + border: 1px solid var(--border-base); } .u-radius-md { border-radius: var(--size-radius-md); } diff --git a/src/web-ui/src/app/styles/utilities/floating-input.css b/src/web-ui/src/app/styles/utilities/floating-input.css index 6df5c0d4f..c0e09c8fc 100644 --- a/src/web-ui/src/app/styles/utilities/floating-input.css +++ b/src/web-ui/src/app/styles/utilities/floating-input.css @@ -19,7 +19,7 @@ inset 0 1px 0 var(--color-overlay-white-05); padding: var(--size-gap-3) var(--size-gap-4); z-index: var(--z-overlay); - transition: all var(--motion-normal) var(--easing-standard); + transition: all var(--motion-base) var(--easing-standard); opacity: 0.6; /* Overall opacity when inactive */ display: flex; align-items: center; @@ -88,7 +88,7 @@ } .floating-input-base .floating-input-button:hover:not(:disabled) { - color: var(--color-accent-primary); + color: var(--color-accent-500); background: color-mix(in srgb, var(--color-accent-600) 10%, transparent); } diff --git a/src/web-ui/src/app/styles/utilities/index.css b/src/web-ui/src/app/styles/utilities/index.css index b601dbfc7..c3827afd9 100644 --- a/src/web-ui/src/app/styles/utilities/index.css +++ b/src/web-ui/src/app/styles/utilities/index.css @@ -159,7 +159,7 @@ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } -.text-blue { color: var(--color-primary-500); } +.text-blue { color: var(--color-accent-500); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } @@ -196,7 +196,7 @@ .border-0 { border: none; } .border-glass { border: 1px solid var(--glass-border-base); } .border-glass-hover { border-color: var(--glass-border-hover); } -.border-focus { border-color: var(--color-primary-400); } +.border-focus { border-color: var(--color-accent-400); } /* Border radius */ .rounded-none { border-radius: 0; } diff --git a/src/web-ui/src/app/styles/utilities/resizer.css b/src/web-ui/src/app/styles/utilities/resizer.css index 799d5f266..1b02af062 100644 --- a/src/web-ui/src/app/styles/utilities/resizer.css +++ b/src/web-ui/src/app/styles/utilities/resizer.css @@ -12,7 +12,7 @@ display: flex; align-items: center; justify-content: center; - transition: all var(--motion-normal) var(--easing-standard); + transition: all var(--motion-base) var(--easing-standard); border: none; flex-shrink: 0; opacity: 0.2; @@ -53,7 +53,7 @@ height: 20px; background: var(--color-overlay-white-10); border-radius: var(--size-radius-sm); - transition: all var(--motion-normal); + transition: all var(--motion-base); opacity: 0.2; } diff --git a/src/web-ui/src/component-library/components/Card/Card.scss b/src/web-ui/src/component-library/components/Card/Card.scss index 9514784ac..a92071277 100644 --- a/src/web-ui/src/component-library/components/Card/Card.scss +++ b/src/web-ui/src/component-library/components/Card/Card.scss @@ -148,7 +148,7 @@ .v-card-header + & { margin-top: var(--size-gap-3); padding-top: var(--size-gap-3); - border-top: 1px dashed var(--color-border-subtle); + border-top: 1px dashed var(--border-subtle); } } diff --git a/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss b/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss index 69f7e7ef2..19e8d38df 100644 --- a/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss +++ b/src/web-ui/src/component-library/components/ConfirmDialog/ConfirmDialog.scss @@ -99,8 +99,8 @@ margin: 0; padding: $size-gap-3 $size-gap-5; border-radius: $size-radius-base; - background: var(--color-bg-subtle); - border: 1px solid var(--color-border); + background: var(--element-bg-subtle); + border: 1px solid var(--border-base); } &__bullet-list li { @@ -130,8 +130,8 @@ &__preview { margin-top: $size-gap-3; padding: $size-gap-3 $size-gap-4; - background: var(--color-bg-subtle); - border: 1px solid var(--color-border); + background: var(--element-bg-subtle); + border: 1px solid var(--border-base); border-radius: $size-radius-base; text-align: left; overflow: auto; @@ -162,7 +162,7 @@ justify-content: flex-end; align-items: center; padding: $size-gap-4 $size-gap-6 $size-gap-5; - border-top: 1px solid var(--color-border); + border-top: 1px solid var(--border-base); .btn { min-width: 88px; diff --git a/src/web-ui/src/component-library/components/DotMatrixLoader/DotMatrixLoader.scss b/src/web-ui/src/component-library/components/DotMatrixLoader/DotMatrixLoader.scss index 306bb651c..1505037ea 100644 --- a/src/web-ui/src/component-library/components/DotMatrixLoader/DotMatrixLoader.scss +++ b/src/web-ui/src/component-library/components/DotMatrixLoader/DotMatrixLoader.scss @@ -44,7 +44,7 @@ $matrix-epsilon: 0.0001%; gap: var(--dm-gap); width: calc(3 * var(--dm-cell) + 2 * var(--dm-gap)); height: calc(3 * var(--dm-cell) + 2 * var(--dm-gap)); - color: var(--text-secondary); + color: var(--color-text-secondary); &--small { --dm-cell: 4px; diff --git a/src/web-ui/src/component-library/components/FlowChatCards/TodoCard/TodoCard.scss b/src/web-ui/src/component-library/components/FlowChatCards/TodoCard/TodoCard.scss index e494ce28b..70b7f72fe 100644 --- a/src/web-ui/src/component-library/components/FlowChatCards/TodoCard/TodoCard.scss +++ b/src/web-ui/src/component-library/components/FlowChatCards/TodoCard/TodoCard.scss @@ -13,7 +13,7 @@ align-items: center; gap: 8px; padding: 8px 12px; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); border: 1px solid var(--border-base); border-radius: 6px; font-size: 13px; @@ -51,7 +51,7 @@ gap: 12px; margin-top: 8px; padding: 8px 10px; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); border: 1px solid var(--border-base); border-radius: 4px; } @@ -86,7 +86,7 @@ &__list { margin-top: 8px; padding: 8px; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); border: 1px solid var(--border-base); border-radius: 4px; } @@ -159,7 +159,7 @@ text-align: center; color: var(--tool-card-text-muted); font-size: 12px; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); border: 1px solid var(--border-base); border-radius: 4px; } diff --git a/src/web-ui/src/component-library/components/Markdown/Markdown.scss b/src/web-ui/src/component-library/components/Markdown/Markdown.scss index a18db4437..6c30d58e9 100644 --- a/src/web-ui/src/component-library/components/Markdown/Markdown.scss +++ b/src/web-ui/src/component-library/components/Markdown/Markdown.scss @@ -24,7 +24,7 @@ --markdown-inline-code-bg: rgba(var(--color-static-white-rgb), 0.045); --markdown-inline-code-border: var(--color-overlay-white-08); --markdown-pre-bg: var(--color-bg-primary); - --markdown-pre-border: var(--border-color); + --markdown-pre-border: var(--border-subtle); --markdown-blockquote-bg: rgba(var(--color-static-white-rgb), 0.025); --markdown-blockquote-border: rgba(var(--color-static-white-rgb), 0.16); --markdown-table-border: var(--flowchat-md-table-border); @@ -49,7 +49,7 @@ word-wrap: break-word; cursor: text; user-select: text; - animation: fadeIn var(--motion-normal) ease-out; + animation: fadeIn var(--motion-base) ease-out; } .markdown-renderer > * { @@ -189,7 +189,7 @@ .markdown-renderer code { display: inline; - font-family: var(--markdown-font-mono); + font-family: var(--font-family-mono); } .markdown-renderer .inline-code { @@ -199,7 +199,7 @@ border-radius: 5px; background: var(--markdown-inline-code-bg); color: color-mix(in srgb, var(--color-text-primary) 88%, rgb(var(--markdown-inline-code-tint-rgb)) 12%); - font-family: var(--markdown-font-mono); + font-family: var(--font-family-mono); font-size: 0.88em; font-weight: 500; line-height: var(--markdown-support-line-height); @@ -246,7 +246,7 @@ background: transparent; box-shadow: none; color: inherit; - font-family: var(--markdown-font-mono); + font-family: var(--font-family-mono); font-size: inherit !important; font-weight: inherit; line-height: inherit; @@ -319,7 +319,7 @@ .markdown-renderer .code-block-wrapper code[style] { background: var(--markdown-pre-bg) !important; border: none !important; - font-family: var(--markdown-font-mono) !important; + font-family: var(--font-family-mono) !important; font-size: var(--markdown-code-font-size) !important; line-height: var(--markdown-code-line-height) !important; } @@ -402,7 +402,7 @@ .markdown-renderer details { margin: calc(var(--markdown-block-gap) * 1.2) 0; padding: 0.62rem 0.72rem; - border: 1px solid var(--border-color); + border: 1px solid var(--border-subtle); border-radius: var(--flowchat-card-radius); background: var(--color-overlay-white-03); } @@ -562,7 +562,7 @@ max-width: min(520px, 80vw); overflow-wrap: anywhere; text-align: left; - font-family: var(--markdown-font-mono); + font-family: var(--font-family-mono); font-size: 0.78rem; line-height: var(--flowchat-support-line-height); } diff --git a/src/web-ui/src/component-library/components/Markdown/Markdown.tsx b/src/web-ui/src/component-library/components/Markdown/Markdown.tsx index 925c0789e..b0ef92a48 100644 --- a/src/web-ui/src/component-library/components/Markdown/Markdown.tsx +++ b/src/web-ui/src/component-library/components/Markdown/Markdown.tsx @@ -1055,7 +1055,7 @@ export const Markdown = React.memo(({ lineHeight: '1.55', }; const codeTagStyle: React.CSSProperties = { - fontFamily: 'var(--markdown-font-mono)', + fontFamily: 'var(--font-family-mono)', }; const gutterColor = isLight ? 'rgb(var(--markdown-code-gutter-light-rgb))' diff --git a/src/web-ui/src/component-library/components/Markdown/ReproductionStepsBlock.scss b/src/web-ui/src/component-library/components/Markdown/ReproductionStepsBlock.scss index 38e480c24..90251b75d 100644 --- a/src/web-ui/src/component-library/components/Markdown/ReproductionStepsBlock.scss +++ b/src/web-ui/src/component-library/components/Markdown/ReproductionStepsBlock.scss @@ -10,7 +10,7 @@ margin: var(--flowchat-card-gap) 0; border-radius: var(--flowchat-card-radius); border: 1px solid var(--color-warning); - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); backdrop-filter: blur(10px); transition: all 0.2s ease; overflow: hidden; @@ -61,7 +61,7 @@ display: flex; align-items: center; justify-content: center; - color: var(--color-text-tertiary); + color: var(--color-text-muted); flex-shrink: 0; } @@ -153,7 +153,7 @@ padding: 0 4px; background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); font-size: var(--flowchat-font-size-xxs); font-weight: 600; flex-shrink: 0; diff --git a/src/web-ui/src/component-library/components/Markdown/markdownPrismTheme.ts b/src/web-ui/src/component-library/components/Markdown/markdownPrismTheme.ts index d32a839f8..4b6ffbc2c 100644 --- a/src/web-ui/src/component-library/components/Markdown/markdownPrismTheme.ts +++ b/src/web-ui/src/component-library/components/Markdown/markdownPrismTheme.ts @@ -7,12 +7,12 @@ export function buildMarkdownPrismStyle(isLight: boolean): Record { return buildSharedPrismStyle(isLight, { diff --git a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss b/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss index 74a066479..c3cc715f5 100644 --- a/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss +++ b/src/web-ui/src/flow_chat/components/modern/ExploreRegion.scss @@ -22,17 +22,17 @@ align-items: center; gap: 4px; padding: 0; - color: var(--text-tertiary); + color: var(--color-text-muted); font-size: var(--flowchat-font-size-sm); line-height: var(--flowchat-support-line-height); cursor: pointer; user-select: none; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); transition: color 0.15s ease, background 0.15s ease; &:hover { - background: var(--bg-hover); - color: var(--text-secondary); + background: var(--element-bg-hover); + color: var(--color-text-secondary); } } @@ -84,7 +84,7 @@ border-radius: 2px; &:hover { - background: var(--border-hover); + background: var(--border-medium); } } } @@ -118,8 +118,8 @@ z-index: 3; background: linear-gradient( to bottom, - var(--color-bg-flowchat) 0%, - color-mix(in srgb, var(--color-bg-flowchat) 60%, transparent) 50%, + var(--color-bg-scene) 0%, + color-mix(in srgb, var(--color-bg-scene) 60%, transparent) 50%, transparent 100% ); } @@ -137,8 +137,8 @@ z-index: 3; background: linear-gradient( to top, - var(--color-bg-flowchat) 0%, - color-mix(in srgb, var(--color-bg-flowchat) 60%, transparent) 50%, + var(--color-bg-scene) 0%, + color-mix(in srgb, var(--color-bg-scene) 60%, transparent) 50%, transparent 100% ); } diff --git a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss index 8d5d0a950..e0cdc2ae2 100644 --- a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss +++ b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.scss @@ -11,7 +11,7 @@ Padding matches ModelRoundItem (3rem ≈ 48px each side) so the effective content width is identical to the live chat. */ padding: 24px 48px; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); box-sizing: border-box; font-family: var(--font-family-sans); /* Use a fixed 800px layout context so text wraps at exactly the same diff --git a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.tsx b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.tsx index dff27dfd9..df349e053 100644 --- a/src/web-ui/src/flow_chat/components/modern/ExportImageButton.tsx +++ b/src/web-ui/src/flow_chat/components/modern/ExportImageButton.tsx @@ -219,7 +219,7 @@ export const ExportImageButton: React.FC = ({ // Get theme background color. const computedStyle = getComputedStyle(document.documentElement); - const bgColor = computedStyle.getPropertyValue('--color-bg-flowchat').trim() || FLOWCHAT_CAPTURE_FALLBACK_COLOR.background; + const bgColor = computedStyle.getPropertyValue('--color-bg-scene').trim() || FLOWCHAT_CAPTURE_FALLBACK_COLOR.background; // Pre-load the logo as an HTMLImageElement. We do NOT try to embed it // inside the captured DOM (unreliable with /data URLs inside an diff --git a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss index 94d8ac913..b44d636dd 100644 --- a/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss +++ b/src/web-ui/src/flow_chat/components/modern/FlowChatHeader.scss @@ -191,7 +191,7 @@ gap: 0; padding-left: 2px; margin-left: 2px; - border-left: 1px solid var(--color-border-subtle); + border-left: 1px solid var(--border-subtle); } &__search-count { @@ -334,7 +334,7 @@ justify-content: space-between; gap: $size-gap-1; padding: 2px 2px 2px $size-gap-2; - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-size: var(--flowchat-font-size-xs); } @@ -360,11 +360,11 @@ } &--danger:not(:disabled):hover { - color: var(--color-danger); - background: color-mix(in srgb, var(--color-danger) 12%, transparent); + color: var(--color-error); + background: color-mix(in srgb, var(--color-error) 12%, transparent); svg { - color: var(--color-danger); + color: var(--color-error); } } } @@ -389,7 +389,7 @@ } &--active { - background: color-mix(in srgb, var(--accent-primary) 12%, var(--element-bg-soft)); + background: color-mix(in srgb, var(--color-accent-500) 12%, var(--element-bg-soft)); } } @@ -537,11 +537,11 @@ } &--danger:hover:not(:disabled) { - color: var(--color-danger); - background: color-mix(in srgb, var(--color-danger) 12%, transparent); + color: var(--color-error); + background: color-mix(in srgb, var(--color-error) 12%, transparent); svg { - color: var(--color-danger); + color: var(--color-error); } } } diff --git a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss index 5eb7593cf..4a2f8b9a5 100644 --- a/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss +++ b/src/web-ui/src/flow_chat/components/modern/ModelRoundItem.scss @@ -133,7 +133,7 @@ .model-round-item__retry-attempt { padding: 0.35rem 0 0.15rem; - border-top: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent); + border-top: 1px solid color-mix(in srgb, var(--border-base) 62%, transparent); } .model-round-item__retry-attempt-label { diff --git a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss index c4ddf8170..fbcd7cc6f 100644 --- a/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss +++ b/src/web-ui/src/flow_chat/components/modern/ModernFlowChatContainer.scss @@ -3,7 +3,7 @@ */ .modern-flowchat-container.flow-chat-typography { - font-family: var(--font-sans); + font-family: var(--font-family-sans); font-size: var(--flowchat-font-size-base); line-height: var(--flowchat-text-line-height); } @@ -49,7 +49,7 @@ flex-shrink: 0; padding: var(--flowchat-card-expanded-pad-x); background: var(--modern-flowchat-input-bg); - border-top: 1px solid var(--color-border); + border-top: 1px solid var(--border-base); } } @@ -73,7 +73,7 @@ display: inline-flex; align-items: center; justify-content: center; - color: var(--color-accent); + color: var(--color-accent-500); svg { animation: history-placeholder-spin 1.1s linear infinite; @@ -115,10 +115,10 @@ justify-content: center; gap: var(--flowchat-inline-gap); padding: 0 var(--size-gap-3); - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); border-radius: 6px; color: var(--color-text-primary); - background: var(--color-surface-hover); + background: var(--element-bg-hover); font: inherit; font-size: var(--flowchat-font-size-sm); cursor: pointer; @@ -161,10 +161,10 @@ border-radius: 8px; opacity: 0.72; background: - linear-gradient(90deg, transparent 0 4%, var(--color-surface-hover) 4% 62%, transparent 62% 100%) 0 0 / 100% 24px no-repeat, - linear-gradient(90deg, transparent 0 9%, var(--color-surface-hover) 9% 86%, transparent 86% 100%) 0 48px / 100% 24px no-repeat, - linear-gradient(90deg, transparent 0 6%, var(--color-surface-hover) 6% 74%, transparent 74% 100%) 0 96px / 100% 24px no-repeat, - linear-gradient(90deg, transparent 0 12%, var(--color-surface-hover) 12% 68%, transparent 68% 100%) 0 144px / 100% 24px no-repeat; + linear-gradient(90deg, transparent 0 4%, var(--element-bg-hover) 4% 62%, transparent 62% 100%) 0 0 / 100% 24px no-repeat, + linear-gradient(90deg, transparent 0 9%, var(--element-bg-hover) 9% 86%, transparent 86% 100%) 0 48px / 100% 24px no-repeat, + linear-gradient(90deg, transparent 0 6%, var(--element-bg-hover) 6% 74%, transparent 74% 100%) 0 96px / 100% 24px no-repeat, + linear-gradient(90deg, transparent 0 12%, var(--element-bg-hover) 12% 68%, transparent 68% 100%) 0 144px / 100% 24px no-repeat; } .modern-flowchat-container__history-open-intent-spinner { @@ -172,8 +172,8 @@ z-index: 1; width: 18px; height: 18px; - border: 2px solid var(--color-border); - border-top-color: var(--color-accent); + border: 2px solid var(--border-base); + border-top-color: var(--color-accent-500); border-radius: 50%; background: var(--color-bg-scene); box-shadow: 0 0 0 6px var(--color-bg-scene); diff --git a/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss b/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss index 27f0673f6..09d384bdb 100644 --- a/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss +++ b/src/web-ui/src/flow_chat/components/modern/ProcessingIndicator.scss @@ -38,7 +38,7 @@ // Hint text — same breathe rhythm as tool cards (tool-card-text-fade: 1.6s 0%→25%→0%) .processing-indicator__hint { font-size: 0.8125rem; - color: var(--text-secondary); + color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.scss b/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.scss index 8737bdeaa..28dec0a2c 100644 --- a/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.scss +++ b/src/web-ui/src/flow_chat/components/modern/ScrollAnchor.scss @@ -96,7 +96,7 @@ width: 280px; background: var(--color-bg-elevated); backdrop-filter: blur(16px); - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); border-radius: 8px; box-shadow: 0 4px 20px var(--color-overlay-black-25); pointer-events: none; @@ -114,15 +114,15 @@ width: 8px; height: 8px; background: var(--color-bg-elevated); - border-right: 1px solid var(--color-border); - border-top: 1px solid var(--color-border); + border-right: 1px solid var(--border-base); + border-top: 1px solid var(--border-base); } } &__preview-indicator { padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x); background: var(--color-accent-50); - border-bottom: 1px solid var(--color-border); + border-bottom: 1px solid var(--border-base); text-align: center; } diff --git a/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss b/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss index a9f6920e6..28e0e2697 100644 --- a/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss +++ b/src/web-ui/src/flow_chat/components/modern/SessionFileModificationsBar.scss @@ -178,7 +178,7 @@ } .icon-edit { - color: var(--color-primary); + color: var(--color-accent-500); } .icon-delete { diff --git a/src/web-ui/src/flow_chat/components/modern/SubagentItems.scss b/src/web-ui/src/flow_chat/components/modern/SubagentItems.scss index c8a870d54..71e152be6 100644 --- a/src/web-ui/src/flow_chat/components/modern/SubagentItems.scss +++ b/src/web-ui/src/flow_chat/components/modern/SubagentItems.scss @@ -32,7 +32,7 @@ padding: 10px 10px 10px var(--tool-card-header-icon-slot); // Continue the task card border on left/right/bottom; top border is hidden. - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); border: 1px solid var(--border-base); border-top: none; // Top corners are square to merge with the header card above. diff --git a/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss b/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss index 046172d0a..9c6db4a6e 100644 --- a/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss +++ b/src/web-ui/src/flow_chat/components/modern/TurnCompletionNoticeItem.scss @@ -11,24 +11,24 @@ padding: 6px 10px; border: 1px solid transparent; border-radius: 12px; - background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent); + background: color-mix(in srgb, var(--color-bg-secondary) 92%, transparent); color: var(--color-text-primary); font-size: 12px; line-height: 1.45; &--warning { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); - background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-surface)); + background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-secondary)); } &--error { border-color: color-mix(in srgb, var(--color-error) 45%, transparent); - background: color-mix(in srgb, var(--color-error) 10%, var(--color-bg-surface)); + background: color-mix(in srgb, var(--color-error) 10%, var(--color-bg-secondary)); } &--info { - border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent); - background: color-mix(in srgb, var(--accent-primary) 10%, var(--color-bg-surface)); + border-color: color-mix(in srgb, var(--color-accent-500) 45%, transparent); + background: color-mix(in srgb, var(--color-accent-500) 10%, var(--color-bg-secondary)); } } diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss index 695c22088..22c0c1cd1 100644 --- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss +++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss @@ -6,8 +6,8 @@ .user-message-item { padding: var(--flowchat-user-message-pad-y) var(--flowchat-user-message-pad-x); - background: color-mix(in srgb, var(--element-bg-medium) 86%, var(--color-bg-flowchat)); - border: 1px solid color-mix(in srgb, var(--border-muted) 38%, transparent); + background: color-mix(in srgb, var(--element-bg-medium) 86%, var(--color-bg-scene)); + border: 1px solid color-mix(in srgb, var(--border-subtle) 38%, transparent); border-radius: var(--flowchat-card-radius); margin: 0.06rem @@ -20,8 +20,8 @@ position: relative; &:hover { - background: color-mix(in srgb, var(--element-bg-medium) 92%, var(--color-bg-flowchat)); - border-color: color-mix(in srgb, var(--border-muted) 56%, transparent); + background: color-mix(in srgb, var(--element-bg-medium) 92%, var(--color-bg-scene)); + border-color: color-mix(in srgb, var(--border-subtle) 56%, transparent); .user-message-item__copy-btn { opacity: 1; diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss index 30c6e2725..f9d76ff00 100644 --- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss +++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss @@ -24,15 +24,15 @@ } &--search-match { - outline: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent); + outline: 1px solid color-mix(in srgb, var(--color-accent-500) 35%, transparent); outline-offset: -1px; border-radius: 6px; } &--search-current { - outline: 2px solid color-mix(in srgb, var(--accent-primary) 75%, transparent); + outline: 2px solid color-mix(in srgb, var(--color-accent-500) 75%, transparent); outline-offset: -1px; border-radius: 6px; - background: color-mix(in srgb, var(--accent-primary) 8%, transparent); + background: color-mix(in srgb, var(--color-accent-500) 8%, transparent); } } diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss index 903c0f70b..f70e2bec6 100644 --- a/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss +++ b/src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss @@ -44,7 +44,7 @@ display: flex; align-items: center; justify-content: center; - background: var(--color-bg-flowchat); /* FlowChat background. */ + background: var(--color-bg-scene); /* FlowChat background. */ } .empty-state { @@ -96,7 +96,7 @@ z-index: 2; overflow: hidden; pointer-events: none; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); contain: paint; } diff --git a/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss b/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss index 1d4a80c07..60e46ef02 100644 --- a/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss +++ b/src/web-ui/src/flow_chat/components/smart-recommendations/SmartRecommendations.scss @@ -4,7 +4,7 @@ .bitfun-smart-recommendations { background: var(--color-bg-secondary); - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; @@ -28,7 +28,7 @@ border: none; padding: 4px; cursor: pointer; - color: var(--color-text-tertiary); + color: var(--color-text-muted); border-radius: 4px; display: flex; align-items: center; @@ -36,7 +36,7 @@ transition: all 0.2s; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } @@ -52,7 +52,7 @@ align-items: center; gap: 6px; padding: 8px 14px; - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); border-radius: 6px; background: var(--color-bg-primary); color: var(--color-text-primary); @@ -67,8 +67,8 @@ } &:hover:not(:disabled) { - background: var(--color-bg-hover); - border-color: var(--color-primary); + background: var(--element-bg-hover); + border-color: var(--color-accent-500); transform: translateY(-1px); box-shadow: 0 2px 4px var(--color-overlay-black-10); } @@ -84,25 +84,25 @@ // Primary button styles &--primary { - background: var(--color-primary); + background: var(--color-accent-500); color: white; - border-color: var(--color-primary); + border-color: var(--color-accent-500); &:hover:not(:disabled) { - background: var(--color-primary-hover); - border-color: var(--color-primary-hover); + background: var(--color-accent-600); + border-color: var(--color-accent-600); } } // Danger button styles &--danger { - background: var(--color-danger); + background: var(--color-error); color: white; - border-color: var(--color-danger); + border-color: var(--color-error); &:hover:not(:disabled) { - background: var(--color-danger-hover); - border-color: var(--color-danger-hover); + background: var(--color-error); + border-color: var(--color-error); } } } diff --git a/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss b/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss index 9aca30436..58b83b0f2 100644 --- a/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss +++ b/src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss @@ -51,7 +51,7 @@ .subagent-projection-text__expand-btn { border: 0; background: transparent; - color: var(--color-primary); + color: var(--color-accent-500); cursor: pointer; padding: 0; font: inherit; diff --git a/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss b/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss index 18a627520..92703ae49 100644 --- a/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss +++ b/src/web-ui/src/flow_chat/components/thread-goal/ThreadGoalDialogs.scss @@ -37,9 +37,9 @@ &--active, &--paused, &--blocked { - color: var(--color-warning-500); - background: color-mix(in srgb, var(--color-warning-500) 12%, transparent); - border-color: color-mix(in srgb, var(--color-warning-500) 32%, transparent); + color: var(--color-warning); + background: color-mix(in srgb, var(--color-warning) 12%, transparent); + border-color: color-mix(in srgb, var(--color-warning) 32%, transparent); } &--usageLimited, @@ -50,9 +50,9 @@ } &--complete { - color: var(--color-success-500); - background: color-mix(in srgb, var(--color-success-500) 12%, transparent); - border-color: color-mix(in srgb, var(--color-success-500) 32%, transparent); + color: var(--color-success); + background: color-mix(in srgb, var(--color-success) 12%, transparent); + border-color: color-mix(in srgb, var(--color-success) 32%, transparent); } } @@ -123,13 +123,13 @@ box-sizing: border-box; &--done { - background: var(--color-success-500); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 20%, transparent); + background: var(--color-success); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 20%, transparent); } &--current { - background: var(--color-primary-500); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 22%, transparent); + background: var(--color-accent-500); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-500) 22%, transparent); } &--pending { diff --git a/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss b/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss index 373a7799e..373654e1f 100644 --- a/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss +++ b/src/web-ui/src/flow_chat/components/toolbar-mode/ToolbarMode.scss @@ -24,7 +24,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; cursor: grab; - font-family: var(--font-sans); + font-family: var(--font-family-sans); font-size: var(--flowchat-font-size-sm); color: var(--color-text-primary); @@ -134,7 +134,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); border: none; background: transparent; color: var(--color-text-muted); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); cursor: pointer; transition: all 0.2s $transition-timing; @@ -188,7 +188,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); color: var(--color-text-primary); font-size: var(--flowchat-font-size-xs); font-weight: var(--font-weight-medium); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); } .bitfun-toolbar-mode__title-text { @@ -252,7 +252,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; background: var(--color-bg-primary); border: 1px solid var(--border-medium); - border-radius: var(--radius-base); + border-radius: var(--size-radius-base); box-shadow: var(--shadow-xl); z-index: 100; animation: dropdown-appear 0.2s $transition-timing; @@ -373,7 +373,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); padding: 4px; background: var(--color-bg-primary); border: 1px solid var(--border-medium); - border-radius: var(--radius-base); + border-radius: var(--size-radius-base); box-shadow: var(--shadow-xl); z-index: 120; animation: dropdown-appear 0.2s $transition-timing; @@ -386,7 +386,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); width: 100%; padding: 8px 10px; border: none; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); background: transparent; color: var(--color-text-primary); font-size: var(--flowchat-font-size-sm); @@ -469,7 +469,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); &-name { flex-shrink: 0; padding: 2px 8px; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); background: var(--color-purple-200); color: var(--color-purple-500); font-size: var(--flowchat-font-size-2xs); @@ -495,7 +495,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); &-progress { flex-shrink: 0; padding: 2px 8px; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); background: var(--color-accent-200); color: var(--color-accent-500); font-size: var(--flowchat-font-size-2xs); @@ -553,7 +553,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); border: none !important; outline: none !important; box-shadow: none; - border-radius: var(--radius-base); + border-radius: var(--size-radius-base); background: var(--element-bg-base); color: var(--color-text-secondary); cursor: pointer !important; @@ -626,7 +626,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); // Compact-mode stop button. width: 22px; height: 22px; - border-radius: var(--radius-sm) !important; + border-radius: var(--size-radius-sm) !important; background: var(--color-error-bg) !important; border: none !important; color: var(--color-error) !important; @@ -797,7 +797,7 @@ $transition-timing: cubic-bezier(0.4, 0, 0.2, 1); height: 36px; padding: 0 12px; border: 1px solid var(--border-base); - border-radius: var(--radius-base); + border-radius: var(--size-radius-base); background: var(--color-bg-primary); color: var(--color-text-primary); font-size: var(--flowchat-font-size-sm); diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss index ef2c4ed8c..8c6e2d548 100644 --- a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss +++ b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss @@ -3,7 +3,7 @@ flex-direction: column; height: 100%; min-width: 0; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); color: var(--color-text-primary); &--fallback { @@ -141,10 +141,10 @@ width: 12px; height: 12px; margin: 0; - accent-color: var(--accent-primary); + accent-color: var(--color-accent-500); &:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent); + outline: 2px solid color-mix(in srgb, var(--color-accent-500) 70%, transparent); outline-offset: 2px; } } @@ -172,7 +172,7 @@ flex-shrink: 0; padding: 8px 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border-base) 70%, transparent); - background: color-mix(in srgb, var(--color-bg-secondary) 84%, var(--color-bg-flowchat)); + background: color-mix(in srgb, var(--color-bg-secondary) 84%, var(--color-bg-scene)); overflow-x: auto; } @@ -194,7 +194,7 @@ &--active { color: var(--color-text-primary); - border-bottom-color: var(--accent-primary); + border-bottom-color: var(--color-accent-500); } } @@ -441,13 +441,13 @@ padding-right: 6px; padding-left: 6px; text-align: center; - background: color-mix(in srgb, var(--color-bg-flowchat) 92%, var(--element-bg-soft)); + background: color-mix(in srgb, var(--color-bg-scene) 92%, var(--element-bg-soft)); box-shadow: -10px 0 14px -14px color-mix(in srgb, var(--color-text-primary) 54%, transparent); } th:last-child { z-index: 2; - background: color-mix(in srgb, var(--element-bg-soft) 72%, var(--color-bg-flowchat)); + background: color-mix(in srgb, var(--element-bg-soft) 72%, var(--color-bg-scene)); } } } @@ -522,7 +522,7 @@ padding: 0; border: 0; background: transparent; - color: var(--accent-primary); + color: var(--color-accent-500); font: inherit; text-align: left; text-decoration: underline; @@ -534,11 +534,11 @@ white-space: nowrap; &:hover { - color: var(--accent-primary-hover); + color: var(--color-accent-600); } &:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent); + outline: 2px solid color-mix(in srgb, var(--color-accent-500) 70%, transparent); outline-offset: 2px; border-radius: 3px; } @@ -587,7 +587,7 @@ padding: 0; border: 0; background: transparent; - color: var(--accent-primary); + color: var(--color-accent-500); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; @@ -595,11 +595,11 @@ cursor: pointer; &:hover { - color: var(--accent-primary-hover); + color: var(--color-accent-600); } &:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent); + outline: 2px solid color-mix(in srgb, var(--color-accent-500) 70%, transparent); outline-offset: 2px; border-radius: 3px; } @@ -624,12 +624,12 @@ padding: 0; border: 0; background: transparent; - color: var(--accent-primary); + color: var(--color-accent-500); font: inherit; cursor: pointer; &:hover { - color: var(--accent-primary-hover); + color: var(--color-accent-600); text-decoration: underline; text-underline-offset: 3px; } diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss index d43df8bb4..895383980 100644 --- a/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss +++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageReportCard.scss @@ -11,7 +11,7 @@ padding: 12px; border: 1px solid color-mix(in srgb, var(--border-base) 68%, transparent); border-radius: 8px; - background: color-mix(in srgb, var(--color-bg-secondary) 82%, var(--color-bg-flowchat)); + background: color-mix(in srgb, var(--color-bg-secondary) 82%, var(--color-bg-scene)); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text-primary) 4%, transparent) inset; color: var(--color-text-primary); animation: slideInUp 0.3s ease; @@ -36,7 +36,7 @@ &__loading-dots { flex: 0 0 auto; margin-top: 4px; - color: var(--accent-primary); + color: var(--color-accent-500); } &__loading-title { @@ -138,10 +138,10 @@ width: 12px; height: 12px; margin: 0; - accent-color: var(--accent-primary); + accent-color: var(--color-accent-500); &:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent); + outline: 2px solid color-mix(in srgb, var(--color-accent-500) 70%, transparent); outline-offset: 2px; } } @@ -178,7 +178,7 @@ } &:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent); + outline: 2px solid color-mix(in srgb, var(--color-accent-500) 70%, transparent); outline-offset: 2px; } @@ -339,7 +339,7 @@ } &:focus-visible { - outline: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent); + outline: 2px solid color-mix(in srgb, var(--color-accent-500) 70%, transparent); outline-offset: 2px; } diff --git a/src/web-ui/src/flow_chat/tool-cards/AcpPermissionActions.scss b/src/web-ui/src/flow_chat/tool-cards/AcpPermissionActions.scss index 46b459e34..163d1395c 100644 --- a/src/web-ui/src/flow_chat/tool-cards/AcpPermissionActions.scss +++ b/src/web-ui/src/flow_chat/tool-cards/AcpPermissionActions.scss @@ -14,7 +14,7 @@ .acp-permission-actions__text-button { min-height: 26px; padding: 0 var(--flowchat-card-expanded-pad-x); - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); border-radius: 6px; background: transparent; color: var(--color-text-primary); @@ -29,13 +29,13 @@ } .acp-permission-actions__text-button--allow { - border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border)); + border-color: color-mix(in srgb, var(--color-success) 55%, var(--border-base)); color: var(--color-success); } .acp-permission-actions__text-button--reject { - border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border)); - color: var(--color-danger); + border-color: color-mix(in srgb, var(--color-error) 55%, var(--border-base)); + color: var(--color-error); } .acp-permission-actions__text-button:disabled { diff --git a/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.scss b/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.scss index 38db5a9bd..b87570d7a 100644 --- a/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.scss +++ b/src/web-ui/src/flow_chat/tool-cards/AskUserQuestionCard.scss @@ -11,9 +11,9 @@ display: flex; flex-direction: column; margin: 6px 0; - border-radius: var(--radius-md); + border-radius: var(--size-radius-md); border: 1px solid var(--border-base); - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; @@ -159,7 +159,7 @@ background: var(--element-bg-soft); color: var(--color-text-secondary); border: 1px solid var(--border-subtle); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); font-size: var(--flowchat-font-size-xxs); font-weight: 600; text-transform: uppercase; @@ -192,7 +192,7 @@ padding: 8px 12px; background: transparent; border: 1px solid var(--border-base); - border-radius: var(--radius-md); + border-radius: var(--size-radius-md); cursor: pointer; transition: all 0.15s ease; @@ -378,7 +378,7 @@ padding: 8px 12px; background: var(--element-bg-subtle); border: 1px solid var(--border-medium); - border-radius: var(--radius-md); + border-radius: var(--size-radius-md); input[type="radio"], input[type="checkbox"] { @@ -415,7 +415,7 @@ flex: 1; padding: 6px 10px; border: 1px solid var(--border-base); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); font-size: var(--tool-card-action-font-size); color: var(--color-text-primary); background: var(--color-bg-tertiary); @@ -448,7 +448,7 @@ background: var(--element-bg-base); color: var(--color-text-primary); border: 1px solid var(--border-base); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); font-size: var(--tool-card-action-font-size); font-weight: 500; cursor: pointer; @@ -549,7 +549,7 @@ align-items: center; gap: 8px; padding: 8px 12px; - border-radius: var(--radius-md); + border-radius: var(--size-radius-md); font-size: var(--flowchat-font-size-xs); font-weight: 500; margin: 0 14px 12px; diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss index 804bc5b3a..964068336 100644 --- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss +++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss @@ -14,7 +14,7 @@ margin: var(--flowchat-card-gap) 0; border-radius: var(--flowchat-card-radius); border: 1px solid var(--border-base); - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; diff --git a/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss index c26c94585..4903c2645 100644 --- a/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss +++ b/src/web-ui/src/flow_chat/tool-cards/CodeReviewToolCard.scss @@ -40,7 +40,7 @@ color 160ms ease; &:hover:not(:disabled) { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } @@ -68,7 +68,7 @@ flex-shrink: 0; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } @@ -239,7 +239,7 @@ text-align: left; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); } } @@ -549,7 +549,7 @@ overflow: hidden; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); border-color: var(--border-medium); } @@ -773,7 +773,7 @@ overflow: hidden; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); border-color: var(--border-medium); } diff --git a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss index 446665c8c..e9820bce3 100644 --- a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss +++ b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss @@ -7,7 +7,7 @@ .create-plan-display { display: flex; flex-direction: column; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); border: 1px solid var(--border-base); border-radius: 8px; margin: var(--flowchat-card-gap) 0; @@ -29,7 +29,7 @@ /* Same chrome as the filled card when params are not ready yet (streaming start). */ border: 1px solid var(--border-base); border-radius: 8px; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); box-sizing: border-box; .create-plan-header { @@ -310,7 +310,7 @@ /* Plan params still streaming: footer actions read as disabled / grayed. */ &--plan-generating { .create-plan-footer { - background: color-mix(in srgb, var(--color-bg-flowchat) 92%, var(--tool-card-text-muted)); + background: color-mix(in srgb, var(--color-bg-scene) 92%, var(--tool-card-text-muted)); .build-btn:disabled { opacity: 1; diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss index acc400d2a..a114c74a3 100644 --- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss +++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss @@ -369,7 +369,7 @@ .file-operation-card--guidance { .base-tool-card.status-error { border-color: var(--border-medium); - background: var(--color-surface-elevated); + background: var(--element-bg-elevated); } } diff --git a/src/web-ui/src/flow_chat/tool-cards/GenerativeWidgetToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/GenerativeWidgetToolCard.scss index 8569f09f9..1cba4872a 100644 --- a/src/web-ui/src/flow_chat/tool-cards/GenerativeWidgetToolCard.scss +++ b/src/web-ui/src/flow_chat/tool-cards/GenerativeWidgetToolCard.scss @@ -105,5 +105,5 @@ .generative-widget-card__export-stage-inner { padding: var(--size-gap-5); - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); } diff --git a/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss index 913a5e81b..ae03cc605 100644 --- a/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss +++ b/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss @@ -13,7 +13,7 @@ .diff-file-name { color: var(--color-text-primary); - font-family: var(--font-mono); + font-family: var(--font-family-mono); font-size: var(--tool-card-action-font-size); overflow: hidden; text-overflow: ellipsis; @@ -40,7 +40,7 @@ gap: var(--flowchat-inline-gap); margin-right: var(--flowchat-control-gap); font-size: var(--flowchat-font-size-xs); - font-family: var(--font-mono); + font-family: var(--font-family-mono); flex-shrink: 0; .additions { @@ -68,7 +68,7 @@ background: var(--color-bg-secondary); border: 1px solid var(--border-subtle); border-radius: 4px; - font-family: var(--font-mono); + font-family: var(--font-family-mono); font-size: var(--flowchat-font-size-sm); line-height: var(--flowchat-support-line-height); color: var(--color-text-primary); diff --git a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss index f097095fb..3b5eea276 100644 --- a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss +++ b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss @@ -27,7 +27,7 @@ .compact-tool-card-wrapper.git-tool-display { .compact-card-action, .compact-card-content .tool-command-preview.tool-command-preview--compact { - font-family: var(--tool-compact-summary-font); + font-family: var(--font-family-sans); font-size: var(--flowchat-font-size-sm); line-height: var(--flowchat-support-line-height); font-weight: normal; @@ -40,7 +40,7 @@ } .output-summary { - font-family: var(--tool-compact-summary-font); + font-family: var(--font-family-sans); font-size: var(--flowchat-font-size-sm); line-height: var(--flowchat-support-line-height); font-weight: normal; diff --git a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss index 43ebee976..c02af6bcc 100644 --- a/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss +++ b/src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss @@ -152,7 +152,7 @@ &:hover { background: var(--element-bg-hover); - border-color: var(--border-primary); + border-color: var(--border-base); } } diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss index 37d1d353a..ee9c06b87 100644 --- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss +++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss @@ -43,7 +43,7 @@ &:hover { .thinking-label { - color: var(--text-secondary); + color: var(--color-text-secondary); opacity: 1; } @@ -54,7 +54,7 @@ .thinking-chevron { flex-shrink: 0; - color: var(--text-tertiary); + color: var(--color-text-muted); opacity: 0.6; display: block; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease; @@ -64,7 +64,7 @@ .thinking-label { font-size: var(--flowchat-font-size-sm); font-weight: normal; - color: var(--text-tertiary); + color: var(--color-text-muted); opacity: 0.8; line-height: var(--flowchat-support-line-height); } @@ -121,11 +121,11 @@ position: relative; min-height: 0; /* Required for the 0fr grid trick */ /* - * Match FlowChat list surface (--color-bg-flowchat === scene), not app chrome primary. + * Match FlowChat list surface, not app chrome primary. * Use a solid fill + mask fade so we never interpolate theme colors with `transparent` in sRGB * (that pulls toward black and looks wrong on near-black themes). */ - --thinking-scroll-fade-base: var(--color-bg-flowchat); + --thinking-scroll-fade-base: var(--color-bg-scene); /* Top fade */ &::before { @@ -190,9 +190,9 @@ } } -/* Markdown body: same sans as rest of chat; code stays mono via --markdown-font-mono */ +/* Markdown body: same sans as rest of chat; code stays mono via the tool-card font token. */ .thinking-content .markdown-renderer.thinking-markdown { - --markdown-font-mono: var(--tool-card-font-mono); + --font-family-mono: var(--tool-card-font-mono); --markdown-font-heading: var(--font-family-sans); --markdown-font-size: var(--flowchat-font-size-base); --markdown-font-size-sm: var(--flowchat-font-size-sm); diff --git a/src/web-ui/src/flow_chat/tool-cards/SessionControlToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/SessionControlToolCard.tsx index 8b94bdfe5..cc22071a1 100644 --- a/src/web-ui/src/flow_chat/tool-cards/SessionControlToolCard.tsx +++ b/src/web-ui/src/flow_chat/tool-cards/SessionControlToolCard.tsx @@ -229,7 +229,7 @@ export const SessionControlToolCard: React.FC = React.memo(({ gap: 2, padding: '8px 10px', borderRadius: 8, - background: 'var(--color-bg-subtle)' + background: 'var(--element-bg-subtle)' }} > @@ -249,7 +249,7 @@ export const SessionControlToolCard: React.FC = React.memo(({ )} {toolResult?.error && ( -
+
{toolResult.error}
)} diff --git a/src/web-ui/src/flow_chat/tool-cards/SessionMessageToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/SessionMessageToolCard.tsx index f16ab5571..72be58d6f 100644 --- a/src/web-ui/src/flow_chat/tool-cards/SessionMessageToolCard.tsx +++ b/src/web-ui/src/flow_chat/tool-cards/SessionMessageToolCard.tsx @@ -109,7 +109,7 @@ export const SessionMessageToolCard: React.FC = React.memo(({ borderRadius: 8, whiteSpace: 'pre-wrap', wordBreak: 'break-word', - background: 'var(--color-bg-subtle)', + background: 'var(--element-bg-subtle)', fontFamily: 'var(--tool-card-font-mono)' }} > @@ -119,7 +119,7 @@ export const SessionMessageToolCard: React.FC = React.memo(({ )} {toolResult?.error && ( -
+
{toolResult.error}
)} diff --git a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss index 2dc095ab1..790171a06 100644 --- a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss +++ b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss @@ -12,7 +12,7 @@ color: var(--color-text-secondary); &.is-running { - color: var(--color-primary); + color: var(--color-accent-500); } } @@ -433,11 +433,11 @@ } .confirm-button { - background: var(--color-primary); + background: var(--color-accent-500); color: var(--color-static-white); &:hover:not(:disabled) { - background: var(--color-primary-hover); + background: var(--color-accent-600); } } @@ -501,7 +501,7 @@ // Expanded state: the wrapper becomes the unified visual container. &.task-with-subagent-wrapper--expanded { // The wrapper itself provides the unified card appearance. - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); border: 1px solid var(--border-base); backdrop-filter: blur(10px); overflow: hidden; diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss index 23cbaf208..790e6dfdb 100644 --- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss +++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss @@ -22,7 +22,7 @@ */ .compact-card-action, .compact-card-content .tool-command-preview.tool-command-preview--compact { - font-family: var(--tool-compact-summary-font); + font-family: var(--font-family-sans); font-size: var(--flowchat-font-size-sm); line-height: var(--flowchat-support-line-height); font-weight: normal; @@ -35,7 +35,7 @@ .terminal-header-duration .duration-text { gap: 0.18rem; - font-family: var(--tool-compact-summary-font); + font-family: var(--font-family-sans); font-size: var(--flowchat-font-size-sm); line-height: var(--flowchat-support-line-height); font-weight: normal; @@ -128,7 +128,7 @@ border: none !important; outline: none !important; box-shadow: none !important; - color: var(--text-secondary); + color: var(--color-text-secondary); } } diff --git a/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss b/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss index 1f8153ff1..59389d693 100644 --- a/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss +++ b/src/web-ui/src/flow_chat/tool-cards/_tool-card-common.scss @@ -197,7 +197,7 @@ width: 16px !important; height: 16px !important; border-width: 2px !important; - box-shadow: 0 0 8px var(--color-primary-alpha) !important; + box-shadow: 0 0 8px var(--color-accent-100) !important; } .icon-completed { diff --git a/src/web-ui/src/flow_chat/utils/captureElementToDownloadsPng.tsx b/src/web-ui/src/flow_chat/utils/captureElementToDownloadsPng.tsx index 5029a3853..85b5b27ac 100644 --- a/src/web-ui/src/flow_chat/utils/captureElementToDownloadsPng.tsx +++ b/src/web-ui/src/flow_chat/utils/captureElementToDownloadsPng.tsx @@ -19,7 +19,7 @@ export async function captureElementToDownloadsPng( fileNamePrefix: string, ): Promise { const computedStyle = getComputedStyle(document.documentElement); - const bgColor = computedStyle.getPropertyValue('--color-bg-flowchat').trim() || FLOWCHAT_CAPTURE_FALLBACK_COLOR.background; + const bgColor = computedStyle.getPropertyValue('--color-bg-scene').trim() || FLOWCHAT_CAPTURE_FALLBACK_COLOR.background; await new Promise((resolve) => setTimeout(resolve, 0)); diff --git a/src/web-ui/src/infrastructure/config/components/AIFeaturesConfig.scss b/src/web-ui/src/infrastructure/config/components/AIFeaturesConfig.scss index 7570de77b..c2af71001 100644 --- a/src/web-ui/src/infrastructure/config/components/AIFeaturesConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/AIFeaturesConfig.scss @@ -196,7 +196,7 @@ } &__pet-expand-button:focus-visible { - outline: 2px solid var(--color-primary); + outline: 2px solid var(--color-accent-500); outline-offset: 2px; } @@ -267,12 +267,12 @@ } &__pet-select-option:focus-visible { - box-shadow: 0 0 0 2px var(--color-primary); + box-shadow: 0 0 0 2px var(--color-accent-500); } &__pet-select-option--selected { - border-color: color-mix(in srgb, var(--color-primary) 58%, var(--border-subtle)); - background: color-mix(in srgb, var(--color-primary) 10%, var(--element-bg-base)); + border-color: color-mix(in srgb, var(--color-accent-500) 58%, var(--border-subtle)); + background: color-mix(in srgb, var(--color-accent-500) 10%, var(--element-bg-base)); } &__pet-select-option-main { @@ -298,7 +298,7 @@ &__pet-select-check { flex-shrink: 0; - color: var(--color-primary); + color: var(--color-accent-500); transition: opacity 0.14s ease; } diff --git a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss index 575a6cb79..40a10d6f1 100644 --- a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss @@ -234,7 +234,7 @@ .select__trigger { min-height: 30px; padding: 3px $size-gap-2; - background: var(--element-bg); + background: var(--element-bg-base); } .select__value { diff --git a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss index 29d6e9425..e7c238ba7 100644 --- a/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss +++ b/src/web-ui/src/infrastructure/config/components/MCPResourceBrowser.scss @@ -4,15 +4,15 @@ height: 100%; display: flex; flex-direction: column; - background: var(--background-primary); - color: var(--text-primary); + background: var(--color-bg-primary); + color: var(--color-text-primary); .browser-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; - border-bottom: 1px solid var(--border-primary); + border-bottom: 1px solid var(--border-base); h2 { margin: 0; @@ -28,26 +28,26 @@ .browser-search { padding: 1rem 1.5rem; - border-bottom: 1px solid var(--border-primary); + border-bottom: 1px solid var(--border-base); .search-input { width: 100%; padding: 0.5rem 0.75rem; - background: var(--background-secondary); - border: 1px solid var(--border-primary); + background: var(--color-bg-secondary); + border: 1px solid var(--border-base); border-radius: 6px; - color: var(--text-primary); + color: var(--color-text-primary); font-size: 0.9rem; transition: all 0.2s ease; &:focus { outline: none; - border-color: var(--color-primary); - box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb) / 0.1); + border-color: var(--color-accent-500); + box-shadow: 0 0 0 2px rgba(var(--color-accent-500-rgb) / 0.1); } &::placeholder { - color: var(--text-tertiary); + color: var(--color-text-muted); } } } @@ -59,9 +59,9 @@ overflow: hidden; .resources-list { - border-right: 1px solid var(--border-primary); + border-right: 1px solid var(--border-base); overflow-y: auto; - background: var(--background-secondary); + background: var(--color-bg-secondary); .loading-state, .empty-state { @@ -71,7 +71,7 @@ justify-content: center; padding: 3rem 1rem; text-align: center; - color: var(--text-secondary); + color: var(--color-text-secondary); .empty-icon { font-size: 3rem; @@ -90,16 +90,16 @@ gap: 0.75rem; padding: 1rem; cursor: pointer; - border-bottom: 1px solid var(--border-primary); + border-bottom: 1px solid var(--border-base); transition: all 0.2s ease; &:hover { - background: var(--background-tertiary); + background: var(--color-bg-tertiary); } &.selected { - background: var(--background-tertiary); - border-left: 3px solid var(--color-primary); + background: var(--color-bg-tertiary); + border-left: 3px solid var(--color-accent-500); } .resource-icon { @@ -122,7 +122,7 @@ .resource-description { font-size: 0.85rem; - color: var(--text-secondary); + color: var(--color-text-secondary); margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; @@ -132,7 +132,7 @@ .resource-uri { font-size: 0.75rem; - color: var(--text-tertiary); + color: var(--color-text-muted); font-family: monospace; white-space: nowrap; overflow: hidden; @@ -152,8 +152,8 @@ justify-content: space-between; align-items: center; padding: 1rem 1.5rem; - border-bottom: 1px solid var(--border-primary); - background: var(--background-secondary); + border-bottom: 1px solid var(--border-base); + background: var(--color-bg-secondary); .viewer-title { display: flex; @@ -178,8 +178,8 @@ .viewer-mime-type { font-size: 0.8rem; - color: var(--text-tertiary); - background: var(--background-tertiary); + color: var(--color-text-muted); + background: var(--color-bg-tertiary); padding: 0.25rem 0.5rem; border-radius: 4px; font-family: monospace; @@ -198,7 +198,7 @@ align-items: center; justify-content: center; height: 100%; - color: var(--text-secondary); + color: var(--color-text-secondary); } .content-pre { @@ -206,7 +206,7 @@ padding: 0; background: none; border: none; - color: var(--text-primary); + color: var(--color-text-primary); font-family: 'Courier New', Consolas, monospace; font-size: 0.9rem; line-height: 1.6; @@ -221,7 +221,7 @@ align-items: center; justify-content: center; height: 100%; - color: var(--text-secondary); + color: var(--color-text-secondary); .empty-icon { font-size: 3rem; diff --git a/src/web-ui/src/infrastructure/config/components/ReviewConfig.scss b/src/web-ui/src/infrastructure/config/components/ReviewConfig.scss index b86f3accb..83adf6a35 100644 --- a/src/web-ui/src/infrastructure/config/components/ReviewConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/ReviewConfig.scss @@ -58,13 +58,13 @@ background var(--motion-fast) var(--easing-standard); &:hover:not(:disabled) { - border-color: var(--color-primary); + border-color: var(--color-accent-500); background: var(--element-bg-hover); } &.is-selected { - border-color: var(--color-primary); - background: var(--color-primary-bg-subtle); + border-color: var(--color-accent-500); + background: var(--color-accent-50); } } diff --git a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss index 6e235c844..2fea7eeb8 100644 --- a/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss +++ b/src/web-ui/src/infrastructure/font-preference/components/FontPreferencePanel.scss @@ -97,11 +97,11 @@ min-width: 0; padding: $size-gap-1 $size-gap-3; font-size: var(--font-size-sm); - font-family: var(--font-sans); + font-family: var(--font-family-sans); background: transparent; border: 1px solid var(--border-base); border-radius: $size-radius-sm; - color: var(--text-secondary); + color: var(--color-text-secondary); cursor: pointer; transition: background $motion-fast $easing-standard, border-color $motion-fast $easing-standard, @@ -112,7 +112,7 @@ &:hover:not(:disabled):not(&--active) { background: var(--element-bg-subtle); border-color: var(--border-strong); - color: var(--text-primary); + color: var(--color-text-primary); } &--active { @@ -154,7 +154,7 @@ &__custom-unit { font-size: var(--font-size-sm); - color: var(--text-secondary); + color: var(--color-text-secondary); flex-shrink: 0; } @@ -166,7 +166,7 @@ height: 28px; background: transparent; border: none; - color: var(--text-secondary); + color: var(--color-text-secondary); cursor: pointer; font-size: var(--font-size-base); transition: background $motion-fast $easing-standard; @@ -174,7 +174,7 @@ &:hover:not(:disabled) { background: var(--element-bg-subtle); - color: var(--text-primary); + color: var(--color-text-primary); } &:disabled { @@ -190,8 +190,8 @@ border: none; border-left: 1px solid var(--border-base); border-right: 1px solid var(--border-base); - background: var(--bg-primary); - color: var(--text-primary); + background: var(--color-bg-primary); + color: var(--color-text-primary); font-size: var(--font-size-sm); text-align: center; outline: none !important; @@ -217,22 +217,22 @@ } &--error { - border-left-color: var(--color-semantic-error); - border-right-color: var(--color-semantic-error); - color: var(--color-semantic-error); + border-left-color: var(--color-error); + border-right-color: var(--color-error); + color: var(--color-error); } } &__error { font-size: var(--font-size-xs); - color: var(--color-semantic-error); + color: var(--color-error); width: 100%; } &__custom-hint { width: 100%; font-size: var(--font-size-xs); - color: var(--text-muted); + color: var(--color-text-muted); line-height: 1.4; } @@ -241,10 +241,10 @@ box-sizing: border-box; margin-top: $size-gap-2; padding: $size-gap-3 $size-gap-4; - background: var(--bg-secondary); + background: var(--color-bg-secondary); border: 1px solid var(--border-subtle); border-radius: $size-radius-sm; - color: var(--text-secondary); + color: var(--color-text-secondary); line-height: 1.6; word-wrap: break-word; transition: font-size $motion-base $easing-standard; @@ -254,18 +254,18 @@ margin-left: auto; padding: $size-gap-2 $size-gap-4; font-size: var(--font-size-sm); - font-family: var(--font-sans); + font-family: var(--font-family-sans); background: transparent; border: 1px solid var(--border-base); border-radius: $size-radius-sm; - color: var(--text-secondary); + color: var(--color-text-secondary); cursor: pointer; transition: all $motion-fast $easing-standard; &:hover { background: var(--element-bg-subtle); border-color: var(--border-strong); - color: var(--text-primary); + color: var(--color-text-primary); } } } diff --git a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss index 83ab1109d..431e9462d 100644 --- a/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss +++ b/src/web-ui/src/infrastructure/i18n/components/LanguageSelector.scss @@ -11,7 +11,7 @@ appearance: none; background: var(--input-bg); border: 1px solid var(--input-border); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); padding: 6px 28px 6px 10px; font-size: 13px; color: var(--input-text); @@ -54,7 +54,7 @@ .language-selector__inline-button { padding: 4px 10px; border: 1px solid transparent; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); background: transparent; color: var(--color-text-secondary); font-size: 13px; @@ -91,7 +91,7 @@ gap: 4px; padding: 6px 10px; border: 1px solid transparent; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); background: transparent; color: var(--color-text-secondary); font-size: 13px; @@ -127,7 +127,7 @@ padding: 4px; background: var(--color-bg-elevated); border: 1px solid var(--border-base); - border-radius: var(--radius-md); + border-radius: var(--size-radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; @@ -150,7 +150,7 @@ width: 100%; padding: 8px 12px; border: none; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); background: transparent; color: var(--color-text-secondary); font-size: 13px; diff --git a/src/web-ui/src/infrastructure/providers/CoreProvider.tsx b/src/web-ui/src/infrastructure/providers/CoreProvider.tsx index 9917def2b..4b11b5927 100644 --- a/src/web-ui/src/infrastructure/providers/CoreProvider.tsx +++ b/src/web-ui/src/infrastructure/providers/CoreProvider.tsx @@ -92,7 +92,7 @@ export const CoreProvider: React.FC = ({ children }) => { onClick={() => window.location.reload()} style={{ padding: '8px 16px', - background: 'var(--color-primary)', + background: 'var(--color-accent-500)', color: 'var(--color-static-white)', border: 'none', borderRadius: '4px', diff --git a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts index 5454a413e..e700c0ada 100644 --- a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts +++ b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts @@ -39,7 +39,7 @@ declare global { var __BITFUN_BOOTSTRAP_THEME_SELECTION__: string | undefined; } -/** Space-separated R G B for `rgba(var(--color-primary-rgb) / alpha)` in component styles. */ +/** Space-separated R G B channels for accent alpha composition in component styles. */ function accentColorToRgbChannels(accent: string): string | null { const trimmed = accent.trim(); const hex6 = /^#([0-9a-f]{6})$/i.exec(trimmed); @@ -503,9 +503,10 @@ export class ThemeService { : FLOW_CHAT_LINK_COLORS.dark; root.style.setProperty('--flowchat-link-color', flowChatLinkColors.default); root.style.setProperty('--flowchat-link-hover-color', flowChatLinkColors.hover); - const primaryRgb = accentColorToRgbChannels(primaryAccent); - if (primaryRgb) { - root.style.setProperty('--color-primary-rgb', primaryRgb); + const accentRgb = accentColorToRgbChannels(primaryAccent); + if (accentRgb) { + root.style.setProperty('--color-accent-500-rgb', accentRgb); + root.style.setProperty('--color-primary-rgb', accentRgb); } diff --git a/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss b/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss index a7be662d1..082dcbc41 100644 --- a/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss +++ b/src/web-ui/src/infrastructure/update/UpdateAvailableDialog.scss @@ -114,7 +114,7 @@ word-break: break-word; border-radius: 8px; border: 1px solid var(--border-subtle); - background: var(--color-bg-subtle); + background: var(--element-bg-subtle); color: var(--color-text-secondary); } diff --git a/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss b/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss index 1718cb2b1..261e4f45b 100644 --- a/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss +++ b/src/web-ui/src/infrastructure/update/UpdateInstallProgressModal.scss @@ -8,7 +8,7 @@ .bitfun-update-progress__bar { height: 8px; border-radius: 4px; - background: var(--color-bg-subtle); + background: var(--element-bg-subtle); overflow: hidden; position: relative; } @@ -16,7 +16,7 @@ .bitfun-update-progress__fill { height: 100%; border-radius: 4px; - background: var(--color-accent); + background: var(--color-accent-500); transition: width 0.15s ease-out; } diff --git a/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss b/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss index f3c9de20d..284fecd96 100644 --- a/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss +++ b/src/web-ui/src/shared/announcement-system/styles/AnnouncementToast.scss @@ -158,7 +158,7 @@ $toast-width: 320px; &__ring-fill { fill: none; - stroke: var(--color-primary); + stroke: var(--color-accent-500); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: $ring-circumference; @@ -229,7 +229,7 @@ $toast-width: 320px; white-space: nowrap; &--primary { - background: var(--color-primary); + background: var(--color-accent-500); color: var(--color-static-white); &:hover { opacity: 0.9; } diff --git a/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss b/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss index 97ed36a83..06904e197 100644 --- a/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss +++ b/src/web-ui/src/shared/announcement-system/styles/FeatureModal.scss @@ -113,8 +113,8 @@ &--active { width: 18px; border-radius: 3px; - background: var(--color-primary); - border-color: var(--color-primary); + background: var(--color-accent-500); + border-color: var(--color-accent-500); } &:hover:not(&--active) { @@ -150,7 +150,7 @@ &--next, &--done { - background: var(--color-primary); + background: var(--color-accent-500); color: var(--color-static-white); padding: 6px 22px; @@ -238,7 +238,7 @@ width: 28px; height: 3px; border-radius: 2px; - background: var(--color-primary); + background: var(--color-accent-500); flex-shrink: 0; } } diff --git a/src/web-ui/src/shared/notification-system/components/NotificationItem.scss b/src/web-ui/src/shared/notification-system/components/NotificationItem.scss index c4d586f5d..3f67a062b 100644 --- a/src/web-ui/src/shared/notification-system/components/NotificationItem.scss +++ b/src/web-ui/src/shared/notification-system/components/NotificationItem.scss @@ -89,14 +89,14 @@ border: none; background: none; font: inherit; - color: var(--color-primary); + color: var(--color-accent-500); text-decoration: underline; text-align: left; cursor: pointer; word-break: break-all; &:hover { - color: var(--color-accent); + color: var(--color-accent-500); } } diff --git a/src/web-ui/src/tools/editor/components/DiffEditor.scss b/src/web-ui/src/tools/editor/components/DiffEditor.scss index b365ca806..dac100574 100644 --- a/src/web-ui/src/tools/editor/components/DiffEditor.scss +++ b/src/web-ui/src/tools/editor/components/DiffEditor.scss @@ -202,7 +202,7 @@ $_diff-error-max-width: 400px; gap: $size-gap-3; &__icon { - color: var(--color-text-tertiary); + color: var(--color-text-muted); opacity: 0.6; } @@ -215,7 +215,7 @@ $_diff-error-max-width: 400px; } &__path { - color: var(--color-text-tertiary); + color: var(--color-text-muted); font-size: var(--font-size-xs); font-family: $font-family-mono; margin: 0; diff --git a/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss b/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss index 15c1d1fd5..333e38525 100644 --- a/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss +++ b/src/web-ui/src/tools/editor/components/EditorBreadcrumb.scss @@ -19,7 +19,7 @@ $_dropdown-width: 220px; height: $_breadcrumb-height; padding: 0 $size-gap-3; background: var(--color-bg-scene); - border-bottom: 1px solid var(--color-border-subtle); + border-bottom: 1px solid var(--border-subtle); overflow: hidden; flex-shrink: 0; gap: 2px; @@ -88,7 +88,7 @@ $_dropdown-width: 220px; width: $_dropdown-width; max-height: $_dropdown-max-height; background: var(--color-bg-elevated); - border: 1px solid var(--color-border-subtle); + border: 1px solid var(--border-subtle); border-radius: 6px; box-shadow: var(--shadow-base); z-index: 10000; @@ -100,7 +100,7 @@ $_dropdown-width: 220px; align-items: center; gap: $size-gap-2; padding: 6px 8px; - border-bottom: 1px solid var(--color-border-subtle); + border-bottom: 1px solid var(--border-subtle); background: var(--color-bg-tertiary); } diff --git a/src/web-ui/src/tools/editor/components/EditorStatusBar.scss b/src/web-ui/src/tools/editor/components/EditorStatusBar.scss index 4ad41125e..a761bfaaf 100644 --- a/src/web-ui/src/tools/editor/components/EditorStatusBar.scss +++ b/src/web-ui/src/tools/editor/components/EditorStatusBar.scss @@ -20,7 +20,7 @@ $_section-gap: 12px; height: $_statusbar-height; padding: $_statusbar-padding; background: var(--color-bg-scene); - border-top: 1px solid var(--color-border-subtle); + border-top: 1px solid var(--border-subtle); font-size: $_statusbar-font-size; font-family: $font-family-mono; color: var(--color-text-muted); @@ -63,7 +63,7 @@ $_section-gap: 12px; &__separator { width: 1px; height: 12px; - background: var(--color-border-subtle); + background: var(--border-subtle); flex-shrink: 0; } diff --git a/src/web-ui/src/tools/editor/components/MarkdownEditor.scss b/src/web-ui/src/tools/editor/components/MarkdownEditor.scss index c658033c5..3fbf0314e 100644 --- a/src/web-ui/src/tools/editor/components/MarkdownEditor.scss +++ b/src/web-ui/src/tools/editor/components/MarkdownEditor.scss @@ -5,7 +5,7 @@ flex-direction: column; width: 100%; height: 100%; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); color: var(--color-text-primary); overflow: hidden; } @@ -16,7 +16,7 @@ gap: $size-gap-3; padding: $size-gap-3 $size-gap-4; border-bottom: 1px solid color-mix(in srgb, var(--color-warning) 22%, transparent); - background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-flowchat)); + background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-scene)); color: var(--color-text-secondary); flex-shrink: 0; } @@ -49,7 +49,7 @@ min-height: 34px; padding: 4px $size-gap-3; border-bottom: 1px solid var(--border-subtle); - background: color-mix(in srgb, var(--color-bg-flowchat) 92%, var(--color-bg-elevated)); + background: color-mix(in srgb, var(--color-bg-scene) 92%, var(--color-bg-elevated)); flex-shrink: 0; } @@ -93,7 +93,7 @@ justify-content: center; width: 100%; height: 100%; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); color: var(--color-text-primary); } @@ -103,7 +103,7 @@ justify-content: center; width: 100%; height: 100%; - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); color: var(--color-text-primary); .error-content { diff --git a/src/web-ui/src/tools/editor/components/PlanViewer.scss b/src/web-ui/src/tools/editor/components/PlanViewer.scss index 5c74f2861..cf05a5a15 100644 --- a/src/web-ui/src/tools/editor/components/PlanViewer.scss +++ b/src/web-ui/src/tools/editor/components/PlanViewer.scss @@ -51,7 +51,7 @@ transition: all 0.15s ease; &:hover { - background: var(--color-bg-hover); + background: var(--element-bg-hover); border-color: var(--border-medium); } } @@ -120,7 +120,7 @@ font-size: 14px; font-weight: 500; color: var(--color-text-primary); - font-family: var(--font-mono); + font-family: var(--font-family-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/web-ui/src/tools/editor/components/ReadOnlyCodeBlock/ReadOnlyCodeBlock.scss b/src/web-ui/src/tools/editor/components/ReadOnlyCodeBlock/ReadOnlyCodeBlock.scss index 73243ebd1..d90d504fe 100644 --- a/src/web-ui/src/tools/editor/components/ReadOnlyCodeBlock/ReadOnlyCodeBlock.scss +++ b/src/web-ui/src/tools/editor/components/ReadOnlyCodeBlock/ReadOnlyCodeBlock.scss @@ -71,7 +71,7 @@ // Bordered mode .readonly-code-block--bordered { - border: 1px solid var(--color-border); + border: 1px solid var(--border-base); } // Inline mode (for inline code) diff --git a/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss b/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss index 5aa2adc71..be269d1c6 100644 --- a/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss +++ b/src/web-ui/src/tools/editor/components/StatusBarPopovers/StatusBarPopovers.scss @@ -16,7 +16,7 @@ min-width: 200px; max-width: 320px; background: var(--color-bg-elevated); - border: 1px solid var(--color-border-subtle); + border: 1px solid var(--border-subtle); border-radius: $popover-radius; box-shadow: $popover-shadow; font-size: 12px; @@ -103,7 +103,7 @@ padding: 6px 12px; font-size: 11px; color: var(--color-text-muted); - border-bottom: 1px solid var(--color-border-subtle); + border-bottom: 1px solid var(--border-subtle); } } diff --git a/src/web-ui/src/tools/editor/meditor/components/MEditor.scss b/src/web-ui/src/tools/editor/meditor/components/MEditor.scss index cb72d9857..83d5606b4 100644 --- a/src/web-ui/src/tools/editor/meditor/components/MEditor.scss +++ b/src/web-ui/src/tools/editor/meditor/components/MEditor.scss @@ -37,7 +37,7 @@ } &-dark { - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); color: var(--color-text-primary); .m-editor-textarea { @@ -55,7 +55,7 @@ } &-light { - background: var(--color-bg-flowchat); + background: var(--color-bg-scene); color: var(--color-text-primary); border: 1px solid var(--border-base); diff --git a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss index e0a8e058c..4200437b8 100644 --- a/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss +++ b/src/web-ui/src/tools/editor/meditor/components/TiptapEditor.scss @@ -1008,7 +1008,7 @@ resize: vertical; border: 1px solid color-mix(in srgb, var(--color-text-primary) 12%, transparent); border-radius: $size-radius-base; - background: color-mix(in srgb, var(--color-bg-flowchat) 94%, black); + background: color-mix(in srgb, var(--color-bg-scene) 94%, black); color: var(--color-text-primary); padding: $size-gap-3; line-height: 1.55; @@ -1068,7 +1068,7 @@ word-break: break-word; border: 1px solid color-mix(in srgb, var(--color-text-primary) 12%, transparent); border-radius: $size-radius-base; - background: color-mix(in srgb, var(--color-bg-flowchat) 94%, black); + background: color-mix(in srgb, var(--color-bg-scene) 94%, black); color: var(--color-text-primary); padding: $size-gap-3; line-height: 1.55; @@ -1126,7 +1126,7 @@ padding: $size-gap-2 $size-gap-3; border: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent); border-radius: $size-radius-base; - background: color-mix(in srgb, var(--color-bg-flowchat) 88%, white); + background: color-mix(in srgb, var(--color-bg-scene) 88%, white); } [data-type='details'] > button { @@ -1184,7 +1184,7 @@ margin: $size-gap-3 0; border: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent); border-radius: $size-radius-base; - background: color-mix(in srgb, var(--color-bg-flowchat) 88%, white); + background: color-mix(in srgb, var(--color-bg-scene) 88%, white); overflow: hidden; } @@ -1221,7 +1221,7 @@ } .m-editor-details-block__summary::placeholder { - color: var(--color-text-tertiary); + color: var(--color-text-muted); } .m-editor-details-block__body { diff --git a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss index 23370facc..309a19c88 100644 --- a/src/web-ui/src/tools/file-system/styles/FileExplorer.scss +++ b/src/web-ui/src/tools/file-system/styles/FileExplorer.scss @@ -198,7 +198,7 @@ $_indent-width: 8px; @keyframes file-node-highlight-fade { 0% { - background: rgba(var(--color-primary-rgb) / 0.2); + background: rgba(var(--color-accent-500-rgb) / 0.2); } 30% { background: $git-color-branch-bg; diff --git a/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx b/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx index 2cb205c26..f1b46a27f 100644 --- a/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx +++ b/src/web-ui/src/tools/generative-widget/GenerativeWidgetFrame.tsx @@ -92,8 +92,10 @@ export const GENERATIVE_WIDGET_SHELL_HTML = ` * { box-sizing: border-box; } :root { ${createWidgetThemeFallbackCss()} - --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - --font-mono: "SF Mono", Consolas, monospace; + --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-family-mono: "SF Mono", Consolas, monospace; + --font-sans: var(--font-family-sans); + --font-mono: var(--font-family-mono); --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 14px; @@ -101,12 +103,18 @@ ${createWidgetThemeFallbackCss()} --font-size-2xl: 18px; --font-weight-medium: 500; --font-weight-semibold: 600; - --spacing-3: 12px; - --spacing-4: 16px; - --spacing-5: 20px; - --radius-sm: 6px; - --radius-base: 8px; - --radius-lg: 12px; + --size-gap-3: 12px; + --size-gap-4: 16px; + --size-gap-5: 20px; + --spacing-3: var(--size-gap-3); + --spacing-4: var(--size-gap-4); + --spacing-5: var(--size-gap-5); + --size-radius-sm: 6px; + --size-radius-base: 8px; + --size-radius-lg: 12px; + --radius-sm: var(--size-radius-sm); + --radius-base: var(--size-radius-base); + --radius-lg: var(--size-radius-lg); --motion-fast: 0.15s; --easing-standard: ease; } @@ -117,7 +125,7 @@ ${createWidgetThemeFallbackCss()} min-height: 0; background: transparent; color: var(--color-text-primary); - font-family: var(--font-sans); + font-family: var(--font-family-sans); overflow-x: hidden; overflow-y: hidden; } @@ -149,7 +157,7 @@ ${createWidgetThemeFallbackCss()} line-height: 1.5; } body, button, input, textarea, select { - font-family: var(--font-sans); + font-family: var(--font-family-sans); } button, input, textarea, select { font: inherit; @@ -180,25 +188,25 @@ ${createWidgetThemeFallbackCss()} max-width: 100%; display: flex; flex-direction: column; - gap: var(--spacing-4); + gap: var(--size-gap-4); color: var(--color-text-primary); } .bf-stack { display: flex; flex-direction: column; - gap: var(--spacing-3); + gap: var(--size-gap-3); } .bf-row { display: flex; align-items: center; - gap: var(--spacing-3); + gap: var(--size-gap-3); min-width: 0; } .bf-row-wrap { display: flex; flex-wrap: wrap; align-items: center; - gap: var(--spacing-3); + gap: var(--size-gap-3); min-width: 0; } .bf-toolbar { @@ -206,9 +214,9 @@ ${createWidgetThemeFallbackCss()} flex-wrap: wrap; align-items: center; justify-content: space-between; - gap: var(--spacing-3); - padding: var(--spacing-3) var(--spacing-4); - border-radius: var(--radius-lg); + gap: var(--size-gap-3); + padding: var(--size-gap-3) var(--size-gap-4); + border-radius: var(--size-radius-lg); background: color-mix(in srgb, var(--color-bg-secondary) 82%, transparent); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); @@ -216,14 +224,14 @@ ${createWidgetThemeFallbackCss()} .bf-section { display: flex; flex-direction: column; - gap: var(--spacing-3); + gap: var(--size-gap-3); } .bf-section-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; - gap: var(--spacing-3); + gap: var(--size-gap-3); } .bf-title { margin: 0; @@ -252,10 +260,10 @@ ${createWidgetThemeFallbackCss()} position: relative; display: flex; flex-direction: column; - gap: var(--spacing-3); + gap: var(--size-gap-3); width: 100%; - padding: var(--spacing-4); - border-radius: var(--radius-lg); + padding: var(--size-gap-4); + border-radius: var(--size-radius-lg); background: var(--color-bg-secondary); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); @@ -272,7 +280,7 @@ ${createWidgetThemeFallbackCss()} box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-500) 18%, transparent), 0 10px 24px color-mix(in srgb, var(--color-accent-500) 14%, transparent); - border-radius: min(var(--radius-base), 12px); + border-radius: min(var(--size-radius-base), 12px); transition: outline-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; transform: translateY(-1px); } @@ -283,7 +291,7 @@ ${createWidgetThemeFallbackCss()} .bf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); - gap: var(--spacing-3); + gap: var(--size-gap-3); width: 100%; min-width: 0; } @@ -292,8 +300,8 @@ ${createWidgetThemeFallbackCss()} flex-direction: column; gap: 6px; min-width: 0; - padding: var(--spacing-3); - border-radius: var(--radius-base); + padding: var(--size-gap-3); + border-radius: var(--size-radius-base); background: var(--element-bg-base); border: 1px solid var(--border-subtle); } @@ -358,7 +366,7 @@ ${createWidgetThemeFallbackCss()} max-width: 100%; padding: 0 12px; border: 1px solid var(--border-base); - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); background: var(--element-bg-base); color: var(--color-text-secondary); text-decoration: none; @@ -388,7 +396,7 @@ ${createWidgetThemeFallbackCss()} max-width: 100%; min-width: 0; padding: 0 12px; - border-radius: var(--radius-sm); + border-radius: var(--size-radius-sm); border: 1px solid var(--border-base); background: var(--element-bg-subtle); color: var(--color-text-primary); @@ -425,9 +433,9 @@ ${createWidgetThemeFallbackCss()} display: flex; align-items: flex-start; justify-content: space-between; - gap: var(--spacing-3); - padding: var(--spacing-3); - border-radius: var(--radius-base); + gap: var(--size-gap-3); + padding: var(--size-gap-3); + border-radius: var(--size-radius-base); background: var(--element-bg-subtle); border: 1px solid transparent; } @@ -442,7 +450,7 @@ ${createWidgetThemeFallbackCss()} width: 100%; overflow-x: auto; border: 1px solid var(--border-subtle); - border-radius: var(--radius-base); + border-radius: var(--size-radius-base); background: var(--color-bg-secondary); } .bf-table { @@ -474,8 +482,8 @@ ${createWidgetThemeFallbackCss()} justify-content: center; gap: 8px; min-height: 140px; - padding: var(--spacing-5); - border-radius: var(--radius-lg); + padding: var(--size-gap-5); + border-radius: var(--size-radius-lg); border: 1px dashed var(--border-base); background: color-mix(in srgb, var(--element-bg-subtle) 80%, transparent); color: var(--color-text-muted); @@ -493,17 +501,17 @@ ${createWidgetThemeFallbackCss()} border-radius: 6px; background: var(--element-bg-base); color: var(--color-text-primary); - font-family: var(--font-mono); + font-family: var(--font-family-mono); font-size: 12px; } .bf-mono { - font-family: var(--font-mono); + font-family: var(--font-family-mono); } @media (max-width: 560px) { .bf-card, .bf-panel, .bf-toolbar { - padding: var(--spacing-3); + padding: var(--size-gap-3); } .bf-grid { grid-template-columns: 1fr; @@ -755,7 +763,7 @@ ${createWidgetThemeFallbackCss()} vars['--color-text-primary'] || getComputedStyle(root).getPropertyValue('--color-text-primary') || body.style.color; - body.style.fontFamily = vars['--font-sans'] || body.style.fontFamily; + body.style.fontFamily = vars['--font-family-sans'] || vars['--font-sans'] || body.style.fontFamily; } } diff --git a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss index 9c7fac392..8d10a5c77 100644 --- a/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss +++ b/src/web-ui/src/tools/generative-widget/GenerativeWidgetPanel.scss @@ -78,8 +78,8 @@ } .bitfun-generative-widget-panel__button--primary { - border-color: var(--color-primary); - background: color-mix(in srgb, var(--color-primary) 18%, transparent); + border-color: var(--color-accent-500); + background: color-mix(in srgb, var(--color-accent-500) 18%, transparent); } .bitfun-generative-widget-panel__workspace { @@ -128,7 +128,7 @@ padding: 14px 16px; background: transparent; color: var(--color-text-primary); - font: 13px/1.6 var(--font-mono); + font: 13px/1.6 var(--font-family-mono); } .bitfun-generative-widget-panel__error { diff --git a/src/web-ui/src/tools/generative-widget/themePayload.test.ts b/src/web-ui/src/tools/generative-widget/themePayload.test.ts index edf8ab993..c275d30f4 100644 --- a/src/web-ui/src/tools/generative-widget/themePayload.test.ts +++ b/src/web-ui/src/tools/generative-widget/themePayload.test.ts @@ -7,7 +7,7 @@ import { readWidgetThemePayload, } from './themePayload'; -const WIDGET_THEME_VAR_NAMES_HASH = 'c33a807d44e85a0771a50bfc9277eb98ffbd717d9b750ff742aab06420cc46ed'; +const WIDGET_THEME_VAR_NAMES_HASH = '3234a6b63576f03b4a7e3f97349f6a042fffaf6300943e5f8972eecdb5347683'; function readPayloadWithHostValues(hostValues: Record = {}) { const requestedNames: string[] = []; @@ -60,7 +60,7 @@ describe('generated widget theme payload contract', () => { first: requestedNames[0], last: requestedNames[requestedNames.length - 1], }).toEqual({ - count: 323, + count: 324, hash: WIDGET_THEME_VAR_NAMES_HASH, first: '--color-bg-primary', last: '--tool-card-action-font-weight', diff --git a/src/web-ui/src/tools/generative-widget/themePayload.ts b/src/web-ui/src/tools/generative-widget/themePayload.ts index ed3bd747b..323f37832 100644 --- a/src/web-ui/src/tools/generative-widget/themePayload.ts +++ b/src/web-ui/src/tools/generative-widget/themePayload.ts @@ -138,6 +138,7 @@ const WIDGET_THEME_VAR_GROUPS = { '--color-accent-300', '--color-accent-400', FALLBACK_VAR.accent500, + '--color-accent-500-rgb', FALLBACK_VAR.accent600, '--color-accent-700', '--color-accent-800', diff --git a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss index 355d360d3..5b25c196f 100644 --- a/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss +++ b/src/web-ui/src/tools/git/components/GitBranchHistoryView/GitBranchHistoryView.scss @@ -33,7 +33,7 @@ button { padding: 8px 20px; - background: var(--color-primary); + background: var(--color-accent-500); color: var(--color-static-white); border: none; border-radius: 6px; @@ -56,8 +56,8 @@ &__spinner { width: 36px; height: 36px; - border: 3px solid var(--color-border); - border-top-color: var(--color-primary); + border: 3px solid var(--border-base); + border-top-color: var(--color-accent-500); border-radius: 50%; animation: git-branch-history-spin 0.8s linear infinite; } @@ -67,8 +67,8 @@ align-items: center; justify-content: space-between; padding: 10px 12px; - border-bottom: 1px solid var(--color-border); - background: var(--color-background-secondary); + border-bottom: 1px solid var(--border-base); + background: var(--color-bg-secondary); flex-shrink: 0; gap: 12px; } @@ -99,7 +99,7 @@ flex-shrink: 0; &:hover { - background: var(--color-hover); + background: var(--element-bg-hover); } } @@ -131,7 +131,7 @@ &--expanded { .git-branch-history-view__commit-main { - background: var(--color-background-secondary); + background: var(--color-bg-secondary); } } @@ -185,17 +185,17 @@ transition: background 0.15s ease; &:hover { - background: var(--color-hover); + background: var(--element-bg-hover); } } &__checkbox { - color: var(--color-text-tertiary); + color: var(--color-text-muted); transition: color 0.15s ease; } &__checkbox--checked { - color: var(--color-primary); + color: var(--color-accent-500); } &__checkbox--partial { @@ -203,14 +203,14 @@ display: flex; align-items: center; justify-content: center; - color: var(--color-text-tertiary); + color: var(--color-text-muted); } &__checkbox-partial-mark { position: absolute; width: 8px; height: 2px; - background: var(--color-primary); + background: var(--color-accent-500); border-radius: 1px; } @@ -243,7 +243,7 @@ width: 2px; flex: 1; min-height: 16px; - background: var(--color-border); + background: var(--border-base); margin-top: 4px; } @@ -271,7 +271,7 @@ align-items: center; gap: 8px; font-size: 11px; - color: var(--color-text-tertiary); + color: var(--color-text-muted); } &__commit-author { @@ -291,14 +291,14 @@ gap: 3px; font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; padding: 1px 4px; - background: var(--color-background-tertiary); + background: var(--color-bg-tertiary); border-radius: 3px; cursor: pointer; transition: all 0.15s ease; font-size: 10px; &:hover { - background: var(--color-hover); + background: var(--element-bg-hover); color: var(--color-text-secondary); } @@ -330,7 +330,7 @@ padding: 0; background: transparent; border: none; - color: var(--color-text-tertiary); + color: var(--color-text-muted); cursor: pointer; border-radius: 4px; transition: all 0.15s ease; @@ -339,14 +339,14 @@ &:hover { color: var(--color-text-primary); - background: var(--color-background-tertiary); + background: var(--color-bg-tertiary); } } &__commit-details { margin-left: 36px; padding: 10px 12px; - background: var(--color-background-secondary); + background: var(--color-bg-secondary); border-radius: 6px; margin-bottom: 4px; } @@ -364,7 +364,7 @@ } &__detail-label { - color: var(--color-text-tertiary); + color: var(--color-text-muted); min-width: 60px; flex-shrink: 0; } @@ -377,7 +377,7 @@ &--mono { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: 10px; - background: var(--color-background-tertiary); + background: var(--color-bg-tertiary); padding: 2px 6px; border-radius: 3px; } diff --git a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss index 44a711d03..7425e3308 100644 --- a/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss +++ b/src/web-ui/src/tools/git/components/GitGraphView/GitGraphView.scss @@ -29,7 +29,7 @@ button { padding: 8px 16px; - background: var(--color-primary); + background: var(--color-accent-500); color: var(--color-static-white); border: none; border-radius: 4px; @@ -46,7 +46,7 @@ width: 32px; height: 32px; border: 3px solid var(--color-overlay-white-10); - border-top-color: var(--color-primary); + border-top-color: var(--color-accent-500); border-radius: 50%; animation: spin 0.8s linear infinite; } @@ -56,8 +56,8 @@ align-items: center; justify-content: space-between; padding: 12px 16px; - border-bottom: 1px solid var(--color-border); - background: var(--color-background-secondary); + border-bottom: 1px solid var(--border-base); + background: var(--color-bg-secondary); flex-shrink: 0; } @@ -78,7 +78,7 @@ align-items: center; gap: 4px; padding: 4px 8px; - background: var(--color-primary); + background: var(--color-accent-500); color: var(--color-static-white); border-radius: 4px; font-size: 12px; @@ -105,7 +105,7 @@ font-family: 'SF Mono', 'Monaco', 'Courier New', monospace; &--no-results { - color: var(--color-text-tertiary); + color: var(--color-text-muted); } } @@ -124,7 +124,7 @@ transition: all 0.15s ease; &:hover:not(:disabled) { - background: var(--color-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } @@ -218,12 +218,12 @@ gap: 12px; padding: 0 16px; cursor: pointer; - border-bottom: 1px solid var(--color-border); + border-bottom: 1px solid var(--border-base); transition: background 0.15s, box-shadow 0.15s; background: var(--color-bg-primary); &:hover { - background: var(--color-hover); + background: var(--element-bg-hover); box-shadow: 0 1px 3px var(--color-overlay-black-10); z-index: 1; } @@ -326,7 +326,7 @@ &__commit-hash { font-family: 'Courier New', monospace; padding: 2px 6px; - background: var(--color-background-tertiary); + background: var(--color-bg-tertiary); border-radius: 4px; white-space: nowrap; } @@ -353,7 +353,7 @@ border-radius: 4px; &:hover { - background: var(--color-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } } diff --git a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css index bb3dabd4c..0d99d05a8 100644 --- a/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css +++ b/src/web-ui/src/tools/git/components/GitSettingsView/GitSettingsView.css @@ -12,7 +12,7 @@ align-items: center; justify-content: space-between; padding: 16px; - border-bottom: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--border-base); background: var(--color-bg-secondary); } @@ -42,7 +42,7 @@ width: 32px; height: 32px; background: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); + border: 1px solid var(--border-base); border-radius: 4px; color: var(--color-text-secondary); cursor: pointer; @@ -50,7 +50,7 @@ } .refresh-btn:hover:not(:disabled) { - background: var(--color-bg-hover); + background: var(--element-bg-hover); color: var(--color-text-primary); } @@ -117,7 +117,7 @@ .settings-tabs { display: flex; - border-bottom: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--border-base); background: var(--color-bg-secondary); } @@ -138,12 +138,12 @@ .tab-btn:hover { color: var(--color-text-primary); - background: var(--color-bg-hover); + background: var(--element-bg-hover); } .tab-btn.active { - color: var(--color-primary); - border-bottom-color: var(--color-primary); + color: var(--color-accent-500); + border-bottom-color: var(--color-accent-500); } .settings-content { @@ -159,7 +159,7 @@ .settings-section { margin-bottom: 32px; padding-bottom: 24px; - border-bottom: 1px solid var(--color-border-primary); + border-bottom: 1px solid var(--border-base); } .settings-section:last-child { @@ -207,7 +207,7 @@ width: 100%; padding: 8px 12px; background: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); + border: 1px solid var(--border-base); border-radius: 4px; color: var(--color-text-primary); font-size: 12px; @@ -217,8 +217,8 @@ .form-group input:focus, .form-group select:focus { outline: none; - border-color: var(--color-primary); - background: var(--color-bg-hover); + border-color: var(--color-accent-500); + background: var(--element-bg-hover); } .form-group input::placeholder { @@ -228,7 +228,7 @@ .checkbox-group { padding: 12px; background: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); + border: 1px solid var(--border-base); border-radius: 6px; } @@ -262,7 +262,7 @@ .remote-config { padding: 16px; background: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); + border: 1px solid var(--border-base); border-radius: 6px; margin-bottom: 16px; } @@ -270,10 +270,10 @@ .remote-config h5 { margin: 0 0 12px; padding: 4px 8px; - background: var(--color-primary-bg); - border: 1px solid var(--color-primary); + background: var(--color-accent-100); + border: 1px solid var(--color-accent-500); border-radius: 3px; - color: var(--color-primary); + color: var(--color-accent-500); font-size: 11px; font-weight: 600; text-transform: uppercase; @@ -283,7 +283,7 @@ .branch-config { padding: 16px; background: var(--color-bg-tertiary); - border: 1px solid var(--color-border-primary); + border: 1px solid var(--border-base); border-radius: 6px; margin-bottom: 16px; } @@ -338,7 +338,7 @@ .retry-btn { padding: 8px 16px; - background: var(--color-primary); + background: var(--color-accent-500); border: none; border-radius: 4px; color: white; @@ -348,7 +348,7 @@ } .retry-btn:hover { - background: var(--color-primary-hover); + background: var(--color-accent-600); } @media (max-width: 768px) { @@ -373,7 +373,7 @@ } .tab-btn.active { - border-right-color: var(--color-primary); + border-right-color: var(--color-accent-500); border-bottom-color: transparent; } diff --git a/src/web-ui/src/tools/workspace/components/WorkspaceManager.css b/src/web-ui/src/tools/workspace/components/WorkspaceManager.css index 688ef9554..492d680d0 100644 --- a/src/web-ui/src/tools/workspace/components/WorkspaceManager.css +++ b/src/web-ui/src/tools/workspace/components/WorkspaceManager.css @@ -257,8 +257,8 @@ .workspace-type { font-size: 12px; padding: 2px 8px; - background-color: var(--secondary-bg); - color: var(--text-secondary); + background-color: var(--color-bg-secondary); + color: var(--color-text-secondary); border-radius: 4px; text-transform: capitalize; } @@ -268,7 +268,7 @@ align-items: center; gap: 4px; font-size: 12px; - color: var(--text-tertiary); + color: var(--color-text-muted); } .workspace-actions {