use-box-shadow-tokens

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

Examples of incorrect code for this rule:

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.element {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

Examples of correct token usage for this rule:

.card {
  box-shadow: var(--box-shadow-card);
}

.card-hover {
  box-shadow: var(--box-shadow-card-hover);
}

.level-1-shadow {
  box-shadow: var(--box-shadow-level-1);
}

.level-2-shadow {
  box-shadow: var(--box-shadow-level-2);
}

.level-3-shadow {
  box-shadow: var(--box-shadow-level-3);
}

.level-4-shadow {
  box-shadow: var(--box-shadow-level-4);
}

.popup {
  box-shadow: var(--box-shadow-popup);
}

.tab {
  box-shadow: var(--box-shadow-tab);
}

The rule also allows these non-token values:

.inherited-shadow {
  box-shadow: inherit;
}

.initial-shadow {
  box-shadow: initial;
}

.revert-shadow {
  box-shadow: revert;
}

.revert-layer-shadow {
  box-shadow: revert-layer;
}

.unset-shadow {
  box-shadow: unset;
}

.no-shadow {
  box-shadow: none;
}