sparkle-design-cli 2.4.2 → 2.5.0-beta.2

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,6 +781,54 @@
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
833
  /* NOTE: 各宣言は上の「セマンティックトークン」:root ブロックにある同名変数を
214
834
  自己参照している(例: --color-primary-500: var(--color-primary-500))。
@@ -319,14 +939,128 @@
319
939
  --color-base-800: var(--color-base-800);
320
940
  --color-base-900: var(--color-base-900);
321
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
+
322
1054
  /* 角丸 - デフォルト値は設定可能 */
323
1055
  --radius-divide: var(--radius-divide);
324
1056
  --radius-minimum: var(--radius-minimum);
325
1057
  --radius-notice: var(--radius-notice);
326
1058
  --radius-action: var(--radius-action);
327
- --radius-halfModal: var(--radius-halfModal);
1059
+ --radius-container: var(--radius-container);
328
1060
  --radius-modal: var(--radius-modal);
329
1061
  --radius-round: var(--radius-round);
1062
+ /* @deprecated beta 期間の後方互換エイリアス(`halfModal` → `container`)。 */
1063
+ --radius-halfModal: var(--radius-halfModal);
330
1064
 
331
1065
  /* シャドウ */
332
1066
  --shadow-base: var(--shadow-base);
@@ -350,556 +1084,556 @@
350
1084
  @layer utilities {
351
1085
  .character-1-regular-pro {
352
1086
  /* Character テキストスタイル */
353
- font-family: var(--font-family-pro);
354
- font-size: var(--font-size-12);
355
- font-weight: var(--font-weight-char-normal);
356
- letter-spacing: var(--letter-spacing-wider);
357
- 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);
358
1092
  }
359
1093
  .character-1-regular-mono {
360
- font-family: var(--font-family-mono);
361
- font-size: var(--font-size-12);
362
- font-weight: var(--font-weight-char-normal);
363
- letter-spacing: var(--letter-spacing-wider);
364
- 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);
365
1099
  }
366
1100
  .character-1-bold-pro {
367
- font-family: var(--font-family-pro);
368
- font-size: var(--font-size-12);
369
- font-weight: var(--font-weight-char-bold);
370
- letter-spacing: var(--letter-spacing-wider);
371
- 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);
372
1106
  }
373
1107
  .character-1-bold-mono {
374
- font-family: var(--font-family-mono);
375
- font-size: var(--font-size-12);
376
- font-weight: var(--font-weight-char-bold);
377
- letter-spacing: var(--letter-spacing-wider);
378
- 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);
379
1113
  }
380
1114
  .character-2-regular-pro {
381
- font-family: var(--font-family-pro);
382
- font-size: var(--font-size-14);
383
- font-weight: var(--font-weight-char-normal);
384
- letter-spacing: var(--letter-spacing-wider);
385
- 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);
386
1120
  }
387
1121
  .character-2-regular-mono {
388
- font-family: var(--font-family-mono);
389
- font-size: var(--font-size-14);
390
- font-weight: var(--font-weight-char-normal);
391
- letter-spacing: var(--letter-spacing-wider);
392
- 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);
393
1127
  }
394
1128
  .character-2-bold-pro {
395
- font-family: var(--font-family-pro);
396
- font-size: var(--font-size-14);
397
- font-weight: var(--font-weight-char-bold);
398
- letter-spacing: var(--letter-spacing-wider);
399
- 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);
400
1134
  }
401
1135
  .character-2-bold-mono {
402
- font-family: var(--font-family-mono);
403
- font-size: var(--font-size-14);
404
- font-weight: var(--font-weight-char-bold);
405
- letter-spacing: var(--letter-spacing-wider);
406
- 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);
407
1141
  }
408
1142
  .character-3-regular-pro {
409
- font-family: var(--font-family-pro);
410
- font-size: var(--font-size-16);
411
- font-weight: var(--font-weight-char-normal);
412
- letter-spacing: var(--letter-spacing-wider);
413
- 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);
414
1148
  }
