Bootstrap 5.2.0-beta1 > decouple CSS vars from _variables.scss

[Vino Rodrigues]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Remove all use of CSS vars in the _variables.scc file and instead incorporate the appropriate $ variable into the underlying code as --#{$prefix}xxx: #{$xxx} & yyy: var(--#{$prefix}xxx) pairs in the appropriate SCSS file.

Motivation and context

_variables.scss is pockmarked with variable declarations that use CSS vars.

This makes for theming slightly more cumbersome as one needs to account for the possibility of values being overriden by subsequent manipulation of the CSS vars.

Obviously this would make any future theming tool / theme generator complex as it would need to account for both true variables, and loosely-coupled variables.

In 5.2-B1 these include:

$font-family-base:           var(--#{$prefix}font-sans-serif) !default;
$font-family-code:           var(--#{$prefix}font-monospace) !default;
$text-muted:                 rgba(var(--#{$prefix}body-color-rgb), .75) !default;
$table-color:                var(--#{$prefix}body-color) !default;
$table-border-color:         var(--#{$prefix}border-color) !default;
$btn-link-color:             var(--#{$prefix}link-color) !default;
$btn-link-hover-color:       var(--#{$prefix}link-hover-color) !default;
$nav-link-color:             var(--#{$prefix}link-color) !default;
$nav-link-hover-color:       var(--#{$prefix}link-hover-color) !default;
$dropdown-border-color:      var(--#{$prefix}border-color-translucent) !default;
$pagination-color:           var(--#{$prefix}link-color) !default;
$pagination-focus-color:     var(--#{$prefix}link-hover-color) !default;
$pagination-hover-color:     var(--#{$prefix}link-hover-color) !default;
$card-border-color:          var(--#{$prefix}border-color-translucent) !default;
$accordion-color:            var(--#{$prefix}body-color) !default;
$accordion-border-color:     var(--#{$prefix}border-color) !default;
$accordion-button-bg:        var(--#{$prefix}accordion-bg) !default;
$popover-border-color:       var(--#{$prefix}border-color-translucent) !default;
$popover-header-color:       var(--#{$prefix}heading-color) !default;
$popover-arrow-outer-color:  var(--#{$prefix}border-color-translucent) !default;
$toast-border-color:         var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-header-border-color:  var(--#{$prefix}border-color) !default;
$thumbnail-border-color:     var(--#{$prefix}border-color) !default;
$kbd-color:                  var(--#{$prefix}body-bg) !default;
$kbd-bg:                     var(--#{$prefix}body-color) !default;

[Supportic]

These are default values that can be overridden by your theme settings at any time and will not change. Once defined theme variables cannot be overwritten with css variables.
The same degree of customizability you also get when you start picking the parts from bootstrap you need from bootstrap.scss. Either way you have to touch some settings.

[Vino Rodrigues]

I'm not disputing that they are values that can be overridden, or that they need to be touched.

I'm speaking of consistency, for example:

code {
  color: var(--#{$prefix}code-color);
}

kbd {
  color: $kbd-color;
}

Why is code wrapped in a CSS var(), and kbd is not?

Bootstrap is a framework after all - so it's expected the devs will want to override / change things ... no? With this inconsistent approach now they need to worry about whether to override the --bs-* in vanila/snap-on CSS, or redeclare the whole tag.

:root {
  /* all the other things being overridden */
  --bs-kbd-color: {my_color};
}

Is a lot easier than:

:root {
  /* all the other things being overridden */
}

kdb {
  color: {my_color};
}

Especially since now I'd need to do some with method 1 and other with method 2 ... as a framework why do I need to keep track?

[Supportic]

Oh, I understand now. This makes sense to me. Thank you for the explanation and I agree. 👍

[Mark Otto]

The answer here is that we just haven't migrated everything to CSS variables yet :). No major plans to divert from how we've been implementing things thus far though, but this is all good food for thought for v6. Thanks!