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

packages/excalidraw/components/Range.scss

@@ -13,24 +13,24 @@
     width: 100%;
     height: 4px;
     -webkit-appearance: none;
-    background: var(--Range-track-background);
+    background: var(--color-slider-track);
     border-radius: 2px;
     outline: none;
   }
   .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;
@@ -40,13 +40,13 @@
     bottom: 0;
     transform: translateX(-50%);
     font-size: 12px;
-    color: var(--Range-legend-color);
+    color: var(--text-primary-color);
   }
   .zero-label {
     position: absolute;
     bottom: 0;
     left: 4px;
     font-size: 12px;
-    color: var(--Range-legend-color);
+    color: var(--text-primary-color);
   }
 }

packages/excalidraw/components/Range.tsx

@@ -32,7 +32,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]);
   return (