415
1149
  .character-3-regular-mono {
416
- font-family: var(--font-family-mono);
417
- font-size: var(--font-size-16);
418
- font-weight: var(--font-weight-char-normal);
419
- letter-spacing: var(--letter-spacing-wider);
420
- 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);
421
1155
  }
422
1156
  .character-3-bold-pro {
423
- font-family: var(--font-family-pro);
424
- font-size: var(--font-size-16);
425
- font-weight: var(--font-weight-char-bold);
426
- letter-spacing: var(--letter-spacing-wider);
427
- 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);
428
1162
  }
429
1163
  .character-3-bold-mono {
430
- font-family: var(--font-family-mono);
431
- font-size: var(--font-size-16);
432
- font-weight: var(--font-weight-char-bold);
433
- letter-spacing: var(--letter-spacing-wider);
434
- 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);
435
1169
  }
436
1170
  .character-4-regular-pro {
437
- font-family: var(--font-family-pro);
438
- font-size: var(--font-size-18);
439
- font-weight: var(--font-weight-char-normal);
440
- letter-spacing: var(--letter-spacing-wider);
441
- 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);
442
1176
  }
443
1177
  .character-4-regular-mono {
444
- font-family: var(--font-family-mono);
445
- font-size: var(--font-size-18);
446
- font-weight: var(--font-weight-char-normal);
447
- letter-spacing: var(--letter-spacing-wider);
448
- 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);
449
1183
  }
450
1184
  .character-4-bold-pro {
451
- font-family: var(--font-family-pro);
452
- font-size: var(--font-size-18);
453
- font-weight: var(--font-weight-char-bold);
454
- letter-spacing: var(--letter-spacing-wider);
455
- 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);
456
1190
  }
457
1191
  .character-4-bold-mono {
458
- font-family: var(--font-family-mono);
459
- font-size: var(--font-size-18);
460
- font-weight: var(--font-weight-char-bold);
461
- letter-spacing: var(--letter-spacing-wider);
462
- 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);
463
1197
  }
464
1198
  .character-5-regular-pro {
465
- font-family: var(--font-family-pro);
466
- font-size: var(--font-size-20);
467
- font-weight: var(--font-weight-char-normal);
468
- letter-spacing: var(--letter-spacing-wider);
469
- 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);
470
1204
  }
471
1205
  .character-5-regular-mono {
472
- font-family: var(--font-family-mono);
473
- font-size: var(--font-size-20);
474
- font-weight: var(--font-weight-char-normal);
475
- letter-spacing: var(--letter-spacing-wider);
476
- 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);
477
1211
  }
478
1212
  .character-5-bold-pro {
479
- font-family: var(--font-family-pro);
480
- font-size: var(--font-size-20);
481
- font-weight: var(--font-weight-char-bold);
482
- letter-spacing: var(--letter-spacing-wider);
483
- 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);
484
1218
  }
485
1219
  .character-5-bold-mono {
486
- font-family: var(--font-family-mono);
487
- font-size: var(--font-size-20);
488
- font-weight: var(--font-weight-char-bold);
489
- letter-spacing: var(--letter-spacing-wider);
490
- 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);
491
1225
  }
492
1226
  .character-6-regular-pro {
493
- font-family: var(--font-family-pro);
494
- font-size: var(--font-size-24);
495
- font-weight: var(--font-weight-char-normal);
496
- letter-spacing: var(--letter-spacing-wider);
497
- 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);
498
1232
  }
499
1233
  .character-6-regular-mono {
500
- font-family: var(--font-family-mono);
501
- font-size: var(--font-size-24);
502
- font-weight: var(--font-weight-char-normal);
503
- letter-spacing: var(--letter-spacing-wider);
504
- 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);
505
1239
  }
506
1240
  .character-6-bold-pro {
507
- font-family: var(--font-family-pro);
508
- font-size: var(--font-size-24);
509
- font-weight: var(--font-weight-char-bold);
510
- letter-spacing: var(--letter-spacing-wider);
511
- 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);
512
1246
  }
