@charcoal-ui/theme 4.0.0-beta.16 → 4.0.0-beta.17

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 (78) hide show
  1. package/dist/{css → unstable-css}/_variables_dark.css +130 -111
  2. package/dist/{css → unstable-css}/_variables_light.css +130 -111
  3. package/dist/unstable-token-object/helpers/changecase-keys.d.ts.map +1 -0
  4. package/dist/unstable-token-object/helpers/changecase-keys.test-d.d.ts.map +1 -0
  5. package/dist/unstable-token-object/helpers/changecase-keys.test.d.ts.map +1 -0
  6. package/dist/unstable-token-object/helpers/is-empty-array.d.ts.map +1 -0
  7. package/dist/unstable-token-object/helpers/nest-object.d.ts.map +1 -0
  8. package/dist/unstable-token-object/helpers/nest-object.test.d.ts.map +1 -0
  9. package/dist/{token-object → unstable-token-object}/index.cjs.js +12 -12
  10. package/dist/unstable-token-object/index.cjs.js.map +1 -0
  11. package/dist/unstable-token-object/index.d.ts.map +1 -0
  12. package/dist/{token-object → unstable-token-object}/index.esm.js +8 -8
  13. package/dist/unstable-token-object/index.esm.js.map +1 -0
  14. package/dist/unstable-token-object/reference-token.d.ts.map +1 -0
  15. package/dist/unstable-token-object/reference-token.test.d.ts.map +1 -0
  16. package/dist/unstable-token-object/to-token-object.d.ts.map +1 -0
  17. package/dist/unstable-token-object/token-object.bench.d.ts.map +1 -0
  18. package/dist/unstable-token-object/token-object.test.d.ts.map +1 -0
  19. package/dist/unstable-token-object/types.d.ts.map +1 -0
  20. package/dist/{tokens → unstable-tokens}/camel/css-variables.json +74 -62
  21. package/dist/{tokens → unstable-tokens}/camel/pixiv-dark.json +128 -116
  22. package/dist/{tokens → unstable-tokens}/camel/pixiv-light.json +121 -109
  23. package/dist/{tokens → unstable-tokens}/css-variables.json +74 -62
  24. package/dist/{tokens → unstable-tokens}/pixiv-dark.json +128 -116
  25. package/dist/{tokens → unstable-tokens}/pixiv-light.json +121 -109
  26. package/package.json +17 -17
  27. package/src/json/base.json +89 -78
  28. package/src/json/pixiv-dark.json +60 -52
  29. package/src/json/pixiv-light.json +60 -52
  30. package/src/{css → unstable-css}/_variables_dark.css +130 -111
  31. package/src/{css → unstable-css}/_variables_light.css +130 -111
  32. package/src/{token-object → unstable-token-object}/__snapshots__/token-object.test.ts.snap +245 -197
  33. package/src/{token-object → unstable-token-object}/helpers/__snapshots__/changecase-keys.test.ts.snap +211 -187
  34. package/src/{token-object → unstable-token-object}/token-object.test.ts +2 -2
  35. package/dist/token-object/helpers/changecase-keys.d.ts.map +0 -1
  36. package/dist/token-object/helpers/changecase-keys.test-d.d.ts.map +0 -1
  37. package/dist/token-object/helpers/changecase-keys.test.d.ts.map +0 -1
  38. package/dist/token-object/helpers/is-empty-array.d.ts.map +0 -1
  39. package/dist/token-object/helpers/nest-object.d.ts.map +0 -1
  40. package/dist/token-object/helpers/nest-object.test.d.ts.map +0 -1
  41. package/dist/token-object/index.cjs.js.map +0 -1
  42. package/dist/token-object/index.d.ts.map +0 -1
  43. package/dist/token-object/index.esm.js.map +0 -1
  44. package/dist/token-object/reference-token.d.ts.map +0 -1
  45. package/dist/token-object/reference-token.test.d.ts.map +0 -1
  46. package/dist/token-object/to-token-object.d.ts.map +0 -1
  47. package/dist/token-object/token-object.bench.d.ts.map +0 -1
  48. package/dist/token-object/token-object.test.d.ts.map +0 -1
  49. package/dist/token-object/types.d.ts.map +0 -1
  50. /package/dist/{css → unstable-css}/_variables_dark.css.d.ts +0 -0
  51. /package/dist/{css → unstable-css}/_variables_light.css.d.ts +0 -0
  52. /package/dist/{token-object → unstable-token-object}/helpers/changecase-keys.d.ts +0 -0
  53. /package/dist/{token-object → unstable-token-object}/helpers/changecase-keys.test-d.d.ts +0 -0
  54. /package/dist/{token-object → unstable-token-object}/helpers/changecase-keys.test.d.ts +0 -0
  55. /package/dist/{token-object → unstable-token-object}/helpers/is-empty-array.d.ts +0 -0
  56. /package/dist/{token-object → unstable-token-object}/helpers/nest-object.d.ts +0 -0
  57. /package/dist/{token-object → unstable-token-object}/helpers/nest-object.test.d.ts +0 -0
  58. /package/dist/{token-object → unstable-token-object}/index.d.ts +0 -0
  59. /package/dist/{token-object → unstable-token-object}/reference-token.d.ts +0 -0
  60. /package/dist/{token-object → unstable-token-object}/reference-token.test.d.ts +0 -0
  61. /package/dist/{token-object → unstable-token-object}/to-token-object.d.ts +0 -0
  62. /package/dist/{token-object → unstable-token-object}/token-object.bench.d.ts +0 -0
  63. /package/dist/{token-object → unstable-token-object}/token-object.test.d.ts +0 -0
  64. /package/dist/{token-object → unstable-token-object}/types.d.ts +0 -0
  65. /package/src/{css → unstable-css}/_variables_dark.css.d.ts +0 -0
  66. /package/src/{css → unstable-css}/_variables_light.css.d.ts +0 -0
  67. /package/src/{token-object → unstable-token-object}/helpers/changecase-keys.test-d.ts +0 -0
  68. /package/src/{token-object → unstable-token-object}/helpers/changecase-keys.test.ts +0 -0
  69. /package/src/{token-object → unstable-token-object}/helpers/changecase-keys.ts +0 -0
  70. /package/src/{token-object → unstable-token-object}/helpers/is-empty-array.ts +0 -0
  71. /package/src/{token-object → unstable-token-object}/helpers/nest-object.test.ts +0 -0
  72. /package/src/{token-object → unstable-token-object}/helpers/nest-object.ts +0 -0
  73. /package/src/{token-object → unstable-token-object}/index.ts +0 -0
  74. /package/src/{token-object → unstable-token-object}/reference-token.test.ts +0 -0
  75. /package/src/{token-object → unstable-token-object}/reference-token.ts +0 -0
  76. /package/src/{token-object → unstable-token-object}/to-token-object.ts +0 -0
  77. /package/src/{token-object → unstable-token-object}/token-object.bench.ts +0 -0
  78. /package/src/{token-object → unstable-token-object}/types.ts +0 -0
