fix(ui): 收敛激活态描边、修正内层圆角溢出并替换 emoji 图标

This commit is contained in:
HIsheR
2026-10-26 18:47:04 +08:00
parent 6c4796cded
commit 106bbcaa56
8 changed files with 147 additions and 27 deletions
+5 -2
View File
@@ -19,6 +19,7 @@
--ua-color-highlight: rgba(255, 255, 255, 0.5); /* 内高光白:主按钮等实色控件顶缘的 1px 高光(暗色必须降档,否则刺眼) */
--ua-color-accent: #185fa5; /* 强调色:主操作、选中态、焦点环底色 */
--ua-color-accent-contrast: #ffffff; /* 强调色上的文字色:保证主按钮对比度 */
--ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg)); /* 柔和强调色:细线 / 指示条 / 内嵌焦点环用,纯 accent 做 2px 实线会发刺 */
--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; /* 危险色:错误、删除、校验失败 */
@@ -29,6 +30,7 @@
--ua-radius-sm: 4px; /* 小圆角:按钮 / 输入框 / 标签等控件 */
--ua-radius-md: 8px; /* 中圆角:卡片 / 面板 / 分组容器 */
--ua-radius-lg: 12px; /* 大圆角:弹窗 / 抽屉等浮层外壳 */
--ua-radius-md-inset: calc(var(--ua-radius-md) - 1px); /* 内衬圆角:贴边的内层块(输入附加块等)与外层弧线对齐,减去 1px 边框 */
/* ---- 间距:4px 基准四档 + 表格单元格复合值 ---- */
--ua-space-1: 4px; /* 间距 1 档:图标与文字之间、紧邻元素 */
@@ -105,7 +107,7 @@
--ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent); /* 语义警告焦点环:评分等以警告色为主色的控件 */
--ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent); /* 错误强调环:校验失败时叠在被标红控件外侧,比 danger 描边更外扩一圈 */
--ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent); /* 呼吸光晕档:与焦点环交替出现做脉冲动画(时间线条目) */
--ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 选中环(非焦点):色板格子等「当前选中」标记,实色不透明 */
--ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 选中环(非焦点):细一档 + 柔和色,2px 实色在色板/网格里像加粗边框 */
/* ---- 控件高度:三档,略放大以提升可点面积 ---- */
--ua-control-h-sm: 28px; /* 小控件高度:紧凑工具栏、标签内嵌按钮 */
@@ -136,6 +138,7 @@
--ua-color-highlight: rgba(255, 255, 255, 0.08); /* 暗色内高光:暗底上白高光刺眼,降到 8% 只留一道细光 */
--ua-color-accent: #378add; /* 暗色强调色:提亮以保证暗底可读 */
--ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色:深色反白,维持对比 */
--ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg)); /* 暗色柔和强调色:与亮色同结构,混入暗底即自然降饱和 */
--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; /* 暗色危险色 */
@@ -159,5 +162,5 @@
--ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent); /* 暗色警告焦点环 */
--ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent); /* 暗色错误强调环 */
--ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色呼吸光晕:暗底上低透明度看不见,加倍 */
--ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 暗色选中环:随 accent 翻转,与亮色同结构 */
--ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 暗色选中环:随 accent 翻转并与亮色同口径 */
}