@khanacademy/wonder-blocks-button 7.1.1 → 7.1.2
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.
- package/CHANGELOG.md +25 -0
- package/dist/es/index.js +87 -83
- package/dist/index.js +87 -83
- package/dist/themes/default.d.ts +38 -12
- package/dist/themes/khanmigo.d.ts +38 -12
- package/dist/themes/themed-button.d.ts +38 -12
- package/package.json +8 -8
package/dist/index.js
CHANGED
|
@@ -43,63 +43,69 @@ const {
|
|
|
43
43
|
semanticColor
|
|
44
44
|
} = tokens__namespace;
|
|
45
45
|
const textUnderlineOffset = tokens__namespace.spacing.xxxSmall_4;
|
|
46
|
+
const focusOutline = {
|
|
47
|
+
border: semanticColor.focus.outer
|
|
48
|
+
};
|
|
49
|
+
const focusOutlineLight = {
|
|
50
|
+
border: semanticColor.border.inverse
|
|
51
|
+
};
|
|
46
52
|
const theme$1 = {
|
|
47
53
|
color: {
|
|
48
|
-
|
|
49
|
-
progressive: _extends__default["default"]({}, semanticColor.action.
|
|
54
|
+
primary: {
|
|
55
|
+
progressive: _extends__default["default"]({}, semanticColor.action.primary.progressive, {
|
|
56
|
+
focus: focusOutline,
|
|
50
57
|
disabled: {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
foreground: semanticColor.action.disabled.secondary
|
|
58
|
+
background: semanticColor.action.primary.disabled.background,
|
|
59
|
+
foreground: semanticColor.action.primary.disabled.foreground
|
|
54
60
|
}
|
|
55
61
|
}),
|
|
56
|
-
progressiveLight: _extends__default["default"]({}, semanticColor.action.
|
|
57
|
-
|
|
62
|
+
progressiveLight: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
|
|
63
|
+
focus: focusOutlineLight,
|
|
64
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
|
|
58
65
|
border: semanticColor.border.inverse
|
|
59
66
|
}),
|
|
60
|
-
press: _extends__default["default"]({}, semanticColor.action.
|
|
61
|
-
border: semanticColor.action.
|
|
67
|
+
press: _extends__default["default"]({}, semanticColor.action.secondary.progressive.press, {
|
|
68
|
+
border: semanticColor.action.secondary.progressive.press.background
|
|
62
69
|
}),
|
|
63
70
|
disabled: {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
foreground: semanticColor.action.outlined.progressive.default.foreground
|
|
71
|
+
background: semanticColor.action.secondary.progressive.press.background,
|
|
72
|
+
foreground: semanticColor.action.secondary.progressive.default.foreground
|
|
67
73
|
}
|
|
68
74
|
}),
|
|
69
|
-
destructive: _extends__default["default"]({}, semanticColor.action.
|
|
75
|
+
destructive: _extends__default["default"]({}, semanticColor.action.primary.destructive, {
|
|
76
|
+
focus: focusOutline,
|
|
70
77
|
disabled: {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
foreground: semanticColor.action.disabled.secondary
|
|
78
|
+
background: semanticColor.action.primary.disabled.background,
|
|
79
|
+
foreground: semanticColor.action.primary.disabled.foreground
|
|
74
80
|
}
|
|
75
81
|
}),
|
|
76
|
-
destructiveLight: _extends__default["default"]({}, semanticColor.action.
|
|
77
|
-
|
|
82
|
+
destructiveLight: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
|
|
83
|
+
focus: focusOutlineLight,
|
|
84
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
|
|
78
85
|
border: semanticColor.border.inverse
|
|
79
86
|
}),
|
|
80
|
-
press: _extends__default["default"]({}, semanticColor.action.
|
|
81
|
-
border: semanticColor.action.
|
|
87
|
+
press: _extends__default["default"]({}, semanticColor.action.secondary.destructive.press, {
|
|
88
|
+
border: semanticColor.action.secondary.destructive.press.background
|
|
82
89
|
}),
|
|
83
90
|
disabled: {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
foreground: semanticColor.action.outlined.destructive.default.foreground
|
|
91
|
+
background: semanticColor.action.secondary.destructive.press.background,
|
|
92
|
+
foreground: semanticColor.action.secondary.destructive.default.foreground
|
|
87
93
|
}
|
|
88
94
|
})
|
|
89
95
|
},
|
|
90
|
-
|
|
91
|
-
progressive: _extends__default["default"]({}, semanticColor.action.
|
|
92
|
-
default: _extends__default["default"]({}, semanticColor.action.
|
|
96
|
+
secondary: {
|
|
97
|
+
progressive: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
|
|
98
|
+
default: _extends__default["default"]({}, semanticColor.action.secondary.progressive.default, {
|
|
93
99
|
background: "transparent"
|
|
94
100
|
}),
|
|
95
|
-
|
|
101
|
+
focus: focusOutline,
|
|
102
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
|
|
96
103
|
background: "transparent",
|
|
97
104
|
icon: "transparent"
|
|
98
105
|
}),
|
|
99
106
|
disabled: {
|
|
100
|
-
border: semanticColor.action.disabled.
|
|
101
|
-
|
|
102
|
-
foreground: semanticColor.text.disabled
|
|
107
|
+
border: semanticColor.action.primary.disabled.border,
|
|
108
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
103
109
|
}
|
|
104
110
|
}),
|
|
105
111
|
progressiveLight: {
|
|
@@ -108,6 +114,7 @@ const theme$1 = {
|
|
|
108
114
|
background: "transparent",
|
|
109
115
|
foreground: semanticColor.text.inverse
|
|
110
116
|
},
|
|
117
|
+
focus: focusOutlineLight,
|
|
111
118
|
hover: {
|
|
112
119
|
border: semanticColor.border.inverse,
|
|
113
120
|
background: "transparent",
|
|
@@ -116,24 +123,24 @@ const theme$1 = {
|
|
|
116
123
|
},
|
|
117
124
|
press: {
|
|
118
125
|
border: tokens__namespace.color.fadedBlue,
|
|
119
|
-
background: semanticColor.action.
|
|
126
|
+
background: semanticColor.action.primary.progressive.press.background,
|
|
120
127
|
foreground: semanticColor.text.inverse
|
|
121
128
|
},
|
|
122
129
|
disabled: {
|
|
123
|
-
border: semanticColor.action.
|
|
124
|
-
background: semanticColor.action.
|
|
130
|
+
border: semanticColor.action.secondary.progressive.press.background,
|
|
131
|
+
background: semanticColor.action.secondary.progressive.press.background,
|
|
125
132
|
foreground: tokens__namespace.color.white50
|
|
126
133
|
}
|
|
127
134
|
},
|
|
128
|
-
destructive: _extends__default["default"]({}, semanticColor.action.
|
|
129
|
-
|
|
135
|
+
destructive: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
|
|
136
|
+
focus: focusOutline,
|
|
137
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.destructive.hover, {
|
|
130
138
|
background: "transparent",
|
|
131
139
|
icon: "transparent"
|
|
132
140
|
}),
|
|
133
141
|
disabled: {
|
|
134
|
-
border: semanticColor.action.disabled.
|
|
135
|
-
|
|
136
|
-
foreground: semanticColor.text.disabled
|
|
142
|
+
border: semanticColor.action.primary.disabled.border,
|
|
143
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
137
144
|
}
|
|
138
145
|
}),
|
|
139
146
|
destructiveLight: {
|
|
@@ -142,6 +149,7 @@ const theme$1 = {
|
|
|
142
149
|
background: "transparent",
|
|
143
150
|
foreground: semanticColor.text.inverse
|
|
144
151
|
},
|
|
152
|
+
focus: focusOutlineLight,
|
|
145
153
|
hover: {
|
|
146
154
|
border: semanticColor.border.inverse,
|
|
147
155
|
background: "transparent",
|
|
@@ -150,12 +158,12 @@ const theme$1 = {
|
|
|
150
158
|
},
|
|
151
159
|
press: {
|
|
152
160
|
border: tokens__namespace.color.fadedRed,
|
|
153
|
-
background: semanticColor.action.
|
|
161
|
+
background: semanticColor.action.primary.destructive.press.background,
|
|
154
162
|
foreground: semanticColor.text.inverse
|
|
155
163
|
},
|
|
156
164
|
disabled: {
|
|
157
|
-
border: semanticColor.action.
|
|
158
|
-
background: semanticColor.action.
|
|
165
|
+
border: semanticColor.action.secondary.destructive.press.background,
|
|
166
|
+
background: semanticColor.action.secondary.destructive.press.background,
|
|
159
167
|
foreground: tokens__namespace.color.white50
|
|
160
168
|
}
|
|
161
169
|
}
|
|
@@ -164,17 +172,17 @@ const theme$1 = {
|
|
|
164
172
|
progressive: {
|
|
165
173
|
default: {
|
|
166
174
|
background: "transparent",
|
|
167
|
-
foreground: semanticColor.action.
|
|
175
|
+
foreground: semanticColor.action.secondary.progressive.default.foreground
|
|
168
176
|
},
|
|
177
|
+
focus: focusOutline,
|
|
169
178
|
hover: {
|
|
170
|
-
border: semanticColor.action.
|
|
179
|
+
border: semanticColor.action.secondary.progressive.hover.border
|
|
171
180
|
},
|
|
172
181
|
press: {
|
|
173
|
-
foreground: semanticColor.action.
|
|
182
|
+
foreground: semanticColor.action.secondary.progressive.press.foreground
|
|
174
183
|
},
|
|
175
184
|
disabled: {
|
|
176
|
-
|
|
177
|
-
foreground: semanticColor.text.disabled
|
|
185
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
178
186
|
}
|
|
179
187
|
},
|
|
180
188
|
progressiveLight: {
|
|
@@ -183,6 +191,7 @@ const theme$1 = {
|
|
|
183
191
|
background: "transparent",
|
|
184
192
|
foreground: semanticColor.text.inverse
|
|
185
193
|
},
|
|
194
|
+
focus: focusOutlineLight,
|
|
186
195
|
hover: {
|
|
187
196
|
border: semanticColor.border.inverse,
|
|
188
197
|
background: "transparent",
|
|
@@ -193,24 +202,23 @@ const theme$1 = {
|
|
|
193
202
|
foreground: tokens__namespace.color.fadedBlue
|
|
194
203
|
},
|
|
195
204
|
disabled: {
|
|
196
|
-
border: semanticColor.action.outlined.progressive.press.background,
|
|
197
205
|
foreground: tokens__namespace.color.white50
|
|
198
206
|
}
|
|
199
207
|
},
|
|
200
208
|
destructive: {
|
|
201
209
|
default: {
|
|
202
210
|
background: "transparent",
|
|
203
|
-
foreground: semanticColor.action.
|
|
211
|
+
foreground: semanticColor.action.secondary.destructive.default.foreground
|
|
204
212
|
},
|
|
213
|
+
focus: focusOutline,
|
|
205
214
|
hover: {
|
|
206
|
-
border: semanticColor.action.
|
|
215
|
+
border: semanticColor.action.secondary.destructive.hover.border
|
|
207
216
|
},
|
|
208
217
|
press: {
|
|
209
|
-
foreground: semanticColor.action.
|
|
218
|
+
foreground: semanticColor.action.secondary.destructive.press.foreground
|
|
210
219
|
},
|
|
211
220
|
disabled: {
|
|
212
|
-
|
|
213
|
-
foreground: semanticColor.text.disabled
|
|
221
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
214
222
|
}
|
|
215
223
|
},
|
|
216
224
|
destructiveLight: {
|
|
@@ -219,6 +227,7 @@ const theme$1 = {
|
|
|
219
227
|
background: "transparent",
|
|
220
228
|
foreground: semanticColor.text.inverse
|
|
221
229
|
},
|
|
230
|
+
focus: focusOutlineLight,
|
|
222
231
|
hover: {
|
|
223
232
|
border: semanticColor.border.inverse,
|
|
224
233
|
background: "transparent",
|
|
@@ -229,7 +238,6 @@ const theme$1 = {
|
|
|
229
238
|
foreground: tokens__namespace.color.fadedRed
|
|
230
239
|
},
|
|
231
240
|
disabled: {
|
|
232
|
-
border: semanticColor.action.outlined.destructive.press.background,
|
|
233
241
|
foreground: tokens__namespace.color.white50
|
|
234
242
|
}
|
|
235
243
|
}
|
|
@@ -296,7 +304,7 @@ const theme$1 = {
|
|
|
296
304
|
const secondaryBgColor = tokens__namespace.color.offWhite;
|
|
297
305
|
const theme = wonderBlocksTheming.mergeTheme(theme$1, {
|
|
298
306
|
color: {
|
|
299
|
-
|
|
307
|
+
secondary: {
|
|
300
308
|
progressive: {
|
|
301
309
|
default: {
|
|
302
310
|
border: tokens__namespace.color.fadedBlue,
|
|
@@ -305,7 +313,7 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
|
|
|
305
313
|
hover: {
|
|
306
314
|
background: secondaryBgColor,
|
|
307
315
|
icon: tokens__namespace.color.fadedBlue16,
|
|
308
|
-
foreground: tokens__namespace.semanticColor.action.
|
|
316
|
+
foreground: tokens__namespace.semanticColor.action.secondary.progressive.default.foreground
|
|
309
317
|
},
|
|
310
318
|
press: {
|
|
311
319
|
background: tokens__namespace.color.fadedBlue8
|
|
@@ -319,7 +327,7 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
|
|
|
319
327
|
hover: {
|
|
320
328
|
background: secondaryBgColor,
|
|
321
329
|
icon: tokens__namespace.color.fadedRed16,
|
|
322
|
-
foreground: tokens__namespace.semanticColor.action.
|
|
330
|
+
foreground: tokens__namespace.semanticColor.action.secondary.destructive.default.foreground
|
|
323
331
|
},
|
|
324
332
|
press: {
|
|
325
333
|
background: tokens__namespace.color.fadedRed8
|
|
@@ -574,13 +582,18 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
574
582
|
const colorToAction = light ? buttonColor === "destructive" ? "destructiveLight" : "progressiveLight" : buttonColor === "destructive" ? "destructive" : "progressive";
|
|
575
583
|
let newStyles = {};
|
|
576
584
|
if (kind === "primary") {
|
|
577
|
-
const themeColorAction = theme.color.
|
|
578
|
-
const
|
|
579
|
-
outlineColor: themeColorAction.hover.border,
|
|
585
|
+
const themeColorAction = theme.color.primary[colorToAction];
|
|
586
|
+
const sharedFocusHoverStyling = {
|
|
580
587
|
outlineOffset: theme.border.offset.primary,
|
|
581
588
|
outlineStyle: "solid",
|
|
582
589
|
outlineWidth: theme.border.width.focused
|
|
583
590
|
};
|
|
591
|
+
const focusStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
592
|
+
outlineColor: themeColorAction.focus.border
|
|
593
|
+
});
|
|
594
|
+
const hoverStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
595
|
+
outlineColor: themeColorAction.hover.border
|
|
596
|
+
});
|
|
584
597
|
const activePressedStyling = {
|
|
585
598
|
background: themeColorAction.press.background,
|
|
586
599
|
outlineColor: themeColorAction.press.border,
|
|
@@ -593,7 +606,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
593
606
|
background: themeColorAction.default.background,
|
|
594
607
|
color: themeColorAction.default.foreground,
|
|
595
608
|
paddingInline: padding,
|
|
596
|
-
[":hover:not([aria-disabled=true])"]:
|
|
609
|
+
[":hover:not([aria-disabled=true])"]: hoverStyling,
|
|
597
610
|
[":focus-visible:not([aria-disabled=true])"]: focusStyling,
|
|
598
611
|
[":active:not([aria-disabled=true])"]: activePressedStyling
|
|
599
612
|
},
|
|
@@ -603,20 +616,23 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
603
616
|
background: themeColorAction.disabled.background,
|
|
604
617
|
color: themeColorAction.disabled.foreground,
|
|
605
618
|
cursor: "default",
|
|
606
|
-
":focus-visible":
|
|
607
|
-
outlineColor: themeColorAction.disabled.border
|
|
608
|
-
})
|
|
619
|
+
":focus-visible": focusStyling
|
|
609
620
|
}
|
|
610
621
|
};
|
|
611
622
|
} else if (kind === "secondary") {
|
|
612
|
-
const themeColorAction = theme.color.
|
|
613
|
-
const
|
|
623
|
+
const themeColorAction = theme.color.secondary[colorToAction];
|
|
624
|
+
const sharedFocusHoverStyling = {
|
|
614
625
|
background: themeColorAction.hover.background,
|
|
615
|
-
outlineColor: themeColorAction.hover.border,
|
|
616
626
|
outlineStyle: "solid",
|
|
617
627
|
outlineOffset: theme.border.offset.secondary,
|
|
618
628
|
outlineWidth: theme.border.width.focused
|
|
619
629
|
};
|
|
630
|
+
const focusStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
631
|
+
outlineColor: themeColorAction.focus.border
|
|
632
|
+
});
|
|
633
|
+
const hoverStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
634
|
+
outlineColor: themeColorAction.hover.border
|
|
635
|
+
});
|
|
620
636
|
const activePressedStyling = {
|
|
621
637
|
background: themeColorAction.press.background,
|
|
622
638
|
color: themeColorAction.press.foreground,
|
|
@@ -632,7 +648,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
632
648
|
borderStyle: "solid",
|
|
633
649
|
borderWidth: theme.border.width.secondary,
|
|
634
650
|
paddingInline: padding,
|
|
635
|
-
[":hover:not([aria-disabled=true])"]:
|
|
651
|
+
[":hover:not([aria-disabled=true])"]: hoverStyling,
|
|
636
652
|
[":focus-visible:not([aria-disabled=true])"]: focusStyling,
|
|
637
653
|
[":active:not([aria-disabled=true])"]: activePressedStyling
|
|
638
654
|
},
|
|
@@ -642,13 +658,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
642
658
|
color: themeColorAction.disabled.foreground,
|
|
643
659
|
borderColor: themeColorAction.disabled.border,
|
|
644
660
|
cursor: "default",
|
|
645
|
-
":focus-visible":
|
|
646
|
-
borderColor: themeColorAction.disabled.border,
|
|
647
|
-
outlineColor: themeColorAction.disabled.border,
|
|
648
|
-
outlineOffset: theme.border.offset.secondary,
|
|
649
|
-
outlineStyle: "solid",
|
|
650
|
-
outlineWidth: theme.border.width.disabled
|
|
651
|
-
}
|
|
661
|
+
":focus-visible": focusStyling
|
|
652
662
|
},
|
|
653
663
|
iconWrapperHovered: {
|
|
654
664
|
backgroundColor: themeColorAction.hover.icon,
|
|
@@ -660,7 +670,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
660
670
|
const focusStyling = {
|
|
661
671
|
outlineStyle: "solid",
|
|
662
672
|
borderColor: "transparent",
|
|
663
|
-
outlineColor: themeColorAction.
|
|
673
|
+
outlineColor: themeColorAction.focus.border,
|
|
664
674
|
outlineWidth: theme.border.width.focused,
|
|
665
675
|
borderRadius: theme.border.radius.default
|
|
666
676
|
};
|
|
@@ -688,15 +698,9 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
688
698
|
disabled: {
|
|
689
699
|
color: themeColorAction.disabled.foreground,
|
|
690
700
|
cursor: "default",
|
|
691
|
-
":focus-visible":
|
|
692
|
-
outlineColor: themeColorAction.disabled.border,
|
|
693
|
-
outlineStyle: "solid",
|
|
694
|
-
outlineWidth: theme.border.width.disabled
|
|
695
|
-
}
|
|
701
|
+
":focus-visible": focusStyling
|
|
696
702
|
},
|
|
697
|
-
disabledFocus:
|
|
698
|
-
outlineColor: themeColorAction.disabled.border
|
|
699
|
-
}
|
|
703
|
+
disabledFocus: focusStyling
|
|
700
704
|
};
|
|
701
705
|
} else {
|
|
702
706
|
throw new Error("Button kind not recognized");
|
package/dist/themes/default.d.ts
CHANGED
|
@@ -3,10 +3,12 @@ declare const theme: {
|
|
|
3
3
|
/**
|
|
4
4
|
* Primary
|
|
5
5
|
*/
|
|
6
|
-
|
|
6
|
+
primary: {
|
|
7
7
|
progressive: {
|
|
8
|
-
|
|
8
|
+
focus: {
|
|
9
9
|
border: string;
|
|
10
|
+
};
|
|
11
|
+
disabled: {
|
|
10
12
|
background: string;
|
|
11
13
|
foreground: string;
|
|
12
14
|
};
|
|
@@ -27,6 +29,9 @@ declare const theme: {
|
|
|
27
29
|
};
|
|
28
30
|
};
|
|
29
31
|
progressiveLight: {
|
|
32
|
+
focus: {
|
|
33
|
+
border: string;
|
|
34
|
+
};
|
|
30
35
|
hover: {
|
|
31
36
|
border: string;
|
|
32
37
|
background: string;
|
|
@@ -38,7 +43,6 @@ declare const theme: {
|
|
|
38
43
|
foreground: string;
|
|
39
44
|
};
|
|
40
45
|
disabled: {
|
|
41
|
-
border: string;
|
|
42
46
|
background: string;
|
|
43
47
|
foreground: string;
|
|
44
48
|
};
|
|
@@ -49,8 +53,10 @@ declare const theme: {
|
|
|
49
53
|
};
|
|
50
54
|
};
|
|
51
55
|
destructive: {
|
|
52
|
-
|
|
56
|
+
focus: {
|
|
53
57
|
border: string;
|
|
58
|
+
};
|
|
59
|
+
disabled: {
|
|
54
60
|
background: string;
|
|
55
61
|
foreground: string;
|
|
56
62
|
};
|
|
@@ -71,6 +77,9 @@ declare const theme: {
|
|
|
71
77
|
};
|
|
72
78
|
};
|
|
73
79
|
destructiveLight: {
|
|
80
|
+
focus: {
|
|
81
|
+
border: string;
|
|
82
|
+
};
|
|
74
83
|
hover: {
|
|
75
84
|
border: string;
|
|
76
85
|
background: string;
|
|
@@ -82,7 +91,6 @@ declare const theme: {
|
|
|
82
91
|
foreground: string;
|
|
83
92
|
};
|
|
84
93
|
disabled: {
|
|
85
|
-
border: string;
|
|
86
94
|
background: string;
|
|
87
95
|
foreground: string;
|
|
88
96
|
};
|
|
@@ -98,13 +106,16 @@ declare const theme: {
|
|
|
98
106
|
*
|
|
99
107
|
* Outlined buttons
|
|
100
108
|
*/
|
|
101
|
-
|
|
109
|
+
secondary: {
|
|
102
110
|
progressive: {
|
|
103
111
|
default: {
|
|
104
112
|
background: string;
|
|
105
113
|
border: string;
|
|
106
114
|
foreground: string;
|
|
107
115
|
};
|
|
116
|
+
focus: {
|
|
117
|
+
border: string;
|
|
118
|
+
};
|
|
108
119
|
hover: {
|
|
109
120
|
background: string;
|
|
110
121
|
icon: string;
|
|
@@ -113,7 +124,6 @@ declare const theme: {
|
|
|
113
124
|
};
|
|
114
125
|
disabled: {
|
|
115
126
|
border: string;
|
|
116
|
-
background: string;
|
|
117
127
|
foreground: string;
|
|
118
128
|
};
|
|
119
129
|
press: {
|
|
@@ -128,6 +138,9 @@ declare const theme: {
|
|
|
128
138
|
background: string;
|
|
129
139
|
foreground: string;
|
|
130
140
|
};
|
|
141
|
+
focus: {
|
|
142
|
+
border: string;
|
|
143
|
+
};
|
|
131
144
|
hover: {
|
|
132
145
|
border: string;
|
|
133
146
|
background: string;
|
|
@@ -146,6 +159,9 @@ declare const theme: {
|
|
|
146
159
|
};
|
|
147
160
|
};
|
|
148
161
|
destructive: {
|
|
162
|
+
focus: {
|
|
163
|
+
border: string;
|
|
164
|
+
};
|
|
149
165
|
hover: {
|
|
150
166
|
background: string;
|
|
151
167
|
icon: string;
|
|
@@ -154,7 +170,6 @@ declare const theme: {
|
|
|
154
170
|
};
|
|
155
171
|
disabled: {
|
|
156
172
|
border: string;
|
|
157
|
-
background: string;
|
|
158
173
|
foreground: string;
|
|
159
174
|
};
|
|
160
175
|
default: {
|
|
@@ -174,6 +189,9 @@ declare const theme: {
|
|
|
174
189
|
background: string;
|
|
175
190
|
foreground: string;
|
|
176
191
|
};
|
|
192
|
+
focus: {
|
|
193
|
+
border: string;
|
|
194
|
+
};
|
|
177
195
|
hover: {
|
|
178
196
|
border: string;
|
|
179
197
|
background: string;
|
|
@@ -203,6 +221,9 @@ declare const theme: {
|
|
|
203
221
|
background: string;
|
|
204
222
|
foreground: string;
|
|
205
223
|
};
|
|
224
|
+
focus: {
|
|
225
|
+
border: string;
|
|
226
|
+
};
|
|
206
227
|
hover: {
|
|
207
228
|
border: string;
|
|
208
229
|
};
|
|
@@ -210,7 +231,6 @@ declare const theme: {
|
|
|
210
231
|
foreground: string;
|
|
211
232
|
};
|
|
212
233
|
disabled: {
|
|
213
|
-
border: string;
|
|
214
234
|
foreground: string;
|
|
215
235
|
};
|
|
216
236
|
};
|
|
@@ -220,6 +240,9 @@ declare const theme: {
|
|
|
220
240
|
background: string;
|
|
221
241
|
foreground: string;
|
|
222
242
|
};
|
|
243
|
+
focus: {
|
|
244
|
+
border: string;
|
|
245
|
+
};
|
|
223
246
|
hover: {
|
|
224
247
|
border: string;
|
|
225
248
|
background: string;
|
|
@@ -230,7 +253,6 @@ declare const theme: {
|
|
|
230
253
|
foreground: string;
|
|
231
254
|
};
|
|
232
255
|
disabled: {
|
|
233
|
-
border: string;
|
|
234
256
|
foreground: string;
|
|
235
257
|
};
|
|
236
258
|
};
|
|
@@ -239,6 +261,9 @@ declare const theme: {
|
|
|
239
261
|
background: string;
|
|
240
262
|
foreground: string;
|
|
241
263
|
};
|
|
264
|
+
focus: {
|
|
265
|
+
border: string;
|
|
266
|
+
};
|
|
242
267
|
hover: {
|
|
243
268
|
border: string;
|
|
244
269
|
};
|
|
@@ -246,7 +271,6 @@ declare const theme: {
|
|
|
246
271
|
foreground: string;
|
|
247
272
|
};
|
|
248
273
|
disabled: {
|
|
249
|
-
border: string;
|
|
250
274
|
foreground: string;
|
|
251
275
|
};
|
|
252
276
|
};
|
|
@@ -256,6 +280,9 @@ declare const theme: {
|
|
|
256
280
|
background: string;
|
|
257
281
|
foreground: string;
|
|
258
282
|
};
|
|
283
|
+
focus: {
|
|
284
|
+
border: string;
|
|
285
|
+
};
|
|
259
286
|
hover: {
|
|
260
287
|
border: string;
|
|
261
288
|
background: string;
|
|
@@ -266,7 +293,6 @@ declare const theme: {
|
|
|
266
293
|
foreground: string;
|
|
267
294
|
};
|
|
268
295
|
disabled: {
|
|
269
|
-
border: string;
|
|
270
296
|
foreground: string;
|
|
271
297
|
};
|
|
272
298
|
};
|