package/dist/{css → unstable-css}/_variables_dark.css RENAMED
@@ -1,49 +1,22 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 09 Oct 2024 07:28:06 GMT
3
+ * Generated on Fri, 13 Dec 2024 12:47:31 GMT
4
4
  */
5
5
 
6
6
  :root[data-theme='dark'] {
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;
7
+ --charcoal-radius-oval: 999999px;
8
+ --charcoal-paragraph-width-l-cozy: 924px;
9
+ --charcoal-paragraph-width-m-cozy: 616px;
10
+ --charcoal-paragraph-width-s-cozy: 588px;
11
+ --charcoal-paragraph-width-l-compact: 588px;
12
+ --charcoal-paragraph-width-m-compact: 392px;
13
+ --charcoal-paragraph-width-s-compact: 280px;
14
+ --charcoal-paragraph-width-l: 672px;
15
+ --charcoal-paragraph-width-m: 448px;
16
+ --charcoal-paragraph-width-s: 320px;
17
+ --charcoal-border-width-l: 2px;
18
+ --charcoal-border-width-m: 1px;
44
19
  --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
45
- --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
46
- --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
47
20
  --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02);
48
21
  --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1);
49
22
  --charcoal-color-dark-magenta-80: rgba(247, 184, 213, 1);
@@ -123,9 +96,9 @@
123
96
  --charcoal-color-dark-green-0: rgba(31, 31, 31, 1);
124
97
  --charcoal-color-dark-green--5: rgba(21, 21, 21, 1);
125
98
  --charcoal-color-dark-green--10: rgba(6, 6, 6, 1);
126
- --charcoal-color-dark-yellow-90: rgba(252, 227, 145, 1);
127
- --charcoal-color-dark-yellow-80: rgba(231, 199, 80, 1);
128
- --charcoal-color-dark-yellow-70: rgba(222, 185, 7, 1);
99
+ --charcoal-color-dark-yellow-90: rgba(252, 225, 167, 1);
100
+ --charcoal-color-dark-yellow-80: rgba(238, 195, 92, 1);
101
+ --charcoal-color-dark-yellow-70: rgba(235, 178, 19, 1);
129
102
  --charcoal-color-dark-yellow-60: rgba(222, 167, 29, 1);
130
103
  --charcoal-color-dark-yellow-50: rgba(199, 140, 10, 1);
131
104
  --charcoal-color-dark-yellow-40: rgba(174, 121, 14, 1);
@@ -174,18 +147,19 @@
174
147
  --charcoal-color-dark-neutral-5: rgba(41, 41, 41, 1);
175
148
  --charcoal-color-dark-neutral-0: rgba(31, 31, 31, 1);
176
149
  --charcoal-color-dark-neutral--5: rgba(21, 21, 21, 1);
177
- --charcoal-color-dark-neutral-a-80: rgba(228, 228, 228, 0.87);
178
- --charcoal-color-dark-neutral-a-70: rgba(228, 228, 228, 0.795);
179
- --charcoal-color-dark-neutral-a-60: rgba(228, 228, 228, 0.73);
180
- --charcoal-color-dark-neutral-a-50: rgba(228, 228, 228, 0.61);
181
- --charcoal-color-dark-neutral-a-40: rgba(228, 228, 228, 0.505);
182
- --charcoal-color-dark-neutral-a-30: rgba(228, 228, 228, 0.41);
183
- --charcoal-color-dark-neutral-a-20: rgba(228, 228, 228, 0.255);
184
- --charcoal-color-dark-neutral-a-10: rgba(228, 228, 228, 0.1);
185
- --charcoal-color-dark-neutral-a-5: rgba(228, 228, 228, 0.05);
186
- --charcoal-color-dark-neutral-a-0: rgba(228, 228, 228, 0);
187
- --charcoal-color-dark-neutral-a--5: rgba(6, 6, 6, 0.41);
188
- --charcoal-color-dark-neutral-a--10: rgba(6, 6, 6, 1);
150
+ --charcoal-color-dark-neutral-a-90: rgba(255, 255, 255, 0.88);
151
+ --charcoal-color-dark-neutral-a-80: rgba(255, 255, 255, 0.765);
152
+ --charcoal-color-dark-neutral-a-70: rgba(255, 255, 255, 0.7);
153
+ --charcoal-color-dark-neutral-a-60: rgba(255, 255, 255, 0.645);
154
+ --charcoal-color-dark-neutral-a-50: rgba(255, 255, 255, 0.535);
155
+ --charcoal-color-dark-neutral-a-40: rgba(255, 255, 255, 0.44);
156
+ --charcoal-color-dark-neutral-a-30: rgba(255, 255, 255, 0.36);
157
+ --charcoal-color-dark-neutral-a-20: rgba(255, 255, 255, 0.225);
158
+ --charcoal-color-dark-neutral-a-10: rgba(255, 255, 255, 0.09);
159
+ --charcoal-color-dark-neutral-a-5: rgba(255, 255, 255, 0.045);
160
+ --charcoal-color-dark-neutral-a-0: rgba(255, 255, 255, 0);
161
+ --charcoal-color-dark-neutral-a--5: rgba(0, 0, 0, 0.32);
162
+ --charcoal-color-dark-neutral-a--10: rgba(0, 0, 0, 0.8);
189
163
  --charcoal-color-dark-neutral--10: rgba(6, 6, 6, 1);
