@khanacademy/wonder-blocks-tokens 16.8.1 → 17.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/.turbo/turbo-build$colon$css.log +1 -1
  2. package/CHANGELOG.md +13 -0
  3. package/dist/css/index.css +12 -57
  4. package/dist/css/vars.css +0 -45
  5. package/dist/es/index.js +2 -2
  6. package/dist/index.d.ts +0 -19
  7. package/dist/index.js +2 -2
  8. package/dist/theme/default.d.ts +0 -19
  9. package/dist/theme/primitive/font.d.ts +0 -19
  10. package/dist/theme/semantic/internal/primitive-font-syl-dark.d.ts +0 -19
  11. package/dist/theme/semantic/internal/primitive-font-thunderblocks.d.ts +0 -19
  12. package/dist/theme/syl-dark.d.ts +0 -19
  13. package/dist/theme/thunderblocks.d.ts +0 -19
  14. package/dist/tokens/media-queries.d.ts +6 -3
  15. package/dist/tokens/theme.d.ts +0 -19
  16. package/package.json +1 -1
package/.turbo/turbo-build$colon$css.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @khanacademy/wonder-blocks-tokens@16.8.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
2
+ > @khanacademy/wonder-blocks-tokens@17.1.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.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - dfcf49b: Update media-query breakpoint and constant tokens to cover full range of widths
8
+
9
+ ## 17.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - 9d8e5e3: Remove the deprecated legacy `font.size.*` and `font.lineHeight.*` token scales.
14
+ Use `font.body.*` / `font.heading.*` for typography.
15
+
3
16
  ## 16.8.1
4
17
 
5
18
  ### Patch Changes
package/dist/css/index.css CHANGED
@@ -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;
@@ -562,21 +562,6 @@
562
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
@@ -15,21 +15,6 @@
15
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
@@ -4,7 +4,7 @@ const offBlack="#21242c";const white$1="#ffffff";const eggplant="#5f1e5c";const
4
4
 
5
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};
6
6
 
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};
7
+ const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024,lgMax:1199,xlMin:1200};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.lgMin}px) and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.xlMin}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.lgMax}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 */`,xlOrLarger:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xlOrLarger */`};const breakpoint={width,mediaQuery};
8
8
 
9
9
  const BASELINE_VALUE=10;function remToPx(value,baseline=BASELINE_VALUE){const num=parseFloat(value);const result=Math.round(num*baseline);return `${result}px`}function pxToRem(value,baseline=BASELINE_VALUE){return `${value/baseline}rem`}
10
10
 
@@ -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", "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},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
@@ -8,7 +8,7 @@ const offBlack="#21242c";const white$1="#ffffff";const eggplant="#5f1e5c";const
8
8
 
9
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};
10
10
 
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};
11
+ const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024,lgMax:1199,xlMin:1200};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.lgMin}px) and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.xlMin}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.lgMax}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 */`,xlOrLarger:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xlOrLarger */`};const breakpoint={width,mediaQuery};
12
12
 
13
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
14
 
@@ -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", "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},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
 
package/dist/theme/default.d.ts CHANGED
@@ -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;
package/dist/theme/primitive/font.d.ts CHANGED
@@ -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;
package/dist/theme/semantic/internal/primitive-font-syl-dark.d.ts CHANGED
@@ -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;
package/dist/theme/semantic/internal/primitive-font-thunderblocks.d.ts CHANGED
@@ -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;
package/dist/theme/syl-dark.d.ts CHANGED
@@ -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/dist/theme/thunderblocks.d.ts CHANGED
@@ -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/dist/tokens/media-queries.d.ts CHANGED
@@ -12,19 +12,22 @@ export declare const breakpoint: {
12
12
  readonly mdMin: 682;
13
13
  readonly mdMax: 1023;
14
14
  readonly lgMin: 1024;
15
+ readonly lgMax: 1199;
16
+ readonly xlMin: 1200;
15
17
  };
16
18
  mediaQuery: {
17
19
  readonly xs: "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xs */";
18
20
  readonly sm: "@media screen and (min-width: 568px) and (max-width: 681px) /* breakpoint.mediaQuery.sm */";
19
21
  readonly md: "@media screen and (min-width: 682px) and (max-width: 1023px) /* breakpoint.mediaQuery.md */";
20
- readonly lg: "@media screen and (min-width: 682px) and (max-width: 1024px) /* breakpoint.mediaQuery.lg */";
21
- readonly xl: "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.xl */";
22
+ readonly lg: "@media screen and (min-width: 1024px) and (max-width: 1199px) /* breakpoint.mediaQuery.lg */";
23
+ readonly xl: "@media screen and (min-width: 1200px) /* breakpoint.mediaQuery.xl */";
22
24
  readonly xsOrSmaller: "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xsOrSmaller */";
23
25
  readonly smOrSmaller: "@media screen and (max-width: 681px) /* breakpoint.mediaQuery.smOrSmaller */";
24
26
  readonly mdOrSmaller: "@media screen and (max-width: 1023px) /* breakpoint.mediaQuery.mdOrSmaller */";
25
- readonly lgOrSmaller: "@media screen and (max-width: 1024px) /* breakpoint.mediaQuery.lgOrSmaller */";
27
+ readonly lgOrSmaller: "@media screen and (max-width: 1199px) /* breakpoint.mediaQuery.lgOrSmaller */";
26
28
  readonly smOrLarger: "@media screen and (min-width: 568px) /* breakpoint.mediaQuery.smOrLarger */";
27
29
  readonly mdOrLarger: "@media screen and (min-width: 682px) /* breakpoint.mediaQuery.mdOrLarger */";
28
30
  readonly lgOrLarger: "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.lgOrLarger */";
31
+ readonly xlOrLarger: "@media screen and (min-width: 1200px) /* breakpoint.mediaQuery.xlOrLarger */";
29
32
  };
30
33
  };
package/dist/tokens/theme.d.ts CHANGED
@@ -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.1",
6
+ "version": "17.1.0",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },