@lism-css/mcp 0.10.2 → 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.
- package/dist/data/components.json +3 -3
- package/dist/data/docs-index.json +19 -33
- package/dist/data/meta.js +2 -2
- package/dist/data/overview.json +5 -5
- package/dist/data/props-system.json +5 -12
- package/dist/data/tokens.json +15 -21
- package/package.json +1 -1
|
@@ -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,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 に変更可能。Astro版では as=\"img\" 時に Astro の Image コンポーネント、as=\"picture\" 時に Astro の 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",
|
|
@@ -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,23 +210,20 @@
|
|
|
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)",
|
|
215
|
+
"v.0.10.4 (2026.04.04)",
|
|
216
|
+
"v.0.10.3 (2026.04.04)",
|
|
224
217
|
"v.0.10.2 (2026.04.04)",
|
|
225
218
|
"v.0.10.1 (2026.04.03)",
|
|
226
|
-
"lism-css v.0.9.4 (2026.03.31)",
|
|
227
|
-
"
|
|
219
|
+
"`lism-css` v.0.9.4 (2026.03.31)",
|
|
220
|
+
"`@lism-css/ui` v.0.9.3 (2026.03.30)",
|
|
228
221
|
"v.0.9.2 (2026.03.18)",
|
|
229
222
|
"v.0.9.1 (2026.03.18)",
|
|
230
223
|
"v.0.9.0 (2026.03.17)",
|
|
231
224
|
"v.0.8.3",
|
|
232
225
|
"v.0.8.2",
|
|
233
|
-
"v.0.8 (大幅な変更)"
|
|
234
|
-
"v.0.7",
|
|
235
|
-
"v.0.7.1",
|
|
236
|
-
"v.0.7.2",
|
|
237
|
-
"v.0.7.3",
|
|
238
|
-
"v.0.6",
|
|
239
|
-
"v.0.5(大幅な変更)",
|
|
240
|
-
"~ v.0.3"
|
|
226
|
+
"v.0.8 (大幅な変更)"
|
|
241
227
|
],
|
|
242
228
|
"keywords": ["changelog", "変更履歴", "更新", "バージョン"],
|
|
243
229
|
"snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
|
|
@@ -275,7 +261,7 @@
|
|
|
275
261
|
"description": "LismのCSS設計に対応した様々なプロパティを受け取ることができる汎用的なコンポーネントです。",
|
|
276
262
|
"category": "core-components",
|
|
277
263
|
"headings": ["Import", "Lism Props", "補足"],
|
|
278
|
-
"keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"
|
|
264
|
+
"keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"],
|
|
279
265
|
"snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
|
|
280
266
|
},
|
|
281
267
|
{
|
|
@@ -284,7 +270,7 @@
|
|
|
284
270
|
"description": "<p>タグを出力するLismコンポーネントです。",
|
|
285
271
|
"category": "core-components",
|
|
286
272
|
"headings": ["Import", "基本的な使い方"],
|
|
287
|
-
"keywords": ["Text", "テキスト", "paragraph", "p", "ブロック", "コンポーネント"
|
|
273
|
+
"keywords": ["Text", "テキスト", "paragraph", "p", "ブロック", "コンポーネント"],
|
|
288
274
|
"snippet": "<p>タグを出力するLismコンポーネント。<Lism as=\"p\">のエイリアス。as prop で div / blockquote / address / figcaption / pre に変更可能。"
|
|
289
275
|
},
|
|
290
276
|
{
|
|
@@ -293,7 +279,7 @@
|
|
|
293
279
|
"description": "<span>タグを出力するLismコンポーネントです。",
|
|
294
280
|
"category": "core-components",
|
|
295
281
|
"headings": ["Import", "基本的な使い方"],
|
|
296
|
-
"keywords": ["Inline", "インライン", "span", "em", "strong", "コンポーネント"
|
|
282
|
+
"keywords": ["Inline", "インライン", "span", "em", "strong", "コンポーネント"],
|
|
297
283
|
"snippet": "<span>タグを出力するLismコンポーネント。<Lism as=\"span\">のエイリアス。テキストの一部にスタイルを適用したい場合に使用。as prop で em / strong / small / code 等に変更可能。"
|
|
298
284
|
},
|
|
299
285
|
{
|
|
@@ -302,7 +288,7 @@
|
|
|
302
288
|
"description": "<div>タグを出力するLismコンポーネントです。",
|
|
303
289
|
"category": "core-components",
|
|
304
290
|
"headings": ["Import", "基本的な使い方"],
|
|
305
|
-
"keywords": ["Group", "グループ", "div", "コンテナ", "コンポーネント"
|
|
291
|
+
"keywords": ["Group", "グループ", "div", "コンテナ", "コンポーネント"],
|
|
306
292
|
"snippet": "<div>タグを出力するLismコンポーネント。<Lism as=\"div\">のエイリアス。要素をグルーピングするための汎用コンテナ。as prop で section / article / figure / nav / aside 等に変更可能。"
|
|
307
293
|
},
|
|
308
294
|
{
|
|
@@ -311,7 +297,7 @@
|
|
|
311
297
|
"description": "見出しタグ(<h1>〜<h6>)を出力するLismコンポーネントです。",
|
|
312
298
|
"category": "core-components",
|
|
313
299
|
"headings": ["Props", "Import", "基本的な使い方", "見出しレベルの指定"],
|
|
314
|
-
"keywords": ["Heading", "見出し", "h1", "h2", "h3", "h4", "h5", "h6", "level", "コンポーネント"
|
|
300
|
+
"keywords": ["Heading", "見出し", "h1", "h2", "h3", "h4", "h5", "h6", "level", "コンポーネント"],
|
|
315
301
|
"snippet": "見出しタグを出力するLismコンポーネント。level プロパティで h1〜h6 を指定。デフォルトは h2。"
|
|
316
302
|
},
|
|
317
303
|
{
|
|
@@ -320,7 +306,7 @@
|
|
|
320
306
|
"description": "<a>タグを出力するLismコンポーネントです。",
|
|
321
307
|
"category": "core-components",
|
|
322
308
|
"headings": ["Import", "基本的な使い方"],
|
|
323
|
-
"keywords": ["Link", "リンク", "a", "アンカー", "href", "コンポーネント"
|
|
309
|
+
"keywords": ["Link", "リンク", "a", "アンカー", "href", "コンポーネント"],
|
|
324
310
|
"snippet": "<a>タグを出力するLismコンポーネント。<Lism as=\"a\">のエイリアス。全ての Lism Props が使用可能。"
|
|
325
311
|
},
|
|
326
312
|
{
|
|
@@ -329,7 +315,7 @@
|
|
|
329
315
|
"description": "リストタグ(<ul>, <li>)を出力するLismコンポーネントです。",
|
|
330
316
|
"category": "core-components",
|
|
331
317
|
"headings": ["Import", "基本的な使い方", "番号付きリスト", "定義リスト"],
|
|
332
|
-
"keywords": ["List", "ListItem", "リスト", "ul", "ol", "li", "dl", "dt", "dd", "コンポーネント"
|
|
318
|
+
"keywords": ["List", "ListItem", "リスト", "ul", "ol", "li", "dl", "dt", "dd", "コンポーネント"],
|
|
333
319
|
"snippet": "<ul>タグを出力するListと<li>タグを出力するListItemのLismコンポーネント。as prop で ol / dl や li / dt / dd に変更可能。"
|
|
334
320
|
},
|
|
335
321
|
{
|
|
@@ -529,8 +515,8 @@
|
|
|
529
515
|
"description": "画像や動画などのメディア要素を出力するLismコンポーネントです。",
|
|
530
516
|
"category": "core-components",
|
|
531
517
|
"headings": ["Import"],
|
|
532
|
-
"keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "
|
|
533
|
-
"snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Next.js
|
|
518
|
+
"keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "picture", "Astro Image"],
|
|
519
|
+
"snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Astro版では as='img' で Astro Image、as='picture' で Astro Picture に自動マッピング。Next.js の Image コンポーネントとの連携も可能。"
|
|
534
520
|
},
|
|
535
521
|
{
|
|
536
522
|
"sourcePath": "modules/a--spacer.mdx",
|
package/dist/data/meta.js
CHANGED
package/dist/data/overview.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
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",
|
|
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,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": {
|
|
@@ -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",
|
|
@@ -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
|
@@ -47,19 +47,20 @@
|
|
|
47
47
|
},
|
|
48
48
|
{
|
|
49
49
|
"category": "fontSize",
|
|
50
|
-
"description": "フォントサイズトークン。CSS変数名は --fz--{値}
|
|
50
|
+
"description": "フォントサイズトークン。CSS変数名は --fz--{値}。--fz-mol(デフォルト8)を分子とする調和数列(倍音列)ベースのスケーリング。--fz-mol を上書きすることでスケール全体を調整可能。",
|
|
51
51
|
"tokens": [
|
|
52
52
|
{ "name": "--fz--base", "value": "var(--REM)", "description": "本文の基本フォントサイズ(≒ 1rem)" },
|
|
53
|
-
{ "name": "--fz
|
|
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--
|
|
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))" }
|
|
63
64
|
]
|
|
64
65
|
},
|
|
65
66
|
{
|
|
@@ -96,14 +97,11 @@
|
|
|
96
97
|
},
|
|
97
98
|
{
|
|
98
99
|
"category": "fontWeight",
|
|
99
|
-
"description": "フォントウェイトトークン。CSS変数名は --fw--{値}
|
|
100
|
+
"description": "フォントウェイトトークン。CSS変数名は --fw--{値}。名前付きトークンは light / normal / bold の3つ。細かいウェイト指定には -fw:100 ~ -fw:900 の数値ユーティリティクラスを使用。",
|
|
100
101
|
"tokens": [
|
|
101
|
-
{ "name": "--fw--thin", "value": "100", "description": "極細" },
|
|
102
102
|
{ "name": "--fw--light", "value": "300", "description": "細め" },
|
|
103
103
|
{ "name": "--fw--normal", "value": "400", "description": "標準" },
|
|
104
|
-
{ "name": "--fw--
|
|
105
|
-
{ "name": "--fw--bold", "value": "700", "description": "太字" },
|
|
106
|
-
{ "name": "--fw--black", "value": "900", "description": "最太" }
|
|
104
|
+
{ "name": "--fw--bold", "value": "600", "description": "太字(Hiragino Sans W6 相当)" }
|
|
107
105
|
]
|
|
108
106
|
},
|
|
109
107
|
{
|
|
@@ -119,12 +117,10 @@
|
|
|
119
117
|
"category": "radius",
|
|
120
118
|
"description": "角丸トークン。CSS変数名は --bdrs--{値}。段階的に値が大きくなる。",
|
|
121
119
|
"tokens": [
|
|
122
|
-
{ "name": "--bdrs--5", "value": "2px", "description": "角丸 step 5" },
|
|
123
120
|
{ "name": "--bdrs--10", "value": "0.25rem", "description": "角丸 step 10(≒ 4px)" },
|
|
124
121
|
{ "name": "--bdrs--20", "value": "0.5rem", "description": "角丸 step 20(≒ 8px)" },
|
|
125
122
|
{ "name": "--bdrs--30", "value": "1rem", "description": "角丸 step 30(≒ 16px)" },
|
|
126
123
|
{ "name": "--bdrs--40", "value": "1.5rem", "description": "角丸 step 40(≒ 24px)" },
|
|
127
|
-
{ "name": "--bdrs--50", "value": "2rem", "description": "角丸 step 50(≒ 32px)" },
|
|
128
124
|
{ "name": "--bdrs--99", "value": "99rem", "description": "完全な丸 (pill)" },
|
|
129
125
|
{ "name": "--bdrs--inner", "value": "calc(var(--bdrs, 0px) - var(--p, 0px))", "description": "内側の角丸(親要素に合わせる)" }
|
|
130
126
|
]
|
|
@@ -133,12 +129,10 @@
|
|
|
133
129
|
"category": "shadow",
|
|
134
130
|
"description": "ボックスシャドウトークン。CSS変数名は --bxsh--{値}。--shc(シャドウカラー: hsl(220 4% 8% / 5%))と --shsz--{n}(シャドウサイズ)を組み合わせた --sh--{n} 変数を複合して構成。",
|
|
135
131
|
"tokens": [
|
|
136
|
-
{ "name": "--bxsh--5", "value": "var(--sh--5)", "description": "シャドウ step 5(最も薄い・単一シャドウ)" },
|
|
137
132
|
{ "name": "--bxsh--10", "value": "var(--sh--5), var(--sh--10)", "description": "シャドウ step 10" },
|
|
138
133
|
{ "name": "--bxsh--20", "value": "var(--sh--10), var(--sh--20)", "description": "シャドウ step 20" },
|
|
139
134
|
{ "name": "--bxsh--30", "value": "var(--sh--20), var(--sh--30)", "description": "シャドウ step 30" },
|
|
140
|
-
{ "name": "--bxsh--40", "value": "var(--sh--30), var(--sh--40)", "description": "シャドウ step 40" }
|
|
141
|
-
{ "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(最も濃い)" }
|
|
142
136
|
]
|
|
143
137
|
},
|
|
144
138
|
{
|