iter(g196): 中性色阶地基补表面文字遮罩中间档令牌

2026-10-26 18:07:05 +08:00
parent fb69321fea
commit 9ef863739d
3 changed files with 30 additions and 9 deletions
@@ -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; /* 暗色强调色上的文字色：深色反白，维持对比 */