@khanacademy/wonder-blocks-button 8.0.3 → 9.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 (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/components/button-core.d.ts +1 -1
  3. package/dist/components/button.d.ts +0 -9
  4. package/dist/es/index.js +64 -189
  5. package/dist/index.js +64 -189
  6. package/dist/themes/default.d.ts +12 -164
  7. package/dist/themes/khanmigo.d.ts +12 -164
  8. package/dist/themes/themed-button.d.ts +12 -164
  9. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -45,184 +45,42 @@ const textUnderlineOffset = tokens__namespace.spacing.xxxSmall_4;
45
45
  const focusOutline = {
46
46
  border: semanticColor.focus.outer
47
47
  };
48
- const focusOutlineLight = {
49
- border: semanticColor.border.inverse
50
- };
51
48
  const theme$1 = {
52
49
  color: {
53
50
  primary: {
54
51
  progressive: _extends__default["default"]({}, semanticColor.action.primary.progressive, {
55
- focus: focusOutline,
56
- disabled: {
57
- background: semanticColor.action.primary.disabled.background,
58
- foreground: semanticColor.action.primary.disabled.foreground
59
- }
60
- }),
61
- progressiveLight: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
62
- default: _extends__default["default"]({}, semanticColor.action.secondary.progressive.default, {
63
- background: semanticColor.surface.primary
64
- }),
65
- focus: focusOutlineLight,
66
- hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
67
- border: semanticColor.border.inverse,
68
- backgrond: semanticColor.surface.primary
69
- }),
70
- press: _extends__default["default"]({}, semanticColor.action.secondary.progressive.press, {
71
- border: semanticColor.action.secondary.progressive.press.background
72
- }),
73
- disabled: {
74
- background: semanticColor.action.secondary.progressive.press.background,
75
- foreground: semanticColor.action.secondary.progressive.default.foreground
76
- }
52
+ focus: focusOutline
77
53
  }),
78
54
  destructive: _extends__default["default"]({}, semanticColor.action.primary.destructive, {
79
- focus: focusOutline,
80
- disabled: {
81
- background: semanticColor.action.primary.disabled.background,
82
- foreground: semanticColor.action.primary.disabled.foreground
83
- }
55
+ focus: focusOutline
84
56
  }),
85
- destructiveLight: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
86
- default: _extends__default["default"]({}, semanticColor.action.secondary.destructive.default, {
87
- background: semanticColor.surface.primary
88
- }),
89
- focus: focusOutlineLight,
90
- hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
91
- border: semanticColor.border.inverse,
92
- background: semanticColor.surface.primary
93
- }),
94
- press: _extends__default["default"]({}, semanticColor.action.secondary.destructive.press, {
95
- border: semanticColor.action.secondary.destructive.press.background
96
- }),
97
- disabled: {
98
- background: semanticColor.action.secondary.destructive.press.background,
99
- foreground: semanticColor.action.secondary.destructive.default.foreground
100
- }
101
- })
57
+ disabled: semanticColor.action.primary.disabled
102
58
  },
103
59
  secondary: {
104
60
  progressive: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
105
61
  focus: focusOutline,
106
62
  hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
107
63
  icon: "transparent"
108
- }),
109
- disabled: {
110
- border: semanticColor.action.primary.disabled.border,
111
- foreground: semanticColor.action.secondary.disabled.foreground
112
- }
64
+ })
113
65
  }),
114
- progressiveLight: {
115
- default: {
116
- border: tokens__namespace.color.white64,
117
- background: "transparent",
118
- foreground: semanticColor.text.inverse
119
- },
120
- focus: focusOutlineLight,
121
- hover: {
122
- border: semanticColor.border.inverse,
123
- background: "transparent",
124
- foreground: semanticColor.text.inverse,
125
- icon: "transparent"
126
- },
127
- press: {
128
- border: tokens__namespace.color.fadedBlue,
129
- background: semanticColor.action.primary.progressive.press.background,
130
- foreground: semanticColor.text.inverse
131
- },
132
- disabled: {
133
- border: semanticColor.action.secondary.progressive.press.background,
134
- background: semanticColor.action.secondary.progressive.press.background,
135
- foreground: tokens__namespace.color.white50
136
- }
137
- },
138
66
  destructive: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
139
67
  focus: focusOutline,
140
68
  hover: _extends__default["default"]({}, semanticColor.action.secondary.destructive.hover, {
141
69
  icon: "transparent"
142
- }),
143
- disabled: {
144
- border: semanticColor.action.primary.disabled.border,
145
- foreground: semanticColor.action.secondary.disabled.foreground
146
- }
70
+ })
147
71
  }),