513
1247
  .character-6-bold-mono {
514
- font-family: var(--font-family-mono);
515
- font-size: var(--font-size-24);
516
- font-weight: var(--font-weight-char-bold);
517
- letter-spacing: var(--letter-spacing-wider);
518
- 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);
519
1253
  }
520
1254
  .character-7-regular-pro {
521
- font-family: var(--font-family-pro);
522
- font-size: var(--font-size-28);
523
- font-weight: var(--font-weight-char-normal);
524
- letter-spacing: var(--letter-spacing-wider);
525
- 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);
526
1260
  }
527
1261
  .character-7-regular-mono {
528
- font-family: var(--font-family-mono);
529
- font-size: var(--font-size-28);
530
- font-weight: var(--font-weight-char-normal);
531
- letter-spacing: var(--letter-spacing-wider);
532
- 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);
533
1267
  }
534
1268
  .character-7-bold-pro {
535
- font-family: var(--font-family-pro);
536
- font-size: var(--font-size-28);
537
- font-weight: var(--font-weight-char-bold);
538
- letter-spacing: var(--letter-spacing-wider);
539
- 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);
540
1274
  }
541
1275
  .character-7-bold-mono {
542
- font-family: var(--font-family-mono);
543
- font-size: var(--font-size-28);
544
- font-weight: var(--font-weight-char-bold);
545
- letter-spacing: var(--letter-spacing-wider);
546
- 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);
547
1281
  }
548
1282
  .character-8-regular-pro {
549
- font-family: var(--font-family-pro);
550
- font-size: var(--font-size-32);
551
- font-weight: var(--font-weight-char-normal);
552
- letter-spacing: var(--letter-spacing-wider);
553
- 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);
554
1288
  }
555
1289
  .character-8-regular-mono {
556
- font-family: var(--font-family-mono);
557
- font-size: var(--font-size-32);
558
- font-weight: var(--font-weight-char-normal);
559
- letter-spacing: var(--letter-spacing-wider);
560
- 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);
561
1295
  }
562
1296
  .character-8-bold-pro {
563
- font-family: var(--font-family-pro);
564
- font-size: var(--font-size-32);
565
- font-weight: var(--font-weight-char-bold);
566
- letter-spacing: var(--letter-spacing-wider);
567
- 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);
568
1302
  }
569
1303
  .character-8-bold-mono {
570
- font-family: var(--font-family-mono);
571
- font-size: var(--font-size-32);
572
- font-weight: var(--font-weight-char-bold);
573
- letter-spacing: var(--letter-spacing-wider);
574
- 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);
575
1309
  }
576
1310
  .character-9-regular-pro {
577
- font-family: var(--font-family-pro);
578
- font-size: var(--font-size-36);
579
- font-weight: var(--font-weight-char-normal);
580
- letter-spacing: var(--letter-spacing-wider);
581
- 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);
582
1316
  }
583
1317
  .character-9-regular-mono {
584
- font-family: var(--font-family-mono);
585
- font-size: var(--font-size-36);
586
- font-weight: var(--font-weight-char-normal);
587
- letter-spacing: var(--letter-spacing-wider);
588
- 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);
589
1323
  }
590
1324
  .character-9-bold-pro {
591
- font-family: var(--font-family-pro);
592
- font-size: var(--font-size-36);
593
- font-weight: var(--font-weight-char-bold);
594
- letter-spacing: var(--letter-spacing-wider);
595
- 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);
596
1330
  }
597
1331
  .character-9-bold-mono {
598
- font-family: var(--font-family-mono);
599
- font-size: var(--font-size-36);
600
- font-weight: var(--font-weight-char-bold);
601
- letter-spacing: var(--letter-spacing-wider);
602
- 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);
603
1337
  }
604
1338
  .character-10-regular-pro {
605
- font-family: var(--font-family-pro);
606
- font-size: var(--font-size-42);
607
- font-weight: var(--font-weight-char-normal);
608
- letter-spacing: var(--letter-spacing-wider);
609
- 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);
610
1344
  }
