@instructure/ui-buttons 10.10.1-snapshot-2 → 10.10.1-snapshot-3

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 (12) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/BaseButton/styles.js +40 -20
  3. package/es/BaseButton/theme.js +21 -1
  4. package/lib/BaseButton/styles.js +40 -20
  5. package/lib/BaseButton/theme.js +21 -1
  6. package/package.json +20 -20
  7. package/src/BaseButton/styles.ts +40 -20
  8. package/src/BaseButton/theme.ts +21 -1
  9. package/src/Button/README.md +9 -1
  10. package/tsconfig.build.tsbuildinfo +1 -1
  11. package/types/BaseButton/styles.d.ts.map +1 -1
  12. package/types/BaseButton/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.10.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-2) (2025-01-09)
6
+ ## [10.10.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-3) (2025-01-10)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-buttons
8
+
9
+ ### Features
10
+
11
+ * **shared-types,ui-buttons:** add theme variables for default and hover states for buttons ([43fde61](https://github.com/instructure/instructure-ui/commit/43fde61a9a5beea44b75d56358cf0d886c9da41a))
9
12
 
10
13
 
11
14
 
package/es/BaseButton/styles.js CHANGED
@@ -115,135 +115,155 @@ const generateStyle = (componentTheme, props, state) => {
115
115
  default: {
116
116
  color: componentTheme.primaryColor,
117
117
  background: componentTheme.primaryBackground,
118
- borderColor: componentTheme.primaryBorderColor
118
+ borderColor: componentTheme.primaryBorderColor,
119
+ boxShadow: componentTheme.primaryBoxShadow
119
120
  },
120
121
  active: {
121
122
  background: componentTheme.primaryActiveBackground,
122
123
  boxShadow: componentTheme.primaryActiveBoxShadow
123
124
  },
124
125
  hover: {
125
- background: componentTheme.primaryHoverBackground
126
+ background: componentTheme.primaryHoverBackground,
127
+ boxShadow: componentTheme.primaryHoverBoxShadow
126
128
  }
127
129
  } : {
128
130
  default: {
129
131
  color: componentTheme.primaryGhostColor,
130
132
  borderColor: componentTheme.primaryGhostBorderColor,
131
- background: componentTheme.primaryGhostBackground
133
+ background: componentTheme.primaryGhostBackground,
134
+ boxShadow: componentTheme.primaryBoxShadow
132
135
  },
133
136
  active: {
134
137
  background: componentTheme.primaryGhostActiveBackground,
135
138
  boxShadow: componentTheme.primaryGhostActiveBoxShadow
136
139
  },
137
140
  hover: {
138
- background: componentTheme.primaryGhostHoverBackground
141
+ background: componentTheme.primaryGhostHoverBackground,
142
+ boxShadow: componentTheme.primaryHoverBoxShadow
139
143
  }
140
144
  },
141
145
  secondary: withBackground ? {
142
146
  default: {
143
147
  color: componentTheme.secondaryColor,
144
148
  background: componentTheme.secondaryBackground,
145
- borderColor: componentTheme.secondaryBorderColor
149
+ borderColor: componentTheme.secondaryBorderColor,
150
+ boxShadow: componentTheme.secondaryBoxShadow
146
151
  },
147
152
  active: {
148
153
  background: componentTheme.secondaryActiveBackground,
149
154
  boxShadow: componentTheme.secondaryActiveBoxShadow
150
155
  },
151
156
  hover: {
152
- background: componentTheme.secondaryHoverBackground
157
+ background: componentTheme.secondaryHoverBackground,
158
+ boxShadow: componentTheme.secondaryHoverBoxShadow
153
159
  }
154
160
  } : {
155
161
  default: {
156
162
  color: componentTheme.secondaryGhostColor,
157
163
  borderColor: componentTheme.secondaryGhostBorderColor,
158
- background: componentTheme.secondaryGhostBackground
164
+ background: componentTheme.secondaryGhostBackground,
165
+ boxShadow: componentTheme.secondaryGhostBoxShadow
159
166
  },
160
167
  active: {
161
168
  background: componentTheme.secondaryGhostActiveBackground,
162
169
  boxShadow: componentTheme.secondaryGhostActiveBoxShadow
163
170
  },
164
171
  hover: {
165
- background: componentTheme.secondaryGhostHoverBackground
172
+ background: componentTheme.secondaryGhostHoverBackground,
173
+ boxShadow: componentTheme.secondaryGhostHoverBoxShadow
166
174
  }
167
175
  },
168
176
  'primary-inverse': withBackground ? {
169
177
  default: {
170
178
  color: componentTheme.primaryInverseColor,
171
179
  background: componentTheme.primaryInverseBackground,
172
- borderColor: componentTheme.primaryInverseBorderColor
180
+ borderColor: componentTheme.primaryInverseBorderColor,
181
+ boxShadow: componentTheme.primaryInverseBoxShadow
173
182
  },
174
183
  active: {
175
184
  background: componentTheme.primaryInverseActiveBackground,
176
185
  boxShadow: componentTheme.primaryInverseActiveBoxShadow
177
186
  },
178
187
  hover: {
179
- background: componentTheme.primaryInverseHoverBackground
188
+ background: componentTheme.primaryInverseHoverBackground,
189
+ boxShadow: componentTheme.primaryInverseHoverBoxShadow
180
190
  }
181
191
  } : {
182
192
  default: {
183
193
  color: componentTheme.primaryInverseGhostColor,
184
194
  borderColor: componentTheme.primaryInverseGhostBorderColor,
185
- background: componentTheme.primaryInverseGhostBackground
195
+ background: componentTheme.primaryInverseGhostBackground,
196
+ boxShadow: componentTheme.primaryInverseGhostBoxShadow
186
197
  },
187
198
  active: {
188
199
  background: componentTheme.primaryInverseGhostActiveBackground,
189
200
  boxShadow: componentTheme.primaryInverseGhostActiveBoxShadow
190
201
  },
191
202
  hover: {
192
- background: componentTheme.primaryInverseGhostHoverBackground
203
+ background: componentTheme.primaryInverseGhostHoverBackground,
204
+ boxShadow: componentTheme.primaryInverseGhostHoverBoxShadow
193
205
  }
194
206
  },
195
207
  success: withBackground ? {
196
208
  default: {
197
209
  color: componentTheme.successColor,
198
210
  background: componentTheme.successBackground,
199
- borderColor: componentTheme.successBorderColor
211
+ borderColor: componentTheme.successBorderColor,
212
+ boxShadow: componentTheme.successBoxShadow
200
213
  },
201
214
  active: {
202
215
  background: componentTheme.successActiveBackground,
203
216
  boxShadow: componentTheme.successActiveBoxShadow
204
217
  },
205
218
  hover: {
206
- background: componentTheme.successHoverBackground
219
+ background: componentTheme.successHoverBackground,
220
+ boxShadow: componentTheme.successHoverBoxShadow
207
221
  }
208
222
  } : {
209
223
  default: {
210
224
  color: componentTheme.successGhostColor,
211
225
  borderColor: componentTheme.successGhostBorderColor,
212
- background: componentTheme.successGhostBackground
226
+ background: componentTheme.successGhostBackground,
227
+ boxShadow: componentTheme.successGhostBoxShadow
213
228
  },
214
229
  active: {
215
230
  background: componentTheme.successGhostActiveBackground,
216
231
  boxShadow: componentTheme.successGhostActiveBoxShadow
217
232
  },
218
233
  hover: {
219
- background: componentTheme.successGhostHoverBackground
234
+ background: componentTheme.successGhostHoverBackground,
235
+ boxShadow: componentTheme.successGhostHoverBoxShadow
220
236
  }
221
237
  },
222
238
  danger: withBackground ? {
223
239
  default: {
224
240
  color: componentTheme.dangerColor,
225
241
  background: componentTheme.dangerBackground,
226
- borderColor: componentTheme.dangerBorderColor
242
+ borderColor: componentTheme.dangerBorderColor,
243
+ boxShadow: componentTheme.dangerBoxShadow
227
244
  },
228
245
  active: {
229
246
  background: componentTheme.dangerActiveBackground,
230
247
  boxShadow: componentTheme.dangerActiveBoxShadow
231
248
  },
232
249
  hover: {
233
- background: componentTheme.dangerHoverBackground
250
+ background: componentTheme.dangerHoverBackground,
251
+ boxShadow: componentTheme.dangerHoverBoxShadow
234
252
  }
235
253
  } : {
236
254
  default: {
237
255
  color: componentTheme.dangerGhostColor,
238
256
  borderColor: componentTheme.dangerGhostBorderColor,
239
- background: componentTheme.dangerGhostBackground
257
+ background: componentTheme.dangerGhostBackground,
258
+ boxShadow: componentTheme.dangerGhostBoxShadow
240
259
  },
241
260
  active: {
242
261
  background: componentTheme.dangerGhostActiveBackground,
243
262
  boxShadow: componentTheme.dangerGhostActiveBoxShadow
244
263
  },
245
264
  hover: {
246
- background: componentTheme.dangerGhostHoverBackground
265
+ background: componentTheme.dangerGhostHoverBackground,
266
+ boxShadow: componentTheme.dangerGhostHoverBoxShadow
247
267
  }
248
268
  }
249
269
  };
package/es/BaseButton/theme.js CHANGED
@@ -97,6 +97,10 @@ const generateComponentTheme = theme => {
97
97
  primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue1212,
98
98
  primaryGhostActiveBackground: 'transparent',
99
99
  primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue1212, 28)}`,
100
+ primaryBoxShadow: 'none',
101
+ primaryGhostBoxShadow: 'none',
102
+ primaryHoverBoxShadow: 'none',
103
+ primaryGhostHoverBoxShadow: 'none',
100
104
  secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
101
105
  secondaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1214,
102
106
  secondaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey1111,
@@ -109,6 +113,10 @@ const generateComponentTheme = theme => {
109
113
  secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey1111,
110
114
  secondaryGhostActiveBackground: 'transparent',
111
115
  secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey125125, 28)}`,
