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": {