ksk-design-system 1.57.0 → 1.58.0

package/AGENTS.md

@@ -38,6 +38,7 @@ UI を書く前に必ず確認すること:
 - [ ] CSS でベンダープレフィックス併記する場合、**`-webkit-` を先・標準形を後**に書いたか（消費側の minifier が同一プロパティとして dedupe し後勝ちのみ残すため。逆順だと Firefox で静かに無効化。`node scripts/check-prefix-order.mjs` が CI で検出）
 - [ ] flex 行（flex-col でない flex）で shrink-0 の兄弟と可変テキストを並べるとき、テキスト側に `flex-1`（+ 必要なら `min-w-[...]` 下限）を付けたか（`min-w-0` だけだと 1 文字ずつ折り返すまで潰れる。issue #293。`node scripts/check-flex-shrink.mjs` が CI で検出、例外は `ksk-lint-ignore KFX001 -- 理由`）
 - [ ] クラス名は**完全な文字列**で書いたか（`` `bg-${color}` `` のような動的合成は静的抽出できず消費側で CSS が生成されない。分岐は三項演算子か cva variant で。`scripts/generate-source-safelist.mjs` が検出）
+- [ ] コントロールの寸法（高さ・横 padding・角丸・カード余白）を書くとき、固定の `h-10` / `px-4` / `p-6` ではなく product theme の公開変数（`h-[var(--Control-Height-Md)]` / `p-[var(--Product-Card-Padding)]`）を参照したか（issue #364。許可リストは `contracts/product-theme-overrides.json`。Button 系は `--Control-*`、Input/Textarea/SelectTrigger は `--Field-*` とスケールが別）
 - [ ] `.tsx` 編集後に `bash scripts/lint-scratch.sh`、コンポーネント増減時は `npm run check` を実行したか
 - [ ] `FormField` を import する前にどちらか確認したか（react-hook-form の Controller と統合するなら `RhfFormField`＝`ui/form` の `FormField` を index.ts で別名 export したもの。単純な label+error 表示は `patterns/form-field` の `FormField`。迷ったら後者）
 
@@ -77,6 +78,7 @@ tokens.json                             # カラー・スペーシング・シ
 contracts/token-hex-cache.json          # semantic トークンのデフォルトテーマ解決済み hex（テーマ依存キーは meta.themeDependentKeys 参照・自動生成）
 src/components/COMPONENT_LOOKUP.md      # バリアント・インポートパス一覧（自動生成）
 contracts/screen-patterns.json          # 画面実装前にどのシェル/パターンを使うかの decisionTree・crudMatrix
+contracts/product-theme-overrides.json   # プロダクト単位で上書きしてよい CSS 変数の許可リスト（寸法・面）
 contracts/composition.json              # 選んだパターン内部の並べ方（骨格構造・余白リズム・カード階層・テキスト階層・CTA優先度）
 ```
 
@@ -221,6 +223,7 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 | **DESIGN.md** | AI エージェント向け視覚言語サマリ（トークン＋意図・voice・motion） |
 | **contracts/screen-patterns.json** | 画面実装前にどのシェル/パターンを使うかを決める decisionTree・crudMatrix |
 | **contracts/deprecations.json** | 非推奨 API の正本台帳（移行先・削除予定。MIGRATION.md の一覧節と check-migration CLI の入力） |
+| **contracts/product-theme-overrides.json** | プロダクト単位で上書きしてよい CSS 変数の許可リスト（寸法・面。既定値は src/styles/product-theme.css・lint は P049） |
 | **contracts/composition.json** | 選んだパターン内部の並べ方（骨格構造・余白リズム・カード階層・テキスト階層・CTA優先度） |
 
 ---
@@ -242,6 +245,7 @@ src/
 │   ├── semantic.css   # Layer 2: 用途別トークン
 │   ├── typography.css # typo-* ユーティリティ
 │   ├── motion.css     # duration / easing トークン（--Motion-*）
+│   ├── product-theme.css    # プロダクト単位で上書きしてよい寸法・面の公開変数（issue #364）
 │   └── source-safelist.css  # @source safelist（自動生成・手で編集しない / issue #258）
 ├── themes/            # default / orange / green / violet / blue
 ├── preset.css         # 外部プロジェクト向けプリセット

package/CLAUDE.md

@@ -38,6 +38,7 @@ UI を書く前に必ず確認すること:
 - [ ] CSS でベンダープレフィックス併記する場合、**`-webkit-` を先・標準形を後**に書いたか（消費側の minifier が同一プロパティとして dedupe し後勝ちのみ残すため。逆順だと Firefox で静かに無効化。`node scripts/check-prefix-order.mjs` が CI で検出）
 - [ ] flex 行（flex-col でない flex）で shrink-0 の兄弟と可変テキストを並べるとき、テキスト側に `flex-1`（+ 必要なら `min-w-[...]` 下限）を付けたか（`min-w-0` だけだと 1 文字ずつ折り返すまで潰れる。issue #293。`node scripts/check-flex-shrink.mjs` が CI で検出、例外は `ksk-lint-ignore KFX001 -- 理由`）
 - [ ] クラス名は**完全な文字列**で書いたか（`` `bg-${color}` `` のような動的合成は静的抽出できず消費側で CSS が生成されない。分岐は三項演算子か cva variant で。`scripts/generate-source-safelist.mjs` が検出）
+- [ ] コントロールの寸法（高さ・横 padding・角丸・カード余白）を書くとき、固定の `h-10` / `px-4` / `p-6` ではなく product theme の公開変数（`h-[var(--Control-Height-Md)]` / `p-[var(--Product-Card-Padding)]`）を参照したか（issue #364。許可リストは `contracts/product-theme-overrides.json`。Button 系は `--Control-*`、Input/Textarea/SelectTrigger は `--Field-*` とスケールが別）
 - [ ] `.tsx` 編集後に `bash scripts/lint-scratch.sh`、コンポーネント増減時は `npm run check` を実行したか
 - [ ] `FormField` を import する前にどちらか確認したか（react-hook-form の Controller と統合するなら `RhfFormField`＝`ui/form` の `FormField` を index.ts で別名 export したもの。単純な label+error 表示は `patterns/form-field` の `FormField`。迷ったら後者）
 
@@ -67,6 +68,7 @@ tokens.json                             # カラー・スペーシング・シ
 contracts/token-hex-cache.json          # semantic トークンのデフォルトテーマ解決済み hex（テーマ依存キーは meta.themeDependentKeys 参照・自動生成）
 src/components/COMPONENT_LOOKUP.md      # バリアント・インポートパス一覧（自動生成）
 contracts/screen-patterns.json          # 画面実装前にどのシェル/パターンを使うかの decisionTree・crudMatrix
+contracts/product-theme-overrides.json   # プロダクト単位で上書きしてよい CSS 変数の許可リスト（寸法・面）
 contracts/composition.json              # 選んだパターン内部の並べ方（骨格構造・余白リズム・カード階層・テキスト階層・CTA優先度）
 ```
 
@@ -221,6 +223,7 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 | **DESIGN.md** | AI エージェント向け視覚言語サマリ（トークン＋意図・voice・motion） |
 | **contracts/screen-patterns.json** | 画面実装前にどのシェル/パターンを使うかを決める decisionTree・crudMatrix |
 | **contracts/deprecations.json** | 非推奨 API の正本台帳（移行先・削除予定。MIGRATION.md の一覧節と check-migration CLI の入力） |
