ESLint Plugin

sitka-tokens ESLint plugin enforces token usage over hardcoded hex colors, spacing values, border radii, and shadows. Keeps your codebase strictly on-brand.

Installation

npm install -D eslint-plugin-sitka-tokens
# or
yarn add -D eslint-plugin-sitka-tokens

Configuration

Add to your ESLint flat config (eslint.config.mjs or eslint.config.js):

import { defineConfig } from 'eslint/config';
import sitkaTokens from 'eslint-plugin-sitka-tokens';

export default defineConfig([
  // ...other configs
  sitkaTokens.configs.recommended,
]);

Rules

sitka-tokens/token-usage

Disallows hardcoded hex colors, px spacing, border-radius values, and shadow strings that don't match Sitka tokens.

// ❌ Bad
.button {
  background-color: #00c0e8; // ✗ Hardcoded
  border-radius: 10px;        // ✗ Not a Sitka token
  box-shadow: 0 4px 16px rgba(0,0,0,0.08); // ✗
}

// ✅ Good
.button {
  background-color: rgb(var(--accent));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

Options

{
  "plugins": ["sitka-tokens"],
  "rules": {
    "sitka-tokens/token-usage": ["error", {
      "allowFallback": false,     // Permit CSS custom properties for dynamic values
      "tokenPath": "@/tokens/tokens.json"  // Path to token definition file
    }]
  }
}

Works with husky + lint-staged

Add the plugin to your pre-commit hooks to prevent hardcoded values from entering the codebase:

// package.json scripts
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix"]
  }
}