blueprint: Unable to override default colors (e.g. `$blue2`) with node-sass or dart-sass in v4

I think we need to change to the @use syntax described in https://sass-lang.com/documentation/variables#configuring-modules.

I was able to use this with partial success:

@use '@blueprintjs/core/src/blueprint' with (
    $pt-font-size: 16px,
    $pt-font-size-large: 18px,
    $pt-font-size-small: 14px,
    $pt-app-background-color: #e8e8e8,
    $pt-intent-primary: #0088ce
);

It successfully changes the font sizes, but not the colors.

@adidahiya I have the same problem, that my intent-overrides don’t work anymore and I’ve tried making the @use syntax work for multiple hours now without success. It seems to completely ignore those overrides and start the app with the default colors. I’ve read all the other issues and I know about the dart-sass breaking change, switched the compiling of the scss files to dart-sass as well with no success.

For color-theming, all you basically need is the ability to override the different intent and text colors, so basically the content of the _content-aliases.scss file. This would probably fit the needs for most people.

We really like blueprint as a foundation but since color overriding is broken for us now in version 4 and probably going forward we will have to switch away from it.

Going through the issues showed that there’s definetely a need for themeing. With a couple more intents (like for example bootstrap has) it should in theory be really easy to make themeing something that everybody can use without a huge hassle in terms of maintenance.

Regarding ideas how to make this available, why not give us a wrapper like <Theme /> which we can wrap around our whole application where you can set certain colors and stuff via properties.

While css variables would be easier on end-users to override, I imagine it would be challenging to migrate to given the amount of sass math/operations that are happening with sass variables currently in blueprintjs. You cannot call sass methods using css variables, so the team would have to decide what variables are safe to expose at the surface level versus what variables remain internal (and thus usable in sass calculation operations).

I get the following error attempting to override the colors using scss:

Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: (path: (fill: #5f6b7c)) isn't a valid CSS value.
   ╷
39 │       background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));

In order to compile Blueprint’s scss, you must copy blueprint’s resource/icons folder to a path local to your repo, and setup your bundler with the svg-icon function. There are instructions here if you use webpack: https://blueprintjs.com/docs/#core/classes.namespacing

If you use Vite as your bundler, here is an example:

export default defineConfig(config => {
  return {
    ...
    css: {
      preprocessorOptions: {
        scss: {
          functions: {
            "svg-icon($path, $selectors: null)": inliner(
              join(__dirname, "path/to/resources/icons"),
              { optimize: true, encodingFormat: "uri" }
            )
          }
        }
      },
    },
  };
});

any thoughts on maybe using css variables instead of sass variables?

That would be a pretty large change to our Sass code and tooling. I’m generally open to exploring various technical options to accomplish an API goal like theming in Blueprint, but I’d need to see a proposal about how this would work, what code would need to change in Blueprint, how much of a breaking change it is, how we would migrate Blueprint user code, etc.

@adidahiya any thoughts on maybe using css variables instead of sass variables?