116
+ secondaryBoxShadow: 'none',
117
+ secondaryGhostBoxShadow: 'none',
118
+ secondaryHoverBoxShadow: 'none',
119
+ secondaryGhostHoverBoxShadow: 'none',
112
120
  successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
113
121
  successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.green5782,
114
122
  successBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts23 = colors.contrasts) === null || _colors$contrasts23 === void 0 ? void 0 : _colors$contrasts23.green4570,
@@ -121,6 +129,10 @@ const generateComponentTheme = theme => {
121
129
  successGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.green4570, 10),
122
130
  successGhostActiveBackground: 'transparent',
123
131
  successGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.green4570, 28)}`,
132
+ successBoxShadow: 'none',
133
+ successGhostBoxShadow: 'none',
134
+ successHoverBoxShadow: 'none',
135
+ successGhostHoverBoxShadow: 'none',
124
136
  dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts31 = colors.contrasts) === null || _colors$contrasts31 === void 0 ? void 0 : _colors$contrasts31.white1010,
125
137
  dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts32 = colors.contrasts) === null || _colors$contrasts32 === void 0 ? void 0 : _colors$contrasts32.red5782,
126
138
  dangerBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts33 = colors.contrasts) === null || _colors$contrasts33 === void 0 ? void 0 : _colors$contrasts33.red4570,
@@ -133,6 +145,10 @@ const generateComponentTheme = theme => {
133
145
  dangerGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.red4570, 10),
134
146
  dangerGhostActiveBackground: 'transparent',
135
147
  dangerGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.red4570, 28)}`,
