@cakejp/design-system 0.22.0 → 0.22.1

package/CHANGELOG.md

@@ -11,6 +11,20 @@ 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

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.22.0",
+    "version": "0.22.1",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.22.0",
+    "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 は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",

package/contracts/rules.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",