Configure using pure css?

[DanCardin]

As far as I can tell, bulma itself can be themed by customizing certain top-level variables like --bulma-primary-h/s/l, and there are numerous derived variables (like --bulma-primary) that end up being used in all the componentry that make this work, even if you dont perform any of the customization inside sass.

To some extent, theme-bulma seems like it can be configured similarly, such that bulma css variables ultimately still control how oruga looks(?)

But in other cases, --bulma-tooltip-bg for example, it seems like the sass variable is compiled in (although perhaps that's just how I happen to be be importing the plugin), although I do seem to be able to circumvent this specific case like so:

  .tooltip .is-primary {
    --bulma-tooltip-bg: var(--bulma-primary);
  }

Is theming this plugin like this generally possible, or a goal? There are a number of other post bulma 1.0 issues that seem related, but the resolutions inside them (and the docs) ultimately are still very oriented around sass build-time level customization.

[whiplashwebb]

The theme tries to leverage bulma css variables as much as possible, but we don't have CSS variables for 100% of our SASS variables. Some variables such as $colors cannot be fully handled by css vars, as it's an array which we have to iterate over to get all the variants. So 100% coverage is going to be impossible but 99%-ish probably is. However, if you look at Bulma they don't have 100% coverage either, even for simple (non-array etc) variables.

My two cents is full CSS variable support isn't worth the effort right now given the limitations, but that's just my opinion.

[DanCardin]

i wouldn't expect things like $colors to translate, but i would expect anything based on the core variants like is-primary (from the above example) to at least be possible, whether or not that's a goal of the lib necessarily.

[mlmoravek]

Normaly you should override most (nearly all) of the CSS rules, which should be themeable with CSS-variables.
It you find any CSS rule which should be defined using a CSS-variable but is not, let me know or open an PR.

[DanCardin]

is a primary variant tooltip/switch (my original example) not the example you're looking for? i would expect it to use the var(--bulma-primary) value

  .tooltip .is-primary {
    --bulma-tooltip-bg: var(--bulma-primary);
  }
  .switch.is-primary input[type="checkbox"]:checked + .check {
    --bulma-switch-active-background-color: var(--bulma-primary);
  }

seems to have the effect i would have expected to be default. I'm just trying to gauge whether this is the sort of thing I should expect to function like that, or if there's something I'm missing as to why it shouldnt.