@charcoal-ui/theme 4.0.0-beta.13 → 4.0.0-beta.15

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.
Files changed (11) hide show
  1. package/dist/css/_variables_dark.css +104 -71
  2. package/dist/css/_variables_light.css +100 -67
  3. package/dist/json/base.json +29 -29
  4. package/dist/json/pixiv-dark.json +84 -45
  5. package/dist/json/pixiv-light.json +80 -41
  6. package/package.json +4 -4
  7. package/src/css/_variables_dark.css +104 -71
  8. package/src/css/_variables_light.css +100 -67
  9. package/src/json/base.json +29 -29
  10. package/src/json/pixiv-dark.json +84 -45
  11. package/src/json/pixiv-light.json +80 -41
package/dist/css/_variables_dark.css CHANGED
@@ -1,10 +1,47 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 26 Jul 2024 05:15:18 GMT
3
+ * Generated on Wed, 09 Oct 2024 07:28:06 GMT
4
4
  */
5
5
 
6
6
  :root[data-theme='dark'] {
7
7
  --charcoal-radius-oval: 999999;
8
+ --charcoal-border-width-l: 2;
9
+ --charcoal-border-width-m: 1;
10
+ --charcoal-paragraph-width-l-cozy: 924;
11
+ --charcoal-paragraph-width-m-cozy: 616;
12
+ --charcoal-paragraph-width-s-cozy: 588;
13
+ --charcoal-paragraph-width-l-compact: 588;
14
+ --charcoal-paragraph-width-m-compact: 392;
15
+ --charcoal-paragraph-width-s-compact: 280;
16
+ --charcoal-paragraph-width-l: 672;
17
+ --charcoal-paragraph-width-m: 448;
18
+ --charcoal-paragraph-width-s: 320;
19
+ --charcoal-space-target-l: 48;
20
+ --charcoal-space-target-m: 40;
21
+ --charcoal-space-target-s: 32;
22
+ --charcoal-space-target-xs: 24;
23
+ --charcoal-space-999: 999999;
24
+ --charcoal-space-100: 440;
25
+ --charcoal-space-90: 272;
26
+ --charcoal-space-80: 168;
27
+ --charcoal-space-70: 104;
28
+ --charcoal-space-66: 96;
29
+ --charcoal-space-63: 80;
30
+ --charcoal-space-60: 64;
31
+ --charcoal-space-55: 48;
32
+ --charcoal-space-50: 40;
33
+ --charcoal-space-46: 32;
34
+ --charcoal-space-43: 28;
35
+ --charcoal-space-40: 24;
36
+ --charcoal-space-35: 20;
37
+ --charcoal-space-30: 16;
38
+ --charcoal-space-25: 12;
39
+ --charcoal-space-20: 8;
40
+ --charcoal-space-15: 6;
41
+ --charcoal-space-10: 4;
42
+ --charcoal-space-1: 2;
43
+ --charcoal-space-0: 0;
44
+ --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
8
45
  --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
9
46
  --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
10
47
  --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02);
@@ -266,31 +303,11 @@
266
303
  --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
267
304
  --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0);
268
305
  --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
269
- --charcoal-space-target-l: 48;
270
- --charcoal-space-target-m: 40;
271
- --charcoal-space-target-s: 32;
272
- --charcoal-space-target-xs: 24;
273
- --charcoal-space-999: 999999;
274
- --charcoal-space-100: 440;
275
- --charcoal-space-90: 272;
276
- --charcoal-space-80: 168;
277
- --charcoal-space-70: 104;
278
- --charcoal-space-66: 96;
279
- --charcoal-space-63: 80;
280
- --charcoal-space-60: 64;
281
- --charcoal-space-55: 48;
282
- --charcoal-space-50: 40;
283
- --charcoal-space-46: 32;
284
- --charcoal-space-43: 28;
285
- --charcoal-space-40: 24;
286
- --charcoal-space-35: 20;
287
- --charcoal-space-30: 16;
288
- --charcoal-space-25: 12;
289
- --charcoal-space-20: 8;
290
- --charcoal-space-15: 6;
291
- --charcoal-space-10: 4;
292
- --charcoal-space-1: 2;
293
- --charcoal-space-0: 0;
306
+ --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
307
+ --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
308
+ --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
309
+ --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
310
+ --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
294
311
  --charcoal-text-font-family-sans: Sarasa UI J;
