kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Colors rewrite (#30622)

Browse source
This commit is contained in:
Martijn Cuppens 2020-10-13 09:58:06 +02:00 committed by GitHub
parent 5c6925385e
commit cdc12165a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 150 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.stylelintrc
View file

@ -4,7 +4,9 @@
], ],
"rules": { "rules": {
"function-disallowed-list": [ "function-disallowed-list": [
"calc" "calc",
"lighten",
"darken"
], ],
"property-disallowed-list": [ "property-disallowed-list": [
"border-radius", "border-radius",

2
scss/_alert.scss
View file

@ -45,7 +45,7 @@
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.alert-#{$color} { .alert-#{$color} {
@include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level)); @include alert-variant(scale-color($value, $alert-bg-scale), scale-color($value, $alert-border-scale), scale-color($value, $alert-color-scale));
} }
} }
// scss-docs-end alert-modifiers // scss-docs-end alert-modifiers

28
scss/_functions.scss
View file

@ -150,24 +150,24 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100); @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
} }
// Request a color level // scss-docs-start color-functions
// scss-docs-start color-level // Tint a color: mix a color with white
@function color-level($color: $primary, $level: 0) { @function tint-color($color, $weight) {
$color-base: if($level > 0, $black, $white); @return mix(white, $color, $weight);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
// scss-docs-end color-level
@function tint-color($color, $level) {
@return mix(white, $color, $level * $theme-color-interval);
} }
@function shade-color($color, $level) { // Shade a color: mix a color with black
@return mix(black, $color, $level * $theme-color-interval); @function shade-color($color, $weight) {
@return mix(black, $color, $weight);
} }
// Scale a color:
// Shade the color if the weight is positive, else tint it
@function scale-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions
// Return valid calc // Return valid calc
@function add($value1, $value2, $return-calc: true) { @function add($value1, $value2, $return-calc: true) {
@if $value1 == null { @if $value1 == null {

2
scss/_list-group.scss
View file

@ -152,6 +152,6 @@
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level)); @include list-group-item-variant($color, scale-color($value, $list-group-item-bg-scale), scale-color($value, $list-group-item-color-scale));
} }
// scss-docs-end list-group-modifiers // scss-docs-end list-group-modifiers

2
scss/_popover.scss
View file

@ -156,7 +156,7 @@
@include font-size($font-size-base); @include font-size($font-size-base);
color: $popover-header-color; color: $popover-header-color;
background-color: $popover-header-bg; background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%); border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
@include border-top-radius($popover-inner-border-radius); @include border-top-radius($popover-inner-border-radius);
&:empty { &:empty {

200
scss/_variables.scss
View file

@ -82,9 +82,6 @@ $theme-colors: (
) !default; ) !default;
// scss-docs-end theme-colors-map // scss-docs-end theme-colors-map
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default; $min-contrast-ratio: 4.5 !default;
@ -94,105 +91,105 @@ $color-contrast-dark: $black !default;
$color-contrast-light: $white !default; $color-contrast-light: $white !default;
// fusv-disable // fusv-disable
$blue-100: tint-color($blue, 8) !default; $blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 6) !default; $blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 4) !default; $blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 2) !default; $blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default; $blue-500: $blue !default;
$blue-600: shade-color($blue, 2) !default; $blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 4) !default; $blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 6) !default; $blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 8) !default; $blue-900: shade-color($blue, 80%) !default;
$indigo-100: tint-color($indigo, 8) !default; $indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 6) !default; $indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 4) !default; $indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 2) !default; $indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default; $indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 2) !default; $indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 4) !default; $indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 6) !default; $indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 8) !default; $indigo-900: shade-color($indigo, 80%) !default;
$purple-100: tint-color($purple, 8) !default; $purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 6) !default; $purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 4) !default; $purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 2) !default; $purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default; $purple-500: $purple !default;
$purple-600: shade-color($purple, 2) !default; $purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 4) !default; $purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 6) !default; $purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 8) !default; $purple-900: shade-color($purple, 80%) !default;
$pink-100: tint-color($pink, 8) !default; $pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 6) !default; $pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 4) !default; $pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 2) !default; $pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default; $pink-500: $pink !default;
$pink-600: shade-color($pink, 2) !default; $pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 4) !default; $pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 6) !default; $pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 8) !default; $pink-900: shade-color($pink, 80%) !default;
$red-100: tint-color($red, 8) !default; $red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 6) !default; $red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 4) !default; $red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 2) !default; $red-400: tint-color($red, 20%) !default;
$red-500: $red !default; $red-500: $red !default;
$red-600: shade-color($red, 2) !default; $red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 4) !default; $red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 6) !default; $red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 8) !default; $red-900: shade-color($red, 80%) !default;
$orange-100: tint-color($orange, 8) !default; $orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 6) !default; $orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 4) !default; $orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 2) !default; $orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default; $orange-500: $orange !default;
$orange-600: shade-color($orange, 2) !default; $orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 4) !default; $orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 6) !default; $orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 8) !default; $orange-900: shade-color($orange, 80%) !default;
$yellow-100: tint-color($yellow, 8) !default; $yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 6) !default; $yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 4) !default; $yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 2) !default; $yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default; $yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 2) !default; $yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 4) !default; $yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 6) !default; $yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 8) !default; $yellow-900: shade-color($yellow, 80%) !default;
$green-100: tint-color($green, 8) !default; $green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 6) !default; $green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 4) !default; $green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 2) !default; $green-400: tint-color($green, 20%) !default;
$green-500: $green !default; $green-500: $green !default;
$green-600: shade-color($green, 2) !default; $green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 4) !default; $green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 6) !default; $green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 8) !default; $green-900: shade-color($green, 80%) !default;
$teal-100: tint-color($teal, 8) !default; $teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 6) !default; $teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 4) !default; $teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 2) !default; $teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default; $teal-500: $teal !default;
$teal-600: shade-color($teal, 2) !default; $teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 4) !default; $teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 6) !default; $teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 8) !default; $teal-900: shade-color($teal, 80%) !default;
$cyan-100: tint-color($cyan, 8) !default; $cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 6) !default; $cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 4) !default; $cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 2) !default; $cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default; $cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 2) !default; $cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 4) !default; $cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 6) !default; $cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 8) !default; $cyan-900: shade-color($cyan, 80%) !default;
// fusv-enable // fusv-enable
// Characters which are escaped by the escape-svg function // Characters which are escaped by the escape-svg function
@ -276,10 +273,9 @@ $body-text-align: null !default;
$link-color: $primary !default; $link-color: $primary !default;
$link-decoration: underline !default; $link-decoration: underline !default;
$link-hover-color: darken($link-color, 15%) !default; $link-shade-percentage: 20% !default;
$link-hover-color: scale-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default; $link-hover-decoration: null !default;
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
$emphasized-link-hover-darken-percentage: 15% !default;
$stretched-link-pseudo-element: after !default; $stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default; $stretched-link-z-index: 1 !default;
@ -524,15 +520,15 @@ $table-group-separator-color: currentColor !default;
$table-caption-color: $text-muted !default; $table-caption-color: $text-muted !default;
$table-bg-level: -9 !default; $table-bg-scale: -80% !default;
$table-variants: ( $table-variants: (
"primary": color-level($primary, $table-bg-level), "primary": scale-color($primary, $table-bg-scale),
"secondary": color-level($secondary, $table-bg-level), "secondary": scale-color($secondary, $table-bg-scale),
"success": color-level($success, $table-bg-level), "success": scale-color($success, $table-bg-scale),
"info": color-level($info, $table-bg-level), "info": scale-color($info, $table-bg-scale),
"warning": color-level($warning, $table-bg-level), "warning": scale-color($warning, $table-bg-scale),
"danger": color-level($danger, $table-bg-level), "danger": scale-color($danger, $table-bg-scale),
"light": $light, "light": $light,
"dark": $dark, "dark": $dark,
) !default; ) !default;
@ -650,7 +646,7 @@ $input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default; $input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default; $input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($component-active-bg, 25%) !default; $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default; $input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default; $input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
@ -782,7 +778,7 @@ $form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default; $form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@ -944,7 +940,7 @@ $dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-box-shadow: $box-shadow !default; $dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default; $dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default; $dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
$dropdown-link-hover-bg: $gray-100 !default; $dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-color: $component-active-color !default;
@ -1065,7 +1061,7 @@ $popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default; $popover-box-shadow: $box-shadow !default;
$popover-header-bg: darken($popover-bg, 3%) !default; $popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-color: $headings-color !default; $popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default; $popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default; $popover-header-padding-x: $spacer !default;
@ -1163,9 +1159,9 @@ $alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default; $alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default; $alert-border-width: $border-width !default;
$alert-bg-level: -10 !default; $alert-bg-scale: -80% !default;
$alert-border-level: -9 !default; $alert-border-scale: -70% !default;
$alert-color-level: 6 !default; $alert-color-scale: 50% !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
@ -1193,8 +1189,8 @@ $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: $spacer / 2 !default; $list-group-item-padding-y: $spacer / 2 !default;
$list-group-item-padding-x: $spacer !default; $list-group-item-padding-x: $spacer !default;
$list-group-item-bg-level: -9 !default; $list-group-item-bg-scale: -80% !default;
$list-group-item-color-level: 6 !default; $list-group-item-color-scale: 50% !default;
$list-group-hover-bg: $gray-100 !default; $list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default; $list-group-active-color: $component-active-color !default;

