トークンリファレンス

@bi-shop-it/ui/styles.css を読み込むことで、すべてのトークンが Tailwind CSS のユーティリティクラスとして使用できる。

ルール

• スタイリングにはトークンのみを使用する。arbitrary values（text-[13px]、bg-[#333]）は禁止
• トークンは用途に基づいて選択する。「見た目が近いから」ではなく「意味が合っているか」で判断する
• dark: でスタイルを上書きしない。ダークモードはトークンの値の差し替えで自動対応される

// ✅ トークンを用途に基づいて使用
<div className="p-3 text-foreground bg-background">

// ❌ arbitrary values
<div className="p-[13px] text-[#333]">

// ❌ dark: で個別上書き
<div className="bg-white dark:bg-gray-900">