295
312
  --charcoal-text-line-height-100: 72;
296
313
  --charcoal-text-line-height-90: 64;
@@ -322,17 +339,35 @@
322
339
  --charcoal-text-font-size-5: 14;
323
340
  --charcoal-text-font-size-1: 12;
324
341
  --charcoal-text-font-size-0: 11;
325
- --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
326
- --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
327
- --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
328
- --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
329
- --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
342
+ --charcoal-radius-xxl: var(--charcoal-space-40);
343
+ --charcoal-radius-xl: var(--charcoal-space-30);
344
+ --charcoal-radius-l: var(--charcoal-space-25);
345
+ --charcoal-radius-m: var(--charcoal-space-20);
346
+ --charcoal-radius-s: var(--charcoal-space-10);
347
+ --charcoal-radius-xs: var(--charcoal-space-1);
348
+ --charcoal-radius-0: var(--charcoal-space-0);
349
+ --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
350
+ --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
351
+ --charcoal-space-layout-100: var(--charcoal-space-100);
352
+ --charcoal-space-layout-90: var(--charcoal-space-90);
353
+ --charcoal-space-layout-80: var(--charcoal-space-80);
354
+ --charcoal-space-layout-70: var(--charcoal-space-70);
355
+ --charcoal-space-layout-60: var(--charcoal-space-60);
356
+ --charcoal-space-layout-50: var(--charcoal-space-50);
357
+ --charcoal-space-layout-40: var(--charcoal-space-40);
358
+ --charcoal-space-layout-30: var(--charcoal-space-30);
359
+ --charcoal-space-layout-25: var(--charcoal-space-25);
360
+ --charcoal-space-layout-20: var(--charcoal-space-20);
361
+ --charcoal-space-layout-10: var(--charcoal-space-10);
362
+ --charcoal-space-layout-0: var(--charcoal-space-0);
330
363
  --charcoal-color-border-negative: var(--charcoal-color-dark-red-20);
331
364
  --charcoal-color-border-focus-2: var(--charcoal-color-dark-blue-20);
332
365
  --charcoal-color-border-disable: var(--charcoal-color-dark-neutral-a-5);
333
366
  --charcoal-color-border-focus-1: var(--charcoal-color-dark-blue-60);
334
367
  --charcoal-color-border-secondary: var(--charcoal-color-dark-neutral-a-10);
335
- --charcoal-color-border-default: var(--charcoal-color-dark-neutral-30);
368
+ --charcoal-color-border-press: var(--charcoal-color-dark-neutral-a-50);
369
+ --charcoal-color-border-hover: var(--charcoal-color-dark-neutral-a-40);
370
+ --charcoal-color-border-default: var(--charcoal-color-dark-neutral-a-30);
336
371
  --charcoal-color-icon-on-neutral-press: var(--charcoal-color-dark-neutral-90);
337
372
  --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-dark-neutral-90);
338
373
  --charcoal-color-icon-on-neutral-default: var(--charcoal-color-dark-neutral-90);
@@ -373,8 +408,8 @@
373
408
  --charcoal-color-text-info-press: var(--charcoal-color-dark-blue-90);
374
409
  --charcoal-color-text-info-hover: var(--charcoal-color-dark-blue-80);
375
410
  --charcoal-color-text-info-default: var(--charcoal-color-dark-blue-60);
376
- --charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-50);
377
- --charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-40);
411
+ --charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-30);
412
+ --charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-30);
378
413
  --charcoal-color-text-placeholder-default: var(--charcoal-color-dark-neutral-30);
379
414
  --charcoal-color-text-tertiary-press: var(--charcoal-color-dark-neutral-70);
380
415
  --charcoal-color-text-tertiary-hover: var(--charcoal-color-dark-neutral-60);
@@ -387,9 +422,9 @@
387
422
  --charcoal-color-text-hover: var(--charcoal-color-dark-neutral-80);
388
423
  --charcoal-color-text-default: var(--charcoal-color-dark-neutral-90);
389
424
  --charcoal-color-container-skeleton: var(--charcoal-color-dark-neutral-a-5);
390
- --charcoal-color-container-hud-press: var(--charcoal-color-light-neutral-20);
391
- --charcoal-color-container-hud-hover: var(--charcoal-color-light-neutral-20);
392
- --charcoal-color-container-hud-default: var(--charcoal-color-light-neutral-10);
425
+ --charcoal-color-container-hud-press: var(--charcoal-color-dark-neutral-70);
426
+ --charcoal-color-container-hud-hover: var(--charcoal-color-dark-neutral-80);
427
+ --charcoal-color-container-hud-default: var(--charcoal-color-dark-neutral-90);
393
428
  --charcoal-color-container-neutral-press: var(--charcoal-color-dark-neutral-50);
394
429
  --charcoal-color-container-neutral-hover: var(--charcoal-color-dark-neutral-40);
395
430
  --charcoal-color-container-discovery-press: var(--charcoal-color-dark-red-50);
@@ -435,40 +470,36 @@
435
470
  --charcoal-color-background-default: var(--charcoal-color-dark-neutral-0);
436
471
  --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
437
472
  --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
438
- --charcoal-space-layout-100: var(--charcoal-space-100);
439
- --charcoal-space-layout-90: var(--charcoal-space-90);
440
- --charcoal-space-layout-80: var(--charcoal-space-80);
441
- --charcoal-space-layout-70: var(--charcoal-space-70);
442
- --charcoal-space-layout-60: var(--charcoal-space-60);
443
- --charcoal-space-layout-50: var(--charcoal-space-50);
444
- --charcoal-space-layout-40: var(--charcoal-space-40);
445
- --charcoal-space-layout-30: var(--charcoal-space-30);
446
- --charcoal-space-layout-20: var(--charcoal-space-20);
447
- --charcoal-space-layout-10: var(--charcoal-space-10);
448
- --charcoal-space-layout-0: var(--charcoal-space-0);
449
- --charcoal-space-component-66: var(--charcoal-space-66);
450
- --charcoal-space-component-63: var(--charcoal-space-63);
451
- --charcoal-space-component-60: var(--charcoal-space-60);
452
- --charcoal-space-component-55: var(--charcoal-space-55);
453
- --charcoal-space-component-50: var(--charcoal-space-50);
454
- --charcoal-space-component-46: var(--charcoal-space-46);
455
- --charcoal-space-component-43: var(--charcoal-space-43);
456
- --charcoal-space-component-40: var(--charcoal-space-40);
457
- --charcoal-space-component-35: var(--charcoal-space-35);
458
- --charcoal-space-component-30: var(--charcoal-space-30);
459
- --charcoal-space-component-25: var(--charcoal-space-25);
460
- --charcoal-space-component-20: var(--charcoal-space-20);
461
- --charcoal-space-component-15: var(--charcoal-space-15);
462
- --charcoal-space-component-10: var(--charcoal-space-10);
463
- --charcoal-space-component-1: var(--charcoal-space-1);
464
- --charcoal-space-component-0: var(--charcoal-space-0);
465
- --charcoal-radius-xxl: var(--charcoal-space-component-40);
466
- --charcoal-radius-xl: var(--charcoal-space-component-30);
467
- --charcoal-radius-l: var(--charcoal-space-component-25);
468
- --charcoal-radius-m: var(--charcoal-space-component-20);
469
- --charcoal-radius-s: var(--charcoal-space-component-10);
470
- --charcoal-radius-xs: var(--charcoal-space-component-1);
471
- --charcoal-radius-none: var(--charcoal-space-component-0);
473
+ --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
474
+ --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
475
+ --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
476
+ --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
477
+ --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
478
+ --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
479
+ --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
480
+ --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
481
+ --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
482
+ --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
483
+ --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
484
+ --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
485
+ --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
486
+ --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
487
+ --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
488
+ --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
489
+ --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
490
+ --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
491
+ --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
492
+ --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
493
+ --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
494
+ --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
495
+ --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
496
+ --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
497
+ --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
498
+ --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
499
+ --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
500
+ --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
501
+ --charcoal-space-between-checkboxes-horizontal: var(--charcoal-space-layout-25);
502
+ --charcoal-space-between-checkboxes-vertical: var(--charcoal-space-layout-0);
472
503
  --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);
473
504
  --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover);
474
505
  --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press);
@@ -478,6 +509,8 @@
478
509
  --charcoal-color-icon-on-negative-press: var(--charcoal-color-text-on-negative-press);
479
510
  --charcoal-color-icon-on-negative-hover: var(--charcoal-color-text-on-negative-hover);
480
511
  --charcoal-color-icon-on-negative-default: var(--charcoal-color-text-on-negative-default);
512
+ --charcoal-color-border-hud: var(--charcoal-color-background-default);
513
+ --charcoal-color-border-selected: var(--charcoal-color-container-primary-default);
481
514
  --charcoal-color-icon-on-on-img-press: var(--charcoal-color-text-on-on-img-press);
482
515
  --charcoal-color-icon-on-on-img-hover: var(--charcoal-color-text-on-on-img-hover);
483
516
  --charcoal-color-icon-on-on-img-default: var(--charcoal-color-text-on-on-img-default);
package/dist/css/_variables_light.css CHANGED
@@ -1,10 +1,47 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 26 Jul 2024 05:15:17 GMT
3
+ * Generated on Wed, 09 Oct 2024 07:28:05 GMT
4
4
  */
5
5
 
6
6
  :root[data-theme='light'], :root:not([data-theme]) {
7
7
  --charcoal-radius-oval: 999999;
8
+ --charcoal-border-width-l: 2;
9
+ --charcoal-border-width-m: 1;
10
+ --charcoal-paragraph-width-l-cozy: 924;
11
+ --charcoal-paragraph-width-m-cozy: 616;
12
+ --charcoal-paragraph-width-s-cozy: 588;
13
+ --charcoal-paragraph-width-l-compact: 588;
14
+ --charcoal-paragraph-width-m-compact: 392;
15
+ --charcoal-paragraph-width-s-compact: 280;
16
+ --charcoal-paragraph-width-l: 672;
17
+ --charcoal-paragraph-width-m: 448;
18
+ --charcoal-paragraph-width-s: 320;
19
+ --charcoal-space-target-l: 48;
20
+ --charcoal-space-target-m: 40;
21
+ --charcoal-space-target-s: 32;
22
+ --charcoal-space-target-xs: 24;
23
+ --charcoal-space-999: 999999;
24
+ --charcoal-space-100: 440;
25
+ --charcoal-space-90: 272;
26
+ --charcoal-space-80: 168;
27
+ --charcoal-space-70: 104;
28
+ --charcoal-space-66: 96;
29
+ --charcoal-space-63: 80;
30
+ --charcoal-space-60: 64;
31
+ --charcoal-space-55: 48;
32
+ --charcoal-space-50: 40;
33
+ --charcoal-space-46: 32;
34
+ --charcoal-space-43: 28;
35
+ --charcoal-space-40: 24;
36
+ --charcoal-space-35: 20;
37
+ --charcoal-space-30: 16;
38
+ --charcoal-space-25: 12;
39
+ --charcoal-space-20: 8;
40
+ --charcoal-space-15: 6;
41
+ --charcoal-space-10: 4;
42
+ --charcoal-space-1: 2;
43
+ --charcoal-space-0: 0;
44
+ --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
8
45
  --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
9
46
  --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
10
47
  --charcoal-color-container-subtle: rgba(31, 31, 31, 0.02);
@@ -266,31 +303,11 @@
266
303
  --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
267
304
  --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0);
268
305
  --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