190
164
  --charcoal-color-light-magenta-90: rgba(59, 5, 37, 1);
191
165
  --charcoal-color-light-magenta-80: rgba(98, 27, 67, 1);
@@ -217,6 +191,17 @@
217
191
  --charcoal-color-light-indigo-20: rgba(210, 216, 252, 1);
218
192
  --charcoal-color-light-indigo-10: rgba(226, 231, 253, 1);
219
193
  --charcoal-color-light-indigo-5: rgba(241, 242, 253, 1);
194
+ --charcoal-color-light-cyan-50: rgba(1, 162, 187, 1);
195
+ --charcoal-color-light-emerald-90: rgba(1, 38, 29, 1);
196
+ --charcoal-color-light-emerald-80: rgba(5, 62, 49, 1);
197
+ --charcoal-color-light-emerald-70: rgba(13, 89, 72, 1);
198
+ --charcoal-color-light-emerald-60: rgba(20, 131, 107, 1);
199
+ --charcoal-color-light-emerald-50: rgba(22, 165, 135, 1);
200
+ --charcoal-color-light-emerald-40: rgba(61, 189, 157, 1);
201
+ --charcoal-color-light-emerald-30: rgba(88, 211, 179, 1);
202
+ --charcoal-color-light-emerald-20: rgba(138, 234, 206, 1);
203
+ --charcoal-color-light-emerald-10: rgba(193, 247, 230, 1);
204
+ --charcoal-color-light-emerald-5: rgba(229, 251, 244, 1);
220
205
  --charcoal-color-light-blue-90: rgba(3, 35, 63, 1);
221
206
  --charcoal-color-light-blue-80: rgba(19, 58, 93, 1);
222
207
  --charcoal-color-light-blue-70: rgba(24, 81, 130, 1);
@@ -292,53 +277,79 @@
292
277
  --charcoal-color-light-neutral-20: rgba(217, 217, 217, 1);
293
278
  --charcoal-color-light-neutral-10: rgba(232, 232, 232, 1);
294
279
  --charcoal-color-light-neutral-5: rgba(243, 243, 243, 1);
295
- --charcoal-color-light-neutral-a-80: rgba(31, 31, 31, 0.885);
296
- --charcoal-color-light-neutral-a-70: rgba(31, 31, 31, 0.775);
297
- --charcoal-color-light-neutral-a-60: rgba(31, 31, 31, 0.635);
298
- --charcoal-color-light-neutral-a-50: rgba(31, 31, 31, 0.475);
299
- --charcoal-color-light-neutral-a-40: rgba(31, 31, 31, 0.37);
300
- --charcoal-color-light-neutral-a-30: rgba(31, 31, 31, 0.27);
301
- --charcoal-color-light-neutral-a-20: rgba(31, 31, 31, 0.17);
302
- --charcoal-color-light-neutral-a-10: rgba(31, 31, 31, 0.102);
303
- --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
304
- --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0);
280
+ --charcoal-color-light-neutral-a-90: rgba(0, 0, 0, 0.88);
281
+ --charcoal-color-light-neutral-a-80: rgba(0, 0, 0, 0.78);
282
+ --charcoal-color-light-neutral-a-70: rgba(0, 0, 0, 0.683);
283
+ --charcoal-color-light-neutral-a-60: rgba(0, 0, 0, 0.555);
284
+ --charcoal-color-light-neutral-a-50: rgba(0, 0, 0, 0.42);
285
+ --charcoal-color-light-neutral-a-40: rgba(0, 0, 0, 0.325);
286
+ --charcoal-color-light-neutral-a-30: rgba(0, 0, 0, 0.24);
287
+ --charcoal-color-light-neutral-a-20: rgba(0, 0, 0, 0.15);
288
+ --charcoal-color-light-neutral-a-10: rgba(0, 0, 0, 0.09);
289
+ --charcoal-color-light-neutral-a-5: rgba(0, 0, 0, 0.047);
290
+ --charcoal-color-light-neutral-a-0: rgba(0, 0, 0, 0);
305
291
  --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
