@lism-css/mcp 0.10.1 → 0.10.4
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/README.ja.md +84 -0
- package/README.md +30 -23
- package/dist/data/components.json +3 -3
- package/dist/data/docs-index.json +21 -25
- package/dist/data/meta.js +2 -2
- package/dist/data/overview.json +3 -3
- package/dist/data/props-system.json +2 -2
- package/dist/data/tokens.json +31 -13
- package/package.json +1 -1
package/README.ja.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @lism-css/mcp
|
|
2
|
+
|
|
3
|
+
[English](./README.md) | [日本語](./README.ja.md)
|
|
4
|
+
|
|
5
|
+
[Lism CSS](https://lism-css.com) の [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) サーバーです。
|
|
6
|
+
AI ツール（Claude Code, Cursor 等）が Lism CSS の最新ドキュメント・API を正確に参照できるようにします。
|
|
7
|
+
|
|
8
|
+
## 利用可能なツール
|
|
9
|
+
|
|
10
|
+
| ツール | 説明 |
|
|
11
|
+
|--------|------|
|
|
12
|
+
| `get_overview` | フレームワークの全体像（アーキテクチャ、設計思想、パッケージ構成、ブレークポイント、インストール方法、CSS Layers） |
|
|
13
|
+
| `get_tokens` | デザイントークン（色、余白、フォントサイズ、影、角丸など）の一覧・カテゴリ絞り込み |
|
|
14
|
+
| `get_props_system` | Props システム対応表 — React/Astro の props が CSS クラス・スタイルにどう変換されるか。CSS プロパティ名での逆引き（例: `padding` → `p`）や Prop Class 記法（`-g:5` 等）にも対応 |
|
|
15
|
+
| `get_component` | コンポーネント詳細（props、使用例、サブコンポーネント構成）。パッケージ（`lism-css` / `@lism-css/ui`）での絞り込みも可能 |
|
|
16
|
+
| `search_docs` | ドキュメント全文検索（スコアリング付き）。カテゴリ絞り込みや CSS プロパティ名の自動展開に対応 |
|
|
17
|
+
| `convert_css` | CSS コードを Lism CSS の props・コンポーネントに変換。既存 CSS から Lism CSS への移行に便利 |
|
|
18
|
+
|
|
19
|
+
## 聞けること（例）
|
|
20
|
+
|
|
21
|
+
- 「Lism CSS の基本的なアーキテクチャを教えて」→ `get_overview`
|
|
22
|
+
- 「spacing トークンの一覧を見せて」→ `get_tokens(category: "spacing")`
|
|
23
|
+
- 「`p` や `fz` などの省略 props は何に対応している？」→ `get_props_system(prop: "p")`
|
|
24
|
+
- 「`-g:5` ってどういうクラス？」→ `get_props_system(prop: "-g:5")`
|
|
25
|
+
- 「`fz` に対応する CSS プロパティは？」→ `get_props_system(prop: "font-size")`
|
|
26
|
+
- 「Accordion コンポーネントの使い方は？」→ `get_component(name: "Accordion")`
|
|
27
|
+
- 「UI コンポーネントだけ見たい」→ `get_component(name: "Accordion", package: "@lism-css/ui")`
|
|
28
|
+
- 「レスポンシブ対応の方法を調べて」→ `search_docs(query: "レスポンシブ")`
|
|
29
|
+
- 「ガイドだけ検索」→ `search_docs(query: "レスポンシブ", category: "guide")`
|
|
30
|
+
- 「`display: flex; gap: 1rem;` を Lism に変換して」→ `convert_css(css: "display: flex; gap: 1rem;")`
|
|
31
|
+
|
|
32
|
+
## セットアップ
|
|
33
|
+
|
|
34
|
+
### Claude Code
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
claude mcp add lism-css -- npx -y @lism-css/mcp
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Cursor
|
|
41
|
+
|
|
42
|
+
`.cursor/mcp.json`:
|
|
43
|
+
|
|
44
|
+
```json
|
|
45
|
+
{
|
|
46
|
+
"mcpServers": {
|
|
47
|
+
"lism-css": {
|
|
48
|
+
"command": "npx",
|
|
49
|
+
"args": ["-y", "@lism-css/mcp"]
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Windsurf
|
|
56
|
+
|
|
57
|
+
`.windsurf/mcp.json`:
|
|
58
|
+
|
|
59
|
+
```json
|
|
60
|
+
{
|
|
61
|
+
"mcpServers": {
|
|
62
|
+
"lism-css": {
|
|
63
|
+
"command": "npx",
|
|
64
|
+
"args": ["-y", "@lism-css/mcp"]
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### VS Code (GitHub Copilot)
|
|
71
|
+
|
|
72
|
+
`.vscode/mcp.json`:
|
|
73
|
+
|
|
74
|
+
```json
|
|
75
|
+
{
|
|
76
|
+
"servers": {
|
|
77
|
+
"lism-css": {
|
|
78
|
+
"type": "stdio",
|
|
79
|
+
"command": "npx",
|
|
80
|
+
"args": ["-y", "@lism-css/mcp"]
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
```
|
package/README.md
CHANGED
|
@@ -1,28 +1,35 @@
|
|
|
1
1
|
# @lism-css/mcp
|
|
2
2
|
|
|
3
|
-
[
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
|
11
|
-
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
|
|
25
|
-
|
|
3
|
+
[English](./README.md) | [日本語](./README.ja.md)
|
|
4
|
+
|
|
5
|
+
An [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server for [Lism CSS](https://lism-css.com).
|
|
6
|
+
Enables AI tools (Claude Code, Cursor, etc.) to accurately reference the latest Lism CSS documentation and API.
|
|
7
|
+
|
|
8
|
+
## Available Tools
|
|
9
|
+
|
|
10
|
+
| Tool | Description |
|
|
11
|
+
|------|-------------|
|
|
12
|
+
| `get_overview` | Framework overview (architecture, design philosophy, packages, breakpoints, installation guide, CSS Layers) |
|
|
13
|
+
| `get_tokens` | List and filter design tokens (colors, spacing, font sizes, shadows, radii, etc.) |
|
|
14
|
+
| `get_props_system` | Props system reference — how React/Astro props map to CSS classes and styles. Supports reverse lookup by CSS property name (e.g. `padding` → `p`) and Prop Class notation (e.g. `-g:5`) |
|
|
15
|
+
| `get_component` | Component details (props, usage examples, sub-component structure). Optionally filter by package (`lism-css` or `@lism-css/ui`) |
|
|
16
|
+
| `search_docs` | Full-text documentation search with relevance scoring. Supports category filtering and CSS property name expansion |
|
|
17
|
+
| `convert_css` | Convert CSS code to lism-css props and component suggestions. Useful for migrating existing CSS to Lism CSS |
|
|
18
|
+
|
|
19
|
+
## Example Queries
|
|
20
|
+
|
|
21
|
+
- "What is the basic architecture of Lism CSS?" → `get_overview`
|
|
22
|
+
- "Show me the spacing tokens" → `get_tokens(category: "spacing")`
|
|
23
|
+
- "What do shorthand props like `p` or `fz` map to?" → `get_props_system(prop: "p")`
|
|
24
|
+
- "What does the class `-g:5` mean?" → `get_props_system(prop: "-g:5")`
|
|
25
|
+
- "What CSS property does `fz` correspond to?" → `get_props_system(prop: "font-size")`
|
|
26
|
+
- "How do I use the Accordion component?" → `get_component(name: "Accordion")`
|
|
27
|
+
- "Show me only UI components" → `get_component(name: "Accordion", package: "@lism-css/ui")`
|
|
28
|
+
- "How does responsive design work?" → `search_docs(query: "responsive")`
|
|
29
|
+
- "Search only guide docs" → `search_docs(query: "responsive", category: "guide")`
|
|
30
|
+
- "Convert `display: flex; gap: 1rem;` to Lism" → `convert_css(css: "display: flex; gap: 1rem;")`
|
|
31
|
+
|
|
32
|
+
## Setup
|
|
26
33
|
|
|
27
34
|
### Claude Code
|
|
28
35
|
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
"category": "layout",
|
|
198
198
|
"description": "コンテンツフロー用のレイアウト。display:flow-rootで、子要素間に一定の余白を管理する。記事本文のような縦方向のフローコンテンツに適している。見出しタグは余白が2倍になる。",
|
|
199
199
|
"aliases": ["content flow", "記事本文", "本文レイアウト", "article body", "縦方向余白"],
|
|
200
|
-
"props": [{ "name": "flow", "type": "'s' | string", "description": "フロー方向の余白サイズ。's'
|
|
200
|
+
"props": [{ "name": "flow", "type": "'s' | 'l' | string", "description": "フロー方向の余白サイズ。's'で小さい余白、'l'で大きい余白。" }],
|
|
201
201
|
"usage": "<Flow flow='s'>...</Flow>"
|
|
202
202
|
},
|
|
203
203
|
{
|
|
@@ -329,8 +329,8 @@
|
|
|
329
329
|
"name": "Media",
|
|
330
330
|
"package": "lism-css",
|
|
331
331
|
"category": "atomic",
|
|
332
|
-
"description": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。デフォルトでimgタグが出力される。",
|
|
333
|
-
"aliases": ["画像", "動画", "img tag", "video tag", "メディア要素", "HTML.img"],
|
|
332
|
+
"description": "img, video, iframe, picture 等のメディア要素を統一的に扱うコンポーネント。デフォルトでimgタグが出力される。as prop で img(デフォルト) / video / iframe / picture に変更可能。",
|
|
333
|
+
"aliases": ["画像", "動画", "img tag", "video tag", "picture", "メディア要素", "HTML.img"],
|
|
334
334
|
"props": [
|
|
335
335
|
{ "name": "src", "type": "string", "description": "メディアのURL。" },
|
|
336
336
|
{ "name": "alt", "type": "string", "description": "代替テキスト (img の場合)。" }
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"省略",
|
|
39
39
|
"Emmet"
|
|
40
40
|
],
|
|
41
|
-
"snippet": "CSSの階層構造を明確に定義。@layer lism
|
|
41
|
+
"snippet": "CSSの階層構造を明確に定義。@layer lism-reset → lism-base → lism-modules → lism-utility の順。Module Class (.l--name, .a--name 等)、Prop Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
"sourcePath": "tokens.mdx",
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
"title": "Typography & Spacing",
|
|
135
135
|
"description": "Lism CSS で使用するフォントやスペーシングに関するデザイントークンについて解説します。",
|
|
136
136
|
"category": "guide",
|
|
137
|
-
"headings": ["Typography", "SPACE
|
|
137
|
+
"headings": ["Typography", "`SPACE`: 余白のスケーリング"],
|
|
138
138
|
"keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "spacing", "余白", "スペーシング", "フィボナッチ"],
|
|
139
139
|
"snippet": "フォントサイズ、行間、文字間隔などのタイポグラフィ設計と、フィボナッチ数列に基づいた余白のスケーリングについて解説。ハーフレディングによるline-height管理の仕組みを紹介。"
|
|
140
140
|
},
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
"title": "Customize",
|
|
153
153
|
"description": "SCSS変数の上書きや@layerの切り替えなど、Lism CSS をカスタマイズする方法について解説します。",
|
|
154
154
|
"category": "guide",
|
|
155
|
-
"headings": ["
|
|
155
|
+
"headings": ["`@layer`をオフにする", "SCSS でのカスタマイズ", "lism.config.js でのカスタマイズ"],
|
|
156
156
|
"keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS"],
|
|
157
157
|
"snippet": "Lism CSS のトークンやスタイルのカスタマイズ方法について解説。SCSSの変数上書きやlism.config.jsでのコンポーネント挙動のカスタマイズが可能。"
|
|
158
158
|
},
|
|
@@ -221,22 +221,18 @@
|
|
|
221
221
|
"description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
|
|
222
222
|
"category": "guide",
|
|
223
223
|
"headings": [
|
|
224
|
+
"v.0.10.4 (2026.04.04)",
|
|
225
|
+
"v.0.10.3 (2026.04.04)",
|
|
226
|
+
"v.0.10.2 (2026.04.04)",
|
|
224
227
|
"v.0.10.1 (2026.04.03)",
|
|
225
|
-
"lism-css v.0.9.4 (2026.03.31)",
|
|
226
|
-
"
|
|
228
|
+
"`lism-css` v.0.9.4 (2026.03.31)",
|
|
229
|
+
"`@lism-css/ui` v.0.9.3 (2026.03.30)",
|
|
227
230
|
"v.0.9.2 (2026.03.18)",
|
|
228
231
|
"v.0.9.1 (2026.03.18)",
|
|
229
232
|
"v.0.9.0 (2026.03.17)",
|
|
230
233
|
"v.0.8.3",
|
|
231
234
|
"v.0.8.2",
|
|
232
|
-
"v.0.8 (大幅な変更)"
|
|
233
|
-
"v.0.7",
|
|
234
|
-
"v.0.7.1",
|
|
235
|
-
"v.0.7.2",
|
|
236
|
-
"v.0.7.3",
|
|
237
|
-
"v.0.6",
|
|
238
|
-
"v.0.5（大幅な変更）",
|
|
239
|
-
"~ v.0.3"
|
|
235
|
+
"v.0.8 (大幅な変更)"
|
|
240
236
|
],
|
|
241
237
|
"keywords": ["changelog", "変更履歴", "更新", "バージョン"],
|
|
242
238
|
"snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
|
|
@@ -246,7 +242,7 @@
|
|
|
246
242
|
"title": "-bd",
|
|
247
243
|
"description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
|
|
248
244
|
"category": "props",
|
|
249
|
-
"headings": ["方向指定", "bdwをブレイクポイントで切り替える", "
|
|
245
|
+
"headings": ["方向指定", "bdwをブレイクポイントで切り替える", "任意の`border`をインライン出力する方法"],
|
|
250
246
|
"keywords": ["border", "ボーダー", "bd", "bdc", "bdw", "bds", "bdrs", "枠線", "border-color", "border-width", "border-style", "border-radius"],
|
|
251
247
|
"snippet": "ボーダー関連のProp。bd, bdc, bdw, bds, bdrs を使ったボーダースタイルの設定方法。方向指定やブレイクポイントでの切り替えも解説。"
|
|
252
248
|
},
|
|
@@ -255,7 +251,7 @@
|
|
|
255
251
|
"title": "-hov",
|
|
256
252
|
"description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
|
|
257
253
|
"category": "props",
|
|
258
|
-
"headings": ["基本的な使い方", "
|
|
254
|
+
"headings": ["基本的な使い方", "`.set--hov` と特殊変数"],
|
|
259
255
|
"keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--hov", "set--transition", "transition"],
|
|
260
256
|
"snippet": "ホバー関連のProp。hov を使ったホバーエフェクトの設定方法。set--hovとset--transitionの活用、子要素へのホバー状態伝播を解説。"
|
|
261
257
|
},
|
|
@@ -274,7 +270,7 @@
|
|
|
274
270
|
"description": "LismのCSS設計に対応した様々なプロパティを受け取ることができる汎用的なコンポーネントです。",
|
|
275
271
|
"category": "core-components",
|
|
276
272
|
"headings": ["Import", "Lism Props", "補足"],
|
|
277
|
-
"keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"
|
|
273
|
+
"keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"],
|
|
278
274
|
"snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
|
|
279
275
|
},
|
|
280
276
|
{
|
|
@@ -283,7 +279,7 @@
|
|
|
283
279
|
"description": "<p>タグを出力するLismコンポーネントです。",
|
|
284
280
|
"category": "core-components",
|
|
285
281
|
"headings": ["Import", "基本的な使い方"],
|
|
286
|
-
"keywords": ["Text", "テキスト", "paragraph", "p", "ブロック", "コンポーネント"
|
|
282
|
+
"keywords": ["Text", "テキスト", "paragraph", "p", "ブロック", "コンポーネント"],
|
|
287
283
|
"snippet": "<p>タグを出力するLismコンポーネント。<Lism as=\"p\">のエイリアス。as prop で div / blockquote / address / figcaption / pre に変更可能。"
|
|
288
284
|
},
|
|
289
285
|
{
|
|
@@ -292,7 +288,7 @@
|
|
|
292
288
|
"description": "<span>タグを出力するLismコンポーネントです。",
|
|
293
289
|
"category": "core-components",
|
|
294
290
|
"headings": ["Import", "基本的な使い方"],
|
|
295
|
-
"keywords": ["Inline", "インライン", "span", "em", "strong", "コンポーネント"
|
|
291
|
+
"keywords": ["Inline", "インライン", "span", "em", "strong", "コンポーネント"],
|
|
296
292
|
"snippet": "<span>タグを出力するLismコンポーネント。<Lism as=\"span\">のエイリアス。テキストの一部にスタイルを適用したい場合に使用。as prop で em / strong / small / code 等に変更可能。"
|
|
297
293
|
},
|
|
298
294
|
{
|
|
@@ -301,7 +297,7 @@
|
|
|
301
297
|
"description": "<div>タグを出力するLismコンポーネントです。",
|
|
302
298
|
"category": "core-components",
|
|
303
299
|
"headings": ["Import", "基本的な使い方"],
|
|
304
|
-
"keywords": ["Group", "グループ", "div", "コンテナ", "コンポーネント"
|
|
300
|
+
"keywords": ["Group", "グループ", "div", "コンテナ", "コンポーネント"],
|
|
305
301
|
"snippet": "<div>タグを出力するLismコンポーネント。<Lism as=\"div\">のエイリアス。要素をグルーピングするための汎用コンテナ。as prop で section / article / figure / nav / aside 等に変更可能。"
|
|
306
302
|
},
|
|
307
303
|
{
|
|
@@ -310,7 +306,7 @@
|
|
|
310
306
|
"description": "見出しタグ（<h1>〜<h6>）を出力するLismコンポーネントです。",
|
|
311
307
|
"category": "core-components",
|
|
312
308
|
"headings": ["Props", "Import", "基本的な使い方", "見出しレベルの指定"],
|
|
313
|
-
"keywords": ["Heading", "見出し", "h1", "h2", "h3", "h4", "h5", "h6", "level", "コンポーネント"
|
|
309
|
+
"keywords": ["Heading", "見出し", "h1", "h2", "h3", "h4", "h5", "h6", "level", "コンポーネント"],
|
|
314
310
|
"snippet": "見出しタグを出力するLismコンポーネント。level プロパティで h1〜h6 を指定。デフォルトは h2。"
|
|
315
311
|
},
|
|
316
312
|
{
|
|
@@ -319,7 +315,7 @@
|
|
|
319
315
|
"description": "<a>タグを出力するLismコンポーネントです。",
|
|
320
316
|
"category": "core-components",
|
|
321
317
|
"headings": ["Import", "基本的な使い方"],
|
|
322
|
-
"keywords": ["Link", "リンク", "a", "アンカー", "href", "コンポーネント"
|
|
318
|
+
"keywords": ["Link", "リンク", "a", "アンカー", "href", "コンポーネント"],
|
|
323
319
|
"snippet": "<a>タグを出力するLismコンポーネント。<Lism as=\"a\">のエイリアス。全ての Lism Props が使用可能。"
|
|
324
320
|
},
|
|
325
321
|
{
|
|
@@ -328,7 +324,7 @@
|
|
|
328
324
|
"description": "リストタグ（<ul>, <li>）を出力するLismコンポーネントです。",
|
|
329
325
|
"category": "core-components",
|
|
330
326
|
"headings": ["Import", "基本的な使い方", "番号付きリスト", "定義リスト"],
|
|
331
|
-
"keywords": ["List", "ListItem", "リスト", "ul", "ol", "li", "dl", "dt", "dd", "コンポーネント"
|
|
327
|
+
"keywords": ["List", "ListItem", "リスト", "ul", "ol", "li", "dl", "dt", "dd", "コンポーネント"],
|
|
332
328
|
"snippet": "<ul>タグを出力するListと<li>タグを出力するListItemのLismコンポーネント。as prop で ol / dl や li / dt / dd に変更可能。"
|
|
333
329
|
},
|
|
334
330
|
{
|
|
@@ -464,7 +460,7 @@
|
|
|
464
460
|
"title": "SideMain / l--sideMain",
|
|
465
461
|
"description": "Lism CSS の SideMain モジュールについて解説します。メディアクエリ不要でサイドとメインの2カラムレイアウトを構築します。",
|
|
466
462
|
"category": "modules",
|
|
467
|
-
"headings": ["基本構造", "CSS", "Import", "Props", "Usage", "Grid
|
|
463
|
+
"headings": ["基本構造", "CSS", "Import", "Props", "Usage", "`Grid`を使って似たレイアウトを構成する例"],
|
|
468
464
|
"keywords": ["SideMain", "サイドバー", "sidebar", "メイン", "l--sideMain", "2カラム", "is--side"],
|
|
469
465
|
"snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。fxd='row-r'で反転も可能。"
|
|
470
466
|
},
|
|
@@ -528,8 +524,8 @@
|
|
|
528
524
|
"description": "画像や動画などのメディア要素を出力するLismコンポーネントです。",
|
|
529
525
|
"category": "core-components",
|
|
530
526
|
"headings": ["Import"],
|
|
531
|
-
"keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "
|
|
532
|
-
"snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Next.js
|
|
527
|
+
"keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "picture", "Astro Image"],
|
|
528
|
+
"snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Astro版では as='img' で Astro Image、as='picture' で Astro Picture に自動マッピング。Next.js の Image コンポーネントとの連携も可能。"
|
|
533
529
|
},
|
|
534
530
|
{
|
|
535
531
|
"sourcePath": "modules/a--spacer.mdx",
|
package/dist/data/meta.js
CHANGED
package/dist/data/overview.json
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
"name": "lism-css",
|
|
7
7
|
"npmName": "lism-css",
|
|
8
8
|
"description": "コアCSSフレームワーク。レイアウトモジュール、デザイントークン、Prop Class、React/Astroコンポーネントを提供。",
|
|
9
|
-
"version": "0.10.
|
|
9
|
+
"version": "0.10.4"
|
|
10
10
|
},
|
|
11
11
|
{
|
|
12
12
|
"name": "lism-ui",
|
|
13
13
|
"npmName": "@lism-css/ui",
|
|
14
14
|
"description": "lism-css の上に構築されたインタラクティブな UI コンポーネントライブラリ。Accordion, Modal, Tabs 等を React/Astro で提供。",
|
|
15
|
-
"version": "0.
|
|
15
|
+
"version": "0.10.0"
|
|
16
16
|
}
|
|
17
17
|
],
|
|
18
18
|
"breakpoints": {
|
|
@@ -20,7 +20,7 @@
|
|
|
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.10.
|
|
23
|
+
"installation": "## CSSのみ (CDN)\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/lism-css@0.10.4/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
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層で定義されるベーススタイル上書き・トークン再定義用クラス",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"cssProperty": "font-weight",
|
|
34
34
|
"type": "string",
|
|
35
35
|
"responsive": false,
|
|
36
|
-
"description": "
|
|
37
|
-
"values": ["
|
|
36
|
+
"description": "フォントウェイト。トークン値（light, normal, bold）または数値（100〜900）。",
|
|
37
|
+
"values": ["light", "normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
"prop": "ff",
|
package/dist/data/tokens.json
CHANGED
|
@@ -26,8 +26,7 @@
|
|
|
26
26
|
{ "name": "--pink", "value": "oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348)" },
|
|
27
27
|
{ "name": "--gray", "value": "oklch(calc(var(--L) - 4%) 0.04 256)" },
|
|
28
28
|
{ "name": "--black", "value": "#000" },
|
|
29
|
-
{ "name": "--white", "value": "#fff" }
|
|
30
|
-
{ "name": "--keycolor", "value": "コンポーネントごとのキーカラー" }
|
|
29
|
+
{ "name": "--white", "value": "#fff" }
|
|
31
30
|
]
|
|
32
31
|
},
|
|
33
32
|
{
|
|
@@ -48,19 +47,20 @@
|
|
|
48
47
|
},
|
|
49
48
|
{
|
|
50
49
|
"category": "fontSize",
|
|
51
|
-
"description": "フォントサイズトークン。CSS変数名は --fz--{値}
|
|
50
|
+
"description": "フォントサイズトークン。CSS変数名は --fz--{値}。--fz-mol（デフォルト8）を分子とする調和数列（倍音列）ベースのスケーリング。--fz-mol を上書きすることでスケール全体を調整可能。",
|
|
52
51
|
"tokens": [
|
|
53
52
|
{ "name": "--fz--base", "value": "var(--REM)", "description": "本文の基本フォントサイズ（≒ 1rem）" },
|
|
54
|
-
{ "name": "--fz
|
|
55
|
-
{ "name": "--fz--
|
|
56
|
-
{ "name": "--fz--
|
|
57
|
-
{ "name": "--fz--
|
|
58
|
-
{ "name": "--fz--
|
|
59
|
-
{ "name": "--fz--
|
|
60
|
-
{ "name": "--fz--
|
|
61
|
-
{ "name": "--fz--
|
|
62
|
-
{ "name": "--fz--
|
|
63
|
-
{ "name": "--fz--
|
|
53
|
+
{ "name": "--fz-mol", "value": "8", "description": "倍音列の分母（7以上に対応）。この値を変更するとスケール全体が変わる" },
|
|
54
|
+
{ "name": "--fz--5xl", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 6))", "description": "最大サイズ（mol/(mol-6)）" },
|
|
55
|
+
{ "name": "--fz--4xl", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 5))", "description": "特大サイズ（mol/(mol-5)）" },
|
|
56
|
+
{ "name": "--fz--3xl", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 4))", "description": "3XLサイズ（mol/(mol-4)）" },
|
|
57
|
+
{ "name": "--fz--2xl", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 3))", "description": "2XLサイズ（mol/(mol-3)）" },
|
|
58
|
+
{ "name": "--fz--xl", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 2))", "description": "XLサイズ（mol/(mol-2)）" },
|
|
59
|
+
{ "name": "--fz--l", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) - 1))", "description": "Lサイズ（mol/(mol-1)）" },
|
|
60
|
+
{ "name": "--fz--m", "value": "1em", "description": "Mサイズ（基準）" },
|
|
61
|
+
{ "name": "--fz--s", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) + 1))", "description": "Sサイズ（mol/(mol+1)）" },
|
|
62
|
+
{ "name": "--fz--xs", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))", "description": "XSサイズ（mol/(mol+2)）" },
|
|
63
|
+
{ "name": "--fz--2xs", "value": "calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))", "description": "最小サイズ（mol/(mol+3)）" }
|
|
64
64
|
]
|
|
65
65
|
},
|
|
66
66
|
{
|
|
@@ -95,6 +95,24 @@
|
|
|
95
95
|
{ "name": "--ff--mono", "value": "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace", "description": "モノスペースフォント" }
|
|
96
96
|
]
|
|
97
97
|
},
|
|
98
|
+
{
|
|
99
|
+
"category": "fontWeight",
|
|
100
|
+
"description": "フォントウェイトトークン。CSS変数名は --fw--{値}。名前付きトークンは light / normal / bold の3つ。細かいウェイト指定には -fw:100 ~ -fw:900 の数値ユーティリティクラスを使用。",
|
|
101
|
+
"tokens": [
|
|
102
|
+
{ "name": "--fw--light", "value": "300", "description": "細め" },
|
|
103
|
+
{ "name": "--fw--normal", "value": "400", "description": "標準" },
|
|
104
|
+
{ "name": "--fw--bold", "value": "600", "description": "太字（Hiragino Sans W6 相当）" }
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"category": "opacity",
|
|
109
|
+
"description": "不透明度トークン。CSS変数名は --o--{値}。値はマイナス表記（n10 = -10）。",
|
|
110
|
+
"tokens": [
|
|
111
|
+
{ "name": "--o--n10", "value": "0.75", "description": "75%の不透明度" },
|
|
112
|
+
{ "name": "--o--n20", "value": "0.5", "description": "50%の不透明度" },
|
|
113
|
+
{ "name": "--o--n30", "value": "0.25", "description": "25%の不透明度" }
|
|
114
|
+
]
|
|
115
|
+
},
|
|
98
116
|
{
|
|
99
117
|
"category": "radius",
|
|
100
118
|
"description": "角丸トークン。CSS変数名は --bdrs--{値}。段階的に値が大きくなる。",
|