temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
HIsheR
2026-10-26 17:53:54 +08:00
parent 654a9ddfb4
commit bb28f86a11
5 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/design/tokens/tokens.css
+8
View File
@@ -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
+16
View File
@@ -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
+4 -4
View File
@@ -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;