diff --git a/.ua/visual-baseline.json b/.ua/visual-baseline.json index 5fa9912..58b1e16 100644 --- a/.ua/visual-baseline.json +++ b/.ua/visual-baseline.json @@ -1,16 +1,16 @@ { "$schema": "视觉漂移基线:各类硬编码视觉字面量的允许上限,任一类超出即 ua audit:visual 退出码 1;迁移后用 --baseline 重写", "file": "packages/skin/ui/ui.css", - "commit": "43d35fc", - "generatedAt": "2026-10-26T09:52:26.009Z", + "commit": "654a9dd", + "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, diff --git a/llms-full.txt b/llms-full.txt index 4d7ec29..0dd276f 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -2224,6 +2224,10 @@ node packages/tools/cli/bin/ua.js |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 diff --git a/packages/design/tokens/tokens.css b/packages/design/tokens/tokens.css index 420e9ae..be667e5 100644 --- a/packages/design/tokens/tokens.css +++ b/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 翻转,与亮色同结构 */ } diff --git a/packages/design/tokens/tokens.json b/packages/design/tokens/tokens.json index 43d2a3b..6420ce6 100644 --- a/packages/design/tokens/tokens.json +++ b/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": { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index e64a309..b430dbd 100644 --- a/packages/skin/ui/ui.css +++ b/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;