148
- destructiveLight: {
149
- default: {
150
- border: tokens__namespace.color.white64,
151
- background: "transparent",
152
- foreground: semanticColor.text.inverse
153
- },
154
- focus: focusOutlineLight,
155
- hover: {
156
- border: semanticColor.border.inverse,
157
- background: "transparent",
158
- foreground: semanticColor.text.inverse,
159
- icon: "transparent"
160
- },
161
- press: {
162
- border: tokens__namespace.color.fadedRed,
163
- background: semanticColor.action.primary.destructive.press.background,
164
- foreground: semanticColor.text.inverse
165
- },
166
- disabled: {
167
- border: semanticColor.action.secondary.destructive.press.background,
168
- background: semanticColor.action.secondary.destructive.press.background,
169
- foreground: tokens__namespace.color.white50
170
- }
171
- }
72
+ disabled: _extends__default["default"]({}, semanticColor.action.secondary.disabled, {
73
+ border: semanticColor.action.primary.disabled.border
74
+ })
172
75
  },
173
76
  tertiary: {
174
77
  progressive: _extends__default["default"]({}, semanticColor.action.tertiary.progressive, {
175
- focus: focusOutline,
176
- disabled: {
177
- foreground: semanticColor.action.tertiary.disabled.foreground
178
- }
78
+ focus: focusOutline
179
79
  }),
180
- progressiveLight: {
181
- default: {
182
- border: tokens__namespace.color.white64,
183
- background: "transparent",
184
- foreground: semanticColor.text.inverse
185
- },
186
- focus: focusOutlineLight,
187
- hover: {
188
- border: semanticColor.border.inverse,
189
- background: "transparent",
190
- foreground: semanticColor.text.inverse
191
- },
192
- press: {
193
- border: semanticColor.border.inverse,
194
- foreground: tokens__namespace.color.fadedBlue
195
- },
196
- disabled: {
197
- foreground: tokens__namespace.color.white50
198
- }
199
- },
200
80
  destructive: _extends__default["default"]({}, semanticColor.action.tertiary.destructive, {
201
- focus: focusOutline,
202
- disabled: {
203
- foreground: semanticColor.action.tertiary.disabled.foreground
204
- }
81
+ focus: focusOutline
205
82
  }),
206
- destructiveLight: {
207
- default: {
208
- border: tokens__namespace.color.white64,
209
- background: "transparent",
210
- foreground: semanticColor.text.inverse
211
- },
212
- focus: focusOutlineLight,
213
- hover: {
214
- border: semanticColor.border.inverse,
215
- background: "transparent",
216
- foreground: semanticColor.text.inverse
217
- },
218
- press: {
219
- border: semanticColor.border.inverse,
220
- foreground: tokens__namespace.color.fadedRed
221
- },
222
- disabled: {
223
- foreground: tokens__namespace.color.white50
224
- }
225
- }
83
+ disabled: semanticColor.action.tertiary.disabled
226
84
  }
227
85
  },
228
86
  border: {
@@ -379,7 +237,7 @@ function ButtonIcon({
379
237
  }
380
238
  }
381
239
 
382
- const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "light", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
240
+ const _excluded$1 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "labelStyle", "pressed", "size", "style", "testId", "type", "spinner", "startIcon", "endIcon", "id", "waiting"];
383
241
  const StyledA = wonderBlocksCore.addStyle("a");
384
242
  const StyledButton = wonderBlocksCore.addStyle("button");
385
243
  const StyledLink = wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);
@@ -400,7 +258,6 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
400
258
  href = undefined,
401
259
  kind = "primary",
402
260
  labelStyle,
403
- light = false,
404
261
  pressed,
405
262
  size = "medium",
406
263
  style,
@@ -412,9 +269,9 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
412
269
  id
413
270
  } = props,
414
271
  restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
415
- const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
272
+ const buttonStyles = _generateStyles(color, kind, size, theme, themeName);
416
273
  const disabled = spinner || disabledProp;
