Update to Latest Bulma v1

[eleazarbr]

Hello everyone,

I'm writing to request an update to be compatible with the latest version of Bulma version 1, which was released today (March 21, 2024). I understand that this has just been launched and the update might require some challenges. This issue is merely to bring it to our attention for future consideration.

Thanks and best regards.

[lucraraujo]

According to the release notes, V1 should be a drop-in replacement for 0.9.4.

[messenjer]

Hello,

For one of my projects, I had the necessity to customize the entire Oruga Bulma theme using CSS variables. Consequently, instead of utilising Oruga's theme-bulma, I opted for the Bulvar library available at https://github.com/daniil4udo/bulvar for the Buefy project. However, if the Oruga theme-bulma upgrade to the latest version of Bulma (version 1) with built-in support for CSS variables, it would eliminate the need for Bulvar.

To upgrade to bulma v1 we need also to replace all the @import by @use or @forward and setup correctly the variables inside the theme-bulma. There is an old pull request here: https://github.com/oruga-ui/theme-bulma/pull/49 by @IceBlizz6 . It might help to port this PR to the master branch.

Mathieu

[messenjer]

I created a PR to replace @import with @use, @forward https://github.com/oruga-ui/theme-bulma/pull/101 a step towards bulma v1

[messenjer]

I try to upgrade to 1.0 from my PR #101, here is the first commit : https://github.com/messenjer/theme-bulma/commit/5c0a90fc7f6329a679a6d7c65dbc91ea6d83157c

There are sass variables from bulma 0.9 used in theme-bulma that have been renamed, or calculated differently in bulma 1.0.

Example :

• $input-background-color --> hsl( $input-h, $input-s, calc(input-background-l + input-background-l-delta))

Here: https://github.com/jgthms/bulma/blob/d2687d444c907893a6feb8733404364b871a94d5/sass/form/shared.scss#L97

  background-color: hsl(
    #{cv.getVar("input-h")},
    #{cv.getVar("input-s")},
    calc(
      #{cv.getVar("input-background-l")} + #{cv.getVar(
          "input-background-l-delta"
        )}
    )
  );

So for this color, I created a temporary file https://github.com/messenjer/theme-bulma/blob/7c1ac51fbc7c71e8f2e4e96390927b15ae83c6e7/src/assets/scss/components/utils/_variables-to-migrate.scss

@use "bulma/sass" as bulma;
@use "bulma/sass/utilities" as fn;

$primary-invert: bulma.$white !default;
$dropdown-item-hover-background-color: bulma.$dropdown-item-background-l !default;
$dropdown-item-hover-color: bulma.$dropdown-item-color-l !default;
$input-focus-box-shadow-size: bulma.$input-focus-shadow-size !default;
$input-focus-box-shadow-color: bulma.$input-focus-l !default;

We can improve the oruga theme using the new mixins, functions from bulma v1, perhaps we should ask for advice on the bulma project to get recommendations and help.

[messenjer]

@mlmoravek Congratulations on this work, looking forward to the release ;-)