@khanacademy/wonder-blocks-tokens 10.2.0 → 10.3.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 (15) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +20 -0
  3. package/dist/css/index.css +176 -70
  4. package/dist/css/vars.css +130 -44
  5. package/dist/es/index.js +8 -8
  6. package/dist/index.d.ts +64 -1
  7. package/dist/index.js +8 -8
  8. package/dist/internal/generate-tokens.d.ts +1 -1
  9. package/dist/theme/default.d.ts +65 -0
  10. package/dist/{tokens → theme/primitive}/font.d.ts +32 -0
  11. package/dist/theme/primitive/sizing.d.ts +2 -0
  12. package/dist/theme/semantic/internal/primitive-font-thunderblocks.d.ts +73 -0
  13. package/dist/theme/thunderblocks.d.ts +65 -0
  14. package/dist/tokens/theme.d.ts +65 -0
  15. package/package.json +2 -2
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.3.0 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,25 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 10.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - dd76e7c: - Update existing font tokens to use themes.
8
+ - Add font.heading and font.body tokens for size and lineHeight.
9
+ - Add font.weight.medium for the Thunderblocks theme with Plus Jakarta Sans.
10
+
11
+ ### Patch Changes
12
+
13
+ - @khanacademy/wonder-blocks-theming@3.4.0
14
+
15
+ ## 10.2.1
16
+
17
+ ### Patch Changes
18
+
19
+ - 1338494: - Updates some action tokens (thunderblocks)
20
+ - Adds `sizing.size_260` and `sizing.size_440` to the `sizing` tokens to support
21
+ new Button sizes.
22
+
3
23
  ## 10.2.0
4
24
 
5
25
  ### 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;
@@ -33,6 +53,47 @@
33
53
  --wb-border-width-thin: 1px;
34
54
  --wb-border-width-medium: 2px;
35
55
  --wb-border-width-thick: 4px;
56
+ --wb-font-family-sans: Lato, "Noto Sans", sans-serif;
57
+ --wb-font-family-serif: "Noto Serif", serif;
58
+ --wb-font-family-mono: Inconsolata, monospace;
59
+ --wb-font-size-xxxLarge: 3.6rem;
60
+ --wb-font-size-xxLarge: 2.8rem;
61
+ --wb-font-size-xLarge: 2.4rem;
62
+ --wb-font-size-large: 2rem;
63
+ --wb-font-size-medium: 1.6rem;
64
+ --wb-font-size-small: 1.4rem;
65
+ --wb-font-size-xSmall: 1.2rem;
66
+ --wb-font-lineHeight-xxxLarge: 4rem;
67
+ --wb-font-lineHeight-xxLarge: 3.2rem;
68
+ --wb-font-lineHeight-xLarge: 2.8rem;
69
+ --wb-font-lineHeight-large: 2.4rem;
70
+ --wb-font-lineHeight-xMedium: 2.2rem;
71
+ --wb-font-lineHeight-medium: 2rem;
72
+ --wb-font-lineHeight-small: 1.8rem;
73
+ --wb-font-lineHeight-xSmall: 1.6rem;
74
+ --wb-font-weight-light: 300;
75
+ --wb-font-weight-regular: 400;
76
+ --wb-font-weight-medium: 400;
77
+ --wb-font-weight-semi: 400;
78
+ --wb-font-weight-bold: 700;
79
+ --wb-font-weight-black: 900;
80
+ --wb-font-body-size-xsmall: 1.2rem;
81
+ --wb-font-body-size-small: 1.4rem;
82
+ --wb-font-body-size-medium: 1.6rem;
83
+ --wb-font-body-lineHeight-xsmall: 1.6rem;
84
+ --wb-font-body-lineHeight-small: 1.8rem;
85
+ --wb-font-body-lineHeight-medium: 2rem;
86
+ --wb-font-body-lineHeight-large: 2.2rem;
87
+ --wb-font-heading-size-small: 1.2rem;
88
+ --wb-font-heading-size-medium: 2rem;
89
+ --wb-font-heading-size-large: 2.4rem;
90
+ --wb-font-heading-size-xlarge: 2.8rem;
91
+ --wb-font-heading-size-xxlarge: 3.6rem;
92
+ --wb-font-heading-lineHeight-small: 1.6rem;
93
+ --wb-font-heading-lineHeight-medium: 2.4rem;
94
+ --wb-font-heading-lineHeight-large: 2.8rem;
95
+ --wb-font-heading-lineHeight-xlarge: 3.2rem;
96
+ --wb-font-heading-lineHeight-xxlarge: 4rem;
36
97
  --wb-semanticColor-action-primary-progressive-default-border: transparent;
37
98
  --wb-semanticColor-action-primary-progressive-default-background: #1865f2;
38
99
  --wb-semanticColor-action-primary-progressive-default-foreground: #ffffff;
@@ -187,10 +248,12 @@
187
248
  --wb-sizing-size_200: 2rem;
188
249
  --wb-sizing-size_220: 2.2rem;
189
250
  --wb-sizing-size_240: 2.4rem;
251
+ --wb-sizing-size_260: 2.6rem;
190
252
  --wb-sizing-size_280: 2.8rem;
191
253
  --wb-sizing-size_320: 3.2rem;
192
254
  --wb-sizing-size_360: 3.6rem;
193
255
  --wb-sizing-size_400: 4rem;
256
+ --wb-sizing-size_440: 4.4rem;
194
257
  --wb-sizing-size_480: 4.8rem;
195
258
  --wb-sizing-size_560: 5.6rem;
196
259
  --wb-sizing-size_640: 6.4rem;
@@ -208,93 +271,134 @@
208
271
  --wb-border-width-thin: 1px;
209
272
  --wb-border-width-medium: 2px;
210
273
  --wb-border-width-thick: 4px;
274
+ --wb-font-family-sans: Plus Jakarta Sans, serif;
275
+ --wb-font-family-serif: "Noto Serif", serif;
276
+ --wb-font-family-mono: Inconsolata, monospace;
277
+ --wb-font-size-xxxLarge: 3.6rem;
278
+ --wb-font-size-xxLarge: 2.8rem;
279
+ --wb-font-size-xLarge: 2.4rem;
280
+ --wb-font-size-large: 2rem;
281
+ --wb-font-size-medium: 1.6rem;
282
+ --wb-font-size-small: 1.4rem;
283
+ --wb-font-size-xSmall: 1.2rem;
284
+ --wb-font-lineHeight-xxxLarge: 4rem;
285
+ --wb-font-lineHeight-xxLarge: 3.2rem;
286
+ --wb-font-lineHeight-xLarge: 2.8rem;
287
+ --wb-font-lineHeight-large: 2.4rem;
288
+ --wb-font-lineHeight-xMedium: 2.2rem;
289
+ --wb-font-lineHeight-medium: 2rem;
290
+ --wb-font-lineHeight-small: 1.8rem;
291
+ --wb-font-lineHeight-xSmall: 1.6rem;
292
+ --wb-font-weight-light: 300;
293
+ --wb-font-weight-regular: 400;
294
+ --wb-font-weight-medium: 500;
295
+ --wb-font-weight-semi: 600;
296
+ --wb-font-weight-bold: 700;
297
+ --wb-font-weight-black: 900;
298
+ --wb-font-body-size-xsmall: var(--wb-sizing-size_120);
299
+ --wb-font-body-size-small: var(--wb-sizing-size_140);
300
+ --wb-font-body-size-medium: var(--wb-sizing-size_160);
301
+ --wb-font-body-lineHeight-xsmall: var(--wb-sizing-size_160);
302
+ --wb-font-body-lineHeight-small: var(--wb-sizing-size_180);
303
+ --wb-font-body-lineHeight-medium: var(--wb-sizing-size_240);
304
+ --wb-font-body-lineHeight-large: 2.2rem;
305
+ --wb-font-heading-size-small: var(--wb-sizing-size_160);
306
+ --wb-font-heading-size-medium: var(--wb-sizing-size_180);
307
+ --wb-font-heading-size-large: var(--wb-sizing-size_200);
308
+ --wb-font-heading-size-xlarge: var(--wb-sizing-size_240);
309
+ --wb-font-heading-size-xxlarge: var(--wb-sizing-size_320);
310
+ --wb-font-heading-lineHeight-small: var(--wb-sizing-size_200);
311
+ --wb-font-heading-lineHeight-medium: var(--wb-sizing-size_240);
312
+ --wb-font-heading-lineHeight-large: var(--wb-sizing-size_280);
313
+ --wb-font-heading-lineHeight-xlarge: var(--wb-sizing-size_320);
314
+ --wb-font-heading-lineHeight-xxlarge: var(--wb-sizing-size_400);
211
315
  --wb-semanticColor-action-primary-progressive-default-border: #5753FA;
