fix(material/slider): change color of inactive track

change color of inactive track to pass 3:1 non text color contrast ratio fixes b/286300099
DBowen33 · Oct 3, 2024 · 2ce163c · 2ce163c
1 parent b777c2d
commit 2ce163c
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 2 deletions.
diff --git a/src/material/core/tokens/m3/definitions/_md-comp-slider.scss b/src/material/core/tokens/m3/definitions/_md-comp-slider.scss
@@ -50,7 +50,7 @@ $_default: (
     'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
     'hover-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
-    'inactive-track-color': map.get($deps, 'md-sys-color', 'surface-variant'),
+    'inactive-track-color': map.get($deps, 'md-sys-color', 'outline'),
     'inactive-track-height': if($exclude-hardcoded-values, null, 4px),
     'inactive-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),
     'label-container-color': map.get($deps, 'md-sys-color', 'primary'),

diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
@@ -68,7 +68,6 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots());
 .mdc-slider__track--inactive {
   left: 0;
   top: 0;
-  opacity: 0.24;
 
   @include token-utils.use-tokens($_mdc-slots...) {
     @include token-utils.create-token-slot(background-color, inactive-track-color);