custom color guidance

[digitigradeit]

Previously my site used SCSS variables and

  "darkblue": ($darkblue,
    $darkblue-invert,
    $darkblue-light,
    $darkblue-dark ),
);
$colors: map-merge($colors, $addColors);

...which was previously indicated by the docs. How would this work with bulma 1.0?

I have tried:

  "darkblue": (
    "base": $darkblue,
    "dark": $darkblue-dark,
    "light": $darkblue-light,
  ),
);
@use "..//node_modules/bulma/sass/index" with (
  // Other customizations
  $custom-colors: $my-colors,
);

Another option I thought about was:

  --darkblue: #{$darkblue};
  --darkblue-dark: #{$darkblue-dark};
  --darkblue-light: #{$darkblue-light};
}

.darkblue {
  background-color: var(--darkblue);
  &.dark {
    background-color: var(--darkblue-dark);
  }
  &.light {
    background-color: var(--darkblue-light);
  }
}

However the later doesn't allow for class="button is-darkblue" or class="hero is-darkblue" and where to indicate the calculated invert color?

And, of course, how would one use the new palette system with their own custom colors>?