iter(g191): 焦点环变体归零补语义环令牌

.ua/visual-baseline.json

@@ -1,16 +1,16 @@
 {
   "$schema": "视觉漂移基线：各类硬编码视觉字面量的允许上限，任一类超出即 ua audit:visual 退出码 1；迁移后用 --baseline 重写",
   "file": "packages/skin/ui/ui.css",
-  "commit": "43d35fc",
+  "commit": "654a9dd",
-  "generatedAt": "2026-10-26T09:52:26.009Z",
+  "generatedAt": "2026-10-26T09:53:34.712Z",
   "lines": 4874,
-  "total": 35,
+  "total": 27,
   "counts": {
     "font-size-literal": 0,
     "duration-literal": 9,
-    "shadow-literal": 9,
+    "shadow-literal": 5,
     "radius-literal": 0,
-    "focus-ring-variant": 4,
+    "focus-ring-variant": 0,
     "space-literal": 13,
     "control-h-literal": 0,
     "weight-literal": 0,

llms-full.txt

@@ -2224,6 +2224,10 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
 - --ua-ease-out: cubic-bezier(0.16, 1, 0.3, 1)
 - --ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent)（暗色 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 34%, transparent)）
 - --ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)（暗色 inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 52%, transparent)）
+- --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent)（暗色 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent)）
+- --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent)（暗色 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent)）
+- --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent)（暗色 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent)）
+- --ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent)
 - --ua-control-h-sm: 28px
 - --ua-control-h-md: 34px
 - --ua-control-h-lg: 40px

packages/design/tokens/tokens.css

@@ -74,6 +74,10 @@
   /* ---- 焦点环：统一外环与内嵌两种形态，全部由强调色派生 ---- */
   --ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent); /* 外焦点环：输入框 / 按钮 / 可聚焦控件 */
   --ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 内嵌焦点环：内部已裁切或需要贴合边框的控件 */
+  --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent); /* 语义警告焦点环：评分等以警告色为主色的控件 */
+  --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent); /* 错误强调环：校验失败时叠在被标红控件外侧，比 danger 描边更外扩一圈 */
+  --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent); /* 呼吸光晕档：与焦点环交替出现做脉冲动画（时间线条目） */
+  --ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 选中环（非焦点）：色板格子等「当前选中」标记，实色不透明 */
 
   /* ---- 控件高度：三档，略放大以提升可点面积 ---- */
   --ua-control-h-sm: 28px; /* 小控件高度：紧凑工具栏、标签内嵌按钮 */
@@ -109,4 +113,8 @@
   --ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 暗色主题色强投影 */
   --ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 34%, transparent); /* 暗色焦点环：透明度略升补对比 */
   --ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 52%, transparent); /* 暗色内嵌焦点环 */
+  --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent); /* 暗色警告焦点环 */
+  --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent); /* 暗色错误强调环 */
+  --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色呼吸光晕：暗底上低透明度看不见，加倍 */
+  --ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 暗色选中环：随 accent 翻转，与亮色同结构 */
 }

packages/design/tokens/tokens.json

@@ -127,6 +127,22 @@
     "ringInset": {
       "light": "inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)",
       "dark": "inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 52%, transparent)"
+    },
+    "ringWarning": {
+      "light": "0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent)",
+      "dark": "0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent)"
+    },
+    "ringDanger": {
+      "light": "0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent)",
+      "dark": "0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent)"
+    },
+    "ringPulse": {
+      "light": "0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent)",
+      "dark": "0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent)"
+    },
+    "ringSelected": {
+      "light": "0 0 0 2px var(--ua-color-accent)",
+      "dark": "0 0 0 2px var(--ua-color-accent)"
     }
   },
   "control": {

packages/skin/ui/ui.css

@@ -1095,7 +1095,7 @@ button.ua-step-dot:hover {
 }
 .ua-rate-star:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent);
+  box-shadow: var(--ua-focus-ring-warning);
   border-radius: var(--ua-radius-sm);
 }
 
@@ -1717,7 +1717,7 @@ button.ua-step-dot:hover {
 .ua-invalid .ua-radio,
 .ua-invalid .ua-slider-input {
   border-color: var(--ua-color-danger) !important;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 15%, transparent) !important;
+  box-shadow: var(--ua-focus-ring-danger) !important;
 }
 .ua-form-actions {
   display: flex;
@@ -2274,7 +2274,7 @@ button.ua-step-dot:hover {
 }
 @keyframes ua-tl-pulse {
   0%, 100% { box-shadow: var(--ua-focus-ring); }
-  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent); }
+  50% { box-shadow: var(--ua-focus-ring-pulse); }
 }
 @media (prefers-reduced-motion: reduce) {
   .ua-tl-item,
@@ -3604,7 +3604,7 @@ button.ua-step-dot:hover {
   transform: translateY(-1px);
 }
 .ua-colorpicker-cell.is-selected {
-  box-shadow: 0 0 0 2px var(--ua-color-accent);
+  box-shadow: var(--ua-focus-ring-selected);
 }
 .ua-colorpicker-custom {
   display: flex;