@khanacademy/wonder-blocks-tokens 3.0.0 → 4.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 +16 -0
  2. package/dist/es/index.js +79 -14
  3. package/dist/index.js +79 -14
  4. package/dist/tokens/semantic-color.d.ts +70 -6
  5. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 0de25cd8: - Reworked semanticColor actions to use a new structure. Every `action` now includes `default`, `hover` and `press` states, and each state includes `border`, `background` and `foreground` tokens.
8
+
9
+ - Renamed `primary` to `progressive`.
10
+
11
+ - Added more categories to actions: `filled` and `outline`.
12
+
13
+ ## 3.0.1
14
+
15
+ ### Patch Changes
16
+
17
+ - 11a0f5c6: No functional changes. Adding prepublishOnly script.
18
+
3
19
  ## 3.0.0
4
20
 
5
21
  ### Major Changes
package/dist/es/index.js CHANGED
@@ -1,4 +1,4 @@
1
- const border = {
1
+ const border$1 = {
2
2
  radius: {
3
3
  xSmall_2: 2,
4
4
  small_3: 3,
@@ -224,15 +224,85 @@ const breakpoint = {
224
224
  mediaQuery
225
225
  };
226
226
 
227
+ const border = {
228
+ primary: color.fadedOffBlack16,
229
+ subtle: color.fadedOffBlack8,
230
+ strong: color.fadedOffBlack50,
231
+ inverse: color.white
232
+ };
227
233
  const semanticColor = {
228
234
  action: {
229
- primary: {
230
- default: color.blue,
231
- active: color.activeBlue
235
+ filled: {
236
+ progressive: {
237
+ default: {
238
+ border: "transparent",
239
+ background: color.blue,
240
+ foreground: color.white
241
+ },
242
+ hover: {
243
+ border: color.blue,
244
+ background: color.blue,
245
+ foreground: color.white
246
+ },
247
+ press: {
248
+ border: color.activeBlue,
249
+ background: color.activeBlue,
250
+ foreground: color.white
251
+ }
252
+ },
253
+ destructive: {
254
+ default: {
255
+ border: "transparent",
256
+ background: color.red,
257
+ foreground: color.white
258
+ },
259
+ hover: {
260
+ border: color.red,
261
+ background: color.red,
262
+ foreground: color.white
263
+ },
264
+ press: {
265
+ border: color.activeRed,
266
+ background: color.activeRed,
267
+ foreground: color.white
268
+ }
269
+ }
232
270
  },
233
- destructive: {
234
- default: color.red,
235
- active: color.activeRed
271
+ outlined: {
272
+ progressive: {
273
+ default: {
274
+ border: border.strong,
275
+ background: color.white,
276
+ foreground: color.blue
277
+ },
278
+ hover: {
279
+ border: color.blue,
280
+ background: color.white,
281
+ foreground: color.blue
282
+ },
283
+ press: {
284
+ border: color.activeBlue,
285
+ background: color.fadedBlue,
286
+ foreground: color.activeBlue
287
+ }
288
+ },
289
+ destructive: {
290
+ default: {
291
+ border: border.strong,
292
+ background: color.white,
293
+ foreground: color.red
294
+ },
295
+ hover: {
296
+ border: color.red,
297
+ background: color.white,
298
+ foreground: color.red
299
+ },
300
+ press: {
301
+ border: color.activeRed,
302
+ background: color.fadedRed,
303
+ foreground: color.activeRed
304
+ }
305
+ }
236
306
  },
237
307
  disabled: {
238
308
  default: color.fadedOffBlack32,
@@ -274,12 +344,7 @@ const semanticColor = {
274
344
  disabled: color.fadedOffBlack32,
275
345
  inverse: color.white
276
346
  },
277
- border: {
278
- primary: color.fadedOffBlack16,
279
- subtle: color.fadedOffBlack8,
280
- strong: color.fadedOffBlack50,
281
- inverse: color.white
282
- },
347
+ border: border,
283
348
  icon: {
284
349
  primary: color.fadedOffBlack64,
285
350
  secondary: color.offBlack,
@@ -296,4 +361,4 @@ const semanticColor = {
296
361
  }
297
362
  };
298
363
 
299
- export { border, breakpoint, color, fade, font, mix, semanticColor, spacing };
364
+ export { border$1 as border, breakpoint, color, fade, font, mix, semanticColor, spacing };
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const border = {
5
+ const border$1 = {
6
6
  radius: {
7
7
  xSmall_2: 2,
8
8
  small_3: 3,
@@ -228,15 +228,85 @@ const breakpoint = {
228
228
  mediaQuery
229
229
  };
230
230
 
231
+ const border = {
232
+ primary: color.fadedOffBlack16,
233
+ subtle: color.fadedOffBlack8,
234
+ strong: color.fadedOffBlack50,
235
+ inverse: color.white
236
+ };
231
237
  const semanticColor = {
232
238
  action: {
233
- primary: {
234
- default: color.blue,
235
- active: color.activeBlue
239
+ filled: {
240
+ progressive: {
241
+ default: {
242
+ border: "transparent",
243
+ background: color.blue,
244
+ foreground: color.white
245
+ },
246
+ hover: {
247
+ border: color.blue,
248
+ background: color.blue,
249
+ foreground: color.white
250
+ },
251
+ press: {
252
+ border: color.activeBlue,
253
+ background: color.activeBlue,
254
+ foreground: color.white
255
+ }
256
+ },
257
+ destructive: {
258
+ default: {
259
+ border: "transparent",
260
+ background: color.red,
261
+ foreground: color.white
262
+ },
263
+ hover: {
264
+ border: color.red,
265
+ background: color.red,
266
+ foreground: color.white
267
+ },
268
+ press: {
269
+ border: color.activeRed,
270
+ background: color.activeRed,
271
+ foreground: color.white
272
+ }
273
+ }
236
274
  },
237
- destructive: {
238
- default: color.red,
239
- active: color.activeRed
275
+ outlined: {
276
+ progressive: {
277
+ default: {
278
+ border: border.strong,
279
+ background: color.white,
280
+ foreground: color.blue
281
+ },
282
+ hover: {
283
+ border: color.blue,
284
+ background: color.white,
285
+ foreground: color.blue
286
+ },
287
+ press: {
288
+ border: color.activeBlue,
289
+ background: color.fadedBlue,
290
+ foreground: color.activeBlue
291
+ }
292
+ },
293
+ destructive: {
294
+ default: {
295
+ border: border.strong,
296
+ background: color.white,
297
+ foreground: color.red
298
+ },
299
+ hover: {
300
+ border: color.red,
301
+ background: color.white,
302
+ foreground: color.red
303
+ },
304
+ press: {
305
+ border: color.activeRed,
306
+ background: color.fadedRed,
307
+ foreground: color.activeRed
308
+ }
309
+ }
240
310
  },
241
311
  disabled: {
242
312
  default: color.fadedOffBlack32,
@@ -278,12 +348,7 @@ const semanticColor = {
278
348
  disabled: color.fadedOffBlack32,
279
349
  inverse: color.white
280
350
  },
281
- border: {
282
- primary: color.fadedOffBlack16,
283
- subtle: color.fadedOffBlack8,
284
- strong: color.fadedOffBlack50,
285
- inverse: color.white
286
- },
351
+ border: border,
287
352
  icon: {
288
353
  primary: color.fadedOffBlack64,
289
354
  secondary: color.offBlack,
@@ -300,7 +365,7 @@ const semanticColor = {
300
365
  }
301
366
  };
302
367
 
303
- exports.border = border;
368
+ exports.border = border$1;
304
369
  exports.breakpoint = breakpoint;
305
370
  exports.color = color;
306
371
  exports.fade = fade;
package/dist/tokens/semantic-color.d.ts CHANGED
@@ -4,13 +4,77 @@ export declare const semanticColor: {
4
4
  * of interaction.
5
5
  */
6
6
  action: {
7
- primary: {
8
- default: string;
9
- active: string;
7
+ filled: {
8
+ progressive: {
9
+ default: {
10
+ border: string;
11
+ background: string;
12
+ foreground: string;
13
+ };
14
+ hover: {
15
+ border: string;
16
+ background: string;
17
+ foreground: string;
18
+ };
19
+ press: {
20
+ border: string;
21
+ background: string;
22
+ foreground: string;
23
+ };
24
+ };
25
+ destructive: {
26
+ default: {
27
+ border: string;
28
+ background: string;
29
+ foreground: string;
30
+ };
31
+ hover: {
32
+ border: string;
33
+ background: string;
34
+ foreground: string;
35
+ };
36
+ press: {
37
+ border: string;
38
+ background: string;
39
+ foreground: string;
40
+ };
41
+ };
10
42
  };
11
- destructive: {
12
- default: string;
13
- active: string;
43
+ outlined: {
44
+ progressive: {
45
+ default: {
46
+ border: string;
47
+ background: string;
48
+ foreground: string;
49
+ };
50
+ hover: {
51
+ border: string;
52
+ background: string;
53
+ foreground: string;
54
+ };
55
+ press: {
56
+ border: string;
57
+ background: string;
58
+ foreground: string;
59
+ };
60
+ };
61
+ destructive: {
62
+ default: {
63
+ border: string;
64
+ background: string;
65
+ foreground: string;
66
+ };
67
+ hover: {
68
+ border: string;
69
+ background: string;
70
+ foreground: string;
71
+ };
72
+ press: {
73
+ border: string;
74
+ background: string;
75
+ foreground: string;
76
+ };
77
+ };
14
78
  };
15
79
  disabled: {
16
80
  default: string;
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-tokens",
3
- "version": "3.0.0",
3
+ "version": "4.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",
7
7
  "types": "dist/index.d.ts",
8
8
  "scripts": {
9
- "test": "echo \"Error: no test specified\" && exit 1"
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
10
11
  },
11
12
  "author": "",
12
13
  "license": "MIT",