Bulma: $primary: $yellow doesn't seem to update hero background color

[Antrikshy]

Checklist

• [x] This is about Bulma the CSS framework and not about the Bulma website
• [x] I'm using Bulma version [0.1.2]
• [x] This is a Sass issue: I'm using version [3.4.22]
• [x] I am sure this issue is not a duplicate
  

  Description

I'm using gulp-sass, and I had to import Bulma as follows to make it work (notice the node_modules path; not sure if this is relevant to the issue):

@import "../node_modules/bulma/sass/utilities/utilities";

$family-primary: $family-monospace;
$primary: $yellow;

$link: $primary;

@import "../node_modules/bulma/bulma";

As you can see, I have attempted to override some variables. Font override works. $link: $primary makes links yellow, so $primary: $yellow; also seems to work.

However, hero is-primary, along with many other Bulma components, is still the default primary color, $turquoise.

Am I doing something wrong or is this a bug?

[egetin]

I took a look at this.

Problem

The hero background color is fetched from the $colors list at the end of the variables.sass file. Because the $colors array has already been initialized before you override the variable $primary, the color array in variables file gets initialized and therefore the hero background gets set with the old primary color.
What it looks like in the code (file sass/utilities/variables.sass):
$colors: (..., primary: ($primary, $primary-invert), ...) !default
and after your first import it changes to be something like this:
$colors: (..., primary: ($turquoise, $turquoise-invert), ...)
and because of that, your change to $primary variable doesn't affect the $colors array.

Solution

The $colors array should be initialized somewhere else than in the variables.sass file so that it would be initialized only after all the variables are really set to what they should be.

Another way would be to copy the variables.sass to your project folder and change necessary variables there.

[Come2Daddy]

Proper colors override methodology is in docs, this issue could be closed.

[james-wasson]

I think this issue can be closed: https://bulma.io/documentation/customize/variables/