@charcoal-ui/theme 4.15.0 → 4.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 (16) hide show
  1. package/dist/unstable-css/_variables_dark.css +446 -444
  2. package/dist/unstable-css/_variables_light.css +446 -444
  3. package/dist/unstable-tokens/camel/css-variables.json +227 -229
  4. package/dist/unstable-tokens/camel/pixiv-dark.json +207 -209
  5. package/dist/unstable-tokens/camel/pixiv-light.json +209 -211
  6. package/dist/unstable-tokens/css-variables.json +227 -229
  7. package/dist/unstable-tokens/pixiv-dark.json +207 -209
  8. package/dist/unstable-tokens/pixiv-light.json +209 -211
  9. package/package.json +3 -3
  10. package/src/json/base.json +987 -331
  11. package/src/json/pixiv-dark.json +680 -228
  12. package/src/json/pixiv-light.json +680 -228
  13. package/src/unstable-css/_variables_dark.css +446 -444
  14. package/src/unstable-css/_variables_light.css +446 -444
  15. package/src/unstable-token-object/__snapshots__/token-object.test.ts.snap +28 -36
  16. package/src/unstable-token-object/helpers/__snapshots__/changecase-keys.test.ts.snap +12 -16
package/src/unstable-token-object/__snapshots__/token-object.test.ts.snap CHANGED
@@ -19,6 +19,7 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
19
19
  },
20
20
  "border": {
21
21
  "default": "var(--charcoal-color-border-default)",
22
+ "default-text3": "var(--charcoal-color-border-default-text3)",
22
23
  "disable": "var(--charcoal-color-border-disable)",
23
24
  "focus": {
24
25
  "1": "var(--charcoal-color-border-focus-1)",
@@ -26,9 +27,11 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
26
27
  "legacy": "var(--charcoal-color-border-focus-legacy)",
27
28
  },
28
29
  "hover": "var(--charcoal-color-border-hover)",
30
+ "hover-text3": "var(--charcoal-color-border-hover-text3)",
29
31
  "hud": "var(--charcoal-color-border-hud)",
30
32
  "negative": "var(--charcoal-color-border-negative)",
31
33
  "press": "var(--charcoal-color-border-press)",
34
+ "press-text3": "var(--charcoal-color-border-press-text3)",
32
35
  "secondary": "var(--charcoal-color-border-secondary)",
33
36
  "selected": "var(--charcoal-color-border-selected)",
34
37
  },
@@ -96,7 +99,7 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
96
99
  "hover": "var(--charcoal-color-container-tertiary-hover)",
97
100
  "hover-a": "var(--charcoal-color-container-tertiary-hover-a)",
98
101
  "press": "var(--charcoal-color-container-tertiary-press)",
99
- "pressA": "var(--charcoal-color-container-tertiary-press-a)",
102
+ "press-a": "var(--charcoal-color-container-tertiary-press-a)",
100
103
  },
101
104
  },
102
105
  "icon": {
@@ -162,8 +165,10 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
162
165
  },
