@khanacademy/wonder-blocks-tokens 16.8.0 → 17.0.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.
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-tokens@16.8.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
2
+ > @khanacademy/wonder-blocks-tokens@17.0.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,18 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 17.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 9d8e5e3: Remove the deprecated legacy `font.size.*` and `font.lineHeight.*` token scales.
8
+ Use `font.body.*` / `font.heading.*` for typography.
9
+
10
+ ## 16.8.1
11
+
12
+ ### Patch Changes
13
+
14
+ - 0735aef: Add `Helvetica` and `Corbel` fallback fonts to the `default` theme's `font.family.sans` token
15
+
3
16
  ## 16.8.0
4
17
 
5
18
  ### Minor Changes
@@ -94,10 +94,10 @@
94
94
  --wb-c-button-root-layout-padding-inline-tertiary-small: var(--wb-sizing-size_0);
95
95
  --wb-c-button-root-layout-padding-inline-tertiary-medium: var(--wb-sizing-size_0);
96
96
  --wb-c-button-root-layout-padding-inline-tertiary-large: var(--wb-sizing-size_0);
97
- --wb-c-button-root-font-size-large: 1.8rem;
98
- --wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
99
- --wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
100
- --wb-c-button-root-font-lineHeight-large: 2.6rem;
97
+ --wb-c-button-root-font-size-large: var(--wb-sizing-size_180);
98
+ --wb-c-button-root-font-lineHeight-small: var(--wb-sizing-size_220);
99
+ --wb-c-button-root-font-lineHeight-default: var(--wb-sizing-size_240);
100
+ --wb-c-button-root-font-lineHeight-large: var(--wb-sizing-size_260);
101
101
  --wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
102
102
  --wb-c-button-root-font-decoration-hover: underline;
103
103
  --wb-c-button-root-font-decoration-press: underline;
@@ -138,10 +138,10 @@
138
138
  --wb-c-button-root-layout-padding-inline-tertiary-small: var(--wb-sizing-size_080);
139
139
  --wb-c-button-root-layout-padding-inline-tertiary-medium: var(--wb-sizing-size_160);
140
140
  --wb-c-button-root-layout-padding-inline-tertiary-large: var(--wb-sizing-size_180);
141
- --wb-c-button-root-font-size-large: 1.8rem;
142
- --wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
143
- --wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
144
- --wb-c-button-root-font-lineHeight-large: 2.6rem;
141
+ --wb-c-button-root-font-size-large: var(--wb-sizing-size_180);
142
+ --wb-c-button-root-font-lineHeight-small: var(--wb-sizing-size_220);
143
+ --wb-c-button-root-font-lineHeight-default: var(--wb-sizing-size_240);
144
+ --wb-c-button-root-font-lineHeight-large: var(--wb-sizing-size_260);
145
145
  --wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
146
146
  --wb-c-button-root-font-decoration-hover: none;
147
147
  --wb-c-button-root-font-decoration-press: none;
@@ -182,10 +182,10 @@
182
182
  --wb-c-button-root-layout-padding-inline-tertiary-small: var(--wb-sizing-size_080);
183
183
  --wb-c-button-root-layout-padding-inline-tertiary-medium: var(--wb-sizing-size_160);
184
184
  --wb-c-button-root-layout-padding-inline-tertiary-large: var(--wb-sizing-size_180);
185
- --wb-c-button-root-font-size-large: 1.8rem;
186
- --wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
187
- --wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
188
- --wb-c-button-root-font-lineHeight-large: 2.6rem;
185
+ --wb-c-button-root-font-size-large: var(--wb-sizing-size_180);
186
+ --wb-c-button-root-font-lineHeight-small: var(--wb-sizing-size_220);
187
+ --wb-c-button-root-font-lineHeight-default: var(--wb-sizing-size_240);
188
+ --wb-c-button-root-font-lineHeight-large: var(--wb-sizing-size_260);
189
189
  --wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
