use-border-color-tokens

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

Examples of incorrect code for this rule:

.card {
  border-color: #191919;
}

.custom-button {
  border: 3px dashed rgba(42 42 42 / 0.15);
}

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

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

.my-button {
  border: 1px solid var(--my-token, oklch(55% 0.21 15));
}

Examples of correct token usage for this rule:

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

.custom-button {
  border: 3px dashed var(--border-color);
}

button:hover {
  outline-color: --outline-color;
}

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

.my-button {
  border: 1px solid var(--border-color, oklch(55% 0.21 15));
}

/* Local CSS variables that reference valid border-radius tokens are allowed */

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

.my-button {
  border: 1px solid var(--my-token, oklch(55% 0.21 15));
}

The rule also allows these values non-token values:

.transparent-border-color {
  border-color: transparent;
}

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

.white-border-color {
  border-color: white;
}

.black-border-color {
  border-color: black;
}

.inherited-border-color{
  border-colors: inherit;
}

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

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

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

Autofix functionality

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

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

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

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

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

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

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

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

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

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

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

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

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