v11 Release Candidate 0

[joshblack]

Have you tried out the v11 Release Candidate 0 release and have any feedback? We'd love to hear it! From issues that you might have run into to questions you might have, feel free to post anything release-related here.

Thanks so much for your help! We really appreciate it 🙏

[alexandrutatarciuc]

I am using CDS to build a component library in Blazor and I only utilize your vanilla scss files.
There is an issue I've stumbled upon when upgrading to the newest release. Previously, I was running the beta release for v11.
My style.scss file was importing the themes before the @carbon/styles entry point, so it was looking like this:
@use "../v11-fix/@carbon/styles/scss/themes"; @use "../v11-fix/@carbon/styles";

Everything was working nicely and my style.scss file was getting compiled.
Now, when I do the exact same thing, I get this compilation error

Compilation Error
Error: This module was already loaded, so it can't be configured using "with".
   ┌──> c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix\@carbon\grid\index.scss
8  │   @forward 'scss/modules/config';
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
   ╵
   ┌──> c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix\@carbon\type\scss\modules\_styles.scss
12 │   @use '../../../grid/scss/modules/config'as gridconfig;
   │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
   ╵
   ┌──> c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix\@carbon\styles\scss\grid\_config.scss
9  │ ┌ @forward '../../../grid'
10 │ │ show css-grid,
11 │ │ flex-grid,
12 │ │ $grid-gutter,
13 │ │ $grid-gutter-condensed,
14 │ │ $grid-breakpoints with ($prefix: config.$prefix !default,
15 │ │   $flex-grid-columns: config.$flex-grid-columns !default);
   │ └─────────────────────────────────────────────────────────^ configuration
   ╵
  c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix\@carbon\grid\index.scss 8:1                @forward
  c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix\@carbon\styles\scss\grid\_config.scss 9:1  @forward
  c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix\@carbon\styles\scss\grid\_index.scss 8:1   @forward
  c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix\@carbon\styles\index.scss 10:1             @use
  c:\Users\alta\source\repos\CarbonDesignMinimum\v11-fix-testing\style.scss 2:1                     root stylesheet

P.S. My compiler doesn't understand what @carbon is, therefore I changed the paths to be relative

[joshblack]

Hi there @alexandrutatarciuc! 👋 Are you currently on the RC version or have you updated to the latest 11.x versions?

[alexandrutatarciuc]

Hi there @alexandrutatarciuc! 👋 Are you currently on the RC version or have you updated to the latest 11.x versions?

Thanks for your reply @joshblack. Looks like I was running on a different version (probably 11.x version, even though I didn't install it on purpose. I used npm install @carbon/styles). Now I can import themes before importing all of the styles :) Thank you.

[alexandrutatarciuc]

Carbon has this new approach to using CSS variables and I absolutely love it. However, the component tokens are not declared as CSS variables.

The background color of a primary button uses for a button-primary variable, yet it isn't declared anywhere. Is it done on purpose?

[alexandrutatarciuc]

Looks like the zones do not export component tokens, spacing tokens, etc.
When I use @theme mixin (provided in @carbon/themes/scss/theme) they are included there.

It seems like I miss some fundamental understanding of how you see zones and themes. Can you elaborate on the difference?

Besides that:
How is it possible to override the component tokens based on my own themes?
How can I access component tokens?
Why are component tokens separate from a theme?

[joshblack]

Great point, I made an issue over here to make sure zones emit component tokens by default: #11180

For your follow-up questions, these are great points and I'll take a step back to try and explain how we got to where we are.

How is it possible to override the component tokens based on my own themes?

Great question, at the moment you can only override the component tokens using the component entrypoint. For example, to customize the button tokens you could do the following:

@use '@carbon/styles/scss/components/button' with (
  $button-separator: ...
);

We'll look into extending theme customization so that component tokens are included!

How can I access component tokens?

You can access these from the entrypoints of the components, for example:

@use '@carbon/styles/scss/components/button';

// button.$button-separator

Why are component tokens separate from a theme?

Basically, we run into a problem where if component tokens are defined in the theme then they are included even if a team is not using that component. As we start to grow the number of component tokens we support, this could become problematic over time as the size grows.

Instead, we try and add component tokens to the theme automatically as the component is imported. This allows for the smallest set of custom properties emitted as possible.

Hope this helps! Let me know if you have any other questions.