Remove SASS warnings by using color.scale and color.channel functions

scss/_global_functions.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:color';
 
 // Functions used across multiple patterns or utils
 
@@ -33,7 +34,7 @@
 
 // Test value of bg $color and return light or dark text color accordingly
 @function vf-contrast-text-color($color) {
-  @if (lightness($color) > 55) {
+  @if (color.channel($color, 'lightness', $space: hsl) > 55) {
     @return $colors--light-theme--text-default; // Lighter background, return dark color
   } @else {
     @return $colors--dark-theme--text-default; // Darker background, return light color
@@ -43,7 +44,7 @@
 // Returns the font color to be presented on the passed background-color
 // variable.
 @function vf-determine-text-color($background-color) {
-  @if (lightness($background-color) > 50) {
+  @if (color.channel($background-color, 'lightness', $space: hsl) > 50) {
     @return $colors--light-theme--text-default;
   } @else {
     @return $colors--dark-theme--text-default;
@@ -53,7 +54,7 @@
 // Includes the theme variables based on the background color passed as an argument.
 // This is currently only used in the deprecated p-strip--accent.
 @mixin vf-determine-theme-from-background($background-color) {
-  @if (lightness($background-color) > 50) {
+  @if (color.channel($background-color, 'lightness', $space: hsl) > 50) {
     @include vf-theme-light;
   } @else {
     @include vf-theme-dark;

scss/_patterns_image.scss

@@ -25,6 +25,7 @@
         Image element within an image container.
 */
 
+@use 'sass:color';
 @import 'settings';
 
 // Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
@@ -117,6 +118,6 @@ $aspect-ratios: (
 
   // Deprecated; will be removed in v5
   .p-image--shadowed {
-    box-shadow: 0 1px 5px 1px transparentize($color-mid-light, 0.8);
+    box-shadow: 0 1px 5px 1px color.scale($color-mid-light, $alpha: -80%);
   }
 }

scss/_patterns_strip.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 
 @mixin vf-p-strip {
@@ -118,9 +119,9 @@
 
 // DEPRECATED:
 // gradient of the main suru slant
-$color-suru-start: lighten($color-brand, 10%) !default;
+$color-suru-start: color.adjust($color-brand, $lightness: 10%) !default;
 $color-suru-middle: $color-brand !default;
-$color-suru-end: darken($color-brand, 10%) !default;
+$color-suru-end: color.adjust($color-brand, $lightness: -10%) !default;
 
 // page background
 $color-suru-background: $color-x-light !default;

scss/_patterns_switch.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 $knob-size: $sp-unit * 2;
 
@@ -37,7 +38,7 @@ $knob-size: $sp-unit * 2;
   .p-switch__slider {
     background: $colors--theme--background-neutral-default;
     border-radius: $knob-size;
-    box-shadow: inset 0 2px 5px 0 transparentize($color-x-dark, 0.8);
+    box-shadow: inset 0 2px 5px 0 color.scale($color-x-dark, $alpha: -80%);
     display: inline-block;
     height: $knob-size;
     margin: 0;

scss/_settings_colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Global color settings
 $color-transparent: transparent !default;
 
@@ -123,7 +125,7 @@ $colors--light-theme--background-code: $color-code-background !default;
 $colors--light-theme--background-inputs: adjust-color($color-x-dark, $lightness: 100% * (1 - $input-background-opacity-amount)) !default;
 $colors--light-theme--background-active: adjust-color($color-x-dark, $lightness: 100% * (1 - $active-background-opacity-amount)) !default;
 $colors--light-theme--background-hover: adjust-color($color-x-dark, $lightness: 100% * (1 - $hover-background-opacity-amount)) !default;
-$colors--light-theme--background-overlay: transparentize($color-dark, 0.15) !default;
+$colors--light-theme--background-overlay: color.scale($color-dark, $alpha: -15%) !default;
 
 $colors--light-theme--border-default: rgba($color-x-dark, 0.2) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
@@ -183,7 +185,7 @@ $colors--dark-theme--background-code: $color-code-background-dark !default;
 $colors--dark-theme--background-inputs: #2f2f2f !default;
 $colors--dark-theme--background-active: #373737 !default;
 $colors--dark-theme--background-hover: #313131 !default;
-$colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
+$colors--dark-theme--background-overlay: color.scale($color-dark, $alpha: -15%) !default;
 
 $colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
 $colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.5) !default;

scss/_settings_placeholders.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings_spacing';
 @import 'settings_colors';
 
@@ -7,7 +8,7 @@ $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems s
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $colors--theme--border-default !default;
 $box-shadow:
-  0 1px 1px 0 transparentize($color-x-dark, 0.85),
-  0 2px 2px -1px transparentize($color-x-dark, 0.85),
-  0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
+  0 1px 1px 0 color.scale($color-x-dark, $alpha: -85%),
+  0 2px 2px -1px color.scale($color-x-dark, $alpha: -85%),
+  0 0 3px 0 color.scale($color-x-dark, $alpha: -80%) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;

scss/_utilities_baseline-grid.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import 'settings';
 
 @mixin vf-u-baseline-grid {
@@ -9,7 +10,7 @@
     position: relative;
 
     &::after {
-      background: linear-gradient(to top, transparentize($baseline-color, 0.85), transparentize($baseline-color, 0.85) 1px, transparent 1px, transparent);
+      background: linear-gradient(to top, color.scale($baseline-color, $alpha: -85%), color.scale($baseline-color, $alpha: -85%) 1px, transparent 1px, transparent);
       background-size: 100% $baseline-size;
       bottom: 0;
       content: '';
@@ -26,7 +27,7 @@
   // baseline grid on document should be in the background
   // stylelint-disable selector-max-type -- needed for examples
   html.u-baseline-grid {
-    background-color: transparentize($baseline-color, 0.95);
+    background-color: color.scale($baseline-color, $alpha: -95%);
     position: static;
 
     &::after {

scss/_utilities_font-metrics.scss

@@ -1,13 +1,14 @@
+@use 'sass:color';
 @import 'settings_font';
 
 @mixin vf-u-visualise-baseline($horizontal-bleed: 2rem) {
   .u-visualise-font-metrics {
     position: relative;
 
     &::before {
-      border-bottom-color: transparentize($color-information, 0.5);
+      border-bottom-color: color.scale($color-information, $alpha: -50%);
       border-bottom-style: solid;
-      border-top-color: transparentize($color-positive, 0.5);
+      border-top-color: color.scale($color-positive, $alpha: -50%);
       border-top-style: solid;
       border-width: 1px;
       content: '';
@@ -19,7 +20,7 @@
     }
 
     &::after {
-      background-color: transparentize($color-negative, 0.5);
+      background-color: color.scale($color-negative, $alpha: -50%);
       content: '';
       height: 1px;
       left: -#{$horizontal-bleed};