Source code
Revision control
Copy as Markdown
Other Tools
# no-base-design-tokens
This rule checks that CSS declarations do not use [base color token variables](https://acorn.firefox.com/latest/desktop/design-tokens/how-design-tokens-work/overview-YYp6MVjt#section-base-a3)
directly. Instead, developers should reference higher-level, semantic tokens to
ensure color usage is consistent and maintainable.
## Examples of incorrect code for this rule
```css
a {
color: var(--color-blue-60);
}
```
```css
.custom-button {
background-color: var(--color-gray-90);
}
```
## Examples of correct code for this rule
```css
a {
color: var(--text-color-link);
}
```
```css
:root {
--custom-button-background-color: var(--color-gray-90);
}
.custom-button {
background-color: var(--custom-button-background-color);
}
```