292
+ --charcoal-space-target-l: 48px;
293
+ --charcoal-space-target-m: 40px;
294
+ --charcoal-space-target-s: 32px;
295
+ --charcoal-space-target-xs: 24px;
296
+ --charcoal-space-999: 999999px;
297
+ --charcoal-space-100: 440px;
298
+ --charcoal-space-90: 272px;
299
+ --charcoal-space-80: 168px;
300
+ --charcoal-space-70: 104px;
301
+ --charcoal-space-66: 96px;
302
+ --charcoal-space-63: 80px;
303
+ --charcoal-space-60: 64px;
304
+ --charcoal-space-55: 48px;
305
+ --charcoal-space-50: 40px;
306
+ --charcoal-space-46: 32px;
307
+ --charcoal-space-43: 28px;
308
+ --charcoal-space-40: 24px;
309
+ --charcoal-space-35: 20px;
310
+ --charcoal-space-30: 16px;
311
+ --charcoal-space-25: 12px;
312
+ --charcoal-space-20: 8px;
313
+ --charcoal-space-15: 6px;
314
+ --charcoal-space-10: 4px;
315
+ --charcoal-space-1: 2px;
316
+ --charcoal-space-0: 0px;
306
317
  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
307
318
  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
308
319
  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
309
320
  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
310
321
  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
311
322
  --charcoal-text-font-family-sans: Sarasa UI J;
312
- --charcoal-text-line-height-100: 72;
313
- --charcoal-text-line-height-90: 64;
314
- --charcoal-text-line-height-80: 56;
315
- --charcoal-text-line-height-70: 52;
316
- --charcoal-text-line-height-60: 44;
317
- --charcoal-text-line-height-50: 40;
318
- --charcoal-text-line-height-40: 36;
319
- --charcoal-text-line-height-30: 32;
320
- --charcoal-text-line-height-20: 28;
321
- --charcoal-text-line-height-10: 24;
322
- --charcoal-text-line-height-5: 20;
323
- --charcoal-text-line-height-1: 18;
323
+ --charcoal-text-line-height-100: 72px;
324
+ --charcoal-text-line-height-90: 64px;
325
+ --charcoal-text-line-height-80: 56px;
326
+ --charcoal-text-line-height-70: 52px;
327
+ --charcoal-text-line-height-60: 44px;
328
+ --charcoal-text-line-height-50: 40px;
329
+ --charcoal-text-line-height-40: 36px;
330
+ --charcoal-text-line-height-30: 32px;
331
+ --charcoal-text-line-height-20: 28px;
332
+ --charcoal-text-line-height-10: 24px;
333
+ --charcoal-text-line-height-5: 20px;
334
+ --charcoal-text-line-height-1: 18px;
324
335
  --charcoal-text-font-weight-70: 700;
325
336
  --charcoal-text-font-weight-40: 400;
326
- --charcoal-text-line-height-0: 16;
327
- --charcoal-text-font-size-120: 60;
328
- --charcoal-text-font-size-110: 50;
329
- --charcoal-text-font-size-100: 45;
330
- --charcoal-text-font-size-90: 40;
331
- --charcoal-text-font-size-80: 36;
332
- --charcoal-text-font-size-70: 32;
333
- --charcoal-text-font-size-60: 28;
334
- --charcoal-text-font-size-50: 25;
335
- --charcoal-text-font-size-40: 22;
336
- --charcoal-text-font-size-30: 20;
337
- --charcoal-text-font-size-20: 18;
338
- --charcoal-text-font-size-10: 16;
339
- --charcoal-text-font-size-5: 14;
340
- --charcoal-text-font-size-1: 12;
341
- --charcoal-text-font-size-0: 11;
337
+ --charcoal-text-line-height-0: 16px;
338
+ --charcoal-text-font-size-120: 60px;
339
+ --charcoal-text-font-size-110: 50px;
340
+ --charcoal-text-font-size-100: 45px;
341
+ --charcoal-text-font-size-90: 40px;
342
+ --charcoal-text-font-size-80: 36px;
343
+ --charcoal-text-font-size-70: 32px;
344
+ --charcoal-text-font-size-60: 28px;
345
+ --charcoal-text-font-size-50: 25px;
346
+ --charcoal-text-font-size-40: 22px;
347
+ --charcoal-text-font-size-30: 20px;
348
+ --charcoal-text-font-size-20: 18px;
349
+ --charcoal-text-font-size-10: 16px;
350
+ --charcoal-text-font-size-5: 14px;
351
+ --charcoal-text-font-size-1: 12px;
352
+ --charcoal-text-font-size-0: 11px;
342
353
  --charcoal-radius-xxl: var(--charcoal-space-40);
343
354
  --charcoal-radius-xl: var(--charcoal-space-30);
344
355
  --charcoal-radius-l: var(--charcoal-space-25);
@@ -348,30 +359,17 @@
348
359
  --charcoal-radius-0: var(--charcoal-space-0);
349
360
  --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
350
361
  --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);
363
362
  --charcoal-color-border-negative: var(--charcoal-color-dark-red-20);
364
363
  --charcoal-color-border-focus-2: var(--charcoal-color-dark-blue-20);
365
364
  --charcoal-color-border-disable: var(--charcoal-color-dark-neutral-a-5);
366
- --charcoal-color-border-focus-1: var(--charcoal-color-dark-blue-60);
367
365
  --charcoal-color-border-secondary: var(--charcoal-color-dark-neutral-a-10);
366
+ --charcoal-color-border-focus-1: var(--charcoal-color-dark-blue-60);
368
367
  --charcoal-color-border-press: var(--charcoal-color-dark-neutral-a-50);
369
368
  --charcoal-color-border-hover: var(--charcoal-color-dark-neutral-a-40);
370
369
  --charcoal-color-border-default: var(--charcoal-color-dark-neutral-a-30);
371
370
  --charcoal-color-icon-on-neutral-press: var(--charcoal-color-dark-neutral-90);
372
371
  --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-dark-neutral-90);
373
372
  --charcoal-color-icon-on-neutral-default: var(--charcoal-color-dark-neutral-90);
374
- --charcoal-color-text-brand-premium-default: var(--charcoal-brand-color-premium);
375
373
  --charcoal-color-text-on-hud-press: var(--charcoal-color-light-neutral-90);
