@charcoal-ui/theme 3.14.0 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +4 -4
  2. package/src/css/_variables_dark.css +68 -35
  3. package/src/css/_variables_light.css +64 -31
  4. package/src/json/base.json +7 -7
  5. package/src/json/pixiv-dark.json +88 -49
  6. package/src/json/pixiv-light.json +84 -45
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/theme",
3
- "version": "3.14.0",
3
+ "version": "3.16.0",
4
4
  "license": "Apache-2.0",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.esm.js",
@@ -29,8 +29,8 @@
29
29
  "typescript": "^4.9.5"
30
30
  },
31
31
  "dependencies": {
32
- "@charcoal-ui/foundation": "^3.14.0",
33
- "@charcoal-ui/utils": "^3.14.0",
32
+ "@charcoal-ui/foundation": "^3.16.0",
33
+ "@charcoal-ui/utils": "^3.16.0",
34
34
  "polished": "^4.1.4"
35
35
  },
36
36
  "files": [
@@ -46,5 +46,5 @@
46
46
  "url": "https://github.com/pixiv/charcoal.git",
47
47
  "directory": "packages/theme"
48
48
  },
49
- "gitHead": "694af78ad36f1caa108a4c3fae4f51ce54b7f78b"
49
+ "gitHead": "e28930956816f95325a648ec492d9f1f82e516c8"
50
50
  }
package/src/css/_variables_dark.css CHANGED
@@ -1,10 +1,21 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 26 Jul 2024 05:09:39 GMT
3
+ * Generated on Thu, 10 Oct 2024 09:26:48 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;
8
19
  --charcoal-text-font-family-sans: Sarasa UI J;
9
20
  --charcoal-text-line-height-100: 72;
10
21
  --charcoal-text-line-height-90: 64;
@@ -61,11 +72,7 @@
61
72
  --charcoal-space-10: 4;
62
73
  --charcoal-space-1: 2;
63
74
  --charcoal-space-0: 0;
64
- --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
65
- --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
66
- --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
67
- --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
68
- --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
75
+ --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
69
76
  --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
70
77
  --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
71
78
  --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02);
@@ -327,6 +334,48 @@
327
334
  --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
328
335
  --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0);
329
336
  --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
337
+ --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
338
+ --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
339
+ --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
340
+ --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
341
+ --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-text-font-weight-bold: var(--charcoal-text-font-weight-70);
352
+ --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
353
+ --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
354
+ --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
355
+ --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
356
+ --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
357
+ --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
358
+ --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
359
+ --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
360
+ --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
361
+ --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
362
+ --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
363
+ --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
364
+ --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
365
+ --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
366
+ --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
367
+ --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
368
+ --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
369
+ --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
370
+ --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
371
+ --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
372
+ --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
373
+ --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
374
+ --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
375
+ --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
376
+ --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
377
+ --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
378
+ --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
330
379
  --charcoal-space-layout-100: var(--charcoal-space-100);
331
380
  --charcoal-space-layout-90: var(--charcoal-space-90);
332
381
  --charcoal-space-layout-80: var(--charcoal-space-80);
@@ -335,31 +384,18 @@
335
384
  --charcoal-space-layout-50: var(--charcoal-space-50);
336
385
  --charcoal-space-layout-40: var(--charcoal-space-40);
337
386
  --charcoal-space-layout-30: var(--charcoal-space-30);
387
+ --charcoal-space-layout-25: var(--charcoal-space-25);
338
388
  --charcoal-space-layout-20: var(--charcoal-space-20);
339
389
  --charcoal-space-layout-10: var(--charcoal-space-10);
340
390
  --charcoal-space-layout-0: var(--charcoal-space-0);
341
- --charcoal-space-component-66: var(--charcoal-space-66);
342
- --charcoal-space-component-63: var(--charcoal-space-63);
343
- --charcoal-space-component-60: var(--charcoal-space-60);
344
- --charcoal-space-component-55: var(--charcoal-space-55);
345
- --charcoal-space-component-50: var(--charcoal-space-50);
346
- --charcoal-space-component-46: var(--charcoal-space-46);
347
- --charcoal-space-component-43: var(--charcoal-space-43);
348
- --charcoal-space-component-40: var(--charcoal-space-40);
349
- --charcoal-space-component-35: var(--charcoal-space-35);
350
- --charcoal-space-component-30: var(--charcoal-space-30);
351
- --charcoal-space-component-25: var(--charcoal-space-25);
352
- --charcoal-space-component-20: var(--charcoal-space-20);
353
- --charcoal-space-component-15: var(--charcoal-space-15);
354
- --charcoal-space-component-10: var(--charcoal-space-10);
355
- --charcoal-space-component-1: var(--charcoal-space-1);
356
- --charcoal-space-component-0: var(--charcoal-space-0);
357
391
  --charcoal-color-border-negative: var(--charcoal-color-dark-red-20);
