@khanacademy/wonder-blocks-button 7.1.0 → 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 +39 -0
- package/dist/es/index.js +87 -83
- package/dist/index.js +105 -96
- 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 +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,44 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-button
|
|
2
2
|
|
|
3
|
+
## 7.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 5655b9f: Switch to use `focus.outer` semanticColor token
|
|
8
|
+
- 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
|
|
9
|
+
- 051f0f8: Rework action.disabled tokens to include properties per kind (border, background, foreground).
|
|
10
|
+
- ca57826: Split hover and focus into separate styles. Use default outline ring color for all variants (blue)
|
|
11
|
+
- Updated dependencies [ed26d66]
|
|
12
|
+
- Updated dependencies [5655b9f]
|
|
13
|
+
- Updated dependencies [5655b9f]
|
|
14
|
+
- Updated dependencies [8f53293]
|
|
15
|
+
- Updated dependencies [6d37702]
|
|
16
|
+
- Updated dependencies [051f0f8]
|
|
17
|
+
- Updated dependencies [8fc65a9]
|
|
18
|
+
- Updated dependencies [e1b78db]
|
|
19
|
+
- Updated dependencies [051f0f8]
|
|
20
|
+
- @khanacademy/wonder-blocks-core@12.2.0
|
|
21
|
+
- @khanacademy/wonder-blocks-tokens@5.0.0
|
|
22
|
+
- @khanacademy/wonder-blocks-clickable@6.1.2
|
|
23
|
+
- @khanacademy/wonder-blocks-theming@3.2.0
|
|
24
|
+
- @khanacademy/wonder-blocks-icon@5.1.2
|
|
25
|
+
- @khanacademy/wonder-blocks-progress-spinner@3.1.2
|
|
26
|
+
- @khanacademy/wonder-blocks-typography@3.1.2
|
|
27
|
+
|
|
28
|
+
## 7.1.1
|
|
29
|
+
|
|
30
|
+
### Patch Changes
|
|
31
|
+
|
|
32
|
+
- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
|
|
33
|
+
- Updated dependencies [ee8d95a]
|
|
34
|
+
- @khanacademy/wonder-blocks-clickable@6.1.1
|
|
35
|
+
- @khanacademy/wonder-blocks-core@12.1.1
|
|
36
|
+
- @khanacademy/wonder-blocks-icon@5.1.1
|
|
37
|
+
- @khanacademy/wonder-blocks-progress-spinner@3.1.1
|
|
38
|
+
- @khanacademy/wonder-blocks-theming@3.1.1
|
|
39
|
+
- @khanacademy/wonder-blocks-tokens@4.2.1
|
|
40
|
+
- @khanacademy/wonder-blocks-typography@3.1.1
|
|
41
|
+
|
|
3
42
|
## 7.1.0
|
|
4
43
|
|
|
5
44
|
### Minor Changes
|
package/dist/es/index.js
CHANGED
|
@@ -16,63 +16,69 @@ const {
|
|
|
16
16
|
semanticColor
|
|
17
17
|
} = tokens;
|
|
18
18
|
const textUnderlineOffset = tokens.spacing.xxxSmall_4;
|
|
19
|
+
const focusOutline = {
|
|
20
|
+
border: semanticColor.focus.outer
|
|
21
|
+
};
|
|
22
|
+
const focusOutlineLight = {
|
|
23
|
+
border: semanticColor.border.inverse
|
|
24
|
+
};
|
|
19
25
|
const theme$1 = {
|
|
20
26
|
color: {
|
|
21
|
-
|
|
22
|
-
progressive: _extends({}, semanticColor.action.
|
|
27
|
+
primary: {
|
|
28
|
+
progressive: _extends({}, semanticColor.action.primary.progressive, {
|
|
29
|
+
focus: focusOutline,
|
|
23
30
|
disabled: {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
foreground: semanticColor.action.disabled.secondary
|
|
31
|
+
background: semanticColor.action.primary.disabled.background,
|
|
32
|
+
foreground: semanticColor.action.primary.disabled.foreground
|
|
27
33
|
}
|
|
28
34
|
}),
|
|
29
|
-
progressiveLight: _extends({}, semanticColor.action.
|
|
30
|
-
|
|
35
|
+
progressiveLight: _extends({}, semanticColor.action.secondary.progressive, {
|
|
36
|
+
focus: focusOutlineLight,
|
|
37
|
+
hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
|
|
31
38
|
border: semanticColor.border.inverse
|
|
32
39
|
}),
|
|
33
|
-
press: _extends({}, semanticColor.action.
|
|
34
|
-
border: semanticColor.action.
|
|
40
|
+
press: _extends({}, semanticColor.action.secondary.progressive.press, {
|
|
41
|
+
border: semanticColor.action.secondary.progressive.press.background
|
|
35
42
|
}),
|
|
36
43
|
disabled: {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
foreground: semanticColor.action.outlined.progressive.default.foreground
|
|
44
|
+
background: semanticColor.action.secondary.progressive.press.background,
|
|
45
|
+
foreground: semanticColor.action.secondary.progressive.default.foreground
|
|
40
46
|
}
|
|
41
47
|
}),
|
|
42
|
-
destructive: _extends({}, semanticColor.action.
|
|
48
|
+
destructive: _extends({}, semanticColor.action.primary.destructive, {
|
|
49
|
+
focus: focusOutline,
|
|
43
50
|
disabled: {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
foreground: semanticColor.action.disabled.secondary
|
|
51
|
+
background: semanticColor.action.primary.disabled.background,
|
|
52
|
+
foreground: semanticColor.action.primary.disabled.foreground
|
|
47
53
|
}
|
|
48
54
|
}),
|
|
49
|
-
destructiveLight: _extends({}, semanticColor.action.
|
|
50
|
-
|
|
55
|
+
destructiveLight: _extends({}, semanticColor.action.secondary.destructive, {
|
|
56
|
+
focus: focusOutlineLight,
|
|
57
|
+
hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
|
|
51
58
|
border: semanticColor.border.inverse
|
|
52
59
|
}),
|
|
53
|
-
press: _extends({}, semanticColor.action.
|
|
54
|
-
border: semanticColor.action.
|
|
60
|
+
press: _extends({}, semanticColor.action.secondary.destructive.press, {
|
|
61
|
+
border: semanticColor.action.secondary.destructive.press.background
|
|
55
62
|
}),
|
|
56
63
|
disabled: {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
foreground: semanticColor.action.outlined.destructive.default.foreground
|
|
64
|
+
background: semanticColor.action.secondary.destructive.press.background,
|
|
65
|
+
foreground: semanticColor.action.secondary.destructive.default.foreground
|
|
60
66
|
}
|
|
61
67
|
})
|
|
62
68
|
},
|
|
63
|
-
|
|
64
|
-
progressive: _extends({}, semanticColor.action.
|
|
65
|
-
default: _extends({}, semanticColor.action.
|
|
69
|
+
secondary: {
|
|
70
|
+
progressive: _extends({}, semanticColor.action.secondary.progressive, {
|
|
71
|
+
default: _extends({}, semanticColor.action.secondary.progressive.default, {
|
|
66
72
|
background: "transparent"
|
|
67
73
|
}),
|
|
68
|
-
|
|
74
|
+
focus: focusOutline,
|
|
75
|
+
hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
|
|
69
76
|
background: "transparent",
|
|
70
77
|
icon: "transparent"
|
|
71
78
|
}),
|
|
72
79
|
disabled: {
|
|
73
|
-
border: semanticColor.action.disabled.
|
|
74
|
-
|
|
75
|
-
foreground: semanticColor.text.disabled
|
|
80
|
+
border: semanticColor.action.primary.disabled.border,
|
|
81
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
76
82
|
}
|
|
77
83
|
}),
|
|
78
84
|
progressiveLight: {
|
|
@@ -81,6 +87,7 @@ const theme$1 = {
|
|
|
81
87
|
background: "transparent",
|
|
82
88
|
foreground: semanticColor.text.inverse
|
|
83
89
|
},
|
|
90
|
+
focus: focusOutlineLight,
|
|
84
91
|
hover: {
|
|
85
92
|
border: semanticColor.border.inverse,
|
|
86
93
|
background: "transparent",
|
|
@@ -89,24 +96,24 @@ const theme$1 = {
|
|
|
89
96
|
},
|
|
90
97
|
press: {
|
|
91
98
|
border: tokens.color.fadedBlue,
|
|
92
|
-
background: semanticColor.action.
|
|
99
|
+
background: semanticColor.action.primary.progressive.press.background,
|
|
93
100
|
foreground: semanticColor.text.inverse
|
|
94
101
|
},
|
|
95
102
|
disabled: {
|
|
96
|
-
border: semanticColor.action.
|
|
97
|
-
background: semanticColor.action.
|
|
103
|
+
border: semanticColor.action.secondary.progressive.press.background,
|
|
104
|
+
background: semanticColor.action.secondary.progressive.press.background,
|
|
98
105
|
foreground: tokens.color.white50
|
|
99
106
|
}
|
|
100
107
|
},
|
|
101
|
-
destructive: _extends({}, semanticColor.action.
|
|
102
|
-
|
|
108
|
+
destructive: _extends({}, semanticColor.action.secondary.destructive, {
|
|
109
|
+
focus: focusOutline,
|
|
110
|
+
hover: _extends({}, semanticColor.action.secondary.destructive.hover, {
|
|
103
111
|
background: "transparent",
|
|
104
112
|
icon: "transparent"
|
|
105
113
|
}),
|
|
106
114
|
disabled: {
|
|
107
|
-
border: semanticColor.action.disabled.
|
|
108
|
-
|
|
109
|
-
foreground: semanticColor.text.disabled
|
|
115
|
+
border: semanticColor.action.primary.disabled.border,
|
|
116
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
110
117
|
}
|
|
111
118
|
}),
|
|
112
119
|
destructiveLight: {
|
|
@@ -115,6 +122,7 @@ const theme$1 = {
|
|
|
115
122
|
background: "transparent",
|
|
116
123
|
foreground: semanticColor.text.inverse
|
|
117
124
|
},
|
|
125
|
+
focus: focusOutlineLight,
|
|
118
126
|
hover: {
|
|
119
127
|
border: semanticColor.border.inverse,
|
|
120
128
|
background: "transparent",
|
|
@@ -123,12 +131,12 @@ const theme$1 = {
|
|
|
123
131
|
},
|
|
124
132
|
press: {
|
|
125
133
|
border: tokens.color.fadedRed,
|
|
126
|
-
background: semanticColor.action.
|
|
134
|
+
background: semanticColor.action.primary.destructive.press.background,
|
|
127
135
|
foreground: semanticColor.text.inverse
|
|
128
136
|
},
|
|
129
137
|
disabled: {
|
|
130
|
-
border: semanticColor.action.
|
|
131
|
-
background: semanticColor.action.
|
|
138
|
+
border: semanticColor.action.secondary.destructive.press.background,
|
|
139
|
+
background: semanticColor.action.secondary.destructive.press.background,
|
|
132
140
|
foreground: tokens.color.white50
|
|
133
141
|
}
|
|
134
142
|
}
|
|
@@ -137,17 +145,17 @@ const theme$1 = {
|
|
|
137
145
|
progressive: {
|
|
138
146
|
default: {
|
|
139
147
|
background: "transparent",
|
|
140
|
-
foreground: semanticColor.action.
|
|
148
|
+
foreground: semanticColor.action.secondary.progressive.default.foreground
|
|
141
149
|
},
|
|
150
|
+
focus: focusOutline,
|
|
142
151
|
hover: {
|
|
143
|
-
border: semanticColor.action.
|
|
152
|
+
border: semanticColor.action.secondary.progressive.hover.border
|
|
144
153
|
},
|
|
145
154
|
press: {
|
|
146
|
-
foreground: semanticColor.action.
|
|
155
|
+
foreground: semanticColor.action.secondary.progressive.press.foreground
|
|
147
156
|
},
|
|
148
157
|
disabled: {
|
|
149
|
-
|
|
150
|
-
foreground: semanticColor.text.disabled
|
|
158
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
151
159
|
}
|
|
152
160
|
},
|
|
153
161
|
progressiveLight: {
|
|
@@ -156,6 +164,7 @@ const theme$1 = {
|
|
|
156
164
|
background: "transparent",
|
|
157
165
|
foreground: semanticColor.text.inverse
|
|
158
166
|
},
|
|
167
|
+
focus: focusOutlineLight,
|
|
159
168
|
hover: {
|
|
160
169
|
border: semanticColor.border.inverse,
|
|
161
170
|
background: "transparent",
|
|
@@ -166,24 +175,23 @@ const theme$1 = {
|
|
|
166
175
|
foreground: tokens.color.fadedBlue
|
|
167
176
|
},
|
|
168
177
|
disabled: {
|
|
169
|
-
border: semanticColor.action.outlined.progressive.press.background,
|
|
170
178
|
foreground: tokens.color.white50
|
|
171
179
|
}
|
|
172
180
|
},
|
|
173
181
|
destructive: {
|
|
174
182
|
default: {
|
|
175
183
|
background: "transparent",
|
|
176
|
-
foreground: semanticColor.action.
|
|
184
|
+
foreground: semanticColor.action.secondary.destructive.default.foreground
|
|
177
185
|
},
|
|
186
|
+
focus: focusOutline,
|
|
178
187
|
hover: {
|
|
179
|
-
border: semanticColor.action.
|
|
188
|
+
border: semanticColor.action.secondary.destructive.hover.border
|
|
180
189
|
},
|
|
181
190
|
press: {
|
|
182
|
-
foreground: semanticColor.action.
|
|
191
|
+
foreground: semanticColor.action.secondary.destructive.press.foreground
|
|
183
192
|
},
|
|
184
193
|
disabled: {
|
|
185
|
-
|
|
186
|
-
foreground: semanticColor.text.disabled
|
|
194
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
187
195
|
}
|
|
188
196
|
},
|
|
189
197
|
destructiveLight: {
|
|
@@ -192,6 +200,7 @@ const theme$1 = {
|
|
|
192
200
|
background: "transparent",
|
|
193
201
|
foreground: semanticColor.text.inverse
|
|
194
202
|
},
|
|
203
|
+
focus: focusOutlineLight,
|
|
195
204
|
hover: {
|
|
196
205
|
border: semanticColor.border.inverse,
|
|
197
206
|
background: "transparent",
|
|
@@ -202,7 +211,6 @@ const theme$1 = {
|
|
|
202
211
|
foreground: tokens.color.fadedRed
|
|
203
212
|
},
|
|
204
213
|
disabled: {
|
|
205
|
-
border: semanticColor.action.outlined.destructive.press.background,
|
|
206
214
|
foreground: tokens.color.white50
|
|
207
215
|
}
|
|
208
216
|
}
|
|
@@ -269,7 +277,7 @@ const theme$1 = {
|
|
|
269
277
|
const secondaryBgColor = tokens.color.offWhite;
|
|
270
278
|
const theme = mergeTheme(theme$1, {
|
|
271
279
|
color: {
|
|
272
|
-
|
|
280
|
+
secondary: {
|
|
273
281
|
progressive: {
|
|
274
282
|
default: {
|
|
275
283
|
border: tokens.color.fadedBlue,
|
|
@@ -278,7 +286,7 @@ const theme = mergeTheme(theme$1, {
|
|
|
278
286
|
hover: {
|
|
279
287
|
background: secondaryBgColor,
|
|
280
288
|
icon: tokens.color.fadedBlue16,
|
|
281
|
-
foreground: tokens.semanticColor.action.
|
|
289
|
+
foreground: tokens.semanticColor.action.secondary.progressive.default.foreground
|
|
282
290
|
},
|
|
283
291
|
press: {
|
|
284
292
|
background: tokens.color.fadedBlue8
|
|
@@ -292,7 +300,7 @@ const theme = mergeTheme(theme$1, {
|
|
|
292
300
|
hover: {
|
|
293
301
|
background: secondaryBgColor,
|
|
294
302
|
icon: tokens.color.fadedRed16,
|
|
295
|
-
foreground: tokens.semanticColor.action.
|
|
303
|
+
foreground: tokens.semanticColor.action.secondary.destructive.default.foreground
|
|
296
304
|
},
|
|
297
305
|
press: {
|
|
298
306
|
background: tokens.color.fadedRed8
|
|
@@ -547,13 +555,18 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
547
555
|
const colorToAction = light ? buttonColor === "destructive" ? "destructiveLight" : "progressiveLight" : buttonColor === "destructive" ? "destructive" : "progressive";
|
|
548
556
|
let newStyles = {};
|
|
549
557
|
if (kind === "primary") {
|
|
550
|
-
const themeColorAction = theme.color.
|
|
551
|
-
const
|
|
552
|
-
outlineColor: themeColorAction.hover.border,
|
|
558
|
+
const themeColorAction = theme.color.primary[colorToAction];
|
|
559
|
+
const sharedFocusHoverStyling = {
|
|
553
560
|
outlineOffset: theme.border.offset.primary,
|
|
554
561
|
outlineStyle: "solid",
|
|
555
562
|
outlineWidth: theme.border.width.focused
|
|
556
563
|
};
|
|
564
|
+
const focusStyling = _extends({}, sharedFocusHoverStyling, {
|
|
565
|
+
outlineColor: themeColorAction.focus.border
|
|
566
|
+
});
|
|
567
|
+
const hoverStyling = _extends({}, sharedFocusHoverStyling, {
|
|
568
|
+
outlineColor: themeColorAction.hover.border
|
|
569
|
+
});
|
|
557
570
|
const activePressedStyling = {
|
|
558
571
|
background: themeColorAction.press.background,
|
|
559
572
|
outlineColor: themeColorAction.press.border,
|
|
@@ -566,7 +579,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
566
579
|
background: themeColorAction.default.background,
|
|
567
580
|
color: themeColorAction.default.foreground,
|
|
568
581
|
paddingInline: padding,
|
|
569
|
-
[":hover:not([aria-disabled=true])"]:
|
|
582
|
+
[":hover:not([aria-disabled=true])"]: hoverStyling,
|
|
570
583
|
[":focus-visible:not([aria-disabled=true])"]: focusStyling,
|
|
571
584
|
[":active:not([aria-disabled=true])"]: activePressedStyling
|
|
572
585
|
},
|
|
@@ -576,20 +589,23 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
576
589
|
background: themeColorAction.disabled.background,
|
|
577
590
|
color: themeColorAction.disabled.foreground,
|
|
578
591
|
cursor: "default",
|
|
579
|
-
":focus-visible":
|
|
580
|
-
outlineColor: themeColorAction.disabled.border
|
|
581
|
-
})
|
|
592
|
+
":focus-visible": focusStyling
|
|
582
593
|
}
|
|
583
594
|
};
|
|
584
595
|
} else if (kind === "secondary") {
|
|
585
|
-
const themeColorAction = theme.color.
|
|
586
|
-
const
|
|
596
|
+
const themeColorAction = theme.color.secondary[colorToAction];
|
|
597
|
+
const sharedFocusHoverStyling = {
|
|
587
598
|
background: themeColorAction.hover.background,
|
|
588
|
-
outlineColor: themeColorAction.hover.border,
|
|
589
599
|
outlineStyle: "solid",
|
|
590
600
|
outlineOffset: theme.border.offset.secondary,
|
|
591
601
|
outlineWidth: theme.border.width.focused
|
|
592
602
|
};
|
|
603
|
+
const focusStyling = _extends({}, sharedFocusHoverStyling, {
|
|
604
|
+
outlineColor: themeColorAction.focus.border
|
|
605
|
+
});
|
|
606
|
+
const hoverStyling = _extends({}, sharedFocusHoverStyling, {
|
|
607
|
+
outlineColor: themeColorAction.hover.border
|
|
608
|
+
});
|
|
593
609
|
const activePressedStyling = {
|
|
594
610
|
background: themeColorAction.press.background,
|
|
595
611
|
color: themeColorAction.press.foreground,
|
|
@@ -605,7 +621,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
605
621
|
borderStyle: "solid",
|
|
606
622
|
borderWidth: theme.border.width.secondary,
|
|
607
623
|
paddingInline: padding,
|
|
608
|
-
[":hover:not([aria-disabled=true])"]:
|
|
624
|
+
[":hover:not([aria-disabled=true])"]: hoverStyling,
|
|
609
625
|
[":focus-visible:not([aria-disabled=true])"]: focusStyling,
|
|
610
626
|
[":active:not([aria-disabled=true])"]: activePressedStyling
|
|
611
627
|
},
|
|
@@ -615,13 +631,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
615
631
|
color: themeColorAction.disabled.foreground,
|
|
616
632
|
borderColor: themeColorAction.disabled.border,
|
|
617
633
|
cursor: "default",
|
|
618
|
-
":focus-visible":
|
|
619
|
-
borderColor: themeColorAction.disabled.border,
|
|
620
|
-
outlineColor: themeColorAction.disabled.border,
|
|
621
|
-
outlineOffset: theme.border.offset.secondary,
|
|
622
|
-
outlineStyle: "solid",
|
|
623
|
-
outlineWidth: theme.border.width.disabled
|
|
624
|
-
}
|
|
634
|
+
":focus-visible": focusStyling
|
|
625
635
|
},
|
|
626
636
|
iconWrapperHovered: {
|
|
627
637
|
backgroundColor: themeColorAction.hover.icon,
|
|
@@ -633,7 +643,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
633
643
|
const focusStyling = {
|
|
634
644
|
outlineStyle: "solid",
|
|
635
645
|
borderColor: "transparent",
|
|
636
|
-
outlineColor: themeColorAction.
|
|
646
|
+
outlineColor: themeColorAction.focus.border,
|
|
637
647
|
outlineWidth: theme.border.width.focused,
|
|
638
648
|
borderRadius: theme.border.radius.default
|
|
639
649
|
};
|
|
@@ -661,15 +671,9 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
661
671
|
disabled: {
|
|
662
672
|
color: themeColorAction.disabled.foreground,
|
|
663
673
|
cursor: "default",
|
|
664
|
-
":focus-visible":
|
|
665
|
-
outlineColor: themeColorAction.disabled.border,
|
|
666
|
-
outlineStyle: "solid",
|
|
667
|
-
outlineWidth: theme.border.width.disabled
|
|
668
|
-
}
|
|
674
|
+
":focus-visible": focusStyling
|
|
669
675
|
},
|
|
670
|
-
disabledFocus:
|
|
671
|
-
outlineColor: themeColorAction.disabled.border
|
|
672
|
-
}
|
|
676
|
+
disabledFocus: focusStyling
|
|
673
677
|
};
|
|
674
678
|
} else {
|
|
675
679
|
throw new Error("Button kind not recognized");
|