Add theme CSS variables validation script

[ryota-murakami]

Summary

テーマCSSファイルが必須のCSS変数を定義しているかを検証するスクリプトを追加する。

Background

現在、14種類のテーマ（src/styles/themes.css および src/styles/themes/ 配下）が存在するが、新規テーマ作成時に必須変数の欠落を検出する仕組みがない。

Current Structure

src/styles/
├── globals.css          # :root と .dark のデフォルト変数
├── themes.css           # 14テーマの変数定義
└── themes/
    ├── light/           # ライトテーマ個別ファイル
    │   ├── sunrise.css
    │   ├── sandstone.css
    │   └── ...
    └── dark/            # ダークテーマ個別ファイル
        ├── midnight.css
        ├── graphite.css
        └── ...

Proposed Solution

1. 検証スクリプトの作成

scripts/validate-themes.ts:

const REQUIRED_THEME_VARIABLES = [
  '--background',
  '--foreground',
  '--card',
  '--card-foreground',
  '--popover',
  '--popover-foreground',
  '--primary',
  '--primary-foreground',
  '--secondary',
  '--secondary-foreground',
  '--muted',
  '--muted-foreground',
  '--accent',
  '--accent-foreground',
  '--destructive',
  '--destructive-foreground',
  '--border',
  '--input',
  '--ring',
  '--theme-accent',  // テーマ固有
] as const

// CSSファイルから変数を抽出し、不足をチェック

2. npm script 追加

{
  "scripts": {
    "validate:themes": "tsx scripts/validate-themes.ts"
  }
}

3. CI統合

build 前または lint と並列で実行:

- name: Validate theme CSS variables
  run: pnpm validate:themes

Expected Output

✅ themes.css - default: All 20 variables defined
✅ themes.css - sunrise: All 20 variables defined
✅ themes.css - midnight: All 20 variables defined
❌ themes/light/new-theme.css: Missing variables:
   - --theme-accent
   - --ring

Error: Theme validation failed

Acceptance Criteria

• scripts/validate-themes.ts が作成されている
• pnpm validate:themes で実行できる
• 不足変数がある場合、exit code 1 で終了
• CI で実行され、テーマ変数の欠落をPRでブロックできる

Related

• Tailwind v4 @theme inline との統合
• 型安全なCSS変数管理の調査結果より