Create custom gradient in bootstrap 4 using SASS function theme-color-level

Question

I have setup Bootstrap 4 theme variables as follows:

// custom-theme.scss
$primary: green;
$secondary: purple;

Then custom variables like:

// custom-variables.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

$idi-primary-12: theme-color-level(primary, -12);

Then importing all as follows:

//main.scss,
@import "./bootstrap-theme";
@import "./custom-variables";
@import '~bootstrap/scss/bootstrap';

This updates bootstrap classes like btn-primary and text-secondary AS EXPECTED (nice);

But the custom variable ($idi-primary-12) based on my $primary doesn't work. I was using the theme-color-level SASS function as given here in the official documentation.

When I use this in my component,

// myComponent.scss
@import "../custom-variables";

.myUserInfo {
    background-color: $idi-primary-12;
    color: color-yiq($idi-primary-12);
}

I get BLUE shade (which is the default in the bootstrap/scss/variables.scss). Github source instead of my override (green - as set above)

Question: How do I use theme-color-level function, to use my $primary (green) variable to generate a lighter version of that green? (and not the default blue).

Additional info: official documentation for SASS functions

1. theme-color-level uses theme-color
2. theme-color extracts from object $theme-colors by key (I am using primary)
3. $theme-colors primary key is set to $primary (Github for $theme-colors)
4. $primary is set to blue (Github for $primary)
5. This should have be overridden by my $primary = green; from custom-theme.scss. That is why btn-primary is working. (shown as green). But why isn't it using that same overridden variable to create my $idi-primary-12 variable?

Answer 1

AFAIK theme-color-level function in Bootstrap will take 2 parameters, color-name from the theme in string (eg, 'primary', 'info') and level in number as shown below:

// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

and if we want to use this function for some colors other then the theme colors (eg. 'primary'), maybe we can write another function for that, eg:

@function custom-color-level($color: pink, $level: 0) {
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

with this custom function, we can pass the first param as color (eg. #007bff, orange)

Answer 2

I think you have a typo, $primary instead of primary

$idi-primary-12: theme-color-level($primary, -12);

Answer 3

theme-color-level surprisingly is not internally using the overridden $primary value. Instead it is taking the default $primary value (blue).

I was able to use other function, which directly works on my overridden $primary value.

// custom.scss
$primary: green;

darken($primary, 10% )
lighten($primary, 10% )

Reference