no-base-design-tokens¶
This rule checks that CSS declarations do not use base color token variables directly. Instead, developers should reference higher-level, semantic tokens to ensure color usage is consistent and maintainable.
Examples of incorrect code for this rule:¶
a {
color: var(--color-blue-60);
}
.custom-button {
background-color: var(--color-gray-90);
}
Examples of correct code for this rule:¶
a {
color: var(--text-color-link);
}
:root {
--custom-button-background-color: var(--color-gray-90);
}
.custom-button {
background-color: var(--custom-button-background-color);
}