ksk-design-system 2.2.0 → 2.4.0

package/DESIGN.md

@@ -12,18 +12,18 @@ colors:
   onPrimary: "#FFFFFF"
   # --- Neutral scale ---
   neutral0: "#FFFFFF"
-  neutral50: "#F9FAFB"
-  neutral100: "#F3F4F6"
-  neutral200: "#E5E7EB"
-  neutral500: "#6B7280"
-  neutral900: "#111827"
+  neutral50: "#FAFAFA"
+  neutral100: "#F4F4F5"
+  neutral200: "#E4E4E7"
+  neutral500: "#71717A"
+  neutral900: "#18181B"
   # --- Surface / Text / Border（semantic） ---
   surface: "#FFFFFF"          # var(--Surface-Primary)
-  surfaceMuted: "#F9FAFB"     # var(--Surface-Secondary)
-  textHigh: "#111827"         # var(--Text-High-Emphasis)
-  textMedium: "#374151"       # var(--Text-Medium-Emphasis)
-  textLow: "#4B5563"          # var(--Text-Low-Emphasis)
-  border: "#E5E7EB"           # var(--Border-Low-Emphasis)
+  surfaceMuted: "#FAFAFA"     # var(--Surface-Secondary)
+  textHigh: "#18181B"         # var(--Text-High-Emphasis)
+  textMedium: "#3F3F46"       # var(--Text-Medium-Emphasis)
+  textLow: "#52525B"          # var(--Text-Low-Emphasis)
+  border: "#E4E4E7"           # var(--Border-Low-Emphasis)
   focus: "#60A5FA"            # var(--Focus-High-Emphasis)
   # --- Semantic（status） ---
   success: "#15803D"
@@ -34,12 +34,12 @@ typography:
   fontFamily: "system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif"
   display:  { fontSize: "48px", lineHeight: "1.25", fontWeight: 700 }   # typo-display-xl
   heading:  { fontSize: "18px", lineHeight: "1.5",  fontWeight: 700 }   # typo-heading-lg（基準）
-  body:     { fontSize: "14px", lineHeight: "1.75", fontWeight: 400 }   # typo-body-md（基準）
+  body:     { fontSize: "16px", lineHeight: "1.75", fontWeight: 400 }   # typo-body-md（基準）
   label:    { fontSize: "12px", lineHeight: "1.5",  fontWeight: 500 }   # typo-label-sm
-  caption:  { fontSize: "11px", lineHeight: "1.5",  fontWeight: 400 }   # typo-caption（注釈/法的表記専用。本文の下限は body=12px。10px の typo-body-xs は補助ラベル専用で本文禁止）
+  caption:  { fontSize: "11px", lineHeight: "1.5",  fontWeight: 400 }   # typo-caption（注釈/法的表記専用。本文の下限は body=14px。12px の typo-body-xs は補助ラベル専用で本文禁止）
 rounded:
   sm: "4px"
-  surface: "8px"   # Card / Input / Popover  → var(--Radius-Surface)
+  surface: "14px"  # Card / Input / Popover  → var(--Radius-Surface)
   modal: "24px"    # 中央 Dialog / AlertDialog → var(--Radius-Modal)
   sheet: "32px"    # bottom / float Sheet     → var(--Radius-Sheet)
   full: "9999px"   # Button / Chip
@@ -50,8 +50,8 @@ spacing:
 elevation:                                          # 影色は neutral（Gray-900 ベース rgba(17,24,39,…)）でテーマ非依存
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
   md: "0 0 8px rgba(20, 20, 20, 0.08)"
-  lg: "0px 12px 32px -4px rgba(17, 24, 39, 0.12), 0px 8px 16px -6px rgba(17, 24, 39, 0.12)"
-  dialog: "0px 12px 32px -4px rgba(17, 24, 39, 0.12), 0px 8px 16px -6px rgba(17, 24, 39, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2)"
+  lg: "0px 12px 32px -4px rgba(24, 24, 27, 0.12), 0px 8px 16px -6px rgba(24, 24, 27, 0.12)"
+  dialog: "0px 12px 32px -4px rgba(24, 24, 27, 0.12), 0px 8px 16px -6px rgba(24, 24, 27, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2)"
 motion:                                            # 実体は var(--Motion-*)（src/styles/motion.css）
   microIn: "150ms ease-out"                        # --Motion-Duration-Fast  / fade-in / scale-in
   enter: "200ms ease-out"                          # --Motion-Duration-Base  / fade-in-up / slide-in
@@ -135,9 +135,9 @@ KSK の必須正本・publish 依存にせず、KSK 固有の multi-theme / nati
 | 用途 | トークン | 既定値(Blue) |
 |---|---|---|
 | ブランド | `var(--Brand-Primary)` | `#2563EB` |