358
392
  --charcoal-color-border-focus-2: var(--charcoal-color-dark-blue-20);
359
393
  --charcoal-color-border-disable: var(--charcoal-color-dark-neutral-a-5);
360
394
  --charcoal-color-border-focus-1: var(--charcoal-color-dark-blue-60);
361
395
  --charcoal-color-border-secondary: var(--charcoal-color-dark-neutral-a-10);
362
- --charcoal-color-border-default: var(--charcoal-color-dark-neutral-30);
396
+ --charcoal-color-border-press: var(--charcoal-color-dark-neutral-a-50);
397
+ --charcoal-color-border-hover: var(--charcoal-color-dark-neutral-a-40);
398
+ --charcoal-color-border-default: var(--charcoal-color-dark-neutral-a-30);
363
399
  --charcoal-color-icon-on-neutral-press: var(--charcoal-color-dark-neutral-90);
364
400
  --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-dark-neutral-90);
365
401
  --charcoal-color-icon-on-neutral-default: var(--charcoal-color-dark-neutral-90);
@@ -400,8 +436,8 @@
400
436
  --charcoal-color-text-info-press: var(--charcoal-color-dark-blue-90);
401
437
  --charcoal-color-text-info-hover: var(--charcoal-color-dark-blue-80);
402
438
  --charcoal-color-text-info-default: var(--charcoal-color-dark-blue-60);
403
- --charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-50);
404
- --charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-40);
439
+ --charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-30);
440
+ --charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-30);
405
441
  --charcoal-color-text-placeholder-default: var(--charcoal-color-dark-neutral-30);
406
442
  --charcoal-color-text-tertiary-press: var(--charcoal-color-dark-neutral-70);
407
443
  --charcoal-color-text-tertiary-hover: var(--charcoal-color-dark-neutral-60);
@@ -414,9 +450,9 @@
414
450
  --charcoal-color-text-hover: var(--charcoal-color-dark-neutral-80);
415
451
  --charcoal-color-text-default: var(--charcoal-color-dark-neutral-90);
416
452
  --charcoal-color-container-skeleton: var(--charcoal-color-dark-neutral-a-5);
417
- --charcoal-color-container-hud-press: var(--charcoal-color-light-neutral-20);
418
- --charcoal-color-container-hud-hover: var(--charcoal-color-light-neutral-20);
419
- --charcoal-color-container-hud-default: var(--charcoal-color-light-neutral-10);
453
+ --charcoal-color-container-hud-press: var(--charcoal-color-dark-neutral-70);
454
+ --charcoal-color-container-hud-hover: var(--charcoal-color-dark-neutral-80);
455
+ --charcoal-color-container-hud-default: var(--charcoal-color-dark-neutral-90);
420
456
  --charcoal-color-container-neutral-press: var(--charcoal-color-dark-neutral-50);
421
457
  --charcoal-color-container-neutral-hover: var(--charcoal-color-dark-neutral-40);
422
458
  --charcoal-color-container-discovery-press: var(--charcoal-color-dark-red-50);
@@ -462,13 +498,8 @@
462
498
  --charcoal-color-background-default: var(--charcoal-color-dark-neutral-0);
463
499
  --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
464
500
  --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
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);
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/src/css/_variables_light.css CHANGED
@@ -1,10 +1,21 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 26 Jul 2024 05:09:38 GMT
3
+ * Generated on Thu, 10 Oct 2024 09:26:47 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;
8
19
  --charcoal-text-font-family-sans: Sarasa UI J;
9
20
  --charcoal-text-line-height-100: 72;
10
21
  --charcoal-text-line-height-90: 64;
@@ -61,11 +72,7 @@
61
72
  --charcoal-space-10: 4;
62
73
  --charcoal-space-1: 2;
63
74
  --charcoal-space-0: 0;
64
- --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
65
- --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
66
- --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
67
- --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
68
- --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
75
+ --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
69
76
  --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