148
+ dangerBoxShadow: 'none',
149
+ dangerGhostBoxShadow: 'none',
150
+ dangerHoverBoxShadow: 'none',
151
+ dangerGhostHoverBoxShadow: 'none',
136
152
  primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts41 = colors.contrasts) === null || _colors$contrasts41 === void 0 ? void 0 : _colors$contrasts41.grey125125,
137
153
  primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts42 = colors.contrasts) === null || _colors$contrasts42 === void 0 ? void 0 : _colors$contrasts42.grey1214,
138
154
  primaryInverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts43 = colors.contrasts) === null || _colors$contrasts43 === void 0 ? void 0 : _colors$contrasts43.white1010,
@@ -144,7 +160,11 @@ const generateComponentTheme = theme => {
144
160
  primaryInverseGhostBackground: 'transparent',
145
161
  primaryInverseGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010, 10),
146
162
  primaryInverseGhostActiveBackground: 'transparent',
147
- primaryInverseGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`
163
+ primaryInverseGhostActiveBoxShadow: `${activeShadow} ${alpha(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`,
164
+ primaryInverseBoxShadow: 'none',
165
+ primaryInverseGhostBoxShadow: 'none',
166
+ primaryInverseHoverBoxShadow: 'none',
167
+ primaryInverseGhostHoverBoxShadow: 'none'
148
168
  };
149
169
  return {
150
170
  ...componentVariables,
package/lib/BaseButton/styles.js CHANGED
@@ -121,135 +121,155 @@ const generateStyle = (componentTheme, props, state) => {
121
121
  default: {
122
122
  color: componentTheme.primaryColor,
123
123
  background: componentTheme.primaryBackground,
124
- borderColor: componentTheme.primaryBorderColor
124
+ borderColor: componentTheme.primaryBorderColor,
125
+ boxShadow: componentTheme.primaryBoxShadow
125
126
  },
126
127
  active: {
127
128
  background: componentTheme.primaryActiveBackground,
128
129
  boxShadow: componentTheme.primaryActiveBoxShadow
129
130
  },
130
131
  hover: {
131
- background: componentTheme.primaryHoverBackground
132
+ background: componentTheme.primaryHoverBackground,
133
+ boxShadow: componentTheme.primaryHoverBoxShadow
132
134
  }
133
135
  } : {
134
136
  default: {
135
137
  color: componentTheme.primaryGhostColor,
136
138
  borderColor: componentTheme.primaryGhostBorderColor,
137
- background: componentTheme.primaryGhostBackground
139
+ background: componentTheme.primaryGhostBackground,
140
+ boxShadow: componentTheme.primaryBoxShadow
138
141
  },
139
142
  active: {
140
143
  background: componentTheme.primaryGhostActiveBackground,
141
144
  boxShadow: componentTheme.primaryGhostActiveBoxShadow
142
145
  },
143
146
  hover: {
144
- background: componentTheme.primaryGhostHoverBackground
147
+ background: componentTheme.primaryGhostHoverBackground,
148
+ boxShadow: componentTheme.primaryHoverBoxShadow
145
149
  }
146
150
  },
147
151
  secondary: withBackground ? {
148
152
  default: {
149
153
  color: componentTheme.secondaryColor,
150
154
  background: componentTheme.secondaryBackground,
151
- borderColor: componentTheme.secondaryBorderColor
155
+ borderColor: componentTheme.secondaryBorderColor,
156
+ boxShadow: componentTheme.secondaryBoxShadow
152
157
  },
153
158
  active: {
154
159
  background: componentTheme.secondaryActiveBackground,
155
160
  boxShadow: componentTheme.secondaryActiveBoxShadow
156
161
  },
157
162
  hover: {
158
- background: componentTheme.secondaryHoverBackground
163
+ background: componentTheme.secondaryHoverBackground,
164
+ boxShadow: componentTheme.secondaryHoverBoxShadow
159
165
  }
160
166
  } : {
161
167
  default: {
162
168
  color: componentTheme.secondaryGhostColor,
163
169
  borderColor: componentTheme.secondaryGhostBorderColor,
164
- background: componentTheme.secondaryGhostBackground
170
+ background: componentTheme.secondaryGhostBackground,
171
+ boxShadow: componentTheme.secondaryGhostBoxShadow
165
172
  },
166
173
  active: {
167
174
  background: componentTheme.secondaryGhostActiveBackground,
168
175
  boxShadow: componentTheme.secondaryGhostActiveBoxShadow
169
176
  },
170
177
  hover: {
171
- background: componentTheme.secondaryGhostHoverBackground
178
+ background: componentTheme.secondaryGhostHoverBackground,
179
+ boxShadow: componentTheme.secondaryGhostHoverBoxShadow
172
180
  }
173
181
  },
174
182
  'primary-inverse': withBackground ? {
175
183
  default: {
176
184
  color: componentTheme.primaryInverseColor,
177
185
  background: componentTheme.primaryInverseBackground,
178
- borderColor: componentTheme.primaryInverseBorderColor
186
+ borderColor: componentTheme.primaryInverseBorderColor,
187
+ boxShadow: componentTheme.primaryInverseBoxShadow
179
188
  },
180
189
  active: {
181
190
  background: componentTheme.primaryInverseActiveBackground,
182
191
  boxShadow: componentTheme.primaryInverseActiveBoxShadow
183
192
  },
184
193
  hover: {
185
- background: componentTheme.primaryInverseHoverBackground
194
+ background: componentTheme.primaryInverseHoverBackground,
195
+ boxShadow: componentTheme.primaryInverseHoverBoxShadow
186
196
  }
187
197
  } : {
188
198
  default: {
189
199
  color: componentTheme.primaryInverseGhostColor,
190
200
  borderColor: componentTheme.primaryInverseGhostBorderColor,
191
- background: componentTheme.primaryInverseGhostBackground
201
+ background: componentTheme.primaryInverseGhostBackground,
202
+ boxShadow: componentTheme.primaryInverseGhostBoxShadow
192
203
  },
193
204
  active: {
194
205
  background: componentTheme.primaryInverseGhostActiveBackground,
195
206
  boxShadow: componentTheme.primaryInverseGhostActiveBoxShadow
196
207
  },
197
208
  hover: {
198
- background: componentTheme.primaryInverseGhostHoverBackground
209
+ background: componentTheme.primaryInverseGhostHoverBackground,
210
+ boxShadow: componentTheme.primaryInverseGhostHoverBoxShadow
199
211
  }
200
212
  },
201
213
  success: withBackground ? {
202
214
  default: {
203
215
  color: componentTheme.successColor,
204
216
  background: componentTheme.successBackground,
205
- borderColor: componentTheme.successBorderColor
217
+ borderColor: componentTheme.successBorderColor,
218
+ boxShadow: componentTheme.successBoxShadow
206
219
  },
207
220
  active: {
208
221
  background: componentTheme.successActiveBackground,
209
222
  boxShadow: componentTheme.successActiveBoxShadow
210
223
  },
211
224
  hover: {
212
- background: componentTheme.successHoverBackground
225
+ background: componentTheme.successHoverBackground,
226
+ boxShadow: componentTheme.successHoverBoxShadow
213
227
  }
214
228
  } : {
215
229
  default: {
216
230
  color: componentTheme.successGhostColor,
217
231
  borderColor: componentTheme.successGhostBorderColor,
218
- background: componentTheme.successGhostBackground
232
+ background: componentTheme.successGhostBackground,
233
+ boxShadow: componentTheme.successGhostBoxShadow
219
234
  },
220
235
  active: {
221
236
  background: componentTheme.successGhostActiveBackground,
222
237
  boxShadow: componentTheme.successGhostActiveBoxShadow
223
238
  },
224
239
  hover: {
225
- background: componentTheme.successGhostHoverBackground
240
+ background: componentTheme.successGhostHoverBackground,
241
+ boxShadow: componentTheme.successGhostHoverBoxShadow
226
242
  }
227
243
  },
228
244
  danger: withBackground ? {
229
245
  default: {
230
246
  color: componentTheme.dangerColor,
231
247
  background: componentTheme.dangerBackground,
232
- borderColor: componentTheme.dangerBorderColor
248
+ borderColor: componentTheme.dangerBorderColor,
249
+ boxShadow: componentTheme.dangerBoxShadow
233
250
  },
234
251
  active: {
235
252
  background: componentTheme.dangerActiveBackground,
236
253
  boxShadow: componentTheme.dangerActiveBoxShadow
237
254
  },
238
255
  hover: {
239
- background: componentTheme.dangerHoverBackground
256
+ background: componentTheme.dangerHoverBackground,
257
+ boxShadow: componentTheme.dangerHoverBoxShadow
240
258
  }
241
259
  } : {
242
260
  default: {
243
261
  color: componentTheme.dangerGhostColor,
244
262
  borderColor: componentTheme.dangerGhostBorderColor,
245
- background: componentTheme.dangerGhostBackground
263
+ background: componentTheme.dangerGhostBackground,
264
+ boxShadow: componentTheme.dangerGhostBoxShadow
246
265
  },
247
266
  active: {
248
267
  background: componentTheme.dangerGhostActiveBackground,
249
268
  boxShadow: componentTheme.dangerGhostActiveBoxShadow
250
269
  },
251
270
  hover: {
252
- background: componentTheme.dangerGhostHoverBackground
271
+ background: componentTheme.dangerGhostHoverBackground,
272
+ boxShadow: componentTheme.dangerGhostHoverBoxShadow
253
273
  }
254
274
  }
255
275
  };
package/lib/BaseButton/theme.js CHANGED
@@ -104,6 +104,10 @@ const generateComponentTheme = theme => {
104
104
  primaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue1212,
105
105
  primaryGhostActiveBackground: 'transparent',
106
106
  primaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue1212, 28)}`,
107
+ primaryBoxShadow: 'none',
108
+ primaryGhostBoxShadow: 'none',
109
+ primaryHoverBoxShadow: 'none',
110
+ primaryGhostHoverBoxShadow: 'none',
107
111
  secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
108
112
  secondaryBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1214,
109
113
  secondaryBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey1111,
@@ -116,6 +120,10 @@ const generateComponentTheme = theme => {
116
120
  secondaryGhostHoverBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts19 = colors.contrasts) === null || _colors$contrasts19 === void 0 ? void 0 : _colors$contrasts19.grey1111,
117
121
  secondaryGhostActiveBackground: 'transparent',
118
122
  secondaryGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts20 = colors.contrasts) === null || _colors$contrasts20 === void 0 ? void 0 : _colors$contrasts20.grey125125, 28)}`,
123
+ secondaryBoxShadow: 'none',
124
+ secondaryGhostBoxShadow: 'none',
125
+ secondaryHoverBoxShadow: 'none',
126
+ secondaryGhostHoverBoxShadow: 'none',
119
127
  successColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts21 = colors.contrasts) === null || _colors$contrasts21 === void 0 ? void 0 : _colors$contrasts21.white1010,
120
128
  successBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts22 = colors.contrasts) === null || _colors$contrasts22 === void 0 ? void 0 : _colors$contrasts22.green5782,
121
129
  successBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts23 = colors.contrasts) === null || _colors$contrasts23 === void 0 ? void 0 : _colors$contrasts23.green4570,
@@ -128,6 +136,10 @@ const generateComponentTheme = theme => {
128
136
  successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts29 = colors.contrasts) === null || _colors$contrasts29 === void 0 ? void 0 : _colors$contrasts29.green4570, 10),
129
137
  successGhostActiveBackground: 'transparent',
130
138
  successGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts30 = colors.contrasts) === null || _colors$contrasts30 === void 0 ? void 0 : _colors$contrasts30.green4570, 28)}`,