611
1345
  .character-10-regular-mono {
612
- font-family: var(--font-family-mono);
613
- font-size: var(--font-size-42);
614
- font-weight: var(--font-weight-char-normal);
615
- letter-spacing: var(--letter-spacing-wider);
616
- 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);
617
1351
  }
618
1352
  .character-10-bold-pro {
619
- font-family: var(--font-family-pro);
620
- font-size: var(--font-size-42);
621
- font-weight: var(--font-weight-char-bold);
622
- letter-spacing: var(--letter-spacing-wider);
623
- 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);
624
1358
  }
625
1359
  .character-10-bold-mono {
626
- font-family: var(--font-family-mono);
627
- font-size: var(--font-size-42);
628
- font-weight: var(--font-weight-char-bold);
629
- letter-spacing: var(--letter-spacing-wider);
630
- 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);
631
1365
  }
632
1366
  .character-11-regular-pro {
633
- font-family: var(--font-family-pro);
634
- font-size: var(--font-size-48);
635
- font-weight: var(--font-weight-char-normal);
636
- letter-spacing: var(--letter-spacing-wider);
637
- 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);
638
1372
  }
639
1373
  .character-11-regular-mono {
640
- font-family: var(--font-family-mono);
641
- font-size: var(--font-size-48);
642
- font-weight: var(--font-weight-char-normal);
643
- letter-spacing: var(--letter-spacing-wider);
644
- 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);
645
1379
  }
646
1380
  .character-11-bold-pro {
647
- font-family: var(--font-family-pro);
648
- font-size: var(--font-size-48);
649
- font-weight: var(--font-weight-char-bold);
650
- letter-spacing: var(--letter-spacing-wider);
651
- 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);
652
1386
  }
653
1387
  .character-11-bold-mono {
654
- font-family: var(--font-family-mono);
655
- font-size: var(--font-size-48);
656
- font-weight: var(--font-weight-char-bold);
657
- letter-spacing: var(--letter-spacing-wider);
658
- 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);
659
1393
  }
660
1394
  .character-12-regular-pro {
661
- font-family: var(--font-family-pro);
662
- font-size: var(--font-size-54);
663
- font-weight: var(--font-weight-char-normal);
664
- letter-spacing: var(--letter-spacing-wider);
665
- 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);
666
1400
  }
667
1401
  .character-12-regular-mono {
668
- font-family: var(--font-family-mono);
669
- font-size: var(--font-size-54);
670
- font-weight: var(--font-weight-char-normal);
671
- letter-spacing: var(--letter-spacing-wider);
672
- 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);
673
1407
  }
674
1408
  .character-12-bold-pro {
675
- font-family: var(--font-family-pro);
676
- font-size: var(--font-size-54);
677
- font-weight: var(--font-weight-char-bold);
678
- letter-spacing: var(--letter-spacing-wider);
679
- 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);
680
1414
  }
681
1415
  .character-12-bold-mono {
682
- font-family: var(--font-family-mono);
683
- font-size: var(--font-size-54);
684
- font-weight: var(--font-weight-char-bold);
685
- letter-spacing: var(--letter-spacing-wider);
686
- 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);
687
1421
  }
688
1422
  .icon-1-fill-0 {
689
1423
  /* アイコンスタイル */
690
- font-family: var(--font-family-icon);
691
- font-size: var(--font-size-12);
692
- 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);
693
1427
  font-variation-settings: var(--font-weight-icon-fill-0);
694
1428
  font-display: optional;
695
- letter-spacing: var(--letter-spacing-normal);
696
- 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);
697
1431
  }
698
1432
  .icon-1-fill-1 {
699
- font-family: var(--font-family-icon);
700
- font-size: var(--font-size-12);
701
- 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);
702
1436
  font-variation-settings: var(--font-weight-icon-fill-1);
703
1437
  font-display: optional;
704
- letter-spacing: var(--letter-spacing-normal);
705
- 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);
706
1440
  }
707
1441
  .icon-2-fill-0 {
708
- font-family: var(--font-family-icon);
709
- font-size: var(--font-size-14);
710
- 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);
711
1445
  font-variation-settings: var(--font-weight-icon-fill-0);
712
1446
  font-display: optional;
713
- letter-spacing: var(--letter-spacing-normal);
714
- 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);
715
1449
  }
716
1450
  .icon-2-fill-1 {
717
- font-family: var(--font-family-icon);
718
- font-size: var(--font-size-14);
719
- 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);
720
1454
  font-variation-settings: var(--font-weight-icon-fill-1);
721
1455
  font-display: optional;
722
- letter-spacing: var(--letter-spacing-normal);
723
- 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);
724
1458
  }
725
1459
  .icon-3-fill-0 {
726
- font-family: var(--font-family-icon);
727
- font-size: var(--font-size-16);
728
- 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);
729
1463
  font-variation-settings: var(--font-weight-icon-fill-0);
730
1464
  font-display: optional;
731
- letter-spacing: var(--letter-spacing-normal);
732
- 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);
733
1467
  }
734
1468
  .icon-3-fill-1 {
735
- font-family: var(--font-family-icon);
736
- font-size: var(--font-size-16);
737
- 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);
738
1472
  font-variation-settings: var(--font-weight-icon-fill-1);
739
1473
  font-display: optional;
740
- letter-spacing: var(--letter-spacing-normal);
741
- 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);
742
1476
  }
743
1477
  .icon-4-fill-0 {
744
- font-family: var(--font-family-icon);
745
- font-size: var(--font-size-18);
746
- 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);
747
1481
  font-variation-settings: var(--font-weight-icon-fill-0);
748
1482
  font-display: optional;
749
- letter-spacing: var(--letter-spacing-normal);
750
- 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);
751
1485
  }
752
1486
  .icon-4-fill-1 {
753
- font-family: var(--font-family-icon);
754
- font-size: var(--font-size-18);
755
- 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);
756
1490
  font-variation-settings: var(--font-weight-icon-fill-1);
757
1491
  font-display: optional;
758
- letter-spacing: var(--letter-spacing-normal);
759
- 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);
760
1494
  }
761
1495
  .icon-5-fill-0 {
762
- font-family: var(--font-family-icon);
763
- font-size: var(--font-size-20);
764
- 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);
765
1499
  font-variation-settings: var(--font-weight-icon-fill-0);
766
1500
  font-display: optional;
767
- letter-spacing: var(--letter-spacing-normal);
768
- 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);
769
1503
  }
770
1504
  .icon-5-fill-1 {
771
- font-family: var(--font-family-icon);
772
- font-size: var(--font-size-20);
773
- 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);
774
1508
  font-variation-settings: var(--font-weight-icon-fill-1);
775
1509
  font-display: optional;
776
- letter-spacing: var(--letter-spacing-normal);
777
- 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);
778
1512
  }
779
1513
  .icon-6-fill-0 {
780
- font-family: var(--font-family-icon);
781
- font-size: var(--font-size-24);
782
- 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);
783
1517
  font-variation-settings: var(--font-weight-icon-fill-0);
784
1518
  font-display: optional;
785
- letter-spacing: var(--letter-spacing-normal);
786
- 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);
787
1521
  }
788
1522
  .icon-6-fill-1 {
789
- font-family: var(--font-family-icon);
790
- font-size: var(--font-size-24);
791
- 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);
792
1526
  font-variation-settings: var(--font-weight-icon-fill-1);
793
1527
  font-display: optional;
794
- letter-spacing: var(--letter-spacing-normal);
795
- 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);
796
1530
  }
797
1531
  .icon-7-fill-0 {
798
- font-family: var(--font-family-icon);
799
- font-size: var(--font-size-28);
800
- 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);
801
1535
  font-variation-settings: var(--font-weight-icon-fill-0);
802
1536
  font-display: optional;
803
- letter-spacing: var(--letter-spacing-normal);
804
- 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);
805
1539
  }
