ksk-design-system 1.58.0 → 1.59.0

package/DESIGN.md

@@ -292,6 +292,7 @@ Portal に載る要素（Dialog / Sheet / Popover / Toast 等）は DOM 上の
 | 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 を再利用） |
+| Typography | `--Product-Type-Scale` | 1 | `typo-*`（`src/styles/typography.css`）の font-size 全体 |
 
 - **Control と Field はスケールが別**。ksk のフィールドは元々ボタンより背が高く（Input は 48px、
   Button の既定は 40px）、横 padding も狭い。片方に畳むとどちらかの実寸が変わるので分けている。
@@ -310,6 +311,12 @@ Portal に載る要素（Dialog / Sheet / Popover / Toast 等）は DOM 上の
   `AdminShell` の `<main>` だけが `--Product-Page-Padding-Y` を持つ。
 - 色は従来どおり semantic トークン（`--Surface-*` / `--Text-*` / `--Brand-*`）と Brand ランプの
   上書きで調整する。カードの面は `--card-surface`、角丸は `--Radius-Surface` が既存の公開シーム。
+- **`--Product-Type-Scale`**（issue #371/#372 の stract-ui からの逆輸入）は `typo-*` の font-size に
+  `calc(<px> * var(--Product-Type-Scale, 1))` として一律で掛かる乗数。line-height は unitless、
+  letter-spacing は em のため font-size の変化に自動で連動し、別途スケールしない。
+  **Control / Field の高さ・padding には掛からない**（意図的な分離。文字だけ拡大して枠が追従しないと
+  窮屈になるため、拡大するプロダクトは `--Control-Height-*` / `--Field-Height-*` も別途上げる契約）。
+  Web のみが対象で、React Native（`src/tokens/native/scales.ts`）には効かない。
 
 ## Components
 

package/contracts/components.json

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

package/contracts/product-theme-overrides.json

@@ -96,6 +96,9 @@
     "chip": [
       "--Chip-Radius"
     ],
+    "productTypography": [
+      "--Product-Type-Scale"
+    ],
     "motion": [
       "--Motion-Duration-Fast",
       "--Motion-Duration-Base",
@@ -166,6 +169,7 @@
     "色は 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 を持つ。"
+    "AppShell / MarketingShell / MobileAppShell はページ本文の padding をシェル自身が持たない（Container の gutter か呼び出し側の contentClassName に委ねている）ため product theme の対象外。AdminShell の <main> だけが --Product-Page-Padding-Y を持つ。",
+    "--Product-Type-Scale は typo-* の font-size に一律で掛かる乗数（既定 1）。文字倍率を上げたら Control（Button）/ Field（Input 等）の高さ・padding も --Control-Height-* / --Field-Height-* 等で別途上げること。この変数はコントロールの寸法には自動連動しない（文字だけ大きくして枠が追従しないと窮屈になるため、意図的に分離してある）。Web のみが対象で React Native（native/scales.ts）には効かない。"
   ]
 }

package/contracts/rules.json

@@ -286,7 +286,7 @@
       "id": "P032",
       "severity": "warning",
       "category": "token",
-      "pattern": "\\bborder(-[tblrxy])?\\b(?![^\"']*(border-(\\[|transparent)|:border-))",
+      "pattern": "\\bborder(-[tblrxy])?(?![-\\w\\[])(?![^\"']*(border-(\\[|transparent)|:border-))",
       "excludes": [".stories.", "border-0", "border-2", "border-4", "border-collapse", "border-separate", "border-spacing", "border-solid", "border-dashed", "border-dotted", "border-none"],
       "message": "色を併記しないボーダー幅クラス（border / border-b 等）は避ける。Tailwind v4 では border-color の既定が currentColor になったため、色を書かないと要素の文字色が透けて出て、消費側が濃色テキストを敷くと枠線が黒ずむ（job board で実際に発生）。preset.css の base layer が --border にフォールバックする保険を張るが、コンポーネントは明示が原則。",
       "fix": "border-[var(--Border-Low-Emphasis)]（区切り線・淡いカード）/ border-[var(--Border-Medium-Emphasis)]（入力・強調）を併記する。状態で出し分けるタブ/バッジ/チップは border-transparent を初期色に置き、data-[state=active]:border-[var(--Brand-Primary)] 等のペア状態クラスで色を上書きする。"

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "1.58.0",
+    "version": "1.59.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/package.json

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

package/src/styles/product-theme.css

@@ -87,4 +87,19 @@
      プロダクトによってはボタンを角ばらせつつチップだけピルのまま、といった
      組み合わせがあり得るため（issue #364 追補）。 */
   --Chip-Radius: 9999px; /* rounded-full 相当 */