190
190
  --wb-c-button-root-font-decoration-hover: none;
191
191
  --wb-c-button-root-font-decoration-press: none;
@@ -559,24 +559,9 @@
559
559
  --wb-boxShadow-low: 0 2px 2px 0 rgba(33,36,44,0.16);
560
560
  --wb-boxShadow-mid: 0 4px 8px 0 rgba(33,36,44,0.16);
561
561
  --wb-boxShadow-high: 0 8px 16px 0 rgba(33,36,44,0.16);
562
- --wb-font-family-sans: Lato, "Noto Sans", sans-serif;
562
+ --wb-font-family-sans: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif;
563
563
  --wb-font-family-serif: "Noto Serif", serif;
564
564
  --wb-font-family-mono: Inconsolata, monospace;
565
- --wb-font-size-xxxLarge: 3.6rem;
566
- --wb-font-size-xxLarge: 2.8rem;
567
- --wb-font-size-xLarge: 2.4rem;
568
- --wb-font-size-large: 2rem;
569
- --wb-font-size-medium: 1.6rem;
570
- --wb-font-size-small: 1.4rem;
571
- --wb-font-size-xSmall: 1.2rem;
572
- --wb-font-lineHeight-xxxLarge: 4rem;
573
- --wb-font-lineHeight-xxLarge: 3.2rem;
574
- --wb-font-lineHeight-xLarge: 2.8rem;
575
- --wb-font-lineHeight-large: 2.4rem;
576
- --wb-font-lineHeight-xMedium: 2.2rem;
577
- --wb-font-lineHeight-medium: 2rem;
578
- --wb-font-lineHeight-small: 1.8rem;
579
- --wb-font-lineHeight-xSmall: 1.6rem;
580
565
  --wb-font-weight-light: 300;
581
566
  --wb-font-weight-regular: 400;
582
567
  --wb-font-weight-medium: 400;
@@ -1077,21 +1062,6 @@
1077
1062
  --wb-font-family-sans: Plus Jakarta Sans, "Noto Sans", sans-serif;
1078
1063
  --wb-font-family-serif: "Noto Serif", serif;
1079
1064
  --wb-font-family-mono: Inconsolata, monospace;
1080
- --wb-font-size-xxxLarge: 3.6rem;
1081
- --wb-font-size-xxLarge: 2.8rem;
1082
- --wb-font-size-xLarge: 2.4rem;
1083
- --wb-font-size-large: 2rem;
1084
- --wb-font-size-medium: 1.6rem;
1085
- --wb-font-size-small: 1.4rem;
1086
- --wb-font-size-xSmall: 1.2rem;
1087
- --wb-font-lineHeight-xxxLarge: 4rem;
1088
- --wb-font-lineHeight-xxLarge: 3.2rem;
1089
- --wb-font-lineHeight-xLarge: 2.8rem;
1090
- --wb-font-lineHeight-large: 2.4rem;
1091
- --wb-font-lineHeight-xMedium: 2.2rem;
1092
- --wb-font-lineHeight-medium: 2rem;
1093
- --wb-font-lineHeight-small: 1.8rem;
1094
- --wb-font-lineHeight-xSmall: 1.6rem;
1095
1065
  --wb-font-weight-light: 300;
1096
1066
  --wb-font-weight-regular: 400;
1097
1067
  --wb-font-weight-medium: 500;
@@ -1592,21 +1562,6 @@
1592
1562
  --wb-font-family-sans: Plus Jakarta Sans, "Noto Sans", sans-serif;
1593
1563
  --wb-font-family-serif: "Noto Serif", serif;
1594
1564
  --wb-font-family-mono: Inconsolata, monospace;
