Add CSS variables for all color variations

[axelfontaine]

Prerequisites

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

Proposal

The full list of Bootstrap colors is available at https://getbootstrap.com/docs/5.3/customize/color/#all-colors

It would be nice to be able to refer to these using css variables such as --bs-blue-300 or --bs-color-blue-300. This is a compromise that doesn't suffer from the size explosion problem like generating all utilities would.

Motivation and context

This would help adding additional accents to a design, while sticking to the overall harmoneous color palette.

[devwork260802]

can you explain more about the work

[axelfontaine]

• All colors on https://getbootstrap.com/docs/5.3/customize/color/#all-colors should be added as variables to the main Bootstrap CSS.
• All existing bootstrap color variables should be redifined based on the colors just added (ex: --bs-primary: var(--bs-blue-500))
• Since gray, black and white are already complete, this would only entail adding the 9 variants of blue, indigo, purple, pink, red, orange, yellow, green, teal and cyan
• The existing color variables like --bs-blue should be deprecated in favor of their numbered equivalent like bs-blue-500

In total this would mean just 80 additional css variables to make all colors available.

[mann-shah-pedalsup]

@axelfontaine I would like to work on this issue, can you please guide me to where the CSS file is located to update it?

[kevinalappat09]

@axelfontaine just clarifying the issue, in the _variables.scss file, there are color variables for gray (from line 9 to 19) and their mapping. You would like to have something similar for the other colors?

[mwaibel-go]

I would like to add the request to add all values, also computed ones, as CSS variables to the html scope. (The issue is very similar, so I hope it’s ok to hijack this one instead of opening a new feature request.)

Use Case

Often I want to style elements in a way that matches predefined elements. For instance, a <rect> element in a bar chart should have the buttons’ success or primary fill color and the success or primary border color as stroke color by default. When hovered, the fill and stroke should change hues similar to the :hover state in buttons. Currently the are inaccessible, because they’re scoped to .btn.

Suggested solution

Add new CSS variables to the HTML node for each value used in CSS. For instance, in the use case I’m interested in --bs-btn-primary-hover-bg and --bs-btn-primary-hover-border-color as defined in https://github.com/twbs/bootstrap/blob/cb7467b428d212562d0e8fe29f48588f5ea97ba7/scss/mixins/_buttons.scss#L25

https://github.com/twbs/bootstrap/pull/32424 mentions that you intend to keep the size of the compiled CSS file low, so this feature may not be desirable by default. The file size explosion can be circumvented by providing these definitions in separate files. These can be left out of the default bundle, but still be available in custom builds; for instance as @import("bootstrap/scss/variables/button-variants");

Alternatives considered

If I’m not mistaken, the computed values, for instance $hover-background: shade-color($value, $btn-hover-bg-shade-amount) from the button variants are not even accessible as SCSS variables. If we could import these definitions without having to also import their dependency mixins and functions, this would also go a long way, and wouldn’t touch the compiled files at all. However, this means that the colors can’t be customized at runtime anymore.