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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
llms-full.txt
+6
View File
@@ -2182,6 +2182,7 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
- --ua-color-overlay: rgba(0, 0, 0, 0.45)（暗色 rgba(0, 0, 0, 0.6)）
- --ua-color-overlay-strong: rgba(0, 0, 0, 0.6)（暗色 rgba(0, 0, 0, 0.7)）
- --ua-color-border: rgba(0, 0, 0, 0.15)（暗色 rgba(255, 255, 255, 0.15)）
- --ua-color-highlight: rgba(255, 255, 255, 0.5)（暗色 rgba(255, 255, 255, 0.08)）
- --ua-color-accent: #185fa5（暗色 #378add）
- --ua-color-accent-contrast: #ffffff（暗色 #042c53）
- --ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 10%, transparent)（暗色 color-mix(in srgb, var(--ua-color-accent) 14%, transparent)）
@@ -2214,6 +2215,8 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
- --ua-font-size-5xl: 34px
- --ua-font-size-scale-md: 0.92em
- --ua-font-size-scale-sm: 0.85em
- --ua-tracking-wide: 0.04em
- --ua-tracking-tight: -0.01em
- --ua-weight-normal: 400
- --ua-weight-medium: 500
- --ua-weight-semibold: 600
@@ -2228,6 +2231,7 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
- --ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.14)（暗色 0 18px 44px rgba(0, 0, 0, 0.5)）
- --ua-shadow-accent: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent)（暗色 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 30%, transparent)）
- --ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent)（暗色 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)）
- --ua-shadow-highlight: inset 0 1px 0 var(--ua-color-highlight)
- --ua-shadow-hairline: inset 0 -1px 0 var(--ua-border-subtle)
- --ua-shadow-inset-border: inset 0 0 0 1px var(--ua-color-border)
- --ua-shadow-inset-accent: inset 0 0 0 1px var(--ua-color-accent)
@@ -2240,8 +2244,10 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
- --ua-duration-loop-mid: 0.8s
- --ua-duration-loop-slow: 1.2s
- --ua-duration-loop-long: 1.6s
- --ua-duration-step: 0.02s
- --ua-ease: cubic-bezier(0.2, 0.8, 0.2, 1)
- --ua-ease-out: cubic-bezier(0.16, 1, 0.3, 1)
- --ua-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1)
- --ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent)（暗色 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 34%, transparent)）
- --ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)（暗色 inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 52%, transparent)）
- --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent)（暗色 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent)）
packages/design/tokens/tokens.css
+11 -1
View File
@@ -1,5 +1,5 @@
/* @ui-arch design tokens - light theme defaults + dark theme overrides
分组：颜色 / 圆角 / 间距 / 字号 / 字重与行高 / 边框 / 阴影 / 动效 / 焦点环 / 控件高度 / 层级
分组：颜色 / 圆角 / 间距 / 字号 / 字距 / 字重与行高 / 边框 / 阴影 / 动效 / 焦点环 / 控件高度 / 层级
约定：皮肤包（packages/skin/ui/ui.css）只能消费 var(--ua-*)，禁止硬编码颜色、阴影、时长、字号；
本文件是令牌唯一来源，ua tokens / llms-full.txt / MCP get_tokens 全部从这里派生。 */
:root {
@@ -16,6 +16,7 @@
--ua-color-overlay: rgba(0, 0, 0, 0.45); /* 遮罩：抽屉 / 弹窗 / 命令面板等半透明底 */
--ua-color-overlay-strong: rgba(0, 0, 0, 0.6); /* 强遮罩：大图预览等需要更强聚焦的浮层 */
--ua-color-border: rgba(0, 0, 0, 0.15); /* 基础边框色：输入框 / 卡片 / 分割线 */
--ua-color-highlight: rgba(255, 255, 255, 0.5); /* 内高光白：主按钮等实色控件顶缘的 1px 高光（暗色必须降档，否则刺眼） */
--ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
--ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
--ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 语义淡底标准档：选中底、激活项底 */
@@ -55,6 +56,10 @@
--ua-font-size-scale-md: 0.92em; /* 相对缩放档（相对父级）：代码片段等需跟上下文缩放的文本 */
--ua-font-size-scale-sm: 0.85em; /* 相对缩放小档：行内小图标随文字一起缩，不建绝对像素 */
/* ---- 字距：两档，宽档给表头 / 分组小标题做节奏，紧档给大标题收边 ---- */
--ua-tracking-wide: 0.04em; /* 宽档：表头、分组标题、大写小标题（小字号需要字距才不糊成一团） */
--ua-tracking-tight: -0.01em; /* 紧档：大标题反向收边，字号越大越需要收紧才不散 */
/* ---- 字重与行高：标题 / 正文 / 辅助三档 ---- */
--ua-weight-normal: 400; /* 正文档：正文与表单值 */
--ua-weight-medium: 500; /* 辅助强调档：控件文本、表头、次要标题 */
@@ -74,6 +79,7 @@
--ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.14); /* 4 档：模态弹窗 / 抽屉 / 通知中心等最高层 */
--ua-shadow-accent: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent); /* 主题色投影：主按钮 / 强调控件悬停浮起 */
--ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent); /* 主题色强投影：返回顶部等悬浮强调件 */
--ua-shadow-highlight: inset 0 1px 0 var(--ua-color-highlight); /* 内高光型：实色控件顶缘 1px 高光（1px 是细线语义，不进 elevation 四档） */
--ua-shadow-hairline: inset 0 -1px 0 var(--ua-border-subtle); /* 描边型：粘性表头 / 吸底条底部的 1px 细线（用阴影画线，不占布局高度） */
--ua-shadow-inset-border: inset 0 0 0 1px var(--ua-color-border); /* 描边型：日历「今天」等只需要一圈细内框、不想改盒模型的场景 */
--ua-shadow-inset-accent: inset 0 0 0 1px var(--ua-color-accent); /* 描边型：强调色内框，标记「今天」这类弱选中态 */
@@ -88,8 +94,10 @@
--ua-duration-loop-mid: 0.8s; /* 循环中档：加载转圈 / 开关内转圈（0.7 与 0.8 收敛到此档） */
--ua-duration-loop-slow: 1.2s; /* 循环慢档：骨架扫光 / 不确定进度条（1.4 收敛到此档） */
--ua-duration-loop-long: 1.6s; /* 循环长档：时间线呼吸等低频脉冲，别再用在加载态上 */
--ua-duration-step: 0.02s; /* 微步档：交错入场的单项间隔（20ms），只供 calc(n * var(--ua-duration-step)) 派生，不直接当过渡时长 */
--ua-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* 标准缓动：先快后缓，控件交互默认用这条 */
--ua-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 出场缓动：元素进入视口 / 弹层出现时使用 */
--ua-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1); /* 回弹缓动：弹窗本体、悬浮按钮这类需要一点过冲的入场 */
/* ---- 焦点环：统一外环与内嵌两种形态，全部由强调色派生 ---- */
--ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent); /* 外焦点环：输入框 / 按钮 / 可聚焦控件 */
@@ -125,6 +133,7 @@
--ua-color-overlay: rgba(0, 0, 0, 0.6); /* 暗色遮罩：暗底上需加深才可分辨 */
--ua-color-overlay-strong: rgba(0, 0, 0, 0.7); /* 暗色强遮罩 */
--ua-color-border: rgba(255, 255, 255, 0.15); /* 暗色基础边框色：改用白色低透明度，避免黑边在暗底上消失 */
--ua-color-highlight: rgba(255, 255, 255, 0.08); /* 暗色内高光：暗底上白高光刺眼，降到 8% 只留一道细光 */
--ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
--ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
--ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 14%, transparent); /* 暗色淡底标准档：暗底上淡底不可见，透明度升一档 */
@@ -140,6 +149,7 @@
--ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.5); /* 暗色 4 档：模态 / 抽屉 / 通知 */
--ua-shadow-accent: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 30%, transparent); /* 暗色主题色投影：透明度略升补可见性 */
--ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 暗色主题色强投影 */
--ua-shadow-highlight: inset 0 1px 0 var(--ua-color-highlight); /* 暗色内高光：值不变、靠 --ua-color-highlight 降到 8%，暗底上仍是一道细光 */
--ua-shadow-hairline: inset 0 -1px 0 var(--ua-border-subtle); /* 暗色描边细线：随 border-subtle 翻转 */
--ua-shadow-inset-border: inset 0 0 0 1px var(--ua-color-border); /* 暗色内框 */
--ua-shadow-inset-accent: inset 0 0 0 1px var(--ua-color-accent); /* 暗色强调内框 */
packages/design/tokens/tokens.json
+16 -2
View File
@@ -21,6 +21,10 @@
"light": "rgba(0, 0, 0, 0.15)",
"dark": "rgba(255, 255, 255, 0.15)"
},
"highlight": {
"light": "rgba(255, 255, 255, 0.5)",
"dark": "rgba(255, 255, 255, 0.08)"
},
"accent": {
"light": "#185fa5",
"dark": "#378add"
@@ -78,6 +82,10 @@
"semibold": 600,
"bold": 700
},
"tracking": {
"wide": "0.04em",
"tight": "-0.01em"
},
"leading": {
"tight": 1.35,
"normal": 1.55,
@@ -111,6 +119,10 @@
"light": "0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent)",
"dark": "0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)"
},
"highlight": {
"light": "inset 0 1px 0 var(--ua-color-highlight)",
"dark": "inset 0 1px 0 var(--ua-color-highlight)"
},
"hairline": {
"light": "inset 0 -1px 0 var(--ua-border-subtle)",
"dark": "inset 0 -1px 0 var(--ua-border-subtle)"
@@ -137,10 +149,12 @@
"loopFast": "0.6s",
"loopMid": "0.8s",
"loopSlow": "1.2s",
"loopLong": "1.6s"
"loopLong": "1.6s",
"step": "0.02s"
},
"ease": "cubic-bezier(0.2, 0.8, 0.2, 1)",
"easeOut": "cubic-bezier(0.16, 1, 0.3, 1)"
"easeOut": "cubic-bezier(0.16, 1, 0.3, 1)",
"easeSpring": "cubic-bezier(0.34, 1.3, 0.5, 1)"
},
"focus": {
"ring": {
packages/skin/ui/ui.css
+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 {