417
- const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
274
+ const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
418
275
  const commonProps = _extends__default["default"]({
419
276
  "data-testid": testId,
420
277
  id: id,
@@ -446,7 +303,7 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
446
303
  testId: `${testId || "button"}-spinner`
447
304
  }), endIcon && React__namespace.createElement(wonderBlocksCore.View, {
448
305
  testId: testId ? `${testId}-end-icon-wrapper` : undefined,
449
- style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
306
+ style: [styles.endIcon, sharedStyles.iconWrapper, sharedStyles.endIconWrapper, kind === "tertiary" && sharedStyles.endIconWrapperTertiary, !disabled && (focused || hovered) && kind !== "primary" && buttonStyles.iconWrapperHovered]
450
307
  }, React__namespace.createElement(ButtonIcon, {
451
308
  size: iconSize,
452
309
  icon: endIcon,
@@ -553,13 +410,19 @@ const themedSharedStyles = theme => ({
553
410
  }
554
411
  });
555
412
  const styles = {};
556
- const _generateStyles = (buttonColor = "default", kind, light, size, theme, themeName) => {
557
- const buttonType = `${buttonColor}-${kind}-${light}-${size}-${themeName}`;
413
+ const _generateStyles = (buttonColor = "default", kind, size, theme, themeName) => {
414
+ const buttonType = `${buttonColor}-${kind}-${size}-${themeName}`;
558
415
  if (styles[buttonType]) {
559
416
  return styles[buttonType];
560
417
  }
561
418
  const padding = size === "large" ? theme.padding.xLarge : theme.padding.large;
562
- const colorToAction = light ? buttonColor === "destructive" ? "destructiveLight" : "progressiveLight" : buttonColor === "destructive" ? "destructive" : "progressive";
419
+ const colorToAction = buttonColor === "destructive" ? "destructive" : "progressive";
420
+ const disabledState = theme.color[kind].disabled;
421
+ const disabledStateStyles = {
422
+ borderColor: disabledState.border,
423
+ background: disabledState.background,
424
+ color: disabledState.foreground
425
+ };
563
426
  let newStyles = {};
564
427
  if (kind === "primary") {
565
428
  const themeColorAction = theme.color.primary[colorToAction];
@@ -586,18 +449,22 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
586
449
  background: themeColorAction.default.background,
587
450
  color: themeColorAction.default.foreground,
588
451
  paddingInline: padding,
589
- [":hover:not([aria-disabled=true])"]: hoverStyling,
590
- [":focus-visible:not([aria-disabled=true])"]: focusStyling,
591
- [":active:not([aria-disabled=true])"]: activePressedStyling
452
+ ":hover": hoverStyling,
453
+ ":focus-visible": focusStyling,
454
+ ":active": activePressedStyling
592
455
  },
593
456
  focused: focusStyling,
594
457
  pressed: activePressedStyling,
595
- disabled: {
596
- background: themeColorAction.disabled.background,
597
- color: themeColorAction.disabled.foreground,
598
- cursor: "default",
458
+ disabled: _extends__default["default"]({}, disabledStateStyles, {
459
+ cursor: "not-allowed",
460
+ ":hover": _extends__default["default"]({}, disabledStateStyles, {
461
+ outline: "none"
462
+ }),
463
+ ":active": _extends__default["default"]({}, disabledStateStyles, {
464
+ outline: "none"
465
+ }),
599
466
  ":focus-visible": focusStyling
600
- }
467
+ })
601
468
  };
602
469
  } else if (kind === "secondary") {
603
470
  const themeColorAction = theme.color.secondary[colorToAction];
@@ -611,7 +478,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
611
478
  outlineColor: themeColorAction.focus.border
612
479
  });
613
480
  const hoverStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
614
- outlineColor: themeColorAction.hover.border
481
+ borderColor: themeColorAction.hover.border
615
482
  });
616
483
  const activePressedStyling = {
617
484
  background: themeColorAction.press.background,
@@ -628,18 +495,22 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
628
495
  borderStyle: "solid",
629
496
  borderWidth: theme.border.width.secondary,
630
497
  paddingInline: padding,
631
- [":hover:not([aria-disabled=true])"]: hoverStyling,
632
- [":focus-visible:not([aria-disabled=true])"]: focusStyling,
633
- [":active:not([aria-disabled=true])"]: activePressedStyling
498
+ ":hover": hoverStyling,
499
+ ":focus-visible": focusStyling,
500
+ ":active": activePressedStyling
634
501
  },
635
502
  focused: focusStyling,
636
503
  pressed: activePressedStyling,
