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

2026-10-27 01:58:02 +08:00
parent 04433ee19f
commit 2d93480fbf
7 changed files with 50 additions and 16 deletions
@@ -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 档：贴地投影 */
@@ -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))"
@@ -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 {
@@ -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 },
 ];

 /*** 作用：按四套主题（亮 / 暗 × 常规 / 高对比）逐档算亮度比，返回明细与未达标项 ***/