@khanacademy/wonder-blocks-button 7.0.6 → 7.0.8

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 (7) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/es/index.js +262 -111
  3. package/dist/index.js +262 -111
  4. package/dist/themes/default.d.ts +258 -65
  5. package/dist/themes/khanmigo.d.ts +245 -41
  6. package/dist/themes/themed-button.d.ts +245 -41
  7. package/package.json +7 -7
package/dist/index.js CHANGED
@@ -39,62 +39,199 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
39
39
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
40
40
  var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
41
41
 
42
+ const {
43
+ semanticColor
44
+ } = tokens__namespace;
42
45
  const textUnderlineOffset = tokens__namespace.spacing.xxxSmall_4;
43
46
  const theme$1 = {
44
47
  color: {
45
- bg: {
46
- action: {
47
- default: tokens__namespace.color.blue,
48
- active: tokens__namespace.color.activeBlue,
49
- inverse: tokens__namespace.color.fadedBlue
50
- },
51
- critical: {
52
- default: tokens__namespace.color.red,
53
- active: tokens__namespace.color.activeRed,
54
- inverse: tokens__namespace.color.fadedRed
55
- },
56
- primary: {
57
- default: tokens__namespace.color.white,
58
- disabled: tokens__namespace.color.offBlack32
59
- },
60
- secondary: {
61
- default: "none",
62
- inverse: "none",
63
- focus: tokens__namespace.color.white,
64
- active: {
65
- action: tokens__namespace.color.fadedBlue,
66
- critical: tokens__namespace.color.fadedRed
48
+ filled: {
49
+ progressive: _extends__default["default"]({}, semanticColor.action.filled.progressive, {
50
+ disabled: {
51
+ border: semanticColor.action.disabled.default,
52
+ background: semanticColor.action.disabled.default,
53
+ foreground: semanticColor.action.disabled.secondary
54
+ }
55
+ }),
56
+ progressiveLight: _extends__default["default"]({}, semanticColor.action.outlined.progressive, {
57
+ hover: _extends__default["default"]({}, semanticColor.action.outlined.progressive.hover, {
58
+ border: semanticColor.border.inverse
59
+ }),
60
+ press: _extends__default["default"]({}, semanticColor.action.outlined.progressive.press, {
61
+ border: semanticColor.action.outlined.progressive.press.background
62
+ }),
63
+ disabled: {
64
+ border: semanticColor.action.outlined.progressive.press.background,
65
+ background: semanticColor.action.outlined.progressive.press.background,
66
+ foreground: semanticColor.action.outlined.progressive.default.foreground
67
+ }
68
+ }),
69
+ destructive: _extends__default["default"]({}, semanticColor.action.filled.destructive, {
70
+ disabled: {
71
+ border: semanticColor.action.disabled.default,
72
+ background: semanticColor.action.disabled.default,
73
+ foreground: semanticColor.action.disabled.secondary
74
+ }
75
+ }),
76
+ destructiveLight: _extends__default["default"]({}, semanticColor.action.outlined.destructive, {
77
+ hover: _extends__default["default"]({}, semanticColor.action.outlined.progressive.hover, {
78
+ border: semanticColor.border.inverse
79
+ }),
80
+ press: _extends__default["default"]({}, semanticColor.action.outlined.destructive.press, {
81
+ border: semanticColor.action.outlined.destructive.press.background
82
+ }),
83
+ disabled: {
84
+ border: semanticColor.action.outlined.destructive.press.background,
85
+ background: semanticColor.action.outlined.destructive.press.background,
86
+ foreground: semanticColor.action.outlined.destructive.default.foreground
87
+ }
88
+ })
89
+ },
90
+ outlined: {
91
+ progressive: _extends__default["default"]({}, semanticColor.action.outlined.progressive, {
92
+ default: _extends__default["default"]({}, semanticColor.action.outlined.progressive.default, {
93
+ background: "transparent"
94
+ }),
95
+ hover: _extends__default["default"]({}, semanticColor.action.outlined.progressive.hover, {
96
+ background: "transparent",
97
+ icon: "transparent"
98
+ }),
99
+ disabled: {
100
+ border: semanticColor.action.disabled.default,
101
+ background: semanticColor.action.outlined.progressive.press.background,
102
+ foreground: semanticColor.text.disabled
103
+ }
104
+ }),
105
+ progressiveLight: {
106
+ default: {
107
+ border: tokens__namespace.color.white64,
108
+ background: "transparent",
109
+ foreground: semanticColor.text.inverse
110
+ },
111
+ hover: {
112
+ border: semanticColor.border.inverse,
113
+ background: "transparent",
114
+ foreground: semanticColor.text.inverse,
115
+ icon: "transparent"
116
+ },
117
+ press: {
118
+ border: tokens__namespace.color.fadedBlue,
119
+ background: semanticColor.action.filled.progressive.press.background,
120
+ foreground: semanticColor.text.inverse
121
+ },
122
+ disabled: {
123
+ border: semanticColor.action.outlined.progressive.press.background,
124
+ background: semanticColor.action.outlined.progressive.press.background,
125
+ foreground: tokens__namespace.color.white50
67
126
  }
68
127
  },
69
- icon: {
70
- secondaryHover: "transparent"
128
+ destructive: _extends__default["default"]({}, semanticColor.action.outlined.destructive, {
129
+ hover: _extends__default["default"]({}, semanticColor.action.outlined.destructive.hover, {
130
+ background: "transparent",
131
+ icon: "transparent"
132
+ }),
133
+ disabled: {
134
+ border: semanticColor.action.disabled.default,
135
+ background: semanticColor.action.outlined.destructive.press.background,
136
+ foreground: semanticColor.text.disabled
137
+ }
138
+ }),
139
+ destructiveLight: {
140
+ default: {
141
+ border: tokens__namespace.color.white64,
142
+ background: "transparent",
143
+ foreground: semanticColor.text.inverse
144
+ },
145
+ hover: {
146
+ border: semanticColor.border.inverse,
147
+ background: "transparent",
148
+ foreground: semanticColor.text.inverse,
149
+ icon: "transparent"
150
+ },
151
+ press: {
152
+ border: tokens__namespace.color.fadedRed,
153
+ background: semanticColor.action.filled.destructive.press.background,
154
+ foreground: semanticColor.text.inverse
155
+ },
156
+ disabled: {
157
+ border: semanticColor.action.outlined.destructive.press.background,
158
+ background: semanticColor.action.outlined.destructive.press.background,
159
+ foreground: tokens__namespace.color.white50
160
+ }
71
161
  }
72
162
  },
73
163
  text: {
74
- disabled: tokens__namespace.color.offBlack32,
75
- inverse: tokens__namespace.color.white,
76
- primary: {
77
- disabled: tokens__namespace.color.white64
78
- },
79
- secondary: {
80
- inverse: tokens__namespace.color.white50
164
+ progressive: {
165
+ default: {
166
+ background: "transparent",
167
+ foreground: semanticColor.action.outlined.progressive.default.foreground
168
+ },
169
+ hover: {
170
+ border: semanticColor.action.outlined.progressive.hover.border
171
+ },
172
+ press: {
173
+ foreground: semanticColor.action.outlined.progressive.press.foreground
174
+ },
175
+ disabled: {
176
+ border: semanticColor.action.disabled.default,
177
+ foreground: semanticColor.text.disabled
178
+ }
81
179
  },
82
- icon: {
83
- secondaryHover: "inherit"
84
- }
85
- },
86
- border: {
87
- disabled: tokens__namespace.color.offBlack32,
88
- primary: {
89
- inverse: tokens__namespace.color.white
180
+ progressiveLight: {
181
+ default: {
182
+ border: tokens__namespace.color.white64,
183
+ background: "transparent",
184
+ foreground: semanticColor.text.inverse
185
+ },
186
+ hover: {
187
+ border: semanticColor.border.inverse,
188
+ background: "transparent",
189
+ foreground: semanticColor.text.inverse
190
+ },
191
+ press: {
192
+ border: semanticColor.border.inverse,
193
+ foreground: tokens__namespace.color.fadedBlue
194
+ },
195
+ disabled: {
196
+ border: semanticColor.action.outlined.progressive.press.background,
197
+ foreground: tokens__namespace.color.white50
198
+ }
90
199
  },
91
- secondary: {
92
- action: tokens__namespace.color.offBlack50,
93
- critical: tokens__namespace.color.offBlack50,
94
- inverse: tokens__namespace.color.white50
200
+ destructive: {
201
+ default: {
202
+ background: "transparent",
203
+ foreground: semanticColor.action.outlined.destructive.default.foreground
204
+ },
205
+ hover: {
206
+ border: semanticColor.action.outlined.destructive.hover.border
207
+ },
208
+ press: {
209
+ foreground: semanticColor.action.outlined.destructive.press.foreground
210
+ },
211
+ disabled: {
212
+ border: semanticColor.action.disabled.default,
213
+ foreground: semanticColor.text.disabled
214
+ }
95
215
  },
96
- tertiary: {
97
- inverse: tokens__namespace.color.white
216
+ destructiveLight: {
217
+ default: {
218
+ border: tokens__namespace.color.white64,
219
+ background: "transparent",
220
+ foreground: semanticColor.text.inverse
221
+ },
222
+ hover: {
223
+ border: semanticColor.border.inverse,
224
+ background: "transparent",
225
+ foreground: semanticColor.text.inverse
226
+ },
227
+ press: {
228
+ border: semanticColor.border.inverse,
229
+ foreground: tokens__namespace.color.fadedRed
230
+ },
231
+ disabled: {
232
+ border: semanticColor.action.outlined.destructive.press.background,
233
+ foreground: tokens__namespace.color.white50
234
+ }
98
235
  }
99
236
  }
100
237
  },
@@ -105,7 +242,8 @@ const theme$1 = {
105
242
  disabled: tokens__namespace.border.width.thin
106
243
  },
107
244
  offset: {
108
- primary: tokens__namespace.spacing.xxxxSmall_2
245
+ primary: tokens__namespace.spacing.xxxxSmall_2,
246
+ secondary: -tokens__namespace.spacing.xxxxSmall_2
109
247
  },
110
248
  radius: {
111
249
  default: tokens__namespace.border.radius.medium_4,
@@ -155,30 +293,37 @@ const theme$1 = {
155
293
  }
156
294
  };
157
295
 
296
+ const secondaryBgColor = tokens__namespace.color.offWhite;
158
297
  const theme = wonderBlocksTheming.mergeTheme(theme$1, {
159
298
  color: {
160
- bg: {
161
- secondary: {
162
- default: tokens__namespace.color.offWhite,
163
- active: {
164
- action: tokens__namespace.color.fadedBlue8,
165
- critical: tokens__namespace.color.fadedRed8
299
+ outlined: {
300
+ progressive: {
301
+ default: {
302
+ border: tokens__namespace.color.fadedBlue,
303
+ background: secondaryBgColor
166
304
  },
167
- focus: tokens__namespace.color.offWhite
305
+ hover: {
306
+ background: secondaryBgColor,
307
+ icon: tokens__namespace.color.fadedBlue16,
308
+ foreground: tokens__namespace.semanticColor.action.outlined.progressive.default.foreground
309
+ },
310
+ press: {
311
+ background: tokens__namespace.color.fadedBlue8
312
+ }
168
313
  },
169
- icon: {
170
- secondaryHover: tokens__namespace.color.fadedBlue16
171
- }
172
- },
173
- border: {
174
- secondary: {
175
- action: tokens__namespace.color.fadedBlue,
176
- critical: tokens__namespace.color.fadedRed
177
- }
178
- },
179
- text: {
180
- icon: {
181
- secondaryHover: tokens__namespace.color.blue
314
+ destructive: {
315
+ default: {
316
+ border: tokens__namespace.color.fadedRed,
317
+ background: secondaryBgColor
318
+ },
319
+ hover: {
320
+ background: secondaryBgColor,
321
+ icon: tokens__namespace.color.fadedRed16,
322
+ foreground: tokens__namespace.semanticColor.action.outlined.destructive.default.foreground
323
+ },
324
+ press: {
325
+ background: tokens__namespace.color.fadedRed8
326
+ }
182
327
  }
183
328
  }
184
329
  },
@@ -311,7 +456,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
311
456
  testId: `${testId || "button"}-spinner`
312
457
  }), endIcon && React__namespace.createElement(wonderBlocksCore.View, {
313
458
  testId: testId ? `${testId}-end-icon-wrapper` : undefined,
314
- style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && sharedStyles.iconWrapperSecondaryHovered]
459
+ style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
315
460
  }, React__namespace.createElement(ButtonIcon, {
316
461
  size: iconSize,
317
462
  icon: endIcon,
@@ -411,10 +556,6 @@ const themedSharedStyles = theme => ({
411
556
  padding: theme.padding.xsmall,
412
557
  minWidth: "auto"
413
558
  },
414
- iconWrapperSecondaryHovered: {
415
- backgroundColor: theme.color.bg.icon.secondaryHover,
416
- color: theme.color.text.icon.secondaryHover
417
- },
418
559
  endIconWrapper: {
419
560
  marginLeft: theme.padding.small,
420
561
  marginRight: theme.margin.icon.offset
@@ -425,32 +566,33 @@ const themedSharedStyles = theme => ({
425
566
  });
426
567
  const styles = {};
427
568
  const _generateStyles = (buttonColor = "default", kind, light, size, theme, themeName) => {
428
- const color = buttonColor === "destructive" ? theme.color.bg.critical.default : theme.color.bg.action.default;
429
- const buttonType = `${color}-${kind}-${light}-${size}-${themeName}`;
569
+ const buttonType = `${buttonColor}-${kind}-${light}-${size}-${themeName}`;
430
570
  if (styles[buttonType]) {
431
571
  return styles[buttonType];
432
572
  }
433
- const fadedColor = buttonColor === "destructive" ? theme.color.bg.critical.inverse : theme.color.bg.action.inverse;
434
- const activeColor = buttonColor === "destructive" ? theme.color.bg.critical.active : theme.color.bg.action.active;
435
573
  const padding = size === "large" ? theme.padding.xLarge : theme.padding.large;
574
+ const colorToAction = light ? buttonColor === "destructive" ? "destructiveLight" : "progressiveLight" : buttonColor === "destructive" ? "destructive" : "progressive";
436
575
  let newStyles = {};
437
576
  if (kind === "primary") {
577
+ const themeColorAction = theme.color.filled[colorToAction];
438
578
  const focusStyling = {
439
- outlineColor: light ? theme.color.bg.primary.default : color,
579
+ outlineColor: themeColorAction.hover.border,
440
580
  outlineOffset: theme.border.offset.primary,
441
581
  outlineStyle: "solid",
442
582
  outlineWidth: theme.border.width.focused
443
583
  };
444
584
  const activePressedStyling = {
445
- background: light ? fadedColor : activeColor,
446
- outlineColor: light ? fadedColor : activeColor
585
+ background: themeColorAction.press.background,
586
+ outlineColor: themeColorAction.press.border,
587
+ outlineOffset: theme.border.offset.primary,
588
+ outlineStyle: "solid",
589
+ outlineWidth: theme.border.width.focused
447
590
  };
448
591
  newStyles = {
449
592
  default: {
450
- background: light ? theme.color.bg.primary.default : color,
451
- color: light ? color : theme.color.text.inverse,
452
- paddingLeft: padding,
453
- paddingRight: padding,
593
+ background: themeColorAction.default.background,
594
+ color: themeColorAction.default.foreground,
595
+ paddingInline: padding,
454
596
  [":hover:not([aria-disabled=true])"]: focusStyling,
455
597
  [":focus-visible:not([aria-disabled=true])"]: focusStyling,
456
598
  [":active:not([aria-disabled=true])"]: activePressedStyling
@@ -458,41 +600,38 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
458
600
  focused: focusStyling,
459
601
  pressed: activePressedStyling,
460
602
  disabled: {
461
- background: light ? fadedColor : theme.color.bg.primary.disabled,
462
- color: light ? color : theme.color.text.primary.disabled,
603
+ background: themeColorAction.disabled.background,
604
+ color: themeColorAction.disabled.foreground,
463
605
  cursor: "default",
464
606
  ":focus-visible": _extends__default["default"]({}, focusStyling, {
465
- outlineColor: light ? fadedColor : theme.color.bg.primary.disabled
607
+ outlineColor: themeColorAction.disabled.border
466
608
  })
467
609
  }
468
610
  };
469
611
  } else if (kind === "secondary") {
470
- const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
471
- const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
612
+ const themeColorAction = theme.color.outlined[colorToAction];
472
613
  const focusStyling = {
473
- background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.focus,
474
- borderColor: "transparent",
475
- outlineColor: light ? theme.color.border.primary.inverse : color,
614
+ background: themeColorAction.hover.background,
615
+ outlineColor: themeColorAction.hover.border,
476
616
  outlineStyle: "solid",
617
+ outlineOffset: theme.border.offset.secondary,
477
618
  outlineWidth: theme.border.width.focused
478
619
  };
479
620
  const activePressedStyling = {
480
- background: light ? activeColor : secondaryActiveColor,
481
- color: light ? fadedColor : activeColor,
482
- borderColor: "transparent",
483
- outlineColor: light ? fadedColor : activeColor,
621
+ background: themeColorAction.press.background,
622
+ color: themeColorAction.press.foreground,
623
+ outlineColor: themeColorAction.press.border,
484
624
  outlineStyle: "solid",
485
625
  outlineWidth: theme.border.width.focused
486
626
  };
487
627
  newStyles = {
488
628
  default: {
489
- background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
490
- color: light ? theme.color.text.inverse : color,
491
- borderColor: light ? theme.color.border.secondary.inverse : secondaryBorderColor,
629
+ background: themeColorAction.default.background,
630
+ color: themeColorAction.default.foreground,
631
+ borderColor: themeColorAction.default.border,
492
632
  borderStyle: "solid",
493
633
  borderWidth: theme.border.width.secondary,
494
- paddingLeft: padding,
495
- paddingRight: padding,
634
+ paddingInline: padding,
496
635
  [":hover:not([aria-disabled=true])"]: focusStyling,
497
636
  [":focus-visible:not([aria-disabled=true])"]: focusStyling,
498
637
  [":active:not([aria-disabled=true])"]: activePressedStyling
@@ -500,35 +639,42 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
500
639
  focused: focusStyling,
501
640
  pressed: activePressedStyling,
502
641
  disabled: {
503
- color: light ? theme.color.text.secondary.inverse : theme.color.text.disabled,
504
- outlineColor: light ? fadedColor : theme.color.border.disabled,
642
+ color: themeColorAction.disabled.foreground,
643
+ borderColor: themeColorAction.disabled.border,
505
644
  cursor: "default",
506
645
  ":focus-visible": {
507
- outlineColor: light ? theme.color.border.secondary.inverse : theme.color.border.disabled,
646
+ borderColor: themeColorAction.disabled.border,
647
+ outlineColor: themeColorAction.disabled.border,
648
+ outlineOffset: theme.border.offset.secondary,
508
649
  outlineStyle: "solid",
509
650
  outlineWidth: theme.border.width.disabled
510
651
  }
652
+ },
653
+ iconWrapperHovered: {
654
+ backgroundColor: themeColorAction.hover.icon,
655
+ color: themeColorAction.hover.foreground
511
656
  }
512
657
  };
513
658
  } else if (kind === "tertiary") {
659
+ const themeColorAction = theme.color.text[colorToAction];
514
660
  const focusStyling = {
515
661
  outlineStyle: "solid",
516
- outlineColor: light ? theme.color.border.tertiary.inverse : color,
662
+ borderColor: "transparent",
663
+ outlineColor: themeColorAction.hover.border,
517
664
  outlineWidth: theme.border.width.focused,
518
665
  borderRadius: theme.border.radius.default
519
666
  };
520
667
  const activePressedStyling = {
521
- color: light ? fadedColor : activeColor,
668
+ color: themeColorAction.press.foreground,
522
669
  textDecoration: "underline",
523
670
  textDecorationThickness: theme.size.underline.active,
524
671
  textUnderlineOffset: theme.font.offset.default
525
672
  };
526
673
  newStyles = {
527
674
  default: {
528
- background: "none",
529
- color: light ? theme.color.text.inverse : color,
530
- paddingLeft: 0,
531
- paddingRight: 0,
675
+ background: themeColorAction.default.background,
676
+ color: themeColorAction.default.foreground,
677
+ paddingInline: 0,
532
678
  [":hover:not([aria-disabled=true])"]: {
533
679
  textUnderlineOffset: theme.font.offset.default,
534
680
  textDecoration: "underline",
@@ -540,11 +686,16 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
540
686
  focused: focusStyling,
541
687
  pressed: activePressedStyling,
542
688
  disabled: {
543
- color: light ? fadedColor : theme.color.text.disabled,
544
- cursor: "default"
689
+ color: themeColorAction.disabled.foreground,
690
+ cursor: "default",
691
+ ":focus-visible": {
692
+ outlineColor: themeColorAction.disabled.border,
693
+ outlineStyle: "solid",
694
+ outlineWidth: theme.border.width.disabled
695
+ }
545
696
  },
546
697
  disabledFocus: {
547
- outlineColor: light ? theme.color.border.tertiary.inverse : theme.color.border.disabled
698
+ outlineColor: themeColorAction.disabled.border
548
699
  }
549
700
  };
550
701
  } else {