212
316
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
213
317
  --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;
318
+ --wb-semanticColor-action-primary-progressive-hover-border: #363498;
319
+ --wb-semanticColor-action-primary-progressive-hover-background: #363498;
216
320
  --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;
321
+ --wb-semanticColor-action-primary-progressive-press-border: #363498;
322
+ --wb-semanticColor-action-primary-progressive-press-background: #363498;
219
323
  --wb-semanticColor-action-primary-progressive-press-foreground: #FFFFFF;
220
324
  --wb-semanticColor-action-primary-destructive-default-border: #E22D2D;
221
- --wb-semanticColor-action-primary-destructive-default-background: #E22D2D;
325
+ --wb-semanticColor-action-primary-destructive-default-background: #BE2626;
222
326
  --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;
327
+ --wb-semanticColor-action-primary-destructive-hover-border: #621414;
328
+ --wb-semanticColor-action-primary-destructive-hover-background: #621414;
225
329
  --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;
330
+ --wb-semanticColor-action-primary-destructive-press-border: #621414;
331
+ --wb-semanticColor-action-primary-destructive-press-background: #621414;
228
332
  --wb-semanticColor-action-primary-destructive-press-foreground: #FFFFFF;
229
333
  --wb-semanticColor-action-primary-neutral-default-border: #8A8B90;
230
- --wb-semanticColor-action-primary-neutral-default-background: #8A8B90;
334
+ --wb-semanticColor-action-primary-neutral-default-background: #75767C;
231
335
  --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;
336
+ --wb-semanticColor-action-primary-neutral-hover-border: #35373F;
337
+ --wb-semanticColor-action-primary-neutral-hover-background: #35373F;
234
338
  --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;
339
+ --wb-semanticColor-action-primary-neutral-press-border: #35373F;
340
+ --wb-semanticColor-action-primary-neutral-press-background: #35373F;
237
341
  --wb-semanticColor-action-primary-neutral-press-foreground: #FFFFFF;
238
342
  --wb-semanticColor-action-primary-disabled-border: #E0E0E1;
239
343
  --wb-semanticColor-action-primary-disabled-background: #E0E0E1;
240
344
  --wb-semanticColor-action-primary-disabled-foreground: #B5B6B9;
241
- --wb-semanticColor-action-secondary-progressive-default-border: #5753FA;
345
+ --wb-semanticColor-action-secondary-progressive-default-border: #BFCAFF;
242
346
  --wb-semanticColor-action-secondary-progressive-default-background: #EBF1FD;
243
347
  --wb-semanticColor-action-secondary-progressive-default-foreground: #5753FA;
244
- --wb-semanticColor-action-secondary-progressive-hover-border: #4340D0;
348
+ --wb-semanticColor-action-secondary-progressive-hover-border: #6E78FF;
245
349
  --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;
350
+ --wb-semanticColor-action-secondary-progressive-hover-foreground: #5753FA;
351
+ --wb-semanticColor-action-secondary-progressive-press-border: #6E78FF;
248
352
  --wb-semanticColor-action-secondary-progressive-press-background: #DFEAFF;
249
- --wb-semanticColor-action-secondary-progressive-press-foreground: #4340D0;
353
+ --wb-semanticColor-action-secondary-progressive-press-foreground: #5753FA;
250
354
  --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;
355
+ --wb-semanticColor-action-secondary-destructive-default-background: #FEF4F4;
356
+ --wb-semanticColor-action-secondary-destructive-default-foreground: #BE2626;
357
+ --wb-semanticColor-action-secondary-destructive-hover-border: #8E1C1C;
254
358
  --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;
359
+ --wb-semanticColor-action-secondary-destructive-hover-foreground: #8E1C1C;
360
+ --wb-semanticColor-action-secondary-destructive-press-border: #8E1C1C;
257
361
  --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;
362
+ --wb-semanticColor-action-secondary-destructive-press-foreground: #8E1C1C;
363
+ --wb-semanticColor-action-secondary-neutral-default-border: #CBCBCD;
364
+ --wb-semanticColor-action-secondary-neutral-default-background: #FFFFFF;
365
+ --wb-semanticColor-action-secondary-neutral-default-foreground: #4A4C53;
262
366
  --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;
367
+ --wb-semanticColor-action-secondary-neutral-hover-background: #FFFFFF;
368
+ --wb-semanticColor-action-secondary-neutral-hover-foreground: #191918;
265
369
  --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;
370
+ --wb-semanticColor-action-secondary-neutral-press-background: #FFFFFF;
371
+ --wb-semanticColor-action-secondary-neutral-press-foreground: #191918;
268
372
  --wb-semanticColor-action-secondary-disabled-border: #CBCBCD;
269
373
  --wb-semanticColor-action-secondary-disabled-background: #EDEDEE;
270
374
  --wb-semanticColor-action-secondary-disabled-foreground: #B5B6B9;
271
375
  --wb-semanticColor-action-tertiary-progressive-default-border: transparent;
272
376
  --wb-semanticColor-action-tertiary-progressive-default-background: transparent;
273
377
  --wb-semanticColor-action-tertiary-progressive-default-foreground: #5753FA;
274
- --wb-semanticColor-action-tertiary-progressive-hover-border: #4340D0;
378
+ --wb-semanticColor-action-tertiary-progressive-hover-border: #363498;
275
379
  --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;
380
+ --wb-semanticColor-action-tertiary-progressive-hover-foreground: #363498;
381
+ --wb-semanticColor-action-tertiary-progressive-press-border: #363498;
278
382
  --wb-semanticColor-action-tertiary-progressive-press-background: transparent;
279
- --wb-semanticColor-action-tertiary-progressive-press-foreground: #4340D0;
383
+ --wb-semanticColor-action-tertiary-progressive-press-foreground: #363498;
280
384
  --wb-semanticColor-action-tertiary-destructive-default-border: transparent;
281
385
  --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;
386
+ --wb-semanticColor-action-tertiary-destructive-default-foreground: #BE2626;
387
+ --wb-semanticColor-action-tertiary-destructive-hover-border: #8E1C1C;
284
388
  --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;
389
+ --wb-semanticColor-action-tertiary-destructive-hover-foreground: #8E1C1C;
390
+ --wb-semanticColor-action-tertiary-destructive-press-border: #8E1C1C;
287
391
  --wb-semanticColor-action-tertiary-destructive-press-background: transparent;
288
- --wb-semanticColor-action-tertiary-destructive-press-foreground: #BE2626;
392
+ --wb-semanticColor-action-tertiary-destructive-press-foreground: #8E1C1C;
289
393
  --wb-semanticColor-action-tertiary-neutral-default-border: transparent;
290
394
  --wb-semanticColor-action-tertiary-neutral-default-background: transparent;
291
- --wb-semanticColor-action-tertiary-neutral-default-foreground: #75767C;
395
+ --wb-semanticColor-action-tertiary-neutral-default-foreground: #4A4C53;
292
396
  --wb-semanticColor-action-tertiary-neutral-hover-border: #4A4C53;
293
397
  --wb-semanticColor-action-tertiary-neutral-hover-background: transparent;
294
- --wb-semanticColor-action-tertiary-neutral-hover-foreground: #4A4C53;
398
+ --wb-semanticColor-action-tertiary-neutral-hover-foreground: #191918;
295
399
  --wb-semanticColor-action-tertiary-neutral-press-border: #4A4C53;
296
400
  --wb-semanticColor-action-tertiary-neutral-press-background: transparent;
297
- --wb-semanticColor-action-tertiary-neutral-press-foreground: #4A4C53;
401
+ --wb-semanticColor-action-tertiary-neutral-press-foreground: #191918;
298
402
  --wb-semanticColor-action-tertiary-disabled-border: transparent;
299
403
  --wb-semanticColor-action-tertiary-disabled-background: transparent;
300
404
  --wb-semanticColor-action-tertiary-disabled-foreground: #B5B6B9;
@@ -362,10 +466,12 @@
362
466
  --wb-sizing-size_200: 2rem;
363
467
  --wb-sizing-size_220: 2.2rem;
364
468
  --wb-sizing-size_240: 2.4rem;
469
+ --wb-sizing-size_260: 2.6rem;
365
470
  --wb-sizing-size_280: 2.8rem;
366
471
  --wb-sizing-size_320: 3.2rem;
367
472
  --wb-sizing-size_360: 3.6rem;
368
473
  --wb-sizing-size_400: 4rem;
474
+ --wb-sizing-size_440: 4.4rem;
369
475
  --wb-sizing-size_480: 4.8rem;
370
476
  --wb-sizing-size_560: 5.6rem;
371
477
  --wb-sizing-size_640: 6.4rem;
package/dist/css/vars.css CHANGED
@@ -7,6 +7,47 @@
7
7
  --wb-border-width-thin: 1px;
8
8
  --wb-border-width-medium: 2px;
9
9
  --wb-border-width-thick: 4px;
10
+ --wb-font-family-sans: Lato, "Noto Sans", sans-serif;
11
+ --wb-font-family-serif: "Noto Serif", serif;
12
+ --wb-font-family-mono: Inconsolata, monospace;
13
+ --wb-font-size-xxxLarge: 3.6rem;
14
+ --wb-font-size-xxLarge: 2.8rem;
15
+ --wb-font-size-xLarge: 2.4rem;
16
+ --wb-font-size-large: 2rem;
17
+ --wb-font-size-medium: 1.6rem;
18
+ --wb-font-size-small: 1.4rem;
19
+ --wb-font-size-xSmall: 1.2rem;
20
+ --wb-font-lineHeight-xxxLarge: 4rem;
21
+ --wb-font-lineHeight-xxLarge: 3.2rem;
22
+ --wb-font-lineHeight-xLarge: 2.8rem;
23
+ --wb-font-lineHeight-large: 2.4rem;
24
+ --wb-font-lineHeight-xMedium: 2.2rem;
25
+ --wb-font-lineHeight-medium: 2rem;
26
+ --wb-font-lineHeight-small: 1.8rem;
27
+ --wb-font-lineHeight-xSmall: 1.6rem;
28
+ --wb-font-weight-light: 300;
29
+ --wb-font-weight-regular: 400;
30
+ --wb-font-weight-medium: 400;
31
+ --wb-font-weight-semi: 400;
32
+ --wb-font-weight-bold: 700;
33
+ --wb-font-weight-black: 900;
34
+ --wb-font-body-size-xsmall: 1.2rem;
35
+ --wb-font-body-size-small: 1.4rem;
36
+ --wb-font-body-size-medium: 1.6rem;
37
+ --wb-font-body-lineHeight-xsmall: 1.6rem;
38
+ --wb-font-body-lineHeight-small: 1.8rem;
39
+ --wb-font-body-lineHeight-medium: 2rem;
40
+ --wb-font-body-lineHeight-large: 2.2rem;
41
+ --wb-font-heading-size-small: 1.2rem;
42
+ --wb-font-heading-size-medium: 2rem;
43
+ --wb-font-heading-size-large: 2.4rem;
44
+ --wb-font-heading-size-xlarge: 2.8rem;
45
+ --wb-font-heading-size-xxlarge: 3.6rem;
46
+ --wb-font-heading-lineHeight-small: 1.6rem;
47
+ --wb-font-heading-lineHeight-medium: 2.4rem;
48
+ --wb-font-heading-lineHeight-large: 2.8rem;
49
+ --wb-font-heading-lineHeight-xlarge: 3.2rem;
50
+ --wb-font-heading-lineHeight-xxlarge: 4rem;
10
51
  --wb-semanticColor-action-primary-progressive-default-border: transparent;
11
52
  --wb-semanticColor-action-primary-progressive-default-background: #1865f2;
12
53
  --wb-semanticColor-action-primary-progressive-default-foreground: #ffffff;
@@ -161,10 +202,12 @@
161
202
  --wb-sizing-size_200: 2rem;
162
203
  --wb-sizing-size_220: 2.2rem;
163
204
  --wb-sizing-size_240: 2.4rem;
205
+ --wb-sizing-size_260: 2.6rem;
164
206
  --wb-sizing-size_280: 2.8rem;
165
207
  --wb-sizing-size_320: 3.2rem;
166
208
  --wb-sizing-size_360: 3.6rem;
167
209
  --wb-sizing-size_400: 4rem;
210
+ --wb-sizing-size_440: 4.4rem;
168
211
  --wb-sizing-size_480: 4.8rem;
169
212
  --wb-sizing-size_560: 5.6rem;
170
213
  --wb-sizing-size_640: 6.4rem;
@@ -182,93 +225,134 @@
182
225
  --wb-border-width-thin: 1px;
183
226
  --wb-border-width-medium: 2px;
184
227
  --wb-border-width-thick: 4px;
228
+ --wb-font-family-sans: Plus Jakarta Sans, serif;
229
+ --wb-font-family-serif: "Noto Serif", serif;
230
+ --wb-font-family-mono: Inconsolata, monospace;
231
+ --wb-font-size-xxxLarge: 3.6rem;
232
+ --wb-font-size-xxLarge: 2.8rem;
233
+ --wb-font-size-xLarge: 2.4rem;
234
+ --wb-font-size-large: 2rem;
235
+ --wb-font-size-medium: 1.6rem;
236
+ --wb-font-size-small: 1.4rem;
237
+ --wb-font-size-xSmall: 1.2rem;
238
+ --wb-font-lineHeight-xxxLarge: 4rem;
239
+ --wb-font-lineHeight-xxLarge: 3.2rem;
240
+ --wb-font-lineHeight-xLarge: 2.8rem;
241
+ --wb-font-lineHeight-large: 2.4rem;
242
+ --wb-font-lineHeight-xMedium: 2.2rem;
243
+ --wb-font-lineHeight-medium: 2rem;
244
+ --wb-font-lineHeight-small: 1.8rem;
245
+ --wb-font-lineHeight-xSmall: 1.6rem;
246
+ --wb-font-weight-light: 300;
247
+ --wb-font-weight-regular: 400;
248
+ --wb-font-weight-medium: 500;
249
+ --wb-font-weight-semi: 600;
250
+ --wb-font-weight-bold: 700;
251
+ --wb-font-weight-black: 900;
252
+ --wb-font-body-size-xsmall: var(--wb-sizing-size_120);
253
+ --wb-font-body-size-small: var(--wb-sizing-size_140);
254
+ --wb-font-body-size-medium: var(--wb-sizing-size_160);
255
+ --wb-font-body-lineHeight-xsmall: var(--wb-sizing-size_160);
256
+ --wb-font-body-lineHeight-small: var(--wb-sizing-size_180);
257
+ --wb-font-body-lineHeight-medium: var(--wb-sizing-size_240);
258
+ --wb-font-body-lineHeight-large: 2.2rem;
259
+ --wb-font-heading-size-small: var(--wb-sizing-size_160);
260
+ --wb-font-heading-size-medium: var(--wb-sizing-size_180);
261
+ --wb-font-heading-size-large: var(--wb-sizing-size_200);
262
+ --wb-font-heading-size-xlarge: var(--wb-sizing-size_240);
263
+ --wb-font-heading-size-xxlarge: var(--wb-sizing-size_320);
264
+ --wb-font-heading-lineHeight-small: var(--wb-sizing-size_200);
265
+ --wb-font-heading-lineHeight-medium: var(--wb-sizing-size_240);
266
+ --wb-font-heading-lineHeight-large: var(--wb-sizing-size_280);
267
+ --wb-font-heading-lineHeight-xlarge: var(--wb-sizing-size_320);
268
+ --wb-font-heading-lineHeight-xxlarge: var(--wb-sizing-size_400);
185
269
  --wb-semanticColor-action-primary-progressive-default-border: #5753FA;
186
270
  --wb-semanticColor-action-primary-progressive-default-background: #5753FA;
187
271
  --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;
272
+ --wb-semanticColor-action-primary-progressive-hover-border: #363498;
273
+ --wb-semanticColor-action-primary-progressive-hover-background: #363498;
190
274
  --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;
275
+ --wb-semanticColor-action-primary-progressive-press-border: #363498;
276
+ --wb-semanticColor-action-primary-progressive-press-background: #363498;
193
277
  --wb-semanticColor-action-primary-progressive-press-foreground: #FFFFFF;
194
278
  --wb-semanticColor-action-primary-destructive-default-border: #E22D2D;
