1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00

Update color and background-color utilities

- Adds new functions to generate additional Sass maps
- Adds new root variables for rgb() versions of our theme colors, plus a few extras
- Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var
- Updates documentation for color and background-color utilities pages
- Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly

Change approach slightly to prevent cascade
This commit is contained in:
Mark Otto
2021-05-24 11:56:19 -07:00
committed by Mark Otto
parent a2f92d1aab
commit e72916e5b7
7 changed files with 223 additions and 15 deletions

View File

@@ -90,6 +90,10 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map
// scss-docs-start theme-colors-rgb
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb
// 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
$min-contrast-ratio: 4.5 !default;
@@ -401,6 +405,28 @@ $body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;
// Utilities maps
//
// Extends the default `$theme-colors` maps to help create our utilities.
// scss-docs-start utilities-colors
$utilities-colors: map-merge(
$theme-colors-rgb,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
) !default;
// scss-docs-end utilities-colors
// scss-docs-start utilities-text-colors
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text") !default;
// scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !default;
// scss-docs-end utilities-bg-colors
// Links
//