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

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; /* 暗色强调色上的文字色：深色反白，维持对比 */

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;