@cakejp/design-system 0.11.0 → 0.13.0

package/contracts/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 内）"
     ]
   }

package/contracts/rules.json

@@ -527,7 +527,7 @@
       "category": "component",
       "pattern": "<input type=\"date\"|<input type='date'",
       "message": "input type='date' のネイティブ日付ピッカー禁止",
-      "fix": "<Popover> + <Calendar> でDS準拠の日付ピッカーを組む"
+      "fix": "実装済みの正解形 <DatePicker />（日付）/ <DateTimePicker />（日時）を使う（内部で Popover+Calendar を DS 意匠で組み済み・M月D日（曜日）表記・日本語カレンダー）。特殊要件で手組みが要る場合のみ <Popover> + <Calendar>"
     },
     {
       "id": "R51",
@@ -542,6 +542,21 @@
       "category": "component",
       "message": "管理画面のテーブルをui/tableで組まない",
       "fix": "<DataTable> を使う（ソート・選択行・アクションメニュー対応）"
+    },
+    {
+      "id": "R54",
+      "severity": "error",
+      "category": "component",
+      "pattern": "<input type=\"file\"|<input type='file'",
+      "message": "ネイティブ <input type='file'> を直接使わない",
+      "fix": "汎用の添付（PDF/CSV/画像混在）は <FileInput />（foundations）を使う。画像1枚の入力（プレビュー+形式/サイズ検証+値のバインド）は <ImageInput />（primitives）、複数枚のグリッド管理は <ImageUploader />（primitives）を使う"
+    },
+    {
+      "id": "R55",
+      "severity": "warning",
+      "category": "component",
+      "message": "画像・メディアの上に載せる操作ボタンを rgba 直書きの半透過下地で手組みしない",
+      "fix": "<Button variant='overlay'>（半透過白 Surface-Overlay-Light + shadow-md + backdrop-blur-sm）を使う。ImageCarousel 矢印と同系の意匠。円形は size='icon' + className='rounded-full'"
     }
   ],
   "accessibility": {
@@ -569,7 +584,9 @@
   "typography": {
     "rule": "必ず typo-* クラスを使用。text-sm font-bold 等の個別指定禁止。",
     "classes": [
-      { "class": "typo-heading-3xl", "size": "28px", "weight": "bold" },
+      { "class": "typo-heading-5xl", "size": "40px", "weight": "bold", "usage": "LP・マーケティング系ヒーローの PC 見出し限定" },
+      { "class": "typo-heading-4xl", "size": "32px", "weight": "bold", "usage": "LP・マーケティング系ヒーローの PC 見出し限定（5xlより抑えた表現）" },
+      { "class": "typo-heading-3xl", "size": "28px", "weight": "bold", "usage": "通常ページの主見出し・ページタイトル。LPではSP側にも使用" },
       { "class": "typo-heading-2xl", "size": "24px", "weight": "bold" },
       { "class": "typo-heading-xl",  "size": "21px", "weight": "bold" },
       { "class": "typo-heading-lg",  "size": "18px", "weight": "bold" },
@@ -599,7 +616,8 @@
         { "element": "Text input", "min": "44px", "recommended": "48px" },
         { "element": "Chip/Filter", "min": "32px", "recommended": "36px" },
         { "element": "Navigation item", "min": "44px", "recommended": "48px" }
-      ]
+      ],
+      "utility": "見た目が44px未満の小型操作部品をSPで使う場合は className=\"tap-target\" を付け、透明な疑似要素で実効操作領域を44×44px以上にする。隣接ターゲットと重なる密度では使わず親のgapを広げる"
     }
   },
   "writing": {