npm - @insession/design-system - Versions diffs - 1.4.1 → 1.5.0 - Mend

@insession/design-system 1.4.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.

Files changed (5) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,25 @@
 # @insession/design-system
+## 1.5.0
+### Minor Changes
+- 76bc475: ライトテーマを DS に取り込んだ。`<html data-theme="light">` だけでライトになる。
+  これまで `theme.css` はダーク単一トーンで、ライトは**消費側が自前でオーバーレイを持つ**契約だった。結果として同じライト値が insession-app（`apps/web`）と loophub（`apps/web` / `apps/lp`）に重複し、DS の README にも「値は揃えて保守する」と書かれた三重管理になっていた。ここへ一本化した。
+  移設前に 3 者の値を突き合わせ、**loophub の 17 トークンは insession-app の 30 トークンの部分集合で、値も完全に一致**していることを確認している。insession-app 固有で DS が持たない 3 つ（`--color-visibility-public` / `-followers` / `-community`）は移していない。
+  **設計:**
+  - **ダークが既定。** `@theme` の値がそのままダークのトーンで、ライトのオーバーレイは `data-theme="light"` が付くまで不活性。**ダーク固定のプロダクトは何も意識しなくてよい。**
+  - **ダーク側（`[data-theme="dark"]`）の再宣言は置かない。** 移設元には 25 トークン分あったが、全て `@theme` の既定値と完全一致だったため、持ち込むと同じ値の二重管理が DS 側に移るだけになる。属性なしと `"dark"` はどちらも `:root` の値で成立する。
+  - オーバーレイは**どの `@layer` にも属さない**ので `@theme` の出力（theme レイヤー）より必ず強い。詳細度でも `:root[data-theme="light"]`(0,2,0) > `:root`(0,1,0) なので、消費側の取り込み方に依らず効く。
+  - 上書きするのは**参照元の生値だけ**（27 トークン）。ティント面とセマンティック面は `color-mix(…, var(--color-bg))` の合成なので追従する。
+  - セレクタは `:root[…]` で html 要素だけに効く。要素単位の部分切替が必要なプロダクトは自分側で足す。
+  **Storybook にツールバーの Theme トグルを追加した。** これが無いとライト値を目視検証できなかった。`scripts/check-styles.mjs` にもオーバーレイの回帰検査を足した（存在すること・レイヤー外にあること・面やティントを二重に書いていないこと・ダーク側の再宣言が無いこと）。
 ## 1.4.1
 ### Patch Changes

package/README.md CHANGED Viewed

@@ -95,9 +95,24 @@ minimumReleaseAgeExclude:
 > 除外するのは**自分たちが publish する first-party パッケージだけ**にすること。サードパーティへの待機は攻撃対策として意味があるので外さない。
-### テーマ
+### テーマ（ライト / ダーク）
-`theme.css` は**ダーク単一トーン**で、`[data-theme]` のライトテーマオーバーレイを含まない。ライト/ダークを切り替えるアプリは自分側でオーバーレイを持つ。
+**ダークが既定。ライトは `<html data-theme="light">` のときだけ効く。**
+```html
+<html data-theme="light">  <!-- ライト -->
+<html data-theme="dark">   <!-- ダーク -->
+<html>                     <!-- ダーク（属性なしでも既定はダーク） -->
+```
+- **ダーク固定のプロダクトは何もしなくてよい。** ライトのオーバーレイは属性が付くまで不活性。
+- **切り替えるプロダクトは html の `data-theme` を書き換えるだけ。** トークンを自分で持つ必要はない。
+- 切り替え対象は**参照元の生値だけ**。ティント面（`--color-tint-*`）とセマンティック面（`--color-*-surface`）は `color-mix(…, var(--color-bg))` の合成なので `--color-bg` の変化に自動追従する。リンク色と `--color-accent` も `--color-mint` / `--color-mint-soft` の参照なので追従する。
+- 要素単位で部分的に切り替えたい場合は、`:root[…]` ではなく `[data-theme="light"]` 版を自分側で足す（DS のセレクタは html 要素だけに効く）。
+Storybook のツールバーに Theme トグルがあり、カタログ上でライト/ダークを見比べられる。
+> 📌 1.4.x までは `theme.css` がダーク単一トーンで、ライトは**消費側が自前で持つ**契約だった。その結果、同じライト値が insession-app（`apps/web`）と loophub（`apps/web` / `apps/lp`）に重複していた。1.5.0 でここへ一本化した（移設前に3者の値を突き合わせ、**loophub の17トークンは insession-app の30トークンの部分集合で値も完全一致**であることを確認している）。
 ## 開発

package/dist/styles.css CHANGED Viewed

@@ -1638,6 +1638,38 @@
   --elev-popover: 0 16px 30px -16px rgba(0, 0, 0, 0.7);
   --elev-overlay: 0 26px 64px -32px rgba(0, 0, 0, 0.85);
 }
+:root[data-theme="light"] {
+  --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;
+  --color-fill: #17160f;
+  --color-on-fill: #f1eee6;
+  --color-mint: #ff5a36;
+  --color-mint-soft: #c8431f;
+  --color-cyan: #3b6fe0;
+  --color-violet: #1fa463;
+  --color-success: #1fa463;
+  --color-warning: #e0930f;
+  --color-danger: #d8433d;
+  --color-info: #3b6fe0;
+  --color-shadow: #b4afa0;
+  --color-snackbar-danger: var(--color-danger);
+  --color-snackbar-danger-border: color-mix(in srgb, #ff6b6b 30%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --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);
+}
 @layer base {
   *, ::before, ::after, ::backdrop {
     box-sizing: border-box;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@insession/design-system",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "InSession / loophub 共通のデザインシステム。純粋 leaf UI プリミティブ + デザイントークン（アプリ依存なし。i18n 等は props で注入する）",
   "license": "MIT",
   "type": "module",

package/theme.css CHANGED Viewed

@@ -23,15 +23,16 @@
  * （アプリのソースには書かれていないもの。例 bg-accent / rounded-card）が
  * 入っているかを確かめれば機械的に防げる。
  *
- * ── ライトテーマについて ────────────────────────────────
- * このファイルはダーク単一トーンで、[data-theme] のライトテーマオーバーレイを含まない。
- * ライト/ダークを切り替えるアプリは自分側で [data-theme] オーバーレイを持つ。
+ * ── ライト/ダークについて ───────────────────────────────
+ * **ダークが既定**で、下の @theme の値がそのままダークのトーン。ライトは
+ * `<html data-theme="light">` のときだけ効くオーバーレイ(ファイル末尾)で与える。
+ * したがって:
+ *   - ダーク固定のプロダクトは何もしなくてよい(オーバーレイは不活性)
+ *   - ライト/ダークを切り替えるプロダクトは html の data-theme を書き換えるだけ
+ *   - `data-theme="dark"` と「属性なし」はどちらもダークになる(:root の @theme 値)
  *
- * ── insession-app との関係(歴史的経緯) ─────────────────────
- * insession-app の apps/web は巨大な legacy CSS と共存させるため、同じトークンを
- * src/style.css にインラインで持ち、このファイルを import しない。両者の値は
- * 揃えて保守する(insession-app 側が増やしたトークンのうち、このパッケージの
- * コンポーネントが参照しないものはここに持ち込まない)。
+ * ⚠ ダーク側の再宣言は**置かない**。@theme の値が既定として効くので、同じ値を
+ * `[data-theme="dark"]` にも書くと保守箇所が二重になるだけで、得るものが無い。
  */
 @theme {
@@ -328,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);
+}