use-size-tokens

This rule checks that CSS declarations use size design token variables instead of hardcoded values.

Examples of incorrect token usage for this rule:

.card {
  min-width: 48px;
}

.button {
  height: 0.75rem;
}

.icon {
  width: 20px;
}

.icon {
  width: calc(2 * 16px);
}

:root {
  --local-size: 24px;
}

.button {
  min-height: var(--local-size);
}

Examples of correct code for this rule:

.card {
  min-width: var(--size-item-large);
}

.button {
  height: var(--button-min-height);
}

.icon {
  width: var(--icon-size-medium);
}

.icon {
  width: var(--icon-size-medium, 28px);
}

.icon {
  width: calc(2 * var(--icon-size-medium));
}

.icon {
  width: calc(2 * var(--icon-size-medium, 28px));
}

:root {
  --local-size: var(--size-item-small);
}

.button {
  min-height: var(--local-size);
}

.button {
  width: 100%;
}

.button {
  width: auto;
}

.icon {
  max-height: 2em;
}