Break base variables up into separate file for easier customizing

[brianmeagher]

Currently overriding base level variables, i.e. $input-btn-padding-x, also requires overriding all variables that have been declared using that value $btn-padding-x and $input-padding-x.

I'm suggesting either breaking these variables out into a separate sass file (see below) or moving component specific variables into the existing sass file, i.e. _buttons.scss

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/mixins";

@import "../node_modules/bootstrap/scss/base";

// Include custom base variable default overrides here

@import "../node_modules/bootstrap/scss/variables";

// Include custom variable default overrides here

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

[ffoodd]

Wrapping things up, I seriously think this is needed: see #33264 and #33070 recently.

@mdo Based on discussions on #43 in bootstrap-npm-starter, it seems that this architecture change is the most straightforward way for easier customization.

[ffoodd]

Also kind of relates to #28553 — however no adherence needed between those topics.

[mdo]

Opened #33368 to start discussion again with breaking out our colors.

[ellenhutchings]

The current set up of the variables file means that adding anything into theme colors is impossible before importing variables, and after requires doing a map merge to every list generated from it. Plus for it to actually work it has to be done before the root file is imported. At the very least the documentation is woefully out of date.

For my case, that PR, allowing for color lists like $colors or $theme-colors to be overridden before they're referenced in a zillion places, or setting up them to start as map-merges (I feel like that's how v4 did it) so that we could "define" them with our additions.