Migration to v1 is tough

[mbolli]

This is about Bulma v1 and the needed migration - not a bug.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma 1.0.2 My browser is: latest Chrome I am sure this issue is not a duplicate

Description

This is how I modified Bulma to project requirements in 0.9.4:

$green: #56a39f;
$red: #e56758;
$darkblue: #2c3848;
$primary: $green;
$radius: 2px;

@import "~bulma/sass/utilities/_all";

// overrides
$family-primary: 'Roboto', sans-serif;
$family-secondary: 'Roboto', sans-serif;
$family-sans-serif: 'Roboto', sans-serif;
$family-code: "Inconsolata", "Consolas", "Courier", "Courier New", monospace;
$family-monospace: "Inconsolata", "Consolas", "Courier", "Courier New", monospace;
$box-radius: 0;
$title-weight: $weight-normal;
$body-background-color: #ececec;

// menu overrides
$menu-item-color: #898f98;
$menu-item-hover-color: $white;
$menu-item-hover-background-color: transparent;
$menu-item-active-color: $white;
$menu-item-active-background-color: transparent;
$menu-list-link-padding: 0.4em 0;
$menu-list-line-height: 1;
$menu-label-color: $white;
$menu-label-font-size: 1em;
$menu-label-letter-spacing: 0.05em;
$menu-label-spacing: .5em;

...

Essentially I was just able to go into the sass file, e.g. menu.sass, see what variables are available, e.g.

$menu-item-color: $text !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $text-strong !default
$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default

and go from there.

Now when trying to migrate to v1:

$green: #56a39f;
$red: #e56758;
$darkblue: #2c3848;
$primary: $green;
$radius: 2px;
$menu-item-color: #898f98;

// override/change bulma variables
@use "bulma/sass" with (
  $family-primary: 'Roboto, sans-serif',
  $family-secondary: 'Roboto, sans-serif',
  $family-sans-serif: 'Roboto, sans-serif',
  $family-code: 'Inconsolata, Consolas, Courier, "Courier New", monospace',
  $family-monospace: 'Inconsolata, Consolas, Courier, "Courier New", monospace',
  $box-radius: 0,
  $title-weight: 300,
  $body-background-color: #ececec,

  // navbar overrides
  $menu-item-hover-color: #fff,
  $menu-item-hover-background-color: transparent,
  $menu-item-active-color: #fff,
  $menu-item-active-background-color: transparent,
  $menu-list-link-padding: 0.4em 0,
  $menu-list-line-height: 1,
  $menu-label-color: #fff,
  $menu-label-font-size: 1em,
  $menu-label-letter-spacing: 0.05em,
  $menu-label-spacing: .5em,

  ...

Obviously it doesn't work, as most of the variables are not there anymore. So I go into menu.scss:

$menu-item-h: cv.getVar("scheme-h");
$menu-item-s: cv.getVar("scheme-s");
$menu-item-l: cv.getVar("scheme-main-l");
$menu-item-background-l: cv.getVar("scheme-main-l");
$menu-item-background-l-delta: 0%;
$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
$menu-item-color-l: cv.getVar("text-l");
$menu-item-radius: cv.getVar("radius-small") !default;
$menu-item-selected-h: cv.getVar("link-h");
$menu-item-selected-s: cv.getVar("link-s");
$menu-item-selected-l: cv.getVar("link-l");
$menu-item-selected-background-l: cv.getVar("link-l");
$menu-item-selected-color-l: cv.getVar("link-invert-l");

How would I go about setting $menu-item-active-color: #fff; $menu-item-active-background-color: transparent? The :hover and :active styles only override the background luminance delta.

    &:hover {
      @include cv.register-vars(
        (
          "menu-item-background-l-delta": #{cv.getVar(
              "menu-item-hover-background-l-delta"
            )},
        )
      );
    }

    &:active {
      @include cv.register-vars(
        (
          "menu-item-background-l-delta": #{cv.getVar(
              "menu-item-active-background-l-delta"
            )},
        )
      );
    }

Do I need to go back to override like this?

@use "bulma/sass" with (
  $family-primary: 'Roboto, sans-serif',
  ...
);

.menu-list {
  a, button, .menu-item {
    &:hover { 
      // variant 1
      background-color: transparent; 
      color: #fff;

      // or this? variant 2
      --menu-item-h: 0;
      --menu-item-s: 0%;
      --menu-item-l: 100%;
      background-color: transparent; // transparency part of HSL not overridable?
  }
}

I mean, the upper way (variant 1) would be easy enough, but feels somehow wrong. And there's a big chance to miss something. The lower way (variant 2) is just really verbose and it doesn't look like everything's overridable. And there's the same chance to miss something.

[jgthms]

It's a fair criticism. The new system is supposed to leverage the flexibility of the HSL color format to easily customize your components.

I think some component like the Menu or the Pagination could do without this sytem. I'll see what I can do.

[wagich]

I've had a similar experience migrating my projects – it was managable, but coupled with the paradigm shift SASS namespacing forced on the styles quite complicated and error-prone.

Regarding simplifying some component's colors: at least for me, that unfortunately wouldn't solve the underlying problem. Right now I have a need to set button color variants to exact foreground-background pairs that were defined by a designer, this seems to only be possible by enumerating the colors and restyling .button.is-* classes… That's quite the step backwards from 0.x and seems to be something that should be easily achievable in the new theming system.

A minimal change that could help: if the hsla-calculations were stored in sass-variables (or even just separate css-vars) they could be overriden as regular colors.

[brendon]

I've come across some similar difficulty when trying to upgrade the checkradio plugin. It appears abandoned so I'm just going to internalise it. They did things like this:

  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)

But now there's no guaranteed inverted colour. Is there a simple way to get a list of colours and their inverts in the rewrite? Looking at the code for button, the colours look very complicated now :)

[brendon]

I went for this approach in the end:

@use "sass:list"
@use "bulma/sass" as bulma
@use "bulma/sass/utilities/functions"

  @each $name, $pair in bulma.$colors
    $color: list.nth($pair, 1)
    $color-invert: functions.bulmaFindColorInvert($color)

    @if list.length($pair) > 1
      $color-invert: list.nth($pair, 2)