Problem/Motivation

There is an issue with current Bootstrap 5 upstream. When they introduced CSS Variables (the tokens overridable at runtime), they turned many (or all?) Sass Variables (the tokens, overridable at buildtime) into CSS variables.

Bootstrap 5.3 has 393 CSS Variables, and we have implemented al of them with UI skins: https://git.drupalcode.org/project/ui_suite_bootstrap/-/blob/5.0.x/ui_su...

It is a mess. CSS Variables is a public API with a distinct purpose, and need to be focused and clean. That's why we have:

  • conflicting colors and "colors rgb"
  • misleading variables (they don't do what may be expected, or not as much as expected)

For comparison, Material Design Web 2 has only 36 variables and all of them are clear and useful: https://git.drupalcode.org/project/ui_suite_material/-/blob/2.0.x/ui_sui...

Proposed resolution

Can we remove all CSS variable which are confusing, useless or misleading?

Remaining tasks

We don't know yet if those variables to remove are 20, or 200. We need to do an analysis first.

Maybe, it would be better to act upstream first: https://github.com/twbs/bootstrap/issues

API changes

Unfortunately, it is a breaking change. If someone has overridden a variable we will remove, the value will not be applied anymore.

Issue fork ui_suite_bootstrap-3389752

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pdureau created an issue. See original summary.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Active » Postponed

Postponed until UI Skins API is improved in the related issue #3403793: From one CSS variable plugin generate derivatives.

thejimbirch’s picture

thejimbirch commented

Following.

We had the need for --bs-nav-link-font-size today.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Issue tags: +beta blocker
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Issue tags: -beta blocker
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Postponed » Active

Back to active now that there is a MR to test in UI Skins.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Bootstrap 5: Do we need all those CSS variables? » Reduce the number of CSS variables

Better title

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: Unassigned » grimreaper

grimreaper opened merge request !203

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

17 less variables with just simple hex_to_rgb conversion.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

4 less variables.

393 -> 372

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Active » Needs work
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Version: 5.0.x-dev » 5.1.x-dev
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Assigned: grimreaper » Unassigned
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Reduce the number of CSS variables » UI Skins: Reduce the number of CSS variables
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Version: 5.1.x-dev » 5.2.x-dev

grimreaper closed merge request !203

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Needs work » Closed (works as designed)

Discussed with @pdureau.

Closing as it is an upstream problem. This needs to be simplified directly into the Bootstrap library.

Providing such derivative system with UI Skins will open a pandora box.

We can't reproduce PHP side, CSS and SASS functions.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.