637
- disabled: {
638
- color: themeColorAction.disabled.foreground,
639
- borderColor: themeColorAction.disabled.border,
640
- cursor: "default",
504
+ disabled: _extends__default["default"]({}, disabledStateStyles, {
505
+ cursor: "not-allowed",
506
+ ":hover": _extends__default["default"]({}, disabledStateStyles, {
507
+ outline: "none"
508
+ }),
509
+ ":active": _extends__default["default"]({}, disabledStateStyles, {
510
+ outline: "none"
511
+ }),
641
512
  ":focus-visible": focusStyling
642
- },
513
+ }),
643
514
  iconWrapperHovered: {
644
515
  backgroundColor: themeColorAction.hover.icon,
645
516
  color: themeColorAction.hover.foreground
@@ -660,27 +531,33 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
660
531
  textDecorationThickness: theme.size.underline.active,
661
532
  textUnderlineOffset: theme.font.offset.default
662
533
  };
534
+ const sharedDisabledStyling = _extends__default["default"]({}, disabledStateStyles, {
535
+ textDecoration: "none",
536
+ textDecorationThickness: "unset",
537
+ textUnderlineOffset: "unset",
538
+ outline: "none"
539
+ });
663
540
  newStyles = {
664
541
  default: {
665
542
  background: themeColorAction.default.background,
666
543
  color: themeColorAction.default.foreground,
667
544
  paddingInline: 0,
668
- [":hover:not([aria-disabled=true])"]: {
545
+ ":hover": {
669
546
  textUnderlineOffset: theme.font.offset.default,
670
547
  textDecoration: "underline",
671
548
  textDecorationThickness: theme.size.underline.hover
672
549
  },
673
- [":focus-visible:not([aria-disabled=true])"]: focusStyling,
674
- [":active:not([aria-disabled=true])"]: activePressedStyling
550
+ ":focus-visible": focusStyling,
551
+ ":active": activePressedStyling
675
552
  },
676
553
  focused: focusStyling,
677
554
  pressed: activePressedStyling,
678
- disabled: {
679
- color: themeColorAction.disabled.foreground,
680
- cursor: "default",
555
+ disabled: _extends__default["default"]({}, disabledStateStyles, {
556
+ cursor: "not-allowed",
557
+ ":hover": sharedDisabledStyling,
558
+ ":active": sharedDisabledStyling,
681
559
  ":focus-visible": focusStyling
682
- },
683
- disabledFocus: focusStyling
560
+ })
684
561
  };
685
562
  } else {
686
563
  throw new Error("Button kind not recognized");
@@ -689,7 +566,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
689
566
  return styles[buttonType];
690
567
  };
691
568
 
