@charcoal-ui/theme 4.14.1 → 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/dist/unstable-tokens/camel/pixiv-dark.json CHANGED
@@ -1,186 +1,154 @@
1
1
  {
2
- "space": {
3
- "gap": {
4
- "gapButtons": "8px",
5
- "gapFormItems": "24px"
6
- },
7
- "padding": {
8
- "paddingCard": "24px"
9
- },
10
- "target": {
11
- "xs": "24px",
12
- "s": "32px",
13
- "m": "40px",
14
- "l": "48px"
15
- },
16
- "component": {
17
- "0": "0px",
18
- "10": "4px",
19
- "20": "8px",
20
- "25": "12px",
21
- "30": "16px",
22
- "40": "24px",
23
- "50": "40px"
24
- },
25
- "layout": {
26
- "0": "0px",
27
- "10": "4px",
28
- "20": "8px",
29
- "25": "12px",
30
- "30": "16px",
31
- "40": "24px",
32
- "50": "40px",
33
- "60": "64px",
34
- "70": "104px",
35
- "80": "168px",
36
- "90": "272px",
37
- "100": "440px"
2
+ "borderWidth": {
3
+ "focus": {
4
+ "1": "1px",
5
+ "2": "2px"
38
6
  },
39
- "betweenCheckboxes": {
40
- "vertical": "0px",
41
- "horizontal": "12px"
42
- }
7
+ "l": "2px",
8
+ "m": "1px"
43
9
  },
44
10
  "color": {
45
11
  "background": {
46
12
  "default": "rgba(31, 31, 31, 1)",
13
+ "overlay": "rgba(0, 0, 0, 0.32)",
47
14
  "secondary": "rgba(21, 21, 21, 1)",
48
- "tertiary": "rgba(6, 6, 6, 1)",
49
- "overlay": "rgba(0, 0, 0, 0.32)"
15
+ "tertiary": "rgba(6, 6, 6, 1)"
16
+ },
17
+ "border": {
18
+ "default": "rgba(255, 255, 255, 0.36)",
19
+ "defaultText3": "rgba(255, 255, 255, 0.36)",
20
+ "disable": "rgba(255, 255, 255, 0.045)",
21
+ "focus": {
22
+ "1": "rgba(114, 181, 245, 1)",
23
+ "2": "rgba(39, 84, 126, 1)",
24
+ "legacy": "rgba(0, 150, 250, 0.32)"
25
+ },
26
+ "hover": "rgba(255, 255, 255, 0.44)",
27
+ "hoverText3": "rgba(255, 255, 255, 0.44)",
28
+ "hud": "rgba(31, 31, 31, 1)",
29
+ "negative": "rgba(136, 54, 46, 1)",
30
+ "press": "rgba(255, 255, 255, 0.535)",
31
+ "pressText3": "rgba(255, 255, 255, 0.535)",
32
+ "secondary": "rgba(255, 255, 255, 0.09)",
33
+ "selected": "rgba(8, 114, 190, 1)"
50
34
  },
51
35
  "container": {
52
36
  "default": "rgba(31, 31, 31, 1)",
53
- "hover": "rgba(41, 41, 41, 1)",
54
- "press": "rgba(51, 51, 51, 1)",
55
37
  "defaultA": "rgba(255, 255, 255, 0)",
56
- "hoverA": "rgba(255, 255, 255, 0.045)",
57
- "pressA": "rgba(255, 255, 255, 0.09)",
58
38
  "disable": "rgba(51, 51, 51, 1)",
59
- "secondary": {
60
- "default": "rgba(41, 41, 41, 1)",
61
- "hover": "rgba(51, 51, 51, 1)",
62
- "press": "rgba(81, 81, 81, 1)",
63
- "defaultA": "rgba(255, 255, 255, 0.045)",
64
- "hoverA": "rgba(255, 255, 255, 0.09)",
65
- "pressA": "rgba(255, 255, 255, 0.225)"
66
- },
67
- "tertiary": {
68
- "default": "rgba(51, 51, 51, 1)",
69
- "hover": "rgba(81, 81, 81, 1)",
70
- "press": "rgba(112, 112, 112, 1)",
71
- "defaultA": "rgba(255, 255, 255, 0.09)",
72
- "hoverA": "rgba(255, 255, 255, 0.225)",
73
- "pressA": "rgba(255, 255, 255, 0.36)"
74
- },
75
- "primary": {
76
- "default": "rgba(8, 114, 190, 1)",
77
- "hover": "rgba(55, 136, 208, 1)",
78
- "press": "rgba(83, 156, 224, 1)"
39
+ "discovery": {
40
+ "default": "rgba(197, 60, 51, 1)",
41
+ "hover": "rgba(217, 88, 76, 1)",
42
+ "press": "rgba(233, 114, 102, 1)"
79
43
  },
80
- "onImg": {
81
- "default": "rgba(0, 0, 0, 0.325)",
82
- "hover": "rgba(0, 0, 0, 0.42)",
83
- "press": "rgba(0, 0, 0, 0.555)"
44
+ "hover": "rgba(41, 41, 41, 1)",
45
+ "hoverA": "rgba(255, 255, 255, 0.045)",
46
+ "hud": {
47
+ "default": "rgba(228, 228, 228, 1)",
48
+ "hover": "rgba(202, 202, 202, 1)",
49
+ "press": "rgba(188, 188, 188, 1)"
84
50
  },
85
51
  "negative": {
86
52
  "default": "rgba(197, 60, 51, 1)",
87
53
  "hover": "rgba(217, 88, 76, 1)",
88
54
  "press": "rgba(233, 114, 102, 1)"
89
55
  },
90
- "positive": {
91
- "default": "rgba(13, 129, 5, 1)",
92
- "hover": "rgba(58, 150, 52, 1)",
93
- "press": "rgba(86, 169, 79, 1)"
56
+ "neutral": {
57
+ "default": "rgba(112, 112, 112, 1)",
58
+ "hover": "rgba(130, 130, 130, 1)",
59
+ "press": "rgba(151, 151, 151, 1)"
94
60
  },
95
61
  "notice": {
96
62
  "default": "rgba(235, 178, 19, 1)",
97
63
  "hover": "rgba(238, 195, 92, 1)",
98
64
  "press": "rgba(252, 225, 167, 1)"
99
65
  },
100
- "neutral": {
101
- "default": "rgba(112, 112, 112, 1)",
102
- "hover": "rgba(130, 130, 130, 1)",
103
- "press": "rgba(151, 151, 151, 1)"
66
+ "onImg": {
67
+ "default": "rgba(0, 0, 0, 0.325)",
68
+ "hover": "rgba(0, 0, 0, 0.42)",
69
+ "press": "rgba(0, 0, 0, 0.555)"
104
70
  },
105
- "discovery": {
106
- "default": "rgba(197, 60, 51, 1)",
107
- "hover": "rgba(217, 88, 76, 1)",
108
- "press": "rgba(233, 114, 102, 1)"
71
+ "positive": {
72
+ "default": "rgba(13, 129, 5, 1)",
73
+ "hover": "rgba(58, 150, 52, 1)",
74
+ "press": "rgba(86, 169, 79, 1)"
109
75
  },
110
- "hud": {
111
- "default": "rgba(228, 228, 228, 1)",
112
- "hover": "rgba(202, 202, 202, 1)",
113
- "press": "rgba(188, 188, 188, 1)"
76
+ "press": "rgba(51, 51, 51, 1)",
77
+ "pressA": "rgba(255, 255, 255, 0.09)",
78
+ "primary": {
79
+ "default": "rgba(8, 114, 190, 1)",
80
+ "hover": "rgba(55, 136, 208, 1)",
81
+ "press": "rgba(83, 156, 224, 1)"
114
82
  },
115
- "skeleton": "rgba(255, 255, 255, 0.045)",
116
- "subtle": "rgba(228, 228, 228, 0.02)"
117
- },
118
- "icon": {
119
83
  "secondary": {
120
- "default": "rgba(175, 175, 175, 1)",
121
- "hover": "rgba(188, 188, 188, 1)",
122
- "press": "rgba(202, 202, 202, 1)"
84
+ "default": "rgba(41, 41, 41, 1)",
85
+ "defaultA": "rgba(255, 255, 255, 0.045)",
86
+ "hover": "rgba(51, 51, 51, 1)",
87
+ "hoverA": "rgba(255, 255, 255, 0.09)",
88
+ "press": "rgba(81, 81, 81, 1)",
89
+ "pressA": "rgba(255, 255, 255, 0.225)"
123
90
  },
91
+ "skeleton": "rgba(255, 255, 255, 0.045)",
92
+ "subtle": "rgba(228, 228, 228, 0.02)",
124
93
  "tertiary": {
125
- "default": "rgba(130, 130, 130, 1)",
126
- "hover": "rgba(175, 175, 175, 1)",
127
- "press": "rgba(188, 188, 188, 1)"
128
- },
94
+ "default": "rgba(51, 51, 51, 1)",
95
+ "defaultA": "rgba(255, 255, 255, 0.09)",
96
+ "hover": "rgba(81, 81, 81, 1)",
97
+ "hoverA": "rgba(255, 255, 255, 0.225)",
98
+ "press": "rgba(112, 112, 112, 1)",
99
+ "pressA": "rgba(255, 255, 255, 0.36)"
100
+ }
101
+ },
102
+ "icon": {
103
+ "default": "rgba(228, 228, 228, 1)",
104
+ "disable": "rgba(130, 130, 130, 1)",
105
+ "hover": "rgba(202, 202, 202, 1)",
129
106
  "negative": {
130
107
  "default": "rgba(252, 147, 134, 1)",
131
108
  "hover": "rgba(249, 186, 177, 1)",
132
109
  "press": "rgba(254, 219, 214, 1)"
133
110
  },
134
- "positive": {
135
- "default": "rgba(120, 194, 113, 1)",
136
- "hover": "rgba(161, 215, 155, 1)",
137
- "press": "rgba(191, 241, 186, 1)"
138
- },
139
111
  "notice": {
140
112
  "default": "rgba(222, 167, 29, 1)",
141
113
  "hover": "rgba(238, 195, 92, 1)",
142
114
  "press": "rgba(252, 225, 167, 1)"
143
115
  },
144
- "default": "rgba(228, 228, 228, 1)",
145
- "hover": "rgba(202, 202, 202, 1)",
146
- "press": "rgba(188, 188, 188, 1)",
147
- "disable": "rgba(130, 130, 130, 1)",
148
- "onPrimary": {
116
+ "onNegative": {
149
117
  "default": "rgba(228, 228, 228, 1)",
150
118
  "hover": "rgba(228, 228, 228, 1)",
151
119
  "press": "rgba(228, 228, 228, 1)"
152
120
  },
153
- "onOnImg": {
121
+ "onNeutral": {
154
122
  "default": "rgba(228, 228, 228, 1)",
155
123
  "hover": "rgba(228, 228, 228, 1)",
156
124
  "press": "rgba(228, 228, 228, 1)"
157
125
  },
158
- "onNeutral": {
126
+ "onNotice": {
127
+ "default": "rgba(41, 41, 41, 1)",
128
+ "hover": "rgba(41, 41, 41, 1)",
129
+ "press": "rgba(41, 41, 41, 1)"
130
+ },
131
+ "onOnImg": {
159
132
  "default": "rgba(228, 228, 228, 1)",
160
133
  "hover": "rgba(228, 228, 228, 1)",
161
134
  "press": "rgba(228, 228, 228, 1)"
162
135
  },
163
- "onNegative": {
136
+ "onPositive": {
164
137
  "default": "rgba(228, 228, 228, 1)",
165
138
  "hover": "rgba(228, 228, 228, 1)",
166
139
  "press": "rgba(228, 228, 228, 1)"
167
140
  },
168
- "onPositive": {
141
+ "onPrimary": {
169
142
  "default": "rgba(228, 228, 228, 1)",
170
143
  "hover": "rgba(228, 228, 228, 1)",
171
144
  "press": "rgba(228, 228, 228, 1)"
172
145
  },
173
- "onNotice": {
174
- "default": "rgba(41, 41, 41, 1)",
175
- "hover": "rgba(41, 41, 41, 1)",
176
- "press": "rgba(41, 41, 41, 1)"
177
- }
178
- },
179
- "text": {
180
- "default": "rgba(228, 228, 228, 1)",
181
- "hover": "rgba(202, 202, 202, 1)",
146
+ "positive": {
147
+ "default": "rgba(120, 194, 113, 1)",
148
+ "hover": "rgba(161, 215, 155, 1)",
149
+ "press": "rgba(191, 241, 186, 1)"
150
+ },
182
151
  "press": "rgba(188, 188, 188, 1)",
183
- "disable": "rgba(130, 130, 130, 1)",
184
152
  "secondary": {
185
153
  "default": "rgba(175, 175, 175, 1)",
186
154
  "hover": "rgba(188, 188, 188, 1)",
@@ -190,22 +158,19 @@
190
158
  "default": "rgba(130, 130, 130, 1)",
191
159
  "hover": "rgba(175, 175, 175, 1)",
192
160
  "press": "rgba(188, 188, 188, 1)"
193
- },
194
- "placeholder": {
195
- "default": "rgba(112, 112, 112, 1)",
196
- "hover": "rgba(112, 112, 112, 1)",
197
- "press": "rgba(112, 112, 112, 1)"
198
- },
161
+ }
162
+ },
163
+ "text": {
164
+ "default": "rgba(228, 228, 228, 1)",
165
+ "defaultText1": "rgba(228, 228, 228, 1)",
166
+ "disable": "rgba(130, 130, 130, 1)",
167
+ "hover": "rgba(202, 202, 202, 1)",
168
+ "hoverText1": "rgba(228, 228, 228, 1)",
199
169
  "info": {
200
170
  "default": "rgba(114, 181, 245, 1)",
201
171
  "hover": "rgba(166, 205, 245, 1)",
202
172
  "press": "rgba(207, 230, 253, 1)"
203
173
  },
204
- "visited": {
205
- "default": "rgba(191, 160, 246, 1)",
206
- "hover": "rgba(210, 192, 245, 1)",
207
- "press": "rgba(233, 223, 255, 1)"
208
- },
209
174
  "negative": {
210
175
  "default": "rgba(252, 147, 134, 1)",
211
176
  "hover": "rgba(249, 186, 177, 1)",
@@ -216,22 +181,27 @@
216
181
  "hover": "rgba(238, 195, 92, 1)",
217
182
  "press": "rgba(252, 225, 167, 1)"
218
183
  },
219
- "positive": {
220
- "default": "rgba(120, 194, 113, 1)",
221
- "hover": "rgba(161, 215, 155, 1)",
222
- "press": "rgba(191, 241, 186, 1)"
223
- },
224
- "onPrimary": {
184
+ "onDiscovery": {
225
185
  "default": "rgba(228, 228, 228, 1)",
226
186
  "hover": "rgba(228, 228, 228, 1)",
227
187
  "press": "rgba(228, 228, 228, 1)"
228
188
  },
229
- "onOnImg": {
189
+ "onHud": {
190
+ "default": "rgba(31, 31, 31, 1)",
191
+ "hover": "rgba(31, 31, 31, 1)",
192
+ "press": "rgba(31, 31, 31, 1)"
193
+ },
194
+ "onNegative": {
230
195
  "default": "rgba(228, 228, 228, 1)",
231
196
  "hover": "rgba(228, 228, 228, 1)",
232
197
  "press": "rgba(228, 228, 228, 1)"
233
198
  },
234
- "onNegative": {
199
+ "onNotice": {
200
+ "default": "rgba(41, 41, 41, 1)",
201
+ "hover": "rgba(41, 41, 41, 1)",
202
+ "press": "rgba(41, 41, 41, 1)"
203
+ },
204
+ "onOnImg": {
235
205
  "default": "rgba(228, 228, 228, 1)",
236
206
  "hover": "rgba(228, 228, 228, 1)",
237
207
  "press": "rgba(228, 228, 228, 1)"
@@ -241,109 +211,137 @@
241
211
  "hover": "rgba(228, 228, 228, 1)",
242
212
  "press": "rgba(228, 228, 228, 1)"
243
213
  },
244
- "onNotice": {
245
- "default": "rgba(41, 41, 41, 1)",
246
- "hover": "rgba(41, 41, 41, 1)",
247
- "press": "rgba(41, 41, 41, 1)"
248
- },
249
- "onDiscovery": {
214
+ "onPrimary": {
250
215
  "default": "rgba(228, 228, 228, 1)",
251
216
  "hover": "rgba(228, 228, 228, 1)",
252
217
  "press": "rgba(228, 228, 228, 1)"
253
218
  },
254
- "onHud": {
255
- "default": "rgba(31, 31, 31, 1)",
256
- "hover": "rgba(31, 31, 31, 1)",
257
- "press": "rgba(31, 31, 31, 1)"
258
- }
259
- },
260
- "border": {
261
- "default": "rgba(255, 255, 255, 0.36)",
262
- "hover": "rgba(255, 255, 255, 0.44)",
263
- "press": "rgba(255, 255, 255, 0.535)",
264
- "focus": {
265
- "1": "rgba(114, 181, 245, 1)",
266
- "2": "rgba(39, 84, 126, 1)",
267
- "legacy": "rgba(0, 150, 250, 0.32)"
219
+ "placeholder": {
220
+ "default": "rgba(112, 112, 112, 1)",
221
+ "hover": "rgba(112, 112, 112, 1)",
222
+ "press": "rgba(112, 112, 112, 1)"
268
223
  },
269
- "secondary": "rgba(255, 255, 255, 0.09)",
270
- "disable": "rgba(255, 255, 255, 0.045)",
271
- "selected": "rgba(8, 114, 190, 1)",
272
- "negative": "rgba(136, 54, 46, 1)",
273
- "hud": "rgba(31, 31, 31, 1)"
274
- }
275
- },
276
- "borderWidth": {
277
- "m": "1px",
278
- "l": "2px",
279
- "focus": {
280
- "1": "1px",
281
- "2": "2px"
224
+ "positive": {
225
+ "default": "rgba(120, 194, 113, 1)",
226
+ "hover": "rgba(161, 215, 155, 1)",
227
+ "press": "rgba(191, 241, 186, 1)"
228
+ },
229
+ "press": "rgba(188, 188, 188, 1)",
230
+ "pressText1": "rgba(228, 228, 228, 1)",
231
+ "secondary": {
232
+ "default": "rgba(175, 175, 175, 1)",
233
+ "hover": "rgba(188, 188, 188, 1)",
234
+ "press": "rgba(202, 202, 202, 1)"
235
+ },
236
+ "tertiary": {
237
+ "default": "rgba(130, 130, 130, 1)",
238
+ "hover": "rgba(175, 175, 175, 1)",
239
+ "press": "rgba(188, 188, 188, 1)"
240
+ },
241
+ "visited": {
242
+ "default": "rgba(191, 160, 246, 1)",
243
+ "hover": "rgba(210, 192, 245, 1)",
244
+ "press": "rgba(233, 223, 255, 1)"
245
+ }
282
246
  }
283
247
  },
284
248
  "paragraphWidth": {
285
- "s": "320px",
286
- "m": "448px",
287
249
  "l": "672px",
288
- "sCompact": "280px",
289
- "mCompact": "392px",
290
250
  "lCompact": "588px",
291
- "sCozy": "588px",
251
+ "lCozy": "924px",
252
+ "m": "448px",
253
+ "mCompact": "392px",
292
254
  "mCozy": "616px",
293
- "lCozy": "924px"
255
+ "s": "320px",
256
+ "sCompact": "280px",
257
+ "sCozy": "588px"
258
+ },
259
+ "radius": {
260
+ "0": "0px",
261
+ "l": "12px",
262
+ "m": "8px",
263
+ "oval": "999999px",
264
+ "s": "4px",
265
+ "xl": "16px",
266
+ "xs": "2px",
267
+ "xxl": "24px"
268
+ },
269
+ "space": {
270
+ "component": {
271
+ "0": "0px",
272
+ "10": "4px",
273
+ "20": "8px",
274
+ "25": "12px",
275
+ "30": "16px",
276
+ "40": "24px",
277
+ "50": "40px"
278
+ },
279
+ "layout": {
280
+ "0": "0px",
281
+ "10": "4px",
282
+ "20": "8px",
283
+ "25": "12px",
284
+ "30": "16px",
285
+ "40": "24px",
286
+ "50": "40px",
287
+ "60": "64px",
288
+ "70": "104px",
289
+ "80": "168px",
290
+ "90": "272px",
291
+ "100": "440px"
292
+ },
293
+ "padding": {
294
+ "paddingCard": "24px"
295
+ },
296
+ "target": {
297
+ "l": "48px",
298
+ "m": "40px",
299
+ "s": "32px",
300
+ "xs": "24px"
301
+ }
294
302
  },
295
303
  "text": {
296
304
  "fontSize": {
297
- "paragraph": "16px",
298
305
  "body": "16px",
306
+ "caption": {
307
+ "m": "14px",
308
+ "s": "12px"
309
+ },
299
310
  "heading": {
300
- "xxxl": "40px",
301
- "xxl": "36px",
302
- "xl": "32px",
303
311
  "l": "28px",
304
312
  "m": "25px",
305
313
  "s": "22px",
314
+ "xl": "32px",
306
315
  "xs": "20px",
316
+ "xxl": "36px",
307
317
  "xxs": "18px",
318
+ "xxxl": "40px",
308
319
  "xxxs": "14px"
309
320
  },
310
- "caption": {
311
- "m": "14px",
312
- "s": "12px"
313
- }
321
+ "paragraph": "16px"
322
+ },
323
+ "fontWeight": {
324
+ "bold": "700",
325
+ "regular": "400"
314
326
  },
315
327
  "lineHeight": {
316
- "paragraph": "28px",
317
328
  "body": "24px",
329
+ "caption": {
330
+ "m": "20px",
331
+ "s": "18px"
332
+ },
318
333
  "heading": {
319
- "xxxl": "52px",
320
- "xxl": "44px",
321
- "xl": "40px",
322
334
  "l": "36px",
323
335
  "m": "32px",
324
336
  "s": "28px",
337
+ "xl": "40px",
325
338
  "xs": "28px",
339
+ "xxl": "44px",
326
340
  "xxs": "24px",
341
+ "xxxl": "52px",
327
342
  "xxxs": "20px"
328
343
  },
329
- "caption": {
330
- "m": "20px",
331
- "s": "18px"
332
- }
333
- },
334
- "fontWeight": {
335
- "regular": "400",
336
- "bold": "700"
344
+ "paragraph": "28px"
337
345
  }
338
- },
339
- "radius": {
340
- "0": "0px",
341
- "xs": "2px",
342
- "s": "4px",
343
- "m": "8px",
344
- "l": "12px",
345
- "xl": "16px",
346
- "xxl": "24px",
347
- "oval": "999999px"
348
346
  }
349
347
  }