139
+ successBoxShadow: 'none',
140
+ successGhostBoxShadow: 'none',
141
+ successHoverBoxShadow: 'none',
142
+ successGhostHoverBoxShadow: 'none',
131
143
  dangerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts31 = colors.contrasts) === null || _colors$contrasts31 === void 0 ? void 0 : _colors$contrasts31.white1010,
132
144
  dangerBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts32 = colors.contrasts) === null || _colors$contrasts32 === void 0 ? void 0 : _colors$contrasts32.red5782,
133
145
  dangerBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts33 = colors.contrasts) === null || _colors$contrasts33 === void 0 ? void 0 : _colors$contrasts33.red4570,
@@ -140,6 +152,10 @@ const generateComponentTheme = theme => {
140
152
  dangerGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts39 = colors.contrasts) === null || _colors$contrasts39 === void 0 ? void 0 : _colors$contrasts39.red4570, 10),
141
153
  dangerGhostActiveBackground: 'transparent',
142
154
  dangerGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts40 = colors.contrasts) === null || _colors$contrasts40 === void 0 ? void 0 : _colors$contrasts40.red4570, 28)}`,
155
+ dangerBoxShadow: 'none',
156
+ dangerGhostBoxShadow: 'none',
157
+ dangerHoverBoxShadow: 'none',
158
+ dangerGhostHoverBoxShadow: 'none',
143
159
  primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts41 = colors.contrasts) === null || _colors$contrasts41 === void 0 ? void 0 : _colors$contrasts41.grey125125,
144
160
  primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts42 = colors.contrasts) === null || _colors$contrasts42 === void 0 ? void 0 : _colors$contrasts42.grey1214,
145
161
  primaryInverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts43 = colors.contrasts) === null || _colors$contrasts43 === void 0 ? void 0 : _colors$contrasts43.white1010,
@@ -151,7 +167,11 @@ const generateComponentTheme = theme => {
151
167
  primaryInverseGhostBackground: 'transparent',
152
168
  primaryInverseGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts49 = colors.contrasts) === null || _colors$contrasts49 === void 0 ? void 0 : _colors$contrasts49.white1010, 10),
153
169
  primaryInverseGhostActiveBackground: 'transparent',
154
- primaryInverseGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`
170
+ primaryInverseGhostActiveBoxShadow: `${activeShadow} ${(0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : (_colors$contrasts50 = colors.contrasts) === null || _colors$contrasts50 === void 0 ? void 0 : _colors$contrasts50.white1010, 28)}`,
171
+ primaryInverseBoxShadow: 'none',
172
+ primaryInverseGhostBoxShadow: 'none',
173
+ primaryInverseHoverBoxShadow: 'none',
174
+ primaryInverseGhostHoverBoxShadow: 'none'
155
175
  };
