@insession/design-system 1.3.1 → 1.5.0

package/package.json

@@ -1,27 +1,34 @@
 {
   "name": "@insession/design-system",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "InSession / loophub 共通のデザインシステム。純粋 leaf UI プリミティブ + デザイントークン（アプリ依存なし。i18n 等は props で注入する）",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/insession-space/design-system.git"
   },
-  "//": "ビルド成果物(dist)を配布する。theme.css はパッケージ直下に置いたまま ./theme.css として公開する(tsup は CSS を処理しないため)。react はホストと同一インスタンスを使うため peerDependency。",
+  "//": "ビルド成果物(dist)を配布する。CSS はパッケージ直下に置いたまま公開する(tsup は CSS を処理しないため)。react はホストと同一インスタンスを使うため peerDependency。",
+  "//exports": "CSS の入口は3つ。./styles.css が既定(トークン + 部品 CSS + このパッケージが使うユーティリティを全部含むプリビルド。消費側に Tailwind は不要)。./theme.css はトークンだけ(消費側が Tailwind で自分のマークアップに DS トークンを使いたい場合の @theme 統合用)。./components.css は部品 CSS だけ(Tailwind + @source 方式を続ける消費側が、ユーティリティで表現できない部品 CSS だけを足すため)。",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./theme.css": "./theme.css"
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./theme.css",
+    "./base.css": "./base.css",
+    "./components.css": "./components.css"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "theme.css",
-    "CHANGELOG.md"
+    "base.css",
+    "components.css",
+    "CHANGELOG.md",
+    "LICENSE"
   ],
   "sideEffects": [
     "*.css"
@@ -31,6 +38,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
+  "//scripts": "build は js/d.ts(tsup) と配布 CSS(Tailwind CLI) の2本立て。build:css は minify しない — dist を @source で走査する従来方式の消費側がまだ居るため、クラス名の文字列リテラルを壊さない。check:styles は「DOM に出るのに CSS が無い」欠損を検出する回帰ネット。",
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -41,6 +49,7 @@
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@storybook/addon-docs": "^10.5.0",
     "@storybook/react-vite": "^10.5.0",
+    "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.2",
     "@types/node": "^22.10.0",
     "@types/react": "^19.2.0",
@@ -57,12 +66,15 @@
     "node": ">=22.18"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "pnpm build:js && pnpm build:css",
+    "build:js": "tsup",
+    "build:css": "tailwindcss -i styles.src.css -o dist/styles.css",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "check": "biome check .",
+    "check:styles": "node scripts/check-styles.mjs",
     "format": "biome format --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o storybook-static",
+    "storybook": "pnpm build:css && storybook dev -p 6006",
+    "build-storybook": "pnpm build:css && storybook build -o storybook-static",
     "changeset": "changeset",
     "changeset:version": "changeset version"
   }

package/theme.css

@@ -6,23 +6,33 @@
  * ── 消費側アプリのセットアップ ──────────────────────────────
  *   @import "tailwindcss";
  *   @import "@insession/design-system/theme.css";
- *   @source "../../node_modules/@insession/design-system/dist";
+ *   @source "../node_modules/@insession/design-system/dist";
  *
  * ⚠ `@source` は必須。これが無いとコンポーネント内のクラス名から Tailwind
- * ユーティリティが生成されず、**ビルドは通るのにスタイルだけが静かに消える**。
- * パスは各アプリの style.css から node_modules への相対パスに合わせること。
- * pnpm では node_modules 配下が symlink になるため、初回セットアップ時は
- * 実際にビルドして見た目を目視確認すること。
+ * ユーティリティが生成されず、**ビルドは通るのにスタイルが部分的に欠ける**
+ * （エラーもワーニングも出ない。Vite のモジュールグラフ経由で一部のクラスは
+ * 拾われるので「全崩れ」にならず、一見それらしく描画されるため気づきにくい。
+ * 実測では CSS の約4割が欠けた状態でビルドが緑になった）。
  *
- * ── ライトテーマについて ────────────────────────────────
- * このファイルはダーク単一トーンで、[data-theme] のライトテーマオーバーレイを含まない。
- * ライト/ダークを切り替えるアプリは自分側で [data-theme] オーバーレイを持つ。
+ * ⚠ pnpm workspace では **リポジトリルートの node_modules を指してはいけない**。
+ * pnpm は依存をそれを宣言したパッケージ自身の node_modules にリンクし、ルートには
+ * 置かない。apps/<app>/src/style.css からの正しいパスは `../node_modules/...`
+ * （= apps/<app>/node_modules/...）で、ルートを指すと空振りする。
  *