376
374
  --charcoal-color-text-on-hud-hover: var(--charcoal-color-light-neutral-90);
377
375
  --charcoal-color-text-on-hud-default: var(--charcoal-color-light-neutral-90);
@@ -465,11 +463,29 @@
465
463
  --charcoal-color-container-press: var(--charcoal-color-dark-neutral-10);
466
464
  --charcoal-color-container-hover: var(--charcoal-color-dark-neutral-5);
467
465
  --charcoal-color-container-default: var(--charcoal-color-dark-neutral-0);
466
+ --charcoal-color-background-overlay: var(--charcoal-color-dark-neutral-a--5);
468
467
  --charcoal-color-background-tertiary: var(--charcoal-color-dark-neutral--10);
469
468
  --charcoal-color-background-secondary: var(--charcoal-color-dark-neutral--5);
470
469
  --charcoal-color-background-default: var(--charcoal-color-dark-neutral-0);
471
- --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
472
- --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
470
+ --charcoal-space-layout-100: var(--charcoal-space-100);
471
+ --charcoal-space-layout-90: var(--charcoal-space-90);
472
+ --charcoal-space-layout-80: var(--charcoal-space-80);
473
+ --charcoal-space-layout-70: var(--charcoal-space-70);
474
+ --charcoal-space-layout-60: var(--charcoal-space-60);
475
+ --charcoal-space-layout-50: var(--charcoal-space-50);
476
+ --charcoal-space-layout-40: var(--charcoal-space-40);
477
+ --charcoal-space-layout-30: var(--charcoal-space-30);
478
+ --charcoal-space-layout-25: var(--charcoal-space-25);
479
+ --charcoal-space-layout-20: var(--charcoal-space-20);
480
+ --charcoal-space-layout-10: var(--charcoal-space-10);
481
+ --charcoal-space-layout-0: var(--charcoal-space-0);
482
+ --charcoal-space-component-50: var(--charcoal-space-50);
483
+ --charcoal-space-component-40: var(--charcoal-space-40);
484
+ --charcoal-space-component-30: var(--charcoal-space-30);
485
+ --charcoal-space-component-25: var(--charcoal-space-25);
486
+ --charcoal-space-component-20: var(--charcoal-space-20);
487
+ --charcoal-space-component-10: var(--charcoal-space-10);
488
+ --charcoal-space-component-0: var(--charcoal-space-0);
473
489
  --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
474
490
  --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
475
491
  --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
@@ -498,8 +514,6 @@
498
514
  --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
499
515
  --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
500
516
  --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);
503
517
  --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);
504
518
  --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover);
505
519
  --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press);
@@ -536,4 +550,9 @@
536
550
  --charcoal-color-icon-negative-default: var(--charcoal-color-text-negative-default);
537
551
  --charcoal-color-icon-tertiary-default: var(--charcoal-color-text-tertiary-default);
538
552
  --charcoal-color-icon-secondary-default: var(--charcoal-color-text-secondary-default);
553
+ --charcoal-space-between-checkboxes-horizontal: var(--charcoal-space-layout-25);
554
+ --charcoal-space-between-checkboxes-vertical: var(--charcoal-space-layout-0);
555
+ --charcoal-space-gap-gap-form-items: var(--charcoal-space-layout-40);
556
+ --charcoal-space-padding-padding-card: var(--charcoal-space-layout-40);
557
+ --charcoal-space-gap-gap-buttons: var(--charcoal-space-layout-20);
539
558
  }
package/dist/{css → unstable-css}/_variables_light.css RENAMED
@@ -1,49 +1,22 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 09 Oct 2024 07:28:05 GMT
3
+ * Generated on Fri, 13 Dec 2024 12:47:30 GMT
4
4
  */
5
5
 
6
6
  :root[data-theme='light'], :root:not([data-theme]) {
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;
7
+ --charcoal-radius-oval: 999999px;
8
+ --charcoal-paragraph-width-l-cozy: 924px;
9
+ --charcoal-paragraph-width-m-cozy: 616px;
10
+ --charcoal-paragraph-width-s-cozy: 588px;
11
+ --charcoal-paragraph-width-l-compact: 588px;
12
+ --charcoal-paragraph-width-m-compact: 392px;
13
+ --charcoal-paragraph-width-s-compact: 280px;
14
+ --charcoal-paragraph-width-l: 672px;
15
+ --charcoal-paragraph-width-m: 448px;
16
+ --charcoal-paragraph-width-s: 320px;
17
+ --charcoal-border-width-l: 2px;
18
+ --charcoal-border-width-m: 1px;
44
19
  --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
45
- --charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
46
- --charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
47
20
  --charcoal-color-container-subtle: rgba(31, 31, 31, 0.02);
48
21
  --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1);
49
22
  --charcoal-color-dark-magenta-80: rgba(247, 184, 213, 1);
@@ -123,9 +96,9 @@
123
96
  --charcoal-color-dark-green-0: rgba(31, 31, 31, 1);
124
97
  --charcoal-color-dark-green--5: rgba(21, 21, 21, 1);
125
98
  --charcoal-color-dark-green--10: rgba(6, 6, 6, 1);
126
- --charcoal-color-dark-yellow-90: rgba(252, 227, 145, 1);
127
- --charcoal-color-dark-yellow-80: rgba(231, 199, 80, 1);
128
- --charcoal-color-dark-yellow-70: rgba(222, 185, 7, 1);
99
+ --charcoal-color-dark-yellow-90: rgba(252, 225, 167, 1);
100
+ --charcoal-color-dark-yellow-80: rgba(238, 195, 92, 1);
101
+ --charcoal-color-dark-yellow-70: rgba(235, 178, 19, 1);
129
102
  --charcoal-color-dark-yellow-60: rgba(222, 167, 29, 1);
