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

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))"