@khanacademy/wonder-blocks-button 7.1.4 → 7.1.6

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 +21 -0
  2. package/dist/es/index.js +18 -35
  3. package/dist/index.js +18 -35
  4. package/dist/themes/default.d.ts +41 -30
  5. package/dist/themes/khanmigo.d.ts +41 -30
  6. package/dist/themes/themed-button.d.ts +41 -30
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @khanacademy/wonder-blocks-button
2
2
 
3
+ ## 7.1.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [24bf12f]
8
+ - @khanacademy/wonder-blocks-tokens@6.0.0
9
+ - @khanacademy/wonder-blocks-clickable@6.1.6
10
+ - @khanacademy/wonder-blocks-progress-spinner@3.1.6
11
+
12
+ ## 7.1.5
13
+
14
+ ### Patch Changes
15
+
16
+ - 3dc5dac: - Updated theme to match `semanticColor.action.secondary` changes.
17
+ - Renamed `theme.color.text` to `theme.color.tertiary`.
18
+ - Cleaned up some theming code now that the `semanticColor` API is more consistent.
19
+ - Updated dependencies [3dc5dac]
20
+ - @khanacademy/wonder-blocks-tokens@5.2.0
21
+ - @khanacademy/wonder-blocks-clickable@6.1.5
22
+ - @khanacademy/wonder-blocks-progress-spinner@3.1.5
23
+
3
24
  ## 7.1.4
4
25
 
5
26
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -33,9 +33,13 @@ const theme$1 = {
33
33
  }
34
34
  }),
35
35
  progressiveLight: _extends({}, semanticColor.action.secondary.progressive, {
36
+ default: _extends({}, semanticColor.action.secondary.progressive.default, {
37
+ background: semanticColor.surface.primary
38
+ }),
36
39
  focus: focusOutlineLight,
37
40
  hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
38
- border: semanticColor.border.inverse
41
+ border: semanticColor.border.inverse,
42
+ backgrond: semanticColor.surface.primary
39
43
  }),
40
44
  press: _extends({}, semanticColor.action.secondary.progressive.press, {
41
45
  border: semanticColor.action.secondary.progressive.press.background
@@ -53,9 +57,13 @@ const theme$1 = {
53
57
  }
54
58
  }),
55
59
  destructiveLight: _extends({}, semanticColor.action.secondary.destructive, {
60
+ default: _extends({}, semanticColor.action.secondary.destructive.default, {
61
+ background: semanticColor.surface.primary
62
+ }),
56
63
  focus: focusOutlineLight,
57
64
  hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
58
- border: semanticColor.border.inverse
65
+ border: semanticColor.border.inverse,
66
+ background: semanticColor.surface.primary
59
67
  }),