130
103
  --charcoal-color-dark-yellow-50: rgba(199, 140, 10, 1);
131
104
  --charcoal-color-dark-yellow-40: rgba(174, 121, 14, 1);
@@ -174,18 +147,19 @@
174
147
  --charcoal-color-dark-neutral-5: rgba(41, 41, 41, 1);
175
148
  --charcoal-color-dark-neutral-0: rgba(31, 31, 31, 1);
176
149
  --charcoal-color-dark-neutral--5: rgba(21, 21, 21, 1);
177
- --charcoal-color-dark-neutral-a-80: rgba(228, 228, 228, 0.87);
178
- --charcoal-color-dark-neutral-a-70: rgba(228, 228, 228, 0.795);
179
- --charcoal-color-dark-neutral-a-60: rgba(228, 228, 228, 0.73);
180
- --charcoal-color-dark-neutral-a-50: rgba(228, 228, 228, 0.61);
181
- --charcoal-color-dark-neutral-a-40: rgba(228, 228, 228, 0.505);
182
- --charcoal-color-dark-neutral-a-30: rgba(228, 228, 228, 0.41);
183
- --charcoal-color-dark-neutral-a-20: rgba(228, 228, 228, 0.255);
184
- --charcoal-color-dark-neutral-a-10: rgba(228, 228, 228, 0.1);
185
- --charcoal-color-dark-neutral-a-5: rgba(228, 228, 228, 0.05);
186
- --charcoal-color-dark-neutral-a-0: rgba(228, 228, 228, 0);
187
- --charcoal-color-dark-neutral-a--5: rgba(6, 6, 6, 0.41);
188
- --charcoal-color-dark-neutral-a--10: rgba(6, 6, 6, 1);
150
+ --charcoal-color-dark-neutral-a-90: rgba(255, 255, 255, 0.88);
151
+ --charcoal-color-dark-neutral-a-80: rgba(255, 255, 255, 0.765);
152
+ --charcoal-color-dark-neutral-a-70: rgba(255, 255, 255, 0.7);
153
+ --charcoal-color-dark-neutral-a-60: rgba(255, 255, 255, 0.645);
154
+ --charcoal-color-dark-neutral-a-50: rgba(255, 255, 255, 0.535);
155
+ --charcoal-color-dark-neutral-a-40: rgba(255, 255, 255, 0.44);
156
+ --charcoal-color-dark-neutral-a-30: rgba(255, 255, 255, 0.36);
157
+ --charcoal-color-dark-neutral-a-20: rgba(255, 255, 255, 0.225);
158
+ --charcoal-color-dark-neutral-a-10: rgba(255, 255, 255, 0.09);
159
+ --charcoal-color-dark-neutral-a-5: rgba(255, 255, 255, 0.045);
160
+ --charcoal-color-dark-neutral-a-0: rgba(255, 255, 255, 0);
161
+ --charcoal-color-dark-neutral-a--5: rgba(0, 0, 0, 0.32);
162
+ --charcoal-color-dark-neutral-a--10: rgba(0, 0, 0, 0.8);
189
163
  --charcoal-color-dark-neutral--10: rgba(6, 6, 6, 1);
190
164
  --charcoal-color-light-magenta-90: rgba(59, 5, 37, 1);
191
165
  --charcoal-color-light-magenta-80: rgba(98, 27, 67, 1);
@@ -217,6 +191,17 @@
217
191
  --charcoal-color-light-indigo-20: rgba(210, 216, 252, 1);
218
192
  --charcoal-color-light-indigo-10: rgba(226, 231, 253, 1);
219
193
  --charcoal-color-light-indigo-5: rgba(241, 242, 253, 1);
194
+ --charcoal-color-light-cyan-50: rgba(1, 162, 187, 1);
195
+ --charcoal-color-light-emerald-90: rgba(1, 38, 29, 1);
196
+ --charcoal-color-light-emerald-80: rgba(5, 62, 49, 1);
197
+ --charcoal-color-light-emerald-70: rgba(13, 89, 72, 1);
198
+ --charcoal-color-light-emerald-60: rgba(20, 131, 107, 1);
199
+ --charcoal-color-light-emerald-50: rgba(22, 165, 135, 1);
200
+ --charcoal-color-light-emerald-40: rgba(61, 189, 157, 1);
201
+ --charcoal-color-light-emerald-30: rgba(88, 211, 179, 1);
202
+ --charcoal-color-light-emerald-20: rgba(138, 234, 206, 1);
203
+ --charcoal-color-light-emerald-10: rgba(193, 247, 230, 1);
204
+ --charcoal-color-light-emerald-5: rgba(229, 251, 244, 1);
220
205
  --charcoal-color-light-blue-90: rgba(3, 35, 63, 1);
221
206
  --charcoal-color-light-blue-80: rgba(19, 58, 93, 1);
222
207
  --charcoal-color-light-blue-70: rgba(24, 81, 130, 1);
@@ -292,53 +277,79 @@
292
277
  --charcoal-color-light-neutral-20: rgba(217, 217, 217, 1);
293
278
  --charcoal-color-light-neutral-10: rgba(232, 232, 232, 1);
294
279
  --charcoal-color-light-neutral-5: rgba(243, 243, 243, 1);