156
176
  return {
157
177
  ...componentVariables,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "10.10.1-snapshot-2",
3
+ "version": "10.10.1-snapshot-3",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,10 +23,10 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.10.1-snapshot-2",
27
- "@instructure/ui-babel-preset": "10.10.1-snapshot-2",
28
- "@instructure/ui-test-utils": "10.10.1-snapshot-2",
29
- "@instructure/ui-themes": "10.10.1-snapshot-2",
26
+ "@instructure/ui-axe-check": "10.10.1-snapshot-3",
27
+ "@instructure/ui-babel-preset": "10.10.1-snapshot-3",
28
+ "@instructure/ui-test-utils": "10.10.1-snapshot-3",
29
+ "@instructure/ui-themes": "10.10.1-snapshot-3",
30
30
  "@testing-library/jest-dom": "^6.6.3",
31
31
  "@testing-library/react": "^16.0.1",
32
32
  "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.26.0",
37
- "@instructure/console": "10.10.1-snapshot-2",
38
- "@instructure/emotion": "10.10.1-snapshot-2",
39
- "@instructure/shared-types": "10.10.1-snapshot-2",
40
- "@instructure/ui-a11y-content": "10.10.1-snapshot-2",
41
- "@instructure/ui-a11y-utils": "10.10.1-snapshot-2",
42
- "@instructure/ui-color-utils": "10.10.1-snapshot-2",
43
- "@instructure/ui-dom-utils": "10.10.1-snapshot-2",
44
- "@instructure/ui-icons": "10.10.1-snapshot-2",
45
- "@instructure/ui-position": "10.10.1-snapshot-2",
46
- "@instructure/ui-prop-types": "10.10.1-snapshot-2",
47
- "@instructure/ui-react-utils": "10.10.1-snapshot-2",
48
- "@instructure/ui-testable": "10.10.1-snapshot-2",
49
- "@instructure/ui-tooltip": "10.10.1-snapshot-2",
50
- "@instructure/ui-utils": "10.10.1-snapshot-2",
51
- "@instructure/ui-view": "10.10.1-snapshot-2",
37
+ "@instructure/console": "10.10.1-snapshot-3",
38
+ "@instructure/emotion": "10.10.1-snapshot-3",
39
+ "@instructure/shared-types": "10.10.1-snapshot-3",
40
+ "@instructure/ui-a11y-content": "10.10.1-snapshot-3",
41
+ "@instructure/ui-a11y-utils": "10.10.1-snapshot-3",
42
+ "@instructure/ui-color-utils": "10.10.1-snapshot-3",
43
+ "@instructure/ui-dom-utils": "10.10.1-snapshot-3",
44
+ "@instructure/ui-icons": "10.10.1-snapshot-3",
45
+ "@instructure/ui-position": "10.10.1-snapshot-3",
46
+ "@instructure/ui-prop-types": "10.10.1-snapshot-3",
47
+ "@instructure/ui-react-utils": "10.10.1-snapshot-3",
48
+ "@instructure/ui-testable": "10.10.1-snapshot-3",
49
+ "@instructure/ui-tooltip": "10.10.1-snapshot-3",
50
+ "@instructure/ui-utils": "10.10.1-snapshot-3",
51
+ "@instructure/ui-view": "10.10.1-snapshot-3",
52
52
  "keycode": "^2",
53
53
  "prop-types": "^15.8.1"
54
54
  },