269
- --charcoal-space-target-l: 48;
270
- --charcoal-space-target-m: 40;
271
- --charcoal-space-target-s: 32;
272
- --charcoal-space-target-xs: 24;
273
- --charcoal-space-999: 999999;
274
- --charcoal-space-100: 440;
275
- --charcoal-space-90: 272;
276
- --charcoal-space-80: 168;
277
- --charcoal-space-70: 104;
278
- --charcoal-space-66: 96;
279
- --charcoal-space-63: 80;
280
- --charcoal-space-60: 64;
281
- --charcoal-space-55: 48;
282
- --charcoal-space-50: 40;
283
- --charcoal-space-46: 32;
284
- --charcoal-space-43: 28;
285
- --charcoal-space-40: 24;
286
- --charcoal-space-35: 20;
287
- --charcoal-space-30: 16;
288
- --charcoal-space-25: 12;
289
- --charcoal-space-20: 8;
290
- --charcoal-space-15: 6;
291
- --charcoal-space-10: 4;
292
- --charcoal-space-1: 2;
293
- --charcoal-space-0: 0;
306
+ --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
307
+ --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
308
+ --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
309
+ --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
310
+ --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
294
311
  --charcoal-text-font-family-sans: Sarasa UI J;
295
312
  --charcoal-text-line-height-100: 72;
296
313
  --charcoal-text-line-height-90: 64;
@@ -322,16 +339,34 @@
322
339
  --charcoal-text-font-size-5: 14;
323
340
  --charcoal-text-font-size-1: 12;
324
341
  --charcoal-text-font-size-0: 11;
325
- --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
326
- --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
327
- --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
328
- --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
329
- --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
342
+ --charcoal-radius-xxl: var(--charcoal-space-40);
343
+ --charcoal-radius-xl: var(--charcoal-space-30);
344
+ --charcoal-radius-l: var(--charcoal-space-25);
345
+ --charcoal-radius-m: var(--charcoal-space-20);
346
+ --charcoal-radius-s: var(--charcoal-space-10);
347
+ --charcoal-radius-xs: var(--charcoal-space-1);
348
+ --charcoal-radius-0: var(--charcoal-space-0);
349
+ --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
350
+ --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
351
+ --charcoal-space-layout-100: var(--charcoal-space-100);
352
+ --charcoal-space-layout-90: var(--charcoal-space-90);
353
+ --charcoal-space-layout-80: var(--charcoal-space-80);
354
+ --charcoal-space-layout-70: var(--charcoal-space-70);
355
+ --charcoal-space-layout-60: var(--charcoal-space-60);
356
+ --charcoal-space-layout-50: var(--charcoal-space-50);
357
+ --charcoal-space-layout-40: var(--charcoal-space-40);
358
+ --charcoal-space-layout-30: var(--charcoal-space-30);
359
+ --charcoal-space-layout-25: var(--charcoal-space-25);
360
+ --charcoal-space-layout-20: var(--charcoal-space-20);
361
+ --charcoal-space-layout-10: var(--charcoal-space-10);
362
+ --charcoal-space-layout-0: var(--charcoal-space-0);
330
363
  --charcoal-color-border-negative: var(--charcoal-color-light-red-20);
331
364
  --charcoal-color-border-focus-2: var(--charcoal-color-light-blue-20);
332
365
  --charcoal-color-border-disable: var(--charcoal-color-light-neutral-a-10);
333
366
  --charcoal-color-border-focus-1: var(--charcoal-color-light-blue-60);
334
367
  --charcoal-color-border-secondary: var(--charcoal-color-light-neutral-a-10);
368
+ --charcoal-color-border-press: var(--charcoal-color-light-neutral-a-70);
369
+ --charcoal-color-border-hover: var(--charcoal-color-light-neutral-a-60);
335
370
  --charcoal-color-border-default: var(--charcoal-color-light-neutral-a-50);
336
371
  --charcoal-color-icon-on-neutral-press: var(--charcoal-color-light-neutral-10);
337
372
  --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-light-neutral-5);
@@ -373,8 +408,8 @@
373
408
  --charcoal-color-text-info-press: var(--charcoal-color-light-blue-80);
374
409
  --charcoal-color-text-info-hover: var(--charcoal-color-light-blue-70);
375
410
  --charcoal-color-text-info-default: var(--charcoal-color-light-blue-60);
