Use HSL as default for color

Prerequisites

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

Proposal

HSL is the acronym of Hue, Saturation and Lightness, which means that without the need of scss we can easily darken or adjust hue to any color. See the example below:

darken($primary,10%)

can be replaced with:

background-color: hsl(var(--bs-primary-h), var(--bs-primary-s), calc(var(--bs-primary-l) - 10%))

See this codepen

This will allow the full color customization via css variables, which now is not possible. I.e; buttons require darken method and everytime you want to create a new theme, must compile scss. The same happens to adjust-hue, which can be replaced with HSL and a calc() in the hue variable.

Motivation and context

This change will allow live preview of the color changes within the browser. Will improve theme development as not compilation is need. Will allow a better implementation with future css4 features, like color mixins, etc…

[mdo]

This is something we could evaluate for v6, but no sooner. Labelling accordingly and closing out for now. No promises one way or another either 😃.

[Eseperio]

No. It is a private project. You must try at your own risk.