Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request - Add support for non-color variables #4

Open
AcelisWeaven opened this issue Nov 21, 2019 · 1 comment
Open

Feature request - Add support for non-color variables #4

AcelisWeaven opened this issue Nov 21, 2019 · 1 comment

Comments

@AcelisWeaven
Copy link
Contributor

AcelisWeaven commented Nov 21, 2019

One feature I'd like to see would be the possibility to change other properties, like the font-family.

The ColorUpdater wouldn't be needed, and you could simply do something like this:

document.documentElement.style.setProperty('--body-family', 'OpenSans, sans-serif');

However, I don't know if it fits the project. What's your opinion about this?

--
Sorry for the quick edit. I figured you can already do this with Bulma only. To use it with this project, I did the following in my main scss file:

@import './generated/generated-bulma-fallback.css';
@import './generated/generated-bulma-vars.sass';

:root {
  --default-body-family: $body-family;
}

$body-family: var(--body-family, --default-body-family);

@import '../node_modules/bulma-css-vars/bulma-cv-lib.sass';
@wtho
Copy link
Owner

wtho commented Nov 22, 2019

Yeah, for fonts there is no need to provide additional wrappers like it is for colors. I think it is clearer to set the css variables directly in your code.

I identified two more cases where computing derived variables requires extra work:

  • calculations computed in sass (like $level-item-spacing: ($block-spacing / 2) in level.sass), which either have to be redone in CSS using calc or have to be done using js when changing the css variable
  • The percentage function used in columns.sass

But I think it's worthwhile waiting until someone requires this feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants