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

iter(g239): 焦点描边令牌化，outline 收敛为三档复合令牌并纳入审计第十四类

Browse Source
This commit is contained in:
HIsheR
2026-10-26 21:37:57 +08:00
parent 9e85ef3f12
commit 53338960be
7 changed files with 73 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+20 -20
View File
@@ -3,7 +3,7 @@
/* —— 键盘焦点可见性：组件普遍用 outline:none 自绘，这里统一兜底，避免键盘用户丢失焦点指示 —— */
[class^='ua-']:focus-visible,
[class*=' ua-']:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 2px;
}
/* —— 控件高度三档：所有可交互控件统一走 --ua-control-h-*，size 档只改高度 —— */
@@ -485,7 +485,7 @@ body.ua-col-resizing {
但两者的密集列表换成内嵌描边后更整齐；与 cascader 项保持同一口径 */
.ua-option:focus-visible,
.ua-menu-item:focus-visible {
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline: var(--ua-focus-outline-inset); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
/* 选中态：低视觉比重——淡色底 + 弱化文字，不抢焦点 */
@@ -884,7 +884,7 @@ body.ua-col-resizing {
transform: scale(0.97);
}
.ua-tag.is-checkable:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent);
outline: var(--ua-focus-outline-soft);
outline-offset: 2px;
}
.ua-tag.is-checked {
@@ -1138,7 +1138,7 @@ button.ua-step-dot:hover {
gap: var(--ua-space-05);
}
.ua-rate:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent);
outline: var(--ua-focus-outline-soft);
outline-offset: 3px;
border-radius: var(--ua-radius-sm);
}
@@ -1676,7 +1676,7 @@ button.ua-step-dot:hover {
.ua-tab:focus-visible {
/* 页签条是 overflow-x:auto 的滚动容器，外偏移焦点环会被裁掉，
这里改用与 seg-btn 一致的内嵌描边，键盘用户才真看得见焦点 */
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline: var(--ua-focus-outline-inset); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
color: var(--ua-color-accent);
}
@@ -1717,7 +1717,7 @@ button.ua-step-dot:hover {
}
.ua-tab-close:focus-visible {
opacity: 1;
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 1px;
}
.ua-tab-close:hover {
@@ -2441,7 +2441,7 @@ button.ua-step-dot:hover {
color: var(--ua-color-text);
}
.ua-seg-btn:focus-visible {
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline: var(--ua-focus-outline-inset); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
.ua-seg-btn.is-active {
@@ -3250,7 +3250,7 @@ button.ua-step-dot:hover {
cursor: not-allowed;
}
.ua-cascader-opt:focus-visible {
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline: var(--ua-focus-outline-inset); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
.ua-cascader-arrow {
@@ -3305,7 +3305,7 @@ button.ua-step-dot:hover {
background: var(--ua-color-accent);
}
.ua-splitter-bar:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
@@ -3526,7 +3526,7 @@ button.ua-step-dot:hover {
cursor: not-allowed;
}
.ua-datepicker-day:focus-visible {
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline: var(--ua-focus-outline-inset); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px;
}
.ua-datepicker-foot {
@@ -3603,7 +3603,7 @@ button.ua-step-dot:hover {
transform: translateY(calc(-1 * var(--ua-translate-2)));
}
.ua-backtop:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 3px;
}
.ua-backtop-ring {
@@ -4091,7 +4091,7 @@ button.ua-step-dot:hover {
pointer-events: none;
}
.ua-anchor-link:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
@@ -4160,7 +4160,7 @@ button.ua-step-dot:hover {
background: var(--ua-color-tint-accent);
}
.ua-select-clear:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 1px;
}
.ua-select-clear[hidden] {
@@ -4183,7 +4183,7 @@ button.ua-step-dot:hover {
background: var(--ua-color-tint-accent-weak);
}
.ua-crumb-fold:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 1px;
}
@@ -4205,7 +4205,7 @@ button.ua-step-dot:hover {
text-decoration: underline;
}
.ua-toast-action:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 2px;
}
@@ -4245,7 +4245,7 @@ button.ua-step-dot:hover {
background: var(--ua-color-tint-accent-weak);
}
.ua-calendar-nav:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 1px;
}
.ua-calendar-week,
@@ -4292,7 +4292,7 @@ button.ua-step-dot:hover {
transform: none;
}
.ua-calendar-day:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 1px;
}
.ua-calendar-mark {
@@ -4475,7 +4475,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
transform: translateY(0) scale(0.97);
}
.ua-fab:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 2px;
}
.ua-fab-icon {
@@ -4677,7 +4677,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
text-decoration: underline;
}
.ua-link:focus-visible {
outline: 2px solid var(--ua-color-accent);
outline: var(--ua-focus-outline);
outline-offset: 2px;
border-radius: var(--ua-radius-sm);
}
@@ -4730,7 +4730,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
background: var(--ua-color-tint-accent-weak);
}
.ua-row-clickable:focus-visible {
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline: var(--ua-focus-outline-inset); /* 内嵌焦点环：细一档 + 柔和色，2px 实色在密集列表里像粗边框 */
outline-offset: -1.5px; /* 环画在行内，避免被表格滚动容器裁掉 */
}