@guoyg578/k-ui 0.1.4 → 0.1.6

package/dist/styles/tokens.css

@@ -42,6 +42,10 @@
   --k-hover-tint: rgba(0, 0, 0, 0.06);          /* neutral hover wash on light surfaces */
   --k-veil: rgba(255, 255, 255, 0.55);          /* loading scrim over content */
   --color-status-error: #ef4444;
+
+  /* Scrollbar thumb — kept light & translucent; native ones read too heavy. */
+  --k-scrollbar-thumb: rgba(0, 0, 0, 0.14);
+  --k-scrollbar-thumb-hover: rgba(0, 0, 0, 0.26);
 }
 
 /* Dark theme overrides — flip the ink ramp + map `bg-white` to a surface color.
@@ -71,7 +75,12 @@
   --k-veil: rgba(20, 20, 20, 0.55);
   --color-status-error: #f87171;
 
-  /* Render native form controls (scrollbars, input spinners) in dark variants. */
+  /* Scrollbar thumb — subtle light-on-dark, mirrors the light-mode token. */
+  --k-scrollbar-thumb: rgba(255, 255, 255, 0.13);
+  --k-scrollbar-thumb-hover: rgba(255, 255, 255, 0.24);
+
+  /* Render native form controls (input spinners, date pickers) in dark variants.
+     Scrollbars themselves are restyled below, so this no longer drives them. */
   color-scheme: dark;
 }
 
@@ -91,6 +100,36 @@
   background-color: rgba(44, 44, 44, 0.88);
 }
 
+/* ============================================================
+ * Scrollbars — slim, low-contrast, token-driven. Native scrollbars
+ * (esp. light-mode Chromium) render a heavy gray thumb; this softens
+ * them everywhere and keeps them subtle in dark mode too.
+ * ============================================================ */
+* {
+  scrollbar-width: thin;                                  /* Firefox */
+  scrollbar-color: var(--k-scrollbar-thumb) transparent;  /* thumb / track */
+}
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: var(--k-scrollbar-thumb);
+  border-radius: 999px;
+  /* transparent border + padding-box = inset, slim pill thumb */
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--k-scrollbar-thumb-hover);
+}
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 /* ============================================================
  * Global component-layer classes used by teleported overlays
  * (KSelect / KCombobox / KCommandPalette / KDialog / KDrawer …).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guoyg578/k-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "可复用的 Vue 3 组件库 (K 前缀)，基于 reka-ui (headless) + Tailwind v4 设计令牌。",
   "type": "module",
   "license": "MIT",