Skip to content

feat: デザイントークンを確定する - #76

Merged
hduehgw0 merged 5 commits into
mainfrom
feature/#58/design-tokens
Aug 8, 2026
Merged

feat: デザイントークンを確定する#76
hduehgw0 merged 5 commits into
mainfrom
feature/#58/design-tokens

Conversation

@hduehgw0

@hduehgw0 hduehgw0 commented Aug 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

関連 issue

resolve #58

やったこと

概要

モックの正本（Claude Design）から配色・書体・角丸を採り、globals.css のトークンとして確定した。ダークを既定にし、以降の UI 作業（#59 #61 #65 #66 #67 #68）が参照する土台にする。

変更点

  • globals.css の .dark にモックの実値 17 個を oklch で定義。--radius: 1rem、color-scheme: dark
  • :root（shadcn 既定のライト）と --chart-3〜5 は温存
  • <html> に dark を付与
  • Geist を撤去し、本文 Zen Kaku Gothic New・見出し Shippori Mincho を読み込む
  • --font-heading を --font-sans の別名から自前の変数へ変え、既存の <h1> 5 箇所に適用
  • CLAUDE.md の References にモックの正本（Claude Design）の行を追加
  • docs/requirements.md「保留」にライト／ダーク切り替えを追加

受け入れ条件（セルフチェック）

  • モックの配色が .dark に入っている（破壊的操作・グラフの色も含む）
  • --radius がモックに合っている
  • ダークが既定で表示され、color-scheme も dark になっている
  • 本文と見出しがモックの書体で表示される（--font-heading が --font-sans の別名でない）
  • 既存の <h1> が見出し書体になっている
  • src/app/ 配下の画面が生カラーを持たない
  • モック 01〜09 と突き合わせた（下記「検証」参照）
  • CLAUDE.md からモックの正本に辿れる

動作確認

  • pnpm lint が通る
  • pnpm format:check が通る
  • pnpm typecheck が通る
  • pnpm test が通る（71 件）
  • モバイル幅で表示が崩れない

検証

目視ではなく数値で確認した。

1. oklch 変換の検算 — oklch から sRGB へ逆変換し、正本の hex に戻ることを全 10 色で確認。ずれ 0。

2. ブラウザが実際に描いた色 — ヘッドレス Chrome で /login を撮り、PNG をデコードして全 329,160 px を集計。

#100d0b  95.8%   ← 正本の背景と完全一致
#efe7da   0.2%   ← 正本の前景と完全一致

3. 日本語グリフ — subsets: ["latin"] でも日本語が出ることをビルド成果物で確認。woff2 が 607 個、unicode-range 宣言 363 個のうち 291 個がかな・漢字の範囲を含む。

4. モバイル幅 — 390px の iframe に入れて撮影。横あふれなし、左右余白 27px。

Issue 要件外の対応（あれば）

  • 本文フォントのウェイトを 400/500/700 にした（Issue のコメントには 400/700 と書いていた）。font-medium（500）はコードベースで最多の 9 箇所あり、shadcn のラベル・ボタンが使っている。500 を読まないと CSS のフォントマッチングで 400 に落ち、ラベルとボタンの太さの差が消えるため。正本側も 500 を 9 箇所で使っている
  • docs/requirements.md「保留」への追加。Issue のスコープ外が「requirements.md「保留」」を参照しているが、その行が存在しなかったため

備考

@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mycellar Ready Ready Preview Aug 8, 2026 2:59am

@coderabbitai

coderabbitai Bot commented Aug 8, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

デザイン正本の参照を更新し、ダークテーマの配色、フォント、角丸を確定した。ログイン画面とボトル関連画面の見出しに見出し書体を適用した。

Changes

デザイントークン適用

Layer / File(s) Summary
デザイン資料と適用範囲
CLAUDE.md, docs/requirements.md		 Claude Design と docs/ui-mockups/ を参照先に追加した。ライト／ダークテーマ切り替えを保留項目に追加した。
テーマとフォントの設定
src/app/layout.tsx, src/app/globals.css		 Zen Kaku Gothic New と Shippori Mincho を設定した。ダークテーマの配色、color-scheme、角丸、フォント変数を更新した。
見出し書体の適用
src/app/login/page.tsx, src/app/bottles/page.tsx, src/app/bottles/new/page.tsx, src/app/bottles/[id]/page.tsx, src/app/bottles/[id]/edit/page.tsx		 各画面の見出しに font-heading クラスを追加した。

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

  • hduehgw0/mycellar#56: CLAUDE.md の参照更新と、UI・フォント設計の適用に関連する。
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Issue #58の配色、角丸、テーマ、書体、見出し、参照追加の要件を実装しています。手動確認項目は評価対象外です。
Out of Scope Changes check ✅ Passed 変更はIssue #58のデザイントークン確定と関連ドキュメントの更新に限定され、明確な要件外コード変更はありません。
Description check ✅ Passed 説明はテンプレートの主要セクションを満たし、変更内容、受け入れ条件、検証結果、制限事項を具体的に記載しています。
Title check ✅ Passed タイトルはデザイントークンの確定というプルリクエストの主要な変更を簡潔かつ明確に示しています。
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/#58/design-tokens

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@hduehgw0
hduehgw0 merged commit d091358 into main Aug 8, 2026
4 checks passed
@hduehgw0
hduehgw0 deleted the feature/#58/design-tokens branch August 8, 2026 05:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

feat: デザイントークンを確定する

1 participant

@hduehgw0