195
- --wb-semanticColor-action-primary-destructive-default-background: #E22D2D;
279
+ --wb-semanticColor-action-primary-destructive-default-background: #BE2626;
196
280
  --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;
281
+ --wb-semanticColor-action-primary-destructive-hover-border: #621414;
282
+ --wb-semanticColor-action-primary-destructive-hover-background: #621414;
199
283
  --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;
284
+ --wb-semanticColor-action-primary-destructive-press-border: #621414;
285
+ --wb-semanticColor-action-primary-destructive-press-background: #621414;
202
286
  --wb-semanticColor-action-primary-destructive-press-foreground: #FFFFFF;
203
287
  --wb-semanticColor-action-primary-neutral-default-border: #8A8B90;
204
- --wb-semanticColor-action-primary-neutral-default-background: #8A8B90;
288
+ --wb-semanticColor-action-primary-neutral-default-background: #75767C;
205
289
  --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;
290
+ --wb-semanticColor-action-primary-neutral-hover-border: #35373F;
291
+ --wb-semanticColor-action-primary-neutral-hover-background: #35373F;
208
292
  --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;
293
+ --wb-semanticColor-action-primary-neutral-press-border: #35373F;
294
+ --wb-semanticColor-action-primary-neutral-press-background: #35373F;
211
295
  --wb-semanticColor-action-primary-neutral-press-foreground: #FFFFFF;
212
296
  --wb-semanticColor-action-primary-disabled-border: #E0E0E1;
213
297
  --wb-semanticColor-action-primary-disabled-background: #E0E0E1;
214
298
  --wb-semanticColor-action-primary-disabled-foreground: #B5B6B9;
215
- --wb-semanticColor-action-secondary-progressive-default-border: #5753FA;
299
+ --wb-semanticColor-action-secondary-progressive-default-border: #BFCAFF;
216
300
  --wb-semanticColor-action-secondary-progressive-default-background: #EBF1FD;
217
301
  --wb-semanticColor-action-secondary-progressive-default-foreground: #5753FA;
218
- --wb-semanticColor-action-secondary-progressive-hover-border: #4340D0;
302
+ --wb-semanticColor-action-secondary-progressive-hover-border: #6E78FF;
219
303
  --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;
304
+ --wb-semanticColor-action-secondary-progressive-hover-foreground: #5753FA;
305
+ --wb-semanticColor-action-secondary-progressive-press-border: #6E78FF;
222
306
  --wb-semanticColor-action-secondary-progressive-press-background: #DFEAFF;
223
- --wb-semanticColor-action-secondary-progressive-press-foreground: #4340D0;
307
+ --wb-semanticColor-action-secondary-progressive-press-foreground: #5753FA;
224
308
  --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;
309
+ --wb-semanticColor-action-secondary-destructive-default-background: #FEF4F4;
310
+ --wb-semanticColor-action-secondary-destructive-default-foreground: #BE2626;
311
+ --wb-semanticColor-action-secondary-destructive-hover-border: #8E1C1C;
228
312
  --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;
313
+ --wb-semanticColor-action-secondary-destructive-hover-foreground: #8E1C1C;
314
+ --wb-semanticColor-action-secondary-destructive-press-border: #8E1C1C;
231
315
  --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;
316
+ --wb-semanticColor-action-secondary-destructive-press-foreground: #8E1C1C;
317
+ --wb-semanticColor-action-secondary-neutral-default-border: #CBCBCD;
318
+ --wb-semanticColor-action-secondary-neutral-default-background: #FFFFFF;
319
+ --wb-semanticColor-action-secondary-neutral-default-foreground: #4A4C53;
236
320
  --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;
321
+ --wb-semanticColor-action-secondary-neutral-hover-background: #FFFFFF;
322
+ --wb-semanticColor-action-secondary-neutral-hover-foreground: #191918;
239
323
  --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;
324
+ --wb-semanticColor-action-secondary-neutral-press-background: #FFFFFF;
325
+ --wb-semanticColor-action-secondary-neutral-press-foreground: #191918;
242
326
  --wb-semanticColor-action-secondary-disabled-border: #CBCBCD;
243
327
  --wb-semanticColor-action-secondary-disabled-background: #EDEDEE;
244
328
  --wb-semanticColor-action-secondary-disabled-foreground: #B5B6B9;
245
329
  --wb-semanticColor-action-tertiary-progressive-default-border: transparent;
246
330
  --wb-semanticColor-action-tertiary-progressive-default-background: transparent;
247
331
  --wb-semanticColor-action-tertiary-progressive-default-foreground: #5753FA;
248
- --wb-semanticColor-action-tertiary-progressive-hover-border: #4340D0;
332
+ --wb-semanticColor-action-tertiary-progressive-hover-border: #363498;
249
333
  --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;
334
+ --wb-semanticColor-action-tertiary-progressive-hover-foreground: #363498;
335
+ --wb-semanticColor-action-tertiary-progressive-press-border: #363498;
252
336
  --wb-semanticColor-action-tertiary-progressive-press-background: transparent;
253
- --wb-semanticColor-action-tertiary-progressive-press-foreground: #4340D0;
337
+ --wb-semanticColor-action-tertiary-progressive-press-foreground: #363498;
254
338
  --wb-semanticColor-action-tertiary-destructive-default-border: transparent;
255
339
  --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;
340
+ --wb-semanticColor-action-tertiary-destructive-default-foreground: #BE2626;
341
+ --wb-semanticColor-action-tertiary-destructive-hover-border: #8E1C1C;
258
342
  --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;
343
+ --wb-semanticColor-action-tertiary-destructive-hover-foreground: #8E1C1C;
344
+ --wb-semanticColor-action-tertiary-destructive-press-border: #8E1C1C;
261
345
  --wb-semanticColor-action-tertiary-destructive-press-background: transparent;
262
- --wb-semanticColor-action-tertiary-destructive-press-foreground: #BE2626;
346
+ --wb-semanticColor-action-tertiary-destructive-press-foreground: #8E1C1C;
263
347
  --wb-semanticColor-action-tertiary-neutral-default-border: transparent;
264
348
  --wb-semanticColor-action-tertiary-neutral-default-background: transparent;
265
- --wb-semanticColor-action-tertiary-neutral-default-foreground: #75767C;
349
+ --wb-semanticColor-action-tertiary-neutral-default-foreground: #4A4C53;
266
350
  --wb-semanticColor-action-tertiary-neutral-hover-border: #4A4C53;
267
351
  --wb-semanticColor-action-tertiary-neutral-hover-background: transparent;
268
- --wb-semanticColor-action-tertiary-neutral-hover-foreground: #4A4C53;
352
+ --wb-semanticColor-action-tertiary-neutral-hover-foreground: #191918;
269
353
  --wb-semanticColor-action-tertiary-neutral-press-border: #4A4C53;
270
354
  --wb-semanticColor-action-tertiary-neutral-press-background: transparent;
271
- --wb-semanticColor-action-tertiary-neutral-press-foreground: #4A4C53;
355
+ --wb-semanticColor-action-tertiary-neutral-press-foreground: #191918;
272
356
  --wb-semanticColor-action-tertiary-disabled-border: transparent;
273
357
  --wb-semanticColor-action-tertiary-disabled-background: transparent;
274
358
  --wb-semanticColor-action-tertiary-disabled-foreground: #B5B6B9;
@@ -336,10 +420,12 @@
336
420
  --wb-sizing-size_200: 2rem;
337
421
  --wb-sizing-size_220: 2.2rem;
338
422
  --wb-sizing-size_240: 2.4rem;
423
+ --wb-sizing-size_260: 2.6rem;
339
424
  --wb-sizing-size_280: 2.8rem;
340
425
  --wb-sizing-size_320: 3.2rem;
341
426
  --wb-sizing-size_360: 3.6rem;
342
427
  --wb-sizing-size_400: 4rem;
428
+ --wb-sizing-size_440: 4.4rem;
343
429
  --wb-sizing-size_480: 4.8rem;
344
430
  --wb-sizing-size_560: 5.6rem;
345
431
  --wb-sizing-size_640: 6.4rem;
package/dist/es/index.js CHANGED
@@ -2,28 +2,28 @@ const color6Regexp=/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;const color3Reg
2
2
 