1595
- --wb-font-size-xxxLarge: 3.6rem;
1596
- --wb-font-size-xxLarge: 2.8rem;
1597
- --wb-font-size-xLarge: 2.4rem;
1598
- --wb-font-size-large: 2rem;
1599
- --wb-font-size-medium: 1.6rem;
1600
- --wb-font-size-small: 1.4rem;
1601
- --wb-font-size-xSmall: 1.2rem;
1602
- --wb-font-lineHeight-xxxLarge: 4rem;
1603
- --wb-font-lineHeight-xxLarge: 3.2rem;
1604
- --wb-font-lineHeight-xLarge: 2.8rem;
1605
- --wb-font-lineHeight-large: 2.4rem;
1606
- --wb-font-lineHeight-xMedium: 2.2rem;
1607
- --wb-font-lineHeight-medium: 2rem;
1608
- --wb-font-lineHeight-small: 1.8rem;
1609
- --wb-font-lineHeight-xSmall: 1.6rem;
1610
1565
  --wb-font-weight-light: 300;
1611
1566
  --wb-font-weight-regular: 400;
1612
1567
  --wb-font-weight-medium: 500;
package/dist/css/vars.css CHANGED
@@ -12,24 +12,9 @@
12
12
  --wb-boxShadow-low: 0 2px 2px 0 rgba(33,36,44,0.16);
13
13
  --wb-boxShadow-mid: 0 4px 8px 0 rgba(33,36,44,0.16);
14
14
  --wb-boxShadow-high: 0 8px 16px 0 rgba(33,36,44,0.16);
15
- --wb-font-family-sans: Lato, "Noto Sans", sans-serif;
15
+ --wb-font-family-sans: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif;
16
16
  --wb-font-family-serif: "Noto Serif", serif;
17
17
  --wb-font-family-mono: Inconsolata, monospace;
18
- --wb-font-size-xxxLarge: 3.6rem;
19
- --wb-font-size-xxLarge: 2.8rem;
20
- --wb-font-size-xLarge: 2.4rem;
21
- --wb-font-size-large: 2rem;
22
- --wb-font-size-medium: 1.6rem;
23
- --wb-font-size-small: 1.4rem;
24
- --wb-font-size-xSmall: 1.2rem;
25
- --wb-font-lineHeight-xxxLarge: 4rem;
26
- --wb-font-lineHeight-xxLarge: 3.2rem;
27
- --wb-font-lineHeight-xLarge: 2.8rem;
28
- --wb-font-lineHeight-large: 2.4rem;
29
- --wb-font-lineHeight-xMedium: 2.2rem;
30
- --wb-font-lineHeight-medium: 2rem;
31
- --wb-font-lineHeight-small: 1.8rem;
32
- --wb-font-lineHeight-xSmall: 1.6rem;
33
18
  --wb-font-weight-light: 300;
34
19
  --wb-font-weight-regular: 400;
35
20
  --wb-font-weight-medium: 400;
@@ -530,21 +515,6 @@
530
515
  --wb-font-family-sans: Plus Jakarta Sans, "Noto Sans", sans-serif;
531
516
  --wb-font-family-serif: "Noto Serif", serif;
532
517
  --wb-font-family-mono: Inconsolata, monospace;
533
- --wb-font-size-xxxLarge: 3.6rem;
534
- --wb-font-size-xxLarge: 2.8rem;
535
- --wb-font-size-xLarge: 2.4rem;
536
- --wb-font-size-large: 2rem;
537
- --wb-font-size-medium: 1.6rem;
538
- --wb-font-size-small: 1.4rem;
539
- --wb-font-size-xSmall: 1.2rem;
540
- --wb-font-lineHeight-xxxLarge: 4rem;
541
- --wb-font-lineHeight-xxLarge: 3.2rem;
542
- --wb-font-lineHeight-xLarge: 2.8rem;
543
- --wb-font-lineHeight-large: 2.4rem;
544
- --wb-font-lineHeight-xMedium: 2.2rem;
545
- --wb-font-lineHeight-medium: 2rem;
546
- --wb-font-lineHeight-small: 1.8rem;
547
- --wb-font-lineHeight-xSmall: 1.6rem;
548
518
  --wb-font-weight-light: 300;