+
+  /* ─── Product: 画面全体の文字サイズ倍率（issue #371/#372 の逆輸入） ───
+     `typo-*` の font-size に一律で掛かる乗数。line-height は unitless
+     （行間比率）なので font-size の変化に自動で追従し、letter-spacing は
+     em 指定なので同様に font-size に連動する。どちらも別途変数化しない。
+
+     Web 専用。React Native は CSS カスタムプロパティを解決できないため、
+     native 側のトークン（src/tokens/native/scales.ts の typography）は
+     この変数と独立に管理する。
+
+     Control（Button）/ Field（Input 等）の高さ・padding には**意図的に
+     掛けない**。文字だけ拡大して枠が追従しないと窮屈になるため、消費側は
+     文字を拡大するときは --Control-Height-* / --Field-Height-* も
+     別途上げる契約にしてある（stract-ui と同じ判断）。 */
+  --Product-Type-Scale: 1;
 }

package/src/styles/typography.css

@@ -11,47 +11,53 @@
    3. カラーは別途指定: className="typo-body-sm text-[var(--Text-Low-Emphasis)]"
    4. レスポンシブ対応可: md:typo-heading-xl
    5. CVA 内でも typo-* を使用する
+
+   font-size は calc(<px> * var(--Product-Type-Scale, 1)) 形式で書く
+   （既定 1 = 現行と同一px。src/styles/product-theme.css の
+   --Product-Type-Scale を参照。プロダクト単位の文字サイズ倍率、issue #371/#372）。
+   line-height は unitless（比率）、letter-spacing は em のためどちらも
+   font-size の変化に自動連動する。別途スケールしない。
    ============================================================= */
 
 /* ─── Heading（見出し） ─── */
 
 @utility typo-heading-3xl {
-  font-size: 28px;
+  font-size: calc(28px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 @utility typo-heading-2xl {
-  font-size: 24px;
+  font-size: calc(24px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 @utility typo-heading-xl {
-  font-size: 21px;
+  font-size: calc(21px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 @utility typo-heading-lg {
-  font-size: 18px;
+  font-size: calc(18px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 @utility typo-heading-md {
-  font-size: 16px;
+  font-size: calc(16px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 @utility typo-heading-sm {
-  font-size: 14px;
+  font-size: calc(14px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -60,19 +66,19 @@
 /* ─── Body（本文） ─── */
 
 @utility typo-body-lg {
-  font-size: 16px;
+  font-size: calc(16px * var(--Product-Type-Scale, 1));
   line-height: 1.75;
   font-weight: 400;
 }
 
 @utility typo-body-md {
-  font-size: 14px;
+  font-size: calc(14px * var(--Product-Type-Scale, 1));
   line-height: 1.75;
   font-weight: 400;
 }
 
 @utility typo-body-sm {
-  font-size: 12px;
+  font-size: calc(12px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 400;
 }
@@ -81,7 +87,7 @@
    本文の最小は typo-body-sm(12px)。10px を本文に使うとモバイル可読性の
    下限（iOS HIG ~11pt / WCAG 観点）を割る。 */
 @utility typo-body-xs {
-  font-size: 10px;
+  font-size: calc(10px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 400;
 }
@@ -89,27 +95,27 @@
 /* ─── Label（ボタン・ナビ・タグ） ─── */
 
 @utility typo-label-lg {
-  font-size: 16px;
+  font-size: calc(16px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 @utility typo-label-md {
-  font-size: 14px;
+  font-size: calc(14px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 700;
   letter-spacing: 0.04em;
 }
 
 @utility typo-label-sm {
-  font-size: 12px;
+  font-size: calc(12px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 500;
 }
 
 @utility typo-label-xs {
-  font-size: 10px;
+  font-size: calc(10px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 500;
 }
@@ -117,14 +123,14 @@
 /* ─── Display（ヒーロー・ランディング用） ─── */
 
 @utility typo-display-xl {
-  font-size: 48px;
+  font-size: calc(48px * var(--Product-Type-Scale, 1));
   line-height: 1.25;
   font-weight: 700;
   letter-spacing: -0.02em;
 }
 
 @utility typo-display-lg {
-  font-size: 36px;
+  font-size: calc(36px * var(--Product-Type-Scale, 1));
   line-height: 1.3;
   font-weight: 700;
   letter-spacing: -0.01em;
@@ -134,7 +140,7 @@
    caption(11px) は非必須の注釈・法的表記のみ。本文には使わない（本文下限は body-sm=12px）。 */
 
 @utility typo-caption {
-  font-size: 11px;
+  font-size: calc(11px * var(--Product-Type-Scale, 1));
   line-height: 1.5;
   font-weight: 400;
 }