fix: custom scrollbar style modified

Author: viva-jinyi

packages/design-system/src/css/style.css

@@ -9,41 +9,6 @@
 
 @config '../../tailwind.config.ts';
 
-:root {
-  --fg-color: #000;
-  --bg-color: #fff;
-  --comfy-menu-bg: #353535;
-  --comfy-menu-secondary-bg: #292929;
-  --comfy-topbar-height: 2.5rem;
-  --comfy-input-bg: #222;
-  --input-text: #ddd;
-  --descrip-text: #999;
-  --drag-text: #ccc;
-  --error-text: #ff4444;
-  --border-color: #4e4e4e;
-  --tr-even-bg-color: #222;
-  --tr-odd-bg-color: #353535;
-  --primary-bg: #236692;
-  --primary-fg: #ffffff;
-  --primary-hover-bg: #3485bb;
-  --primary-hover-fg: #ffffff;
-  --content-bg: #e0e0e0;
-  --content-fg: #000;
-  --content-hover-bg: #adadad;
-  --content-hover-fg: #000;
-
-  /* Code styling colors for help menu*/
-  --code-text-color: rgba(0, 122, 255, 1);
-  --code-bg-color: rgba(96, 165, 250, 0.2);
-  --code-block-bg-color: rgba(60, 60, 60, 0.12);
-
-  /* Scrollbar tokens (colors reuse existing palette) */
-  --scrollbar-size: 10px; /* width/height for webkit scrollbars */
-  --scrollbar-track: var(--color-white);
-  --scrollbar-thumb: var(--color-gray-400);
-  --scrollbar-thumb-hover: var(--color-gray-400);
-}
-
 @media (prefers-color-scheme: dark) {
   :root {
     --fg-color: #fff;
@@ -52,27 +17,9 @@
     --content-fg: #fff;
     --content-hover-bg: #222;
     --content-hover-fg: #fff;
-    --scrollbar-track: var(--color-charcoal-600);
-    /* Dark overrides for scrollbar */
-    --scrollbar-thumb: var(--color-charcoal-100);
-    --scrollbar-thumb-hover: var(--color-gray-800);
   }
 }
 
-/* Dark theme variable overrides for class-based theming */
-.dark-theme {
-  /* ensure tokens match dark scheme even without prefers-color-scheme */
-  --scrollbar-track: var(--color-charcoal-600);
-  --scrollbar-thumb: var(--color-charcoal-100);
-  --scrollbar-thumb-hover: var(--color-gray-800);
-  /* let UA widgets (including scrollbars) render in dark mode where supported */
-  color-scheme: dark;
-}
-/* Ensure scrollable containers participate in dark color-scheme */
-.dark-theme .custom-scrollbar {
-  color-scheme: dark;
-}
-
 @theme {
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
@@ -378,52 +325,36 @@
 }
 
 
-/* ===================== Custom Scrollbar (cross-browser) =====================
-   Usage: Add `custom-scrollbar` class to any scrollable container.
-   Notes:
-   - Firefox uses `scrollbar-width` and `scrollbar-color`.
-   - WebKit/Blink (Chrome/Edge/Safari) use `::-webkit-scrollbar` pseudo elements.
-   - macOS/iOS show overlay scrollbars; thick tracks may appear slimmer there.
-   - Uses existing CSS variables (tokens) for colors and size.
+/* ===================== Scrollbar Utilities (Tailwind) =====================
+   Usage: Add `scrollbar-custom` class to scrollable containers.
+   The scrollbar styling adapts to light/dark theme automatically.
 ============================================================================ */
-@layer components {
-  /* Base (light) theme */
-  .custom-scrollbar {
-    /* Firefox */
-    scrollbar-width: thin;                 /* auto | thin | none */
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);      /* thumb track */
-    /* Layout stability where supported */
-    scrollbar-gutter: stable both-edges;   /* ignored if unsupported */
-  }
-  .custom-scrollbar::-webkit-scrollbar {
-    width: var(--scrollbar-size);
-    height: var(--scrollbar-size);
-  }
-  .custom-scrollbar::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
-  }
-  .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: 999px;
-    border: 2px solid var(--scrollbar-track);            /* visual separation from track */
-  }
-  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover);                   /* hover color */
-  }
 
-  /* Dark theme overrides (scoped to your `.dark-theme` root) */
-  .dark-theme .custom-scrollbar {
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);      /* thumb track */
+@utility scrollbar-custom {
+  overflow-y: auto;
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--dialog-surface) transparent;
+
+  /* WebKit */
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background-color: transparent;
   }
-  .dark-theme .custom-scrollbar::-webkit-scrollbar-track {
-    background: var(--scrollbar-track);
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--dialog-surface);
+    border-radius: 9999px;
+    border: 2px solid transparent;
   }
-  .dark-theme .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border: 2px solid var(--scrollbar-track);
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--dialog-surface);
   }
-  .dark-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover);                   /* hover color */
+  &::-webkit-scrollbar-corner {
+    background: transparent;
   }
 }
 /* =================== End Custom Scrollbar (cross-browser) =================== */

src/components/input/MultiSelect.vue

@@ -243,7 +243,7 @@ const pt = computed(() => ({
   },
   listContainer: () => ({
     style: { maxHeight: listMaxHeight },
-    class: 'overflow-y-auto custom-scrollbar'
+    class: 'scrollbar-custom'
   }),
   list: {
     class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'

src/components/input/SingleSelect.vue

@@ -159,7 +159,7 @@ const pt = computed(() => ({
   },
   listContainer: () => ({
     style: `max-height: ${listMaxHeight}`,
-    class: 'overflow-y-auto custom-scrollbar'
+    class: 'scrollbar-custom'
   }),
   list: {
     class: