size

The use-design-tokens rule checks that CSS size-related property declarations use design token variables instead of hardcoded values. This ensures consistent sizing across the application and makes it easier to maintain design system consistency.

This rule applies to the following properties:

width, min-width, max-width
height, min-height, max-height
inline-size, min-inline-size, max-inline-size
block-size, min-block-size, max-block-size
background-size
inset and all of its longhand properties
Positioning attributes: left, right, top, and bottom

Note that the following properties accept both space and size tokens:

inset and all of its longhand properties
Positioning attributes: left, right, top, and bottom

Use size tokens when these properties represent element dimensions, and space tokens when they represent spacing/positioning offsets.

Examples of incorrect code 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 token usage for this rule:

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

.button {
  height: var(--size-item-xsmall);
}

.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);
}

.positioned-element {
  inset: var(--size-item-large);
}

.positioned-element {
  top: var(--size-item-medium);
  left: var(--size-item-small);
}

The rule also allows these non-token values:

.button {
  width: 100%;
}

.button {
  width: auto;
}

.icon {
  max-height: 2em;
}

.container {
  height: 100vh;
}

.sidebar {
  width: 50vw;
}

.element {
  width: fit-content;
}

.element {
  width: min-content;
}

.element {
  width: max-content;
}

.element {
  width: 0;
}

.element {
  width: none;
}

Autofix functionality

This rule can automatically fix some violations by replacing raw size values with appropriate size tokens. Examples of autofixable violations:

/* Before */
.a {
  height: 0.75rem;
}

/* After autofix */
.a {
  height: var(--size-item-xsmall);
}

/* Before */
.a {
  width: 1rem;
}

/* After autofix */
.a {
  width: var(--size-item-small);
}

/* Before */
.a {
  max-inline-size: calc(16px + 32px);
}

/* After autofix */
.a {
  max-inline-size: calc(var(--size-item-small) + var(--size-item-large));
}