-| 背景(白/薄灰) | `var(--Surface-Primary)` / `-Secondary` | `#FFFFFF` / `#F9FAFB` |
-| 文字(強/中/弱) | `var(--Text-High/Medium/Low-Emphasis)` <!-- docs-drift-ignore: --Text-High/Medium/Low-Emphasis --> | `#111827` / `#374151` / `#4B5563` |
-| 罫線 | `var(--Border-Low-Emphasis)` | `#E5E7EB` |
+| 背景(白/薄灰) | `var(--Surface-Primary)` / `-Secondary` | `#FFFFFF` / `#FAFAFA` |
+| 文字(強/中/弱) | `var(--Text-High/Medium/Low-Emphasis)` <!-- docs-drift-ignore: --Text-High/Medium/Low-Emphasis --> | `#18181B` / `#3F3F46` / `#52525B` |
+| 罫線 | `var(--Border-Low-Emphasis)` | `#E4E4E7` |
 | 状態 | `--Success/Warning/Caution/Info-Base` <!-- docs-drift-ignore: --Success/Warning/Caution/Info-Base --> | `#15803D` / `#C2410C` / `#DC2626` / `#2563EB` |
 
 - **状態色の正本**: 上記は `*-Base`。Caution/Info は Primitive **600**、Success/Warning は白文字 AA(4.5:1) 確保のため Primitive **700**（600 だと 3.3〜3.6:1）。`tokens.json` を正本とし、本表はその要約。
@@ -153,7 +153,7 @@ KSK の必須正本・publish 依存にせず、KSK 固有の multi-theme / nati
 `typo-*` ユーティリティ1クラスに size/line-height/weight/tracking を集約。`text-sm`/`font-bold` 等の個別指定は禁止。
 
 - 見出し: `typo-heading-{sm..3xl}`（14→28px, line-height 1.5, 700）
-- 本文: `typo-body-{xs..lg}`（10→16px, line-height 1.75 系）
+- 本文: `typo-body-{xs..lg}`（12→18px, line-height 1.75 系）
 - ラベル: `typo-label-{xs..lg}`（10→16px, 500）/ 特大: `typo-display-xl`(48px)
 - 色は別指定: `className="typo-body-sm text-[var(--Text-Low-Emphasis)]"`
 

package/README.md

@@ -76,14 +76,17 @@ DS のルールが適用されません。既存ファイルはスキップさ
 > として Critical 判定されるためです（LPM Firewall が 1.49.2 / 1.51.1 をこの理由でブロック判定）。
 > v1.59.0 以前から更新する場合、既に設置済みのファイルはそのまま使えます。
 
+<!-- consumer-example:css:start -->
 ```css
-/* globals.css / app.css（CSS の場所に応じて ../../ の数を調整） */
+/* src/styles/app.css（アプリのルートで一度だけ読み込む） */
 @import "tailwindcss";
 @import "ksk-design-system/preset";
 @import "ksk-design-system/themes/default";
-@import "./themes/my-client.css"; /* Brand 色を差し替えたテーマ */
 @source "../../node_modules/ksk-design-system/dist";
 ```
+<!-- consumer-example:css:end -->
+
+独自ブランドのテーマを使う場合は、この後にテーマCSSをimportしてください。
 
 Tailwind CSS v4 は `node_modules` を既定では走査しません。`@source` がないと、
 DS 内部だけで使うレイアウト・サイズ・状態クラスが生成されず、コンポーネントの表示や操作が崩れます。
@@ -94,9 +97,23 @@ consumer 側の Tailwind と DS を同じビルドで処理するため、上記
 DS のクラス CSS は生成されます（issue #258）。ただし consumer 自身のコードは
 consumer 側の走査対象なので、`@source` は引き続き推奨構成です。
 
+<!-- consumer-example:tsx:start -->
 ```tsx
-import { Button, Card, Input, FormField } from "ksk-design-system"
+import { Button, Input, Label } from "ksk-design-system"
+
+export function Example() {
+  return (
+    <form>
+      <Label htmlFor="company">会社名</Label>
+      <Input id="company" name="company" defaultValue="サンプル株式会社" />
+      <Button type="submit">保存</Button>
+    </form>
+  )
+}
 ```
+<!-- consumer-example:tsx:end -->
+
+DSリポジトリの開発者向け検査として、`npm run test:consumer:web` は、配布READMEの上記例を空consumerで型検査・CSSビルドし、Node SSRからChromiumへのhydrationと操作を検査します。初回は `npx playwright install chromium` が必要です。
 
 新規クライアント案件では、テーマファイルで `--Primitive-Brand-500` などブランドカラーの 10 行を定義するだけで、全コンポーネントがそのブランドカラーで動作します。
 

