Open groschi24 opened 4 years ago
Yeah, just realised bulma's utility was expanded by helpers.sass
which is not loaded yet in bulma-css-vars
. I will fix this in the next version, then you can use bulma v0.9 without issues.
Just released v0.5.0, please check if this resolves your issue.
Cheers and happy coding!
just downloaded latest and all colors are still not being generated. IE $scheme-invert
is one that is not currently being generated. That one is kinda of important as it's used for all the borders in bulma by default. I may look dive into the code and see if I can figure it out.
@Tim-Machine $scheme-invert
works for me:
const { rgb } = require('bulma-css-vars')
const appColors = {
'scheme-invert': rgb(255, 123, 100),
}
// module.exports = { ... }
After regenerating and using a modal with a modal-background
to cover the page, it tints everything in a nice red.
I also could find the variable being used on the modal background in the browser devtools:
.modal-background {
background-color: var(--scheme-invert--86--rgba);
}
:root {
--scheme-invert--10--rgba: rgba(255, 123, 100, 0.1);
--scheme-invert--2--rgba: rgba(255, 123, 100, 0.02);
--scheme-invert--20--rgba: rgba(255, 123, 100, 0.2);
--scheme-invert--30--rgba: rgba(255, 123, 100, 0.3);
--scheme-invert--40--rgba: rgba(255, 123, 100, 0.4);
--scheme-invert--5--rgba: rgba(255, 123, 100, 0.05);
--scheme-invert--86--rgba: rgba(255, 123, 100, 0.86);
}
Notice that most scheme-invert
variables are quite transparent, .modal-background
being the only one having a value over 0.4.
Maybe you can create a small reproduction of your error on github so I can have a look at it?
@wtho I made this mistake of assuming that if i set "schema-main" that the invert would also be generated, but it seems to only be generated when its defined in the app-colors.
Only whichever colors you want to be variables, will also be variables.
@groschi24 is your issue resolved?
Hi,
I am facing the same problem. I have made a workaround by having a dummy CSS class:
.white-labeling-variables {
color: $primary-theme;
color: lighten($primary-theme, 20%);
color: darken($primary-theme, 10%);
color: darken($primary-theme, 20%);
color: $secondary-theme;
...
Hi @wtho,
What if I want a variable whose value is dependent of a generated variable? For example, I'd like to override bulma's default link hover color. In sass I'd do something like this:
// Import Bulma's core
@import '~bulma/sass/utilities/_all';
// Override values not dependent on initial variables
// Links
$link-hover: $link-dark;
How can I go about this with bulma-css-vars
, since in bulma-css-vars.config.js
I cannot do:
// ...
appColors.link = appColors.primary;
appColors['link-hover'] = /* here I don't have a variable for $link-dark yet */
For now, what I do is just create a variable with any value:
// ...
appColors.link = appColors.primary;
appColors['link-hover'] = appColors.primary // or whatever
and then in main.scss
:
@import './src/bulma-generated/generated-fallback.scss';
@import './src/bulma-generated/generated-bulma-vars.sass';
@import './node_modules/bulma-css-vars/bulma-cv-lib';
:root {
--link-hover: var(--link--dark-color);
}
but I wonder if there's a better or recommended way.
@dalvallana you should be fine by just declaring the variable in bulma-css-vars.config.js
:
const appColors = {
// your other colors
// ...
'link-hover': hsl(50, 50, 96),
}
module.exports = {
colorDefs: appColors,
// ...
}
When I generate the files from my config not all colors are in the generated files.
Config file:
Output:
So I add
black
black-bis
black-ter
but onlyblack
gets generated andgrey-darker
works