border-radius

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

Examples of incorrect code for this rule:

.custom-button {
  border-radius: 0.5rem;
}

.card {
  border-radius: 8px;
}

.avatar {
  border-radius: 50%;
}

Examples of correct token usage for this rule:

.custom-button {
  border-radius: var(--border-radius-small);
}

.custom-button {
  border-radius: var(--border-radius-medium);
}

.custom-button {
  border-radius: var(--border-radius-circle);
}

.custom-button {
  border-radius: var(--border-radius-large);
}

/* Local CSS variables that reference valid border-radius tokens are allowed */
:root {
  --custom-border-radius: var(--border-radius-small);
}

.custom-button {
  border-radius: var(--custom-border-radius);
}

.custom-button {
  border-radius: var(--custom-border-radius, --border-radius-small);
}

The rule also allows these values non-token values:

.no-radius {
  border-radius: 0;
}

.inherited-radius {
  border-radius: inherit;
}

.unset-radius {
  border-radius: unset;
}

.initial-radius {
  border-radius: initial;
}

Autofix functionality

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

/* Before */
.a {
  border-radius: 50%;
}

/* After autofix */
.a {
  border-radius: var(--border-radius-circle);
}

/* Before */
.a {
  border-radius: 100%;
}

/* After autofix */
.a {
  border-radius: var(--border-radius-circle);
}

/* Before */
.a {
  border-radius: 1000px;
}

/* After autofix */
.a {
  border-radius: var(--border-radius-circle);
}

/* Before */
.a {
  border-radius: 4px;
}

/* After autofix */
.a {
  border-radius: var(--border-radius-small);
}

/* Before */
.a {
  border-radius: 8px;
}

/* After autofix */
.a {
  border-radius: var(--border-radius-medium);
}

/* Before */
.a {
  border-radius: 16px;
}

/* After autofix */
.a {
  border-radius: var(--border-radius-large);
}

/* Before */
.a {
  border-radius: 4px 8px;
}

/* After autofix */
.a {
  border-radius: var(--border-radius-small) var(--border-radius-medium);
}