[Bug]: Can't override type-styles tokens

Package

@carbon/react, @carbon/type

Browser

Chrome, Firefox, Edge

Package version

1.14

React version

18.2.0

Description

Hello!

I’m currently trying to override the type styles with our own values, but that doesn’t work…

I’ve trued overriding the tokens directly but it throws an error, here is the example:

@use './theme/type-style.scss' as custom-type-style;

@use '@carbon/type/scss/_styles.scss' with (
  $body-compact-01: custom-type-style.$body-compact-01,
  $body-compact-02: custom-type-style.$body-compact-02,
  $body-01: custom-type-style.$body-01,
  $body-02: custom-type-style.$body-02,
  $code-01: custom-type-style.$code-01,
  $code-02: custom-type-style.$code-02,
  $label-01: custom-type-style.$label-01,
  $label-02: custom-type-style.$label-02,
  $helper-text-01: custom-type-style.$helper-text-01,
  $helper-text-02: custom-type-style.$helper-text-02,
  $legal-01: custom-type-style.$legal-01,
  $legal-02: custom-type-style.$legal-02,
  $heading-compact-01: custom-type-style.$heading-compact-01,
  $heading-compact-02: custom-type-style.$heading-compact-02,
  $heading-01: custom-type-style.$heading-01,
  $heading-02: custom-type-style.$heading-02,
  $heading-03: custom-type-style.$heading-03,
  $heading-04: custom-type-style.$heading-04,
  $heading-05: custom-type-style.$heading-05,
  $heading-06: custom-type-style.$heading-06,
  $heading-07: custom-type-style.$heading-07,
  $fluid-heading-03: custom-type-style.$fluid-heading-03,
  $fluid-heading-04: custom-type-style.$fluid-heading-04,
  $fluid-heading-05: custom-type-style.$fluid-heading-05,
  $fluid-heading-06: custom-type-style.$fluid-heading-06,
  $fluid-paragraph-01: custom-type-style.$fluid-paragraph-01,
  $fluid-quotation-01: custom-type-style.$fluid-quotation-01,
  $fluid-quotation-02: custom-type-style.$fluid-quotation-02,
  $fluid-display-01: custom-type-style.$fluid-display-01,
  $fluid-display-02: custom-type-style.$fluid-display-02,
  $fluid-display-03: custom-type-style.$fluid-display-03,
  $fluid-display-04: custom-type-style.$fluid-display-04,
);

Where the type-style.scss define the values of the type styles:

$body-01: (
  font-size: 0.875rem,
  font-weight: map.get($font-weights, 'regular'),
  line-height: 1.25rem,
  letter-spacing: 0.16px,
);

The error I get is the following one:

ERROR in ./src/custom.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/custom.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: This module was already loaded, so it can't be configured using "with".
   ┌──> node_modules\@carbon\styles\scss\_config.scss
70 │ ┌ @forward '@carbon/grid/scss/config' hide $prefix,
71 │ │   $flex-grid-columns with (
72 │ │     $prefix: $prefix,
73 │ │     $flex-grid-columns: $flex-grid-columns
74 │ │   );
   │ └───^ new load
   ╵
   ┌──> node_modules\@carbon\type\scss\_styles.scss
12 │   @use '@carbon/grid/scss/config' as gridconfig;
   │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
   ╵
  node_modules\@carbon\styles\scss\_config.scss 70:1  @forward
  node_modules\@carbon\styles\index.scss 8:1          @forward
  node_modules\@carbon\react\index.scss 9:1           @use
  src\custom.scss 86:1                                root stylesheet

It seems like a conflict between the type styles and carbon/react, but I don’t know to fix it or override it.

I’ve applied the same pattern in the font-family and it worked just fine.

@use './theme/type-family.scss' as custom-type-family;

@use '@carbon/type/scss/_font-family.scss' with (
  $font-families: custom-type-family.$type-family
);

I’ve also tried to apply the changes at a custom theme, but it didn’t work as well, here is the example:

$custom: (
  body-compact-01: custom-type-style.$body-compact-01,
  body-compact-02: custom-type-style.$body-compact-02,
  body-01: custom-type-style.$body-01,
  body-02: custom-type-style.$body-02,
  code-01: custom-type-style.$code-01,
  code-02: custom-type-style.$code-02,
  label-01: custom-type-style.$label-01,
  label-02: custom-type-style.$label-02,
  helper-text-01: custom-type-style.$helper-text-01,
  helper-text-02: custom-type-style.$helper-text-02,
  legal-01: custom-type-style.$legal-01,
  legal-02: custom-type-style.$legal-02,
  heading-compact-01: custom-type-style.$heading-compact-01,
  heading-compact-02: custom-type-style.$heading-compact-02,
  heading-01: custom-type-style.$heading-01,
  heading-02: custom-type-style.$heading-02,
  heading-03: custom-type-style.$heading-03,
  heading-04: custom-type-style.$heading-04,
  heading-05: custom-type-style.$heading-05,
  heading-06: custom-type-style.$heading-06,
  heading-07: custom-type-style.$heading-07,
  fluid-heading-03: custom-type-style.$fluid-heading-03,
  fluid-heading-04: custom-type-style.$fluid-heading-04,
  fluid-heading-05: custom-type-style.$fluid-heading-05,
  fluid-heading-06: custom-type-style.$fluid-heading-06,
  fluid-paragraph-01: custom-type-style.$fluid-paragraph-01,
  fluid-quotation-01: custom-type-style.$fluid-quotation-01,
  fluid-quotation-02: custom-type-style.$fluid-quotation-02,
  fluid-display-01: custom-type-style.$fluid-display-01,
  fluid-display-02: custom-type-style.$fluid-display-02,
  fluid-display-03: custom-type-style.$fluid-display-03,
  fluid-display-04: custom-type-style.$fluid-display-04,
);

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with (
  $fallback: themes.$white,
  $theme: $custom
);

@use '@carbon/react';

:root {
  @include theme.theme();
}

Is there a way to add these tokens at the theme?

Can somebody please help me?

Suggested Severity

Severity 1 = Must be fixed ASAP. The response must be swift. Someone from the team must drop all current work and be immediately reassigned to address the issue.

Reproduction/example

https://stackblitz.com/edit/github-ufdyjn?file=src%2Fmain.jsx,src%2Findex.scss

Steps to reproduce

The issue is already reproduced on the link above.

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems

[mgaseta]

Oh, I see, so the !default flag fix probably works!

Sorry, I didn’t notice the the question was for the carbon-design-system/design group 😃 .

[aagonzales]

For IBM products and experiences the type of tokens should NEVER be modified expect at the system level. However, external or third parties are allowed to modify them to fit their needs/brand.