549
519
  --wb-font-weight-regular: 400;
550
520
  --wb-font-weight-medium: 500;
@@ -1045,21 +1015,6 @@
1045
1015
  --wb-font-family-sans: Plus Jakarta Sans, "Noto Sans", sans-serif;
1046
1016
  --wb-font-family-serif: "Noto Serif", serif;
1047
1017
  --wb-font-family-mono: Inconsolata, monospace;
1048
- --wb-font-size-xxxLarge: 3.6rem;
1049
- --wb-font-size-xxLarge: 2.8rem;
1050
- --wb-font-size-xLarge: 2.4rem;
1051
- --wb-font-size-large: 2rem;
1052
- --wb-font-size-medium: 1.6rem;
1053
- --wb-font-size-small: 1.4rem;
1054
- --wb-font-size-xSmall: 1.2rem;
1055
- --wb-font-lineHeight-xxxLarge: 4rem;
1056
- --wb-font-lineHeight-xxLarge: 3.2rem;
1057
- --wb-font-lineHeight-xLarge: 2.8rem;
1058
- --wb-font-lineHeight-large: 2.4rem;
1059
- --wb-font-lineHeight-xMedium: 2.2rem;
1060
- --wb-font-lineHeight-medium: 2rem;
1061
- --wb-font-lineHeight-small: 1.8rem;
1062
- --wb-font-lineHeight-xSmall: 1.6rem;
1063
1018
  --wb-font-weight-light: 300;
1064
1019
  --wb-font-weight-regular: 400;
1065
1020
  --wb-font-weight-medium: 500;
package/dist/es/index.js CHANGED
@@ -16,7 +16,7 @@ const CSS_VAR_PREFIX="--wb-";
16
16
 
17
17
  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)};
18
18
 
