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

iter(g197): accent 淡底五档收敛为两档语义令牌

Browse Source
This commit is contained in:
HIsheR
2026-10-26 18:08:03 +08:00
parent 9ef863739d
commit 8148317f09
3 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/design/tokens/tokens.css
+4
View File
@@ -18,6 +18,8 @@
--ua-color-border: rgba(0, 0, 0, 0.15); /* 基础边框色：输入框 / 卡片 / 分割线 */
--ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
--ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
--ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 语义淡底标准档：选中底、激活项底 */
--ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 5%, transparent); /* 语义淡底弱档：悬停底、极弱强调底 */
--ua-color-danger: #a32d2d; /* 危险色：错误、删除、校验失败 */
--ua-color-success: #0f6e56; /* 成功色：完成、通过、正向结果 */
--ua-color-warning: #9a6b1f; /* 警告色：提醒、需注意但不阻断 */
@@ -125,6 +127,8 @@
--ua-color-border: rgba(255, 255, 255, 0.15); /* 暗色基础边框色：改用白色低透明度，避免黑边在暗底上消失 */
--ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
--ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
--ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 14%, transparent); /* 暗色淡底标准档：暗底上淡底不可见，透明度升一档 */
--ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色淡底弱档：透明度升一档 */
--ua-color-danger: #d96a6a; /* 暗色危险色 */
--ua-color-success: #4fc39e; /* 暗色成功色 */
--ua-color-warning: #d9a94f; /* 暗色警告色 */
packages/skin/ui/ui.css
+37 -37
View File
@@ -51,7 +51,7 @@
color: var(--ua-color-accent);
}
.ua-btn-ghost:hover {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-btn-danger {
background: var(--ua-color-danger);
@@ -190,11 +190,11 @@ body.ua-col-resizing {
background: color-mix(in srgb, var(--ua-color-border) 18%, transparent);
}
.ua-table tbody tr:hover {
background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-table tr.ua-row-selected,
.ua-table tr.ua-row-selected:hover {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-table tr.ua-row-selected td {
color: var(--ua-color-text-muted);
@@ -456,16 +456,16 @@ body.ua-col-resizing {
transition: background var(--ua-duration-fast) var(--ua-ease);
}
.ua-option:hover {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
/* 选中态：低视觉比重——淡色底 + 弱化文字，不抢焦点 */
.ua-option-selected {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
color: var(--ua-color-text-muted);
font-weight: var(--ua-weight-normal);
}
.ua-option-selected:hover {
background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
background: var(--ua-color-tint-accent);
}
/* —— 下拉菜单 —— */
@@ -534,7 +534,7 @@ body.ua-col-resizing {
transition: background var(--ua-duration-fast) var(--ua-ease);
}
.ua-menu-item:hover:not(:disabled) {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-menu-item.is-danger {
color: var(--ua-color-danger);
@@ -684,7 +684,7 @@ body.ua-col-resizing {
transition: background var(--ua-duration-fast) var(--ua-ease);
}
.ua-acc-head:hover:not(:disabled) {
background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-acc-head:focus-visible {
outline: none;
@@ -729,7 +729,7 @@ body.ua-col-resizing {
flex: none;
border-radius: 50%;
overflow: hidden;
background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
background: var(--ua-color-tint-accent);
color: var(--ua-color-accent);
font-size: var(--ua-font-size-md);
font-weight: var(--ua-weight-medium);
@@ -1276,7 +1276,7 @@ button.ua-step-dot:hover {
}
.ua-alert-info {
border-color: var(--ua-color-accent);
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-alert-success {
border-color: var(--ua-color-success);
@@ -1359,7 +1359,7 @@ button.ua-step-dot:hover {
}
.ua-page-btn.ua-active {
border-color: var(--ua-color-accent);
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 选中态低视觉比重 */
background: var(--ua-color-tint-accent); /* 选中态低视觉比重 */
color: var(--ua-color-text-muted);
}
.ua-page-gap {
@@ -1587,7 +1587,7 @@ button.ua-step-dot:hover {
}
.ua-tab:hover {
color: var(--ua-color-text);
background: color-mix(in srgb, var(--ua-color-accent) 5%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-tab:focus-visible {
outline: none;
@@ -1635,7 +1635,7 @@ button.ua-step-dot:hover {
}
.ua-tab-close:hover {
color: var(--ua-color-text);
background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
background: var(--ua-color-tint-accent);
}
@media (hover: none) {
.ua-tab-close {
@@ -2519,7 +2519,7 @@ button.ua-step-dot:hover {
cursor: pointer;
}
.ua-list-clickable:hover {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 低视觉比重的悬停底色 */
background: var(--ua-color-tint-accent-weak); /* 低视觉比重的悬停底色 */
}
.ua-list-avatar {
flex: none;
@@ -2640,13 +2640,13 @@ button.ua-step-dot:hover {
transition: background var(--ua-duration-fast) ease;
}
.ua-tree-row:hover {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-tree-row:focus-visible {
box-shadow: var(--ua-focus-ring);
}
.ua-tree-selected {
background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent); /* 选中低视觉比重 */
background: var(--ua-color-tint-accent); /* 选中低视觉比重 */
font-weight: var(--ua-weight-semibold);
}
.ua-tree-caret {
@@ -2724,7 +2724,7 @@ button.ua-step-dot:hover {
.ua-upload-zone:hover,
.ua-upload-over {
border-color: var(--ua-color-accent);
background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-upload-zone:focus-visible {
box-shadow: var(--ua-focus-ring);
@@ -2976,7 +2976,7 @@ button.ua-step-dot:hover {
transition: background var(--ua-duration-fast) ease;
}
.ua-transfer-item:hover {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-transfer-item.is-disabled {
opacity: 0.45;
@@ -3120,7 +3120,7 @@ button.ua-step-dot:hover {
}
.ua-cascader-opt:hover:not(:disabled),
.ua-cascader-opt.is-active {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-cascader-opt.is-picked {
color: var(--ua-color-accent);
@@ -3265,7 +3265,7 @@ button.ua-step-dot:hover {
}
.ua-autocomplete-opt.is-active,
.ua-autocomplete-opt:hover {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-autocomplete-hint {
font-size: var(--ua-font-size-sm);
@@ -3399,7 +3399,7 @@ button.ua-step-dot:hover {
transition: background var(--ua-duration-fast) ease, color var(--ua-duration-fast) ease;
}
.ua-datepicker-day:hover:not(:disabled) {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-datepicker-day.is-today {
box-shadow: var(--ua-shadow-inset-accent);
@@ -3451,7 +3451,7 @@ button.ua-step-dot:hover {
.ua-datepicker-preset:hover {
color: var(--ua-color-accent);
border-color: var(--ua-color-accent);
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
@keyframes ua-dp-in {
from { opacity: 0; transform: translateY(-4px); }
@@ -3791,7 +3791,7 @@ button.ua-step-dot:hover {
padding: var(--ua-space-05) var(--ua-space-15);
font-size: var(--ua-font-size-sm);
color: var(--ua-color-text);
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
border-radius: var(--ua-radius-sm);
}
.ua-multiselect-tag > span {
@@ -3807,7 +3807,7 @@ button.ua-step-dot:hover {
font-variant-numeric: tabular-nums;
}
.ua-multiselect-tag.is-more:hover {
background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-multiselect-x {
padding: 0;
@@ -3880,7 +3880,7 @@ button.ua-step-dot:hover {
}
.ua-multiselect-opt.is-active,
.ua-multiselect-opt:hover {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-multiselect-opt.is-selected {
color: var(--ua-color-accent);
@@ -3963,12 +3963,12 @@ button.ua-step-dot:hover {
}
.ua-anchor-link:hover {
color: var(--ua-color-text);
background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
background: var(--ua-color-tint-accent-weak);
transform: translateX(2px);
}
.ua-anchor-link.is-active {
color: var(--ua-color-text);
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-anchor-link.is-active::before {
content: '';
@@ -4052,7 +4052,7 @@ button.ua-step-dot:hover {
}
.ua-select-clear:hover {
color: var(--ua-color-text);
background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-select-clear:focus-visible {
outline: 2px solid var(--ua-color-accent);
@@ -4075,7 +4075,7 @@ button.ua-step-dot:hover {
}
.ua-crumb-fold:hover {
color: var(--ua-color-accent);
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-crumb-fold:focus-visible {
outline: 2px solid var(--ua-color-accent);
@@ -4137,7 +4137,7 @@ button.ua-step-dot:hover {
}
.ua-calendar-nav:hover {
color: var(--ua-color-accent);
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-calendar-nav:focus-visible {
outline: 2px solid var(--ua-color-accent);
@@ -4170,14 +4170,14 @@ button.ua-step-dot:hover {
transition: background-color var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease);
}
.ua-calendar-day:hover {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
transform: translateY(-1px);
}
.ua-calendar-day.is-today {
box-shadow: var(--ua-shadow-inset-border); /* 今天只用细内框，不与选中态抢视觉 */
}
.ua-calendar-day.is-selected {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
color: var(--ua-color-accent);
font-weight: var(--ua-weight-medium);
transform: none;
@@ -4278,7 +4278,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
}
.ua-type-copy:hover {
color: var(--ua-color-accent);
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
background: var(--ua-color-tint-accent);
}
.ua-type-copy.is-ok { color: var(--ua-color-success); }
.ua-type-copybox {
@@ -4457,7 +4457,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
transition: background var(--ua-duration-fast) ease;
}
.ua-mentions-item.is-active {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 选中态低视觉比重 */
background: var(--ua-color-tint-accent); /* 选中态低视觉比重 */
}
.ua-mentions-name {
color: var(--ua-color-text);
@@ -4614,7 +4614,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
/* —— 日期区间：两端仍走 is-selected，中间用低比重底色连成一条 —— */
.ua-datepicker-day.is-in-range {
background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
background: var(--ua-color-tint-accent);
border-radius: 0;
}
.ua-datepicker-day.is-in-range:hover {
@@ -4626,7 +4626,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
cursor: pointer;
}
.ua-row-clickable:hover td {
background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
background: var(--ua-color-tint-accent-weak);
}
.ua-row-clickable:focus-visible {
outline: 2px solid var(--ua-color-accent);
@@ -4846,7 +4846,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
transition: background var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease);
}
.ua-cmdk-item.is-active {
background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent); /* 选中态低视觉比重：淡色底不抢文字 */
background: var(--ua-color-tint-accent); /* 选中态低视觉比重：淡色底不抢文字 */
color: var(--ua-color-accent);
}
.ua-cmdk-label {