376
- --charcoal-color-text-placeholder-press: var(--charcoal-color-light-neutral-70);
377
- --charcoal-color-text-placeholder-hover: var(--charcoal-color-light-neutral-60);
411
+ --charcoal-color-text-placeholder-press: var(--charcoal-color-light-neutral-50);
412
+ --charcoal-color-text-placeholder-hover: var(--charcoal-color-light-neutral-50);
378
413
  --charcoal-color-text-placeholder-default: var(--charcoal-color-light-neutral-50);
379
414
  --charcoal-color-text-tertiary-press: var(--charcoal-color-light-neutral-80);
380
415
  --charcoal-color-text-tertiary-hover: var(--charcoal-color-light-neutral-70);
@@ -435,40 +470,36 @@
435
470
  --charcoal-color-background-default: var(--charcoal-color-light-neutral-0);
436
471
  --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
437
472
  --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
438
- --charcoal-space-layout-100: var(--charcoal-space-100);
439
- --charcoal-space-layout-90: var(--charcoal-space-90);
440
- --charcoal-space-layout-80: var(--charcoal-space-80);
441
- --charcoal-space-layout-70: var(--charcoal-space-70);
442
- --charcoal-space-layout-60: var(--charcoal-space-60);
443
- --charcoal-space-layout-50: var(--charcoal-space-50);
444
- --charcoal-space-layout-40: var(--charcoal-space-40);
445
- --charcoal-space-layout-30: var(--charcoal-space-30);
446
- --charcoal-space-layout-20: var(--charcoal-space-20);
447
- --charcoal-space-layout-10: var(--charcoal-space-10);
448
- --charcoal-space-layout-0: var(--charcoal-space-0);
449
- --charcoal-space-component-66: var(--charcoal-space-66);
450
- --charcoal-space-component-63: var(--charcoal-space-63);
451
- --charcoal-space-component-60: var(--charcoal-space-60);
452
- --charcoal-space-component-55: var(--charcoal-space-55);
453
- --charcoal-space-component-50: var(--charcoal-space-50);
454
- --charcoal-space-component-46: var(--charcoal-space-46);
455
- --charcoal-space-component-43: var(--charcoal-space-43);
456
- --charcoal-space-component-40: var(--charcoal-space-40);
457
- --charcoal-space-component-35: var(--charcoal-space-35);
458
- --charcoal-space-component-30: var(--charcoal-space-30);
459
- --charcoal-space-component-25: var(--charcoal-space-25);
460
- --charcoal-space-component-20: var(--charcoal-space-20);
461
- --charcoal-space-component-15: var(--charcoal-space-15);
462
- --charcoal-space-component-10: var(--charcoal-space-10);
463
- --charcoal-space-component-1: var(--charcoal-space-1);
464
- --charcoal-space-component-0: var(--charcoal-space-0);
465
- --charcoal-radius-xxl: var(--charcoal-space-component-40);
466
- --charcoal-radius-xl: var(--charcoal-space-component-30);
467
- --charcoal-radius-l: var(--charcoal-space-component-25);
468
- --charcoal-radius-m: var(--charcoal-space-component-20);
469
- --charcoal-radius-s: var(--charcoal-space-component-10);
470
- --charcoal-radius-xs: var(--charcoal-space-component-1);
471
- --charcoal-radius-none: var(--charcoal-space-component-0);
473
+ --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
474
+ --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
475
+ --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
476
+ --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
477
+ --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
478
+ --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
479
+ --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
480
+ --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
481
+ --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
482
+ --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
483
+ --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
484
+ --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
485
+ --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
486
+ --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
487
+ --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
488
+ --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
489
+ --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
490
+ --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
491
+ --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
492
+ --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
493
+ --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
494
+ --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
495
+ --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
496
+ --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
497
+ --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
498
+ --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
499
+ --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
500
+ --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
501
+ --charcoal-space-between-checkboxes-horizontal: var(--charcoal-space-layout-25);
502
+ --charcoal-space-between-checkboxes-vertical: var(--charcoal-space-layout-0);
472
503
  --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);
473
504
  --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover);
474
505
  --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press);
@@ -478,6 +509,8 @@
478
509
  --charcoal-color-icon-on-negative-press: var(--charcoal-color-text-on-negative-press);
479
510
  --charcoal-color-icon-on-negative-hover: var(--charcoal-color-text-on-negative-hover);
