Can you create your own tokens that works with themes?

[jeppetn]

Hi,

I am in a situation where I would like to create my own tokens. These tokens should also work with the different themes like g10 and g90.

From Github and carbon's documentation site I only found some article describing how to change existing tokens. But I would like to create my own.

Is it possible to create your own tokens, for example color tokens, and make them support the different themes?

If possible how would I do that?

Best regards,
Jeppe

[DenisCor]

yes you can create custom tokens

[tay1orjones]

Yes to add custom tokens to multiple existing themes, you'll need to merge your own custom tokens into the existing theme maps before invoking the theme() mixin.

We don't yet have an example of this, but it could look like the following:

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme';
@use '@carbon/react';

// Define custom token maps for each theme
$g10-custom-tokens: (
  custom-token-1: #000,
  custom-token-2: #000
);

$g100-custom-tokens: (
  custom-token-1: #fff,
  custom-token-2: #fff
);

// Merge the custom tokens into the existing theme maps
$g10: utilities.merge(
  themes.$g10
  $g10-custom-tokens
);

$g100: utilities.merge(
  themes.$g100
  $g100-custom-tokens
);

// Emit the theme styles including the custom tokens
:root {
  @include theme.theme($g10);
}

.cds--g100 {
  @include theme.theme($g100);
}

[jeppetn]

Thanks for the explanation and example! :)