From 053f38918de0d4fcbdc2022c56425a0890efe97f Mon Sep 17 00:00:00 2001
From: HIsheR <shawn1440982358@163.com>
Date: Mon, 26 Oct 2026 19:47:14 +0800
Subject: [PATCH] =?UTF-8?q?iter(g210):=20=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=A4=E7=89=8C=E5=8C=96=E5=B9=B6=E9=80=82=E9=85=8D=E6=9A=97?=
 =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 llms-full.txt                      |  2 ++
 packages/design/tokens/tokens.css  |  4 +++
 packages/design/tokens/tokens.json |  8 ++++++
 packages/skin/ui/ui.css            | 42 ++++++++++++++++++++++++++++++
 4 files changed, 56 insertions(+)

diff --git a/llms-full.txt b/llms-full.txt
index 1fd58dc..2a11369 100644
--- a/llms-full.txt
+++ b/llms-full.txt
@@ -2187,6 +2187,8 @@ 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-scrollbar: rgba(0, 0, 0, 0.22)（暗色 rgba(255, 255, 255, 0.24)）
+- --ua-color-scrollbar-hover: rgba(0, 0, 0, 0.38)（暗色 rgba(255, 255, 255, 0.42)）
 - --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）
diff --git a/packages/design/tokens/tokens.css b/packages/design/tokens/tokens.css
index 8730228..649dc34 100644
--- a/packages/design/tokens/tokens.css
+++ b/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; /* 暗色强调色上的文字色：深色反白，维持对比 */
diff --git a/packages/design/tokens/tokens.json b/packages/design/tokens/tokens.json
index fff560a..9c96dd7 100644
--- a/packages/design/tokens/tokens.json
+++ b/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)"
diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css
index 0cbc3c2..d2768ac 100644
--- a/packages/skin/ui/ui.css
+++ b/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; /* 双向滚动容器的右下角不留白块 */
+}