+| **contracts/product-theme-overrides.json** | プロダクト単位で上書きしてよい CSS 変数の許可リスト（寸法・面。既定値は src/styles/product-theme.css・lint は P049） |
 | **contracts/composition.json** | 選んだパターン内部の並べ方（骨格構造・余白リズム・カード階層・テキスト階層・CTA優先度） |
 
 ---
@@ -242,6 +245,7 @@ src/
 │   ├── semantic.css   # Layer 2: 用途別トークン
 │   ├── typography.css # typo-* ユーティリティ
 │   ├── motion.css     # duration / easing トークン（--Motion-*）
+│   ├── product-theme.css    # プロダクト単位で上書きしてよい寸法・面の公開変数（issue #364）
 │   └── source-safelist.css  # @source safelist（自動生成・手で編集しない / issue #258）
 ├── themes/            # default / orange / green / violet / blue
 ├── preset.css         # 外部プロジェクト向けプリセット

package/DESIGN.md

@@ -269,6 +269,48 @@ Portal に載る要素（Dialog / Sheet / Popover / Toast 等）は DOM 上の
 `z-10` / `z-20` のような小さい素の値は「コンポーネント内部の重なり」用途で、
 このグローバルスケールの対象外。
 
+## Product Theme Override（プロダクト単位の寸法調整）
+
+マルチテーマ（Brand 10行差し替え）が切り替えるのは**色だけ**。コントロールの高さ・横 padding・
+角丸・カードの余白は、消費プロダクトが CSS 変数を上書きして調整する。className を何十箇所も
+書き換える運用（exam-kit の Card 角丸13箇所 = issue #332）を、変数1行に畳むための層。
+
+既定値は `src/styles/product-theme.css`、**上書きしてよい変数の許可リストは
+`contracts/product-theme-overrides.json` が正本**。ここに無い変数（`--Hover-*` / `--Z-*` /
+`--glass-*` など）は内部実装で、上書きすると DS を上げた瞬間に静かに壊れる。
+`npx ksk-ds lint <consumer>/src` の **P049** が消費側 CSS を検査する。
+
+| family | 変数 | 既定値 | 使う部品 |
+|---|---|---|---|
+| Control | `--Control-Height-{Xs,Sm,Md,Lg,Xl}` | 24 / 32 / 40 / 48 / 56px | Button の size |
+| Control | `--Control-Padding-X-{Xs,Sm,Md,Lg,Xl}` | 8 / 12 / 16 / 24 / 32px | Button の size |
+| Control | `--Control-Gap` / `--Control-Radius` | 8px / ピル | Button のアイコン間隔・角丸 |
+| Field | `--Field-Height-{Sm,Md,Lg}` | 36 / 48 / 56px | Input / SelectTrigger |
+| Field | `--Field-Padding-X-{Sm,Md,Lg}` / `--Field-Padding-Y` | 10 / 12 / 16px / 8px | Input / Textarea / SelectTrigger |
+| Field | `--Field-Min-Height` / `--Field-Radius` | 80px / 8px | Textarea / フィールド共通の角丸 |
+| Product | `--Product-Card-Padding` / `--Product-Card-Gap` | 24px / 24px | Card（default バリアント） |
+| Product | `--Product-Page-Padding-Y` | 24px | AdminShell の `<main>` 縦 padding |
+| Chip | `--Chip-Radius` | ピル | Chip の pill 角丸 |
+| Tabs | `--Control-Height-Md` / `--Control-Padding-X-{Sm,Md}` / `--Control-Radius` / `--Field-Radius` | 40px / 12・16px / ピル / 8px | TabsList / TabsTrigger（Control・Field を再利用） |
+
+- **Control と Field はスケールが別**。ksk のフィールドは元々ボタンより背が高く（Input は 48px、
+  Button の既定は 40px）、横 padding も狭い。片方に畳むとどちらかの実寸が変わるので分けている。
+- 参照は arbitrary value（`h-[var(--Control-Height-Md)]`）。Motion / Layering / Radius と同じ
+  「semantic 変数を Tailwind の任意値で読む」流儀に揃えてある。`@theme` のユーティリティ化はしない
+  （`:root` 以外のスコープに当てた上書きが効かなくなるため）。
+- 上書きは `:root` でも任意の要素でもよい。カスケードだけで解決するので Server Component のまま使える。
+- タップ領域（`Button size="icon-xl"` = 44px）と FAB（58px）は意図的にこのスケールの外に置いている。
+  product theme で縮められると HIG の最小タップ領域を割るため。同じ理由で **Chip の高さ・横 padding**
+  （sm/md/lg の縦 margin が「44px タッチターゲット - 本体高さ」の手計算値）と **Tabs の pill 高さ
+  （44px、Control スケールの 40/48px のどちらとも不一致）** も配線していない。
+- **Checkbox / RadioGroup / Switch**（20px の `size-5` トグル）は「コントロールの高さ」という概念が
+  当てはまらないため、この契約の対象外。
+- **AppShell / MarketingShell / MobileAppShell** はページ本文の padding をシェル自身が持たず
+  （`Container` の gutter か呼び出し側の `contentClassName` に委ねている）、対象外。
+  `AdminShell` の `<main>` だけが `--Product-Page-Padding-Y` を持つ。
+- 色は従来どおり semantic トークン（`--Surface-*` / `--Text-*` / `--Brand-*`）と Brand ランプの
+  上書きで調整する。カードの面は `--card-surface`、角丸は `--Radius-Surface` が既存の公開シーム。
+
 ## Components
 
 代表例（トークン参照で構成）。

package/bin/lint.js

@@ -2,8 +2,14 @@ import { existsSync, readFileSync, readdirSync, statSync } from "node:fs"
 import { extname, join, relative, resolve } from "node:path"
 import { spawnSync } from "node:child_process"
 import { inspectCardChildSpacing } from "./card-child-spacing.js"
+import { inspectProductThemeOverrides, loadProductThemeContract } from "./product-theme-override.js"
 
 const DEFAULT_EXTENSIONS = new Set([".js", ".jsx", ".ts", ".tsx"])
