feature: SelectBox has custom scrollbar

Author: viva-jinyi

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

@@ -9,6 +9,41 @@
 
 @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;
@@ -17,9 +52,27 @@
     --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);
@@ -324,7 +377,58 @@
   }
 }
 
-/* Everything below here to be cleaned up over time. */
+
+/* ===================== 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.
+============================================================================ */
+@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 */
+  }
+  .dark-theme .custom-scrollbar::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+  }
+  .dark-theme .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border: 2px solid var(--scrollbar-track);
+  }
+  .dark-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);                   /* hover color */
+  }
+}
+/* =================== End Custom Scrollbar (cross-browser) =================== */
+
+/* Everthing below here to be cleaned up over time. */
 
 body {
   width: 100vw;

src/components/input/MultiSelect.vue

@@ -243,7 +243,7 @@ const pt = computed(() => ({
   },
   listContainer: () => ({
     style: { maxHeight: listMaxHeight },
-    class: 'overflow-y-auto scrollbar-hide'
+    class: 'overflow-y-auto custom-scrollbar'
   }),
   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 scrollbar-hide'
+    class: 'overflow-y-auto custom-scrollbar'
   }),
   list: {
     class: