ksk-design-system 2.6.4 → 2.7.0

package/MIGRATION.md

@@ -63,6 +63,22 @@ React 18 では `ref` が無言で無視されていた）。詳細は下の
 **v2.0.0 では削除していません**。削除は「全消費リポで `check-migration` の
 残件が 0」を条件に v3.0.0 で行います。
 
+## v2 系内の追加（参考）
+
+### v2.7.0 — CSS の入口 `preset-core` / `safelist` を追加（追加のみ・破壊的変更なし）
+
+`ksk-design-system/preset` から DS 部品用の safelist（`src/styles/source-safelist.css`）だけを
+除いた `ksk-design-system/preset-core` と、safelist 単体の `ksk-design-system/safelist` を
+exports に足した。
+
+- **既存 consumer: 対応不要**。`preset` は `preset-core` + `safelist` を読み込む形に組み替えたが、
+  生成される CSS は従来と同じ
+- DS 部品を 1 つも使わない consumer は `preset` を `preset-core` に置き換えると、
+  部品用の utility（safelist 約 1,150 クラス分）が出力から消える。部品を使うルートが 1 つでもある
+  ビルドでは `preset` のままにする（詳細は README の「DS 部品を使わない consumer は `preset-core`」節）
+- DS 本体の CSS を編集するときは、トークン・base layer 等は `src/preset-core.css` に書く
+  （`src/preset.css` は 2 つを読み込むだけの入口）
+
 ## v3.0 (未リリース)
 
 破壊変更を入れる際にはここに以下を書く:

package/README.md

@@ -112,6 +112,32 @@ consumer 側の Tailwind と DS を同じビルドで処理するため、上記
 DS のクラス CSS は生成されます（issue #258）。ただし consumer 自身のコードは
 consumer 側の走査対象なので、`@source` は引き続き推奨構成です。
 
+#### DS 部品を使わない consumer は `preset-core`
+
+safelist は DS 部品（`Button` 等）が内部で使う Tailwind クラスを、consumer が 1 つも
+部品を使っていなくても生成します（safelist は約 1,150 クラス。consumer のクラスが無い状態の
+実測で、出力 CSS が `preset` 179KB → `preset-core` 54KB、gzip 25.8KB → 9.8KB）。**DS 部品を import しない
+consumer**（`ksk-design-system/class-names` とトークンだけで UI を組む公開ページ等）は、
+safelist だけを除いた `preset-core` を使えます。トークン・shadcn 互換の変数・アニメーション・
+container 幅・`scrollbar-hide`・base layer のボーダー色の保険は `preset` と同じです。
+
+```css
+@import "tailwindcss";
+@import "ksk-design-system/preset-core";
+@import "ksk-design-system/themes/default";
+```
+
+| consumer | 使う入口 |
+|---|---|
+| DS 部品を 1 つでも使う（どこか 1 ルートでも） | `ksk-design-system/preset`（従来どおり。`preset-core` + `safelist` と同じ） |
+| DS 部品を使わない（トークン・`class-names` だけ） | `ksk-design-system/preset-core` |
+
+Tailwind は CSS を 1 本にまとめるため、DS 部品を使うルートが 1 つでもあるビルドでは
+`preset` を使ってください（`preset-core` を選ぶと、そのルートで部品の見た目が崩れます）。
+`preset-core` と safelist を分けて読みたい場合は
+`@import "ksk-design-system/preset-core"; @import "ksk-design-system/safelist";` が
+`preset` と同じ結果になります。
+
 <!-- consumer-example:tsx:start -->
 ```tsx
 import { Button, Input, Label } from "ksk-design-system"
@@ -334,7 +360,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     "\\.(css|less|sass|scss)$": "<rootDir>/test/style-mock.cjs",
-    "^ksk-design-system/(preset|styles(?:\\.css)?|glass|tokens/(?:primitive|semantic|typography|categorical|motion)|themes/(?:default|blue|orange|green|violet|cobalt))$":
+    "^ksk-design-system/(preset(?:-core)?|safelist|styles(?:\\.css)?|glass|tokens/(?:primitive|semantic|typography|categorical|motion)|themes/(?:default|blue|orange|green|violet|cobalt))$":
       "<rootDir>/test/style-mock.cjs",
   },
 }

package/UPDATING.md

@@ -103,6 +103,11 @@ consumer側Tailwindを重ねる二重ビルド方式にも切り替えないこ
 DS 内部だけで使われるクラス（`pointer-events-auto` 等）については、preset に safelist
 （`src/styles/source-safelist.css`・自動生成）が同梱されているため `@source` の有無に依存しない（issue #258）。
 
+DS 部品を 1 つも使わない consumer（トークンと `ksk-design-system/class-names` だけで UI を組む構成）は、
+`ksk-design-system/preset` の代わりに safelist だけを除いた `ksk-design-system/preset-core` を使える
+（追加のみ・破壊的変更なし。`preset` の中身は `preset-core` + `safelist` で従来と同じ）。
+使い分けは README の「DS 部品を使わない consumer は `preset-core`」節を参照。
+
 > **必要な Tailwind バージョン**: この safelist は Tailwind 4.1 で導入された `@source inline()` を使う。
 > このため次のリリース以降、peerDependencies は `tailwindcss@^4.1.0` となる。
 > 4.0.x を使っている場合は、DS を上げる前に `npm install -D tailwindcss@^4.1` で Tailwind を先に上げること。

package/bin/lint.js

@@ -103,7 +103,7 @@ export function isAutoGeneratedSource(source) {
  * トークンを**定義している側**の DS 自身の CSS に当ててはいけない。
  */
 const DS_CSS_DIRS = ["src/styles", "src/themes"]
-const DS_CSS_FILES = ["src/preset.css"]
+const DS_CSS_FILES = ["src/preset.css", "src/preset-core.css"]
 
 /** DS 配布物のヘッダコメントに必ず入る署名（ベンダリングされたコピーにも残る） */
 const DS_CSS_SIGNATURE = /KSK Design System/

package/bin/product-theme-override.js

@@ -30,7 +30,7 @@ const DECLARATION = /(^|[;{}\s])(--[A-Za-z0-9_-]+)\s*:/g
  * 生成ファイルを増やさずに実行時へ集めるので、DS 側の CSS を足してもドリフトしない。
  */
 const DS_CSS_DIRS = ["src/styles", "src/themes"]
-const DS_CSS_FILES = ["src/preset.css"]
+const DS_CSS_FILES = ["src/preset.css", "src/preset-core.css"]
 
 /** CSS コメントを、行数を保ったまま空白に置き換える */
 function stripCssComments(source) {

package/contracts/components.json

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

package/contracts/consumer-requests.json

@@ -20,6 +20,26 @@
       "dsIssue": 573,
       "consumerIssue": "https://github.com/ekusiek716/exam-kit/issues/1089",
       "fixPr": 574
+    },
+    {
+      "dsIssue": 580,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/239",
+      "fixPr": 581
+    },
+    {
+      "dsIssue": 582,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/241",
+      "fixPr": 583
+    },
+    {
+      "dsIssue": 584,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/242",
+      "fixPr": 585
+    },
+    {
+      "dsIssue": 586,
+      "consumerIssue": "https://github.com/ekusiek716/camera-app/issues/248",
+      "fixPr": 587
     }
   ]
 }

package/contracts/token-hex-cache.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "KSK Design System — Semantic Token Hex Cache",
-    "version": "2.6.4",
+    "version": "2.7.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",