3
3
  const offBlack="#21242c";const white="#ffffff";const eggplant="#5f1e5c";const baseColors={blue:"#1865f2",purple:"#9059ff",green:"#00a60e",gold:"#ffb100",red:"#d92916",offBlack,offBlack64:fade(offBlack,.64),offBlack50:fade(offBlack,.5),offBlack32:fade(offBlack,.32),offBlack16:fade(offBlack,.16),offBlack8:fade(offBlack,.08),offWhite:"#f7f8fa",white,white64:fade(white,.64),white50:fade(white,.5),white32:fade(white,.32),darkBlue:"#0b2149",teal:"#14bf96"};const fadedColorWithWhite=(color,alpha)=>mix(fade(color,alpha),baseColors.white);const color={...baseColors,activeBlue:mix(baseColors.offBlack32,baseColors.blue),fadedBlue:fadedColorWithWhite(baseColors.blue,.32),fadedBlue24:fadedColorWithWhite(baseColors.blue,.24),fadedBlue16:fadedColorWithWhite(baseColors.blue,.16),fadedBlue8:fadedColorWithWhite(baseColors.blue,.08),activeRed:mix(baseColors.offBlack32,baseColors.red),fadedRed:fadedColorWithWhite(baseColors.red,.32),fadedRed24:fadedColorWithWhite(baseColors.red,.24),fadedRed16:fadedColorWithWhite(baseColors.red,.16),fadedRed8:fadedColorWithWhite(baseColors.red,.08),fadedGreen24:fadedColorWithWhite(baseColors.green,.24),fadedGreen16:fadedColorWithWhite(baseColors.green,.16),fadedGreen8:fadedColorWithWhite(baseColors.green,.08),fadedGold24:fadedColorWithWhite(baseColors.gold,.24),fadedGold16:fadedColorWithWhite(baseColors.gold,.16),fadedGold8:fadedColorWithWhite(baseColors.gold,.08),fadedPurple24:fadedColorWithWhite(baseColors.purple,.24),fadedPurple16:fadedColorWithWhite(baseColors.purple,.16),fadedPurple8:fadedColorWithWhite(baseColors.purple,.08),eggplant:eggplant,fadedEggplant8:fadedColorWithWhite(eggplant,.08),fadedOffBlack72:fadedColorWithWhite(offBlack,.72),fadedOffBlack64:fadedColorWithWhite(offBlack,.64),fadedOffBlack50:fadedColorWithWhite(offBlack,.5),fadedOffBlack32:fadedColorWithWhite(offBlack,.32),fadedOffBlack16:fadedColorWithWhite(offBlack,.16),fadedOffBlack8:fadedColorWithWhite(offBlack,.08)};
4
4
 
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
-
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)};
8
-
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
-
11
5
  const spacing={xxxxSmall_2:2,xxxSmall_4:4,xxSmall_6:6,xSmall_8:8,small_12:12,medium_16:16,large_24:24,xLarge_32:32,xxLarge_48:48,xxxLarge_64:64};
12
6
 
