iter(g328): 语义三色淡底补令牌并纳入表面阶梯

.ua/backlog.json

@@ -3338,6 +3338,15 @@
       "motivation": "步骤条只有 done/current/upcoming 三态，某步校验失败时只能把 active 退回去，于是「失败」和「还没走到」长得一模一样——用户看不出是卡住了还是失败了；另外 clickable 时只有圆点能点，标题文字点不动，手指落在文字上是空操作。",
       "acceptance": "① StepperItem 增可选 status: 'error'：该步红点 + 感叹号 + 标题标红，优先级高于进度态、不进 done 也不占 current、不参与回跳；② 失败符号带 role=img + aria-label「第 N 步失败：xx」，读屏不读孤立感叹号；③ clickable 时整个步骤条可点（圆点按钮 + 标题文字），点按钮与点文字各只触发一次 onChange；④ 样式只消费 --ua-*（danger 色 / alpha-soft 淡底 / weight-semibold），audit:visual 计数不涨；⑤ manifest props/步骤与演示同步，npm run check 全绿。",
       "notes": ""
+    },
+    {
+      "id": "g328",
+      "domain": "visual",
+      "status": "open",
+      "title": "语义三色淡底补令牌：同一组件里 info 与其余三色不再两套口径",
+      "motivation": "accent 有 --ua-color-tint-accent（亮 10% / 暗 14%），语义三色却没有对应令牌，15 处淡底全靠手写 color-mix：同一组 toast / tag 里 info 走令牌（透明叠加）、success / warning / danger 走「与页面底混色」（不透明），四种语义档的底其实两套口径；手写浓度也无法被门禁守住——accent 那档被 audit:surface 抓到过暗色几乎看不见，语义三色同样没有栅栏。",
+      "acceptance": "① tokens.css 新增 --ua-color-tint-danger / -success / -warning（亮色 var(--ua-alpha-soft)，暗色 14%，与 accent 分档同构），tokens.json 同步三键（verify 的名字与值双源校验要过）；② ui.css 15 处手写语义淡底（含与页面底混色的 6 处）统一换成令牌，四种语义档只剩一套口径；③ audit:surface 阶梯新增「表面 → 危险/成功/警告淡底」三档（阈值 1.04），四套主题全部实测达标；④ audit:visual 混色浓度计数不涨；⑤ npm run check 全绿。",
+      "notes": ""
     }
   ]
 }

llms-full.txt

@@ -2803,6 +2803,9 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id[,组件id…
 - --ua-color-danger: #a32d2d（暗色 #d96a6a）
 - --ua-color-success: #0f6e56（暗色 #4fc39e）
 - --ua-color-warning: #9a6b1f（暗色 #d9a94f）
+- --ua-color-tint-danger: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent)（暗色 color-mix(in srgb, var(--ua-color-danger) 14%, transparent)）
+- --ua-color-tint-success: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), transparent)（暗色 color-mix(in srgb, var(--ua-color-success) 14%, transparent)）
+- --ua-color-tint-warning: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), transparent)（暗色 color-mix(in srgb, var(--ua-color-warning) 14%, transparent)）
 - --ua-alpha-soft: 10%
 - --ua-alpha-tint: 18%
 - --ua-alpha-line: 30%

packages/design/tokens/tokens.css

@@ -27,6 +27,9 @@
   --ua-color-danger: #a32d2d; /* 危险色：错误、删除、校验失败 */
   --ua-color-success: #0f6e56; /* 成功色：完成、通过、正向结果 */
   --ua-color-warning: #9a6b1f; /* 警告色：提醒、需注意但不阻断 */
+  --ua-color-tint-danger: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent); /* 语义淡底（危险）：错误提示条、失败步骤底、删除按钮悬停底 */
+  --ua-color-tint-success: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), transparent); /* 语义淡底（成功）：通过提示、完成态条底 */
+  --ua-color-tint-warning: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), transparent); /* 语义淡底（警告）：需注意但不断言的提示底 */
 
   /* ---- 混色浓度：color-mix 里「混入多少」的档位，百分比亮暗通用（近档已就近收敛：12→10、16/20/24→18、40→45、65/80→70） ---- */
   --ua-alpha-soft: 10%; /* 淡底档：选中底、激活项底、语义色淡底 */
@@ -167,6 +170,9 @@
   --ua-color-danger: #d96a6a; /* 暗色危险色 */
   --ua-color-success: #4fc39e; /* 暗色成功色 */
   --ua-color-warning: #d9a94f; /* 暗色警告色 */
+  --ua-color-tint-danger: color-mix(in srgb, var(--ua-color-danger) 14%, transparent); /* 暗色语义淡底（危险）：与 accent 暗色同档，否则暗底上看不出「这一块是错误」 */
+  --ua-color-tint-success: color-mix(in srgb, var(--ua-color-success) 14%, transparent); /* 暗色语义淡底（成功） */
+  --ua-color-tint-warning: color-mix(in srgb, var(--ua-color-warning) 14%, transparent); /* 暗色语义淡底（警告） */
 
   /* 暗色下投影需要更高黑度才看得见：亮色那套在暗底上几乎不可见 */
   --ua-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); /* 暗色 1 档：贴地投影 */

packages/design/tokens/tokens.json

