@cakejp/design-system 0.3.0

package/src/styles/typography.css

@@ -0,0 +1,129 @@
+/* ============================================
+ * Cake.jp Typography System
+ * ============================================
+ *
+ * テキストスタイルを単一クラスで管理するユーティリティ。
+ * font-size / line-height / letter-spacing / font-weight を1クラスに集約し、
+ * コンポーネント間でのブレを防止する。
+ *
+ * 命名規則: typo-{category}-{size}
+ *   category: heading | body | label
+ *   size: 3xl | 2xl | xl | lg | md | sm | xs
+ *
+ * ── 使い分けガイド ──
+ *
+ * heading: セクションタイトル、ページタイトル、カードタイトル（18px 以上が目安）
+ *          → bold, letter-spacing: 0.04em, line-height: 1.5
+ *
+ * body:    本文テキスト、説明文、コメント、補足情報
+ *          → normal weight, line-height: 1.75（lg/md）or 1.5（sm/xs）
+ *
+ * label:   ボタンラベル、ナビゲーション、フォームラベル、タグ、メタ情報
+ *          → bold(lg/md) or medium(sm/xs), letter-spacing: 0.04em, line-height: 1.5
+ *
+ * ── ルール ──
+ *
+ * 1. コンポーネント内では typo-* クラスを使い、text-sm / font-bold / leading-* / tracking-* を個別に組み合わせない
+ * 2. CVA の size バリアント内でも typo-* を使用する
+ * 3. typo-* と text-* / font-* / leading-* / tracking-* を同一要素に混在させない
+ * 4. レスポンシブ対応: md:typo-heading-xl のようにプレフィックスが使える
+ * 5. カラーは別途指定: className="typo-body-sm text-[var(--Text-Low-Emphasis)]"
+ */
+
+/* ─── Heading ─── */
+
+@utility typo-heading-3xl {
+  font-size: 1.75rem;        /* 28px */
+  line-height: 1.5;          /* 42px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-heading-2xl {
+  font-size: 1.5rem;         /* 24px */
+  line-height: 1.5;          /* 36px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-heading-xl {
+  font-size: 1.3125rem;      /* 21px */
+  line-height: 1.5;          /* 31.5px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-heading-lg {
+  font-size: 1.125rem;       /* 18px */
+  line-height: 1.5;          /* 27px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-heading-md {
+  font-size: 1rem;            /* 16px */
+  line-height: 1.5;          /* 24px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-heading-sm {
+  font-size: 0.875rem;       /* 14px */
+  line-height: 1.5;          /* 21px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+/* ─── Body ─── */
+
+@utility typo-body-lg {
+  font-size: 1rem;            /* 16px */
+  line-height: 1.75;         /* 28px */
+  font-weight: 400;
+}
+
+@utility typo-body-md {
+  font-size: 0.875rem;       /* 14px */
+  line-height: 1.75;         /* 24.5px */
+  font-weight: 400;
+}
+
+@utility typo-body-sm {
+  font-size: 0.75rem;        /* 12px */
+  line-height: 1.5;          /* 18px */
+  font-weight: 400;
+}
+
+@utility typo-body-xs {
+  font-size: 0.625rem;       /* 10px */
+  line-height: 1.5;          /* 15px */
+  font-weight: 400;
+}
+
+/* ─── Label ─── */
+
+@utility typo-label-lg {
+  font-size: 1rem;            /* 16px */
+  line-height: 1.5;          /* 24px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-label-md {
+  font-size: 0.875rem;       /* 14px */
+  line-height: 1.5;          /* 21px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-label-sm {
+  font-size: 0.75rem;        /* 12px */
+  line-height: 1.5;          /* 18px */
+  font-weight: 500;
+}
+
+@utility typo-label-xs {
+  font-size: 0.625rem;       /* 10px */
+  line-height: 1.5;          /* 15px */
+  font-weight: 500;
+}

package/templates/AGENTS.md

@@ -0,0 +1,56 @@
+<!--
+  このファイルは @cakejp/design-system の postinstall で自動設置されました。
+  最新ルールを取り込むには: npx cakejp-ds init --force
+-->
+
+# このプロジェクトは @cakejp/design-system に準拠する
+
+Codex（および他の AI エージェント）は UI 作業を始める前に、以下のファイルを**必ず**読み込むこと。
+
+## 📖 必読ファイル（node_modules 配下）
+
+| ファイル | 内容 |
+|---------|------|
+| `node_modules/@cakejp/design-system/AGENTS.md` | DS 全体のルール・禁止パターン |
+| `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
+| `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
+| `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |
+
+> DS 側のルール更新は `npm update @cakejp/design-system` で自動反映されます。このファイルは書き換え不要。
+
+## ❌ 書く前に必ず確認するパターン
+
+| 書こうとしているもの | 代わりに使うもの |
+|-------------------|----------------|
+| カスタムカラー（`#xxxxxx` / `rgba(...)` ハードコード） | `tokens.json` のカラートークン |
+| カスタム余白（`margin: 17px` 等の非トークン値） | `tokens.json` の `spacing.*` |
+| カスタム角丸（`border-radius: 13px` 等） | `tokens.json` の `radius.*` |
+| カスタム影（`box-shadow: ...`） | `tokens.json` の `shadow.*` |
+| カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` |
+| `::before` / `::after` で装飾 | DS の `SectionHeader`, `Chip`, `Badge` 等の variants |
+| 新しい `<div>` ラッパーでレイアウト | `Card`, `Section`, `Stack` 等のコンポーネント |
+
+DS に該当パターンが無い場合のみカスタム実装を許可。その場合は**必ずコメントで理由を記載**すること。
+
+## 使用方法
+
+### CSS のセットアップ（重要）
+
+DS のプリビルド CSS（`dist/index.css`）を**必ず**プロジェクトのエントリ CSS で
+`@import` すること。これにより consumer の Tailwind 設定に依存せず、DS と同じ
+見た目が保証される。
+
+```css
+/* globals.css / app.css など */
+@import "@cakejp/design-system/dist/index.css"; /* DS のコンポーネントスタイル・トークン・preflight */
+@import "tailwindcss";                          /* consumer 自身の utility */
+```
+
+> ❌ `@source` ディレクティブで DS を再ビルドする方式は非推奨。consumer の
+> Tailwind 設定次第で出力がズレるリスクがある（トークン値の差・preflight の差等）。
+
+### コンポーネントの使用
+
+```tsx
+import { Button, Chip, Card } from "@cakejp/design-system"
+```

package/templates/CLAUDE.md

@@ -0,0 +1,56 @@
+<!--
+  このファイルは @cakejp/design-system の postinstall で自動設置されました。
+  最新ルールを取り込むには: npx cakejp-ds init --force
+-->
+
+# このプロジェクトは @cakejp/design-system に準拠する
+
+Codex（および他の AI エージェント）は UI 作業を始める前に、以下のファイルを**必ず**読み込むこと。
+
+## 📖 必読ファイル（node_modules 配下）
+
+| ファイル | 内容 |
+|---------|------|
+| `node_modules/@cakejp/design-system/AGENTS.md` | DS 全体のルール・禁止パターン |
+| `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
+| `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
+| `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |
+
+> DS 側のルール更新は `npm update @cakejp/design-system` で自動反映されます。このファイルは書き換え不要。
+
+## ❌ 書く前に必ず確認するパターン
+
+| 書こうとしているもの | 代わりに使うもの |
+|-------------------|----------------|
+| カスタムカラー（`#xxxxxx` / `rgba(...)` ハードコード） | `tokens.json` のカラートークン |
+| カスタム余白（`margin: 17px` 等の非トークン値） | `tokens.json` の `spacing.*` |
+| カスタム角丸（`border-radius: 13px` 等） | `tokens.json` の `radius.*` |
+| カスタム影（`box-shadow: ...`） | `tokens.json` の `shadow.*` |
+| カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` |
+| `::before` / `::after` で装飾 | DS の `SectionHeader`, `Chip`, `Badge` 等の variants |
+| 新しい `<div>` ラッパーでレイアウト | `Card`, `Section`, `Stack` 等のコンポーネント |
+
+DS に該当パターンが無い場合のみカスタム実装を許可。その場合は**必ずコメントで理由を記載**すること。
+
+## 使用方法
+
+### CSS のセットアップ（重要）
+
+DS のプリビルド CSS（`dist/index.css`）を**必ず**プロジェクトのエントリ CSS で
+`@import` すること。これにより consumer の Tailwind 設定に依存せず、DS と同じ
+見た目が保証される。
+
+```css
+/* globals.css / app.css など */
+@import "@cakejp/design-system/dist/index.css"; /* DS のコンポーネントスタイル・トークン・preflight */
+@import "tailwindcss";                          /* consumer 自身の utility */
+```
+
+> ❌ `@source` ディレクティブで DS を再ビルドする方式は非推奨。consumer の
+> Tailwind 設定次第で出力がズレるリスクがある（トークン値の差・preflight の差等）。
+
+### コンポーネントの使用
+
+```tsx
+import { Button, Chip, Card } from "@cakejp/design-system"
+```

package/tokens.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://cakejp-ds.tokens.json/v1",
+  "version": "0.1.0",
+  "description": "Cake.jp Design System — 機械可読トークン定義。AI がコンポーネント生成時に参照する。",
+  "lastUpdated": "2026-03-17",
+
+  "color": {
+    "primitive": {
+      "Orange":  { "50": "#FFECD9", "100": "#FFD4B2", "200": "#FFBA84", "300": "#FFA66B", "400": "#FF8E4C", "500": "#F97732", "600": "#F16311", "700": "#E04B00", "800": "#BD3200", "900": "#A62700" },
+      "Gray":    { "50": "#FBF9F8", "100": "#F4F2F1", "200": "#EBE9E8", "300": "#DBD9D8", "400": "#B7B5B4", "500": "#979594", "600": "#787675", "700": "#575352", "800": "#3A3736", "900": "#1C1A1A" },
+      "Forest":  { "50": "#E6F5EC", "100": "#C2E5D1", "200": "#9BD4B5", "300": "#71C598", "400": "#51B883", "500": "#2CAC6E", "600": "#259D63", "700": "#1D8B56", "800": "#197A4B", "900": "#115A36" },
+      "Sun":     { "50": "#FFE7E6", "100": "#FFC8B8", "200": "#FFA28B", "300": "#FF7B5C", "400": "#FF5838", "500": "#FF4B36", "600": "#FF220D", "700": "#FA1606", "800": "#EC0000", "900": "#D50000" },
+      "Teal":    { "50": "#F0FCF8", "100": "#D0F6E9", "200": "#ACEED8", "300": "#81E6C4", "400": "#59D9AE", "500": "#51C79F", "600": "#49B18E", "700": "#3E987A", "800": "#317860", "900": "#1D4739" },
+      "Sea":     { "50": "#E8F1FE", "100": "#C5D7FB", "200": "#9DB7F9", "300": "#7096F8", "400": "#4979F5", "500": "#295FF3", "600": "#003EE5", "700": "#0031D8", "800": "#0024CE", "900": "#0017B6" },
+      "Wood":    { "50": "#F8F1E0", "100": "#EFDBB1", "200": "#E5C47F", "300": "#DCAC4D", "400": "#D69C2B", "500": "#D18D0F", "600": "#CD820A", "700": "#C87504", "800": "#C16800", "900": "#B65200" },
+      "Berry":   { "50": "#FBD4E0", "100": "#F7B1C8", "200": "#F491B2", "300": "#F1749E", "400": "#EE598B", "500": "#EC407A", "600": "#EA296A", "700": "#E5175C", "800": "#B5175C", "900": "#9E103F" }
+    },
+
+    "semantic": {
+      "surface": {
+        "primary":              { "value": "Primitive-White-alpha-1000", "hex": "#FFFFFF", "usage": "メイン背景" },
+        "secondary":            { "value": "Primitive-Gray-50",         "hex": "#FBF9F8", "usage": "セカンダリ背景" },
+        "tertiary":             { "value": "Primitive-Gray-100",        "hex": "#F4F2F1", "usage": "ターシャリ背景" },
+        "caution":              { "value": "Primitive-Sun-800",         "hex": "#EC0000", "usage": "エラー背景" },
+        "caution-light":        { "value": "Primitive-Sun-50",          "hex": "#FFE7E6", "usage": "エラー背景（薄）" },
+        "accent-primary":       { "value": "Primitive-Orange-700",      "hex": "#E04B00", "usage": "アクセント背景" },
+        "accent-primary-light": { "value": "Primitive-Orange-50",       "hex": "#FFECD9", "usage": "アクセント背景（薄）" },
+        "success":              { "value": "Primitive-Forest-600",      "hex": "#259D63", "usage": "成功背景" },
+        "warning":              { "value": "Primitive-Wood-50",         "hex": "#F8F1E0", "usage": "警告背景" }
+      },
+      "text": {
+        "high-emphasis":    { "value": "Primitive-Gray-900",  "hex": "#1C1A1A", "usage": "本文テキスト" },
+        "medium-emphasis":  { "value": "Primitive-Gray-700",  "hex": "#575352", "usage": "補足テキスト" },
+        "low-emphasis":     { "value": "Primitive-Gray-600",  "hex": "#787675", "usage": "プレースホルダ" },
+        "disable":          { "value": "Primitive-Gray-400",  "hex": "#B7B5B4", "usage": "無効状態" },
+        "accent-primary":   { "value": "Brand-Cake-Orange",   "hex": "#E04B00", "usage": "アクセントテキスト" },
+        "on-inverse":       { "value": "Primitive-White-alpha-1000", "hex": "#FFFFFF", "usage": "反転背景上の白文字" },
+        "success":          { "value": "Primitive-Forest-600", "hex": "#259D63", "usage": "成功状態" },
+        "caution":          { "value": "Primitive-Sun-800",    "hex": "#EC0000", "usage": "エラー状態" },
+        "warning":          { "value": "Primitive-Wood-800",   "hex": "#C16800", "usage": "警告状態" }
+      },
+      "border": {
+        "high-emphasis":   { "value": "Primitive-Gray-700",  "hex": "#575352", "usage": "強調ボーダー" },
+        "medium-emphasis": { "value": "Primitive-Gray-300",  "hex": "#DBD9D8", "usage": "標準ボーダー" },
+        "low-emphasis":    { "value": "Primitive-Gray-50",   "hex": "#FBF9F8", "usage": "薄いボーダー" },
+        "accent-primary":  { "value": "Brand-Cake-Orange",   "hex": "#E04B00", "usage": "アクセントボーダー" },
+        "caution":         { "value": "Surface-Caution",     "hex": "#EC0000", "usage": "エラーボーダー" }
+      },
+      "brand": {
+        "cake-orange":            { "value": "Primitive-Orange-700", "hex": "#E04B00", "usage": "ブランドカラー" },
+        "cake-orange-light":      { "value": "Primitive-Orange-100", "hex": "#FFD4B2", "usage": "ブランド薄色" },
+        "cake-orange-ultra-light": { "value": "Primitive-Orange-50",  "hex": "#FFECD9", "usage": "ブランド最薄色" }
+      }
+    }
+  },
+
+  "typography": {
+    "heading": {
+      "3xl": { "fontSize": "28px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ページタイトル" },
+      "2xl": { "fontSize": "24px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "主要セクション見出し" },
+      "xl":  { "fontSize": "21px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "サブセクション見出し" },
+      "lg":  { "fontSize": "18px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "グループ見出し" },
+      "md":  { "fontSize": "16px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "小見出し" },
+      "sm":  { "fontSize": "14px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ラベル的見出し" }
+    },
+    "body": {
+      "lg": { "fontSize": "16px", "lineHeight": 1.75, "fontWeight": 400, "usage": "本文テキスト（大）" },
+      "md": { "fontSize": "14px", "lineHeight": 1.75, "fontWeight": 400, "usage": "本文テキスト（標準）" },
+      "sm": { "fontSize": "12px", "lineHeight": 1.5,  "fontWeight": 400, "usage": "補足テキスト" },
+      "xs": { "fontSize": "10px", "lineHeight": 1.5,  "fontWeight": 400, "usage": "最小テキスト" }
+    },
+    "label": {
+      "lg": { "fontSize": "16px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ボタン大・CTA" },
+      "md": { "fontSize": "14px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ボタン標準・ナビ" },
+      "sm": { "fontSize": "12px", "lineHeight": 1.5, "fontWeight": 500, "usage": "タグ・バッジ・メタ情報" },
+      "xs": { "fontSize": "10px", "lineHeight": 1.5, "fontWeight": 500, "usage": "小タグ・税表記" }
+    },
+    "cssClass": "typo-{category}-{size}",
+    "rules": [
+      "必ず typo-* クラスを使う。text-sm font-bold 等の個別指定は禁止",
+      "typo-* と text-*/font-*/leading-*/tracking-* を同一要素に混在させない",
+      "カラーは別途指定: className=\"typo-body-sm text-[var(--Text-Low-Emphasis)]\"",
+      "レスポンシブ対応可: md:typo-heading-xl",
+      "CVA 内でも typo-* を使用する"
+    ]
+  },
+
+  "spacing": {
+    "base": "4px",
+    "grid": "8px",
+    "scale": {
+      "0.5": { "px": 2,  "usage": "密接した要素間" },
+      "1":   { "px": 4,  "usage": "アイコンとラベル間" },
+      "1.5": { "px": 6,  "usage": "チップ間・タグ間" },
+      "2":   { "px": 8,  "usage": "標準要素間" },
+      "3":   { "px": 12, "usage": "セクション内要素間" },
+      "4":   { "px": 16, "usage": "セクション間" },
+      "6":   { "px": 24, "usage": "ダイアログ内パディング" }
+    }
+  },
+
+  "touchTarget": {
+    "button-cta":    { "min": "40px", "recommended": "48px" },
+    "icon-button":   { "min": "40px", "recommended": "44px" },
+    "text-input":    { "min": "44px", "recommended": "48px" },
+    "chip":          { "min": "32px", "recommended": "36px" },
+    "dropdown-item": { "min": "36px", "recommended": "40px" },
+    "nav-item":      { "min": "44px", "recommended": "48px" }
+  },
+
+  "radius": {
+    "sm": "calc(var(--radius) - 4px)",
+    "md": "calc(var(--radius) - 2px)",
+    "lg": "var(--radius)",
+    "xl": "calc(var(--radius) + 4px)",
+    "base": "0.625rem"
+  },
+
+  "shadow": {
+    "md":      "0 2px 6px 0 rgba(0,0,0,0.08)",
+    "lg":      "0 4px 12px 0 rgba(0,0,0,0.12)",
+    "menu":    "0 4px 16px 0 rgba(0,0,0,0.12)",
+    "tooltip": "0 2px 8px 0 rgba(0,0,0,0.16)",
+    "dialog":  "0 8px 24px 0 rgba(0,0,0,0.16)",
+    "modal":   "0 16px 48px 0 rgba(0,0,0,0.24)"
+  }
+}