Rename scale-color() function to shift-color() to avoid collision with Sass's own color function (#32149)

5 files changed, 20 insertions, 15 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 24fa2bd14..3d9b69bcd 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -44,9 +44,9 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $value in $theme-colors {
-  $background: scale-color($value, $alert-bg-scale);
-  $border: scale-color($value, $alert-border-scale);
-  $color: scale-color($value, $alert-color-scale);
+  $background: shift-color($value, $alert-bg-scale);
+  $border: shift-color($value, $alert-border-scale);
+  $color: shift-color($value, $alert-color-scale);
   @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
     $color: mix($value, color-contrast($background), abs($alert-color-scale));
   }
diff --git a/scss/_functions.scss b/scss/_functions.scss
index b95fbf94e..29114fc81 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -161,9 +161,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   @return mix(black, $color, $weight);
 }
 
-// Scale a color:
 // Shade the color if the weight is positive, else tint it
-@function scale-color($color, $weight) {
+@function shift-color($color, $weight) {
   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 }
 // scss-docs-end color-functions
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 2ce0c8b15..3d82f8f43 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -152,8 +152,8 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $value in $theme-colors {
-  $background: scale-color($value, $list-group-item-bg-scale);
-  $color: scale-color($value, $list-group-item-color-scale);
+  $background: shift-color($value, $list-group-item-bg-scale);
+  $color: shift-color($value, $list-group-item-color-scale);
   @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
     $color: mix($value, color-contrast($background), abs($alert-color-scale));
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2a8b45e14..0b64330e9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -275,7 +275,7 @@ $body-text-align:           null !default;
 $link-color:                              $primary !default;
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
-$link-hover-color:                        scale-color($link-color, $link-shade-percentage) !default;
+$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
@@ -535,12 +535,12 @@ $table-caption-color:         $text-muted !default;
 $table-bg-scale:              -80% !default;
 
 $table-variants: (
-  "primary":    scale-color($primary, $table-bg-scale),
-  "secondary":  scale-color($secondary, $table-bg-scale),
-  "success":    scale-color($success, $table-bg-scale),
-  "info":       scale-color($info, $table-bg-scale),
-  "warning":    scale-color($warning, $table-bg-scale),
-  "danger":     scale-color($danger, $table-bg-scale),
+  "primary":    shift-color($primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
   "light":      $light,
   "dark":       $dark,
 ) !default;
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index bc6ed103c..e0ef86ca3 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -7,6 +7,12 @@ aliases: "/migration/"
 toc: true
 ---
 
+## Beta 1
+
+### Sass
+
+- Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function.
+
 ## v5.0.0-alpha3
 
 ### Browser support
@@ -15,7 +21,7 @@ toc: true
 
 ### Sass
 
-- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `scale-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
+- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `scale-color()` (changed to `shift-color()` in Beta 1) will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
 - Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882).
 
 ### Reboot