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