@lism-css/mcp 0.26.0 → 0.28.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.
@@ -1,13 +1,9 @@
1
1
  # 実装プランの作り方(C0–C8詳細・出力フォーマット)
2
2
 
3
- Lism CSSで新規UI・セクション・コンポーネントを書く前に作る「実装プラン」の詳細編です。実装フローの全体像・資料確認トリガー表・判定記号は`SKILL.md`を正本とします。ここでは各チェック項目(C0–C8)の詳細とプランの出力フォーマットをまとめます。
4
-
5
- 判定記号(✅/🔁/⏸、`✅新規`・`✅例外`の注記を含む)の定義は`SKILL.md`の「判定記号」を参照してください。
3
+ Lism CSSで新規UI・セクション・コンポーネントを書く前に作る「実装プラン」の詳細編。実装フロー・資料確認トリガー・判定記号(✅/🔁/⏸と注記)は`SKILL.md`が正本で、ここではC0–C8の詳細とプランの出力フォーマットだけを扱う。
6
4
 
7
5
  ## 資料確認
8
6
 
9
- どの操作の手前で何を読むかは`SKILL.md`の「資料確認トリガー」を正本とする。
10
-
11
7
  ### 初期確認(C0前に実行)
12
8
 
13
9
  新規UI/コンポーネント/セクション、またはスクショ/Figma等のデザイン再現では、C0に入る前に対象へ明らかに関係する最小限の詳細ファイルを実際に開く。
@@ -18,15 +14,15 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
18
14
  初期確認した資料: primitives/l--stack.md, primitives/l--columns.md, tokens.md
19
15
  ```
20
16
 
21
- 新規UI/コンポーネント/セクションで初期確認した資料が空のまま実装に入ってはいけない。「必要なら参照」とだけ書くのも不可。軽微な既存パターン内の修正で既存コード確認のみで足りる場合は、その旨を明記する。
17
+ 空のまま、または「必要なら参照」とだけ書いて実装に入らない。既存コード確認だけで足りる軽微な修正では、その旨を書く。
22
18
 
23
19
  ### 資料確認の記録
24
20
 
25
- 読んだ資料は「初期確認」「実装中」を区別して資料確認ログに記録する。提出前に、🔁が✅または⏸へ解消されたかを照合する。
21
+ 読んだ資料は「初期確認」「実装中」を区別して資料確認ログ(「出力フォーマット」参照)に記録する。
26
22
 
27
23
  ## C0–C8 実装前チェック詳細
28
24
 
29
- 各Cは「列挙/照合・判定/決め方/参照先/よい例・避けたい例」の観点で判断します。
25
+ 各Cは「列挙/照合・判定/決め方/参照先/よい例・避けたい例」の観点で判断する。
30
26
 
31
27
  ### C0: 入力整理
32
28
 
@@ -40,8 +36,7 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
40
36
 
41
37
  - **列挙**: 縦並び/横並び/カラム/メディア枠/幅制御/オーバーレイ/全体リンクなどの構造、要素、heading level、landmark。
42
38
  - **照合・判定**: 標準Primitiveで組める→✅。カラム系など迷う→🔁。`@lism-css/ui`で済む→✅または🔁。使うPrimitive詳細を未読なら🔁のまま実装しない。
43
- - **決め方**: Layout Primitive→Trait→Atomic→UIコンポーネントの順。`<div>`+Property ClassやCSSで押し切らない。
44
- - **Primitive優先ガード**: `<div>`+CSSで押し切らず、`SKILL.md`の「目的別実装ガイド」で候補を先に確認する。この判断を書かずに実装しない。
39
+ - **決め方**: `SKILL.md`の「目的別実装ガイド」で候補を先に確認し、Layout Primitive→Trait→Atomic→UIコンポーネントの順に選ぶ。`<div>`+Property ClassやCSSで押し切らない。この判断を書かずに実装しない。
45
40
  - **参照先**: `SKILL.md`の「目的別実装ガイド」、`primitive-class.md`、`primitives/l--*.md`、`trait-class.md`、`components-core.md`、`components-ui.md`、`antipatterns-layout.md#レイアウト選択ミス`。
46
41
  - **よい例・避けたい例**: OK=`<Columns cols={3}>`、`<Frame ar="16/9">`、Astroなら`import { Stack, Columns, Frame } from 'lism-css/astro'`。罠=素の`<div>`だらけ、`<div -d:grid gtc=...>`、手組みメディア枠、最外殻Wrapper。
47
42
 
@@ -56,10 +51,10 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
56
51
  ### C3: 命名設計
57
52
 
58
53
  - **列挙**: 新設する`b--`/`c--`のクラス名とBlock/Element/Modifier構造、独自CSSを置くLayer。
59
- - **照合・判定**: プレフィックス後の名前が規約に合う→✅。ハイフンや`__`がある→🔁。ベーススタイルを CSS 側で管理する共通基礎部品→`✅新規`(`b--`)。それ以外のカスタムクラス→`✅新規`(`c--`)。公開API・CMS・外部JS・E2E依存→⏸。独自CSSがLayer外になる→🔁。
60
- - **決め方**: `naming.md`に従う。Block名にハイフンは使わず、Element区切りは`_`ひとつ、Modifierは`--`ふたつ(`b--`も`c--`と同記法)。分類は`b--`の3条件(サイト共通の繰り返し利用・ベーススタイルを CSS 側で管理・ボタン/バッジ/カード級の粒度。`css-rules.md#block-classb--`参照)で決める(すべて満たす→`b--`/それ以外→`c--`)。独自CSSは必ず`@layer lism-custom {}`内に置く(`b--`のベーススタイルだけ`@layer lism-block {}`)。
61
- - **参照先**: `naming.md`、`css-rules.md#block-classb--`、`css-rules.md#custom-classc--`、`css-rules.md#独自クラスの選び方2分類`、`antipatterns-layout.md#クラス名の命名ミス`。
62
- - **よい例・避けたい例**: OK=`c--featureCard`、`c--featureCard_body`、既存命名がアンダースコア寄せなら`c--feature_card`。罠=`c--feature-card`、`c--hero__inner`(正しくは`c--hero_inner`)、`c--feature-card__body`(正しくは`c--featureCard_body`)。
54
+ - **照合・判定**: プレフィックス後の名前が規約に合う→✅。ハイフンや`__`がある→🔁。CSSで参照しないElement(`c--name_elem`)を付けている→🔁(外す)。ベーススタイルを CSS 側で管理する共通基礎部品→`✅新規`(`b--`)。それ以外のカスタムクラス→`✅新規`(`c--`)。公開API・CMS・外部JS・E2E依存→⏸。独自CSSがLayer外になる→🔁。
55
+ - **決め方**: 記法とBlock名の付け方は`naming.md`、`b--`/`c--`の分類(`b--`は3条件をすべて満たす時だけ)と置くLayerは`css-rules.md`に従う。
56
+ - **参照先**: `naming.md`、`css-rules.md#block-classb--`、`css-rules.md#custom-classc--`、`css-rules.md#独自クラスの選び方2分類`、`antipatterns-layout.md#クラス名の命名ミス`、`antipatterns-layout.md#css-の無い-element-クラスを付ける`。
57
+ - **よい例・避けたい例**: OK=`c--featureCard`、`c--featureCard_body`、既存命名がアンダースコア寄せなら`c--feature_card`。罠=`c--feature-card`、`c--hero__inner`(正しくは`c--hero_inner`)、`c--feature-card__body`(正しくは`c--featureCard_body`)、CSSで参照しない`c--featureCard_title`(外す)。
63
58
 
