sparkle-design-cli 2.4.1 → 2.5.0-beta.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.
@@ -66,18 +66,38 @@
66
66
 
67
67
  /* シャドウ */
68
68
  /* Primitive */
69
+ /* Figma の Box Shadow Primitives(⬢ Effects ページ)と 1:1 対応する。
70
+ 各段は「近距離で締める層」と「遠距離で広げる層」の 2 層構成で、
71
+ alpha は 2xs〜md が 5%(--color-black-alpha-50)、lg 以上は
72
+ 1 層目のみ 10%(--color-black-alpha-100)に上がる。
73
+ en: Mirrors Figma's Box Shadow primitives 1:1. Each step is a
74
+ two-layer shadow (a tight layer plus a diffuse one). Alpha is 5%
75
+ through `md`; from `lg` up the tight layer steps to 10%. */
69
76
  --shadow-none: 0px 0px 0px 0px var(--color-black);
70
- --shadow-2xs: 0px 1px 0px 0px var(--color-black-alpha-50);
71
- --shadow-xs: 0px 1px 2px 0px var(--color-black-alpha-50);
77
+ --shadow-2xs:
78
+ 0px 1.7px 2.4px 0px var(--color-black-alpha-50),
79
+ 0px 0.8px 5.5px 0px var(--color-black-alpha-50);
80
+ --shadow-xs:
81
+ 0px 3.4px 4.7px 0px var(--color-black-alpha-50),
82
+ 0px 1.7px 11px 0px var(--color-black-alpha-50);
72
83
  --shadow-sm:
73
- 0px 1px 3px 0px var(--color-black-alpha-100),
74
- 0px 1px 2px -1px var(--color-black-alpha-100);
84
+ 0px 6.7px 9.4px 0px var(--color-black-alpha-50),
85
+ 0px 2.5px 17px 0px var(--color-black-alpha-50);
75
86
  --shadow-md:
76
- 0px 4px 6px -1px var(--color-black-alpha-100),
77
- 0px 2px 4px -2px var(--color-black-alpha-100);
87
+ 0px 6.7px 9.4px 0px var(--color-black-alpha-50),
88
+ 0px 3.4px 22px 0px var(--color-black-alpha-50);
78
89
  --shadow-lg:
79
- 0px 10px 15px -3px var(--color-black-alpha-100),
80
- 0px 4px 6px -4px var(--color-black-alpha-100);
90
+ 0px 10px 14px 0px var(--color-black-alpha-100),
91
+ 0px 5px 33px 0px var(--color-black-alpha-50);
92
+ --shadow-xl:
93
+ 0px 13.5px 19px 0px var(--color-black-alpha-100),
94
+ 0px 6.7px 44px 0px var(--color-black-alpha-50);
95
+ --shadow-2xl:
96
+ 0px 17px 24px 0px var(--color-black-alpha-100),
97
+ 0px 8px 55px 0px var(--color-black-alpha-50);
98
+ --shadow-3xl:
99
+ 0px 22px 31px 0px var(--color-black-alpha-100),
100
+ 0px 11px 72px 0px var(--color-black-alpha-50);
81
101
  }
82
102
 
83
103
  /* ベーススタイル */
@@ -191,15 +211,567 @@
191
211
  --color-base-800: var(--color-gray-800);
192
212
  --color-base-900: var(--color-gray-900);
193
213
 
214
+ /* ------------------------------------------------------------------
215
+ 用途別セマンティックカラー(Figma `Colors: Semantics` と 1:1 対応)
216
+
217
+ Figma のパス(例: surface/primary/high/enabled)をそのまま
218
+ `--color-surface-primary-high-enabled` に写している。Figma の
219
+ アノテーションが指示する移行先をそのまま変数名として引ける。
220
+
221
+ 軸: 用途(surface = 背景 / border = 枠線 / object = アイコン等 /
222
+ text = 文字)× 意味(neutral / primary / negative / info / success /
223
+ warning / accent / inverse)× 強度(extra-high / high / middle / low)
224
+ × 状態(enabled / hover / active / disabled)。
225
+ **状態をトークン名に内包する**のが旧セマンティック層との最大の違い。
226
+
227
+ `primary` 系は sparkle.config.json の primary 設定に追従させるため
228
+ {{PRIMARY}} を経由する。`info` / `success` / `warning` はステータス色
229
+ なので primary 設定に関わらず固定色相を参照する(旧 --color-info-* と
230
+ 同じ扱い)。
231
+
232
+ en: 1:1 mirror of Figma's `Colors: Semantics`. The Figma path becomes
233
+ the variable name verbatim, so an annotation's migration target can be
234
+ used as-is. Unlike the legacy semantic layer, interaction state is part
235
+ of the token name. `primary` follows the configured primary color;
236
+ status hues (info/success/warning) stay fixed.
237
+ ------------------------------------------------------------------ */
238
+
239
+ /* surface — 背景 */
240
+ --color-surface-base-0: var(--color-white);
241
+ --color-surface-base-100: var(--color-gray-100);
242
+ --color-surface-base-200: var(--color-gray-200);
243
+
244
+ --color-surface-neutral-high-enabled: var(--color-gray-600);
245
+ --color-surface-neutral-high-hover: var(--color-gray-700);
246
+ --color-surface-neutral-high-active: var(--color-gray-800);
247
+ --color-surface-neutral-high-disabled: var(--color-gray-200);
248
+ --color-surface-neutral-middle-enabled: var(--color-gray-50);
249
+ --color-surface-neutral-middle-hover: var(--color-gray-100);
250
+ --color-surface-neutral-middle-active: var(--color-gray-200);
251
+ --color-surface-neutral-middle-disabled: var(--color-gray-50);
252
+ --color-surface-neutral-low-hover: var(--color-black-alpha-50);
253
+ --color-surface-neutral-low-active: var(--color-black-alpha-100);
254
+ --color-surface-neutral-low-disabled: var(--color-white-alpha-700);
255
+
256
+ --color-surface-primary-high-enabled: var(--color-{{PRIMARY}}-600);
257
+ --color-surface-primary-high-hover: var(--color-{{PRIMARY}}-700);
258
+ --color-surface-primary-high-active: var(--color-{{PRIMARY}}-800);
259
+ --color-surface-primary-high-disabled: var(--color-{{PRIMARY}}-200);
260
+ --color-surface-primary-middle-enabled: var(--color-{{PRIMARY}}-50);
261
+ --color-surface-primary-middle-hover: var(--color-{{PRIMARY}}-100);
262
+ --color-surface-primary-middle-active: var(--color-{{PRIMARY}}-200);
263
+ --color-surface-primary-middle-disabled: var(--color-{{PRIMARY}}-50);
264
+ /* NOTE: surface/{primary,negative}/low/{hover,active} の 4 つは Figma でも
265
+ エイリアスではなく実値(#1d83f714 / #1d83f72e / #e4534e14 / #e4534e2e)。
266
+ これは「不透明なプリミティブのどれか」ではなく **primary(negative) を
267
+ 敷いた透明色**であり、単色トークンのエイリアスでは表現できないため。
268
+ ベース色は blue/500(#1d83f7) / red/500(#e4534e) と完全一致しており、
269
+ アルファは 0x14 = 7.84% / 0x2e = 18.04%。意図どおりのティントとして
270
+ color-mix で表現し、primary 設定に追従させる。
271
+ en: The only literal (non-alias) values in Figma — tints of
272
+ primary/negative that an alias cannot express. Their base colors match
273
+ blue/500 and red/500 exactly; alpha is 0x14 (7.84%) and 0x2e (18.04%).
274
+ Modeled as color-mix so they follow the configured primary. */
275
+ --color-surface-primary-low-hover: color-mix(in srgb, var(--color-{{PRIMARY}}-500) 8%, transparent);
276
+ --color-surface-primary-low-active: color-mix(in srgb, var(--color-{{PRIMARY}}-500) 18%, transparent);
277
+ --color-surface-primary-low-disabled: var(--color-white-alpha-700);
278
+
279
+ --color-surface-negative-high-enabled: var(--color-red-600);
280
+ --color-surface-negative-high-hover: var(--color-red-700);
281
+ --color-surface-negative-high-active: var(--color-red-800);
282
+ --color-surface-negative-high-disabled: var(--color-red-200);
283
+ --color-surface-negative-middle-enabled: var(--color-red-50);
284
+ --color-surface-negative-middle-hover: var(--color-red-100);
285
+ --color-surface-negative-middle-active: var(--color-red-200);
286
+ --color-surface-negative-middle-disabled: var(--color-red-50);
287
+ --color-surface-negative-low-hover: color-mix(in srgb, var(--color-red-500) 8%, transparent);
288
+ --color-surface-negative-low-active: color-mix(in srgb, var(--color-red-500) 18%, transparent);
289
+ --color-surface-negative-low-disabled: var(--color-white-alpha-700);
290
+
291
+ --color-surface-info-high: var(--color-blue-500);
292
+ --color-surface-info-middle: var(--color-blue-100);
293
+ --color-surface-info-low: var(--color-blue-50);
294
+ --color-surface-success-high: var(--color-green-500);
295
+ --color-surface-success-middle: var(--color-green-100);
296
+ --color-surface-success-low: var(--color-green-50);
297
+ --color-surface-warning-high: var(--color-yellow-600);
298
+ --color-surface-warning-middle: var(--color-yellow-100);
299
+ --color-surface-warning-low: var(--color-yellow-50);
300
+
301
+ --color-surface-accent-1: var(--color-purple-600);
302
+ --color-surface-accent-2: var(--color-orange-700);
303
+ --color-surface-accent-3: var(--color-pink-600);
304
+
305
+ --color-surface-inverse: var(--color-gray-900);
306
+ --color-surface-overlay: var(--color-black-alpha-300);
307
+
308
+ /* border — 枠線 */
309
+ --color-border-neutral-extra-high-enabled: var(--color-gray-500);
310
+ --color-border-neutral-extra-high-hover: var(--color-gray-600);
311
+ --color-border-neutral-extra-high-disabled: var(--color-gray-200);
312
+ --color-border-neutral-high: var(--color-gray-300);
313
+ --color-border-neutral-middle: var(--color-gray-200);
314
+ --color-border-neutral-low: var(--color-gray-100);
315
+
316
+ --color-border-primary-extra-high: var(--color-{{PRIMARY}}-500);
317
+ --color-border-primary-high: var(--color-{{PRIMARY}}-300);
318
+ --color-border-primary-low: var(--color-{{PRIMARY}}-100);
319
+
320
+ --color-border-negative-extra-high-enabled: var(--color-red-500);
321
+ --color-border-negative-extra-high-hover: var(--color-red-600);
322
+ --color-border-negative-extra-high-disabled: var(--color-red-200);
323
+ --color-border-negative-high: var(--color-red-300);
324
+ --color-border-negative-low: var(--color-red-100);
325
+
326
+ --color-border-info: var(--color-blue-300);
327
+ --color-border-success: var(--color-green-300);
328
+ --color-border-warning: var(--color-yellow-300);
329
+ /* Figma の定義どおり blue/700 固定(primary 設定には追従しない)。
330
+ 旧 --color-ring-normal の移行先。
331
+ en: Fixed to blue/700 exactly as defined in Figma — it does not follow
332
+ the configured primary color. Migration target of --color-ring-normal. */
333
+ --color-border-ring: var(--color-blue-700);
334
+
335
+ /* object — アイコン等の図形 */
336
+ --color-object-neutral-high: var(--color-gray-900);
337
+ --color-object-neutral-middle: var(--color-gray-700);
338
+ --color-object-neutral-low: var(--color-gray-500);
339
+ --color-object-neutral-disabled: var(--color-gray-300);
340
+
341
+ --color-object-primary-enabled: var(--color-{{PRIMARY}}-600);
342
+ --color-object-primary-hover: var(--color-{{PRIMARY}}-700);
343
+ --color-object-primary-active: var(--color-{{PRIMARY}}-800);
344
+ --color-object-primary-disabled: var(--color-{{PRIMARY}}-200);
345
+
346
+ --color-object-negative-enabled: var(--color-red-600);
347
+ --color-object-negative-hover: var(--color-red-700);
348
+ --color-object-negative-active: var(--color-red-800);
349
+ --color-object-negative-disabled: var(--color-red-200);
350
+
351
+ --color-object-info: var(--color-blue-600);
352
+ --color-object-success: var(--color-green-700);
353
+ --color-object-warning: var(--color-yellow-700);
354
+ --color-object-inverse: var(--color-white);
355
+
356
+ /* text — 文字 */
357
+ --color-text-neutral-high: var(--color-gray-900);
358
+ --color-text-neutral-middle: var(--color-gray-700);
359
+ --color-text-neutral-low: var(--color-gray-500);
360
+ --color-text-neutral-disabled: var(--color-gray-300);
361
+
362
+ --color-text-primary-enabled: var(--color-{{PRIMARY}}-600);
363
+ --color-text-primary-hover: var(--color-{{PRIMARY}}-700);
364
+ --color-text-primary-active: var(--color-{{PRIMARY}}-800);
365
+ --color-text-primary-disabled: var(--color-{{PRIMARY}}-200);
366
+
367
+ --color-text-negative-enabled: var(--color-red-600);
368
+ --color-text-negative-hover: var(--color-red-700);
369
+ --color-text-negative-active: var(--color-red-800);
370
+ --color-text-negative-disabled: var(--color-red-200);
371
+
372
+ --color-text-info: var(--color-blue-600);
373
+ --color-text-success: var(--color-green-700);
374
+ --color-text-warning: var(--color-yellow-700);
375
+ --color-text-inverse: var(--color-white);
376
+
377
+ /* ------------------------------------------------------------------
378
+ タイポグラフィのセマンティックトークン(Figma `Typography: Semantics` と 1:1 対応)
379
+
380
+ Figma のパス(例: character/1/regular-pro/font-size)をそのまま
381
+ `--character-1-regular-pro-font-size` に写している。下の @layer utilities
382
+ にある 72 クラス(character 48 + icon 24)は、この変数を参照する形に
383
+ 揃えてあるので、値の定義箇所はここ 1 箇所だけになる。
384
+
385
+ en: 1:1 mirror of Figma's `Typography: Semantics`. The 72 utility
386
+ classes below consume these variables, so each value is declared once.
387
+ ------------------------------------------------------------------ */
388
+ --character-1-regular-pro-font-family: var(--font-family-pro);
389
+ --character-1-regular-pro-font-size: var(--font-size-12);
390
+ --character-1-regular-pro-font-weight: var(--font-weight-char-normal);
391
+ --character-1-regular-pro-letter-spacing: var(--letter-spacing-wider);
392
+ --character-1-regular-pro-line-height: var(--line-height-20);
393
+ --character-1-regular-mono-font-family: var(--font-family-mono);
394
+ --character-1-regular-mono-font-size: var(--font-size-12);
395
+ --character-1-regular-mono-font-weight: var(--font-weight-char-normal);
396
+ --character-1-regular-mono-letter-spacing: var(--letter-spacing-wider);
397
+ --character-1-regular-mono-line-height: var(--line-height-20);
398
+ --character-1-bold-pro-font-family: var(--font-family-pro);
399
+ --character-1-bold-pro-font-size: var(--font-size-12);
400
+ --character-1-bold-pro-font-weight: var(--font-weight-char-bold);
401
+ --character-1-bold-pro-letter-spacing: var(--letter-spacing-wider);
402
+ --character-1-bold-pro-line-height: var(--line-height-20);
403
+ --character-1-bold-mono-font-family: var(--font-family-mono);
404
+ --character-1-bold-mono-font-size: var(--font-size-12);
405
+ --character-1-bold-mono-font-weight: var(--font-weight-char-bold);
406
+ --character-1-bold-mono-letter-spacing: var(--letter-spacing-wider);
407
+ --character-1-bold-mono-line-height: var(--line-height-20);
408
+ --character-2-regular-pro-font-family: var(--font-family-pro);
409
+ --character-2-regular-pro-font-size: var(--font-size-14);
410
+ --character-2-regular-pro-font-weight: var(--font-weight-char-normal);
411
+ --character-2-regular-pro-letter-spacing: var(--letter-spacing-wider);
412
+ --character-2-regular-pro-line-height: var(--line-height-24);
413
+ --character-2-regular-mono-font-family: var(--font-family-mono);
414
+ --character-2-regular-mono-font-size: var(--font-size-14);
415
+ --character-2-regular-mono-font-weight: var(--font-weight-char-normal);
416
+ --character-2-regular-mono-letter-spacing: var(--letter-spacing-wider);
417
+ --character-2-regular-mono-line-height: var(--line-height-24);
418
+ --character-2-bold-pro-font-family: var(--font-family-pro);
419
+ --character-2-bold-pro-font-size: var(--font-size-14);
420
+ --character-2-bold-pro-font-weight: var(--font-weight-char-bold);
421
+ --character-2-bold-pro-letter-spacing: var(--letter-spacing-wider);
422
+ --character-2-bold-pro-line-height: var(--line-height-24);
423
+ --character-2-bold-mono-font-family: var(--font-family-mono);
424
+ --character-2-bold-mono-font-size: var(--font-size-14);
425
+ --character-2-bold-mono-font-weight: var(--font-weight-char-bold);
426
+ --character-2-bold-mono-letter-spacing: var(--letter-spacing-wider);
427
+ --character-2-bold-mono-line-height: var(--line-height-24);
428
+ --character-3-regular-pro-font-family: var(--font-family-pro);
429
+ --character-3-regular-pro-font-size: var(--font-size-16);
430
+ --character-3-regular-pro-font-weight: var(--font-weight-char-normal);
431
+ --character-3-regular-pro-letter-spacing: var(--letter-spacing-wider);
432
+ --character-3-regular-pro-line-height: var(--line-height-24);
433
+ --character-3-regular-mono-font-family: var(--font-family-mono);
434
+ --character-3-regular-mono-font-size: var(--font-size-16);
435
+ --character-3-regular-mono-font-weight: var(--font-weight-char-normal);
436
+ --character-3-regular-mono-letter-spacing: var(--letter-spacing-wider);
437
+ --character-3-regular-mono-line-height: var(--line-height-24);
438
+ --character-3-bold-pro-font-family: var(--font-family-pro);
439
+ --character-3-bold-pro-font-size: var(--font-size-16);
440
+ --character-3-bold-pro-font-weight: var(--font-weight-char-bold);
441
+ --character-3-bold-pro-letter-spacing: var(--letter-spacing-wider);
442
+ --character-3-bold-pro-line-height: var(--line-height-24);
443
+ --character-3-bold-mono-font-family: var(--font-family-mono);
444
+ --character-3-bold-mono-font-size: var(--font-size-16);
445
+ --character-3-bold-mono-font-weight: var(--font-weight-char-bold);
446
+ --character-3-bold-mono-letter-spacing: var(--letter-spacing-wider);
447
+ --character-3-bold-mono-line-height: var(--line-height-24);
448
+ --character-4-regular-pro-font-family: var(--font-family-pro);
449
+ --character-4-regular-pro-font-size: var(--font-size-18);
450
+ --character-4-regular-pro-font-weight: var(--font-weight-char-normal);
451
+ --character-4-regular-pro-letter-spacing: var(--letter-spacing-wider);
452
+ --character-4-regular-pro-line-height: var(--line-height-28);
453
+ --character-4-regular-mono-font-family: var(--font-family-mono);
454
+ --character-4-regular-mono-font-size: var(--font-size-18);
455
+ --character-4-regular-mono-font-weight: var(--font-weight-char-normal);
456
+ --character-4-regular-mono-letter-spacing: var(--letter-spacing-wider);
457
+ --character-4-regular-mono-line-height: var(--line-height-28);
458
+ --character-4-bold-pro-font-family: var(--font-family-pro);
459
+ --character-4-bold-pro-font-size: var(--font-size-18);
460
+ --character-4-bold-pro-font-weight: var(--font-weight-char-bold);
461
+ --character-4-bold-pro-letter-spacing: var(--letter-spacing-wider);
462
+ --character-4-bold-pro-line-height: var(--line-height-28);
463
+ --character-4-bold-mono-font-family: var(--font-family-mono);
464
+ --character-4-bold-mono-font-size: var(--font-size-18);
465
+ --character-4-bold-mono-font-weight: var(--font-weight-char-bold);
466
+ --character-4-bold-mono-letter-spacing: var(--letter-spacing-wider);
467
+ --character-4-bold-mono-line-height: var(--line-height-28);
468
+ --character-5-regular-pro-font-family: var(--font-family-pro);
469
+ --character-5-regular-pro-font-size: var(--font-size-20);
470
+ --character-5-regular-pro-font-weight: var(--font-weight-char-normal);
471
+ --character-5-regular-pro-letter-spacing: var(--letter-spacing-wider);
472
+ --character-5-regular-pro-line-height: var(--line-height-32);
473
+ --character-5-regular-mono-font-family: var(--font-family-mono);
474
+ --character-5-regular-mono-font-size: var(--font-size-20);
475
+ --character-5-regular-mono-font-weight: var(--font-weight-char-normal);
476
+ --character-5-regular-mono-letter-spacing: var(--letter-spacing-wider);
477
+ --character-5-regular-mono-line-height: var(--line-height-32);
478
+ --character-5-bold-pro-font-family: var(--font-family-pro);
479
+ --character-5-bold-pro-font-size: var(--font-size-20);
480
+ --character-5-bold-pro-font-weight: var(--font-weight-char-bold);
481
+ --character-5-bold-pro-letter-spacing: var(--letter-spacing-wider);
482
+ --character-5-bold-pro-line-height: var(--line-height-32);
483
+ --character-5-bold-mono-font-family: var(--font-family-mono);
484
+ --character-5-bold-mono-font-size: var(--font-size-20);
485
+ --character-5-bold-mono-font-weight: var(--font-weight-char-bold);
486
+ --character-5-bold-mono-letter-spacing: var(--letter-spacing-wider);
487
+ --character-5-bold-mono-line-height: var(--line-height-32);
488
+ --character-6-regular-pro-font-family: var(--font-family-pro);
489
+ --character-6-regular-pro-font-size: var(--font-size-24);
490
+ --character-6-regular-pro-font-weight: var(--font-weight-char-normal);
491
+ --character-6-regular-pro-letter-spacing: var(--letter-spacing-wider);
492
+ --character-6-regular-pro-line-height: var(--line-height-36);
493
+ --character-6-regular-mono-font-family: var(--font-family-mono);
494
+ --character-6-regular-mono-font-size: var(--font-size-24);
495
+ --character-6-regular-mono-font-weight: var(--font-weight-char-normal);
496
+ --character-6-regular-mono-letter-spacing: var(--letter-spacing-wider);
497
+ --character-6-regular-mono-line-height: var(--line-height-36);
498
+ --character-6-bold-pro-font-family: var(--font-family-pro);
499
+ --character-6-bold-pro-font-size: var(--font-size-24);
500
+ --character-6-bold-pro-font-weight: var(--font-weight-char-bold);
501
+ --character-6-bold-pro-letter-spacing: var(--letter-spacing-wider);
502
+ --character-6-bold-pro-line-height: var(--line-height-36);
503
+ --character-6-bold-mono-font-family: var(--font-family-mono);
504
+ --character-6-bold-mono-font-size: var(--font-size-24);
505
+ --character-6-bold-mono-font-weight: var(--font-weight-char-bold);
506
+ --character-6-bold-mono-letter-spacing: var(--letter-spacing-wider);
507
+ --character-6-bold-mono-line-height: var(--line-height-36);
508
+ --character-7-regular-pro-font-family: var(--font-family-pro);
509
+ --character-7-regular-pro-font-size: var(--font-size-28);
510
+ --character-7-regular-pro-font-weight: var(--font-weight-char-normal);
511
+ --character-7-regular-pro-letter-spacing: var(--letter-spacing-wider);
512
+ --character-7-regular-pro-line-height: var(--line-height-44);
513
+ --character-7-regular-mono-font-family: var(--font-family-mono);
514
+ --character-7-regular-mono-font-size: var(--font-size-28);
515
+ --character-7-regular-mono-font-weight: var(--font-weight-char-normal);
516
+ --character-7-regular-mono-letter-spacing: var(--letter-spacing-wider);
517
+ --character-7-regular-mono-line-height: var(--line-height-44);
518
+ --character-7-bold-pro-font-family: var(--font-family-pro);
519
+ --character-7-bold-pro-font-size: var(--font-size-28);
520
+ --character-7-bold-pro-font-weight: var(--font-weight-char-bold);
521
+ --character-7-bold-pro-letter-spacing: var(--letter-spacing-wider);
522
+ --character-7-bold-pro-line-height: var(--line-height-44);
523
+ --character-7-bold-mono-font-family: var(--font-family-mono);
524
+ --character-7-bold-mono-font-size: var(--font-size-28);
525
+ --character-7-bold-mono-font-weight: var(--font-weight-char-bold);
526
+ --character-7-bold-mono-letter-spacing: var(--letter-spacing-wider);
527
+ --character-7-bold-mono-line-height: var(--line-height-44);
528
+ --character-8-regular-pro-font-family: var(--font-family-pro);
529
+ --character-8-regular-pro-font-size: var(--font-size-32);
530
+ --character-8-regular-pro-font-weight: var(--font-weight-char-normal);
531
+ --character-8-regular-pro-letter-spacing: var(--letter-spacing-wider);
532
+ --character-8-regular-pro-line-height: var(--line-height-48);
533
+ --character-8-regular-mono-font-family: var(--font-family-mono);
534
+ --character-8-regular-mono-font-size: var(--font-size-32);
535
+ --character-8-regular-mono-font-weight: var(--font-weight-char-normal);
536
+ --character-8-regular-mono-letter-spacing: var(--letter-spacing-wider);
537
+ --character-8-regular-mono-line-height: var(--line-height-48);
538
+ --character-8-bold-pro-font-family: var(--font-family-pro);
539
+ --character-8-bold-pro-font-size: var(--font-size-32);
540
+ --character-8-bold-pro-font-weight: var(--font-weight-char-bold);
541
+ --character-8-bold-pro-letter-spacing: var(--letter-spacing-wider);
542
+ --character-8-bold-pro-line-height: var(--line-height-48);
543
+ --character-8-bold-mono-font-family: var(--font-family-mono);
544
+ --character-8-bold-mono-font-size: var(--font-size-32);
545
+ --character-8-bold-mono-font-weight: var(--font-weight-char-bold);
546
+ --character-8-bold-mono-letter-spacing: var(--letter-spacing-wider);
547
+ --character-8-bold-mono-line-height: var(--line-height-48);
548
+ --character-9-regular-pro-font-family: var(--font-family-pro);
549
+ --character-9-regular-pro-font-size: var(--font-size-36);
550
+ --character-9-regular-pro-font-weight: var(--font-weight-char-normal);
551
+ --character-9-regular-pro-letter-spacing: var(--letter-spacing-wider);
552
+ --character-9-regular-pro-line-height: var(--line-height-56);
553
+ --character-9-regular-mono-font-family: var(--font-family-mono);
554
+ --character-9-regular-mono-font-size: var(--font-size-36);
555
+ --character-9-regular-mono-font-weight: var(--font-weight-char-normal);
556
+ --character-9-regular-mono-letter-spacing: var(--letter-spacing-wider);
557
+ --character-9-regular-mono-line-height: var(--line-height-56);
558
+ --character-9-bold-pro-font-family: var(--font-family-pro);
559
+ --character-9-bold-pro-font-size: var(--font-size-36);
560
+ --character-9-bold-pro-font-weight: var(--font-weight-char-bold);
561
+ --character-9-bold-pro-letter-spacing: var(--letter-spacing-wider);
562
+ --character-9-bold-pro-line-height: var(--line-height-56);
563
+ --character-9-bold-mono-font-family: var(--font-family-mono);
564
+ --character-9-bold-mono-font-size: var(--font-size-36);
565
+ --character-9-bold-mono-font-weight: var(--font-weight-char-bold);
566
+ --character-9-bold-mono-letter-spacing: var(--letter-spacing-wider);
567
+ --character-9-bold-mono-line-height: var(--line-height-56);
568
+ --character-10-regular-pro-font-family: var(--font-family-pro);
569
+ --character-10-regular-pro-font-size: var(--font-size-42);
570
+ --character-10-regular-pro-font-weight: var(--font-weight-char-normal);
571
+ --character-10-regular-pro-letter-spacing: var(--letter-spacing-wider);
572
+ --character-10-regular-pro-line-height: var(--line-height-64);
573
+ --character-10-regular-mono-font-family: var(--font-family-mono);
574
+ --character-10-regular-mono-font-size: var(--font-size-42);
575
+ --character-10-regular-mono-font-weight: var(--font-weight-char-normal);
576
+ --character-10-regular-mono-letter-spacing: var(--letter-spacing-wider);
577
+ --character-10-regular-mono-line-height: var(--line-height-64);
578
+ --character-10-bold-pro-font-family: var(--font-family-pro);
579
+ --character-10-bold-pro-font-size: var(--font-size-42);
580
+ --character-10-bold-pro-font-weight: var(--font-weight-char-bold);
581
+ --character-10-bold-pro-letter-spacing: var(--letter-spacing-wider);
582
+ --character-10-bold-pro-line-height: var(--line-height-64);
583
+ --character-10-bold-mono-font-family: var(--font-family-mono);
584
+ --character-10-bold-mono-font-size: var(--font-size-42);
585
+ --character-10-bold-mono-font-weight: var(--font-weight-char-bold);
586
+ --character-10-bold-mono-letter-spacing: var(--letter-spacing-wider);
587
+ --character-10-bold-mono-line-height: var(--line-height-64);
588
+ --character-11-regular-pro-font-family: var(--font-family-pro);
589
+ --character-11-regular-pro-font-size: var(--font-size-48);
590
+ --character-11-regular-pro-font-weight: var(--font-weight-char-normal);
591
+ --character-11-regular-pro-letter-spacing: var(--letter-spacing-wider);
592
+ --character-11-regular-pro-line-height: var(--line-height-72);
593
+ --character-11-regular-mono-font-family: var(--font-family-mono);
594
+ --character-11-regular-mono-font-size: var(--font-size-48);
595
+ --character-11-regular-mono-font-weight: var(--font-weight-char-normal);
596
+ --character-11-regular-mono-letter-spacing: var(--letter-spacing-wider);
597
+ --character-11-regular-mono-line-height: var(--line-height-72);
598
+ --character-11-bold-pro-font-family: var(--font-family-pro);
599
+ --character-11-bold-pro-font-size: var(--font-size-48);
600
+ --character-11-bold-pro-font-weight: var(--font-weight-char-bold);
601
+ --character-11-bold-pro-letter-spacing: var(--letter-spacing-wider);
602
+ --character-11-bold-pro-line-height: var(--line-height-72);
603
+ --character-11-bold-mono-font-family: var(--font-family-mono);
604
+ --character-11-bold-mono-font-size: var(--font-size-48);
605
+ --character-11-bold-mono-font-weight: var(--font-weight-char-bold);
606
+ --character-11-bold-mono-letter-spacing: var(--letter-spacing-wider);
607
+ --character-11-bold-mono-line-height: var(--line-height-72);
608
+ --character-12-regular-pro-font-family: var(--font-family-pro);
609
+ --character-12-regular-pro-font-size: var(--font-size-54);
610
+ --character-12-regular-pro-font-weight: var(--font-weight-char-normal);
611
+ --character-12-regular-pro-letter-spacing: var(--letter-spacing-wider);
612
+ --character-12-regular-pro-line-height: var(--line-height-84);
613
+ --character-12-regular-mono-font-family: var(--font-family-mono);
614
+ --character-12-regular-mono-font-size: var(--font-size-54);
615
+ --character-12-regular-mono-font-weight: var(--font-weight-char-normal);
616
+ --character-12-regular-mono-letter-spacing: var(--letter-spacing-wider);
617
+ --character-12-regular-mono-line-height: var(--line-height-84);
618
+ --character-12-bold-pro-font-family: var(--font-family-pro);
619
+ --character-12-bold-pro-font-size: var(--font-size-54);
620
+ --character-12-bold-pro-font-weight: var(--font-weight-char-bold);
621
+ --character-12-bold-pro-letter-spacing: var(--letter-spacing-wider);
622
+ --character-12-bold-pro-line-height: var(--line-height-84);
623
+ --character-12-bold-mono-font-family: var(--font-family-mono);
624
+ --character-12-bold-mono-font-size: var(--font-size-54);
625
+ --character-12-bold-mono-font-weight: var(--font-weight-char-bold);
626
+ --character-12-bold-mono-letter-spacing: var(--letter-spacing-wider);
627
+ --character-12-bold-mono-line-height: var(--line-height-84);
628
+ --icon-1-fill-0-font-family: var(--font-family-icon);
629
+ --icon-1-fill-0-font-size: var(--font-size-12);
630
+ --icon-1-fill-0-font-weight: var(--font-weight-icon);
631
+ --icon-1-fill-0-letter-spacing: var(--letter-spacing-normal);
632
+ --icon-1-fill-0-line-height: var(--line-height-leading-none);
633
+ --icon-1-fill-1-font-family: var(--font-family-icon);
634
+ --icon-1-fill-1-font-size: var(--font-size-12);
635
+ --icon-1-fill-1-font-weight: var(--font-weight-icon);
636
+ --icon-1-fill-1-letter-spacing: var(--letter-spacing-normal);
637
+ --icon-1-fill-1-line-height: var(--line-height-leading-none);
638
+ --icon-2-fill-0-font-family: var(--font-family-icon);
639
+ --icon-2-fill-0-font-size: var(--font-size-14);
640
+ --icon-2-fill-0-font-weight: var(--font-weight-icon);
641
+ --icon-2-fill-0-letter-spacing: var(--letter-spacing-normal);
642
+ --icon-2-fill-0-line-height: var(--line-height-leading-none);
643
+ --icon-2-fill-1-font-family: var(--font-family-icon);
644
+ --icon-2-fill-1-font-size: var(--font-size-14);
645
+ --icon-2-fill-1-font-weight: var(--font-weight-icon);
646
+ --icon-2-fill-1-letter-spacing: var(--letter-spacing-normal);
647
+ --icon-2-fill-1-line-height: var(--line-height-leading-none);
648
+ --icon-3-fill-0-font-family: var(--font-family-icon);
649
+ --icon-3-fill-0-font-size: var(--font-size-16);
650
+ --icon-3-fill-0-font-weight: var(--font-weight-icon);
651
+ --icon-3-fill-0-letter-spacing: var(--letter-spacing-normal);
652
+ --icon-3-fill-0-line-height: var(--line-height-leading-none);
653
+ --icon-3-fill-1-font-family: var(--font-family-icon);
654
+ --icon-3-fill-1-font-size: var(--font-size-16);
655
+ --icon-3-fill-1-font-weight: var(--font-weight-icon);
656
+ --icon-3-fill-1-letter-spacing: var(--letter-spacing-normal);
657
+ --icon-3-fill-1-line-height: var(--line-height-leading-none);
658
+ --icon-4-fill-0-font-family: var(--font-family-icon);
659
+ --icon-4-fill-0-font-size: var(--font-size-18);
660
+ --icon-4-fill-0-font-weight: var(--font-weight-icon);
661
+ --icon-4-fill-0-letter-spacing: var(--letter-spacing-normal);
662
+ --icon-4-fill-0-line-height: var(--line-height-leading-none);
663
+ --icon-4-fill-1-font-family: var(--font-family-icon);
664
+ --icon-4-fill-1-font-size: var(--font-size-18);
665
+ --icon-4-fill-1-font-weight: var(--font-weight-icon);
666
+ --icon-4-fill-1-letter-spacing: var(--letter-spacing-normal);
667
+ --icon-4-fill-1-line-height: var(--line-height-leading-none);
668
+ --icon-5-fill-0-font-family: var(--font-family-icon);
669
+ --icon-5-fill-0-font-size: var(--font-size-20);
670
+ --icon-5-fill-0-font-weight: var(--font-weight-icon);
671
+ --icon-5-fill-0-letter-spacing: var(--letter-spacing-normal);
672
+ --icon-5-fill-0-line-height: var(--line-height-leading-none);
673
+ --icon-5-fill-1-font-family: var(--font-family-icon);
674
+ --icon-5-fill-1-font-size: var(--font-size-20);
675
+ --icon-5-fill-1-font-weight: var(--font-weight-icon);
676
+ --icon-5-fill-1-letter-spacing: var(--letter-spacing-normal);
677
+ --icon-5-fill-1-line-height: var(--line-height-leading-none);
678
+ --icon-6-fill-0-font-family: var(--font-family-icon);
679
+ --icon-6-fill-0-font-size: var(--font-size-24);
680
+ --icon-6-fill-0-font-weight: var(--font-weight-icon);
681
+ --icon-6-fill-0-letter-spacing: var(--letter-spacing-normal);
682
+ --icon-6-fill-0-line-height: var(--line-height-leading-none);
683
+ --icon-6-fill-1-font-family: var(--font-family-icon);
684
+ --icon-6-fill-1-font-size: var(--font-size-24);
685
+ --icon-6-fill-1-font-weight: var(--font-weight-icon);
686
+ --icon-6-fill-1-letter-spacing: var(--letter-spacing-normal);
687
+ --icon-6-fill-1-line-height: var(--line-height-leading-none);
688
+ --icon-7-fill-0-font-family: var(--font-family-icon);
689
+ --icon-7-fill-0-font-size: var(--font-size-28);
690
+ --icon-7-fill-0-font-weight: var(--font-weight-icon);
691
+ --icon-7-fill-0-letter-spacing: var(--letter-spacing-normal);
692
+ --icon-7-fill-0-line-height: var(--line-height-leading-none);
693
+ --icon-7-fill-1-font-family: var(--font-family-icon);
694
+ --icon-7-fill-1-font-size: var(--font-size-28);
695
+ --icon-7-fill-1-font-weight: var(--font-weight-icon);
696
+ --icon-7-fill-1-letter-spacing: var(--letter-spacing-normal);
697
+ --icon-7-fill-1-line-height: var(--line-height-leading-none);
698
+ --icon-8-fill-0-font-family: var(--font-family-icon);
699
+ --icon-8-fill-0-font-size: var(--font-size-32);
700
+ --icon-8-fill-0-font-weight: var(--font-weight-icon);
701
+ --icon-8-fill-0-letter-spacing: var(--letter-spacing-normal);
702
+ --icon-8-fill-0-line-height: var(--line-height-leading-none);
703
+ --icon-8-fill-1-font-family: var(--font-family-icon);
704
+ --icon-8-fill-1-font-size: var(--font-size-32);
705
+ --icon-8-fill-1-font-weight: var(--font-weight-icon);
706
+ --icon-8-fill-1-letter-spacing: var(--letter-spacing-normal);
707
+ --icon-8-fill-1-line-height: var(--line-height-leading-none);
708
+ --icon-9-fill-0-font-family: var(--font-family-icon);
709
+ --icon-9-fill-0-font-size: var(--font-size-36);
710
+ --icon-9-fill-0-font-weight: var(--font-weight-icon);
711
+ --icon-9-fill-0-letter-spacing: var(--letter-spacing-normal);
712
+ --icon-9-fill-0-line-height: var(--line-height-leading-none);
713
+ --icon-9-fill-1-font-family: var(--font-family-icon);
714
+ --icon-9-fill-1-font-size: var(--font-size-36);
715
+ --icon-9-fill-1-font-weight: var(--font-weight-icon);
716
+ --icon-9-fill-1-letter-spacing: var(--letter-spacing-normal);
717
+ --icon-9-fill-1-line-height: var(--line-height-leading-none);
718
+ --icon-10-fill-0-font-family: var(--font-family-icon);
719
+ --icon-10-fill-0-font-size: var(--font-size-42);
720
+ --icon-10-fill-0-font-weight: var(--font-weight-icon);
721
+ --icon-10-fill-0-letter-spacing: var(--letter-spacing-normal);
722
+ --icon-10-fill-0-line-height: var(--line-height-leading-none);
723
+ --icon-10-fill-1-font-family: var(--font-family-icon);
724
+ --icon-10-fill-1-font-size: var(--font-size-42);
725
+ --icon-10-fill-1-font-weight: var(--font-weight-icon);
726
+ --icon-10-fill-1-letter-spacing: var(--letter-spacing-normal);
727
+ --icon-10-fill-1-line-height: var(--line-height-leading-none);
728
+ --icon-11-fill-0-font-family: var(--font-family-icon);
729
+ --icon-11-fill-0-font-size: var(--font-size-48);
730
+ --icon-11-fill-0-font-weight: var(--font-weight-icon);
731
+ --icon-11-fill-0-letter-spacing: var(--letter-spacing-normal);
732
+ --icon-11-fill-0-line-height: var(--line-height-leading-none);
733
+ --icon-11-fill-1-font-family: var(--font-family-icon);
734
+ --icon-11-fill-1-font-size: var(--font-size-48);
735
+ --icon-11-fill-1-font-weight: var(--font-weight-icon);
736
+ --icon-11-fill-1-letter-spacing: var(--letter-spacing-normal);
737
+ --icon-11-fill-1-line-height: var(--line-height-leading-none);
738
+ --icon-12-fill-0-font-family: var(--font-family-icon);
739
+ --icon-12-fill-0-font-size: var(--font-size-54);
740
+ --icon-12-fill-0-font-weight: var(--font-weight-icon);
741
+ --icon-12-fill-0-letter-spacing: var(--letter-spacing-normal);
742
+ --icon-12-fill-0-line-height: var(--line-height-leading-none);
743
+ --icon-12-fill-1-font-family: var(--font-family-icon);
744
+ --icon-12-fill-1-font-size: var(--font-size-54);
745
+ --icon-12-fill-1-font-weight: var(--font-weight-icon);
746
+ --icon-12-fill-1-letter-spacing: var(--letter-spacing-normal);
747
+ --icon-12-fill-1-line-height: var(--line-height-leading-none);
748
+
194
749
  /* 角丸 - デフォルト値は設定可能 */
750
+ /* NOTE: ここに書かれた var(--radius-*) は「置換前のデフォルト値」で、
751
+ 実際の値は sparkle-design-cli の processTemplate が radius.csv の
752
+ 選択プロファイル行で上書きする(`round` のみ置換対象外)。
753
+ そのため radius.csv の列名とここの変数名は必ず同時に変更すること
754
+ (CSV だけ変えると置換が効かず、旧名の変数が残る)。
755
+ en: These defaults are overwritten at generate time by the CLI using
756
+ the selected radius.csv profile row (`round` is excluded). Rename the
757
+ CSV column and the variable here together, or the substitution misses. */
195
758
  --radius-divide: var(--radius-none);
196
- --radius-minimum: var(--radius-xs);
197
- --radius-notice: var(--radius-sm);
759
+ --radius-minimum: var(--radius-sm);
760
+ --radius-notice: var(--radius-md);
198
761
  --radius-action: var(--radius-{{RADIUS}});
199
- --radius-halfModal: var(--radius-lg);
200
- --radius-modal: var(--radius-xl);
762
+ --radius-container: var(--radius-xl);
763
+ --radius-modal: var(--radius-2xl);
201
764
  --radius-round: var(--radius-full);
202
765
 
766
+ /* @deprecated --radius-halfModal は beta 期間の後方互換エイリアス。
767
+ `halfModal` は Figma で `container` にリネームされた。beta 終了時に削除する。
768
+ radius.csv に列を持たない(=プロファイルの値を流し込まない)意図的な
769
+ エイリアスであることを、scripts/validate-tokens.mjs がこの @deprecated
770
+ コメントの変数名から読み取る。
771
+ en: Intentional back-compat alias with no radius.csv column. The validator
772
+ recognises it by the variable name in this @deprecated comment. */
773
+ --radius-halfModal: var(--radius-container);
774
+
203
775
  /* シャドウ */
