diff --git a/docs/FRONTEND_REBUILD_STATUS.md b/docs/FRONTEND_REBUILD_STATUS.md index a2be2da6..9a82956f 100644 --- a/docs/FRONTEND_REBUILD_STATUS.md +++ b/docs/FRONTEND_REBUILD_STATUS.md @@ -5,6 +5,17 @@ Baseline: main `71ede3053b1d71f4c6e4f7053b355ebe301c1a1b`, checked on the first recovery/connection fixes; #286 contributes scoped journey fixes. Passing those slices does not establish complete product or platform acceptance. +## Neutral glass follow-up — 2026-10-10 + +PR #294 merged into main `4a5c8909`. The next user-directed visual pass removes +the separate V2 purple accent and decorative yellow/orange/blue/green palettes. +Shared neutral material tokens supply white filled primary controls, dark button +text and high-opacity light/dark/glass surfaces. Semantic errors, code diffs and +terminal ANSI content retain their meaning. The [palette inventory](branding/neutral-glass-palette.md) +records before/after counts, accessibility checks and original browser evidence. +This visual pass leaves the remaining environment, extension and native journey +roadmap below in place. + ## Product guidance revision — 2026-10-10 The user's latest direction treats language and information architecture as part diff --git a/docs/PROJECT_MEMORY.md b/docs/PROJECT_MEMORY.md index d2909ef9..72c37034 100644 --- a/docs/PROJECT_MEMORY.md +++ b/docs/PROJECT_MEMORY.md @@ -1,5 +1,12 @@ # Prayu Project Memory +> 2026-10-10 neutral glass follow-up: after #294 merged, the user requested removal +> of purple, yellow/orange and other independent decorative palettes. Shared +> light/dark/glass tokens now use neutral high-opacity surfaces, white filled +> primary controls and dark foregrounds. V2 and legacy components share these +> roles; danger, code diffs and terminal ANSI output retain their content meaning. +> See [palette inventory and conventions](branding/neutral-glass-palette.md). + > 2026-10-10 product guidance revision: the frontend rebuild includes user-facing > language and information hierarchy. The connection hub groups task preparation, > tools/collaboration and runtime settings; MCP/Plugin/LSP show actual setup stages. diff --git a/docs/branding/neutral-glass-palette.md b/docs/branding/neutral-glass-palette.md new file mode 100644 index 00000000..27d5ed36 --- /dev/null +++ b/docs/branding/neutral-glass-palette.md @@ -0,0 +1,59 @@ +# 中性玻璃材质与颜色收敛 + +2026-10-10，按用户对紫色、黄橙色和白色填充的反馈更新。基线为合并 +前端重建后的 main `4a5c8909895ce4a1b0b6620f479f9abeb406402e`；它与 +`75aceac721c8dfb6911a4540427da7684a02c961` 的文件树相同。 + +## 来源与盘点口径 + +截图中的紫色来自 `web/src/v2/styles.css` 的 `--v2-accent: #6b55ed`。 +这个独立常量绕过了共享主题，83 条 CSS 声明在 17 个文件中引用该 token。 +供应商图标槽、审批与恢复卡片、开关、背景和头像还定义了各自的彩色渐变。 + +盘点覆盖 `web/src` 中全部 24 个 CSS 文件，以及 TS/TSX 中的颜色常量。 +CSS 使用 PostCSS 解析声明，记录 hex、rgb、hsl、white、black 的出现次数、 +原始写法和规范化 RGBA。包含回退值与历史定义；这些数量表示维护复杂度。 +原始品牌图片、用户内容、第三方编辑器和终端输出使用各自的内容语义。 + +| 项目 | 清理前 | 清理后 | +| --- | ---: | ---: | +| CSS 颜色字面量出现次数 | 787 | 136 | +| CSS 颜色不同写法 | 521 | 93 | +| CSS 规范化 RGBA 值 | 518 | 93 | +| V2 CSS 颜色出现次数 | 295 | 39 | +| V2 CSS 颜色不同写法 | 165 | 28 | +| 颜色字面量回退次数 | 96 | 0 | +| 闲置供应商 accent 元数据 | 11 | 0 | + +清理前，V2 的紫色组为 8 次定义/回退、6 个色值；黄橙棕组为 28 次、24 个 +色值，覆盖提示、头像和玻璃缩略图。两组现在均已移除。V2 剩余字面量为 +中性阴影与高光。全局彩色 CSS 收敛到 4 个危险/代码差异色值、8 次主题定义。 + +## 材质约定 + +- 强调操作使用不透明白色填充 `--prayu-primary-bg`，深色文字 + `--prayu-primary-fg`，配合边缘高光、轻阴影和明确边框。hover 使用 + `--prayu-primary-hover`。主按钮、图标槽和选中控件一起核对前景与背景。 +- light 使用白/浅灰面板；dark 与 glass 使用中性深灰面板。面板填充不透明度 + 为 88–98%，玻璃强调填充为 86–98%。浅色主按钮在三种主题中保持白底深字。 +- 玻璃感来自层次、模糊、细边与反光。移除紫、黄、橙、蓝绿装饰渐变及背景 + 饱和度放大；V2 的强调色和焦点色直接引用共享主题。 +- 普通提示、等待、就绪和连接状态使用中性材质，通过文本、图标和状态标记 + 传达含义。实际错误与破坏性操作使用共享 danger；代码增删保留 diff 色。 +- 终端采用固定中性深色画布、灰白文字和光标，保留六种 ANSI 内容色。 +- `prefers-reduced-transparency` 回退到实色并关闭模糊；高对比模式使用明确 + 边框；forced colors 跟随系统 Canvas、Button 和 Highlight 颜色。 + +新增组件复用这些语义 token。组件 CSS 使用 `var()` 关联用途，具体颜色值 +集中在共享主题。字体、布局、权限、任务状态和用户输出格式沿用原有行为。 + +## 验证与证据 + +- 静态检查：颜色变量均有来源，PostCSS/Vite CSS 编译通过。主按钮文字对比 + 17.224:1，hover 15.114:1；按主题背景范围估算的最低辅助文字对比 5.420:1。 +- 前端现有测试：186 文件、1,834 项通过；TypeScript 与生产构建通过。 +- 真实 Go API 和隔离数据库提供生产静态资源；浏览器核对三种主题、390px + 与 1280px 布局、键盘焦点、降低透明度和系统高对比表现。 +- 本地原始截图、逐声明统计、SHA-256 和浏览器计算样式保存在忽略目录 + `build/frontend-rebuild/color-audit/` 与 `build/frontend-rebuild/neutral-*`。 + 浏览器检查覆盖本次材质变更；原生 Windows Acrylic 与壁纸合成仍需实机观察。 diff --git a/web/index.html b/web/index.html index dc6f1e77..1e1b3ca9 100644 --- a/web/index.html +++ b/web/index.html @@ -5,7 +5,7 @@ - + Universal Code diff --git a/web/src/components/github-review-write-form.css b/web/src/components/github-review-write-form.css index 2d355eef..94e8a607 100644 --- a/web/src/components/github-review-write-form.css +++ b/web/src/components/github-review-write-form.css @@ -1,6 +1,6 @@ .github-review-thread { padding: 10px 0; - border-top: 1px solid var(--border); + border-top: 1px solid var(--prayu-border); overflow-wrap: anywhere; } diff --git a/web/src/components/inspector-workspace-navigation.css b/web/src/components/inspector-workspace-navigation.css index a3df0871..3cf45c6e 100644 --- a/web/src/components/inspector-workspace-navigation.css +++ b/web/src/components/inspector-workspace-navigation.css @@ -2,20 +2,20 @@ .inspector-workspace-common { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .workspace-tabs.inspector-workspace-navigation button { min-height: 34px; padding: 5px 10px; } .workspace-tabs.inspector-workspace-navigation .inspector-workspace-expand { margin-left: auto; font-weight: 400; } -.inspector-workspace-groups { display: grid; flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-height: min(42vh, 380px); overflow: auto; padding: 12px 0; border-top: 1px solid var(--border, #ddd); } +.inspector-workspace-groups { display: grid; flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-height: min(42vh, 380px); overflow: auto; padding: 12px 0; border-top: 1px solid var(--prayu-border); } .inspector-workspace-groups[hidden] { display: none; } .inspector-workspace-groups > div { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; } -.inspector-workspace-groups > div > span { font-size: 12px; color: var(--muted, #70747b); padding: 4px 8px; } +.inspector-workspace-groups > div > span { font-size: 12px; color: var(--prayu-muted); padding: 4px 8px; } .workspace-tabs .inspector-workspace-groups button { text-align: left; white-space: normal; justify-content: start; } -.inspector-workspace-input { border-top: 1px solid var(--border, #ddd); padding: 12px 18px; flex-shrink: 0; } +.inspector-workspace-input { border-top: 1px solid var(--prayu-border); padding: 12px 18px; flex-shrink: 0; } .inspector-workspace-input > summary, .inspector-workspace-section > summary { cursor: pointer; font-size: 14px; line-height: 1.6; padding: 5px 0; } -.inspector-workspace-input > p, .inspector-repository-heading > p { font-size: 13px; line-height: 1.65; color: var(--muted, #70747b); } +.inspector-workspace-input > p, .inspector-repository-heading > p { font-size: 13px; line-height: 1.65; color: var(--prayu-muted); } .workspace-view > .inspector-workspace-input > .session-composer { padding-inline: 0; border: 0; margin: 12px 0 0; } .inspector-session-run-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 18px; font-size: 13px; } .inspector-repository-heading h2 { font-size: 17px; font-weight: 600; margin: 0; } -.inspector-workspace-section { border-top: 1px solid var(--border, #ddd); padding-top: 8px; min-width: 0; } +.inspector-workspace-section { border-top: 1px solid var(--prayu-border); padding-top: 8px; min-width: 0; } .inspector-workspace-section[open] > summary { margin-bottom: 12px; } -.inspector-workspace-input > summary:focus-visible, .inspector-workspace-section > summary:focus-visible { outline: 2px solid var(--prayu-focus, #4b8ef7); outline-offset: 3px; } +.inspector-workspace-input > summary:focus-visible, .inspector-workspace-section > summary:focus-visible { outline: 2px solid var(--prayu-focus); outline-offset: 3px; } @media (max-width: 700px) { .inspector-workspace-groups { grid-template-columns: minmax(0, 1fr); gap: 12px; } .workspace-tabs.inspector-workspace-navigation .inspector-workspace-expand { margin-left: 0; } diff --git a/web/src/components/user-terminal-panel.tsx b/web/src/components/user-terminal-panel.tsx index d45a4dcf..a4ac67ad 100644 --- a/web/src/components/user-terminal-panel.tsx +++ b/web/src/components/user-terminal-panel.tsx @@ -69,20 +69,21 @@ export function UserTerminalPanel({ runID, sessionID, onSession }: { fontSize: 13, lineHeight: 1.18, scrollback: 5000, + // Keep the terminal canvas neutral; ANSI colors preserve command-output meaning. theme: { - background: "#171512", - foreground: "#f2e4cc", - cursor: "#f58231", - cursorAccent: "#171512", - selectionBackground: "#a94b2473", - black: "#171512", + background: "#181818", + foreground: "#ededed", + cursor: "#ededed", + cursorAccent: "#181818", + selectionBackground: "#ffffff38", + black: "#181818", red: "#ef6b5d", green: "#8fbf71", yellow: "#e2b45f", blue: "#78a9d4", magenta: "#c792b6", cyan: "#74b6b0", - white: "#f2e4cc", + white: "#ededed", }, }); const fit = new FitAddon(); diff --git a/web/src/styles.css b/web/src/styles.css index fc71e3f7..9ec474d2 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -35,20 +35,21 @@ --prayu-font-mono: "JetBrains Mono Variable", "JetBrains Mono", "HarmonyOS Sans SC", "Cascadia Code", Consolas, monospace; font-family: var(--prayu-font-ui); - color: #17202a; + color: var(--prayu-text); background: transparent; font-synthesis: none; text-rendering: optimizeLegibility; - --border: #d8dee5; - --border-strong: #bdc7d2; - --muted: #657383; - --surface: #ffffff; - --surface-subtle: #f7f9fa; - --ink: #17202a; - --accent: #087f73; - --accent-soft: #e5f4f1; - --danger: #b42318; - --warning: #a15c00; + --border: var(--prayu-border); + --border-strong: var(--prayu-border-strong); + --muted: var(--prayu-muted); + --surface: var(--prayu-panel); + --surface-subtle: var(--prayu-control); + --surface-raised: var(--prayu-panel-strong); + --ink: var(--prayu-text); + --accent: var(--prayu-accent); + --accent-soft: color-mix(in srgb, var(--prayu-accent) 14%, transparent); + --danger: var(--prayu-danger); + --warning: var(--prayu-warning); } .embedded-analyzer-panel .panel-heading-row { @@ -134,23 +135,23 @@ html, body, #root { min-width: 320px; min-height: 100%; margin: 0; } button, input, select { font: inherit; letter-spacing: 0; } textarea { font: inherit; letter-spacing: 0; } button { color: inherit; } -button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #168f82; outline-offset: 2px; } +button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--prayu-focus); outline-offset: 2px; } code, pre { font-family: var(--prayu-font-mono); } -.app-shell { height: 100dvh; min-height: 320px; overflow: hidden; background: #eef1f4; } +.app-shell { height: 100dvh; min-height: 320px; overflow: hidden; background: var(--prayu-control); } .topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--surface); } .brand-lockup { display: flex; align-items: center; gap: 12px; } .brand-lockup > span:last-child { display: grid; gap: 2px; } .brand-lockup strong { font-size: 15px; line-height: 1.2; } .brand-lockup small { color: var(--muted); font-size: 12px; } -.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #ffffff; background: #152b34; border-radius: 6px; } +.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--prayu-primary-fg); background: var(--prayu-primary-bg); border-radius: 6px; } .brand-lockup.compact .brand-mark { width: 34px; height: 34px; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .health-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; } -.health-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #1d9a6c; } +.health-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--prayu-success); } .health-indicator.offline i { background: var(--danger); } .icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); cursor: pointer; } -.icon-button:hover:not(:disabled) { background: #eef5f4; border-color: #9abdb8; } +.icon-button:hover:not(:disabled) { background: var(--prayu-control-hover); border-color: var(--prayu-border-strong); } .icon-button:disabled { opacity: .55; cursor: default; } .shell-body { height: calc(100dvh - 58px); min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); } .resource-tabs { height: 48px; display: grid; grid-template-columns: 1fr 1fr; padding: 7px; border-bottom: 1px solid var(--border); } @@ -158,9 +159,9 @@ code, pre { font-family: var(--prayu-font-mono); } .resource-tabs button.active { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--border); } .sidebar-tools { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 7px; padding: 10px 10px 7px; } .search-field { height: 34px; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--muted); } -.search-field:focus-within { border-color: #168f82; box-shadow: 0 0 0 1px #168f82; } +.search-field:focus-within { border-color: var(--prayu-focus); box-shadow: 0 0 0 1px var(--prayu-focus); } .search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); } -.status-filter { height: 32px; margin: 0 10px 8px; padding: 0 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: #465563; font-size: 12px; } +.status-filter { height: 32px; margin: 0 10px 8px; padding: 0 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--prayu-text); font-size: 12px; } .resource-list { min-height: 0; overflow: auto; padding: 0 7px 12px; } .resource-row-top { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; } @@ -172,7 +173,7 @@ code, pre { font-family: var(--prayu-font-mono); } .workspace-kicker { color: var(--muted); font-family: var(--prayu-font-mono); font-size: 11px; text-transform: uppercase; } .header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; } .stream-indicator { display: inline-flex; align-items: center; gap: 7px; padding-top: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; } -.stream-live { color: #147d58; } +.stream-live { color: var(--prayu-success); } .stream-reconnecting { color: var(--warning); } .workspace-tabs { min-height: 43px; display: flex; align-items: stretch; gap: 2px; padding: 0 24px; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--surface-subtle); } .workspace-tabs button { flex: 0 0 auto; min-width: 74px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; } @@ -194,15 +195,15 @@ code, pre { font-family: var(--prayu-font-mono); } .key-value dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .section-heading > span { color: var(--muted); font-size: 12px; } -.budget-track { width: 100%; height: 7px; display: block; margin-top: 16px; overflow: hidden; border: 0; border-radius: 3px; background: #e6ebef; appearance: none; } -.budget-track::-webkit-progress-bar { background: #e6ebef; } +.budget-track { width: 100%; height: 7px; display: block; margin-top: 16px; overflow: hidden; border: 0; border-radius: 3px; background: var(--prayu-control); appearance: none; } +.budget-track::-webkit-progress-bar { background: var(--prayu-control); } .budget-track::-webkit-progress-value { background: var(--accent); } .budget-track::-moz-progress-bar { background: var(--accent); } .plan-state-line { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; color: var(--muted); font-size: 11px; } .plan-direction-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .plan-direction { min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } .plan-direction:only-child { grid-column: 1 / -1; } -.plan-direction.selected { border-color: #7db7ae; box-shadow: inset 3px 0 0 var(--accent); } +.plan-direction.selected { border-color: var(--prayu-border); box-shadow: inset 3px 0 0 var(--accent); } .plan-direction summary { min-height: 94px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 12px; cursor: pointer; list-style: none; } .plan-direction summary::-webkit-details-marker { display: none; } .plan-direction summary > span:nth-child(2) { min-width: 0; display: grid; gap: 5px; } @@ -243,33 +244,34 @@ code, pre { font-family: var(--prayu-font-mono); } .run-execution-control label { color: var(--muted); font-size: 11px; } .run-execution-control input { width: 58px; height: 34px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--ink); } .run-execution-control .batch-review-input { min-width: 180px; flex: 1 1 240px; } -.command-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 11px; border: 1px solid #70808b; border-radius: 5px; background: var(--surface); color: var(--ink); cursor: pointer; } -.command-button:hover:not(:disabled) { border-color: #168f82; background: var(--accent-soft); color: #08665e; } +.command-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--prayu-border); border-radius: 5px; background: var(--surface); color: var(--ink); cursor: pointer; } +.command-button:hover:not(:disabled) { border-color: var(--prayu-border-strong); background: var(--accent-soft); color: var(--prayu-text); } .command-button:disabled { border-color: var(--border); background: var(--surface-subtle); color: var(--muted); cursor: default; } -.command-button.danger { border-color: #a65a5a; color: #8c2f2f; } -.command-button.danger:hover:not(:disabled) { border-color: #8c2f2f; background: #fff1f1; color: #7b2525; } +.command-button.danger, .prayu-shell .command-button.danger { border-color: color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); color: var(--prayu-danger); } +.command-button.danger:hover:not(:disabled), .prayu-shell .command-button.danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); background: var(--prayu-danger-soft); color: var(--prayu-danger); } .run-control-result { min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-size: 11px; } .run-cancel-hint { margin: 0; color: var(--muted); font-size: 11px; } .run-cancel-reason { flex: 1 1 160px; min-width: 120px; height: 34px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--ink); } .execution-profile-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 6px; } .execution-profile-segments button { min-width: 0; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 12px; border: 0; border-right: 1px solid var(--border); background: var(--surface); cursor: pointer; } .execution-profile-segments button:last-child { border-right: 0; } -.execution-profile-segments button:hover:not(:disabled) { background: #eef5f4; } -.execution-profile-segments button.selected { background: var(--accent-soft); color: #08665e; box-shadow: inset 0 -3px 0 var(--accent); } -.execution-profile-segments button:disabled:not(.selected) { color: #8b96a1; cursor: default; } +.execution-profile-segments button:hover:not(:disabled) { background: var(--prayu-control-hover); } +.execution-profile-segments button.selected { background: var(--prayu-primary-bg); color: var(--prayu-primary-fg); box-shadow: inset 0 -3px 0 var(--prayu-primary-fg); } +.execution-profile-segments button:disabled:not(.selected) { color: var(--prayu-muted); cursor: default; } .execution-profile-segments button > span { min-width: 0; display: grid; gap: 3px; text-align: left; } .execution-profile-segments strong, .execution-profile-segments small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .execution-profile-segments strong { font-size: 12px; } .execution-profile-segments small { color: var(--muted); font-size: 10px; } +.execution-profile-segments button.selected small { color: color-mix(in srgb, var(--prayu-primary-fg) 70%, var(--prayu-primary-bg)); } .execution-profile-boundary { display: flex; flex-wrap: wrap; gap: 7px 16px; color: var(--muted); font-size: 11px; } .execution-profile-section .inline-warning { margin: 0; } .execution-permission-segments { grid-template-columns: repeat(4, minmax(0, 1fr)); } -.execution-permission-segments button.danger:not(.selected) { color: #8a4524; } -.execution-permission-segments button.danger:hover:not(:disabled) { background: #fff0e7; } +.execution-permission-segments button.danger:not(.selected) { color: var(--prayu-danger); } +.execution-permission-segments button.danger:hover:not(:disabled) { background: var(--prayu-danger-soft); } .execution-permission-segments button.danger.selected { - background: #fff0e7; - color: #9b3f18; - box-shadow: inset 0 -3px 0 #d85f27; + background: var(--prayu-primary-bg); + color: var(--prayu-primary-fg); + box-shadow: inset 0 -3px 0 var(--prayu-danger); } .permission-confirmation { display: grid; @@ -277,50 +279,50 @@ code, pre { font-family: var(--prayu-font-mono); } align-items: center; gap: 10px; padding: 10px 12px; - border: 1px solid #d98558; + border: 1px solid var(--prayu-border); border-radius: 6px; - background: #fff7f0; - color: #753516; + background: var(--prayu-control); + color: var(--prayu-text); } .permission-confirmation > span { min-width: 0; display: grid; gap: 2px; } -.permission-confirmation small { color: #87583f; line-height: 1.35; } +.permission-confirmation small { color: var(--prayu-muted); line-height: 1.35; } .danger-button { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; - border: 1px solid #ad421d; + border: 1px solid var(--prayu-danger-fill); border-radius: 5px; padding: 0 11px; - background: #b94922; - color: white; + background: var(--prayu-danger-fill); + color: var(--prayu-on-danger); cursor: pointer; } .danger-button:disabled { cursor: default; opacity: .6; } -.status-badge { max-width: 150px; display: inline-flex; align-items: center; padding: 2px 6px; overflow: hidden; border: 1px solid #cdd5dc; border-radius: 4px; background: #f4f6f7; color: #52606c; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } -.status-running, .status-active, .status-completed, .status-live, .status-passed { border-color: #9ccdbb; background: #e9f7f1; color: #146c4e; } -.status-failed, .status-cancelled, .status-denied { border-color: #e3b1ac; background: #fff0ee; color: var(--danger); } -.status-critical, .status-high, .status-rejected, .status-aborted { border-color: #e3b1ac; background: #fff0ee; color: var(--danger); } -.status-medium, .status-partial, .status-stale, .status-not-run, .status-blocked { border-color: #e4c68e; background: #fff7e5; color: #855000; } -.status-approved, .status-applied, .status-instructed, .status-succeeded, .status-fixed, .status-validated, .status-accepted { border-color: #9ccdbb; background: #e9f7f1; color: #146c4e; } -.status-waiting-approval, .status-paused, .status-pending, .status-reconnecting { border-color: #e4c68e; background: #fff7e5; color: #855000; } -.status-compacted { border-color: #b7c7de; background: #eff4fb; color: #365d86; } +.status-badge { max-width: 150px; display: inline-flex; align-items: center; padding: 2px 6px; overflow: hidden; border: 1px solid var(--prayu-border); border-radius: 4px; background: var(--prayu-control); color: var(--prayu-text); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } +.status-running, .status-active, .status-completed, .status-live, .status-passed { border-color: var(--prayu-border); background: var(--prayu-control); color: var(--prayu-success); } +.status-failed, .status-cancelled, .status-denied { border-color: color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); background: var(--prayu-danger-soft); color: var(--danger); } +.status-critical, .status-high, .status-rejected, .status-aborted { border-color: color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); background: var(--prayu-danger-soft); color: var(--danger); } +.status-medium, .status-partial, .status-stale, .status-not-run, .status-blocked { border-color: var(--prayu-border); background: var(--prayu-control); color: var(--prayu-warning); } +.status-approved, .status-applied, .status-instructed, .status-succeeded, .status-fixed, .status-validated, .status-accepted { border-color: var(--prayu-border); background: var(--prayu-control); color: var(--prayu-success); } +.status-waiting-approval, .status-paused, .status-pending, .status-reconnecting { border-color: var(--prayu-border); background: var(--prayu-control); color: var(--prayu-warning); } +.status-compacted { border-color: var(--prayu-border); background: var(--prayu-control); color: var(--prayu-text); } .state-message, .empty-state, .workspace-empty { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; } .state-message, .empty-state { min-height: 110px; } .state-error, .connection-error { color: var(--danger); } .workspace-empty { min-height: calc(100dvh - 58px); flex-direction: column; } .workspace-empty h1 { margin: 0; font-size: 17px; } -.inline-warning { margin-bottom: 12px; padding: 9px 11px; border-left: 3px solid #d4932c; background: #fff8e9; color: #714800; font-size: 12px; overflow-wrap: anywhere; } -.operation-receipt { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 9px 10px; border-left: 3px solid #23815f; background: #eef8f4; color: #164f3c; font-size: 11px; } +.inline-warning { margin-bottom: 12px; padding: 9px 11px; border-left: 3px solid var(--prayu-border); background: var(--prayu-control); color: var(--prayu-warning); font-size: 12px; overflow-wrap: anywhere; } +.operation-receipt { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 9px 10px; border-left: 3px solid var(--prayu-border); background: var(--prayu-control); color: var(--prayu-success); font-size: 11px; } .operation-receipt svg { flex: 0 0 auto; margin-top: 1px; } .operation-receipt div { display: grid; min-width: 0; gap: 2px; } .operation-receipt strong { font-size: 12px; text-transform: capitalize; } -.operation-receipt span, .operation-receipt small { overflow-wrap: anywhere; color: #46645a; } -.operation-receipt.receipt-warning { border-left-color: #c28224; background: #fff8e9; color: #714800; } -.operation-receipt.receipt-warning span, .operation-receipt.receipt-warning small { color: #714800; } +.operation-receipt span, .operation-receipt small { overflow-wrap: anywhere; color: var(--prayu-success); } +.operation-receipt.receipt-warning { border-left-color: var(--prayu-border); background: var(--prayu-control); color: var(--prayu-warning); } +.operation-receipt.receipt-warning span, .operation-receipt.receipt-warning small { color: var(--prayu-warning); } .load-more { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px auto 0; padding: 6px 13px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); cursor: pointer; } -.load-more:hover:not(:disabled) { border-color: #9abdb8; background: #eef5f4; } +.load-more:hover:not(:disabled) { border-color: var(--prayu-border-strong); background: var(--prayu-control-hover); } .event-list { border-top: 1px solid var(--border); } .event-row { border-bottom: 1px solid var(--border); } @@ -328,7 +330,7 @@ code, pre { font-family: var(--prayu-font-mono); } .event-row summary::marker { color: var(--muted); } .event-row summary > span, .event-row time { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .event-sequence { font-family: var(--prayu-font-mono); } -.event-row pre, .tool-call pre { max-height: 320px; margin: 0 0 12px; padding: 12px; overflow: auto; border: 1px solid #e0e5e9; border-radius: 4px; background: #f6f8f9; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } +.event-row pre, .tool-call pre { max-height: 320px; margin: 0 0 12px; padding: 12px; overflow: auto; border: 1px solid var(--prayu-border); border-radius: 4px; background: var(--prayu-surface-solid); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .table-scroll { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; } th { padding: 9px 10px; border-bottom: 1px solid var(--border-strong); color: var(--muted); text-align: left; font-size: 10px; text-transform: uppercase; white-space: nowrap; } @@ -343,7 +345,7 @@ td code { font-size: 11px; } .note-item header > div { display: grid; gap: 4px; } .note-item header span, .note-item footer, .tool-round > header span, .tool-round > header time { color: var(--muted); font-size: 11px; } .note-item p { max-height: 240px; margin: 13px 0; overflow: auto; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } -.note-item footer { padding-top: 10px; border-top: 1px solid #e6eaed; } +.note-item footer { padding-top: 10px; border-top: 1px solid var(--prayu-border); } .note-item footer > div { display: flex; align-items: center; gap: 10px; } .row-detail-toggle { padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; } .row-detail-toggle:hover { color: var(--ink); border-color: var(--accent); } @@ -363,7 +365,7 @@ td code { font-size: 11px; } .agent-node { padding: 14px 15px; } .agent-node header { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; } .agent-node header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.agent-depth-1 { margin-left: 34px; border-left: 3px solid #85b9b1; } +.agent-depth-1 { margin-left: 34px; border-left: 3px solid var(--prayu-border); } .node-role, .projection-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--prayu-font-mono); font-size: 10px; text-transform: uppercase; } .projection-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 15px; border-bottom: 1px solid var(--border); } .projection-header > div:first-child { min-width: 0; display: grid; gap: 5px; } @@ -374,7 +376,7 @@ td code { font-size: 11px; } .projection-metrics dt { margin-bottom: 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; } .projection-metrics dd { margin: 0; overflow-wrap: anywhere; font-size: 11px; } .tag-line { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 15px 13px; } -.tag-line code { padding: 2px 5px; border: 1px solid #dce3e7; border-radius: 3px; background: #f5f7f8; color: #44535f; font-size: 10px; } +.tag-line code { padding: 2px 5px; border: 1px solid var(--prayu-border); border-radius: 3px; background: var(--prayu-surface-solid); color: var(--prayu-text); font-size: 10px; } .external-skill-summary { margin-top: 14px; } .external-skill-summary > div { min-width: 0; } .external-skill-summary dt { margin-bottom: 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; } @@ -388,7 +390,7 @@ td code { font-size: 11px; } .completion-summary { display: flex; align-items: flex-start; gap: 9px; padding: 11px 15px; border-top: 1px solid var(--border); background: var(--surface-subtle); font-size: 12px; line-height: 1.5; } .agent-cancel-control { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .assignment-list { border-bottom: 1px solid var(--border); } -.assignment-list section { padding: 12px 15px; border-bottom: 1px solid #e7ebee; } +.assignment-list section { padding: 12px 15px; border-bottom: 1px solid var(--prayu-border); } .assignment-list section:last-child { border-bottom: 0; } .assignment-list header { display: flex; align-items: center; gap: 9px; } .assignment-list header > span:first-child { color: var(--muted); font-family: var(--prayu-font-mono); font-size: 10px; } @@ -400,7 +402,7 @@ td code { font-size: 11px; } .finding-layout { min-height: 360px; display: grid; grid-template-columns: 250px minmax(0, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .report-picker { min-width: 0; padding: 8px; border-right: 1px solid var(--border); background: var(--surface-subtle); } .report-picker > button { width: 100%; display: grid; gap: 5px; padding: 10px; border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 4px; background: transparent; text-align: left; cursor: pointer; } -.report-picker > button:hover, .report-picker > button.selected { border-color: #99c8c1; background: var(--accent-soft); } +.report-picker > button:hover, .report-picker > button.selected { border-color: var(--prayu-border-strong); background: var(--accent-soft); } .report-picker > button span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; } .report-picker > button strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .report-picker > button small { color: var(--muted); font-size: 10px; } @@ -409,20 +411,21 @@ td code { font-size: 11px; } .session-summary { padding: 0 28px 20px; border-bottom: 1px solid var(--border); } .session-composer { margin: 18px 28px 0; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); } .session-composer textarea { width: 100%; min-height: 76px; display: block; padding: 11px 12px; resize: vertical; border: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--ink); line-height: 1.5; } -.session-composer textarea:focus-visible { outline: 2px solid #168f82; outline-offset: -2px; } +.session-composer textarea:focus-visible { outline: 2px solid var(--prayu-focus); outline-offset: -2px; } .session-composer textarea:disabled { background: var(--surface-subtle); color: var(--muted); resize: none; } .session-composer-state { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font-size: 11px; } .session-composer-state > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.session-composer-state .connection-error { margin: 0; color: #9b2c2c; } +.session-composer-state .connection-error { margin: 0; color: var(--prayu-danger); } .session-steering-queue { margin: 8px 28px 0; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 6px 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); overflow-x: auto; } .session-steering-heading { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--muted); font-size: 11px; } .session-steering-heading strong { color: var(--ink); } .session-steering-item { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; padding-left: 8px; border-left: 1px solid var(--border); font-size: 11px; } .icon-button.compact { width: 28px; height: 28px; } .byte-count { color: var(--muted); font-size: 10px; white-space: nowrap; } -.byte-count.invalid { color: #9b2c2c; } -.session-send-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #087f73; border-radius: 5px; background: #087f73; color: #ffffff; cursor: pointer; } -.session-send-button:disabled { border-color: var(--border-strong); background: #e6ebed; color: #84919a; cursor: default; } +.byte-count.invalid { color: var(--prayu-danger); } +.session-send-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--prayu-primary-border); border-radius: 5px; background: var(--prayu-primary-bg); color: var(--prayu-primary-fg); cursor: pointer; } +.session-send-button:hover:not(:disabled) { background: var(--prayu-primary-hover); } +.session-send-button:disabled { border-color: var(--border-strong); background: var(--prayu-control); color: var(--prayu-muted); cursor: default; } .session-content { padding-top: 20px; } .message-list { margin-top: 14px; border-top: 1px solid var(--border); } .message-row { padding: 14px 4px; border-bottom: 1px solid var(--border); } @@ -431,37 +434,38 @@ td code { font-size: 11px; } .message-row header time { margin-left: auto; } .message-row p { margin: 10px 0 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; white-space: pre-wrap; } .message-row .safe-markdown { margin-top: 10px; font-size: 13px; line-height: 1.55; } -.role-assistant { border-left: 3px solid #7fb8ae; padding-left: 12px; } -.role-user { border-left: 3px solid #8ea7c4; padding-left: 12px; } +.role-assistant { border-left: 3px solid var(--prayu-border); padding-left: 12px; } +.role-user { border-left: 3px solid var(--prayu-border); padding-left: 12px; } -.connection-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #edf1f3; } -.connection-panel { width: min(440px, 100%); padding: 28px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 14px 36px rgb(23 32 42 / 8%); } +.connection-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--prayu-control); } +.connection-panel { width: min(440px, 100%); padding: 28px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 14px 36px rgb(0 0 0 / 8%); } .connection-heading { margin: 42px 0 23px; } .connection-heading h1 { margin: 0 0 6px; font-size: 22px; } .connection-heading p { margin: 0; color: var(--muted); font-size: 12px; } .connection-token-help { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 7px 0 16px; } -.field-label { display: block; margin-bottom: 7px; color: #455463; font-size: 12px; font-weight: 600; } +.field-label { display: block; margin-bottom: 7px; color: var(--prayu-text); font-size: 12px; font-weight: 600; } .token-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; } .token-row input { min-width: 0; height: 42px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 5px; } -.token-row button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: #087f73; color: white; cursor: pointer; } +.token-row button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: var(--prayu-primary-bg); color: var(--prayu-primary-fg); cursor: pointer; } +.token-row button:hover:not(:disabled) { background: var(--prayu-primary-hover); } .token-row button:disabled { opacity: .5; cursor: default; } .optional-token-label { margin-top: 16px; } .optional-token-label span { color: var(--muted); font-weight: 400; } .control-token-input { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 5px; } .connection-error { margin-top: 11px; font-size: 12px; overflow-wrap: anywhere; } -.desktop-connecting { min-height: 34px; display: flex; align-items: center; gap: 8px; margin: -10px 0 17px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: #08665e; font-size: 12px; } -.desktop-dialog-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgb(17 27 34 / 48%); } -.desktop-dialog { width: min(680px, 100%); max-height: min(760px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 20px 54px rgb(10 18 24 / 24%); } +.desktop-connecting { min-height: 34px; display: flex; align-items: center; gap: 8px; margin: -10px 0 17px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--prayu-text); font-size: 12px; } +.desktop-dialog-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / 48%); } +.desktop-dialog { width: min(680px, 100%); max-height: min(760px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 20px 54px rgb(0 0 0 / 24%); } .desktop-dialog > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .desktop-dialog > header > div { min-width: 0; display: flex; align-items: center; gap: 10px; } .desktop-dialog > header > div > div { min-width: 0; display: grid; gap: 3px; } .desktop-dialog h2 { margin: 0; font-size: 15px; } .desktop-dialog header small { color: var(--muted); font-size: 11px; } -.dialog-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #a9c8c3; border-radius: 5px; background: var(--accent-soft); color: #08665e; } +.dialog-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--prayu-border); border-radius: 5px; background: var(--accent-soft); color: var(--prayu-text); } .desktop-dialog-body { min-height: 280px; overflow: auto; padding: 18px; } .desktop-package-empty { min-height: 244px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--muted); } .desktop-select-command { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); cursor: pointer; } -.desktop-select-command:hover:not(:disabled) { border-color: #82b3ac; background: #eef5f4; } +.desktop-select-command:hover:not(:disabled) { border-color: var(--prayu-border-strong); background: var(--prayu-control-hover); } .desktop-select-command:disabled { opacity: .55; cursor: default; } .desktop-package-preview { display: grid; gap: 18px; } .desktop-package-heading { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } @@ -478,21 +482,21 @@ td code { font-size: 11px; } .desktop-package-list { display: grid; gap: 8px; } .desktop-package-list > span { color: var(--muted); font-size: 10px; text-transform: uppercase; } .desktop-package-list > div { display: flex; flex-wrap: wrap; gap: 6px; } -.desktop-package-list code { padding: 3px 6px; border: 1px solid #d6dfe3; border-radius: 3px; background: #f5f7f8; color: #40505d; font-size: 10px; overflow-wrap: anywhere; } +.desktop-package-list code { padding: 3px 6px; border: 1px solid var(--prayu-border); border-radius: 3px; background: var(--prayu-surface-solid); color: var(--prayu-text); font-size: 10px; overflow-wrap: anywhere; } .desktop-package-list small { color: var(--muted); } .desktop-package-digests { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; } -.desktop-package-digests code { color: #3f4e5a; } +.desktop-package-digests code { color: var(--prayu-text); } .desktop-install-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .segmented-control { display: inline-grid; grid-template-columns: repeat(2, minmax(64px, 1fr)); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 5px; } .segmented-control button { min-height: 32px; padding: 5px 10px; border: 0; border-right: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; } .segmented-control button:last-child { border-right: 0; } -.segmented-control button[aria-pressed="true"] { background: #e8f2ee; color: #125f45; font-weight: 600; } +.segmented-control button[aria-pressed="true"] { background: var(--prayu-control); color: var(--prayu-text); font-weight: 600; } .desktop-install-confirmation { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; } -.desktop-install-confirmation input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: #167052; } -.desktop-install-success { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 12px; border: 1px solid #abd6c6; border-radius: 5px; background: #eef8f4; color: #125f45; font-size: 11px; } +.desktop-install-confirmation input { width: 15px; height: 15px; flex: 0 0 auto; accent-color: var(--prayu-accent); } +.desktop-install-success { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 12px; border: 1px solid var(--prayu-border); border-radius: 5px; background: var(--prayu-control); color: var(--prayu-success); font-size: 11px; } .desktop-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .desktop-dialog > footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--border); background: var(--surface-subtle); } -.desktop-dialog > footer > span { display: inline-flex; align-items: center; gap: 7px; color: #146c4e; font-size: 11px; } +.desktop-dialog > footer > span { display: inline-flex; align-items: center; gap: 7px; color: var(--prayu-text); font-size: 11px; } .model-availability-dialog { width: min(820px, 100%); } .model-availability-body { display: grid; gap: 22px; } .model-availability-section { min-width: 0; } @@ -506,7 +510,7 @@ td code { font-size: 11px; } .provider-credential-row { min-height: 52px; display: grid; grid-template-columns: minmax(110px, .7fr) auto minmax(180px, 1.4fr) 34px 34px; align-items: center; gap: 10px; padding: 8px 3px; border-bottom: 1px solid var(--border); } .provider-credential-row > div { display: grid; gap: 2px; } .provider-credential-row small { color: var(--muted); overflow-wrap: anywhere; } -.provider-credential-row input { min-width: 0; height: 32px; border: 1px solid var(--border-strong); border-radius: 5px; padding: 5px 8px; background: #fff; color: var(--text); font: inherit; } +.provider-credential-row input { min-width: 0; height: 32px; border: 1px solid var(--border-strong); border-radius: 5px; padding: 5px 8px; background: var(--prayu-control); color: var(--text); font: inherit; } .model-route-row { min-height: 44px; display: grid; grid-template-columns: minmax(90px, .6fr) minmax(180px, 1.4fr) auto 34px; align-items: center; gap: 12px; padding: 7px 3px; border-bottom: 1px solid var(--border); font-size: 11px; } .model-route-row span { min-width: 0; overflow-wrap: anywhere; color: var(--muted); } .model-route-row select { min-width: 0; height: 32px; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 11px; } @@ -517,8 +521,8 @@ td code { font-size: 11px; } .file-edit-panel h2 { margin: 0; font-size: 14px; } .file-edit-panel > header > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; } .file-edit-panel > header > span b { font-weight: 600; } -.diff-additions { color: #16834f; } -.diff-deletions { color: #c24040; } +.diff-additions { color: var(--prayu-diff-add); } +.diff-deletions { color: var(--prayu-diff-delete); } .file-change-set-summary { min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 10px; } .file-change-set-summary > span { display: inline-flex; gap: 5px; } .file-change-set-summary strong { color: var(--ink); } @@ -549,10 +553,10 @@ td code { font-size: 11px; } .unified-diff-line > span, .unified-diff-line > code { min-height: 20px; padding: 1px 7px; white-space: pre; } .unified-diff-number { border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent); color: var(--muted); text-align: right; user-select: none; } .unified-diff-marker { color: var(--muted); text-align: center; user-select: none; } -.unified-diff-line.is-add { background: color-mix(in srgb, #48b477 15%, var(--surface)); } -.unified-diff-line.is-delete { background: color-mix(in srgb, #e16060 14%, var(--surface)); } -.unified-diff-line.is-add .unified-diff-marker { color: #16834f; } -.unified-diff-line.is-delete .unified-diff-marker { color: #c24040; } +.unified-diff-line.is-add { background: var(--prayu-diff-add-soft); } +.unified-diff-line.is-delete { background: var(--prayu-diff-delete-soft); } +.unified-diff-line.is-add .unified-diff-marker { color: var(--prayu-diff-add); } +.unified-diff-line.is-delete .unified-diff-marker { color: var(--prayu-diff-delete); } .unified-diff-line.is-hunk { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--muted); } .unified-diff-line.is-hunk > code, .unified-diff-line.is-meta > code { grid-column: 2 / -1; } .unified-diff-line.is-hunk > span:not(.unified-diff-marker), .unified-diff-line.is-meta > span { display: none; } @@ -651,7 +655,7 @@ td code { font-size: 11px; } .repository-commit-comparison-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; } .repository-preview-placeholder { width: 32px; height: 32px; } .repository-comparison-preview-workspace { min-width: 0; border-top: 1px solid var(--border); } -.repository-comparison-preview-workspace:focus-visible { outline: 2px solid #168f82; outline-offset: 2px; } +.repository-comparison-preview-workspace:focus-visible { outline: 2px solid var(--prayu-focus); outline-offset: 2px; } .repository-comparison-preview-workspace > header { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .repository-comparison-preview-workspace > header > span { min-width: 0; display: flex; align-items: center; gap: 7px; } .repository-comparison-preview-workspace > header code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -685,7 +689,7 @@ td code { font-size: 11px; } .repository-diff-list > article > header { min-height: 42px; display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: 10px; font-size: 10px; } .repository-diff-list > article > header code { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .repository-diff-list > article > header > span:not(.status-badge) { color: var(--muted); } -.repository-diff-list pre { max-height: 460px; margin: 0 0 12px; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 5px; background: #f6f8f9; color: #26343d; font-size: 11px; line-height: 1.5; white-space: pre; } +.repository-diff-list pre { max-height: 460px; margin: 0 0 12px; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 5px; background: var(--prayu-surface-solid); color: var(--prayu-text); font-size: 11px; line-height: 1.5; white-space: pre; } .repository-diff-omitted { padding: 10px 2px 12px; color: var(--muted); font-size: 11px; } .verification-plan-form { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); } .verification-plan-form > label, .verification-plan-items label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 10px; } @@ -701,7 +705,7 @@ td code { font-size: 11px; } .verification-plan-list > article > header { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; align-items: center; gap: 9px; } .verification-plan-list > article > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .verification-plan-list time { color: var(--muted); font-size: 10px; text-align: right; } -.verification-plan-list p { margin: 8px 0; color: #3c484f; font-size: 11px; line-height: 1.45; } +.verification-plan-list p { margin: 8px 0; color: var(--prayu-text); font-size: 11px; line-height: 1.45; } .verification-plan-list ol { display: grid; gap: 6px; margin: 0; padding-left: 24px; } .verification-plan-list li { padding-left: 3px; font-size: 11px; } .verification-plan-list li strong, .verification-plan-list li span { display: block; overflow-wrap: anywhere; } @@ -722,8 +726,8 @@ td code { font-size: 11px; } .verification-snapshot-receipts time { color: var(--muted); } .verification-snapshot-review-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .verification-snapshot-review-actions .compact-command { min-height: 26px; padding: 0 7px; font-size: 9px; } -.verification-receipt-focus { min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px 9px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: #08665e; font-size: 11px; } -.verification-receipt-focus.unavailable { border-left-color: var(--warning); background: #fff8e9; color: #714800; } +.verification-receipt-focus { min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px 9px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--prayu-text); font-size: 11px; } +.verification-receipt-focus.unavailable { border-left-color: var(--warning); background: var(--prayu-control); color: var(--prayu-warning); } .verification-coverage-detail > ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .verification-coverage-detail > ul > li { min-width: 0; display: grid; grid-template-columns: auto minmax(100px, 1fr) 112px 138px; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px solid var(--border); } .verification-coverage-detail > ul > li code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -741,7 +745,7 @@ td code { font-size: 11px; } .verification-list article > header { display: grid; grid-template-columns: auto minmax(0, 1fr) 150px; align-items: center; gap: 10px; } .verification-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .verification-list time { color: var(--muted); font-size: 10px; text-align: right; } -.verification-list p { margin: 8px 0 0; color: #3c484f; font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } +.verification-list p { margin: 8px 0 0; color: var(--prayu-text); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .verification-association-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 9px; } .verification-association-controls select { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 10px; } .verification-association-state { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--muted); font-size: 10px; } @@ -778,7 +782,7 @@ td code { font-size: 11px; } .delivery-truth-summary > div { min-width: 0; flex: 1; } .delivery-truth-summary strong { font-size: 13px; } .delivery-truth-summary p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; } -.delivery-truth-passed { border-left-color: var(--prayu-success, #168f82); background: color-mix(in srgb, var(--prayu-success, #168f82) 7%, var(--surface)); } +.delivery-truth-passed { border-left-color: var(--prayu-success, var(--prayu-border)); background: var(--prayu-control); } .delivery-truth-identities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--border); } .delivery-truth-identities > div { min-width: 0; display: grid; gap: 4px; padding: 10px; border-right: 1px solid var(--border); border-top: 1px solid var(--border); } .delivery-truth-identities span { color: var(--muted); font-size: 9px; text-transform: uppercase; } @@ -840,8 +844,8 @@ td code { font-size: 11px; } .explorer-search input { min-width: 0; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; } .explorer-search input:focus-visible { outline: 0; } .explorer-provenance { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 7px 2px; color: var(--muted); font-size: 10px; } -.explorer-provenance code { margin-left: auto; color: #4d5960; } -.explorer-attachment-status { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); color: #146c4e; font-size: 11px; } +.explorer-provenance code { margin-left: auto; color: var(--prayu-muted); } +.explorer-attachment-status { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); color: var(--prayu-success); font-size: 11px; } .explorer-search-results { border-bottom: 1px solid var(--border); } .explorer-search-results > header { min-height: 38px; display: flex; align-items: center; gap: 8px; } .explorer-search-results > header strong { font-size: 12px; } @@ -851,36 +855,36 @@ td code { font-size: 11px; } .search-result-open > span { min-width: 0; display: grid; gap: 3px; } .search-result-open strong, .search-result-open code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-open small { color: var(--muted); font-size: 10px; } -.search-result-open code { color: #4d5960; font-size: 10px; } +.search-result-open code { color: var(--prayu-text); font-size: 10px; } .explorer-list { display: grid; border-top: 1px solid var(--border); } .explorer-list button { width: 100%; min-height: 38px; display: grid; grid-template-columns: 20px minmax(0, 1fr) max-content; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; } -.explorer-list button:not(:disabled):hover { background: #f3f7f8; } -.explorer-list button:disabled { cursor: not-allowed; color: #8b9499; } +.explorer-list button:not(:disabled):hover { background: var(--prayu-control-hover); } +.explorer-list button:disabled { cursor: not-allowed; color: var(--prayu-muted); } .explorer-list button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .explorer-list button small { color: var(--muted); font-size: 10px; } .explorer-file > div:not(.explorer-file-lines) { min-height: 34px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; } -.explorer-file pre { max-height: calc(100vh - 280px); min-height: 280px; margin: 0; padding: 14px; overflow: auto; border: 1px solid var(--border); border-radius: 5px; background: #f6f8f9; color: #26343d; font-size: 11px; line-height: 1.55; white-space: pre; } -.explorer-file-lines { display: block; max-height: calc(100vh - 280px); min-height: 280px; margin: 0; padding: 10px 0; overflow: auto; border: 1px solid var(--border); border-radius: 5px; background: #f6f8f9; color: #26343d; font-size: 11px; line-height: 1.55; font-family: var(--prayu-font-mono, monospace); } +.explorer-file pre { max-height: calc(100vh - 280px); min-height: 280px; margin: 0; padding: 14px; overflow: auto; border: 1px solid var(--border); border-radius: 5px; background: var(--prayu-surface-solid); color: var(--prayu-text); font-size: 11px; line-height: 1.55; white-space: pre; } +.explorer-file-lines { display: block; max-height: calc(100vh - 280px); min-height: 280px; margin: 0; padding: 10px 0; overflow: auto; border: 1px solid var(--border); border-radius: 5px; background: var(--prayu-surface-solid); color: var(--prayu-text); font-size: 11px; line-height: 1.55; font-family: var(--prayu-font-mono, monospace); } .explorer-file-line { display: flex; padding: 0 8px; } -.explorer-file-line.is-highlighted { background: color-mix(in srgb, var(--accent, #1a73e8) 18%, transparent); font-weight: 600; } +.explorer-file-line.is-highlighted { background: var(--prayu-control); font-weight: 600; } .explorer-line-number { min-width: 44px; user-select: none; color: var(--muted); text-align: right; padding-right: 14px; flex-shrink: 0; } .explorer-line-content { white-space: pre; flex: 1 1 auto; } -.explorer-line-warning { padding: 8px 12px; background: color-mix(in srgb, #ef6b5d 15%, transparent); color: #c53929; border: 1px solid color-mix(in srgb, #ef6b5d 30%, transparent); border-radius: 6px; font-size: 12px; margin-bottom: 8px; } -.explorer-line-notice { padding: 8px 12px; background: color-mix(in srgb, #1a73e8 12%, transparent); color: #1a73e8; border: 1px solid color-mix(in srgb, #1a73e8 25%, transparent); border-radius: 6px; font-size: 12px; margin-bottom: 8px; } +.explorer-line-warning { padding: 8px 12px; background: var(--prayu-control); color: var(--prayu-warning); border: 1px solid color-mix(in srgb, var(--prayu-border) 30%, transparent); border-radius: 6px; font-size: 12px; margin-bottom: 8px; } +.explorer-line-notice { padding: 8px 12px; background: var(--prayu-control); color: var(--prayu-text); border: 1px solid color-mix(in srgb, var(--prayu-border) 25%, transparent); border-radius: 6px; font-size: 12px; margin-bottom: 8px; } .explorer-error-hint { color: var(--muted); font-size: 13px; margin: 6px 0 12px; } -.v2-terminal-error-notice { padding: 8px 12px; background: color-mix(in srgb, #ef6b5d 15%, transparent); color: #c53929; border: 1px solid color-mix(in srgb, #ef6b5d 30%, transparent); border-radius: 6px; font-size: 12px; margin: 8px 16px; } +.v2-terminal-error-notice { padding: 8px 12px; background: var(--prayu-danger-soft); color: var(--prayu-danger); border: 1px solid color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); border-radius: 6px; font-size: 12px; margin: 8px 16px; } .file-proposal-editor { display: grid; grid-template-rows: auto minmax(360px, calc(100vh - 360px)) auto; min-width: 0; margin-top: 12px; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; background: var(--surface); } -.file-proposal-editor > header, .file-proposal-editor > footer { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: #f6f8f9; } +.file-proposal-editor > header, .file-proposal-editor > footer { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: var(--prayu-control); } .file-proposal-editor > header { border-bottom: 1px solid var(--border); } .file-proposal-editor > footer { justify-content: flex-end; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; } .file-proposal-editor > header > div:first-child { min-width: 0; display: flex; align-items: center; gap: 8px; margin-right: auto; } .file-proposal-editor > header strong { overflow-wrap: anywhere; font-size: 12px; } .file-proposal-editor .segmented-control button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } -.monaco-proposal-surface { min-width: 0; min-height: 360px; background: #fff; } +.monaco-proposal-surface { min-width: 0; min-height: 360px; background: var(--prayu-surface-solid); } .monaco-local-state { align-items: center; display: flex; height: 100%; justify-content: center; } -.proposal-created-status { display: inline-flex; align-items: center; gap: 5px; color: #125f45; font-weight: 600; } +.proposal-created-status { display: inline-flex; align-items: center; gap: 5px; color: var(--prayu-success); font-weight: 600; } .file-proposal-recovery { margin: 12px 0 0; } -.stale-proposal-status { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: #8a3b12; font-weight: 600; } +.stale-proposal-status { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--prayu-warning); font-weight: 600; } .receipt-history { min-width: 0; } .receipt-history > header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); } .receipt-history > header > div { display: flex; align-items: center; gap: 8px; } @@ -895,14 +899,14 @@ td code { font-size: 11px; } .operator-list-header h2 { margin: 0; font-size: 14px; } .operator-action-list, .evidence-inventory-list { display: grid; } .operator-action-list > button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 22px minmax(180px, 1fr) max-content 150px; align-items: center; gap: 10px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); text-align: left; cursor: pointer; } -.operator-action-list > button:hover, .operator-action-list > button:focus-visible { background: #f2f7f6; } +.operator-action-list > button:hover, .operator-action-list > button:focus-visible { background: var(--prayu-control-hover); } .operator-action-list > button > span, .evidence-inventory-list > div > span { min-width: 0; display: grid; gap: 3px; } .operator-action-list strong, .evidence-inventory-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .operator-action-list code, .evidence-inventory-list code { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .operator-action-list time, .evidence-inventory-list time { color: var(--muted); font-size: 10px; text-align: right; } .evidence-inventory-list > div { min-height: 58px; display: grid; grid-template-columns: 22px minmax(180px, 1fr) 150px 34px; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); } .ui-evidence-panel { min-width: 0; } -.ui-evidence-boundary { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; padding: 11px 12px; border: 1px solid #d4932c; border-radius: 5px; background: #fff8e9; color: #714800; font-size: 11px; line-height: 1.45; } +.ui-evidence-boundary { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; padding: 11px 12px; border: 1px solid var(--prayu-border); border-radius: 5px; background: var(--prayu-control); color: var(--prayu-warning); font-size: 11px; line-height: 1.45; } .ui-evidence-boundary > span { display: grid; gap: 2px; } .ui-evidence-layout { display: grid; grid-template-columns: minmax(210px, .32fr) minmax(0, 1fr); min-height: 360px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .ui-evidence-attempts { max-height: 620px; overflow: auto; border-right: 1px solid var(--border); background: var(--surface-subtle); } @@ -922,7 +926,7 @@ td code { font-size: 11px; } .ui-evidence-diagnostics { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .ui-evidence-diagnostics span { padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 9px; } .ui-evidence-diagnostics strong { color: var(--ink); } -.ui-evidence-failure { display: grid; gap: 3px; margin-top: 10px; padding: 9px 10px; border-left: 3px solid var(--danger); background: #fff0ee; color: var(--danger); font-size: 11px; } +.ui-evidence-failure { display: grid; gap: 3px; margin-top: 10px; padding: 9px 10px; border-left: 3px solid var(--danger); background: var(--prayu-danger-soft); color: var(--danger); font-size: 11px; } .ui-evidence-detail details { margin-top: 10px; } .ui-evidence-detail details summary { color: var(--muted); cursor: pointer; font-size: 11px; } .ui-evidence-detail pre { max-height: 280px; margin: 7px 0 0; padding: 9px; overflow: auto; border: 1px solid var(--border); background: var(--surface-subtle); font: 9px/1.5 var(--prayu-font-mono); } @@ -943,13 +947,13 @@ td code { font-size: 11px; } .ui-evidence-attempts { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--border); } .ui-evidence-facts { grid-template-columns: 1fr; } } -.command-palette-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: start center; padding: min(14vh, 110px) 18px 18px; background: rgb(17 27 34 / 42%); } -.command-palette { width: min(620px, 100%); max-height: min(560px, calc(100dvh - 140px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 20px 54px rgb(10 18 24 / 24%); } +.command-palette-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: start center; padding: min(14vh, 110px) 18px 18px; background: rgb(0 0 0 / 42%); } +.command-palette { width: min(620px, 100%); max-height: min(560px, calc(100dvh - 140px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 20px 54px rgb(0 0 0 / 24%); } .command-palette > header { min-height: 52px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 34px; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border); } .command-palette input { width: 100%; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; } .command-palette-results { min-height: 60px; overflow: auto; padding: 6px; } .command-palette-results > button { width: 100%; min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 14px; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; } -.command-palette-results > button.selected { background: var(--accent-soft); color: #08665e; } +.command-palette-results > button.selected { background: var(--accent-soft); color: var(--prayu-text); } .command-palette-results > button small { color: var(--muted); font-size: 10px; } .command-palette-empty { padding: 20px 10px; color: var(--muted); text-align: center; } .run-wake-section .run-control-row { margin-top: 12px; } @@ -969,10 +973,10 @@ td code { font-size: 11px; } .command-proposal-purpose { margin: 10px 0 0; color: var(--text); font-size: 12px; line-height: 1.5; } .command-proposal-path { display: block; width: fit-content; max-width: 100%; margin-top: 8px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; } -.command-proposal-evidence { margin-top: 12px; border: 1px solid #d4932c; - background: #fff8e9; } +.command-proposal-evidence { margin-top: 12px; border: 1px solid var(--prayu-border); + background: var(--prayu-control); } .command-proposal-evidence > strong { display: flex; align-items: center; gap: 7px; padding: 9px 10px; - border-bottom: 1px solid #d4932c; color: #714800; font-size: 11px; } + border-bottom: 1px solid var(--prayu-border); color: var(--prayu-warning); font-size: 11px; } .command-proposal-evidence pre { max-height: 240px; margin: 0; padding: 10px; overflow: auto; color: var(--ink); font: 10px/1.55 var(--prayu-font-mono); white-space: pre-wrap; word-break: break-word; } @@ -1000,7 +1004,7 @@ td code { font-size: 11px; } .saved-host-output-evidence > summary { cursor: pointer; padding: 6px 0; } .saved-host-output-evidence p, .saved-host-output-evidence code { overflow-wrap: anywhere; } .host-command-risk { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; - border: 1px solid #b83b35; border-radius: 5px; background: #fff0ef; color: #8d211c; font-size: 11px; } + border: 1px solid color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); border-radius: 5px; background: var(--prayu-danger-soft); color: var(--prayu-danger); font-size: 11px; } .host-command-envelope { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 7px 12px; margin: 12px 0 0; padding: 12px; border: 1px solid var(--border); background: var(--surface-muted); } .host-command-envelope dt { color: var(--muted); font-size: 10px; } @@ -1011,12 +1015,12 @@ td code { font-size: 11px; } .host-command-env-key { margin: 0 6px 4px 0; padding: 1px 4px; border: 1px solid var(--border); } .host-command-verification { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--text); font-size: 11px; line-height: 1.45; } -.host-command-verification input { width: 15px; height: 15px; margin: 0; accent-color: #087f73; } +.host-command-verification input { width: 15px; height: 15px; margin: 0; accent-color: var(--prayu-accent); } .approval-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; } .approval-actions input { width: min(300px, 100%); min-width: 120px; height: 34px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 5px; } .workspace-import-control { min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; } -.workspace-import-control:hover:not(:disabled) { border-color: #168f82; background: #f3f8f7; } -.workspace-import-control.selected { border-color: #168f82; background: var(--accent-soft); } +.workspace-import-control:hover:not(:disabled) { border-color: var(--prayu-border-strong); background: var(--prayu-control-hover); } +.workspace-import-control.selected { border-color: var(--prayu-border); background: var(--accent-soft); } .workspace-import-control > span { min-width: 0; display: grid; gap: 4px; } .workspace-import-control strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .workspace-import-control small { color: var(--muted); font-size: 11px; font-weight: 400; } @@ -1073,7 +1077,7 @@ td code { font-size: 11px; } .context-branch-goal { width: 100%; margin: 8px 0 12px; } .continuity-tree { display: grid; gap: 6px; } .continuity-tree > article { position: relative; min-width: 0; display: grid; grid-template-columns: 16px 18px minmax(0, 1fr) auto; align-items: start; gap: 8px; margin-left: calc(var(--context-depth) * 22px); padding: 9px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); } -.continuity-line { align-self: stretch; border-left: 2px solid #c9b6a2; } +.continuity-line { align-self: stretch; border-left: 2px solid var(--prayu-border); } .continuity-tree > article > svg { margin-top: 2px; color: var(--muted); } .continuity-tree > article > div:nth-of-type(1) { min-width: 0; } .continuity-tree article header { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } @@ -1087,8 +1091,8 @@ td code { font-size: 11px; } .context-branch-compare dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 5px 10px; margin: 10px 0 0; font-size: 10px; } .context-branch-compare dt { color: var(--muted); } .context-branch-compare dd { margin: 0; overflow-wrap: anywhere; } -.context-branch-compare dd.changed { color: #8a5011; } -.context-branch-compare dd.same { color: #146c4e; } +.context-branch-compare dd.changed { color: var(--prayu-warning); } +.context-branch-compare dd.same { color: var(--prayu-success); } .spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @@ -1248,20 +1252,20 @@ td code { font-size: 11px; } body { background: transparent; } .prayu-shell { - --accent: #df6b22; - --accent-soft: rgb(222 105 32 / 16%); - --border: rgb(71 54 36 / 20%); - --border-strong: rgb(66 48 31 / 31%); - --ink: #211c17; - --muted: #776b5f; - --surface: rgb(255 249 238 / 84%); - --surface-subtle: rgb(240 230 213 / 62%); + --accent: var(--prayu-accent); + --accent-soft: color-mix(in srgb, var(--prayu-accent) 14%, transparent); + --border: var(--prayu-border); + --border-strong: var(--prayu-border-strong); + --ink: var(--prayu-text); + --muted: var(--prayu-muted); + --surface: var(--prayu-panel); + --surface-subtle: var(--prayu-control); position: relative; background: transparent; } .prayu-shell.settings-mode { - color: #f3ddc1; + color: var(--prayu-text); background: transparent; } @@ -1270,9 +1274,9 @@ body { background: transparent; } z-index: 8; height: 44px; padding: 0 14px; - border-color: rgb(240 213 177 / 14%); - color: #f2dcc0; - background: rgb(18 17 15 / 88%); + border-color: var(--prayu-border); + color: var(--prayu-text); + background: var(--prayu-titlebar); backdrop-filter: blur(12px); --wails-draggable: drag; } @@ -1304,7 +1308,7 @@ body { background: transparent; } .titlebar-menu button { border: 0; background: transparent; - color: #e9d5ba; + color: var(--prayu-text); cursor: pointer; } @@ -1325,22 +1329,22 @@ body { background: transparent; } } .titlebar-icon:hover:not(:disabled), -.titlebar-menu button:hover:not(:disabled) { background: rgb(240 218 190 / 10%); } +.titlebar-menu button:hover:not(:disabled) { background: var(--prayu-control-hover); } .titlebar-icon:disabled, -.titlebar-menu button:disabled { color: rgb(233 213 186 / 34%); cursor: default; } +.titlebar-menu button:disabled { color: var(--prayu-muted); cursor: default; } .prayu-titlebar .topbar-actions { gap: 5px; } -.prayu-titlebar .health-indicator { color: #c8b69f; } +.prayu-titlebar .health-indicator { color: var(--prayu-muted); } .prayu-titlebar .icon-button { width: 30px; height: 30px; border-color: transparent; - color: #ead7be; + color: var(--prayu-text); background: transparent; } .prayu-titlebar .icon-button:hover:not(:disabled) { - border-color: rgb(240 218 190 / 12%); - background: rgb(240 218 190 / 9%); + border-color: var(--prayu-border-strong); + background: var(--prayu-titlebar); } .prayu-shell .shell-body { @@ -1359,11 +1363,11 @@ body { background: transparent; } padding: 7px 10px; border: 1px solid transparent; border-radius: 5px; - color: #f0ddc4; + color: var(--prayu-text); background: transparent; cursor: pointer; } -.sidebar-create:hover { border-color: rgb(230 112 38 / 34%); background: rgb(230 112 38 / 10%); } +.sidebar-create:hover { border-color: var(--prayu-border-strong); background: var(--prayu-control-hover); } .prayu-shell .resource-tabs { height: 43px; @@ -1374,7 +1378,7 @@ body { background: transparent; } .prayu-shell .resource-tabs button { position: relative; overflow: hidden; - color: #bcae9d; + color: var(--prayu-text); isolation: isolate; } .prayu-shell .sidebar-tools { @@ -1382,25 +1386,25 @@ body { background: transparent; } padding: 7px 10px 6px; } .prayu-shell .search-field { - border-color: rgb(235 211 183 / 17%); - color: #ad9e8e; - background: rgb(28 26 23 / 66%); + border-color: var(--prayu-border); + color: var(--prayu-text); + background: var(--prayu-control); } -.prayu-shell .search-field input { color: #ead8bf; } -.prayu-shell .search-field input::placeholder { color: #958778; } -.prayu-shell .search-field:focus-within { border-color: #d96b25; box-shadow: 0 0 0 1px #d96b25; } +.prayu-shell .search-field input { color: var(--prayu-text); } +.prayu-shell .search-field input::placeholder { color: var(--prayu-muted); } +.prayu-shell .search-field:focus-within { border-color: var(--prayu-focus); box-shadow: 0 0 0 1px var(--prayu-focus); } .prayu-shell .sidebar-tools .icon-button { width: 32px; height: 32px; - border-color: rgb(235 211 183 / 16%); - color: #d9c5aa; - background: rgb(28 26 23 / 58%); + border-color: var(--prayu-border); + color: var(--prayu-text); + background: var(--prayu-control); } .prayu-shell .status-filter { margin-bottom: 4px; - border-color: rgb(235 211 183 / 16%); - color: #d9c5aa; - background: rgb(28 26 23 / 72%); + border-color: var(--prayu-border); + color: var(--prayu-text); + background: var(--prayu-control); } .resource-list-heading { @@ -1408,7 +1412,7 @@ body { background: transparent; } align-items: center; justify-content: space-between; padding: 9px 15px 5px; - color: #8f8274; + color: var(--prayu-muted); font-size: 10px; text-transform: uppercase; } @@ -1417,70 +1421,70 @@ body { background: transparent; } .prayu-shell .main-workspace { margin-top: 5px; - border: 1px solid rgb(105 78 49 / 20%); + border: 1px solid var(--prayu-border); border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; color: var(--ink); - background: rgb(250 242 227 / 90%); + background: var(--prayu-panel); box-shadow: 0 18px 54px rgb(0 0 0 / 21%); backdrop-filter: blur(7px); } -.prayu-shell .workspace-header { border-color: var(--border); background: rgb(251 244 231 / 36%); } -.prayu-shell .workspace-tabs { border-color: var(--border); background: rgb(237 226 207 / 48%); } +.prayu-shell .workspace-header { border-color: var(--border); background: var(--prayu-control); } +.prayu-shell .workspace-tabs { border-color: var(--border); background: var(--prayu-control); } .prayu-shell .workspace-tabs { scrollbar-width: none; } .prayu-shell .workspace-tabs::-webkit-scrollbar { display: none; } -.prayu-shell .workspace-tabs button.active { border-bottom-color: #db6a23; color: #33261c; } -.prayu-shell .workspace-tabs button.active svg { color: #d55f19; } +.prayu-shell .workspace-tabs button.active { border-bottom-color: var(--prayu-border); color: var(--prayu-text); } +.prayu-shell .workspace-tabs button.active svg { color: var(--prayu-text); } .prayu-shell .workspace-content { width: 100%; margin: 0 auto; } .prayu-shell .icon-button, .prayu-shell .command-button, .prayu-shell .compact-command, -.prayu-shell .load-more { border-color: var(--border-strong); background: rgb(255 249 238 / 64%); } +.prayu-shell .load-more { border-color: var(--border-strong); background: var(--prayu-control); } .prayu-shell .command-button:hover:not(:disabled), .prayu-shell .compact-command:hover:not(:disabled), .prayu-shell .load-more:hover:not(:disabled), .prayu-shell .icon-button:hover:not(:disabled) { - border-color: rgb(216 99 25 / 50%); - color: #a94712; - background: rgb(232 111 35 / 12%); + border-color: var(--prayu-border-strong); + color: var(--prayu-muted); + background: var(--prayu-control-hover); } .prayu-shell .session-send-button { - border-color: #d7661d; - background: #d7661d; + border-color: var(--prayu-primary-border); + background: var(--prayu-primary-bg); } -.prayu-shell .budget-track::-webkit-progress-value { background: #d7661d; } -.prayu-shell .budget-track::-moz-progress-bar { background: #d7661d; } +.prayu-shell .budget-track::-webkit-progress-value { background: var(--prayu-control); } +.prayu-shell .budget-track::-moz-progress-bar { background: var(--prayu-control); } .settings-action { min-height: 33px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; - border: 1px solid rgb(239 211 177 / 18%); + border: 1px solid var(--prayu-border); border-radius: 5px; - color: #ead5ba; - background: rgb(23 21 18 / 50%); + color: var(--prayu-text); + background: var(--prayu-control); cursor: pointer; } -.settings-action:hover { border-color: rgb(228 111 36 / 48%); color: #ff8a39; } +.settings-action:hover { border-color: var(--prayu-border-strong); color: var(--prayu-text); } .about-mark { display: grid; place-items: center; - border: 1px solid #f08a42; + border: 1px solid var(--prayu-border); border-radius: 50%; - color: #ffe2bf; - background: rgb(220 96 24 / 36%); + color: var(--prayu-text); + background: var(--prayu-control); font: italic 700 32px Georgia, serif; - box-shadow: 0 0 0 5px rgb(13 12 11 / 52%); + box-shadow: 0 0 0 5px rgb(0 0 0 / 52%); } .settings-page-section { width: min(760px, 100%); margin: 22px auto 0; } .settings-page-section > h1 { margin: 0 0 24px; font-size: 24px; } .settings-row-list, -.shortcut-list { margin: 0; border-top: 1px solid rgb(237 213 184 / 16%); } +.shortcut-list { margin: 0; border-top: 1px solid var(--prayu-border); } .settings-row-list > div, .shortcut-list > div { min-height: 58px; @@ -1488,39 +1492,39 @@ body { background: transparent; } align-items: center; justify-content: space-between; gap: 18px; - border-bottom: 1px solid rgb(237 213 184 / 14%); + border-bottom: 1px solid var(--prayu-border); } .settings-row-list dt, -.shortcut-list dt { color: #c6b39c; font-size: 12px; } +.shortcut-list dt { color: var(--prayu-muted); font-size: 12px; } .settings-row-list dd, .shortcut-list dd { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; } -.prayu-segmented { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid rgb(237 213 184 / 22%); border-radius: 5px; } -.prayu-segmented button { min-height: 32px; padding: 5px 12px; border: 0; border-right: 1px solid rgb(237 213 184 / 18%); color: #baa68f; background: rgb(20 18 16 / 55%); cursor: pointer; } +.prayu-segmented { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--prayu-border); border-radius: 5px; } +.prayu-segmented button { min-height: 32px; padding: 5px 12px; border: 0; border-right: 1px solid var(--prayu-border); color: var(--prayu-text); background: var(--prayu-control); cursor: pointer; } .prayu-segmented button:last-child { border-right: 0; } -.prayu-segmented button[aria-pressed="true"] { color: #ffe0bd; background: rgb(222 102 30 / 30%); box-shadow: inset 0 -2px 0 #ee792c; } -.appearance-preview { min-height: 92px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 20px; align-items: center; gap: 14px; margin-top: 24px; padding: 14px; border: 1px solid rgb(229 112 37 / 38%); border-radius: 7px; background: rgb(22 19 16 / 60%); } +.prayu-segmented button[aria-pressed="true"] { color: var(--prayu-text); background: var(--prayu-control); box-shadow: 0 5px 16px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); } +.appearance-preview { min-height: 92px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 20px; align-items: center; gap: 14px; margin-top: 24px; padding: 14px; border: 1px solid var(--prayu-border); border-radius: 7px; background: var(--prayu-control); } .appearance-preview > span { width: 58px; height: 58px; border-radius: 5px; background: transparent; } .appearance-preview > div { min-width: 0; display: grid; gap: 5px; } -.appearance-preview small { color: #9f8e7b; } -.appearance-preview > svg { color: #ef762a; } -.shortcut-list kbd { min-width: 26px; padding: 3px 6px; border: 1px solid rgb(237 213 184 / 23%); border-bottom-width: 2px; border-radius: 4px; color: #e5cfb4; background: rgb(20 18 16 / 64%); text-align: center; } +.appearance-preview small { color: var(--prayu-muted); } +.appearance-preview > svg { color: var(--prayu-text); } +.shortcut-list kbd { min-width: 26px; padding: 3px 6px; border: 1px solid var(--prayu-border); border-bottom-width: 2px; border-radius: 4px; color: var(--prayu-muted); background: var(--prayu-control); text-align: center; } .about-prayu { display: grid; justify-items: center; text-align: center; } .about-mark { width: 78px; height: 78px; } .about-prayu > h1 { margin: 14px 0 4px; } -.about-prayu > p { margin: 0 0 26px; color: #a9957f; } +.about-prayu > p { margin: 0 0 26px; color: var(--prayu-text); } .about-prayu .settings-row-list { width: 100%; text-align: left; } .connection-page { background: transparent; } .connection-panel { - border-color: rgb(110 78 48 / 24%); - background: rgb(249 241 225 / 90%); + border-color: var(--prayu-border); + background: var(--prayu-panel-strong); box-shadow: 0 22px 70px rgb(0 0 0 / 28%); backdrop-filter: blur(8px); } .connection-heading { margin-top: 26px; } -.connection-panel .token-row button { background: #d7661d; } +.connection-panel .token-row button { background: var(--prayu-primary-bg); border: 1px solid var(--prayu-primary-border); box-shadow: 0 7px 20px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); } [data-prayu-density="compact"] .workspace-header { min-height: 94px; padding-top: 15px; padding-bottom: 13px; } [data-prayu-density="compact"] .workspace-content { padding-top: 15px; padding-bottom: 24px; } @@ -1547,8 +1551,8 @@ body { background: transparent; } .prayu-shell.workspace-mode .prayu-titlebar { height: 46px; padding: 0 17px; - border-bottom-color: rgb(239 216 188 / 11%); - background: rgb(10 10 9 / 72%); + border-bottom-color: var(--prayu-border); + background: var(--prayu-titlebar); backdrop-filter: none; --wails-draggable: drag; } @@ -1569,13 +1573,13 @@ body { background: transparent; } place-items: center; padding: 0; border: 0; - color: #d7c5ad; + color: var(--prayu-text); background: transparent; cursor: pointer; } -.desktop-window-controls button:hover { background: rgb(239 216 188 / 10%); } -.desktop-window-controls .desktop-window-close:hover { color: white; background: #c42b1c; } +.desktop-window-controls button:hover { background: var(--prayu-control-hover); } +.desktop-window-controls .desktop-window-close:hover { color: var(--prayu-on-danger); background: var(--prayu-danger-fill); } .prayu-shell.workspace-mode .shell-body { height: calc(100dvh - 46px); @@ -1605,16 +1609,12 @@ body { background: transparent; } flex-direction: column; margin: 3px 0 0; overflow: hidden; - border: 1px solid rgb(100 75 48 / 18%); + border: 1px solid var(--prayu-border); border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; color: var(--ink); - background: radial-gradient(circle at 85% 91%, - rgb(250 243 230 / 44%) 0, - rgb(250 243 230 / 70%) 14%, - rgb(250 243 230 / 87%) 37%, - rgb(250 243 230 / 87%) 100%); + background: var(--prayu-panel); box-shadow: 0 16px 48px rgb(0 0 0 / 17%); backdrop-filter: none; } @@ -1626,8 +1626,8 @@ body { background: transparent; } justify-content: space-between; gap: 14px; padding: 7px 15px 7px 20px; - border-bottom: 1px solid rgb(86 62 39 / 15%); - background: rgb(255 250 240 / 37%); + border-bottom: 1px solid var(--prayu-border); + background: var(--prayu-control); } .workspace-panel-location { @@ -1636,7 +1636,7 @@ body { background: transparent; } align-items: center; gap: 9px; } -.workspace-panel-location > svg { flex: 0 0 auto; color: #67584a; } +.workspace-panel-location > svg { flex: 0 0 auto; color: var(--prayu-text); } .workspace-panel-location strong { min-width: 0; overflow: hidden; @@ -1655,15 +1655,15 @@ body { background: transparent; } padding: 0; border: 0; border-radius: 5px; - color: #67584a; + color: var(--prayu-text); background: transparent; cursor: pointer; } -.workspace-panel-icon:hover:not(:disabled) { color: #a94712; background: rgb(217 107 37 / 10%); } +.workspace-panel-icon:hover:not(:disabled) { color: var(--prayu-muted); background: var(--prayu-control-hover); } .workspace-panel-icon.active { - color: #923c0e; - background: rgb(100 73 48 / 11%); - box-shadow: inset 0 0 0 1px rgb(113 79 49 / 9%); + color: var(--prayu-text); + background: var(--prayu-control); + box-shadow: inset 0 0 0 1px rgb(0 0 0 / 9%); } .workspace-panel-icon:disabled { opacity: .45; cursor: default; } @@ -1683,15 +1683,15 @@ body { background: transparent; } align-items: center; gap: 3px; padding: 0 7px; - border: 1px solid rgb(91 67 44 / 15%); + border: 1px solid var(--prayu-border); border-radius: 7px; - color: #67584a; - background: rgb(255 252 246 / 44%); + color: var(--prayu-text); + background: var(--prayu-control); cursor: pointer; } .workspace-open-button:hover:not(:disabled) { - color: #a94712; - background: rgb(255 252 246 / 76%); + color: var(--prayu-muted); + background: var(--prayu-control-hover); } .workspace-open-button:disabled { opacity: .42; cursor: default; } .workspace-open-menu, @@ -1706,11 +1706,11 @@ body { background: transparent; } display: grid; gap: 2px; padding: 6px; - border: 1px solid rgb(88 67 48 / 18%); + border: 1px solid var(--prayu-border); border-radius: 8px; - color: #342c25; - background: rgb(255 253 249 / 98%); - box-shadow: 0 15px 38px rgb(44 31 20 / 17%); + color: var(--prayu-text); + background: var(--prayu-panel-strong); + box-shadow: 0 15px 38px rgb(0 0 0 / 17%); } .workspace-open-menu > button, .workbench-sidecar-menu > button { @@ -1729,16 +1729,16 @@ body { background: transparent; } cursor: pointer; } .workspace-open-menu > button:hover, -.workbench-sidecar-menu > button:hover { background: rgb(75 59 45 / 7%); } +.workbench-sidecar-menu > button:hover { background: var(--prayu-panel-strong); } .workspace-open-menu > span { min-height: 32px; display: flex; align-items: center; padding: 5px 8px; - color: #7e7166; + color: var(--prayu-text); font-size: 10px; } -.workspace-open-message { color: #9c4217 !important; } +.workspace-open-message { color: var(--prayu-muted) !important; } .workspace-open-live { position: fixed; width: 1px; @@ -1798,28 +1798,28 @@ body { background: transparent; } .workbench-bottom-panel { min-width: 0; min-height: 0; - color: #3b332c; - background: rgb(255 252 246 / 92%); + color: var(--prayu-text); + background: var(--prayu-panel-strong); } .workbench-summary { overflow: auto; - border-left: 1px solid rgb(83 63 45 / 14%); + border-left: 1px solid var(--prayu-border); } .workbench-summary > header, .workbench-summary > section { padding: 13px 15px; - border-bottom: 1px solid rgb(83 63 45 / 12%); + border-bottom: 1px solid var(--prayu-border); } .workbench-summary > header { min-height: 46px; display: flex; align-items: center; - color: #817468; + color: var(--prayu-text); font-size: 11px; } .workbench-summary h2 { margin: 0 0 10px; - color: #766a5f; + color: var(--prayu-text); font-size: 11px; font-weight: 500; } @@ -1836,12 +1836,12 @@ body { background: transparent; } justify-content: space-between; gap: 10px; } -.workbench-summary dt { color: #8c8075; font-size: 10px; } +.workbench-summary dt { color: var(--prayu-muted); font-size: 10px; } .workbench-summary dd { min-width: 0; margin: 0; overflow: hidden; - color: #4a4037; + color: var(--prayu-text); font-size: 10px; text-align: right; text-overflow: ellipsis; @@ -1865,7 +1865,7 @@ body { background: transparent; } display: flex; align-items: flex-start; gap: 8px; - color: #81756a; + color: var(--prayu-text); font-size: 10px; line-height: 1.45; } @@ -1875,7 +1875,7 @@ body { background: transparent; } flex: 0 0 auto; display: flex; flex-direction: column; - border-top: 1px solid rgb(83 63 45 / 16%); + border-top: 1px solid var(--prayu-border); } .workbench-bottom-panel > header, .workbench-sidecar-tabs { @@ -1885,7 +1885,7 @@ body { background: transparent; } justify-content: space-between; gap: 6px; padding: 5px 9px; - border-bottom: 1px solid rgb(83 63 45 / 11%); + border-bottom: 1px solid var(--prayu-border); } .workbench-bottom-panel > header > button:first-child, .workbench-sidecar-tab { @@ -1897,11 +1897,11 @@ body { background: transparent; } padding: 0 8px; border: 0; border-radius: 6px; - color: #4e443b; + color: var(--prayu-text); background: transparent; font-size: 11px; } -.workbench-bottom-panel > header > button:first-child.active { background: rgb(72 56 42 / 7%); } +.workbench-bottom-panel > header > button:first-child.active { background: var(--prayu-control); } .workbench-terminal-empty, .workbench-tool-empty { min-height: 0; @@ -1912,11 +1912,11 @@ body { background: transparent; } justify-content: center; gap: 7px; padding: 20px; - color: #81756a; + color: var(--prayu-muted); text-align: center; } .workbench-terminal-empty strong, -.workbench-tool-empty strong { color: #4f463d; font-size: 12px; } +.workbench-tool-empty strong { color: var(--prayu-muted); font-size: 12px; } .workbench-terminal-empty span, .workbench-tool-empty span { font-size: 10px; } .user-terminal-panel { @@ -1925,7 +1925,7 @@ body { background: transparent; } display: grid; grid-template-rows: 30px minmax(0, 1fr); overflow: hidden; - background: #171512; + background: var(--prayu-terminal-bg); } .user-terminal-controls { min-width: 0; @@ -1933,9 +1933,10 @@ body { background: transparent; } align-items: center; gap: 8px; padding: 3px 9px; - border-bottom: 1px solid rgb(242 228 204 / 9%); - color: #c8bba8; - background: #1e1b17; + border-bottom: 1px solid var(--prayu-border); + color: var(--prayu-terminal-muted); + background: var(--prayu-terminal-control); + border-color: var(--prayu-terminal-border); } .user-terminal-controls button { height: 24px; @@ -1943,29 +1944,30 @@ body { background: transparent; } align-items: center; gap: 5px; padding: 0 7px; - border: 1px solid rgb(242 228 204 / 13%); + border: 1px solid var(--prayu-terminal-border); border-radius: 5px; - color: #f2e4cc; - background: #29241e; + color: var(--prayu-terminal-text); + background: var(--prayu-terminal-control); font-size: 10px; + border-color: var(--prayu-terminal-border); } .user-terminal-controls button:hover:not(:disabled) { - border-color: rgb(245 130 49 / 55%); - background: #34291f; + border-color: var(--prayu-terminal-text); + background: var(--prayu-terminal-control-hover); } .user-terminal-controls button:disabled { opacity: .45; } .user-terminal-state { flex: 0 0 auto; - color: #948779; + color: var(--prayu-terminal-muted); font-size: 9px; text-transform: uppercase; } -.user-terminal-state.running { color: #8fbf71; } -.user-terminal-state.failed { color: #ef6b5d; } +.user-terminal-state.running { color: var(--prayu-terminal-text); } +.user-terminal-state.failed { color: var(--prayu-danger-on-dark); } .user-terminal-message { min-width: 0; overflow: hidden; - color: #ef9b6b; + color: var(--prayu-danger-on-dark); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; @@ -1975,6 +1977,7 @@ body { background: transparent; } min-height: 0; padding: 6px 8px; overflow: hidden; + background: var(--prayu-terminal-bg); } .user-terminal-host .xterm { height: 100%; } .user-terminal-host .xterm-viewport { scrollbar-width: thin; } @@ -1983,7 +1986,7 @@ body { background: transparent; } display: flex; flex-direction: column; overflow: hidden; - border-left: 1px solid rgb(83 63 45 / 16%); + border-left: 1px solid var(--prayu-border); } .workbench-sidecar-tabs { justify-content: flex-start; } .workbench-sidecar-tab { flex: 1; } @@ -1995,7 +1998,7 @@ body { background: transparent; } } .workbench-sidecar-menu { top: calc(100% + 5px); right: -34px; min-width: 220px; } .workbench-sidecar-menu kbd { - color: #91867c; + color: var(--prayu-muted); font: 500 9px/1.3 var(--prayu-font-mono); } .workbench-sidecar-body { @@ -2017,7 +2020,7 @@ body { background: transparent; } grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 9px; - border-bottom: 1px solid rgb(83 63 45 / 10%); + border-bottom: 1px solid var(--prayu-border); } .workbench-side-task-list article > div { min-width: 0; @@ -2032,7 +2035,7 @@ body { background: transparent; } white-space: nowrap; } .workbench-side-task-list strong { font-size: 11px; } -.workbench-side-task-list small { grid-column: 1 / -1; color: #8b7f74; font-size: 9px; } +.workbench-side-task-list small { grid-column: 1 / -1; color: var(--prayu-muted); font-size: 9px; } .agent-composer-controls { min-height: 42px; @@ -2062,8 +2065,8 @@ body { background: transparent; } border-radius: 50%; cursor: pointer; } -.composer-icon-button { color: #5e554d; background: rgb(54 46 39 / 5%); } -.composer-icon-button:hover { background: rgb(54 46 39 / 10%); } +.composer-icon-button { color: var(--prayu-text); background: var(--prayu-control); } +.composer-icon-button:hover { background: var(--prayu-control-hover); } .composer-mode-chip { height: 28px; @@ -2071,10 +2074,10 @@ body { background: transparent; } align-items: center; gap: 5px; padding: 0 8px; - border: 1px solid rgb(211 95 25 / 24%); + border: 1px solid var(--prayu-border); border-radius: 7px; - color: #a84916; - background: rgb(222 105 34 / 8%); + color: var(--prayu-text); + background: var(--prayu-control); font-size: 10px; white-space: nowrap; } @@ -2089,17 +2092,17 @@ body { background: transparent; } max-height: min(430px, 65dvh); overflow: auto; padding: 7px; - border: 1px solid rgb(94 72 52 / 20%); + border: 1px solid var(--prayu-border); border-radius: 10px; - color: #302923; - background: rgb(255 252 246 / 97%); - box-shadow: 0 18px 48px rgb(42 30 20 / 18%); + color: var(--prayu-text); + background: var(--prayu-panel-strong); + box-shadow: 0 18px 48px rgb(0 0 0 / 18%); } .composer-add-popover { right: auto; left: 0; width: min(340px, calc(100vw - 36px)); } .composer-popover-heading { display: block; padding: 5px 9px 4px; - color: #8a7c6f; + color: var(--prayu-muted); font-size: 10px; } .composer-popover > button { @@ -2117,16 +2120,16 @@ body { background: transparent; } text-align: left; cursor: pointer; } -.composer-popover > button:hover:not(:disabled) { background: rgb(60 47 36 / 6%); } -.composer-popover > button:disabled { color: #a69d94; cursor: default; } +.composer-popover > button:hover:not(:disabled) { background: var(--prayu-panel-strong); } +.composer-popover > button:disabled { color: var(--prayu-muted); cursor: default; } .composer-popover > button > span { min-width: 0; display: grid; gap: 2px; } .composer-popover > button strong, .composer-popover > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer-popover > button strong { font-size: 12px; font-weight: 500; } -.composer-popover > button small { color: #93877d; font-size: 10px; } +.composer-popover > button small { color: var(--prayu-muted); font-size: 10px; } .composer-popover-note, -.composer-popover-error { display: block; padding: 6px 9px; color: #897c70; font-size: 10px; } -.composer-popover-error { color: #a13f2f; } +.composer-popover-error { display: block; padding: 6px 9px; color: var(--prayu-danger); font-size: 10px; } +.composer-popover-error { color: var(--prayu-danger); } .composer-model-button, .composer-reasoning-button { @@ -2138,12 +2141,12 @@ body { background: transparent; } padding: 0 8px; border: 0; border-radius: 8px; - color: #4d443c; + color: var(--prayu-text); background: transparent; cursor: pointer; } .composer-model-button:hover:not(:disabled), -.composer-reasoning-button:hover { background: rgb(54 46 39 / 6%); } +.composer-reasoning-button:hover { background: var(--prayu-control-hover); } .composer-model-button:disabled { opacity: .55; cursor: default; } .composer-model-button span, .composer-reasoning-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } @@ -2164,8 +2167,8 @@ body { background: transparent; } width: 17px; height: 17px; border-radius: 50%; - background: conic-gradient(#6b8391 var(--context-percent), rgb(84 76 68 / 15%) 0); - box-shadow: inset 0 0 0 4px rgb(255 250 240 / 92%); + background: conic-gradient(var(--prayu-accent) var(--context-percent), color-mix(in srgb, var(--prayu-text) 14%, transparent) 0); + box-shadow: inset 0 0 0 4px var(--prayu-surface-solid); } .context-meter-popover { position: absolute; @@ -2177,16 +2180,16 @@ body { background: transparent; } display: none; gap: 4px; padding: 9px 11px; - border: 1px solid rgb(94 72 52 / 18%); + border: 1px solid var(--prayu-border); border-radius: 8px; - color: #443a31; - background: rgb(255 252 246 / 98%); - box-shadow: 0 14px 34px rgb(42 30 20 / 16%); + color: var(--prayu-text); + background: var(--prayu-panel-strong); + box-shadow: 0 14px 34px rgb(0 0 0 / 16%); } .context-meter:hover .context-meter-popover, .context-meter:focus .context-meter-popover { display: grid; } .context-meter-popover strong { font-size: 11px; font-weight: 500; } -.context-meter-popover span { color: #817469; font-size: 10px; } +.context-meter-popover span { color: var(--prayu-text); font-size: 10px; } .prayu-shell .session-composer { position: sticky; @@ -2195,10 +2198,10 @@ body { background: transparent; } width: min(860px, calc(100% - 64px)); margin: 18px auto 12px; overflow: visible; - border: 1px solid rgb(92 68 44 / 28%); + border: 1px solid var(--prayu-border); border-radius: 13px; - background: rgb(255 250 240 / 92%); - box-shadow: 0 12px 32px rgb(66 46 28 / 12%); + background: var(--prayu-control); + box-shadow: 0 12px 32px rgb(0 0 0 / 12%); } .prayu-shell .session-composer textarea { min-height: 64px; @@ -2215,17 +2218,17 @@ body { background: transparent; } } .prayu-shell .session-composer .agent-composer-controls { padding: 2px 7px 7px; } .session-composer-state { min-width: 0; } -.session-composer-state .byte-count { color: #8c8074; font-size: 9px; } +.session-composer-state .byte-count { color: var(--prayu-muted); font-size: 9px; } .public-model-stream { width: min(860px, calc(100% - 64px)); margin: 18px auto 0; padding: 12px 14px; - border: 1px solid rgb(92 68 44 / 20%); + border: 1px solid var(--prayu-border); border-radius: 8px; - color: #40372f; - background: rgb(255 250 240 / 78%); - box-shadow: 0 8px 24px rgb(66 46 28 / 8%); + color: var(--prayu-text); + background: var(--prayu-control); + box-shadow: 0 8px 24px rgb(0 0 0 / 8%); } .public-model-stream header, .public-model-stream header > div, @@ -2233,14 +2236,14 @@ body { background: transparent; } .public-model-stream header { justify-content: space-between; } .public-model-stream header strong { font-size: 12px; font-weight: 600; } .public-model-stream header span, -.public-model-stream footer { color: #817469; font-size: 10px; } +.public-model-stream footer { color: var(--prayu-text); font-size: 10px; } .public-model-stream-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; - background: #168f82; - box-shadow: 0 0 0 3px rgb(22 143 130 / 12%); + background: var(--prayu-control); + box-shadow: 0 0 0 3px rgb(0 0 0 / 12%); } .public-model-tool-list { display: grid; @@ -2253,9 +2256,9 @@ body { background: transparent; } justify-content: space-between; gap: 12px; padding: 7px 9px; - border: 1px solid rgb(22 143 130 / 18%); + border: 1px solid var(--prayu-border); border-radius: 7px; - background: rgb(22 143 130 / 6%); + background: var(--prayu-control); } .public-model-tool-item strong { min-width: 0; @@ -2264,7 +2267,7 @@ body { background: transparent; } text-overflow: ellipsis; white-space: nowrap; } -.public-model-tool-item span { color: #817469; font-size: 10px; text-align: right; } +.public-model-tool-item span { color: var(--prayu-text); font-size: 10px; text-align: right; } .public-model-stream p { min-height: 21px; margin: 10px 0 8px; @@ -2274,7 +2277,7 @@ body { background: transparent; } white-space: pre-wrap; } .public-model-stream footer { flex-wrap: wrap; justify-content: space-between; } -.public-model-stream .connection-error { color: #9b2c2c; } +.public-model-stream .connection-error { color: var(--prayu-danger); } .workspace-attachment-dialog { width: min(980px, calc(100vw - 48px)); @@ -2289,9 +2292,9 @@ body { background: transparent; } display: flex; align-items: center; gap: 10px; - border-bottom: 1px solid rgb(86 62 39 / 15%); + border-bottom: 1px solid var(--prayu-border); } -.utility-workspace > header svg { color: #d56620; } +.utility-workspace > header svg { color: var(--prayu-text); } .utility-workspace h1 { margin: 0; font-size: 18px; } .utility-empty-state { min-height: 340px; @@ -2300,7 +2303,7 @@ body { background: transparent; } align-items: center; justify-content: center; gap: 11px; - color: #7c7064; + color: var(--prayu-muted); } .utility-empty-state strong { font-size: 13px; } @@ -2376,7 +2379,7 @@ body { background: transparent; } align-items: center; justify-content: space-between; padding: 15px 30px; - border-bottom: 1px solid rgb(86 62 39 / 15%); + border-bottom: 1px solid var(--prayu-border); } .model-control-workspace > header > div { display: flex; align-items: center; gap: 11px; } .model-control-workspace > header h2 { margin: 0; font-size: 18px; } @@ -2387,8 +2390,8 @@ body { background: transparent; } display: grid; place-items: center; border-radius: 7px; - color: #c95210; - background: rgb(223 107 34 / 12%); + color: var(--prayu-text); + background: var(--prayu-control); } .model-control-workspace .model-availability-body { padding: 24px 30px 42px; @@ -2398,7 +2401,7 @@ body { background: transparent; } } .model-control-workspace .model-availability-section + .model-availability-section { padding-top: 23px; - border-top: 1px solid rgb(86 62 39 / 13%); + border-top: 1px solid var(--prayu-border); } @media (max-width: 1000px) { @@ -2433,7 +2436,7 @@ body { background: transparent; } .workspace-panel-toolbar { padding-left: 13px; } .workspace-panel-location strong { max-width: 36vw; } .workbench-dock-layout.with-sidecar { grid-template-columns: minmax(0, 1fr); } - .workbench-sidecar { border-left: 1px solid rgb(83 63 45 / 16%); } + .workbench-sidecar { border-left: 1px solid var(--prayu-border); } .workbench-center-row.with-summary { grid-template-columns: minmax(0, 1fr) minmax(196px, 218px); } @@ -2456,84 +2459,188 @@ body { background: transparent; } .model-control-workspace .model-availability-body { padding-right: 16px; padding-left: 16px; } } -/* Native Acrylic glass system */ +/* Neutral Acrylic material system. White emphasis stays opaque in every theme; + danger and source diff colors are the only chromatic semantic tokens. */ :root, [data-prayu-theme="dark"] { - --prayu-window: rgb(8 9 11 / 48%); - --prayu-titlebar: rgb(13 14 17 / 54%); - --prayu-sidebar: rgb(12 13 16 / 48%); - --prayu-panel: rgb(16 17 21 / 64%); - --prayu-panel-strong: rgb(20 21 25 / 76%); - --prayu-control: rgb(255 255 255 / 7%); - --prayu-control-hover: rgb(255 255 255 / 13%); - --prayu-selected: #ffffff; - --prayu-selected-ink: #16171a; - --prayu-text: #f5f5f6; - --prayu-muted: #a8abb1; - --prayu-border: rgb(255 255 255 / 13%); - --prayu-border-strong: rgb(255 255 255 / 22%); + --prayu-window: rgb(16 16 16 / 90%); + --prayu-titlebar: rgb(20 20 20 / 94%); + --prayu-sidebar: rgb(20 20 20 / 92%); + --prayu-panel: rgb(24 24 24 / 92%); + --prayu-panel-strong: rgb(27 27 27 / 98%); + --prayu-control: rgb(44 44 44 / 94%); + --prayu-control-hover: rgb(54 54 54 / 98%); + --prayu-primary-bg: #ffffff; + --prayu-primary-fg: #1b1b1b; + --prayu-primary-hover: #f0f0f0; + --prayu-primary-border: rgb(0 0 0 / 22%); + --prayu-primary-shadow: rgb(0 0 0 / 20%); + --prayu-selected: var(--prayu-primary-bg); + --prayu-selected-ink: var(--prayu-primary-fg); + --prayu-surface-solid: #1b1b1b; + --prayu-text: #f5f5f5; + --prayu-muted: #b5b5b5; + --prayu-border: rgb(255 255 255 / 16%); + --prayu-border-strong: rgb(255 255 255 / 28%); --prayu-shadow: rgb(0 0 0 / 32%); - --prayu-focus: #7dc7ff; - --prayu-accent: #58b7ff; - --prayu-danger: #ff7c72; - --prayu-success: #58c98b; - --prayu-warning: #f2bf67; - --prayu-glass-fill: rgb(24 27 33 / 52%); - --prayu-glass-fill-strong: rgb(27 30 36 / 72%); + --prayu-focus: #eeeeee; + --prayu-accent: #eeeeee; + --prayu-danger: #ff9189; + --prayu-danger-fill: #b42318; + --prayu-on-danger: #ffffff; + --prayu-danger-on-dark: #ff9189; + --prayu-danger-soft: color-mix(in srgb, var(--prayu-danger) 10%, var(--prayu-surface-solid)); + --prayu-success: var(--prayu-text); + --prayu-warning: var(--prayu-text); + --prayu-diff-add: #9cd4ae; + --prayu-diff-delete: var(--prayu-danger); + --prayu-diff-add-soft: color-mix(in srgb, var(--prayu-diff-add) 12%, var(--prayu-surface-solid)); + --prayu-diff-delete-soft: color-mix(in srgb, var(--prayu-diff-delete) 10%, var(--prayu-surface-solid)); + --prayu-glass-fill: rgb(28 28 28 / 92%); + --prayu-glass-fill-strong: rgb(30 30 30 / 98%); --prayu-glass-highlight: rgb(255 255 255 / 24%); --prayu-glass-shadow: rgb(0 0 0 / 34%); + --prayu-terminal-bg: #181818; + --prayu-terminal-control: #222222; + --prayu-terminal-control-hover: #303030; + --prayu-terminal-text: #ededed; + --prayu-terminal-muted: #b5b5b5; + --prayu-terminal-border: rgb(255 255 255 / 16%); } [data-prayu-theme="light"] { - --prayu-window: rgb(245 247 250 / 48%); - --prayu-titlebar: rgb(255 255 255 / 58%); - --prayu-sidebar: rgb(248 249 252 / 52%); - --prayu-panel: rgb(255 255 255 / 68%); - --prayu-panel-strong: rgb(255 255 255 / 82%); - --prayu-control: rgb(255 255 255 / 42%); - --prayu-control-hover: rgb(255 255 255 / 70%); - --prayu-selected: #ffffff; - --prayu-selected-ink: #17181b; - --prayu-text: #202124; - --prayu-muted: #62666d; - --prayu-border: rgb(23 28 36 / 12%); - --prayu-border-strong: rgb(23 28 36 / 20%); - --prayu-shadow: rgb(25 31 39 / 18%); - --prayu-focus: #0b73ce; - --prayu-accent: #0877d1; + --prayu-window: rgb(243 243 243 / 92%); + --prayu-titlebar: rgb(255 255 255 / 98%); + --prayu-sidebar: rgb(249 249 249 / 94%); + --prayu-panel: rgb(255 255 255 / 94%); + --prayu-panel-strong: rgb(255 255 255 / 98%); + --prayu-control: rgb(255 255 255 / 94%); + --prayu-control-hover: rgb(243 243 243 / 98%); + --prayu-selected: var(--prayu-primary-bg); + --prayu-selected-ink: var(--prayu-primary-fg); + --prayu-surface-solid: #ffffff; + --prayu-text: #202020; + --prayu-muted: #616161; + --prayu-border: rgb(0 0 0 / 14%); + --prayu-border-strong: rgb(0 0 0 / 24%); + --prayu-shadow: rgb(0 0 0 / 18%); + --prayu-focus: #303030; + --prayu-accent: #303030; --prayu-danger: #b42318; - --prayu-success: #18794e; - --prayu-warning: #875b08; - --prayu-glass-fill: rgb(255 255 255 / 52%); - --prayu-glass-fill-strong: rgb(255 255 255 / 74%); + --prayu-success: var(--prayu-text); + --prayu-warning: var(--prayu-text); + --prayu-diff-add: #18673c; + --prayu-glass-fill: rgb(255 255 255 / 94%); + --prayu-glass-fill-strong: rgb(255 255 255 / 98%); --prayu-glass-highlight: rgb(255 255 255 / 92%); - --prayu-glass-shadow: rgb(33 42 54 / 18%); + --prayu-glass-shadow: rgb(0 0 0 / 18%); + --prayu-danger-soft: color-mix(in srgb, var(--prayu-danger) 10%, var(--prayu-surface-solid)); + --prayu-diff-delete: var(--prayu-danger); + --prayu-diff-add-soft: color-mix(in srgb, var(--prayu-diff-add) 12%, var(--prayu-surface-solid)); + --prayu-diff-delete-soft: color-mix(in srgb, var(--prayu-diff-delete) 10%, var(--prayu-surface-solid)); } [data-prayu-theme="glass"] { - --prayu-window: rgb(8 12 18 / 14%); - --prayu-titlebar: rgb(20 25 33 / 24%); - --prayu-sidebar: rgb(18 24 32 / 22%); - --prayu-panel: rgb(18 24 32 / 30%); - --prayu-panel-strong: rgb(18 24 32 / 42%); - --prayu-control: rgb(255 255 255 / 10%); - --prayu-control-hover: rgb(255 255 255 / 18%); - --prayu-selected: #ffffff; - --prayu-selected-ink: #111317; - --prayu-text: #f8f9fb; - --prayu-muted: #c4c8d0; - --prayu-border: rgb(255 255 255 / 17%); + --prayu-window: rgb(18 18 18 / 72%); + --prayu-titlebar: rgb(20 20 20 / 88%); + --prayu-sidebar: rgb(18 18 18 / 86%); + --prayu-panel: rgb(22 22 22 / 88%); + --prayu-panel-strong: rgb(26 26 26 / 96%); + --prayu-control: rgb(34 34 34 / 94%); + --prayu-control-hover: rgb(48 48 48 / 98%); + --prayu-selected: var(--prayu-primary-bg); + --prayu-selected-ink: var(--prayu-primary-fg); + --prayu-surface-solid: #1b1b1b; + --prayu-text: #f8f8f8; + --prayu-muted: #c3c3c3; + --prayu-border: rgb(255 255 255 / 20%); --prayu-border-strong: rgb(255 255 255 / 30%); --prayu-shadow: rgb(0 0 0 / 28%); - --prayu-focus: #8fd3ff; - --prayu-accent: #72c5ff; - --prayu-danger: #ff8a80; - --prayu-success: #68d49a; - --prayu-warning: #ffd17a; - --prayu-glass-fill: rgb(20 27 36 / 24%); - --prayu-glass-fill-strong: rgb(20 27 36 / 44%); + --prayu-focus: #f4f4f4; + --prayu-accent: #f4f4f4; + --prayu-danger: #ff9189; + --prayu-success: var(--prayu-text); + --prayu-warning: var(--prayu-text); + --prayu-diff-add: #9cd4ae; + --prayu-glass-fill: rgb(26 26 26 / 86%); + --prayu-glass-fill-strong: rgb(30 30 30 / 96%); --prayu-glass-highlight: rgb(255 255 255 / 30%); --prayu-glass-shadow: rgb(0 0 0 / 30%); + --prayu-danger-soft: color-mix(in srgb, var(--prayu-danger) 10%, var(--prayu-surface-solid)); + --prayu-diff-delete: var(--prayu-danger); + --prayu-diff-add-soft: color-mix(in srgb, var(--prayu-diff-add) 12%, var(--prayu-surface-solid)); + --prayu-diff-delete-soft: color-mix(in srgb, var(--prayu-diff-delete) 10%, var(--prayu-surface-solid)); +} + +@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { + :root, + [data-prayu-theme] { + --prayu-window: var(--prayu-surface-solid); + --prayu-titlebar: var(--prayu-surface-solid); + --prayu-sidebar: var(--prayu-surface-solid); + --prayu-panel: var(--prayu-surface-solid); + --prayu-panel-strong: var(--prayu-surface-solid); + --prayu-glass-fill: var(--prayu-surface-solid); + --prayu-glass-fill-strong: var(--prayu-surface-solid); + } +} + +@media (prefers-contrast: more) { + :root, + [data-prayu-theme] { + --prayu-border: var(--prayu-text); + --prayu-border-strong: var(--prayu-text); + --prayu-primary-border: var(--prayu-primary-fg); + } +} + +@media (forced-colors: active) { + :root, + [data-prayu-theme] { + --prayu-window: Canvas; + --prayu-titlebar: Canvas; + --prayu-sidebar: Canvas; + --prayu-panel: Canvas; + --prayu-panel-strong: Canvas; + --prayu-control: Canvas; + --prayu-control-hover: Canvas; + --prayu-surface-solid: Canvas; + --prayu-text: CanvasText; + --prayu-muted: GrayText; + --prayu-border: CanvasText; + --prayu-border-strong: CanvasText; + --prayu-focus: Highlight; + --prayu-accent: CanvasText; + --prayu-primary-bg: ButtonFace; + --prayu-primary-fg: ButtonText; + --prayu-primary-hover: ButtonFace; + --prayu-primary-border: ButtonText; + --prayu-primary-shadow: transparent; + --prayu-selected: Highlight; + --prayu-selected-ink: HighlightText; + --prayu-danger: CanvasText; + --prayu-danger-fill: ButtonText; + --prayu-on-danger: ButtonFace; + --prayu-danger-on-dark: CanvasText; + --prayu-danger-soft: Canvas; + --prayu-success: CanvasText; + --prayu-warning: CanvasText; + --prayu-diff-add: CanvasText; + --prayu-diff-delete: CanvasText; + --prayu-diff-add-soft: Canvas; + --prayu-diff-delete-soft: Canvas; + --prayu-glass-fill: Canvas; + --prayu-glass-fill-strong: Canvas; + --prayu-glass-highlight: transparent; + --prayu-shadow: transparent; + --prayu-glass-shadow: transparent; + --prayu-terminal-bg: Canvas; + --prayu-terminal-control: Canvas; + --prayu-terminal-control-hover: Canvas; + --prayu-terminal-text: CanvasText; + --prayu-terminal-muted: GrayText; + --prayu-terminal-border: CanvasText; + } } html, @@ -2548,7 +2655,7 @@ body, .prayu-shell { --accent: var(--prayu-accent); - --accent-soft: color-mix(in srgb, var(--prayu-accent) 16%, transparent); + --accent-soft: color-mix(in srgb, var(--prayu-accent) 14%, transparent); --border: var(--prayu-border); --border-strong: var(--prayu-border-strong); --ink: var(--prayu-text); @@ -2572,7 +2679,7 @@ summary:focus-visible { border-bottom: 1px solid var(--prayu-border); color: var(--prayu-text); background: var(--prayu-titlebar); - backdrop-filter: blur(28px) saturate(160%); + backdrop-filter: blur(28px); } .titlebar-icon, @@ -2594,7 +2701,7 @@ summary:focus-visible { [data-prayu-theme="glass"] .prayu-shell .main-workspace, [data-prayu-theme="glass"] .prayu-shell .main-workspace.prayu-conversation-panel { - backdrop-filter: blur(46px) saturate(185%); + backdrop-filter: blur(46px); } .prayu-shell .main-workspace, @@ -2603,7 +2710,7 @@ summary:focus-visible { color: var(--prayu-text); background: var(--prayu-panel); box-shadow: 0 18px 54px var(--prayu-shadow); - backdrop-filter: blur(34px) saturate(150%); + backdrop-filter: blur(34px); } .prayu-shell .main-workspace, @@ -2617,7 +2724,7 @@ summary:focus-visible { border-color: var(--prayu-border); color: var(--prayu-text); background: var(--prayu-control); - backdrop-filter: blur(24px) saturate(145%); + backdrop-filter: blur(24px); } .workspace-panel-location > svg, @@ -2653,12 +2760,11 @@ summary:focus-visible { } .prayu-shell .resource-tabs button.active { - border-color: rgb(255 255 255 / 55%); + border-color: var(--prayu-primary-border); color: var(--prayu-selected-ink); background: var(--prayu-selected); box-shadow: - 0 6px 20px rgb(0 0 0 / 16%), - inset 0 1px 0 rgb(255 255 255 / 72%); + 0 6px 18px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); } .prayu-shell .resource-tabs button.active svg { @@ -2676,7 +2782,7 @@ summary:focus-visible { border-color: var(--prayu-border); color: var(--prayu-text); background: var(--prayu-control); - backdrop-filter: blur(18px) saturate(145%); + backdrop-filter: blur(18px); } .prayu-shell .search-field input { @@ -2837,7 +2943,7 @@ summary:focus-visible { color: var(--prayu-text); background: var(--prayu-control); box-shadow: 0 12px 36px var(--prayu-shadow); - backdrop-filter: blur(28px) saturate(150%); + backdrop-filter: blur(28px); } .settings-row-list, @@ -2881,8 +2987,7 @@ summary:focus-visible { color: var(--prayu-selected-ink); background: var(--prayu-selected); box-shadow: - 0 5px 16px rgb(0 0 0 / 16%), - inset 0 1px 0 rgb(255 255 255 / 82%); + 0 5px 16px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); } .shortcut-list kbd { @@ -2898,7 +3003,7 @@ summary:focus-visible { border-radius: 8px; background: var(--prayu-control); box-shadow: 0 12px 34px var(--prayu-shadow); - backdrop-filter: blur(24px) saturate(150%); + backdrop-filter: blur(24px); } .permission-control-card .section-heading { @@ -2954,10 +3059,10 @@ summary:focus-visible { } .permission-option-grid > button[aria-pressed="true"] { - border-color: rgb(255 255 255 / 58%); + border-color: var(--prayu-primary-border); color: var(--prayu-selected-ink); background: var(--prayu-selected); - box-shadow: 0 6px 18px rgb(0 0 0 / 15%); + box-shadow: 0 6px 18px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); } .permission-option-grid > button.danger:not([aria-pressed="true"]) > svg:first-child { @@ -2990,7 +3095,7 @@ summary:focus-visible { overflow-wrap: anywhere; } .permission-option-grid > button[aria-pressed="true"] small { - color: rgb(22 23 26 / 64%); + color: color-mix(in srgb, var(--prayu-selected-ink) 70%, var(--prayu-selected)); } .permission-facts { @@ -3097,7 +3202,7 @@ summary:focus-visible { color: var(--prayu-muted); background: var(--prayu-control); font-size: 10px; - backdrop-filter: blur(18px) saturate(145%); + backdrop-filter: blur(18px); } .run-activity-safety svg { color: var(--prayu-accent); } @@ -3142,7 +3247,7 @@ summary:focus-visible { color: var(--prayu-muted); background: color-mix(in srgb, var(--prayu-control) 88%, transparent); box-shadow: 0 5px 15px var(--prayu-shadow); - backdrop-filter: blur(18px) saturate(145%); + backdrop-filter: blur(18px); } .run-activity-item.source-model .run-activity-marker { @@ -3304,7 +3409,7 @@ summary:focus-visible { .safe-markdown table { width: 100%; margin: .75em 0; border-collapse: collapse; } .safe-markdown th, .safe-markdown td { padding: 6px 8px; border: 1px solid var(--prayu-border, var(--border)); text-align: left; } -.safe-markdown a { color: var(--prayu-accent, #087f73); text-decoration: underline; text-underline-offset: 2px; } +.safe-markdown a { color: var(--prayu-accent); text-decoration: underline; text-underline-offset: 2px; } .safe-markdown-inert-link { text-decoration: underline dotted; text-underline-offset: 2px; } .run-activity-body small { @@ -3477,8 +3582,8 @@ summary:focus-visible { box-shadow: 0 14px 38px var(--prayu-glass-shadow), inset 0 1px 0 var(--prayu-glass-highlight); - -webkit-backdrop-filter: blur(24px) saturate(160%); - backdrop-filter: blur(24px) saturate(160%); + -webkit-backdrop-filter: blur(24px); + backdrop-filter: blur(24px); } .extension-card { @@ -3533,8 +3638,8 @@ summary:focus-visible { .extension-state.state-quarantined, .extension-state.state-revoked { - border-color: color-mix(in srgb, #e24d55 52%, transparent); - color: #e24d55; + border-color: color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); + color: var(--prayu-danger); } .extension-facts { @@ -3609,10 +3714,10 @@ summary:focus-visible { margin-top: 12px; } -.settings-action.danger:not(:disabled) { color: #e24d55; } +.settings-action.danger:not(:disabled) { color: var(--prayu-danger); } .settings-action.danger:hover:not(:disabled) { - border-color: color-mix(in srgb, #e24d55 52%, transparent); - background: color-mix(in srgb, #e24d55 9%, var(--prayu-control)); + border-color: color-mix(in srgb, var(--prayu-danger) 48%, var(--prayu-border)); + background: var(--prayu-danger-soft); } .extension-empty { @@ -3655,14 +3760,15 @@ summary:focus-visible { 0 18px 46px var(--prayu-glass-shadow), inset 0 1px 0 var(--prayu-glass-highlight), inset 0 -1px 0 color-mix(in srgb, var(--prayu-text) 8%, transparent); - -webkit-backdrop-filter: blur(28px) saturate(175%) contrast(104%); - backdrop-filter: blur(28px) saturate(175%) contrast(104%); + -webkit-backdrop-filter: blur(28px); + backdrop-filter: blur(28px); } /* Keep the transcript Composer sticky; only non-Composer glass surfaces establish a relative positioning context. Sticky positioning already anchors its pseudo-element. */ .prayu-shell .public-model-stream { position: relative; + background: var(--prayu-glass-fill); } .prayu-shell .session-composer { @@ -3748,8 +3854,8 @@ summary:focus-visible { box-shadow: 0 20px 52px var(--prayu-glass-shadow), inset 0 1px 0 var(--prayu-glass-highlight); - -webkit-backdrop-filter: blur(34px) saturate(180%); - backdrop-filter: blur(34px) saturate(180%); + -webkit-backdrop-filter: blur(34px); + backdrop-filter: blur(34px); } .prayu-shell .composer-popover-heading, @@ -3780,7 +3886,7 @@ summary:focus-visible { .prayu-shell .public-model-stream { border-radius: 14px; - background: color-mix(in srgb, var(--prayu-glass-fill) 82%, transparent); + background: var(--prayu-glass-fill); } .prayu-shell .public-model-stream, @@ -4009,8 +4115,8 @@ summary:focus-visible { white-space: nowrap; } .thread-transcript-source.source-model { color: var(--prayu-accent, var(--accent)); } -.thread-transcript-stage.stage-blocked { color: var(--prayu-danger, #a33); } -.thread-transcript-stage.stage-result { color: var(--prayu-success, #18734c); } +.thread-transcript-stage.stage-blocked { color: var(--prayu-warning); } +.thread-transcript-stage.stage-result { color: var(--prayu-success); } .thread-transcript-live { color: var(--prayu-accent, var(--accent)); } .thread-transcript-live > span { width: 5px; @@ -4176,8 +4282,8 @@ summary:focus-visible { border-left: 1px solid var(--prayu-border-strong); background: var(--prayu-glass-fill-strong); box-shadow: -18px 0 48px var(--prayu-glass-shadow); - -webkit-backdrop-filter: blur(30px) saturate(170%); - backdrop-filter: blur(30px) saturate(170%); + -webkit-backdrop-filter: blur(30px); + backdrop-filter: blur(30px); } } @@ -4215,6 +4321,7 @@ summary:focus-visible { --surface: var(--prayu-panel); --surface-subtle: var(--prayu-control); --surface-muted: var(--prayu-control); + --surface-raised: var(--prayu-panel-strong); --ink: var(--prayu-text); --text: var(--prayu-text); --text-secondary: var(--prayu-muted); @@ -4254,9 +4361,9 @@ samp { .desktop-dialog-backdrop, .command-palette-backdrop { color: var(--prayu-text); - background: rgb(3 7 13 / 58%); - -webkit-backdrop-filter: blur(16px) saturate(135%); - backdrop-filter: blur(16px) saturate(135%); + background: rgb(0 0 0 / 58%); + -webkit-backdrop-filter: blur(16px); + backdrop-filter: blur(16px); animation: prayu-backdrop-arrive 160ms ease-out both; } @@ -4271,8 +4378,8 @@ samp { 0 28px 88px rgb(0 0 0 / 42%), inset 0 1px 0 var(--prayu-glass-highlight), inset 0 -1px 0 color-mix(in srgb, var(--prayu-text) 8%, transparent); - -webkit-backdrop-filter: blur(42px) saturate(185%) contrast(104%); - backdrop-filter: blur(42px) saturate(185%) contrast(104%); + -webkit-backdrop-filter: blur(42px); + backdrop-filter: blur(42px); animation: prayu-glass-materialize 210ms cubic-bezier(.2, .82, .2, 1) both; } @@ -4322,8 +4429,8 @@ samp { padding: 12px 18px; border-color: var(--prayu-border); background: color-mix(in srgb, var(--prayu-control) 82%, transparent); - -webkit-backdrop-filter: blur(24px) saturate(150%); - backdrop-filter: blur(24px) saturate(150%); + -webkit-backdrop-filter: blur(24px); + backdrop-filter: blur(24px); } .desktop-dialog-body { @@ -4384,12 +4491,12 @@ samp { .desktop-dialog option { color: var(--prayu-text); - background: color-mix(in srgb, var(--prayu-panel-strong) 96%, #111820); + background: var(--prayu-surface-solid); } [data-prayu-theme="light"] .desktop-dialog option { color: var(--prayu-text); - background: #f7f9fc; + background: var(--prayu-surface-solid); } .desktop-dialog input[type="checkbox"], @@ -4492,9 +4599,9 @@ samp { .workbench-bottom-panel { border-color: var(--prayu-border); color: var(--prayu-text); - background: color-mix(in srgb, var(--prayu-panel-strong) 86%, transparent); - -webkit-backdrop-filter: blur(28px) saturate(155%); - backdrop-filter: blur(28px) saturate(155%); + background: var(--prayu-panel-strong); + -webkit-backdrop-filter: blur(28px); + backdrop-filter: blur(28px); } .workbench-summary > header, @@ -4540,42 +4647,43 @@ samp { } .user-terminal-panel { - background: #080b10; + background: var(--prayu-terminal-bg); } .user-terminal-controls { - border-color: rgb(255 255 255 / 10%); - color: #b9c1cc; - background: #0e131a; + border-color: var(--prayu-terminal-border); + color: var(--prayu-terminal-muted); + background: var(--prayu-terminal-control); } .user-terminal-controls button { - border-color: rgb(255 255 255 / 14%); - color: #edf2f7; - background: #151c25; + border-color: var(--prayu-terminal-border); + color: var(--prayu-terminal-text); + background: var(--prayu-terminal-control); + border: 1px solid var(--prayu-terminal-border); } .user-terminal-controls button:hover:not(:disabled) { - border-color: color-mix(in srgb, var(--prayu-accent) 58%, transparent); - background: #1c2733; + border-color: var(--prayu-terminal-text); + background: var(--prayu-terminal-control-hover); } .user-terminal-controls button.agent-input-active { - border-color: color-mix(in srgb, var(--prayu-success) 55%, transparent); - color: var(--prayu-success); + border-color: var(--prayu-terminal-text); + color: var(--prayu-terminal-text); } .user-terminal-state { - color: #9aa6b4; + color: var(--prayu-terminal-muted); } .user-terminal-state.running { - color: var(--prayu-success); + color: var(--prayu-terminal-text); } .user-terminal-state.failed, .user-terminal-message { - color: var(--prayu-danger); + color: var(--prayu-danger-on-dark); } .context-meter > i { @@ -4594,7 +4702,7 @@ samp { .desktop-dialog :is(.desktop-package-list code, .desktop-package-heading > code) { border-color: var(--prayu-border); color: var(--prayu-text); - background: var(--prayu-control); + background: var(--prayu-surface-solid); } .prayu-shell :is(.tag-line code, .host-command-env-key), @@ -4735,7 +4843,8 @@ samp { border-radius: 12px; color: var(--prayu-selected-ink); background: var(--prayu-selected); - box-shadow: 0 7px 20px var(--prayu-shadow), inset 0 1px 0 rgb(255 255 255 / 84%); + box-shadow: 0 7px 20px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); + border: 1px solid var(--prayu-primary-border); } @keyframes prayu-backdrop-arrive { @@ -4772,7 +4881,7 @@ samp { @media (prefers-reduced-transparency: reduce) { .desktop-dialog-backdrop, .command-palette-backdrop { - background: rgb(5 8 13 / 82%); + background: rgb(0 0 0 / 82%); -webkit-backdrop-filter: none; backdrop-filter: none; } @@ -4806,7 +4915,7 @@ samp { .workbench-bottom-panel { border-color: CanvasText; color: CanvasText; - background: Canvas; + background: var(--prayu-panel-strong); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; diff --git a/web/src/v2/README.md b/web/src/v2/README.md index 80fb53b6..dd87e812 100644 --- a/web/src/v2/README.md +++ b/web/src/v2/README.md @@ -37,9 +37,9 @@ - 字体：**全部英文（UI 与代码）使用 JetBrains Mono Variable**；中文使用内置 HarmonyOS Sans SC（四字重 400/500/600/700）。字体栈 `"JetBrains Mono Variable", "JetBrains Mono", "HarmonyOS Sans SC", "Microsoft YaHei UI", sans-serif`。四个 TTF 均从华为官方归档逐字节复制，不做转码或子集化；归档、文件哈希、许可文本与产品内使用声明必须一起提交。 - 内容最大宽度 48rem；toolbar padding 16px；Composer overhang 24px；消息间隔 16px，组内 4px。 - 圆角基值 2/4/6/8/10/12/16/20/24px；支持时采用 `superellipse(1.5)`。 -- 模糊层级 4/8/12/16/24/40/64px。项目材质继续使用 titlebar 28px、sidebar/panel 34px、glass 46px 的高斯模糊与 145–185% saturation。 +- 模糊层级 4/8/12/16/24/40/64px。项目材质继续使用 titlebar 28px、sidebar/panel 34px、glass 46px 的高斯模糊；2026-10-10 用户要求收敛为中性白色填充，背景使用原始饱和度。 - prominent elevation：0.5px hairline、`0 3px 7.5px #0000000a`、`0 0 20px #0000000d`；Composer 另叠加项目液态玻璃的高光和柔和阴影。 -- light 主表面 `#FFFFFF`，主文字 `#1B1C1F`，边框 `#EDEDED`；选中侧栏约 `#DDEBEC`；发送按钮 `#1B1C1F`。 +- light 主表面使用白色与浅灰，dark/glass 使用中性深灰。主按钮使用不透明白底与深色文字，选中状态、焦点、普通提示复用共享中性色。颜色盘点与最新材质规则见 [中性玻璃规范](../../../docs/branding/neutral-glass-palette.md)。 - 原生 Windows 层保留 Wails 透明窗体/Acrylic；React 层使用半透明 surface、Gaussian blur、hairline、双层阴影。两层材质缺一不可。 ## 架构判断（GPT Pro 意见的实施版） @@ -157,7 +157,7 @@ Inspector（旧 Run/Session/Event 页面，用户主动进入） ## 自定义模型供应商与 Harness -- 模型页使用两列小卡片，第一张固定为齿轮图标的“自定义配置”，其余卡片可见内容严格只有供应商名称与预设模型名；卡片左侧使用白色单色品牌图标和轻量玻璃材质。窄窗改为单列，并覆盖 reduced motion、reduced transparency、high contrast 与 Windows forced colors。 +- 模型页使用两列小卡片，第一张固定为齿轮图标的“自定义配置”，其余卡片可见内容严格只有供应商名称与预设模型名；卡片左侧使用白色填充图标槽与深色单色品牌图形。窄窗改为单列，并覆盖 reduced motion、reduced transparency、high contrast 与 Windows forced colors。 - 预设依次提供 Claude、OpenAI、DeepSeek、Gemini、Grok、MiniMax、MiMo、Kimi、Kimi for Coding、OpenCode Go 和 GitHub Copilot。API 预设只提供可编辑的官方端点、协议、模型和搜索策略初值，不是锁死模板；进入编辑器后用户仍可修改模型列表、请求地址与高级 JSON。 - Kimi 开放平台与 Kimi for Coding 必须使用独立卡片、供应商 ID、域名、Key 和配额，不能互换。OpenCode Go 明确标为订阅网关，不冒充模型厂商。GitHub Copilot 是 GitHub/Copilot 账号与订阅席位连接器，不得把 PAT、Base URL 或普通 API Key 表单伪装成 Copilot 推理接口；在 SDK 登录链完成前应如实显示“尚未接通”。 - 模型模块中的“自定义配置”允许用户持久新增供应商；“集成”下不再保留重复的“智能伙伴”分类。供应商定义和 API 凭证必须分离：名称、协议、端点、模型映射和能力策略写入 SQLite；API Key 只进入操作系统凭证管理器，任何 GET、事件、日志或导出均不得回传明文。 diff --git a/web/src/v2/components/agent-browser.css b/web/src/v2/components/agent-browser.css index da2628f2..b37ae878 100644 --- a/web/src/v2/components/agent-browser.css +++ b/web/src/v2/components/agent-browser.css @@ -11,7 +11,7 @@ .v2-agent-browser-page strong, .v2-agent-browser-page a { min-width:0; overflow-wrap:anywhere; } .v2-agent-browser-page a { display:block; max-width:100%; color:var(--v2-accent); text-decoration:underline; text-underline-offset:3px; } .v2-agent-browser-page a svg { display:inline; margin-left:5px; vertical-align:middle; } -.v2-agent-browser img { display:block; width:100%; height:auto; max-height:320px; object-fit:contain; border:1px solid var(--v2-border); border-radius:8px; background:#111; } +.v2-agent-browser img { display:block; width:100%; height:auto; max-height:320px; object-fit:contain; border:1px solid var(--v2-border); border-radius:8px; background:var(--prayu-surface-solid); } .v2-agent-browser details { min-width:0; } .v2-agent-browser summary { cursor:pointer; color:var(--v2-muted); } .v2-agent-browser details p { margin-top:7px; } diff --git a/web/src/v2/components/application-preview.css b/web/src/v2/components/application-preview.css index 3e61ab7a..aa162fd7 100644 --- a/web/src/v2/components/application-preview.css +++ b/web/src/v2/components/application-preview.css @@ -1,38 +1,38 @@ -.v2-preview-overlay { position:fixed; inset:0; z-index:900; background:#0005; display:flex; justify-content:flex-end; } -.v2-app-preview { box-sizing:border-box; width:min(920px, 94vw); height:100dvh; padding:20px; overflow:auto; background:#141519; color:var(--v2-ink); box-shadow:-4px 0 30px #0002; font-size:14px; } -[data-prayu-theme="light"] .v2-app-preview { background:#fff; } +.v2-preview-overlay { position:fixed; inset:0; z-index:900; background:color-mix(in srgb, var(--prayu-primary-fg) 34%, transparent); display:flex; justify-content:flex-end; } +.v2-app-preview { box-sizing:border-box; width:min(920px, 94vw); height:100dvh; padding:20px; overflow:auto; background:var(--prayu-surface-solid); color:var(--v2-ink); box-shadow:-4px 0 30px var(--prayu-glass-shadow); font-size:14px; } .v2-app-preview > header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; padding:8px 0; background:inherit; } .v2-app-preview h2 { font-size:19px; margin:0; } .v2-app-preview h3 { font-size:16px; margin:0 0 12px; } -.v2-preview-services { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--v2-border, #d7dbe0); } -.v2-preview-identity { line-height:1.7; overflow-wrap:anywhere; color:var(--v2-muted, #666c73); } +.v2-preview-services { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--v2-border); } +.v2-preview-identity { line-height:1.7; overflow-wrap:anywhere; color:var(--v2-muted); } .v2-preview-identity > summary { cursor:pointer; } .v2-app-preview summary:focus-visible { outline:2px solid var(--v2-accent); outline-offset:3px; } .v2-preview-service-list { list-style:none; margin:12px 0; padding:0; display:grid; gap:8px; } .v2-preview-service-list button { width:100%; align-items:flex-start; flex-direction:column; text-align:left; overflow-wrap:anywhere; } -.v2-preview-service-list button[aria-pressed="true"], .v2-preview-candidates button[aria-pressed="true"] { border-color:var(--v2-accent, #78a8f8); background:var(--v2-accent-soft, #78a8f815); } -.v2-preview-service-detail { margin-top:12px; padding:14px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; } +.v2-preview-service-list button[aria-pressed="true"], .v2-preview-candidates button[aria-pressed="true"] { border-color:var(--v2-accent); background:color-mix(in srgb, var(--v2-accent) 10%, var(--v2-control)); } +.v2-preview-service-detail { margin-top:12px; padding:14px; border:1px solid var(--v2-border); border-radius:8px; } .v2-preview-output { margin-top:12px; } .v2-preview-output summary { cursor:pointer; } .v2-preview-output pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; line-height:1.6; font-family:var(--prayu-font-mono, monospace); } -.v2-preview-output pre strong { color:var(--v2-muted, #666c73); } +.v2-preview-output pre strong { color:var(--v2-muted); } .v2-preview-candidates { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; } .v2-preview-candidates > p { width:100%; margin:0; line-height:1.6; } .v2-preview-candidates code { overflow-wrap:anywhere; } -.v2-app-preview button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; background:var(--prayu-panel-strong, #fff); color:inherit; font:inherit; cursor:pointer; } +.v2-app-preview button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border:1px solid var(--v2-border); border-radius:8px; background:var(--prayu-panel-strong); color:inherit; font:inherit; cursor:pointer; } .v2-app-preview button:disabled { opacity:.5; cursor:default; } +.v2-app-preview button:hover:not(:disabled) { background:var(--v2-control-hover); color:var(--v2-ink); } .v2-preview-address { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; } .v2-preview-address label { display:flex; gap:6px; flex-direction:column; font-size:13px; } .v2-preview-address label:first-child { flex:1; min-width:220px; } -.v2-app-preview input, .v2-app-preview select { box-sizing:border-box; min-height:36px; padding:7px 9px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; background:var(--prayu-panel-strong, #fff); color:inherit; font:inherit; min-width:0; } -.v2-preview-help { display:flex; gap:10px; flex-wrap:wrap; align-items:center; line-height:1.6; color:var(--v2-muted, #666c73); } +.v2-app-preview input, .v2-app-preview select { box-sizing:border-box; min-height:36px; padding:7px 9px; border:1px solid var(--v2-border); border-radius:8px; background:var(--prayu-panel-strong); color:inherit; font:inherit; min-width:0; } +.v2-preview-help { display:flex; gap:10px; flex-wrap:wrap; align-items:center; line-height:1.6; color:var(--v2-muted); } .v2-preview-status { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:12px 0; overflow-wrap:anywhere; } .v2-preview-page > p { display:flex; align-items:center; justify-content:space-between; gap:12px; } -.v2-preview-page small { color:var(--v2-muted, #666c73); } -.v2-preview-capture { width:100%; height:auto; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; background:#fff; } -.v2-preview-page details { margin-top:14px; padding:12px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; } +.v2-preview-page small { color:var(--v2-muted); } +.v2-preview-capture { width:100%; height:auto; border:1px solid var(--v2-border); border-radius:8px; background:var(--prayu-primary-bg); } +.v2-preview-page details { margin-top:14px; padding:12px; border:1px solid var(--v2-border); border-radius:8px; } .v2-preview-page pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.6; } -.v2-preview-element { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--v2-border, #d7dbe0); } +.v2-preview-element { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--v2-border); } .v2-preview-element > span { flex:1; min-width:70px; overflow-wrap:anywhere; } .v2-preview-element input { width:45%; } @media (max-width:600px) { .v2-app-preview { width:100vw; padding:14px; } .v2-preview-element { flex-wrap:wrap; } } diff --git a/web/src/v2/components/file-input.css b/web/src/v2/components/file-input.css index 316d5c0d..43720f53 100644 --- a/web/src/v2/components/file-input.css +++ b/web/src/v2/components/file-input.css @@ -1,5 +1,5 @@ .v2-file-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; min-width: 0; } -.v2-file-attachment { box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 10px 12px; max-width: 100%; min-width: 0; width: 350px; border: 1px solid var(--v2-border, #d8dce2); border-radius: 12px; background: var(--v2-control); color: inherit; } +.v2-file-attachment { box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 10px 12px; max-width: 100%; min-width: 0; width: 350px; border: 1px solid var(--v2-border); border-radius: 12px; background: var(--v2-control); color: inherit; } .v2-file-attachment > svg { flex: 0 0 auto; opacity: .7; } .v2-file-attachment-info { flex: 1; min-width: 0; display: grid; gap: 3px; } .v2-file-attachment-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; } @@ -10,6 +10,6 @@ .v2-attachment-pending { padding: 8px 12px; font-size: 13px; } .v2-attachment-pending > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; } .v2-attachment-pending span { min-width: 0; overflow-wrap: anywhere; } -.v2-attachment-pending button { color: inherit; background: transparent; border: 1px solid var(--v2-border, #d8dce2); border-radius: 8px; padding: 4px 8px; cursor: pointer; font: inherit; } +.v2-attachment-pending button { color: inherit; background: transparent; border: 1px solid var(--v2-border); border-radius: 8px; padding: 4px 8px; cursor: pointer; font: inherit; } .v2-attachment-pending button:disabled { cursor: default; opacity: .5; } @media (max-width: 520px) { .v2-file-attachments { padding: 10px 10px 0; } .v2-file-attachment { width: 100%; } } diff --git a/web/src/v2/components/image-input.css b/web/src/v2/components/image-input.css index c7840785..d43932db 100644 --- a/web/src/v2/components/image-input.css +++ b/web/src/v2/components/image-input.css @@ -1,31 +1,31 @@ .v2-image-list { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; padding:10px 0; min-width:0; } .v2-image-item { position:relative; flex:0 0 112px; width:112px; min-width:0; font-size:12px; } -.v2-image-thumb { display:grid; place-items:center; box-sizing:border-box; width:112px; height:112px; aspect-ratio:1; padding:0; border:1px solid var(--v2-border, #d6d9dd); border-radius:10px; background:var(--prayu-panel-strong, #fff); overflow:hidden; cursor:zoom-in; color:inherit; } +.v2-image-thumb { display:grid; place-items:center; box-sizing:border-box; width:112px; height:112px; aspect-ratio:1; padding:0; border:1px solid var(--v2-border); border-radius:10px; background:var(--prayu-panel-strong); overflow:hidden; cursor:zoom-in; color:inherit; } .v2-image-thumb img { display:block; width:100%; height:100%; object-fit:cover; } .v2-image-thumb:disabled { cursor:default; } .v2-image-caption { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.5; } -.v2-image-remove { position:absolute; right:-5px; top:-5px; display:grid; place-items:center; width:24px; height:24px; border:1px solid #c4c8ce; border-radius:50%; background:var(--prayu-panel-strong, #fff); color:inherit; } +.v2-image-remove { position:absolute; right:-5px; top:-5px; display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--v2-border-strong); border-radius:50%; background:var(--prayu-surface-solid); color:inherit; } .v2-image-remove:disabled { opacity:.45; } .v2-image-retry { font-size:12px; background:transparent; color:inherit; border:0; text-decoration:underline; } -.v2-image-overlay { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px; background:#000b; } -.v2-image-dialog { display:grid; grid-template-rows:auto minmax(0, 1fr) auto; width:min(1440px, 100%); height:min(960px, calc(100dvh - 48px)); min-width:0; border:1px solid var(--v2-border, #d6d9dd); border-radius:12px; background:var(--prayu-panel-strong, #fff); background:rgb(from var(--prayu-panel-strong) r g b / 1); overflow:hidden; color:var(--v2-ink); box-shadow:0 20px 80px #0005; } -.v2-image-viewer-header { display:flex; gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--v2-border, #d6d9dd); } +.v2-image-overlay { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px; background:color-mix(in srgb, var(--prayu-primary-fg) 74%, transparent); } +.v2-image-dialog { display:grid; grid-template-rows:auto minmax(0, 1fr) auto; width:min(1440px, 100%); height:min(960px, calc(100dvh - 48px)); min-width:0; border:1px solid var(--v2-border); border-radius:12px; background:var(--prayu-surface-solid); overflow:hidden; color:var(--v2-ink); box-shadow:0 20px 80px var(--prayu-glass-shadow); } +.v2-image-viewer-header { display:flex; gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--v2-border); } .v2-image-viewer-header > div { flex:1; min-width:0; } .v2-image-viewer-header strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; } -.v2-image-viewer-header small { display:block; margin-top:3px; font-size:12px; color:var(--v2-muted, #686e75); } +.v2-image-viewer-header small { display:block; margin-top:3px; font-size:12px; color:var(--v2-muted); } .v2-image-viewer-header button, .v2-image-viewer-header a, .v2-image-viewer-toolbar button { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:6px; min-width:36px; min-height:36px; padding:6px 8px; border:1px solid transparent; border-radius:7px; background:transparent; color:inherit; text-decoration:none; cursor:pointer; font:inherit; } -.v2-image-viewer-header button:hover, .v2-image-viewer-header a:hover, .v2-image-viewer-toolbar button:hover { background:var(--prayu-panel-soft, #8882); } -.v2-image-viewer-stage { min-width:0; min-height:0; overflow:auto; background:#7771; } +.v2-image-viewer-header button:hover, .v2-image-viewer-header a:hover, .v2-image-viewer-toolbar button:hover { background:var(--prayu-control-hover); } +.v2-image-viewer-stage { min-width:0; min-height:0; overflow:auto; background:var(--v2-control); } .v2-image-viewer-canvas { display:grid; place-items:center; box-sizing:border-box; min-width:100%; min-height:100%; width:max-content; height:max-content; padding:24px; } .v2-image-viewer-canvas img { display:block; max-width:none; max-height:none; object-fit:contain; user-select:none; } -.v2-image-viewer-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-top:1px solid var(--v2-border, #d6d9dd); font-size:13px; } +.v2-image-viewer-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-top:1px solid var(--v2-border); font-size:13px; } .v2-image-viewer-toolbar output { min-width:52px; text-align:center; font-variant-numeric:tabular-nums; } -.v2-image-viewer-toolbar > span { width:1px; height:20px; margin:0 4px; background:var(--v2-border, #d6d9dd); } -.v2-image-viewer-toolbar button[aria-pressed="true"] { border-color:var(--v2-border, #d6d9dd); background:var(--prayu-panel-soft, #8882); } +.v2-image-viewer-toolbar > span { width:1px; height:20px; margin:0 4px; background:var(--v2-border); } +.v2-image-viewer-toolbar button[aria-pressed="true"] { border-color:var(--v2-border); background:var(--prayu-control-hover); } .v2-image-viewer-toolbar button:disabled { opacity:.4; cursor:default; } .v2-image-viewer-header button:disabled { opacity:.4; cursor:wait; } .v2-image-viewer-notice { flex-basis:100%; margin:3px 0; text-align:center; font-size:12px; line-height:1.5; overflow-wrap:anywhere; } -.v2-image-dialog :focus-visible, .v2-image-thumb:focus-visible, .v2-image-remove:focus-visible { outline:2px solid var(--v2-accent, #376ac8); outline-offset:2px; } +.v2-image-dialog :focus-visible, .v2-image-thumb:focus-visible, .v2-image-remove:focus-visible { outline:2px solid var(--v2-accent); outline-offset:2px; } .v2-composer-surface > .v2-image-list { padding:12px 18px 0; } @media (max-width:600px) { .v2-image-overlay { padding:8px; } diff --git a/web/src/v2/components/inspector.css b/web/src/v2/components/inspector.css index 23ba4d59..7a6787e4 100644 --- a/web/src/v2/components/inspector.css +++ b/web/src/v2/components/inspector.css @@ -30,7 +30,7 @@ .v2-inspector-row-preview { color: var(--v2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .v2-inspector-row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--v2-muted); font-size: 12px; } .v2-inspector-detail { flex: 0 0 44%; min-width: 0; border-left: 1px solid var(--v2-border); background: var(--v2-main-surface); overflow-y: auto; overscroll-behavior: contain; } -.v2-inspector-detail > header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--v2-border); background: var(--prayu-panel-strong, #fff); z-index: 1; } +.v2-inspector-detail > header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--v2-border); background: var(--prayu-surface-solid); z-index: 1; } .v2-inspector-detail-content { padding: 14px; overflow-wrap: anywhere; } .v2-inspector-detail-content h3 { font-size: 14px; margin: 0 0 8px; } .v2-inspector-record-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; } @@ -53,7 +53,7 @@ [data-prayu-density="compact"] .v2-inspector-content .thread-transcript-virtual-row { padding-block: 1px; } [data-prayu-density="compact"] .v2-record-list > li > button { padding-block: 8px; } @media (max-width: 900px) { - .v2-inspector-detail { position: absolute; inset: 0; border-left: 0; background: var(--prayu-panel-strong, #fff); z-index: 2; } + .v2-inspector-detail { position: absolute; inset: 0; border-left: 0; background: var(--prayu-surface-solid); z-index: 2; } .v2-inspector-content.has-selection .v2-inspector-records { visibility: hidden; } } @media (max-width: 520px) { diff --git a/web/src/v2/components/model-provider-presets.tsx b/web/src/v2/components/model-provider-presets.tsx index e41e3de4..c47f87c2 100644 --- a/web/src/v2/components/model-provider-presets.tsx +++ b/web/src/v2/components/model-provider-presets.tsx @@ -45,7 +45,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "Claude", modelName: "claude-sonnet-5", icon: icons.anthropic, - accent: "#806d61", kind: "api_key", draft: { id: "official-anthropic", @@ -66,7 +65,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "OpenAI", modelName: "gpt-6.1-sol", icon: icons.openai, - accent: "#536f6b", kind: "api_key", draft: { id: "official-openai", @@ -87,7 +85,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "DeepSeek", modelName: "deepseek-v4-flash", icon: icons.deepseek, - accent: "#4d6eaf", kind: "api_key", draft: { id: "official-deepseek", @@ -108,7 +105,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "Gemini", modelName: "gemini-3.7-flash", icon: icons.gemini, - accent: "#536ea5", kind: "api_key", draft: { id: "official-google-gemini", @@ -129,7 +125,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "Grok", modelName: "grok-4.6", icon: , - accent: "#4e555d", kind: "api_key", draft: { id: "official-xai", @@ -150,7 +145,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "MiniMax", modelName: "MiniMax-M3", icon: icons.minimax, - accent: "#755f9b", kind: "api_key", draft: { id: "official-minimax", @@ -171,7 +165,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "MiMo", modelName: "mimo-v2.5-pro", icon: icons.xiaomi, - accent: "#b7683d", kind: "api_key", draft: { id: "official-mimo", @@ -192,7 +185,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "Kimi", modelName: "kimi-k3", icon: icons.kimi, - accent: "#536882", kind: "api_key", draft: { id: "official-kimi", @@ -213,7 +205,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "Kimi for Coding", modelName: "kimi-for-coding", icon: icons.kimi, - accent: "#6c5d8f", kind: "api_key", draft: { id: "official-kimi-coding", @@ -234,7 +225,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "OpenCode Go", modelName: "gpt-5.6-luna", icon: icons.opencode, - accent: "#57646b", kind: "api_key", draft: { id: "opencode-go", @@ -255,7 +245,6 @@ export const v2ModelProviderPresets: readonly V2ConfiguredModelProviderPreset[] providerName: "GitHub Copilot", modelName: "账户接入", icon: icons.copilot, - accent: "#4d5868", kind: "account", setup: { kind: "account", connected: false, accountName: "GitHub 账户" }, }, diff --git a/web/src/v2/components/model-settings.test.tsx b/web/src/v2/components/model-settings.test.tsx index 26d2b3e1..966e69d3 100644 --- a/web/src/v2/components/model-settings.test.tsx +++ b/web/src/v2/components/model-settings.test.tsx @@ -18,7 +18,6 @@ const presets: V2ModelProviderPreset[] = [ providerName: "OpenAI", modelName: "GPT-5", icon: , - accent: "#506b77", }, { id: "anthropic", @@ -97,8 +96,7 @@ describe("V2 model settings", () => { const openAIButton = screen.getByRole("button", { name: /OpenAI，GPT-5/u }); const icon = within(openAIButton).getByTestId("openai-mark"); expect(icon.closest(".v2-model-card-icon")).toHaveAttribute("aria-hidden", "true"); - expect(modelStyles).toContain("backdrop-filter: blur(18px) saturate(145%)"); - expect(modelStyles).toContain("color: #fff"); + expect(modelStyles).toContain("backdrop-filter: blur(18px)"); expect(modelStyles).toContain("prefers-reduced-transparency: reduce"); expect(modelStyles).toContain("background: var(--v2-control)"); }); diff --git a/web/src/v2/components/model-settings.tsx b/web/src/v2/components/model-settings.tsx index 2737660a..6160201c 100644 --- a/web/src/v2/components/model-settings.tsx +++ b/web/src/v2/components/model-settings.tsx @@ -15,8 +15,6 @@ export type V2ModelProviderPreset = { setup?: | { kind: "api_key"; configured: boolean } | { kind: "account"; connected: boolean; accountName?: string }; - /** Static palette hint. CSP-safe product CSS maps the preset ID to the actual icon-well tint. */ - accent?: string; }; export type V2ModelSettingsProps = { diff --git a/web/src/v2/components/queued-messages.css b/web/src/v2/components/queued-messages.css index 95506afc..79741e87 100644 --- a/web/src/v2/components/queued-messages.css +++ b/web/src/v2/components/queued-messages.css @@ -5,10 +5,10 @@ width: 100%; max-width: var(--v2-composer-width, 738px); min-width: 0; - border: 1px solid color-mix(in srgb, var(--v2-border-strong) 66%, rgb(255 255 255 / 38%)); + border: 1px solid var(--v2-border-strong); border-radius: 22px; - backdrop-filter: blur(32px) saturate(170%); - background: color-mix(in srgb, var(--v2-floating-surface) 92%, transparent); + backdrop-filter: blur(32px) saturate(100%); + background: var(--prayu-glass-fill-strong); color: var(--v2-ink); font-size: 13px; line-height: 1.5; @@ -50,8 +50,8 @@ .v2-queue-thumbnail .v2-image-caption { display: none; } .v2-queue-thumbnail .v2-image-retry { position: absolute; inset: 0; font-size: 0; padding: 0; background: var(--v2-control); } .v2-queue-thumbnail .v2-image-retry::after { content: "↻"; font-size: 16px; } -.v2-queue-details-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgb(18 23 30 / 42%); } -.v2-queue-details-dialog { box-sizing: border-box; display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(720px, calc(100dvh - 48px)); min-width: 0; border: 1px solid var(--v2-border-strong); border-radius: 20px; background: var(--prayu-panel-strong, #fff); background: rgb(from var(--prayu-panel-strong, #fff) r g b / 1); color: var(--v2-ink); box-shadow: 0 20px 70px #0004; font: 13px/1.6 var(--prayu-font-ui, system-ui); overflow: hidden; } +.v2-queue-details-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--prayu-primary-fg) 42%, transparent); } +.v2-queue-details-dialog { box-sizing: border-box; display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(720px, calc(100dvh - 48px)); min-width: 0; border: 1px solid var(--v2-border-strong); border-radius: 20px; background: var(--prayu-surface-solid); color: var(--v2-ink); box-shadow: 0 20px 70px var(--prayu-glass-shadow); font: 13px/1.6 var(--prayu-font-ui, system-ui); overflow: hidden; } .v2-queue-details-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--v2-border); flex-shrink: 0; } .v2-queue-details-dialog h2 { margin: 0; font-size: 14px; font-weight: 600; } .v2-queue-details-dialog header small { color: var(--v2-muted); font-size: 11px; } @@ -66,7 +66,7 @@ .v2-promoted-message-history > summary:hover { background: var(--v2-control-hover); } .v2-promoted-message-history > summary:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; } .v2-promoted-message-content { margin-top: 6px; padding: 8px 11px; border: 1px solid var(--v2-border); border-radius: 12px; color: var(--v2-ink); background: var(--v2-control); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } -.v2-queue-menu { position: fixed; z-index: 100; width: 196px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--v2-border-strong); border-radius: 13px; background: var(--prayu-panel-strong, #fff); background: rgb(from var(--prayu-panel-strong, #fff) r g b / 1); color: var(--v2-ink); font: 13px/1.5 var(--prayu-font-ui, system-ui); box-shadow: 0 8px 28px #0002; } +.v2-queue-menu { position: fixed; z-index: 100; width: 196px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--v2-border-strong); border-radius: 13px; background: var(--prayu-surface-solid); color: var(--v2-ink); font: 13px/1.5 var(--prayu-font-ui, system-ui); box-shadow: 0 8px 28px var(--prayu-glass-shadow); } .v2-queue-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 9px; text-align: left; } .v2-queue-menu svg { flex-shrink: 0; } .v2-queue-editor, .v2-queued-message-pending { margin-top: 6px; padding: 10px 6px 6px; border-top: 1px solid var(--v2-border); overflow-wrap: anywhere; } @@ -83,7 +83,7 @@ .v2-queue-details-dialog > header, .v2-queue-details-body { padding-inline: 12px; } } @media (prefers-reduced-transparency: reduce) { - .v2-queued-messages { backdrop-filter: none; background: var(--prayu-panel-strong, #fff); } + .v2-queued-messages { backdrop-filter: none; background: var(--prayu-surface-solid); } } @media (forced-colors: active) { .v2-queued-messages, .v2-queue-details-dialog { background: Canvas; border-color: CanvasText; color: CanvasText; } diff --git a/web/src/v2/components/settings.css b/web/src/v2/components/settings.css index 3501e328..a85f7747 100644 --- a/web/src/v2/components/settings.css +++ b/web/src/v2/components/settings.css @@ -13,10 +13,10 @@ .v2-execution-help p { color: var(--prayu-muted); line-height: 1.6; margin: 10px 0 0; } .v2-execution-settings .permission-option-grid > button > span { min-width: 0; overflow-wrap: anywhere; } .v2-settings-card { - background: color-mix(in srgb, var(--v2-floating-surface) 74%, transparent); + background: var(--prayu-glass-fill-strong); border: 1px solid var(--v2-border); border-radius: 16px; - box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); + box-shadow: inset 0 1px 0 var(--prayu-glass-highlight); overflow: hidden; } .v2-setting-row { @@ -42,6 +42,7 @@ background: color-mix(in srgb, var(--v2-control) 78%, transparent); border: 1px solid color-mix(in srgb, var(--v2-border) 62%, transparent); border-radius: 10px; + color: var(--v2-ink); display: inline-flex; gap: 6px; height: 28px; @@ -52,12 +53,13 @@ .v2-setting-value button:hover, .v2-setting-value .v2-setting-link:hover, .v2-settings-placeholder button:hover, -.v2-archive-list button:hover { background: var(--v2-control-hover); } -.v2-switch { background: #5b9df5; border-radius: 999px; display: inline-flex; height: 20px; padding: 2px; width: 32px; } -.v2-switch i { background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / 18%); height: 16px; margin-left: auto; width: 16px; } -.v2-setting-value .v2-switch { background: #5b9df5; height: 20px; padding: 2px; width: 32px; } +.v2-archive-list button:hover { background: var(--v2-control-hover); color: var(--v2-ink); } +.v2-switch { background: var(--prayu-primary-bg); border-radius: 999px; display: inline-flex; height: 20px; padding: 2px; width: 32px; } +.v2-switch i { background: var(--prayu-primary-fg); border-radius: 50%; box-shadow: 0 1px 3px var(--prayu-primary-shadow); height: 16px; margin-left: auto; width: 16px; } +.v2-setting-value .v2-switch { background: var(--prayu-primary-bg); height: 20px; padding: 2px; width: 32px; } .v2-switch-button { border: 0; cursor: pointer; flex: 0 0 auto; } -.v2-switch-button.is-muted { background: #9ec3fb; } +.v2-setting-value .v2-switch-button.is-muted { background: var(--v2-control-hover); box-shadow: inset 0 0 0 1px var(--v2-border-strong); } +.v2-switch-button.is-muted i { background: var(--v2-muted); margin-left: 0; } .v2-provider-heading, .v2-provider-editor-heading { @@ -81,6 +83,7 @@ background: color-mix(in srgb, var(--v2-control) 82%, transparent); border: 1px solid color-mix(in srgb, var(--v2-border) 74%, transparent); border-radius: 10px; + color: var(--v2-ink); display: inline-flex; flex: 0 0 auto; gap: 7px; @@ -89,15 +92,15 @@ padding: 0 12px; } .v2-provider-heading > button.primary, -.v2-provider-actions button.primary { background: #1c1d20; border-color: transparent; color: #fff; } +.v2-provider-actions button.primary { background: var(--prayu-primary-bg); border-color: var(--prayu-primary-border); color: var(--prayu-primary-fg); box-shadow: 0 2px 8px var(--prayu-primary-shadow); } .v2-provider-heading > button:hover:not(:disabled), .v2-provider-editor-heading > button:hover:not(:disabled), .v2-provider-empty button:hover:not(:disabled), .v2-provider-fields header > button:hover:not(:disabled), .v2-provider-credential-row > button:hover:not(:disabled), -.v2-provider-actions button:hover:not(:disabled) { background: var(--v2-control-hover); } +.v2-provider-actions button:hover:not(:disabled) { background: var(--v2-control-hover); color: var(--v2-ink); } .v2-provider-heading > button.primary:hover:not(:disabled), -.v2-provider-actions button.primary:hover:not(:disabled) { background: #303238; } +.v2-provider-actions button.primary:hover:not(:disabled) { background: var(--prayu-primary-hover); color: var(--prayu-primary-fg); } .v2-provider-editor-heading > button { height: 34px; padding: 0; width: 34px; } .v2-provider-editor-heading { justify-content: flex-start; } .v2-provider-editor-heading > div { min-width: 0; } @@ -105,10 +108,10 @@ .v2-provider-editor-heading button:active:not(:disabled), .v2-provider-actions button:active:not(:disabled) { transform: scale(.97); transition: transform 90ms ease-out; } .v2-provider-list { - background: color-mix(in srgb, var(--v2-floating-surface) 74%, transparent); + background: var(--prayu-glass-fill-strong); border: 1px solid var(--v2-border); border-radius: 16px; - box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); + box-shadow: inset 0 1px 0 var(--prayu-glass-highlight); display: grid; overflow: hidden; } @@ -135,7 +138,7 @@ .v2-provider-tags i, .v2-provider-status { background: var(--v2-control); border: 1px solid color-mix(in srgb, var(--v2-border) 70%, transparent); border-radius: 999px; color: var(--v2-muted); font-size: 11px; font-style: normal; padding: 4px 8px; white-space: nowrap; } .v2-provider-tags i.is-ready, -.v2-provider-status.is-ready { background: color-mix(in srgb, #34a853 10%, var(--v2-control)); color: color-mix(in srgb, #187a37 86%, var(--v2-ink)); } +.v2-provider-status.is-ready { background: var(--v2-control); color: var(--prayu-success); } .v2-provider-empty { align-items: center; color: var(--v2-muted); display: flex; flex-direction: column; gap: 9px; min-height: 190px; justify-content: center; padding: 30px; text-align: center; } .v2-provider-empty strong { color: var(--v2-ink); } .v2-provider-empty p { line-height: 1.5; margin: 0; max-width: 480px; } @@ -190,7 +193,7 @@ .v2-provider-grid select:focus, .v2-provider-grid textarea:focus, .v2-provider-credential-row input:focus, -.v2-provider-json textarea:focus { background: var(--v2-floating-surface); border-color: color-mix(in srgb, var(--v2-blue) 58%, var(--v2-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-blue) 13%, transparent); } +.v2-provider-json textarea:focus { background: var(--v2-floating-surface); border-color: color-mix(in srgb, var(--v2-accent) 58%, var(--v2-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-accent) 13%, transparent); } .v2-provider-grid input:disabled, .v2-provider-grid select:disabled, .v2-provider-credential-row input:disabled { cursor: default; opacity: .56; } @@ -198,12 +201,12 @@ .v2-provider-enabled { align-items: center; cursor: pointer; display: inline-flex; flex: 0 0 auto; gap: 7px; } .v2-provider-enabled > input { height: 1px; opacity: 0; position: absolute; width: 1px; } .v2-provider-enabled > span { background: color-mix(in srgb, var(--v2-muted) 38%, transparent); border-radius: 999px; display: flex; height: 22px; padding: 2px; width: 36px; } -.v2-provider-enabled > span i { background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / 18%); height: 18px; transition: transform 150ms ease-out; width: 18px; } -.v2-provider-enabled > input:checked + span { background: var(--v2-blue); } -.v2-provider-enabled > input:checked + span i { transform: translateX(14px); } -.v2-provider-enabled > input:focus-visible + span { outline: 2px solid var(--prayu-focus, #4b8ef7); outline-offset: 2px; } +.v2-provider-enabled > span i { background: var(--prayu-primary-bg); border-radius: 50%; box-shadow: 0 1px 3px var(--prayu-primary-shadow); height: 18px; transition: transform 150ms ease-out; width: 18px; } +.v2-provider-enabled > input:checked + span { background: var(--prayu-primary-bg); box-shadow: inset 0 0 0 1px var(--prayu-primary-border); } +.v2-provider-enabled > input:checked + span i { background: var(--prayu-primary-fg); transform: translateX(14px); } +.v2-provider-enabled > input:focus-visible + span { outline: 2px solid var(--prayu-focus); outline-offset: 2px; } .v2-provider-check { align-items: flex-start; cursor: pointer; display: flex !important; flex-direction: row; gap: 10px !important; } -.v2-provider-check input { accent-color: var(--v2-blue); flex: 0 0 auto; height: 17px !important; margin-top: 1px; width: 17px !important; } +.v2-provider-check input { accent-color: var(--v2-accent); flex: 0 0 auto; height: 17px !important; margin-top: 1px; width: 17px !important; } .v2-provider-check span { display: grid; gap: 3px; } .v2-provider-check small { color: var(--v2-muted); font-weight: 400; line-height: 1.45; } .v2-provider-sync { margin: 4px 16px 12px; } @@ -221,12 +224,12 @@ margin: 0; padding: 14px 16px 16px; } -.v2-provider-harness-progress svg { color: var(--v2-blue); flex: 0 0 auto; } +.v2-provider-harness-progress svg { color: var(--v2-accent); flex: 0 0 auto; } .v2-provider-harness-result { background: color-mix(in srgb, var(--v2-control) 72%, transparent); border: 1px solid color-mix(in srgb, var(--v2-border) 82%, transparent); border-radius: 12px; - box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%); + box-shadow: inset 0 1px 0 var(--prayu-glass-highlight); margin: 14px 16px; overflow: hidden; } @@ -246,8 +249,8 @@ padding: 3px 8px; } .v2-provider-harness-result > div > span.is-ready { - background: color-mix(in srgb, #34a853 11%, var(--v2-control)); - color: color-mix(in srgb, #187a37 86%, var(--v2-ink)); + background: var(--v2-control); + color: var(--prayu-success); } .v2-provider-harness-result > div > span.is-error { background: color-mix(in srgb, var(--v2-danger) 10%, var(--v2-control)); @@ -274,11 +277,11 @@ .v2-provider-json textarea { font: 12px/1.55 var(--prayu-font-mono); min-height: 230px; padding: 12px; resize: vertical; tab-size: 2; } .v2-provider-notice, .v2-provider-error { align-items: center; border-radius: 10px; display: flex; gap: 8px; line-height: 1.45; margin: 0; padding: 10px 12px; } -.v2-provider-notice { background: color-mix(in srgb, #34a853 8%, var(--v2-control)); color: color-mix(in srgb, #187a37 86%, var(--v2-ink)); margin-bottom: 15px; } +.v2-provider-notice { background: var(--v2-control); color: var(--prayu-success); margin-bottom: 15px; } .v2-provider-error { background: color-mix(in srgb, var(--v2-danger) 7%, var(--v2-control)); } .v2-provider-actions { align-items: center; - background: color-mix(in srgb, var(--v2-main-surface) 92%, transparent); + background: var(--prayu-glass-fill-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--v2-border); @@ -292,6 +295,7 @@ } .v2-provider-actions > span { flex: 1 1 auto; } .v2-provider-actions button.danger-quiet { color: var(--v2-danger); } +.v2-provider-actions button.danger-quiet:hover:not(:disabled) { color: var(--v2-danger); } .v2-provider-actions button:disabled, .v2-provider-heading button:disabled { cursor: default; opacity: .52; } @@ -308,13 +312,13 @@ .v2-theme-options > button { background: transparent; border: 1px solid transparent; border-radius: 12px; display: grid; gap: 8px; padding: 8px; text-align: left; } .v2-theme-options > button:hover { background: var(--v2-control); } .v2-theme-options > button[aria-pressed="true"] { background: color-mix(in srgb, var(--v2-accent) 8%, var(--v2-control)); border-color: color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)); } -.v2-theme-preview { border: 1px solid rgb(80 85 92 / 22%); border-radius: 8px; display: grid; grid-template-columns: 32% 1fr; height: 72px; overflow: hidden; width: 100%; } -.v2-theme-preview i:first-child { background: #e8f4f5; } -.v2-theme-preview i:last-child { background: #fff; } -.v2-theme-preview.theme-dark i:first-child { background: #181b20; } -.v2-theme-preview.theme-dark i:last-child { background: #24272d; } -.v2-theme-preview.theme-glass { background: linear-gradient(130deg, #77cde1, #e8b4d6 48%, #e8d59d); padding: 7px; } -.v2-theme-preview.theme-glass i { backdrop-filter: blur(8px); background: rgb(255 255 255 / 35%); } +.v2-theme-preview { border: 1px solid var(--v2-border-strong); border-radius: 8px; display: grid; grid-template-columns: 32% 1fr; height: 72px; overflow: hidden; width: 100%; } +.v2-theme-preview i:first-child { background: color-mix(in srgb, var(--prayu-primary-fg) 7%, var(--prayu-primary-bg)); } +.v2-theme-preview i:last-child { background: var(--prayu-primary-bg); } +.v2-theme-preview.theme-dark i:first-child { background: var(--prayu-primary-fg); } +.v2-theme-preview.theme-dark i:last-child { background: color-mix(in srgb, var(--prayu-primary-fg) 94%, var(--prayu-primary-bg)); } +.v2-theme-preview.theme-glass { background: linear-gradient(130deg, color-mix(in srgb, var(--prayu-primary-fg) 12%, var(--prayu-primary-bg)), var(--prayu-primary-bg) 48%, color-mix(in srgb, var(--prayu-primary-fg) 7%, var(--prayu-primary-bg))); padding: 7px; } +.v2-theme-preview.theme-glass i { backdrop-filter: blur(8px); background: color-mix(in srgb, var(--prayu-primary-bg) 96%, transparent); } .v2-appearance-card > p { border-top: 1px solid var(--v2-border); color: var(--v2-muted); margin: 0; padding: 13px 15px; } .v2-settings-placeholder { align-items: center; display: flex; flex-direction: column; padding: 42px 24px; text-align: center; } @@ -323,7 +327,7 @@ .v2-archive-search { align-items: center; background: var(--v2-control); border: 1px solid var(--v2-border); border-radius: 11px; color: var(--v2-muted); display: flex; gap: 8px; height: 36px; margin-bottom: 17px; padding: 0 11px; } .v2-archive-search:focus-within { background: var(--v2-floating-surface); border-color: var(--v2-border-strong); } .v2-archive-search input { background: transparent; border: 0; outline: 0; width: 100%; } -.v2-archive-list { background: color-mix(in srgb, var(--v2-floating-surface) 74%, transparent); border: 1px solid var(--v2-border); border-radius: 14px; overflow: hidden; } +.v2-archive-list { background: var(--prayu-glass-fill-strong); border: 1px solid var(--v2-border); border-radius: 14px; overflow: hidden; } .v2-archive-list article { align-items: center; display: flex; gap: 7px; min-height: 63px; padding: 9px 12px 9px 15px; position: relative; } .v2-archive-list article + article::before { background: var(--v2-border); content: ""; height: 1px; left: 15px; position: absolute; right: 15px; top: 0; } .v2-archive-list article > div { display: grid; flex: 1; gap: 3px; min-width: 0; } @@ -370,7 +374,7 @@ @media (prefers-reduced-transparency: reduce) { .v2-provider-list, -.v2-provider-fields { backdrop-filter: none; background: var(--prayu-panel-strong, #fff); } +.v2-provider-fields { backdrop-filter: none; background: var(--prayu-panel-strong); } .v2-provider-harness-result { background: var(--v2-control); } } @@ -426,15 +430,14 @@ } .v2-model-catalog > li { min-width: 0; } .v2-model-card { - --v2-model-accent: #7087a7; -webkit-appearance: none; align-items: stretch; appearance: none; - background: color-mix(in srgb, var(--v2-floating-surface) 72%, transparent); + background: var(--prayu-glass-fill-strong); background-clip: padding-box; border: 1px solid color-mix(in srgb, var(--v2-border) 82%, transparent); border-radius: 16px; - box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%), 0 8px 24px rgb(15 23 42 / 5%); + box-shadow: inset 0 1px 0 var(--prayu-glass-highlight), 0 8px 24px color-mix(in srgb, var(--prayu-glass-shadow) 35%, transparent); color: var(--v2-ink); display: grid; grid-template-columns: 72px minmax(0, 1fr); @@ -446,51 +449,36 @@ box-shadow 140ms ease-out, transform 100ms ease-out; width: 100%; } -.v2-model-card.is-custom { --v2-model-accent: #66788f; } -.v2-model-card[data-model-provider-id="official-anthropic"] { --v2-model-accent: #806d61; } -.v2-model-card[data-model-provider-id="official-openai"] { --v2-model-accent: #536f6b; } -.v2-model-card[data-model-provider-id="official-deepseek"] { --v2-model-accent: #4d6eaf; } -.v2-model-card[data-model-provider-id="official-google-gemini"] { --v2-model-accent: #536ea5; } -.v2-model-card[data-model-provider-id="official-xai"] { --v2-model-accent: #4e555d; } -.v2-model-card[data-model-provider-id="official-minimax"] { --v2-model-accent: #755f9b; } -.v2-model-card[data-model-provider-id="official-mimo"] { --v2-model-accent: #b7683d; } -.v2-model-card[data-model-provider-id="official-kimi"] { --v2-model-accent: #536882; } -.v2-model-card[data-model-provider-id="official-kimi-coding"] { --v2-model-accent: #6c5d8f; } -.v2-model-card[data-model-provider-id="opencode-go"] { --v2-model-accent: #57646b; } -.v2-model-card[data-model-provider-id="github-copilot"] { --v2-model-accent: #4d5868; } .v2-model-card:hover { - background: color-mix(in srgb, var(--v2-control-hover) 58%, var(--v2-floating-surface)); - border-color: color-mix(in srgb, var(--v2-blue) 22%, var(--v2-border)); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%), 0 10px 28px rgb(15 23 42 / 8%); + background: var(--v2-floating-surface); + border-color: var(--v2-border-strong); + box-shadow: inset 0 1px 0 var(--prayu-glass-highlight), 0 10px 28px color-mix(in srgb, var(--prayu-glass-shadow) 45%, transparent); } .v2-model-card:active { transform: scale(.985); } .v2-model-card:focus-visible { - outline: 2px solid var(--prayu-focus, #4b8ef7); + outline: 2px solid var(--prayu-focus); outline-offset: 3px; } .v2-model-card-icon { align-items: center; - backdrop-filter: blur(18px) saturate(145%); - background: linear-gradient(145deg, - color-mix(in srgb, var(--v2-model-accent) 72%, rgb(255 255 255 / 34%)), - color-mix(in srgb, var(--v2-model-accent) 44%, rgb(23 30 43 / 34%))); - border-right: 1px solid rgb(255 255 255 / 20%); + backdrop-filter: blur(18px); + background: var(--prayu-primary-bg); + border-right: 1px solid var(--prayu-primary-border); border-radius: 15px 0 0 15px; - box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), inset -1px 0 0 rgb(255 255 255 / 10%); - color: #fff; + box-shadow: inset 0 1px 0 var(--prayu-glass-highlight); + color: var(--prayu-primary-fg); display: flex; justify-content: center; min-width: 0; overflow: hidden; } .v2-model-card-icon svg { - color: #fff; - filter: drop-shadow(0 1px 2px rgb(0 0 0 / 18%)); + color: currentColor; height: 25px; width: 25px; } .v2-model-card-icon img { - filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgb(0 0 0 / 18%)); + filter: brightness(0); height: 26px; object-fit: contain; width: 26px; @@ -532,7 +520,7 @@ .v2-model-custom-back:hover { background: var(--v2-control-hover); } .v2-model-custom-back:active { transform: scale(.97); } .v2-model-custom-back:focus-visible { - outline: 2px solid var(--prayu-focus, #4b8ef7); + outline: 2px solid var(--prayu-focus); outline-offset: 2px; } @@ -560,7 +548,7 @@ background: var(--v2-floating-surface); border-color: var(--v2-border); } - .v2-model-card-icon { background: var(--v2-model-accent); } + .v2-model-card-icon { background: var(--prayu-primary-bg); } .v2-model-custom-back { background: var(--v2-control); border-color: var(--v2-border); @@ -577,15 +565,15 @@ .v2-model-card:hover, .v2-model-custom-back:hover { background: var(--v2-control-hover); - border-color: var(--v2-blue); + border-color: var(--v2-accent); box-shadow: none; } .v2-model-card-icon { backdrop-filter: none; - background: var(--v2-ink); + background: var(--prayu-primary-bg); border-right-color: currentColor; box-shadow: none; - color: var(--v2-floating-surface); + color: var(--prayu-primary-fg); } .v2-model-card-icon svg { color: currentColor; @@ -639,7 +627,8 @@ .v2-connection-task > div { min-width: 0; } .v2-connection-task strong { font-size: 16px; overflow-wrap: anywhere; } .v2-connection-task p { color: var(--v2-muted); font-size: 13px; line-height: 1.6; margin: 6px 0 0; } -.v2-connection-task > button { align-items: center; background: var(--v2-accent); border: 1px solid transparent; border-radius: 8px; color: #fff; cursor: pointer; display: inline-flex; flex-shrink: 0; gap: 10px; min-height: 36px; padding: 8px 13px; } +.v2-connection-task > button { align-items: center; background: var(--prayu-primary-bg); border: 1px solid var(--prayu-primary-border); border-radius: 8px; box-shadow: 0 2px 8px var(--prayu-primary-shadow); color: var(--prayu-primary-fg); cursor: pointer; display: inline-flex; flex-shrink: 0; gap: 10px; min-height: 36px; padding: 8px 13px; } +.v2-connection-task > button:hover:not(:disabled) { background: var(--prayu-primary-hover); color: var(--prayu-primary-fg); } .v2-connection-task > button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 3px; } .v2-connection-navigation { display: grid; gap: 10px; } .v2-connection-navigation > section { border-bottom: 1px solid var(--v2-border); display: grid; grid-template-columns: 140px minmax(0, 1fr); padding: 10px 0 20px; } diff --git a/web/src/v2/components/task-configuration.css b/web/src/v2/components/task-configuration.css index 31a2ae88..026ef1c4 100644 --- a/web/src/v2/components/task-configuration.css +++ b/web/src/v2/components/task-configuration.css @@ -2,18 +2,18 @@ .v2-task-configuration header { display:flex; align-items:center; justify-content:space-between; gap:16px; } .v2-task-configuration h2 { margin:0; font-size:18px; } .v2-task-configuration h3 { margin:20px 0 8px; font-size:15px; } -.v2-task-budget-fields { border:1px solid var(--v2-border, #d7dbe0); border-radius:10px; padding:12px; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; } +.v2-task-budget-fields { border:1px solid var(--v2-border); border-radius:10px; padding:12px; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; } .v2-task-budget-fields label { display:flex; flex-direction:column; gap:4px; } -.v2-task-configuration input, .v2-task-configuration button { box-sizing:border-box; font:inherit; color:inherit; border:1px solid var(--v2-border, #d7dbe0); border-radius:7px; background:var(--prayu-panel-strong); padding:7px 10px; min-width:0; } +.v2-task-configuration input, .v2-task-configuration button { box-sizing:border-box; font:inherit; color:inherit; border:1px solid var(--v2-border); border-radius:7px; background:var(--prayu-panel-strong); padding:7px 10px; min-width:0; } .v2-task-configuration button { cursor:pointer; } .v2-task-configuration button:disabled { opacity:.5; cursor:default; } -.v2-task-configuration input:focus-visible, .v2-task-configuration button:focus-visible, .v2-task-configuration summary:focus-visible { outline:2px solid var(--v2-accent, #6b91df); outline-offset:3px; } +.v2-task-configuration input:focus-visible, .v2-task-configuration button:focus-visible, .v2-task-configuration summary:focus-visible { outline:2px solid var(--v2-accent); outline-offset:3px; } .v2-task-configuration-help, .v2-task-configuration small { color:var(--v2-muted); font-size:12px; } .v2-task-configuration dl { margin:8px 0; } -.v2-task-configuration dl > div { display:grid; grid-template-columns:minmax(140px, 1fr) minmax(100px, 2fr); gap:12px; padding:6px 0; border-bottom:1px solid var(--v2-border, #d7dbe0); } +.v2-task-configuration dl > div { display:grid; grid-template-columns:minmax(140px, 1fr) minmax(100px, 2fr); gap:12px; padding:6px 0; border-bottom:1px solid var(--v2-border); } .v2-task-configuration dt { color:var(--v2-muted); } .v2-task-configuration dd { margin:0; } .v2-task-configuration small { display:block; } -.v2-task-configuration [role="alert"] { padding:12px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; } +.v2-task-configuration [role="alert"] { padding:12px; border:1px solid var(--v2-border); border-radius:8px; } .v2-task-configuration summary { cursor:pointer; } .v2-task-configuration code { font-size:11px; } diff --git a/web/src/v2/components/task-delivery.css b/web/src/v2/components/task-delivery.css index 9169dafe..7b554e0d 100644 --- a/web/src/v2/components/task-delivery.css +++ b/web/src/v2/components/task-delivery.css @@ -14,8 +14,9 @@ .v2-task-delivery button:hover:enabled { background: var(--v2-control-hover); } .v2-task-delivery button:active:enabled { background: color-mix(in srgb, var(--v2-accent) 10%, var(--v2-control-hover)); } .v2-task-delivery strong, .v2-task-delivery h2, .v2-task-delivery h3 { font-weight: 600; } -.v2-task-delivery .v2-delivery-primary { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; } -.v2-task-delivery .v2-delivery-primary:hover:enabled { background: color-mix(in srgb, var(--v2-accent) 85%, #000); } +.v2-task-delivery .v2-delivery-primary { background: var(--prayu-primary-bg); border-color: var(--prayu-primary-border); color: var(--prayu-primary-fg); box-shadow: 0 2px 8px var(--prayu-primary-shadow); } +.v2-task-delivery .v2-delivery-primary:hover:enabled, +.v2-task-delivery .v2-delivery-primary:active:enabled { background: var(--prayu-primary-hover); color: var(--prayu-primary-fg); } .v2-task-delivery .v2-delivery-muted { color: var(--v2-muted); font-size: 13px; } .v2-delivery-heading, .v2-delivery-change > header, .v2-delivery-checks article > div, .v2-delivery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .v2-delivery-heading { justify-content: space-between; } @@ -28,8 +29,8 @@ .v2-delivery-checks { display: grid; gap: 10px; } .v2-delivery-checks article { display: grid; gap: 8px; } .v2-delivery-freshness { border-radius: 5px; padding: 1px 6px; background: var(--v2-control-hover); } -.v2-delivery-freshness.current { color: var(--prayu-success, #31845b); } -.v2-delivery-freshness.stale { color: var(--prayu-warning, #a15c00); } +.v2-delivery-freshness.current { color: var(--prayu-success); } +.v2-delivery-freshness.stale { color: var(--prayu-warning); } .v2-delivery-change strong { overflow-wrap: anywhere; } .v2-delivery-change > details { margin-top: 10px; } .v2-task-delivery summary { cursor: pointer; } @@ -39,8 +40,8 @@ .v2-delivery-diff-lines { overflow-x: auto; } .v2-diff-line { display: flex; align-items: stretch; min-width: max-content; font: 13px/1.65 var(--font-mono, monospace); } .v2-diff-line code { white-space: pre; padding-right: 12px; } -.v2-diff-line.add { background: color-mix(in srgb, #348353 12%, transparent); } -.v2-diff-line.remove { background: color-mix(in srgb, #bb4242 12%, transparent); } +.v2-diff-line.add { background: color-mix(in srgb, var(--prayu-diff-add) 12%, transparent); } +.v2-diff-line.remove { background: color-mix(in srgb, var(--prayu-diff-delete) 12%, transparent); } .v2-task-delivery .v2-diff-line-ref { display: inline-grid; grid-template-columns: 36px 36px; flex-shrink: 0; border: 0; border-right: 1px solid var(--v2-border); border-radius: 0; background: transparent; padding: 0 4px; margin-right: 8px; min-height: 24px; font: inherit; color: var(--v2-muted); text-align: right; } .v2-task-delivery label { display: grid; gap: 6px; } .v2-task-delivery input, .v2-task-delivery select, .v2-task-delivery textarea { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; } diff --git a/web/src/v2/components/task-review.css b/web/src/v2/components/task-review.css index 5e492dcb..ece8da99 100644 --- a/web/src/v2/components/task-review.css +++ b/web/src/v2/components/task-review.css @@ -1,5 +1,5 @@ -.v2-review-drawer.v2-inspector-drawer { width: min(1080px, 100vw); color: var(--v2-ink); background: var(--prayu-panel-strong, #fff); min-height: 0; box-sizing: border-box; } +.v2-review-drawer.v2-inspector-drawer { width: min(1080px, 100vw); color: var(--v2-ink); background: var(--prayu-surface-solid); min-height: 0; box-sizing: border-box; } .v2-review-drawer > header { min-height: 68px; flex-shrink: 0; } .v2-review-drawer > header .v2-review-title { display: grid; gap: 3px; } .v2-review-title > strong { font-size: 16px; font-weight: 600; } diff --git a/web/src/v2/components/thread-context.css b/web/src/v2/components/thread-context.css index f5d98f0a..55376285 100644 --- a/web/src/v2/components/thread-context.css +++ b/web/src/v2/components/thread-context.css @@ -1,14 +1,15 @@ -.v2-context-overlay { position:fixed; inset:0; z-index:950; display:flex; justify-content:flex-end; background:#0005; } -.v2-thread-context { box-sizing:border-box; width:min(760px, 94vw); height:100dvh; padding:20px 24px 36px; overflow:auto; background:rgb(from var(--prayu-panel-strong) r g b / 1); color:var(--v2-ink); box-shadow:-4px 0 30px #0002; font-size:14px; line-height:1.65; overflow-wrap:anywhere; } +.v2-context-overlay { position:fixed; inset:0; z-index:950; display:flex; justify-content:flex-end; background:color-mix(in srgb, var(--prayu-primary-fg) 34%, transparent); } +.v2-thread-context { box-sizing:border-box; width:min(760px, 94vw); height:100dvh; padding:20px 24px 36px; overflow:auto; background:var(--prayu-surface-solid); color:var(--v2-ink); box-shadow:-4px 0 30px var(--prayu-glass-shadow); font-size:14px; line-height:1.65; overflow-wrap:anywhere; } .v2-thread-context > header { position:sticky; top:-20px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; background:inherit; } .v2-thread-context h2 { margin:0; font-size:19px; font-weight:600; } .v2-thread-context h3 { margin:0 0 10px; font-size:16px; font-weight:600; } .v2-thread-context h4 { margin:0 0 8px; font-size:14px; font-weight:600; } .v2-thread-context strong { font-weight:600; } -.v2-thread-context > section { padding:20px 0; border-top:1px solid var(--v2-border, #d7dbe0); } -.v2-thread-context button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 11px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; color:inherit; background:var(--prayu-panel-strong, #141519); font:inherit; cursor:pointer; } +.v2-thread-context > section { padding:20px 0; border-top:1px solid var(--v2-border); } +.v2-thread-context button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 11px; border:1px solid var(--v2-border); border-radius:8px; color:inherit; background:var(--prayu-panel-strong); font:inherit; cursor:pointer; } .v2-thread-context button:disabled { opacity:.5; cursor:default; } -.v2-thread-context button:focus-visible, .v2-thread-context summary:focus-visible, .v2-thread-context textarea:focus-visible { outline:2px solid var(--v2-accent, #6b91df); outline-offset:3px; } +.v2-thread-context button:hover:not(:disabled) { background:var(--v2-control-hover); color:var(--v2-ink); } +.v2-thread-context button:focus-visible, .v2-thread-context summary:focus-visible, .v2-thread-context textarea:focus-visible { outline:2px solid var(--v2-accent); outline-offset:3px; } .v2-context-help { color:var(--v2-muted); font-size:13px; } .v2-context-workflows { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; } .v2-context-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0; } @@ -20,17 +21,17 @@ .v2-thread-context dt { color:var(--v2-muted); } .v2-thread-context dd { margin:0; white-space:pre-wrap; } .v2-context-sources { padding:0; margin:12px 0; list-style:none; } -.v2-context-sources > li { padding:10px 0; border-bottom:1px solid var(--v2-border, #d7dbe0); } +.v2-context-sources > li { padding:10px 0; border-bottom:1px solid var(--v2-border); } .v2-context-sources > li > strong, .v2-context-sources > li > span { display:block; } .v2-context-sources > li > span { color:var(--v2-muted); font-size:13px; } .v2-context-summary-text pre, .v2-context-summary-text > p, .v2-context-generated-text { white-space:pre-wrap; font:inherit; margin:10px 0; } -.v2-context-summary-text { border-left:2px solid var(--v2-border, #d7dbe0); padding-left:14px; } -.v2-context-notice, .v2-thread-context [role="alert"] { padding:10px 12px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; } +.v2-context-summary-text { border-left:2px solid var(--v2-border); padding-left:14px; } +.v2-context-notice, .v2-thread-context [role="alert"] { padding:10px 12px; border:1px solid var(--v2-border); border-radius:8px; } .v2-context-inherited { margin-top:20px; } .v2-context-diagnostics-list { padding-left:22px; margin:12px 0; } -.v2-context-diagnostics-list > li { padding:10px 0; border-bottom:1px solid var(--v2-border, #d7dbe0); } +.v2-context-diagnostics-list > li { padding:10px 0; border-bottom:1px solid var(--v2-border); } .v2-context-diagnostics-list time { display:block; color:var(--v2-muted); font-size:12px; } .v2-context-diagnostics-list p, .v2-context-notice p { margin:8px 0 0; } .v2-context-correction label { display:block; margin-bottom:7px; } -.v2-context-correction textarea { box-sizing:border-box; width:100%; resize:vertical; min-height:110px; padding:10px 12px; border:1px solid var(--v2-border, #d7dbe0); border-radius:8px; background:var(--prayu-panel-strong, #141519); color:inherit; font:inherit; } +.v2-context-correction textarea { box-sizing:border-box; width:100%; resize:vertical; min-height:110px; padding:10px 12px; border:1px solid var(--v2-border); border-radius:8px; background:var(--prayu-panel-strong); color:inherit; font:inherit; } @media (max-width:600px) { .v2-thread-context { width:100vw; padding:14px 16px 28px; } .v2-thread-context > header { top:-14px; } .v2-thread-context dl { grid-template-columns:1fr; gap:2px; } .v2-thread-context dd { margin-bottom:8px; } } diff --git a/web/src/v2/components/thread-plan.css b/web/src/v2/components/thread-plan.css index 2e115612..f12653ad 100644 --- a/web/src/v2/components/thread-plan.css +++ b/web/src/v2/components/thread-plan.css @@ -15,23 +15,24 @@ } .v2-phase-picker > svg { flex-shrink: 0; } .v2-composer-footer .v2-phase-toggle { min-height:34px; font-size:13px; font-weight:500; } -.v2-phase-picker[aria-pressed="true"] { color:var(--v2-accent, #7566dd); background:color-mix(in srgb, var(--v2-accent, #7566dd) 12%, transparent); } -.v2-phase-picker:focus-visible { outline: 2px solid var(--v2-accent, #7566dd); outline-offset: 2px; } +.v2-phase-picker[aria-pressed="true"] { color:var(--v2-accent); background:color-mix(in srgb, var(--v2-accent) 12%, transparent); } +.v2-phase-picker:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; } .v2-phase-picker:disabled { opacity: .55; cursor: default; } .v2-plan-trigger { display:inline-flex; align-items:center; gap:5px; padding:4px 6px; border:0; border-radius:6px; background:transparent; color:var(--v2-ink); font:inherit; font-size:13px; cursor:pointer; } .v2-plan-trigger.has-attention { text-decoration:underline; text-underline-offset:3px; } -.v2-plan-overlay { position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center; padding:20px; background:#0005; } -.v2-thread-plan { box-sizing:border-box; width:min(720px, 100%); max-height:90dvh; overflow:auto; padding:20px 24px; border:1px solid var(--v2-border); border-radius:16px; background:rgb(from var(--prayu-panel-strong) r g b / 1); color:var(--v2-ink); font-size:14px; line-height:1.65; overflow-wrap:anywhere; box-shadow:0 12px 48px #0003; } +.v2-plan-overlay { position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center; padding:20px; background:color-mix(in srgb, var(--prayu-primary-fg) 34%, transparent); } +.v2-thread-plan { box-sizing:border-box; width:min(720px, 100%); max-height:90dvh; overflow:auto; padding:20px 24px; border:1px solid var(--v2-border); border-radius:16px; background:var(--prayu-surface-solid); color:var(--v2-ink); font-size:14px; line-height:1.65; overflow-wrap:anywhere; box-shadow:0 12px 48px var(--prayu-glass-shadow); } .v2-thread-plan > header { display:flex; align-items:center; justify-content:space-between; gap:12px; } .v2-thread-plan h2 { margin:0; font-size:19px; font-weight:600; } .v2-thread-plan p { margin:10px 0; } .v2-plan-help { color:var(--v2-muted); } .v2-thread-plan button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 11px; border:1px solid var(--v2-border); border-radius:8px; background:var(--prayu-panel-strong); color:inherit; font:inherit; cursor:pointer; } .v2-thread-plan button:disabled { opacity:.5; cursor:default; } -.v2-thread-plan button:focus-visible, .v2-thread-plan summary:focus-visible, .v2-plan-trigger:focus-visible { outline:2px solid var(--v2-accent, #6b91df); outline-offset:3px; } +.v2-thread-plan button:hover:not(:disabled) { background:var(--v2-control-hover); color:var(--v2-ink); } +.v2-thread-plan button:focus-visible, .v2-thread-plan summary:focus-visible, .v2-plan-trigger:focus-visible { outline:2px solid var(--v2-accent); outline-offset:3px; } .v2-plan-directions > section { border:1px solid var(--v2-border); border-radius:10px; padding:14px 16px; margin:14px 0; } .v2-plan-choice { display:flex; gap:9px; align-items:baseline; } -.v2-plan-choice input { accent-color:var(--v2-accent, #6b91df); } +.v2-plan-choice input { accent-color:var(--v2-accent); } .v2-thread-plan strong { font-weight:600; } .v2-thread-plan summary { cursor:pointer; width:fit-content; } .v2-thread-plan li { margin:6px 0; } diff --git a/web/src/v2/styles.css b/web/src/v2/styles.css index a09deb04..14a0751d 100644 --- a/web/src/v2/styles.css +++ b/web/src/v2/styles.css @@ -5,18 +5,18 @@ --v2-content-width: 768px; --v2-composer-width: 738px; --v2-row-height: 34px; - --v2-ink: var(--prayu-text, #24262a); - --v2-muted: var(--prayu-muted, #70747b); - --v2-border: var(--prayu-border, rgb(24 30 38 / 11%)); - --v2-border-strong: var(--prayu-border-strong, rgb(24 30 38 / 18%)); - --v2-accent: #6b55ed; - --v2-blue: #4d9aff; - --v2-danger: var(--prayu-danger, #b42318); - --v2-main-surface: var(--prayu-panel, rgb(255 255 255 / 76%)); - --v2-sidebar-surface: color-mix(in srgb, var(--prayu-sidebar, rgb(237 248 249 / 72%)) 82%, #dff3f4 18%); - --v2-floating-surface: color-mix(in srgb, var(--prayu-panel-strong, rgb(255 255 255 / 84%)) 88%, transparent); - --v2-control: var(--prayu-control, rgb(255 255 255 / 42%)); - --v2-control-hover: var(--prayu-control-hover, rgb(255 255 255 / 70%)); + --v2-mono: var(--prayu-font-mono); + --v2-ink: var(--prayu-text); + --v2-muted: var(--prayu-muted); + --v2-border: var(--prayu-border); + --v2-border-strong: var(--prayu-border-strong); + --v2-accent: var(--prayu-accent); + --v2-danger: var(--prayu-danger); + --v2-main-surface: var(--prayu-panel); + --v2-sidebar-surface: var(--prayu-sidebar); + --v2-floating-surface: var(--prayu-panel-strong); + --v2-control: var(--prayu-control); + --v2-control-hover: var(--prayu-control-hover); } .v2-approval-facts { margin: 12px 0; display: grid; gap: 8px; font-size: 12px; } @@ -36,7 +36,7 @@ .v2-file-references button { border: 0; background: transparent; flex-shrink: 0; padding: 3px; } .v2-file-picker.v2-inspector-drawer { width: min(760px, 100vw); overflow: auto; } .v2-file-picker > .workspace-explorer { padding: 0 18px 18px; } -.v2-file-picker > header { flex-shrink: 0; position: sticky; top: 0; z-index: 2; background: var(--prayu-panel-strong, #fff); } +.v2-file-picker > header { flex-shrink: 0; position: sticky; top: 0; z-index: 2; background: var(--prayu-panel-strong); } .v2-file-picker p { font-size: 13px; line-height: 1.6; margin: 0; } .v2-header-actions > .v2-review-trigger { width: auto; padding-inline: 8px; gap: 5px; font-size: 12px; } @media (max-width: 760px) { @@ -46,8 +46,8 @@ .v2-drawer-backdrop { align-items: stretch; - backdrop-filter: blur(12px) saturate(120%); - background: rgb(23 27 34 / 28%); + backdrop-filter: blur(12px) saturate(100%); + background: rgb(28 28 28 / 28%); display: flex; inset: 0; justify-content: flex-end; @@ -57,10 +57,10 @@ .v2-file-drawer, .v2-terminal-drawer { - backdrop-filter: blur(42px) saturate(180%); + backdrop-filter: blur(42px) saturate(100%); background: var(--v2-floating-surface); border-left: 1px solid var(--v2-border-strong); - box-shadow: -18px 0 54px rgb(15 20 28 / 16%); + box-shadow: -18px 0 54px rgb(21 21 21 / 16%); display: flex; flex-direction: column; height: 100%; @@ -223,7 +223,7 @@ } .v2-markdown-code-block { - background: rgb(20 23 28 / 92%); + background: var(--prayu-surface-solid); border: 1px solid color-mix(in srgb, var(--v2-border) 60%, transparent); border-radius: 8px; margin: 8px 0; @@ -232,15 +232,15 @@ .v2-markdown-code-header { align-items: center; - background: rgb(27 31 38 / 90%); - border-bottom: 1px solid rgb(255 255 255 / 8%); + background: var(--v2-control); + border-bottom: 1px solid var(--v2-border); display: flex; justify-content: space-between; padding: 4px 10px; } .v2-markdown-code-lang { - color: #9aa1aa; + color: var(--v2-muted); font-family: var(--prayu-font-mono); font-size: 11px; } @@ -250,7 +250,7 @@ background: transparent; border: 0; border-radius: 6px; - color: #c2ccda; + color: var(--v2-ink); cursor: pointer; display: inline-flex; font-size: 11px; @@ -261,14 +261,14 @@ .v2-copy-code-button:hover, .v2-copy-code-button:focus-visible { - background: rgb(255 255 255 / 12%); - color: #ffffff; + background: var(--v2-control-hover); + color: var(--v2-ink); } .v2-markdown-code-block pre { background: transparent; border: 0; - color: #eef0f2; + color: var(--v2-ink); font-family: var(--prayu-font-mono); font-size: 12px; line-height: 1.5; @@ -354,10 +354,7 @@ min-height: 320px; overflow: hidden; position: relative; - background: - radial-gradient(circle at 26% -10%, rgb(211 247 250 / 42%), transparent 42%), - radial-gradient(circle at 78% -18%, rgb(251 244 211 / 25%), transparent 40%), - var(--prayu-window, rgb(244 248 250 / 48%)); + background: var(--prayu-window); } .v2-shell button, @@ -374,19 +371,20 @@ .v2-shell button:focus-visible, .v2-shell summary:focus-visible { - outline: 2px solid var(--prayu-focus, #4b8ef7); + outline: 2px solid var(--prayu-focus); outline-offset: 2px; } .v2-shell input:focus-visible, .v2-shell select:focus-visible, .v2-shell textarea:focus-visible { - outline: none; + outline: 2px solid var(--prayu-focus); + outline-offset: 2px; } .v2-titlebar { align-items: stretch; - backdrop-filter: blur(28px) saturate(160%); - background: color-mix(in srgb, var(--prayu-titlebar, rgb(255 255 255 / 60%)) 88%, transparent); + backdrop-filter: blur(28px) saturate(100%); + background: var(--prayu-titlebar); border-bottom: 1px solid color-mix(in srgb, var(--v2-border) 58%, transparent); display: flex; grid-row: 1; @@ -432,7 +430,7 @@ .v2-titlebar-drag-region { flex: 1 1 auto; min-width: 30px; } .v2-window-controls button { width: 46px; } .v2-window-controls button:hover { background: rgb(0 0 0 / 7%); } -.v2-window-controls button.close:hover { background: #c42b1c; color: #fff; } +.v2-window-controls button.close:hover { background: var(--prayu-danger-fill); color: var(--prayu-on-danger); } .v2-shell-body { display: grid; @@ -444,7 +442,7 @@ .v2-shell.no-sidebar .v2-shell-body { grid-template-columns: minmax(0, 1fr); } .v2-sidebar { - backdrop-filter: blur(34px) saturate(155%); + backdrop-filter: blur(34px) saturate(100%); background: var(--v2-sidebar-surface); display: flex; flex-direction: column; @@ -456,9 +454,7 @@ } .v2-sidebar::before { - background: - radial-gradient(circle at 4% 7%, rgb(255 255 255 / 48%), transparent 31%), - linear-gradient(125deg, rgb(113 221 239 / 7%), transparent 42%, rgb(255 232 174 / 7%)); + background: linear-gradient(120deg, var(--prayu-glass-highlight), transparent 42%); content: ""; inset: 0; pointer-events: none; @@ -539,7 +535,7 @@ min-height: 0; overflow: auto; padding: 8px 7px 18px; - scrollbar-color: rgb(70 78 88 / 17%) transparent; + scrollbar-color: rgb(79 79 79 / 17%) transparent; scrollbar-width: thin; } .v2-thread-group + .v2-thread-group { margin-top: 14px; } @@ -554,7 +550,7 @@ } .v2-thread-group > header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-thread-row-shell { border-radius: 10px; min-width: 0; position: relative; } -.v2-thread-row-shell.is-selected { background: color-mix(in srgb, var(--v2-control-hover) 84%, rgb(126 160 167 / 13%)); } +.v2-thread-row-shell.is-selected { background: var(--v2-control-hover); } .v2-thread-row-shell:hover:not(.is-selected) { background: color-mix(in srgb, var(--v2-control-hover) 70%, transparent); } .v2-thread-row { align-items: center; @@ -572,7 +568,7 @@ .v2-thread-state { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--v2-muted); font-size: 10px; white-space: nowrap; } .v2-thread-state i { background: currentColor; border-radius: 50%; height: 6px; width: 6px; } .v2-thread-state.state-running { color: var(--v2-accent); } -.v2-thread-state.state-stopping, .v2-thread-state.state-waiting_approval { color: #af671c; } +.v2-thread-state.state-stopping, .v2-thread-state.state-waiting_approval { color: var(--prayu-warning); } .v2-thread-state.state-stop_failed, .v2-thread-state.state-failed { color: var(--v2-danger); } .v2-thread-state-description { position: absolute; height: 1px; width: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .v2-thread-more { @@ -594,11 +590,11 @@ .v2-thread-more:focus-visible { opacity: 1; } .v2-thread-more:hover { background: var(--v2-control-hover); } .v2-thread-menu { - backdrop-filter: blur(30px) saturate(175%); + backdrop-filter: blur(30px) saturate(100%); background: var(--v2-floating-surface); border: 1px solid var(--v2-border); border-radius: 11px; - box-shadow: 0 12px 32px rgb(27 34 43 / 18%), inset 0 1px 0 rgb(255 255 255 / 42%); + box-shadow: 0 12px 32px rgb(35 35 35 / 18%), inset 0 1px 0 rgb(255 255 255 / 42%); min-width: 145px; padding: 5px; position: absolute; @@ -630,9 +626,9 @@ .v2-sidebar-footer .v2-profile { height: 40px; } .v2-profile > span { align-items: center; - background: linear-gradient(145deg, #f1cb98, #9e7458); + background: var(--prayu-primary-bg); border-radius: 50%; - color: #fff; + color: var(--prayu-primary-fg); display: flex; font-size: 10px; height: 24px; @@ -640,14 +636,14 @@ width: 24px; } .v2-profile strong { flex: 1; font-weight: 500; } -.v2-profile i { background: #35a36d; border: 2px solid color-mix(in srgb, var(--v2-sidebar-surface) 86%, transparent); border-radius: 50%; height: 8px; width: 8px; } +.v2-profile i { background: var(--prayu-success); border: 2px solid color-mix(in srgb, var(--v2-sidebar-surface) 86%, transparent); border-radius: 50%; height: 8px; width: 8px; } .v2-product-surface { - backdrop-filter: blur(34px) saturate(150%); + backdrop-filter: blur(34px) saturate(100%); background: var(--v2-main-surface); border-left: 1px solid color-mix(in srgb, var(--v2-border) 58%, transparent); border-radius: 12px 0 0 0; - box-shadow: -10px 18px 54px rgb(25 31 39 / 7%); + box-shadow: -10px 18px 54px rgb(32 32 32 / 7%); min-height: 0; min-width: 0; overflow: hidden; @@ -698,12 +694,12 @@ .v2-conversation-header strong, .v2-new-conversation > header strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-working-state { align-items: center; color: var(--v2-muted); display: inline-flex; flex-shrink: 0; font-size: 12px; gap: 6px; margin-left: 4px; white-space: nowrap; } -.v2-working-state i { animation: v2-pulse 1.5s ease-in-out infinite; background: var(--v2-blue); border-radius: 50%; height: 6px; width: 6px; } +.v2-working-state i { animation: v2-pulse 1.5s ease-in-out infinite; background: var(--v2-accent); border-radius: 50%; height: 6px; width: 6px; } .v2-recovery-state { - background: color-mix(in srgb, #e58b3a 13%, transparent); - border: 1px solid color-mix(in srgb, #e58b3a 27%, transparent); + background: var(--v2-control); + border: 1px solid var(--v2-border-strong); border-radius: 999px; - color: color-mix(in srgb, #b75f18 82%, var(--v2-ink)); + color: var(--v2-ink); font-size: 11px; font-weight: 600; flex-shrink: 0; @@ -726,14 +722,14 @@ .v2-header-actions > button:hover { background: var(--v2-control-hover); } .v2-thread-menu { right: 0; top: 35px; } -.v2-conversation-scroll { min-height: 0; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-color: rgb(70 78 88 / 18%) transparent; scrollbar-width: thin; } +.v2-conversation-scroll { min-height: 0; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-color: rgb(79 79 79 / 18%) transparent; scrollbar-width: thin; } .v2-conversation-content { margin: 0 auto; max-width: var(--v2-content-width); padding: 28px 0 38px; width: calc(100% - 40px); } .v2-narrative { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; } .v2-narrative > li { min-width: 0; } .v2-user-turn { display: flex; justify-content: flex-end; } .v2-message-status { color: var(--v2-muted); display: block; font-size: 11px; margin-top: 6px; } .v2-user-turn > div { - background: color-mix(in srgb, var(--v2-control-hover) 75%, rgb(228 231 235 / 34%)); + background: var(--v2-control-hover); border: 1px solid color-mix(in srgb, var(--v2-border) 55%, transparent); border-radius: 19px; font-size: 14px; @@ -749,9 +745,9 @@ .v2-assistant-turn > :last-child { margin-bottom: 0; } .v2-assistant-turn p { margin: 0 0 13px; } .v2-assistant-turn pre { - background: rgb(20 23 28 / 88%); + background: var(--prayu-surface-solid); border-radius: 10px; - color: #f4f5f6; + color: var(--v2-ink); font-size: 13px; overflow: auto; padding: 13px; @@ -803,7 +799,7 @@ grid-column: 2; grid-row: 1; } -.v2-activity-item.is-failed em { color: #b45f18; } +.v2-activity-item.is-failed em { color: var(--v2-danger); } .v2-activity-item.has-detail > details > summary { align-items: center; border-radius: 8px; @@ -842,7 +838,7 @@ margin: 2px 0; min-height: 28px; } -.v2-activity-detail-state.is-error { color: #9a5716; justify-content: space-between; } +.v2-activity-detail-state.is-error { color: var(--v2-danger); justify-content: space-between; } .v2-activity-detail-state button { background: var(--v2-control); border: 1px solid var(--v2-border); @@ -870,16 +866,16 @@ white-space: pre-wrap; } .v2-command-detail > header > span { - background: color-mix(in srgb, #34a56f 12%, transparent); + background: var(--v2-control); border-radius: 999px; - color: #267a54; + color: var(--prayu-success); flex: 0 0 auto; font-size: 10px; padding: 2px 7px; } .v2-command-detail > header > span.is-failed { - background: color-mix(in srgb, #e28a31 13%, transparent); - color: #9a5716; + background: var(--v2-control); + color: var(--v2-danger); } .v2-tool-facts > header > strong { color: var(--v2-ink); font-size: 12px; } .v2-command-detail dl { @@ -895,9 +891,9 @@ .v2-command-detail section { display: grid; gap: 4px; min-width: 0; } .v2-command-detail section > strong { color: var(--v2-muted); font-size: 10px; font-weight: 600; } .v2-command-detail pre { - background: rgb(20 23 28 / 91%); + background: var(--prayu-surface-solid); border-radius: 8px; - color: #f4f5f6; + color: var(--v2-ink); font-family: var(--prayu-font-mono); font-size: 11px; line-height: 1.5; @@ -938,9 +934,9 @@ .v2-command-artifact-content { display: grid; gap: 6px; min-width: 0; } .v2-command-artifact-content > small { color: var(--v2-muted); font-size: 10px; } .v2-command-artifact-content pre { - background: rgb(20 23 28 / 91%); + background: var(--prayu-surface-solid); border-radius: 8px; - color: #f4f5f6; + color: var(--v2-ink); font-family: var(--prayu-font-mono); font-size: 11px; line-height: 1.5; @@ -969,10 +965,10 @@ .v2-file-edit-diff-content { display: grid; gap: 6px; min-width: 0; } .v2-file-edit-diff-content > small { color: var(--v2-muted); font-size: 10px; } .v2-unified-diff { - background: rgb(20 23 28 / 91%); + background: var(--prayu-surface-solid); border: 1px solid color-mix(in srgb, var(--v2-border) 60%, transparent); border-radius: 8px; - color: #eef0f2; + color: var(--v2-ink); font-family: var(--prayu-font-mono); font-size: 11px; line-height: 1.55; @@ -988,17 +984,17 @@ .v2-unified-diff-line > span, .v2-unified-diff-line > code { min-height: 20px; padding: 1px 6px; white-space: pre; } .v2-unified-diff-number { - border-right: 1px solid rgb(255 255 255 / 10%); - color: #9aa1aa; + border-right: 1px solid var(--v2-border); + color: var(--v2-muted); text-align: right; user-select: none; } -.v2-unified-diff-marker { color: #9aa1aa; text-align: center; user-select: none; } -.v2-unified-diff-line.is-add { background: rgb(46 143 91 / 24%); } -.v2-unified-diff-line.is-delete { background: rgb(184 62 62 / 23%); } -.v2-unified-diff-line.is-add .v2-unified-diff-marker { color: #73d7a1; } -.v2-unified-diff-line.is-delete .v2-unified-diff-marker { color: #f18c8c; } -.v2-unified-diff-line.is-hunk { background: rgb(90 131 191 / 22%); color: #c2ccda; } +.v2-unified-diff-marker { color: var(--v2-muted); text-align: center; user-select: none; } +.v2-unified-diff-line.is-add { background: color-mix(in srgb, var(--prayu-diff-add) 12%, var(--prayu-surface-solid)); } +.v2-unified-diff-line.is-delete { background: color-mix(in srgb, var(--prayu-diff-delete) 12%, var(--prayu-surface-solid)); } +.v2-unified-diff-line.is-add .v2-unified-diff-marker { color: var(--prayu-diff-add); } +.v2-unified-diff-line.is-delete .v2-unified-diff-marker { color: var(--prayu-diff-delete); } +.v2-unified-diff-line.is-hunk { background: var(--v2-control); color: var(--v2-ink); } .v2-unified-diff-line.is-hunk > code, .v2-unified-diff-line.is-meta > code { grid-column: 2 / -1; } .v2-unified-diff-line.is-hunk > span:not(.v2-unified-diff-marker), @@ -1010,7 +1006,7 @@ } .v2-notice { border-left: 2px solid var(--v2-border-strong); color: var(--v2-muted); padding: 5px 10px; } .v2-notice.tone-warning { border-color: var(--prayu-warning); color: var(--prayu-warning); } -.v2-notice.tone-success { border-color: #34a56f; color: #267a54; } +.v2-notice.tone-success { border-color: var(--prayu-success); color: var(--prayu-success); } .v2-transcript-loading, .v2-transcript-empty { align-items: center; color: var(--v2-muted); display: flex; gap: 9px; justify-content: center; min-height: 120px; } .v2-transcript-empty > span { align-items: center; background: var(--v2-control); border-radius: 50%; display: flex; height: 34px; justify-content: center; width: 34px; } @@ -1028,11 +1024,11 @@ } .v2-run-recovery { align-items: center; - backdrop-filter: blur(30px) saturate(165%); - background: color-mix(in srgb, var(--v2-floating-surface) 91%, rgb(232 139 58 / 9%)); - border: 1px solid color-mix(in srgb, #df8433 29%, var(--v2-border)); + backdrop-filter: blur(30px) saturate(100%); + background: var(--v2-floating-surface); + border: 1px solid var(--v2-border-strong); border-radius: 17px; - box-shadow: 0 9px 26px rgb(27 34 43 / 8%), inset 0 1px 0 rgb(255 255 255 / 58%); + box-shadow: 0 9px 26px rgb(35 35 35 / 8%), inset 0 1px 0 rgb(255 255 255 / 58%); display: grid; gap: 11px; grid-template-columns: auto minmax(0, 1fr); @@ -1042,9 +1038,9 @@ } .v2-run-recovery-icon { align-items: center; - background: color-mix(in srgb, #e58b3a 15%, transparent); + background: var(--v2-control); border-radius: 10px; - color: #bd681f; + color: var(--v2-ink); display: flex; height: 34px; justify-content: center; @@ -1054,25 +1050,25 @@ .v2-run-recovery strong { font-size: 13px; } .v2-run-recovery p { color: var(--v2-ink); font-size: 12px; line-height: 1.45; margin: 0; } .v2-run-recovery small { color: var(--v2-muted); font-size: 11px; line-height: 1.4; } -.v2-run-recovery .v2-run-recovery-waiting { color: #a56325; } +.v2-run-recovery .v2-run-recovery-waiting { color: var(--prayu-warning); } .v2-composer { container: composer / inline-size; margin: 0 auto; max-width: var(--v2-composer-width); position: relative; } .v2-composer-surface { - backdrop-filter: blur(32px) saturate(170%); - background: color-mix(in srgb, var(--v2-floating-surface) 92%, transparent); + backdrop-filter: blur(32px) saturate(100%); + background: var(--v2-floating-surface); border: 1px solid color-mix(in srgb, var(--v2-border-strong) 66%, rgb(255 255 255 / 38%)); border-radius: 22px; box-shadow: - 0 9px 26px rgb(27 34 43 / 10%), - 0 1px 4px rgb(27 34 43 / 8%), + 0 9px 26px rgb(35 35 35 / 10%), + 0 1px 4px rgb(35 35 35 / 8%), inset 0 1px 0 rgb(255 255 255 / 66%), - inset 0 -1px 0 rgb(29 38 48 / 4%); + inset 0 -1px 0 rgb(38 38 38 / 4%); min-height: 99px; overflow: visible; position: relative; } .v2-composer-surface:focus-within { border-color: var(--v2-border-strong); } .v2-composer-surface::after { - background: linear-gradient(120deg, rgb(255 255 255 / 18%), transparent 31%, transparent 67%, rgb(129 208 235 / 8%)); + background: linear-gradient(120deg, var(--prayu-glass-highlight), transparent 40%, transparent 70%, var(--prayu-glass-highlight)); border-radius: inherit; content: ""; inset: 0; @@ -1151,18 +1147,20 @@ .v2-composer-icon { border-radius: 50%; height: 34px; padding: 0; width: 34px; } .v2-composer-icon:disabled { color: var(--v2-muted); opacity: .72; } .v2-shell .v2-send-button { - background: var(--v2-send-background, #1b1c1f); + background: var(--prayu-primary-bg); + border: 1px solid var(--prayu-primary-border); border-radius: 50%; - color: var(--v2-send-foreground, #fff); + box-shadow: 0 2px 8px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); + color: var(--prayu-primary-fg); height: 34px; padding: 0; transition: opacity 120ms ease, transform 90ms ease; width: 34px; flex-shrink: 0; } -.v2-send-button:hover:not(:disabled) { background: var(--v2-send-hover, #050506); } +.v2-send-button:hover:not(:disabled) { background: var(--prayu-primary-hover); } .v2-send-button:active:not(:disabled) { transform: scale(.92); } -.v2-send-button:disabled { background: rgb(91 95 101 / 18%); color: var(--v2-muted); } +.v2-send-button:disabled { background: rgb(96 96 96 / 18%); color: var(--v2-muted); } .v2-composer-chip, .v2-workspace-picker select { background: transparent; @@ -1184,12 +1182,12 @@ .v2-permission-control { position: relative; } .v2-permission-popover { - backdrop-filter: blur(38px) saturate(185%); + backdrop-filter: blur(38px) saturate(100%); background: rgb(from var(--prayu-panel-strong) r g b / 1); border: 1px solid var(--v2-border); border-radius: 15px; bottom: 35px; - box-shadow: 0 18px 44px rgb(27 34 43 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); + box-shadow: 0 18px 44px rgb(35 35 35 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); left: -35px; padding: 7px; position: absolute; @@ -1232,12 +1230,12 @@ .v2-permission-network .v2-network-prefill { margin-left: 0; } .v2-network-scope-control { position: relative; } .v2-network-popover { - backdrop-filter: blur(38px) saturate(185%); + backdrop-filter: blur(38px) saturate(100%); background: rgb(from var(--prayu-panel-strong) r g b / 1); border: 1px solid var(--v2-border); border-radius: 15px; bottom: 35px; - box-shadow: 0 18px 44px rgb(27 34 43 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); + box-shadow: 0 18px 44px rgb(35 35 35 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); display: grid; gap: 9px; left: -35px; @@ -1276,20 +1274,20 @@ min-height: 31px; padding: 0 9px; } -.v2-network-popover > footer button.primary { background: #1c1d20; border-color: #1c1d20; color: #fff; } +.v2-network-popover > footer button.primary { background: var(--prayu-primary-bg); border-color: var(--prayu-primary-border); color: var(--prayu-primary-fg); box-shadow: 0 2px 8px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); } .v2-network-popover > footer button:disabled { opacity: .45; } .v2-approval-stack { display: grid; gap: 10px; margin-top: 22px; } .v2-approval-card { - backdrop-filter: blur(28px) saturate(160%); - background: color-mix(in srgb, var(--v2-floating-surface) 89%, rgb(255 238 206 / 11%)); - border: 1px solid color-mix(in srgb, #e7973e 32%, var(--v2-border)); + backdrop-filter: blur(28px) saturate(100%); + background: var(--v2-floating-surface); + border: 1px solid var(--v2-border-strong); border-radius: 15px; - box-shadow: 0 9px 24px rgb(48 39 24 / 7%); + box-shadow: 0 9px 24px rgb(37 37 37 / 7%); padding: 14px; } .v2-approval-card header { align-items: center; display: flex; gap: 10px; } -.v2-approval-card header > span { align-items: center; background: rgb(232 147 57 / 14%); border-radius: 9px; color: #b8691f; display: flex; height: 31px; justify-content: center; width: 31px; } +.v2-approval-card header > span { align-items: center; background: var(--v2-control); border-radius: 9px; color: var(--v2-ink); display: flex; height: 31px; justify-content: center; width: 31px; } .v2-approval-card header > div { display: grid; gap: 2px; } .v2-approval-card header small, .v2-approval-card p { color: var(--v2-muted); } @@ -1309,14 +1307,17 @@ .v2-approval-card footer button.secondary, .v2-dialog footer button { background: var(--v2-control); } .v2-approval-card footer button.primary, -.v2-dialog footer button.primary { background: #1c1d20; color: #fff; } +.v2-dialog footer button.primary { background: var(--prayu-primary-bg); border-color: var(--prayu-primary-border); color: var(--prayu-primary-fg); box-shadow: 0 2px 8px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); } +.v2-network-popover > footer button.primary:hover:not(:disabled), +.v2-approval-card footer button.primary:hover:not(:disabled), +.v2-dialog footer button.primary:hover:not(:disabled) { background: var(--prayu-primary-hover); } .v2-new-conversation-body { align-items: center; display: flex; justify-content: center; min-height: 0; } .v2-new-copy { margin-top: 30px; max-width: 490px; text-align: center; } .v2-new-copy h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 18px 0 8px; } .v2-new-copy p { color: var(--v2-muted); line-height: 1.6; margin: 0; } -.v2-orb { display: inline-grid; filter: drop-shadow(0 9px 18px rgb(75 106 172 / 17%)); height: 48px; place-items: center; position: relative; width: 48px; } -.v2-orb i { background: radial-gradient(circle at 28% 27%, #fff 0 8%, #8fd9ef 26%, #8268ee 65%, #5640a8 100%); border-radius: 47% 53% 48% 52%; inset: 2px; opacity: .85; position: absolute; transform: rotate(18deg); } +.v2-orb { display: inline-grid; filter: drop-shadow(0 9px 18px var(--prayu-shadow)); height: 48px; place-items: center; position: relative; width: 48px; } +.v2-orb i { background: radial-gradient(circle at 28% 27%, var(--prayu-primary-bg) 0 20%, var(--prayu-primary-hover) 55%, var(--prayu-muted) 100%); border: 1px solid var(--prayu-glass-highlight); border-radius: 47% 53% 48% 52%; inset: 2px; position: absolute; transform: rotate(18deg); } .v2-orb i:last-child { filter: blur(9px); inset: 7px; opacity: .45; transform: rotate(-28deg); } .v2-settings-sidebar { overflow: hidden; } @@ -1329,7 +1330,7 @@ .v2-settings-nav button, .v2-settings-archive button { height: 31px; } .v2-settings-nav button.is-active, -.v2-settings-archive button.is-active { background: color-mix(in srgb, var(--v2-control-hover) 76%, rgb(117 156 165 / 14%)); } +.v2-settings-archive button.is-active { background: var(--v2-control-hover); } .v2-settings-archive { border-top: 1px solid color-mix(in srgb, var(--v2-border) 55%, transparent); padding: 8px; } .v2-settings-archive > span { display: block; } .v2-permission-downgrade { @@ -1391,7 +1392,7 @@ width: 40px; } .v2-cdp-switch i { - background: #fff; + background: var(--prayu-surface-solid); border-radius: 50%; box-shadow: 0 1px 4px rgb(0 0 0 / 24%); display: block; @@ -1400,11 +1401,11 @@ transition: transform 160ms cubic-bezier(.2, .8, .2, 1); width: 18px; } -.v2-cdp-switch[aria-checked="true"] { background: #5b9df5; } +.v2-cdp-switch[aria-checked="true"] { background: var(--v2-accent); } .v2-cdp-switch[aria-checked="true"] i { transform: translateX(16px); } .v2-cdp-switch:disabled { cursor: default; opacity: .44; } .v2-cdp-switch:focus-visible, -.v2-permission-downgrade:focus-visible { outline: 2px solid var(--prayu-focus, #4b8ef7); outline-offset: 2px; } +.v2-permission-downgrade:focus-visible { outline: 2px solid var(--prayu-focus); outline-offset: 2px; } .v2-full-cdp-session { background: color-mix(in srgb, var(--v2-control) 74%, transparent); border: 1px solid var(--v2-border); @@ -1439,7 +1440,7 @@ .v2-full-cdp-launch select { box-sizing: border-box; padding: 0 9px; width: 100%; } .v2-full-cdp-live { display: grid; gap: 5px; } .v2-full-cdp-live > span { align-items: center; display: flex; gap: 6px; } -.v2-full-cdp-live > span i { background: #46b977; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, #46b977 18%, transparent); height: 7px; width: 7px; } +.v2-full-cdp-live > span i { background: var(--prayu-success); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--prayu-success) 18%, transparent); height: 7px; width: 7px; } .v2-full-cdp-live code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-full-cdp-live small, .v2-full-cdp-receipt { color: var(--v2-muted); font-size: 11px !important; } @@ -1451,12 +1452,12 @@ } .v2-run-network-control { position: relative; } .v2-run-network-popover { - backdrop-filter: blur(38px) saturate(185%); + backdrop-filter: blur(38px) saturate(100%); background: var(--v2-floating-surface); border: 1px solid var(--v2-border); border-radius: 15px; bottom: 35px; - box-shadow: 0 18px 44px rgb(27 34 43 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); + box-shadow: 0 18px 44px rgb(35 35 35 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); left: -96px; position: absolute; width: min(440px, calc(100vw - 28px)); @@ -1470,9 +1471,9 @@ } .v2-run-network-authority > header > span:first-child { align-items: center; - background: color-mix(in srgb, #46a76f 10%, var(--v2-control)); + background: var(--v2-control); border-radius: 10px; - color: #348c5b; + color: var(--prayu-success); display: flex; height: 34px; justify-content: center; @@ -1504,14 +1505,14 @@ .v2-search-readiness em { color: var(--v2-muted); font-size: 10.5px; font-style: normal; line-height: 1.4; } .v2-search-readiness em { border-top: 1px solid var(--v2-border); padding-top: 5px; } .v2-search-readiness.state-ready { - background: color-mix(in srgb, #46a76f 9%, var(--v2-control)); - border-color: color-mix(in srgb, #46a76f 28%, var(--v2-border)); + background: var(--v2-control); + border-color: var(--v2-border-strong); } .v2-search-readiness.state-provider_unqualified, .v2-search-readiness.state-missing_allowlist, .v2-search-readiness.state-network_disabled { - background: color-mix(in srgb, #d99a45 8%, var(--v2-control)); - border-color: color-mix(in srgb, #d99a45 25%, var(--v2-border)); + background: var(--v2-control); + border-color: var(--v2-border-strong); } .v2-network-prefill { align-items: center; @@ -1642,7 +1643,7 @@ } .v2-runtime-actions button:hover:not(:disabled) { background: color-mix(in srgb, var(--v2-danger) 13%, var(--v2-floating-surface)); } .v2-runtime-actions button:disabled { background: var(--v2-control); border-color: transparent; color: var(--v2-muted); cursor: default; } -.v2-runtime-actions button:focus-visible { outline: 2px solid var(--prayu-focus, #4b8ef7); outline-offset: 2px; } +.v2-runtime-actions button:focus-visible { outline: 2px solid var(--prayu-focus); outline-offset: 2px; } .v2-runtime-boundary { background: color-mix(in srgb, var(--v2-control) 70%, transparent); border-radius: 10px; @@ -1656,8 +1657,8 @@ .v2-overlay, .v2-inspector-backdrop { align-items: center; - backdrop-filter: blur(12px) saturate(120%); - background: rgb(23 27 34 / 20%); + backdrop-filter: blur(12px) saturate(100%); + background: rgb(28 28 28 / 20%); display: flex; inset: 0; justify-content: center; @@ -1665,11 +1666,11 @@ z-index: 500; } .v2-dialog { - backdrop-filter: blur(42px) saturate(190%); + backdrop-filter: blur(42px) saturate(100%); background: var(--v2-floating-surface); border: 1px solid var(--v2-border-strong); border-radius: 16px; - box-shadow: 0 24px 70px rgb(12 17 24 / 28%), inset 0 1px 0 rgb(255 255 255 / 55%); + box-shadow: 0 24px 70px rgb(18 18 18 / 28%), inset 0 1px 0 rgb(255 255 255 / 55%); max-width: calc(100% - 32px); padding: 0; width: 420px; @@ -1681,21 +1682,21 @@ .v2-dialog > header > button { background: transparent; border: 0; border-radius: 8px; height: 30px; padding: 0; } .v2-dialog > p { color: var(--v2-muted); line-height: 1.55; margin: 0; padding: 19px 18px; } .v2-dialog footer { align-items: center; border-top: 1px solid var(--v2-border); display: flex; gap: 8px; justify-content: flex-end; padding: 11px 13px; } -.v2-dialog footer button.danger { background: var(--v2-danger); border-color: transparent; color: #fff; } +.v2-dialog footer button.danger { background: var(--prayu-danger-fill); border-color: transparent; color: var(--prayu-on-danger); } .v2-high-risk-overlay { animation: v2-high-risk-scrim-in 180ms ease-out both; - backdrop-filter: blur(16px) saturate(125%); - background: rgb(18 23 30 / 27%); + backdrop-filter: blur(16px) saturate(100%); + background: rgb(24 24 24 / 27%); padding: 16px; } .v2-high-risk-dialog { animation: v2-high-risk-materialize 210ms cubic-bezier(.2, .8, .2, 1) both; - backdrop-filter: blur(48px) saturate(190%); - background: color-mix(in srgb, var(--v2-floating-surface) 94%, transparent); + backdrop-filter: blur(48px) saturate(100%); + background: var(--v2-floating-surface); border: 1px solid var(--v2-border-strong); border-radius: 24px; - box-shadow: 0 28px 82px rgb(8 14 22 / 30%), inset 0 1px 0 rgb(255 255 255 / 58%); + box-shadow: 0 28px 82px rgb(15 15 15 / 30%), inset 0 1px 0 rgb(255 255 255 / 58%); color: var(--v2-ink); font-family: var(--prayu-font-ui), system-ui, sans-serif; max-height: calc(100dvh - 32px); @@ -1769,7 +1770,7 @@ .v2-high-risk-warning details { color: var(--v2-muted); font-size: 12px; } .v2-high-risk-warning details p { font-size: 12px; margin-top: 7px; } .v2-high-risk-warning summary { - color: color-mix(in srgb, var(--v2-danger) 76%, #b54a84); + color: var(--v2-danger); cursor: pointer; display: inline-block; font-weight: 600; @@ -1815,7 +1816,7 @@ .v2-high-risk-actions button.danger { background: color-mix(in srgb, var(--v2-danger) 9%, var(--v2-floating-surface)); border-color: transparent; - color: color-mix(in srgb, var(--v2-danger) 88%, #d34267); + color: var(--v2-danger); } .v2-high-risk-actions button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--v2-danger) 14%, var(--v2-floating-surface)); @@ -1823,7 +1824,7 @@ .v2-high-risk-actions button:disabled { cursor: default; opacity: .56; } .v2-high-risk-dialog button:focus-visible, .v2-high-risk-dialog summary:focus-visible { - outline: 2px solid var(--prayu-focus, #4b8ef7); + outline: 2px solid var(--prayu-focus); outline-offset: 2px; } @keyframes v2-high-risk-scrim-in { from { opacity: 0; } } @@ -1834,10 +1835,10 @@ .v2-inspector-backdrop { align-items: stretch; justify-content: flex-end; } .v2-inspector-drawer { - backdrop-filter: blur(42px) saturate(180%); + backdrop-filter: blur(42px) saturate(100%); background: var(--v2-floating-surface); border-left: 1px solid var(--v2-border-strong); - box-shadow: -18px 0 54px rgb(15 20 28 / 16%); + box-shadow: -18px 0 54px rgb(21 21 21 / 16%); display: flex; flex-direction: column; max-width: 100%; @@ -1852,14 +1853,14 @@ .v2-inspector-facts label { color: var(--v2-muted); display: grid; font-size: 11px; gap: 5px; text-transform: uppercase; } .v2-inspector-facts code, .v2-inspector-facts strong { color: var(--v2-ink); font-size: 12px; overflow-wrap: anywhere; text-transform: none; } -.v2-open-legacy { background: #1c1d20; border: 0; border-radius: 10px; color: #fff !important; height: 38px; margin: auto 16px 16px; } +.v2-shell .v2-open-legacy { background: var(--prayu-primary-bg); border: 1px solid var(--prayu-primary-border); border-radius: 10px; color: var(--prayu-primary-fg); box-shadow: 0 2px 8px var(--prayu-primary-shadow), inset 0 1px 0 var(--prayu-glass-highlight); height: 38px; margin: auto 16px 16px; } .v2-toast { backdrop-filter: blur(24px); background: var(--v2-floating-surface); border: 1px solid var(--v2-border); border-radius: 11px; bottom: 18px; box-shadow: 0 12px 32px rgb(0 0 0 / 16%); left: 50%; padding: 10px 14px; position: fixed; transform: translateX(-50%); z-index: 600; } .sr-only, .v2-shell .sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .spin { animation: v2-spin .8s linear infinite; } @keyframes v2-spin { to { transform: rotate(360deg); } } -@keyframes v2-pulse { 50% { box-shadow: 0 0 0 4px rgb(77 154 255 / 13%); opacity: .52; } } +@keyframes v2-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--v2-accent) 13%, transparent); opacity: .52; } } @supports (corner-shape: superellipse(1.5)) { .v2-composer-surface, @@ -1871,10 +1872,8 @@ .v2-approval-card { corner-shape: superellipse(1.5); } } -[data-prayu-theme="dark"] .v2-send-button, -[data-prayu-theme="glass"] .v2-send-button { --v2-send-background: #f6f7f8; --v2-send-foreground: #15171a; --v2-send-hover: #fff; } -[data-prayu-theme="glass"] .v2-sidebar, -[data-prayu-theme="glass"] .v2-product-surface { backdrop-filter: blur(46px) saturate(185%); } +:where([data-prayu-theme="glass"]) .v2-sidebar, +:where([data-prayu-theme="glass"]) .v2-product-surface { backdrop-filter: blur(46px) saturate(100%); } .v2-sidebar-backdrop { display: none; } .v2-workspace-start { margin-left: auto; position: relative; } @@ -1892,7 +1891,7 @@ .v2-titlebar { z-index: 130; } .v2-sidebar-backdrop { display: block; position: absolute; inset: var(--v2-titlebar-height) 0 0; background: #0004; border: 0; z-index: 110; } .v2-shell-body { grid-template-columns: minmax(0, 1fr); } - .v2-sidebar { box-shadow: 14px 0 40px rgb(15 22 30 / 20%); inset: var(--v2-titlebar-height) auto 0 0; position: absolute; width: min(var(--v2-sidebar-width), calc(100vw - 48px)); z-index: 120; } + .v2-sidebar { box-shadow: 14px 0 40px rgb(22 22 22 / 20%); inset: var(--v2-titlebar-height) auto 0 0; position: absolute; width: min(var(--v2-sidebar-width), calc(100vw - 48px)); z-index: 120; } .v2-product-surface { border: 0; border-radius: 0; } .v2-conversation-content { width: calc(100% - 24px); } .v2-composer-dock { padding-inline: 10px; } @@ -1947,9 +1946,9 @@ .v2-run-network-popover, .v2-dialog, .v2-inspector-drawer, -.v2-high-risk-dialog { backdrop-filter: none; background: var(--prayu-panel-strong, #fff); } - .v2-high-risk-overlay { backdrop-filter: none; background: rgb(18 23 30 / 42%); } - .v2-sidebar { background: color-mix(in srgb, var(--prayu-panel-strong, #fff) 92%, #dff2f4); } +.v2-high-risk-dialog { backdrop-filter: none; background: var(--prayu-surface-solid); } + .v2-high-risk-overlay { backdrop-filter: none; background: rgb(24 24 24 / 42%); } + .v2-sidebar { background: var(--prayu-surface-solid); } } @media (prefers-contrast: more) { @@ -1999,9 +1998,9 @@ } .v2-model-route-trigger > svg, .v2-model-route-trigger > em { flex-shrink: 0; } .v2-model-route-trigger > em { - background: color-mix(in srgb, var(--v2-blue) 13%, transparent); + background: color-mix(in srgb, var(--v2-accent) 13%, transparent); border-radius: 999px; - color: var(--v2-blue); + color: var(--v2-accent); font-size: 9px; font-style: normal; font-weight: 650; @@ -2011,13 +2010,13 @@ } .v2-model-route-popover { animation: v2-model-route-materialize 140ms cubic-bezier(.2, .8, .2, 1); - backdrop-filter: blur(38px) saturate(185%); + backdrop-filter: blur(38px) saturate(100%); /* Nested backdrop roots cannot reliably blur the transcript below the composer. */ background: rgb(from var(--prayu-panel-strong) r g b / 1); border: 1px solid color-mix(in srgb, var(--v2-border) 88%, rgb(255 255 255 / 42%)); border-radius: 15px; bottom: 36px; - box-shadow: 0 18px 44px rgb(27 34 43 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); + box-shadow: 0 18px 44px rgb(35 35 35 / 20%), inset 0 1px 0 rgb(255 255 255 / 55%); overflow: hidden; position: absolute; right: 0; @@ -2149,7 +2148,7 @@ } .v2-model-route-scroll section > button:hover:not(:disabled) { background: var(--v2-control-hover); } .v2-model-route-scroll section > button[aria-checked="true"] { - background: color-mix(in srgb, var(--v2-blue) 9%, transparent); + background: color-mix(in srgb, var(--v2-accent) 9%, transparent); } .v2-model-route-scroll section > button:disabled { opacity: .5; } .v2-model-route-scroll section > button > span { display: grid; gap: 1px; min-width: 0; } @@ -2216,8 +2215,8 @@ } } -/* Model catalog styles live in the external production stylesheet so the strict - style-src 'self' CSP remains intact. Static provider IDs select fixed brand tints. */ +/* Model catalog styles use the same material tokens in the external stylesheet, + preserving the style-src 'self' CSP. */ .model-optional-prices summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .model-optional-prices > p { color: var(--v2-muted); line-height: 1.5; } .model-optional-prices { border-top: 1px solid var(--v2-border); margin-top: 20px; padding-top: 14px; }