64
59
  ### C4: 状態・バリエーション設計
65
60
 
@@ -72,24 +67,24 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
72
67
  ### C5: 値・トークン照合
73
68
 
74
69
  - **列挙**: spacing/color/fz/radius/shadow/size/lh/ltsなど、使う予定の値をすべて列挙。
75
- - **照合・判定**: `tokens.md`に完全一致→✅。typo・既存規約上明確な置換→🔁(`tokens.md`で正規トークンを確認して置換し✅へ)。近似丸め・任意色・ブランド色・再現度の判断→⏸。`antipatterns.md`の「直書きしてよい例外」に該当→`✅例外`。`✅例外`にできるのはこの許可リストだけで、「ユーザー指示に基づく実測値」のような例外カテゴリを自作しない。
70
+ - **照合・判定**: 「照合の手順」の3に従う(完全一致→✅/typo等の明確な置換→🔁にして`tokens.md`で確認後✅/近似丸め・任意色・ブランド色→⏸/許可リスト該当→`✅例外`)。
76
71
  - **決め方**: トークン値を流用。⏸は本ファイルの「デザインデータ取り込みフロー」に従い、トークン候補と差分表を出して確認まで書かない。CSSへ書く前に、Lism Props/Property Classで表せる値かも同時に確認する。インストール済みの`lism-css`がある環境では、実CSS(`main.css`)やコンポーネント実装でトークン・クラスの実在を確認してから採用するとtypoを防げる。
77
72
  - **参照先**: `tokens.md`、`property-class.md`、`antipatterns.md#token-typo存在しない値`、`antipatterns.md#px--固定値の直書き`。
78
73
  - **よい例・避けたい例**: OK=`-fz:xs -p:10 -bgc:base-2 -bdrs:10`。罠=`padding:13px`、`bgc="secondary"`。
79
74
 
80
75
  ### C6: レスポンシブ方針
81
76
 
82
- - **列挙**: 各値のbaseの値、切替BP(sm/md/lg)、container queryかmedia queryか、container運用なら祖先`isContainer`の有無、固定Grid化していないか。
83
- - **照合・判定**: baseの値あり・標準BP・必要な祖先あり→✅。base抜け・xs誤用→🔁。`$is_container_query:0`等でmedia query運用が確認できる場合は`isContainer`必須にしない→✅。固定列をレスポンシブ化するなど挙動変更→⏸。
84
- - **決め方**: baseの値を必ず置く。標準BPへ寄せる。同じ値の繰り返しは省略する。等幅カラムはまず`Columns cols={[1, null, 3]}`などPrimitiveのレスポンシブAPIで表せるか確認し、できない場合だけ`@container`/`@media`を自分で書く。
77
+ - **列挙**: 各値のbaseと切替BP(sm/md/lg)、container queryかmedia queryか、container運用なら祖先`isContainer`の有無、固定Grid化していないか。
78
+ - **照合・判定**: 標準BP・必要な祖先あり→✅。xs誤用→🔁。`$is_container_query:0`等でmedia query運用が確認できる場合は`isContainer`必須にしない→✅。固定列をレスポンシブ化するなど挙動変更→⏸。
79
+ - **決め方**: 標準BPへ寄せる。同じ値の繰り返しは省略する。等幅カラムはまず`Columns cols={[1, null, 3]}`などPrimitiveのレスポンシブAPIで表せるか確認し、できない場合だけ`@container`/`@media`を自分で書く。
85
80
  - **参照先**: `responsive.md`、`trait-class/is--container.md`、`property-class.md`、`primitive-class.md#カラムレイアウト-primitive-の使い分けガイド`。
86
- - **よい例・避けたい例**: OK=`p={{ base: '20', md: '30' }}`+祖先`isContainer`、`<Columns cols={[1, null, 3]}>`。罠=`gtc="repeat(3,1fr)"`固定、カード列数のためだけに`@container`直書き、base抜け、container祖先なし。
81
+ - **よい例・避けたい例**: OK=`p={{ base: '20', md: '30' }}`+祖先`isContainer`、`<Columns cols={[1, null, 3]}>`。罠=`gtc="repeat(3,1fr)"`固定、カード列数のためだけに`@container`直書き、container祖先なし。
87
82
 
88
83
  ### C7: CSSに書くもの/Propsに移すもの
89
84
 
90
85
  - **列挙**: CSSへ書く予定の各宣言を「Property Class/Propsへ移す宣言」と「CSSにしか書けない宣言」に分ける。`c--*`のCSSに残る宣言を実装プランに明記する。
91
86
  - **照合・判定**: `c--*`のクラスで1つの要素にだけ効く見た目の指定→✅マークアップへ。擬似クラス・擬似要素・状態切替・子孫セレクタ→✅CSSへ残す。C3で`b--`と決めた部品のベーススタイル→✅`@layer lism-block`へ残す(トークン使用。BP切替・hover・例外調整はProperty Class)。下表の宣言が`.c--*` CSSに残る→🔁未通過。
92
- - **決め方**: `-{prop}:{value}`またはLism Propsへ移す。`.c--*`はCSSが空でも何のパーツかを示す名前として残す。
87
+ - **決め方**: `-{prop}:{value}`またはLism Propsへ移す。本体クラス`c--name`はCSSが空でも何のパーツかを示す名前として残す。ElementはCSSで参照しなくなったら外す。
93
88
  - **参照先**: `property-class.md`、`css-rules.md#custom-classc--`、`antipatterns.md#property-class-で書けるのに-css-で書く`。
94
89
  - **移行表**:
95
90
 
