$theme-colors doesnt seem to be populating to components in v5.0.0-beta2

[WilliamStam]

META

Windows 10 (latest)
firefox / chrome

gulp --version
CLI version: 2.3.0
Local version: 4.0.2
npm --version
7.5.4
sass --version
1.27.0 compiled with dart2js 2.10.1

bootstrap installed with npm "dependencies": { "bootstrap": "5.0.0-beta2"}

BUG

when changing the $theme-colors map it doesnt seem to impact all the compoenents.
not totaly sure how to "show" it being broken other than the jsfiddlefollowing.

https://jsfiddle.net/yLejvkw0/

the alerts and buttons seem to map correctly but the others not

EXPECTED BEHAVIOR

alerts: expected
badges: to only have the primary and secondary set (but since badges relies on bg-* this applies to the bg-* part)
buttons: expected
tables: to only have the primary and secondary set, the rest shouldnt be set, and also the colours are wrong
backgrounds: same as tables above

this is the first time im finding this issue tho so it might just be with my test case and application (or i broke something some how but i tried doing a "clean" setup for it)

a "smaller" bootstrap file.

/*!
 * Bootstrap v5.0.0-beta2 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";

// im setting the primary / secondary colours here for demo
$theme-colors: (
    "primary":purple,
    "secondary":green,
);

// Layout & components
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/badge";
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/progress";

// Helpers
@import "node_modules/bootstrap/scss/helpers";

// Utilities
@import "node_modules/bootstrap/scss/utilities/api";
// scss-docs-end import-stack

my gulp task (so nothing super special)

gulp.task('files.scss', () => {
    let src = argv.file ?? ['./app/**/assets/css/**/*.scss', '!./app/**/assets/css/**/*.scss/*/**']
    // console.log(src)
    return gulp.src(src, {nodir: true, base: '.'})
        .pipe(sass.sync({includePaths:'./'}))
        .pipe(rename(function (file) {
            file.dirname = savePath(file.dirname, 'css');
            console.log(" > " + file.dirname + path.sep + file.basename + file.extname)
        }))
        .pipe(gulp.dest("."));
});

[marvinhinz]

Same happens to me with 5.0.0-beta1 and 5.0.0-beta2.

I tried the following:

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$primary: red;
@import "rest of bootstrap";

That doesnt work, but the following does:

$primary: red;
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "rest of bootstrap";

[mdo]

Yes, this is a limitation of Sass and us using reassigned variables. To do it right, you have to override the variables first. Our docs suggest putting it after the functions, variables, and mixins because that allows you to use our variables—or at least, it should allow it. Anything that's reassigned (e.g., $primary for $link-color) just refuses to update.

Duplicate of #33070.

[WilliamStam]

Oh no :( it's interesting that some of the things work ie buttons tho (considering that it's a limitation of sass).

Moving custom variables before the bootstrap vars will introduce some issues tho unless we duplicate just about all the vars in our custom ones. As in some of the custom vars need to use functions / utils that rely on other vars being set.

And duplicating the entire vars file over and removing !default to everything would make bs not upgradeable at all and just a pain.

Edit: just went on an interesting journey following the duplicate thread and posts around it. Variables was what made me fall in love with bootstrap to start with. Careful of making the library Soo "clever" it becomes "dumb".

Going to see if I can just duplicate the variables file and find and replace all !default to blank and make my 30 or so changes where applicable (and probably a comment string afterwards like /* changed */ to be able to find what I changed for upgrade times easily). This will definately hurt "upgrading". I really hope you guys document any variable changes that get made in future updates (expected big changes in majors so not too worried bout those) arrrggghhhhh

[WilliamStam]

at this point i think its easier to just not use bootstrap. for anyone else wanting to get this solved.. duplicating the variables file and then making the changes to "your" variables file is about the only option ive found to get this to work. its a HUGE pain. you cant just do "overrides" any more and the variables file is 1357 lines long. (also remember to find and replace remove !default

would suggest the devs look into this. thanks for all the hard work but these changes just ruin the plot. howcome it worked in 4 then?