Bulma: Default variables and calculed ones

[Swizz]

Hi.

Thanks for your last update of Bulma with more theming stuffs.
But, It could be a great idea to divide the variables file into two files : the first one with the fixed vars and the second one with the calculated ones.

In fact, we will be able to use those for our theming needs, such as :

@import "bulma/sass/utilities/variables"

$strawberry: #BF3030

$primary: $grey-dark
$warning: $strawberry
$info: $grey-light

@import "bulma"

So, due to the use of the function findColorInvert we need to also import the functions file. But it is really against intuitivity.

And, variables based on anothers and marked with !default will not be evaluated again.
Like $link which will keep the first $primary value given by default.

I do not know if anybody require this feature but I think it could be appreciated.

Thanks for your time,
Regards.

[jgthms]

So the variables now all use the !default flag. So basically, you can just set your variables _first_ and import bulma _once_:

$blue: #00f
$primary: $blue

@import "bulma/bulma"

And this would work. The $primary-invert would pick up the new $primary as $blue.

Can you try it out?

[Swizz]

In this case, I want to deal with your palette.
To use the "Bulma" shade of grey with my company colors called strawberry.

Currently my template file look like this :

// Colors :
$strawberry: #BF3030 !default

$grey-darker: #222324 !default
$grey-dark: #69707a !default
$grey: #aeb1b5 !default
$grey-light: #d3d6db !default
$grey-lighter: #f5f7fa !default

$blue: #42afe3 !default
$green: #97cd76 !default
$orange: #f68b39 !default
$purple: #847bb9 !default
$red: #ed6c63 !default
$turquoise: #1fc8db !default
$yellow: #fce473 !default


// Theme :
$primary: $grey-dark
$warning: $strawberry

$info: $grey-light
$success: $green
$danger: $orange

[jgthms]

I think you just need to include the variables you're actually gonna change. So just add your theme colors, and don't include the default ones.

So something like:

// Theme :
$primary: $grey-dark
$warning: $strawberry

$info: $grey-light
$success: $green
$danger: $orange

@import "bulma/bulma"

should work.

[Swizz]

Yes, I understand very well.
But at this state $grey-dark, $grey-light, $green, and $orange do not exist yet.

The main idea, is to give us an entry point to your colors palette.
To keep your awesome washed out visual effect with another kind of theming types (primary, warning, info, etc..).

[jgthms]

Argh, the variables used to be split out in 4 files. But when I added the !default flag, I didn't think import them one by one was still necessary.

I can add that back.

[rjbergerud]

Is this documentation up to date? Importing bulma after setting the colours doesn't seem to work. http://bulma.io/documentation/overview/start/

[rokob]

Bump, this is still broken.

[jenil]

@jgthms any update on this?

[mokumax]

I've tried all the examples and rearranged the @imports and also stripped it down to almost nothing and @import bulma/bulma or @import bulma is always "not found or unreachable". Is this something we need to create. Sass is new to me so could be just inexperience and not knowing what to correct in the examples.

[marcusmoore]

I checked back in on this recently and noticed it was still an issue. Is modifying my project to mimic the changes in #522 the best way to approach this for now?

[jgthms]

http://bulma.io/documentation/overview/customize/