@khanacademy/wonder-blocks-tokens 5.1.0 → 5.2.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 +14 -0
  2. package/dist/es/index.js +97 -5
  3. package/dist/index.js +97 -5
  4. package/dist/tokens/semantic-color.d.ts +92 -0
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @khanacademy/wonder-blocks-tokens
2
2
 
3
+ ## 5.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 3dc5dac: - Added `action.tertiary` category.
8
+ - Added `neutral` subcategory to each `action` kind.
9
+ - Modified `secondary` to use `transparent` bg instead of `white`.
10
+
11
+ ## 5.1.1
12
+
13
+ ### Patch Changes
14
+
15
+ - 999101f: Update semanticColor.icon.primary to use the new a11y-friendly offBlack72 primitive color
16
+
3
17
  ## 5.1.0
4
18
 
5
19
  ### Minor Changes
package/dist/es/index.js CHANGED
@@ -291,6 +291,23 @@ const semanticColor = {
291
291
  foreground: color.white
292
292
  }
293
293
  },
294
+ neutral: {
295
+ default: {
296
+ border: "transparent",
297
+ background: color.fadedOffBlack72,
298
+ foreground: color.white
299
+ },
300
+ hover: {
301
+ border: color.fadedOffBlack72,
302
+ background: color.fadedOffBlack72,
303
+ foreground: color.white
304
+ },
305
+ press: {
306
+ border: color.offBlack,
307
+ background: color.offBlack,
308
+ foreground: color.white
309
+ }
310
+ },
294
311
  disabled: {
295
312
  border: color.fadedOffBlack32,
296
313
  background: color.fadedOffBlack32,
@@ -301,12 +318,12 @@ const semanticColor = {
301
318
  progressive: {
302
319
  default: {
303
320
  border: border.strong,
304
- background: color.white,
321
+ background: "transparent",
305
322
  foreground: color.blue
306
323
  },
307
324
  hover: {
308
325
  border: color.blue,
309
- background: color.white,
326
+ background: "transparent",
310
327
  foreground: color.blue
311
328
  },
312
329
  press: {
@@ -318,12 +335,12 @@ const semanticColor = {
318
335
  destructive: {
319
336
  default: {
320
337
  border: border.strong,
321
- background: color.white,
338
+ background: "transparent",
322
339
  foreground: color.red
323
340
  },
324
341
  hover: {
325
342
  border: color.red,
326
- background: color.white,
343
+ background: "transparent",
327
344
  foreground: color.red
328
345
  },
329
346
  press: {
@@ -332,11 +349,86 @@ const semanticColor = {
332
349
  foreground: color.activeRed
333
350
  }
334
351
  },
352
+ neutral: {
353
+ default: {
354
+ border: border.strong,
355
+ background: "transparent",
356
+ foreground: color.fadedOffBlack72
357
+ },
358
+ hover: {
359
+ border: color.fadedOffBlack72,
360
+ background: "transparent",
361
+ foreground: color.fadedOffBlack72
362
+ },
363
+ press: {
364
+ border: color.offBlack,
365
+ background: "transparent",
366
+ foreground: color.offBlack
367
+ }
368
+ },
335
369
  disabled: {
336
370
  border: border.primary,
337
371
  background: color.offWhite,
338
372
  foreground: color.fadedOffBlack32
339
373
  }
374
+ },
375
+ tertiary: {
376
+ progressive: {
377
+ default: {
378
+ border: "transparent",
379
+ background: "transparent",
380
+ foreground: color.blue
381
+ },
382
+ hover: {
383
+ border: color.blue,
384
+ background: "transparent",
385
+ foreground: color.blue
386
+ },
387
+ press: {
388
+ border: color.activeBlue,
389
+ background: "transparent",
390
+ foreground: color.activeBlue
391
+ }
392
+ },
393
+ destructive: {
394
+ default: {
395
+ border: "transparent",
396
+ background: "transparent",
397
+ foreground: color.red
398
+ },
399
+ hover: {
400
+ border: color.red,
401
+ background: "transparent",
402
+ foreground: color.red
403
+ },
404
+ press: {
405
+ border: color.activeRed,
406
+ background: "transparent",
407
+ foreground: color.activeRed
408
+ }
409
+ },
410
+ neutral: {
411
+ default: {
412
+ border: "transparent",
413
+ background: "transparent",
414
+ foreground: color.fadedOffBlack72
415
+ },
416
+ hover: {
417
+ border: color.fadedOffBlack72,
418
+ background: "transparent",
419
+ foreground: color.fadedOffBlack72
420
+ },
421
+ press: {
422
+ border: color.offBlack,
423
+ background: "transparent",
424
+ foreground: color.offBlack
425
+ }
426
+ },
427
+ disabled: {
428
+ border: border.primary,
429
+ background: "transparent",
430
+ foreground: color.fadedOffBlack32
431
+ }
340
432
  }
341
433
  },
342
434
  status: {
@@ -380,7 +472,7 @@ const semanticColor = {
380
472
  inner: color.white
381
473
  },
382
474
  icon: {
383
- primary: color.fadedOffBlack64,
475
+ primary: color.fadedOffBlack72,
384
476
  secondary: color.offBlack,
385
477
  inverse: color.white,
386
478
  action: color.blue,
package/dist/index.js CHANGED
@@ -295,6 +295,23 @@ const semanticColor = {
295
295
  foreground: color.white
296
296
  }
297
297
  },
298
+ neutral: {
299
+ default: {
300
+ border: "transparent",
301
+ background: color.fadedOffBlack72,
302
+ foreground: color.white
303
+ },
304
+ hover: {
305
+ border: color.fadedOffBlack72,
306
+ background: color.fadedOffBlack72,
307
+ foreground: color.white
308
+ },
309
+ press: {
310
+ border: color.offBlack,
311
+ background: color.offBlack,
312
+ foreground: color.white
313
+ }
314
+ },
298
315
  disabled: {
299
316
  border: color.fadedOffBlack32,
300
317
  background: color.fadedOffBlack32,
@@ -305,12 +322,12 @@ const semanticColor = {
305
322
  progressive: {
306
323
  default: {
307
324
  border: border.strong,
308
- background: color.white,
325
+ background: "transparent",
309
326
  foreground: color.blue
310
327
  },
311
328
  hover: {
312
329
  border: color.blue,
313
- background: color.white,
330
+ background: "transparent",
314
331
  foreground: color.blue
315
332
  },
316
333
  press: {
@@ -322,12 +339,12 @@ const semanticColor = {
322
339
  destructive: {
323
340
  default: {
324
341
  border: border.strong,
325
- background: color.white,
342
+ background: "transparent",
326
343
  foreground: color.red
327
344
  },
328
345
  hover: {
329
346
  border: color.red,
330
- background: color.white,
347
+ background: "transparent",
331
348
  foreground: color.red
332
349
  },
333
350
  press: {
@@ -336,11 +353,86 @@ const semanticColor = {
336
353
  foreground: color.activeRed
337
354
  }
338
355
  },
356
+ neutral: {
357
+ default: {
358
+ border: border.strong,
359
+ background: "transparent",
360
+ foreground: color.fadedOffBlack72
361
+ },
362
+ hover: {
363
+ border: color.fadedOffBlack72,
364
+ background: "transparent",
365
+ foreground: color.fadedOffBlack72
366
+ },
367
+ press: {
368
+ border: color.offBlack,
369
+ background: "transparent",
370
+ foreground: color.offBlack
371
+ }
372
+ },
339
373
  disabled: {
340
374
  border: border.primary,
341
375
  background: color.offWhite,
342
376
  foreground: color.fadedOffBlack32
343
377
  }
378
+ },
379
+ tertiary: {
380
+ progressive: {
381
+ default: {
382
+ border: "transparent",
383
+ background: "transparent",
384
+ foreground: color.blue
385
+ },
386
+ hover: {
387
+ border: color.blue,
388
+ background: "transparent",
389
+ foreground: color.blue
390
+ },
391
+ press: {
392
+ border: color.activeBlue,
393
+ background: "transparent",
394
+ foreground: color.activeBlue
395
+ }
396
+ },
397
+ destructive: {
398
+ default: {
399
+ border: "transparent",
400
+ background: "transparent",
401
+ foreground: color.red
402
+ },
403
+ hover: {
404
+ border: color.red,
405
+ background: "transparent",
406
+ foreground: color.red
407
+ },
408
+ press: {
409
+ border: color.activeRed,
410
+ background: "transparent",
411
+ foreground: color.activeRed
412
+ }
413
+ },
414
+ neutral: {
415
+ default: {
416
+ border: "transparent",
417
+ background: "transparent",
418
+ foreground: color.fadedOffBlack72
419
+ },
420
+ hover: {
421
+ border: color.fadedOffBlack72,
422
+ background: "transparent",
423
+ foreground: color.fadedOffBlack72
424
+ },
425
+ press: {
426
+ border: color.offBlack,
427
+ background: "transparent",
428
+ foreground: color.offBlack
429
+ }
430
+ },
431
+ disabled: {
432
+ border: border.primary,
433
+ background: "transparent",
434
+ foreground: color.fadedOffBlack32
435
+ }
344
436
  }
345
437
  },
346
438
  status: {
@@ -384,7 +476,7 @@ const semanticColor = {
384
476
  inner: color.white
385
477
  },
386
478
  icon: {
387
- primary: color.fadedOffBlack64,
479
+ primary: color.fadedOffBlack72,
388
480
  secondary: color.offBlack,
389
481
  inverse: color.white,
390
482
  action: color.blue,
package/dist/tokens/semantic-color.d.ts CHANGED
@@ -39,6 +39,23 @@ export declare const semanticColor: {
39
39
  foreground: string;
40
40
  };
41
41
  };
42
+ neutral: {
43
+ default: {
44
+ border: string;
45
+ background: string;
46
+ foreground: string;
47
+ };
48
+ hover: {
49
+ border: string;
50
+ background: string;
51
+ foreground: string;
52
+ };
53
+ press: {
54
+ border: string;
55
+ background: string;
56
+ foreground: string;
57
+ };
58
+ };
42
59
  disabled: {
43
60
  border: string;
44
61
  background: string;
@@ -80,6 +97,81 @@ export declare const semanticColor: {
80
97
  foreground: string;
81
98
  };
82
99
  };
100
+ neutral: {
101
+ default: {
102
+ border: string;
103
+ background: string;
104
+ foreground: string;
105
+ };
106
+ hover: {
107
+ border: string;
108
+ background: string;
109
+ foreground: string;
110
+ };
111
+ press: {
112
+ border: string;
113
+ background: string;
114
+ foreground: string;
115
+ };
116
+ };
117
+ disabled: {
118
+ border: string;
119
+ background: string;
120
+ foreground: string;
121
+ };
122
+ };
123
+ tertiary: {
124
+ progressive: {
125
+ default: {
126
+ border: string;
127
+ background: string;
128
+ foreground: string;
129
+ };
130
+ hover: {
131
+ border: string;
132
+ background: string;
133
+ foreground: string;
134
+ };
135
+ press: {
136
+ border: string;
137
+ background: string;
138
+ foreground: string;
139
+ };
140
+ };
141
+ destructive: {
142
+ default: {
143
+ border: string;
144
+ background: string;
145
+ foreground: string;
146
+ };
147
+ hover: {
148
+ border: string;
149
+ background: string;
150
+ foreground: string;
151
+ };
152
+ press: {
153
+ border: string;
154
+ background: string;
155
+ foreground: string;
156
+ };
157
+ };
158
+ neutral: {
159
+ default: {
160
+ border: string;
161
+ background: string;
162
+ foreground: string;
163
+ };
164
+ hover: {
165
+ border: string;
166
+ background: string;
167
+ foreground: string;
168
+ };
169
+ press: {
170
+ border: string;
171
+ background: string;
172
+ foreground: string;
173
+ };
174
+ };
83
175
  disabled: {
84
176
  border: string;
85
177
  background: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-tokens",
3
- "version": "5.1.0",
3
+ "version": "5.2.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",