Add color tokens for slider thumb and indicator (#27295)

gallery/src/pages/components/ha-slider.markdown

@@ -34,3 +34,5 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/slid
 **CSS Custom Properties**
 
 - `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
+- `--ha-slider-thumb-color` - Color of the slider thumb. Defaults to `var(--primary-color)`.
+- `--ha-slider-indicator-color` - Color of the filled portion of the slider track. Defaults to `var(--primary-color)`.

src/components/ha-slider.ts

@@ -19,7 +19,6 @@ export class HaSlider extends Slider {
       Slider.styles,
       css`
         :host {
-          --wa-form-control-activated-color: var(--ha-control-color);
           --track-size: var(--ha-slider-track-size, 4px);
           --marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
           --marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
@@ -54,6 +53,7 @@ export class HaSlider extends Slider {
 
         #thumb {
           border: none;
+          background-color: var(--ha-slider-thumb-color, var(--primary-color));
         }
 
         #slider:focus-visible:not(.disabled) #thumb,
@@ -62,6 +62,13 @@ export class HaSlider extends Slider {
           outline: var(--wa-focus-ring);
         }
 
+        #indicator {
+          background-color: var(
+            --ha-slider-indicator-color,
+            var(--primary-color)
+          );
+        }
+
         :host([size="medium"]) {
           --thumb-width: 20px;
           --thumb-height: 20px;

src/resources/theme/color/color.globals.ts

@@ -273,9 +273,6 @@ export const colorStyles = css`
     --material-background-color: var(--card-background-color);
     --material-secondary-background-color: var(--secondary-background-color);
     --material-secondary-text-color: var(--secondary-text-color);
-
-    /* Color for Home Assistant input controls e.g. slider, radio buttons */
-    --ha-control-color: var(--primary-color);
   }
 `;