diff --git a/.ua/visual-baseline.json b/.ua/visual-baseline.json index 0a067bf..b9cc6b3 100644 --- a/.ua/visual-baseline.json +++ b/.ua/visual-baseline.json @@ -1,14 +1,14 @@ { "$schema": "视觉漂移基线:各类硬编码视觉字面量的允许上限,任一类超出即 ua audit:visual 退出码 1;迁移后用 --baseline 重写", "file": "packages/skin/ui/ui.css", - "commit": "0e996e4", - "generatedAt": "2026-10-26T09:54:55.315Z", + "commit": "8fffaf5", + "generatedAt": "2026-10-26T09:55:54.728Z", "lines": 4874, - "total": 18, + "total": 13, "counts": { "font-size-literal": 0, "duration-literal": 0, - "shadow-literal": 5, + "shadow-literal": 0, "radius-literal": 0, "focus-ring-variant": 0, "space-literal": 13, diff --git a/llms-full.txt b/llms-full.txt index 102873d..c480f86 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -2217,6 +2217,10 @@ node packages/tools/cli/bin/ua.js |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-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) +- --ua-shadow-gap: 0 0 0 2px var(--ua-color-bg) - --ua-duration-fast: 0.15s - --ua-duration-base: 0.2s - --ua-duration-slow: 0.25s diff --git a/packages/design/tokens/tokens.css b/packages/design/tokens/tokens.css index 9869ed7..c059e13 100644 --- a/packages/design/tokens/tokens.css +++ b/packages/design/tokens/tokens.css @@ -63,6 +63,10 @@ --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-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); /* 描边型:强调色内框,标记「今天」这类弱选中态 */ + --ua-shadow-gap: 0 0 0 2px var(--ua-color-bg); /* 断口型:用底色描一圈把相邻元素分开(头像组叠层、角标与按钮边缘) */ /* ---- 动效:四档交互时长 + 四档循环时长 + 两条主缓动曲线 ---- */ --ua-duration-fast: 0.15s; /* 快:hover / 聚焦 / 颜色与边框变化(既有样式的主流时长) */ @@ -116,6 +120,10 @@ --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-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); /* 暗色强调内框 */ + --ua-shadow-gap: 0 0 0 2px var(--ua-color-bg); /* 暗色断口:底色翻转后仍断开 */ --ua-focus-ring: 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) 52%, transparent); /* 暗色内嵌焦点环 */ --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent); /* 暗色警告焦点环 */ diff --git a/packages/design/tokens/tokens.json b/packages/design/tokens/tokens.json index 99dc90a..77e71eb 100644 --- a/packages/design/tokens/tokens.json +++ b/packages/design/tokens/tokens.json @@ -108,6 +108,22 @@ "accentStrong": { "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)" + }, + "hairline": { + "light": "inset 0 -1px 0 var(--ua-border-subtle)", + "dark": "inset 0 -1px 0 var(--ua-border-subtle)" + }, + "insetBorder": { + "light": "inset 0 0 0 1px var(--ua-color-border)", + "dark": "inset 0 0 0 1px var(--ua-color-border)" + }, + "insetAccent": { + "light": "inset 0 0 0 1px var(--ua-color-accent)", + "dark": "inset 0 0 0 1px var(--ua-color-accent)" + }, + "gap": { + "light": "0 0 0 2px var(--ua-color-bg)", + "dark": "0 0 0 2px var(--ua-color-bg)" } }, "motion": { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index f225d5e..553f823 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -134,7 +134,7 @@ background: var(--ua-color-surface); font-weight: var(--ua-weight-medium); color: var(--ua-color-text-muted); - box-shadow: inset 0 -1px 0 var(--ua-border-subtle); + box-shadow: var(--ua-shadow-hairline); } .ua-table th.ua-sortable { cursor: pointer; @@ -3402,7 +3402,7 @@ button.ua-step-dot:hover { background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); } .ua-datepicker-day.is-today { - box-shadow: inset 0 0 0 1px var(--ua-color-accent); + box-shadow: var(--ua-shadow-inset-accent); } .ua-datepicker-day.is-selected { color: var(--ua-color-accent-contrast); @@ -4174,7 +4174,7 @@ button.ua-step-dot:hover { transform: translateY(-1px); } .ua-calendar-day.is-today { - box-shadow: inset 0 0 0 1px var(--ua-color-border); /* 今天只用细内框,不与选中态抢视觉 */ + box-shadow: var(--ua-shadow-inset-border); /* 今天只用细内框,不与选中态抢视觉 */ } .ua-calendar-day.is-selected { background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); @@ -4391,7 +4391,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } font-size: var(--ua-font-size-xs); line-height: 18px; text-align: center; - box-shadow: 0 0 0 2px var(--ua-color-bg); /* 与页面底色断开,避免和按钮边缘糊在一起 */ + box-shadow: var(--ua-shadow-gap); /* 与页面底色断开,避免和按钮边缘糊在一起 */ } @media (prefers-reduced-motion: reduce) { .ua-fab { @@ -4680,7 +4680,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } } .ua-avatar-group > .ua-avatar { margin-left: calc(-1 * var(--ua-space-2)); - box-shadow: 0 0 0 2px var(--ua-color-bg); + box-shadow: var(--ua-shadow-gap); } .ua-avatar-group > .ua-avatar:first-child { margin-left: 0;