@khanacademy/wonder-blocks-tokens 10.2.0 → 10.2.1

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 (12) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +8 -0
  3. package/dist/css/index.css +94 -70
  4. package/dist/css/vars.css +48 -44
  5. package/dist/es/index.js +1 -1
  6. package/dist/index.d.ts +2 -0
  7. package/dist/index.js +1 -1
  8. package/dist/theme/default.d.ts +2 -0
  9. package/dist/theme/primitive/sizing.d.ts +2 -0
  10. package/dist/theme/thunderblocks.d.ts +2 -0
  11. package/dist/tokens/theme.d.ts +2 -0
  12. package/package.json +1 -1
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-tokens@10.2.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
2
+ > @khanacademy/wonder-blocks-tokens@10.2.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
3
3
  > node -r @swc-node/register ./src/build/generate-css-variables.ts
4
4
 
5
5
  CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens/dist/css
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 10.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 1338494: - Updates some action tokens (thunderblocks)
8
+ - Adds `sizing.size_260` and `sizing.size_440` to the `sizing` tokens to support
9
+ new Button sizes.
10
+
3
11
  ## 10.2.0
4
12
 
5
13
  ### Minor Changes
package/dist/css/index.css CHANGED
@@ -1,30 +1,50 @@
1
- :root {--wb-c-icon-button-border-offset-primary: var(--wb-border-width-medium);
2
- --wb-c-icon-button-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
3
- --wb-c-icon-button-border-offset-tertiary: calc(-1 * var(--wb-border-width-medium));
4
- --wb-c-icon-button-border-width-primary-default: var(--wb-border-width-none);
5
- --wb-c-icon-button-border-width-primary-hover: var(--wb-border-width-medium);
6
- --wb-c-icon-button-border-width-primary-press: var(--wb-border-width-medium);
7
- --wb-c-icon-button-border-width-secondary-default: var(--wb-border-width-thin);
8
- --wb-c-icon-button-border-width-secondary-hover: var(--wb-border-width-medium);
9
- --wb-c-icon-button-border-width-secondary-press: var(--wb-border-width-medium);
10
- --wb-c-icon-button-border-width-tertiary-default: var(--wb-border-width-none);
11
- --wb-c-icon-button-border-width-tertiary-hover: var(--wb-border-width-medium);
12
- --wb-c-icon-button-border-width-tertiary-press: var(--wb-border-width-medium);
13
- --wb-c-icon-button-border-radius-default: var(--wb-border-radius-radius_040);}
1
+ :root {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
2
+ --wb-c-icon-button-iconButton-root-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
3
+ --wb-c-icon-button-iconButton-root-border-offset-tertiary: calc(-1 * var(--wb-border-width-medium));
4
+ --wb-c-icon-button-iconButton-root-border-width-primary-default: var(--wb-border-width-none);
5
+ --wb-c-icon-button-iconButton-root-border-width-primary-hover: var(--wb-border-width-medium);
6
+ --wb-c-icon-button-iconButton-root-border-width-primary-press: var(--wb-border-width-medium);
7
+ --wb-c-icon-button-iconButton-root-border-width-secondary-default: var(--wb-border-width-thin);
8
+ --wb-c-icon-button-iconButton-root-border-width-secondary-hover: var(--wb-border-width-medium);
9
+ --wb-c-icon-button-iconButton-root-border-width-secondary-press: var(--wb-border-width-medium);
10
+ --wb-c-icon-button-iconButton-root-border-width-tertiary-default: var(--wb-border-width-none);
11
+ --wb-c-icon-button-iconButton-root-border-width-tertiary-hover: var(--wb-border-width-medium);
12
+ --wb-c-icon-button-iconButton-root-border-width-tertiary-press: var(--wb-border-width-medium);
13
+ --wb-c-icon-button-iconButton-root-border-radius-default: var(--wb-border-radius-radius_040);
14
+ --wb-c-icon-button-iconButton-root-border-radius-hover: var(--wb-border-radius-radius_040);
15
+ --wb-c-icon-button-iconButton-root-border-radius-press: var(--wb-border-radius-radius_040);
16
+ --wb-c-icon-button-iconButton-root-sizing-xsmall: var(--wb-sizing-size_240);
17
+ --wb-c-icon-button-iconButton-root-sizing-small: var(--wb-sizing-size_320);
18
+ --wb-c-icon-button-iconButton-root-sizing-medium: var(--wb-sizing-size_400);
19
+ --wb-c-icon-button-iconButton-root-sizing-large: var(--wb-sizing-size_480);
20
+ --wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_160);
21
+ --wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_240);
22
+ --wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_240);
23
+ --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_240);}
14
24
 
