use-font-weight-tokens

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

This rule is autofixable and can automatically replace some font-weight values with appropriate design tokens where possible.

Examples of incorrect code for this rule:

.normal-text {
  font-weight: normal;
}

.bold-text {
  font-weight: bold;
}

.bolder-text {
  font-weight: bolder;
}

.lighter-text {
  font-weight: lighter;
}

.custom-text {
  font-weight: 400;
}

.heading {
  font-weight: 600;
}

.bold-text {
  font-weight: 700;
}

.light-text {
  font-weight: 300;
}

.heavy-text {
  font-weight: 900;
}

Examples of correct token usage for this rule:

.normal-text {
  font-weight: var(--font-weight);
}

.bold-text {
  font-weight: var(--font-weight-bold);
}

.button-text {
  font-weight: var(--button-font-weight);
}

.heading-text {
  font-weight: var(--heading-font-weight);
}

/* Local CSS variables that reference valid font-weight tokens are allowed */
:root {
  --custom-font-weight: var(--font-weight-bold);
}

.custom-text {
  font-weight: var(--custom-font-weight);
}

.custom-text {
  font-weight: var(--custom-font-weight, var(--font-weight-bold));
}

The rule also allows these non-token values:

.inherited-text {
  font-weight: inherit;
}

.initial-text {
  font-weight: initial;
}

.unset-text {
  font-weight: unset;
}

Autofix functionality

This rule can automatically fix some violations by replacing values with appropriate design tokens:

• normal → var(--font-weight)

• 600 → var(--font-weight-bold)

Examples of autofixable violations:

/* Before */
.normal-text {
  font-weight: normal;
}

/* After autofix */
.normal-text {
  font-weight: var(--font-weight);
}

/* Before */
.bold-text {
  font-weight: 600;
}

/* After autofix */
.bold-text {
  font-weight: var(--font-weight-bold);
}