Fix Dart Sass deprecation warnings

- Replace color.red/green/blue() with color.channel() in styles.scss
- Replace deprecated if() ternary with @if/@else in _variants.scss
- Silence @import deprecation in angular.json (Bootstrap 5.x uses @import
  throughout; migrating to @use breaks the variable override mechanism)

angular.json

@@ -44,7 +44,10 @@
                         ],
                         "styles": ["src/styles/styles.scss"],
                         "stylePreprocessorOptions": {
-                            "includePaths": ["src/styles"]
+                            "includePaths": ["src/styles"],
+                            "sass": {
+                                "silenceDeprecations": ["import"]
+                            }
                         },
                         "scripts": [],
                         "browser": "src/main.ts"

src/styles/components/button/_variants.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
+@use "sass:map";
-@use 'sass:meta';
+@use "sass:meta";
-@use '@angular/material' as mat;
+@use "@angular/material" as mat;
 
 $_ripple-opacity: 0.1;
 
@@ -42,8 +42,11 @@ $_ripple-opacity: 0.1;
         &.mat-#{"" + $variant} {
             #{$property}: mat.m2-get-color-from-palette($variant-palette, $hue);
             &.mat-mdc-button-disabled {
-                $palette: if($property == 'color', $foreground, $background);
+                @if $property == "color" {
-                #{$property}: mat.m2-get-color-from-palette($palette, disabled-button);
+                    #{$property}: mat.m2-get-color-from-palette($foreground, disabled-button);
+                } @else {
+                    #{$property}: mat.m2-get-color-from-palette($background, disabled-button);
+                }
             }
         }
     }
@@ -55,13 +58,13 @@ $_ripple-opacity: 0.1;
     $background: map.get($config, background);
 
     .mat-icon:not(:disabled) {
-        @include _theme-property($config, 'color', text, $variants);
+        @include _theme-property($config, "color", text, $variants);
     }
 
     .mdc-button:not(:disabled),
     .mat-mdc-icon-button:not(:disabled),
     .mat-mdc-stroked-button:not(:disabled) {
-        @include _theme-property($config, 'color', text, $variants);
+        @include _theme-property($config, "color", text, $variants);
         @include _focus-overlay-color($config, $variants);
     }
 
@@ -70,8 +73,8 @@ $_ripple-opacity: 0.1;
     .mat-mdc-unelevated-button:not(:disabled),
     .mat-mdc-fab:not(:disabled),
     .mat-mdc-mini-fab:not(:disabled) {
-        @include _theme-property($config, 'color', default-contrast, $variants);
+        @include _theme-property($config, "color", default-contrast, $variants);
-        @include _theme-property($config, 'background-color', default, $variants);
+        @include _theme-property($config, "background-color", default, $variants);
         @include _ripple-color($config, default-contrast, $_ripple-opacity, $variants);
     }
 }

src/styles/styles.scss

@@ -180,12 +180,11 @@ $background: map.get($adastra_app-theme, background);
     .bg-gray-#{"" + $variant} {
         --#{$prefix}-bg-opacity: 1;
         background-color: RGBA(
-            color.red($var-color),
+            color.channel($var-color, "red"),
-            color.green($var-color),
+            color.channel($var-color, "green"),
-            color.blue($var-color),
+            color.channel($var-color, "blue"),
             var(--#{$prefix}bg-opacity, 1)
         ) !important;
-        /* background-color: RGBA(color.channel($var-color, "red"), color.channel($var-color, "green"), color.channel($var-color, "blue"), var(--#{$prefix}bg-opacity, 1)) !important; */
     }
 }