From 9ef863739de076042b634225af5b24ea400a00b2 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 18:07:05 +0800 Subject: [PATCH] =?UTF-8?q?iter(g196):=20=E4=B8=AD=E6=80=A7=E8=89=B2?= =?UTF-8?q?=E9=98=B6=E5=9C=B0=E5=9F=BA=E8=A1=A5=E8=A1=A8=E9=9D=A2=E6=96=87?= =?UTF-8?q?=E5=AD=97=E9=81=AE=E7=BD=A9=E4=B8=AD=E9=97=B4=E6=A1=A3=E4=BB=A4?= =?UTF-8?q?=E7=89=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- llms-full.txt | 7 +++++++ packages/design/tokens/tokens.css | 14 ++++++++++++++ packages/skin/ui/ui.css | 18 +++++++++--------- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/llms-full.txt b/llms-full.txt index d78e60d..a0b0416 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -2172,8 +2172,15 @@ node packages/tools/cli/bin/ua.js |docs|tokens - --ua-color-bg: #ffffff（暗色 #101216） - --ua-color-surface: #f6f7f9（暗色 #1a1c22） +- --ua-color-surface-2: color-mix(in srgb, var(--ua-color-text) 4%, var(--ua-color-bg))（暗色 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) 8%, var(--ua-color-bg))（暗色 color-mix(in srgb, var(--ua-color-text) 10%, var(--ua-color-bg))） +- --ua-color-surface-inset: color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))（暗色 color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-bg))） - --ua-color-text: #1c1e21（暗色 #e7e9ec） - --ua-color-text-muted: #6b7280（暗色 #888780） +- --ua-color-text-secondary: #4b5158（暗色 #b4bac2） +- --ua-color-text-faint: #9aa0a8（暗色 #62676f） +- --ua-color-overlay: rgba(0, 0, 0, 0.45)（暗色 rgba(0, 0, 0, 0.6)） +- --ua-color-overlay-strong: rgba(0, 0, 0, 0.6)（暗色 rgba(0, 0, 0, 0.7)） - --ua-color-border: rgba(0, 0, 0, 0.15)（暗色 rgba(255, 255, 255, 0.15)） - --ua-color-accent: #185fa5（暗色 #378add） - --ua-color-accent-contrast: #ffffff（暗色 #042c53） diff --git a/packages/design/tokens/tokens.css b/packages/design/tokens/tokens.css index 0131491..f88b647 100644 --- a/packages/design/tokens/tokens.css +++ b/packages/design/tokens/tokens.css @@ -6,8 +6,15 @@ /* ---- 颜色：语义色，暗色主题逐个覆盖 ---- */ --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-inset: color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg)); /* 凹陷区：输入框 / 代码块底 */ --ua-color-text: #1c1e21; /* 主文本色：正文与标题共用 */ --ua-color-text-muted: #6b7280; /* 辅助文本色：说明、占位、次要信息 */ + --ua-color-text-secondary: #4b5158; /* 次级文本色：介于主文本与辅助文本之间 */ + --ua-color-text-faint: #9aa0a8; /* 三级文本色：禁用、极弱说明 */ + --ua-color-overlay: rgba(0, 0, 0, 0.45); /* 遮罩：抽屉 / 弹窗 / 命令面板等半透明底 */ + --ua-color-overlay-strong: rgba(0, 0, 0, 0.6); /* 强遮罩：大图预览等需要更强聚焦的浮层 */ --ua-color-border: rgba(0, 0, 0, 0.15); /* 基础边框色：输入框 / 卡片 / 分割线 */ --ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */ --ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */ @@ -106,8 +113,15 @@ [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-inset: color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-bg)); /* 暗色凹陷区：输入框 / 代码块底 */ --ua-color-text: #e7e9ec; /* 暗色主文本色 */ --ua-color-text-muted: #888780; /* 暗色辅助文本色 */ + --ua-color-text-secondary: #b4bac2; /* 暗色次级文本色 */ + --ua-color-text-faint: #62676f; /* 暗色三级文本色：禁用、极弱说明 */ + --ua-color-overlay: rgba(0, 0, 0, 0.6); /* 暗色遮罩：暗底上需加深才可分辨 */ + --ua-color-overlay-strong: rgba(0, 0, 0, 0.7); /* 暗色强遮罩 */ --ua-color-border: rgba(255, 255, 255, 0.15); /* 暗色基础边框色：改用白色低透明度，避免黑边在暗底上消失 */ --ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */ --ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */ diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 94d2f0e..81d32b4 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -1730,7 +1730,7 @@ button.ua-step-dot:hover { position: fixed; inset: 0; z-index: var(--ua-z-overlay); - background: rgba(0, 0, 0, 0.36); + background: var(--ua-color-overlay); opacity: 0; visibility: hidden; transition: opacity var(--ua-duration-base) ease, visibility var(--ua-duration-base) var(--ua-ease); @@ -1829,7 +1829,7 @@ button.ua-step-dot:hover { position: fixed; inset: 0; z-index: var(--ua-z-overlay); - background: rgba(0, 0, 0, 0.4); + background: var(--ua-color-overlay); align-items: center; justify-content: center; } @@ -2057,7 +2057,7 @@ button.ua-step-dot:hover { display: flex; align-items: center; justify-content: center; - background: rgba(0, 0, 0, 0.6); /* 遮罩透明度叠加，非实体色 */ + background: var(--ua-color-overlay-strong); /* 强遮罩：聚焦大图 */ cursor: zoom-out; animation: ua-image-in var(--ua-duration-base) ease; } @@ -2113,7 +2113,7 @@ button.ua-step-dot:hover { align-items: center; padding: var(--ua-space-15) var(--ua-space-25); color: var(--ua-color-text-muted); - background: color-mix(in srgb, var(--ua-color-text) 5%, transparent); + background: var(--ua-color-surface-inset); font-size: var(--ua-font-size-md); user-select: none; } @@ -2291,7 +2291,7 @@ button.ua-step-dot:hover { display: inline-flex; border: 1px solid var(--ua-color-border); border-radius: 999px; - background: color-mix(in srgb, var(--ua-color-text) 4%, transparent); + background: var(--ua-color-surface-2); overflow: hidden; } .ua-seg-thumb { @@ -2420,7 +2420,7 @@ button.ua-step-dot:hover { } .ua-desc.is-bordered .ua-desc-label { padding: var(--ua-space-15) var(--ua-space-25); - background: color-mix(in srgb, var(--ua-color-text) 4%, transparent); + background: var(--ua-color-surface-2); border-right: 1px solid var(--ua-color-border); white-space: nowrap; } @@ -3657,7 +3657,7 @@ button.ua-step-dot:hover { .ua-tour-spot { position: absolute; border-radius: var(--ua-radius-md); - box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); + box-shadow: 0 0 0 9999px var(--ua-color-overlay); transition: all var(--ua-duration-base) ease; } .ua-tour-card { @@ -4775,7 +4775,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } padding: 0 var(--ua-space-3); /* 行高由行内样式按 itemHeight 钉死 */ } .ua-vlist-item + .ua-vlist-item { - border-top: 1px solid color-mix(in srgb, var(--ua-color-border) 60%, transparent); + border-top: 1px solid var(--ua-border-subtle); } /* —— 命令面板：⌘K 唤起，遮罩 + 居中面板 —— */ @@ -4787,7 +4787,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } align-items: flex-start; justify-content: center; padding-top: 12vh; - background: rgba(0, 0, 0, 0.4); + background: var(--ua-color-overlay); } .ua-cmdk.ua-open { display: flex;