@khanacademy/wonder-blocks-tokens 3.0.1 → 4.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 (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/es/index.js +82 -15
  3. package/dist/index.js +82 -15
  4. package/dist/tokens/semantic-color.d.ts +72 -6
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 4.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 8cfaeab0: Add `icon.disabled` token to semanticColor.
8
+ - c162abb4: Add `border.focus` semantic color token to use for the focus outline
9
+
10
+ ## 4.0.0
11
+
12
+ ### Major Changes
13
+
14
+ - 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.
15
+
16
+ - Renamed `primary` to `progressive`.
17
+
18
+ - Added more categories to actions: `filled` and `outline`.
19
+
3
20
  ## 3.0.1
4
21
 
5
22
  ### Patch 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,86 @@ 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
+ focus: color.blue,
232
+ inverse: color.white
233
+ };
227
234
  const semanticColor = {
228
235
  action: {
229
- primary: {
230
- default: color.blue,
231
- active: color.activeBlue
236
+ filled: {
237
+ progressive: {
238
+ default: {
239
+ border: "transparent",
240
+ background: color.blue,
241
+ foreground: color.white
242
+ },
243
+ hover: {
244
+ border: color.blue,
245
+ background: color.blue,
246
+ foreground: color.white
247
+ },
248
+ press: {
249
+ border: color.activeBlue,
250
+ background: color.activeBlue,
251
+ foreground: color.white
252
+ }
253
+ },
254
+ destructive: {
255
+ default: {
256
+ border: "transparent",
257
+ background: color.red,
258
+ foreground: color.white
259
+ },
260
+ hover: {
261
+ border: color.red,
262
+ background: color.red,
263
+ foreground: color.white
264
+ },
265
+ press: {
266
+ border: color.activeRed,
267
+ background: color.activeRed,
268
+ foreground: color.white
269
+ }
270
+ }
232
271
  },
233
- destructive: {
234
- default: color.red,
235
- active: color.activeRed
272
+ outlined: {
273
+ progressive: {
274
+ default: {
275
+ border: border.strong,
276
+ background: color.white,
277
+ foreground: color.blue
278
+ },
279
+ hover: {
280
+ border: color.blue,
281
+ background: color.white,
282
+ foreground: color.blue
283
+ },
284
+ press: {
285
+ border: color.activeBlue,
286
+ background: color.fadedBlue,
287
+ foreground: color.activeBlue
288
+ }
289
+ },
290
+ destructive: {
291
+ default: {
292
+ border: border.strong,
293
+ background: color.white,
294
+ foreground: color.red
295
+ },
296
+ hover: {
297
+ border: color.red,
298
+ background: color.white,
299
+ foreground: color.red
300
+ },
301
+ press: {
302
+ border: color.activeRed,
303
+ background: color.fadedRed,
304
+ foreground: color.activeRed
305
+ }
306
+ }
236
307
  },
237
308
  disabled: {
238
309
  default: color.fadedOffBlack32,
@@ -274,18 +345,14 @@ const semanticColor = {
274
345
  disabled: color.fadedOffBlack32,
275
346
  inverse: color.white
276
347
  },
277
- border: {
278
- primary: color.fadedOffBlack16,
279
- subtle: color.fadedOffBlack8,
280
- strong: color.fadedOffBlack50,
281
- inverse: color.white
282
- },
348
+ border: border,
283
349
  icon: {
284
350
  primary: color.fadedOffBlack64,
285
351
  secondary: color.offBlack,
286
352
  inverse: color.white,
287
353
  action: color.blue,
288
- destructive: color.red
354
+ destructive: color.red,
355
+ disabled: color.fadedOffBlack32
289
356
  },
290
357
  khanmigo: {
291
358
  primary: color.eggplant,
@@ -296,4 +363,4 @@ const semanticColor = {
296
363
  }
297
364
  };
298
365
 
299
- export { border, breakpoint, color, fade, font, mix, semanticColor, spacing };
366
+ 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,86 @@ 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
+ focus: color.blue,
236
+ inverse: color.white
237
+ };
231
238
  const semanticColor = {
232
239
  action: {
233
- primary: {
234
- default: color.blue,
235
- active: color.activeBlue
240
+ filled: {
241
+ progressive: {
242
+ default: {
243
+ border: "transparent",
244
+ background: color.blue,
245
+ foreground: color.white
246
+ },
247
+ hover: {
248
+ border: color.blue,
249
+ background: color.blue,
250
+ foreground: color.white
251
+ },
252
+ press: {
253
+ border: color.activeBlue,
254
+ background: color.activeBlue,
255
+ foreground: color.white
256
+ }
257
+ },
258
+ destructive: {
259
+ default: {
260
+ border: "transparent",
261
+ background: color.red,
262
+ foreground: color.white
263
+ },
264
+ hover: {
265
+ border: color.red,
266
+ background: color.red,
267
+ foreground: color.white
268
+ },
269
+ press: {
270
+ border: color.activeRed,
271
+ background: color.activeRed,
272
+ foreground: color.white
273
+ }
274
+ }
236
275
  },
237
- destructive: {
238
- default: color.red,
239
- active: color.activeRed
276
+ outlined: {
277
+ progressive: {
278
+ default: {
279
+ border: border.strong,
280
+ background: color.white,
281
+ foreground: color.blue
282
+ },
283
+ hover: {
284
+ border: color.blue,
285
+ background: color.white,
286
+ foreground: color.blue
287
+ },
288
+ press: {
289
+ border: color.activeBlue,
290
+ background: color.fadedBlue,
291
+ foreground: color.activeBlue
292
+ }
293
+ },
294
+ destructive: {
295
+ default: {
296
+ border: border.strong,
297
+ background: color.white,
298
+ foreground: color.red
299
+ },
300
+ hover: {
301
+ border: color.red,
302
+ background: color.white,
303
+ foreground: color.red
304
+ },
305
+ press: {
306
+ border: color.activeRed,
307
+ background: color.fadedRed,
308
+ foreground: color.activeRed
309
+ }
310
+ }
240
311
  },
241
312
  disabled: {
242
313
  default: color.fadedOffBlack32,
@@ -278,18 +349,14 @@ const semanticColor = {
278
349
  disabled: color.fadedOffBlack32,
279
350
  inverse: color.white
280
351
  },
281
- border: {
282
- primary: color.fadedOffBlack16,
283
- subtle: color.fadedOffBlack8,
284
- strong: color.fadedOffBlack50,
285
- inverse: color.white
286
- },
352
+ border: border,
287
353
  icon: {
288
354
  primary: color.fadedOffBlack64,
289
355
  secondary: color.offBlack,
290
356
  inverse: color.white,
291
357
  action: color.blue,
292
- destructive: color.red
358
+ destructive: color.red,
359
+ disabled: color.fadedOffBlack32
293
360
  },
294
361
  khanmigo: {
295
362
  primary: color.eggplant,
@@ -300,7 +367,7 @@ const semanticColor = {
300
367
  }
301
368
  };
302
369
 
303
- exports.border = border;
370
+ exports.border = border$1;
304
371
  exports.breakpoint = breakpoint;
305
372
  exports.color = color;
306
373
  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;
@@ -73,6 +137,7 @@ export declare const semanticColor: {
73
137
  primary: string;
74
138
  subtle: string;
75
139
  strong: string;
140
+ focus: string;
76
141
  inverse: string;
77
142
  };
78
143
  /**
@@ -84,6 +149,7 @@ export declare const semanticColor: {
84
149
  inverse: string;
85
150
  action: string;
86
151
  destructive: string;
152
+ disabled: string;
87
153
  };
88
154
  /**
89
155
  * Colors to be used exclusively for Khanmigo or to communicate a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-tokens",
3
- "version": "3.0.1",
3
+ "version": "4.1.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",