design-token-enforcementlisted

## Goal / 目的 - フロントエンド差分においてデザイントークンを使わず生の値をハードコードしている箇所を検出する。 - Figma Variables / Tailwind config / CSS custom properties などトークンシステムが存在するプロジェクトで、規約違反の実装を早期に指摘する。 - 「直し方」まで提示し、修正コストを最小化する。 ## Non-goals / 扱わないこと - デザイントークンシステム自体の設計・命名規則の議論。 - Figma ファイルと実装の完全な同期チェック（別の CI/CD 統合が担う領域）。 - トークンの意味論的な正しさ（例: セマンティックトークン vs プリミティブトークン）の判定。 - テストファイル・Storybook ファイルの厳密なチェック（警告のみ）。 ## False-positive guards / 抑制条件 - Tailwind ユーティリティクラス (`bg-blue-500`, `p-4`, `text-sm`, `rounded-lg` など) はトークンシステムの一部であるため指摘しない。 - CSS カスタムプロパティの参照 (`var(--color-primary)`, `var(--spacing-md)`) は違反ではない。 - Tailwind の `theme()` 関数 / トークン参照関数 (`tokens.spacing.md`, `theme('colors.primary')`) は違反ではない。 - テンプレートリテラル内に変数を含むインラインスタイル (``style={{ color: `${brandColor}` }}``) は動的計算の可能性があるため "uncertain" として示す（finding ではない）。 - テストファイル (`*.test.tsx`, `*.spec.tsx`, `*.stories.tsx`) は lenient モードで扱い、明確な問題のみ指摘する。 - `0` / `100%` / `transparent` / `inherit` / `currentColor` などの CSS 予約値はトークン違反としない。 ## Rules / ルール ### 1. 色のハードコード - className / style prop / CSS / SCSS に `#XXXXXX`, `#XXX`, `rgb(...)`, `rgba(...)`, `hsl(...)`, `hsla(...)` を生で書いている場合は違反。 - 例: `style={{ color: '#3B82F6' }}`, `background-color: rgb(59, 130, 246)` ### 2. Tailwind 任意値による余白のハードコード - Tailwind の arbitrary values (`p-[16px]`, `gap-[8px]`, `mt-[24px]`, `mx-[1.5rem]` など) は、Tailwind config / デザイントークンに対応するスケール値がある場合に違反。 - `p-4` / `gap-2` などの標準クラスへの置き換えを提案する。 ### 3. フォントサイズのハードコード - `style={{ fontSize: '14px' }}`, `font-size: 14px`, `fontSize: 14` など