feat: establish design token source of truth

[Arata1202]

概要

Web本体とFigmaでデザイントークンを二重管理しないため、design-tokens.jsonを共有ビジュアル値の唯一の定義元として導入しました。

主な変更

• primitive / semantic / componentの3層でトークンを整理
• primitiveとsemanticのCSS名前空間を分離し、衝突を生成時に検出
• Web用CSS変数・semantic utility・Figma用データを同じJSONから生成
• Tailwindレシピに残っていた色・角丸・影・motionの二重管理を解消
• ライト／ダーク双方の本文色をWCAG AAコントラストで生成時検証
• JSON Schemaと実行時バリデーションを内部構造まで強化
• dev / build前の自動生成とCIの整合性チェックを追加
• Figmaで現行スタイルを更新し、削除・改名済みの管理対象スタイルを整理
• Figmaのトークン一覧フレーム重複、誤ったtypography参照、定義元表記を修正
• WebとFigmaのフォントをGeistへ統一
• TabBoxの共通状態色をcomponent tokenへ移行
• 設計方針と運用手順を文書化

影響

• Figmaへの反映はプラグインの手動実行が必要です
• 既存レイアウトや機能は維持します
• 通常文字のアクセシビリティ確保のため、secondary / subtleテキスト色をWCAG AA準拠の値へ調整します
• 旧Figmaプラグインが作成したColor/*互換スタイルは実行時に整理されます

検証

• Design token生成・整合性チェック
• CSSカスタムプロパティ重複なし
• WCAG AAコントラスト検証
• ESLint
• TypeScript
• Unit Test: 64 files / 223 tests
• Playwright E2E: 38 tests
• E2E用production build: 48 pages
• Go tests
• Gitleaks

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
api-next-blog-app	Ignored		Aug 3, 2026 1:58pm

[cloudflare-workers-and-pages]

Deploying next-blog-app with    Cloudflare Pages

Latest commit:	b613a88
Status:	✅  Deploy successful!
Preview URL:	https://96ce93f5.next-blog-app-8ai.pages.dev
Branch Preview URL:	https://feat-design-token-sync.next-blog-app-8ai.pages.dev

View logs