Task: web/雛形生成とtokens.css配線
背景
decisions/0001/0003で Fumadocs + Motion/Lenis + WCAG 2.2 AA(DADS参考)を確定し、tasks/backlog.mdの #webタスクとしてデザイントークン(web/theme/tokens.css)まで設計済み。残るは Fumadocsアプリの生成と、トークンをFumadocs/Tailwindのテーマ機構へ配線する初回経路の 確立。
目的
web/app/でFumadocsサイトがビルドでき、色・フォント・モーションがtokens.cssの カスタムプロパティ経由で効いている状態を作る。
受け入れ条件
実施記録(2026-07-05、Fable 5)
create-fumadocs-appのウィザードは非TTYで完走できないため、npmパッケージの tarball(v16.0.129)から+next+fuma-docs-mdxテンプレートを直接展開した。workspace:*依存はfumadocs-ui/core^16.10.7、fumadocs-mdx^15.0.13へ置換。- 配線:
app/global.cssでtokens.cssをimportし、fumadocs-uiの--color-fd-*変数を トークン参照へマッピング(トークン側がテーマで切り替わるためマッピングは1組)。layout.tsxはnext/font(Inter)を廃止し、RootProvider theme={{ attribute: ['class','data-theme'] }}で.darkクラス(fumadocs用)とdata-theme(tokens.css用)を同時に書かせる。 - pnpm 11のビルドスクリプト制限はpnpm-workspace.yamlの
allowBuilds(esbuild/sharpのみ)で許可。 pnpm build成功(Next.js 16.2.9、Node 22)。ビルド済みCSSで--color-fd-background:var(--bg)、DADSプライマリ#0017c1、--font-override、prefers-reduced-motion、data-themeセレクタの残存を確認。app側ソースに 色・フォント直書きなし。
変更範囲
- 新しく作ってよいファイル:
web/app/一式、web/README.mdへの追記 - 変更しないもの:
web/theme/tokens.cssの設計意図(配線に必要な機械的追記は可)、 既存decisions
確認方法
cd web/app && pnpm build
make check