19
- 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}},textDecoration:{underlineOffset:sizing$1.size_020,thickness:sizing$1.size_010}};
19
+ const fontFamily={sans:'"Lato", "Noto Sans", "Helvetica", "Corbel", 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},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}},textDecoration:{underlineOffset:sizing$1.size_020,thickness:sizing$1.size_010}};
20
20
 
21
21
  const black="#151521";const white="#FFFFFF";const blue30="#5753FA";const blue05="#252368";const color={red_90:"#FEF4F4",red_80:"#FFEBEB",red_70:"#FDDFDF",red_60:"#FBB1B1",red_50:"#F97F7F",red_40:"#ED5656",red_30:"#E22D2D",red_20:"#BE2626",red_10:"#8E1C1C",red_05:"#621414",red_01:"#3B141A",orange_90:"#FEF4F2",orange_80:"#FEE9E5",orange_70:"#FEDFD8",orange_60:"#FEBFB1",orange_50:"#FAA185",orange_40:"#F97B4F",orange_30:"#F8551A",orange_20:"#C8481A",orange_10:"#983C1A",orange_05:"#672912",orange_01:"#3E1F19",yellow_90:"#FEF8E7",yellow_80:"#FEF1D0",yellow_70:"#FEEAB8",yellow_60:"#FEE7AD",yellow_50:"#FDD673",yellow_40:"#FCC539",yellow_30:"#FCB706",yellow_20:"#D69900",yellow_10:"#966B00",yellow_05:"#5F4500",yellow_01:"#312405",green_90:"#F1FBF1",green_80:"#E3F7E3",green_70:"#D5F3D5",green_60:"#BCEBBB",green_50:"#97D39E",green_40:"#72BB82",green_30:"#579F6C",green_20:"#3C6D4A",green_10:"#2C5037",green_05:"#24432D",green_01:"#1A2924",cyan_90:"#EEF7FE",cyan_80:"#DDF0FE",cyan_70:"#CCE9FE",cyan_60:"#A9DAFD",cyan_50:"#87CBFC",cyan_40:"#57BAFD",cyan_30:"#28A9FF",cyan_20:"#2485C7",cyan_10:"#20628F",cyan_05:"#1D3F58",cyan_01:"#192A3C",blue_90:"#F8F9FB",blue_80:"#EBF1FD",blue_70:"#DFEAFF",blue_60:"#BFCAFF",blue_50:"#8DA2FF",blue_40:"#6C82FF",blue_30:blue30,blue_20:"#4340D0",blue_10:"#363498",blue_05:blue05,blue_01:"#222149",blue_30_alpha20:`${blue30}33`,blue_05_alpha20:`${blue05}33`,magenta_90:"#FCEEF7",magenta_80:"#FFE3F4",magenta_70:"#FAD4EC",magenta_60:"#F9BBE1",magenta_50:"#F8A2D6",magenta_40:"#F670C1",magenta_30:"#E83FA4",magenta_20:"#BB3183",magenta_10:"#84275E",magenta_05:"#521B3C",magenta_01:"#33182E",gray_90:"#F6F6F6",gray_80:"#EDEDEE",gray_70:"#E0E0E1",gray_60:"#CBCBCD",gray_50:"#B5B6B9",gray_40:"#A0A1A4",gray_30:"#8A8B90",gray_20:"#717279",gray_10:"#4A4C53",gray_05:"#252531",gray_01:"#1D1D29",black_100:black,black_90:fade(black,.9),black_80:fade(black,.8),black_70:fade(black,.7),black_60:fade(black,.6),black_50:fade(black,.5),black_40:fade(black,.4),black_30:fade(black,.3),black_20:fade(black,.2),black_10:fade(black,.1),black_01:fade(black,.01),black_00:fade(black,0),white_100:white,white_90:fade(white,.9),white_80:fade(white,.8),white_70:fade(white,.7),white_60:fade(white,.6),white_50:fade(white,.5),white_40:fade(white,.4),white_30:fade(white,.3),white_20:fade(white,.2),white_10:fade(white,.1),white_01:fade(white,.01),white_00:fade(white,0)};
22
22
 
package/dist/index.d.ts CHANGED
@@ -882,25 +882,6 @@ declare const border: {
882
882
  serif: string;
883
883
  mono: string;
884
884
  };
885
- size: {
886
- xxxLarge: string;
887
- xxLarge: string;
888
- xLarge: string;
889
- large: string;
890
- medium: string;
891
- small: string;
892
- xSmall: string;
893
- };
894
- lineHeight: {
895
- xxxLarge: string;
896
- xxLarge: string;
897
- xLarge: string;
898
- large: string;
899
- xMedium: string;
900
- medium: string;
901
- small: string;
902
- xSmall: string;
903
- };
904
885
  weight: {
905
886
  light: number;
906
887
  regular: number;
package/dist/index.js CHANGED
@@ -20,7 +20,7 @@ const CSS_VAR_PREFIX="--wb-";
20
20
 
21
21
  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)};
22
22
 