692
- const _excluded = ["href", "type", "children", "skipClientNav", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel", "color", "kind", "light", "size", "disabled", "spinner"];
569
+ const _excluded = ["href", "type", "children", "skipClientNav", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel", "color", "kind", "size", "disabled", "spinner"];
693
570
  const Button = React__namespace.forwardRef(function Button(props, ref) {
694
571
  const {
695
572
  href = undefined,
@@ -704,7 +581,6 @@ const Button = React__namespace.forwardRef(function Button(props, ref) {
704
581
  rel,
705
582
  color = "default",
706
583
  kind = "primary",
707
- light = false,
708
584
  size = "medium",
709
585
  disabled = false,
710
586
  spinner = false
@@ -718,7 +594,6 @@ const Button = React__namespace.forwardRef(function Button(props, ref) {
718
594
  spinner: spinner || state.waiting,
719
595
  color: color,
720
596
  kind: kind,
721
- light: light,
722
597
  size: size,
723
598
  skipClientNav: skipClientNav,
724
599
  href: href,
package/dist/themes/default.d.ts CHANGED
@@ -8,10 +8,6 @@ declare const theme: {
8
8
  focus: {
9
9
  border: string;
10
10
  };
11
- disabled: {
12
- background: string;
13
- foreground: string;
14
- };
15
11
  default: {
16
12
  border: string;
17
13
  background: string;
@@ -28,39 +24,10 @@ declare const theme: {
28
24
  foreground: string;
29
25
  };
30
26
  };
31
- progressiveLight: {
32
- default: {
33
- background: string;
34
- border: string;
35
- foreground: string;
36
- };
37
- focus: {
38
- border: string;
39
- };
40
- hover: {
41
- border: string;
42
- backgrond: string;
43
- background: string;
44
- foreground: string;
45
- };
46
- press: {
47
- border: string;
48
- background: string;
49
- foreground: string;
50
- };
51
- disabled: {
52
- background: string;
53
- foreground: string;
54
- };
55
- };
56
27
  destructive: {
57
28
  focus: {
58
29
  border: string;
59
30
  };
60
- disabled: {
61
- background: string;
62
- foreground: string;
63
- };
64
31
  default: {
65
32
  border: string;
66
33
  background: string;
@@ -77,29 +44,10 @@ declare const theme: {
77
44
  foreground: string;
78
45
  };
79
46
  };
80
- destructiveLight: {
81
- default: {
82
- background: string;
83
- border: string;
84
- foreground: string;
85
- };
86
- focus: {
87
- border: string;
88
- };
89
- hover: {
90
- border: string;
91
- background: string;
92
- foreground: string;
93
- };
94
- press: {
95
- border: string;
96
- background: string;
97
- foreground: string;
98
- };
99
- disabled: {
100
- background: string;
101
- foreground: string;
102
- };
47
+ disabled: {
48
+ border: string;
49
+ background: string;
50
+ foreground: string;
103
51
  };
104
52
  };
105
53
  /**
@@ -118,10 +66,6 @@ declare const theme: {
118
66
  background: string;
119
67
  foreground: string;
120
68
  };
121
- disabled: {
122
- border: string;
123
- foreground: string;
124
- };
125
69
  default: {
126
70
  border: string;
127
71
  background: string;
@@ -133,32 +77,6 @@ declare const theme: {
133
77
  foreground: string;
134
78
  };
135
79
  };
136
- progressiveLight: {
137
- default: {
138
- border: string;
139
- background: string;
140
- foreground: string;
141
- };
142
- focus: {
143
- border: string;
144
- };
145
- hover: {
146
- border: string;
147
- background: string;
148
- foreground: string;
149
- icon: string;
150
- };
151
- press: {
152
- border: string;
153
- background: string;
154
- foreground: string;
155
- };
156
- disabled: {
157
- border: string;
158
- background: string;
159
- foreground: string;
160
- };
161
- };
162
80
  destructive: {
163
81
  focus: {
164
82
  border: string;
@@ -169,10 +87,6 @@ declare const theme: {
169
87
  background: string;
170
88
  foreground: string;
171
89
  };
172
- disabled: {
173
- border: string;
174
- foreground: string;
175
- };
176
90
  default: {
177
91
  border: string;
178
92
  background: string;
@@ -184,31 +98,10 @@ declare const theme: {
184
98
  foreground: string;
185
99
  };
186
100
  };
187
- destructiveLight: {
188
- default: {
189
- border: string;
190
- background: string;
191
- foreground: string;
192
- };
193
- focus: {
194
- border: string;
195
- };
196
- hover: {
197
- border: string;
198
- background: string;
199
- foreground: string;
200
- icon: string;
201
- };
202
- press: {
203
- border: string;
204
- background: string;
205
- foreground: string;
206
- };
207
- disabled: {
208
- border: string;
209
- background: string;
210
- foreground: string;
211
- };
101
+ disabled: {
102
+ border: string;
103
+ background: string;
104
+ foreground: string;
212
105
  };
213
106
  };
214
107
  /**
@@ -221,9 +114,6 @@ declare const theme: {
221
114
  focus: {
222
115
  border: string;
223
116
  };
224
- disabled: {
225
- foreground: string;
226
- };
227
117
  default: {
228
118
  border: string;
229
119
  background: string;
@@ -240,35 +130,10 @@ declare const theme: {
240
130
  foreground: string;
241
131
  };
242
132
  };
243
- progressiveLight: {
244
- default: {
245
- border: string;
246
- background: string;
247
- foreground: string;
248
- };
249
- focus: {
250
- border: string;
251
- };
252
- hover: {
253
- border: string;
254
- background: string;
255
- foreground: string;
256
- };
257
- press: {
258
- border: string;
259
- foreground: string;
260
- };
261
- disabled: {
262
- foreground: string;
263
- };
264
- };
265
133
  destructive: {
266
134
  focus: {
267
135
  border: string;
268
136
  };
269
- disabled: {
270
- foreground: string;
271
- };
272
137
  default: {
273
138
  border: string;
274
139
  background: string;
@@ -285,27 +150,10 @@ declare const theme: {
285
150
  foreground: string;
286
151
  };
287
152
  };
288
- destructiveLight: {
289
- default: {
290
- border: string;
291
- background: string;
292
- foreground: string;
293
- };
294
- focus: {
295
- border: string;
296
- };
297
- hover: {
298
- border: string;
299
- background: string;
300
- foreground: string;
301
- };
302
- press: {
303
- border: string;
304
- foreground: string;
305
- };
306
- disabled: {
307
- foreground: string;
308
- };
153
+ disabled: {
154
+ border: string;
155
+ background: string;
156
+ foreground: string;
309
157
  };
310
158
  };
311
159
  };