Documenting CSS vars usage in upcoming Customize docs section

[mdo]

WIP, but trying to capture some of the work @MartijnCuppens and @ffoodd are doing across multiple PRs. Fellas, please weigh in here on anything else we should be striving to mention. Some thoughts from me thus far mean we could include guidelines for how we decide what gets CSS vars, how to customize and utilize them, how we generate them with Sass, etc.

---

X-ref: #26596

[ffoodd]

LGTM. @MartijnCuppens?

[MartijnCuppens]

support dynamic restyling and extending of Bootstrap components without recompiling Sass

I'm not sure about this. You can't just convert all Sass variables into custom properties.

For example, the buttons. They have :hover, :focus & :active states. These states use colors that are generated by Sass and if you change for example var(--primary), those colors won't change. Likewise, contrast colors won't automatically adjust.

As long as we don't have native CSS color functions, this idea won't work.

[mdo]

I'll fine-tune that copy and make sure I'm not implying something we cannot technically do.

[mdo]

Pulled back on the customization/extension bits... I think this is okay? Doesn't overpromise and clarifies some other pieces. Also removed buttons from the last line there.

[MartijnCuppens]

Beautiful.