13
7
  const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.xl */`,xsOrSmaller:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xsOrSmaller */`,smOrSmaller:`@media screen and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.smOrSmaller */`,mdOrSmaller:`@media screen and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.mdOrSmaller */`,lgOrSmaller:`@media screen and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrSmaller */`,smOrLarger:`@media screen and (min-width: ${width.smMin}px) /* breakpoint.mediaQuery.smOrLarger */`,mdOrLarger:`@media screen and (min-width: ${width.mdMin}px) /* breakpoint.mediaQuery.mdOrLarger */`,lgOrLarger:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrLarger */`};const breakpoint={width,mediaQuery};
14
8
 
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
+
15
11
  function mapValuesToCssVars(obj,prefix="--wb-"){const cssVars={};for(const key in obj){if(typeof obj[key]==="object"){cssVars[key]=mapValuesToCssVars(obj[key],`${prefix}${key}-`);}else {cssVars[key]=`var(${prefix}${key})`;}}return cssVars}
16
12
 
17
13
  const CSS_VAR_PREFIX="--wb-";
18
14
 
15
+ 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)};
16
+
17
+ const fontFamily={sans:'Lato, "Noto Sans", sans-serif',serif:'"Noto Serif", serif',mono:"Inconsolata, monospace"};const fontWeight={light:300,regular:400,semi:400,bold:700,black:900};const font$1={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,medium:fontWeight.regular,semi:fontWeight.regular,bold:fontWeight.bold,black:fontWeight.black},body:{size:{xsmall:sizing$1.size_120,small:sizing$1.size_140,medium:sizing$1.size_160},lineHeight:{xsmall:sizing$1.size_160,small:sizing$1.size_180,medium:sizing$1.size_200,large:sizing$1.size_220}},heading:{size:{small:sizing$1.size_120,medium:sizing$1.size_200,large:sizing$1.size_240,xlarge:sizing$1.size_280,xxlarge:sizing$1.size_360},lineHeight:{small:sizing$1.size_160,medium:sizing$1.size_240,large:sizing$1.size_280,xlarge:sizing$1.size_320,xxlarge:sizing$1.size_400}}};
18
+
19
19
  const border$2={primary:color.fadedOffBlack16,subtle:color.fadedOffBlack8,strong:color.fadedOffBlack50,inverse:color.white,progressive:color.blue,destructive:color.red};const surface={primary:color.white,secondary:color.offWhite,emphasis:color.blue,inverse:color.darkBlue,overlay:color.offBlack64};const text={primary:color.offBlack,secondary:color.fadedOffBlack72,disabled:color.fadedOffBlack32,inverse:color.white};const semanticColor$1={action:{primary:{progressive:{default:{border:"transparent",background:color.blue,foreground:text.inverse},hover:{border:border$2.progressive,background:color.blue,foreground:text.inverse},press:{border:color.activeBlue,background:color.activeBlue,foreground:text.inverse}},destructive:{default:{border:"transparent",background:color.red,foreground:text.inverse},hover:{border:border$2.destructive,background:color.red,foreground:text.inverse},press:{border:color.activeRed,background:color.activeRed,foreground:text.inverse}},neutral:{default:{border:"transparent",background:color.fadedOffBlack72,foreground:text.inverse},hover:{border:color.fadedOffBlack72,background:color.fadedOffBlack72,foreground:text.inverse},press:{border:color.offBlack,background:color.offBlack,foreground:text.inverse}},disabled:{border:color.fadedOffBlack32,background:color.fadedOffBlack32,foreground:color.offWhite}},secondary:{progressive:{default:{border:border$2.strong,background:"transparent",foreground:color.blue},hover:{border:border$2.progressive,background:"transparent",foreground:color.blue},press:{border:color.activeBlue,background:color.fadedBlue,foreground:color.activeBlue}},destructive:{default:{border:border$2.strong,background:"transparent",foreground:color.red},hover:{border:border$2.destructive,background:"transparent",foreground:color.red},press:{border:color.activeRed,background:color.fadedRed,foreground:color.activeRed}},neutral:{default:{border:border$2.strong,background:"transparent",foreground:text.secondary},hover:{border:color.fadedOffBlack72,background:"transparent",foreground:text.secondary},press:{border:color.offBlack,background:color.offBlack16,foreground:text.primary}},disabled:{border:color.fadedOffBlack32,background:"transparent",foreground:text.disabled}},tertiary:{progressive:{default:{border:"transparent",background:"transparent",foreground:color.blue},hover:{border:border$2.progressive,background:"transparent",foreground:color.blue},press:{border:color.activeBlue,background:"transparent",foreground:color.activeBlue}},destructive:{default:{border:"transparent",background:"transparent",foreground:color.red},hover:{border:border$2.destructive,background:"transparent",foreground:color.red},press:{border:color.activeRed,background:"transparent",foreground:color.activeRed}},neutral:{default:{border:"transparent",background:"transparent",foreground:text.secondary},hover:{border:color.fadedOffBlack72,background:"transparent",foreground:text.secondary},press:{border:color.offBlack,background:"transparent",foreground:text.primary}},disabled:{border:border$2.primary,background:"transparent",foreground:text.disabled}}},input:{default:{border:border$2.strong,background:surface.primary,foreground:text.primary,placeholder:text.secondary},checked:{border:border$2.progressive,background:color.blue,foreground:text.inverse},disabled:{border:border$2.primary,background:color.offWhite,foreground:text.secondary,placeholder:text.secondary},error:{border:border$2.destructive,background:color.fadedRed8,foreground:text.primary}},status:{critical:{background:color.fadedRed8,foreground:color.red},warning:{background:color.fadedGold8,foreground:color.gold},success:{background:color.fadedGreen8,foreground:color.green},notice:{background:color.fadedBlue8,foreground:color.blue},neutral:{background:color.fadedOffBlack8,foreground:text.primary}},surface,text,border:border$2,focus:{outer:color.blue,inner:color.white},icon:{primary:color.fadedOffBlack72,secondary:color.offBlack,inverse:color.white,action:color.blue,destructive:color.red,disabled:color.fadedOffBlack32},khanmigo:{primary:color.eggplant,secondary:color.fadedEggplant8},mastery:{primary:color.purple}};
20
20
 
21
21
  const border$1={radius:{radius_0:remToPx(sizing$1.size_0),radius_040:remToPx(sizing$1.size_040),radius_080:remToPx(sizing$1.size_080),radius_120:remToPx(sizing$1.size_120),radius_full:"50%"},width:{none:remToPx(sizing$1.size_0),thin:remToPx(sizing$1.size_010),medium:remToPx(sizing$1.size_020),thick:remToPx(sizing$1.size_040)}};
22
22
 
23
- var themeDefault = {border: border$1,semanticColor: semanticColor$1,sizing: sizing$1};
23
+ var themeDefault = {border: border$1,font: font$1,semanticColor: semanticColor$1,sizing: sizing$1};
24
24
 
25
25
  var theme = mapValuesToCssVars(themeDefault,CSS_VAR_PREFIX);
26
26
 
27
- const {border,semanticColor,sizing}=theme;
27
+ const {border,semanticColor,sizing,font}=theme;
28
28
 
29
29
  export { border, breakpoint, color, fade, font, mapValuesToCssVars, mix, pxToRem, remToPx, semanticColor, sizing, spacing };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import { color } from "./tokens/color";
2
- import { font } from "./tokens/font";
3
2
  import { spacing } from "./tokens/spacing";
4
3
  import { breakpoint } from "./tokens/media-queries";
5
4
  import { mix, fade, pxToRem, remToPx } from "./util";
@@ -296,10 +295,12 @@ declare const border: {
296
295
  readonly size_200: string;
297
296
  readonly size_220: string;
298
297
  readonly size_240: string;
298
+ readonly size_260: string;
299
299
  readonly size_280: string;
300
300
  readonly size_320: string;
301
301
  readonly size_360: string;
302
302
  readonly size_400: string;
303
+ readonly size_440: string;
303
304
  readonly size_480: string;
304
305
  readonly size_560: string;
305
306
  readonly size_640: string;
@@ -307,6 +308,68 @@ declare const border: {
307
308
  readonly size_800: string;
308
309
  readonly size_880: string;
309
310
  readonly size_960: string;
311
+ }, font: {
312
+ family: {
313
+ sans: string;
314
+ serif: string;
315
+ mono: string;
316
+ };
317
+ size: {
318
+ xxxLarge: string;
319
+ xxLarge: string;
320
+ xLarge: string;
321
+ large: string;
322
+ medium: string;
323
+ small: string;
324
+ xSmall: string;
325
+ };
326
+ lineHeight: {
327
+ xxxLarge: string;
328
+ xxLarge: string;
329
+ xLarge: string;
330
+ large: string;
331
+ xMedium: string;
332
+ medium: string;
333
+ small: string;
334
+ xSmall: string;
335
+ };
336
+ weight: {
337
+ light: number;
338
+ regular: number;
339
+ medium: number;
340
+ semi: number;
341
+ bold: number;
342
+ black: number;
343
+ };
344
+ body: {
345
+ size: {
346
+ xsmall: string;
347
+ small: string;
348
+ medium: string;
349
+ };
350
+ lineHeight: {
351
+ xsmall: string;
352
+ small: string;
353
+ medium: string;
354
+ large: string;
355
+ };
356
+ };
357
+ heading: {
358
+ size: {
359
+ small: string;
360
+ medium: string;
361
+ large: string;
362
+ xlarge: string;
363
+ xxlarge: string;
364
+ };
365
+ lineHeight: {
366
+ small: string;
367
+ medium: string;
368
+ large: string;
369
+ xlarge: string;
370
+ xxlarge: string;
371
+ };
372
+ };
310
373
  };
311
374
  export {
312
375
  /**
package/dist/index.js CHANGED
@@ -6,29 +6,29 @@ const color6Regexp=/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;const color3Reg
6
6
 
7
7
  const offBlack="#21242c";const white="#ffffff";const eggplant="#5f1e5c";const baseColors={blue:"#1865f2",purple:"#9059ff",green:"#00a60e",gold:"#ffb100",red:"#d92916",offBlack,offBlack64:fade(offBlack,.64),offBlack50:fade(offBlack,.5),offBlack32:fade(offBlack,.32),offBlack16:fade(offBlack,.16),offBlack8:fade(offBlack,.08),offWhite:"#f7f8fa",white,white64:fade(white,.64),white50:fade(white,.5),white32:fade(white,.32),darkBlue:"#0b2149",teal:"#14bf96"};const fadedColorWithWhite=(color,alpha)=>mix(fade(color,alpha),baseColors.white);const color={...baseColors,activeBlue:mix(baseColors.offBlack32,baseColors.blue),fadedBlue:fadedColorWithWhite(baseColors.blue,.32),fadedBlue24:fadedColorWithWhite(baseColors.blue,.24),fadedBlue16:fadedColorWithWhite(baseColors.blue,.16),fadedBlue8:fadedColorWithWhite(baseColors.blue,.08),activeRed:mix(baseColors.offBlack32,baseColors.red),fadedRed:fadedColorWithWhite(baseColors.red,.32),fadedRed24:fadedColorWithWhite(baseColors.red,.24),fadedRed16:fadedColorWithWhite(baseColors.red,.16),fadedRed8:fadedColorWithWhite(baseColors.red,.08),fadedGreen24:fadedColorWithWhite(baseColors.green,.24),fadedGreen16:fadedColorWithWhite(baseColors.green,.16),fadedGreen8:fadedColorWithWhite(baseColors.green,.08),fadedGold24:fadedColorWithWhite(baseColors.gold,.24),fadedGold16:fadedColorWithWhite(baseColors.gold,.16),fadedGold8:fadedColorWithWhite(baseColors.gold,.08),fadedPurple24:fadedColorWithWhite(baseColors.purple,.24),fadedPurple16:fadedColorWithWhite(baseColors.purple,.16),fadedPurple8:fadedColorWithWhite(baseColors.purple,.08),eggplant:eggplant,fadedEggplant8:fadedColorWithWhite(eggplant,.08),fadedOffBlack72:fadedColorWithWhite(offBlack,.72),fadedOffBlack64:fadedColorWithWhite(offBlack,.64),fadedOffBlack50:fadedColorWithWhite(offBlack,.5),fadedOffBlack32:fadedColorWithWhite(offBlack,.32),fadedOffBlack16:fadedColorWithWhite(offBlack,.16),fadedOffBlack8:fadedColorWithWhite(offBlack,.08)};
8
8
 
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
-
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)};
12
-
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
-
15
9
  const spacing={xxxxSmall_2:2,xxxSmall_4:4,xxSmall_6:6,xSmall_8:8,small_12:12,medium_16:16,large_24:24,xLarge_32:32,xxLarge_48:48,xxxLarge_64:64};
16
10
 
17
11
  const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.xl */`,xsOrSmaller:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xsOrSmaller */`,smOrSmaller:`@media screen and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.smOrSmaller */`,mdOrSmaller:`@media screen and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.mdOrSmaller */`,lgOrSmaller:`@media screen and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrSmaller */`,smOrLarger:`@media screen and (min-width: ${width.smMin}px) /* breakpoint.mediaQuery.smOrLarger */`,mdOrLarger:`@media screen and (min-width: ${width.mdMin}px) /* breakpoint.mediaQuery.mdOrLarger */`,lgOrLarger:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrLarger */`};const breakpoint={width,mediaQuery};
18
12
 
