temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g295): 新增表面阶梯审计并修正悬停底

Browse Source
This commit is contained in:
HIsheR
2026-10-26 23:35:57 +08:00
parent df40eb0073
commit 3533459e00
11 changed files with 105 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/design/tokens/tokens.css
+4 -4
View File
@@ -6,8 +6,8 @@
/* ---- 颜色：语义色，暗色主题逐个覆盖 ---- */
--ua-color-bg: #ffffff; /* 页面底色：弹层、卡片之外的最底层 */
--ua-color-surface: #f6f7f9; /* 表面色：卡片 / 表头 / 次级容器 */
--ua-color-surface-2: color-mix(in srgb, var(--ua-color-text) 4%, var(--ua-color-bg)); /* 表面二阶：悬停底、次级容器 */
--ua-color-surface-3: color-mix(in srgb, var(--ua-color-text) 8%, var(--ua-color-bg)); /* 表面三阶：按下底、最深容器 */
--ua-color-surface-2: color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-surface)); /* 表面二阶：悬停底、次级容器——从「表面」而非页底派生，卡片 / 弹层之上的悬停才看得出变化 */
--ua-color-surface-3: color-mix(in srgb, var(--ua-color-text) 14%, var(--ua-color-surface)); /* 表面三阶：按下底、最深容器——与二阶拉开一档，按下比悬停更实 */
--ua-color-surface-inset: color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg)); /* 凹陷区：输入框 / 代码块底 */
--ua-color-text: #1c1e21; /* 主文本色：正文与标题共用 */
--ua-color-text-muted: #676d78; /* 辅助文本色：说明、占位、次要信息（比原值略深：凹陷底上原值仅 4.39，过不了 AA 4.5） */
@@ -145,8 +145,8 @@
[data-theme='dark'] {
--ua-color-bg: #101216; /* 暗色页面底色 */
--ua-color-surface: #1a1c22; /* 暗色表面色 */
--ua-color-surface-2: color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg)); /* 暗色表面二阶：悬停底、次级容器 */
--ua-color-surface-3: color-mix(in srgb, var(--ua-color-text) 10%, var(--ua-color-bg)); /* 暗色表面三阶：按下底、最深容器 */
--ua-color-surface-2: color-mix(in srgb, var(--ua-color-text) 7%, var(--ua-color-surface)); /* 暗色表面二阶：悬停底、次级容器（与亮色同结构，暗底上要多混两档才看得见） */
--ua-color-surface-3: color-mix(in srgb, var(--ua-color-text) 17%, var(--ua-color-surface)); /* 暗色表面三阶：按下底、最深容器 */
--ua-color-surface-inset: color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-bg)); /* 暗色凹陷区：输入框 / 代码块底 */
--ua-color-text: #e7e9ec; /* 暗色主文本色 */
--ua-color-text-muted: #888780; /* 暗色辅助文本色 */
packages/design/tokens/tokens.json
+4 -4
View File
@@ -54,12 +54,12 @@
"dark": "#d9a94f"
},
"surface2": {
"light": "color-mix(in srgb, var(--ua-color-text) 4%, var(--ua-color-bg))",
"dark": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))"
"light": "color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-surface))",
"dark": "color-mix(in srgb, var(--ua-color-text) 7%, var(--ua-color-surface))"
},
"surface3": {
"light": "color-mix(in srgb, var(--ua-color-text) 8%, var(--ua-color-bg))",
"dark": "color-mix(in srgb, var(--ua-color-text) 10%, var(--ua-color-bg))"
"light": "color-mix(in srgb, var(--ua-color-text) 14%, var(--ua-color-surface))",
"dark": "color-mix(in srgb, var(--ua-color-text) 17%, var(--ua-color-surface))"
},
"surfaceInset": {
"light": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))",