480
511
  --charcoal-color-icon-on-negative-default: var(--charcoal-color-text-on-negative-default);
512
+ --charcoal-color-border-hud: var(--charcoal-color-background-default);
513
+ --charcoal-color-border-selected: var(--charcoal-color-container-primary-default);
481
514
  --charcoal-color-icon-on-on-img-press: var(--charcoal-color-text-on-on-img-press);
482
515
  --charcoal-color-icon-on-on-img-hover: var(--charcoal-color-text-on-on-img-hover);
483
516
  --charcoal-color-icon-on-on-img-default: var(--charcoal-color-text-on-on-img-default);
package/dist/json/base.json CHANGED
@@ -1,11 +1,4 @@
1
1
  {
2
- "brand-color": {
3
- "pixiv": { "value": "rgba(0, 150, 250, 1)" },
4
- "premium": { "value": "rgba(253, 158, 22, 1)" },
5
- "comic": { "value": "rgba(255, 196, 0, 1)" },
6
- "booth": { "value": "rgba(252, 77, 80, 1)" },
7
- "factory": { "value": "rgba(0, 184, 205, 1)" }
8
- },
9
2
  "text": {
10
3
  "font-size/0": { "value": "11" },
11
4
  "font-size/1": { "value": "12" },
@@ -39,28 +32,12 @@
39
32
  "line-height/100": { "value": "72" },
40
33
  "font-family/sans": { "value": "Sarasa UI J" }
41
34
  },
42
- "space": {
43
- "0": { "value": "0" },
44
- "1": { "value": "2" },
45
- "10": { "value": "4" },
46
- "15": { "value": "6" },
47
- "20": { "value": "8" },
48
- "25": { "value": "12" },
49
- "30": { "value": "16" },
50
- "35": { "value": "20" },
51
- "40": { "value": "24" },
52
- "43": { "value": "28" },
53
- "46": { "value": "32" },
54
- "50": { "value": "40" },
55
- "55": { "value": "48" },
56
- "60": { "value": "64" },
57
- "63": { "value": "80" },
58
- "66": { "value": "96" },
59
- "70": { "value": "104" },
60
- "80": { "value": "168" },
61
- "90": { "value": "272" },
62
- "100": { "value": "440" },
63
- "999": { "value": "999999" }
35
+ "brand-color": {
36
+ "pixiv": { "value": "rgba(0, 150, 250, 1)" },
37
+ "premium": { "value": "rgba(253, 158, 22, 1)" },
38
+ "comic": { "value": "rgba(255, 196, 0, 1)" },
39
+ "booth": { "value": "rgba(252, 77, 80, 1)" },
40
+ "factory": { "value": "rgba(0, 184, 205, 1)" }
64
41
  },
65
42
  "color": {
66
43
  "light/neutral/0": { "value": "rgba(255, 255, 255, 1)" },
@@ -323,5 +300,28 @@
323
300
  "dark/magenta/70": { "value": "rgba(243, 163, 200, 1)" },
324
301
  "dark/magenta/80": { "value": "rgba(247, 184, 213, 1)" },
325
302
  "dark/magenta/90": { "value": "rgba(253, 217, 233, 1)" }
303
+ },
304
+ "space": {
305
+ "0": { "value": "0" },
306
+ "1": { "value": "2" },
307
+ "10": { "value": "4" },
308
+ "15": { "value": "6" },
309
+ "20": { "value": "8" },
310
+ "25": { "value": "12" },
311
+ "30": { "value": "16" },
312
+ "35": { "value": "20" },
313
+ "40": { "value": "24" },
314
+ "43": { "value": "28" },
315
+ "46": { "value": "32" },
316
+ "50": { "value": "40" },
317
+ "55": { "value": "48" },
318
+ "60": { "value": "64" },
319
+ "63": { "value": "80" },
320
+ "66": { "value": "96" },
321
+ "70": { "value": "104" },
322
+ "80": { "value": "168" },
323
+ "90": { "value": "272" },
324
+ "100": { "value": "440" },
325
+ "999": { "value": "999999" }
326
326
  }
327
327
  }