UI コンポーネント
テーマの適用
トークンと Tailwind の接続を import し、ダークテーマを有効にする
コンポーネントの色、間隔、フォント、radius、シャドウは、すべて --werft- プレフィックスの付いた CSS 変数(トークン)から決まる。アプリは CSS を三つ import し、パッケージのソースを Tailwind にスキャンさせる。
CSS を取り込む
インストールで作ったアプリに src/styles.css を作る。
@import "tailwindcss";
@import "@werft-ai/ui/styles.css";
@import "@werft-ai/ui/theme.css";
@source "../../packages/ui/src";
@source "../../packages/react/src";
body {
margin: 0;
background: var(--werft-color-canvas);
color: var(--werft-color-foreground);
font-family: var(--werft-font-sans);
}| import | 役割 |
|---|---|
tailwindcss | Tailwind 4 |
@werft-ai/ui/styles.css | トークン(tokens.css)、フォント、キット要素の基本ルール。リポジトリ内の workspace パッケージは、フォント(Geist, Pretendard)をパッケージ内のファイルとリポジトリがインストールした pretendard から読み込み、CDN からは取得しない。リポジトリ外のアプリにインストールしたパッケージの styles.css はビルド済みの CSS で、フォントは入っていない |
@werft-ai/ui/theme.css | トークンを Tailwind のユーティリティにつなぐ。bg-canvas, bg-primary, text-control, font-sans, rounded-md, shadow-sm といったユーティリティクラスは、このファイルで定義される |
@source の二行は、Tailwind が node_modules 配下にリンクされたパッケージのソースからクラス名を探せるようにする。Tailwind の自動検出は node_modules をスキップするため、Web コンソール(apps/web/src/styles.css)にも同じ二行がある。パスはこの CSS ファイルが基準である。
ダークテーマ
トークンはライトテーマがデフォルトである。ダークテーマは二通りの方法で有効になる。
- システム設定: オペレーティングシステムがダークモードなら(
prefers-color-scheme: dark)、何もしなくてよい。 - 手動で切り替え:
<html>のdata-themeを変更する。"dark"はシステム設定に関係なく暗く、"light"は明るく固定する。
document.documentElement.dataset.theme = "dark";コンポーネントは Tailwind の dark: variant を使わない。dark: は data-theme の切り替えを検知できないため、アプリの CSS でも色を変えるときにトークン(var(--werft-color-…))を使えば、どちらの方式にも追従する。
上書き
tokens.css と styles.css のルールは @layer werft の中にあり、この layer は Tailwind の utilities の後ろに来る。そのため、次の二つが決まる。
ConfirmDialog,DestructiveActionDialog,EmptyState,ErrorState,Skeleton,StatusLabel,ReceiptSummary,ReceiptLinkは自分のクラスで描画する。これらにclassNameで渡した Tailwind のユーティリティは、同じプロパティであれば適用されない。- layer の外に書いたアプリの CSS は、これらのルールに勝つ。見た目を変えるには、layer 外の CSS で上書きする。
次のステップ
- セッションブロックの組み込み: この CSS を使う画面を描画する