295
- --charcoal-color-light-neutral-a-80: rgba(31, 31, 31, 0.885);
296
- --charcoal-color-light-neutral-a-70: rgba(31, 31, 31, 0.775);
297
- --charcoal-color-light-neutral-a-60: rgba(31, 31, 31, 0.635);
298
- --charcoal-color-light-neutral-a-50: rgba(31, 31, 31, 0.475);
299
- --charcoal-color-light-neutral-a-40: rgba(31, 31, 31, 0.37);
300
- --charcoal-color-light-neutral-a-30: rgba(31, 31, 31, 0.27);
301
- --charcoal-color-light-neutral-a-20: rgba(31, 31, 31, 0.17);
302
- --charcoal-color-light-neutral-a-10: rgba(31, 31, 31, 0.102);
303
- --charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
304
- --charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 0);
280
+ --charcoal-color-light-neutral-a-90: rgba(0, 0, 0, 0.88);
281
+ --charcoal-color-light-neutral-a-80: rgba(0, 0, 0, 0.78);
282
+ --charcoal-color-light-neutral-a-70: rgba(0, 0, 0, 0.683);
283
+ --charcoal-color-light-neutral-a-60: rgba(0, 0, 0, 0.555);
284
+ --charcoal-color-light-neutral-a-50: rgba(0, 0, 0, 0.42);
285
+ --charcoal-color-light-neutral-a-40: rgba(0, 0, 0, 0.325);
286
+ --charcoal-color-light-neutral-a-30: rgba(0, 0, 0, 0.24);
287
+ --charcoal-color-light-neutral-a-20: rgba(0, 0, 0, 0.15);
288
+ --charcoal-color-light-neutral-a-10: rgba(0, 0, 0, 0.09);
289
+ --charcoal-color-light-neutral-a-5: rgba(0, 0, 0, 0.047);
290
+ --charcoal-color-light-neutral-a-0: rgba(0, 0, 0, 0);
305
291
  --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
292
+ --charcoal-space-target-l: 48px;
293
+ --charcoal-space-target-m: 40px;
294
+ --charcoal-space-target-s: 32px;
295
+ --charcoal-space-target-xs: 24px;
296
+ --charcoal-space-999: 999999px;
297
+ --charcoal-space-100: 440px;
298
+ --charcoal-space-90: 272px;
299
+ --charcoal-space-80: 168px;
300
+ --charcoal-space-70: 104px;
301
+ --charcoal-space-66: 96px;
302
+ --charcoal-space-63: 80px;
303
+ --charcoal-space-60: 64px;
304
+ --charcoal-space-55: 48px;
305
+ --charcoal-space-50: 40px;
306
+ --charcoal-space-46: 32px;
307
+ --charcoal-space-43: 28px;
308
+ --charcoal-space-40: 24px;
309
+ --charcoal-space-35: 20px;
310
+ --charcoal-space-30: 16px;
311
+ --charcoal-space-25: 12px;
312
+ --charcoal-space-20: 8px;
313
+ --charcoal-space-15: 6px;
314
+ --charcoal-space-10: 4px;
315
+ --charcoal-space-1: 2px;
316
+ --charcoal-space-0: 0px;
306
317
  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
307
318
  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
308
319
  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
309
320
  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
310
321
  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
311
322
  --charcoal-text-font-family-sans: Sarasa UI J;
312
- --charcoal-text-line-height-100: 72;
313
- --charcoal-text-line-height-90: 64;
314
- --charcoal-text-line-height-80: 56;
315
- --charcoal-text-line-height-70: 52;
316
- --charcoal-text-line-height-60: 44;
317
- --charcoal-text-line-height-50: 40;
318
- --charcoal-text-line-height-40: 36;
319
- --charcoal-text-line-height-30: 32;
320
- --charcoal-text-line-height-20: 28;
321
- --charcoal-text-line-height-10: 24;
322
- --charcoal-text-line-height-5: 20;
323
- --charcoal-text-line-height-1: 18;
323
+ --charcoal-text-line-height-100: 72px;
324
+ --charcoal-text-line-height-90: 64px;
325
+ --charcoal-text-line-height-80: 56px;
326
+ --charcoal-text-line-height-70: 52px;
327
+ --charcoal-text-line-height-60: 44px;
328
+ --charcoal-text-line-height-50: 40px;
329
+ --charcoal-text-line-height-40: 36px;
330
+ --charcoal-text-line-height-30: 32px;
331
+ --charcoal-text-line-height-20: 28px;
332
+ --charcoal-text-line-height-10: 24px;
333
+ --charcoal-text-line-height-5: 20px;
334
+ --charcoal-text-line-height-1: 18px;
324
335
  --charcoal-text-font-weight-70: 700;
325
336
  --charcoal-text-font-weight-40: 400;
326
- --charcoal-text-line-height-0: 16;
327
- --charcoal-text-font-size-120: 60;
328
- --charcoal-text-font-size-110: 50;
329
- --charcoal-text-font-size-100: 45;
330
- --charcoal-text-font-size-90: 40;
331
- --charcoal-text-font-size-80: 36;
332
- --charcoal-text-font-size-70: 32;
333
- --charcoal-text-font-size-60: 28;
334
- --charcoal-text-font-size-50: 25;
335
- --charcoal-text-font-size-40: 22;
336
- --charcoal-text-font-size-30: 20;
337
- --charcoal-text-font-size-20: 18;
338
- --charcoal-text-font-size-10: 16;
339
- --charcoal-text-font-size-5: 14;
340
- --charcoal-text-font-size-1: 12;
341
- --charcoal-text-font-size-0: 11;
337
+ --charcoal-text-line-height-0: 16px;
338
+ --charcoal-text-font-size-120: 60px;
339
+ --charcoal-text-font-size-110: 50px;
340
+ --charcoal-text-font-size-100: 45px;
341
+ --charcoal-text-font-size-90: 40px;
342
+ --charcoal-text-font-size-80: 36px;
343
+ --charcoal-text-font-size-70: 32px;
344
+ --charcoal-text-font-size-60: 28px;
345
+ --charcoal-text-font-size-50: 25px;
346
+ --charcoal-text-font-size-40: 22px;
347
+ --charcoal-text-font-size-30: 20px;
348
+ --charcoal-text-font-size-20: 18px;
349
+ --charcoal-text-font-size-10: 16px;
350
+ --charcoal-text-font-size-5: 14px;
351
+ --charcoal-text-font-size-1: 12px;
352
+ --charcoal-text-font-size-0: 11px;
342
353
  --charcoal-radius-xxl: var(--charcoal-space-40);
