Merge pull request #648 from materializecss/v2-dev

2.3.1

Author: wuda-io

components/chips/_chips.scss

@@ -1,5 +1,3 @@
-@use '../../sass/colors.module.css' as *;
-
 .chip {
   --font-size: 14px;
   --font-size-icon: 18px;
@@ -45,7 +43,7 @@
 
 .chip > .material-icons {
   font-size: var(--font-size-icon);
-  @extend .on-surface-variant-text;
+  color: var(--md-sys-color-on-surface-variant);
 }
 
 .chip .close {

components/collapsible/_collapsible.scss

@@ -1,6 +1,5 @@
 @use '../../sass/variables' as *;
 @use '../../sass/global' as *;
-// @use '../../sass/color-variables' as *;
 
 .collapsible {
   padding-left: 0;

components/progress-indicators/_preloader.scss

@@ -1,12 +1,11 @@
 @use '../../sass/variables' as *;
-@use '../../sass/colors.module.css' as *;
 
 .progress {
   position: relative;
   height: 4px;
   display: block;
   width: 100%;
-  @extend .surface-variant;
+  background-color: var(--md-sys-color-surface-variant);
   border-radius: 4px;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   overflow: hidden;
@@ -82,8 +81,6 @@
   }
 }
 
-
-
 /*
     @license
     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
@@ -112,7 +109,6 @@
  *      SHRINK_TIME = 400ms
  */
 
-
 .preloader-wrapper {
   display: inline-block;
   position: relative;

components/sliders/_range.scss

@@ -1,5 +1,4 @@
 @use '../../sass/global' as *;
-@use '../../sass/colors.module.css' as *;
 
 .range-field {
   position: relative;
@@ -64,7 +63,7 @@ input[type=range] + .thumb {
 // Shared
 @mixin range-track {
   height: 3px;
-  @extend .surface-variant;
+  background-color: var(--md-sys-color-surface-variant);
   border: none;
 }
 

components/switch/_switches.scss

@@ -1,5 +1,3 @@
-@use '../../sass/colors.module.css' as *;
-
 .switch {
   --track-height: 32px;
   --track-width: 52px;
@@ -41,7 +39,7 @@
       height: var(--size-on);
     }
     &:after {
-      @extend .surface;
+      background-color: var(--md-sys-color-surface);
     }
   }
 }
@@ -82,10 +80,9 @@
 
   // NOT CHECKED [DOT]
   &:after {
-    @extend .outline;
+    background-color: var(--md-sys-color-outline);
     height: var(--size-off);
     width: var(--size-off);
-
     //@extend .surface-variant;
     //box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
   }