fix(scss): resolving sass deprecation warnings and compilation errors

Author: bitoesposito

docs/assets/src/scss/_callouts.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .bd-callout {
   padding: 1.25rem;
   margin-top: 1.25rem;
@@ -26,9 +28,9 @@
 
 // Variations
 @mixin bs-callout-variant($color) {
-  border-left-color: darken($color, 10%);
+  border-left-color: color.scale($color, $lightness: -10%);
   h4 {
-    color: darken($color, 10%);
+    color: color.scale($color, $lightness: -10%);
   }
 }
 
@@ -38,6 +40,9 @@
 
 .bd-callout-warning {
   @include bs-callout-variant($docs-warning);
+  h4 {
+    color: $color-text-warning;
+  }
 }
 
 .bd-callout-danger {
@@ -48,5 +53,5 @@
   h4 {
     color: $docs-accessibility;
   }
-  border-left-color: lighten($docs-accessibility, 10%);
+  border-left-color: color.scale($docs-accessibility, $lightness: 10%);
 }

docs/assets/src/scss/_colors.scss

@@ -2,6 +2,8 @@
 // Docs color palette classes
 //
 
+@use 'sass:color';
+
 @each $color, $value in $colors {
   .swatch-#{$color} {
     color: color-contrast($value);
@@ -23,8 +25,8 @@
   }
 }
 
-$primary-bright: lighten(saturate($primary, 5%), 15%) !default;
-$primary-light: lighten(saturate($primary, 5%), 45%) !default;
+$primary-bright: color.scale(color.scale($primary, $saturation: 5%), $lightness: 15%) !default;
+$primary-light: color.scale(color.scale($primary, $saturation: 5%), $lightness: 45%) !default;
 $docs-info: rgb(23, 50, 77) !default;
 $docs-warning: rgb(255, 151, 0) !default;
 $docs-danger: rgb(248, 62, 90) !default;