163
166
  "text": {
164
167
  "default": "var(--charcoal-color-text-default)",
168
+ "default-text1": "var(--charcoal-color-text-default-text1)",
165
169
  "disable": "var(--charcoal-color-text-disable)",
166
170
  "hover": "var(--charcoal-color-text-hover)",
171
+ "hover-text1": "var(--charcoal-color-text-hover-text1)",
167
172
  "info": {
168
173
  "default": "var(--charcoal-color-text-info-default)",
169
174
  "hover": "var(--charcoal-color-text-info-hover)",
@@ -225,6 +230,7 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
225
230
  "press": "var(--charcoal-color-text-positive-press)",
226
231
  },
227
232
  "press": "var(--charcoal-color-text-press)",
233
+ "press-text1": "var(--charcoal-color-text-press-text1)",
228
234
  "secondary": {
229
235
  "default": "var(--charcoal-color-text-secondary-default)",
230
236
  "hover": "var(--charcoal-color-text-secondary-hover)",
@@ -264,10 +270,6 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
264
270
  "xxl": "var(--charcoal-radius-xxl)",
265
271
  },
266
272
  "space": {
267
- "between-checkboxes": {
268
- "horizontal": "var(--charcoal-space-between-checkboxes-horizontal)",
269
- "vertical": "var(--charcoal-space-between-checkboxes-vertical)",
270
- },
271
273
  "component": {
272
274
  "0": "var(--charcoal-space-component-0)",
273
275
  "10": "var(--charcoal-space-component-10)",
@@ -277,10 +279,6 @@ exports[`createCSSTokenObject test: dark theme > should match snapshot 1`] = `
277
279
  "40": "var(--charcoal-space-component-40)",
278
280
  "50": "var(--charcoal-space-component-50)",
279
281
  },
280
- "gap": {
281
- "gap-buttons": "var(--charcoal-space-gap-gap-buttons)",
282
- "gap-form-items": "var(--charcoal-space-gap-gap-form-items)",
283
- },
284
282
  "layout": {
285
283
  "0": "var(--charcoal-space-layout-0)",
286
284
  "10": "var(--charcoal-space-layout-10)",
@@ -371,6 +369,7 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
371
369
  },
372
370
  "border": {
373
371
  "default": "var(--charcoal-color-border-default)",
372
+ "default-text3": "var(--charcoal-color-border-default-text3)",
374
373
  "disable": "var(--charcoal-color-border-disable)",
375
374
  "focus": {
376
375
  "1": "var(--charcoal-color-border-focus-1)",
@@ -378,9 +377,11 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
378
377
  "legacy": "var(--charcoal-color-border-focus-legacy)",
379
378
  },
380
379
  "hover": "var(--charcoal-color-border-hover)",
380
+ "hover-text3": "var(--charcoal-color-border-hover-text3)",
381
381
  "hud": "var(--charcoal-color-border-hud)",
382
382
  "negative": "var(--charcoal-color-border-negative)",
383
383
  "press": "var(--charcoal-color-border-press)",
384
+ "press-text3": "var(--charcoal-color-border-press-text3)",
384
385
  "secondary": "var(--charcoal-color-border-secondary)",
385
386
  "selected": "var(--charcoal-color-border-selected)",
386
387
  },
@@ -448,7 +449,7 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
448
449
  "hover": "var(--charcoal-color-container-tertiary-hover)",
449
450
  "hover-a": "var(--charcoal-color-container-tertiary-hover-a)",
450
451
  "press": "var(--charcoal-color-container-tertiary-press)",
451
- "pressA": "var(--charcoal-color-container-tertiary-press-a)",
452
+ "press-a": "var(--charcoal-color-container-tertiary-press-a)",
452
453
  },
453
454
  },
454
455
  "icon": {
@@ -514,8 +515,10 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
514
515
  },
515
516
  "text": {
516
517
  "default": "var(--charcoal-color-text-default)",
518
+ "default-text1": "var(--charcoal-color-text-default-text1)",
517
519
  "disable": "var(--charcoal-color-text-disable)",
518
520
  "hover": "var(--charcoal-color-text-hover)",
521
+ "hover-text1": "var(--charcoal-color-text-hover-text1)",
519
522
  "info": {
520
523
  "default": "var(--charcoal-color-text-info-default)",
521
524
  "hover": "var(--charcoal-color-text-info-hover)",
@@ -577,6 +580,7 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
577
580
  "press": "var(--charcoal-color-text-positive-press)",
578
581
  },
579
582
  "press": "var(--charcoal-color-text-press)",
583
+ "press-text1": "var(--charcoal-color-text-press-text1)",
580
584
  "secondary": {
581
585
  "default": "var(--charcoal-color-text-secondary-default)",
582
586
  "hover": "var(--charcoal-color-text-secondary-hover)",
@@ -616,10 +620,6 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
616
620
  "xxl": "var(--charcoal-radius-xxl)",
617
621
  },
618
622
  "space": {
619
- "between-checkboxes": {
620
- "horizontal": "var(--charcoal-space-between-checkboxes-horizontal)",
621
- "vertical": "var(--charcoal-space-between-checkboxes-vertical)",
622
- },
623
623
  "component": {
624
624
  "0": "var(--charcoal-space-component-0)",
625
625
  "10": "var(--charcoal-space-component-10)",
@@ -629,10 +629,6 @@ exports[`createCSSTokenObject test: light theme > should match snapshot 1`] = `
629
629
  "40": "var(--charcoal-space-component-40)",
630
630
  "50": "var(--charcoal-space-component-50)",
631
631
  },
632
- "gap": {
633
- "gap-buttons": "var(--charcoal-space-gap-gap-buttons)",
634
- "gap-form-items": "var(--charcoal-space-gap-gap-form-items)",
635
- },
636
632
  "layout": {
637
633
  "0": "var(--charcoal-space-layout-0)",
638
634
  "10": "var(--charcoal-space-layout-10)",
@@ -723,6 +719,7 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
723
719
  },
724
720
  "border": {
725
721
  "default": "rgba(255, 255, 255, 0.36)",
722
+ "default-text3": "rgba(255, 255, 255, 0.36)",
726
723
  "disable": "rgba(255, 255, 255, 0.045)",
727
724
  "focus": {
728
725
  "1": "rgba(114, 181, 245, 1)",
@@ -730,9 +727,11 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
730
727
  "legacy": "rgba(0, 150, 250, 0.32)",
731
728
  },
732
729
  "hover": "rgba(255, 255, 255, 0.44)",
730
+ "hover-text3": "rgba(255, 255, 255, 0.44)",
733
731
  "hud": "rgba(31, 31, 31, 1)",
734
732
  "negative": "rgba(136, 54, 46, 1)",
735
733
  "press": "rgba(255, 255, 255, 0.535)",
734
+ "press-text3": "rgba(255, 255, 255, 0.535)",
736
735
  "secondary": "rgba(255, 255, 255, 0.09)",
737
736
  "selected": "rgba(8, 114, 190, 1)",
738
737
  },
@@ -800,7 +799,7 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
800
799
  "hover": "rgba(81, 81, 81, 1)",
801
800
  "hover-a": "rgba(255, 255, 255, 0.225)",
802
801
  "press": "rgba(112, 112, 112, 1)",
803
- "pressA": "rgba(255, 255, 255, 0.36)",
802
+ "press-a": "rgba(255, 255, 255, 0.36)",
804
803
  },
805
804
  },
