highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-08-03 11:10:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): deepen canvas contrast

Browse Source
This commit is contained in:
Jiayuan Zhang
2026-07-11 12:46:22 +08:00
parent b65edd7e0b
commit 14ed33b9fd
3 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/custom.css
View File

@@ -16,8 +16,8 @@
color-scheme: light;
}
.landing-light {
--app-shell: oklch(0.976 0.002 286.32);
--page-canvas: oklch(0.995 0.001 286.32);
--app-shell: oklch(0.955 0.002 286.32);
--page-canvas: oklch(0.98 0.001 286.32);
--surface: oklch(1 0 0);
--surface-foreground: oklch(0.141 0.005 285.823);
--surface-raised: oklch(1 0 0);

1
docs/design.md
View File

@@ -32,6 +32,7 @@ Surface 系统描述的是容器之间的关系，不是把每一段内容都包
规则：
- Page Canvas 是默认内容面。需要分组时先用间距和分割线，只有独立操作或独立信息块才使用 Surface。
- 浅色模式中，`page-canvas` 必须与纯白 `surface` 保持可见但克制的明度差（当前为 `0.98` 与 `1.00`）；不能只靠 border 区分设置组和页面背景。`app-shell` 与 sidebar 再各退后一级，形成由外向内逐步变亮的层级。
- Card 使用 `bg-surface border-surface-border shadow-[var(--surface-shadow)]`；浮层使用 `bg-surface-raised ring-surface-border shadow-[var(--floating-shadow)]`。
- `surface-hover` 只表示指针经过；`surface-selected` 表示持续选中。选中项 hover 时必须保留 `surface-selected`，不能退回 hover 状态。
- focus 一律使用 `focus-visible` ring。不要用阴影、尺寸变化或品牌大面积填充代替键盘焦点。

8
packages/ui/styles/tokens.css
View File

@@ -64,8 +64,8 @@
/* Surface system: the app shell is the quiet outer frame; the page canvas
is where lists, boards, and conversations live; surfaces are reserved
for bounded content groups; raised surfaces are ephemeral overlays. */
--app-shell: oklch(0.976 0.002 286.32);
--page-canvas: oklch(0.995 0.001 286.32);
--app-shell: oklch(0.955 0.002 286.32);
--page-canvas: oklch(0.98 0.001 286.32);
--surface: oklch(1 0 0);
--surface-foreground: oklch(0.141 0.005 285.823);
--surface-raised: oklch(1 0 0);
@@ -104,11 +104,11 @@
--chart-4: oklch(0.85 0.06 255);
--chart-5: oklch(0.92 0.03 255);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar: oklch(0.97 0.002 286.32);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.21 0.006 285.885);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.95 0.002 286.375);
--sidebar-accent: oklch(0.935 0.003 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.705 0.015 286.067);