use-text-color-tokens

This rule checks that CSS declarations use text-color design token variables instead of hard-coded values. This ensures consistent text-color across the application and makes it easier to maintain design system adoption.

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

: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: --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, oklch(55% 0.21 15));
}

The rule also allows these values non-token values:

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

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

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

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