Overriding Bulma’s component variables

The new design has a slightly darker page background. This is defined in the generic.sass. Instead of writing a new CSS rule, you only need to update the appropriate variable, in this case $body-background-color.

You can use one of Bulma’s initial variables: $white-ter. To access it, you need to import it:

// Import the rest of Bulma's initial variables
@import "node_modules/bulma/sass/utilities/initial-variables";

All initial variables are now accessible and can be used to update the component variables.

After having imported the initial variables, but before importing the rest of Bulma, reassign this variable:

$body-background-color: $white-ter;

The next step is to make use of the $large-shadow created earlier. Both the Bulma box and the card can use it, and the box also requires a bit more padding:

$box-padding: 2rem;
$box-shadow: $large-shadow;

$card-shadow: $large-shadow;

In general, the new design is more...