// 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));
}
@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
// 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));
}
$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;
$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;
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
### 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