- * ── insession-app との関係(歴史的経緯) ─────────────────────
- * insession-app の apps/web は巨大な legacy CSS と共存させるため、同じトークンを
- * src/style.css にインラインで持ち、このファイルを import しない。両者の値は
- * 揃えて保守する(insession-app 側が増やしたトークンのうち、このパッケージの
- * コンポーネントが参照しないものはここに持ち込まない)。
+ * ⚠ CI でビルド成果物を検査すること。生成CSSに DS 由来のユーティリティ
+ * （アプリのソースには書かれていないもの。例 bg-accent / rounded-card）が
+ * 入っているかを確かめれば機械的に防げる。
+ *
+ * ── ライト/ダークについて ───────────────────────────────
+ * **ダークが既定**で、下の @theme の値がそのままダークのトーン。ライトは
+ * `<html data-theme="light">` のときだけ効くオーバーレイ(ファイル末尾)で与える。
+ * したがって:
+ *   - ダーク固定のプロダクトは何もしなくてよい(オーバーレイは不活性)
+ *   - ライト/ダークを切り替えるプロダクトは html の data-theme を書き換えるだけ
+ *   - `data-theme="dark"` と「属性なし」はどちらもダークになる(:root の @theme 値)
+ *
+ * ⚠ ダーク側の再宣言は**置かない**。@theme の値が既定として効くので、同じ値を
+ * `[data-theme="dark"]` にも書くと保守箇所が二重になるだけで、得るものが無い。
  */
 
 @theme {
@@ -202,6 +212,9 @@
   --radius-card: 16px;
   --radius-panel: 16px;
   --radius-pill: 999px;
+  /* ボトムシート上端の角丸。BottomSheet の .bottom-sheet が参照する(components.css)。
+     insession-app 側の同名トークンと値を揃えて保守する。 */
+  --radius-sheet: 22px;
 
   /* グロー(旧 #457 ブランドの hover 発光)は新 DS で廃止(#463)。新 DS の hover は「ふわっと光る」
      ではなく surface-hover への面変化 / filled は brightness(.93) / カード等は translateY(-2px) の
@@ -316,10 +329,96 @@
 /* エレベーションの実値(#950)。上の @theme 内コメントのとおり、Tailwind v4 が --shadow-* を
    ビルド時にリテラル展開するため実値はここ(@theme の外・unlayered な素の :root)に置き、
    @theme 側は var() 参照だけを持つ(insession-app の apps/web/src/style.css の #867 対応と同じ形)。
-   ダーク単一値(このパッケージはダーク前提。ファイル冒頭コメント参照)。値は元 @theme に
-   書かれていたものをそのまま移設しただけで変更なし。 */
+   ここはダーク(既定)値。ライト値は下のオーバーレイで上書きする。 */
 :root {
   --elev-soft: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
   --elev-popover: 0 16px 30px -16px rgba(0, 0, 0, 0.7);
   --elev-overlay: 0 26px 64px -32px rgba(0, 0, 0, 0.85);
 }
+
+/* ── ライトテーマのオーバーレイ ─────────────────────────────
+ *
+ * `<html data-theme="light">` のときだけ効く。属性が無いか "dark" のときは
+ * 上の @theme / :root の値(= ダーク)がそのまま使われるので、**ダーク固定の
+ * プロダクトはこのブロックを意識しなくてよい**（不活性なまま）。
+ *
+ * ── なぜセレクタで上書きできるのか ────────────────────────
+ * @theme の出力は静的な CSS 変数宣言に過ぎず、生成後は普通の CSS 変数として
+ * 通常の cascade に従う。加えて:
+ *   - このブロックは **unlayered**（どの @layer にも属さない）ので、@theme の出力が
+ *     乗る theme レイヤーより必ず強い
+ *   - セレクタの詳細度も `:root[data-theme="light"]`(0,2,0) > `:root`(0,1,0)
+ * どちらの理由でも勝つので、消費側の取り込み方（レイヤー付き import か否か）に
+ * 依らず効く。
+ *
+ * ── 上書きしなくてよいトークン ──────────────────────────
+ * ティント面(--color-tint-*)とセマンティック面(--color-*-surface / *-surface-strong)は
+ * `color-mix(… , var(--color-bg))` の合成で定義してあるので、ここで --color-bg が
+ * 変わればそのまま追従する。リンク色(--color-link / --color-link-hover)と
+ * --color-accent も --color-mint / --color-mint-soft の var() 参照なので追従する。
+ * したがってここに書くのは**参照元の生値だけ**。
+ *
+ * ── 値の出自 ──────────────────────────────────────
+ * insession-app(apps/web)と loophub(apps/web / apps/lp)が各自の style.css に持って
+ * いた `[data-theme="light"]` オーバーレイを、ここへ一本化したもの。移設前に3者の値を
+ * 突き合わせ、**loophub の17トークンは insession-app の30トークンの部分集合で値も完全一致**
+ * であることを確認している。insession-app 固有で DS が持たない3つ
+ * (--color-visibility-public / -followers / -community)は移していない。
+ *
+ * ⚠ ダーク側(`[data-theme="dark"]`)の再宣言は置かない。@theme の値が既定として効くため
+ * 同じ値の二重管理になるだけ。移設元にはあったが、意図的に持ち込んでいない。
+ *
+ * ⚠ セレクタは `:root[...]` なので html 要素だけに効く。要素単位で部分的にテーマを
+ * 切り替えたいプロダクトは、自分側で `[data-theme="light"]` 版を足すこと。
+ */
+:root[data-theme="light"] {
+  /* 背景面(奥 → 手前)。ダークの3段ランプに対応する明るいトーン。 */
+  --color-bg: #e9e9e6;
+  --color-bg-elevated: #f4f1e9;
+  --color-surface: #ffffff;
+  --color-surface-2: rgba(244, 241, 233, 0.96);
+  --color-surface-3: #ebe7dc;
+  --color-surface-hover: #f1ede3;
+
+  /* 境界。 */
+  --color-border: #e2ded3;
+  --color-border-strong: #d6d2c6;
+
+  /* テキスト階層。ダークと明暗を反転させる。 */
+  --color-text: #17160f;
+  --color-text-dim: #5c5b52;
+  --color-text-faint: #a3a197;
+
+  /* 中立塗り(Primary ボタン等)。ダークでは明色 + 暗い文字、ライトでは逆になる。 */
+  --color-fill: #17160f;
+  --color-on-fill: #f1eee6;
+
+  /* ブランドパレット。白背景でのコントラスト確保のため、ダークより濃い値にする。
+     mint-soft はダークでは「淡いコーラル」だが、ライトでは白地に載るため
+     逆に濃いコーラルになる(テキスト/リンクの静止色に使うため)。 */
+  --color-mint: #ff5a36;
+  --color-mint-soft: #c8431f;
+  --color-cyan: #3b6fe0;
+  --color-violet: #1fa463;
+
+  /* セマンティック(状態表現)の地の色。白背景での可読性のため少し濃くする。
+     対応する *-surface / *-border はこれらの var() 合成なので追従する。 */
+  --color-success: #1fa463;
+  --color-warning: #e0930f;
+  --color-danger: #d8433d;
+  --color-info: #3b6fe0;
+
+  /* 影の色。ダークは黒だが、ライトで黒を使うと濁るのでウォームグレーにする。 */
+  --color-shadow: #b4afa0;
+
+  /* スナックバー。面(--color-snackbar-surface)は**ライトでも暗いまま**にする
+     (操作フィードバックは前面に浮く別レイヤーという扱いで、意図的にテーマへ追従させない)。
+     文字色系だけライトの danger に合わせる。 */
+  --color-snackbar-danger: var(--color-danger);
+  --color-snackbar-danger-border: color-mix(in srgb, var(--color-danger) 30%, transparent);
+
+  /* エレベーション。ライトでは黒の落ち影が強すぎるため、青みを含むグレーで薄く出す。 */
+  --elev-soft: 0 2px 6px -2px rgba(20, 20, 26, 0.12);
+  --elev-popover: 0 12px 24px -14px rgba(20, 20, 26, 0.4);
+  --elev-overlay: 0 20px 46px -28px rgba(20, 20, 26, 0.42);
+}