@khanacademy/wonder-blocks-tokens 5.2.0 → 6.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/es/index.js +24 -21
  3. package/dist/index.js +24 -21
  4. package/dist/tokens/sizing.d.ts +19 -16
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 6.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 24bf12f: Update sizing primitive tokens to use Base 10 rem units instead of Base 8 to work around minimum size bugs in browsers
8
+
3
9
  ## 5.2.0
4
10
 
5
11
  ### Minor Changes
package/dist/es/index.js CHANGED
@@ -180,32 +180,35 @@ const font = {
180
180
  }
181
181
  };
182
182
 
183
- const baseline = 8;
183
+ const baseline = 10;
184
184
  function pxToRem(value) {
185
185
  return `${value / baseline}rem`;
186
186
  }
187
187
  const sizing = {
188
188
  size_0: pxToRem(0),
189
- size_0125: pxToRem(1),
190
- size_025: pxToRem(2),
191
- size_050: pxToRem(4),
192
- size_075: pxToRem(6),
193
- size_100: pxToRem(8),
194
- size_125: pxToRem(10),
195
- size_150: pxToRem(12),
196
- size_200: pxToRem(16),
197
- size_225: pxToRem(18),
198
- size_250: pxToRem(20),
199
- size_300: pxToRem(24),
200
- size_400: pxToRem(32),
201
- size_500: pxToRem(40),
202
- size_600: pxToRem(48),
203
- size_700: pxToRem(56),
204
- size_800: pxToRem(64),
205
- size_900: pxToRem(72),
206
- size_1000: pxToRem(80),
207
- size_1100: pxToRem(88),
208
- size_1200: pxToRem(96)
189
+ size_010: pxToRem(1),
190
+ size_020: pxToRem(2),
191
+ size_040: pxToRem(4),
192
+ size_060: pxToRem(6),
193
+ size_080: pxToRem(8),
194
+ size_100: pxToRem(10),
195
+ size_120: pxToRem(12),
196
+ size_140: pxToRem(14),
197
+ size_160: pxToRem(16),
198
+ size_180: pxToRem(18),
199
+ size_200: pxToRem(20),
200
+ size_240: pxToRem(24),
201
+ size_280: pxToRem(28),
202
+ size_320: pxToRem(32),
203
+ size_360: pxToRem(36),
204
+ size_400: pxToRem(40),
205
+ size_480: pxToRem(48),
206
+ size_560: pxToRem(56),
207
+ size_640: pxToRem(64),
208
+ size_720: pxToRem(72),
209
+ size_800: pxToRem(80),
210
+ size_880: pxToRem(88),
211
+ size_960: pxToRem(96)
209
212
  };
210
213
 
211
214
  const spacing = {
package/dist/index.js CHANGED
@@ -184,32 +184,35 @@ const font = {
184
184
  }
185
185
  };
186
186
 
187
- const baseline = 8;
187
+ const baseline = 10;
188
188
  function pxToRem(value) {
189
189
  return `${value / baseline}rem`;
190
190
  }
191
191
  const sizing = {
192
192
  size_0: pxToRem(0),
193
- size_0125: pxToRem(1),
194
- size_025: pxToRem(2),
195
- size_050: pxToRem(4),
196
- size_075: pxToRem(6),
197
- size_100: pxToRem(8),
198
- size_125: pxToRem(10),
199
- size_150: pxToRem(12),
200
- size_200: pxToRem(16),
201
- size_225: pxToRem(18),
202
- size_250: pxToRem(20),
203
- size_300: pxToRem(24),
204
- size_400: pxToRem(32),
205
- size_500: pxToRem(40),
206
- size_600: pxToRem(48),
207
- size_700: pxToRem(56),
208
- size_800: pxToRem(64),
209
- size_900: pxToRem(72),
210
- size_1000: pxToRem(80),
211
- size_1100: pxToRem(88),
212
- size_1200: pxToRem(96)
193
+ size_010: pxToRem(1),
194
+ size_020: pxToRem(2),
195
+ size_040: pxToRem(4),
196
+ size_060: pxToRem(6),
197
+ size_080: pxToRem(8),
198
+ size_100: pxToRem(10),
199
+ size_120: pxToRem(12),
200
+ size_140: pxToRem(14),
201
+ size_160: pxToRem(16),
202
+ size_180: pxToRem(18),
203
+ size_200: pxToRem(20),
204
+ size_240: pxToRem(24),
205
+ size_280: pxToRem(28),
206
+ size_320: pxToRem(32),
207
+ size_360: pxToRem(36),
208
+ size_400: pxToRem(40),
209
+ size_480: pxToRem(48),
210
+ size_560: pxToRem(56),
211
+ size_640: pxToRem(64),
212
+ size_720: pxToRem(72),
213
+ size_800: pxToRem(80),
214
+ size_880: pxToRem(88),
215
+ size_960: pxToRem(96)
213
216
  };
214
217
 
215
218
  const spacing = {
package/dist/tokens/sizing.d.ts CHANGED
@@ -11,24 +11,27 @@
11
11
  */
12
12
  export declare const sizing: {
13
13
  readonly size_0: string;
14
- readonly size_0125: string;
15
- readonly size_025: string;
16
- readonly size_050: string;
17
- readonly size_075: string;
14
+ readonly size_010: string;
15
+ readonly size_020: string;
16
+ readonly size_040: string;
17
+ readonly size_060: string;
18
+ readonly size_080: string;
18
19
  readonly size_100: string;
19
- readonly size_125: string;
20
- readonly size_150: string;
20
+ readonly size_120: string;
21
+ readonly size_140: string;
22
+ readonly size_160: string;
23
+ readonly size_180: string;
21
24
  readonly size_200: string;
22
- readonly size_225: string;
23
- readonly size_250: string;
24
- readonly size_300: string;
25
+ readonly size_240: string;
26
+ readonly size_280: string;
27
+ readonly size_320: string;
28
+ readonly size_360: string;
25
29
  readonly size_400: string;
26
- readonly size_500: string;
27
- readonly size_600: string;
28
- readonly size_700: string;
30
+ readonly size_480: string;
31
+ readonly size_560: string;
32
+ readonly size_640: string;
33
+ readonly size_720: string;
29
34
  readonly size_800: string;
30
- readonly size_900: string;
31
- readonly size_1000: string;
32
- readonly size_1100: string;
33
- readonly size_1200: string;
35
+ readonly size_880: string;
36
+ readonly size_960: string;
34
37
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-tokens",
3
- "version": "5.2.0",
3
+ "version": "6.0.0",
4
4
  "description": "Core primitive design tokens for Web Wonder Blocks",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/es/index.js",