@ubie/vitals-shadcn-theme
v0.1.0
Published
shadcn/ui compatible theme (CSS custom properties) powered by @ubie/vitals-token
Readme
@ubie/vitals-shadcn-theme
shadcn/ui 互換のテーマ（CSS カスタムプロパティ）を提供するパッケージです。@ubie/vitals-token の既存トークンを var() で参照し、shadcn の色変数（--background / --primary / --destructive など）として再公開します。
- Tailwind v4 規約（
@theme inline）をターゲット - light / dark 両モード対応（shadcn の
.darkクラス規約） - 色のみを提供（
--radius/--font-*等は利用側で補完） - 値はコピーせず
@ubie/vitals-tokenのトークンを名前参照
Installation
npm install @ubie/vitals-shadcn-theme @ubie/vitals-tokenUsage
アプリのグローバル CSS（例: globals.css）で Tailwind の後に読み込みます。
@import "tailwindcss";
@import "@ubie/vitals-shadcn-theme/css";
/* このパッケージは色のみを提供します。radius / font は利用側で定義してください */
:root {
--radius: 0.625rem;
}これだけで shadcn/ui コンポーネントが bg-primary / text-foreground / border-border などのユーティリティをそのまま利用できます。
Dark mode
dark mode はクラスベースです。ルート要素に dark クラスを付与すると、.dark ブロックが @ubie/vitals-token の dark トークン（--dark-color-*）に切り替わります。
<html class="dark">
<!-- ... -->
</html>提供する変数
shadcn/ui の標準色変数を網羅します。
- surface:
--background/--foreground/--card(-foreground)/--popover(-foreground) - semantic:
--primary(-foreground)/--secondary(-foreground)/--muted(-foreground)/--accent(-foreground)/--destructive(-foreground) - form / outline:
--border/--input/--ring - chart:
--chart-1〜--chart-5 - sidebar:
--sidebar/--sidebar-foreground/--sidebar-primary(-foreground)/--sidebar-accent(-foreground)/--sidebar-border/--sidebar-ring
--chart-*と--sidebar-*は対応する semantic トークンが無いため、primitive トークン（--color-ubie-*）から割り当てています。
Tailwind 標準パレットの上書き
shadcn/ui は Tailwind をベースにしており、bg-blue-500 / text-gray-900 のような palette ユーティリティを多用します。これらを Ubie ブランド色にそろえるため、Tailwind 標準パレットを @ubie/vitals-token の primitive 色で上書きしています。
<div class="bg-blue-500 text-gray-900">...</div>対象の色名（Tailwind 標準名 ← Ubie primitive）:
whitegray/blue/sky/green/lime/yellow/red/pink/purple
スケールについて: 上書きは番号が一致する
100〜900のみです。Tailwind 固有の50/950は Ubie に対応色が無いため Tailwind デフォルト色のまま 据え置き、Ubie 固有の1000は割り当て先が無いため未使用です。bg-blue-50/bg-blue-950は Tailwind デフォルト色になる点に注意してください。
Storybook
テーマを適用した shadcn/ui コンポーネント（vendoring 済み）と、カラートークン一覧を Storybook で確認できます。ツールバーの Theme から light / dark を切り替えられます。
pnpm dev:shadcn-theme
# または
pnpm --filter vitals-shadcn-theme devsrc/components/ui/— shadcn/ui コンポーネントを vendoring（Tailwind v4 / New York スタイル）src/stories/— 各コンポーネントの stories と Colors（トークン一覧）
関連パッケージ
@ubie/vitals-token— 本パッケージが参照するカラートークン