70
77
  --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
71
78
  --charcoal-color-container-subtle: rgba(31, 31, 31, 0.02);
@@ -327,6 +334,48 @@
327
334
  --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
328
335
  --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0);
329
336
  --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
337
+ --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
338
+ --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
339
+ --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
340
+ --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
341
+ --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-text-font-weight-bold: var(--charcoal-text-font-weight-70);
352
+ --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
353
+ --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
354
+ --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
355
+ --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
356
+ --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
357
+ --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
358
+ --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
359
+ --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
360
+ --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
361
+ --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
362
+ --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
363
+ --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
364
+ --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
365
+ --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
366
+ --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
367
+ --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
368
+ --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
369
+ --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
370
+ --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
371
+ --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
372
+ --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
373
+ --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
374
+ --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
375
+ --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
376
+ --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
377
+ --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
378
+ --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
330
379
  --charcoal-space-layout-100: var(--charcoal-space-100);
331
380
  --charcoal-space-layout-90: var(--charcoal-space-90);
332
381
  --charcoal-space-layout-80: var(--charcoal-space-80);
@@ -335,30 +384,17 @@
335
384
  --charcoal-space-layout-50: var(--charcoal-space-50);
336
385
  --charcoal-space-layout-40: var(--charcoal-space-40);
337
386
  --charcoal-space-layout-30: var(--charcoal-space-30);
387
+ --charcoal-space-layout-25: var(--charcoal-space-25);
338
388
  --charcoal-space-layout-20: var(--charcoal-space-20);
339
389
  --charcoal-space-layout-10: var(--charcoal-space-10);
340
390
  --charcoal-space-layout-0: var(--charcoal-space-0);
341
- --charcoal-space-component-66: var(--charcoal-space-66);
342
- --charcoal-space-component-63: var(--charcoal-space-63);
343
- --charcoal-space-component-60: var(--charcoal-space-60);
344
- --charcoal-space-component-55: var(--charcoal-space-55);
345
- --charcoal-space-component-50: var(--charcoal-space-50);
346
- --charcoal-space-component-46: var(--charcoal-space-46);
347
- --charcoal-space-component-43: var(--charcoal-space-43);
348
- --charcoal-space-component-40: var(--charcoal-space-40);
349
- --charcoal-space-component-35: var(--charcoal-space-35);
350
- --charcoal-space-component-30: var(--charcoal-space-30);
351
- --charcoal-space-component-25: var(--charcoal-space-25);
352
- --charcoal-space-component-20: var(--charcoal-space-20);
353
- --charcoal-space-component-15: var(--charcoal-space-15);
354
- --charcoal-space-component-10: var(--charcoal-space-10);
355
- --charcoal-space-component-1: var(--charcoal-space-1);
356
- --charcoal-space-component-0: var(--charcoal-space-0);
357
391
  --charcoal-color-border-negative: var(--charcoal-color-light-red-20);
358
392
  --charcoal-color-border-focus-2: var(--charcoal-color-light-blue-20);
359
393
  --charcoal-color-border-disable: var(--charcoal-color-light-neutral-a-10);
360
394
  --charcoal-color-border-focus-1: var(--charcoal-color-light-blue-60);
361
395
  --charcoal-color-border-secondary: var(--charcoal-color-light-neutral-a-10);
396
+ --charcoal-color-border-press: var(--charcoal-color-light-neutral-a-70);
397
+ --charcoal-color-border-hover: var(--charcoal-color-light-neutral-a-60);
362
398
  --charcoal-color-border-default: var(--charcoal-color-light-neutral-a-50);
363
399
  --charcoal-color-icon-on-neutral-press: var(--charcoal-color-light-neutral-10);
364
400
  --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-light-neutral-5);
@@ -400,8 +436,8 @@
400
436
  --charcoal-color-text-info-press: var(--charcoal-color-light-blue-80);
401
437
  --charcoal-color-text-info-hover: var(--charcoal-color-light-blue-70);
402
438
  --charcoal-color-text-info-default: var(--charcoal-color-light-blue-60);
403
- --charcoal-color-text-placeholder-press: var(--charcoal-color-light-neutral-70);
404
- --charcoal-color-text-placeholder-hover: var(--charcoal-color-light-neutral-60);
439
+ --charcoal-color-text-placeholder-press: var(--charcoal-color-light-neutral-50);
440
+ --charcoal-color-text-placeholder-hover: var(--charcoal-color-light-neutral-50);
405
441
  --charcoal-color-text-placeholder-default: var(--charcoal-color-light-neutral-50);