204
776
  --shadow-base: var(--shadow-none);
205
777
  --shadow-flat: var(--shadow-2xs);
@@ -209,19 +781,61 @@
209
781
  --shadow-popout: var(--shadow-lg);
210
782
  }
211
783
 
784
+ /* 最大幅 — Figma の `Sizing: Primitives`(`max-width/xs` 〜 `max-width/7xl` の 11 件) */
785
+ /* NOTE: ここだけ `@theme inline` でも プレーンな `:root` でもなく **`@theme static`**
786
+ に実値を書く。他のトークンと形が違うのは、`--container-*` が Tailwind v4 で
787
+ 2 種類の使われ方をするため。
788
+
789
+ - `max-w-*` / `w-*` / `min-w-*` → `var(--container-*)` に展開される
790
+ - `@sm:` / `@xl:` などの container query バリアント →
791
+ `@container (width >= 36rem)` のように **実値がベタ書きされる**
792
+
793
+ 後者は CSS の仕様上 `var()` を書けない。そのため:
794
+
795
+ - プレーンな `:root` に書くと、`max-w-*` は追従するが container query の
796
+ 条件は Tailwind のデフォルトのまま**黙って据え置かれる**
797
+ - `@theme inline` に自己参照(`var(--container-xl)`)で書くと、条件に var() を
798
+ 置けないため **`@xl:` ユーティリティ自体が生成されなくなる**(さらに悪い)
799
+
800
+ `@theme` に実値を書いた場合だけ両方が追従する。tailwindcss 4 を実際に
801
+ コンパイルして 3 通りとも確認済み。
802
+ だから `@theme inline` の自己参照(issue #229 の設計)をここに適用しないこと。
803
+
804
+ さらに `static` を付けるのは、素の `@theme` だと**使われていない変数が
805
+ 出力から消える**ため(tree-shaking)。他のトークンはプレーンな `:root` に
806
+ あるので常に参照できるが、`@theme` だけ「`max-w-6xl` を書いていない
807
+ プロジェクトでは `var(--container-6xl)` が解決しない」という差が出てしまう。
808
+ `@theme static` なら 11 件すべてが必ず出力される。
809
+
810
+ Tailwind の `--container-3xs` / `--container-2xs` は Figma に対応する変数が
811
+ ないため意図的に定義しない(=Tailwind のデフォルトのまま残る)。
812
+ en: Must be `@theme` with literal values. Container-query variants inline the
813
+ value into `@container (width >= …)`, where `var()` is invalid — a plain
814
+ `:root` silently keeps Tailwind's defaults for those, and the `@theme inline`
815
+ self-reference makes the variants disappear entirely. `static` prevents
816
+ tree-shaking, so all 11 stay available to hand-written CSS the way every
817
+ other token in this file is. Verified by compiling tailwindcss 4. */
818
+ @theme static {
819
+ --container-xs: 20rem; /* 320px */
820
+ --container-sm: 24rem; /* 384px */
821
+ --container-md: 28rem; /* 448px */
822
+ --container-lg: 32rem; /* 512px */
823
+ --container-xl: 36rem; /* 576px */
824
+ --container-2xl: 42rem; /* 672px */
825
+ --container-3xl: 48rem; /* 768px */
826
+ --container-4xl: 56rem; /* 896px */
827
+ --container-5xl: 64rem; /* 1024px */
828
+ --container-6xl: 72rem; /* 1152px */
829
+ --container-7xl: 80rem; /* 1280px */
830
+ }
831
+
212
832
  /* セマンティクスのトークン定義(Tailwind ユーティリティ生成用) */