60
68
  press: _extends({}, semanticColor.action.secondary.destructive.press, {
61
69
  border: semanticColor.action.secondary.destructive.press.background
@@ -68,12 +76,8 @@ const theme$1 = {
68
76
  },
69
77
  secondary: {
70
78
  progressive: _extends({}, semanticColor.action.secondary.progressive, {
71
- default: _extends({}, semanticColor.action.secondary.progressive.default, {
72
- background: "transparent"
73
- }),
74
79
  focus: focusOutline,
75
80
  hover: _extends({}, semanticColor.action.secondary.progressive.hover, {
76
- background: "transparent",
77
81
  icon: "transparent"
78
82
  }),
79
83
  disabled: {
@@ -108,7 +112,6 @@ const theme$1 = {
108
112
  destructive: _extends({}, semanticColor.action.secondary.destructive, {
109
113
  focus: focusOutline,
110
114
  hover: _extends({}, semanticColor.action.secondary.destructive.hover, {
111
- background: "transparent",
112
115
  icon: "transparent"
113
116
  }),
114
117
  disabled: {
@@ -141,23 +144,13 @@ const theme$1 = {
141
144
  }
142
145
  }
143
146
  },
144
- text: {
145
- progressive: {
146
- default: {
147
- background: "transparent",
148
- foreground: semanticColor.action.secondary.progressive.default.foreground
149
- },
147
+ tertiary: {
148
+ progressive: _extends({}, semanticColor.action.tertiary.progressive, {
150
149
  focus: focusOutline,
151
- hover: {
152
- border: semanticColor.action.secondary.progressive.hover.border
153
- },
154
- press: {
155
- foreground: semanticColor.action.secondary.progressive.press.foreground
156
- },
157
150
  disabled: {
158
- foreground: semanticColor.action.secondary.disabled.foreground
151
+ foreground: semanticColor.action.tertiary.disabled.foreground
159
152
  }
160
- },
153
+ }),
161
154
  progressiveLight: {
162
155
  default: {
163
156
  border: tokens.color.white64,
@@ -178,22 +171,12 @@ const theme$1 = {
178
171
  foreground: tokens.color.white50
179
172
  }
180
173
  },
181
- destructive: {
182
- default: {
183
- background: "transparent",
184
- foreground: semanticColor.action.secondary.destructive.default.foreground
185
- },
174
+ destructive: _extends({}, semanticColor.action.tertiary.destructive, {
186
175
  focus: focusOutline,
187
- hover: {
188
- border: semanticColor.action.secondary.destructive.hover.border
189
- },
190
- press: {
191
- foreground: semanticColor.action.secondary.destructive.press.foreground
192
- },
193
176
  disabled: {
194
- foreground: semanticColor.action.secondary.disabled.foreground
177
+ foreground: semanticColor.action.tertiary.disabled.foreground
195
178
  }
196
- },
179
+ }),
197
180
  destructiveLight: {
198
181
  default: {
199
182
  border: tokens.color.white64,
@@ -639,7 +622,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
639
622
  }
640
623
  };
641
624
  } else if (kind === "tertiary") {
642
- const themeColorAction = theme.color.text[colorToAction];
625
+ const themeColorAction = theme.color.tertiary[colorToAction];
643
626
  const focusStyling = {
644
627
  outlineStyle: "solid",
645
628
  borderColor: "transparent",
package/dist/index.js CHANGED
@@ -60,9 +60,13 @@ const theme$1 = {
60
60
  }
61
61
  }),
62
62
  progressiveLight: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
63
+ default: _extends__default["default"]({}, semanticColor.action.secondary.progressive.default, {
64
+ background: semanticColor.surface.primary
65
+ }),
63
66
  focus: focusOutlineLight,
64
67
  hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
65
- border: semanticColor.border.inverse
68
+ border: semanticColor.border.inverse,
69
+ backgrond: semanticColor.surface.primary
66
70
  }),
67
71
  press: _extends__default["default"]({}, semanticColor.action.secondary.progressive.press, {
68
72
  border: semanticColor.action.secondary.progressive.press.background
@@ -80,9 +84,13 @@ const theme$1 = {
80
84
  }
81
85
  }),
82
86
  destructiveLight: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
87
+ default: _extends__default["default"]({}, semanticColor.action.secondary.destructive.default, {
88
+ background: semanticColor.surface.primary
89
+ }),
83
90
  focus: focusOutlineLight,
84
91
  hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
85
- border: semanticColor.border.inverse
92
+ border: semanticColor.border.inverse,
93
+ background: semanticColor.surface.primary
86
94
  }),
87
95
  press: _extends__default["default"]({}, semanticColor.action.secondary.destructive.press, {
88
96
  border: semanticColor.action.secondary.destructive.press.background
@@ -95,12 +103,8 @@ const theme$1 = {
95
103
  },
96
104
  secondary: {
97
105
  progressive: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
98
- default: _extends__default["default"]({}, semanticColor.action.secondary.progressive.default, {
99
- background: "transparent"
100
- }),
101
106
  focus: focusOutline,
102
107
  hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
103
- background: "transparent",
104
108
  icon: "transparent"
105
109
  }),
106
110
  disabled: {
@@ -135,7 +139,6 @@ const theme$1 = {
135
139
  destructive: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
136
140
  focus: focusOutline,
137
141
  hover: _extends__default["default"]({}, semanticColor.action.secondary.destructive.hover, {
138
- background: "transparent",
139
142
  icon: "transparent"
140
143
  }),
141
144
  disabled: {
@@ -168,23 +171,13 @@ const theme$1 = {
168
171
  }
169
172
  }
170
173
  },
171
- text: {
172
- progressive: {
173
- default: {
174
- background: "transparent",
175
- foreground: semanticColor.action.secondary.progressive.default.foreground
176
- },
174
+ tertiary: {
175
+ progressive: _extends__default["default"]({}, semanticColor.action.tertiary.progressive, {
177
176
  focus: focusOutline,
178
- hover: {
179
- border: semanticColor.action.secondary.progressive.hover.border
180
- },
181
- press: {
182
- foreground: semanticColor.action.secondary.progressive.press.foreground
183
- },
184
177
  disabled: {
185
- foreground: semanticColor.action.secondary.disabled.foreground
178
+ foreground: semanticColor.action.tertiary.disabled.foreground
186
179
  }
187
- },
180
+ }),
188
181
  progressiveLight: {
189
182
  default: {
190
183
  border: tokens__namespace.color.white64,
@@ -205,22 +198,12 @@ const theme$1 = {
205
198
  foreground: tokens__namespace.color.white50
206
199
  }
207
200
  },
208
- destructive: {
209
- default: {
210
- background: "transparent",
211
- foreground: semanticColor.action.secondary.destructive.default.foreground
212
- },
201
+ destructive: _extends__default["default"]({}, semanticColor.action.tertiary.destructive, {
213
202
  focus: focusOutline,
214
- hover: {
215
- border: semanticColor.action.secondary.destructive.hover.border
216
- },
217
- press: {
218
- foreground: semanticColor.action.secondary.destructive.press.foreground
219
- },
220
203
  disabled: {
221
- foreground: semanticColor.action.secondary.disabled.foreground
204
+ foreground: semanticColor.action.tertiary.disabled.foreground
222
205
  }
223
- },
206
+ }),
224
207
  destructiveLight: {
225
208
  default: {
226
209
  border: tokens__namespace.color.white64,
@@ -666,7 +649,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
666
649
  }
667
650
  };
668
651
  } else if (kind === "tertiary") {
669
- const themeColorAction = theme.color.text[colorToAction];
652
+ const themeColorAction = theme.color.tertiary[colorToAction];
670
653
  const focusStyling = {
671
654
  outlineStyle: "solid",
672
655
  borderColor: "transparent",
package/dist/themes/default.d.ts CHANGED
@@ -29,11 +29,17 @@ declare const theme: {
29
29
  };
30
30
  };
31
31
  progressiveLight: {
32
+ default: {
33
+ background: string;
34
+ border: string;
35
+ foreground: string;
36
+ };
32
37
  focus: {
33
38
  border: string;
34
39
  };
35
40
  hover: {
36
41
  border: string;
42
+ backgrond: string;
37
43
  background: string;
38
44
  foreground: string;
39
45
  };
@@ -46,11 +52,6 @@ declare const theme: {
46
52
  background: string;
47
53
  foreground: string;
48
54
  };
49
- default: {
50
- border: string;
51
- background: string;
52
- foreground: string;
53
- };
54
55
  };
55
56
  destructive: {
56
57
  focus: {
@@ -77,6 +78,11 @@ declare const theme: {
77
78
  };
78
79
  };
79
80
  destructiveLight: {
81
+ default: {
82
+ background: string;
83
+ border: string;
84
+ foreground: string;
85
+ };
80
86
  focus: {
81
87
  border: string;
82
88
  };
@@ -94,11 +100,6 @@ declare const theme: {
94
100
  background: string;
95
101
  foreground: string;
96
102
  };
97
- default: {
98
- border: string;
99
- background: string;
100
- foreground: string;
101
- };
102
103
  };
103
104
  };
104
105
  /**
@@ -108,24 +109,24 @@ declare const theme: {
108
109
  */
109
110
  secondary: {
110
111
  progressive: {
111
- default: {
112
- background: string;
113
- border: string;
114
- foreground: string;
115
- };
116
112
  focus: {
117
113
  border: string;
118
114
  };
119
115
  hover: {
120
- background: string;
121
116
  icon: string;
122
117
  border: string;
118
+ background: string;
123
119
  foreground: string;
124
120
  };
125
121
  disabled: {
126
122
  border: string;
127
123
  foreground: string;
128
124
  };
125
+ default: {
126
+ border: string;
127
+ background: string;
128
+ foreground: string;
129
+ };
129
130
  press: {
130
131
  border: string;
131
132
  background: string;
@@ -163,9 +164,9 @@ declare const theme: {
163
164
  border: string;
164
165
  };
165
166
  hover: {
166
- background: string;
167
167
  icon: string;
168
168
  border: string;
169
+ background: string;
169
170
  foreground: string;
170
171
  };
171
172
  disabled: {
@@ -215,22 +216,27 @@ declare const theme: {
215
216
  *
216
217
  * Text buttons
217
218
  */
218
- text: {
219
+ tertiary: {
219
220
  progressive: {
220
- default: {
221
- background: string;
221
+ focus: {
222
+ border: string;
223
+ };
224
+ disabled: {
222
225
  foreground: string;
223
226
  };
224
- focus: {
227
+ default: {
225
228
  border: string;
229
+ background: string;
230
+ foreground: string;
226
231
  };
227
232
  hover: {
228
233
  border: string;
229
- };
230
- press: {
234
+ background: string;
231
235
  foreground: string;
232
236
  };
233
- disabled: {
237
+ press: {
238
+ border: string;
239
+ background: string;
234
240
  foreground: string;
235
241
  };
236
242
  };
@@ -257,20 +263,25 @@ declare const theme: {
257
263
  };
258
264
  };
259
265
  destructive: {
260
- default: {
261
- background: string;
266
+ focus: {
267
+ border: string;
268
+ };
269
+ disabled: {
262
270
  foreground: string;
263
271
  };
264
- focus: {
272
+ default: {
265
273
  border: string;
274
+ background: string;
275
+ foreground: string;
266
276
  };
267
277
  hover: {
268
278
  border: string;
269
- };
270
- press: {
279
+ background: string;
271
280
  foreground: string;
272
281
  };
273
- disabled: {
282
+ press: {
283
+ border: string;
284
+ background: string;
274
285
  foreground: string;
275
286
  };
276
287
  };
package/dist/themes/khanmigo.d.ts CHANGED
@@ -29,11 +29,17 @@ declare const theme: {
29
29
  };
30
30
  };
31
31
  progressiveLight: {
32
+ default: {
33
+ background: string;
34
+ border: string;
35
+ foreground: string;
36
+ };
32
37
  focus: {
33
38
  border: string;
34
39
  };
35
40
  hover: {
36
41
  border: string;
42
+ backgrond: string;
37
43
  background: string;
38
44
  foreground: string;
39
45
  };
@@ -46,11 +52,6 @@ declare const theme: {
46
52
  background: string;
47
53
  foreground: string;
48
54
  };
49
- default: {
50
- border: string;
51
- background: string;
52
- foreground: string;
53
- };
54
55
  };
55
56
  destructive: {
56
57
  focus: {
@@ -77,6 +78,11 @@ declare const theme: {
77
78
  };
78
79
  };
79
80
  destructiveLight: {
81
+ default: {
82
+ background: string;
83
+ border: string;
84
+ foreground: string;
85
+ };
80
86
  focus: {
81
87
  border: string;
82
88
  };
@@ -94,33 +100,28 @@ declare const theme: {
94
100
  background: string;
95
101
  foreground: string;
96
102
  };
97
- default: {
98
- border: string;
99
- background: string;
100
- foreground: string;
101
- };
102
103
  };
103
104
  };
104
105
  secondary: {
105
106
  progressive: {
106
- default: {
107
- background: string;
108
- border: string;
109
- foreground: string;
110
- };
111
107
  focus: {
112
108
  border: string;
113
109
  };
114
110
  hover: {
115
- background: string;
116
111
  icon: string;
117
112
  border: string;
113
+ background: string;
118
114
  foreground: string;
119
115
  };
120
116
  disabled: {
121
117
  border: string;
122
118
  foreground: string;
123
119
  };
120
+ default: {
121
+ border: string;
122
+ background: string;
123
+ foreground: string;
124
+ };
124
125
  press: {
125
126
  border: string;
126
127
  background: string;
@@ -158,9 +159,9 @@ declare const theme: {
158
159
  border: string;
159
160
  };
160
161
  hover: {
161
- background: string;
162
162
  icon: string;
163
163
  border: string;
164
+ background: string;
164
165
  foreground: string;
165
166
  };
166
167
  disabled: {
@@ -205,22 +206,27 @@ declare const theme: {
205
206
  };
206
207
  };
207
208
  };
208
- text: {
209
+ tertiary: {
209
210
  progressive: {
210
- default: {
211
- background: string;
211
+ focus: {
212
+ border: string;
213
+ };
214
+ disabled: {
212
215
  foreground: string;
213
216
  };
214
- focus: {
217
+ default: {
215
218
  border: string;
219
+ background: string;
220
+ foreground: string;
216
221
  };
217
222
  hover: {
218
223
  border: string;
219
- };
220
- press: {
224
+ background: string;
221
225
  foreground: string;
222
226
  };
223
- disabled: {
227
+ press: {
228
+ border: string;
229
+ background: string;
224
230
  foreground: string;
225
231
  };
226
232
  };
@@ -247,20 +253,25 @@ declare const theme: {
247
253
  };
248
254
  };
249
255
  destructive: {
250
- default: {
251
- background: string;
256
+ focus: {
257
+ border: string;
258
+ };
259
+ disabled: {
252
260
  foreground: string;
253
261
  };
254
- focus: {
262
+ default: {
255
263
  border: string;
264
+ background: string;
265
+ foreground: string;
256
266
  };
257
267
  hover: {
258
268
  border: string;
259
- };
260
- press: {
269
+ background: string;
261
270
  foreground: string;
262
271
  };
263
- disabled: {
272
+ press: {
273
+ border: string;
274
+ background: string;
264
275
  foreground: string;
265
276
  };
266
277
  };
package/dist/themes/themed-button.d.ts CHANGED
@@ -36,11 +36,17 @@ export declare const ButtonThemeContext: React.Context<{
36
36
  };
37
37
  };
38
38
  progressiveLight: {
39
+ default: {
40
+ background: string;
41
+ border: string;
42
+ foreground: string;
43
+ };
39
44
  focus: {
40
45
  border: string;
41
46
  };
42
47
  hover: {
43
48
  border: string;
49
+ backgrond: string;
44
50
  background: string;
45
51
  foreground: string;
46
52
  };
@@ -53,11 +59,6 @@ export declare const ButtonThemeContext: React.Context<{
53
59
  background: string;
54
60
  foreground: string;
55
61
  };
56
- default: {
57
- border: string;
58
- background: string;
59
- foreground: string;
60
- };
61
62
  };
62
63
  destructive: {
63
64
  focus: {
@@ -84,6 +85,11 @@ export declare const ButtonThemeContext: React.Context<{
84
85
  };
85
86
  };
86
87
  destructiveLight: {
88
+ default: {
89
+ background: string;
90
+ border: string;
91
+ foreground: string;
92
+ };
87
93
  focus: {
88
94
  border: string;
89
95
  };
@@ -101,33 +107,28 @@ export declare const ButtonThemeContext: React.Context<{
101
107
  background: string;
102
108
  foreground: string;
103
109
  };
104
- default: {
105
- border: string;
106
- background: string;
107
- foreground: string;
108
- };
109
110
  };
110
111
  };
111
112
  secondary: {
112
113
  progressive: {
113
- default: {
114
- background: string;
115
- border: string;
116
- foreground: string;
117
- };
118
114
  focus: {
119
115
  border: string;
120
116
  };
121
117
  hover: {
122
- background: string;
123
118
  icon: string;
124
119
  border: string;
120
+ background: string;
125
121
  foreground: string;
126
122
  };
127
123
  disabled: {
128
124
  border: string;
129
125
  foreground: string;
130
126
  };
127
+ default: {
128
+ border: string;
129
+ background: string;
130
+ foreground: string;
131
+ };
131
132
  press: {
132
133
  border: string;
133
134
  background: string;
@@ -165,9 +166,9 @@ export declare const ButtonThemeContext: React.Context<{
165
166
  border: string;
166
167
  };
167
168
  hover: {
168
- background: string;
169
169
  icon: string;
170
170
  border: string;
171
+ background: string;
171
172
  foreground: string;
172
173
  };
173
174
  disabled: {
@@ -212,22 +213,27 @@ export declare const ButtonThemeContext: React.Context<{
212
213
  };
213
214
  };
214
215
  };
215
- text: {
216
+ tertiary: {
216
217
  progressive: {
217
- default: {
218
- background: string;
218
+ focus: {
219
+ border: string;
220
+ };
221
+ disabled: {
219
222
  foreground: string;
220
223
  };
221
- focus: {
224
+ default: {
222
225
  border: string;
226
+ background: string;
227
+ foreground: string;
223
228
  };
224
229
  hover: {
225
230
  border: string;
226
- };
227
- press: {
231
+ background: string;
228
232
  foreground: string;
229
233
  };
230
- disabled: {
234
+ press: {
235
+ border: string;
236
+ background: string;
231
237
  foreground: string;
232
238
  };
233
239
  };
@@ -254,20 +260,25 @@ export declare const ButtonThemeContext: React.Context<{
254
260
  };
255
261
  };
256
262
  destructive: {
257
- default: {
258
- background: string;
263
+ focus: {
264
+ border: string;
265
+ };
266
+ disabled: {
259
267
  foreground: string;
260
268
  };
261
- focus: {
269
+ default: {
262
270
  border: string;
271
+ background: string;
272
+ foreground: string;
263
273
  };
264
274
  hover: {
265
275
  border: string;
266
- };
267
- press: {
276
+ background: string;
268
277
  foreground: string;
269
278
  };
270
- disabled: {
279
+ press: {
280
+ border: string;
281
+ background: string;
271
282
  foreground: string;
272
283
  };
273
284
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-button",
3
- "version": "7.1.4",
3
+ "version": "7.1.6",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -13,12 +13,12 @@
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
15
  "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-clickable": "6.1.4",
16
+ "@khanacademy/wonder-blocks-clickable": "6.1.6",
17
17
  "@khanacademy/wonder-blocks-core": "12.2.1",
18
18
  "@khanacademy/wonder-blocks-icon": "5.1.3",
19
- "@khanacademy/wonder-blocks-progress-spinner": "3.1.4",
19
+ "@khanacademy/wonder-blocks-progress-spinner": "3.1.6",
20
20
  "@khanacademy/wonder-blocks-theming": "3.2.1",
21
- "@khanacademy/wonder-blocks-tokens": "5.1.1",
21
+ "@khanacademy/wonder-blocks-tokens": "6.0.0",
22
22
  "@khanacademy/wonder-blocks-typography": "3.1.3"
23
23
  },
24
24
  "peerDependencies": {