@@ -110,23 +105,19 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
110
105
 
111
106
  ### C8: 既定値の確認
112
107
 
113
- - **列挙**: 使うPrimitiveが既に持つ既定CSSを確認し、同値をProps/Property Classで重ねていないか。
108
+ - **列挙**: 使うPrimitiveが既に持つ既定CSSを確認し、同値をProps/Property Classで重ねていないか。セマンティックコンポーネント(`Text`/`Inline`/`Group`等)にデフォルト要素と同じ`as`を付けていないか。
114
109
  - **照合・判定**: 既定と同値→足さない。既定と違う意図的上書き→✅。ガイドに未整備のPrimitive既定→今後の整備対象にする。
115
110
  - **決め方**: `primitives/l--*.md`の「既定の挙動」を見る。念のための`ai="center"`/`ov="hidden"`/直下img`w/h/object-fit`を足さない。
116
- - **参照先**: `primitives/l--cluster.md`、`primitives/l--frame.md`、`primitive-class.md`、`components-core.md`。
117
- - **よい例・避けたい例**: OK=`<Cluster g="15">`、`<Frame ar="16/9"><img /></Frame>`。罠=`<Cluster fxw="wrap" ai="center">`、Frame直下imgに`-w:100%`や`object-fit`。
111
+ - **参照先**: `primitives/l--cluster.md`、`primitives/l--frame.md`、`primitive-class.md`、`components-core.md#セマンティックコンポーネント`。
112
+ - **よい例・避けたい例**: OK=`<Cluster g="15">`、`<Frame ar="16/9"><img /></Frame>`。罠=`<Cluster fxw="wrap" ai="center">`、Frame直下imgに`-w:100%`や`object-fit`、`<Text as="p">`。
118
113
 
119
114
  ## 出力フォーマット
120
115
 
121
- 実装前チェックの成果物を実装プランと呼びます。各行に必ず判定記号(定義は`SKILL.md`参照)を付け、⏸が残る項目はその部分を実装しないで先にユーザー確認します。
122
-
123
- 値照合付きレベルでは、実装プラン全体をチャットの返答としてではなく`.lism/plan.md`として保存します(固定名・上書き。冒頭のメタデータヘッダに日時・対象タスク・スケール前提とその判定根拠を書く)。規約は[`verification.md`](./verification.md)を参照してください。
116
+ 実装前チェックの成果物を実装プランと呼ぶ。各行に判定記号を付ける。値照合付きレベルでは`.lism/plan.md`へ保存する(規約は[`verification.md`](./verification.md))。
124
117
 
125
118
  ### 軽量レベル
126
119
 
127
- 小変更では3〜5行で十分です。
128
-
129
- 例:
120
+ 例(3〜5行):
130
121
 
131
122
  ```md
132
123
  - ✅ 構造: 既存`Stack`内へ1項目追加。Primitive変更なし。
@@ -138,7 +129,7 @@ Lism CSSで新規UI・セクション・コンポーネントを書く前に作
138
129
 
139
130
  #### 資料確認ログ
140
131
 
141
- SKILL.md以外に実際に開いたファイルや外部サイトのページurlを、「初期確認」と「実装中」に分けて列挙します。
132
+ SKILL.md以外に実際に開いたファイルや外部サイトのページurlを、「初期確認」と「実装中」に分けて列挙する。
142
133
 
143
134
  例:
144
135
  | タイミング | 種類 | 確認した資料 | 用途 |
@@ -147,19 +138,17 @@ SKILL.md以外に実際に開いたファイルや外部サイトのページurl
147
138
  | 実装中 | 📄 | `tokens.md` | デザイン値とトークン照合(トークン丸めトリガー) |
148
139
  | 実装中 | URL | `https://lism-css.com/docs/naming.md` | `c--*`命名トリガー |
149
140
 
150
- 各行は実装プランの判断項目(特に🔁)と対応させ、提出前に🔁が✅/⏸へ解消されたかを照合します。
141
+ 各行を実装プランの判断項目(特に🔁)と対応させる。
151
142
 
152
143
  #### 🔁判断行
153
144
 
154
- 未読の判断項目そのものに🔁と読む資料を紐づけます。
145
+ 未読の判断項目そのものに🔁と読む資料を紐づける。資料を読んだら同じ行を✅または⏸へ更新する。
155
146
 
156
147
  | 判断項目 | 採用案 | 読む資料 | 判定 |
157
148
  | --- | --- | --- | --- |
158
149
  | カード一覧 | `Columns cols={[1, null, 3]}` | `primitives/l--columns.md` | 🔁 |
159
150
  | hover指定 | `hov={{ bgc: 'base-2' }}` | `property-class/hov.md` | 🔁 |
160
151
 
161
- 対応資料を読んだら、同じ判断行を✅または⏸へ更新します。提出前に🔁が残っている場合は未通過です。
162
-
163
152
  #### 構造表
164
153
 
165
154
  | 対象領域 | 採用Primitive・コンポーネント | 理由 | 参照先 | 判定 |
@@ -168,7 +157,7 @@ SKILL.md以外に実際に開いたファイルや外部サイトのページurl
168
157
 
169
158
  #### トークン表
170
159
 
171
- 値照合付きでは`デザイン値`と`差分`列を必須にします。
160
+ 値照合付きでは`デザイン値`と`差分`列を必須にする。
172
161
 
173
162
  | 用途 | デザイン値 | 採用トークン | 差分 | 判定 |
174
163
  | --- | --- | --- | --- | --- |
@@ -197,9 +186,9 @@ SKILL.md以外に実際に開いたファイルや外部サイトのページurl
197
186
 
198
187
  #### 入力種別と既定動作
199
188
 
200
- デザイン値の扱いは、入力の種類とプロジェクトの段階で決まります。「正確に再現して」等の指示があってもこの分岐が既定動作で、ユーザー指示を根拠に`✅例外`を自作してはいけません。
189
+ デザイン値の扱いは、入力の種類とプロジェクトの段階で決まる。「正確に再現して」等の指示があってもこの分岐が既定動作。
201
190
 
202
- この表は⏸確認を省略する許可ではありません。丸め・任意色などの⏸判定自体は最小ゲート・C5のとおりで、既定動作は「確認時に第一候補として提示する案」と「確認が取れない場合に前提として選ぶ選択肢」を定めるものです(`SKILL.md`「判定記号」の⏸運用を参照)。
191
+ この表は⏸確認を省略する許可ではない。既定動作は、確認時に第一候補として出す案と、確認が取れない時に`✅前提`として選ぶ選択肢(`SKILL.md`「判定記号」の⏸の項)を定める。
203
192
 
