From 55f2192a398cdb4446937322f14b3e7e359a0d00 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Nov 2020 10:50:59 -0800 Subject: [PATCH] Rename scale-color() function to shift-color() to avoid collision with Sass's own color function (#32149) --- scss/_alert.scss | 6 +++--- scss/_functions.scss | 3 +-- scss/_list-group.scss | 4 ++-- scss/_variables.scss | 14 +++++++------- site/content/docs/5.0/migration.md | 8 +++++++- 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index 24fa2bd140..3d9b69bcd3 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 b95fbf94e2..29114fc816 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 2ce0c8b159..3d82f8f439 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 2a8b45e14c..0b64330e96 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 bc6ed103cc..e0ef86ca3f 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