iter(g179): 弹层阴影语义化归档

packages/skin/ui/ua.manifest.json

@@ -136,7 +136,7 @@
     "无障碍基线：装饰性占位（skeleton）aria-hidden、加载指示（spinner）role=status、关闭按钮必须 aria-label、弹层弹窗 aria-haspopup/expanded、读屏可见的状态一律同步 aria-*"
   ],
   "docs": {
-    "intro": "28 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。",
+    "intro": "28 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。\n\n阴影对照表：下拉弹层=shadow-2 / 浮层与悬浮按钮=shadow-3 / 模态弹窗与抽屉及通知=shadow-4 / 卡片与输入组轻浮起=shadow-1；主按钮与强调件的主题色投影=shadow-accent / shadow-accent-strong，组件内不得再手写 box-shadow 字面值。",
     "steps": [
       "安装依赖：pnpm add @ui-arch/ui @ui-arch/frame（workspace 内自动链接）",
       "引入样式：在应用入口 import '@ui-arch/ui/ui.css'，暗色主题在根元素设 data-theme='dark'",

packages/skin/ui/ui.css

@@ -19,7 +19,7 @@
 .ua-btn:hover {
   filter: brightness(1.08);
   transform: translateY(-1px);
-  box-shadow: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent);
+  box-shadow: var(--ua-shadow-accent); /* 主题色投影：主按钮悬停浮起 */
 }
 .ua-btn:active {
   transform: translateY(0) scale(0.97);
@@ -91,7 +91,7 @@
 }
 .ua-card-hoverable:hover {
   transform: translateY(-2px);
-  box-shadow: 0 10px 24px color-mix(in srgb, var(--ua-color-text) 14%, transparent);
+  box-shadow: var(--ua-shadow-2); /* 卡片悬停浮起 = 下拉档 */
 }
 .ua-table table {
   width: 100%;
@@ -2279,7 +2279,7 @@ button.ua-step-dot:hover {
   height: 100%;
   border-radius: 999px;
   background: var(--ua-color-bg);
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--ua-color-text) 12%, transparent);
+  box-shadow: var(--ua-shadow-1); /* 滑块拇指轻浮起 = 贴地档 */
   transition: transform var(--ua-duration-base) ease, width var(--ua-duration-base) ease;
   pointer-events: none;
 }
@@ -3462,7 +3462,7 @@ button.ua-step-dot:hover {
   transform: translateY(8px) scale(0.9);
   pointer-events: none;
   transition: opacity var(--ua-duration-base) ease, transform var(--ua-duration-base) ease;
-  box-shadow: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent);
+  box-shadow: var(--ua-shadow-accent-strong); /* 悬浮强调件主题色投影 */
 }
 .ua-backtop.is-visible {
   opacity: 1;
@@ -4327,7 +4327,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   font: inherit;
   font-size: var(--ua-font-size-md);
   cursor: pointer;
-  box-shadow: 0 6px 20px color-mix(in srgb, var(--ua-color-text) 16%, transparent);
+  box-shadow: var(--ua-shadow-3); /* 悬浮按钮 = 浮层档 */
   transition: transform var(--ua-duration-fast) ease, box-shadow var(--ua-duration-fast) ease, color var(--ua-duration-fast) ease, border-color var(--ua-duration-fast) ease;
 }
 .ua-fab.has-label {
@@ -4338,7 +4338,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   color: var(--ua-color-accent);
   border-color: var(--ua-color-accent);
   transform: translateY(-2px);
-  box-shadow: 0 10px 26px color-mix(in srgb, var(--ua-color-text) 22%, transparent);
+  box-shadow: var(--ua-shadow-4); /* 悬停抬升 = 最高层档 */
 }
 .ua-fab:active {
   transform: translateY(0) scale(0.97);
@@ -4419,7 +4419,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   border: 1px solid var(--ua-color-border);
   border-radius: var(--ua-radius-md);
   background: var(--ua-color-surface);
-  box-shadow: 0 12px 28px color-mix(in srgb, var(--ua-color-text) 16%, transparent);
+  box-shadow: var(--ua-shadow-2); /* 下拉弹层 = 下拉档 */
 }
 .ua-mentions.is-open .ua-mentions-pop {
   display: block;
@@ -4518,7 +4518,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   border: 1px solid var(--ua-color-border);
   border-radius: var(--ua-radius-md);
   background: var(--ua-color-surface);
-  box-shadow: 0 14px 30px color-mix(in srgb, var(--ua-color-text) 16%, transparent);
+  box-shadow: var(--ua-shadow-2); /* 下拉弹层 = 下拉档 */
 }
 .ua-treeselect.is-open .ua-treeselect-pop {
   display: block;