iter(g199): 新增主按钮内高光与卡片边框减负

tokens 增补:--ua-color-highlight(暗色降到 8%,暗底白高光刺眼)、
--ua-shadow-highlight(1px 内高光走令牌,皮肤不出现阴影字面值)、
--ua-tracking-wide / --ua-tracking-tight 两档字距。
主按钮叠内高光 + 悬停主题色投影,press 保留内高光;
卡片补贴地 1 档阴影,hoverable 悬停升到 2 档并同步减淡边框;
表头、选项分组标题、命令面板大写小标题统一 0.04em,
ui.css 三处字距字面值全部归零。
幽灵按钮无实色底,显式退出质感层避免透明底露白线。

Refs: g199
This commit is contained in:
HIsheR
2026-10-26 18:22:44 +08:00
parent ae1ff24dae
commit bfb9178733
4 changed files with 47 additions and 11 deletions
+14 -8
View File
@@ -35,23 +35,26 @@
color: var(--ua-color-accent-contrast);
font-size: var(--ua-font-size-md);
cursor: pointer;
box-shadow: var(--ua-shadow-highlight); /* 顶缘 1px 内高光:实色块加一道光,摆脱纯平「贴纸感」 */
transition: filter var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
}
.ua-btn:hover {
filter: brightness(1.08);
filter: brightness(1.08); /* 悬停提亮 + 主题色投影 + 内高光,三层叠出光泽 */
transform: translateY(-1px);
box-shadow: var(--ua-shadow-accent); /* 主题色投影:主按钮悬停浮起 */
box-shadow: var(--ua-shadow-accent), var(--ua-shadow-highlight);
}
.ua-btn:active {
transform: translateY(0) scale(0.97);
box-shadow: none;
box-shadow: var(--ua-shadow-highlight); /* 按下撤投影但保留内高光,避免压成死板色块 */
}
.ua-btn-ghost {
background: transparent;
color: var(--ua-color-accent);
box-shadow: none; /* 幽灵按钮没有实色底可打光,不参与质感层 */
}
.ua-btn-ghost:hover {
background: var(--ua-color-tint-accent-weak);
box-shadow: none; /* 透明底上叠内高光会露出一道悬空白线 */
}
.ua-btn-danger {
background: var(--ua-color-danger);
@@ -82,6 +85,7 @@
border: 1px solid var(--ua-color-border);
border-radius: var(--ua-radius-lg);
background: var(--ua-color-surface);
box-shadow: var(--ua-shadow-1); /* 贴地 1 档:让卡片靠「面」而不是靠 1px 线分层 */
}
.ua-card-head {
display: flex;
@@ -112,11 +116,12 @@
border: none;
}
.ua-card-hoverable {
transition: transform var(--ua-duration-fast) ease, box-shadow var(--ua-duration-fast) ease;
transition: transform var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease), border-color var(--ua-duration-fast) var(--ua-ease);
}
.ua-card-hoverable:hover {
transform: translateY(-2px);
box-shadow: var(--ua-shadow-2); /* 卡片悬停浮起 = 下拉档 */
box-shadow: var(--ua-shadow-2); /* 悬停浮起:从 1 档升到 2 档,一档之差刚好可感 */
border-color: color-mix(in srgb, var(--ua-color-border) 55%, transparent); /* 阴影接手层次,边框同步减淡,两者配合而非叠加 */
}
.ua-table table {
width: 100%;
@@ -138,6 +143,7 @@
background: var(--ua-color-surface);
font-weight: var(--ua-weight-medium);
color: var(--ua-color-text-muted);
letter-spacing: var(--ua-tracking-wide); /* 表头小字加宽字距,密集列头才不糊成一片 */
box-shadow: var(--ua-shadow-hairline);
}
.ua-table th.ua-sortable {
@@ -441,7 +447,7 @@ body.ua-col-resizing {
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-sm);
font-weight: var(--ua-weight-semibold);
letter-spacing: 0.02em;
letter-spacing: var(--ua-tracking-wide); /* 分组小标题:字距拉开与选项正文区分层级 */
cursor: default;
user-select: none;
}
@@ -4261,7 +4267,7 @@ button.ua-step-dot:hover {
.ua-type-title {
font-weight: var(--ua-weight-semibold);
line-height: var(--ua-leading-tight);
letter-spacing: -0.01em;
letter-spacing: var(--ua-tracking-tight); /* 大标题反向收边:字号越大越要收紧才不散 */
}
h1.ua-type-title { font-size: calc(var(--ua-font-size-lg) * 1.6); }
h2.ua-type-title { font-size: calc(var(--ua-font-size-lg) * 1.32); }
@@ -4868,7 +4874,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-xs);
font-weight: var(--ua-weight-semibold);
letter-spacing: 0.04em;
letter-spacing: var(--ua-tracking-wide); /* 大写小标题:全大写必须配宽字距才不自带挤压感 */
text-transform: uppercase;
}
.ua-cmdk-item {