fix: isolate colors

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);
   }

components/text-fields/_form-field.scss

@@ -20,9 +20,6 @@ To fully release a new version, you need to have access to the @materializecss o
 - In your local copy of Materialize, go into the dev Branch with `git checkout v2-dev` and pull the newest version
    with `git pull origin v2-dev` to have the newest version from the server. Run Tests and check if everything works.
 
-- Create a new Release branch with `git checkout -b release-2.X.X`.
-   In case something happens or needs to be changed during the release it is better to keep the release on its own branch.
-
 - Run `npm version <change-type>`
    Where `<change-type> = patch, minor, major`. 
    [details](https://docs.npmjs.com/updating-your-published-package-version-number)
@@ -33,13 +30,9 @@ To fully release a new version, you need to have access to the @materializecss o
    * dist/js
    * dist/css
 
-- (Add Commit with message "chore: release 2.X.X-alpha")
-
-- Push to server. `git push --tags`. Remember to push the tags aswell.
-
-- Create a Pull Request (PR) into dev (dev <-- release-branch)
+- Push to server. `git push `. 
 
-- Create a PR (main <-- dev)
+- Create a Pull Request from dev into main
 
 - Merge the Pull Request if all checks pass and there were no concerns. (Set the draft release to public.)
 

docs/FOR_MAINTAINERS.md

@@ -1,4 +1,3 @@
-
 @use "sass:math";
 @use './variables' as *;
 

sass/_typography.scss

@@ -1,9 +1,8 @@
+@use "sass:math";
+
 // TypeScale
 $md_sys_typescale_body-large_size: 16px;
 
-@use "sass:math";
-@use "./_colors";
-
 // Colors
 $success-color: colorFunc("green", "base") !default;
 $link-color: colorFunc("light-blue", "darken-1") !default;

sass/_variables.scss

@@ -7,7 +7,6 @@
 @forward "./colors.module.css";
 @forward "./typography";
 @forward "./mixins.module";
-// @forward "./colors"; // => put in seperate file
 @forward "./variables";
 @forward "./global";
 @forward "./grid";
@@ -46,3 +45,4 @@
 @forward '../components/text-fields/input-fields';
 @forward '../components/text-fields/select';
 @forward '../components/text-fields/file-input';
+@forward '../components/text-fields/formfields.css';