806
1540
  .icon-7-fill-1 {
807
- font-family: var(--font-family-icon);
808
- font-size: var(--font-size-28);
809
- 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);
810
1544
  font-variation-settings: var(--font-weight-icon-fill-1);
811
1545
  font-display: optional;
812
- letter-spacing: var(--letter-spacing-normal);
813
- 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);
814
1548
  }
815
1549
  .icon-8-fill-0 {
816
- font-family: var(--font-family-icon);
817
- font-size: var(--font-size-32);
818
- 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);
819
1553
  font-variation-settings: var(--font-weight-icon-fill-0);
820
1554
  font-display: optional;
821
- letter-spacing: var(--letter-spacing-normal);
822
- 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);
823
1557
  }
824
1558
  .icon-8-fill-1 {
825
- font-family: var(--font-family-icon);
826
- font-size: var(--font-size-32);
827
- 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);
828
1562
  font-variation-settings: var(--font-weight-icon-fill-1);
829
1563
  font-display: optional;
830
- letter-spacing: var(--letter-spacing-normal);
831
- 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);
832
1566
  }
833
1567
  .icon-9-fill-0 {
834
- font-family: var(--font-family-icon);
835
- font-size: var(--font-size-36);
836
- 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);
837
1571
  font-variation-settings: var(--font-weight-icon-fill-0);
838
1572
  font-display: optional;
839
- letter-spacing: var(--letter-spacing-normal);
840
- 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);
841
1575
  }
842
1576
  .icon-9-fill-1 {
843
- font-family: var(--font-family-icon);
844
- font-size: var(--font-size-36);
845
- 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);
846
1580
  font-variation-settings: var(--font-weight-icon-fill-1);
847
1581
  font-display: optional;
848
- letter-spacing: var(--letter-spacing-normal);
849
- 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);
850
1584
  }
851
1585
  .icon-10-fill-0 {
852
- font-family: var(--font-family-icon);
853
- font-size: var(--font-size-42);
854
- 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);
855
1589
  font-variation-settings: var(--font-weight-icon-fill-0);
856
1590
  font-display: optional;
857
- letter-spacing: var(--letter-spacing-normal);
858
- 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);
859
1593
  }
860
1594
  .icon-10-fill-1 {
861
- font-family: var(--font-family-icon);
862
- font-size: var(--font-size-42);
863
- 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);
864
1598
  font-variation-settings: var(--font-weight-icon-fill-1);
865
1599
  font-display: optional;
866
- letter-spacing: var(--letter-spacing-normal);
867
- 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);
868
1602
  }
869
1603
  .icon-11-fill-0 {
870
- font-family: var(--font-family-icon);
871
- font-size: var(--font-size-48);
872
- 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);
873
1607
  font-variation-settings: var(--font-weight-icon-fill-0);
874
1608
  font-display: optional;
875
- letter-spacing: var(--letter-spacing-normal);
876
- 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);
877
1611
  }
878
1612
  .icon-11-fill-1 {
879
- font-family: var(--font-family-icon);
880
- font-size: var(--font-size-48);
881
- 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);
882
1616
  font-variation-settings: var(--font-weight-icon-fill-1);
883
1617
  font-display: optional;
884
- letter-spacing: var(--letter-spacing-normal);
885
- 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);
886
1620
  }
887
1621
  .icon-12-fill-0 {
888
- font-family: var(--font-family-icon);
889
- font-size: var(--font-size-54);
890
- 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);
891
1625
  font-variation-settings: var(--font-weight-icon-fill-0);
892
1626
  font-display: optional;
893
- letter-spacing: var(--letter-spacing-normal);
894
- 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);
895
1629
  }
896
1630
  .icon-12-fill-1 {
897
- font-family: var(--font-family-icon);
898
- font-size: var(--font-size-54);
899
- 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);
900
1634
  font-variation-settings: var(--font-weight-icon-fill-1);
901
1635
  font-display: optional;
902
- letter-spacing: var(--letter-spacing-normal);
903
- 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);
904
1638
  }
905
1639
  }