package/contracts/components.json

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

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "2.2.0",
+    "version": "2.4.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",
@@ -288,10 +288,10 @@
   },
   "semantic": {
     "surface.primary": "#FFFFFF",
-    "surface.secondary": "#F9FAFB",
-    "surface.tertiary": "#F3F4F6",
-    "surface.quaternary": "#E5E7EB",
-    "surface.inverse": "#111827",
+    "surface.secondary": "#FAFAFA",
+    "surface.tertiary": "#F4F4F5",
+    "surface.quaternary": "#E4E4E7",
+    "surface.inverse": "#18181B",
     "surface.accent-primary": "#3B82F6",
     "surface.accent-primary-light": "#EFF6FF",
     "surface.caution": "#FEF2F2",
@@ -299,11 +299,11 @@
     "surface.warning": "#FFFBEB",
     "surface.info": "#EFF6FF",
     "surface.caution-strong": "#EF4444",
-    "surface.disable": "#F3F4F6",
-    "text.high-emphasis": "#111827",
-    "text.medium-emphasis": "#374151",
-    "text.low-emphasis": "#4B5563",
-    "text.disable": "#9CA3AF",
+    "surface.disable": "#F4F4F5",
+    "text.high-emphasis": "#18181B",
+    "text.medium-emphasis": "#3F3F46",
+    "text.low-emphasis": "#52525B",
+    "text.disable": "#A1A1AA",
     "text.on-inverse": "#FFFFFF",
     "text.on-media": "#FFFFFF",
     "text.accent-primary": "#2563EB",
@@ -312,10 +312,10 @@
     "text.warning": "#C2410C",
     "text.info": "#2563EB",
     "text.caution-on-inverse": "#F87171",
-    "object.high-emphasis": "#111827",
-    "object.medium-emphasis": "#4B5563",
-    "object.low-emphasis": "#9CA3AF",
-    "object.disable": "#D1D5DB",
+    "object.high-emphasis": "#18181B",
+    "object.medium-emphasis": "#52525B",
+    "object.low-emphasis": "#A1A1AA",
+    "object.disable": "#D4D4D8",
     "object.on-inverse": "#FFFFFF",
     "object.accent-primary": "#3B82F6",
     "object.caution": "#EF4444",
@@ -323,9 +323,9 @@
     "object.warning": "#F97316",
     "object.info": "#3B82F6",
     "object.rating": "#F59E0B",
-    "border.high-emphasis": "#374151",
-    "border.medium-emphasis": "#D1D5DB",
-    "border.low-emphasis": "#E5E7EB",
+    "border.high-emphasis": "#3F3F46",
+    "border.medium-emphasis": "#D4D4D8",
+    "border.low-emphasis": "#E4E4E7",
     "border.accent-primary": "#3B82F6",
     "border.caution": "#EF4444",
     "border.success": "#22C55E",
@@ -341,13 +341,13 @@
     "brand.amazon": "#232F3E",
     "hover.primary-button": "#1D4ED8",
     "hover.secondary-button": "#EFF6FF",
-    "hover.tertiary-button": "#F3F4F6",
-    "hover.ghost-button": "#F3F4F6",
+    "hover.tertiary-button": "#F4F4F5",
+    "hover.ghost-button": "#F4F4F5",
     "hover.destructive-button": "#B91C1C",
     "active.primary-button": "#1E40AF",
     "active.destructive-button": "#991B1B",
     "active.secondary-button": "#DBEAFE",
-    "active.tertiary-button": "#E5E7EB",
+    "active.tertiary-button": "#E4E4E7",
     "focus.high-emphasis": "#60A5FA",
     "caution.base": "#DC2626",
     "caution.action": "#B91C1C",
@@ -408,10 +408,10 @@
     "categorical.16.bold": "#6D28D9"
   },
   "semanticDark": {
-    "surface.primary": "#111827",
-    "surface.secondary": "#1F2937",
-    "surface.tertiary": "#374151",
-    "surface.quaternary": "#4B5563",
+    "surface.primary": "#18181B",
+    "surface.secondary": "#27272A",
+    "surface.tertiary": "#3F3F46",
+    "surface.quaternary": "#52525B",
     "surface.inverse": "#FFFFFF",
     "surface.accent-primary": "#3B82F6",
     "surface.accent-primary-light": "#1E3A8A",
@@ -420,8 +420,8 @@
     "surface.warning": "#78350F",
     "surface.info": "#1E3A8A",
     "surface.caution-strong": "#EF4444",
-    "surface.disable": "#1F2937",
-    "text.on-inverse": "#111827",
+    "surface.disable": "#27272A",
+    "text.on-inverse": "#18181B",
     "text.on-media": "#FFFFFF",
     "text.accent-primary": "#60A5FA",
     "text.success": "#4ADE80",
@@ -429,8 +429,8 @@
     "text.warning": "#FB923C",
     "text.info": "#60A5FA",
     "text.caution-on-inverse": "#B91C1C",
-    "text.on-inverse-secondary": "#374151",
-    "object.on-inverse": "#111827",
+    "text.on-inverse-secondary": "#3F3F46",
+    "object.on-inverse": "#18181B",
     "object.accent-primary": "#60A5FA",
     "object.caution": "#F87171",
     "object.success": "#4ADE80",

package/dist/native/ui.js

@@ -1,5 +1,5 @@
 import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "../prompt-coordinator-sBFZKQIX.js";
-import { a as u, i as d, n as f, r as p, t as m } from "../native-DlR32_Lk.js";
+import { a as u, i as d, n as f, r as p, t as m } from "../native-BsJ3ntN3.js";
 import * as h from "react";
 import g, { createContext as _, useCallback as v, useContext as y, useEffect as b, useId as x, useMemo as S, useRef as C, useState as w } from "react";
 import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";