Not generating all color values

[groschi24]

When I generate the files from my config not all colors are in the generated files.

Config file:

const { hsl } = require('bulma-css-vars');

const appColors = {
  black: hsl(0, 0, 4),
  'black-bis': hsl(0, 0, 7),
  'black-ter': hsl(0, 0, 14),
  'grey-darker': '#8a8f9c',
};

module.exports = {
  jsOutputFile: 'src/bulma-generated/bulma-colors.js',
  sassOutputFile: 'src/bulma-generated/generated-bulma-vars.sass',
  cssFallbackOutputFile: 'src/bulma-generated/generated-fallback.css',
  colorDefs: appColors,
  sassEntryFile: 'src/main.scss',
  transition: '0.3s ease',
};

Output:

module.exports = {
  "bulmaCssVariablesDefs": {
    "black": {
      "calls": [
        {
          "fn": "rgba",
          "fnArg": "10",
          "composeArg": null
        },
        {
          "fn": "rgba",
          "fnArg": "2",
          "composeArg": null
        },
        {
          "fn": "rgba",
          "fnArg": "20",
          "composeArg": null
        },
        {
          "fn": "rgba",
          "fnArg": "5",
          "composeArg": null
        },
        {
          "fn": "lighten",
          "fnArg": "800",
          "composeArg": null
        }
      ]
    },
    "grey-darker": {
      "calls": [
        {
          "fn": "lighten",
          "fnArg": "800",
          "composeArg": null
        },
        {
          "fn": "color-invert",
          "fnArg": null,
          "composeArg": null
        }
      ]
    }
  }
}

So I add black black-bis black-ter but only black gets generated and grey-darker works

[wtho]

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.

[wtho]

Just released v0.5.0, please check if this resolves your issue.

Cheers and happy coding!

[Tim-Machine]

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.

[wtho]

@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?

[Tim-Machine]

@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.

[wtho]

Only whichever colors you want to be variables, will also be variables.

@groschi24 is your issue resolved?

[matthiasbrix]

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;
  ...

[dalvallana]

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.

[wtho]

@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,
  // ...
}