23
- 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}},textDecoration:{underlineOffset:sizing$1.size_020,thickness:sizing$1.size_010}};
23
+ const fontFamily={sans:'"Lato", "Noto Sans", "Helvetica", "Corbel", 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},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}},textDecoration:{underlineOffset:sizing$1.size_020,thickness:sizing$1.size_010}};
24
24
 
25
25
  const black="#151521";const white="#FFFFFF";const blue30="#5753FA";const blue05="#252368";const color={red_90:"#FEF4F4",red_80:"#FFEBEB",red_70:"#FDDFDF",red_60:"#FBB1B1",red_50:"#F97F7F",red_40:"#ED5656",red_30:"#E22D2D",red_20:"#BE2626",red_10:"#8E1C1C",red_05:"#621414",red_01:"#3B141A",orange_90:"#FEF4F2",orange_80:"#FEE9E5",orange_70:"#FEDFD8",orange_60:"#FEBFB1",orange_50:"#FAA185",orange_40:"#F97B4F",orange_30:"#F8551A",orange_20:"#C8481A",orange_10:"#983C1A",orange_05:"#672912",orange_01:"#3E1F19",yellow_90:"#FEF8E7",yellow_80:"#FEF1D0",yellow_70:"#FEEAB8",yellow_60:"#FEE7AD",yellow_50:"#FDD673",yellow_40:"#FCC539",yellow_30:"#FCB706",yellow_20:"#D69900",yellow_10:"#966B00",yellow_05:"#5F4500",yellow_01:"#312405",green_90:"#F1FBF1",green_80:"#E3F7E3",green_70:"#D5F3D5",green_60:"#BCEBBB",green_50:"#97D39E",green_40:"#72BB82",green_30:"#579F6C",green_20:"#3C6D4A",green_10:"#2C5037",green_05:"#24432D",green_01:"#1A2924",cyan_90:"#EEF7FE",cyan_80:"#DDF0FE",cyan_70:"#CCE9FE",cyan_60:"#A9DAFD",cyan_50:"#87CBFC",cyan_40:"#57BAFD",cyan_30:"#28A9FF",cyan_20:"#2485C7",cyan_10:"#20628F",cyan_05:"#1D3F58",cyan_01:"#192A3C",blue_90:"#F8F9FB",blue_80:"#EBF1FD",blue_70:"#DFEAFF",blue_60:"#BFCAFF",blue_50:"#8DA2FF",blue_40:"#6C82FF",blue_30:blue30,blue_20:"#4340D0",blue_10:"#363498",blue_05:blue05,blue_01:"#222149",blue_30_alpha20:`${blue30}33`,blue_05_alpha20:`${blue05}33`,magenta_90:"#FCEEF7",magenta_80:"#FFE3F4",magenta_70:"#FAD4EC",magenta_60:"#F9BBE1",magenta_50:"#F8A2D6",magenta_40:"#F670C1",magenta_30:"#E83FA4",magenta_20:"#BB3183",magenta_10:"#84275E",magenta_05:"#521B3C",magenta_01:"#33182E",gray_90:"#F6F6F6",gray_80:"#EDEDEE",gray_70:"#E0E0E1",gray_60:"#CBCBCD",gray_50:"#B5B6B9",gray_40:"#A0A1A4",gray_30:"#8A8B90",gray_20:"#717279",gray_10:"#4A4C53",gray_05:"#252531",gray_01:"#1D1D29",black_100:black,black_90:fade(black,.9),black_80:fade(black,.8),black_70:fade(black,.7),black_60:fade(black,.6),black_50:fade(black,.5),black_40:fade(black,.4),black_30:fade(black,.3),black_20:fade(black,.2),black_10:fade(black,.1),black_01:fade(black,.01),black_00:fade(black,0),white_100:white,white_90:fade(white,.9),white_80:fade(white,.8),white_70:fade(white,.7),white_60:fade(white,.6),white_50:fade(white,.5),white_40:fade(white,.4),white_30:fade(white,.3),white_20:fade(white,.2),white_10:fade(white,.1),white_01:fade(white,.01),white_00:fade(white,0)};
26
26
 
@@ -36,25 +36,6 @@ declare const _default: {
36
36
  serif: string;
37
37
  mono: string;
38
38
  };
39
- size: {
40
- xxxLarge: string;
41
- xxLarge: string;
42
- xLarge: string;
43
- large: string;
44
- medium: string;
45
- small: string;
46
- xSmall: string;
47
- };
48
- lineHeight: {
49
- xxxLarge: string;
50
- xxLarge: string;
51
- xLarge: string;
52
- large: string;
53
- xMedium: string;
54
- medium: string;
55
- small: string;
56
- xSmall: string;
57
- };
58
39
  weight: {
59
40
  light: number;
60
41
  regular: number;
@@ -16,25 +16,6 @@ export declare const font: {
16
16
  serif: string;
17
17
  mono: string;
18
18
  };
19
- size: {
20
- xxxLarge: string;
21
- xxLarge: string;
22
- xLarge: string;
23
- large: string;
24
- medium: string;
25
- small: string;
26
- xSmall: string;
27
- };
28
- lineHeight: {
29
- xxxLarge: string;
30
- xxLarge: string;
31
- xLarge: string;
32
- large: string;
33
- xMedium: string;
34
- medium: string;
35
- small: string;
36
- xSmall: string;
37
- };
38
19
  weight: {
39
20
  light: number;
40
21
  regular: number;
@@ -4,25 +4,6 @@ export declare const font: {
4
4
  serif: string;
5
5
  mono: string;
6
6
  };
7
- size: {
8
- xxxLarge: string;
9
- xxLarge: string;
10
- xLarge: string;
11
- large: string;
12
- medium: string;
13
- small: string;
14
- xSmall: string;
15
- };
16
- lineHeight: {
17
- xxxLarge: string;
18
- xxLarge: string;
19
- xLarge: string;
20
- large: string;
21
- xMedium: string;
22
- medium: string;
23
- small: string;
24
- xSmall: string;
25
- };
26
7
  weight: {
27
8
  light: number;
28
9
  regular: number;
@@ -14,25 +14,6 @@ export declare const font: {
14
14
  serif: string;
15
15
  mono: string;
16
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
17
  weight: {
37
18
  light: number;
38
19
  regular: number;
@@ -27,25 +27,6 @@ declare const _default: {
27
27
  serif: string;
28
28
  mono: string;
29
29
  };
30
- size: {
31
- xxxLarge: string;
32
- xxLarge: string;
33
- xLarge: string;
34
- large: string;
35
- medium: string;
36
- small: string;
37
- xSmall: string;
38
- };
39
- lineHeight: {
40
- xxxLarge: string;
41
- xxLarge: string;
42
- xLarge: string;
43
- large: string;
44
- xMedium: string;
45
- medium: string;
46
- small: string;
47
- xSmall: string;
48
- };
49
30
  weight: {
50
31
  light: number;
51
32
  regular: number;
@@ -27,25 +27,6 @@ declare const _default: {
27
27
  serif: string;
28
28
  mono: string;
29
29
  };
30
- size: {
31
- xxxLarge: string;
32
- xxLarge: string;
33
- xLarge: string;
34
- large: string;
35
- medium: string;
36
- small: string;
37
- xSmall: string;
38
- };
39
- lineHeight: {
40
- xxxLarge: string;
41
- xxLarge: string;
42
- xLarge: string;
43
- large: string;
44
- xMedium: string;
45
- medium: string;
46
- small: string;
47
- xSmall: string;
48
- };
49
30
  weight: {
50
31
  light: number;
51
32
  regular: number;
@@ -27,25 +27,6 @@ declare const _default: {
27
27
  serif: string;
28
28
  mono: string;
29
29
  };
30
- size: {
31
- xxxLarge: string;
32
- xxLarge: string;
33
- xLarge: string;
34
- large: string;
35
- medium: string;
36
- small: string;
37
- xSmall: string;
38
- };
39
- lineHeight: {
40
- xxxLarge: string;
41
- xxLarge: string;
42
- xLarge: string;
43
- large: string;
44
- xMedium: string;
45
- medium: string;
46
- small: string;
47
- xSmall: string;
48
- };
49
30
  weight: {
50
31
  light: number;
51
32
  regular: number;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Core primitive design tokens for Web Wonder Blocks",
4
4
  "author": "Khan Academy",
5
5
  "license": "MIT",
6
- "version": "16.8.0",
6
+ "version": "17.0.0",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },