[Question]: How can I set the $base-font-size property with theming?

[fegyi001]

Question for Carbon

I'm trying to fine-tune carbon styles in my (angular) app. However, I'm unable to override the default 16px font size. I would like to set it to 14px.

When I try to use @carbon/layout and modify it like so (as mentioned in the docs):

@use 'carbon-components/scss/themes';
@use 'carbon-components/scss/theme' with (
  $fallback: themes.$g10,
  $theme: (),
);

@use '@carbon/layout' with (
  $base-font-size: 14px
);

I get the following error: This module was already loaded, so it can't be configured using "with".

Is it possible to set the theme so that it accepts my overridden value?

Thanks in advance!

Code of Conduct

• I agree to follow this project's Code of Conduct

[tw15egan]

Can you do @use '@carbon/layout/scss/convert' with ($base-font-size: 14px); before the theme import? Any Stackblitz example would also help debugging. Here is a previous in-depth example of some custom theming: https://stackblitz.com/edit/github-hf5kjr-t9xs4w?file=src%2Findex.scss

[Yaren-IT]

Based on the code snippet you shared, it appears that you're on the right path. However, since a previous @use directive has already imported @carbon/layout, there's a conflict that needs to be addressed. To tackle this, you should adjust the order of your code like this:

// Import the @carbon/layout directive before @carbon/themes
@use '@carbon/layout' with (
  $base-font-size: 14px
);

@use 'carbon-components/scss/themes';
@use 'carbon-components/scss/theme' with (
  $fallback: themes.$g10,
  $theme: (),
);

// Continue with your previous @use directives and other styling rules...

[tay1orjones]

Additionally, the layout module can be accessed through carbon-components itself which can help with these config issues.

@use 'carbon-components/scss/layout' with (
  $base-font-size: 14px
);
@use 'carbon-components/scss/themes';
@use 'carbon-components/scss/theme' with (
  $fallback: themes.$g10,
  $theme: (),
);

These options should resolve the issue, please open a new issue if not. Thank you