no-non-semantic-token-usage

This rule checks that design tokens are only used with the appropriate CSS properties. This ensures that that design tokens are not used with unexpected properties, such as a font-size token to set a border-width. This rule allows for variables used with fallback values and variables used in shorthand properties.

Examples of incorrect token usage for this rule:

.card {
  background-color: var(--border-color);
}

.card {
  padding: var(--size-item-small);
}

.card {
  width: var(--space-small);
}

.button {
  border: var(--border-width) solid var(--text-color);
}

:root {
  --local-background-color: var(--text-color);
}

.button {
  background-color: var(--local-background-color);
}

Examples of correct code for this rule:

.card {
  background-color: var(--background-color-canvas);
}

.card {
  background-color: var(--background-color-canvas, #fff);
}

.card {
  background: repeat cover var(--background-color-canvas);
}

.card {
  background: var(--background-color-canvas), #fff;
}

.button {
  border: var(--border-width) solid var(--border-color);
}