デザイントークン＆テーマ設定（Color / Typography / Spacing / Radius）

[tanapl]

一行説明

FoR のデザイントークン（Semantic Color / Typography / Spacing）を shadcn/ui の Theme（CSS Variables）へマッピングし、全コンポーネント実装の土台を整える。

詳細

• shadcn/ui 前提の CSS Variables を FoR の Semantic Color に合わせて定義する
• Typography（Zen Kaku Gothic New / Roboto、UIサイズ、line-height 130%）をユーティリティ化する
• Spacing scale（0,2,4,6,8,12,16,20,24,28,32,40px）を運用ルール込みで整備する
• Theme を使って代表コンポーネント（Button 等）で反映確認する
• Icon は一旦 lucide-react を placeholder として採用する

要件

• Semantic Color（Text/Background/Stroke/Button/VisualAccent）を CSS Variables として定義し、参照ルールを決める
• Typography（font family / UIサイズ / line-height 130%）を Tailwind で利用できる形にする
• Spacing scale を Tailwind 運用に組み込み、ベタ値禁止ルールを明文化する
• 代表 UI（Button など）でテーマ反映確認を行い、差分があれば theme 側へフィードバックする

補足

Figma:

• https://www.figma.com/design/EPgo5kzk5BIHbCGr5WXBxs/FoR-wallet-app?node-id=76-15798

Icon:

• placeholder: lucide-react