Finish moving Sass variables to CSS custom property tokens#42701
Merged
Conversation
Individual $font-weight-lighter/light/normal/medium/semibold/bold/bolder variables made it easy to forget one when adding a new weight and kept the values duplicated across _config.scss, _root.scss, and the utilities API. Move them into a single $font-weights map so --font-weight-* tokens and the fw-* utilities are generated from one source, matching the pattern already used for $font-sizes.
$line-height-base/sm/lg duplicated values already exposed as --line-height-* tokens (generated from $font-sizes). Point the line-height utilities and --body-line-height at the CSS variables instead of the Sass variables so there's one source of truth and runtime overrides of --line-height-* also affect the utility classes.
It was the last Sass variable left in the heading/type system after the rest moved to CSS custom properties, and it only ever had one value (inherit). Hardcode --heading-color: inherit directly in $root-tokens instead so headings customization is fully CSS-variable driven, matching paragraphs, lists, and legend.
Both had a single fixed value and existed only to be interpolated into --link-decoration and --link-underline-offset once, in $root-tokens. Hardcode the values there directly instead, simplify the list-group item's text-decoration to plain `none` (it no longer needs to branch on $link-decoration), and drop the stray commented-out $enable-negative-margins default and leftover dead comments in Reboot.
$transition-fade and $transition-collapse/$transition-collapse-width lived in _config.scss like other component tokens used to before the tokens migration, but .fade and .collapsing never picked up the --fade-*/--collapse-* token treatment. Give them their own $fade-tokens and $collapse-tokens (via defaults()) in _transitions.scss so --transition-fade, --transition-collapse, and --transition-collapse-width are runtime-customizable CSS variables like the rest of the component tokens. $transition-base moves into mixins/_transition.scss, next to the mixin that uses it as a fallback.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Continues the tokens migration by removing the last few Sass variables that only ever fed a single CSS custom property, or that duplicated values already available as tokens elsewhere.
$font-weight-*variables into a$font-weightsmap (mirrors$font-sizes) so the--font-weight-*tokens andfw-*utilities are generated from one source.$line-height-base/$line-height-sm/$line-height-lgwith the--line-height-*tokens already generated from$font-sizes.$headings-color, hardcoding--heading-color: inheritdirectly.$link-decoration/$link-underline-offset, hardcoding their values directly in$root-tokens.$transition-fade/$transition-collapse/$transition-collapse-widthinto$fade-tokens/$collapse-tokensin_transitions.scssso they're runtime-customizable CSS variables like other component tokens;$transition-basemoves next to the mixin that uses it.Also fixes two breakages introduced by the in-progress version of this work: an undefined
$link-underline-offsetreference left in_root.scss, and a typo ($transitions-tokensinstead of$fade-tokens) in the new_transitions.scssthat broke the full build.