color

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

Examples of incorrect code for this rule:

.card {
  color: #191919;
}

.custom-button {
  color: rgba(42 42 42 / 0.15);
}

button:hover {
  color: rgba(0 0 0 / 0.25);
}

.element {
  color: oklch(69% 0.19 15);
}

:root {
  --my-token: blue;
}

.my-button {
  color: var(--my-token, oklch(55% 0.21 15));
}

Examples of correct token usage for this rule:

.card {
  color: var(--text-color);
}

.custom-button {
  color: var(--text-color);
}

button:hover {
  color: var(--text-color);
}

/* You may set a fallback for a token. */

.my-button {
  color: var(--text-color, oklch(55% 0.21 15));
}

/* Local CSS variables that reference valid text-color tokens are allowed */

:root {
  --my-token: var(--text-color);
}

.my-button {
  color: var(--my-token);
}

The rule also allows these non-token values:

.inherited-text-color {
  color: inherit;
}

.initial-text-color {
  color: initial;
}

.revert-text-color {
  color: revert;
}

.revert-layer-text-color {
  color: revert-layer;
}

.unset-text-color {
  color: unset;
}

.current-text-color {
  color: currentColor;
}

.current-text-color {
  color: white;
}

.current-text-color {
  color: black;
}

Autofix functionality

This rule can automatically fix some violations by replacing hex color values with appropriate color names. Examples of autofixable violations:

/* Before */
.a {
  color: #fff;
}

/* After autofix */
.a {
  color: white;
}

/* Before */
.a {
  color: #ffffff;
}

/* After autofix */
.a {
  color: white;
}

/* Before */
.a {
  color: #FFF;
}

/* After autofix */
.a {
  color: white;
}

/* Before */
.a {
  color: #FFFFFF;
}

/* After autofix */
.a {
  color: white;
}

/* Before */
.a {
  color: #000;
}

/* After autofix */
.a {
  color: black;
}

/* Before */
.a {
  color: #000000;
}

/* After autofix */
.a {
  color: black;
}