@insession/design-system 1.3.1 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +55 -0
- package/LICENSE +21 -0
- package/README.md +167 -17
- package/base.css +75 -0
- package/components.css +306 -0
- package/dist/styles.css +2200 -0
- package/package.json +20 -8
- package/theme.css +114 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,60 @@
|
|
|
1
1
|
# @insession/design-system
|
|
2
2
|
|
|
3
|
+
## 1.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 76bc475: ライトテーマを DS に取り込んだ。`<html data-theme="light">` だけでライトになる。
|
|
8
|
+
|
|
9
|
+
これまで `theme.css` はダーク単一トーンで、ライトは**消費側が自前でオーバーレイを持つ**契約だった。結果として同じライト値が insession-app（`apps/web`）と loophub（`apps/web` / `apps/lp`）に重複し、DS の README にも「値は揃えて保守する」と書かれた三重管理になっていた。ここへ一本化した。
|
|
10
|
+
|
|
11
|
+
移設前に 3 者の値を突き合わせ、**loophub の 17 トークンは insession-app の 30 トークンの部分集合で、値も完全に一致**していることを確認している。insession-app 固有で DS が持たない 3 つ（`--color-visibility-public` / `-followers` / `-community`）は移していない。
|
|
12
|
+
|
|
13
|
+
**設計:**
|
|
14
|
+
|
|
15
|
+
- **ダークが既定。** `@theme` の値がそのままダークのトーンで、ライトのオーバーレイは `data-theme="light"` が付くまで不活性。**ダーク固定のプロダクトは何も意識しなくてよい。**
|
|
16
|
+
- **ダーク側（`[data-theme="dark"]`）の再宣言は置かない。** 移設元には 25 トークン分あったが、全て `@theme` の既定値と完全一致だったため、持ち込むと同じ値の二重管理が DS 側に移るだけになる。属性なしと `"dark"` はどちらも `:root` の値で成立する。
|
|
17
|
+
- オーバーレイは**どの `@layer` にも属さない**ので `@theme` の出力（theme レイヤー）より必ず強い。詳細度でも `:root[data-theme="light"]`(0,2,0) > `:root`(0,1,0) なので、消費側の取り込み方に依らず効く。
|
|
18
|
+
- 上書きするのは**参照元の生値だけ**（27 トークン）。ティント面とセマンティック面は `color-mix(…, var(--color-bg))` の合成なので追従する。
|
|
19
|
+
- セレクタは `:root[…]` で html 要素だけに効く。要素単位の部分切替が必要なプロダクトは自分側で足す。
|
|
20
|
+
|
|
21
|
+
**Storybook にツールバーの Theme トグルを追加した。** これが無いとライト値を目視検証できなかった。`scripts/check-styles.mjs` にもオーバーレイの回帰検査を足した（存在すること・レイヤー外にあること・面やティントを二重に書いていないこと・ダーク側の再宣言が無いこと）。
|
|
22
|
+
|
|
23
|
+
## 1.4.1
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- 7221f60: ライセンスを MIT にした（`LICENSE` を追加し、`package.json` の `license` を `UNLICENSED` から `MIT` へ）。
|
|
28
|
+
|
|
29
|
+
public リポジトリで npm にも公開しているのに `license` が `UNLICENSED`（=「許諾しない」の明示）のままで、**InSession / loophub 以外のプロダクトは法的に採用できない**状態だった。他プロダクトへ配る前提と矛盾していたので改めた。
|
|
30
|
+
|
|
31
|
+
著作権表示は `Copyright (c) 2026 INSESSION Space`。`LICENSE` は `files` に明示し、CI の npm pack 検査でも同梱を必須にした。
|
|
32
|
+
|
|
33
|
+
## 1.4.0
|
|
34
|
+
|
|
35
|
+
### Minor Changes
|
|
36
|
+
|
|
37
|
+
- 15a4206: 消費側の Tailwind 依存を外し、パッケージを自己完結させた。
|
|
38
|
+
|
|
39
|
+
**`@insession/design-system/styles.css` を追加した。** publish 時にプリビルドした配布 CSS（トークン + 部品 CSS + このパッケージが使うユーティリティ、約 53KB / gzip 約 9KB）で、これ 1 枚を読むだけで動く。消費側に Tailwind v4 は不要になり、`@source` の設定ミスで「ビルドは緑のままスタイルが静かに欠ける」失敗モードも消える。
|
|
40
|
+
|
|
41
|
+
**パッケージ内に定義が無かった CSS を移植した（`components.css`）。** 以下は定義が消費側 insession-app の legacy CSS にしか存在せず、publish された中身だけでは完成していなかった。そのため **insession-app の外では静かに崩れていた**:
|
|
42
|
+
|
|
43
|
+
- `.modal` / `.modal-backdrop` / `.modal-close` / `.modal h2` → Modal の既定経路（`title`/`footer` を渡さない呼び方）と、それに載る ConfirmModal / ProfileModal
|
|
44
|
+
- `.bottom-sheet*` → BottomSheet 全体
|
|
45
|
+
- `.google-icon` → GoogleIcon
|
|
46
|
+
- `@keyframes card-in` / `fade-in` / `pop-in` / `snackbar-in` / `ring-timer-urgent-pulse` → Modal / BottomSheet / Badge / Toast(snackbar) / RingTimer のアニメーション
|
|
47
|
+
|
|
48
|
+
**その他:**
|
|
49
|
+
|
|
50
|
+
- `base.css` を追加。コンポーネントが前提にする最小リセット（`box-sizing` とフォームコントロールのフォント継承）のみを `@layer base` に持つ。Tailwind の preflight は消費側のページ全体を書き換えるので配らない。
|
|
51
|
+
- `--radius-sheet: 22px` をトークンに追加（BottomSheet が参照する）。
|
|
52
|
+
- `scripts/check-styles.mjs` を追加し CI に組み込んだ。「クラス名は DOM に出るのに CSS が無い」欠損を機械的に検出する。
|
|
53
|
+
- Storybook を「消費側と同じ経路」（`dist/styles.css` のみからコンポーネントを描く）に変更した。従来はカタログ側で独自にユーティリティを生成していたため、上記の欠損を見逃す構造だった。
|
|
54
|
+
- BottomSheet の × 閉じるボタンに flex の中央揃えを足した（移植元はグリフが左上に寄っていた）。既存の消費側 insession-app は自分の legacy CSS で描画を続けるため影響を受けない。
|
|
55
|
+
|
|
56
|
+
**破壊的変更ではない。** 従来方式（`theme.css` + `@source`）はそのまま動く。ただしその方式を続ける場合は、上記の部品 CSS を得るために `@insession/design-system/components.css` の import を足すこと。
|
|
57
|
+
|
|
3
58
|
> **このパッケージは `@in-session/ui` から `@insession/design-system` へ改名されました**
|
|
4
59
|
> （リポジトリ分割時。旧モノレポ `insession-space/insession-app` の `foundation/ui` が
|
|
5
60
|
> `insession-space/design-system` として独立し、npm へ公開されました）。
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 INSESSION Space
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -5,7 +5,8 @@ InSession と loophub が共有するデザインシステム。**純粋 leaf UI
|
|
|
5
5
|
アプリ固有のロジックには依存しない（i18n の `t`・ルーター・認証などは全て props で注入する）。依存は `react` / `react-dom` の peer だけ。
|
|
6
6
|
|
|
7
7
|
- npm: [`@insession/design-system`](https://www.npmjs.com/package/@insession/design-system)
|
|
8
|
-
-
|
|
8
|
+
- **カタログ（Storybook）: https://insession-space.github.io/design-system/**
|
|
9
|
+
- 消費側: `insession-space/insession-app`（InSession 本体・admin・lp・help）、`insession-space/loophub-app`（web・lp）
|
|
9
10
|
|
|
10
11
|
## セットアップ（消費側アプリ）
|
|
11
12
|
|
|
@@ -13,23 +14,78 @@ InSession と loophub が共有するデザインシステム。**純粋 leaf UI
|
|
|
13
14
|
pnpm add @insession/design-system
|
|
14
15
|
```
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
**CSS を1枚読むだけ。Tailwind は要らない。**
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import '@insession/design-system/styles.css';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { Button, Badge, Modal } from '@insession/design-system';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
`styles.css` は publish 時にプリビルドされた配布 CSS で、**デザイントークン + 部品 CSS + このパッケージが使う Tailwind ユーティリティ**を全部含む（約 53KB / gzip 約 9KB）。消費側のビルド設定に依存しないので、Tailwind を使っていないプロダクトでも、v3 のプロダクトでも、そのまま使える。
|
|
28
|
+
|
|
29
|
+
> ⚠ **DOM に出るクラス名（`inline-flex` `bg-accent` `px-[22px]` …）は公開契約ではない。** CSS のフックにしないこと。将来セマンティックなクラス名（`.ds-button--accent` 等）へ移行する予定で、そのとき `import` する側は変えずに済む設計にしている。
|
|
30
|
+
|
|
31
|
+
### 3つの CSS 入口
|
|
32
|
+
|
|
33
|
+
| 入口 | 中身 | 使うとき |
|
|
34
|
+
| --- | --- | --- |
|
|
35
|
+
| `@insession/design-system/styles.css` | トークン + 部品 CSS + ユーティリティ（プリビルド） | **既定。** これ1枚で完結する |
|
|
36
|
+
| `@insession/design-system/theme.css` | デザイントークン（`@theme`）のみ | Tailwind を使う消費側が、**自分のマークアップ**にも DS トークン（`bg-accent` 等）を使いたいとき |
|
|
37
|
+
| `@insession/design-system/components.css` | 部品 CSS と `@keyframes` のみ | 後述の `@source` 方式を続ける消費側が、ユーティリティで表現できない部品 CSS だけを足すとき |
|
|
38
|
+
|
|
39
|
+
自分のマークアップでも DS トークンを使いたい Tailwind 消費側は、両方読むのが素直（`:root` への変数出力は重複するが無害）。
|
|
17
40
|
|
|
18
41
|
```css
|
|
19
42
|
@import "tailwindcss";
|
|
20
|
-
@import "@insession/design-system/theme.css";
|
|
21
|
-
|
|
43
|
+
@import "@insession/design-system/theme.css"; /* 自分のマークアップで bg-accent 等を使うため */
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
import '@insession/design-system/styles.css'; /* DS 自身の描画のため */
|
|
22
48
|
```
|
|
23
49
|
|
|
24
|
-
|
|
50
|
+
### レイヤーと上書き
|
|
25
51
|
|
|
26
|
-
|
|
27
|
-
|
|
52
|
+
`styles.css` の中身は `@layer theme, base, components, utilities` に入っている。つまり:
|
|
53
|
+
|
|
54
|
+
- **消費側が `className` でユーティリティを足せば部品 CSS を上書きできる**（`<Modal className="w-[600px]">`）。
|
|
55
|
+
- **レイヤーに属さない消費側の CSS は、この CSS のすべてより強い。** 最終的な決定権は消費側にある。
|
|
56
|
+
|
|
57
|
+
**preflight（Tailwind のグローバルリセット）は配らない。** 消費側のページ全体の既定値を書き換えてしまうため。コンポーネントが実際に必要とする最小限（`box-sizing` とフォームコントロールのフォント継承）だけを `@layer base` に持っている（`base.css`）。
|
|
58
|
+
|
|
59
|
+
### 従来方式（`@source` で dist を走査する）から移行する
|
|
60
|
+
|
|
61
|
+
1.3.x までは「消費側の Tailwind v4 が `@source` でこのパッケージの `dist` を走査してユーティリティを生成する」契約だった。この方式は**まだ動く**が、新規採用は非推奨。
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
/* 従来方式。動くが非推奨 */
|
|
65
|
+
@import "tailwindcss";
|
|
66
|
+
@import "@insession/design-system/theme.css";
|
|
67
|
+
@import "@insession/design-system/components.css"; /* ★ 1.4.0 以降はこれも必要 */
|
|
68
|
+
@source "../node_modules/@insession/design-system/dist";
|
|
28
69
|
```
|
|
29
70
|
|
|
30
|
-
|
|
71
|
+
非推奨にした理由:
|
|
72
|
+
|
|
73
|
+
- **Tailwind v4 を使っていないプロダクトが採用できない。**
|
|
74
|
+
- **`@source` の指定を間違えると、ビルドは緑のままスタイルだけが静かに欠ける。** クラス名は DOM に出るのに対応する CSS が無く、エラーもワーニングも出ない。しかも Vite のモジュールグラフ経由で一部は拾われるため「全崩れ」にならず気づきにくい（実測で CSS の約4割が欠けた状態でビルドが緑になった）。
|
|
75
|
+
- **pnpm workspace では `@source` をリポジトリルートの `node_modules` に向けても空振りする。** pnpm は依存を*それを宣言したパッケージ自身の* `node_modules` にリンクし、ルートには置かない。正しいパスは `apps/<app>/src/style.css` から見て `../node_modules/...`。
|
|
31
76
|
|
|
32
|
-
|
|
77
|
+
`styles.css` へ移行すると、この失敗モード自体が消える（ユーティリティ生成が publish 時に済んでいるため）。
|
|
78
|
+
|
|
79
|
+
### ⚠ `minimumReleaseAge` を設定している環境では除外指定が必要（将来の pnpm 更新時）
|
|
80
|
+
|
|
81
|
+
サプライチェーン対策で pnpm の `minimumReleaseAge`（publish 直後の版を install させない待機時間・**分単位**）を設定している場合、**publish したての DS が待機時間中 install できなくなる**。自前のパッケージなので除外して問題ない。
|
|
82
|
+
|
|
83
|
+
> 実測メモ: `~/.npmrc` に `minimum-release-age=7200`（= 5日）がある環境で 1.3.1 の publish 直後に
|
|
84
|
+
> `pnpm install` したが**ブロックされなかった**。pnpm 10.12.1 はこの設定を強制しないため（`pnpm config get`
|
|
85
|
+
> が値を返すのは単に設定を読み出しているだけで、機能の有無とは無関係）。**pnpm を更新すると効き始めて
|
|
86
|
+
> 詰まる**ので、先に除外を入れておくのが安全。
|
|
87
|
+
|
|
88
|
+
消費側リポジトリの `pnpm-workspace.yaml` に書いてコミットすると、開発者ごとのグローバル設定に依存せず揃う。
|
|
33
89
|
|
|
34
90
|
```yaml
|
|
35
91
|
# pnpm-workspace.yaml
|
|
@@ -39,20 +95,48 @@ minimumReleaseAgeExclude:
|
|
|
39
95
|
|
|
40
96
|
> 除外するのは**自分たちが publish する first-party パッケージだけ**にすること。サードパーティへの待機は攻撃対策として意味があるので外さない。
|
|
41
97
|
|
|
42
|
-
###
|
|
98
|
+
### テーマ（ライト / ダーク）
|
|
99
|
+
|
|
100
|
+
**ダークが既定。ライトは `<html data-theme="light">` のときだけ効く。**
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<html data-theme="light"> <!-- ライト -->
|
|
104
|
+
<html data-theme="dark"> <!-- ダーク -->
|
|
105
|
+
<html> <!-- ダーク（属性なしでも既定はダーク） -->
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
- **ダーク固定のプロダクトは何もしなくてよい。** ライトのオーバーレイは属性が付くまで不活性。
|
|
109
|
+
- **切り替えるプロダクトは html の `data-theme` を書き換えるだけ。** トークンを自分で持つ必要はない。
|
|
110
|
+
- 切り替え対象は**参照元の生値だけ**。ティント面（`--color-tint-*`）とセマンティック面（`--color-*-surface`）は `color-mix(…, var(--color-bg))` の合成なので `--color-bg` の変化に自動追従する。リンク色と `--color-accent` も `--color-mint` / `--color-mint-soft` の参照なので追従する。
|
|
111
|
+
- 要素単位で部分的に切り替えたい場合は、`:root[…]` ではなく `[data-theme="light"]` 版を自分側で足す（DS のセレクタは html 要素だけに効く）。
|
|
43
112
|
|
|
44
|
-
|
|
113
|
+
Storybook のツールバーに Theme トグルがあり、カタログ上でライト/ダークを見比べられる。
|
|
114
|
+
|
|
115
|
+
> 📌 1.4.x までは `theme.css` がダーク単一トーンで、ライトは**消費側が自前で持つ**契約だった。その結果、同じライト値が insession-app（`apps/web`）と loophub（`apps/web` / `apps/lp`）に重複していた。1.5.0 でここへ一本化した（移設前に3者の値を突き合わせ、**loophub の17トークンは insession-app の30トークンの部分集合で値も完全一致**であることを確認している）。
|
|
45
116
|
|
|
46
117
|
## 開発
|
|
47
118
|
|
|
48
119
|
```bash
|
|
49
120
|
pnpm install
|
|
50
121
|
pnpm storybook # カタログ（http://localhost:6006）
|
|
51
|
-
pnpm build # dist
|
|
122
|
+
pnpm build # dist を生成（build:js = tsup で js + d.ts / build:css = 配布 CSS）
|
|
52
123
|
pnpm typecheck
|
|
53
124
|
pnpm check # Biome lint + format
|
|
125
|
+
pnpm check:styles # 配布 CSS がコンポーネントの参照を満たしているか（要 pnpm build）
|
|
54
126
|
```
|
|
55
127
|
|
|
128
|
+
### `pnpm check:styles` が守っているもの
|
|
129
|
+
|
|
130
|
+
このパッケージは長らく「**publish された中身だけでは完成しない**」状態だった。コンポーネントが `className="modal-backdrop"` や `animate-[card-in_…]` を参照しているのに、その定義はパッケージ内に無く、消費側 insession-app の legacy CSS にしか存在しなかった。クラス名は DOM に出るのに CSS が無いので、**型検査もビルドも lint も緑のまま、insession-app 以外では見た目だけが静かに崩れる**（Modal 既定経路 / BottomSheet / GoogleIcon / 各種アニメーションが該当した）。
|
|
131
|
+
|
|
132
|
+
人間のレビューで気づける類の欠損ではないので、`scripts/check-styles.mjs` が CI で機械的に検査する:
|
|
133
|
+
|
|
134
|
+
1. ソースの `animate-[NAME_…]` に対し `@keyframes NAME` が配布 CSS にあるか
|
|
135
|
+
2. `className` に書かれた素のクラス名が、配布 CSS にセレクタとして存在するか
|
|
136
|
+
3. トークンが `:root` に出ているか / preflight を巻き込んでいないか / ユーティリティ生成が生きているか
|
|
137
|
+
|
|
138
|
+
**Storybook も同じ理由で「消費側と同じ経路」で描く。** `.storybook/preview.css` は `dist/styles.css` だけからコンポーネントのスタイルを取り、stories 自身のページ組みの分だけを `source(none)` + `@source "../stories"` で追加生成する。ここでコンポーネント本体を走査対象に戻すと、配布 CSS の欠損をカタログが埋めてしまい、上記の見逃しが再発する。
|
|
139
|
+
|
|
56
140
|
### 消費側と同時に開発する（ローカル参照）
|
|
57
141
|
|
|
58
142
|
publish を挟まずに変更を消費側アプリへ反映させるには、消費側リポジトリで一時的にローカルを指す。
|
|
@@ -69,7 +153,7 @@ pnpm build
|
|
|
69
153
|
|
|
70
154
|
### ⚠ minify を有効にしないこと
|
|
71
155
|
|
|
72
|
-
`tsup.config.ts` は `minify: false`
|
|
156
|
+
`tsup.config.ts` は `minify: false`、`build:css` も minify しない。従来方式（`@source` で `dist` を走査してユーティリティを生成する）の消費側がまだ居るため、**クラス名の文字列リテラルが壊れると上記の「スタイルが静かに消える」障害を引き起こす**。配布 CSS は gzip で約 9KB に落ちるので、minify の実利はほとんど無い。
|
|
73
157
|
|
|
74
158
|
## リリース
|
|
75
159
|
|
|
@@ -81,13 +165,67 @@ pnpm changeset # 変更の intent を積む
|
|
|
81
165
|
|
|
82
166
|
`main` に push されると Version PR が作られ、それをマージすると `release.yml` が npm publish する。
|
|
83
167
|
|
|
168
|
+
**publish は npm の Trusted Publishing（OIDC）で行う方針。トークンは使わない。** `release.yml` は `id-token: write` を持ち、`NPM_TOKEN` を**意図的に env へ渡していない**（changesets/action は env に `NPM_TOKEN` があればトークン publish を優先するため、渡すと OIDC が使われなくなる）。
|
|
169
|
+
|
|
170
|
+
### ⚠ OIDC publish が成立するには3つの条件が揃う必要がある
|
|
171
|
+
|
|
172
|
+
1.4.0 の publish 試行で**3つとも欠けていることが判明した**。
|
|
173
|
+
|
|
174
|
+
**① runner の npm が 11.5.1 以降であること（最初にここで詰まった）**
|
|
175
|
+
|
|
176
|
+
**Trusted Publishing の OIDC 交換を実装しているのは npm CLI 本体で、11.5.1 以降が必要。** Node の同梱 npm では届かない。
|
|
177
|
+
|
|
178
|
+
| | 同梱 npm |
|
|
179
|
+
| --- | --- |
|
|
180
|
+
| Node 22.23.1 | 10.9.8 |
|
|
181
|
+
| Node 24.0.0 | 11.3.0 |
|
|
182
|
+
|
|
183
|
+
どちらも 11.5.1 未満なので、**Node のバージョン選択では解決しない**。`release.yml` は `npm install -g npm@11` を明示的に実行している。これを外すと npm は OIDC 交換を行わず、認証情報なしで publish しようとして下記の 404 になる。
|
|
184
|
+
|
|
185
|
+
publish は changesets が内部で `npm publish` を呼ぶので、pnpm ではなく **npm CLI 自体の版**が効く。
|
|
186
|
+
|
|
187
|
+
**② npm 側: Trusted Publisher の登録**
|
|
188
|
+
|
|
189
|
+
npm の package settings で、このリポジトリを Trusted Publisher として登録する。未登録だと OIDC トークンが認証情報に交換されないため、**既存パッケージへの `PUT` が `E404 Not Found` で拒否される**（npm は権限不足を 403 ではなく 404 で返す。パッケージの存在を隠すため）。
|
|
190
|
+
|
|
191
|
+
> 📌 ① と ② はどちらが欠けても**まったく同じ 404** になる。エラー文言では切り分けられないので、まず runner の npm 版を確認すること（`npm -v` を1行足すだけでよい）。
|
|
192
|
+
|
|
193
|
+
> https://www.npmjs.com/package/@insession/design-system/access → Trusted Publisher
|
|
194
|
+
>
|
|
195
|
+
> | 項目 | 値 |
|
|
196
|
+
> | --- | --- |
|
|
197
|
+
> | Publisher | GitHub Actions |
|
|
198
|
+
> | Organization or user | `insession-space` |
|
|
199
|
+
> | Repository | `design-system` |
|
|
200
|
+
> | Workflow filename | `release.yml` |
|
|
201
|
+
> | Environment | （空欄。`release.yml` は environment を使わない） |
|
|
202
|
+
|
|
203
|
+
**③ GitHub org 側: Actions による PR 作成の許可（未設定 → Version PR が作られない）**
|
|
204
|
+
|
|
205
|
+
これは publish ではなく**採番**の側の条件。① ② が揃っていなくても、ここが欠けると Version PR が作られないので採番が進まない。
|
|
206
|
+
|
|
207
|
+
`release.yml` はワークフロー側で `pull-requests: write` を宣言しているが、それとは別に **org のポリシー**が Actions による PR 作成を禁止していると弾かれる。
|
|
208
|
+
|
|
209
|
+
```
|
|
210
|
+
HttpError: GitHub Actions is not permitted to create or approve pull requests.
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
> https://github.com/organizations/insession-space/settings/actions → Workflow permissions →
|
|
214
|
+
> **「Allow GitHub Actions to create and approve pull requests」** をON
|
|
215
|
+
|
|
216
|
+
リポジトリ側（`Settings → Actions → General`）の同名項目は、org が許可するまで変更できない（API は `409 Conflict` を返す）。
|
|
217
|
+
|
|
218
|
+
> 📌 **1.3.1 までの publish は OIDC ではなく手動だった。** レジストリ上の 1.3.1 は `_npmUser` が個人アカウントで **provenance attestation を持たない**（`dist.attestations: null`）。Trusted Publishing 経由なら必ず provenance が付くので、OIDC は使われていない。`release.yml` が導入されてから実際に走ったのは 1.4.0 が初回で、そこで上記2点の未設定が露見した。
|
|
219
|
+
|
|
84
220
|
`package.json` の `publishConfig.registry` で公開レジストリを明示している。**これを外さないこと** — 開発機の `~/.npmrc` が社内プロキシを `registry` に設定していると、publish がプロキシ宛になって公開レジストリに出ない。
|
|
85
221
|
|
|
86
|
-
|
|
222
|
+
### ローカルから publish する場合
|
|
223
|
+
|
|
224
|
+
npm はアカウントの 2FA か「bypass 2FA 付き granular access token」を要求するので、CI（OIDC）経由が基本。どうしても手で出す場合:
|
|
87
225
|
|
|
88
226
|
```bash
|
|
89
227
|
npm whoami --registry https://registry.npmjs.org # 公開レジストリでのログイン確認
|
|
90
|
-
pnpm build && npm publish
|
|
228
|
+
pnpm build && npm publish --otp=<code> # 2FA 有効時は OTP が必要
|
|
91
229
|
```
|
|
92
230
|
|
|
93
231
|
## 構成
|
|
@@ -95,14 +233,26 @@ pnpm build && npm publish # publishConfig.registry が
|
|
|
95
233
|
```
|
|
96
234
|
index.ts 公開窓口（外部はここ経由で import する）
|
|
97
235
|
theme.css デザイントークンの契約（@theme）
|
|
236
|
+
base.css コンポーネントが前提にする最小リセット（preflight は配らない）
|
|
237
|
+
components.css ユーティリティで表現していない部品 CSS と @keyframes
|
|
238
|
+
styles.src.css 配布 CSS のビルド入力（publish しない）
|
|
98
239
|
*.tsx プリミティブ（button / input / modal / popover / …）
|
|
99
240
|
icons/ アイコン（icon.tsx の PATHS が単一ソース）
|
|
100
241
|
stories/ Storybook のカタログ
|
|
101
|
-
.storybook/ Storybook 設定（preview.css
|
|
242
|
+
.storybook/ Storybook 設定（preview.css が消費側と同じ経路の再現）
|
|
243
|
+
scripts/ check-styles.mjs（配布 CSS の欠損検査）
|
|
102
244
|
.design-sync/ DesignSync（claude.ai/design 連携）の設定
|
|
103
|
-
tsup.config.ts
|
|
245
|
+
tsup.config.ts 配布物（js + d.ts）のビルド
|
|
104
246
|
```
|
|
105
247
|
|
|
248
|
+
配布されるのは `dist/`（`index.js` / `index.d.ts` / `styles.css`）と `theme.css` / `base.css` / `components.css` / `LICENSE`。
|
|
249
|
+
|
|
250
|
+
## ライセンス
|
|
251
|
+
|
|
252
|
+
[MIT](./LICENSE) © INSESSION Space
|
|
253
|
+
|
|
254
|
+
1.4.0 までは `package.json` の `license` が `UNLICENSED` のままだった。public リポジトリで npm にも公開しているのに、この表記では **InSession / loophub 以外は法的に使えない**（`UNLICENSED` は「許諾しない」の明示）。他プロダクトへ配る前提と矛盾していたので MIT に改めた。
|
|
255
|
+
|
|
106
256
|
## 履歴
|
|
107
257
|
|
|
108
258
|
このパッケージは `insession-space/insession-app`（モノレポ）の `foundation/ui`（さらに前は `packages/ui`）として開発されていた `@in-session/ui` を、リポジトリ分割時に独立させて改名したもの。改名前の変更履歴は `CHANGELOG.md` にそのまま残している。
|
package/base.css
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/* @insession/design-system — このパッケージのコンポーネントが前提にする最小リセット。
|
|
2
|
+
*
|
|
3
|
+
* dist/styles.css（プリビルド配布 CSS）に @layer base として同梱される。
|
|
4
|
+
*
|
|
5
|
+
* ── なぜ Tailwind の preflight を配らないのか ──────────────────
|
|
6
|
+
* preflight は `* { margin: 0; padding: 0; border: 0 }` や見出し/リスト/リンク/メディアの
|
|
7
|
+
* 既定値まで潰すため、消費側アプリのページ全体の見た目を書き換えてしまう。ライブラリが
|
|
8
|
+
* 勝手に持ち込んでよい範囲を超えるので配らない。
|
|
9
|
+
*
|
|
10
|
+
* 実際の運用もそうなっている: insession-app は `@import "tailwindcss/theme.css"` +
|
|
11
|
+
* `utilities.css` の2本だけを読み、preflight を意図的に外している。つまりこのパッケージの
|
|
12
|
+
* コンポーネントは「preflight 無し」で描画されるのが本来の姿で、ここもそれに揃える。
|
|
13
|
+
*
|
|
14
|
+
* ── ここに入れる基準 ────────────────────────────────
|
|
15
|
+
* 「入れないとコンポーネントが壊れる」かつ「消費側のコンテンツを壊さない」ものだけ。
|
|
16
|
+
* - box-sizing: 固定 w/h と border を併用する部品（Checkbox / Radio / Toggle の 22px 枠など）が
|
|
17
|
+
* content-box では設計サイズにならない。border-box は insession-app / loophub の双方が
|
|
18
|
+
* 既に前提にしている（前者は legacy レイヤーの `*`、後者は preflight 経由）。
|
|
19
|
+
* - フォームコントロール: font / color を継承させ、ブラウザ既定の OS ボタン外観（灰色の面・
|
|
20
|
+
* 枠・小さい font）を消す。UA スタイルシートは作者スタイルに常に負けるので、ここに置けば
|
|
21
|
+
* Tailwind の無い消費側でも部品が意図どおり描画される。
|
|
22
|
+
*
|
|
23
|
+
* 逆に、見出し・段落・リスト・リンク・メディアの既定値は **触らない**。消費側の文章が崩れるし、
|
|
24
|
+
* insession-app の現在の描画（例: Modal 既定経路の <p> はブラウザ既定マージンを持つ）もそのまま
|
|
25
|
+
* 保たれる。
|
|
26
|
+
*
|
|
27
|
+
* ── レイヤーであることの意味 ──────────────────────────
|
|
28
|
+
* @layer base に入っているので、**レイヤーに属さない消費側の CSS が常に勝つ**。したがって
|
|
29
|
+
* 消費側が独自の button リセットや box-sizing 方針を持っていても、こちらが押し負ける側になる。
|
|
30
|
+
* ライブラリとしてはそれが正しい向き。
|
|
31
|
+
*/
|
|
32
|
+
|
|
33
|
+
@layer base {
|
|
34
|
+
*,
|
|
35
|
+
::before,
|
|
36
|
+
::after,
|
|
37
|
+
::backdrop {
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* フォントと色を継承させる（ブラウザ既定の system-ui / 小さい font-size を使わせない）。
|
|
42
|
+
margin/padding/border/background を落とすのは、部品側が自前で面と枠を組み立てるため。
|
|
43
|
+
このパッケージの入力系（Input / SearchField / Composer）と button 系は全て bg / border を
|
|
44
|
+
明示しているので、ここは「明示漏れとブラウザ既定への保険」として働く。 */
|
|
45
|
+
button,
|
|
46
|
+
input,
|
|
47
|
+
optgroup,
|
|
48
|
+
select,
|
|
49
|
+
textarea {
|
|
50
|
+
font: inherit;
|
|
51
|
+
font-feature-settings: inherit;
|
|
52
|
+
font-variation-settings: inherit;
|
|
53
|
+
letter-spacing: inherit;
|
|
54
|
+
color: inherit;
|
|
55
|
+
margin: 0;
|
|
56
|
+
padding: 0;
|
|
57
|
+
border: 0 solid;
|
|
58
|
+
border-radius: 0;
|
|
59
|
+
background-color: transparent;
|
|
60
|
+
opacity: 1;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
button,
|
|
64
|
+
input:where([type="button"], [type="reset"], [type="submit"]) {
|
|
65
|
+
appearance: button;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
::placeholder {
|
|
69
|
+
opacity: 1;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
:disabled {
|
|
73
|
+
cursor: default;
|
|
74
|
+
}
|
|
75
|
+
}
|