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

iter(g183): 字重行高令牌化

Browse Source
This commit is contained in:
HIsheR
2026-10-26 17:36:39 +08:00
parent 089527fd7d
commit fe7972574a
6 changed files with 154 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+72 -72
View File
@@ -89,7 +89,7 @@
.ua-card-title {
margin: 0;
font-size: var(--ua-font-size-lg);
font-weight: 500;
font-weight: var(--ua-weight-medium);
}
.ua-card-extra {
display: inline-flex;
@@ -132,7 +132,7 @@
top: 0;
z-index: 1;
background: var(--ua-color-surface);
font-weight: 500;
font-weight: var(--ua-weight-medium);
color: var(--ua-color-text-muted);
box-shadow: inset 0 -1px 0 var(--ua-color-border);
}
@@ -198,7 +198,7 @@ body.ua-col-resizing {
}
.ua-table tr.ua-row-selected td {
color: var(--ua-color-text-muted);
font-weight: 400;
font-weight: var(--ua-weight-normal);
}
.ua-cell-check {
width: 36px;
@@ -432,7 +432,7 @@ body.ua-col-resizing {
padding: var(--ua-space-15) var(--ua-space-25) var(--ua-space-05);
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-sm);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
letter-spacing: 0.02em;
cursor: default;
user-select: none;
@@ -462,7 +462,7 @@ body.ua-col-resizing {
.ua-option-selected {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
color: var(--ua-color-text-muted);
font-weight: 400;
font-weight: var(--ua-weight-normal);
}
.ua-option-selected:hover {
background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
@@ -648,12 +648,12 @@ body.ua-col-resizing {
margin-bottom: var(--ua-space-2);
color: var(--ua-color-text);
font-size: var(--ua-font-size-lg);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-pop-body {
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-md);
line-height: 1.6;
line-height: var(--ua-leading-normal);
}
/* —— 折叠面板 —— */
@@ -732,7 +732,7 @@ body.ua-col-resizing {
background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
color: var(--ua-color-accent);
font-size: var(--ua-font-size-md);
font-weight: 500;
font-weight: var(--ua-weight-medium);
user-select: none;
}
.ua-avatar-img {
@@ -764,7 +764,7 @@ body.ua-col-resizing {
background: var(--ua-color-surface);
color: var(--ua-color-text);
font-size: var(--ua-font-size-sm);
line-height: 1.6;
line-height: var(--ua-leading-normal);
transition: border-color var(--ua-duration-fast) var(--ua-ease), background var(--ua-duration-fast) var(--ua-ease);
}
.ua-tag-success {
@@ -789,7 +789,7 @@ body.ua-col-resizing {
background: none;
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-sm);
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
transition: color var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease);
}
@@ -936,7 +936,7 @@ body.ua-col-resizing {
.ua-input-number .ua-btn {
height: auto; /* 步进器是图标按钮：不吃控件统一高度 */
padding: 5px var(--ua-space-3); /* 收窄为步进按钮 */
line-height: 1.4;
line-height: var(--ua-leading-tight);
}
.ua-input-number-field {
width: 76px;
@@ -1045,12 +1045,12 @@ button.ua-step-dot:hover {
}
.ua-step-label {
font-size: var(--ua-font-size-md);
line-height: 1.4;
line-height: var(--ua-leading-tight);
color: var(--ua-color-text-muted);
}
.ua-step-current .ua-step-label {
color: var(--ua-color-text);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-step-desc {
font-size: var(--ua-font-size-sm);
@@ -1073,7 +1073,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-border); /* 未选中：弱化为边框色 */
font-size: 22px;
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
transition: color var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease);
}
@@ -1112,12 +1112,12 @@ button.ua-step-dot:hover {
}
.ua-empty-icon {
font-size: 34px;
line-height: 1;
line-height: var(--ua-leading-none);
color: var(--ua-color-border); /* 装饰符号弱化为边框色 */
}
.ua-empty-title {
font-size: var(--ua-font-size-md);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
color: var(--ua-color-text);
}
.ua-empty-desc {
@@ -1174,7 +1174,7 @@ button.ua-step-dot:hover {
padding: 1px var(--ua-space-2);
border-radius: 999px;
font-size: var(--ua-font-size-sm);
line-height: 1.6;
line-height: var(--ua-leading-normal);
}
.ua-badge-count {
min-width: 18px;
@@ -1238,7 +1238,7 @@ button.ua-step-dot:hover {
border: 1px solid currentColor;
border-radius: 50%;
font-size: var(--ua-font-size-xs);
line-height: 1;
line-height: var(--ua-leading-none);
opacity: 0.85;
}
.ua-alert.is-banner {
@@ -1253,7 +1253,7 @@ button.ua-step-dot:hover {
}
.ua-alert-title {
margin-bottom: var(--ua-space-05);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-alert-close {
flex: none;
@@ -1262,7 +1262,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-lg);
line-height: 1.4;
line-height: var(--ua-leading-tight);
cursor: pointer;
transition: color var(--ua-duration-fast) var(--ua-ease);
}
@@ -1448,7 +1448,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-lg);
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
transition: color var(--ua-duration-fast) var(--ua-ease);
}
@@ -1599,7 +1599,7 @@ button.ua-step-dot:hover {
}
.ua-tab-active {
color: var(--ua-color-accent);
font-weight: 500;
font-weight: var(--ua-weight-medium);
}
.ua-tab-item {
position: relative;
@@ -1619,7 +1619,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-md);
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
opacity: 0;
transition: opacity var(--ua-duration-fast) var(--ua-ease), background-color var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease);
@@ -1798,14 +1798,14 @@ button.ua-step-dot:hover {
.ua-drawer-title {
margin: 0;
font-size: var(--ua-font-size-lg);
font-weight: 500;
font-weight: var(--ua-weight-medium);
}
.ua-drawer-close {
border: none;
background: none;
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-2xl);
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
}
.ua-drawer-body {
@@ -1885,7 +1885,7 @@ button.ua-step-dot:hover {
.ua-modal-title {
margin: 0;
font-size: var(--ua-font-size-lg);
font-weight: 500;
font-weight: var(--ua-weight-medium);
}
.ua-modal-close {
border: none;
@@ -1893,7 +1893,7 @@ button.ua-step-dot:hover {
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-2xl);
cursor: pointer;
line-height: 1;
line-height: var(--ua-leading-none);
}
.ua-modal-body {
padding: var(--ua-space-4);
@@ -1918,7 +1918,7 @@ button.ua-step-dot:hover {
background: var(--ua-color-text);
color: var(--ua-color-bg);
font-size: var(--ua-font-size-sm);
line-height: 1.5;
line-height: var(--ua-leading-normal);
pointer-events: none;
opacity: 0;
transition: opacity var(--ua-duration-fast) ease-out, transform var(--ua-duration-fast) ease-out;
@@ -2133,7 +2133,7 @@ button.ua-step-dot:hover {
padding: 0 var(--ua-space-05);
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-md);
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
}
.ua-input-clear:hover {
@@ -2251,11 +2251,11 @@ button.ua-step-dot:hover {
.ua-tl-title {
color: var(--ua-color-text);
font-size: var(--ua-font-size-md);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-tl-item.is-pending .ua-tl-title {
color: var(--ua-color-text-muted);
font-weight: 500;
font-weight: var(--ua-weight-medium);
}
.ua-tl-time {
color: var(--ua-color-text-muted);
@@ -2266,7 +2266,7 @@ button.ua-step-dot:hover {
margin: var(--ua-space-05) 0 0;
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-sm);
line-height: 1.6;
line-height: var(--ua-leading-normal);
}
@keyframes ua-tl-in {
from { opacity: 0; transform: translateY(-4px); }
@@ -2327,7 +2327,7 @@ button.ua-step-dot:hover {
}
.ua-seg-btn.is-active {
color: var(--ua-color-accent);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-seg-btn:disabled {
color: color-mix(in srgb, var(--ua-color-text-muted) 45%, transparent);
@@ -2361,7 +2361,7 @@ button.ua-step-dot:hover {
.ua-desc-title {
color: var(--ua-color-text);
font-size: var(--ua-font-size-md);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-desc-head {
display: flex;
@@ -2452,8 +2452,8 @@ button.ua-step-dot:hover {
.ua-stat-num {
color: var(--ua-color-text);
font-size: 26px;
font-weight: 600;
line-height: 1.2;
font-weight: var(--ua-weight-semibold);
line-height: var(--ua-leading-none);
font-variant-numeric: tabular-nums;
}
.ua-stat-affix {
@@ -2494,7 +2494,7 @@ button.ua-step-dot:hover {
color: var(--ua-color-text-muted);
}
.ua-list-header {
font-weight: 600;
font-weight: var(--ua-weight-semibold);
color: var(--ua-color-text);
border-bottom: 1px solid var(--ua-color-border);
}
@@ -2582,7 +2582,7 @@ button.ua-step-dot:hover {
background: var(--ua-color-bg);
color: var(--ua-color-text);
font-size: var(--ua-font-size-lg);
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
opacity: 0;
transition: opacity var(--ua-duration-fast) ease;
@@ -2647,7 +2647,7 @@ button.ua-step-dot:hover {
}
.ua-tree-selected {
background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent); /* 选中低视觉比重 */
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-tree-caret {
display: inline-flex;
@@ -2782,7 +2782,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-text-muted);
cursor: pointer;
line-height: 1;
line-height: var(--ua-leading-none);
padding: 0 var(--ua-space-05);
}
.ua-upload-remove:hover {
@@ -2843,7 +2843,7 @@ button.ua-step-dot:hover {
.ua-notice-title {
flex: 1;
font-size: var(--ua-font-size-md);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
color: var(--ua-color-text);
}
.ua-notice-close {
@@ -2851,7 +2851,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-text-muted);
cursor: pointer;
line-height: 1;
line-height: var(--ua-leading-none);
padding: 0 var(--ua-space-05);
}
.ua-notice-close:hover {
@@ -2861,7 +2861,7 @@ button.ua-step-dot:hover {
margin-top: var(--ua-space-1);
font-size: var(--ua-font-size-sm);
color: var(--ua-color-text-muted);
line-height: 1.5;
line-height: var(--ua-leading-normal);
}
.ua-notice-action {
margin-top: var(--ua-space-2);
@@ -2894,7 +2894,7 @@ button.ua-step-dot:hover {
height: var(--ua-control-h-lg);
border-radius: 50%;
font-size: var(--ua-font-size-lg);
font-weight: 700;
font-weight: var(--ua-weight-bold);
color: var(--ua-color-accent-contrast);
background: var(--ua-color-accent);
}
@@ -2903,14 +2903,14 @@ button.ua-step-dot:hover {
.ua-result-danger .ua-result-icon { background: var(--ua-color-danger); }
.ua-result-title {
font-size: var(--ua-font-size-lg);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
color: var(--ua-color-text);
}
.ua-result-desc {
max-width: 380px;
font-size: var(--ua-font-size-sm);
color: var(--ua-color-text-muted);
line-height: 1.6;
line-height: var(--ua-leading-normal);
}
.ua-result-extra {
margin-top: var(--ua-space-1);
@@ -2941,7 +2941,7 @@ button.ua-step-dot:hover {
}
.ua-transfer-title {
font-size: var(--ua-font-size-sm);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
color: var(--ua-color-text);
}
.ua-transfer-search {
@@ -3124,7 +3124,7 @@ button.ua-step-dot:hover {
}
.ua-cascader-opt.is-picked {
color: var(--ua-color-accent);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-cascader-opt:disabled {
opacity: 0.45;
@@ -3353,14 +3353,14 @@ button.ua-step-dot:hover {
}
.ua-datepicker-label {
font-size: var(--ua-font-size-sm);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
color: var(--ua-color-text);
}
.ua-datepicker-nav {
width: 24px;
height: 24px;
font-size: var(--ua-font-size-lg);
line-height: 1;
line-height: var(--ua-leading-none);
color: var(--ua-color-text);
background: transparent;
border: 1px solid var(--ua-color-border);
@@ -3407,7 +3407,7 @@ button.ua-step-dot:hover {
.ua-datepicker-day.is-selected {
color: var(--ua-color-accent-contrast);
background: var(--ua-color-accent);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-datepicker-day:disabled {
opacity: 0.35;
@@ -3508,7 +3508,7 @@ button.ua-step-dot:hover {
}
.ua-backtop-icon {
font-size: var(--ua-font-size-lg);
line-height: 1;
line-height: var(--ua-leading-none);
}
@media (prefers-reduced-motion: reduce) {
.ua-backtop {
@@ -3679,13 +3679,13 @@ button.ua-step-dot:hover {
}
.ua-tour-title {
font-size: var(--ua-font-size-sm);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
color: var(--ua-color-text);
}
.ua-tour-close {
padding: 0 var(--ua-space-1);
font-size: var(--ua-font-size-lg);
line-height: 1;
line-height: var(--ua-leading-none);
color: var(--ua-color-text-muted);
background: transparent;
border: none;
@@ -3697,7 +3697,7 @@ button.ua-step-dot:hover {
.ua-tour-desc {
margin-top: var(--ua-space-1);
font-size: var(--ua-font-size-sm);
line-height: 1.6;
line-height: var(--ua-leading-normal);
color: var(--ua-color-text-muted);
}
.ua-tour-foot {
@@ -3812,7 +3812,7 @@ button.ua-step-dot:hover {
.ua-multiselect-x {
padding: 0;
font-size: var(--ua-font-size-sm);
line-height: 1;
line-height: var(--ua-leading-none);
color: var(--ua-color-text-muted);
background: transparent;
border: none;
@@ -3863,7 +3863,7 @@ button.ua-step-dot:hover {
padding: var(--ua-space-15) var(--ua-space-1) var(--ua-space-05);
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-sm);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
cursor: default;
user-select: none;
}
@@ -3884,7 +3884,7 @@ button.ua-step-dot:hover {
}
.ua-multiselect-opt.is-selected {
color: var(--ua-color-accent);
font-weight: 600;
font-weight: var(--ua-weight-semibold);
}
.ua-multiselect-opt.is-disabled {
opacity: 0.45;
@@ -4008,7 +4008,7 @@ button.ua-step-dot:hover {
.ua-popconfirm-text {
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-md);
line-height: 1.5;
line-height: var(--ua-leading-normal);
}
.ua-popconfirm-actions {
display: flex;
@@ -4045,7 +4045,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-md);
line-height: 1;
line-height: var(--ua-leading-none);
cursor: pointer;
transform: translateY(-50%);
transition: color var(--ua-duration-fast) var(--ua-ease), background-color var(--ua-duration-fast) var(--ua-ease);
@@ -4092,7 +4092,7 @@ button.ua-step-dot:hover {
background: none;
color: var(--ua-color-accent);
font-size: var(--ua-font-size-md);
font-weight: 500;
font-weight: var(--ua-weight-medium);
cursor: pointer;
transition: color var(--ua-duration-fast) var(--ua-ease);
}
@@ -4122,7 +4122,7 @@ button.ua-step-dot:hover {
.ua-calendar-label {
color: var(--ua-color-text);
font-size: var(--ua-font-size-md);
font-weight: 500;
font-weight: var(--ua-weight-medium);
}
.ua-calendar-nav {
width: 24px;
@@ -4179,7 +4179,7 @@ button.ua-step-dot:hover {
.ua-calendar-day.is-selected {
background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
color: var(--ua-color-accent);
font-weight: 500;
font-weight: var(--ua-weight-medium);
transform: none;
}
.ua-calendar-day:focus-visible {
@@ -4189,7 +4189,7 @@ button.ua-step-dot:hover {
.ua-calendar-mark {
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-xs);
line-height: 1;
line-height: var(--ua-leading-none);
}
@media (prefers-reduced-motion: reduce) {
.ua-calendar-day {
@@ -4214,15 +4214,15 @@ button.ua-step-dot:hover {
.ua-type {
color: var(--ua-color-text);
font-size: var(--ua-font-size-md);
line-height: 1.65;
line-height: var(--ua-leading-normal);
margin: 0;
}
.ua-type-paragraph + .ua-type-paragraph {
margin-top: var(--ua-space-2); /* 段落之间留呼吸，单段不额外撑高 */
}
.ua-type-title {
font-weight: 600;
line-height: 1.35;
font-weight: var(--ua-weight-semibold);
line-height: var(--ua-leading-tight);
letter-spacing: -0.01em;
}
h1.ua-type-title { font-size: calc(var(--ua-font-size-lg) * 1.6); }
@@ -4234,7 +4234,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
.ua-type.is-success { color: var(--ua-color-success); }
.ua-type.is-warning { color: var(--ua-color-warning); }
.ua-type.is-danger { color: var(--ua-color-danger); }
.ua-type.is-strong { font-weight: 600; }
.ua-type.is-strong { font-weight: var(--ua-weight-semibold); }
.ua-type.is-underline { text-decoration: underline; text-underline-offset: 2px; }
.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; }
@@ -4372,7 +4372,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
.ua-fab-icon {
display: inline-flex;
align-items: center;
line-height: 1;
line-height: var(--ua-leading-none);
}
.ua-fab-label {
font-size: var(--ua-font-size-sm);
@@ -4419,7 +4419,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
color: var(--ua-color-text);
font: inherit;
font-size: var(--ua-font-size-md);
line-height: 1.6;
line-height: var(--ua-leading-normal);
resize: vertical;
transition: border-color var(--ua-duration-fast) ease, box-shadow var(--ua-duration-fast) ease;
}
@@ -4593,7 +4593,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
}
.ua-link-icon {
font-size: 0.85em;
line-height: 1;
line-height: var(--ua-leading-none);
}
.ua-visually-hidden {
position: absolute;
@@ -4692,7 +4692,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
.ua-avatar-more {
background: color-mix(in srgb, var(--ua-color-text-muted) 18%, transparent);
color: var(--ua-color-text);
font-weight: 500;
font-weight: var(--ua-weight-medium);
}
/* —— 滑块轨道与刻度：轨道包一层，刻度按百分比定位在下方 —— */