ui(colors): Adds neutral color variable and updates scrollbars (#4933)

platform/docs/src/css/custom.css

@@ -9,6 +9,7 @@
 @layer base {
   :root {
     --highlight: 191 74% 63%;
+    --neutral: 213 22% 59%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 236 62% 5%;

platform/docs/tailwind.config.js

@@ -43,6 +43,7 @@ module.exports = {
     extend: {
       colors: {
         highlight: 'hsl(var(--highlight))',
+        neutral: 'hsl(var(--neutral))',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',

platform/ui-next/src/components/ScrollArea/ScrollArea.tsx

@@ -114,7 +114,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-input relative flex-1 rounded-full" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-neutral/50 relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

platform/ui-next/src/components/Viewport/ImageScrollbar.module.css

@@ -32,7 +32,8 @@
 /* Thumb styles for WebKit browsers - more specific selector */
 input[type='range'].scrollbarInput::-webkit-slider-thumb {
   -webkit-appearance: none !important;
-  background-color: hsl(var(--input));
+  background-color: hsl(var(--neutral));
+  opacity: 50%;
   border: none;
   border-radius: 57px;
   cursor: -webkit-grab;
@@ -44,12 +45,14 @@ input[type='range'].scrollbarInput::-webkit-slider-thumb {
 input[type='range'].scrollbarInput::-webkit-slider-thumb:active,
 input[type='range'].scrollbarInput::-webkit-slider-thumb:hover {
   background-color: hsl(var(--primary));
+  opacity: 60%;
   cursor: -webkit-grabbing;
 }
 
 /* Thumb styles for Firefox - more specific selector */
 input[type='range'].scrollbarInput::-moz-range-thumb {
-  background-color: hsl(var(--input));
+  background-color: hsl(var(--neutral));
+  opacity: 50%;
   border: none;
   border-radius: 57px;
   cursor: -moz-grab;
@@ -60,6 +63,7 @@ input[type='range'].scrollbarInput::-moz-range-thumb {
 input[type='range'].scrollbarInput::-moz-range-thumb:active,
 input[type='range'].scrollbarInput::-moz-range-thumb:hover {
   background-color: hsl(var(--primary));
+  opacity: 50%;
   cursor: -moz-grabbing;
 }
 

platform/ui-next/src/tailwind.css

@@ -9,6 +9,7 @@
 @layer base {
   :root {
     --highlight: 191 74% 63%;
+    --neutral: 213 22% 59%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 234 64% 10%;
@@ -252,4 +253,4 @@ input[type='number']::-webkit-outer-spin-button {
 
 input[type='number'] {
   -moz-appearance: textfield; /* For Firefox */
-}
+}

platform/ui-next/tailwind.config.js

@@ -44,6 +44,7 @@ module.exports = {
     extend: {
       colors: {
         highlight: 'hsl(var(--highlight))',
+        neutral: 'hsl(var(--neutral))',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',

platform/ui/src/tailwind.css

@@ -11,8 +11,6 @@
   }
 }
 
-
-
 /* Truncate 2 lines utility */
 .truncate-2-lines {
   overflow: hidden;
@@ -34,6 +32,7 @@
 @layer base {
   :root {
     --highlight: 191 74% 63%;
+    --neutral: 213 22% 59%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 236 62% 5%;
@@ -102,4 +101,4 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
-}
+}