+/**
+ * CSS 専用ルール（P049）の走査対象。TSX 向けの正規表現ルールは CSS には当てず、
+ * engine: "product-theme-override" を持つルールだけをここに流す（issue #364）。
+ */
+const CSS_EXTENSIONS = new Set([".css"])
 const DEFAULT_IGNORES = [
   ".git",
   ".next",
@@ -23,13 +29,23 @@ export async function runLintCli(argv, { cwd = process.cwd(), pkgRoot = resolve(
   }
 
   const rules = loadRules(rulesPath)
+  const cssRules = rules.filter((rule) => rule.engine === "product-theme-override")
+  const sourceRules = rules.filter((rule) => rule.engine !== "product-theme-override")
+  const productThemeContract = cssRules.length > 0 ? readProductThemeContract(pkgRoot) : null
+
   const files = options.changed
     ? getChangedFiles(cwd, options)
     : collectTargetFiles(cwd, options.targets, options)
   const findings = []
 
   for (const file of files) {
-    findings.push(...lintFile(file, cwd, rules, options))
+    if (CSS_EXTENSIONS.has(extname(file))) {
+      if (productThemeContract) {
+        findings.push(...lintCssFile(file, cwd, cssRules, productThemeContract))
+      }
+      continue
+    }
+    findings.push(...lintFile(file, cwd, sourceRules, options))
   }
 
   const summary = summarize(findings)
@@ -133,7 +149,7 @@ function collect(abs, cwd, options, out) {
     }
     return
   }
-  if (stat.isFile() && DEFAULT_EXTENSIONS.has(extname(abs))) out.push(abs)
+  if (stat.isFile() && isLintableFile(abs)) out.push(abs)
 }
 
 function getChangedFiles(cwd, options) {
@@ -153,7 +169,46 @@ function getChangedFiles(cwd, options) {
     .map((name) => resolve(cwd, name))
     .filter((abs) => existsSync(abs))
     .filter((abs) => !shouldIgnorePath(normalize(relative(cwd, abs)), options))
-    .filter((abs) => DEFAULT_EXTENSIONS.has(extname(abs)))
+    .filter((abs) => isLintableFile(abs))
+}
+
+function isLintableFile(abs) {
+  const ext = extname(abs)
+  return DEFAULT_EXTENSIONS.has(ext) || CSS_EXTENSIONS.has(ext)
+}
+
+/** contracts/product-theme-overrides.json（P049 の許可リスト）を読む */
+function readProductThemeContract(pkgRoot) {
+  const path = resolve(pkgRoot, "contracts/product-theme-overrides.json")
+  if (!existsSync(path)) return null
+  try {
+    return loadProductThemeContract(JSON.parse(readFileSync(path, "utf8")))
+  } catch {
+    return null
+  }
+}
+
+/**
+ * CSS ファイルには product theme の許可リスト検査（P049）だけを当てる。
+ * TSX 向けの正規表現ルールを CSS に流すと誤検知しかしない。
+ */
+function lintCssFile(file, cwd, cssRules, contract) {
+  const rel = normalize(relative(cwd, file))
+  const source = readFileSync(file, "utf8")
+  const escape = findEscape(source, rel)
+  if (escape.valid) return []
+
+  const findings = escape.invalid ? [escape.invalid] : []
+  for (const rule of cssRules) {
+    for (const violation of inspectProductThemeOverrides(source, contract)) {
+      if (matchesRuleExclude(rule, rel, violation.name)) continue
+      findings.push({
+        ...toFinding(rule, rel, violation.line),
+        message: `${rule.message ?? "product theme の許可リスト外の変数を上書きしています"}: ${violation.name}`,
+      })
+    }
+  }
+  return findings
 }
 
 function lintFile(file, cwd, rules) {

package/bin/product-theme-override.js

@@ -0,0 +1,52 @@
+/**
+ * P049 — product theme の許可リスト外の DS 変数上書きを検出する（issue #364）
+ *
+ * 消費プロダクトの CSS が `:root { --Surface-Primary: … }` のように DS の
+ * CSS 変数を上書きするのは、契約 `contracts/product-theme-overrides.json` の
+ * `allowedVariables` に載っているものだけ。載っていない変数（`--Hover-*` /
+ * `--Z-*` / `--glass-*` などの内部実装）を上書きすると、DS を上げた瞬間に
+ * 静かに壊れる。lint で見えるようにする。
+ *
+ * 判定:
+ *   1. CSS のコメントを落とす
+ *   2. カスタムプロパティ宣言（`--Foo: value;`）を行番号付きで拾う
+ *   3. `dsVariableNamespaces` のどれかで始まり、`allowedVariables` に無いものを違反とする
+ *
+ * `var(--Foo)` の**参照**は対象外（読むのは自由）。宣言だけを見る。
+ */
+
+/** CSS コメントを、行数を保ったまま空白に置き換える */
+function stripCssComments(source) {
+  return source.replace(/\/\*[\s\S]*?\*\//g, (block) => block.replace(/[^\n]/g, " "))
+}
+
+/**
+ * @param {string} source CSS ソース
+ * @param {{ allowed: Set<string>, namespaces: string[] }} contract
+ * @returns {Array<{ line: number, name: string }>}
+ */
+export function inspectProductThemeOverrides(source, contract) {
+  const stripped = stripCssComments(source)
+  const findings = []
+  // 宣言のみを拾う。`var(--Foo, …)` の参照はコロンの前に `(` が来るため一致しない。
+  const DECLARATION = /(^|[;{}\s])(--[A-Za-z0-9_-]+)\s*:/g
+
+  for (const match of stripped.matchAll(DECLARATION)) {
+    const name = match[2]
+    if (contract.allowed.has(name)) continue
+    if (!contract.namespaces.some((prefix) => name.startsWith(prefix))) continue
+    findings.push({
+      line: stripped.slice(0, match.index).split(/\r?\n/).length,
+      name,
+    })
+  }
+  return findings
+}
+
+/** 契約 JSON から判定に使う形へ畳む */
+export function loadProductThemeContract(contract) {
+  return {
+    allowed: new Set(Object.values(contract.allowedVariables ?? {}).flat()),
+    namespaces: Array.isArray(contract.dsVariableNamespaces) ? contract.dsVariableNamespaces : [],
+  }
+}

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.57.0",
+    "version": "1.58.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 68,

package/contracts/product-theme-overrides.json

@@ -0,0 +1,171 @@
+{
+  "meta": {
+    "name": "KSK Design System — Product Theme Override API",
+    "version": "1.0.0",
+    "issue": 364,
+    "description": "消費プロダクトが DS の正本を複製せず、自分のリポジトリの CSS だけで上書きしてよい公開 CSS 変数の契約。既定値の定義は src/styles/product-theme.css、色トークンの定義は src/styles/semantic.css / src/themes/*.css。",
+    "sourceOfTruth": [
+      "src/styles/product-theme.css",
+      "src/styles/semantic.css",
+      "src/preset.css"
+    ]
+  },
+  "consumerContract": {
+    "importOrder": [
+      "@import \"ksk-design-system/preset\";",
+      "@import \"./themes/my-client.css\";",
+      "@import \"./product-theme.css\";"
+    ],
+    "scope": ":root（アプリ全体）または任意の要素（その配下だけ）",
+    "allowedPattern": "preset の後に、ここで許可された CSS 変数だけを上書きする",
+    "forbiddenPattern": "消費プロダクト側に tokens.json / semantic.css / preset.css のコピーや独自 Tailwind preset を作らない。許可リストに無い内部変数を上書きしない",
+    "lintRule": "P049（npx ksk-ds lint が消費側 CSS を検査する）"
+  },
+  "allowedVariables": {
+    "brandColor": [
+      "--Primitive-Brand-50",
+      "--Primitive-Brand-100",
+      "--Primitive-Brand-200",
+      "--Primitive-Brand-300",
+      "--Primitive-Brand-400",
+      "--Primitive-Brand-500",
+      "--Primitive-Brand-600",
+      "--Primitive-Brand-700",
+      "--Primitive-Brand-800",
+      "--Primitive-Brand-900"
+    ],
+    "semanticColor": [
+      "--Surface-Primary",
+      "--Surface-Secondary",
+      "--Surface-Tertiary",
+      "--Surface-Accent-Primary-Light",
+      "--Text-High-Emphasis",
+      "--Text-Medium-Emphasis",
+      "--Text-Low-Emphasis",
+      "--Text-Accent-Primary",
+      "--Text-on-Inverse",
+      "--Border-Low-Emphasis",
+      "--Border-Medium-Emphasis",
+      "--Border-Accent-Primary",
+      "--Brand-Primary",
+      "--Brand-Action",
+      "--Focus-High-Emphasis",
+      "--card-surface"
+    ],
+    "controlSize": [
+      "--Control-Height-Xs",
+      "--Control-Height-Sm",
+      "--Control-Height-Md",
+      "--Control-Height-Lg",
+      "--Control-Height-Xl",
+      "--Control-Padding-X-Xs",
+      "--Control-Padding-X-Sm",
+      "--Control-Padding-X-Md",
+      "--Control-Padding-X-Lg",
+      "--Control-Padding-X-Xl",
+      "--Control-Gap"
+    ],
+    "fieldSize": [
+      "--Field-Height-Sm",
+      "--Field-Height-Md",
+      "--Field-Height-Lg",
+      "--Field-Padding-X-Sm",
+      "--Field-Padding-X-Md",
+      "--Field-Padding-X-Lg",
+      "--Field-Padding-Y",
+      "--Field-Min-Height"
+    ],
+    "shape": [
+      "--Control-Radius",
+      "--Field-Radius",
+      "--Radius-Surface",
+      "--Radius-Modal",
+      "--Radius-Sheet"
+    ],
+    "productSpacing": [
+      "--Product-Card-Padding",
+      "--Product-Card-Gap",
+      "--Product-Page-Padding-Y",
+      "--Space-Section-xs",
+      "--Space-Section-sm",
+      "--Space-Section-md",
+      "--Space-Section-lg",
+      "--Space-Section-xl",
+      "--Space-Section-2xl"
+    ],
+    "chip": [
+      "--Chip-Radius"
+    ],
+    "motion": [
+      "--Motion-Duration-Fast",
+      "--Motion-Duration-Base",
+      "--Motion-Duration-Slow",
+      "--Motion-Duration-Slower"
+    ]
+  },
+  "dsVariableNamespaces": [
+    "--Primitive-",
+    "--Categorical-",
+    "--Surface-",
+    "--Text-",
+    "--Border-",
+    "--Brand-",
+    "--Object-",
+    "--Overlay-",
+    "--Focus-",
+    "--Caution-",
+    "--Success-",
+    "--Warning-",
+    "--Info-",
+    "--Hover-",
+    "--Active-",
+    "--Disable",
+    "--Motion-",
+    "--Z-",
+    "--Radius-",
+    "--Space-Section-",
+    "--Control-",
+    "--Field-",
+    "--Product-",
+    "--Chip-",
+    "--glass-",
+    "--card-surface"
+  ],
+  "namespaceNote": "P049 が「DS の変数を上書きしている」と判定する接頭辞。ここに該当し allowedVariables に無い変数を消費側 CSS が宣言していたら契約違反。shadcn 互換の小文字ブリッジ（--primary / --border 等）は消費側アプリが同名変数を持つことがあるため対象外。",
+  "wiredComponents": {
+    "Button": [
+      "--Control-Height-*",
+      "--Control-Padding-X-*",
+      "--Control-Gap",
+      "--Control-Radius"
+    ],
+    "Input": ["--Field-Height-Md", "--Field-Padding-X-Md", "--Field-Radius"],
+    "Textarea": [
+      "--Field-Min-Height",
+      "--Field-Padding-X-Md",
+      "--Field-Padding-Y",
+      "--Field-Radius"
+    ],
+    "SelectTrigger": ["--Field-Height-*", "--Field-Padding-X-*", "--Field-Radius"],
+    "Card": ["--Product-Card-Padding", "--Product-Card-Gap", "--Radius-Surface", "--card-surface"],
+    "Tabs": [
+      "--Control-Height-Md",
+      "--Control-Padding-X-Sm",
+      "--Control-Padding-X-Md",
+      "--Control-Radius",
+      "--Field-Radius"
+    ],
+    "Chip": ["--Chip-Radius"],
+    "AdminShell": ["--Product-Page-Padding-Y"]
+  },
+  "aiGuidance": [
+    "プロダクト差分は、まずこの契約の CSS 変数上書きで表現する。className での個別上書きを何十箇所にも散らさない。",
+    "許可リストに無い変数（--Hover-* / --glass-* / --Z-* などの内部変数）は消費側から上書きしない。必要なら DS 側に issue を立てて公開変数を増やす。",
+    "DS 側で新しくサイズ・角丸を持つコンポーネントを作るときは、固定の h-* / px-* / rounded-* ではなく Control / Field 変数を arbitrary value（h-[var(--Control-Height-Md)]）で参照する。",
+    "Control（Button 系）と Field（Input / Textarea / SelectTrigger）はスケールが別。ksk のフィールドは元々ボタンより背が高いため、片方に畳むと実寸が変わる。",
+    "色は semantic トークン経由でのみ上書きする。Primitive を直接参照するのは Brand ランプ（--Primitive-Brand-*）だけが例外。",
+    "Checkbox / RadioGroup / Switch（20px の size-5 トグル）は意図的にこの契約の対象外。「コントロールの高さ」という概念が当てはまらない固定サイズのため、Control 変数を当てると意味が壊れる。",
+    "Chip は角丸（--Chip-Radius）だけを配線し、高さ・横 padding は配線しない。sm/md/lg の縦 margin（my-*）は「44px タッチターゲット - 本体高さ」ちょうどの手計算値で、height を変数化すると当たり判定の math が壊れる。",
+    "AppShell / MarketingShell / MobileAppShell はページ本文の padding をシェル自身が持たない（Container の gutter か呼び出し側の contentClassName に委ねている）ため product theme の対象外。AdminShell の <main> だけが --Product-Page-Padding-Y を持つ。"
+  ]
+}

package/contracts/rules.json

@@ -1,8 +1,8 @@
 {
   "meta": {
     "name": "KSK Design System — Rules Contracts",
-    "version": "1.1.0",
-    "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。禁止パターン48件・AIアンチパターン10件。"
+    "version": "1.2.0",
+    "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。禁止パターン49件・AIアンチパターン10件。"
   },
   "prohibited": [
     {
@@ -441,6 +441,18 @@
       "message": "グローバルな重なり層に素の z-index を使わない",
       "fix": "z-[var(--Z-{Sticky,Nav,Overlay,Modal,Popover,Toast,Tooltip,SkipLink})] を使用",
       "note": "z-50 一律だと Portal のマウント順（＝開いた順）で勝敗が決まる。z-10 / z-20 のコンポーネント内部の重なりは対象外"
+    },
+    {
+      "id": "P049",
+      "severity": "error",
+      "category": "token",
+      "pattern": "product-theme-override",
+      "engine": "product-theme-override",
+      "appliesTo": ["*.css"],
+      "excludes": [],
+      "message": "product theme の許可リストに無い DS の CSS 変数を消費側で上書きしている",
+      "fix": "contracts/product-theme-overrides.json の allowedVariables にある変数だけを上書きする。足りない場合は DS 側に公開変数の追加を依頼する",
+      "note": "対象は .css の宣言のみ（var() での参照は自由）。--Hover-* / --Z-* / --glass-* のような内部変数を上書きすると DS を上げた瞬間に静かに壊れる。shadcn 互換の小文字ブリッジ（--primary 等）は消費側アプリと名前が衝突しうるため対象外（issue #364）"
     }
   ],
   "aiPatterns": {

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "1.57.0",
+    "version": "1.58.0",
     "description": "semantic / semanticDark トークン（var(--Primitive-*) 参照）を実 hex に解決したサイドカー生成物。hex はデフォルト（Blue）テーマでの解決値であり、Brand 系（meta.themeDependentKeys に列挙）はテーマ差し替え（orange/green/violet 等）で実色が変わる。テーマ別の完全解決値は `ksk-design-system/native` エクスポート（バンドル済み native トークンモジュール）の themes を参照。tokens.json 本体のスキーマは変更せず、AI がこのファイルだけで実色を把握できるようにし、primitive 値の変更による semantic 実色のドリフトを --check で機械検出する。",
     "generatedBy": "scripts/generate-token-hex-cache.mjs",
     "theme": "default",

package/dist/class-names.js

@@ -1,2 +1,2 @@
-import { t as e } from "./server-variants-usol4GK5.js";
+import { t as e } from "./server-variants-B3uIQjUG.js";
 export { e as buttonVariants };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { a as e, i as t, l as n, n as r, o as i, r as a, s as o, t as s } from "./prompt-coordinator-sBFZKQIX.js";
-import { t as c } from "./server-variants-usol4GK5.js";
+import { t as c } from "./server-variants-B3uIQjUG.js";
 import * as l from "react";
 import u, { createContext as d, useCallback as f, useContext as p, useEffect as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
 import { Accordion as y, AlertDialog as b, Avatar as x, Checkbox as S, Collapsible as C, Dialog as w, DropdownMenu as T, HoverCard as E, Label as D, Popover as O, Progress as k, RadioGroup as ee, ScrollArea as A, Select as j, Separator as te, Slider as M, Switch as ne, Tabs as N, Tooltip as P } from "radix-ui";
@@ -640,7 +640,7 @@ function xt({ className: e, ...t }) {
 //#region src/components/ui/card.tsx
 var St = B("bg-[var(--card-surface,var(--Surface-Primary))] [&>*]:[--card-surface:initial] text-[var(--Text-High-Emphasis)] flex flex-col rounded-[var(--Radius-Surface)] ksk-squircle border border-[var(--Border-Low-Emphasis)] shadow-[var(--shadow-md)] @container", {
 	variants: { variant: {
-		default: "gap-6 p-6",
+		default: "gap-[var(--Product-Card-Gap)] p-[var(--Product-Card-Padding)]",
 		media: "gap-0 p-0 overflow-hidden"
 	} },
 	defaultVariants: { variant: "default" }
@@ -1747,7 +1747,7 @@ function xr({ enabled: e, value: t, defaultValue: n, forwardedRef: r }) {
 //#endregion
 //#region src/components/ui/input.tsx
 var Sr = [
-	"flex h-12 w-full rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors",
+	"flex h-[var(--Field-Height-Md)] w-full rounded-[var(--Field-Radius)] border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-[var(--Field-Padding-X-Md)] typo-body-md text-[var(--Text-High-Emphasis)] transition-colors",
 	"file:border-0 file:bg-transparent file:typo-body-md",
 	"placeholder:text-[var(--Text-Low-Emphasis)]",
 	"focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 focus-visible:border-[var(--Border-Accent-Primary)]",
@@ -6305,11 +6305,11 @@ function Ec({ className: e, children: t, description: n, id: r, ...i }) {
 }
 //#endregion
 //#region src/components/ui/select.tsx
-var Dc = B("flex w-full items-center justify-between rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] placeholder:text-[var(--Text-Low-Emphasis)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", {
+var Dc = B("flex w-full items-center justify-between rounded-[var(--Field-Radius)] border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] placeholder:text-[var(--Text-Low-Emphasis)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", {
 	variants: { size: {
-		sm: "h-9 px-2.5 typo-body-sm",
-		default: "h-12 px-3 typo-body-md",
-		lg: "h-14 px-4 typo-body-md"
+		sm: "h-[var(--Field-Height-Sm)] px-[var(--Field-Padding-X-Sm)] typo-body-sm",
+		default: "h-[var(--Field-Height-Md)] px-[var(--Field-Padding-X-Md)] typo-body-md",
+		lg: "h-[var(--Field-Height-Lg)] px-[var(--Field-Padding-X-Lg)] typo-body-md"
 	} },
 	defaultVariants: { size: "default" }
 });
@@ -7364,7 +7364,7 @@ function Ml({ className: e, variant: t = "default", ...n }) {
 		children: /* @__PURE__ */ R(N.List, {
 			"data-slot": "tabs-list",
 			"data-variant": t,
-			className: G("inline-flex w-fit max-w-full overflow-x-auto items-center gap-1 bg-[var(--Surface-Tertiary)] p-1 text-[var(--Text-Medium-Emphasis)]", t === "pill" ? "h-11 rounded-full" : "h-10 rounded-lg", e),
+			className: G("inline-flex w-fit max-w-full overflow-x-auto items-center gap-1 bg-[var(--Surface-Tertiary)] p-1 text-[var(--Text-Medium-Emphasis)]", t === "pill" ? "h-11 rounded-[var(--Control-Radius)]" : "h-[var(--Control-Height-Md)] rounded-[var(--Field-Radius)]", e),
 			...n
 		})
 	});
@@ -7374,7 +7374,7 @@ function Nl({ className: e, ...t }) {
 	return /* @__PURE__ */ R(N.Trigger, {
 		"data-slot": "tabs-trigger",
 		"data-variant": n,
-		className: G("inline-flex items-center justify-center whitespace-nowrap typo-label-sm transition-all", n === "pill" ? "relative rounded-full px-4 py-1.5 gap-1.5" : "rounded-lg px-3 py-1.5", n === "pill" && "before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:min-h-11 before:content-['']", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-[var(--Surface-Primary)] data-[state=active]:text-[var(--Text-High-Emphasis)] data-[state=active]:shadow-sm", n === "default" && "hover:text-[var(--Text-High-Emphasis)]", n === "pill" && "data-[state=inactive]:hover:text-[var(--Text-High-Emphasis)]", e),
+		className: G("inline-flex items-center justify-center whitespace-nowrap typo-label-sm transition-all", n === "pill" ? "relative rounded-[var(--Control-Radius)] px-[var(--Control-Padding-X-Md)] py-1.5 gap-1.5" : "rounded-[var(--Field-Radius)] px-[var(--Control-Padding-X-Sm)] py-1.5", n === "pill" && "before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:min-h-11 before:content-['']", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-[var(--Surface-Primary)] data-[state=active]:text-[var(--Text-High-Emphasis)] data-[state=active]:shadow-sm", n === "default" && "hover:text-[var(--Text-High-Emphasis)]", n === "pill" && "data-[state=inactive]:hover:text-[var(--Text-High-Emphasis)]", e),
 		...t
 	});
 }
@@ -7419,7 +7419,7 @@ function Fl({ className: e, autoGrow: t, showCount: n, maxLength: r, value: i, d
 		value: i,
 		defaultValue: a,
 		maxLength: r,
-		className: G("flex min-h-[80px] w-full rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors", "placeholder:text-[var(--Text-Low-Emphasis)]", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 focus-visible:border-[var(--Border-Accent-Primary)]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--Border-Caution)]", t && "resize-none overflow-hidden", e),
+		className: G("flex min-h-[var(--Field-Min-Height)] w-full rounded-[var(--Field-Radius)] border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-[var(--Field-Padding-X-Md)] py-[var(--Field-Padding-Y)] typo-body-md text-[var(--Text-High-Emphasis)] transition-colors", "placeholder:text-[var(--Text-Low-Emphasis)]", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 focus-visible:border-[var(--Border-Accent-Primary)]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--Border-Caution)]", t && "resize-none overflow-hidden", e),
 		onChange: y,
 		onCompositionStart: (e) => {
 			g(), s?.(e);
@@ -12715,7 +12715,7 @@ var Nd = B("inline-flex items-center justify-center gap-1.5 whitespace-nowrap cu
 			tile: "size-12 shrink-0 typo-body-md"
 		},
 		shape: {
-			pill: "rounded-full",
+			pill: "rounded-[var(--Chip-Radius)]",
 			square: "rounded-sm"
 		}
 	},
@@ -12758,7 +12758,7 @@ function Pd({ className: e, id: t, style: n, title: r, variant: i = "filled", si
 		md: `h-8 w-11 ${E}`,
 		lg: `h-9 w-11 ${E}`,
 		tile: "h-12 w-11"
-	}[v], O = y === "square" || v === "tile" ? "rounded-r-sm" : "rounded-r-full";
+	}[v], O = y === "square" || v === "tile" ? "rounded-r-sm" : "rounded-r-[var(--Chip-Radius)]";
 	if (u) {
 		let l = G("relative", Nd({
 			variant: i,
@@ -14047,7 +14047,7 @@ function Kf({ className: e, sidebar: t, header: n, children: r, sidebarWidth: i
 					className: "flex-1 overflow-auto",
 					children: /* @__PURE__ */ R(Uf, {
 						size: "fluid",
-						className: "py-6",
+						className: "py-[var(--Product-Page-Padding-Y)]",
 						children: r
 					})
 				})]

package/dist/{server-variants-usol4GK5.js → server-variants-B3uIQjUG.js}

@@ -1,39 +1,39 @@
 import { cva as e } from "class-variance-authority";
 //#region src/lib/server-variants/button-variants.ts
-var t = e("inline-flex items-center justify-center gap-2 whitespace-nowrap typo-label-md transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer", {
+var t = e("inline-flex items-center justify-center gap-[var(--Control-Gap)] whitespace-nowrap typo-label-md transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer", {
 	variants: {
 		variant: {
-			default: "bg-[var(--Brand-Primary)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] rounded-full",
-			secondary: "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)] border border-[var(--Border-Medium-Emphasis)] hover:bg-[var(--Hover-Secondary-Button)] rounded-full",
-			"secondary-switch": "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] border border-[var(--Border-Accent-Primary)] hover:bg-[var(--Hover-Secondary-Button)] rounded-full",
-			tertiary: "bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] border border-[var(--Border-Medium-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] rounded-full",
-			ghost: "text-[var(--Text-Accent-Primary)] hover:bg-[var(--Hover-Ghost-Button)] rounded-full",
-			destructive: "bg-[var(--Caution-Base)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Destructive-Button)] active:bg-[var(--Active-Destructive-Button)] rounded-full",
+			default: "bg-[var(--Brand-Primary)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] rounded-[var(--Control-Radius)]",
+			secondary: "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)] border border-[var(--Border-Medium-Emphasis)] hover:bg-[var(--Hover-Secondary-Button)] rounded-[var(--Control-Radius)]",
+			"secondary-switch": "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] border border-[var(--Border-Accent-Primary)] hover:bg-[var(--Hover-Secondary-Button)] rounded-[var(--Control-Radius)]",
+			tertiary: "bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] border border-[var(--Border-Medium-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] rounded-[var(--Control-Radius)]",
+			ghost: "text-[var(--Text-Accent-Primary)] hover:bg-[var(--Hover-Ghost-Button)] rounded-[var(--Control-Radius)]",
+			destructive: "bg-[var(--Caution-Base)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Destructive-Button)] active:bg-[var(--Active-Destructive-Button)] rounded-[var(--Control-Radius)]",
 			link: "text-[var(--Text-Accent-Primary)] underline-offset-4 hover:underline",
-			glass: "glass glass-specular text-[var(--Text-High-Emphasis)] transition-all duration-[var(--Motion-Duration-Slow)] ease-[var(--Motion-Easing-Bounce)] hover:brightness-[1.06] active:scale-[0.96] active:brightness-110 rounded-full",
-			"glass-inverse": "glass glass-specular glass-inverse text-[var(--glass-button-text)] transition-all duration-[var(--Motion-Duration-Slow)] ease-[var(--Motion-Easing-Bounce)] hover:brightness-[1.06] active:scale-[0.96] active:brightness-110 rounded-full",
-			"glass-accent": "glass glass-specular glass-accent text-[var(--Text-on-Inverse)] transition-all duration-[var(--Motion-Duration-Slow)] ease-[var(--Motion-Easing-Bounce)] hover:brightness-[1.06] active:scale-[0.96] active:brightness-110 rounded-full",
-			accent: "bg-gradient-to-r from-[var(--Brand-Primary)] to-[var(--Brand-Action)] text-[var(--Text-on-Inverse)] border border-transparent hover:opacity-90 rounded-full",
-			inverse: "bg-[var(--Surface-Primary)] text-[var(--Brand-Primary)] 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)] rounded-full",
-			"ghost-inverse": "border border-[var(--Primitive-White-Alpha-300)] bg-transparent text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-White-Alpha-200)] hover:border-[var(--Primitive-White-Alpha-900)] active:bg-[var(--Primitive-White-Alpha-300)] disabled:border-[var(--Primitive-White-Alpha-200)] disabled:text-[var(--Primitive-White-Alpha-300)] rounded-full"
+			glass: "glass glass-specular text-[var(--Text-High-Emphasis)] transition-all duration-[var(--Motion-Duration-Slow)] ease-[var(--Motion-Easing-Bounce)] hover:brightness-[1.06] active:scale-[0.96] active:brightness-110 rounded-[var(--Control-Radius)]",
+			"glass-inverse": "glass glass-specular glass-inverse text-[var(--glass-button-text)] transition-all duration-[var(--Motion-Duration-Slow)] ease-[var(--Motion-Easing-Bounce)] hover:brightness-[1.06] active:scale-[0.96] active:brightness-110 rounded-[var(--Control-Radius)]",
+			"glass-accent": "glass glass-specular glass-accent text-[var(--Text-on-Inverse)] transition-all duration-[var(--Motion-Duration-Slow)] ease-[var(--Motion-Easing-Bounce)] hover:brightness-[1.06] active:scale-[0.96] active:brightness-110 rounded-[var(--Control-Radius)]",
+			accent: "bg-gradient-to-r from-[var(--Brand-Primary)] to-[var(--Brand-Action)] text-[var(--Text-on-Inverse)] border border-transparent hover:opacity-90 rounded-[var(--Control-Radius)]",
+			inverse: "bg-[var(--Surface-Primary)] text-[var(--Brand-Primary)] 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)] rounded-[var(--Control-Radius)]",
+			"ghost-inverse": "border border-[var(--Primitive-White-Alpha-300)] bg-transparent text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-White-Alpha-200)] hover:border-[var(--Primitive-White-Alpha-900)] active:bg-[var(--Primitive-White-Alpha-300)] disabled:border-[var(--Primitive-White-Alpha-200)] disabled:text-[var(--Primitive-White-Alpha-300)] rounded-[var(--Control-Radius)]"
 		},
 		size: {
-			xs: "h-6 px-2 typo-label-xs",
-			sm: "h-8 px-3 typo-label-sm",
-			default: "h-10 px-4 typo-label-md",
-			lg: "h-12 px-6 typo-label-md",
-			xl: "h-14 px-8 typo-label-lg",
-			hero: "min-h-14 rounded-full px-6 typo-label-lg",
-			icon: "size-10",
-			"icon-sm": "size-8",
-			"icon-lg": "size-12",
+			xs: "h-[var(--Control-Height-Xs)] px-[var(--Control-Padding-X-Xs)] typo-label-xs",
+			sm: "h-[var(--Control-Height-Sm)] px-[var(--Control-Padding-X-Sm)] typo-label-sm",
+			default: "h-[var(--Control-Height-Md)] px-[var(--Control-Padding-X-Md)] typo-label-md",
+			lg: "h-[var(--Control-Height-Lg)] px-[var(--Control-Padding-X-Lg)] typo-label-md",
+			xl: "h-[var(--Control-Height-Xl)] px-[var(--Control-Padding-X-Xl)] typo-label-lg",
+			hero: "min-h-[var(--Control-Height-Xl)] rounded-[var(--Control-Radius)] px-[var(--Control-Padding-X-Lg)] typo-label-lg",
+			icon: "size-[var(--Control-Height-Md)]",
+			"icon-sm": "size-[var(--Control-Height-Sm)]",
+			"icon-lg": "size-[var(--Control-Height-Lg)]",
 			"icon-xl": "size-11",
 			"icon-fab": "size-[58px]",
-			match: "h-12 px-4 typo-label-md"
+			match: "h-[var(--Control-Height-Lg)] px-[var(--Control-Padding-X-Md)] typo-label-md"
 		},
 		layout: {
 			horizontal: "",
-			vertical: "flex-col gap-1 h-14 rounded-2xl py-2 typo-label-sm"
+			vertical: "flex-col gap-1 h-[var(--Control-Height-Xl)] rounded-2xl py-2 typo-label-sm"
 		}
 	},
 	defaultVariants: {

package/dist/types/components/ui/select.d.ts

@@ -4,6 +4,9 @@ import { type VariantProps } from "class-variance-authority";
 /**
  * SelectTrigger のサイズ規格。Button/Input と揃えて 3 段階を用意。
  * 既定は default (h-12) — 既存挙動と完全互換。
+ *
+ * 高さ・横 padding・角丸は product theme の公開変数（`--Field-*`）を参照する。
+ * 既定値は従来の固定クラスと同値（issue #364）。
  */
 declare const selectTriggerVariants: (props?: {
     size?: "default" | "sm" | "lg";

package/dist/types/lib/server-variants/button-variants.d.ts

@@ -9,6 +9,13 @@ import { type VariantProps } from "class-variance-authority";
  * 定義はここに集約する。
  *
  * 変更時は button.tsx の Button コンポーネントの見た目に直接影響する。
+ *
+ * 内寸（高さ・横 padding・gap・角丸）は固定の Tailwind クラスではなく
+ * product theme の公開変数（`--Control-*`）を arbitrary value で参照する。
+ * 既定値は src/styles/product-theme.css にあり、従来の h-10 / px-4 等と同値
+ * （issue #364）。消費プロダクトはこの変数を上書きするだけで、className を
+ * 何十箇所も書き換えずにボタンの寸法を自分の製品に合わせられる。
+ * 許可リストの正本は contracts/product-theme-overrides.json。
  */
 declare const buttonVariants: (props?: {
     variant?: "accent" | "link" | "default" | "secondary" | "secondary-switch" | "tertiary" | "ghost" | "destructive" | "glass" | "glass-inverse" | "glass-accent" | "inverse" | "ghost-inverse";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "1.57.0",
+  "version": "1.58.0",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",

package/src/preset.css

@@ -21,6 +21,9 @@
 @import "./styles/glass.css";
 @import "./styles/motion.css";
 @import "./styles/sheet-keyboard.css";
+/* プロダクト単位で上書きしてよい寸法・面の公開変数（issue #364）。
+   許可リストの正本は contracts/product-theme-overrides.json。 */
+@import "./styles/product-theme.css";
 /* DS 内部ユーティリティの safelist（自動生成 / issue #258）。
    消費側の @source が無い・パスがずれていても DS のクラス CSS が生成される保険。 */
 @import "./styles/source-safelist.css";

package/src/styles/product-theme.css

@@ -0,0 +1,90 @@
+/* =============================================================
+   KSK Design System — Product Theme Override API（issue #364）
+
+   マルチテーマ（Brand 10行差し替え）が扱うのは「色」だけで、コントロールの
+   高さ・横 padding・角丸・カードの余白といった**寸法**をプロダクト単位で
+   変える口が無かった。消費側は className で個別に上書きするしかなく、
+   同じ上書きが何十箇所にも散る（exam-kit の Card 角丸13箇所 = issue #332）。
+
+   ここはその「公開して良い CSS 変数」の既定値。消費プロダクトは preset の
+   後ろに自分の CSS を1枚置き、この変数だけを上書きする。
+
+     @import "ksk-design-system/preset";
+     @import "./themes/my-client.css";   … Brand 10行（色）
+     @import "./product-theme.css";      … ここの変数（寸法・面）
+
+   機械可読な許可リストは contracts/product-theme-overrides.json が正本。
+   **ここに無い変数は公開契約ではない**（内部実装なので予告なく変わる）。
+   許可リスト外の上書きは `npx ksk-ds lint` の P049 が検出する。
+
+   既定値は現行実装の固定 Tailwind クラス（h-10 / px-4 …）と 1px も違わない。
+   上書きしない限り見た目は変わらない（__tests__/product-theme-defaults.test.tsx
+   が origin/main 相当の実寸で固定している）。
+
+   スコープ:
+   - `:root` に置けばアプリ全体に効く。
+   - 任意の要素（`<div style="--Control-Height-Md: 3rem">` や
+     `className="[--Control-Height-Md:3rem]"`）に置けばその配下だけに効く。
+     コンポーネント側は `h-[var(--Control-Height-Md)]` の形で参照しており、
+     CSS カスタムプロパティのカスケードで解決するため、React context も
+     prop 追加も要らない（Server Component のまま使える）。
+   ============================================================= */
+
+:root {
+  /* ─── Control: Button 系の内寸 ───
+     5段スケール。Button の size バリアント xs / sm / default(=Md) / lg / xl と
+     1対1で対応する。既定値は h-6/h-8/h-10/h-12/h-14・px-2/px-3/px-4/px-6/px-8。 */
+  --Control-Height-Xs: 1.5rem;   /* 24px — h-6 */
+  --Control-Height-Sm: 2rem;     /* 32px — h-8 */
+  --Control-Height-Md: 2.5rem;   /* 40px — h-10（Button の既定） */
+  --Control-Height-Lg: 3rem;     /* 48px — h-12 */
+  --Control-Height-Xl: 3.5rem;   /* 56px — h-14 */
+
+  --Control-Padding-X-Xs: 0.5rem;   /* 8px  — px-2 */
+  --Control-Padding-X-Sm: 0.75rem;  /* 12px — px-3 */
+  --Control-Padding-X-Md: 1rem;     /* 16px — px-4 */
+  --Control-Padding-X-Lg: 1.5rem;   /* 24px — px-6 */
+  --Control-Padding-X-Xl: 2rem;     /* 32px — px-8 */
+
+  /* アイコンとラベルの間隔（Button のベース gap-2） */
+  --Control-Gap: 0.5rem;         /* 8px */
+
+  /* Button の角丸。既定はピル（rounded-full 相当）。
+     角ばったボタンにしたいプロダクトはここを 0.5rem 等に落とす。 */
+  --Control-Radius: 9999px;
+
+  /* ─── Field: Input / Textarea / SelectTrigger の内寸 ───
+     Control とは別スケール。ksk のフィールドは元々ボタンより背が高く
+     （Input は h-12）、横 padding も狭い（px-3）。同じ変数に畳むと
+     どちらかの実寸が変わってしまうため、独立した family として持つ。 */
+  --Field-Height-Sm: 2.25rem;   /* 36px — h-9（SelectTrigger sm） */
+  --Field-Height-Md: 3rem;      /* 48px — h-12（Input / SelectTrigger の既定） */
+  --Field-Height-Lg: 3.5rem;    /* 56px — h-14（SelectTrigger lg） */
+
+  --Field-Padding-X-Sm: 0.625rem; /* 10px — px-2.5 */
+  --Field-Padding-X-Md: 0.75rem;  /* 12px — px-3（Input / Textarea の既定） */
+  --Field-Padding-X-Lg: 1rem;     /* 16px — px-4 */
+
+  --Field-Padding-Y: 0.5rem;      /* 8px  — Textarea の py-2 */
+  --Field-Min-Height: 5rem;       /* 80px — Textarea の min-h */
+
+  /* Input / Textarea / SelectTrigger の角丸（rounded-lg = 8px） */
+  --Field-Radius: 0.5rem;
+
+  /* ─── Product: カードの余白リズム ───
+     面の色は `--card-surface`、角丸は `--Radius-Surface` が既に公開契約なので
+     ここでは重複させない（許可リストには両方載せている）。 */
+  --Product-Card-Padding: 1.5rem; /* 24px — p-6 */
+  --Product-Card-Gap: 1.5rem;     /* 24px — gap-6 */
+
+  /* AdminShell の本文（<main>）縦 padding。既定は py-6 と同値。
+     AppShell / MarketingShell / MobileAppShell はページ本文の padding を
+     シェル自身が持たず（Container の gutter か呼び出し側の contentClassName に
+     委ねている）ため、対象外（issue #364 追補）。 */
+  --Product-Page-Padding-Y: 1.5rem; /* 24px — py-6 */
+
+  /* Chip のピル角丸。Button の --Control-Radius とは独立させてある。
+     プロダクトによってはボタンを角ばらせつつチップだけピルのまま、といった
+     組み合わせがあり得るため（issue #364 追補）。 */
+  --Chip-Radius: 9999px; /* rounded-full 相当 */
+}

package/src/styles/source-safelist.css

@@ -387,6 +387,8 @@
 @source inline("gap-4");
 @source inline("gap-6");
 @source inline("gap-8");
+@source inline("gap-[var(--Control-Gap)]");
+@source inline("gap-[var(--Product-Card-Gap)]");
 @source inline("gap-x-2");
 @source inline("gap-x-4");
 @source inline("gap-y-1");
@@ -440,6 +442,14 @@
 @source inline("h-[58px]");
 @source inline("h-[5px]");
 @source inline("h-[60px]");
+@source inline("h-[var(--Control-Height-Lg)]");
+@source inline("h-[var(--Control-Height-Md)]");
+@source inline("h-[var(--Control-Height-Sm)]");
+@source inline("h-[var(--Control-Height-Xl)]");
+@source inline("h-[var(--Control-Height-Xs)]");
+@source inline("h-[var(--Field-Height-Lg)]");
+@source inline("h-[var(--Field-Height-Md)]");
+@source inline("h-[var(--Field-Height-Sm)]");
 @source inline("h-[var(--radix-select-trigger-height)]");
 @source inline("h-auto");
 @source inline("h-full");
@@ -609,6 +619,8 @@
 @source inline("min-h-[66px]");
 @source inline("min-h-[80px]");
 @source inline("min-h-[inherit]");
+@source inline("min-h-[var(--Control-Height-Xl)]");
+@source inline("min-h-[var(--Field-Min-Height)]");
 @source inline("min-h-dvh");
 @source inline("min-h-full");
 @source inline("min-h-screen");
@@ -687,6 +699,7 @@
 @source inline("p-4");
 @source inline("p-6");
 @source inline("p-8");
+@source inline("p-[var(--Product-Card-Padding)]");
 @source inline("p-px");
 @source inline("paused");
 @source inline("pb-0.5");
@@ -753,7 +766,14 @@
 @source inline("px-4!");
 @source inline("px-5");
 @source inline("px-6");
-@source inline("px-8");
+@source inline("px-[var(--Control-Padding-X-Lg)]");
+@source inline("px-[var(--Control-Padding-X-Md)]");
+@source inline("px-[var(--Control-Padding-X-Sm)]");
+@source inline("px-[var(--Control-Padding-X-Xl)]");
+@source inline("px-[var(--Control-Padding-X-Xs)]");
+@source inline("px-[var(--Field-Padding-X-Lg)]");
+@source inline("px-[var(--Field-Padding-X-Md)]");
+@source inline("px-[var(--Field-Padding-X-Sm)]");
 @source inline("py-0.5");
 @source inline("py-1");
 @source inline("py-1.5");
@@ -769,6 +789,8 @@
 @source inline("py-5");
 @source inline("py-6");
 @source inline("py-8");
+@source inline("py-[var(--Field-Padding-Y)]");
+@source inline("py-[var(--Product-Page-Padding-Y)]");
 @source inline("py-[var(--Space-Section-2xl)]");
 @source inline("py-[var(--Space-Section-md)]");
 @source inline("py-[var(--Space-Section-xl)]");
@@ -801,6 +823,9 @@
 @source inline("rounded-2xl");
 @source inline("rounded-[5px]");
 @source inline("rounded-[inherit]");
+@source inline("rounded-[var(--Chip-Radius)]");
+@source inline("rounded-[var(--Control-Radius)]");
+@source inline("rounded-[var(--Field-Radius)]");
 @source inline("rounded-[var(--Radius-Modal)]");
 @source inline("rounded-[var(--Radius-Sheet)]");
 @source inline("rounded-[var(--Radius-Surface)]");
@@ -808,7 +833,7 @@
 @source inline("rounded-lg");
 @source inline("rounded-md");
 @source inline("rounded-none");
-@source inline("rounded-r-full");
+@source inline("rounded-r-[var(--Chip-Radius)]");
 @source inline("rounded-r-none");
 @source inline("rounded-r-sm");
 @source inline("rounded-sm");
@@ -855,6 +880,9 @@
 @source inline("size-[120px]");
 @source inline("size-[58px]");
 @source inline("size-[60px]");
+@source inline("size-[var(--Control-Height-Lg)]");
+@source inline("size-[var(--Control-Height-Md)]");
+@source inline("size-[var(--Control-Height-Sm)]");
 @source inline("size-auto");
 @source inline("size-full");
 @source inline("sm:bottom-4");