@cakejp/design-system 0.21.1 → 0.22.1

package/CHANGELOG.md

@@ -11,6 +11,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.22.1] - 2026-10-26
+
+### ✨ Added
+
+- **`npx cakejp-ds check-tokens [DIR]`**: consumer の色が「DS を上げるだけで変わる」状態かを検査する CLI。v0.22.0 のブランドカラー変更で、DS を上げてもオレンジのまま残った原因 4 つを検出し、検出時 exit 1 にする
+  - `brand-hex`: ブランド色の値の直書き（`#` / SVG data URL の `%23` / `rgb()`）。色の一覧は `src/styles/primitive.css` の `--Primitive-Orange-*` / `--Primitive-Berry-*` から毎回読むので、DS 側でパレットを変えても検査の更新は要らない
+  - `brand-override`: DS のブランド系トークン（`--Brand-*` / `--*-Accent-*` / Primary・Secondary ボタンの hover 等）の上書き
+  - `undefined-token`: DS にもプロジェクトにも無い変数の参照（`var(--X, #ffecd9)` のフォールバックが出続ける）
+  - `brand-primitive`: `--Primitive-Orange-*` / `--Primitive-Berry-*` の直接参照
+  - 例外は同じ行か直前の行に `design-tokens-allow: <理由>`（理由必須）。テスト・docs・ビルド成果物・node_modules は走査しない
+  - 原材料・人材・ケーキ屋さん.jp に個別に入れていた同等のスクリプトを置き換える想定
+
+---
+
+## [0.22.0] - 2026-10-26
+
+### 🎨 Changed
+
+- **ブランドカラーをオレンジ（`#E04B00`）からベリー（`#E5175C`）へ変更**: `--Brand-Cake-Orange` 系・`--Surface/Text/Object/Border-Accent-Primary` 系・Primary/Secondary ボタンの hover/active など、ブランド色を参照する semantic トークンを `--Primitive-Berry-*` 参照に切り替えた（light/dark、`preset-standalone.css`、`tokens.json`）
+  - 変数名（`--Brand-Cake-Orange` など）は据え置き。利用側のコード変更は不要で、バージョンを上げると色が変わる
+  - 旧カラー（オレンジ）は `--Primitive-Orange-*` に元の値のまま残している。`bg-orange-*` などの Tailwind ユーティリティもオレンジのまま
+  - accent-primary の文字・地のコントラストが 4.5:1 を満たすようになったため、コントラスト検査の例外 3 件を削除
+  - 薄いアクセント地（`--Surface-Accent-Primary-Light`）の上の文字を `--Brand-Cake-Orange` から `--Text-Accent-Primary` に変更（Button `secondary`・Pagination の選択中・Chip / Tag の accent・RadioGroup の chip・ToggleGroup・AnniversaryCard）。light は Berry-800（薄地で 4.81:1・白地で 6.48:1）、dark は Berry-600（4.61:1）。`--Text-Accent-Primary` を使う価格などの文字も light では一段濃い赤になる。コントラスト検査の例外は不要になり削除
+
+### 🐛 Fixed
+
+- **Button `secondary` の hover / active の線が太すぎた**（[#300](https://github.com/flashpark/cake-design-system/issues/300)）: 1px の枠線と 2px の outline が同色で重なり約 3px に見えていた。hover / active は 1px の枠線の色替えだけにした（Pagination の選択中も同じ）。フォーカス表示は従来どおり共通のリング
+- **PaginationEllipsis の「その他のページ」が読み上げられなかった**（[#300](https://github.com/flashpark/cake-design-system/issues/300)）: 外側の `aria-hidden` を外し、アイコンだけを読み上げから外した。見た目は変わらない
+
+---
+
 ## [0.21.1] - 2026-10-21
 
 ### 🐛 Fixed

package/CLAUDE.md

@@ -65,6 +65,8 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 
 **意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出る。
 
+**色は DS のトークンで書き、`npx cakejp-ds check-tokens` を lint / build に組み込む。** DS のバージョンを上げても色が追従しない書き方（ブランド色の値の直書き・DS のブランド系トークンの上書き・DS に無い変数の参照・`--Primitive-Orange-*` / `--Primitive-Berry-*` の直接参照）を検出して exit 1 にする（実例: v0.22.0 のブランドカラー変更で、これらが原因で DS を上げてもオレンジのまま残る画面が各プロダクトにあった）。例外は同じ行か直前の行に `design-tokens-allow: <理由>`（理由必須。例: CSS 変数を使えない `themeColor`）。
+
 ---
 
 ## 見た目のフィードバックを受けたときのゲート（DS 起因か consumer 起因かを先に切り分ける）

package/UPDATING.md

@@ -169,6 +169,8 @@ npm run test   # あれば
 - **マイナー更新では CHANGELOG の「✨ Added」を読み、ローカルに持っている同等実装の削除候補を確認する**。
   DS に新しく追加された部品（例: 0.10.0 の `ImageUploader` / `ResponsiveDialog` / `DataTable`）と同名のローカル実装が残っていないか、`npx cakejp-ds check-duplicates ./src` を流すと機械検出できる（`--strict` で検出時 exit 1）。
   検出されたローカル実装は DS の import に置き換え、不要になったファイルを削除する。
+- **`npx cakejp-ds check-tokens` を流し、DS を上げても色が追従しない箇所が無いか確認する**（ブランド色の直書き・DS のブランド系トークンの上書き・DS に無い変数・ブランド原色の直接参照を検出、検出時 exit 1）。
+  lint / build のスクリプトに組み込んでおくと、色の変更が告知されたときに DS を上げるだけで済む。
 
 ### 5. PR 作成・マージ
 

package/bin/check-tokens.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+/**
+ * npx cakejp-ds check-tokens [DIR]
+ *
+ * consumer の色が「DS のバージョンを上げるだけで変わる」状態かを検査する。
+ * 2026-10 のブランドカラー変更（オレンジ → ベリー、v0.22.0）で、DS を上げても色が変わらない箇所が
+ * 各プロダクトに残った。原因は次の 4 つだったので、それぞれを検出して exit 1 にする。
+ *
+ *   brand-hex        ブランド色の値の直書き（--Primitive-Orange-* / --Primitive-Berry-* の値。# / %23 / rgb() 表記）
+ *   brand-override   DS のブランド系トークン（--Brand-* / --*-Accent-* / Primary・Secondary ボタンの hover 等）の上書き定義
+ *   undefined-token  DS の命名（大文字始まり）で、DS にも consumer にも定義が無い変数の参照
+ *                    （var(--X, #ffecd9) のフォールバックが表示され続ける）
+ *   brand-primitive  ブランドの原色（--Primitive-Orange-* / --Primitive-Berry-*）の直接参照
+ *
+ * ブランド色の一覧は、この package の src/styles/primitive.css から毎回読み直す。
+ * そのため DS 側でパレットを変えても、この検査の更新は要らない。
+ *
+ * 例外: 同じ行か直前の行に「design-tokens-allow: <理由>」を書く（理由が空なら例外にならない）。
+ */
+import { existsSync, readFileSync, readdirSync, statSync } from "node:fs"
+import { dirname, extname, join, relative, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const pkgRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..")
+const args = process.argv.slice(2)
+
+if (args.includes("--help") || args.includes("-h")) {
+  console.log(`使い方: npx cakejp-ds check-tokens [DIR]
+
+DIR（既定: カレントディレクトリ）以下の .css / .scss / .ts / .tsx / .js / .jsx / .mjs を走査し、
+DS のバージョンを上げても色が追従しない書き方を検出する（検出時 exit 1）。
+
+  brand-hex        ブランド色の値の直書き → var(--Brand-Cake-Orange) / var(--Text-Accent-Primary) などを使う
+  brand-override   DS のブランド系トークンの上書き → 上書きせず DS の値を使う
+  undefined-token  DS にも DIR にも無い変数の参照 → DS にある名前を使う
+  brand-primitive  --Primitive-Orange-* / --Primitive-Berry-* の直接参照 → 意味のあるトークンを使う
+
+除外: node_modules / .next / out / dist / build / coverage / __tests__ / tests / docs / public / scripts と、
+      *.test.* / *.spec.* / *.stories.* / *.d.ts
+例外: 同じ行か直前の行に「design-tokens-allow: <理由>」（理由必須）`)
+  process.exit(0)
+}
+
+const target = resolve(args.find((a) => !a.startsWith("-")) ?? process.cwd())
+const EXTS = new Set([".css", ".scss", ".ts", ".tsx", ".js", ".jsx", ".mjs"])
+const IGNORE_DIRS = new Set(["node_modules", ".next", "out", "dist", "build", "coverage", ".turbo", "__tests__", "tests", "docs", "public", "scripts"])
+const IGNORE_FILE = /\.(test|spec|stories)\.[cm]?[jt]sx?$|\.d\.ts$/
+const ALLOW_RE = /design-tokens-allow:\s*\S/
+const BRAND_TOKEN_RE = /^(Brand-|Primitive-(Orange|Berry)-|(Surface|Text|Object|Border)-Accent-|(Hover|Active)-(Primary|Secondary)-Button$|Object-Favorite$|Border-Favorite$)/
+// CSS の宣言（--X:）に加え、JS/TS のオブジェクトのキー（'--X': / "--X":）も宣言として扱う
+const DECL_RE = /(?:^|[\s;{,("'`])--([A-Za-z][\w-]*)["'`]?\s*:/g
+const VAR_RE = /var\(\s*--([A-Z][\w-]*)/g
+
+function walk(dir, filter, skip, out = []) {
+  for (const name of readdirSync(dir)) {
+    if (skip && (skip.has(name) || name.startsWith("."))) continue
+    const p = join(dir, name)
+    if (statSync(p).isDirectory()) walk(p, filter, skip, out)
+    else if (filter(name)) out.push(p)
+  }
+  return out
+}
+
+// DS が定義するトークン名（src/styles と dist の CSS）
+const dsNames = new Set()
+for (const sub of ["src/styles", "src", "dist"]) {
+  const d = join(pkgRoot, sub)
+  if (!existsSync(d)) continue
+  for (const f of walk(d, (n) => n.endsWith(".css"), null)) {
+    for (const m of readFileSync(f, "utf8").matchAll(DECL_RE)) dsNames.add(m[1])
+  }
+}
+
+// ブランドのパレット（旧オレンジ・現行ベリー）を primitive.css から取り出す
+const palette = []
+const primitive = readFileSync(join(pkgRoot, "src/styles/primitive.css"), "utf8")
+for (const m of primitive.matchAll(/--Primitive-(?:Orange|Berry)-\d+\s*:\s*#([0-9a-f]{6})(?:[0-9a-f]{2})?/gi)) palette.push(m[1].toUpperCase())
+if (palette.length === 0) {
+  console.error("DS の src/styles/primitive.css からブランドのパレットを読めませんでした")
+  process.exit(2)
+}
+const HEX_RE = new RegExp(`(?:#|%23)(${palette.join("|")})(?:[0-9a-f]{2})?(?![0-9a-f])`, "i")
+// rgb(224, 75, 0) / rgba(224,75,0,.5) に加え、空白区切り・スラッシュ区切りの透明度 rgb(224 75 0 / 0.5) も見る
+const rgbAlts = palette.map((h) => [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)).join("(?:\\s*,\\s*|\\s+)"))
+const RGB_RE = new RegExp(`rgba?\\(\\s*(${rgbAlts.join("|")})\\s*[,)/]`, "i")
+
+const files = walk(target, (n) => EXTS.has(extname(n)) && !IGNORE_FILE.test(n), IGNORE_DIRS)
+const texts = files.map((f) => [f, readFileSync(f, "utf8")])
+const localNames = new Set()
+for (const [, text] of texts) for (const m of text.matchAll(DECL_RE)) localNames.add(m[1])
+
+const problems = []
+for (const [file, text] of texts) {
+  const lines = text.split("\n")
+  lines.forEach((line, i) => {
+    if (ALLOW_RE.test(line) || (i > 0 && ALLOW_RE.test(lines[i - 1]))) return
+    const where = `${relative(target, file)}:${i + 1}`
+    const hex = line.match(HEX_RE) || line.match(RGB_RE)
+    if (hex) problems.push([where, "brand-hex", `ブランド色の直書き ${hex[0]} → var(--Brand-Cake-Orange) / var(--Text-Accent-Primary) などの DS トークンを使う`])
+    for (const m of line.matchAll(DECL_RE)) {
+      if (dsNames.has(m[1]) && BRAND_TOKEN_RE.test(m[1])) problems.push([where, "brand-override", `DS のブランド系トークン --${m[1]} を上書きしている → 上書きせず DS の値を使う`])
+    }
+    for (const m of line.matchAll(VAR_RE)) {
+      if (!dsNames.has(m[1]) && !localNames.has(m[1])) problems.push([where, "undefined-token", `--${m[1]} は DS にもこのプロジェクトにも無い → DS にある名前を使う`])
+      else if (/^Primitive-(Orange|Berry)-\d+$/.test(m[1])) problems.push([where, "brand-primitive", `ブランドの原色 --${m[1]} を直接参照している → --Brand-Cake-Orange / --Brand-Cake-Orange-Light / --Hover-Primary-Button などを使う`])
+    }
+  })
+}
+
+if (problems.length) {
+  console.error(`check-tokens: ${problems.length} 件`)
+  for (const [where, rule, msg] of problems) console.error(`  ${where}  [${rule}] ${msg}`)
+  console.error("例外にする行には「design-tokens-allow: <理由>」を同じ行か直前の行に書く")
+  process.exit(1)
+}
+console.log(`check-tokens: OK（${files.length} ファイル、DS トークン ${dsNames.size} 件、ブランドの色 ${palette.length} 件）`)

package/bin/init.js

@@ -51,6 +51,9 @@ if (cmd === "help" || cmd === "--help" || cmd === "-h") {
                                               意図的に残すローカル実装は、対象 export の直前行に
                                               「// cakejp-ds-allow-duplicate: <理由>」を書くと抑制できる（理由必須）
                                               詳細: npx cakejp-ds check-duplicates --help
+  npx cakejp-ds check-tokens [DIR]            DS を上げても色が追従しない書き方（ブランド色の直書き・DS トークンの
+                                              上書き・DS に無い変数・ブランド原色の直接参照）を検出（検出時 exit 1）
+                                              例外は行に「design-tokens-allow: <理由>」。詳細: npx cakejp-ds check-tokens --help
 `)
   process.exit(0)
 }
@@ -87,6 +90,12 @@ if (cmd === "check-duplicates") {
   process.exit(0)
 }
 
+if (cmd === "check-tokens") {
+  process.argv = [process.argv[0], process.argv[1], ...args.slice(1)]
+  await import(join(pkgRoot, "bin/check-tokens.mjs"))
+  process.exit(0)
+}
+
 if (cmd !== "init" && cmd !== "postinstall") {
   console.error(`未知のコマンド: ${cmd}`)
   console.error(`npx cakejp-ds help を参照してください`)

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.21.1",
+    "version": "0.22.1",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
@@ -528,7 +528,7 @@
         "variant='tile'（既定）=ラジオ丸+ラベル+補足説明+展開コンテンツのタイル型",
         "⚠️ タイルの枠（border/角丸/余白/選択状態の意匠）は RadioGroupItem 自身が描画する。consumer 側で <div className='border rounded-lg ...'> 等で囲むと枠が二重になる。囲まずにそのまま並べる",
         "ラベルは children で渡す。<RadioGroupItem/> と <Label htmlFor> を兄弟に並べる書き方は誤り（枠の二重化＋ラベル重複を招く）",
-        "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariants（filled）を再利用し、選択状態は入力部品のオン状態としてブランド色の薄い地（Chipのaccent意匠と同じトークン: 静止=薄オレンジ/hover=ベタ塗り）で示す。Chip の selected（グレー地 + 黒系の枠）とは別の見た目。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持",
+        "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariants（filled）を再利用し、選択状態は入力部品のオン状態としてブランド色の薄い地（Chipのaccent意匠と同じトークン: 静止=薄いブランド色/hover=ベタ塗り）で示す。Chip の selected（グレー地 + 黒系の枠）とは別の見た目。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持",
         "tile の未選択の枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く"
       ]
     },
@@ -631,7 +631,7 @@
         "範囲スライダーの Home / End はフォーカス中のつまみを、そのつまみが動ける範囲の端（隣のつまみ ± minStepsBetweenThumbs × step、無ければ min / max）へ動かす（WAI-ARIA APG Multi-Thumb Slider）。つまみが 1 つのときは Radix の既定のまま",
         "つまみの数は value / defaultValue の配列の長さ。どちらも無いときは Radix の既定値 [min] に合わせて 1 つ",
         "forced-colors（Windows のハイコントラスト）では選択範囲を Highlight、レールを CanvasText の輪郭線（outline）で示す。通常表示は変わらない",
-        "溝は高コントラストのとき --Surface-Control-Track（3:1 以上）に切り替わる。溝の色は bg-[var(--Surface-Control-Track,var(--Surface-Tertiary))] の形で書く。高コントラスト時の溝と選択範囲（オレンジ）は明るさが近く、区別は色相が中心。値はつまみの位置で伝わる（つまみは 3:1 を満たす）"
+        "溝は高コントラストのとき --Surface-Control-Track（3:1 以上）に切り替わる。溝の色は bg-[var(--Surface-Control-Track,var(--Surface-Tertiary))] の形で書く。高コントラスト時の溝と選択範囲（ブランド色）は明るさが近く、区別は色相が中心。値はつまみの位置で伝わる（つまみは 3:1 を満たす）"
       ]
     },
     {

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.21.1",
+    "version": "0.22.1",
     "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 は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",
@@ -142,12 +142,12 @@
       { "role": "meta", "typo": "typo-body-sm", "color": "--Text-Low-Emphasis", "usage": "メタ情報・タイムスタンプ" },
       { "role": "smallest-label", "typo": "typo-label-xs", "color": "--Text-Low-Emphasis" }
     ],
-    "accentNote": "価格などの最強調は typo-label-lg + --Text-Accent-Primary（オレンジ）。強調は色ではなく typo 系（heading/label）で表現し、font-bold を足さない。"
+    "accentNote": "価格などの最強調は typo-label-lg + --Text-Accent-Primary（ブランド色＝ベリー）。強調は色ではなく typo 系（heading/label）で表現し、font-bold を足さない。"
   },
   "ctaHierarchy": {
     "description": "Button の variant 優先順位。1ビューポート内での CTA 密度を制御する。⚠️ これは「前進アクションの強さ」の序列であり、画面に並べた2番目のボタンが自動的に secondary になるわけではない。戻る/キャンセル/閉じるのような後退・中立アクションは序列ではなく役割で選ぶ（→ tertiary）。選ぶ前に各項目の appearance（実際の意匠）を必ず確認すること。",
     "priority": [
-      { "variant": "default", "role": "Primary CTA（前進・確定）", "appearance": "ブランドオレンジのベタ塗り", "note": "1ビューポートに1つまで（唯一の主 CTA）" },
+      { "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": "outline", "role": "準主役の前進アクション（ブランド色を使わない）。「一覧を見る」等の移動ボタン、一覧・カードで1件ごとに繰り返す操作（商品カードの「カートに追加」等）、ブックマーク等の保存トグルのボタン本体", "appearance": "白地（Surface-Primary）+ 1px の黒系の枠（Border-High-Emphasis）+ Text-High-Emphasis 文字。hover / active は薄い下地（Hover-Text-Button / Active-Text-Button）", "note": "ブランド色を使わないので何個並んでもよい。ただし繰り返す操作は見た目が増えるので、ボタンに頼らずカード全体のリンクで足りるときは置かない" },
@@ -155,7 +155,7 @@
       { "variant": "link", "role": "補助リンク（「もっと見る」「利用規約を見る」等のインラインの移動）", "appearance": "ブランド色を使わない。Text-Medium-Emphasis（グレー）+ 常時下線。hover で Text-High-Emphasis", "note": "セクション見出し横の「もっと見る」は SectionHeader が同じ意匠で描く" }
     ],
     "rules": [
-      "default（オレンジ）の CTA は1ビューポートに1つまで。主アクションを1つに絞る",
+      "default（ブランド色）の CTA は1ビューポートに1つまで。主アクションを1つに絞る",
       "複数アクションを並べる時は default を tertiary / ghost と組み合わせる",
       "「戻る」「キャンセル」「閉じる」「スキップ」「あとで」は tertiary（グレー）。secondary はアクセント色なので後退アクションに使わない",
       "ブランド色を使わずに「押せるボタン」の存在感がほしい前進アクション（「一覧を見る」、1件ごとに繰り返す操作、保存トグルのボタン本体）は outline。黒ベタ塗りにしない",

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.21.1",
+    "version": "0.22.1",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [

package/contracts/screen-patterns.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Screen Patterns Contracts",
-    "version": "0.21.1",
+    "version": "0.22.1",
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",

package/dist/components/ec/anniversary-card.js

@@ -1,64 +1,64 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "react";
-import u from "iconsax-reactjs/dist/esm/Calendar.js";
-import { cn as v } from "../../lib/utils.js";
-import { Button as i } from "../foundations/button.js";
-function T({
+import y from "iconsax-reactjs/dist/esm/Calendar.js";
+import { cn as u } from "../../lib/utils.js";
+import { Button as s } from "../foundations/button.js";
+function A({
   name: n,
-  relation: d,
+  relation: c,
   type: l,
-  date: c,
+  date: d,
   daysLeft: m,
-  memo: r,
-  editHref: s,
-  onEdit: t,
+  memo: a,
+  editHref: t,
+  onEdit: i,
   linkComponent: p,
   className: o,
   ...x
 }) {
-  const h = s ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", asChild: !0, children: /* @__PURE__ */ e(p ?? "a", { href: s, children: "編集" }) }) : t ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", onClick: t, children: "編集" }) : null;
-  return /* @__PURE__ */ a(
+  const h = t ? /* @__PURE__ */ e(s, { variant: "tertiary", size: "xs", asChild: !0, children: /* @__PURE__ */ e(p ?? "a", { href: t, children: "編集" }) }) : i ? /* @__PURE__ */ e(s, { variant: "tertiary", size: "xs", onClick: i, children: "編集" }) : null;
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "anniversary-card",
-      className: v(
+      className: u(
         "min-w-[200px] rounded-xl border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-4 space-y-2",
         o
       ),
       ...x,
       children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: n }),
-            /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Secondary)] px-2 py-0.5 rounded-full", children: d })
+            /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Secondary)] px-2 py-0.5 rounded-full", children: c })
           ] }),
           h
         ] }),
-        /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
+        /* @__PURE__ */ r("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
           l,
           " — ",
-          c
+          d
         ] }),
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 bg-[var(--Surface-Accent-Primary-Light)] rounded-lg px-3 py-2", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 bg-[var(--Surface-Accent-Primary-Light)] rounded-lg px-3 py-2", children: [
           /* @__PURE__ */ e(
-            u,
+            y,
             {
               size: 16,
-              className: "text-[var(--Brand-Cake-Orange)]",
+              className: "text-[var(--Text-Accent-Primary)]",
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ a("span", { className: "typo-label-md text-[var(--Brand-Cake-Orange)]", children: [
+          /* @__PURE__ */ r("span", { className: "typo-label-md text-[var(--Text-Accent-Primary)]", children: [
             "あと",
             m,
             "日"
           ] })
         ] }),
-        r && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r })
+        a && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: a })
       ]
     }
   );
 }
 export {
-  T as AnniversaryCard
+  A as AnniversaryCard
 };

package/dist/components/foundations/button.js

@@ -1,17 +1,17 @@
 import { jsx as i, jsxs as f } from "react/jsx-runtime";
 import * as h from "react";
 import { cva as y } from "class-variance-authority";
-import { Loader2Icon as B } from "lucide-react";
+import { Loader2Icon as T } from "lucide-react";
 import { Slot as p } from "radix-ui";
 import { cn as c } from "../../lib/utils.js";
-import { FOCUS_RING as T } from "../../lib/focus-ring.js";
+import { FOCUS_RING as B } from "../../lib/focus-ring.js";
 const u = y(
-  `inline-flex shrink-0 items-center justify-center gap-2 rounded-lg typo-label-md whitespace-nowrap transition-all outline-none ${T} disabled:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+  `inline-flex shrink-0 items-center justify-center gap-2 rounded-lg typo-label-md whitespace-nowrap transition-all outline-none ${B} disabled:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
   {
     variants: {
       variant: {
         default: "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
-        secondary: "border border-transparent outline outline-2 outline-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)] hover:border-[var(--Hover-Primary-Button)] hover:outline-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:outline-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:outline-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+        secondary: "border border-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] hover:border-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
         tertiary: "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] active:bg-[var(--Active-Tertiary-Button)] disabled:text-[var(--Text-Disable)]",
         destructive: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-Sun-900)] active:bg-[var(--Primitive-Sun-900)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
         ghost: "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Text-Button)] active:bg-[var(--Active-Text-Button)] disabled:text-[var(--Text-Disable)]",
@@ -29,7 +29,7 @@ const u = y(
         link: "text-[var(--Text-Medium-Emphasis)] underline underline-offset-4 hover:text-[var(--Text-High-Emphasis)] disabled:text-[var(--Text-Disable)]",
         /**
          * inverse — 暗背景の上で使う primary CTA。
-         * 白背景 + accent text (Brand Cake Orange)。
+         * 白背景 + accent text (Brand-Cake-Orange＝ベリー)。
          * hover で薄く陰り、active で更に。
          */
         inverse: "bg-[var(--Surface-Primary)] text-[var(--Brand-Cake-Orange)] hover:bg-[var(--Primitive-White-alpha-900)] active:bg-[var(--Primitive-White-alpha-800)] disabled:bg-[var(--Primitive-White-alpha-300)] disabled:text-[var(--Text-Disable)]",
@@ -211,7 +211,7 @@ function W({
             "data-slot": "button-spinner",
             "aria-hidden": "true",
             className: "pointer-events-none absolute inset-0 flex items-center justify-center",
-            children: /* @__PURE__ */ i(B, { className: "animate-spin motion-reduce:animate-none" })
+            children: /* @__PURE__ */ i(T, { className: "animate-spin motion-reduce:animate-none" })
           }
         )
       ]

package/dist/components/foundations/chip-variants.js

@@ -12,7 +12,7 @@ const t = e(
         ].join(" "),
         /** accent — 薄いブランド色地 + ブランド色文字。Chip の selected は使わなくなった（明示指定の互換のために残す） */
         accent: [
-          "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+          "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
           "hover:bg-[var(--Surface-Accent-Primary)] hover:text-[var(--Text-on-Inverse)]",
           "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)] disabled:hover:text-[var(--Text-Disable)]"
         ].join(" "),

package/dist/components/foundations/pagination.js

@@ -105,12 +105,11 @@ function j({
   return /* @__PURE__ */ e(
     "span",
     {
-      "aria-hidden": !0,
       "data-slot": "pagination-ellipsis",
       className: t("flex size-10 shrink-0 items-center justify-center text-muted-foreground", a),
       ...n,
       children: [
-        /* @__PURE__ */ i(c, { className: "size-4" }),
+        /* @__PURE__ */ i(c, { "aria-hidden": !0, className: "size-4" }),
         /* @__PURE__ */ i("span", { className: "sr-only", children: "その他のページ" })
       ]
     }

package/dist/components/foundations/radio-group.js

@@ -43,9 +43,9 @@ function y({
         "cursor-pointer outline-none",
         // checked = 入力部品のオン状態なのでブランド色のまま（brandColorUsage の allowed）。
         // Chip の selected はグレー地 + 黒系の枠に変わったため、見た目は Chip と別（Chip の accent と同一トークン）。
-        "data-[state=checked]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=checked]:text-[var(--Brand-Cake-Orange)]",
+        "data-[state=checked]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=checked]:text-[var(--Text-Accent-Primary)]",
         "data-[state=checked]:hover:bg-[var(--Surface-Accent-Primary)] data-[state=checked]:hover:text-[var(--Text-on-Inverse)]",
-        // forced-colors（Windows ハイコントラスト）では薄オレンジ地が Canvas に置き換わり、未選択と
+        // forced-colors（Windows ハイコントラスト）では薄いブランド色の地が Canvas に置き換わり、未選択と
         // 見分けがつかないため、選択中だけ OS の選択色で示す（Chip の selected と同じ。通常表示は不変）
         "forced-colors:data-[state=checked]:bg-[Highlight] forced-colors:data-[state=checked]:text-[HighlightText]",
         // form 固有の状態（chipVariants に無い分のみ compose）。disabled の配色は chipVariants filled が担う。
@@ -67,7 +67,7 @@ function y({
         "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
         "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Surface-Primary)]",
         // フォーカス意匠は DS 共通（FOCUS_RING = 緑リング）。以前はオレンジの
-        // ring-2 で checked 状態（同じくオレンジ枠）と紛らわしかったため統一した。
+        // ring-2 で checked 状態（同じくブランド色の枠）と紛らわしかったため統一した。
         m,
         "aria-invalid:border-[var(--Border-Caution)]",
         "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)]",

package/dist/components/foundations/toggle-group.js

@@ -2,8 +2,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as s from "react";
 import { cva as l } from "class-variance-authority";
-import { ToggleGroup as d } from "radix-ui";
-import { cn as g } from "../../lib/utils.js";
+import { ToggleGroup as c } from "radix-ui";
+import { cn as d } from "../../lib/utils.js";
 import { FORCED_COLORS_FOCUS_INSET as u } from "../../lib/focus-ring.js";
 const p = l(
   "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
@@ -42,7 +42,7 @@ const p = l(
         default: [
           "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
           "hover:bg-[var(--Surface-Tertiary)]/80",
-          "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Brand-Cake-Orange)] data-[state=on]:font-bold",
+          "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Text-Accent-Primary)] data-[state=on]:font-bold",
           "dark:bg-[var(--Surface-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
           "dark:data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] dark:data-[state=on]:text-[var(--Text-Accent-Primary)]"
         ].join(" "),
@@ -63,7 +63,7 @@ const p = l(
       size: "default"
     }
   }
-), c = s.createContext({
+), g = s.createContext({
   variant: "default",
   size: "default"
 });
@@ -76,12 +76,12 @@ function T({
   ...t
 }) {
   return /* @__PURE__ */ n(
-    d.Root,
+    c.Root,
     {
       "data-slot": "toggle-group",
-      className: g(p({ width: o }), a),
+      className: d(p({ width: o }), a),
       ...t,
-      children: /* @__PURE__ */ n(c.Provider, { value: { variant: e, size: r }, children: i })
+      children: /* @__PURE__ */ n(g.Provider, { value: { variant: e, size: r }, children: i })
     }
   );
 }
@@ -92,12 +92,12 @@ function y({
   size: o,
   ...i
 }) {
-  const t = s.useContext(c);
+  const t = s.useContext(g);
   return /* @__PURE__ */ n(
-    d.Item,
+    c.Item,
     {
       "data-slot": "toggle-group-item",
-      className: g(
+      className: d(
         f({
           variant: t.variant || r,
           size: t.size || o

package/dist/components/primitives/tag.js

@@ -16,7 +16,7 @@ const x = o(
         info: "bg-[var(--Primitive-Sea-50)] text-[var(--Primitive-Sea-600)] dark:bg-[var(--Primitive-Sea-600)] dark:text-[var(--Primitive-White-alpha-1000)]",
         "info-fill": "bg-[var(--Primitive-Sea-600)] text-[var(--Text-on-Inverse)]",
         success: "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
-        accent: "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+        accent: "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
         timesale: "bg-[var(--Primitive-Wood-400)] text-[var(--Text-on-Inverse)]",
         berry: "bg-[var(--Primitive-Berry-700)] text-[var(--Text-on-Inverse)]",
         coupon: "bg-[var(--Primitive-Sea-500)] text-[var(--Text-on-Inverse)]"