Design token value map

[blackfalcon]

Is your feature request related to a problem? Please describe.

Switching a theme should be as easy as swapping out one design token lib for another. The problem is that the SCSS for the auro-button element's SCSS uses tokens directly as the value per CSS property.

  // auro-button--tertiary
  &--tertiary {
    background-color: var(--auro-color-background-lighter);
    border-color: var(--auro-color-ui-default-on-light);
    box-shadow: inset 0 0 0 3px var(--auro-color-ui-default-on-light);
  }

Describe the solution you'd like

A proposed solution is to create a mapping from any pre-defined list of design tokens to a more generic set of values. A possible solution is to use fallback values.

  // auro-button--tertiary
  &--tertiary {
    background-color: var(--auro-color-background-lighter, var(--airstream-color-background-lighter));
    border-color: var(--auro-color-ui-default-on-light, var(--airstream-color-ui-default-on-light));
    box-shadow: inset 0 0 0 3px var(--auro-color-ui-default-on-light, var(--airstream-color-ui-default-on-light));
  }

While this simplifies the addition of the different themes, this also means that we need to update individual element SCSS if there are changes.

Another way to consider this is to have a single map.scss file that uses a fallback method to redefine the value of generically used tokens. It is also recommended that the mapping of these values is not contained per custom element. This should be a global resource that is subscribed to.

It is assumed that we could create this from the tokens repo.

:root {
  --color-background-lighter: var(--auro-color-background-lighter, var(--airstream-color-background-lighter))
  --color-ui-default-on-light: var(--auro-color-ui-default-on-light, var(--airstream-color-ui-default-on-light))
}

Then the SCSS would be the following.

  // auro-button--tertiary
  &--tertiary {
    background-color: var(--color-background-lighter);
    border-color: var(--color-ui-default-on-light);
  }

Exit criteria

For this issue to be closed, a user must be able to subscribe to an alternate set of design tokens and HTML custom elements within the scope of that project will change themes based on those tokens.

Dependency

• Dark mode design tokens #88

[leeejune]

Link to ITS -> Auro Design Token Mapping

[jordanjones243]

After discussion with @jason-capsule42, we feel as though auro-input would be a better component to use for design token value mapping. The reason behind this is that auro-button is an older component that uses the imports for Sass properties and variables to build out a CSS variable file. While auro-input directly imports the Custom CSS tokens directly onto its demo page, easily allowing for us to switch between this import and any other theming imports with simple JS.

[jordanjones243]

Refer to this new ticket in auro-input to continue the design token value mapping discussion:

• POC: theme switcher auro-input#224