docs/assets/src/scss/_component-examples.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .bd-example-row {
   .d-flex,
   .row {
@@ -88,22 +90,22 @@
 .bd-example-container-header {
   height: 3rem;
   margin-bottom: 0.5rem;
-  background-color: lighten($blue, 50%);
+  background-color: color.scale($blue, $lightness: 50%);
   border-radius: 0.25rem;
 }
 
 .bd-example-container-sidebar {
   float: right;
   width: 4rem;
   height: 8rem;
-  background-color: lighten($blue, 25%);
+  background-color: color.scale($blue, $lightness: 25%);
   border-radius: 0.25rem;
 }
 
 .bd-example-container-body {
   height: 8rem;
   margin-right: 4.5rem;
-  background-color: lighten($primary, 25%);
+  background-color: color.scale($primary, $lightness: 25%);
   border-radius: 0.25rem;
 }
 

src/scss/base/_functions.scss

@@ -2,6 +2,10 @@
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:math';
+
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
 @mixin _assert-ascending($map, $map-name) {
@@ -34,7 +38,7 @@
 
 // Colors
 @function to-rgb($value) {
-  @return red($value), green($value), blue($value);
+  @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
 }
 
 // stylelint-disable scss/dollar-variable-pattern
@@ -209,9 +213,9 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
   $rgb: (
-    'r': red($color),
-    'g': green($color),
-    'b': blue($color),
+    'r': math.round(color.channel($color, 'red', $space: rgb)),
+    'g': math.round(color.channel($color, 'green', $space: rgb)),
+    'b': math.round(color.channel($color, 'blue', $space: rgb)),
   );
 
   @each $name, $value in $rgb {
@@ -230,18 +234,18 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions
 // Tint a color: mix a color with white
 @function tint-color($color, $weight) {
-  @return mix(white, $color, $weight);
+  @return color.mix(white, $color, $weight);
 }
 
 // Shade a color: mix a color with black
 @function shade-color($color, $weight) {
-  @return mix(black, $color, $weight);
+  @return color.mix(black, $color, $weight);
 }
 
 // Shade the color if the weight is positive, else tint it
@@ -260,7 +264,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 + $value2;
   }
 
@@ -280,11 +284,11 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 - $value2;
   }
 
-  @if type-of($value2) != number {
+  @if meta.type-of($value2) != number {
     $value2: unquote('(') + $value2 + unquote(')');
   }
 

src/scss/base/_variables.scss

@@ -1,6 +1,8 @@
 // Import Design Tokens Italia
 // @import '../../node_modules/design-tokens-italia/scss/variables';
 
+@use 'sass:map';
+
 // Color vars
 // HSB (https://it.wikipedia.org/wiki/Hue_Saturation_Brightness, coincidente con il modello HSV)
 // è lo spazio colore scelto per ottenere le varianti colore della tonalità primaria.
@@ -21,7 +23,7 @@ $gray-800: hsl(0, 0%, 15%) !default; // color-gray-15
 $gray-900: hsl(0, 0%, 10%) !default; // color-gray-10
 
 $grays: () !default;
-$grays: map-merge(
+$grays: map.merge(
   (
     '100': $gray-100,
     '200': $gray-200,
@@ -89,7 +91,7 @@ $gray-border-disabled: $gray-disabled !default; // color-border-disabled
 $secondary: $gray-secondary !default;
 
 $colors: () !default;
-$colors: map-merge(
+$colors: map.merge(
   (
     'indigo': $indigo,
     'purple': $purple,
@@ -121,7 +123,7 @@ $warning: $orange-accessible !default;
 $danger: $red-accessible !default;
 
 $theme-colors: () !default;
-$theme-colors: map-merge(
+$theme-colors: map.merge(
   (
     'primary': $primary,
     'secondary': $secondary,
@@ -412,7 +414,7 @@ $neutral-2-a7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 85) !default;
 // Backgrounds
 $color-background-emphasis: hsl(210, 54%, 20%); // color-slate-20
 $color-background-primary-lighter: hsl(210, 62%, 97%); // color-blue-97
-$color-background-primary-hover: hsl(210, 100, 30); // color-blue-30
+$color-background-primary-hover: hsl(210, 100%, 30%); // color-blue-30
 $color-background-secondary-hover: hsl(210, 33%, 28%); // color-slate-28
 $color-background-secondary-lighter: hsl(210, 3%, 85%); // color-slate-85
 $color-background-muted: $gray-100; // color-gray-96
@@ -1966,7 +1968,7 @@ $grid-list-text-gap: $v-gap;
 $grid-item-sm-col: 50%;
 $grid-item-lg-col: 33.333333%;
 $grid-item-icon-size: 24px;
-$grid-item-overlay: hsla(210%, 54%, 20, 0.85);
+$grid-item-overlay: hsla(210deg, 54%, 20%, 0.85);
 
 // list
 $list-font-size: 1rem;

src/scss/base/vendor/_rfs.scss

@@ -1,5 +1,7 @@
 // stylelint-disable property-blacklist, scss/dollar-variable-default
 
+@use 'sass:meta';
+
 // SCSS RFS mixin
 //
 // Automated responsive values for font sizes, paddings, margins and much more
@@ -30,7 +32,7 @@ $rfs-two-dimensional: false !default;
 // Factor of decrease
 $rfs-factor: 10 !default;
 
-@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
+@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
   @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
 }
 

src/scss/components/_chips.scss

@@ -8,7 +8,7 @@
   border-radius: $v-gap * 1.5;
   height: $v-gap * 3;
   min-width: 100px;
-  padding: 0 $v-gap / 2 2px $v-gap;
+  padding: 0 calc($v-gap / 2) 2px $v-gap;
   transition: all 0.05s;
   margin-top: $v-gap * 0.5;
   margin-bottom: $v-gap;
@@ -67,7 +67,7 @@
     height: $v-gap * 4;
     min-width: 120px;
     border-radius: $v-gap * 2;
-    padding: 2px $v-gap / 2 0 $v-gap * 2;
+    padding: 2px calc($v-gap / 2) 0 $v-gap * 2;
     //label
     .chip-label {
       font-size: $chips-label-font-size-l;