@lism-css/mcp 0.10.4 → 0.11.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.
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"package": "lism-css",
|
|
5
5
|
"category": "core",
|
|
6
6
|
"description": "全コンポーネントの基盤となるコアコンポーネント。Props システムによる CSS クラス・スタイルの自動変換を提供する。他の全てのコンポーネントは Lism を継承している。",
|
|
7
|
-
"aliases": ["base
|
|
7
|
+
"aliases": ["component", "base", "core", "React", "Astro", "コア", "ベース", "コンポーネント"],
|
|
8
8
|
"props": [
|
|
9
9
|
{ "name": "as", "type": "ElementType | string", "default": "div", "description": "レンダリングするHTML要素または外部コンポーネントを指定。" },
|
|
10
10
|
{ "name": "layout", "type": "string", "description": "レイアウトモジュールを適用 (flex, grid 等)。" },
|
|
@@ -329,7 +329,7 @@
|
|
|
329
329
|
"name": "Media",
|
|
330
330
|
"package": "lism-css",
|
|
331
331
|
"category": "atomic",
|
|
332
|
-
"description": "img, video, iframe, picture 等のメディア要素を統一的に扱うコンポーネント。デフォルトでimgタグが出力される。as prop で img(デフォルト) / video / iframe / picture に変更可能。",
|
|
332
|
+
"description": "img, video, iframe, picture 等のメディア要素を統一的に扱うコンポーネント。デフォルトでimgタグが出力される。as prop で img(デフォルト) / video / iframe / picture に変更可能。Astro版では as=\"img\" 時に Astro の Image コンポーネント、as=\"picture\" 時に Astro の Picture コンポーネントへ自動マッピングされる。",
|
|
333
333
|
"aliases": ["画像", "動画", "img tag", "video tag", "picture", "メディア要素", "HTML.img"],
|
|
334
334
|
"props": [
|
|
335
335
|
{ "name": "src", "type": "string", "description": "メディアのURL。" },
|
|
@@ -183,19 +183,8 @@
|
|
|
183
183
|
"description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
|
|
184
184
|
"category": "guide",
|
|
185
185
|
"headings": [],
|
|
186
|
-
"keywords": [
|
|
187
|
-
|
|
188
|
-
"set class",
|
|
189
|
-
"set--plain",
|
|
190
|
-
"set--shadow",
|
|
191
|
-
"set--transition",
|
|
192
|
-
"set--hov",
|
|
193
|
-
"set--bp",
|
|
194
|
-
"set--cqUnit",
|
|
195
|
-
"set--innerRs",
|
|
196
|
-
"set--gutter"
|
|
197
|
-
],
|
|
198
|
-
"snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--bp, set--cqUnit, set--innerRs, set--gutter を解説。"
|
|
186
|
+
"keywords": ["set", "set class", "set--plain", "set--shadow", "set--transition", "set--hov", "set--bp", "set--innerRs", "set--gutter"],
|
|
187
|
+
"snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--bp, set--innerRs, set--gutter を解説。"
|
|
199
188
|
},
|
|
200
189
|
{
|
|
201
190
|
"sourcePath": "module-class.mdx",
|
|
@@ -221,6 +210,8 @@
|
|
|
221
210
|
"description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
|
|
222
211
|
"category": "guide",
|
|
223
212
|
"headings": [
|
|
213
|
+
"v.0.11.0 (2026.04.05)",
|
|
214
|
+
"v.0.10.5 (2026.04.05)",
|
|
224
215
|
"v.0.10.4 (2026.04.04)",
|
|
225
216
|
"v.0.10.3 (2026.04.04)",
|
|
226
217
|
"v.0.10.2 (2026.04.04)",
|
package/dist/data/meta.js
CHANGED
package/dist/data/overview.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "Lism CSS は、WEBサイトの骨組みをテンポ良くサクっと作るための軽量なCSS設計フレームワークです。デザインに自然と心地よいリズムを生み出すトークン設計、レイアウトファーストなモジュール設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。ビルドや設定は不要で、CSSを読み込むだけでも使えます。Every Layout + Bootstrap + Tailwind CSS を混ぜ合わせたような設計です。",
|
|
3
|
-
"architecture": "CSS Layers による詳細度管理を採用。Settings → Base(
|
|
3
|
+
"architecture": "CSS Layers による詳細度管理を採用。Settings → Base(lism-base: Reset CSS・トークン定義・Set Class) → Modules(lism-modules: .is--/.l--/.a--/.c--モジュール群) → Utility(lism-utility: .u--クラス) → Custom(lism-custom: カスタマイズ用) の順で読み込まれます。Prop Class はレイヤー外で定義され、詳細度が高くなります。コンテナクエリをデフォルトで採用し、メディアクエリに依存しないレイアウト設計が可能です。",
|
|
4
4
|
"packages": [
|
|
5
5
|
{
|
|
6
6
|
"name": "lism-css",
|
|
7
7
|
"npmName": "lism-css",
|
|
8
8
|
"description": "コアCSSフレームワーク。レイアウトモジュール、デザイントークン、Prop Class、React/Astroコンポーネントを提供。",
|
|
9
|
-
"version": "0.
|
|
9
|
+
"version": "0.11.0"
|
|
10
10
|
},
|
|
11
11
|
{
|
|
12
12
|
"name": "lism-ui",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"md": "800px (container query)",
|
|
21
21
|
"lg": "1120px (container query, 要カスタマイズ)"
|
|
22
22
|
},
|
|
23
|
-
"installation": "## CSSのみ (CDN)\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/lism-css@0.
|
|
24
|
-
"cssLayers": "Settings →
|
|
23
|
+
"installation": "## CSSのみ (CDN)\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/lism-css@0.11.0/dist/css/main.css\" rel=\"stylesheet\" />\n```\n\n## npm パッケージ\n```bash\nnpm i lism-css\n# UI コンポーネントも使う場合\nnpm i @lism-css/ui\n```\n\n## CSS読み込み\n```js\nimport 'lism-css/main.css';\n// UI コンポーネントのCSS\nimport '@lism-css/ui/style.css';\n```\n\n## コンポーネント読み込み\n```jsx\n// React\nimport { Box, Flex, Stack } from 'lism-css/react';\nimport { Accordion, Modal } from '@lism-css/ui/react';\n\n// Astro\nimport { Box, Flex, Stack } from 'lism-css/astro';\nimport { Accordion, Modal } from '@lism-css/ui/astro';\n```\n\n## Astro での注意\n.astroファイルをnode_modules内から直接読み込めない場合、astro.config.jsのvite.ssr.noExternalに\"lism-css\"を追加してください。",
|
|
24
|
+
"cssLayers": "Settings → lism-base → lism-modules(.is--, .l--, .a--, .c--) → lism-utility(.u--) → lism-custom → Prop Class(レイヤー外)。標準でsm,mdまでサポート、lg以降はSCSSカスタマイズが必要。",
|
|
25
25
|
"classNaming": {
|
|
26
26
|
"setClass": ".set--{style} (例: .set--plain, .set--transition) - @lism-base層で定義されるベーススタイル上書き・トークン再定義用クラス",
|
|
27
27
|
"moduleClass": {
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
},
|
|
257
257
|
{
|
|
258
258
|
"category": "spacing",
|
|
259
|
-
"description": "余白関連のプロパティ。スペーシングトークン (5, 10, 15, 20, 30, 40, 50, 60, 70, 80)
|
|
259
|
+
"description": "余白関連のプロパティ。スペーシングトークン (5, 10, 15, 20, 30, 40, 50, 60, 70, 80) を値として使用可能。ネガティブマージンはトークン値に `-` を付けて指定可能(例: mt=\"-20\")。",
|
|
260
260
|
"props": [
|
|
261
261
|
{
|
|
262
262
|
"prop": "p",
|
|
@@ -582,7 +582,7 @@
|
|
|
582
582
|
"type": "string | number | array",
|
|
583
583
|
"responsive": true,
|
|
584
584
|
"description": "角丸。",
|
|
585
|
-
"values": ["0", "
|
|
585
|
+
"values": ["0", "10", "20", "30", "40", "99", "inner"]
|
|
586
586
|
},
|
|
587
587
|
{ "prop": "bdrs-tl", "cssProperty": "border-top-left-radius", "type": "string", "responsive": false, "description": "左上の角丸。" },
|
|
588
588
|
{ "prop": "bdrs-tr", "cssProperty": "border-top-right-radius", "type": "string", "responsive": false, "description": "右上の角丸。" },
|
|
@@ -634,7 +634,7 @@
|
|
|
634
634
|
"type": "string | number | array",
|
|
635
635
|
"responsive": true,
|
|
636
636
|
"description": "ボックスシャドウ。",
|
|
637
|
-
"values": ["0", "
|
|
637
|
+
"values": ["0", "10", "20", "30", "40"]
|
|
638
638
|
}
|
|
639
639
|
]
|
|
640
640
|
},
|
|
@@ -1080,13 +1080,6 @@
|
|
|
1080
1080
|
"responsive": false,
|
|
1081
1081
|
"description": "ブレイクポイント制御用のセットクラスを付与する。"
|
|
1082
1082
|
},
|
|
1083
|
-
{
|
|
1084
|
-
"prop": "setCqUnit",
|
|
1085
|
-
"cssProperty": "(class: set--cqUnit)",
|
|
1086
|
-
"type": "boolean",
|
|
1087
|
-
"responsive": false,
|
|
1088
|
-
"description": "コンテナクエリ単位(cqi)を有効にするセットクラスを付与する。"
|
|
1089
|
-
},
|
|
1090
1083
|
{
|
|
1091
1084
|
"prop": "hov",
|
|
1092
1085
|
"cssProperty": "(class: -hov:*)",
|
package/dist/data/tokens.json
CHANGED
|
@@ -117,12 +117,10 @@
|
|
|
117
117
|
"category": "radius",
|
|
118
118
|
"description": "角丸トークン。CSS変数名は --bdrs--{値}。段階的に値が大きくなる。",
|
|
119
119
|
"tokens": [
|
|
120
|
-
{ "name": "--bdrs--5", "value": "2px", "description": "角丸 step 5" },
|
|
121
120
|
{ "name": "--bdrs--10", "value": "0.25rem", "description": "角丸 step 10(≒ 4px)" },
|
|
122
121
|
{ "name": "--bdrs--20", "value": "0.5rem", "description": "角丸 step 20(≒ 8px)" },
|
|
123
122
|
{ "name": "--bdrs--30", "value": "1rem", "description": "角丸 step 30(≒ 16px)" },
|
|
124
123
|
{ "name": "--bdrs--40", "value": "1.5rem", "description": "角丸 step 40(≒ 24px)" },
|
|
125
|
-
{ "name": "--bdrs--50", "value": "2rem", "description": "角丸 step 50(≒ 32px)" },
|
|
126
124
|
{ "name": "--bdrs--99", "value": "99rem", "description": "完全な丸 (pill)" },
|
|
127
125
|
{ "name": "--bdrs--inner", "value": "calc(var(--bdrs, 0px) - var(--p, 0px))", "description": "内側の角丸(親要素に合わせる)" }
|
|
128
126
|
]
|
|
@@ -131,12 +129,10 @@
|
|
|
131
129
|
"category": "shadow",
|
|
132
130
|
"description": "ボックスシャドウトークン。CSS変数名は --bxsh--{値}。--shc(シャドウカラー: hsl(220 4% 8% / 5%))と --shsz--{n}(シャドウサイズ)を組み合わせた --sh--{n} 変数を複合して構成。",
|
|
133
131
|
"tokens": [
|
|
134
|
-
{ "name": "--bxsh--5", "value": "var(--sh--5)", "description": "シャドウ step 5(最も薄い・単一シャドウ)" },
|
|
135
132
|
{ "name": "--bxsh--10", "value": "var(--sh--5), var(--sh--10)", "description": "シャドウ step 10" },
|
|
136
133
|
{ "name": "--bxsh--20", "value": "var(--sh--10), var(--sh--20)", "description": "シャドウ step 20" },
|
|
137
134
|
{ "name": "--bxsh--30", "value": "var(--sh--20), var(--sh--30)", "description": "シャドウ step 30" },
|
|
138
|
-
{ "name": "--bxsh--40", "value": "var(--sh--30), var(--sh--40)", "description": "シャドウ step 40" }
|
|
139
|
-
{ "name": "--bxsh--50", "value": "var(--sh--40), var(--sh--50)", "description": "シャドウ step 50(最も濃い)" }
|
|
135
|
+
{ "name": "--bxsh--40", "value": "var(--sh--30), var(--sh--40)", "description": "シャドウ step 40(最も濃い)" }
|
|
140
136
|
]
|
|
141
137
|
},
|
|
142
138
|
{
|