@lism-css/mcp 0.3.0 → 0.10.1

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,1147 +1,1154 @@
1
1
  {
2
- "description": "Lism CSS の Props システム。React/Astro コンポーネントの props を CSS クラス (Prop Class) やインラインスタイルに変換する仕組み。レスポンシブ対応は配列記法 p={[20, 30, 40]} で sm, md ブレークポイントの値を指定可能。",
3
- "categories": [
4
- {
5
- "category": "typography",
6
- "description": "テキスト関連のプロパティ",
7
- "props": [
8
- {
9
- "prop": "f",
10
- "cssProperty": "font",
11
- "type": "string",
12
- "responsive": false,
13
- "description": "フォント一括指定。",
14
- "values": ["inherit"]
15
- },
16
- {
17
- "prop": "fz",
18
- "cssProperty": "font-size",
19
- "type": "string | number | array",
20
- "responsive": true,
21
- "description": "フォントサイズ。トークン値またはカスタム値。",
22
- "values": ["root", "base", "5xl", "4xl", "3xl", "2xl", "xl", "l", "m", "s", "xs", "2xs"]
23
- },
24
- {
25
- "prop": "fw",
26
- "cssProperty": "font-weight",
27
- "type": "string",
28
- "responsive": false,
29
- "description": "フォントウェイト。",
30
- "values": ["thin", "light", "normal", "medium", "bold", "black"]
31
- },
32
- {
33
- "prop": "ff",
34
- "cssProperty": "font-family",
35
- "type": "string",
36
- "responsive": false,
37
- "description": "フォントファミリー。",
38
- "values": ["base", "accent", "mono"]
39
- },
40
- {
41
- "prop": "fs",
42
- "cssProperty": "font-style",
43
- "type": "string",
44
- "responsive": false,
45
- "description": "フォントスタイル。",
46
- "values": ["italic"]
47
- },
48
- {
49
- "prop": "lh",
50
- "cssProperty": "line-height",
51
- "type": "string | number",
52
- "responsive": false,
53
- "description": "行間。トークン値またはカスタム値。トークンは hl 系トークンを参照。",
54
- "values": ["base", "xs", "s", "l", "1"]
55
- },
56
- {
57
- "prop": "hl",
58
- "cssProperty": "--hl (CSS変数)",
59
- "type": "string | array",
60
- "responsive": true,
61
- "description": "見出し用の行間を制御するCSS変数。",
62
- "values": ["base", "xs", "s", "l"]
63
- },
64
- {
65
- "prop": "lts",
66
- "cssProperty": "letter-spacing",
67
- "type": "string",
68
- "responsive": false,
69
- "description": "文字間隔。",
70
- "values": ["base", "s", "l"]
71
- },
72
- {
73
- "prop": "ta",
74
- "cssProperty": "text-align",
75
- "type": "string",
76
- "responsive": false,
77
- "description": "テキスト整列。",
78
- "values": ["center", "left", "right"]
79
- },
80
- {
81
- "prop": "td",
82
- "cssProperty": "text-decoration",
83
- "type": "string",
84
- "responsive": false,
85
- "description": "テキスト装飾。",
86
- "values": ["none"]
87
- },
88
- {
89
- "prop": "tt",
90
- "cssProperty": "text-transform",
91
- "type": "string",
92
- "responsive": false,
93
- "description": "テキスト変換。",
94
- "values": ["upper", "lower"]
95
- }
96
- ]
97
- },
98
- {
99
- "category": "display",
100
- "description": "表示・可視性関連のプロパティ",
101
- "props": [
102
- {
103
- "prop": "d",
104
- "cssProperty": "display",
105
- "type": "string | array",
106
- "responsive": true,
107
- "description": "表示モード。",
108
- "values": ["none", "block", "in-flex"]
109
- },
110
- {
111
- "prop": "o",
112
- "cssProperty": "opacity",
113
- "type": "string | number",
114
- "responsive": false,
115
- "description": "透明度。",
116
- "values": ["0", "-10", "-20", "-30"]
117
- },
118
- { "prop": "v", "cssProperty": "visibility", "type": "string", "responsive": false, "description": "可視性。", "values": ["hidden"] },
119
- {
120
- "prop": "ov",
121
- "cssProperty": "overflow",
122
- "type": "string",
123
- "responsive": false,
124
- "description": "オーバーフロー。",
125
- "values": ["hidden", "auto", "clip"]
126
- },
127
- {
128
- "prop": "ov-x",
129
- "cssProperty": "overflow-x",
130
- "type": "string",
131
- "responsive": false,
132
- "description": "横方向のオーバーフロー。",
133
- "values": ["clip", "auto", "scroll"]
134
- },
135
- {
136
- "prop": "ov-y",
137
- "cssProperty": "overflow-y",
138
- "type": "string",
139
- "responsive": false,
140
- "description": "縦方向のオーバーフロー。",
141
- "values": ["clip", "auto", "scroll"]
142
- },
143
- {
144
- "prop": "ar",
145
- "cssProperty": "aspect-ratio",
146
- "type": "string | array",
147
- "responsive": true,
148
- "description": "アスペクト比。",
149
- "values": ["21/9", "16/9", "3/2", "1/1", "og"]
150
- }
151
- ]
152
- },
153
- {
154
- "category": "size",
155
- "description": "幅・高さ関連のプロパティ",
156
- "props": [
157
- {
158
- "prop": "w",
159
- "cssProperty": "width",
160
- "type": "string | array",
161
- "responsive": true,
162
- "description": "幅。",
163
- "values": ["100%", "fit"]
164
- },
165
- {
166
- "prop": "h",
167
- "cssProperty": "height",
168
- "type": "string | array",
169
- "responsive": true,
170
- "description": "高さ。",
171
- "values": ["100%", "fit"]
172
- },
173
- {
174
- "prop": "min-w",
175
- "cssProperty": "min-width",
176
- "type": "string | array",
177
- "responsive": true,
178
- "description": "最小幅。",
179
- "values": ["100%"]
180
- },
181
- {
182
- "prop": "max-w",
183
- "cssProperty": "max-width",
184
- "type": "string | array",
185
- "responsive": true,
186
- "description": "最大幅。",
187
- "values": ["100%"]
188
- },
189
- {
190
- "prop": "min-h",
191
- "cssProperty": "min-height",
192
- "type": "string | array",
193
- "responsive": true,
194
- "description": "最小高さ。",
195
- "values": ["100%"]
196
- },
197
- {
198
- "prop": "max-h",
199
- "cssProperty": "max-height",
200
- "type": "string | array",
201
- "responsive": true,
202
- "description": "最大高さ。",
203
- "values": ["100%"]
204
- },
205
- {
206
- "prop": "sz",
207
- "cssProperty": "inline-size",
208
- "type": "string",
209
- "responsive": false,
210
- "description": "インラインサイズ。トークン値(sz)でカスタム値を指定可能。"
211
- },
212
- {
213
- "prop": "min-sz",
214
- "cssProperty": "min-inline-size",
215
- "type": "string",
216
- "responsive": false,
217
- "description": "最小インラインサイズ。トークン値(sz)でカスタム値を指定可能。"
218
- },
219
- {
220
- "prop": "max-sz",
221
- "cssProperty": "max-inline-size",
222
- "type": "string",
223
- "responsive": false,
224
- "description": "最大インラインサイズ。トークン値またはプリセット値。",
225
- "values": ["xs", "s", "m", "l", "xl", "min", "full", "container"]
226
- },
227
- {
228
- "prop": "ysz",
229
- "cssProperty": "block-size",
230
- "type": "string",
231
- "responsive": false,
232
- "description": "ブロックサイズ。トークン値(sz)でカスタム値を指定可能。"
233
- },
234
- {
235
- "prop": "min-ysz",
236
- "cssProperty": "min-block-size",
237
- "type": "string",
238
- "responsive": false,
239
- "description": "最小ブロックサイズ。トークン値(sz)でカスタム値を指定可能。"
240
- },
241
- {
242
- "prop": "max-ysz",
243
- "cssProperty": "max-block-size",
244
- "type": "string",
245
- "responsive": false,
246
- "description": "最大ブロックサイズ。トークン値(sz)でカスタム値を指定可能。"
247
- }
248
- ]
249
- },
250
- {
251
- "category": "spacing",
252
- "description": "余白関連のプロパティ。スペーシングトークン (5, 10, 15, 20, 30, 40, 50, 60, 70, 80) を値として使用可能。",
253
- "props": [
254
- {
255
- "prop": "p",
256
- "cssProperty": "padding",
257
- "type": "string | number | array",
258
- "responsive": true,
259
- "description": "全方向パディング。",
260
- "values": ["0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
261
- },
262
- {
263
- "prop": "px",
264
- "cssProperty": "padding-inline",
265
- "type": "string | number | array",
266
- "responsive": true,
267
- "description": "左右 (inline) パディング。",
268
- "values": ["0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
269
- },
270
- {
271
- "prop": "py",
272
- "cssProperty": "padding-block",
273
- "type": "string | number | array",
274
- "responsive": true,
275
- "description": "上下 (block) パディング。",
276
- "values": ["0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
277
- },
278
- {
279
- "prop": "px-s",
280
- "cssProperty": "padding-inline-start",
281
- "type": "string | number | array",
282
- "responsive": true,
283
- "description": " (inline-start) パディング。"
284
- },
285
- {
286
- "prop": "px-e",
287
- "cssProperty": "padding-inline-end",
288
- "type": "string | number | array",
289
- "responsive": true,
290
- "description": " (inline-end) パディング。"
291
- },
292
- {
293
- "prop": "py-s",
294
- "cssProperty": "padding-block-start",
295
- "type": "string | number | array",
296
- "responsive": true,
297
- "description": " (block-start) パディング。"
298
- },
299
- {
300
- "prop": "py-e",
301
- "cssProperty": "padding-block-end",
302
- "type": "string | number | array",
303
- "responsive": true,
304
- "description": " (block-end) パディング。"
305
- },
306
- {
307
- "prop": "pl",
308
- "cssProperty": "padding-left",
309
- "type": "string | number | array",
310
- "responsive": true,
311
- "description": "左パディング。"
312
- },
313
- {
314
- "prop": "pr",
315
- "cssProperty": "padding-right",
316
- "type": "string | number | array",
317
- "responsive": true,
318
- "description": "右パディング。"
319
- },
320
- {
321
- "prop": "pt",
322
- "cssProperty": "padding-top",
323
- "type": "string | number | array",
324
- "responsive": true,
325
- "description": "上パディング。"
326
- },
327
- {
328
- "prop": "pb",
329
- "cssProperty": "padding-bottom",
330
- "type": "string | number | array",
331
- "responsive": true,
332
- "description": "下パディング。"
333
- },
334
- {
335
- "prop": "m",
336
- "cssProperty": "margin",
337
- "type": "string | number | array",
338
- "responsive": true,
339
- "description": "全方向マージン。",
340
- "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
341
- },
342
- {
343
- "prop": "mx",
344
- "cssProperty": "margin-inline",
345
- "type": "string | number | array",
346
- "responsive": true,
347
- "description": "左右 (inline) マージン。",
348
- "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
349
- },
350
- {
351
- "prop": "my",
352
- "cssProperty": "margin-block",
353
- "type": "string | number | array",
354
- "responsive": true,
355
- "description": "上下 (block) マージン。",
356
- "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
357
- },
358
- {
359
- "prop": "mx-s",
360
- "cssProperty": "margin-inline-start",
361
- "type": "string | number | array",
362
- "responsive": true,
363
- "description": " (inline-start) マージン。",
364
- "values": ["auto"]
365
- },
366
- {
367
- "prop": "mx-e",
368
- "cssProperty": "margin-inline-end",
369
- "type": "string | number | array",
370
- "responsive": true,
371
- "description": "右 (inline-end) マージン。",
372
- "values": ["auto"]
373
- },
374
- {
375
- "prop": "my-s",
376
- "cssProperty": "margin-block-start",
377
- "type": "string | number | array",
378
- "responsive": true,
379
- "description": "上 (block-start) マージン。",
380
- "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
381
- },
382
- {
383
- "prop": "my-e",
384
- "cssProperty": "margin-block-end",
385
- "type": "string | number | array",
386
- "responsive": true,
387
- "description": " (block-end) マージン。",
388
- "values": ["auto"]
389
- },
390
- { "prop": "ml", "cssProperty": "margin-left", "type": "string | number | array", "responsive": true, "description": "左マージン。" },
391
- { "prop": "mr", "cssProperty": "margin-right", "type": "string | number | array", "responsive": true, "description": "右マージン。" },
392
- { "prop": "mt", "cssProperty": "margin-top", "type": "string | number | array", "responsive": true, "description": "上マージン。" },
393
- {
394
- "prop": "mb",
395
- "cssProperty": "margin-bottom",
396
- "type": "string | number | array",
397
- "responsive": true,
398
- "description": "下マージン。"
399
- },
400
- {
401
- "prop": "g",
402
- "cssProperty": "gap",
403
- "type": "string | number | array",
404
- "responsive": true,
405
- "description": "ギャップ (Flex/Grid の子要素間の余白)。",
406
- "values": ["0", "inherit", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
407
- },
408
- {
409
- "prop": "g-x",
410
- "cssProperty": "column-gap",
411
- "type": "string | number | array",
412
- "responsive": true,
413
- "description": "カラム方向のギャップ。"
414
- },
415
- {
416
- "prop": "g-y",
417
- "cssProperty": "row-gap",
418
- "type": "string | number | array",
419
- "responsive": true,
420
- "description": "行方向のギャップ。"
421
- }
422
- ]
423
- },
424
- {
425
- "category": "color",
426
- "description": "カラー関連のプロパティ",
427
- "props": [
428
- {
429
- "prop": "c",
430
- "cssProperty": "color",
431
- "type": "string",
432
- "responsive": false,
433
- "description": "テキストカラー。",
434
- "values": ["base", "text", "text-2", "brand", "accent", "inherit"]
435
- },
436
- {
437
- "prop": "bgc",
438
- "cssProperty": "background-color",
439
- "type": "string",
440
- "responsive": false,
441
- "description": "背景色。",
442
- "values": ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"]
443
- },
444
- {
445
- "prop": "bg",
446
- "cssProperty": "background",
447
- "type": "string | array",
448
- "responsive": true,
449
- "description": "背景の一括指定。"
450
- },
451
- {
452
- "prop": "bgi",
453
- "cssProperty": "background-image",
454
- "type": "string",
455
- "responsive": false,
456
- "description": "背景画像。"
457
- },
458
- {
459
- "prop": "bgr",
460
- "cssProperty": "background-repeat",
461
- "type": "string",
462
- "responsive": false,
463
- "description": "背景のリピート設定。",
464
- "values": ["no-repeat"]
465
- },
466
- {
467
- "prop": "bgp",
468
- "cssProperty": "background-position",
469
- "type": "string",
470
- "responsive": false,
471
- "description": "背景の位置。",
472
- "values": ["center"]
473
- },
474
- {
475
- "prop": "bgsz",
476
- "cssProperty": "background-size",
477
- "type": "string",
478
- "responsive": false,
479
- "description": "背景のサイズ。",
480
- "values": ["cover", "contain"]
481
- },
482
- {
483
- "prop": "keycolor",
484
- "cssProperty": "--keycolor (CSS変数)",
485
- "type": "string",
486
- "responsive": false,
487
- "description": "コンポーネントのキーカラーを設定するCSS変数。"
488
- }
489
- ]
490
- },
491
- {
492
- "category": "border",
493
- "description": "ボーダー関連のプロパティ",
494
- "props": [
495
- {
496
- "prop": "bd",
497
- "cssProperty": "border",
498
- "type": "string | boolean",
499
- "responsive": false,
500
- "description": "ボーダー。true でデフォルトのボーダーが付く。",
501
- "values": ["none"]
502
- },
503
- {
504
- "prop": "bds",
505
- "cssProperty": "--bds (CSS変数)",
506
- "type": "string",
507
- "responsive": false,
508
- "description": "ボーダースタイル。",
509
- "values": ["dashed", "dotted", "double"]
510
- },
511
- {
512
- "prop": "bdc",
513
- "cssProperty": "--bdc (CSS変数)",
514
- "type": "string",
515
- "responsive": false,
516
- "description": "ボーダーカラー。",
517
- "values": ["brand", "accent", "divider", "inherit", "transparent", "cc"]
518
- },
519
- {
520
- "prop": "bdw",
521
- "cssProperty": "--bdw (CSS変数)",
522
- "type": "string | number | array",
523
- "responsive": true,
524
- "description": "ボーダー幅。"
525
- },
526
- {
527
- "prop": "bd-x",
528
- "cssProperty": "border-inline",
529
- "type": "string | boolean",
530
- "responsive": false,
531
- "description": "インライン方向(左右)のボーダー。"
532
- },
533
- {
534
- "prop": "bd-y",
535
- "cssProperty": "border-block",
536
- "type": "string | boolean",
537
- "responsive": false,
538
- "description": "ブロック方向(上下)のボーダー。"
539
- },
540
- {
541
- "prop": "bd-x-s",
542
- "cssProperty": "border-inline-start",
543
- "type": "string | boolean",
544
- "responsive": false,
545
- "description": "インライン開始方向のボーダー。"
546
- },
547
- {
548
- "prop": "bd-x-e",
549
- "cssProperty": "border-inline-end",
550
- "type": "string | boolean",
551
- "responsive": false,
552
- "description": "インライン終了方向のボーダー。"
553
- },
554
- {
555
- "prop": "bd-y-s",
556
- "cssProperty": "border-block-start",
557
- "type": "string | boolean",
558
- "responsive": false,
559
- "description": "ブロック開始方向のボーダー。"
560
- },
561
- {
562
- "prop": "bd-y-e",
563
- "cssProperty": "border-block-end",
564
- "type": "string | boolean",
565
- "responsive": false,
566
- "description": "ブロック終了方向のボーダー。"
567
- },
568
- { "prop": "bd-t", "cssProperty": "border-top", "type": "string | boolean", "responsive": false, "description": "上ボーダー。" },
569
- { "prop": "bd-b", "cssProperty": "border-bottom", "type": "string | boolean", "responsive": false, "description": "下ボーダー。" },
570
- { "prop": "bd-l", "cssProperty": "border-left", "type": "string | boolean", "responsive": false, "description": "左ボーダー。" },
571
- { "prop": "bd-r", "cssProperty": "border-right", "type": "string | boolean", "responsive": false, "description": "右ボーダー。" },
572
- {
573
- "prop": "bdrs",
574
- "cssProperty": "border-radius",
575
- "type": "string | number | array",
576
- "responsive": true,
577
- "description": "角丸。",
578
- "values": ["0", "5", "10", "20", "30", "40", "50", "99", "inner"]
579
- },
580
- { "prop": "bdrs-tl", "cssProperty": "border-top-left-radius", "type": "string", "responsive": false, "description": "左上の角丸。" },
581
- { "prop": "bdrs-tr", "cssProperty": "border-top-right-radius", "type": "string", "responsive": false, "description": "右上の角丸。" },
582
- {
583
- "prop": "bdrs-br",
584
- "cssProperty": "border-bottom-right-radius",
585
- "type": "string",
586
- "responsive": false,
587
- "description": "右下の角丸。"
588
- },
589
- {
590
- "prop": "bdrs-bl",
591
- "cssProperty": "border-bottom-left-radius",
592
- "type": "string",
593
- "responsive": false,
594
- "description": "左下の角丸。"
595
- },
596
- {
597
- "prop": "bdrs-ss",
598
- "cssProperty": "border-start-start-radius",
599
- "type": "string",
600
- "responsive": false,
601
- "description": "インライン開始・ブロック開始方向の角丸。"
602
- },
603
- {
604
- "prop": "bdrs-se",
605
- "cssProperty": "border-start-end-radius",
606
- "type": "string",
607
- "responsive": false,
608
- "description": "インライン終了・ブロック開始方向の角丸。"
609
- },
610
- {
611
- "prop": "bdrs-es",
612
- "cssProperty": "border-end-start-radius",
613
- "type": "string",
614
- "responsive": false,
615
- "description": "インライン開始・ブロック終了方向の角丸。"
616
- },
617
- {
618
- "prop": "bdrs-ee",
619
- "cssProperty": "border-end-end-radius",
620
- "type": "string",
621
- "responsive": false,
622
- "description": "インライン終了・ブロック終了方向の角丸。"
623
- },
624
- {
625
- "prop": "bxsh",
626
- "cssProperty": "box-shadow",
627
- "type": "string | number | array",
628
- "responsive": true,
629
- "description": "ボックスシャドウ。",
630
- "values": ["0", "5", "10", "20", "30", "40", "50"]
631
- }
632
- ]
633
- },
634
- {
635
- "category": "position",
636
- "description": "ポジション関連のプロパティ",
637
- "props": [
638
- {
639
- "prop": "pos",
640
- "cssProperty": "position",
641
- "type": "string",
642
- "responsive": false,
643
- "description": "位置指定方法。",
644
- "values": ["static", "fixed", "sticky", "rel", "abs"]
645
- },
646
- {
647
- "prop": "z",
648
- "cssProperty": "z-index",
649
- "type": "string | number",
650
- "responsive": false,
651
- "description": "重ね順。",
652
- "values": ["-1", "0", "1", "99"]
653
- },
654
- {
655
- "prop": "t",
656
- "cssProperty": "top",
657
- "type": "string",
658
- "responsive": false,
659
- "description": "上端の位置。",
660
- "values": ["0", "50%", "100%"]
661
- },
662
- {
663
- "prop": "l",
664
- "cssProperty": "left",
665
- "type": "string",
666
- "responsive": false,
667
- "description": "左端の位置。",
668
- "values": ["0", "50%", "100%"]
669
- },
670
- {
671
- "prop": "r",
672
- "cssProperty": "right",
673
- "type": "string",
674
- "responsive": false,
675
- "description": "右端の位置。",
676
- "values": ["0", "50%", "100%"]
677
- },
678
- {
679
- "prop": "b",
680
- "cssProperty": "bottom",
681
- "type": "string",
682
- "responsive": false,
683
- "description": "下端の位置。",
684
- "values": ["0", "50%", "100%"]
685
- },
686
- { "prop": "i", "cssProperty": "inset", "type": "string", "responsive": false, "description": "全方向の位置。", "values": ["0"] },
687
- { "prop": "i-x", "cssProperty": "inset-inline", "type": "string", "responsive": false, "description": "インライン方向の位置。" },
688
- { "prop": "i-y", "cssProperty": "inset-block", "type": "string", "responsive": false, "description": "ブロック方向の位置。" },
689
- {
690
- "prop": "i-x-s",
691
- "cssProperty": "inset-inline-start",
692
- "type": "string",
693
- "responsive": false,
694
- "description": "インライン開始方向の位置。"
695
- },
696
- {
697
- "prop": "i-x-e",
698
- "cssProperty": "inset-inline-end",
699
- "type": "string",
700
- "responsive": false,
701
- "description": "インライン終了方向の位置。"
702
- },
703
- {
704
- "prop": "i-y-s",
705
- "cssProperty": "inset-block-start",
706
- "type": "string",
707
- "responsive": false,
708
- "description": "ブロック開始方向の位置。"
709
- },
710
- {
711
- "prop": "i-y-e",
712
- "cssProperty": "inset-block-end",
713
- "type": "string",
714
- "responsive": false,
715
- "description": "ブロック終了方向の位置。"
716
- }
717
- ]
718
- },
719
- {
720
- "category": "flex",
721
- "description": "Flexbox 関連のプロパティ",
722
- "props": [
723
- {
724
- "prop": "fxf",
725
- "cssProperty": "flex-flow",
726
- "type": "string",
727
- "responsive": false,
728
- "description": "フレックスフロー (flex-direction と flex-wrap の一括指定)。"
729
- },
730
- {
731
- "prop": "fxw",
732
- "cssProperty": "flex-wrap",
733
- "type": "string | array",
734
- "responsive": true,
735
- "description": "フレックス折り返し。",
736
- "values": ["wrap"]
737
- },
738
- {
739
- "prop": "fxd",
740
- "cssProperty": "flex-direction",
741
- "type": "string | array",
742
- "responsive": true,
743
- "description": "フレックス方向。",
744
- "values": ["col", "col-r", "row-r"]
745
- },
746
- {
747
- "prop": "fx",
748
- "cssProperty": "flex",
749
- "type": "string | array",
750
- "responsive": true,
751
- "description": "フレックス値。",
752
- "values": ["1"]
753
- },
754
- {
755
- "prop": "fxg",
756
- "cssProperty": "flex-grow",
757
- "type": "string | number",
758
- "responsive": false,
759
- "description": "フレックス拡大。",
760
- "values": ["1"]
761
- },
762
- {
763
- "prop": "fxsh",
764
- "cssProperty": "flex-shrink",
765
- "type": "string | number",
766
- "responsive": false,
767
- "description": "フレックス縮小。",
768
- "values": ["0"]
769
- },
770
- { "prop": "fxb", "cssProperty": "flex-basis", "type": "string | array", "responsive": true, "description": "フレックス基準サイズ。" }
771
- ]
772
- },
773
- {
774
- "category": "grid",
775
- "description": "Grid レイアウト関連のプロパティ",
776
- "props": [
777
- {
778
- "prop": "gt",
779
- "cssProperty": "grid-template",
780
- "type": "string | array",
781
- "responsive": true,
782
- "description": "グリッドテンプレート。",
783
- "values": ["repeat"]
784
- },
785
- {
786
- "prop": "gta",
787
- "cssProperty": "grid-template-areas",
788
- "type": "string | array",
789
- "responsive": true,
790
- "description": "グリッドテンプレートエリア。"
791
- },
792
- {
793
- "prop": "gtc",
794
- "cssProperty": "grid-template-columns",
795
- "type": "string | array",
796
- "responsive": true,
797
- "description": "グリッド列テンプレート。",
798
- "values": ["subgrid"]
799
- },
800
- {
801
- "prop": "gtr",
802
- "cssProperty": "grid-template-rows",
803
- "type": "string | array",
804
- "responsive": true,
805
- "description": "グリッド行テンプレート。",
806
- "values": ["subgrid"]
807
- },
808
- {
809
- "prop": "gaf",
810
- "cssProperty": "grid-auto-flow",
811
- "type": "string | array",
812
- "responsive": true,
813
- "description": "グリッド自動配置方向。",
814
- "values": ["row", "col"]
815
- },
816
- {
817
- "prop": "gac",
818
- "cssProperty": "grid-auto-columns",
819
- "type": "string",
820
- "responsive": false,
821
- "description": "グリッド自動列サイズ。"
822
- },
823
- {
824
- "prop": "gar",
825
- "cssProperty": "grid-auto-rows",
826
- "type": "string",
827
- "responsive": false,
828
- "description": "グリッド自動行サイズ。"
829
- },
830
- {
831
- "prop": "ga",
832
- "cssProperty": "grid-area",
833
- "type": "string | array",
834
- "responsive": true,
835
- "description": "グリッドエリア。",
836
- "values": ["1/1"]
837
- },
838
- {
839
- "prop": "gc",
840
- "cssProperty": "grid-column",
841
- "type": "string | array",
842
- "responsive": true,
843
- "description": "グリッドカラム位置。",
844
- "values": ["1/-1"]
845
- },
846
- {
847
- "prop": "gr",
848
- "cssProperty": "grid-row",
849
- "type": "string | array",
850
- "responsive": true,
851
- "description": "グリッド行位置。",
852
- "values": ["1/-1"]
853
- },
854
- {
855
- "prop": "gcs",
856
- "cssProperty": "grid-column-start",
857
- "type": "string",
858
- "responsive": false,
859
- "description": "グリッドカラム開始位置。"
860
- },
861
- { "prop": "gce", "cssProperty": "grid-column-end", "type": "string", "responsive": false, "description": "グリッドカラム終了位置。" },
862
- { "prop": "grs", "cssProperty": "grid-row-start", "type": "string", "responsive": false, "description": "グリッド行開始位置。" },
863
- { "prop": "gre", "cssProperty": "grid-row-end", "type": "string", "responsive": false, "description": "グリッド行終了位置。" },
864
- {
865
- "prop": "cols",
866
- "cssProperty": "--cols (CSS変数)",
867
- "type": "string | number | array",
868
- "responsive": true,
869
- "description": "列数を指定するCSS変数。"
870
- },
871
- {
872
- "prop": "rows",
873
- "cssProperty": "--rows (CSS変数)",
874
- "type": "string | number | array",
875
- "responsive": true,
876
- "description": "行数を指定するCSS変数。"
877
- }
878
- ]
879
- },
880
- {
881
- "category": "alignment",
882
- "description": "配置関連のプロパティ",
883
- "props": [
884
- {
885
- "prop": "ai",
886
- "cssProperty": "align-items",
887
- "type": "string | array",
888
- "responsive": true,
889
- "description": "交差軸のアイテム配置。",
890
- "values": ["start", "center", "end", "stretch", "flex-s", "flex-e"]
891
- },
892
- {
893
- "prop": "ac",
894
- "cssProperty": "align-content",
895
- "type": "string | array",
896
- "responsive": true,
897
- "description": "交差軸のコンテンツ配置。",
898
- "values": ["start", "center", "end", "between", "flex-s", "flex-e"]
899
- },
900
- {
901
- "prop": "ji",
902
- "cssProperty": "justify-items",
903
- "type": "string | array",
904
- "responsive": true,
905
- "description": "主軸のアイテム配置。",
906
- "values": ["start", "center", "end", "stretch", "flex-s", "flex-e"]
907
- },
908
- {
909
- "prop": "jc",
910
- "cssProperty": "justify-content",
911
- "type": "string | array",
912
- "responsive": true,
913
- "description": "主軸のコンテンツ配置。",
914
- "values": ["start", "center", "end", "between", "flex-s", "flex-e"]
915
- },
916
- {
917
- "prop": "pi",
918
- "cssProperty": "place-items",
919
- "type": "string",
920
- "responsive": false,
921
- "description": "両軸のアイテム配置。",
922
- "values": ["start", "center", "end"]
923
- },
924
- {
925
- "prop": "pc",
926
- "cssProperty": "place-content",
927
- "type": "string",
928
- "responsive": false,
929
- "description": "両軸のコンテンツ配置。",
930
- "values": ["start", "center", "end"]
931
- },
932
- {
933
- "prop": "aslf",
934
- "cssProperty": "align-self",
935
- "type": "string",
936
- "responsive": false,
937
- "description": "個別の交差軸配置。",
938
- "values": ["start", "center", "end", "stretch"]
939
- },
940
- {
941
- "prop": "jslf",
942
- "cssProperty": "justify-self",
943
- "type": "string",
944
- "responsive": false,
945
- "description": "個別の主軸配置。",
946
- "values": ["start", "center", "end", "stretch"]
947
- },
948
- {
949
- "prop": "pslf",
950
- "cssProperty": "place-self",
951
- "type": "string",
952
- "responsive": false,
953
- "description": "個別の両軸配置。",
954
- "values": ["start", "center", "end"]
955
- },
956
- {
957
- "prop": "order",
958
- "cssProperty": "order",
959
- "type": "string | number",
960
- "responsive": false,
961
- "description": "表示順序。",
962
- "values": ["0", "-1", "1"]
963
- }
964
- ]
965
- },
966
- {
967
- "category": "state",
968
- "description": "状態・機能クラスを付与するための props(コンポーネント専用)",
969
- "props": [
970
- {
971
- "prop": "isContainer",
972
- "cssProperty": "(class: is--container)",
973
- "type": "boolean",
974
- "responsive": false,
975
- "description": "コンテナクエリの基準要素にする。"
976
- },
977
- {
978
- "prop": "isWrapper",
979
- "cssProperty": "(class: is--wrapper)",
980
- "type": "boolean | string",
981
- "responsive": false,
982
- "description": "コンテンツ幅を制御するラッパーにする。",
983
- "values": ["s", "l"]
984
- },
985
- {
986
- "prop": "isLayer",
987
- "cssProperty": "(class: is--layer)",
988
- "type": "boolean",
989
- "responsive": false,
990
- "description": "レイヤー(position:absolute で親要素に重なる)にする。"
991
- },
992
- {
993
- "prop": "isLinkBox",
994
- "cssProperty": "(class: is--linkBox)",
995
- "type": "boolean",
996
- "responsive": false,
997
- "description": "ボックス全体をリンク領域にする。"
998
- },
999
- {
1000
- "prop": "isSide",
1001
- "cssProperty": "(class: is--side)",
1002
- "type": "boolean",
1003
- "responsive": false,
1004
- "description": "SideMain内でサイド要素として機能させる。"
1005
- },
1006
- {
1007
- "prop": "isSkipFlow",
1008
- "cssProperty": "(class: is--skipFlow)",
1009
- "type": "boolean",
1010
- "responsive": false,
1011
- "description": "Flow内でフローマージンをスキップする。"
1012
- },
1013
- {
1014
- "prop": "isVertical",
1015
- "cssProperty": "(class: is--vertical)",
1016
- "type": "boolean",
1017
- "responsive": false,
1018
- "description": "縦書きモードにする。"
1019
- },
1020
- {
1021
- "prop": "setGutter",
1022
- "cssProperty": "(class: set--gutter)",
1023
- "type": "boolean",
1024
- "responsive": false,
1025
- "description": "左右にガター(余白)を付ける。"
1026
- },
1027
- {
1028
- "prop": "setShadow",
1029
- "cssProperty": "(class: set--shadow)",
1030
- "type": "boolean",
1031
- "responsive": false,
1032
- "description": "シャドウ用のセットクラスを付与する。"
1033
- },
1034
- {
1035
- "prop": "setHov",
1036
- "cssProperty": "(class: set--hov)",
1037
- "type": "boolean",
1038
- "responsive": false,
1039
- "description": "ホバー状態管理用のセットクラスを付与する。子要素へのホバー状態伝播に使用。"
1040
- },
1041
- {
1042
- "prop": "setTransition",
1043
- "cssProperty": "(class: set--transition)",
1044
- "type": "boolean",
1045
- "responsive": false,
1046
- "description": "トランジション用のセットクラスを付与する。"
1047
- },
1048
- {
1049
- "prop": "setMask",
1050
- "cssProperty": "(class: set--mask)",
1051
- "type": "string",
1052
- "responsive": false,
1053
- "description": "マスク画像を設定するセットクラスを付与する。SVGやURL文字列を値として指定。"
1054
- },
1055
- {
1056
- "prop": "setPlain",
1057
- "cssProperty": "(class: set--plain)",
1058
- "type": "boolean",
1059
- "responsive": false,
1060
- "description": "プレーン表示用のセットクラスを付与する。"
1061
- },
1062
- {
1063
- "prop": "setInnerRs",
1064
- "cssProperty": "(class: set--innerRs)",
1065
- "type": "boolean",
1066
- "responsive": false,
1067
- "description": "内側の角丸を設定するセットクラスを付与する。"
1068
- },
1069
- {
1070
- "prop": "setBp",
1071
- "cssProperty": "(class: set--bp)",
1072
- "type": "boolean",
1073
- "responsive": false,
1074
- "description": "ブレイクポイント制御用のセットクラスを付与する。"
1075
- },
1076
- {
1077
- "prop": "setCqUnit",
1078
- "cssProperty": "(class: set--cqUnit)",
1079
- "type": "boolean",
1080
- "responsive": false,
1081
- "description": "コンテナクエリ単位(cqi)を有効にするセットクラスを付与する。"
1082
- },
1083
- {
1084
- "prop": "hov",
1085
- "cssProperty": "(class: -hov:*)",
1086
- "type": "boolean | string | object",
1087
- "responsive": false,
1088
- "description": "ホバーエフェクトを設定。文字列で '-hov:{値}' クラスを出力。オブジェクトで複数指定可能。プリセット: 'o'(opacity), 'bgc'(背景色), 'c'(テキスト色), 'bxsh'(影)等。",
1089
- "values": ["o", "bgc", "c", "bdc", "bxsh", "neutral"]
1090
- }
1091
- ]
1092
- },
1093
- {
1094
- "category": "others",
1095
- "description": "その他のCSSプロパティ",
1096
- "props": [
1097
- {
1098
- "prop": "ovwrap",
1099
- "cssProperty": "overflow-wrap",
1100
- "type": "string",
1101
- "responsive": false,
1102
- "description": "オーバーフローラップ。",
1103
- "values": ["any"]
1104
- },
1105
- {
1106
- "prop": "whspace",
1107
- "cssProperty": "white-space",
1108
- "type": "string",
1109
- "responsive": false,
1110
- "description": "ホワイトスペース。",
1111
- "values": ["nowrap"]
1112
- },
1113
- {
1114
- "prop": "float",
1115
- "cssProperty": "float",
1116
- "type": "string",
1117
- "responsive": false,
1118
- "description": "フロート。",
1119
- "values": ["left", "right"]
1120
- },
1121
- {
1122
- "prop": "clear",
1123
- "cssProperty": "clear",
1124
- "type": "string",
1125
- "responsive": false,
1126
- "description": "クリア。",
1127
- "values": ["both"]
1128
- },
1129
- {
1130
- "prop": "isolation",
1131
- "cssProperty": "isolation",
1132
- "type": "string",
1133
- "responsive": false,
1134
- "description": "スタッキングコンテキストの分離。",
1135
- "values": ["isolate"]
1136
- },
1137
- {
1138
- "prop": "css",
1139
- "cssProperty": "(style属性)",
1140
- "type": "object",
1141
- "responsive": false,
1142
- "description": "CSS変数やカスタムスタイルをオブジェクトで指定。style属性に直接マージされる。例: css={{'--my-var': 'value'}}。"
1143
- }
1144
- ]
1145
- }
1146
- ]
2
+ "description": "Lism CSS の Props システム。React/Astro コンポーネントの props を CSS クラス (Prop Class) やインラインスタイルに変換する仕組み。レスポンシブ対応は配列記法 p={[20, 30, 40]} で sm, md ブレークポイントの値を指定可能。各 prop の values に列挙された値は Prop Class としてCSSクラスが生成され、HTML の class 属性で直接使用できる。",
3
+ "classNaming": {
4
+ "propClass": "-{prop}:{value}",
5
+ "propClassWithVariable": "-{prop} + style=\"--{prop}: {任意値}\"",
6
+ "responsive": "-{prop}_{bp} + style=\"--{prop}_{bp}: {値}\"",
7
+ "note": "例: gapに spacing token 5 を指定: g=\"5\" → class=\"-g:5\"、paddingに20を指定: p=\"20\" → class=\"-p:20\"、font-sizeにトークン値 l を指定: fz=\"l\" → class=\"-fz:l\"。",
8
+ "examples": ["-g:5", "-g:20", "-p:20", "-p:40", "-fz:l", "-fz:2xl", "-d:flex", "-d:grid", "-ta:center", "-ai:center"]
9
+ },
10
+ "categories": [
11
+ {
12
+ "category": "typography",
13
+ "description": "テキスト関連のプロパティ",
14
+ "props": [
15
+ {
16
+ "prop": "f",
17
+ "cssProperty": "font",
18
+ "type": "string",
19
+ "responsive": false,
20
+ "description": "フォント一括指定。",
21
+ "values": ["inherit"]
22
+ },
23
+ {
24
+ "prop": "fz",
25
+ "cssProperty": "font-size",
26
+ "type": "string | number | array",
27
+ "responsive": true,
28
+ "description": "フォントサイズ。トークン値またはカスタム値。",
29
+ "values": ["root", "base", "5xl", "4xl", "3xl", "2xl", "xl", "l", "m", "s", "xs", "2xs"]
30
+ },
31
+ {
32
+ "prop": "fw",
33
+ "cssProperty": "font-weight",
34
+ "type": "string",
35
+ "responsive": false,
36
+ "description": "フォントウェイト。",
37
+ "values": ["thin", "light", "normal", "medium", "bold", "black"]
38
+ },
39
+ {
40
+ "prop": "ff",
41
+ "cssProperty": "font-family",
42
+ "type": "string",
43
+ "responsive": false,
44
+ "description": "フォントファミリー。",
45
+ "values": ["base", "accent", "mono"]
46
+ },
47
+ {
48
+ "prop": "fs",
49
+ "cssProperty": "font-style",
50
+ "type": "string",
51
+ "responsive": false,
52
+ "description": "フォントスタイル。",
53
+ "values": ["italic"]
54
+ },
55
+ {
56
+ "prop": "lh",
57
+ "cssProperty": "line-height",
58
+ "type": "string | number",
59
+ "responsive": false,
60
+ "description": "行間。トークン値またはカスタム値。トークンは hl 系トークンを参照。",
61
+ "values": ["base", "xs", "s", "l", "1"]
62
+ },
63
+ {
64
+ "prop": "hl",
65
+ "cssProperty": "--hl (CSS変数)",
66
+ "type": "string | array",
67
+ "responsive": true,
68
+ "description": "見出し用の行間を制御するCSS変数。",
69
+ "values": ["base", "xs", "s", "l"]
70
+ },
71
+ {
72
+ "prop": "lts",
73
+ "cssProperty": "letter-spacing",
74
+ "type": "string",
75
+ "responsive": false,
76
+ "description": "文字間隔。",
77
+ "values": ["base", "s", "l"]
78
+ },
79
+ {
80
+ "prop": "ta",
81
+ "cssProperty": "text-align",
82
+ "type": "string",
83
+ "responsive": false,
84
+ "description": "テキスト整列。",
85
+ "values": ["center", "left", "right"]
86
+ },
87
+ {
88
+ "prop": "td",
89
+ "cssProperty": "text-decoration",
90
+ "type": "string",
91
+ "responsive": false,
92
+ "description": "テキスト装飾。",
93
+ "values": ["none"]
94
+ },
95
+ {
96
+ "prop": "tt",
97
+ "cssProperty": "text-transform",
98
+ "type": "string",
99
+ "responsive": false,
100
+ "description": "テキスト変換。",
101
+ "values": ["upper", "lower"]
102
+ }
103
+ ]
104
+ },
105
+ {
106
+ "category": "display",
107
+ "description": "表示・可視性関連のプロパティ",
108
+ "props": [
109
+ {
110
+ "prop": "d",
111
+ "cssProperty": "display",
112
+ "type": "string | array",
113
+ "responsive": true,
114
+ "description": "表示モード。",
115
+ "values": ["none", "block", "in-flex"]
116
+ },
117
+ {
118
+ "prop": "o",
119
+ "cssProperty": "opacity",
120
+ "type": "string | number",
121
+ "responsive": false,
122
+ "description": "透明度。",
123
+ "values": ["0", "-10", "-20", "-30"]
124
+ },
125
+ { "prop": "v", "cssProperty": "visibility", "type": "string", "responsive": false, "description": "可視性。", "values": ["hidden"] },
126
+ {
127
+ "prop": "ov",
128
+ "cssProperty": "overflow",
129
+ "type": "string",
130
+ "responsive": false,
131
+ "description": "オーバーフロー。",
132
+ "values": ["hidden", "auto", "clip"]
133
+ },
134
+ {
135
+ "prop": "ov-x",
136
+ "cssProperty": "overflow-x",
137
+ "type": "string",
138
+ "responsive": false,
139
+ "description": "横方向のオーバーフロー。",
140
+ "values": ["clip", "auto", "scroll"]
141
+ },
142
+ {
143
+ "prop": "ov-y",
144
+ "cssProperty": "overflow-y",
145
+ "type": "string",
146
+ "responsive": false,
147
+ "description": "縦方向のオーバーフロー。",
148
+ "values": ["clip", "auto", "scroll"]
149
+ },
150
+ {
151
+ "prop": "ar",
152
+ "cssProperty": "aspect-ratio",
153
+ "type": "string | array",
154
+ "responsive": true,
155
+ "description": "アスペクト比。",
156
+ "values": ["21/9", "16/9", "3/2", "1/1", "og"]
157
+ }
158
+ ]
159
+ },
160
+ {
161
+ "category": "size",
162
+ "description": "幅・高さ関連のプロパティ",
163
+ "props": [
164
+ {
165
+ "prop": "w",
166
+ "cssProperty": "width",
167
+ "type": "string | array",
168
+ "responsive": true,
169
+ "description": "幅。",
170
+ "values": ["100%", "fit"]
171
+ },
172
+ {
173
+ "prop": "h",
174
+ "cssProperty": "height",
175
+ "type": "string | array",
176
+ "responsive": true,
177
+ "description": "高さ。",
178
+ "values": ["100%", "fit"]
179
+ },
180
+ {
181
+ "prop": "min-w",
182
+ "cssProperty": "min-width",
183
+ "type": "string | array",
184
+ "responsive": true,
185
+ "description": "最小幅。",
186
+ "values": ["100%"]
187
+ },
188
+ {
189
+ "prop": "max-w",
190
+ "cssProperty": "max-width",
191
+ "type": "string | array",
192
+ "responsive": true,
193
+ "description": "最大幅。",
194
+ "values": ["100%"]
195
+ },
196
+ {
197
+ "prop": "min-h",
198
+ "cssProperty": "min-height",
199
+ "type": "string | array",
200
+ "responsive": true,
201
+ "description": "最小高さ。",
202
+ "values": ["100%"]
203
+ },
204
+ {
205
+ "prop": "max-h",
206
+ "cssProperty": "max-height",
207
+ "type": "string | array",
208
+ "responsive": true,
209
+ "description": "最大高さ。",
210
+ "values": ["100%"]
211
+ },
212
+ {
213
+ "prop": "sz",
214
+ "cssProperty": "inline-size",
215
+ "type": "string",
216
+ "responsive": false,
217
+ "description": "インラインサイズ。トークン値(sz)でカスタム値を指定可能。"
218
+ },
219
+ {
220
+ "prop": "min-sz",
221
+ "cssProperty": "min-inline-size",
222
+ "type": "string",
223
+ "responsive": false,
224
+ "description": "最小インラインサイズ。トークン値(sz)でカスタム値を指定可能。"
225
+ },
226
+ {
227
+ "prop": "max-sz",
228
+ "cssProperty": "max-inline-size",
229
+ "type": "string",
230
+ "responsive": false,
231
+ "description": "最大インラインサイズ。トークン値またはプリセット値。",
232
+ "values": ["xs", "s", "m", "l", "xl", "min", "full", "container"]
233
+ },
234
+ {
235
+ "prop": "ysz",
236
+ "cssProperty": "block-size",
237
+ "type": "string",
238
+ "responsive": false,
239
+ "description": "ブロックサイズ。トークン値(sz)でカスタム値を指定可能。"
240
+ },
241
+ {
242
+ "prop": "min-ysz",
243
+ "cssProperty": "min-block-size",
244
+ "type": "string",
245
+ "responsive": false,
246
+ "description": "最小ブロックサイズ。トークン値(sz)でカスタム値を指定可能。"
247
+ },
248
+ {
249
+ "prop": "max-ysz",
250
+ "cssProperty": "max-block-size",
251
+ "type": "string",
252
+ "responsive": false,
253
+ "description": "最大ブロックサイズ。トークン値(sz)でカスタム値を指定可能。"
254
+ }
255
+ ]
256
+ },
257
+ {
258
+ "category": "spacing",
259
+ "description": "余白関連のプロパティ。スペーシングトークン (5, 10, 15, 20, 30, 40, 50, 60, 70, 80) を値として使用可能。",
260
+ "props": [
261
+ {
262
+ "prop": "p",
263
+ "cssProperty": "padding",
264
+ "type": "string | number | array",
265
+ "responsive": true,
266
+ "description": "全方向パディング。",
267
+ "values": ["0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
268
+ },
269
+ {
270
+ "prop": "px",
271
+ "cssProperty": "padding-inline",
272
+ "type": "string | number | array",
273
+ "responsive": true,
274
+ "description": "左右 (inline) パディング。",
275
+ "values": ["0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
276
+ },
277
+ {
278
+ "prop": "py",
279
+ "cssProperty": "padding-block",
280
+ "type": "string | number | array",
281
+ "responsive": true,
282
+ "description": "上下 (block) パディング。",
283
+ "values": ["0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
284
+ },
285
+ {
286
+ "prop": "px-s",
287
+ "cssProperty": "padding-inline-start",
288
+ "type": "string | number | array",
289
+ "responsive": true,
290
+ "description": " (inline-start) パディング。"
291
+ },
292
+ {
293
+ "prop": "px-e",
294
+ "cssProperty": "padding-inline-end",
295
+ "type": "string | number | array",
296
+ "responsive": true,
297
+ "description": " (inline-end) パディング。"
298
+ },
299
+ {
300
+ "prop": "py-s",
301
+ "cssProperty": "padding-block-start",
302
+ "type": "string | number | array",
303
+ "responsive": true,
304
+ "description": " (block-start) パディング。"
305
+ },
306
+ {
307
+ "prop": "py-e",
308
+ "cssProperty": "padding-block-end",
309
+ "type": "string | number | array",
310
+ "responsive": true,
311
+ "description": "下 (block-end) パディング。"
312
+ },
313
+ {
314
+ "prop": "pl",
315
+ "cssProperty": "padding-left",
316
+ "type": "string | number | array",
317
+ "responsive": true,
318
+ "description": "左パディング。"
319
+ },
320
+ {
321
+ "prop": "pr",
322
+ "cssProperty": "padding-right",
323
+ "type": "string | number | array",
324
+ "responsive": true,
325
+ "description": "右パディング。"
326
+ },
327
+ {
328
+ "prop": "pt",
329
+ "cssProperty": "padding-top",
330
+ "type": "string | number | array",
331
+ "responsive": true,
332
+ "description": "上パディング。"
333
+ },
334
+ {
335
+ "prop": "pb",
336
+ "cssProperty": "padding-bottom",
337
+ "type": "string | number | array",
338
+ "responsive": true,
339
+ "description": "下パディング。"
340
+ },
341
+ {
342
+ "prop": "m",
343
+ "cssProperty": "margin",
344
+ "type": "string | number | array",
345
+ "responsive": true,
346
+ "description": "全方向マージン。",
347
+ "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
348
+ },
349
+ {
350
+ "prop": "mx",
351
+ "cssProperty": "margin-inline",
352
+ "type": "string | number | array",
353
+ "responsive": true,
354
+ "description": "左右 (inline) マージン。",
355
+ "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
356
+ },
357
+ {
358
+ "prop": "my",
359
+ "cssProperty": "margin-block",
360
+ "type": "string | number | array",
361
+ "responsive": true,
362
+ "description": "上下 (block) マージン。",
363
+ "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
364
+ },
365
+ {
366
+ "prop": "mx-s",
367
+ "cssProperty": "margin-inline-start",
368
+ "type": "string | number | array",
369
+ "responsive": true,
370
+ "description": "左 (inline-start) マージン。",
371
+ "values": ["auto"]
372
+ },
373
+ {
374
+ "prop": "mx-e",
375
+ "cssProperty": "margin-inline-end",
376
+ "type": "string | number | array",
377
+ "responsive": true,
378
+ "description": "右 (inline-end) マージン。",
379
+ "values": ["auto"]
380
+ },
381
+ {
382
+ "prop": "my-s",
383
+ "cssProperty": "margin-block-start",
384
+ "type": "string | number | array",
385
+ "responsive": true,
386
+ "description": "上 (block-start) マージン。",
387
+ "values": ["auto", "0", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
388
+ },
389
+ {
390
+ "prop": "my-e",
391
+ "cssProperty": "margin-block-end",
392
+ "type": "string | number | array",
393
+ "responsive": true,
394
+ "description": "下 (block-end) マージン。",
395
+ "values": ["auto"]
396
+ },
397
+ { "prop": "ml", "cssProperty": "margin-left", "type": "string | number | array", "responsive": true, "description": "左マージン。" },
398
+ { "prop": "mr", "cssProperty": "margin-right", "type": "string | number | array", "responsive": true, "description": "右マージン。" },
399
+ { "prop": "mt", "cssProperty": "margin-top", "type": "string | number | array", "responsive": true, "description": "上マージン。" },
400
+ {
401
+ "prop": "mb",
402
+ "cssProperty": "margin-bottom",
403
+ "type": "string | number | array",
404
+ "responsive": true,
405
+ "description": "下マージン。"
406
+ },
407
+ {
408
+ "prop": "g",
409
+ "cssProperty": "gap",
410
+ "type": "string | number | array",
411
+ "responsive": true,
412
+ "description": "ギャップ (Flex/Grid の子要素間の余白)。",
413
+ "values": ["0", "inherit", "5", "10", "15", "20", "30", "40", "50", "60", "70", "80"]
414
+ },
415
+ {
416
+ "prop": "g-x",
417
+ "cssProperty": "column-gap",
418
+ "type": "string | number | array",
419
+ "responsive": true,
420
+ "description": "カラム方向のギャップ。"
421
+ },
422
+ {
423
+ "prop": "g-y",
424
+ "cssProperty": "row-gap",
425
+ "type": "string | number | array",
426
+ "responsive": true,
427
+ "description": "行方向のギャップ。"
428
+ }
429
+ ]
430
+ },
431
+ {
432
+ "category": "color",
433
+ "description": "カラー関連のプロパティ",
434
+ "props": [
435
+ {
436
+ "prop": "c",
437
+ "cssProperty": "color",
438
+ "type": "string",
439
+ "responsive": false,
440
+ "description": "テキストカラー。",
441
+ "values": ["base", "text", "text-2", "brand", "accent", "inherit"]
442
+ },
443
+ {
444
+ "prop": "bgc",
445
+ "cssProperty": "background-color",
446
+ "type": "string",
447
+ "responsive": false,
448
+ "description": "背景色。",
449
+ "values": ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"]
450
+ },
451
+ {
452
+ "prop": "bg",
453
+ "cssProperty": "background",
454
+ "type": "string | array",
455
+ "responsive": true,
456
+ "description": "背景の一括指定。"
457
+ },
458
+ {
459
+ "prop": "bgi",
460
+ "cssProperty": "background-image",
461
+ "type": "string",
462
+ "responsive": false,
463
+ "description": "背景画像。"
464
+ },
465
+ {
466
+ "prop": "bgr",
467
+ "cssProperty": "background-repeat",
468
+ "type": "string",
469
+ "responsive": false,
470
+ "description": "背景のリピート設定。",
471
+ "values": ["no-repeat"]
472
+ },
473
+ {
474
+ "prop": "bgp",
475
+ "cssProperty": "background-position",
476
+ "type": "string",
477
+ "responsive": false,
478
+ "description": "背景の位置。",
479
+ "values": ["center"]
480
+ },
481
+ {
482
+ "prop": "bgsz",
483
+ "cssProperty": "background-size",
484
+ "type": "string",
485
+ "responsive": false,
486
+ "description": "背景のサイズ。",
487
+ "values": ["cover", "contain"]
488
+ },
489
+ {
490
+ "prop": "keycolor",
491
+ "cssProperty": "--keycolor (CSS変数)",
492
+ "type": "string",
493
+ "responsive": false,
494
+ "description": "コンポーネントのキーカラーを設定するCSS変数。"
495
+ }
496
+ ]
497
+ },
498
+ {
499
+ "category": "border",
500
+ "description": "ボーダー関連のプロパティ",
501
+ "props": [
502
+ {
503
+ "prop": "bd",
504
+ "cssProperty": "border",
505
+ "type": "string | boolean",
506
+ "responsive": false,
507
+ "description": "ボーダー。true でデフォルトのボーダーが付く。",
508
+ "values": ["none"]
509
+ },
510
+ {
511
+ "prop": "bds",
512
+ "cssProperty": "--bds (CSS変数)",
513
+ "type": "string",
514
+ "responsive": false,
515
+ "description": "ボーダースタイル。",
516
+ "values": ["dashed", "dotted", "double"]
517
+ },
518
+ {
519
+ "prop": "bdc",
520
+ "cssProperty": "--bdc (CSS変数)",
521
+ "type": "string",
522
+ "responsive": false,
523
+ "description": "ボーダーカラー。",
524
+ "values": ["brand", "accent", "divider", "inherit", "transparent", "cc"]
525
+ },
526
+ {
527
+ "prop": "bdw",
528
+ "cssProperty": "--bdw (CSS変数)",
529
+ "type": "string | number | array",
530
+ "responsive": true,
531
+ "description": "ボーダー幅。"
532
+ },
533
+ {
534
+ "prop": "bd-x",
535
+ "cssProperty": "border-inline",
536
+ "type": "string | boolean",
537
+ "responsive": false,
538
+ "description": "インライン方向(左右)のボーダー。"
539
+ },
540
+ {
541
+ "prop": "bd-y",
542
+ "cssProperty": "border-block",
543
+ "type": "string | boolean",
544
+ "responsive": false,
545
+ "description": "ブロック方向(上下)のボーダー。"
546
+ },
547
+ {
548
+ "prop": "bd-x-s",
549
+ "cssProperty": "border-inline-start",
550
+ "type": "string | boolean",
551
+ "responsive": false,
552
+ "description": "インライン開始方向のボーダー。"
553
+ },
554
+ {
555
+ "prop": "bd-x-e",
556
+ "cssProperty": "border-inline-end",
557
+ "type": "string | boolean",
558
+ "responsive": false,
559
+ "description": "インライン終了方向のボーダー。"
560
+ },
561
+ {
562
+ "prop": "bd-y-s",
563
+ "cssProperty": "border-block-start",
564
+ "type": "string | boolean",
565
+ "responsive": false,
566
+ "description": "ブロック開始方向のボーダー。"
567
+ },
568
+ {
569
+ "prop": "bd-y-e",
570
+ "cssProperty": "border-block-end",
571
+ "type": "string | boolean",
572
+ "responsive": false,
573
+ "description": "ブロック終了方向のボーダー。"
574
+ },
575
+ { "prop": "bd-t", "cssProperty": "border-top", "type": "string | boolean", "responsive": false, "description": "上ボーダー。" },
576
+ { "prop": "bd-b", "cssProperty": "border-bottom", "type": "string | boolean", "responsive": false, "description": "下ボーダー。" },
577
+ { "prop": "bd-l", "cssProperty": "border-left", "type": "string | boolean", "responsive": false, "description": "左ボーダー。" },
578
+ { "prop": "bd-r", "cssProperty": "border-right", "type": "string | boolean", "responsive": false, "description": "右ボーダー。" },
579
+ {
580
+ "prop": "bdrs",
581
+ "cssProperty": "border-radius",
582
+ "type": "string | number | array",
583
+ "responsive": true,
584
+ "description": "角丸。",
585
+ "values": ["0", "5", "10", "20", "30", "40", "50", "99", "inner"]
586
+ },
587
+ { "prop": "bdrs-tl", "cssProperty": "border-top-left-radius", "type": "string", "responsive": false, "description": "左上の角丸。" },
588
+ { "prop": "bdrs-tr", "cssProperty": "border-top-right-radius", "type": "string", "responsive": false, "description": "右上の角丸。" },
589
+ {
590
+ "prop": "bdrs-br",
591
+ "cssProperty": "border-bottom-right-radius",
592
+ "type": "string",
593
+ "responsive": false,
594
+ "description": "右下の角丸。"
595
+ },
596
+ {
597
+ "prop": "bdrs-bl",
598
+ "cssProperty": "border-bottom-left-radius",
599
+ "type": "string",
600
+ "responsive": false,
601
+ "description": "左下の角丸。"
602
+ },
603
+ {
604
+ "prop": "bdrs-ss",
605
+ "cssProperty": "border-start-start-radius",
606
+ "type": "string",
607
+ "responsive": false,
608
+ "description": "インライン開始・ブロック開始方向の角丸。"
609
+ },
610
+ {
611
+ "prop": "bdrs-se",
612
+ "cssProperty": "border-start-end-radius",
613
+ "type": "string",
614
+ "responsive": false,
615
+ "description": "インライン終了・ブロック開始方向の角丸。"
616
+ },
617
+ {
618
+ "prop": "bdrs-es",
619
+ "cssProperty": "border-end-start-radius",
620
+ "type": "string",
621
+ "responsive": false,
622
+ "description": "インライン開始・ブロック終了方向の角丸。"
623
+ },
624
+ {
625
+ "prop": "bdrs-ee",
626
+ "cssProperty": "border-end-end-radius",
627
+ "type": "string",
628
+ "responsive": false,
629
+ "description": "インライン終了・ブロック終了方向の角丸。"
630
+ },
631
+ {
632
+ "prop": "bxsh",
633
+ "cssProperty": "box-shadow",
634
+ "type": "string | number | array",
635
+ "responsive": true,
636
+ "description": "ボックスシャドウ。",
637
+ "values": ["0", "5", "10", "20", "30", "40", "50"]
638
+ }
639
+ ]
640
+ },
641
+ {
642
+ "category": "position",
643
+ "description": "ポジション関連のプロパティ",
644
+ "props": [
645
+ {
646
+ "prop": "pos",
647
+ "cssProperty": "position",
648
+ "type": "string",
649
+ "responsive": false,
650
+ "description": "位置指定方法。",
651
+ "values": ["static", "fixed", "sticky", "rel", "abs"]
652
+ },
653
+ {
654
+ "prop": "z",
655
+ "cssProperty": "z-index",
656
+ "type": "string | number",
657
+ "responsive": false,
658
+ "description": "重ね順。",
659
+ "values": ["-1", "0", "1", "99"]
660
+ },
661
+ {
662
+ "prop": "t",
663
+ "cssProperty": "top",
664
+ "type": "string",
665
+ "responsive": false,
666
+ "description": "上端の位置。",
667
+ "values": ["0", "50%", "100%"]
668
+ },
669
+ {
670
+ "prop": "l",
671
+ "cssProperty": "left",
672
+ "type": "string",
673
+ "responsive": false,
674
+ "description": "左端の位置。",
675
+ "values": ["0", "50%", "100%"]
676
+ },
677
+ {
678
+ "prop": "r",
679
+ "cssProperty": "right",
680
+ "type": "string",
681
+ "responsive": false,
682
+ "description": "右端の位置。",
683
+ "values": ["0", "50%", "100%"]
684
+ },
685
+ {
686
+ "prop": "b",
687
+ "cssProperty": "bottom",
688
+ "type": "string",
689
+ "responsive": false,
690
+ "description": "下端の位置。",
691
+ "values": ["0", "50%", "100%"]
692
+ },
693
+ { "prop": "i", "cssProperty": "inset", "type": "string", "responsive": false, "description": "全方向の位置。", "values": ["0"] },
694
+ { "prop": "i-x", "cssProperty": "inset-inline", "type": "string", "responsive": false, "description": "インライン方向の位置。" },
695
+ { "prop": "i-y", "cssProperty": "inset-block", "type": "string", "responsive": false, "description": "ブロック方向の位置。" },
696
+ {
697
+ "prop": "i-x-s",
698
+ "cssProperty": "inset-inline-start",
699
+ "type": "string",
700
+ "responsive": false,
701
+ "description": "インライン開始方向の位置。"
702
+ },
703
+ {
704
+ "prop": "i-x-e",
705
+ "cssProperty": "inset-inline-end",
706
+ "type": "string",
707
+ "responsive": false,
708
+ "description": "インライン終了方向の位置。"
709
+ },
710
+ {
711
+ "prop": "i-y-s",
712
+ "cssProperty": "inset-block-start",
713
+ "type": "string",
714
+ "responsive": false,
715
+ "description": "ブロック開始方向の位置。"
716
+ },
717
+ {
718
+ "prop": "i-y-e",
719
+ "cssProperty": "inset-block-end",
720
+ "type": "string",
721
+ "responsive": false,
722
+ "description": "ブロック終了方向の位置。"
723
+ }
724
+ ]
725
+ },
726
+ {
727
+ "category": "flex",
728
+ "description": "Flexbox 関連のプロパティ",
729
+ "props": [
730
+ {
731
+ "prop": "fxf",
732
+ "cssProperty": "flex-flow",
733
+ "type": "string",
734
+ "responsive": false,
735
+ "description": "フレックスフロー (flex-direction と flex-wrap の一括指定)。"
736
+ },
737
+ {
738
+ "prop": "fxw",
739
+ "cssProperty": "flex-wrap",
740
+ "type": "string | array",
741
+ "responsive": true,
742
+ "description": "フレックス折り返し。",
743
+ "values": ["wrap"]
744
+ },
745
+ {
746
+ "prop": "fxd",
747
+ "cssProperty": "flex-direction",
748
+ "type": "string | array",
749
+ "responsive": true,
750
+ "description": "フレックス方向。",
751
+ "values": ["col", "col-r", "row-r"]
752
+ },
753
+ {
754
+ "prop": "fx",
755
+ "cssProperty": "flex",
756
+ "type": "string | array",
757
+ "responsive": true,
758
+ "description": "フレックス値。",
759
+ "values": ["1"]
760
+ },
761
+ {
762
+ "prop": "fxg",
763
+ "cssProperty": "flex-grow",
764
+ "type": "string | number",
765
+ "responsive": false,
766
+ "description": "フレックス拡大。",
767
+ "values": ["1"]
768
+ },
769
+ {
770
+ "prop": "fxsh",
771
+ "cssProperty": "flex-shrink",
772
+ "type": "string | number",
773
+ "responsive": false,
774
+ "description": "フレックス縮小。",
775
+ "values": ["0"]
776
+ },
777
+ { "prop": "fxb", "cssProperty": "flex-basis", "type": "string | array", "responsive": true, "description": "フレックス基準サイズ。" }
778
+ ]
779
+ },
780
+ {
781
+ "category": "grid",
782
+ "description": "Grid レイアウト関連のプロパティ",
783
+ "props": [
784
+ {
785
+ "prop": "gt",
786
+ "cssProperty": "grid-template",
787
+ "type": "string | array",
788
+ "responsive": true,
789
+ "description": "グリッドテンプレート。",
790
+ "values": ["repeat"]
791
+ },
792
+ {
793
+ "prop": "gta",
794
+ "cssProperty": "grid-template-areas",
795
+ "type": "string | array",
796
+ "responsive": true,
797
+ "description": "グリッドテンプレートエリア。"
798
+ },
799
+ {
800
+ "prop": "gtc",
801
+ "cssProperty": "grid-template-columns",
802
+ "type": "string | array",
803
+ "responsive": true,
804
+ "description": "グリッド列テンプレート。",
805
+ "values": ["subgrid"]
806
+ },
807
+ {
808
+ "prop": "gtr",
809
+ "cssProperty": "grid-template-rows",
810
+ "type": "string | array",
811
+ "responsive": true,
812
+ "description": "グリッド行テンプレート。",
813
+ "values": ["subgrid"]
814
+ },
815
+ {
816
+ "prop": "gaf",
817
+ "cssProperty": "grid-auto-flow",
818
+ "type": "string | array",
819
+ "responsive": true,
820
+ "description": "グリッド自動配置方向。",
821
+ "values": ["row", "col"]
822
+ },
823
+ {
824
+ "prop": "gac",
825
+ "cssProperty": "grid-auto-columns",
826
+ "type": "string",
827
+ "responsive": false,
828
+ "description": "グリッド自動列サイズ。"
829
+ },
830
+ {
831
+ "prop": "gar",
832
+ "cssProperty": "grid-auto-rows",
833
+ "type": "string",
834
+ "responsive": false,
835
+ "description": "グリッド自動行サイズ。"
836
+ },
837
+ {
838
+ "prop": "ga",
839
+ "cssProperty": "grid-area",
840
+ "type": "string | array",
841
+ "responsive": true,
842
+ "description": "グリッドエリア。",
843
+ "values": ["1/1"]
844
+ },
845
+ {
846
+ "prop": "gc",
847
+ "cssProperty": "grid-column",
848
+ "type": "string | array",
849
+ "responsive": true,
850
+ "description": "グリッドカラム位置。",
851
+ "values": ["1/-1"]
852
+ },
853
+ {
854
+ "prop": "gr",
855
+ "cssProperty": "grid-row",
856
+ "type": "string | array",
857
+ "responsive": true,
858
+ "description": "グリッド行位置。",
859
+ "values": ["1/-1"]
860
+ },
861
+ {
862
+ "prop": "gcs",
863
+ "cssProperty": "grid-column-start",
864
+ "type": "string",
865
+ "responsive": false,
866
+ "description": "グリッドカラム開始位置。"
867
+ },
868
+ { "prop": "gce", "cssProperty": "grid-column-end", "type": "string", "responsive": false, "description": "グリッドカラム終了位置。" },
869
+ { "prop": "grs", "cssProperty": "grid-row-start", "type": "string", "responsive": false, "description": "グリッド行開始位置。" },
870
+ { "prop": "gre", "cssProperty": "grid-row-end", "type": "string", "responsive": false, "description": "グリッド行終了位置。" },
871
+ {
872
+ "prop": "cols",
873
+ "cssProperty": "--cols (CSS変数)",
874
+ "type": "string | number | array",
875
+ "responsive": true,
876
+ "description": "列数を指定するCSS変数。"
877
+ },
878
+ {
879
+ "prop": "rows",
880
+ "cssProperty": "--rows (CSS変数)",
881
+ "type": "string | number | array",
882
+ "responsive": true,
883
+ "description": "行数を指定するCSS変数。"
884
+ }
885
+ ]
886
+ },
887
+ {
888
+ "category": "alignment",
889
+ "description": "配置関連のプロパティ",
890
+ "props": [
891
+ {
892
+ "prop": "ai",
893
+ "cssProperty": "align-items",
894
+ "type": "string | array",
895
+ "responsive": true,
896
+ "description": "交差軸のアイテム配置。",
897
+ "values": ["start", "center", "end", "stretch", "flex-s", "flex-e"]
898
+ },
899
+ {
900
+ "prop": "ac",
901
+ "cssProperty": "align-content",
902
+ "type": "string | array",
903
+ "responsive": true,
904
+ "description": "交差軸のコンテンツ配置。",
905
+ "values": ["start", "center", "end", "between", "flex-s", "flex-e"]
906
+ },
907
+ {
908
+ "prop": "ji",
909
+ "cssProperty": "justify-items",
910
+ "type": "string | array",
911
+ "responsive": true,
912
+ "description": "主軸のアイテム配置。",
913
+ "values": ["start", "center", "end", "stretch", "flex-s", "flex-e"]
914
+ },
915
+ {
916
+ "prop": "jc",
917
+ "cssProperty": "justify-content",
918
+ "type": "string | array",
919
+ "responsive": true,
920
+ "description": "主軸のコンテンツ配置。",
921
+ "values": ["start", "center", "end", "between", "flex-s", "flex-e"]
922
+ },
923
+ {
924
+ "prop": "pi",
925
+ "cssProperty": "place-items",
926
+ "type": "string",
927
+ "responsive": false,
928
+ "description": "両軸のアイテム配置。",
929
+ "values": ["start", "center", "end"]
930
+ },
931
+ {
932
+ "prop": "pc",
933
+ "cssProperty": "place-content",
934
+ "type": "string",
935
+ "responsive": false,
936
+ "description": "両軸のコンテンツ配置。",
937
+ "values": ["start", "center", "end"]
938
+ },
939
+ {
940
+ "prop": "aslf",
941
+ "cssProperty": "align-self",
942
+ "type": "string",
943
+ "responsive": false,
944
+ "description": "個別の交差軸配置。",
945
+ "values": ["start", "center", "end", "stretch"]
946
+ },
947
+ {
948
+ "prop": "jslf",
949
+ "cssProperty": "justify-self",
950
+ "type": "string",
951
+ "responsive": false,
952
+ "description": "個別の主軸配置。",
953
+ "values": ["start", "center", "end", "stretch"]
954
+ },
955
+ {
956
+ "prop": "pslf",
957
+ "cssProperty": "place-self",
958
+ "type": "string",
959
+ "responsive": false,
960
+ "description": "個別の両軸配置。",
961
+ "values": ["start", "center", "end"]
962
+ },
963
+ {
964
+ "prop": "order",
965
+ "cssProperty": "order",
966
+ "type": "string | number",
967
+ "responsive": false,
968
+ "description": "表示順序。",
969
+ "values": ["0", "-1", "1"]
970
+ }
971
+ ]
972
+ },
973
+ {
974
+ "category": "state",
975
+ "description": "状態・機能クラスを付与するための props(コンポーネント専用)",
976
+ "props": [
977
+ {
978
+ "prop": "isContainer",
979
+ "cssProperty": "(class: is--container)",
980
+ "type": "boolean",
981
+ "responsive": false,
982
+ "description": "コンテナクエリの基準要素にする。"
983
+ },
984
+ {
985
+ "prop": "isWrapper",
986
+ "cssProperty": "(class: is--wrapper)",
987
+ "type": "boolean | string",
988
+ "responsive": false,
989
+ "description": "コンテンツ幅を制御するラッパーにする。",
990
+ "values": ["s", "l"]
991
+ },
992
+ {
993
+ "prop": "isLayer",
994
+ "cssProperty": "(class: is--layer)",
995
+ "type": "boolean",
996
+ "responsive": false,
997
+ "description": "レイヤー(position:absolute で親要素に重なる)にする。"
998
+ },
999
+ {
1000
+ "prop": "isLinkBox",
1001
+ "cssProperty": "(class: is--linkBox)",
1002
+ "type": "boolean",
1003
+ "responsive": false,
1004
+ "description": "ボックス全体をリンク領域にする。"
1005
+ },
1006
+ {
1007
+ "prop": "isSide",
1008
+ "cssProperty": "(class: is--side)",
1009
+ "type": "boolean",
1010
+ "responsive": false,
1011
+ "description": "SideMain内でサイド要素として機能させる。"
1012
+ },
1013
+ {
1014
+ "prop": "isSkipFlow",
1015
+ "cssProperty": "(class: is--skipFlow)",
1016
+ "type": "boolean",
1017
+ "responsive": false,
1018
+ "description": "Flow内でフローマージンをスキップする。"
1019
+ },
1020
+ {
1021
+ "prop": "isVertical",
1022
+ "cssProperty": "(class: is--vertical)",
1023
+ "type": "boolean",
1024
+ "responsive": false,
1025
+ "description": "縦書きモードにする。"
1026
+ },
1027
+ {
1028
+ "prop": "setGutter",
1029
+ "cssProperty": "(class: set--gutter)",
1030
+ "type": "boolean",
1031
+ "responsive": false,
1032
+ "description": "左右にガター(余白)を付ける。"
1033
+ },
1034
+ {
1035
+ "prop": "setShadow",
1036
+ "cssProperty": "(class: set--shadow)",
1037
+ "type": "boolean",
1038
+ "responsive": false,
1039
+ "description": "シャドウ用のセットクラスを付与する。"
1040
+ },
1041
+ {
1042
+ "prop": "setHov",
1043
+ "cssProperty": "(class: set--hov)",
1044
+ "type": "boolean",
1045
+ "responsive": false,
1046
+ "description": "ホバー状態管理用のセットクラスを付与する。子要素へのホバー状態伝播に使用。"
1047
+ },
1048
+ {
1049
+ "prop": "setTransition",
1050
+ "cssProperty": "(class: set--transition)",
1051
+ "type": "boolean",
1052
+ "responsive": false,
1053
+ "description": "トランジション用のセットクラスを付与する。"
1054
+ },
1055
+ {
1056
+ "prop": "setMask",
1057
+ "cssProperty": "(class: set--mask)",
1058
+ "type": "string",
1059
+ "responsive": false,
1060
+ "description": "マスク画像を設定するセットクラスを付与する。SVGやURL文字列を値として指定。"
1061
+ },
1062
+ {
1063
+ "prop": "setPlain",
1064
+ "cssProperty": "(class: set--plain)",
1065
+ "type": "boolean",
1066
+ "responsive": false,
1067
+ "description": "プレーン表示用のセットクラスを付与する。"
1068
+ },
1069
+ {
1070
+ "prop": "setInnerRs",
1071
+ "cssProperty": "(class: set--innerRs)",
1072
+ "type": "boolean",
1073
+ "responsive": false,
1074
+ "description": "内側の角丸を設定するセットクラスを付与する。"
1075
+ },
1076
+ {
1077
+ "prop": "setBp",
1078
+ "cssProperty": "(class: set--bp)",
1079
+ "type": "boolean",
1080
+ "responsive": false,
1081
+ "description": "ブレイクポイント制御用のセットクラスを付与する。"
1082
+ },
1083
+ {
1084
+ "prop": "setCqUnit",
1085
+ "cssProperty": "(class: set--cqUnit)",
1086
+ "type": "boolean",
1087
+ "responsive": false,
1088
+ "description": "コンテナクエリ単位(cqi)を有効にするセットクラスを付与する。"
1089
+ },
1090
+ {
1091
+ "prop": "hov",
1092
+ "cssProperty": "(class: -hov:*)",
1093
+ "type": "boolean | string | object",
1094
+ "responsive": false,
1095
+ "description": "ホバーエフェクトを設定。文字列で '-hov:{値}' クラスを出力。オブジェクトで複数指定可能。プリセット: 'o'(opacity), 'bgc'(背景色), 'c'(テキスト色), 'bxsh'(影)等。",
1096
+ "values": ["o", "bgc", "c", "bdc", "bxsh", "neutral", "to:hide", "to:show", "to:zoom"]
1097
+ }
1098
+ ]
1099
+ },
1100
+ {
1101
+ "category": "others",
1102
+ "description": "その他のCSSプロパティ",
1103
+ "props": [
1104
+ {
1105
+ "prop": "ovwrap",
1106
+ "cssProperty": "overflow-wrap",
1107
+ "type": "string",
1108
+ "responsive": false,
1109
+ "description": "オーバーフローラップ。",
1110
+ "values": ["any"]
1111
+ },
1112
+ {
1113
+ "prop": "whspace",
1114
+ "cssProperty": "white-space",
1115
+ "type": "string",
1116
+ "responsive": false,
1117
+ "description": "ホワイトスペース。",
1118
+ "values": ["nowrap"]
1119
+ },
1120
+ {
1121
+ "prop": "float",
1122
+ "cssProperty": "float",
1123
+ "type": "string",
1124
+ "responsive": false,
1125
+ "description": "フロート。",
1126
+ "values": ["left", "right"]
1127
+ },
1128
+ {
1129
+ "prop": "clear",
1130
+ "cssProperty": "clear",
1131
+ "type": "string",
1132
+ "responsive": false,
1133
+ "description": "クリア。",
1134
+ "values": ["both"]
1135
+ },
1136
+ {
1137
+ "prop": "isolation",
1138
+ "cssProperty": "isolation",
1139
+ "type": "string",
1140
+ "responsive": false,
1141
+ "description": "スタッキングコンテキストの分離。",
1142
+ "values": ["isolate"]
1143
+ },
1144
+ {
1145
+ "prop": "css",
1146
+ "cssProperty": "(style属性)",
1147
+ "type": "object",
1148
+ "responsive": false,
1149
+ "description": "CSS変数やカスタムスタイルをオブジェクトで指定。style属性に直接マージされる。例: css={{'--my-var': 'value'}}。"
1150
+ }
1151
+ ]
1152
+ }
1153
+ ]
1147
1154
  }