Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for out of the box $custom-colors variable being merged with $theme-colors map #39609

Open
2 tasks done
marceloverdijk opened this issue Jan 26, 2024 · 2 comments
Open
2 tasks done

Comments

@marceloverdijk
Copy link

marceloverdijk commented Jan 26, 2024

Prerequisites

Proposal

Following the Customize Sass documentation regarding Importing and Add to map to add a custom theme color one should do:

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "bootstrap/scss/functions";

// 2. Include any default variable overrides here

$violet:  #7F00FF;

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

$custom-colors: (
  "violet": $violet
);

$theme-colors: map-merge($theme-colors, $custom-colors);

It would be nice if BS internally would define an empty $custom-colors map and merge that already with $theme-colors.
As it would be empty it causes no difference with current behaviour.

Except it would be much easier for users to add custom theme colors, as it would effectively reduce above code to:

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "bootstrap/scss/functions";

// 2. Include any default variable overrides here

$violet:  #7F00FF;

$custom-colors: (
  "violet": $violet
);

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// Nothing needed here as BS will automatically merge the $custom-colors into the @theme-colors.

Motivation and context

Making it easier for users customizing the Sass to add custom theme colors.

@julien-deramond
Copy link
Member

Thanks for creating this feature request @marceloverdijk
This is an interesting idea that we could study more in-depth for v5.4 (as it could be implemented without breaking anything in v5). I've added to the v5.4 project to analyze after our v5.3.x patches.

@mdo
Copy link
Member

mdo commented Jan 29, 2024

Yeah this is a solid idea, thanks for suggesting it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: To analyze
Development

No branches or pull requests

4 participants