15
- [data-wb-theme='thunderblocks'] {--wb-c-icon-button-border-offset-primary: var(--wb-border-width-medium);
16
- --wb-c-icon-button-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
17
- --wb-c-icon-button-border-offset-tertiary: calc(-1 * var(--wb-border-width-medium));
18
- --wb-c-icon-button-border-width-primary-default: var(--wb-border-width-none);
19
- --wb-c-icon-button-border-width-primary-hover: var(--wb-border-width-none);
20
- --wb-c-icon-button-border-width-primary-press: var(--wb-border-width-none);
21
- --wb-c-icon-button-border-width-secondary-default: var(--wb-border-width-thin);
22
- --wb-c-icon-button-border-width-secondary-hover: var(--wb-border-width-medium);
23
- --wb-c-icon-button-border-width-secondary-press: var(--wb-border-width-medium);
24
- --wb-c-icon-button-border-width-tertiary-default: var(--wb-border-width-none);
25
- --wb-c-icon-button-border-width-tertiary-hover: var(--wb-border-width-medium);
26
- --wb-c-icon-button-border-width-tertiary-press: var(--wb-border-width-medium);
27
- --wb-c-icon-button-border-radius-default: var(--wb-border-radius-radius_040);}:root {--wb-border-radius-radius_0: 0px;
25
+ [data-wb-theme='thunderblocks'] {--wb-c-icon-button-iconButton-root-border-offset-primary: var(--wb-border-width-medium);
26
+ --wb-c-icon-button-iconButton-root-border-offset-secondary: calc(-1 * var(--wb-border-width-medium));
27
+ --wb-c-icon-button-iconButton-root-border-offset-tertiary: calc(-1 * var(--wb-border-width-medium));
28
+ --wb-c-icon-button-iconButton-root-border-width-primary-default: var(--wb-border-width-none);
29
+ --wb-c-icon-button-iconButton-root-border-width-primary-hover: var(--wb-border-width-none);
30
+ --wb-c-icon-button-iconButton-root-border-width-primary-press: var(--wb-border-width-none);
31
+ --wb-c-icon-button-iconButton-root-border-width-secondary-default: var(--wb-border-width-thin);
32
+ --wb-c-icon-button-iconButton-root-border-width-secondary-hover: var(--wb-border-width-medium);
33
+ --wb-c-icon-button-iconButton-root-border-width-secondary-press: var(--wb-border-width-medium);
34
+ --wb-c-icon-button-iconButton-root-border-width-tertiary-default: var(--wb-border-width-none);
35
+ --wb-c-icon-button-iconButton-root-border-width-tertiary-hover: var(--wb-border-width-medium);
36
+ --wb-c-icon-button-iconButton-root-border-width-tertiary-press: var(--wb-border-width-medium);
37
+ --wb-c-icon-button-iconButton-root-border-radius-default: var(--wb-border-radius-radius_080);
38
+ --wb-c-icon-button-iconButton-root-border-radius-hover: var(--wb-border-radius-radius_080);
39
+ --wb-c-icon-button-iconButton-root-border-radius-press: var(--wb-border-radius-radius_120);
40
+ --wb-c-icon-button-iconButton-root-sizing-xsmall: var(--wb-sizing-size_240);
41
+ --wb-c-icon-button-iconButton-root-sizing-small: var(--wb-sizing-size_260);
42
+ --wb-c-icon-button-iconButton-root-sizing-medium: var(--wb-sizing-size_400);
43
+ --wb-c-icon-button-iconButton-root-sizing-large: var(--wb-sizing-size_440);
44
+ --wb-c-icon-button-iconButton-icon-sizing-xsmall: var(--wb-sizing-size_120);
45
+ --wb-c-icon-button-iconButton-icon-sizing-small: var(--wb-sizing-size_120);
46
+ --wb-c-icon-button-iconButton-icon-sizing-medium: var(--wb-sizing-size_180);
47
+ --wb-c-icon-button-iconButton-icon-sizing-large: var(--wb-sizing-size_200);}:root {--wb-border-radius-radius_0: 0px;
28
48
  --wb-border-radius-radius_040: 4px;
29
49
  --wb-border-radius-radius_080: 8px;
30
50
  --wb-border-radius-radius_120: 12px;
@@ -187,10 +207,12 @@
187
207
  --wb-sizing-size_200: 2rem;
188
208
  --wb-sizing-size_220: 2.2rem;
189
209
  --wb-sizing-size_240: 2.4rem;
210
+ --wb-sizing-size_260: 2.6rem;
190
211
  --wb-sizing-size_280: 2.8rem;
191
212
  --wb-sizing-size_320: 3.2rem;
192
213
  --wb-sizing-size_360: 3.6rem;
193
214
  --wb-sizing-size_400: 4rem;
215
+ --wb-sizing-size_440: 4.4rem;
194
216
  --wb-sizing-size_480: 4.8rem;
195
217
  --wb-sizing-size_560: 5.6rem;
196
218
  --wb-sizing-size_640: 6.4rem;
@@ -211,90 +233,90 @@
211
233
  --wb-semanticColor-action-primary-progressive-default-border: #5753FA;
212
234
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
213
235
  --wb-semanticColor-action-primary-progressive-default-foreground: #FFFFFF;
214
- --wb-semanticColor-action-primary-progressive-hover-border: #4340D0;
215
- --wb-semanticColor-action-primary-progressive-hover-background: #4340D0;
236
+ --wb-semanticColor-action-primary-progressive-hover-border: #363498;
237
+ --wb-semanticColor-action-primary-progressive-hover-background: #363498;
216
238
  --wb-semanticColor-action-primary-progressive-hover-foreground: #FFFFFF;
217
- --wb-semanticColor-action-primary-progressive-press-border: #4340D0;
218
- --wb-semanticColor-action-primary-progressive-press-background: #4340D0;
239
+ --wb-semanticColor-action-primary-progressive-press-border: #363498;
240
+ --wb-semanticColor-action-primary-progressive-press-background: #363498;
219
241
  --wb-semanticColor-action-primary-progressive-press-foreground: #FFFFFF;
220
242
  --wb-semanticColor-action-primary-destructive-default-border: #E22D2D;
221
- --wb-semanticColor-action-primary-destructive-default-background: #E22D2D;
243
+ --wb-semanticColor-action-primary-destructive-default-background: #BE2626;
222
244
  --wb-semanticColor-action-primary-destructive-default-foreground: #FFFFFF;
223
- --wb-semanticColor-action-primary-destructive-hover-border: #BE2626;
224
- --wb-semanticColor-action-primary-destructive-hover-background: #BE2626;
245
+ --wb-semanticColor-action-primary-destructive-hover-border: #621414;
246
+ --wb-semanticColor-action-primary-destructive-hover-background: #621414;
225
247
  --wb-semanticColor-action-primary-destructive-hover-foreground: #FFFFFF;
226
- --wb-semanticColor-action-primary-destructive-press-border: #BE2626;
227
- --wb-semanticColor-action-primary-destructive-press-background: #BE2626;
248
+ --wb-semanticColor-action-primary-destructive-press-border: #621414;
249
+ --wb-semanticColor-action-primary-destructive-press-background: #621414;
228
250
  --wb-semanticColor-action-primary-destructive-press-foreground: #FFFFFF;
229
251
  --wb-semanticColor-action-primary-neutral-default-border: #8A8B90;
230
- --wb-semanticColor-action-primary-neutral-default-background: #8A8B90;
252
+ --wb-semanticColor-action-primary-neutral-default-background: #75767C;
231
253
  --wb-semanticColor-action-primary-neutral-default-foreground: #FFFFFF;
232
- --wb-semanticColor-action-primary-neutral-hover-border: #4A4C53;
233
- --wb-semanticColor-action-primary-neutral-hover-background: #4A4C53;
254
+ --wb-semanticColor-action-primary-neutral-hover-border: #35373F;
255
+ --wb-semanticColor-action-primary-neutral-hover-background: #35373F;
234
256
  --wb-semanticColor-action-primary-neutral-hover-foreground: #FFFFFF;
235
- --wb-semanticColor-action-primary-neutral-press-border: #4A4C53;
236
- --wb-semanticColor-action-primary-neutral-press-background: #4A4C53;
257
+ --wb-semanticColor-action-primary-neutral-press-border: #35373F;
258
+ --wb-semanticColor-action-primary-neutral-press-background: #35373F;
237
259
  --wb-semanticColor-action-primary-neutral-press-foreground: #FFFFFF;
238
260
  --wb-semanticColor-action-primary-disabled-border: #E0E0E1;
239
261
  --wb-semanticColor-action-primary-disabled-background: #E0E0E1;
240
262
  --wb-semanticColor-action-primary-disabled-foreground: #B5B6B9;
241
- --wb-semanticColor-action-secondary-progressive-default-border: #5753FA;
263
+ --wb-semanticColor-action-secondary-progressive-default-border: #BFCAFF;
242
264
  --wb-semanticColor-action-secondary-progressive-default-background: #EBF1FD;
243
265
  --wb-semanticColor-action-secondary-progressive-default-foreground: #5753FA;
244
- --wb-semanticColor-action-secondary-progressive-hover-border: #4340D0;
266
+ --wb-semanticColor-action-secondary-progressive-hover-border: #6E78FF;
245
267
  --wb-semanticColor-action-secondary-progressive-hover-background: #DFEAFF;
246
- --wb-semanticColor-action-secondary-progressive-hover-foreground: #4340D0;
247
- --wb-semanticColor-action-secondary-progressive-press-border: #4340D0;
268
+ --wb-semanticColor-action-secondary-progressive-hover-foreground: #5753FA;
269
+ --wb-semanticColor-action-secondary-progressive-press-border: #6E78FF;
248
270
  --wb-semanticColor-action-secondary-progressive-press-background: #DFEAFF;
249
- --wb-semanticColor-action-secondary-progressive-press-foreground: #4340D0;
271
+ --wb-semanticColor-action-secondary-progressive-press-foreground: #5753FA;
250
272
  --wb-semanticColor-action-secondary-destructive-default-border: #E22D2D;
251
- --wb-semanticColor-action-secondary-destructive-default-background: #FDE9E9;
252
- --wb-semanticColor-action-secondary-destructive-default-foreground: #E22D2D;
253
- --wb-semanticColor-action-secondary-destructive-hover-border: #BE2626;
273
+ --wb-semanticColor-action-secondary-destructive-default-background: #FEF4F4;
274
+ --wb-semanticColor-action-secondary-destructive-default-foreground: #BE2626;
275
+ --wb-semanticColor-action-secondary-destructive-hover-border: #8E1C1C;
254
276
  --wb-semanticColor-action-secondary-destructive-hover-background: #FDDFDF;
255
- --wb-semanticColor-action-secondary-destructive-hover-foreground: #BE2626;
256
- --wb-semanticColor-action-secondary-destructive-press-border: #BE2626;
277
+ --wb-semanticColor-action-secondary-destructive-hover-foreground: #8E1C1C;
278
+ --wb-semanticColor-action-secondary-destructive-press-border: #8E1C1C;
257
279
  --wb-semanticColor-action-secondary-destructive-press-background: #FDDFDF;
258
- --wb-semanticColor-action-secondary-destructive-press-foreground: #BE2626;
259
- --wb-semanticColor-action-secondary-neutral-default-border: #75767C;
260
- --wb-semanticColor-action-secondary-neutral-default-background: #EDEDEE;
261
- --wb-semanticColor-action-secondary-neutral-default-foreground: #75767C;
280
+ --wb-semanticColor-action-secondary-destructive-press-foreground: #8E1C1C;
281
+ --wb-semanticColor-action-secondary-neutral-default-border: #CBCBCD;
282
+ --wb-semanticColor-action-secondary-neutral-default-background: #FFFFFF;
283
+ --wb-semanticColor-action-secondary-neutral-default-foreground: #4A4C53;
262
284
  --wb-semanticColor-action-secondary-neutral-hover-border: #4A4C53;
263
- --wb-semanticColor-action-secondary-neutral-hover-background: #E0E0E1;
264
- --wb-semanticColor-action-secondary-neutral-hover-foreground: #4A4C53;
285
+ --wb-semanticColor-action-secondary-neutral-hover-background: #FFFFFF;
286
+ --wb-semanticColor-action-secondary-neutral-hover-foreground: #191918;
265
287
  --wb-semanticColor-action-secondary-neutral-press-border: #4A4C53;
266
- --wb-semanticColor-action-secondary-neutral-press-background: #E0E0E1;
267
- --wb-semanticColor-action-secondary-neutral-press-foreground: #4A4C53;
288
+ --wb-semanticColor-action-secondary-neutral-press-background: #FFFFFF;
289
+ --wb-semanticColor-action-secondary-neutral-press-foreground: #191918;
268
290
  --wb-semanticColor-action-secondary-disabled-border: #CBCBCD;
269
291
  --wb-semanticColor-action-secondary-disabled-background: #EDEDEE;
270
292
  --wb-semanticColor-action-secondary-disabled-foreground: #B5B6B9;
271
293
  --wb-semanticColor-action-tertiary-progressive-default-border: transparent;
272
294
  --wb-semanticColor-action-tertiary-progressive-default-background: transparent;
273
295
  --wb-semanticColor-action-tertiary-progressive-default-foreground: #5753FA;
274
- --wb-semanticColor-action-tertiary-progressive-hover-border: #4340D0;
296
+ --wb-semanticColor-action-tertiary-progressive-hover-border: #363498;
275
297
  --wb-semanticColor-action-tertiary-progressive-hover-background: transparent;
276
- --wb-semanticColor-action-tertiary-progressive-hover-foreground: #4340D0;
277
- --wb-semanticColor-action-tertiary-progressive-press-border: #4340D0;
298
+ --wb-semanticColor-action-tertiary-progressive-hover-foreground: #363498;
299
+ --wb-semanticColor-action-tertiary-progressive-press-border: #363498;
278
300
  --wb-semanticColor-action-tertiary-progressive-press-background: transparent;
279
- --wb-semanticColor-action-tertiary-progressive-press-foreground: #4340D0;
301
+ --wb-semanticColor-action-tertiary-progressive-press-foreground: #363498;
280
302
  --wb-semanticColor-action-tertiary-destructive-default-border: transparent;
281
303
  --wb-semanticColor-action-tertiary-destructive-default-background: transparent;
282
- --wb-semanticColor-action-tertiary-destructive-default-foreground: #E22D2D;
283
- --wb-semanticColor-action-tertiary-destructive-hover-border: #BE2626;
304
+ --wb-semanticColor-action-tertiary-destructive-default-foreground: #BE2626;
305
+ --wb-semanticColor-action-tertiary-destructive-hover-border: #8E1C1C;
284
306
  --wb-semanticColor-action-tertiary-destructive-hover-background: transparent;
285
- --wb-semanticColor-action-tertiary-destructive-hover-foreground: #BE2626;
286
- --wb-semanticColor-action-tertiary-destructive-press-border: #BE2626;
307
+ --wb-semanticColor-action-tertiary-destructive-hover-foreground: #8E1C1C;
308
+ --wb-semanticColor-action-tertiary-destructive-press-border: #8E1C1C;
287
309
  --wb-semanticColor-action-tertiary-destructive-press-background: transparent;
288
- --wb-semanticColor-action-tertiary-destructive-press-foreground: #BE2626;
310
+ --wb-semanticColor-action-tertiary-destructive-press-foreground: #8E1C1C;
289
311
  --wb-semanticColor-action-tertiary-neutral-default-border: transparent;
290
312
  --wb-semanticColor-action-tertiary-neutral-default-background: transparent;
291
- --wb-semanticColor-action-tertiary-neutral-default-foreground: #75767C;
313
+ --wb-semanticColor-action-tertiary-neutral-default-foreground: #4A4C53;
292
314
  --wb-semanticColor-action-tertiary-neutral-hover-border: #4A4C53;
293
315
  --wb-semanticColor-action-tertiary-neutral-hover-background: transparent;
294
- --wb-semanticColor-action-tertiary-neutral-hover-foreground: #4A4C53;
316
+ --wb-semanticColor-action-tertiary-neutral-hover-foreground: #191918;
295
317
  --wb-semanticColor-action-tertiary-neutral-press-border: #4A4C53;
296
318
  --wb-semanticColor-action-tertiary-neutral-press-background: transparent;
297
- --wb-semanticColor-action-tertiary-neutral-press-foreground: #4A4C53;
319
+ --wb-semanticColor-action-tertiary-neutral-press-foreground: #191918;
298
320
  --wb-semanticColor-action-tertiary-disabled-border: transparent;
299
321
  --wb-semanticColor-action-tertiary-disabled-background: transparent;
300
322
  --wb-semanticColor-action-tertiary-disabled-foreground: #B5B6B9;
@@ -362,10 +384,12 @@
362
384
  --wb-sizing-size_200: 2rem;
363
385
  --wb-sizing-size_220: 2.2rem;
364
386
  --wb-sizing-size_240: 2.4rem;
387
+ --wb-sizing-size_260: 2.6rem;
365
388
  --wb-sizing-size_280: 2.8rem;
366
389
  --wb-sizing-size_320: 3.2rem;
367
390
  --wb-sizing-size_360: 3.6rem;
368
391
  --wb-sizing-size_400: 4rem;
392
+ --wb-sizing-size_440: 4.4rem;
369
393
  --wb-sizing-size_480: 4.8rem;
370
394
  --wb-sizing-size_560: 5.6rem;
371
395
  --wb-sizing-size_640: 6.4rem;
package/dist/css/vars.css CHANGED
@@ -161,10 +161,12 @@
161
161
  --wb-sizing-size_200: 2rem;
162
162
  --wb-sizing-size_220: 2.2rem;
163
163
  --wb-sizing-size_240: 2.4rem;
164
+ --wb-sizing-size_260: 2.6rem;
164
165
  --wb-sizing-size_280: 2.8rem;
165
166
  --wb-sizing-size_320: 3.2rem;
166
167
  --wb-sizing-size_360: 3.6rem;
167
168
  --wb-sizing-size_400: 4rem;
169
+ --wb-sizing-size_440: 4.4rem;
168
170
  --wb-sizing-size_480: 4.8rem;
169
171
  --wb-sizing-size_560: 5.6rem;
170
172
  --wb-sizing-size_640: 6.4rem;
@@ -185,90 +187,90 @@
185
187
  --wb-semanticColor-action-primary-progressive-default-border: #5753FA;
186
188
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
187
189
  --wb-semanticColor-action-primary-progressive-default-foreground: #FFFFFF;
188
- --wb-semanticColor-action-primary-progressive-hover-border: #4340D0;
189
- --wb-semanticColor-action-primary-progressive-hover-background: #4340D0;
190
+ --wb-semanticColor-action-primary-progressive-hover-border: #363498;
191
+ --wb-semanticColor-action-primary-progressive-hover-background: #363498;
190
192
  --wb-semanticColor-action-primary-progressive-hover-foreground: #FFFFFF;
191
- --wb-semanticColor-action-primary-progressive-press-border: #4340D0;
192
- --wb-semanticColor-action-primary-progressive-press-background: #4340D0;
193
+ --wb-semanticColor-action-primary-progressive-press-border: #363498;
194
+ --wb-semanticColor-action-primary-progressive-press-background: #363498;
193
195
  --wb-semanticColor-action-primary-progressive-press-foreground: #FFFFFF;
194
196
  --wb-semanticColor-action-primary-destructive-default-border: #E22D2D;
195
- --wb-semanticColor-action-primary-destructive-default-background: #E22D2D;
197
+ --wb-semanticColor-action-primary-destructive-default-background: #BE2626;
196
198
  --wb-semanticColor-action-primary-destructive-default-foreground: #FFFFFF;
197
- --wb-semanticColor-action-primary-destructive-hover-border: #BE2626;
198
- --wb-semanticColor-action-primary-destructive-hover-background: #BE2626;
199
+ --wb-semanticColor-action-primary-destructive-hover-border: #621414;
200
+ --wb-semanticColor-action-primary-destructive-hover-background: #621414;
199
201
  --wb-semanticColor-action-primary-destructive-hover-foreground: #FFFFFF;
200
- --wb-semanticColor-action-primary-destructive-press-border: #BE2626;
201
- --wb-semanticColor-action-primary-destructive-press-background: #BE2626;
202
+ --wb-semanticColor-action-primary-destructive-press-border: #621414;
203
+ --wb-semanticColor-action-primary-destructive-press-background: #621414;
202
204
  --wb-semanticColor-action-primary-destructive-press-foreground: #FFFFFF;
203
205
  --wb-semanticColor-action-primary-neutral-default-border: #8A8B90;
204
- --wb-semanticColor-action-primary-neutral-default-background: #8A8B90;
206
+ --wb-semanticColor-action-primary-neutral-default-background: #75767C;
205
207
  --wb-semanticColor-action-primary-neutral-default-foreground: #FFFFFF;
206
- --wb-semanticColor-action-primary-neutral-hover-border: #4A4C53;
207
- --wb-semanticColor-action-primary-neutral-hover-background: #4A4C53;
208
+ --wb-semanticColor-action-primary-neutral-hover-border: #35373F;
209
+ --wb-semanticColor-action-primary-neutral-hover-background: #35373F;
208
210
  --wb-semanticColor-action-primary-neutral-hover-foreground: #FFFFFF;
209
- --wb-semanticColor-action-primary-neutral-press-border: #4A4C53;
210
- --wb-semanticColor-action-primary-neutral-press-background: #4A4C53;
211
+ --wb-semanticColor-action-primary-neutral-press-border: #35373F;
212
+ --wb-semanticColor-action-primary-neutral-press-background: #35373F;
211
213
  --wb-semanticColor-action-primary-neutral-press-foreground: #FFFFFF;
212
214
  --wb-semanticColor-action-primary-disabled-border: #E0E0E1;
213
215
  --wb-semanticColor-action-primary-disabled-background: #E0E0E1;
214
216
  --wb-semanticColor-action-primary-disabled-foreground: #B5B6B9;
215
- --wb-semanticColor-action-secondary-progressive-default-border: #5753FA;
217
+ --wb-semanticColor-action-secondary-progressive-default-border: #BFCAFF;
216
218
  --wb-semanticColor-action-secondary-progressive-default-background: #EBF1FD;
217
219
  --wb-semanticColor-action-secondary-progressive-default-foreground: #5753FA;
218
- --wb-semanticColor-action-secondary-progressive-hover-border: #4340D0;
220
+ --wb-semanticColor-action-secondary-progressive-hover-border: #6E78FF;
219
221
  --wb-semanticColor-action-secondary-progressive-hover-background: #DFEAFF;
220
- --wb-semanticColor-action-secondary-progressive-hover-foreground: #4340D0;
221
- --wb-semanticColor-action-secondary-progressive-press-border: #4340D0;
222
+ --wb-semanticColor-action-secondary-progressive-hover-foreground: #5753FA;
223
+ --wb-semanticColor-action-secondary-progressive-press-border: #6E78FF;
222
224
  --wb-semanticColor-action-secondary-progressive-press-background: #DFEAFF;
223
- --wb-semanticColor-action-secondary-progressive-press-foreground: #4340D0;
225
+ --wb-semanticColor-action-secondary-progressive-press-foreground: #5753FA;
224
226
  --wb-semanticColor-action-secondary-destructive-default-border: #E22D2D;
225
- --wb-semanticColor-action-secondary-destructive-default-background: #FDE9E9;
226
- --wb-semanticColor-action-secondary-destructive-default-foreground: #E22D2D;
227
- --wb-semanticColor-action-secondary-destructive-hover-border: #BE2626;
227
+ --wb-semanticColor-action-secondary-destructive-default-background: #FEF4F4;
228
+ --wb-semanticColor-action-secondary-destructive-default-foreground: #BE2626;
229
+ --wb-semanticColor-action-secondary-destructive-hover-border: #8E1C1C;
228
230
  --wb-semanticColor-action-secondary-destructive-hover-background: #FDDFDF;
229
- --wb-semanticColor-action-secondary-destructive-hover-foreground: #BE2626;
230
- --wb-semanticColor-action-secondary-destructive-press-border: #BE2626;
231
+ --wb-semanticColor-action-secondary-destructive-hover-foreground: #8E1C1C;
232
+ --wb-semanticColor-action-secondary-destructive-press-border: #8E1C1C;
231
233
  --wb-semanticColor-action-secondary-destructive-press-background: #FDDFDF;
232
- --wb-semanticColor-action-secondary-destructive-press-foreground: #BE2626;
233
- --wb-semanticColor-action-secondary-neutral-default-border: #75767C;
234
- --wb-semanticColor-action-secondary-neutral-default-background: #EDEDEE;
235
- --wb-semanticColor-action-secondary-neutral-default-foreground: #75767C;
234
+ --wb-semanticColor-action-secondary-destructive-press-foreground: #8E1C1C;
235
+ --wb-semanticColor-action-secondary-neutral-default-border: #CBCBCD;
236
+ --wb-semanticColor-action-secondary-neutral-default-background: #FFFFFF;
237
+ --wb-semanticColor-action-secondary-neutral-default-foreground: #4A4C53;
236
238
  --wb-semanticColor-action-secondary-neutral-hover-border: #4A4C53;
237
- --wb-semanticColor-action-secondary-neutral-hover-background: #E0E0E1;
238
- --wb-semanticColor-action-secondary-neutral-hover-foreground: #4A4C53;
239
+ --wb-semanticColor-action-secondary-neutral-hover-background: #FFFFFF;
240
+ --wb-semanticColor-action-secondary-neutral-hover-foreground: #191918;
239
241
  --wb-semanticColor-action-secondary-neutral-press-border: #4A4C53;
240
- --wb-semanticColor-action-secondary-neutral-press-background: #E0E0E1;
241
- --wb-semanticColor-action-secondary-neutral-press-foreground: #4A4C53;
242
+ --wb-semanticColor-action-secondary-neutral-press-background: #FFFFFF;
243
+ --wb-semanticColor-action-secondary-neutral-press-foreground: #191918;
242
244
  --wb-semanticColor-action-secondary-disabled-border: #CBCBCD;
243
245
  --wb-semanticColor-action-secondary-disabled-background: #EDEDEE;
244
246
  --wb-semanticColor-action-secondary-disabled-foreground: #B5B6B9;
245
247
  --wb-semanticColor-action-tertiary-progressive-default-border: transparent;
246
248
  --wb-semanticColor-action-tertiary-progressive-default-background: transparent;
247
249
  --wb-semanticColor-action-tertiary-progressive-default-foreground: #5753FA;
248
- --wb-semanticColor-action-tertiary-progressive-hover-border: #4340D0;
250
+ --wb-semanticColor-action-tertiary-progressive-hover-border: #363498;
249
251
  --wb-semanticColor-action-tertiary-progressive-hover-background: transparent;
250
- --wb-semanticColor-action-tertiary-progressive-hover-foreground: #4340D0;
251
- --wb-semanticColor-action-tertiary-progressive-press-border: #4340D0;
252
+ --wb-semanticColor-action-tertiary-progressive-hover-foreground: #363498;
253
+ --wb-semanticColor-action-tertiary-progressive-press-border: #363498;
252
254
  --wb-semanticColor-action-tertiary-progressive-press-background: transparent;
253
- --wb-semanticColor-action-tertiary-progressive-press-foreground: #4340D0;
255
+ --wb-semanticColor-action-tertiary-progressive-press-foreground: #363498;
254
256
  --wb-semanticColor-action-tertiary-destructive-default-border: transparent;
255
257
  --wb-semanticColor-action-tertiary-destructive-default-background: transparent;
256
- --wb-semanticColor-action-tertiary-destructive-default-foreground: #E22D2D;
257
- --wb-semanticColor-action-tertiary-destructive-hover-border: #BE2626;
258
+ --wb-semanticColor-action-tertiary-destructive-default-foreground: #BE2626;
259
+ --wb-semanticColor-action-tertiary-destructive-hover-border: #8E1C1C;
258
260
  --wb-semanticColor-action-tertiary-destructive-hover-background: transparent;
259
- --wb-semanticColor-action-tertiary-destructive-hover-foreground: #BE2626;
260
- --wb-semanticColor-action-tertiary-destructive-press-border: #BE2626;
261
+ --wb-semanticColor-action-tertiary-destructive-hover-foreground: #8E1C1C;
262
+ --wb-semanticColor-action-tertiary-destructive-press-border: #8E1C1C;
261
263
  --wb-semanticColor-action-tertiary-destructive-press-background: transparent;
262
- --wb-semanticColor-action-tertiary-destructive-press-foreground: #BE2626;
264
+ --wb-semanticColor-action-tertiary-destructive-press-foreground: #8E1C1C;
263
265
  --wb-semanticColor-action-tertiary-neutral-default-border: transparent;
264
266
  --wb-semanticColor-action-tertiary-neutral-default-background: transparent;
265
- --wb-semanticColor-action-tertiary-neutral-default-foreground: #75767C;
267
+ --wb-semanticColor-action-tertiary-neutral-default-foreground: #4A4C53;
266
268
  --wb-semanticColor-action-tertiary-neutral-hover-border: #4A4C53;
267
269
  --wb-semanticColor-action-tertiary-neutral-hover-background: transparent;
268
- --wb-semanticColor-action-tertiary-neutral-hover-foreground: #4A4C53;
270
+ --wb-semanticColor-action-tertiary-neutral-hover-foreground: #191918;
269
271
  --wb-semanticColor-action-tertiary-neutral-press-border: #4A4C53;
270
272
  --wb-semanticColor-action-tertiary-neutral-press-background: transparent;
271
- --wb-semanticColor-action-tertiary-neutral-press-foreground: #4A4C53;
273
+ --wb-semanticColor-action-tertiary-neutral-press-foreground: #191918;
272
274
  --wb-semanticColor-action-tertiary-disabled-border: transparent;
273
275
  --wb-semanticColor-action-tertiary-disabled-background: transparent;
274
276
  --wb-semanticColor-action-tertiary-disabled-foreground: #B5B6B9;
@@ -336,10 +338,12 @@
336
338
  --wb-sizing-size_200: 2rem;
337
339
  --wb-sizing-size_220: 2.2rem;
338
340
  --wb-sizing-size_240: 2.4rem;
341
+ --wb-sizing-size_260: 2.6rem;
339
342
  --wb-sizing-size_280: 2.8rem;
340
343
  --wb-sizing-size_320: 3.2rem;
341
344
  --wb-sizing-size_360: 3.6rem;
342
345
  --wb-sizing-size_400: 4rem;
346
+ --wb-sizing-size_440: 4.4rem;
343
347
  --wb-sizing-size_480: 4.8rem;
344
348
  --wb-sizing-size_560: 5.6rem;
345
349
  --wb-sizing-size_640: 6.4rem;
package/dist/es/index.js CHANGED
@@ -4,7 +4,7 @@ const offBlack="#21242c";const white="#ffffff";const eggplant="#5f1e5c";const ba
4
4
 
5
5
  const BASELINE_VALUE=10;function remToPx(value,baseline=BASELINE_VALUE){const num=parseFloat(value);const result=Math.round(num*baseline);return `${result}px`}function pxToRem(value,baseline=BASELINE_VALUE){return `${value/baseline}rem`}
6
6
 
7
- const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_040:pxToRem(4),size_060:pxToRem(6),size_080:pxToRem(8),size_100:pxToRem(10),size_120:pxToRem(12),size_140:pxToRem(14),size_160:pxToRem(16),size_180:pxToRem(18),size_200:pxToRem(20),size_220:pxToRem(22),size_240:pxToRem(24),size_280:pxToRem(28),size_320:pxToRem(32),size_360:pxToRem(36),size_400:pxToRem(40),size_480:pxToRem(48),size_560:pxToRem(56),size_640:pxToRem(64),size_720:pxToRem(72),size_800:pxToRem(80),size_880:pxToRem(88),size_960:pxToRem(96)};
7
+ const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_040:pxToRem(4),size_060:pxToRem(6),size_080:pxToRem(8),size_100:pxToRem(10),size_120:pxToRem(12),size_140:pxToRem(14),size_160:pxToRem(16),size_180:pxToRem(18),size_200:pxToRem(20),size_220:pxToRem(22),size_240:pxToRem(24),size_260:pxToRem(26),size_280:pxToRem(28),size_320:pxToRem(32),size_360:pxToRem(36),size_400:pxToRem(40),size_440:pxToRem(44),size_480:pxToRem(48),size_560:pxToRem(56),size_640:pxToRem(64),size_720:pxToRem(72),size_800:pxToRem(80),size_880:pxToRem(88),size_960:pxToRem(96)};
8
8
 
