refactor: replace mix() with color.mix()

Author: mrholek

scss/_variables-dark.scss

@@ -88,7 +88,7 @@ $info-bg-subtle-dark:               $info-bg-subtle !default;
 $warning-bg-subtle-dark:            $warning-bg-subtle !default;
 $danger-bg-subtle-dark:             $danger-bg-subtle !default;
 $light-bg-subtle-dark:              $gray-800-dark !default;
-$dark-bg-subtle-dark:               mix($gray-800-dark, $black) !default;
+$dark-bg-subtle-dark:               color.mix($gray-800-dark, $black) !default;
 // scss-docs-end theme-bg-subtle-dark-variables
 
 // scss-docs-start theme-border-subtle-dark-variables
@@ -107,7 +107,7 @@ $body-bg-dark:                      $gray-900-dark !default;
 $body-secondary-color-dark:         rgba($white, .6) !default;
 $body-secondary-bg-dark:            $gray-800-dark !default;
 $body-tertiary-color-dark:          rgba($white, .38) !default;
-$body-tertiary-bg-dark:             mix($gray-800-dark, #212631, 50%) !default;
+$body-tertiary-bg-dark:             color.mix($gray-800-dark, #212631, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-800-dark !default;
 $border-color-translucent-dark:     rgba($white, .1) !default;

scss/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "functions/assert" as *;
 @use "functions/color" as *;
 @use "functions/math" as *;
@@ -354,7 +355,7 @@ $success-bg-subtle:    #cbedd6 !default;
 $info-bg-subtle:       #c0e6ff !default;
 $warning-bg-subtle:    #feecc5 !default;
 $danger-bg-subtle:     #f9d4d4 !default;
-$light-bg-subtle:      mix($gray-100, $white) !default;
+$light-bg-subtle:      color.mix($gray-100, $white) !default;
 $dark-bg-subtle:       $gray-400 !default;
 // scss-docs-end theme-bg-subtle-variables
 
@@ -872,7 +873,7 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
-// $btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default; TODO: ????
+// $btn-link-focus-shadow-rgb:   to-rgb(color.mix(color-contrast($link-color), $link-color, 15%)) !default; TODO: ????
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;

scss/functions/_color-contrast.scss

@@ -54,5 +54,5 @@
 // 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/functions/_color.scss

@@ -3,12 +3,12 @@
 // 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

scss/mixins/_buttons.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../variables" as *;
 @use "../functions/color" as *;
 @use "../functions/color-contrast" as *;
@@ -29,7 +30,7 @@
   --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$hover-background};
   --#{$prefix}btn-hover-border-color: #{$hover-border};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
   --#{$prefix}btn-active-border-color: #{$active-border};

scss/mixins/_table-variants.scss

@@ -1,14 +1,15 @@
+@use "sass:color";
 @use "../variables" as *;
 @use "../functions/color-contrast" as *;
 
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
     $color: color-contrast(opaque($body-bg, $background));
-    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-    $table-border-color: mix($color, $background, percentage($table-border-factor));
+    $hover-bg: color.mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: color.mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: color.mix($color, $background, percentage($table-active-bg-factor));
+    $table-border-color: color.mix($color, $background, percentage($table-border-factor));
 
     --#{$prefix}table-color: #{$color};
     --#{$prefix}table-bg: #{$background};