feat: tweak slider colors to be more muted (#9076)

packages/excalidraw/components/Range.scss

@@ -1,10 +1,7 @@
 @import "../css/variables.module.scss";
 
 .excalidraw {
-  --Range-track-background: var(--button-bg);
-  --Range-track-background-active: var(--color-primary);
-  --Range-thumb-background: var(--color-on-surface);
-  --Range-legend-color: var(--text-primary-color);
+  --slider-thumb-size: 16px;
 
   .range-wrapper {
     position: relative;
@@ -16,7 +13,7 @@
     width: 100%;
     height: 4px;
     -webkit-appearance: none;
-    background: var(--Range-track-background);
+    background: var(--color-slider-track);
     border-radius: 2px;
     outline: none;
   }
@@ -24,18 +21,18 @@
   .range-input::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 20px;
-    height: 20px;
-    background: var(--Range-thumb-background);
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    background: var(--color-slider-thumb);
     border-radius: 50%;
     cursor: pointer;
     border: none;
   }
 
   .range-input::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: var(--Range-thumb-background);
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    background: var(--color-slider-thumb);
     border-radius: 50%;
     cursor: pointer;
     border: none;
@@ -46,7 +43,7 @@
     bottom: 0;
     transform: translateX(-50%);
     font-size: 12px;
-    color: var(--Range-legend-color);
+    color: var(--text-primary-color);
   }
 
   .zero-label {
@@ -54,6 +51,6 @@
     bottom: 0;
     left: 4px;
     font-size: 12px;
-    color: var(--Range-legend-color);
+    color: var(--text-primary-color);
   }
 }

packages/excalidraw/components/Range.tsx

@@ -34,7 +34,7 @@ export const Range = ({
       const position =
         (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
       valueElement.style.left = `${position}px`;
-      rangeElement.style.background = `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
+      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
     }
   }, [value]);
 

packages/excalidraw/css/theme.scss

@@ -53,6 +53,9 @@
   --scrollbar-thumb: var(--button-gray-2);
   --scrollbar-thumb-hover: var(--button-gray-3);
 
+  --color-slider-track: hsl(240, 100%, 90%);
+  --color-slider-thumb: var(--color-gray-80);
+
   --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
     0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
     0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
@@ -207,6 +210,8 @@
     --scrollbar-thumb: #{$oc-gray-8};
     --scrollbar-thumb-hover: #{$oc-gray-7};
 
+    --color-slider-track: hsl(244, 23%, 39%);
+
     // will be inverted to a lighter color.
     --color-selection: #3530c4;