9
9
  const fontFamily={sans:'Lato, "Noto Sans", sans-serif',serif:'"Noto Serif", serif',mono:"Inconsolata, monospace"};const fontWeight={light:300,regular:400,bold:700,black:900};const font={family:{sans:fontFamily.sans,serif:fontFamily.serif,mono:fontFamily.mono},size:{xxxLarge:sizing$1.size_360,xxLarge:sizing$1.size_280,xLarge:sizing$1.size_240,large:sizing$1.size_200,medium:sizing$1.size_160,small:sizing$1.size_140,xSmall:sizing$1.size_120},lineHeight:{xxxLarge:sizing$1.size_400,xxLarge:sizing$1.size_320,xLarge:sizing$1.size_280,large:sizing$1.size_240,xMedium:sizing$1.size_220,medium:sizing$1.size_200,small:sizing$1.size_180,xSmall:sizing$1.size_160},weight:{light:fontWeight.light,regular:fontWeight.regular,bold:fontWeight.bold,black:fontWeight.black}};
10
10
 
package/dist/index.d.ts CHANGED
@@ -296,10 +296,12 @@ declare const border: {
296
296
  readonly size_200: string;
297
297
  readonly size_220: string;
298
298
  readonly size_240: string;
299
+ readonly size_260: string;
299
300
  readonly size_280: string;
300
301
  readonly size_320: string;
301
302
  readonly size_360: string;
302
303
  readonly size_400: string;
304
+ readonly size_440: string;
303
305
  readonly size_480: string;
304
306
  readonly size_560: string;
305
307
  readonly size_640: string;
package/dist/index.js CHANGED
@@ -8,7 +8,7 @@ const offBlack="#21242c";const white="#ffffff";const eggplant="#5f1e5c";const ba
8
8
 
9
9
  const BASELINE_VALUE=10;function remToPx(value,baseline=BASELINE_VALUE){const num=parseFloat(value);const result=Math.round(num*baseline);return `${result}px`}function pxToRem(value,baseline=BASELINE_VALUE){return `${value/baseline}rem`}
10
10
 
11
- const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_040:pxToRem(4),size_060:pxToRem(6),size_080:pxToRem(8),size_100:pxToRem(10),size_120:pxToRem(12),size_140:pxToRem(14),size_160:pxToRem(16),size_180:pxToRem(18),size_200:pxToRem(20),size_220:pxToRem(22),size_240:pxToRem(24),size_280:pxToRem(28),size_320:pxToRem(32),size_360:pxToRem(36),size_400:pxToRem(40),size_480:pxToRem(48),size_560:pxToRem(56),size_640:pxToRem(64),size_720:pxToRem(72),size_800:pxToRem(80),size_880:pxToRem(88),size_960:pxToRem(96)};
11
+ const sizing$1={size_0:pxToRem(0),size_010:pxToRem(1),size_020:pxToRem(2),size_040:pxToRem(4),size_060:pxToRem(6),size_080:pxToRem(8),size_100:pxToRem(10),size_120:pxToRem(12),size_140:pxToRem(14),size_160:pxToRem(16),size_180:pxToRem(18),size_200:pxToRem(20),size_220:pxToRem(22),size_240:pxToRem(24),size_260:pxToRem(26),size_280:pxToRem(28),size_320:pxToRem(32),size_360:pxToRem(36),size_400:pxToRem(40),size_440:pxToRem(44),size_480:pxToRem(48),size_560:pxToRem(56),size_640:pxToRem(64),size_720:pxToRem(72),size_800:pxToRem(80),size_880:pxToRem(88),size_960:pxToRem(96)};
12
12
 
