fix: resolve sass warnings (#179)

Co-authored-by: Daniel Kimmich <[email protected]>

Author: json-derulo

projects/material-css-vars/src/lib/_internal-helper.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // used to circumvent node sass issue: https://github.com/sass/node-sass/issues/2251
 @function rgb($r, $g: null, $b: null) {
   @if ($g == null) {
@@ -42,7 +44,7 @@
 @mixin root($varMap: null) {
   @at-root :root {
     @each $varName, $varValue in $varMap {
-      @if (type_of($varValue) ==string) {
+      @if (meta.type-of($varValue) == string) {
         #{$varName}: $varValue; // to prevent quotes interpolation
       } @else {
         #{$varName}: #{$varValue};

projects/material-css-vars/src/lib/_public-color-util.scss

@@ -1,8 +1,11 @@
-@function hex-to-rgb($color) {
+@use "sass:color";
+
+@function hex-to-rgb($color) {
   @if ($color == null) {
     @return null;
   }
-  @return red($color), green($color), blue($color);
+  @return color.channel($color, "red"), color.channel($color, "green"),
+    color.channel($color, "blue");
 }
 
 @function hex-to-rgba($color) {

projects/material-css-vars/src/lib/_public-util.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "sass:meta";
 @use "public-color-util";
 @use "variables";
 
@@ -39,9 +41,9 @@
     }
   }
 
-  $color: map_get($palette_, $hue);
+  $color: map.get($palette_, $hue);
 
-  @if (type-of($opacity) == number) {
+  @if (meta.type-of($opacity) == number) {
     @return rgba($color, $opacity);
   } @else {
     @return $color;
@@ -76,7 +78,7 @@
       @error "Invalid palette";
     }
   }
-  $var: map_get($palette_, $hue);
+  $var: map.get($palette_, $hue);
   @return #{rgba($var, $opacity)};
 }
 
@@ -179,7 +181,7 @@
     @if ($var != "contrast") {
       $colorVal: public-color-util.hex-to-rgb($defaultVal);
       @if $colorVal != null {
-        $new-map: map_merge(
+        $new-map: map.merge(
           $new-map,
           (--palette-#{$paletteType}-#{$var}: #{$colorVal})
         );

projects/material-css-vars/src/lib/_variables.scss

@@ -1,5 +1,6 @@
 @use "@angular/material" as mat;
 @use "public-color-util";
+@use "sass:map";
 
 $dark-theme-selector: ".isDarkTheme" !default;
 $light-theme-selector: ".isLightTheme" !default;
@@ -507,15 +508,15 @@ $palette-warn-no-rgb: (
   ),
 ) !default;
 
-$contrast-palette: map_get($palette-primary, "contrast") !default;
-$contrast-palette-no-rgb: map_get($palette-primary-no-rgb, "contrast") !default;
-$contrast-palette-accent: map_get($palette-accent, "contrast") !default;
-$contrast-palette-accent-no-rgb: map_get(
+$contrast-palette: map.get($palette-primary, "contrast") !default;
+$contrast-palette-no-rgb: map.get($palette-primary-no-rgb, "contrast") !default;
+$contrast-palette-accent: map.get($palette-accent, "contrast") !default;
+$contrast-palette-accent-no-rgb: map.get(
   $palette-accent-no-rgb,
   "contrast"
 ) !default;
-$contrast-palette-warn: map_get($palette-warn, "contrast") !default;
-$contrast-palette-warn-no-rgb: map_get(
+$contrast-palette-warn: map.get($palette-warn, "contrast") !default;
+$contrast-palette-warn-no-rgb: map.get(
   $palette-warn-no-rgb,
   "contrast"
 ) !default;

src/app/_app.theme.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "@angular/material" as mat;
 
-@mixin app-theme($theme) {
+@mixin theme($theme) {
   // Extract the palettes you need from the theme definition.
   $color: mat.m2-get-color-config($theme);
   $primary: map.get($color, primary);

src/styles.scss

@@ -1,7 +1,7 @@
 @use "../projects/material-css-vars" as mat-css-vars;
 @use "@angular/material" as mat;
 
-@import "./app/app.theme";
+@use "./app/app.theme" as app;
 
 $custom-typography: mat.m2-define-typography-config(
   $font-family: "Roboto, monospace",
@@ -13,7 +13,7 @@ $custom-typography: mat.m2-define-typography-config(
     $typography-config: $custom-typography
   )
   using($mat-css-theme) {
-  @include app-theme($mat-css-theme);
+  @include app.theme($mat-css-theme);
 }
 
 @include mat-css-vars.mat-css-set-palette-defaults(