Updated utility API (css-vars utils and new bg/color utils), plus new root CSS variables #34100
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced May 24, 2021
Closed
|
What are your thoughts (or plans) about using HSL as suggested in this comment #32424 (comment)? While they cannot replace SCSS |
mdo
changed the title
ffoodd
previously requested changes
Jul 6, 2021
ffoodd
reviewed
Jul 7, 2021
mdo
force-pushed
the
v510-dev
branch
3 times, most recently
from
1126322 to
aa1c14e
Compare
septatrix
suggested changes
Jul 19, 2021
leomp12
reviewed
Jul 20, 2021
This was referenced Jul 27, 2021
ffoodd
approved these changes
Aug 3, 2021
- 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
- Adds grayscale colors - Adds root and body variables Note that some Sass variables default to `null`, so as we generate and use the CSS variable, we'll be potentially adding some lines of code.
Co-Authored-By: Gaël Poupard <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Consider this a bit of an integration branch for now while work on v5.0.2 continues. I'm using this to consolidate efforts across a handful of PRs.
Changes
cda10d6: Updates
.text-{color}and.bg-{color}utilities to use CSS variables.Both
.text-{color}and.bg-{color}utilities are now powered by CSS variables. For example, we use the new--bs-primary-rgb: 13, 110, 253and--bs-text-opacity(with no default value, but a fallback of1) in.text-primarywhere the new computed style iscolor: rgba(13, 110, 253, 1).We generate these new RGB variables with some new functions that convert hex values to RGB and that generate new Sass maps based on our
$theme-colorsmap. These new maps are now used to generate our utilities for textcolorandbackground-colorand include new options for.{text|bg}-black,.{text|bg}-white, and.{text|bg}-body.The utility API has been updated to include a new
css-varboolean option. When set totrue, it generates only local CSS variables using the API'sclassand individual values. This is how we've added our new.text-opacity-*and.bg-opacity-*utilities. Add these new classes alonside.text-{color}and.bg-{color}utilities to set their alpha transparency on the fly.This also deprecates
.text-black-50and.text-white-50since we can create those on the fly now.Fixes V5 Utilities : Add Border Opacity #33320. Fixes Utilities like .text-light should use the root variables defined (in this case, --bs-light) #33985.
c754e3e: Adds additional
:rootCSS variables for all our shades of gray and some$body-Sass variables.Previously our
:rootCSS variables only included our$colorsand$theme-colors. Now they also include$grays. We've also added new CSS variables for common<body>styles with default values set by their Sass variable counterparts (e.g.,--#{$variable-prefix}body-color: #{$body-color};).