13
+ 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`}
14
+
19
15
  function mapValuesToCssVars(obj,prefix="--wb-"){const cssVars={};for(const key in obj){if(typeof obj[key]==="object"){cssVars[key]=mapValuesToCssVars(obj[key],`${prefix}${key}-`);}else {cssVars[key]=`var(${prefix}${key})`;}}return cssVars}
20
16
 
21
17
  const CSS_VAR_PREFIX="--wb-";
22
18
 
19
+ 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)};
20
+
21
+ const fontFamily={sans:'Lato, "Noto Sans", sans-serif',serif:'"Noto Serif", serif',mono:"Inconsolata, monospace"};const fontWeight={light:300,regular:400,semi:400,bold:700,black:900};const font$1={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,medium:fontWeight.regular,semi:fontWeight.regular,bold:fontWeight.bold,black:fontWeight.black},body:{size:{xsmall:sizing$1.size_120,small:sizing$1.size_140,medium:sizing$1.size_160},lineHeight:{xsmall:sizing$1.size_160,small:sizing$1.size_180,medium:sizing$1.size_200,large:sizing$1.size_220}},heading:{size:{small:sizing$1.size_120,medium:sizing$1.size_200,large:sizing$1.size_240,xlarge:sizing$1.size_280,xxlarge:sizing$1.size_360},lineHeight:{small:sizing$1.size_160,medium:sizing$1.size_240,large:sizing$1.size_280,xlarge:sizing$1.size_320,xxlarge:sizing$1.size_400}}};
22
+
23
23
  const border$2={primary:color.fadedOffBlack16,subtle:color.fadedOffBlack8,strong:color.fadedOffBlack50,inverse:color.white,progressive:color.blue,destructive:color.red};const surface={primary:color.white,secondary:color.offWhite,emphasis:color.blue,inverse:color.darkBlue,overlay:color.offBlack64};const text={primary:color.offBlack,secondary:color.fadedOffBlack72,disabled:color.fadedOffBlack32,inverse:color.white};const semanticColor$1={action:{primary:{progressive:{default:{border:"transparent",background:color.blue,foreground:text.inverse},hover:{border:border$2.progressive,background:color.blue,foreground:text.inverse},press:{border:color.activeBlue,background:color.activeBlue,foreground:text.inverse}},destructive:{default:{border:"transparent",background:color.red,foreground:text.inverse},hover:{border:border$2.destructive,background:color.red,foreground:text.inverse},press:{border:color.activeRed,background:color.activeRed,foreground:text.inverse}},neutral:{default:{border:"transparent",background:color.fadedOffBlack72,foreground:text.inverse},hover:{border:color.fadedOffBlack72,background:color.fadedOffBlack72,foreground:text.inverse},press:{border:color.offBlack,background:color.offBlack,foreground:text.inverse}},disabled:{border:color.fadedOffBlack32,background:color.fadedOffBlack32,foreground:color.offWhite}},secondary:{progressive:{default:{border:border$2.strong,background:"transparent",foreground:color.blue},hover:{border:border$2.progressive,background:"transparent",foreground:color.blue},press:{border:color.activeBlue,background:color.fadedBlue,foreground:color.activeBlue}},destructive:{default:{border:border$2.strong,background:"transparent",foreground:color.red},hover:{border:border$2.destructive,background:"transparent",foreground:color.red},press:{border:color.activeRed,background:color.fadedRed,foreground:color.activeRed}},neutral:{default:{border:border$2.strong,background:"transparent",foreground:text.secondary},hover:{border:color.fadedOffBlack72,background:"transparent",foreground:text.secondary},press:{border:color.offBlack,background:color.offBlack16,foreground:text.primary}},disabled:{border:color.fadedOffBlack32,background:"transparent",foreground:text.disabled}},tertiary:{progressive:{default:{border:"transparent",background:"transparent",foreground:color.blue},hover:{border:border$2.progressive,background:"transparent",foreground:color.blue},press:{border:color.activeBlue,background:"transparent",foreground:color.activeBlue}},destructive:{default:{border:"transparent",background:"transparent",foreground:color.red},hover:{border:border$2.destructive,background:"transparent",foreground:color.red},press:{border:color.activeRed,background:"transparent",foreground:color.activeRed}},neutral:{default:{border:"transparent",background:"transparent",foreground:text.secondary},hover:{border:color.fadedOffBlack72,background:"transparent",foreground:text.secondary},press:{border:color.offBlack,background:"transparent",foreground:text.primary}},disabled:{border:border$2.primary,background:"transparent",foreground:text.disabled}}},input:{default:{border:border$2.strong,background:surface.primary,foreground:text.primary,placeholder:text.secondary},checked:{border:border$2.progressive,background:color.blue,foreground:text.inverse},disabled:{border:border$2.primary,background:color.offWhite,foreground:text.secondary,placeholder:text.secondary},error:{border:border$2.destructive,background:color.fadedRed8,foreground:text.primary}},status:{critical:{background:color.fadedRed8,foreground:color.red},warning:{background:color.fadedGold8,foreground:color.gold},success:{background:color.fadedGreen8,foreground:color.green},notice:{background:color.fadedBlue8,foreground:color.blue},neutral:{background:color.fadedOffBlack8,foreground:text.primary}},surface,text,border:border$2,focus:{outer:color.blue,inner:color.white},icon:{primary:color.fadedOffBlack72,secondary:color.offBlack,inverse:color.white,action:color.blue,destructive:color.red,disabled:color.fadedOffBlack32},khanmigo:{primary:color.eggplant,secondary:color.fadedEggplant8},mastery:{primary:color.purple}};
24
24
 
25
25
  const border$1={radius:{radius_0:remToPx(sizing$1.size_0),radius_040:remToPx(sizing$1.size_040),radius_080:remToPx(sizing$1.size_080),radius_120:remToPx(sizing$1.size_120),radius_full:"50%"},width:{none:remToPx(sizing$1.size_0),thin:remToPx(sizing$1.size_010),medium:remToPx(sizing$1.size_020),thick:remToPx(sizing$1.size_040)}};
26
26
 
27
- var themeDefault = {border: border$1,semanticColor: semanticColor$1,sizing: sizing$1};
27
+ var themeDefault = {border: border$1,font: font$1,semanticColor: semanticColor$1,sizing: sizing$1};
28
28
 
29
29
  var theme = mapValuesToCssVars(themeDefault,CSS_VAR_PREFIX);
30
30
 
31
- const {border,semanticColor,sizing}=theme;
31
+ const {border,semanticColor,sizing,font}=theme;
32
32
 
33
33
  exports.border = border;
34
34
  exports.breakpoint = breakpoint;
package/dist/internal/generate-tokens.d.ts CHANGED
@@ -4,4 +4,4 @@
4
4
  * @param root The root object containing the theme tokens.
5
5
  * @returns A record of CSS variables.
6
6
  */
7
- export declare function generateTokens<T>(root: T, prefix?: string): Record<string, string>;
7
+ export declare function generateTokens<T>(root: T, prefix?: string): Record<string, string | number>;
package/dist/theme/default.d.ts CHANGED
@@ -23,6 +23,69 @@ declare const _default: {
23
23
  thick: string;
24
24
  };
25
25
  };
26
+ font: {
27
+ family: {
28
+ sans: string;
29
+ serif: string;
30
+ mono: string;
31
+ };
32
+ size: {
33
+ xxxLarge: string;
34
+ xxLarge: string;
35
+ xLarge: string;
36
+ large: string;
37
+ medium: string;
38
+ small: string;
39
+ xSmall: string;
40
+ };
41
+ lineHeight: {
42
+ xxxLarge: string;
43
+ xxLarge: string;
44
+ xLarge: string;
45
+ large: string;
46
+ xMedium: string;
47
+ medium: string;
48
+ small: string;
49
+ xSmall: string;
50
+ };
51
+ weight: {
52
+ light: number;
53
+ regular: number;
54
+ medium: number;
55
+ semi: number;
56
+ bold: number;
57
+ black: number;
58
+ };
59
+ body: {
60
+ size: {
61
+ xsmall: string;
62
+ small: string;
63
+ medium: string;
64
+ };
65
+ lineHeight: {
66
+ xsmall: string;
67
+ small: string;
68
+ medium: string;
69
+ large: string;
70
+ };
71
+ };
72
+ heading: {
73
+ size: {
74
+ small: string;
75
+ medium: string;
76
+ large: string;
77
+ xlarge: string;
78
+ xxlarge: string;
79
+ };
80
+ lineHeight: {
81
+ small: string;
82
+ medium: string;
83
+ large: string;
84
+ xlarge: string;
85
+ xxlarge: string;
86
+ };
87
+ };
88
+ };
26
89
  semanticColor: {
27
90
  action: {
28
91
  primary: {
@@ -302,10 +365,12 @@ declare const _default: {
302
365
  readonly size_200: string;
303
366
  readonly size_220: string;
304
367
  readonly size_240: string;
368
+ readonly size_260: string;
305
369
  readonly size_280: string;
306
370
  readonly size_320: string;
307
371
  readonly size_360: string;
308
372
  readonly size_400: string;
373
+ readonly size_440: string;
309
374
  readonly size_480: string;
310
375
  readonly size_560: string;
311
376
  readonly size_640: string;
package/dist/{tokens → theme/primitive}/font.d.ts RENAMED
@@ -6,6 +6,7 @@ export declare const fontFamily: {
6
6
  export declare const fontWeight: {
7
7
  light: number;
8
8
  regular: number;
9
+ semi: number;
9
10
  bold: number;
10
11
  black: number;
11
12
  };
@@ -37,7 +38,38 @@ export declare const font: {
37
38
  weight: {
38
39
  light: number;
39
40
  regular: number;
41
+ medium: number;
42
+ semi: number;
40
43
  bold: number;
41
44
  black: number;
42
45
  };
46
+ body: {
47
+ size: {
48
+ xsmall: string;
49
+ small: string;
50
+ medium: string;
51
+ };
52
+ lineHeight: {
53
+ xsmall: string;
54
+ small: string;
55
+ medium: string;
56
+ large: string;
57
+ };
58
+ };
59
+ heading: {
60
+ size: {
61
+ small: string;
62
+ medium: string;
63
+ large: string;
64
+ xlarge: string;
65
+ xxlarge: string;
66
+ };
67
+ lineHeight: {
68
+ small: string;
69
+ medium: string;
70
+ large: string;
71
+ xlarge: string;
72
+ xxlarge: string;
73
+ };
74
+ };
43
75
  };
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/semantic/internal/primitive-font-thunderblocks.d.ts ADDED
@@ -0,0 +1,73 @@
1
+ export declare const fontFamily: {
2
+ sans: string;
3
+ };
4
+ export declare const fontWeight: {
5
+ light: number;
6
+ medium: number;
7
+ semi: number;
8
+ bold: number;
9
+ black: number;
10
+ };
11
+ export declare const font: {
12
+ family: {
13
+ sans: string;
14
+ serif: string;
15
+ mono: string;
16
+ };
17
+ size: {
18
+ xxxLarge: string;
19
+ xxLarge: string;
20
+ xLarge: string;
21
+ large: string;
22
+ medium: string;
23
+ small: string;
24
+ xSmall: string;
25
+ };
26
+ lineHeight: {
27
+ xxxLarge: string;
28
+ xxLarge: string;
29
+ xLarge: string;
30
+ large: string;
31
+ xMedium: string;
32
+ medium: string;
33
+ small: string;
34
+ xSmall: string;
35
+ };
36
+ weight: {
37
+ light: number;
38
+ regular: number;
39
+ medium: number;
40
+ semi: number;
41
+ bold: number;
42
+ black: number;
43
+ };
44
+ body: {
45
+ size: {
46
+ xsmall: string;
47
+ small: string;
48
+ medium: string;
49
+ };
50
+ lineHeight: {
51
+ xsmall: string;
52
+ small: string;
53
+ medium: string;
54
+ large: string;
55
+ };
56
+ };
57
+ heading: {
58
+ size: {
59
+ small: string;
60
+ medium: string;
61
+ large: string;
62
+ xlarge: string;
63
+ xxlarge: string;
64
+ };
65
+ lineHeight: {
66
+ small: string;
67
+ medium: string;
68
+ large: string;
69
+ xlarge: string;
70
+ xxlarge: string;
71
+ };
72
+ };
73
+ };
package/dist/theme/thunderblocks.d.ts CHANGED
@@ -14,6 +14,69 @@ declare const _default: {
14
14
  thick: string;
15
15
  };
16
16
  };
17
+ font: {
18
+ family: {
19
+ sans: string;
20
+ serif: string;
21
+ mono: string;
22
+ };
23
+ size: {
24
+ xxxLarge: string;
25
+ xxLarge: string;
26
+ xLarge: string;
27
+ large: string;
28
+ medium: string;
29
+ small: string;
30
+ xSmall: string;
31
+ };
32
+ lineHeight: {
33
+ xxxLarge: string;
34
+ xxLarge: string;
35
+ xLarge: string;
36
+ large: string;
37
+ xMedium: string;
38
+ medium: string;
39
+ small: string;
40
+ xSmall: string;
41
+ };
42
+ weight: {
43
+ light: number;
44
+ regular: number;
45
+ medium: number;
46
+ semi: number;
47
+ bold: number;
48
+ black: number;
49
+ };
50
+ body: {
51
+ size: {
52
+ xsmall: string;
53
+ small: string;
54
+ medium: string;
55
+ };
56
+ lineHeight: {
57
+ xsmall: string;
58
+ small: string;
59
+ medium: string;
60
+ large: string;
61
+ };
62
+ };
63
+ heading: {
64
+ size: {
65
+ small: string;
66
+ medium: string;
67
+ large: string;
68
+ xlarge: string;
69
+ xxlarge: string;
70
+ };
71
+ lineHeight: {
72
+ small: string;
73
+ medium: string;
74
+ large: string;
75
+ xlarge: string;
76
+ xxlarge: string;
77
+ };
78
+ };
79
+ };
17
80
  semanticColor: {
18
81
  action: {
19
82
  primary: {
@@ -293,10 +356,12 @@ declare const _default: {
293
356
  readonly size_200: string;
294
357
  readonly size_220: string;
295
358
  readonly size_240: string;
359
+ readonly size_260: string;
296
360
  readonly size_280: string;
297
361
  readonly size_320: string;
298
362
  readonly size_360: string;
299
363
  readonly size_400: string;
364
+ readonly size_440: string;
300
365
  readonly size_480: string;
301
366
  readonly size_560: string;
302
367
  readonly size_640: string;
package/dist/tokens/theme.d.ts CHANGED
@@ -14,6 +14,69 @@ declare const _default: {
14
14
  thick: string;
15
15
  };
16
16
  };
17
+ font: {
18
+ family: {
19
+ sans: string;
20
+ serif: string;
21
+ mono: string;
22
+ };
23
+ size: {
24
+ xxxLarge: string;
25
+ xxLarge: string;
26
+ xLarge: string;
27
+ large: string;
28
+ medium: string;
29
+ small: string;
30
+ xSmall: string;
31
+ };
32
+ lineHeight: {
33
+ xxxLarge: string;
34
+ xxLarge: string;
35
+ xLarge: string;
36
+ large: string;
37
+ xMedium: string;
38
+ medium: string;
39
+ small: string;
40
+ xSmall: string;
41
+ };
42
+ weight: {
43
+ light: number;
44
+ regular: number;
45
+ medium: number;
46
+ semi: number;
47
+ bold: number;
48
+ black: number;
49
+ };
50
+ body: {
51
+ size: {
52
+ xsmall: string;
53
+ small: string;
54
+ medium: string;
55
+ };
56
+ lineHeight: {
57
+ xsmall: string;
58
+ small: string;
59
+ medium: string;
60
+ large: string;
61
+ };
62
+ };
63
+ heading: {
64
+ size: {
65
+ small: string;
66
+ medium: string;
67
+ large: string;
68
+ xlarge: string;
69
+ xxlarge: string;
70
+ };
71
+ lineHeight: {
72
+ small: string;
73
+ medium: string;
74
+ large: string;
75
+ xlarge: string;
76
+ xxlarge: string;
77
+ };
78
+ };
79
+ };
17
80
  semanticColor: {
18
81
  action: {
19
82
  primary: {
@@ -293,10 +356,12 @@ declare const _default: {
293
356
  readonly size_200: string;
294
357
  readonly size_220: string;
295
358
  readonly size_240: string;
359
+ readonly size_260: string;
296
360
  readonly size_280: string;
297
361
  readonly size_320: string;
298
362
  readonly size_360: string;
299
363
  readonly size_400: string;
364
+ readonly size_440: string;
300
365
  readonly size_480: string;
301
366
  readonly size_560: string;
302
367
  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.3.0",
4
4
  "description": "Core primitive design tokens for Web Wonder Blocks",
5
5
  "exports": {
6
6
  ".": {
@@ -22,7 +22,7 @@
22
22
  "@khanacademy/wonder-blocks-theming": "3.4.0"
23
23
  },
24
24
  "devDependencies": {
25
- "@khanacademy/wb-dev-build-settings": "3.1.0"
25
+ "@khanacademy/wb-dev-build-settings": "3.2.0"
26
26
  },
27
27
  "bin": "./bin/cli.js",
28
28
  "scripts": {