ui: improve scrollbar UI with custom colors and rounded thumb (#983)

* ui: improve scrollbar UI with custom colors and rounded thumb

* ui: increase scrollbar thickness for better visibility

* ui: refine scrollbar styling from primary pink to text/15 color and add custom buttons for scrollbar

* tweaks

---------

Co-authored-by: CJ Pais <cj@cjpais.com>

src/App.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @theme {
+  /* Design tokens */
   --color-text: #0f0f0f;
   --color-background: #fbfbfb;
   --color-background-ui: #da5893;
@@ -30,6 +31,13 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 
+  --scrollbar-thumb: color-mix(in srgb, var(--color-text), transparent 85%);
+  --scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--color-text),
+    transparent 70%
+  );
+
   /* Apply colors */
   color: var(--color-text);
   background-color: var(--color-background);
@@ -54,6 +62,30 @@
   }
 }
 
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 20px;
+  border: 3px solid transparent;
+  border-right-width: 4px;
+  border-left-width: 3px;
+  background-clip: content-box;
+  min-height: 32px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
 @layer utilities {
   .text-stroke {
     -webkit-text-stroke: 2px var(--color-text-stroke);