border-color

The use-design-tokens rule checks that CSS border-color related declarations (border-color, border, outline, outline-color, and their variants) use design token variables instead of hardcoded values. This ensures consistent border-color usage across the application and makes it easier to maintain design system consistency.

Examples of incorrect code for this rule:

.card {
  border-color: #191919;
}

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

.error {
  outline-color: rgba(255 0 0 / 0.25);
}

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

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

.error {
  outline-color: var(--outline-color-error);
}

/* 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-color tokens are allowed */

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

.my-button {
  border: 1px solid var(--my-token);
}

The rule also allows these 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-color: inherit;
}

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

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

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

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

.border-none {
  border: none;
}

.border-zero {
  border: 0;
}

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