@cakejp/design-system 0.12.0 → 0.14.0

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.1.0",
+    "version": "0.14.0",
     "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
     "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
     "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",
@@ -122,7 +122,8 @@
       { "depth": 2, "token": "--Surface-Secondary", "hex": "#FBF9F8", "usage": "ネストしたセクション・交互行" },
       { "depth": 3, "token": "--Surface-Tertiary", "hex": "#F4F2F1", "usage": "抑えたコンテナ・無効領域" }
     ],
-    "rule": "ネストは3層まで。4層目以降は情報設計を見直す。背景は Surface トークンで明示（未指定で親を透かさない）。"
+    "rule": "ネストは3層まで。4層目以降は情報設計を見直す。背景は Surface トークンで明示（未指定で親を透かさない）。",
+    "surfaceContext": "色地 Section（background='subtle'|'accent-subtle'）と、地が Surface-Secondary のシェル（AdminShell / WorkspaceShell / FunnelShell）は配下に --card-surface: var(--Surface-Primary) を流すため、その中の Card は surface 未指定でも白（depth 1）になる。DS の Section を使わない自前の色地では、親要素に className='[--card-surface:var(--Surface-Primary)]' を宣言して同じ文脈を作る。dark は伝播値を Surface-Secondary に据え置く（半透明白が地に重なって浮くため、白を強制すると elevation が反転する）。"
   },
   "textHierarchy": {
     "description": "typo-* とテキスト強調トークンの組み合わせで階層を作るツリー。上ほど強い階層。トークン名は tokens.json の typography.* / semantic.text.* に対応。",
@@ -137,17 +138,19 @@
     "accentNote": "価格などの最強調は typo-label-lg + --Text-Accent-Primary（オレンジ）。強調は色ではなく typo 系（heading/label）で表現し、font-bold を足さない。"
   },
   "ctaHierarchy": {
-    "description": "Button の variant 優先順位。1ビューポート内での CTA 密度を制御する。",
+    "description": "Button の variant 優先順位。1ビューポート内での CTA 密度を制御する。⚠️ これは「前進アクションの強さ」の序列であり、画面に並べた2番目のボタンが自動的に secondary になるわけではない。戻る/キャンセル/閉じるのような後退・中立アクションは序列ではなく役割で選ぶ（→ tertiary）。選ぶ前に各項目の appearance（実際の意匠）を必ず確認すること。",
     "priority": [
-      { "variant": "default", "role": "Primary CTA（オレンジ）", "note": "1ビューポートに1つまで（唯一の主 CTA）" },
-      { "variant": "secondary", "role": "Secondary action" },
-      { "variant": "tertiary", "role": "Tertiary action" },
-      { "variant": "ghost", "role": "Minimal action（メニュー・ツールバー内）" },
-      { "variant": "link", "role": "Inline link" }
+      { "variant": "default", "role": "Primary CTA（前進・確定）", "appearance": "ブランドオレンジのベタ塗り", "note": "1ビューポートに1つまで（唯一の主 CTA）" },
+      { "variant": "secondary", "role": "Secondary action（前進系の副 CTA。例: 「サンプルを見る」「詳細を見る」）", "appearance": "⚠️ ブランドアクセント（Surface-Accent-Primary-Light 地 + Brand-Cake-Orange 文字）。Material / Bootstrap / shadcn の secondary（グレー・控えめ）とは別物", "note": "アクセント色が付くため、戻る・キャンセル・閉じる等の後退/中立アクションには使わない（→ tertiary）" },
+      { "variant": "tertiary", "role": "Tertiary action / 後退・中立アクション（戻る・キャンセル・閉じる・スキップ・あとで）", "appearance": "ニュートラルなグレー（Surface-Tertiary 地 + Text-High-Emphasis 文字）", "note": "他 DS の secondary に相当する見た目。主 CTA の隣に置く「戻る」「キャンセル」はこれを使う" },
+      { "variant": "ghost", "role": "Minimal action（メニュー・ツールバー内）", "appearance": "下地なし・hover で薄い下地" },
+      { "variant": "link", "role": "Inline link", "appearance": "テキストリンク意匠" }
     ],
     "rules": [
       "default（オレンジ）の CTA は1ビューポートに1つまで。主アクションを1つに絞る",
       "複数アクションを並べる時は default を tertiary / ghost と組み合わせる",
+      "「戻る」「キャンセル」「閉じる」「スキップ」「あとで」は tertiary（グレー）。secondary はアクセント色なので後退アクションに使わない",
+      "secondary を使うのは、主 CTA と別方向の“前進”を促す副 CTA のとき（例: 主=「購入する」に対し副=「サンプルを見る」）",
       "モバイルの全幅下部 CTA は size=\"xl\" + w-full（StickyActionBar 内）"
     ]
   }