213
- /* NOTE (issue #229): 各宣言は上の「セマンティックトークン」:root ブロックにある
214
- 同名変数を自己参照している(例: --color-primary-500: var(--color-primary-500))。
215
- プリミティブへ直接参照させない(例: var(--color-{{PRIMARY}}-500) にしない)のが
216
- 重要な設計判断で、Tailwind v4 は @theme inline の宣言右辺をそのまま utility class
217
- に埋め込む(インライン化する)ため、直接参照だと bg-primary-500 等の compiled
218
- utility が最初からプリミティブ変数(--color-blue-500 等)だけを参照し、
219
- 同名のセマンティック変数(--color-primary-500)は一切参照されなくなる。
220
- この状態では、`:root` / `[data-attr]` セレクタでセマンティック変数だけを
221
- ランタイム上書きしても utility class の見た目は変わらない
222
- (generate --scope が解決しようとしていた issue #229 の問題そのもの)。
223
- 自己参照にしておけば、compiled utility は常にセマンティック変数名を参照し続け、
224
- 別セレクタでその変数を上書きするだけでランタイムに追従する。 */
833
+ /* NOTE: 各宣言は上の「セマンティックトークン」:root ブロックにある同名変数を
834
+ 自己参照している(例: --color-primary-500: var(--color-primary-500))。
835
+ プリミティブへの直接参照にしない意図的な設計。Tailwind v4 は @theme inline
836
+ の宣言右辺を compiled utility class にそのまま埋め込むため、直接参照だと
837
+ セマンティック変数が一切参照されなくなり、別セレクタでのランタイム上書きが
838
+ compiled utility に効かなくなる。 */
225
839
  @theme inline {
226
840
  /* セマンティクスカラー定義 */
227
841
  --color-neutral-50: var(--color-neutral-50);
@@ -325,14 +939,128 @@
325
939
  --color-base-800: var(--color-base-800);
326
940
  --color-base-900: var(--color-base-900);
327
941
 
942
+ /* 用途別セマンティックカラー(Figma `Colors: Semantics` と 1:1 対応)。
943
+ 上の :root ブロックと同名変数の自己参照にする理由は、このブロック
944
+ 冒頭の NOTE (issue #229) を参照。 */
945
+
946
+ /* surface — 背景 */
947
+ --color-surface-base-0: var(--color-surface-base-0);
948
+ --color-surface-base-100: var(--color-surface-base-100);
949
+ --color-surface-base-200: var(--color-surface-base-200);
950
+ --color-surface-neutral-high-enabled: var(--color-surface-neutral-high-enabled);
951
+ --color-surface-neutral-high-hover: var(--color-surface-neutral-high-hover);
952
+ --color-surface-neutral-high-active: var(--color-surface-neutral-high-active);
953
+ --color-surface-neutral-high-disabled: var(--color-surface-neutral-high-disabled);
954
+ --color-surface-neutral-middle-enabled: var(--color-surface-neutral-middle-enabled);
955
+ --color-surface-neutral-middle-hover: var(--color-surface-neutral-middle-hover);
956
+ --color-surface-neutral-middle-active: var(--color-surface-neutral-middle-active);
957
+ --color-surface-neutral-middle-disabled: var(--color-surface-neutral-middle-disabled);
958
+ --color-surface-neutral-low-hover: var(--color-surface-neutral-low-hover);
959
+ --color-surface-neutral-low-active: var(--color-surface-neutral-low-active);
960
+ --color-surface-neutral-low-disabled: var(--color-surface-neutral-low-disabled);
961
+ --color-surface-primary-high-enabled: var(--color-surface-primary-high-enabled);
962
+ --color-surface-primary-high-hover: var(--color-surface-primary-high-hover);
963
+ --color-surface-primary-high-active: var(--color-surface-primary-high-active);
964
+ --color-surface-primary-high-disabled: var(--color-surface-primary-high-disabled);
965
+ --color-surface-primary-middle-enabled: var(--color-surface-primary-middle-enabled);
966
+ --color-surface-primary-middle-hover: var(--color-surface-primary-middle-hover);
967
+ --color-surface-primary-middle-active: var(--color-surface-primary-middle-active);
968
+ --color-surface-primary-middle-disabled: var(--color-surface-primary-middle-disabled);
969
+ --color-surface-primary-low-hover: var(--color-surface-primary-low-hover);
970
+ --color-surface-primary-low-active: var(--color-surface-primary-low-active);
971
+ --color-surface-primary-low-disabled: var(--color-surface-primary-low-disabled);
972
+ --color-surface-negative-high-enabled: var(--color-surface-negative-high-enabled);
973
+ --color-surface-negative-high-hover: var(--color-surface-negative-high-hover);
974
+ --color-surface-negative-high-active: var(--color-surface-negative-high-active);
975
+ --color-surface-negative-high-disabled: var(--color-surface-negative-high-disabled);
976
+ --color-surface-negative-middle-enabled: var(--color-surface-negative-middle-enabled);
977
+ --color-surface-negative-middle-hover: var(--color-surface-negative-middle-hover);
978
+ --color-surface-negative-middle-active: var(--color-surface-negative-middle-active);
979
+ --color-surface-negative-middle-disabled: var(--color-surface-negative-middle-disabled);
980
+ --color-surface-negative-low-hover: var(--color-surface-negative-low-hover);
981
+ --color-surface-negative-low-active: var(--color-surface-negative-low-active);
982
+ --color-surface-negative-low-disabled: var(--color-surface-negative-low-disabled);
983
+ --color-surface-info-high: var(--color-surface-info-high);
984
+ --color-surface-info-middle: var(--color-surface-info-middle);
985
+ --color-surface-info-low: var(--color-surface-info-low);
986
+ --color-surface-success-high: var(--color-surface-success-high);
987
+ --color-surface-success-middle: var(--color-surface-success-middle);
988
+ --color-surface-success-low: var(--color-surface-success-low);
989
+ --color-surface-warning-high: var(--color-surface-warning-high);
990
+ --color-surface-warning-middle: var(--color-surface-warning-middle);
991
+ --color-surface-warning-low: var(--color-surface-warning-low);
992
+ --color-surface-accent-1: var(--color-surface-accent-1);
993
+ --color-surface-accent-2: var(--color-surface-accent-2);
994
+ --color-surface-accent-3: var(--color-surface-accent-3);
995
+ --color-surface-inverse: var(--color-surface-inverse);
996
+ --color-surface-overlay: var(--color-surface-overlay);
997
+
998
+ /* border — 枠線 */
999
+ --color-border-neutral-extra-high-enabled: var(--color-border-neutral-extra-high-enabled);
1000
+ --color-border-neutral-extra-high-hover: var(--color-border-neutral-extra-high-hover);
1001
+ --color-border-neutral-extra-high-disabled: var(--color-border-neutral-extra-high-disabled);
1002
+ --color-border-neutral-high: var(--color-border-neutral-high);
1003
+ --color-border-neutral-middle: var(--color-border-neutral-middle);
1004
+ --color-border-neutral-low: var(--color-border-neutral-low);
1005
+ --color-border-primary-extra-high: var(--color-border-primary-extra-high);
1006
+ --color-border-primary-high: var(--color-border-primary-high);
1007
+ --color-border-primary-low: var(--color-border-primary-low);
1008
+ --color-border-negative-extra-high-enabled: var(--color-border-negative-extra-high-enabled);
1009
+ --color-border-negative-extra-high-hover: var(--color-border-negative-extra-high-hover);
1010
+ --color-border-negative-extra-high-disabled: var(--color-border-negative-extra-high-disabled);
1011
+ --color-border-negative-high: var(--color-border-negative-high);
1012
+ --color-border-negative-low: var(--color-border-negative-low);
1013
+ --color-border-info: var(--color-border-info);
1014
+ --color-border-success: var(--color-border-success);
1015
+ --color-border-warning: var(--color-border-warning);
1016
+ --color-border-ring: var(--color-border-ring);
1017
+
1018
+ /* object — アイコン等の図形 */
1019
+ --color-object-neutral-high: var(--color-object-neutral-high);
1020
+ --color-object-neutral-middle: var(--color-object-neutral-middle);
1021
+ --color-object-neutral-low: var(--color-object-neutral-low);
1022
+ --color-object-neutral-disabled: var(--color-object-neutral-disabled);
1023
+ --color-object-primary-enabled: var(--color-object-primary-enabled);
1024
+ --color-object-primary-hover: var(--color-object-primary-hover);
1025
+ --color-object-primary-active: var(--color-object-primary-active);
1026
+ --color-object-primary-disabled: var(--color-object-primary-disabled);
1027
+ --color-object-negative-enabled: var(--color-object-negative-enabled);
1028
+ --color-object-negative-hover: var(--color-object-negative-hover);
1029
+ --color-object-negative-active: var(--color-object-negative-active);
1030
+ --color-object-negative-disabled: var(--color-object-negative-disabled);
1031
+ --color-object-info: var(--color-object-info);
1032
+ --color-object-success: var(--color-object-success);
1033
+ --color-object-warning: var(--color-object-warning);
1034
+ --color-object-inverse: var(--color-object-inverse);
1035
+
1036
+ /* text — 文字 */
1037
+ --color-text-neutral-high: var(--color-text-neutral-high);
1038
+ --color-text-neutral-middle: var(--color-text-neutral-middle);
1039
+ --color-text-neutral-low: var(--color-text-neutral-low);
1040
+ --color-text-neutral-disabled: var(--color-text-neutral-disabled);
1041
+ --color-text-primary-enabled: var(--color-text-primary-enabled);
1042
+ --color-text-primary-hover: var(--color-text-primary-hover);
1043
+ --color-text-primary-active: var(--color-text-primary-active);
1044
+ --color-text-primary-disabled: var(--color-text-primary-disabled);
1045
+ --color-text-negative-enabled: var(--color-text-negative-enabled);
1046
+ --color-text-negative-hover: var(--color-text-negative-hover);
1047
+ --color-text-negative-active: var(--color-text-negative-active);
1048
+ --color-text-negative-disabled: var(--color-text-negative-disabled);
1049
+ --color-text-info: var(--color-text-info);
1050
+ --color-text-success: var(--color-text-success);
1051
+ --color-text-warning: var(--color-text-warning);
1052
+ --color-text-inverse: var(--color-text-inverse);
1053
+
328
1054
  /* 角丸 - デフォルト値は設定可能 */
329
1055
  --radius-divide: var(--radius-divide);
330
1056
  --radius-minimum: var(--radius-minimum);
331
1057
  --radius-notice: var(--radius-notice);
332
1058
  --radius-action: var(--radius-action);
333
- --radius-halfModal: var(--radius-halfModal);
1059
+ --radius-container: var(--radius-container);
334
1060
  --radius-modal: var(--radius-modal);
335
1061
  --radius-round: var(--radius-round);
1062
+ /* @deprecated beta 期間の後方互換エイリアス(`halfModal` → `container`)。 */
1063
+ --radius-halfModal: var(--radius-halfModal);
336
1064
 
337
1065
  /* シャドウ */
338
1066
  --shadow-base: var(--shadow-base);
@@ -356,556 +1084,556 @@
356
1084
  @layer utilities {
357
1085
  .character-1-regular-pro {
358
1086
  /* Character テキストスタイル */
359
- font-family: var(--font-family-pro);
360
- font-size: var(--font-size-12);
361
- font-weight: var(--font-weight-char-normal);
362
- letter-spacing: var(--letter-spacing-wider);
363
- line-height: var(--line-height-20);
1087
+ font-family: var(--character-1-regular-pro-font-family);
1088
+ font-size: var(--character-1-regular-pro-font-size);
1089
+ font-weight: var(--character-1-regular-pro-font-weight);
1090
+ letter-spacing: var(--character-1-regular-pro-letter-spacing);
1091
+ line-height: var(--character-1-regular-pro-line-height);
364
1092
  }
365
1093
  .character-1-regular-mono {
366
- font-family: var(--font-family-mono);
367
- font-size: var(--font-size-12);
368
- font-weight: var(--font-weight-char-normal);
369
- letter-spacing: var(--letter-spacing-wider);
370
- line-height: var(--line-height-20);
1094
+ font-family: var(--character-1-regular-mono-font-family);
1095
+ font-size: var(--character-1-regular-mono-font-size);
1096
+ font-weight: var(--character-1-regular-mono-font-weight);
1097
+ letter-spacing: var(--character-1-regular-mono-letter-spacing);
1098
+ line-height: var(--character-1-regular-mono-line-height);
371
1099
  }
372
1100
  .character-1-bold-pro {
373
- font-family: var(--font-family-pro);
374
- font-size: var(--font-size-12);
375
- font-weight: var(--font-weight-char-bold);
376
- letter-spacing: var(--letter-spacing-wider);
377
- line-height: var(--line-height-20);
1101
+ font-family: var(--character-1-bold-pro-font-family);
1102
+ font-size: var(--character-1-bold-pro-font-size);
1103
+ font-weight: var(--character-1-bold-pro-font-weight);
1104
+ letter-spacing: var(--character-1-bold-pro-letter-spacing);
1105
+ line-height: var(--character-1-bold-pro-line-height);
378
1106
  }
379
1107
  .character-1-bold-mono {
380
- font-family: var(--font-family-mono);
381
- font-size: var(--font-size-12);
382
- font-weight: var(--font-weight-char-bold);
383
- letter-spacing: var(--letter-spacing-wider);
384
- line-height: var(--line-height-20);
1108
+ font-family: var(--character-1-bold-mono-font-family);
1109
+ font-size: var(--character-1-bold-mono-font-size);
1110
+ font-weight: var(--character-1-bold-mono-font-weight);
1111
+ letter-spacing: var(--character-1-bold-mono-letter-spacing);
1112
+ line-height: var(--character-1-bold-mono-line-height);
385
1113
  }
386
1114
  .character-2-regular-pro {
387
- font-family: var(--font-family-pro);
388
- font-size: var(--font-size-14);
389
- font-weight: var(--font-weight-char-normal);
390
- letter-spacing: var(--letter-spacing-wider);
391
- line-height: var(--line-height-24);
1115
+ font-family: var(--character-2-regular-pro-font-family);
1116
+ font-size: var(--character-2-regular-pro-font-size);
1117
+ font-weight: var(--character-2-regular-pro-font-weight);
1118
+ letter-spacing: var(--character-2-regular-pro-letter-spacing);
1119
+ line-height: var(--character-2-regular-pro-line-height);
392
1120
  }
393
1121
  .character-2-regular-mono {
394
- font-family: var(--font-family-mono);
395
- font-size: var(--font-size-14);
396
- font-weight: var(--font-weight-char-normal);
397
- letter-spacing: var(--letter-spacing-wider);
398
- line-height: var(--line-height-24);
1122
+ font-family: var(--character-2-regular-mono-font-family);
1123
+ font-size: var(--character-2-regular-mono-font-size);
1124
+ font-weight: var(--character-2-regular-mono-font-weight);
1125
+ letter-spacing: var(--character-2-regular-mono-letter-spacing);
1126
+ line-height: var(--character-2-regular-mono-line-height);
399
1127
  }
400
1128
  .character-2-bold-pro {
401
- font-family: var(--font-family-pro);
402
- font-size: var(--font-size-14);
403
- font-weight: var(--font-weight-char-bold);
404
- letter-spacing: var(--letter-spacing-wider);
405
- line-height: var(--line-height-24);
1129
+ font-family: var(--character-2-bold-pro-font-family);
1130
+ font-size: var(--character-2-bold-pro-font-size);
1131
+ font-weight: var(--character-2-bold-pro-font-weight);
1132
+ letter-spacing: var(--character-2-bold-pro-letter-spacing);
1133
+ line-height: var(--character-2-bold-pro-line-height);
406
1134
  }
407
1135
  .character-2-bold-mono {
408
- font-family: var(--font-family-mono);
409
- font-size: var(--font-size-14);
410
- font-weight: var(--font-weight-char-bold);
411
- letter-spacing: var(--letter-spacing-wider);
412
- line-height: var(--line-height-24);
1136
+ font-family: var(--character-2-bold-mono-font-family);
1137
+ font-size: var(--character-2-bold-mono-font-size);
1138
+ font-weight: var(--character-2-bold-mono-font-weight);
1139
+ letter-spacing: var(--character-2-bold-mono-letter-spacing);
1140
+ line-height: var(--character-2-bold-mono-line-height);
413
1141
  }
414
1142
  .character-3-regular-pro {
415
- font-family: var(--font-family-pro);
416
- font-size: var(--font-size-16);
417
- font-weight: var(--font-weight-char-normal);
418
- letter-spacing: var(--letter-spacing-wider);
419
- line-height: var(--line-height-24);
1143
+ font-family: var(--character-3-regular-pro-font-family);
1144
+ font-size: var(--character-3-regular-pro-font-size);
1145
+ font-weight: var(--character-3-regular-pro-font-weight);
1146
+ letter-spacing: var(--character-3-regular-pro-letter-spacing);
1147
+ line-height: var(--character-3-regular-pro-line-height);
420
1148
  }
421
1149
  .character-3-regular-mono {
422
- font-family: var(--font-family-mono);
423
- font-size: var(--font-size-16);
424
- font-weight: var(--font-weight-char-normal);
425
- letter-spacing: var(--letter-spacing-wider);
426
- line-height: var(--line-height-24);
1150
+ font-family: var(--character-3-regular-mono-font-family);
1151
+ font-size: var(--character-3-regular-mono-font-size);
1152
+ font-weight: var(--character-3-regular-mono-font-weight);
1153
+ letter-spacing: var(--character-3-regular-mono-letter-spacing);
1154
+ line-height: var(--character-3-regular-mono-line-height);
427
1155
  }
428
1156
  .character-3-bold-pro {
429
- font-family: var(--font-family-pro);
430
- font-size: var(--font-size-16);
431
- font-weight: var(--font-weight-char-bold);
432
- letter-spacing: var(--letter-spacing-wider);
433
- line-height: var(--line-height-24);
1157
+ font-family: var(--character-3-bold-pro-font-family);
1158
+ font-size: var(--character-3-bold-pro-font-size);
1159
+ font-weight: var(--character-3-bold-pro-font-weight);
1160
+ letter-spacing: var(--character-3-bold-pro-letter-spacing);
1161
+ line-height: var(--character-3-bold-pro-line-height);
434
1162
  }
435
1163
  .character-3-bold-mono {
436
- font-family: var(--font-family-mono);
437
- font-size: var(--font-size-16);
438
- font-weight: var(--font-weight-char-bold);
439
- letter-spacing: var(--letter-spacing-wider);
440
- line-height: var(--line-height-24);
1164
+ font-family: var(--character-3-bold-mono-font-family);
1165
+ font-size: var(--character-3-bold-mono-font-size);
1166
+ font-weight: var(--character-3-bold-mono-font-weight);
1167
+ letter-spacing: var(--character-3-bold-mono-letter-spacing);
1168
+ line-height: var(--character-3-bold-mono-line-height);
441
1169
  }
442
1170
  .character-4-regular-pro {
443
- font-family: var(--font-family-pro);
444
- font-size: var(--font-size-18);
445
- font-weight: var(--font-weight-char-normal);
446
- letter-spacing: var(--letter-spacing-wider);
447
- line-height: var(--line-height-28);
1171
+ font-family: var(--character-4-regular-pro-font-family);
1172
+ font-size: var(--character-4-regular-pro-font-size);
1173
+ font-weight: var(--character-4-regular-pro-font-weight);
1174
+ letter-spacing: var(--character-4-regular-pro-letter-spacing);
1175
+ line-height: var(--character-4-regular-pro-line-height);
448
1176
  }
449
1177
  .character-4-regular-mono {
450
- font-family: var(--font-family-mono);
451
- font-size: var(--font-size-18);
452
- font-weight: var(--font-weight-char-normal);
453
- letter-spacing: var(--letter-spacing-wider);
454
- line-height: var(--line-height-32);
1178
+ font-family: var(--character-4-regular-mono-font-family);
1179
+ font-size: var(--character-4-regular-mono-font-size);
1180
+ font-weight: var(--character-4-regular-mono-font-weight);
1181
+ letter-spacing: var(--character-4-regular-mono-letter-spacing);
1182
+ line-height: var(--character-4-regular-mono-line-height);
455
1183
  }
456
1184
  .character-4-bold-pro {
457
- font-family: var(--font-family-pro);
458
- font-size: var(--font-size-18);
459
- font-weight: var(--font-weight-char-bold);
460
- letter-spacing: var(--letter-spacing-wider);
461
- line-height: var(--line-height-28);
1185
+ font-family: var(--character-4-bold-pro-font-family);
1186
+ font-size: var(--character-4-bold-pro-font-size);
1187
+ font-weight: var(--character-4-bold-pro-font-weight);
1188
+ letter-spacing: var(--character-4-bold-pro-letter-spacing);
1189
+ line-height: var(--character-4-bold-pro-line-height);
462
1190
  }
463
1191
  .character-4-bold-mono {
464
- font-family: var(--font-family-mono);
465
- font-size: var(--font-size-18);
466
- font-weight: var(--font-weight-char-bold);
467
- letter-spacing: var(--letter-spacing-wider);
468
- line-height: var(--line-height-28);
1192
+ font-family: var(--character-4-bold-mono-font-family);
1193
+ font-size: var(--character-4-bold-mono-font-size);
1194
+ font-weight: var(--character-4-bold-mono-font-weight);
1195
+ letter-spacing: var(--character-4-bold-mono-letter-spacing);
1196
+ line-height: var(--character-4-bold-mono-line-height);
469
1197
  }
470
1198
  .character-5-regular-pro {
471
- font-family: var(--font-family-pro);
472
- font-size: var(--font-size-20);
473
- font-weight: var(--font-weight-char-normal);
474
- letter-spacing: var(--letter-spacing-wider);
475
- line-height: var(--line-height-28);
1199
+ font-family: var(--character-5-regular-pro-font-family);
1200
+ font-size: var(--character-5-regular-pro-font-size);
1201
+ font-weight: var(--character-5-regular-pro-font-weight);
1202
+ letter-spacing: var(--character-5-regular-pro-letter-spacing);
1203
+ line-height: var(--character-5-regular-pro-line-height);
476
1204
  }
477
1205
  .character-5-regular-mono {
478
- font-family: var(--font-family-mono);
479
- font-size: var(--font-size-20);
480
- font-weight: var(--font-weight-char-normal);
481
- letter-spacing: var(--letter-spacing-wider);
482
- line-height: var(--line-height-32);
1206
+ font-family: var(--character-5-regular-mono-font-family);
1207
+ font-size: var(--character-5-regular-mono-font-size);
1208
+ font-weight: var(--character-5-regular-mono-font-weight);
1209
+ letter-spacing: var(--character-5-regular-mono-letter-spacing);
1210
+ line-height: var(--character-5-regular-mono-line-height);
483
1211
  }
484
1212
  .character-5-bold-pro {
485
- font-family: var(--font-family-pro);
486
- font-size: var(--font-size-20);
487
- font-weight: var(--font-weight-char-bold);
488
- letter-spacing: var(--letter-spacing-wider);
489
- line-height: var(--line-height-32);
1213
+ font-family: var(--character-5-bold-pro-font-family);
1214
+ font-size: var(--character-5-bold-pro-font-size);
1215
+ font-weight: var(--character-5-bold-pro-font-weight);
1216
+ letter-spacing: var(--character-5-bold-pro-letter-spacing);
1217
+ line-height: var(--character-5-bold-pro-line-height);
490
1218
  }
491
1219
  .character-5-bold-mono {
492
- font-family: var(--font-family-mono);
493
- font-size: var(--font-size-20);
494
- font-weight: var(--font-weight-char-bold);
495
- letter-spacing: var(--letter-spacing-wider);
496
- line-height: var(--line-height-32);
1220
+ font-family: var(--character-5-bold-mono-font-family);
1221
+ font-size: var(--character-5-bold-mono-font-size);
1222
+ font-weight: var(--character-5-bold-mono-font-weight);
1223
+ letter-spacing: var(--character-5-bold-mono-letter-spacing);
1224
+ line-height: var(--character-5-bold-mono-line-height);
497
1225
  }
498
1226
  .character-6-regular-pro {
499
- font-family: var(--font-family-pro);
500
- font-size: var(--font-size-24);
501
- font-weight: var(--font-weight-char-normal);
502
- letter-spacing: var(--letter-spacing-wider);
503
- line-height: var(--line-height-36);
1227
+ font-family: var(--character-6-regular-pro-font-family);
1228
+ font-size: var(--character-6-regular-pro-font-size);
1229
+ font-weight: var(--character-6-regular-pro-font-weight);
1230
+ letter-spacing: var(--character-6-regular-pro-letter-spacing);
1231
+ line-height: var(--character-6-regular-pro-line-height);
504
1232
  }
505
1233
  .character-6-regular-mono {
506
- font-family: var(--font-family-mono);
507
- font-size: var(--font-size-24);
508
- font-weight: var(--font-weight-char-normal);
509
- letter-spacing: var(--letter-spacing-wider);
510
- line-height: var(--line-height-36);
1234
+ font-family: var(--character-6-regular-mono-font-family);
1235
+ font-size: var(--character-6-regular-mono-font-size);
1236
+ font-weight: var(--character-6-regular-mono-font-weight);
1237
+ letter-spacing: var(--character-6-regular-mono-letter-spacing);
1238
+ line-height: var(--character-6-regular-mono-line-height);
511
1239
  }
512
1240
  .character-6-bold-pro {
513
- font-family: var(--font-family-pro);
514
- font-size: var(--font-size-24);
515
- font-weight: var(--font-weight-char-bold);
516
- letter-spacing: var(--letter-spacing-wider);
517
- line-height: var(--line-height-36);
1241
+ font-family: var(--character-6-bold-pro-font-family);
1242
+ font-size: var(--character-6-bold-pro-font-size);
1243
+ font-weight: var(--character-6-bold-pro-font-weight);
1244
+ letter-spacing: var(--character-6-bold-pro-letter-spacing);
1245
+ line-height: var(--character-6-bold-pro-line-height);
518
1246
  }
519
1247
  .character-6-bold-mono {
520
- font-family: var(--font-family-mono);
521
- font-size: var(--font-size-24);
522
- font-weight: var(--font-weight-char-bold);
523
- letter-spacing: var(--letter-spacing-wider);
524
- line-height: var(--line-height-36);
1248
+ font-family: var(--character-6-bold-mono-font-family);
1249
+ font-size: var(--character-6-bold-mono-font-size);
1250
+ font-weight: var(--character-6-bold-mono-font-weight);
1251
+ letter-spacing: var(--character-6-bold-mono-letter-spacing);
1252
+ line-height: var(--character-6-bold-mono-line-height);
525
1253
  }
526
1254
  .character-7-regular-pro {
527
- font-family: var(--font-family-pro);
528
- font-size: var(--font-size-28);
529
- font-weight: var(--font-weight-char-normal);
530
- letter-spacing: var(--letter-spacing-wider);
531
- line-height: var(--line-height-44);
1255
+ font-family: var(--character-7-regular-pro-font-family);
1256
+ font-size: var(--character-7-regular-pro-font-size);
1257
+ font-weight: var(--character-7-regular-pro-font-weight);
1258
+ letter-spacing: var(--character-7-regular-pro-letter-spacing);
1259
+ line-height: var(--character-7-regular-pro-line-height);
532
1260
  }
533
1261
  .character-7-regular-mono {
534
- font-family: var(--font-family-mono);
535
- font-size: var(--font-size-28);
536
- font-weight: var(--font-weight-char-normal);
537
- letter-spacing: var(--letter-spacing-wider);
538
- line-height: var(--line-height-44);
1262
+ font-family: var(--character-7-regular-mono-font-family);
1263
+ font-size: var(--character-7-regular-mono-font-size);
1264
+ font-weight: var(--character-7-regular-mono-font-weight);
1265
+ letter-spacing: var(--character-7-regular-mono-letter-spacing);
1266
+ line-height: var(--character-7-regular-mono-line-height);
539
1267
  }
540
1268
  .character-7-bold-pro {
541
- font-family: var(--font-family-pro);
542
- font-size: var(--font-size-28);
543
- font-weight: var(--font-weight-char-bold);
544
- letter-spacing: var(--letter-spacing-wider);
545
- line-height: var(--line-height-44);
1269
+ font-family: var(--character-7-bold-pro-font-family);
1270
+ font-size: var(--character-7-bold-pro-font-size);
1271
+ font-weight: var(--character-7-bold-pro-font-weight);
1272
+ letter-spacing: var(--character-7-bold-pro-letter-spacing);
1273
+ line-height: var(--character-7-bold-pro-line-height);
546
1274
  }
547
1275
  .character-7-bold-mono {
548
- font-family: var(--font-family-mono);
549
- font-size: var(--font-size-28);
550
- font-weight: var(--font-weight-char-bold);
551
- letter-spacing: var(--letter-spacing-wider);
552
- line-height: var(--line-height-44);
1276
+ font-family: var(--character-7-bold-mono-font-family);
1277
+ font-size: var(--character-7-bold-mono-font-size);
1278
+ font-weight: var(--character-7-bold-mono-font-weight);
1279
+ letter-spacing: var(--character-7-bold-mono-letter-spacing);
1280
+ line-height: var(--character-7-bold-mono-line-height);
553
1281
  }
554
1282
  .character-8-regular-pro {
555
- font-family: var(--font-family-pro);
556
- font-size: var(--font-size-32);
557
- font-weight: var(--font-weight-char-normal);
558
- letter-spacing: var(--letter-spacing-wider);
559
- line-height: var(--line-height-48);
1283
+ font-family: var(--character-8-regular-pro-font-family);
1284
+ font-size: var(--character-8-regular-pro-font-size);
1285
+ font-weight: var(--character-8-regular-pro-font-weight);
1286
+ letter-spacing: var(--character-8-regular-pro-letter-spacing);
1287
+ line-height: var(--character-8-regular-pro-line-height);
560
1288
  }
561
1289
  .character-8-regular-mono {
562
- font-family: var(--font-family-mono);
563
- font-size: var(--font-size-32);
564
- font-weight: var(--font-weight-char-normal);
565
- letter-spacing: var(--letter-spacing-wider);
566
- line-height: var(--line-height-48);
1290
+ font-family: var(--character-8-regular-mono-font-family);
1291
+ font-size: var(--character-8-regular-mono-font-size);
1292
+ font-weight: var(--character-8-regular-mono-font-weight);
1293
+ letter-spacing: var(--character-8-regular-mono-letter-spacing);
1294
+ line-height: var(--character-8-regular-mono-line-height);
567
1295
  }
568
1296
  .character-8-bold-pro {
569
- font-family: var(--font-family-pro);
570
- font-size: var(--font-size-32);
571
- font-weight: var(--font-weight-char-bold);
572
- letter-spacing: var(--letter-spacing-wider);
573
- line-height: var(--line-height-48);
1297
+ font-family: var(--character-8-bold-pro-font-family);
1298
+ font-size: var(--character-8-bold-pro-font-size);
1299
+ font-weight: var(--character-8-bold-pro-font-weight);
1300
+ letter-spacing: var(--character-8-bold-pro-letter-spacing);
1301
+ line-height: var(--character-8-bold-pro-line-height);
574
1302
  }
575
1303
  .character-8-bold-mono {
576
- font-family: var(--font-family-mono);
577
- font-size: var(--font-size-32);
578
- font-weight: var(--font-weight-char-bold);
579
- letter-spacing: var(--letter-spacing-wider);
580
- line-height: var(--line-height-48);
1304
+ font-family: var(--character-8-bold-mono-font-family);
1305
+ font-size: var(--character-8-bold-mono-font-size);
1306
+ font-weight: var(--character-8-bold-mono-font-weight);
1307
+ letter-spacing: var(--character-8-bold-mono-letter-spacing);
1308
+ line-height: var(--character-8-bold-mono-line-height);
581
1309
  }
582
1310
  .character-9-regular-pro {
583
- font-family: var(--font-family-pro);
584
- font-size: var(--font-size-36);
585
- font-weight: var(--font-weight-char-normal);
586
- letter-spacing: var(--letter-spacing-wider);
587
- line-height: var(--line-height-56);
1311
+ font-family: var(--character-9-regular-pro-font-family);
1312
+ font-size: var(--character-9-regular-pro-font-size);
1313
+ font-weight: var(--character-9-regular-pro-font-weight);
1314
+ letter-spacing: var(--character-9-regular-pro-letter-spacing);
1315
+ line-height: var(--character-9-regular-pro-line-height);
588
1316
  }
589
1317
  .character-9-regular-mono {
590
- font-family: var(--font-family-mono);
591
- font-size: var(--font-size-36);
592
- font-weight: var(--font-weight-char-normal);
593
- letter-spacing: var(--letter-spacing-wider);
594
- line-height: var(--line-height-56);
1318
+ font-family: var(--character-9-regular-mono-font-family);
1319
+ font-size: var(--character-9-regular-mono-font-size);
1320
+ font-weight: var(--character-9-regular-mono-font-weight);
1321
+ letter-spacing: var(--character-9-regular-mono-letter-spacing);
1322
+ line-height: var(--character-9-regular-mono-line-height);
595
1323
  }
596
1324
  .character-9-bold-pro {
597
- font-family: var(--font-family-pro);
598
- font-size: var(--font-size-36);
599
- font-weight: var(--font-weight-char-bold);
600
- letter-spacing: var(--letter-spacing-wider);
601
- line-height: var(--line-height-56);
1325
+ font-family: var(--character-9-bold-pro-font-family);
1326
+ font-size: var(--character-9-bold-pro-font-size);
1327
+ font-weight: var(--character-9-bold-pro-font-weight);
1328
+ letter-spacing: var(--character-9-bold-pro-letter-spacing);
1329
+ line-height: var(--character-9-bold-pro-line-height);
602
1330
  }
603
1331
  .character-9-bold-mono {
604
- font-family: var(--font-family-mono);
605
- font-size: var(--font-size-36);
606
- font-weight: var(--font-weight-char-bold);
607
- letter-spacing: var(--letter-spacing-wider);
608
- line-height: var(--line-height-56);
1332
+ font-family: var(--character-9-bold-mono-font-family);
1333
+ font-size: var(--character-9-bold-mono-font-size);
1334
+ font-weight: var(--character-9-bold-mono-font-weight);
1335
+ letter-spacing: var(--character-9-bold-mono-letter-spacing);
1336
+ line-height: var(--character-9-bold-mono-line-height);
609
1337
  }
610
1338
  .character-10-regular-pro {
611
- font-family: var(--font-family-pro);
612
- font-size: var(--font-size-42);
613
- font-weight: var(--font-weight-char-normal);
614
- letter-spacing: var(--letter-spacing-wider);
615
- line-height: var(--line-height-64);
1339
+ font-family: var(--character-10-regular-pro-font-family);
1340
+ font-size: var(--character-10-regular-pro-font-size);
1341
+ font-weight: var(--character-10-regular-pro-font-weight);
1342
+ letter-spacing: var(--character-10-regular-pro-letter-spacing);
1343
+ line-height: var(--character-10-regular-pro-line-height);
616
1344
  }
617
1345
  .character-10-regular-mono {
618
- font-family: var(--font-family-mono);
619
- font-size: var(--font-size-42);
620
- font-weight: var(--font-weight-char-normal);
621
- letter-spacing: var(--letter-spacing-wider);
622
- line-height: var(--line-height-64);
1346
+ font-family: var(--character-10-regular-mono-font-family);
1347
+ font-size: var(--character-10-regular-mono-font-size);
1348
+ font-weight: var(--character-10-regular-mono-font-weight);
1349
+ letter-spacing: var(--character-10-regular-mono-letter-spacing);
1350
+ line-height: var(--character-10-regular-mono-line-height);
623
1351
  }
624
1352
  .character-10-bold-pro {
625
- font-family: var(--font-family-pro);
626
- font-size: var(--font-size-42);
627
- font-weight: var(--font-weight-char-bold);
628
- letter-spacing: var(--letter-spacing-wider);
629
- line-height: var(--line-height-64);
1353
+ font-family: var(--character-10-bold-pro-font-family);
1354
+ font-size: var(--character-10-bold-pro-font-size);
1355
+ font-weight: var(--character-10-bold-pro-font-weight);
1356
+ letter-spacing: var(--character-10-bold-pro-letter-spacing);
1357
+ line-height: var(--character-10-bold-pro-line-height);
630
1358
  }
631
1359
  .character-10-bold-mono {
632
- font-family: var(--font-family-mono);
633
- font-size: var(--font-size-42);
634
- font-weight: var(--font-weight-char-bold);
635
- letter-spacing: var(--letter-spacing-wider);
636
- line-height: var(--line-height-64);
1360
+ font-family: var(--character-10-bold-mono-font-family);
1361
+ font-size: var(--character-10-bold-mono-font-size);
1362
+ font-weight: var(--character-10-bold-mono-font-weight);
1363
+ letter-spacing: var(--character-10-bold-mono-letter-spacing);
1364
+ line-height: var(--character-10-bold-mono-line-height);
637
1365
  }
638
1366
  .character-11-regular-pro {
639
- font-family: var(--font-family-pro);
640
- font-size: var(--font-size-48);
641
- font-weight: var(--font-weight-char-normal);
642
- letter-spacing: var(--letter-spacing-wider);
643
- line-height: var(--line-height-72);
1367
+ font-family: var(--character-11-regular-pro-font-family);
1368
+ font-size: var(--character-11-regular-pro-font-size);
1369
+ font-weight: var(--character-11-regular-pro-font-weight);
1370
+ letter-spacing: var(--character-11-regular-pro-letter-spacing);
1371
+ line-height: var(--character-11-regular-pro-line-height);
644
1372
  }
645
1373
  .character-11-regular-mono {
646
- font-family: var(--font-family-mono);
647
- font-size: var(--font-size-48);
648
- font-weight: var(--font-weight-char-normal);
649
- letter-spacing: var(--letter-spacing-wider);
650
- line-height: var(--line-height-72);
1374
+ font-family: var(--character-11-regular-mono-font-family);
1375
+ font-size: var(--character-11-regular-mono-font-size);
1376
+ font-weight: var(--character-11-regular-mono-font-weight);
1377
+ letter-spacing: var(--character-11-regular-mono-letter-spacing);
1378
+ line-height: var(--character-11-regular-mono-line-height);
651
1379
  }
652
1380
  .character-11-bold-pro {
653
- font-family: var(--font-family-pro);
654
- font-size: var(--font-size-48);
655
- font-weight: var(--font-weight-char-bold);
656
- letter-spacing: var(--letter-spacing-wider);
657
- line-height: var(--line-height-72);
1381
+ font-family: var(--character-11-bold-pro-font-family);
1382
+ font-size: var(--character-11-bold-pro-font-size);
1383
+ font-weight: var(--character-11-bold-pro-font-weight);
1384
+ letter-spacing: var(--character-11-bold-pro-letter-spacing);
1385
+ line-height: var(--character-11-bold-pro-line-height);
658
1386
  }
659
1387
  .character-11-bold-mono {
660
- font-family: var(--font-family-mono);
661
- font-size: var(--font-size-48);
662
- font-weight: var(--font-weight-char-bold);
663
- letter-spacing: var(--letter-spacing-wider);
664
- line-height: var(--line-height-72);
1388
+ font-family: var(--character-11-bold-mono-font-family);
1389
+ font-size: var(--character-11-bold-mono-font-size);
1390
+ font-weight: var(--character-11-bold-mono-font-weight);
1391
+ letter-spacing: var(--character-11-bold-mono-letter-spacing);
1392
+ line-height: var(--character-11-bold-mono-line-height);
665
1393
  }
666
1394
  .character-12-regular-pro {
667
- font-family: var(--font-family-pro);
668
- font-size: var(--font-size-54);
669
- font-weight: var(--font-weight-char-normal);
670
- letter-spacing: var(--letter-spacing-wider);
671
- line-height: var(--line-height-84);
1395
+ font-family: var(--character-12-regular-pro-font-family);
1396
+ font-size: var(--character-12-regular-pro-font-size);
1397
+ font-weight: var(--character-12-regular-pro-font-weight);
1398
+ letter-spacing: var(--character-12-regular-pro-letter-spacing);
1399
+ line-height: var(--character-12-regular-pro-line-height);
672
1400
  }
673
1401
  .character-12-regular-mono {
674
- font-family: var(--font-family-mono);
675
- font-size: var(--font-size-54);
676
- font-weight: var(--font-weight-char-normal);
677
- letter-spacing: var(--letter-spacing-wider);
678
- line-height: var(--line-height-84);
1402
+ font-family: var(--character-12-regular-mono-font-family);
1403
+ font-size: var(--character-12-regular-mono-font-size);
1404
+ font-weight: var(--character-12-regular-mono-font-weight);
1405
+ letter-spacing: var(--character-12-regular-mono-letter-spacing);
1406
+ line-height: var(--character-12-regular-mono-line-height);
679
1407
  }
680
1408
  .character-12-bold-pro {
681
- font-family: var(--font-family-pro);
682
- font-size: var(--font-size-54);
683
- font-weight: var(--font-weight-char-bold);
684
- letter-spacing: var(--letter-spacing-wider);
685
- line-height: var(--line-height-84);
1409
+ font-family: var(--character-12-bold-pro-font-family);
1410
+ font-size: var(--character-12-bold-pro-font-size);
1411
+ font-weight: var(--character-12-bold-pro-font-weight);
1412
+ letter-spacing: var(--character-12-bold-pro-letter-spacing);
1413
+ line-height: var(--character-12-bold-pro-line-height);
686
1414
  }
687
1415
  .character-12-bold-mono {
688
- font-family: var(--font-family-mono);
689
- font-size: var(--font-size-54);
690
- font-weight: var(--font-weight-char-bold);
691
- letter-spacing: var(--letter-spacing-wider);
692
- line-height: var(--line-height-84);
1416
+ font-family: var(--character-12-bold-mono-font-family);
1417
+ font-size: var(--character-12-bold-mono-font-size);
1418
+ font-weight: var(--character-12-bold-mono-font-weight);
1419
+ letter-spacing: var(--character-12-bold-mono-letter-spacing);
1420
+ line-height: var(--character-12-bold-mono-line-height);
693
1421
  }
694
1422
  .icon-1-fill-0 {
695
1423
  /* アイコンスタイル */
696
- font-family: var(--font-family-icon);
697
- font-size: var(--font-size-12);
698
- font-weight: var(--font-weight-icon);
1424
+ font-family: var(--icon-1-fill-0-font-family);
1425
+ font-size: var(--icon-1-fill-0-font-size);
1426
+ font-weight: var(--icon-1-fill-0-font-weight);
699
1427
  font-variation-settings: var(--font-weight-icon-fill-0);
700
1428
  font-display: optional;
701
- letter-spacing: var(--letter-spacing-normal);
702
- line-height: var(--line-height-leading-none);
1429
+ letter-spacing: var(--icon-1-fill-0-letter-spacing);
1430
+ line-height: var(--icon-1-fill-0-line-height);
703
1431
  }
704
1432
  .icon-1-fill-1 {
705
- font-family: var(--font-family-icon);
706
- font-size: var(--font-size-12);
707
- font-weight: var(--font-weight-icon);
1433
+ font-family: var(--icon-1-fill-1-font-family);
1434
+ font-size: var(--icon-1-fill-1-font-size);
1435
+ font-weight: var(--icon-1-fill-1-font-weight);
708
1436
  font-variation-settings: var(--font-weight-icon-fill-1);
709
1437
  font-display: optional;
710
- letter-spacing: var(--letter-spacing-normal);
711
- line-height: var(--line-height-leading-none);
1438
+ letter-spacing: var(--icon-1-fill-1-letter-spacing);
1439
+ line-height: var(--icon-1-fill-1-line-height);
712
1440
  }
713
1441
  .icon-2-fill-0 {
714
- font-family: var(--font-family-icon);
715
- font-size: var(--font-size-14);
716
- font-weight: var(--font-weight-icon);
1442
+ font-family: var(--icon-2-fill-0-font-family);
1443
+ font-size: var(--icon-2-fill-0-font-size);
1444
+ font-weight: var(--icon-2-fill-0-font-weight);
717
1445
  font-variation-settings: var(--font-weight-icon-fill-0);
718
1446
  font-display: optional;
719
- letter-spacing: var(--letter-spacing-normal);
720
- line-height: var(--line-height-leading-none);
1447
+ letter-spacing: var(--icon-2-fill-0-letter-spacing);
1448
+ line-height: var(--icon-2-fill-0-line-height);
721
1449
  }
722
1450
  .icon-2-fill-1 {
723
- font-family: var(--font-family-icon);
724
- font-size: var(--font-size-14);
725
- font-weight: var(--font-weight-icon);
1451
+ font-family: var(--icon-2-fill-1-font-family);
1452
+ font-size: var(--icon-2-fill-1-font-size);
1453
+ font-weight: var(--icon-2-fill-1-font-weight);
726
1454
  font-variation-settings: var(--font-weight-icon-fill-1);
727
1455
  font-display: optional;
728
- letter-spacing: var(--letter-spacing-normal);
729
- line-height: var(--line-height-leading-none);
1456
+ letter-spacing: var(--icon-2-fill-1-letter-spacing);
1457
+ line-height: var(--icon-2-fill-1-line-height);
730
1458
  }
731
1459
  .icon-3-fill-0 {
732
- font-family: var(--font-family-icon);
733
- font-size: var(--font-size-16);
734
- font-weight: var(--font-weight-icon);
1460
+ font-family: var(--icon-3-fill-0-font-family);
1461
+ font-size: var(--icon-3-fill-0-font-size);
1462
+ font-weight: var(--icon-3-fill-0-font-weight);
735
1463
  font-variation-settings: var(--font-weight-icon-fill-0);
736
1464
  font-display: optional;
737
- letter-spacing: var(--letter-spacing-normal);
738
- line-height: var(--line-height-leading-none);
1465
+ letter-spacing: var(--icon-3-fill-0-letter-spacing);
1466
+ line-height: var(--icon-3-fill-0-line-height);
739
1467
  }
740
1468
  .icon-3-fill-1 {
741
- font-family: var(--font-family-icon);
742
- font-size: var(--font-size-16);
743
- font-weight: var(--font-weight-icon);
1469
+ font-family: var(--icon-3-fill-1-font-family);
1470
+ font-size: var(--icon-3-fill-1-font-size);
1471
+ font-weight: var(--icon-3-fill-1-font-weight);
744
1472
  font-variation-settings: var(--font-weight-icon-fill-1);
745
1473
  font-display: optional;
746
- letter-spacing: var(--letter-spacing-normal);
747
- line-height: var(--line-height-leading-none);
1474
+ letter-spacing: var(--icon-3-fill-1-letter-spacing);
1475
+ line-height: var(--icon-3-fill-1-line-height);
748
1476
  }
749
1477
  .icon-4-fill-0 {
750
- font-family: var(--font-family-icon);
751
- font-size: var(--font-size-18);
752
- font-weight: var(--font-weight-icon);
1478
+ font-family: var(--icon-4-fill-0-font-family);
1479
+ font-size: var(--icon-4-fill-0-font-size);
1480
+ font-weight: var(--icon-4-fill-0-font-weight);
753
1481
  font-variation-settings: var(--font-weight-icon-fill-0);
754
1482
  font-display: optional;
755
- letter-spacing: var(--letter-spacing-normal);
756
- line-height: var(--line-height-leading-none);
1483
+ letter-spacing: var(--icon-4-fill-0-letter-spacing);
1484
+ line-height: var(--icon-4-fill-0-line-height);
757
1485
  }
758
1486
  .icon-4-fill-1 {
759
- font-family: var(--font-family-icon);
760
- font-size: var(--font-size-18);
761
- font-weight: var(--font-weight-icon);
1487
+ font-family: var(--icon-4-fill-1-font-family);
1488
+ font-size: var(--icon-4-fill-1-font-size);
1489
+ font-weight: var(--icon-4-fill-1-font-weight);
762
1490
  font-variation-settings: var(--font-weight-icon-fill-1);
763
1491
  font-display: optional;
764
- letter-spacing: var(--letter-spacing-normal);
765
- line-height: var(--line-height-leading-none);
1492
+ letter-spacing: var(--icon-4-fill-1-letter-spacing);
1493
+ line-height: var(--icon-4-fill-1-line-height);
766
1494
  }
767
1495
  .icon-5-fill-0 {
768
- font-family: var(--font-family-icon);
769
- font-size: var(--font-size-20);
770
- font-weight: var(--font-weight-icon);
1496
+ font-family: var(--icon-5-fill-0-font-family);
1497
+ font-size: var(--icon-5-fill-0-font-size);
1498
+ font-weight: var(--icon-5-fill-0-font-weight);
771
1499
  font-variation-settings: var(--font-weight-icon-fill-0);
772
1500
  font-display: optional;
773
- letter-spacing: var(--letter-spacing-normal);
774
- line-height: var(--line-height-leading-none);
1501
+ letter-spacing: var(--icon-5-fill-0-letter-spacing);
1502
+ line-height: var(--icon-5-fill-0-line-height);
775
1503
  }
776
1504
  .icon-5-fill-1 {
777
- font-family: var(--font-family-icon);
778
- font-size: var(--font-size-20);
779
- font-weight: var(--font-weight-icon);
1505
+ font-family: var(--icon-5-fill-1-font-family);
1506
+ font-size: var(--icon-5-fill-1-font-size);
1507
+ font-weight: var(--icon-5-fill-1-font-weight);
780
1508
  font-variation-settings: var(--font-weight-icon-fill-1);
781
1509
  font-display: optional;
782
- letter-spacing: var(--letter-spacing-normal);
783
- line-height: var(--line-height-leading-none);
1510
+ letter-spacing: var(--icon-5-fill-1-letter-spacing);
1511
+ line-height: var(--icon-5-fill-1-line-height);
784
1512
  }
785
1513
  .icon-6-fill-0 {
786
- font-family: var(--font-family-icon);
787
- font-size: var(--font-size-24);
788
- font-weight: var(--font-weight-icon);
1514
+ font-family: var(--icon-6-fill-0-font-family);
1515
+ font-size: var(--icon-6-fill-0-font-size);
1516
+ font-weight: var(--icon-6-fill-0-font-weight);
789
1517
  font-variation-settings: var(--font-weight-icon-fill-0);
790
1518
  font-display: optional;
791
- letter-spacing: var(--letter-spacing-normal);
792
- line-height: var(--line-height-leading-none);
1519
+ letter-spacing: var(--icon-6-fill-0-letter-spacing);
1520
+ line-height: var(--icon-6-fill-0-line-height);
793
1521
  }
794
1522
  .icon-6-fill-1 {
795
- font-family: var(--font-family-icon);
796
- font-size: var(--font-size-24);
797
- font-weight: var(--font-weight-icon);
1523
+ font-family: var(--icon-6-fill-1-font-family);
1524
+ font-size: var(--icon-6-fill-1-font-size);
1525
+ font-weight: var(--icon-6-fill-1-font-weight);
798
1526
  font-variation-settings: var(--font-weight-icon-fill-1);
799
1527
  font-display: optional;
800
- letter-spacing: var(--letter-spacing-normal);
801
- line-height: var(--line-height-leading-none);
1528
+ letter-spacing: var(--icon-6-fill-1-letter-spacing);
1529
+ line-height: var(--icon-6-fill-1-line-height);
802
1530
  }
803
1531
  .icon-7-fill-0 {
804
- font-family: var(--font-family-icon);
805
- font-size: var(--font-size-28);
806
- font-weight: var(--font-weight-icon);
1532
+ font-family: var(--icon-7-fill-0-font-family);
1533
+ font-size: var(--icon-7-fill-0-font-size);
1534
+ font-weight: var(--icon-7-fill-0-font-weight);
807
1535
  font-variation-settings: var(--font-weight-icon-fill-0);
808
1536
  font-display: optional;
809
- letter-spacing: var(--letter-spacing-normal);
810
- line-height: var(--line-height-leading-none);
1537
+ letter-spacing: var(--icon-7-fill-0-letter-spacing);
1538
+ line-height: var(--icon-7-fill-0-line-height);
811
1539
  }
812
1540
  .icon-7-fill-1 {
813
- font-family: var(--font-family-icon);
814
- font-size: var(--font-size-28);
815
- font-weight: var(--font-weight-icon);
1541
+ font-family: var(--icon-7-fill-1-font-family);
1542
+ font-size: var(--icon-7-fill-1-font-size);
1543
+ font-weight: var(--icon-7-fill-1-font-weight);
816
1544
  font-variation-settings: var(--font-weight-icon-fill-1);
817
1545
  font-display: optional;
818
- letter-spacing: var(--letter-spacing-normal);
819
- line-height: var(--line-height-leading-none);
1546
+ letter-spacing: var(--icon-7-fill-1-letter-spacing);
1547
+ line-height: var(--icon-7-fill-1-line-height);
820
1548
  }
821
1549
  .icon-8-fill-0 {
822
- font-family: var(--font-family-icon);
823
- font-size: var(--font-size-32);
824
- font-weight: var(--font-weight-icon);
1550
+ font-family: var(--icon-8-fill-0-font-family);
1551
+ font-size: var(--icon-8-fill-0-font-size);
1552
+ font-weight: var(--icon-8-fill-0-font-weight);
825
1553
  font-variation-settings: var(--font-weight-icon-fill-0);
826
1554
  font-display: optional;
827
- letter-spacing: var(--letter-spacing-normal);
828
- line-height: var(--line-height-leading-none);
1555
+ letter-spacing: var(--icon-8-fill-0-letter-spacing);
1556
+ line-height: var(--icon-8-fill-0-line-height);
829
1557
  }
830
1558
  .icon-8-fill-1 {
831
- font-family: var(--font-family-icon);
832
- font-size: var(--font-size-32);
833
- font-weight: var(--font-weight-icon);
1559
+ font-family: var(--icon-8-fill-1-font-family);
1560
+ font-size: var(--icon-8-fill-1-font-size);
1561
+ font-weight: var(--icon-8-fill-1-font-weight);
834
1562
  font-variation-settings: var(--font-weight-icon-fill-1);
835
1563
  font-display: optional;
836
- letter-spacing: var(--letter-spacing-normal);
837
- line-height: var(--line-height-leading-none);
1564
+ letter-spacing: var(--icon-8-fill-1-letter-spacing);
1565
+ line-height: var(--icon-8-fill-1-line-height);
838
1566
  }
839
1567
  .icon-9-fill-0 {
840
- font-family: var(--font-family-icon);
841
- font-size: var(--font-size-36);
842
- font-weight: var(--font-weight-icon);
1568
+ font-family: var(--icon-9-fill-0-font-family);
1569
+ font-size: var(--icon-9-fill-0-font-size);
1570
+ font-weight: var(--icon-9-fill-0-font-weight);
843
1571
  font-variation-settings: var(--font-weight-icon-fill-0);
844
1572
  font-display: optional;
845
- letter-spacing: var(--letter-spacing-normal);
846
- line-height: var(--line-height-leading-none);
1573
+ letter-spacing: var(--icon-9-fill-0-letter-spacing);
1574
+ line-height: var(--icon-9-fill-0-line-height);
847
1575
  }
848
1576
  .icon-9-fill-1 {
849
- font-family: var(--font-family-icon);
850
- font-size: var(--font-size-36);
851
- font-weight: var(--font-weight-icon);
1577
+ font-family: var(--icon-9-fill-1-font-family);
1578
+ font-size: var(--icon-9-fill-1-font-size);
1579
+ font-weight: var(--icon-9-fill-1-font-weight);
852
1580
  font-variation-settings: var(--font-weight-icon-fill-1);
853
1581
  font-display: optional;
854
- letter-spacing: var(--letter-spacing-normal);
855
- line-height: var(--line-height-leading-none);
1582
+ letter-spacing: var(--icon-9-fill-1-letter-spacing);
1583
+ line-height: var(--icon-9-fill-1-line-height);
856
1584
  }
857
1585
  .icon-10-fill-0 {
858
- font-family: var(--font-family-icon);
859
- font-size: var(--font-size-42);
860
- font-weight: var(--font-weight-icon);
1586
+ font-family: var(--icon-10-fill-0-font-family);
1587
+ font-size: var(--icon-10-fill-0-font-size);
1588
+ font-weight: var(--icon-10-fill-0-font-weight);
861
1589
  font-variation-settings: var(--font-weight-icon-fill-0);
862
1590
  font-display: optional;
863
- letter-spacing: var(--letter-spacing-normal);
864
- line-height: var(--line-height-leading-none);
1591
+ letter-spacing: var(--icon-10-fill-0-letter-spacing);
1592
+ line-height: var(--icon-10-fill-0-line-height);
865
1593
  }
866
1594
  .icon-10-fill-1 {
867
- font-family: var(--font-family-icon);
868
- font-size: var(--font-size-42);
869
- font-weight: var(--font-weight-icon);
1595
+ font-family: var(--icon-10-fill-1-font-family);
1596
+ font-size: var(--icon-10-fill-1-font-size);
1597
+ font-weight: var(--icon-10-fill-1-font-weight);
870
1598
  font-variation-settings: var(--font-weight-icon-fill-1);
871
1599
  font-display: optional;
872
- letter-spacing: var(--letter-spacing-normal);
873
- line-height: var(--line-height-leading-none);
1600
+ letter-spacing: var(--icon-10-fill-1-letter-spacing);
1601
+ line-height: var(--icon-10-fill-1-line-height);
874
1602
  }
875
1603
  .icon-11-fill-0 {
876
- font-family: var(--font-family-icon);
877
- font-size: var(--font-size-48);
878
- font-weight: var(--font-weight-icon);
1604
+ font-family: var(--icon-11-fill-0-font-family);
1605
+ font-size: var(--icon-11-fill-0-font-size);
1606
+ font-weight: var(--icon-11-fill-0-font-weight);
879
1607
  font-variation-settings: var(--font-weight-icon-fill-0);
880
1608
  font-display: optional;
881
- letter-spacing: var(--letter-spacing-normal);
882
- line-height: var(--line-height-leading-none);
1609
+ letter-spacing: var(--icon-11-fill-0-letter-spacing);
1610
+ line-height: var(--icon-11-fill-0-line-height);
883
1611
  }
884
1612
  .icon-11-fill-1 {
885
- font-family: var(--font-family-icon);
886
- font-size: var(--font-size-48);
887
- font-weight: var(--font-weight-icon);
1613
+ font-family: var(--icon-11-fill-1-font-family);
1614
+ font-size: var(--icon-11-fill-1-font-size);
1615
+ font-weight: var(--icon-11-fill-1-font-weight);
888
1616
  font-variation-settings: var(--font-weight-icon-fill-1);
889
1617
  font-display: optional;
890
- letter-spacing: var(--letter-spacing-normal);
891
- line-height: var(--line-height-leading-none);
1618
+ letter-spacing: var(--icon-11-fill-1-letter-spacing);
1619
+ line-height: var(--icon-11-fill-1-line-height);
892
1620
  }
893
1621
  .icon-12-fill-0 {
894
- font-family: var(--font-family-icon);
895
- font-size: var(--font-size-54);
896
- font-weight: var(--font-weight-icon);
1622
+ font-family: var(--icon-12-fill-0-font-family);
1623
+ font-size: var(--icon-12-fill-0-font-size);
1624
+ font-weight: var(--icon-12-fill-0-font-weight);
897
1625
  font-variation-settings: var(--font-weight-icon-fill-0);
898
1626
  font-display: optional;
899
- letter-spacing: var(--letter-spacing-normal);
900
- line-height: var(--line-height-leading-none);
1627
+ letter-spacing: var(--icon-12-fill-0-letter-spacing);
1628
+ line-height: var(--icon-12-fill-0-line-height);
901
1629
  }
902
1630
  .icon-12-fill-1 {
903
- font-family: var(--font-family-icon);
904
- font-size: var(--font-size-54);
905
- font-weight: var(--font-weight-icon);
1631
+ font-family: var(--icon-12-fill-1-font-family);
1632
+ font-size: var(--icon-12-fill-1-font-size);
1633
+ font-weight: var(--icon-12-fill-1-font-weight);
906
1634
  font-variation-settings: var(--font-weight-icon-fill-1);
907
1635
  font-display: optional;
908
- letter-spacing: var(--letter-spacing-normal);
909
- line-height: var(--line-height-leading-none);
1636
+ letter-spacing: var(--icon-12-fill-1-letter-spacing);
1637
+ line-height: var(--icon-12-fill-1-line-height);
910
1638
  }
911
1639
  }