iter(g210): 滚动条令牌化并适配暗色主题

packages/design/tokens/tokens.css

@@ -16,6 +16,8 @@
   --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-scrollbar: rgba(0, 0, 0, 0.22); /* 滚动条拇指色：比边框重一档，白底上看得清又不抢内容 */
+  --ua-color-scrollbar-hover: rgba(0, 0, 0, 0.38); /* 滚动条拇指悬停色：加深表示可拖拽 */
   --ua-color-highlight: rgba(255, 255, 255, 0.5); /* 内高光白：主按钮等实色控件顶缘的 1px 高光（暗色必须降档，否则刺眼） */
   --ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
   --ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
@@ -135,6 +137,8 @@
   --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-scrollbar: rgba(255, 255, 255, 0.24); /* 暗色滚动条拇指：暗底上黑拇指完全看不见，改白色低透明度 */
+  --ua-color-scrollbar-hover: rgba(255, 255, 255, 0.42); /* 暗色滚动条拇指悬停：亮度再升一档表示可拖拽 */
   --ua-color-highlight: rgba(255, 255, 255, 0.08); /* 暗色内高光：暗底上白高光刺眼，降到 8% 只留一道细光 */
   --ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
   --ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */

packages/design/tokens/tokens.json

@@ -21,6 +21,14 @@
       "light": "rgba(0, 0, 0, 0.15)",
       "dark": "rgba(255, 255, 255, 0.15)"
     },
+    "scrollbar": {
+      "light": "rgba(0, 0, 0, 0.22)",
+      "dark": "rgba(255, 255, 255, 0.24)"
+    },
+    "scrollbarHover": {
+      "light": "rgba(0, 0, 0, 0.38)",
+      "dark": "rgba(255, 255, 255, 0.42)"
+    },
     "highlight": {
       "light": "rgba(255, 255, 255, 0.5)",
       "dark": "rgba(255, 255, 255, 0.08)"

packages/skin/ui/ui.css

@@ -4991,3 +4991,45 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
     animation: none;
   }
 }
+
+/* ---- 滚动条：细条 + 令牌化拇指（Windows 原生粗条在暗色下是一条亮带，与令牌化皮肤割裂） ---- */
+.ua-table-scroll,
+.ua-select-pop,
+.ua-tabs-head,
+.ua-drawer-body,
+.ua-transfer-list,
+.ua-cascader-col,
+.ua-splitter-pane,
+.ua-autocomplete-list,
+.ua-multiselect-list,
+.ua-mentions-pop,
+.ua-treeselect-pop,
+.ua-vlist,
+.ua-cmdk-list {
+  scrollbar-width: thin; /* 标准属性：Firefox / Chromium 121+ 生效，细条不挤内容 */
+  scrollbar-color: var(--ua-color-scrollbar) transparent; /* 拇指走令牌、轨道透明，避免画出方块底 */
+}
+/* WebKit 系（旧 Chromium / Safari）：伪元素单独画，才能做胶囊拇指与悬停加深 */
+[class^='ua-']::-webkit-scrollbar,
+[class*=' ua-']::-webkit-scrollbar {
+  inline-size: 8px; /* 拇指粗细：8px 点得中又不抢版面 */
+  block-size: 8px; /* 横向滚动条同粗细 */
+}
+[class^='ua-']::-webkit-scrollbar-track,
+[class*=' ua-']::-webkit-scrollbar-track {
+  background: transparent; /* 轨道透明：底色交给滚动容器自己，两层方块会显脏 */
+}
+[class^='ua-']::-webkit-scrollbar-thumb,
+[class*=' ua-']::-webkit-scrollbar-thumb {
+  border-radius: 999px; /* 胶囊拇指：与全库胶囊形控件一致 */
+  background: var(--ua-color-scrollbar);
+  transition: background-color var(--ua-duration-fast) var(--ua-ease);
+}
+[class^='ua-']::-webkit-scrollbar-thumb:hover,
+[class*=' ua-']::-webkit-scrollbar-thumb:hover {
+  background: var(--ua-color-scrollbar-hover); /* 悬停加深：给出「可拖拽」的手感 */
+}
+[class^='ua-']::-webkit-scrollbar-corner,
+[class*=' ua-']::-webkit-scrollbar-corner {
+  background: transparent; /* 双向滚动容器的右下角不留白块 */
+}