Bootstrap 5.2.0-beta1 > decouple CSS vars from _variables.scss
vinorodrigues opened this issue · comments
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;
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.
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?
Oh, I understand now. This makes sense to me. Thank you for the explanation and I agree. 👍
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!