[v1.0] Scoped css variables

[eldair]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [1.0] I am sure this issue is not a duplicate?

Description

Just a question - why are css variables scoped when they are already unique because of prefix (for example --bulma-input-focus-border-color)? I previously built custom checkbox and used some of bulma sass variables to be consistent with other form elements but now I have to add .input or .control to my elements in order to use css variables. Is there alternative way of using those values?

[jgthms]

They are scoped because, if you apply a dark theme for example, you're setting new values like --bulma-border-l at the :root level. If you also set --bulma-input-focus-border-color at the :root level and it references --bulma-border-l, it won't be updated.

It only works if it's defined at a lower level like .input.

[eldair]

@jgthms I understand Can I perhaps use those variables as sass vars if I @use bulma/form?

[darkylmnx]

They are scoped because, if you apply a dark theme for example, you're setting new values like --bulma-border-l at the :root level. If you also set --bulma-input-focus-border-color at the :root level and it references --bulma-border-l, it won't be updated.

It only works if it's defined at a lower level like .input.

could it be on a html or body level to address that issue? O do you see any specific issue with that?

[jgthms]

:root is the html level.

There could be workarounds but I'd need to look more into it.

[darkylmnx]

:root is the html level.

There could be workarounds but I'd need to look more into it.

Yeah that's why I wrote body but forgot to remove "html" haha. The local scope indeed makes it harder to edit via JS for example where it needs to target the specific element or create a style tag and append the selector necessary.

I understand the use case though.