♻️ Refactor scrollbar rule

frontend/src/app/main/ui/ds/colors.scss

@@ -11,6 +11,7 @@ $mint-250: #00d1b8;
 $mint-700: #426158;
 $mint-150-60: #7efff599;
 $mint-250-10: #00d1b81a;
+$mint-250-70: #00d1b8b3;
 
 $green-200: #a7e8d9;
 $green-500: #2d9f8f;
@@ -33,6 +34,7 @@ $purple-500: #a977d1;
 $purple-600: #8c33eb;
 $purple-700: #6911d4;
 $purple-600-10: #8c33eb1a;
+$purple-600-70: #8c33ebb3;
 $purple-700-60: #6911d499;
 
 $aqua-200: #ddf7ff;
@@ -77,6 +79,7 @@ $grayish-red: #bfbfbf;
   --color-accent-quaternary: #{$pink-400};
   --color-accent-overlay: #{$purple-700-60};
   --color-accent-select: #{$purple-600-10};
+  --color-accent-background-select: #{$purple-600-70};
   --color-accent-action: #{$purple-400};
   --color-accent-action-hover: #{$purple-500};
   --color-accent-off: #{$gray-50};
@@ -128,6 +131,7 @@ $grayish-red: #bfbfbf;
   --color-accent-quaternary: #{$pink-400};
   --color-accent-overlay: #{$mint-150-60};
   --color-accent-select: #{$mint-250-10};
+  --color-accent-background-select: #{$mint-250-70};
   --color-accent-action: #{$purple-400};
   --color-accent-action-hover: #{$purple-500};
   --color-accent-off: #{$gray-50};

frontend/src/app/main/ui/ds/mixins.scss

@@ -4,6 +4,10 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "ds/typography.scss" as t;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+
 @mixin textEllipsis {
   display: block;
   max-width: 99%;
@@ -20,3 +24,73 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
+/// Custom Scrollbar Mixin
+/// @param {Color} $thumb-color - Base thumb color
+/// @param {Color} $thumb-hover-color - Thumb color on hover
+/// @param {Length} $size - Scrollbar size (width/height)
+/// @param {Length} $radius - Thumb border radius
+/// @param {Length} $border - Inner transparent border size
+/// @param {Bool} $include-selection - Include ::selection styles
+/// @param {Bool} $include-placeholder - Include placeholder styles
+@mixin custom-scrollbar(
+  $thumb-color: #aab5ba4d,
+  $thumb-hover-color: #aab5bab3,
+  $size: $sz-12,
+  $radius: $br-8,
+  $border: $b-2,
+  $include-selection: true,
+  $include-placeholder: true
+) {
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: #{$thumb-color} transparent;
+
+  &:hover {
+    scrollbar-color: #{$thumb-hover-color} transparent;
+  }
+
+  // Webkit (legacy support)
+  &::-webkit-scrollbar {
+    background: transparent;
+    cursor: pointer;
+    width: $size;
+    height: $size;
+  }
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $thumb-color;
+    background-clip: content-box;
+    border: $border solid transparent;
+    border-radius: $radius;
+
+    &:hover {
+      background-color: $thumb-hover-color;
+    }
+  }
+
+  @if $include-selection {
+    &::selection {
+      background: var(--color-accent-background-select);
+      color: var(--color-static-white);
+    }
+  }
+
+  @if $include-placeholder {
+    &::placeholder {
+      @include t.use-typography("body-small");
+      color: var(--color-foreground-secondary);
+    }
+
+    // Legacy webkit
+    &::-webkit-input-placeholder {
+      @include t.use-typography("body-small");
+      color: var(--color-foreground-secondary);
+    }
+  }
+}

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/combobox.scss

@@ -6,14 +6,11 @@
 
 @use "ds/_utils.scss" as *;
 @use "ds/_sizes.scss" as *;
-// TODO: Remove this after creating a non deprecated scrollbar class
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/mixins.scss" as *;
 
 .dropdown {
-  // TODO: create new scrollbar class not deprecated.
-  @extend .new-scrollbar;
   position: fixed;
   max-block-size: $sz-400;
-  max-block-size: 200px;
   overflow-y: auto;
+  @include custom-scrollbar();
 }