204
193
  | 入力 | 既定動作 |
205
194
  | --- | --- |
@@ -215,28 +204,27 @@ SKILL.md以外に実際に開いたファイルや外部サイトのページurl
215
204
  - 完全一致→✅そのまま採用。
216
205
  - typo・既存規約上明確な置換(`secondary`→`base-2`など)→`tokens.md`で正規トークンを確認して置換し、✅にする(ユーザー確認は不要)。
217
206
  - 近似丸め・任意色・ブランド色・密度/再現度の判断→⏸。A=最寄りトークンに丸める/B=カスタムトークン化または基準値(`--s-unit`等)の上書き/C=px直書き(例外)を提示する。この選択肢の定義はここが正本。
207
+ - `antipatterns.md`の「直書きしてよい例外」に該当→`✅例外`(条件は`SKILL.md`「判定記号」)。
218
208
  4. **カスタムトークン化の条件**: 同値が複数箇所で再利用される、またはデザインシステム上の意味を持つ場合は候補にする。1回限りの局所値は丸めか例外で済ませる。
219
209
  5. **デザインデータが無い場合**: 差分表は省略し、既存トークンから意味が近い値を選ぶ。新規数値が必要な時だけ⏸にする。
220
210
 
221
- `--s-unit`などの基準値をプロジェクトが上書きしているとpxの完全一致判定が変わります。値照合付きでは上書きの有無を先に確認してください。
222
-
223
- プロセス違反の実例(NG):
211
+ `--s-unit`などの基準値をプロジェクトが上書きしているとpxの完全一致判定が変わる。値照合付きでは上書きの有無を先に確認する。
224
212
 
