Component Token Refactor

[joshblack]

This issue tracks the work needed to refactor how we offer component tokens in v11. In v10, we offer minimal support for this in two ways:

• Static Sass Variables that could be overridden,
• Sass Variables whose value changed depending on the current theme (notification, tag)

The structure used for representing component tokens whose values changed based on the theme was:

$tokens: (
  token-name: (
    // Fallback used if no theme could be detected that matched
    fallback: value,
    values: (
      (
        theme: $theme-value,
        value: value,
      )
    ),
  ),
);

In v11, we would like to stabilize support for component tokens while keeping existing functionality. As a result, this work has the following requirements:

• Configurable through @use 'mod' with ...;
• Token values can be added as CSS Custom Properties to support inline theming / zoning / etc

Some examples of intended usage for the notification and button components:

// entrypoint
@use '@carbon/styles' with (
  notification-background-error: $custom-red,
  button-primary: $custom-color
);

// component entrypoint
@use '@carbon/styles/scss/components/notification' with (
  background-error: $custom-red,
);
@use '@carbon/styles/scss/components/button' with (
  primary: $custom-color,
);

@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme';
@use '@carbon/styles/scss/components/notification';

// Theming
.light-mode {
  @include theme.theme();
}

.dark-mode {
  @include theme.theme(themes.$g100);
}

Explorations

• https://www.sassmeister.com/gist/123b79c97cd7b170890b3f2e23f9e4a6