343
354
  --charcoal-radius-xl: var(--charcoal-space-30);
344
355
  --charcoal-radius-l: var(--charcoal-space-25);
@@ -348,30 +359,17 @@
348
359
  --charcoal-radius-0: var(--charcoal-space-0);
349
360
  --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
350
361
  --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);
363
362
  --charcoal-color-border-negative: var(--charcoal-color-light-red-20);
364
363
  --charcoal-color-border-focus-2: var(--charcoal-color-light-blue-20);
365
364
  --charcoal-color-border-disable: var(--charcoal-color-light-neutral-a-10);
366
- --charcoal-color-border-focus-1: var(--charcoal-color-light-blue-60);
367
365
  --charcoal-color-border-secondary: var(--charcoal-color-light-neutral-a-10);
366
+ --charcoal-color-border-focus-1: var(--charcoal-color-light-blue-60);
368
367
  --charcoal-color-border-press: var(--charcoal-color-light-neutral-a-70);
369
368
  --charcoal-color-border-hover: var(--charcoal-color-light-neutral-a-60);
370
369
  --charcoal-color-border-default: var(--charcoal-color-light-neutral-a-50);
371
370
  --charcoal-color-icon-on-neutral-press: var(--charcoal-color-light-neutral-10);
372
371
  --charcoal-color-icon-on-neutral-hover: var(--charcoal-color-light-neutral-5);
373
372
  --charcoal-color-icon-on-neutral-default: var(--charcoal-color-light-neutral-0);
374
- --charcoal-color-text-brand-premium-default: var(--charcoal-brand-color-premium);
375
373
  --charcoal-color-text-on-hud-press: var(--charcoal-color-dark-neutral-90);
376
374
  --charcoal-color-text-on-hud-hover: var(--charcoal-color-dark-neutral-90);
377
375
  --charcoal-color-text-on-hud-default: var(--charcoal-color-dark-neutral-90);
@@ -465,11 +463,29 @@
465
463
  --charcoal-color-container-press: var(--charcoal-color-light-neutral-10);
466
464
  --charcoal-color-container-hover: var(--charcoal-color-light-neutral-5);
467
465
  --charcoal-color-container-default: var(--charcoal-color-light-neutral-0);
466
+ --charcoal-color-background-overlay: var(--charcoal-color-light-neutral-a-40);
468
467
  --charcoal-color-background-tertiary: var(--charcoal-color-light-neutral-10);
469
468
  --charcoal-color-background-secondary: var(--charcoal-color-light-neutral-5);
470
469
  --charcoal-color-background-default: var(--charcoal-color-light-neutral-0);
471
- --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
472
- --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
470
+ --charcoal-space-layout-100: var(--charcoal-space-100);
471
+ --charcoal-space-layout-90: var(--charcoal-space-90);
472
+ --charcoal-space-layout-80: var(--charcoal-space-80);
473
+ --charcoal-space-layout-70: var(--charcoal-space-70);
474
+ --charcoal-space-layout-60: var(--charcoal-space-60);
475
+ --charcoal-space-layout-50: var(--charcoal-space-50);
476
+ --charcoal-space-layout-40: var(--charcoal-space-40);
477
+ --charcoal-space-layout-30: var(--charcoal-space-30);
478
+ --charcoal-space-layout-25: var(--charcoal-space-25);
479
+ --charcoal-space-layout-20: var(--charcoal-space-20);
480
+ --charcoal-space-layout-10: var(--charcoal-space-10);
481
+ --charcoal-space-layout-0: var(--charcoal-space-0);
482
+ --charcoal-space-component-50: var(--charcoal-space-50);
483
+ --charcoal-space-component-40: var(--charcoal-space-40);
484
+ --charcoal-space-component-30: var(--charcoal-space-30);
485
+ --charcoal-space-component-25: var(--charcoal-space-25);
486
+ --charcoal-space-component-20: var(--charcoal-space-20);
487
+ --charcoal-space-component-10: var(--charcoal-space-10);
488
+ --charcoal-space-component-0: var(--charcoal-space-0);
473
489
  --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
474
490
  --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
475
491
  --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
@@ -498,8 +514,6 @@
498
514
  --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
499
515
  --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
500
516
  --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);
503
517
  --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);
504
518
  --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover);
505
519
  --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press);
@@ -536,4 +550,9 @@
536
550
  --charcoal-color-icon-negative-default: var(--charcoal-color-text-negative-default);
537
551
  --charcoal-color-icon-tertiary-default: var(--charcoal-color-text-tertiary-default);
538
552
  --charcoal-color-icon-secondary-default: var(--charcoal-color-text-secondary-default);
553
+ --charcoal-space-between-checkboxes-horizontal: var(--charcoal-space-layout-25);
554
+ --charcoal-space-between-checkboxes-vertical: var(--charcoal-space-layout-0);
555
+ --charcoal-space-gap-gap-form-items: var(--charcoal-space-layout-40);
556
+ --charcoal-space-padding-padding-card: var(--charcoal-space-layout-40);
557
+ --charcoal-space-gap-gap-buttons: var(--charcoal-space-layout-20);
539
558
  }