4
scss/helpers/_colored-links.scss
View file

@ -2,10 +2,10 @@
.link-#{$color} { .link-#{$color} {
color: $value; color: $value;
@if $emphasized-link-hover-darken-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage)); color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
} }
} }
} }

2
scss/mixins/_alert.scss
View file

@ -4,6 +4,6 @@
border-color: $border; border-color: $border;
.alert-link { .alert-link {
color: darken($color, 10%); color: shade-color($color, 20%);
} }
} }

8
scss/mixins/_buttons.scss
View file

@ -7,11 +7,11 @@
$background, $background,
$border, $border,
$color: color-contrast($background), $color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)), $hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
$hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)), $hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)),
$hover-color: color-contrast($hover-background), $hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)), $active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)),
$active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)), $active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)),
$active-color: color-contrast($active-background), $active-color: color-contrast($active-background),
$disabled-background: $background, $disabled-background: $background,
$disabled-border: $border, $disabled-border: $border,

2
scss/mixins/_list-group.scss
View file

@ -9,7 +9,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: $color; color: $color;
background-color: darken($background, 5%); background-color: shade-color($background, 10%);
} }
&.active { &.active {

4
site/assets/scss/_buttons.scss
View file

@ -11,8 +11,8 @@
&:hover, &:hover,
&:active { &:active {
color: $white; color: $white;
background-color: darken($bd-purple-bright, 10%); background-color: shade-color($bd-purple-bright, 20%);
border-color: darken($bd-purple-bright, 10%); border-color: shade-color($bd-purple-bright, 20%);
} }
&:focus { &:focus {

2
site/assets/scss/_masthead.scss
View file

@ -1,6 +1,6 @@
.bd-masthead { .bd-masthead {
padding: 3rem 0; padding: 3rem 0;
background: linear-gradient(165deg, lighten($bd-purple-light, 16%) 50%, $white 50%); background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%);
h1 { h1 {
@include font-size(4rem); @include font-size(4rem);

4
site/assets/scss/_variables.scss
View file

@ -2,8 +2,8 @@
// Local docs variables // Local docs variables
$bd-purple: #563d7c; $bd-purple: #563d7c;
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); $bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
$bd-dark: #2a2730; $bd-dark: #2a2730;
$bd-download: #ffe484; $bd-download: #ffe484;
$bd-info: #5bc0de; $bd-info: #5bc0de;

14
site/content/docs/5.0/customize/sass.md
View file

@ -152,7 +152,7 @@ For example, we use the `primary`, `success`, and `danger` keys from `$theme-col
### Colors ### Colors
In Bootstrap 5, we've dropped the `color()`, `theme-color()` and `gray()` functions because the values are also available as standalone variables. So instead of using `theme-color("primary")`, you can now just use the `$primary` variable. Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.
{{< highlight scss >}} {{< highlight scss >}}
.custom-element { .custom-element {
@ -161,15 +161,19 @@ In Bootstrap 5, we've dropped the `color()`, `theme-color()` and `gray()` functi
} }
{{< /highlight >}} {{< /highlight >}}
We also have a function for getting a particular _level_ of color. Negative level values will lighten the color, while higher levels will darken. You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
{{< scss-docs name="color-level" file="scss/_functions.scss" >}} {{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level. In practice, you'd call the function and pass in the color and weight parameters.
{{< highlight scss >}} {{< highlight scss >}}
.custom-element { .custom-element {
color: color-level($primary, -10); color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
} }
{{< /highlight >}} {{< /highlight >}}

11
site/content/docs/5.0/migration.md
View file

@ -7,6 +7,15 @@ aliases: "/migration/"
toc: true toc: true
--- ---
## v5.0.0-alpha3
### Colors
- 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 [this PR](https://github.com/twbs/bootstrap/pull/30622) for more details.
## v5.0.0-alpha2 ## v5.0.0-alpha2
### Sass ### Sass
@ -152,7 +161,7 @@ Changes to our source Sass files and compiled CSS.
- Rearranged forms source files under `scss/forms/`. [See Forms section for more details.](#forms) - Rearranged forms source files under `scss/forms/`. [See Forms section for more details.](#forms)
- Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339). - Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
- Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083) - Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
- The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) - The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`.
- `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146](https://github.com/twbs/bootstrap/pull/29146) - `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146](https://github.com/twbs/bootstrap/pull/29146)
- Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity. - Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity.
- Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271) - Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271)