@@ -89,6 +89,18 @@
       "light": "color-mix(in srgb, var(--ua-color-accent) 5%, transparent)",
       "dark": "color-mix(in srgb, var(--ua-color-accent) 8%, transparent)"
     },
+    "tintDanger": {
+      "light": "color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent)",
+      "dark": "color-mix(in srgb, var(--ua-color-danger) 14%, transparent)"
+    },
+    "tintSuccess": {
+      "light": "color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), transparent)",
+      "dark": "color-mix(in srgb, var(--ua-color-success) 14%, transparent)"
+    },
+    "tintWarning": {
+      "light": "color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), transparent)",
+      "dark": "color-mix(in srgb, var(--ua-color-warning) 14%, transparent)"
+    },
     "accentSoft": {
       "light": "color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg))",
       "dark": "color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg))"

packages/skin/ui/ui.css

@@ -644,7 +644,7 @@ body.ua-col-resizing {
   color: var(--ua-color-danger);
 }
 .ua-menu-item.is-danger:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-danger);
 }
 .ua-menu-label {
   flex: 1;
@@ -899,15 +899,15 @@ body.ua-col-resizing {
 }
 .ua-tag-success {
   border-color: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-strong), transparent);
-  background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), var(--ua-color-bg));
+  background: var(--ua-color-tint-success);
 }
 .ua-tag-warning {
   border-color: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-strong), transparent);
-  background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), var(--ua-color-bg));
+  background: var(--ua-color-tint-warning);
 }
 .ua-tag-danger {
   border-color: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-strong), transparent);
-  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), var(--ua-color-bg));
+  background: var(--ua-color-tint-danger);
 }
 .ua-tag-info {
   border-color: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), transparent);
@@ -1174,7 +1174,7 @@ button.ua-step-dot:hover {
 }
 .ua-step-error .ua-step-dot {
   border-color: var(--ua-color-danger);
-  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent); /* 失败步骤只给淡底，不抢当前步的光环 */
+  background: var(--ua-color-tint-danger); /* 失败步骤只给淡底，不抢当前步的光环 */
   color: var(--ua-color-danger);
   font-weight: var(--ua-weight-semibold);
 }
@@ -1427,15 +1427,15 @@ button.ua-step-dot:hover {
 }
 .ua-alert-success {
   border-color: var(--ua-color-success);
-  background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-success);
 }
 .ua-alert-warning {
   border-color: var(--ua-color-warning);
-  background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-warning);
 }
 .ua-alert-danger {
   border-color: var(--ua-color-danger);
-  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-danger);
 }
 
 /* —— 独立分页器 —— */
@@ -1611,15 +1611,15 @@ button.ua-step-dot:hover {
 }
 .ua-toast-success {
   border-color: var(--ua-color-success);
-  background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), var(--ua-color-bg));
+  background: var(--ua-color-tint-success);
 }
 .ua-toast-warning {
   border-color: var(--ua-color-warning);
-  background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), var(--ua-color-bg));
+  background: var(--ua-color-tint-warning);
 }
 .ua-toast-danger {
   border-color: var(--ua-color-danger);
-  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), var(--ua-color-bg));
+  background: var(--ua-color-tint-danger);
 }
 
 /* —— 加载指示器 —— */
@@ -4264,7 +4264,7 @@ button.ua-step-dot:hover {
   padding: var(--ua-space-2) var(--ua-space-3);
   border: 1px solid color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-mid), transparent);
   border-radius: var(--ua-radius-sm);
-  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-danger);
   color: var(--ua-color-danger);
   font-size: var(--ua-font-size-md);
 }
@@ -6134,17 +6134,17 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 
 .ua-notice-success {
   border-color: var(--ua-color-success);
-  background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-success);
 }
 
 .ua-notice-warning {
   border-color: var(--ua-color-warning);
-  background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-warning);
 }
 
 .ua-notice-danger {
   border-color: var(--ua-color-danger);
-  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
+  background: var(--ua-color-tint-danger);
 }
 
 @keyframes ua-notice-roll {

packages/tools/cli/lib/surface-audit.mjs

@@ -11,6 +11,10 @@ export const LADDER = [
   { label: '表面 → 凹陷底', from: 'surface', to: 'surface-inset', min: 1.02 }, // 凹陷区自带边框与内阴影，可放宽一档
   { label: '表面 → 淡底标准档', from: 'surface', to: 'tint-accent', min: 1.04 }, // 选中项底：半透明 accent 压在表面上，浓度调低即看不出「选中」
   { label: '表面 → 淡底弱档', from: 'surface', to: 'tint-accent-weak', min: 1.04 }, // 悬停底（列表 / 选项 / 行）：比标准档更弱，最容易被调到看不见
+  // 语义三色淡底：错误 / 成功 / 警告提示条的底，浓度被调低时提示条会退化成普通卡片（只剩边框与图标在说话）
+  { label: '表面 → 危险淡底', from: 'surface', to: 'tint-danger', min: 1.04 },
+  { label: '表面 → 成功淡底', from: 'surface', to: 'tint-success', min: 1.04 },
+  { label: '表面 → 警告淡底', from: 'surface', to: 'tint-warning', min: 1.04 },
 ];
 
 /*** 作用：按四套主题（亮 / 暗 × 常规 / 高对比）逐档算亮度比，返回明细与未达标项 ***/