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

iter(g229): 混色浓度令牌化并入视觉棘轮

Browse Source
This commit is contained in:
HIsheR
2026-10-26 20:40:52 +08:00
parent 7579170912
commit 36c787a203
8 changed files with 162 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+45 -45
View File
@@ -81,7 +81,7 @@
}
/* 输入类悬停：边框加深一档，提示可交互但不抢焦点 */
.ua-input:hover:not(:disabled):not(:focus-visible) {
border-color: color-mix(in srgb, var(--ua-color-text) 30%, var(--ua-color-border));
border-color: color-mix(in srgb, var(--ua-color-text) var(--ua-alpha-line), var(--ua-color-border));
}
.ua-input:focus-visible {
outline: none;
@@ -129,7 +129,7 @@
.ua-card-hoverable:hover {
transform: translateY(-2px);
box-shadow: var(--ua-shadow-2); /* 悬停浮起：从 1 档升到 2 档，一档之差刚好可感 */
border-color: color-mix(in srgb, var(--ua-color-border) 55%, transparent); /* 阴影接手层次，边框同步减淡，两者配合而非叠加 */
border-color: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-strong), transparent); /* 阴影接手层次，边框同步减淡，两者配合而非叠加 */
}
.ua-table table {
width: 100%;
@@ -205,7 +205,7 @@ body.ua-col-resizing {
transition: background var(--ua-duration-fast) var(--ua-ease);
}
.ua-table tbody tr:nth-child(even) {
background: color-mix(in srgb, var(--ua-color-border) 18%, transparent);
background: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-tint), transparent);
}
.ua-table tbody tr:hover {
background: var(--ua-color-tint-accent-weak);
@@ -338,7 +338,7 @@ body.ua-col-resizing {
.ua-switch.is-loading .ua-switch-thumb {
box-sizing: border-box; /* 滑块换成转圈环：border 计入尺寸 */
background: transparent;
border: 2px solid color-mix(in srgb, var(--ua-color-bg) 40%, transparent);
border: 2px solid color-mix(in srgb, var(--ua-color-bg) var(--ua-alpha-mid), transparent);
border-top-color: var(--ua-color-bg);
animation: ua-spin var(--ua-duration-loop-mid) linear infinite; /* 复用全局转圈：同一帧体不再各写一份 */
}
@@ -370,7 +370,7 @@ body.ua-col-resizing {
transition: border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease), background var(--ua-duration-fast) var(--ua-ease);
}
.ua-select-trigger:hover {
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, var(--ua-color-border));
border-color: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), var(--ua-color-border));
}
/* 按下：底色加深一档，与悬停的描边反馈形成两段式 */
.ua-select-trigger:active:not(:disabled) {
@@ -584,7 +584,7 @@ body.ua-col-resizing {
color: var(--ua-color-danger);
}
.ua-menu-item.is-danger:hover:not(:disabled) {
background: color-mix(in srgb, var(--ua-color-danger) 10%, transparent);
background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
}
.ua-menu-label {
flex: 1;
@@ -811,15 +811,15 @@ body.ua-col-resizing {
object-fit: cover;
}
.ua-avatar-success {
background: color-mix(in srgb, var(--ua-color-success) 16%, transparent);
background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-tint), transparent);
color: var(--ua-color-success);
}
.ua-avatar-warning {
background: color-mix(in srgb, var(--ua-color-warning) 18%, transparent);
background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-tint), transparent);
color: var(--ua-color-warning);
}
.ua-avatar-danger {
background: color-mix(in srgb, var(--ua-color-danger) 16%, transparent);
background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-tint), transparent);
color: var(--ua-color-danger);
}
@@ -838,19 +838,19 @@ body.ua-col-resizing {
transition: border-color var(--ua-duration-fast) var(--ua-ease), background var(--ua-duration-fast) var(--ua-ease);
}
.ua-tag-success {
border-color: color-mix(in srgb, var(--ua-color-success) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-success) 10%, var(--ua-color-bg));
border-color: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-strong), transparent);
background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), var(--ua-color-bg));
}
.ua-tag-warning {
border-color: color-mix(in srgb, var(--ua-color-warning) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-warning) 12%, var(--ua-color-bg));
border-color: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-strong), transparent);
background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), var(--ua-color-bg));
}
.ua-tag-danger {
border-color: color-mix(in srgb, var(--ua-color-danger) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-danger) 10%, var(--ua-color-bg));
border-color: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-strong), transparent);
background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), var(--ua-color-bg));
}
.ua-tag-info {
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, transparent);
border-color: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), transparent);
background: var(--ua-color-tint-accent);
}
.ua-tag-close {
@@ -884,11 +884,11 @@ 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) 45%, transparent);
outline: 2px solid color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent);
outline-offset: 2px;
}
.ua-tag.is-checked {
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, transparent);
border-color: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), transparent);
background: var(--ua-color-tint-accent);
color: var(--ua-color-text);
}
@@ -911,7 +911,7 @@ body.ua-col-resizing {
height: 4px;
margin: 0;
border-radius: var(--ua-radius-sm);
background: color-mix(in srgb, var(--ua-color-border) 70%, transparent);
background: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-heavy), transparent);
accent-color: var(--ua-color-accent);
cursor: pointer;
transition: opacity var(--ua-duration-fast) var(--ua-ease);
@@ -944,7 +944,7 @@ body.ua-col-resizing {
right: 0;
height: 4px;
border-radius: var(--ua-radius-sm);
background: color-mix(in srgb, var(--ua-color-border) 70%, transparent);
background: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-heavy), transparent);
}
.ua-slider-seg {
position: absolute;
@@ -988,7 +988,7 @@ body.ua-col-resizing {
}
/* 输入类悬停：边框加深一档，与 .ua-input 同步 */
.ua-textarea:hover:not(:disabled):not(:focus-visible) {
border-color: color-mix(in srgb, var(--ua-color-text) 30%, var(--ua-color-border));
border-color: color-mix(in srgb, var(--ua-color-text) var(--ua-alpha-line), var(--ua-color-border));
}
.ua-textarea-count-group {
display: flex; /* 字数统计 + 原有 suffix 并排靠右 */
@@ -1057,7 +1057,7 @@ body.ua-col-resizing {
display: none; /* 末步没有下一段可连 */
}
.ua-stepper.is-vertical .ua-step-done::after {
background: color-mix(in srgb, var(--ua-color-accent) 55%, transparent); /* 已走完的一段用主色，进度一眼可读 */
background: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), transparent); /* 已走完的一段用主色，进度一眼可读 */
}
.ua-step {
display: flex;
@@ -1102,7 +1102,7 @@ button.ua-step-dot:hover {
transform: translateY(-1px);
}
.ua-step-done .ua-step-dot {
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, transparent);
border-color: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), transparent);
background: var(--ua-color-tint-accent);
color: var(--ua-color-accent);
}
@@ -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) 45%, transparent);
outline: 2px solid color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent);
outline-offset: 3px;
border-radius: var(--ua-radius-sm);
}
@@ -1355,15 +1355,15 @@ button.ua-step-dot:hover {
}
.ua-alert-success {
border-color: var(--ua-color-success);
background: color-mix(in srgb, var(--ua-color-success) 12%, transparent);
background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), transparent);
}
.ua-alert-warning {
border-color: var(--ua-color-warning);
background: color-mix(in srgb, var(--ua-color-warning) 12%, transparent);
background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), transparent);
}
.ua-alert-danger {
border-color: var(--ua-color-danger);
background: color-mix(in srgb, var(--ua-color-danger) 12%, transparent);
background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
}
/* —— 独立分页器 —— */
@@ -1452,14 +1452,14 @@ button.ua-step-dot:hover {
position: relative;
overflow: hidden;
border-radius: var(--ua-radius-sm);
background: color-mix(in srgb, var(--ua-color-border) 45%, transparent);
background: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-mid), transparent);
}
.ua-skeleton::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ua-color-bg) 65%, transparent), transparent);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ua-color-bg) var(--ua-alpha-heavy), transparent), transparent);
animation: ua-shimmer var(--ua-duration-loop-slow) ease-in-out infinite;
}
@keyframes ua-shimmer {
@@ -1541,15 +1541,15 @@ button.ua-step-dot:hover {
}
.ua-toast-success {
border-color: var(--ua-color-success);
background: color-mix(in srgb, var(--ua-color-success) 10%, var(--ua-color-bg));
background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-soft), var(--ua-color-bg));
}
.ua-toast-warning {
border-color: var(--ua-color-warning);
background: color-mix(in srgb, var(--ua-color-warning) 10%, var(--ua-color-bg));
background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-soft), var(--ua-color-bg));
}
.ua-toast-danger {
border-color: var(--ua-color-danger);
background: color-mix(in srgb, var(--ua-color-danger) 10%, var(--ua-color-bg));
background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), var(--ua-color-bg));
}
/* —— 加载指示器 —— */
@@ -1577,7 +1577,7 @@ button.ua-step-dot:hover {
flex: 1;
height: 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--ua-color-border) 40%, transparent);
background: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-mid), transparent);
overflow: hidden;
}
.ua-progress-fill {
@@ -1585,14 +1585,14 @@ button.ua-step-dot:hover {
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--ua-color-accent) 65%, transparent), var(--ua-color-accent));
background: linear-gradient(90deg, color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-heavy), transparent), var(--ua-color-accent));
transition: width var(--ua-duration-slower) var(--ua-ease-out);
}
.ua-progress-fill::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 12px);
background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ua-color-accent-contrast) var(--ua-alpha-tint), transparent) 0 6px, transparent 6px 12px);
background-size: 17px 100%;
animation: ua-stripe var(--ua-duration-loop-fast) linear infinite;
}
@@ -2449,7 +2449,7 @@ button.ua-step-dot:hover {
font-weight: var(--ua-weight-semibold);
}
.ua-seg-btn:disabled {
color: color-mix(in srgb, var(--ua-color-text-muted) 45%, transparent);
color: color-mix(in srgb, var(--ua-color-text-muted) var(--ua-alpha-mid), transparent);
cursor: not-allowed;
}
.ua-segmented-sm .ua-seg-btn {
@@ -3910,7 +3910,7 @@ button.ua-step-dot:hover {
}
.ua-multiselect-tag.is-more {
color: var(--ua-color-accent);
border: 1px dashed color-mix(in srgb, var(--ua-color-accent) 40%, transparent);
border: 1px dashed color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent);
background: transparent;
cursor: pointer;
font-variant-numeric: tabular-nums;
@@ -4124,9 +4124,9 @@ button.ua-step-dot:hover {
/* —— 表单错误汇总条 —— */
.ua-form-summary {
padding: var(--ua-space-2) var(--ua-space-3);
border: 1px solid color-mix(in srgb, var(--ua-color-danger) 45%, transparent);
border: 1px solid color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-mid), transparent);
border-radius: var(--ua-radius-sm);
background: color-mix(in srgb, var(--ua-color-danger) 10%, transparent);
background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-soft), transparent);
color: var(--ua-color-danger);
font-size: var(--ua-font-size-md);
}
@@ -4348,14 +4348,14 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
.ua-type.is-delete { text-decoration: line-through; color: var(--ua-color-text-muted); }
.ua-type.is-underline.is-delete { text-decoration: underline line-through; }
.ua-type.is-mark {
background: color-mix(in srgb, var(--ua-color-warning) 24%, transparent);
background: color-mix(in srgb, var(--ua-color-warning) var(--ua-alpha-tint), transparent);
border-radius: var(--ua-radius-sm);
padding: 0 var(--ua-space-05);
}
.ua-type.is-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--ua-font-size-scale-md);
background: color-mix(in srgb, var(--ua-color-border) 45%, transparent);
background: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-mid), transparent);
border-radius: var(--ua-radius-sm);
padding: 1px var(--ua-space-1);
}
@@ -4609,7 +4609,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
transition: border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
}
.ua-treeselect-trigger:hover {
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, var(--ua-color-border));
border-color: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), var(--ua-color-border));
}
.ua-treeselect-trigger:focus-visible,
.ua-treeselect.is-open .ua-treeselect-trigger {
@@ -4719,7 +4719,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
border-radius: 0;
}
.ua-datepicker-day.is-in-range:hover {
background: color-mix(in srgb, var(--ua-color-accent) 20%, transparent);
background: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-tint), transparent);
}
/* —— 可点击行：指针手型 + 键盘聚焦环，与选中行底色叠加不冲突 —— */
@@ -4791,7 +4791,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
z-index: 1; /* 悬停的那个压在最上面，不被后一个盖住 */
}
.ua-avatar-more {
background: color-mix(in srgb, var(--ua-color-text-muted) 18%, transparent);
background: color-mix(in srgb, var(--ua-color-text-muted) var(--ua-alpha-tint), transparent);
color: var(--ua-color-text);
font-weight: var(--ua-weight-medium);
}
@@ -4826,7 +4826,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
height: 64px;
}
.ua-progress-ring-track {
stroke: color-mix(in srgb, var(--ua-color-border) 80%, transparent);
stroke: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-heavy), transparent);
}
.ua-progress-ring-arc {
stroke: var(--ua-color-accent);