13
13
  const fontFamily={sans:'Lato, "Noto Sans", sans-serif',serif:'"Noto Serif", serif',mono:"Inconsolata, monospace"};const fontWeight={light:300,regular:400,bold:700,black:900};const font={family:{sans:fontFamily.sans,serif:fontFamily.serif,mono:fontFamily.mono},size:{xxxLarge:sizing$1.size_360,xxLarge:sizing$1.size_280,xLarge:sizing$1.size_240,large:sizing$1.size_200,medium:sizing$1.size_160,small:sizing$1.size_140,xSmall:sizing$1.size_120},lineHeight:{xxxLarge:sizing$1.size_400,xxLarge:sizing$1.size_320,xLarge:sizing$1.size_280,large:sizing$1.size_240,xMedium:sizing$1.size_220,medium:sizing$1.size_200,small:sizing$1.size_180,xSmall:sizing$1.size_160},weight:{light:fontWeight.light,regular:fontWeight.regular,bold:fontWeight.bold,black:fontWeight.black}};
14
14
 
package/dist/theme/default.d.ts CHANGED
@@ -302,10 +302,12 @@ declare const _default: {
302
302
  readonly size_200: string;
303
303
  readonly size_220: string;
304
304
  readonly size_240: string;
305
+ readonly size_260: string;
305
306
  readonly size_280: string;
306
307
  readonly size_320: string;
307
308
  readonly size_360: string;
308
309
  readonly size_400: string;
310
+ readonly size_440: string;
309
311
  readonly size_480: string;
310
312
  readonly size_560: string;
311
313
  readonly size_640: string;
package/dist/theme/primitive/sizing.d.ts CHANGED
@@ -24,10 +24,12 @@ export declare const sizing: {
24
24
  readonly size_200: string;
25
25
  readonly size_220: string;
26
26
  readonly size_240: string;
27
+ readonly size_260: string;
27
28
  readonly size_280: string;
28
29
  readonly size_320: string;
29
30
  readonly size_360: string;
30
31
  readonly size_400: string;
32
+ readonly size_440: string;
31
33
  readonly size_480: string;
32
34
  readonly size_560: string;
33
35
  readonly size_640: string;
package/dist/theme/thunderblocks.d.ts CHANGED
@@ -293,10 +293,12 @@ declare const _default: {
293
293
  readonly size_200: string;
294
294
  readonly size_220: string;
295
295
  readonly size_240: string;
296
+ readonly size_260: string;
296
297
  readonly size_280: string;
297
298
  readonly size_320: string;
298
299
  readonly size_360: string;
299
300
  readonly size_400: string;
301
+ readonly size_440: string;
300
302
  readonly size_480: string;
301
303
  readonly size_560: string;
302
304
  readonly size_640: string;
package/dist/tokens/theme.d.ts CHANGED
@@ -293,10 +293,12 @@ declare const _default: {
293
293
  readonly size_200: string;
294
294
  readonly size_220: string;
295
295
  readonly size_240: string;
296
+ readonly size_260: string;
296
297
  readonly size_280: string;
297
298
  readonly size_320: string;
298
299
  readonly size_360: string;
299
300
  readonly size_400: string;
301
+ readonly size_440: string;
300
302
  readonly size_480: string;
301
303
  readonly size_560: string;
302
304
  readonly size_640: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-tokens",
3
- "version": "10.2.0",
3
+ "version": "10.2.1",
4
4
  "description": "Core primitive design tokens for Web Wonder Blocks",
5
5
  "exports": {
6
6
  ".": {