@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.
- package/dist/data/docs-index.json +160 -71
- package/dist/data/guides/SKILL.md +80 -110
- package/dist/data/guides/antipatterns-layout.md +19 -23
- package/dist/data/guides/antipatterns.md +6 -5
- package/dist/data/guides/base-styles.md +1 -1
- package/dist/data/guides/components-core.md +8 -7
- package/dist/data/guides/components-ui.md +74 -6
- package/dist/data/guides/css-rules.md +9 -17
- package/dist/data/guides/customize.md +11 -26
- package/dist/data/guides/naming.md +11 -23
- package/dist/data/guides/property-class/all-props.md +5 -5
- package/dist/data/guides/property-class/bd.md +3 -0
- package/dist/data/guides/property-class/hov.md +1 -0
- package/dist/data/guides/property-class.md +1 -1
- package/dist/data/guides/references/authoring.md +32 -44
- package/dist/data/guides/references/page-sections.md +1 -1
- package/dist/data/guides/references/verification.md +4 -4
- package/dist/data/guides/responsive.md +4 -24
- package/dist/data/guides/set-class.md +2 -2
- package/dist/data/guides/tokens.md +48 -24
- package/dist/data/guides/trait-class/has--transition.md +17 -2
- package/dist/data/guides/trait-class.md +2 -13
- package/dist/data/guides/utility-class.md +1 -9
- package/dist/data/meta.js +2 -2
- package/dist/lib/markdown-utils.d.ts +3 -22
- package/dist/lib/markdown-utils.js +7 -30
- package/dist/lib/search.d.ts +1 -4
- package/dist/lib/search.js +6 -34
- package/dist/tools/convert-css.js +8 -25
- package/package.json +1 -1
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
# 実装プランの作り方(C0–C8詳細・出力フォーマット)
|
|
2
2
|
|
|
3
|
-
Lism CSSで新規UI
|
|
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
|
-
|
|
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
|
|
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
|
-
- **照合・判定**: プレフィックス後の名前が規約に合う→✅。ハイフンや`__
|
|
60
|
-
- **決め方**:
|
|
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
|
-
- **照合・判定**:
|
|
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
|
|
83
|
-
- **照合・判定**:
|
|
84
|
-
- **決め方**:
|
|
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`直書き、
|
|
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
|
|
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
|
-
|
|
122
|
-
|
|
123
|
-
値照合付きレベルでは、実装プラン全体をチャットの返答としてではなく`.lism/plan.md`として保存します(固定名・上書き。冒頭のメタデータヘッダに日時・対象タスク・スケール前提とその判定根拠を書く)。規約は[`verification.md`](./verification.md)を参照してください。
|
|
116
|
+
実装前チェックの成果物を実装プランと呼ぶ。各行に判定記号を付ける。値照合付きレベルでは`.lism/plan.md`へ保存する(規約は[`verification.md`](./verification.md))。
|
|
124
117
|
|
|
125
118
|
### 軽量レベル
|
|
126
119
|
|
|
127
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
223
|
+
確認が取れない場合の進め方は`SKILL.md`「判定記号」の⏸の項。
|
|
236
224
|
|
|
237
225
|
### 提出前セルフチェックへの接続
|
|
238
226
|
|
|
239
|
-
|
|
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, '
|
|
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
|
-
|
|
3
|
+
提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約。フローとチェック項目は`SKILL.md`、実装プランの書式は[`authoring.md`](./authoring.md)が正本。
|
|
4
4
|
|
|
5
|
-
`lism-css-guide
|
|
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
|
-
|
|
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`
|
|
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
|
-
|
|
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`〜`--
|
|
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
|
|
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
|
-
|
|
|
36
|
-
|
|
|
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`(デフォルト `
|
|
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
|
-
|
|
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`〜`--
|
|
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
|
-
|
|
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` | `
|
|
127
|
-
| `--lts--
|
|
128
|
-
| `--lts--
|
|
129
|
-
| `--lts--
|
|
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.
|
|
170
|
-
| `--bdrs--30` | `
|
|
171
|
-
| `--bdrs--40` | `
|
|
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
|
-
|
|
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
|
|
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:
|
|
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 対象プロパティ | `
|
|
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
|
|
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