806
805
  "icon": {
@@ -866,8 +865,10 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
866
865
  },
867
866
  "text": {
868
867
  "default": "rgba(228, 228, 228, 1)",
868
+ "default-text1": "rgba(228, 228, 228, 1)",
869
869
  "disable": "rgba(130, 130, 130, 1)",
870
870
  "hover": "rgba(202, 202, 202, 1)",
871
+ "hover-text1": "rgba(228, 228, 228, 1)",
871
872
  "info": {
872
873
  "default": "rgba(114, 181, 245, 1)",
873
874
  "hover": "rgba(166, 205, 245, 1)",
@@ -929,6 +930,7 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
929
930
  "press": "rgba(191, 241, 186, 1)",
930
931
  },
931
932
  "press": "rgba(188, 188, 188, 1)",
933
+ "press-text1": "rgba(228, 228, 228, 1)",
932
934
  "secondary": {
933
935
  "default": "rgba(175, 175, 175, 1)",
934
936
  "hover": "rgba(188, 188, 188, 1)",
@@ -968,10 +970,6 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
968
970
  "xxl": "24px",
969
971
  },
970
972
  "space": {
971
- "between-checkboxes": {
972
- "horizontal": "12px",
973
- "vertical": "0px",
974
- },
975
973
  "component": {
976
974
  "0": "0px",
977
975
  "10": "4px",
@@ -981,10 +979,6 @@ exports[`createTokenObject test: dark theme > should match snapshot 1`] = `
981
979
  "40": "24px",
982
980
  "50": "40px",
983
981
  },
984
- "gap": {
985
- "gap-buttons": "8px",
986
- "gap-form-items": "24px",
987
- },
988
982
  "layout": {
989
983
  "0": "0px",
990
984
  "10": "4px",
@@ -1075,6 +1069,7 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
1075
1069
  },
1076
1070
  "border": {
1077
1071
  "default": "rgba(0, 0, 0, 0.42)",
1072
+ "default-text3": "rgba(0, 0, 0, 0.42)",
1078
1073
  "disable": "rgba(0, 0, 0, 0.09)",
1079
1074
  "focus": {
1080
1075
  "1": "rgba(31, 117, 188, 1)",
@@ -1082,9 +1077,11 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
1082
1077
  "legacy": "rgba(0, 150, 250, 0.32)",
1083
1078
  },
1084
1079
  "hover": "rgba(0, 0, 0, 0.555)",
1080
+ "hover-text3": "rgba(0, 0, 0, 0.555)",
1085
1081
  "hud": "rgba(255, 255, 255, 1)",
1086
1082
  "negative": "rgba(253, 206, 199, 1)",
1087
1083
  "press": "rgba(0, 0, 0, 0.683)",
1084
+ "press-text3": "rgba(0, 0, 0, 0.683)",
1088
1085
  "secondary": "rgba(0, 0, 0, 0.09)",
1089
1086
  "selected": "rgba(0, 150, 250, 1)",
1090
1087
  },
@@ -1152,7 +1149,7 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
1152
1149
  "hover": "rgba(217, 217, 217, 1)",
1153
1150
  "hover-a": "rgba(0, 0, 0, 0.15)",
1154
1151
  "press": "rgba(194, 194, 194, 1)",
1155
- "pressA": "rgba(0, 0, 0, 0.24)",
1152
+ "press-a": "rgba(0, 0, 0, 0.24)",
1156
1153
  },
1157
1154
  },
1158
1155
  "icon": {
@@ -1218,8 +1215,10 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
1218
1215
  },
1219
1216
  "text": {
1220
1217
  "default": "rgba(31, 31, 31, 1)",
1218
+ "default-text1": "rgba(31, 31, 31, 1)",
1221
1219
  "disable": "rgba(194, 194, 194, 1)",
1222
1220
  "hover": "rgba(56, 56, 56, 1)",
1221
+ "hover-text1": "rgba(31, 31, 31, 1)",
1223
1222
  "info": {
1224
1223
  "default": "rgba(31, 117, 188, 1)",
1225
1224
  "hover": "rgba(24, 81, 130, 1)",
@@ -1281,6 +1280,7 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
1281
1280
  "press": "rgba(7, 64, 4, 1)",
1282
1281
  },
1283
1282
  "press": "rgba(81, 81, 81, 1)",
1283
+ "press-text1": "rgba(31, 31, 31, 1)",
1284
1284
  "secondary": {
1285
1285
  "default": "rgba(81, 81, 81, 1)",
1286
1286
  "hover": "rgba(56, 56, 56, 1)",
@@ -1320,10 +1320,6 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
1320
1320
  "xxl": "24px",
1321
1321
  },
1322
1322
  "space": {
1323
- "between-checkboxes": {
1324
- "horizontal": "12px",
1325
- "vertical": "0px",
1326
- },
1327
1323
  "component": {
1328
1324
  "0": "0px",
1329
1325
  "10": "4px",
@@ -1333,10 +1329,6 @@ exports[`createTokenObject test: light theme > should match snapshot 1`] = `
1333
1329
  "40": "24px",
1334
1330
  "50": "40px",
1335
1331
  },
1336
- "gap": {
1337
- "gap-buttons": "8px",
1338
- "gap-form-items": "24px",
1339
- },
1340
1332
  "layout": {
1341
1333
  "0": "0px",
1342
1334
  "10": "4px",
package/src/unstable-token-object/helpers/__snapshots__/changecase-keys.test.ts.snap CHANGED
@@ -19,6 +19,7 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
19
19
  },
20
20
  "border": {
21
21
  "default": "rgba(255, 255, 255, 0.36)",
22
+ "defaultText3": "rgba(255, 255, 255, 0.36)",
22
23
  "disable": "rgba(255, 255, 255, 0.045)",
23
24
  "focus": {
24
25
  "1": "rgba(114, 181, 245, 1)",
@@ -26,9 +27,11 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
26
27
  "legacy": "rgba(0, 150, 250, 0.32)",
27
28
  },
28
29
  "hover": "rgba(255, 255, 255, 0.44)",
30
+ "hoverText3": "rgba(255, 255, 255, 0.44)",
29
31
  "hud": "rgba(31, 31, 31, 1)",
30
32
  "negative": "rgba(136, 54, 46, 1)",
31
33
  "press": "rgba(255, 255, 255, 0.535)",
34
+ "pressText3": "rgba(255, 255, 255, 0.535)",
32
35
  "secondary": "rgba(255, 255, 255, 0.09)",
33
36
  "selected": "rgba(8, 114, 190, 1)",
34
37
  },
@@ -162,8 +165,10 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
162
165
  },
163
166
  "text": {
164
167
  "default": "rgba(228, 228, 228, 1)",
168
+ "defaultText1": "rgba(228, 228, 228, 1)",
165
169
  "disable": "rgba(130, 130, 130, 1)",
166
170
  "hover": "rgba(202, 202, 202, 1)",
171
+ "hoverText1": "rgba(228, 228, 228, 1)",
167
172
  "info": {
168
173
  "default": "rgba(114, 181, 245, 1)",
169
174
  "hover": "rgba(166, 205, 245, 1)",
@@ -225,6 +230,7 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
225
230
  "press": "rgba(191, 241, 186, 1)",
226
231
  },
227
232
  "press": "rgba(188, 188, 188, 1)",
233
+ "pressText1": "rgba(228, 228, 228, 1)",
228
234
  "secondary": {
229
235
  "default": "rgba(175, 175, 175, 1)",
230
236
  "hover": "rgba(188, 188, 188, 1)",
@@ -264,10 +270,6 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
264
270
  "xxl": "24px",
265
271
  },
266
272
  "space": {
267
- "betweenCheckboxes": {
268
- "horizontal": "12px",
269
- "vertical": "0px",
270
- },
271
273
  "component": {
272
274
  "0": "0px",
273
275
  "10": "4px",
@@ -277,10 +279,6 @@ exports[`changeCaseKeys snapshot test: dark theme > camelcaseKeys snapshot test
277
279
  "40": "24px",
278
280
  "50": "40px",
279
281
  },
280
- "gap": {
281
- "gapButtons": "8px",
282
- "gapFormItems": "24px",
283
- },
284
282
  "layout": {
285
283
  "0": "0px",
286
284
  "10": "4px",
@@ -371,6 +369,7 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
371
369
  },
372
370
  "border": {
373
371
  "default": "rgba(0, 0, 0, 0.42)",
372
+ "defaultText3": "rgba(0, 0, 0, 0.42)",
374
373
  "disable": "rgba(0, 0, 0, 0.09)",
375
374
  "focus": {
376
375
  "1": "rgba(31, 117, 188, 1)",
@@ -378,9 +377,11 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
378
377
  "legacy": "rgba(0, 150, 250, 0.32)",
379
378
  },
380
379
  "hover": "rgba(0, 0, 0, 0.555)",
380
+ "hoverText3": "rgba(0, 0, 0, 0.555)",
381
381
  "hud": "rgba(255, 255, 255, 1)",
382
382
  "negative": "rgba(253, 206, 199, 1)",
383
383
  "press": "rgba(0, 0, 0, 0.683)",
384
+ "pressText3": "rgba(0, 0, 0, 0.683)",
384
385
  "secondary": "rgba(0, 0, 0, 0.09)",
385
386
  "selected": "rgba(0, 150, 250, 1)",
386
387
  },
@@ -514,8 +515,10 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
514
515
  },
515
516
  "text": {
516
517
  "default": "rgba(31, 31, 31, 1)",
518
+ "defaultText1": "rgba(31, 31, 31, 1)",
517
519
  "disable": "rgba(194, 194, 194, 1)",
518
520
  "hover": "rgba(56, 56, 56, 1)",
521
+ "hoverText1": "rgba(31, 31, 31, 1)",
519
522
  "info": {
520
523
  "default": "rgba(31, 117, 188, 1)",
521
524
  "hover": "rgba(24, 81, 130, 1)",
@@ -577,6 +580,7 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
577
580
  "press": "rgba(7, 64, 4, 1)",
578
581
  },
579
582
  "press": "rgba(81, 81, 81, 1)",
583
+ "pressText1": "rgba(31, 31, 31, 1)",
580
584
  "secondary": {
581
585
  "default": "rgba(81, 81, 81, 1)",
582
586
  "hover": "rgba(56, 56, 56, 1)",
@@ -616,10 +620,6 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
616
620
  "xxl": "24px",
617
621
  },
618
622
  "space": {
619
- "betweenCheckboxes": {
620
- "horizontal": "12px",
621
- "vertical": "0px",
622
- },
623
623
  "component": {
624
624
  "0": "0px",
625
625
  "10": "4px",
@@ -629,10 +629,6 @@ exports[`changeCaseKeys snapshot test: light theme > camelcaseKeys snapshot test
629
629
  "40": "24px",
630
630
  "50": "40px",
631
631
  },
632
- "gap": {
633
- "gapButtons": "8px",
634
- "gapFormItems": "24px",
635
- },
636
632
  "layout": {
637
633
  "0": "0px",
638
634
  "10": "4px",