@createnew/design-token-linter

CLI linter for enforcing token-based design system styling in component source.

It checks CSS plus TypeScript/JavaScript source for hard-coded design values in colors, spacing, sizing, radius, shadows, typography-related properties, media query breakpoints, SVG color attributes, and inline style values.

Install

npm install --save-dev @createnew/design-token-linter

Usage

npx design-token-linter src

Or add it to package.json:

{
  "scripts": {
    "lint:design-tokens": "design-token-linter src",
    "build": "npm run lint:design-tokens && tsc"
  }
}

Multiple paths are supported:

design-token-linter src components styles

If no path is passed, the current directory is linted.

What It Enforces

• Use CSS custom property tokens for design-sensitive CSS values.
• Use breakpoint tokens in media queries.
• Use semantic color tokens instead of direct scale tokens like --color-gray-*.
• Use tokenized SVG fill and stroke values.
• Use tokenized inline style values in TS/TSX/JS/JSX.

Token fallbacks inside var(...) are allowed:

.button {
  padding: var(--spacing-m, 12px);
  color: var(--color-foreground-default, #0d0d12);
}

The same literal as the controlling value fails:

.button {
  padding: 12px;
  color: #0d0d12;
}

Exit Codes

• 0: no issues found.
• 1: one or more design token violations found.