Design System Linter

[RemyMachado]

When exporting the theme, we have certain variables restrictions.

For instance Tailwind allows by default:
[--radius-xs, --radius-4xl]

However, Tweakcn might only export these vars:
[--radius-sm, --radius-xl].

This has a direct impact on the Tailwind utilities we use:

rounded-xs -> border-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-sm -> border-radius: var(--radius-sm); /* 0.25rem (4px) */

It makes sense since fewer choices = more consistent UI.

However, how do we enforce these rules in our linter to only allow using the theme's variables?
Using rounded-xs should be forbidden since --radius-xs is not part of the theme.

Currently, I'm about to manually define the rules one by one in Eslint with an allow/forbid list, but I was curious to hear if you had a more adequate solution.