225
- - C5に「ユーザー要件の『正確に再現』に基づくページ固有実測値として採用」のような1行を書いて値照合を包括免除し、差分表を省略する。値照合付きレベルでトークン差分表の無い実装プランは無効。
213
+ 実測pxを包括的に例外化するNG例は[`antipatterns.md`](../antipatterns.md#px--固定値の直書き)の「実測pxの包括例外化」。
226
214
 
227
215
  #### 値マッピングの初期すり合わせ
228
216
 
229
- デザインシステムが未確立のプロジェクトで初期実装を任された場合は、値ごとに⏸を出すのではなく、実装前にマッピング方針を一括ですり合わせます。トークン差分表と確認事項表をこの一括確認の提出物として使います。
217
+ デザインシステムが未確立のプロジェクトで初期実装を任された場合は、値ごとに⏸を出すのではなく、実装前にマッピング方針を一括ですり合わせる。トークン差分表と確認事項表をこの一括確認の提出物として使う。
230
218
 
231
219
  - スペース・サイズ・タイポグラフィ: どの範囲を最寄りトークンへ丸め、どこを具体値(px直書き・カスタムトークン)にするかの境界。
232
220
  - カラー: デザイン内の各色をどのセマンティックカラー(`--brand`/`--accent`/`--base`/`--base-2`/`--text`/`--text-2`等)へ割り当てるか。
233
221
  - デザイン画像しか無い場合は、書き出し倍率・想定キャンバス幅の前提もここで確認する。倍率はC0の実測・整合チェックで確定してから提示する。
234
222
 
235
- ユーザー確認が取れない場合は、原則準拠側(最寄りトークンへの丸め・セマンティック割り当て案)を前提として実装プランに明示して進め、完了報告で代替案とともに列挙します(`SKILL.md`「判定記号」の⏸運用を参照)。
223
+ 確認が取れない場合の進め方は`SKILL.md`「判定記号」の⏸の項。
236
224
 
237
225
  ### 提出前セルフチェックへの接続
238
226
 
239
- 実装後、実行レベルが「通常」「値照合付き」の場合は、実装プランと実装を1行ずつ照合します(チェック項目とレベル別の扱いは`SKILL.md`の「提出前セルフチェック」を参照)。この照合とルール照合は、サブエージェント/タスク委任機能が使える環境では評価サブエージェントに実行させ、報告を`.lism/review.md`へ保存します([`verification.md`](./verification.md))。
227
+ `SKILL.md`「提出前セルフチェック」で実装プランと実装を照合した時の分類例:
240
228
 
241
229
  | 計画項目 | 実装結果 | 分類 | 対応 |
242
230
  | --- | --- | --- | --- |
@@ -40,7 +40,7 @@ import { Group, Wrapper, Cluster, Link } from 'lism-css/astro';
40
40
  ```jsx
41
41
  import { Group, Wrapper, Stack, Cluster, Heading, Text } from 'lism-css/astro';
42
42
 
43
- <Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '80']} hasGutter isContainer>
43
+ <Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '70']} hasGutter isContainer>
44
44
  <Wrapper contentSize="l">
45
45
  <Stack g="30" ai="center" ta="center">
46
46
  <Heading level="1" fz={['3xl', null, '5xl']}>キャッチコピー</Heading>
@@ -1,8 +1,8 @@
1
1
  # 検証の分離(`.lism/`規約と評価サブエージェント)
2
2
 
3
- 提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約です。実装フロー・チェック項目の正本は`SKILL.md`(実装フロー・提出前セルフチェック)、実装プランの中身と書式は[`authoring.md`](./authoring.md)を参照してください。
3
+ 提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約。フローとチェック項目は`SKILL.md`、実装プランの書式は[`authoring.md`](./authoring.md)が正本。
4
4
 
5
- `lism-css-guide`の実装フローでは、事前チェック実行レベルが「通常」「値照合付き」の場合だけこの規約を適用します。「不要」「軽量」では`.lism/`へのファイル作成も評価サブエージェントへの委任も行いません(`SKILL.md`「事前チェック実行レベル」参照)。このレベル条件は`lism-css-guide`固有のもので、`.lism/`規約をここから参照する他のスキル(`lism-css-refactor`等)には適用されません。他のスキルからの利用時は、ファイルを作るかどうかは各スキル側の手順に従ってください。
5
+ `lism-css-guide`では実行レベルが「通常」「値照合付き」の時だけ適用する(「不要」「軽量」では`.lism/`も評価委任も無し)。このレベル条件は`lism-css-guide`固有で、`.lism/`規約を参照する他のスキル(`lism-css-refactor`等)ではファイルを作るかどうかを各スキルの手順に従う。
6
6
 
7
7
  ## `.lism/`作業ディレクトリ
8
8
 
@@ -11,7 +11,7 @@ Lism実装作業の成果物(実装プラン・評価報告)は、プロジ
11
11
  | ファイル | 内容 | 作成タイミング |
12
12
  | --- | --- | --- |
13
13
  | `.lism/plan.md` | 実装プラン(トークン差分表・構成表を含む) | 値照合付きレベルの実装前チェック時 |
14
- | `.lism/review.md` | 評価サブエージェント(委任できない環境では本人)による評価報告 | 通常・値照合付きレベルの提出前セルフチェック時(不要・軽量では作成しない) |
14
+ | `.lism/review.md` | 評価サブエージェント(委任できない環境では本人)による評価報告 | 通常・値照合付きレベルの提出前セルフチェック時 |
15
15
 
16
16
  - **固定名・上書き方式**。タスクごとに別名を作らない。照合先が一意に決まることが、評価サブエージェントや将来の機械チェックの前提になる。複数タスクの文脈は各ファイル冒頭のメタデータヘッダで区別する。
17
17
  - メタデータヘッダには日時・対象タスク・スケール前提(デザイン再現時。判定根拠付き)を書く。
@@ -30,7 +30,7 @@ scale: PNGは2880px幅=1440px設計の2x書き出し(画像実寸と行送り
30
30
 
31
31
  ## 評価サブエージェントへの委任
32
32
 
33
- 提出前セルフチェックを実装した本人だけで行うと、「正確に再現する」等のゴールへの執着や、自分で立てたプランを疑いにくくなる心理から、例外を自己承認してしまいやすくなります。サブエージェント/タスク委任機能が使える環境では、照合を読み取り専用の評価サブエージェントに委任します。使えない環境では、同じ照合を本人が`SKILL.md`「提出前セルフチェック」の順に自分で実行します。
33
+ 本人だけの照合は自分のプランを疑いにくく、例外を自己承認しやすい。委任できる環境では読み取り専用の評価サブエージェントに委任し、できない環境では本人が`SKILL.md`「提出前セルフチェック」の順に行う。
34
34
 
35
35
  運用ルール:
36
36
 
@@ -34,7 +34,7 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
34
34
 
35
35
  **`xs` / `xl` は opt-in**:
36
36
  - デフォルト値は `0`(無効)で、CSS は出力されません。`lism.config.js` の `breakpoints` でサイズを与えると有効化されます(customize.md 参照)。
37
- - 型(Lism コンポーネント)でも `sm` / `md` / `lg` のみがデフォルトで補完・許可されます。`xs` / `xl` を使う場合は `declare module 'lism-css'` で `BreakpointRegistry` を拡張して解禁します。
37
+ - 型(Lism コンポーネント)でも `sm` / `md` / `lg` のみがデフォルトで補完・許可されます。`@lism-css/plugin` の統合プラグイン使用時は有効化した BP を反映した `lism-env.d.ts` が自動生成されるため手書き不要(customize.md 参照)。プラグインを使わない構成では `declare module 'lism-css'` で `BreakpointRegistry` を拡張して解禁します。
38
38
 
39
39
  ```ts
40
40
  // src/lism.d.ts など
@@ -85,6 +85,7 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
85
85
  **仕組み:**
86
86
  - BPクラス `-{prop}_{bp}` は `@container (min-width: ...)` 内で発火し、`--{prop}_{bp}` 変数で切り替え先の値を指定
87
87
  - コンテナクエリ採用のため、レスポンシブ値を使うには祖先要素に `is--container` などコンテナ宣言が必要
88
+ - base 値は任意。省くと BP 未満はそのプロパティの既定値のまま(例: `-d_sm` + `--d_sm: none` で sm 以上だけ非表示)
88
89
  - 出力形式はプロパティによって 2 パターン(基本 / 例外)
89
90
 
90
91
  **基本パターン** — BP 用変数を直接読む:
@@ -125,37 +126,16 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
125
126
 
126
127
  ## Authoring時の確認ルール
127
128
 
128
- ### base値を必ず置く
129
-
130
- BP専用値だけを書くと、BP未満で値が未指定になります。配列では先頭、オブジェクトでは`base`、HTMLでは`-{prop}:{value}`を必ず置きます。
131
-
132
- | NG | OK |
133
- | --- | --- |
134
- | `<Box p={{ sm: 30 }}>` | `<Box p={{ base: '20', sm: '30' }}>` |
135
- | `<div class="-p_sm" style="--p_sm:var(--s30)">` | `<div class="-p:20 -p_sm" style="--p_sm:var(--s30)">` |
129
+ NG→OK例は [antipatterns-layout.md](./antipatterns-layout.md#レスポンシブ抜け) の「レスポンシブ抜け」「レスポンシブ配列の冗長指定」を参照。
136
130
 
137
131
  ### 冗長配列は圧縮する
138
132
 
139
- 前のBPと同じ値を繰り返さない。変わらないBPは`null`でスキップし、全BPで同じ値なら単一値にします。
140
-
141
- | NG | OK |
142
- | --- | --- |
143
- | `fxd={['column', 'column', 'row']}` | `fxd={['column', null, 'row']}` |
144
- | `p={['20', '20', '20']}` | `p="20"` |
145
- | `cols={[1, 1, 3]}` | `cols={[1, null, 3]}` |
146
-
147
- ただし、既存コードの型・生成仕様で`null`が使えない場合は既存パターンを優先します。レスポンシブ差分を誤って単一値化しないでください。
133
+ 前のBPと同じ値を繰り返さない。変わらないBPは`null`でスキップし、全BPで同じ値なら単一値にします。ただし、既存コードの型・生成仕様で`null`が使えない場合は既存パターンを優先し、レスポンシブ差分を誤って単一値化しないでください。
148
134
 
149
135
  ### container query運用では祖先`isContainer`を確認する
150
136
 
151
137
  デフォルトではレスポンシブProperty Classは`@container`で発火します。レスポンシブ値を載せる要素の祖先に`isContainer`/`is--container`があるか確認してください。
152
138
 
153
- ```jsx
154
- <Stack isContainer>
155
- <Box p={{ base: '20', md: '40' }}>...</Box>
156
- </Stack>
157
- ```
158
-
159
139
  `$is_container_query:0`などの設定でmedia query運用が確認できる場合は、`isContainer`祖先は必須ではありません。設定が不明な場合は、既存SCSS設定・`customize.md`・生成CSSを確認してから判断してください。
160
140
 
161
141
  ### `isContainer`を置く位置で挙動が変わる
@@ -74,7 +74,7 @@ Lism CSSでは、クラスを持つリスト(`ul` / `ol`)ではスタイル
74
74
 
75
75
  ## `set--bxsh`
76
76
 
77
- `SHADOW` トークン変数(`--bxsh--{N}`)を再計算するためのクラスです。`:root` で定義される `--shc`(影の色)を特定要素で上書きしたい時に利用します。
77
+ `SHADOW` トークン変数(`--bxsh--{N}`)を再計算するためのクラスです。`:root` で定義される `--shc`(影の色)を特定要素で上書きしたい時に利用します。近い側の影色 `--shc--near` も `--shc` から再計算されるため、2層の影がまとめて変わります。
78
78
 
79
79
  使用例:
80
80
  ```html
@@ -191,7 +191,7 @@ Lism CSSでは、クラスを持つリスト(`ul` / `ol`)ではスタイル
191
191
 
192
192
  ## `set--s`
193
193
 
194
- 余白トークン(`--s5`〜`--s80`)を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
194
+ 余白トークン(`--s5`〜`--s70`)を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
195
195
 
196
196
  詳細なスケールと使い方は[tokens.mdの`set--s`ユーティリティ](./tokens.md#set--s-ユーティリティ)を参照してください。
197
197
 
@@ -30,14 +30,15 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
30
30
 
31
31
  | カテゴリ | トークン値 | CSS変数パターン | 例 |
32
32
  | --- | --- | --- | --- |
33
- | 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
33
+ | 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `60`, `70` | `--s{N}` | `--s20` |
34
34
  | フォントサイズ (fz) | `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
35
- | ハーフレディング・行間 (hl/lh) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
36
- | 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
35
+ | ハーフレディング (hl) | `base`, `xs`, `s`, `l`, `xl` | `--hl--{key}` | `--hl--s` |
36
+ | 行間比率 (lh) | `xs`, `s`, `m`, `l`, `xl` | `--lh--{key}` | `--lh--m` |
37
+ | 字間 (lts) | `base`, `xs`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
37
38
  | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
38
39
  | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
39
40
  | 透明度 (o) | `mp`, `p`, `pp`, `ppp` | `--o--{key}` | `--o--p` |
40
- | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
41
+ | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `50`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
41
42
  | 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
42
43
  | サイズ (sz) | `xs`, `s`, `m`, `l`, `xl` | `--sz--{key}` | `--sz--l` |
43
44
  | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
@@ -51,7 +52,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
51
52
 
52
53
  ## 余白 (space)
53
54
 
54
- フィボナッチ数列ベースのスケーリング。`--s-unit`(デフォルト `calc(var(--fz--base) * 0.5)` ≒ 8px)を基準単位とする。
55
+ フィボナッチ数列ベースのスケーリング。`--s-unit`(デフォルト `0.5rem` ≒ 8px)を基準単位とする。
55
56
 
56
57
  | CSS変数 | 値 | 実サイズ目安 |
57
58
  | --- | --- | --- |
@@ -63,16 +64,16 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
63
64
  | `--s30` | `calc(var(--s-unit) * 3)` | ≒ 24px |
64
65
  | `--s35` | `calc(var(--s-unit) * 4)` | ≒ 32px |
65
66
  | `--s40` | `calc(var(--s-unit) * 5)` | ≒ 40px |
67
+ | `--s45` | `calc(var(--s-unit) * 6.5)` | ≒ 52px |
66
68
  | `--s50` | `calc(var(--s-unit) * 8)` | ≒ 64px |
67
69
  | `--s60` | `calc(var(--s-unit) * 13)` | ≒ 104px |
68
70
  | `--s70` | `calc(var(--s-unit) * 21)` | ≒ 168px |
69
- | `--s80` | `calc(var(--s-unit) * 34)` | ≒ 272px |
70
71
 
71
- `--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`(フィボナッチ数列)に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値(4px / 12px / 20px / 32px 相当)として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。
72
+ 10 刻みの主軸は係数 `1, 2, 3, 5, 8, 13, 21`(フィボナッチ数列)に基づき、タイポグラフィの縦のリズムを作る。5 刻み(`--s5`〜`--s45`)は主軸トークン間のちょうど中間値(4px / 12px / 20px / 32px / 52px 相当)で、縦のリズムに縛られない水平方向の gap / padding 用。中間値は `50` まで。`--s-unit` を上書きするとスケール全体を比例的に調整できる。`--fz--base` を流体値にしていて余白も連動させたい場合は、`:root` で `--s-unit: calc(var(--fz--base) * 0.5)` に上書きする。
72
73
 
73
74
  ### `set--s` ユーティリティ
74
75
 
75
- `set--s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
76
+ `set--s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s70` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
76
77
 
77
78
  ```html
78
79
  <!-- ボタンの padding が button 自身の font-size に追従する -->
@@ -109,7 +110,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
109
110
 
110
111
  ## 行間 (hl/lh)
111
112
 
112
- ハーフレディングの大きさ。Lism CSSでは、`line-height` `calc(1em + var(--hl) * 2)` で算出される。`--hl-unit`(≒ 2px)を基準単位とする。
113
+ `line-height` は全要素で `var(--lh, calc(1em + var(--hl) * 2))` として算出される。既定は `--hl`(ハーフレディング)で管理し、`--lh` がセットされていればそちらが優先される。
114
+
115
+ `hl` はハーフレディングの大きさ。`--hl-unit`(≒ 2px)を基準単位とする。
113
116
 
114
117
  | CSS変数 | 値 | 説明 |
115
118
  | --- | --- | --- |
@@ -117,16 +120,32 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
117
120
  | `--hl--s` | `calc(var(--hl-unit) * 2)` | 小さめの行間(≒ 4px) |
118
121
  | `--hl--base` | `calc(var(--hl-unit) * 3)` | 基本の行間(≒ 6px) |
119
122
  | `--hl--l` | `calc(var(--hl-unit) * 4)` | 大きめの行間(≒ 8px) |
123
+ | `--hl--xl` | `calc(var(--hl-unit) * 5)` | より大きな行間(≒ 10px) |
124
+
125
+ `--fz--base` を流体値にしていて行間も連動させたい場合は、`:root` で `--hl-unit: calc(var(--fz--base) * 0.125)` に上書きする。
126
+
127
+ `lh` は `line-height` を倍率で指定するトークン。`hl` が fz 非依存の固定量なのに対し、fz に比例した行送りを保ちたい場合に使う。
128
+
129
+ | CSS変数 | 値 |
130
+ | --- | --- |
131
+ | `--lh--xs` | `1.25` |
132
+ | `--lh--s` | `1.5` |
133
+ | `--lh--m` | `1.75` |
134
+ | `--lh--l` | `2` |
135
+ | `--lh--xl` | `2.25` |
120
136
 
121
137
 
122
138
  ## 字間 (lts)
123
139
 
124
140
  | CSS変数 | 値 | 説明 |
125
141
  | --- | --- | --- |
126
- | `--lts--base` | `normal` | 基本の文字間隔 |
127
- | `--lts--s` | `-0.025em` | 狭めの文字間隔 |
128
- | `--lts--l` | `0.05em` | 広めの文字間隔 |
129
- | `--lts--xl` | `0.1em` | より広い文字間隔 |
142
+ | `--lts--base` | `0em` | 基本の文字間隔。長さで指定(`normal` 不可) |
143
+ | `--lts--xs` | `calc(var(--lts--base) - 0.05em)` | より狭い文字間隔 |
144
+ | `--lts--s` | `calc(var(--lts--base) - 0.025em)` | 狭めの文字間隔 |
145
+ | `--lts--l` | `calc(var(--lts--base) + 0.05em)` | 広めの文字間隔 |
146
+ | `--lts--xl` | `calc(var(--lts--base) + 0.1em)` | より広い文字間隔 |
147
+
148
+ `xs`〜`xl` は `--lts--base` からの相対値。`:root` で `--lts--base` を変えると全体が連動する(子孫要素での上書きは `xs`〜`xl` に伝わらない)。
130
149
 
131
150
 
132
151
  ## フォント (ff)
@@ -163,32 +182,37 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
163
182
 
164
183
  ## 角丸 (bdrs)
165
184
 
185
+ 増分が0.125remずつ大きくなる二階等差数列のスケール。
186
+
166
187
  | CSS変数 | 値 | 説明 |
167
188
  | --- | --- | --- |
168
189
  | `--bdrs--10` | `0.25rem` | ≒ 4px |
169
- | `--bdrs--20` | `0.5rem` | ≒ 8px |
170
- | `--bdrs--30` | `1rem` | ≒ 16px |
171
- | `--bdrs--40` | `1.5rem` | ≒ 24px |
190
+ | `--bdrs--20` | `0.375rem` | ≒ 6px |
191
+ | `--bdrs--30` | `0.625rem` | ≒ 10px |
192
+ | `--bdrs--40` | `1rem` | ≒ 16px |
193
+ | `--bdrs--50` | `1.5rem` | ≒ 24px |
172
194
  | `--bdrs--99` | `99rem` | 完全な丸(pill) |
173
- | `--bdrs--inner` | `calc(var(--bdrs, 0px) - var(--p, 0px))` | 内側の角丸(親要素に合わせる) |
195
+ | `--bdrs--inner` | `calc(var(--bdrs, 0px) - var(--p, 0px) + 1px)` | 内側の角丸(親要素に合わせる) |
174
196
 
175
197
 
176
198
  ## 影 (bxsh)
177
199
 
178
- `--shc`(シャドウカラー)と `--shsz--{N}`(シャドウサイズ)を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する。
200
+ 要素に近い薄い影と主となる影の2層で構成される。近い側の影は、1段小さいシャドウサイズ `--shsz--{N}` と、`--shc`(シャドウカラー)を50%薄めた `--shc--near` を使う。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する(`--shc--near` も `--shc` から再計算される)。
179
201
 
180
202
  | CSS変数 | 値 |
181
203
  | --- | --- |
182
- | `--bxsh--10` | `var(--shsz--10) var(--shc)` |
183
- | `--bxsh--20` | `var(--shsz--20) var(--shc)` |
184
- | `--bxsh--30` | `var(--shsz--30) var(--shc)` |
185
- | `--bxsh--40` | `var(--shsz--40) var(--shc)` |
186
- | `--bxsh--50` | `var(--shsz--50) var(--shc)` |
204
+ | `--bxsh--10` | `var(--shsz--5) var(--shc--near), var(--shsz--10) var(--shc)` |
205
+ | `--bxsh--20` | `var(--shsz--10) var(--shc--near), var(--shsz--20) var(--shc)` |
206
+ | `--bxsh--30` | `var(--shsz--20) var(--shc--near), var(--shsz--30) var(--shc)` |
207
+ | `--bxsh--40` | `var(--shsz--30) var(--shc--near), var(--shsz--40) var(--shc)` |
208
+ | `--bxsh--50` | `var(--shsz--40) var(--shc--near), var(--shsz--50) var(--shc)` |
187
209
 
188
210
  | CSS変数 | 初期値 |
189
211
  | --- | --- |
190
- | `--shadow` | `hsl(220 4% 8% / 12%)` |
212
+ | `--shadow` | `hsl(220 2% 4% / 8%)` |
191
213
  | `--shc` | `var(--shadow)` |
214
+ | `--shc--near` | `color-mix(in srgb, var(--shc), transparent 50%)` |
215
+ | `--shsz--5` | `0px 0px 1px` |
192
216
  | `--shsz--10` | `0px 1px 3px` |
193
217
  | `--shsz--20` | `0px 2px 6px` |
194
218
  | `--shsz--30` | `0px 4px 12px` |
@@ -3,9 +3,24 @@
3
3
  `transition` 系のプロパティを CSS 変数経由でセットする Trait クラス。主に `-hov:*` クラスと組み合わせて、ホバー時のスムーズな変化に使う。
4
4
 
5
5
  - Lism props: `hasTransition`(`<Lism hasTransition>` / `<Box hasTransition>` 等)
6
+ - 文字列を渡すと `--transitionProps` として出力される: `<Box hasTransition="color, opacity">` → `class="has--transition" style="--transitionProps: color, opacity"`
6
7
 
7
8
  公式ドキュメント(使い方・コード例): https://lism-css.com/docs/trait-class.md#has--transition
8
9
 
10
+ ## 対象プロパティは明示指定する
11
+
12
+ `--transitionProps` の初期値は `all` ではなく、色・影・透明度・transform 系・filter 系に限定したリスト。`all` はページ読み込み時やレイアウト変化時に意図しないアニメーション(ちらつき)を起こすため使わない。
13
+
14
+ 実際に変化させるプロパティだけを `--transitionProps`(Lism props では `hasTransition="..."`)で明示指定する。初期値のリストに無いプロパティ(`padding`, `width`, `border-width` 等)を変化させる場合は必ず指定が要る。
15
+
16
+ ```html
17
+ <a class="is--boxLink has--transition -hov:-bxsh" style="--transitionProps: box-shadow; --hov-bxsh: var(--bxsh--40)">...</a>
18
+ ```
19
+
20
+ ```jsx
21
+ <BoxLink hasTransition="box-shadow" hov={{ bxsh: '40' }}>...</BoxLink>
22
+ ```
23
+
9
24
  ## SCSS 定義
10
25
 
11
26
  ```scss
@@ -13,7 +28,7 @@
13
28
  --duration: var(--transition-duration, 0.25s);
14
29
  --ease: ease;
15
30
  --delay: 0s;
16
- --transitionProps: all;
31
+ --transitionProps: color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter;
17
32
  transition: var(--duration) var(--ease) var(--delay);
18
33
  transition-property: var(--transitionProps);
19
34
  }
@@ -23,7 +38,7 @@
23
38
 
24
39
  | 変数 | 役割 | デフォルト |
25
40
  | --- | --- | --- |
26
- | `--transitionProps` | transition 対象プロパティ | `all` |
41
+ | `--transitionProps` | transition 対象プロパティ | `color, background-color, border-color, box-shadow, scale, rotate, translate, transform, opacity, filter, backdrop-filter` |
27
42
  | `--duration` | トランジションの長さ | `var(--transition-duration, 0.25s)` |
28
43
  | `--ease` | イージング関数 | `ease` |
29
44
  | `--delay` | ディレイ | `0s` |
@@ -52,26 +52,15 @@ Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として
52
52
 
53
53
  | クラス | 用途 | 主な CSS 変数 |
54
54
  | --- | --- | --- |
55
- | `has--transition` | transition プロパティをまとめてセット。主に hoverクラス(`-hov:*`)と組み合わせて使用 | `--transitionProps`, `--duration`, `--ease`, `--delay`(グローバル上書きは `--transition-duration`) |
55
+ | `has--transition` | transition プロパティをまとめてセット。主に hoverクラス(`-hov:*`)と組み合わせて使用。対象プロパティは `--transitionProps` で明示指定する(初期値は `all` ではなく色・影・透明度・transform 系・filter 系に限定) | `--transitionProps`, `--duration`, `--ease`, `--delay`(グローバル上書きは `--transition-duration`) |
56
56
  | `has--gutter` | コンテンツの左右に統一した余白(gutter)を設定する | `--gutter`(基準値: `--gutter--base`、初期値 `var(--s30)`) |
57
57
  | `has--snap` | `scroll-snap-` 系プロパティを CSS 変数経由でセットできるようにする | `--snapType`, `--snapAlign` 等 |
58
58
  | `has--mask` | `--maskImg` 変数と組み合わせて、要素自身にマスクを適用する | `--maskImg`, `--maskPos`(`50%`), `--maskSize`(`contain`), `--maskRepeat`(`no-repeat`) |
59
59
 
60
- Lism コンポーネントでは `hasTransition`, `hasGutter`, `hasSnap`, `hasMask` という Props として利用できます(例: `<Lism hasTransition>`)。
60
+ Lism コンポーネントでは `hasTransition`, `hasGutter`, `hasSnap`, `hasMask` という Props として利用できます(例: `<Lism hasTransition>`)。`hasTransition` は文字列も受け付け、`--transitionProps` として出力されます(例: `<Lism hasTransition="color, opacity">`)。
61
61
 
62
62
  詳細は以下の個別ドキュメントを参照してください:
63
63
  - [has--transition](./trait-class/has--transition.md)
64
64
  - [has--gutter](./trait-class/has--gutter.md)
65
65
  - [has--snap](./trait-class/has--snap.md)
66
66
  - [has--mask](./trait-class/has--mask.md)
67
-
68
-
69
- ## `is--` と `has--` の判断軸
70
-
71
- | | `is--` | `has--` |
72
- | --- | --- | --- |
73
- | 意味 | 〜である(役割・存在の宣言) | 〜を持つ(機能の付与) |
74
- | CSS 変数 | 必須ではない | 必須(カスタマイズポイント) |
75
-
76
- - その要素が **何であるか**(役割)を表すなら → `is--`
77
- - その要素に **どんな機能を持たせるか**(カスタマイズポイント付き)なら → `has--`
@@ -29,8 +29,6 @@ Lism コンポーネントでの `util` prop による指定方法は [component
29
29
  | `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
30
30
  | `u--trimAll` | 直下の子要素(`:empty`, `figure`, `picture`, `video`, `button`, `textarea`, `table` を除く)にハーフレディングトリムを一括適用する除外方式のクラス | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
31
31
  | `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
32
- | `u--divide` | Grid / Flex の子要素**間**にのみ `box-shadow` で区切り線を表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
33
- | `u--enclose` | Grid / Flex の各子要素を `box-shadow` で枠囲みし、table セル風に表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
34
32
  | `u--srOnly` | スクリーンリーダー専用(視覚的に非表示)。`clip-path: inset(50%)` で実装 | [`_srOnly.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_srOnly.scss) |
35
33
  | `u--clipText` | テキストで背景をクリッピング(`background-clip: text`) | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
36
34
 
@@ -43,19 +41,12 @@ Lism コンポーネントでの `util` prop による指定方法は [component
43
41
 
44
42
  <!-- u--trim: テキスト余白の詰め -->
45
43
  <p class="u--trim">テキスト...</p>
46
-
47
- <!-- u--divide: グリッド子要素間の区切り線 -->
48
- <div class="l--grid u--divide" style="--gtc: 1fr 1fr">
49
- <div>A</div>
50
- <div>B</div>
51
- </div>
52
44
  ```
53
45
 
54
46
  ```jsx
55
47
  // JSX での使用(className で指定)
56
48
  <Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
57
49
  <Text className="u--trim">テキスト...</Text>
58
- <Grid className="u--divide" gtc="1fr 1fr">...</Grid>
59
50
  ```
60
51
 
61
52
 
@@ -64,6 +55,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
64
55
  コアには含まれないが、ドキュメントで紹介されている追加ユーティリティの例:
65
56
 
66
57
  - `u--inlineCenter`: 絵文字やインラインアイコンをテキスト中央に揃える
58
+ - `u--divide` / `u--enclose`: Grid / Flex の子要素間の区切り線・セル枠を `gap` と子要素の `box-shadow` で描く。描画が `border` より粗く、並び方向が切り替わるレイアウトでは `bdw` のブレイクポイント切り替えを優先する
67
59
 
68
60
  これらは必要に応じて自分で CSS を追加して使用します。
69
61
 
package/dist/data/meta.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { packageVersion } from '../lib/version.js';
2
2
  export const meta = {
3
- generatedAt: '2026-08-16',
4
- sourceCommit: '06107666',
3
+ generatedAt: '2026-09-02',
4
+ sourceCommit: 'efc6ab9a',
5
5
  docsVersion: packageVersion,
6
6
  };