@cakejp/design-system 0.11.0 → 0.13.0

package/src/styles/semantic.css

@@ -90,6 +90,13 @@
   --Surface-Glass-Faint: var(--Primitive-White-alpha-700);   /* rgba(255,255,255,0.698≈0.7) */
   --Surface-Brand-Ghost: rgba(255, 236, 217, 0.7);           /* Orange-50 at 70%。閉じるボタン等 */
 
+  /* Overlay surfaces（画像・メディアの上に載せる半透過サーフェス）
+   * Surface-Glass と同じ半透過白でも用途を分けて命名: こちらは「画像上のボタン/ピル下地」専用。
+   * メディアの上に載るため、可読性を保つ目的で light/dark で切替えない（下は :root のみで .dark 上書きなし）。
+   * Button variant="overlay" / カルーセル矢印系の意匠に接続する。 */
+  --Surface-Overlay-Light: var(--Primitive-White-alpha-800); /* rgba(255,255,255,0.8) 半透過白の下地 */
+  --Surface-Overlay-Dark: var(--Primitive-Gray-alpha-400);   /* rgba(0,0,0,0.4) 半透過黒の下地 */
+
   /* Border alphas */
   --Border-Hairline: rgba(28, 26, 26, 0.08);       /* Gray-900 8%。微細ボーダー */
   --Border-Brand-Subtle: rgba(224, 75, 0, 0.16);   /* Brand-Orange 16%。SNSリンクボーダー等 */

package/src/styles/typography.css

@@ -8,7 +8,7 @@
  *
  * 命名規則: typo-{category}-{size}
  *   category: heading | body | label
- *   size: 3xl | 2xl | xl | lg | md | sm | xs
+ *   size: 4xl | 3xl | 2xl | xl | lg | md | sm | xs
  *
  * ── 使い分けガイド ──
  *
@@ -32,6 +32,20 @@
 
 /* ─── Heading ─── */
 
+@utility typo-heading-5xl {
+  font-size: 2.5rem;         /* 40px */
+  line-height: 1.35;         /* 54px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+@utility typo-heading-4xl {
+  font-size: 2rem;           /* 32px */
+  line-height: 1.4;          /* 44.8px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
 @utility typo-heading-3xl {
   font-size: 1.75rem;        /* 28px */
   line-height: 1.5;          /* 42px */

package/templates/AGENTS.md

@@ -32,6 +32,17 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 
 DS に該当パターンが無い場合のみカスタム実装を許可。その場合は**必ずコメントで理由を記載**すること。
 
+## ❓「DS に無い」と思ったときのゲート（ローカル台帳禁止・issue 直行）
+
+部品が DS に無いと思っても、**手元の台帳・TODO リストで「昇格候補」を管理しないこと**。台帳は必ず drift する（実例: cake-api の昇格候補台帳が DS 0.10.0 で追加された `ImageUploader` / `ResponsiveDialog` / `DataTable` 等を反映せず、既に DS にある部品を「無い」と誤認してローカル実装を保持し続けた）。次の順で確認する:
+
+1. `node_modules/@cakejp/design-system/contracts/components.json` を名前で検索する（正典はここ）。
+2. `npx cakejp-ds check-duplicates` を実行し、ローカルに DS 同名の実装が無いか機械検出する（`--strict` で検出時 exit 1、CI に組み込める）。
+3. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
+4. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
+
+**意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出るので、`--strict` を CI に入れたまま運用できる。
+
 ## 使用方法
 
 ### CSS のセットアップ（重要）

package/templates/CLAUDE.md

@@ -34,6 +34,17 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 
 DS に該当パターンが無い場合のみカスタム実装を許可。その場合は**必ずコメントで理由を記載**すること。
 
+## ❓「DS に無い」と思ったときのゲート（ローカル台帳禁止・issue 直行）
+
+部品が DS に無いと思っても、**手元の台帳・TODO リストで「昇格候補」を管理しないこと**。台帳は必ず drift する（実例: cake-api の昇格候補台帳が DS 0.10.0 で追加された `ImageUploader` / `ResponsiveDialog` / `DataTable` 等を反映せず、既に DS にある部品を「無い」と誤認してローカル実装を保持し続けた）。次の順で確認する:
+
+1. `node_modules/@cakejp/design-system/contracts/components.json` を名前で検索する（正典はここ）。
+2. `npx cakejp-ds check-duplicates` を実行し、ローカルに DS 同名の実装が無いか機械検出する（`--strict` で検出時 exit 1、CI に組み込める）。
+3. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
+4. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
+
+**意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出るので、`--strict` を CI に入れたまま運用できる。
+
 ## 使用方法
 
 ### CSS のセットアップ（重要）

package/tokens.json

@@ -26,7 +26,9 @@
         "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": "警告背景" }
+        "warning":              { "value": "Primitive-Wood-50",         "hex": "#F8F1E0", "usage": "警告背景" },
+        "overlay-light":        { "value": "Primitive-White-alpha-800", "hex": "#FFFFFFCC", "usage": "画像上の半透過白サーフェス（Button overlay / カルーセル矢印）" },
+        "overlay-dark":         { "value": "Primitive-Gray-alpha-400",  "hex": "#00000066", "usage": "画像上の半透過黒サーフェス" }
       },
       "text": {
         "high-emphasis":    { "value": "Primitive-Gray-900",  "hex": "#1C1A1A", "usage": "本文テキスト" },
@@ -56,7 +58,21 @@
 
   "typography": {
     "heading": {
-      "3xl": { "fontSize": "28px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ページタイトル" },
+      "5xl": {
+        "fontSize": "40px",
+        "lineHeight": 1.35,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "LP・マーケティング系ヒーローの PC 見出し。SP は 3xl（28px）を基準に段階を上げる。通常ページでは使わない"
+      },
+      "4xl": {
+        "fontSize": "32px",
+        "lineHeight": 1.4,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "LP・マーケティング系ヒーローの PC 見出し（5xlより抑えた表現）。通常ページでは使わない"
+      },
+      "3xl": { "fontSize": "28px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "通常ページの主見出し・ページタイトル。LPではSP側のヒーロー見出しにも使用" },
       "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": "グループ見出し" },