Reduce CSS variable overrides for colors

[justin-oh]

Prerequisites

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

Proposal

If we look at the .btn-primary class as an example, you can see it doesn't reference --bs-primary at all:

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

If I want to alter the value of --bs-primary through CSS, I have to go through each component that is named primary and update a lot of values individually.

Each color palette could be based off of 2 CSS variables:

::root {
    --bs-primary: #0d6efd;
    --bs-primary-contrast: #fff;
    // from here, all --bs-primary-* variables are based off of --bs-primary
    // I'm admittedly unsure about this syntax, but one should get the idea
    --bs-primary-100: hsl(from var(--bs-primary) h s calc(l + 80));
    --bs-primary-200: hsl(from var(--bs-primary) h s calc(l + 60));
    --bs-primary-300: hsl(from var(--bs-primary) h s calc(l + 40));
    --bs-primary-400: hsl(from var(--bs-primary) h s calc(l + 20));
    --bs-primary-500: var(--bs-primary);
    --bs-primary-600: hsl(from var(--bs-primary) h s calc(l - 20));
    --bs-primary-700: hsl(from var(--bs-primary) h s calc(l - 40));
    --bs-primary-800: hsl(from var(--bs-primary) h s calc(l - 60));
    --bs-primary-900: hsl(from var(--bs-primary) h s calc(l - 80));
}

then the .btn-primary component could look something like this:

.btn-primary {
    --bs-btn-color: var(--bs-primary-contrast);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary-contrast);
    --bs-btn-hover-bg: var(--bs-primary-600);
    --bs-btn-hover-border-color: var(--bs-primary-700);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-400);
    --bs-btn-active-color: var(--bs-primary-contrast);
    --bs-btn-active-bg: var(--bs-primary-700);
    --bs-btn-active-border-color: var(--bs-primary-800);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary-contrast);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

Motivation and context

I was looking at removing Sass compilation from my workflow and importing Bootstrap's compiled CSS, relying on the CSS variables. However, something that was simple in Sass like overriding $primary: $purple becomes a very tedious task through CSS variables.

[Mark Otto]

This is a known issue due to backward compatibility. I think we have an issue for it somewhere that I'll try to find, but suffice to say it can't happen until a v6. Very much wanted though!