406
442
  --charcoal-color-text-tertiary-press: var(--charcoal-color-light-neutral-80);
407
443
  --charcoal-color-text-tertiary-hover: var(--charcoal-color-light-neutral-70);
@@ -462,13 +498,8 @@
462
498
  --charcoal-color-background-default: var(--charcoal-color-light-neutral-0);
463
499
  --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
464
500
  --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
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);
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/src/json/base.json CHANGED
@@ -1,4 +1,11 @@
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
+ },
2
9
  "color": {
3
10
  "light/neutral/0": { "value": "rgba(255, 255, 255, 1)" },
4
11
  "light/neutral-a/0": { "value": "rgba(31, 31, 31, 0)" },
@@ -261,13 +268,6 @@
261
268
  "dark/magenta/80": { "value": "rgba(247, 184, 213, 1)" },
262
269
  "dark/magenta/90": { "value": "rgba(253, 217, 233, 1)" }
263
270
  },
264
- "brand-color": {
265
- "pixiv": { "value": "rgba(0, 150, 250, 1)" },
266
- "premium": { "value": "rgba(253, 158, 22, 1)" },
267
- "comic": { "value": "rgba(255, 196, 0, 1)" },
268
- "booth": { "value": "rgba(252, 77, 80, 1)" },
269
- "factory": { "value": "rgba(0, 184, 205, 1)" }
270
- },
271
271
  "space": {
272
272
  "0": { "value": "0" },
273
273
  "1": { "value": "2" },
package/src/json/pixiv-dark.json CHANGED
@@ -1,47 +1,4 @@
1
1
  {
2
- "space": {
3
- "target/xs": { "value": "24" },
4
- "target/s": { "value": "32" },
5
- "target/m": { "value": "40" },
6
- "target/l": { "value": "48" },
7
- "component/0": { "value": "{space.0}" },
8
- "component/1": { "value": "{space.1}" },
9
- "component/10": { "value": "{space.10}" },
10
- "component/15": { "value": "{space.15}" },
11
- "component/20": { "value": "{space.20}" },
12
- "component/25": { "value": "{space.25}" },
13
- "component/30": { "value": "{space.30}" },
14
- "component/35": { "value": "{space.35}" },
15
- "component/40": { "value": "{space.40}" },
16
- "component/43": { "value": "{space.43}" },
17
- "component/46": { "value": "{space.46}" },
18
- "component/50": { "value": "{space.50}" },
19
- "component/55": { "value": "{space.55}" },
20
- "component/60": { "value": "{space.60}" },
21
- "component/63": { "value": "{space.63}" },
22
- "component/66": { "value": "{space.66}" },
23
- "layout/0": { "value": "{space.0}" },
24
- "layout/10": { "value": "{space.10}" },
25
- "layout/20": { "value": "{space.20}" },
26
- "layout/30": { "value": "{space.30}" },
27
- "layout/40": { "value": "{space.40}" },
28
- "layout/50": { "value": "{space.50}" },
29
- "layout/60": { "value": "{space.60}" },
30
- "layout/70": { "value": "{space.70}" },
31
- "layout/80": { "value": "{space.80}" },
32
- "layout/90": { "value": "{space.90}" },
33
- "layout/100": { "value": "{space.100}" }
34
- },
35
- "radius": {
36
- "none": { "value": "{space.component/0}" },
37
- "xs": { "value": "{space.component/1}" },
38
- "s": { "value": "{space.component/10}" },
39
- "m": { "value": "{space.component/20}" },
40
- "l": { "value": "{space.component/25}" },
41
- "xl": { "value": "{space.component/30}" },
42
- "xxl": { "value": "{space.component/40}" },
43
- "oval": { "value": "999999" }
44
- },
45
2
  "color": {
46
3
  "background/default": { "value": "{color.dark/neutral/0}" },
47
4
  "background/secondary": { "value": "{color.dark/neutral/-5}" },
@@ -86,9 +43,9 @@
86
43
  "container/discovery/press": { "value": "{color.dark/red/50}" },
87
44
  "container/neutral/hover": { "value": "{color.dark/neutral/40}" },
88
45
  "container/neutral/press": { "value": "{color.dark/neutral/50}" },
89
- "container/hud/default": { "value": "{color.light/neutral/10}" },
90
- "container/hud/hover": { "value": "{color.light/neutral/20}" },
91
- "container/hud/press": { "value": "{color.light/neutral/20}" },
46
+ "container/hud/default": { "value": "{color.dark/neutral/90}" },
47
+ "container/hud/hover": { "value": "{color.dark/neutral/80}" },
48
+ "container/hud/press": { "value": "{color.dark/neutral/70}" },
92
49
  "container/skeleton": { "value": "{color.dark/neutral-a/5}" },
93
50
  "container/subtle": { "value": "rgba(228, 228, 228, 0.02)" },
94
51
  "icon/secondary/default": { "value": "{color.text/secondary/default}" },
@@ -117,8 +74,8 @@
117
74
  "text/tertiary/hover": { "value": "{color.dark/neutral/60}" },
118
75
  "text/tertiary/press": { "value": "{color.dark/neutral/70}" },
119
76
  "text/placeholder/default": { "value": "{color.dark/neutral/30}" },
120
- "text/placeholder/hover": { "value": "{color.dark/neutral/40}" },
121
- "text/placeholder/press": { "value": "{color.dark/neutral/50}" },
77
+ "text/placeholder/hover": { "value": "{color.dark/neutral/30}" },
78
+ "text/placeholder/press": { "value": "{color.dark/neutral/30}" },
122
79
  "text/info/default": { "value": "{color.dark/blue/60}" },
123
80
  "text/info/hover": { "value": "{color.dark/blue/80}" },
124
81
  "text/info/press": { "value": "{color.dark/blue/90}" },
@@ -171,12 +128,17 @@
171
128
  "icon/on-neutral/default": { "value": "{color.dark/neutral/90}" },
172
129
  "icon/on-neutral/hover": { "value": "{color.dark/neutral/90}" },
173
130
  "icon/on-neutral/press": { "value": "{color.dark/neutral/90}" },
174
- "border/default": { "value": "{color.dark/neutral/30}" },
131
+ "border/default": { "value": "{color.dark/neutral-a/30}" },
132
+ "border/hover": { "value": "{color.dark/neutral-a/40}" },
133
+ "border/press": { "value": "{color.dark/neutral-a/50}" },
175
134
  "border/secondary": { "value": "{color.dark/neutral-a/10}" },
176
135
  "border/focus/1": { "value": "{color.dark/blue/60}" },
177
136
  "border/disable": { "value": "{color.dark/neutral-a/5}" },
137
+ "border/selected": { "value": "{color.container/primary/default}" },
178
138
  "border/focus/2": { "value": "{color.dark/blue/20}" },
139
+ "border/focus/legacy": { "value": "rgba(0, 150, 250, 0.32)" },
179
140
  "border/negative": { "value": "{color.dark/red/20}" },
141
+ "border/hud": { "value": "{color.background/default}" },
180
142
  "icon/on-negative/default": { "value": "{color.text/on-negative/default}" },
181
143
  "icon/on-negative/hover": { "value": "{color.text/on-negative/hover}" },
182
144
  "icon/on-negative/press": { "value": "{color.text/on-negative/press}" },
@@ -186,5 +148,82 @@
186
148
  "icon/on-notice/press": { "value": "{color.text/on-notice/press}" },
187
149
  "icon/on-positive/hover": { "value": "{color.text/on-positive/hover}" },
188
150
  "icon/on-positive/press": { "value": "{color.text/on-positive/press}" }
151
+ },
152
+ "paragraph-width": {
153
+ "s": { "value": "320" },
154
+ "m": { "value": "448" },
155
+ "l": { "value": "672" },
156
+ "s-compact": { "value": "280" },
157
+ "m-compact": { "value": "392" },
158
+ "l-compact": { "value": "588" },
159
+ "s-cozy": { "value": "588" },
160
+ "m-cozy": { "value": "616" },
161
+ "l-cozy": { "value": "924" }
162
+ },
163
+ "space": {
164
+ "target/xs": { "value": "24" },
165
+ "target/s": { "value": "32" },
166
+ "target/m": { "value": "40" },
167
+ "target/l": { "value": "48" },
168
+ "layout/0": { "value": "{space.0}" },
169
+ "layout/10": { "value": "{space.10}" },
170
+ "layout/20": { "value": "{space.20}" },
171
+ "layout/25": { "value": "{space.25}" },
172
+ "layout/30": { "value": "{space.30}" },
173
+ "layout/40": { "value": "{space.40}" },
174
+ "layout/50": { "value": "{space.50}" },
175
+ "layout/60": { "value": "{space.60}" },
176
+ "layout/70": { "value": "{space.70}" },
177
+ "layout/80": { "value": "{space.80}" },
178
+ "layout/90": { "value": "{space.90}" },
179
+ "layout/100": { "value": "{space.100}" },
180
+ "between-checkboxes/vertical": { "value": "{space.layout/0}" },
181
+ "between-checkboxes/horizontal": { "value": "{space.layout/25}" }
182
+ },
183
+ "text": {
184
+ "font-size/paragraph": { "value": "{text.font-size/10}" },
185
+ "line-height/paragraph": { "value": "{text.line-height/20}" },
186
+ "line-height/body": { "value": "{text.line-height/10}" },
187
+ "line-height/heading/xxxl": { "value": "{text.line-height/70}" },
188
+ "line-height/heading/xxl": { "value": "{text.line-height/60}" },
189
+ "line-height/heading/xl": { "value": "{text.line-height/50}" },
190
+ "line-height/heading/l": { "value": "{text.line-height/40}" },
191
+ "line-height/heading/m": { "value": "{text.line-height/30}" },
192
+ "line-height/heading/s": { "value": "{text.line-height/20}" },
193
+ "line-height/heading/xs": { "value": "{text.line-height/20}" },
194
+ "line-height/heading/xxs": { "value": "{text.line-height/10}" },
195
+ "line-height/heading/xxxs": { "value": "{text.line-height/5}" },
196
+ "line-height/caption/m": { "value": "{text.line-height/5}" },
197
+ "line-height/caption/s": { "value": "{text.line-height/1}" },
198
+ "font-size/body": { "value": "{text.font-size/10}" },
199
+ "font-size/heading/xxxl": { "value": "{text.font-size/90}" },
200
+ "font-size/heading/xxl": { "value": "{text.font-size/80}" },
201
+ "font-size/heading/xl": { "value": "{text.font-size/70}" },
202
+ "font-size/heading/l": { "value": "{text.font-size/60}" },
203
+ "font-size/heading/m": { "value": "{text.font-size/50}" },
204
+ "font-size/heading/s": { "value": "{text.font-size/40}" },
205
+ "font-size/heading/xs": { "value": "{text.font-size/30}" },
206
+ "font-size/heading/xxs": { "value": "{text.font-size/20}" },
207
+ "font-size/heading/xxxs": { "value": "{text.font-size/5}" },
208
+ "font-size/caption/m": { "value": "{text.font-size/5}" },
209
+ "font-size/caption/s": { "value": "{text.font-size/1}" },
210
+ "font-weight/regular": { "value": "{text.font-weight/40}" },
211
+ "font-weight/bold": { "value": "{text.font-weight/70}" }
212
+ },
213
+ "border-width": {
214
+ "m": { "value": "1" },
215
+ "l": { "value": "2" },
216
+ "focus/1": { "value": "{border-width.m}" },
217
+ "focus/2": { "value": "{border-width.l}" }
218
+ },
219
+ "radius": {
220
+ "0": { "value": "{space.0}" },
221
+ "xs": { "value": "{space.1}" },
222
+ "s": { "value": "{space.10}" },
223
+ "m": { "value": "{space.20}" },
224
+ "l": { "value": "{space.25}" },
225
+ "xl": { "value": "{space.30}" },
226
+ "xxl": { "value": "{space.40}" },
227
+ "oval": { "value": "999999" }
189
228
  }
190
229
  }
package/src/json/pixiv-light.json CHANGED
@@ -1,47 +1,4 @@
1
1
  {
2
- "space": {
3
- "target/xs": { "value": "24" },
4
- "target/s": { "value": "32" },
5
- "target/m": { "value": "40" },
6
- "target/l": { "value": "48" },
7
- "component/0": { "value": "{space.0}" },
8
- "component/1": { "value": "{space.1}" },
9
- "component/10": { "value": "{space.10}" },
10
- "component/15": { "value": "{space.15}" },
11
- "component/20": { "value": "{space.20}" },
12
- "component/25": { "value": "{space.25}" },
13
- "component/30": { "value": "{space.30}" },
14
- "component/35": { "value": "{space.35}" },
15
- "component/40": { "value": "{space.40}" },
16
- "component/43": { "value": "{space.43}" },
17
- "component/46": { "value": "{space.46}" },
18
- "component/50": { "value": "{space.50}" },
19
- "component/55": { "value": "{space.55}" },
20
- "component/60": { "value": "{space.60}" },
21
- "component/63": { "value": "{space.63}" },
22
- "component/66": { "value": "{space.66}" },
23
- "layout/0": { "value": "{space.0}" },
24
- "layout/10": { "value": "{space.10}" },
25
- "layout/20": { "value": "{space.20}" },
26
- "layout/30": { "value": "{space.30}" },
27
- "layout/40": { "value": "{space.40}" },
28
- "layout/50": { "value": "{space.50}" },
29
- "layout/60": { "value": "{space.60}" },
30
- "layout/70": { "value": "{space.70}" },
31
- "layout/80": { "value": "{space.80}" },
32
- "layout/90": { "value": "{space.90}" },
33
- "layout/100": { "value": "{space.100}" }
34
- },
35
- "radius": {
36
- "none": { "value": "{space.component/0}" },
37
- "xs": { "value": "{space.component/1}" },
38
- "s": { "value": "{space.component/10}" },
39
- "m": { "value": "{space.component/20}" },
40
- "l": { "value": "{space.component/25}" },
41
- "xl": { "value": "{space.component/30}" },
42
- "xxl": { "value": "{space.component/40}" },
43
- "oval": { "value": "999999" }
44
- },
45
2
  "color": {
46
3
  "background/default": { "value": "{color.light/neutral/0}" },
47
4
  "background/secondary": { "value": "{color.light/neutral/5}" },
@@ -117,8 +74,8 @@
117
74
  "text/tertiary/hover": { "value": "{color.light/neutral/70}" },
118
75
  "text/tertiary/press": { "value": "{color.light/neutral/80}" },
119
76
  "text/placeholder/default": { "value": "{color.light/neutral/50}" },
120
- "text/placeholder/hover": { "value": "{color.light/neutral/60}" },
121
- "text/placeholder/press": { "value": "{color.light/neutral/70}" },
77
+ "text/placeholder/hover": { "value": "{color.light/neutral/50}" },
78
+ "text/placeholder/press": { "value": "{color.light/neutral/50}" },
122
79
  "text/info/default": { "value": "{color.light/blue/60}" },
123
80
  "text/info/hover": { "value": "{color.light/blue/70}" },
124
81
  "text/info/press": { "value": "{color.light/blue/80}" },
@@ -172,11 +129,16 @@
172
129
  "icon/on-neutral/hover": { "value": "{color.light/neutral/5}" },
173
130
  "icon/on-neutral/press": { "value": "{color.light/neutral/10}" },
174
131
  "border/default": { "value": "{color.light/neutral-a/50}" },
132
+ "border/hover": { "value": "{color.light/neutral-a/60}" },
133
+ "border/press": { "value": "{color.light/neutral-a/70}" },
175
134
  "border/secondary": { "value": "{color.light/neutral-a/10}" },
176
135
  "border/focus/1": { "value": "{color.light/blue/60}" },
177
136
  "border/disable": { "value": "{color.light/neutral-a/10}" },
137
+ "border/selected": { "value": "{color.container/primary/default}" },
178
138
  "border/focus/2": { "value": "{color.light/blue/20}" },
139
+ "border/focus/legacy": { "value": "rgba(0, 150, 250, 0.32)" },
179
140
  "border/negative": { "value": "{color.light/red/20}" },
141
+ "border/hud": { "value": "{color.background/default}" },
180
142
  "icon/on-negative/default": { "value": "{color.text/on-negative/default}" },
181
143
  "icon/on-negative/hover": { "value": "{color.text/on-negative/hover}" },
182
144
  "icon/on-negative/press": { "value": "{color.text/on-negative/press}" },
@@ -186,5 +148,82 @@
186
148
  "icon/on-notice/press": { "value": "{color.text/on-notice/press}" },
187
149
  "icon/on-positive/hover": { "value": "{color.text/on-positive/hover}" },
188
150
  "icon/on-positive/press": { "value": "{color.text/on-positive/press}" }
151
+ },
152
+ "paragraph-width": {
153
+ "s": { "value": "320" },
154
+ "m": { "value": "448" },
155
+ "l": { "value": "672" },
156
+ "s-compact": { "value": "280" },
157
+ "m-compact": { "value": "392" },
158
+ "l-compact": { "value": "588" },
159
+ "s-cozy": { "value": "588" },
160
+ "m-cozy": { "value": "616" },
161
+ "l-cozy": { "value": "924" }
162
+ },
163
+ "space": {
164
+ "target/xs": { "value": "24" },
165
+ "target/s": { "value": "32" },
166
+ "target/m": { "value": "40" },
167
+ "target/l": { "value": "48" },
168
+ "layout/0": { "value": "{space.0}" },
169
+ "layout/10": { "value": "{space.10}" },
170
+ "layout/20": { "value": "{space.20}" },
171
+ "layout/25": { "value": "{space.25}" },
172
+ "layout/30": { "value": "{space.30}" },
173
+ "layout/40": { "value": "{space.40}" },
174
+ "layout/50": { "value": "{space.50}" },
175
+ "layout/60": { "value": "{space.60}" },
176
+ "layout/70": { "value": "{space.70}" },
177
+ "layout/80": { "value": "{space.80}" },
178
+ "layout/90": { "value": "{space.90}" },
179
+ "layout/100": { "value": "{space.100}" },
180
+ "between-checkboxes/vertical": { "value": "{space.layout/0}" },
181
+ "between-checkboxes/horizontal": { "value": "{space.layout/25}" }
182
+ },
183
+ "text": {
184
+ "font-size/paragraph": { "value": "{text.font-size/10}" },
185
+ "line-height/paragraph": { "value": "{text.line-height/20}" },
186
+ "line-height/body": { "value": "{text.line-height/10}" },
187
+ "line-height/heading/xxxl": { "value": "{text.line-height/70}" },
188
+ "line-height/heading/xxl": { "value": "{text.line-height/60}" },
189
+ "line-height/heading/xl": { "value": "{text.line-height/50}" },
190
+ "line-height/heading/l": { "value": "{text.line-height/40}" },
191
+ "line-height/heading/m": { "value": "{text.line-height/30}" },
192
+ "line-height/heading/s": { "value": "{text.line-height/20}" },
193
+ "line-height/heading/xs": { "value": "{text.line-height/20}" },
194
+ "line-height/heading/xxs": { "value": "{text.line-height/10}" },
195
+ "line-height/heading/xxxs": { "value": "{text.line-height/5}" },
196
+ "line-height/caption/m": { "value": "{text.line-height/5}" },
197
+ "line-height/caption/s": { "value": "{text.line-height/1}" },
198
+ "font-size/body": { "value": "{text.font-size/10}" },
199
+ "font-size/heading/xxxl": { "value": "{text.font-size/90}" },
200
+ "font-size/heading/xxl": { "value": "{text.font-size/80}" },
201
+ "font-size/heading/xl": { "value": "{text.font-size/70}" },
202
+ "font-size/heading/l": { "value": "{text.font-size/60}" },
203
+ "font-size/heading/m": { "value": "{text.font-size/50}" },
204
+ "font-size/heading/s": { "value": "{text.font-size/40}" },
205
+ "font-size/heading/xs": { "value": "{text.font-size/30}" },
206
+ "font-size/heading/xxs": { "value": "{text.font-size/20}" },
207
+ "font-size/heading/xxxs": { "value": "{text.font-size/5}" },
208
+ "font-size/caption/m": { "value": "{text.font-size/5}" },
209
+ "font-size/caption/s": { "value": "{text.font-size/1}" },
210
+ "font-weight/regular": { "value": "{text.font-weight/40}" },
211
+ "font-weight/bold": { "value": "{text.font-weight/70}" }
212
+ },
213
+ "border-width": {
214
+ "m": { "value": "1" },
215
+ "l": { "value": "2" },
216
+ "focus/1": { "value": "{border-width.m}" },
217
+ "focus/2": { "value": "{border-width.l}" }
218
+ },
219
+ "radius": {
220
+ "0": { "value": "{space.0}" },
221
+ "xs": { "value": "{space.1}" },
222
+ "s": { "value": "{space.10}" },
223
+ "m": { "value": "{space.20}" },
224
+ "l": { "value": "{space.25}" },
225
+ "xl": { "value": "{space.30}" },
226
+ "xxl": { "value": "{space.40}" },
227
+ "oval": { "value": "999999" }
189
228
  }
190
229
  }