[Proposal] CSS variables Phase 1

Created by: yordis

Goal

Replace static SASS variables to the identical representation using CSS variables.

Upside

• Easy to test
• Easy to code review

Downside

• More iterations
• Require more collaboration

What to avoid

• Modify more than one file at the time
• Update any code related to the usage of mixin
• Modify any code related to SASS specific functions

How to?

1. Communication your intention about working in a particular file
2. Duplicate in _variables.scss the SASS variable with the equivalent CSS variable in the scss/_root.scss file. Use --b- prefix for the variables names (subject to change the naming in the future).
3. Create a PR scoped to only one file, please tag this issue in the PR
4. Repeat.

Tracking

scss

• _alert.scss
• _badge.scss
• _breadcrumb.scss
• _button-group.scss
• _buttons.scss
• _card.scss
• _carousel.scss
• _close.scss
• _containers.scss
• _dropdown.scss
• _forms.scss
• _functions.scss
• _grid.scss
• _helpers.scss
• _images.scss
• _list-group.scss
• _mixins.scss
• _modal.scss
• _nav.scss
• _navbar.scss
• _pagination.scss
• _popover.scss
• _progress.scss
• _reboot.scss
• _root.scss
• _spinners.scss
• _tables.scss
• _toasts.scss
• _tooltip.scss
• _transitions.scss
• _type.scss #30495
• _utilities.scss
• _variables.scss
• bootstrap-grid.scss
• bootstrap-reboot.scss
• bootstrap-utilities.scss
• bootstrap.scss

scss/forms

• _form-check.scss
• _form-control.scss
• _form-file.scss
• _form-range.scss
• _form-select.scss
• _input-group.scss
• _labels.scss
• _validation.scss

scss/helpers

• _background.scss
• _clearfix.scss
• _colored-links.scss
• _embed.scss
• _position.scss
• _screenreaders.scss
• _stretched-link.scss
• _text-truncation.scss

scss/mixins

• _alert.scss
• _background-variant.scss
• _border-radius.scss
• _box-shadow.scss
• _breakpoints.scss
• _buttons.scss
• _caret.scss
• _clearfix.scss
• _container.scss
• _deprecate.scss
• _forms.scss
• _gradients.scss
• _grid.scss
• _image.scss
• _list-group.scss
• _lists.scss
• _pagination.scss
• _reset-text.scss
• _resize.scss
• _screen-reader.scss
• _table-row.scss
• _text-truncate.scss
• _transition.scss
• _utilities.scss

scss/utilities

• _api.scss

scss/vendor

• _rfs.scss