@aws-amplify/ui-react-storage 2.1.3 → 2.1.4

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 (2) hide show
  1. package/dist/styles.css +1034 -48
  2. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -134,6 +134,71 @@
134
134
  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
135
135
  --amplify-components-button-disabled-background-color: transparent;
136
136
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
137
+ --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60);
138
+ --amplify-components-button-outlined-info-background-color: transparent;
139
+ --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100);
140
+ --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60);
141
+ --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10);
142
+ --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100);
143
+ --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
144
+ --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
145
+ --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
146
+ --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
147
+ --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
148
+ --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
149
+ --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
150
+ --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60);
151
+ --amplify-components-button-outlined-warning-background-color: transparent;
152
+ --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100);
153
+ --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60);
154
+ --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10);
155
+ --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100);
156
+ --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
157
+ --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
158
+ --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
159
+ --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
160
+ --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
161
+ --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
162
+ --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
163
+ --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60);
164
+ --amplify-components-button-outlined-success-background-color: transparent;
165
+ --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100);
166
+ --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60);
167
+ --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10);
168
+ --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100);
169
+ --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
170
+ --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
171
+ --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
172
+ --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
173
+ --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
174
+ --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
175
+ --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
176
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
177
+ --amplify-components-button-outlined-error-background-color: transparent;
178
+ --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
179
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
180
+ --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
181
+ --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
182
+ --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
183
+ --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
184
+ --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
185
+ --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
186
+ --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
187
+ --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
188
+ --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
189
+ --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60);
190
+ --amplify-components-button-outlined-overlay-background-color: transparent;
191
+ --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary);
192
+ --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60);
193
+ --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5);
194
+ --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90);
195
+ --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
196
+ --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
197
+ --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
198
+ --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
199
+ --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
200
+ --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
201
+ --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
137
202
  --amplify-components-button-primary-border-color: transparent;
138
203
  --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
139
204
  --amplify-components-button-primary-border-style: solid;
@@ -155,6 +220,71 @@
155
220
  --amplify-components-button-primary-active-border-color: transparent;
156
221
  --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
157
222
  --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
223
+ --amplify-components-button-primary-info-border-color: transparent;
224
+ --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80);
225
+ --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse);
226
+ --amplify-components-button-primary-info-hover-border-color: transparent;
227
+ --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90);
228
+ --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse);
229
+ --amplify-components-button-primary-info-focus-border-color: transparent;
230
+ --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
231
+ --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
232
+ --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
233
+ --amplify-components-button-primary-info-active-border-color: transparent;
234
+ --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
235
+ --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
236
+ --amplify-components-button-primary-warning-border-color: transparent;
237
+ --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80);
238
+ --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse);
239
+ --amplify-components-button-primary-warning-hover-border-color: transparent;
240
+ --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90);
241
+ --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse);
242
+ --amplify-components-button-primary-warning-focus-border-color: transparent;
243
+ --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
244
+ --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
245
+ --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
246
+ --amplify-components-button-primary-warning-active-border-color: transparent;
247
+ --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
248
+ --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
249
+ --amplify-components-button-primary-error-border-color: transparent;
250
+ --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80);
251
+ --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse);
252
+ --amplify-components-button-primary-error-hover-border-color: transparent;
253
+ --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90);
254
+ --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse);
255
+ --amplify-components-button-primary-error-focus-border-color: transparent;
256
+ --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
257
+ --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
258
+ --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
259
+ --amplify-components-button-primary-error-active-border-color: transparent;
260
+ --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
261
+ --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
262
+ --amplify-components-button-primary-success-border-color: transparent;
263
+ --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80);
264
+ --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse);
265
+ --amplify-components-button-primary-success-hover-border-color: transparent;
266
+ --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90);
267
+ --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse);
268
+ --amplify-components-button-primary-success-focus-border-color: transparent;
269
+ --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
270
+ --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
271
+ --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
272
+ --amplify-components-button-primary-success-active-border-color: transparent;
273
+ --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
274
+ --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
275
+ --amplify-components-button-primary-overlay-border-color: transparent;
276
+ --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70);
277
+ --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse);
278
+ --amplify-components-button-primary-overlay-hover-border-color: transparent;
279
+ --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90);
280
+ --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse);
281
+ --amplify-components-button-primary-overlay-focus-border-color: transparent;
282
+ --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
283
+ --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
284
+ --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
285
+ --amplify-components-button-primary-overlay-active-border-color: transparent;
286
+ --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
287
+ --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
158
288
  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
159
289
  --amplify-components-button-menu-background-color: transparent;
160
290
  --amplify-components-button-menu-justify-content: start;
@@ -167,7 +297,7 @@
167
297
  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
168
298
  --amplify-components-button-link-background-color: transparent;
169
299
  --amplify-components-button-link-border-color: transparent;
170
- --amplify-components-button-link-border-width: var(--amplify-space-zero);
300
+ --amplify-components-button-link-border-width: var(--amplify-border-widths-small);
171
301
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
172
302
  --amplify-components-button-link-hover-border-color: transparent;
173
303
  --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
@@ -185,6 +315,71 @@
185
315
  --amplify-components-button-link-loading-border-color: transparent;
186
316
  --amplify-components-button-link-loading-background-color: transparent;
187
317
  --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
318
+ --amplify-components-button-link-info-border-color: transparent;
319
+ --amplify-components-button-link-info-background-color: transparent;
320
+ --amplify-components-button-link-info-color: var(--amplify-colors-blue-100);
321
+ --amplify-components-button-link-info-hover-border-color: transparent;
322
+ --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10);
323
+ --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90);
324
+ --amplify-components-button-link-info-focus-border-color: transparent;
325
+ --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
326
+ --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
327
+ --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
328
+ --amplify-components-button-link-info-active-border-color: transparent;
329
+ --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
330
+ --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
331
+ --amplify-components-button-link-warning-border-color: transparent;
332
+ --amplify-components-button-link-warning-background-color: transparent;
333
+ --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100);
334
+ --amplify-components-button-link-warning-hover-border-color: transparent;
335
+ --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10);
336
+ --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90);
337
+ --amplify-components-button-link-warning-focus-border-color: transparent;
338
+ --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
339
+ --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
340
+ --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
341
+ --amplify-components-button-link-warning-active-border-color: transparent;
342
+ --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
343
+ --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
344
+ --amplify-components-button-link-success-border-color: transparent;
345
+ --amplify-components-button-link-success-background-color: transparent;
346
+ --amplify-components-button-link-success-color: var(--amplify-colors-green-100);
347
+ --amplify-components-button-link-success-hover-border-color: transparent;
348
+ --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10);
349
+ --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90);
350
+ --amplify-components-button-link-success-focus-border-color: transparent;
351
+ --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
352
+ --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
353
+ --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
354
+ --amplify-components-button-link-success-active-border-color: transparent;
355
+ --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
356
+ --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
357
+ --amplify-components-button-link-error-border-color: transparent;
358
+ --amplify-components-button-link-error-background-color: transparent;
359
+ --amplify-components-button-link-error-color: var(--amplify-colors-red-100);
360
+ --amplify-components-button-link-error-hover-border-color: transparent;
361
+ --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10);
362
+ --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90);
363
+ --amplify-components-button-link-error-focus-border-color: transparent;
364
+ --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
365
+ --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
366
+ --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
367
+ --amplify-components-button-link-error-active-border-color: transparent;
368
+ --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
369
+ --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
370
+ --amplify-components-button-link-overlay-border-color: transparent;
371
+ --amplify-components-button-link-overlay-background-color: transparent;
372
+ --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100);
373
+ --amplify-components-button-link-overlay-hover-border-color: transparent;
374
+ --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5);
375
+ --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80);
376
+ --amplify-components-button-link-overlay-focus-border-color: transparent;
377
+ --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
378
+ --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
379
+ --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
380
+ --amplify-components-button-link-overlay-active-border-color: transparent;
381
+ --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
382
+ --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
188
383
  --amplify-components-button-warning-background-color: transparent;
189
384
  --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
190
385
  --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
@@ -1097,6 +1292,7 @@
1097
1292
  --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
1098
1293
  --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
1099
1294
  --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
1295
+ --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05);
1100
1296
  --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
1101
1297
  --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
1102
1298
  --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);
@@ -1332,13 +1528,25 @@ strong.amplify-text {
1332
1528
  * Button base styles
1333
1529
  */
1334
1530
  .amplify-button {
1531
+ --amplify-internal-button-background-color: transparent;
1532
+ --amplify-internal-button-border-color: var(
1533
+ --amplify-components-button-border-color
1534
+ );
1535
+ --amplify-internal-button-color: var(--amplify-components-button-color);
1536
+ --amplify-internal-button-focus-box-shadow: var(
1537
+ --amplify-components-button-focus-box-shadow
1538
+ );
1539
+ --amplify-internal-button-border-width: var(
1540
+ --amplify-components-button-border-width
1541
+ );
1335
1542
  align-items: center;
1336
- border-color: var(--amplify-components-button-border-color);
1543
+ background-color: var(--amplify-internal-button-background-color);
1544
+ border-color: var(--amplify-internal-button-border-color);
1337
1545
  border-radius: var(--amplify-components-button-border-radius);
1338
1546
  border-style: var(--amplify-components-button-border-style);
1339
- border-width: var(--amplify-components-button-border-width);
1547
+ border-width: var(--amplify-internal-button-border-width);
1340
1548
  box-sizing: border-box;
1341
- color: var(--amplify-components-button-color);
1549
+ color: var(--amplify-internal-button-color);
1342
1550
  cursor: pointer;
1343
1551
  display: inline-flex;
1344
1552
  font-size: var(--amplify-components-button-font-size);
@@ -1379,24 +1587,277 @@ strong.amplify-text {
1379
1587
  --amplify-internal-button-loading-text-decoration: initial;
1380
1588
  }
1381
1589
  .amplify-button:hover {
1382
- background-color: var(--amplify-components-button-hover-background-color);
1383
- border-color: var(--amplify-components-button-hover-border-color);
1384
- color: var(--amplify-components-button-hover-color);
1590
+ --amplify-internal-button-background-color: var(
1591
+ --amplify-components-button-hover-background-color
1592
+ );
1593
+ --amplify-internal-button-border-color: var(
1594
+ --amplify-components-button-hover-border-color
1595
+ );
1596
+ --amplify-internal-button-color: var(
1597
+ --amplify-components-button-hover-color
1598
+ );
1385
1599
  }
1386
1600
  .amplify-button:focus {
1387
- background-color: var(--amplify-components-button-hover-background-color);
1388
- border-color: var(--amplify-components-button-focus-border-color);
1389
- color: var(--amplify-components-button-focus-color);
1390
- box-shadow: var(--amplify-components-button-focus-box-shadow);
1601
+ --amplify-internal-button-background-color: var(
1602
+ --amplify-components-button-hover-background-color
1603
+ );
1604
+ --amplify-internal-button-border-color: var(
1605
+ --amplify-components-button-focus-border-color
1606
+ );
1607
+ --amplify-internal-button-color: var(
1608
+ --amplify-components-button-focus-color
1609
+ );
1610
+ box-shadow: var(--amplify-internal-button-focus-box-shadow);
1391
1611
  }
1392
1612
  .amplify-button:active {
1393
- background-color: var(--amplify-components-button-active-background-color);
1394
- border-color: var(--amplify-components-button-active-border-color);
1395
- color: var(--amplify-components-button-active-color);
1613
+ --amplify-internal-button-background-color: var(
1614
+ --amplify-components-button-active-background-color
1615
+ );
1616
+ --amplify-internal-button-border-color: var(
1617
+ --amplify-components-button-active-border-color
1618
+ );
1619
+ --amplify-internal-button-color: var(
1620
+ --amplify-components-button-active-color
1621
+ );
1396
1622
  }
1397
1623
  .amplify-button--fullwidth {
1398
1624
  width: 100%;
1399
1625
  }
1626
+ .amplify-button--outlined--info {
1627
+ --amplify-internal-button-background-color: var(
1628
+ --amplify-components-button-outlined-info-background-color
1629
+ );
1630
+ --amplify-internal-button-border-color: var(
1631
+ --amplify-components-button-outlined-info-border-color
1632
+ );
1633
+ --amplify-internal-button-color: var(
1634
+ --amplify-components-button-outlined-info-color
1635
+ );
1636
+ }
1637
+ .amplify-button--outlined--info:hover {
1638
+ --amplify-internal-button-background-color: var(
1639
+ --amplify-components-button-outlined-info-hover-background-color
1640
+ );
1641
+ --amplify-internal-button-border-color: var(
1642
+ --amplify-components-button-outlined-info-hover-border-color
1643
+ );
1644
+ --amplify-internal-button-color: var(
1645
+ --amplify-components-button-outlined-info-hover-color
1646
+ );
1647
+ }
1648
+ .amplify-button--outlined--info:focus {
1649
+ --amplify-internal-button-background-color: var(
1650
+ --amplify-components-button-outlined-info-focus-background-color
1651
+ );
1652
+ --amplify-internal-button-border-color: var(
1653
+ --amplify-components-button-outlined-info-focus-border-color
1654
+ );
1655
+ --amplify-internal-button-color: var(
1656
+ --amplify-components-button-outlined-info-focus-color
1657
+ );
1658
+ --amplify-internal-button-focus-box-shadow: var(
1659
+ --amplify-components-button-outlined-info-focus-box-shadow
1660
+ );
1661
+ }
1662
+ .amplify-button--outlined--info:active {
1663
+ --amplify-internal-button-background-color: var(
1664
+ --amplify-components-button-outlined-info-active-background-color
1665
+ );
1666
+ --amplify-internal-button-border-color: var(
1667
+ --amplify-components-button-outlined-info-active-border-color
1668
+ );
1669
+ --amplify-internal-button-color: var(
1670
+ --amplify-components-button-outlined-info-active-color
1671
+ );
1672
+ }
1673
+ .amplify-button--outlined--warning {
1674
+ --amplify-internal-button-background-color: var(
1675
+ --amplify-components-button-outlined-warning-background-color
1676
+ );
1677
+ --amplify-internal-button-border-color: var(
1678
+ --amplify-components-button-outlined-warning-border-color
1679
+ );
1680
+ --amplify-internal-button-color: var(
1681
+ --amplify-components-button-outlined-warning-color
1682
+ );
1683
+ }
1684
+ .amplify-button--outlined--warning:hover {
1685
+ --amplify-internal-button-background-color: var(
1686
+ --amplify-components-button-outlined-warning-hover-background-color
1687
+ );
1688
+ --amplify-internal-button-border-color: var(
1689
+ --amplify-components-button-outlined-warning-hover-border-color
1690
+ );
1691
+ --amplify-internal-button-color: var(
1692
+ --amplify-components-button-outlined-warning-hover-color
1693
+ );
1694
+ }
1695
+ .amplify-button--outlined--warning:focus {
1696
+ --amplify-internal-button-background-color: var(
1697
+ --amplify-components-button-outlined-warning-focus-background-color
1698
+ );
1699
+ --amplify-internal-button-border-color: var(
1700
+ --amplify-components-button-outlined-warning-focus-border-color
1701
+ );
1702
+ --amplify-internal-button-color: var(
1703
+ --amplify-components-button-outlined-warning-focus-color
1704
+ );
1705
+ --amplify-internal-button-focus-box-shadow: var(
1706
+ --amplify-components-button-outlined-warning-focus-box-shadow
1707
+ );
1708
+ }
1709
+ .amplify-button--outlined--warning:active {
1710
+ --amplify-internal-button-background-color: var(
1711
+ --amplify-components-button-outlined-warning-active-background-color
1712
+ );
1713
+ --amplify-internal-button-border-color: var(
1714
+ --amplify-components-button-outlined-warning-active-border-color
1715
+ );
1716
+ --amplify-internal-button-color: var(
1717
+ --amplify-components-button-outlined-warning-active-color
1718
+ );
1719
+ }
1720
+ .amplify-button--outlined--error {
1721
+ --amplify-internal-button-background-color: var(
1722
+ --amplify-components-button-outlined-error-background-color
1723
+ );
1724
+ --amplify-internal-button-border-color: var(
1725
+ --amplify-components-button-outlined-error-border-color
1726
+ );
1727
+ --amplify-internal-button-color: var(
1728
+ --amplify-components-button-outlined-error-color
1729
+ );
1730
+ }
1731
+ .amplify-button--outlined--error:hover {
1732
+ --amplify-internal-button-background-color: var(
1733
+ --amplify-components-button-outlined-error-hover-background-color
1734
+ );
1735
+ --amplify-internal-button-border-color: var(
1736
+ --amplify-components-button-outlined-error-hover-border-color
1737
+ );
1738
+ --amplify-internal-button-color: var(
1739
+ --amplify-components-button-outlined-error-hover-color
1740
+ );
1741
+ }
1742
+ .amplify-button--outlined--error:focus {
1743
+ --amplify-internal-button-background-color: var(
1744
+ --amplify-components-button-outlined-error-focus-background-color
1745
+ );
1746
+ --amplify-internal-button-border-color: var(
1747
+ --amplify-components-button-outlined-error-focus-border-color
1748
+ );
1749
+ --amplify-internal-button-color: var(
1750
+ --amplify-components-button-outlined-error-focus-color
1751
+ );
1752
+ --amplify-internal-button-focus-box-shadow: var(
1753
+ --amplify-components-button-outlined-error-focus-box-shadow
1754
+ );
1755
+ }
1756
+ .amplify-button--outlined--error:active {
1757
+ --amplify-internal-button-background-color: var(
1758
+ --amplify-components-button-outlined-error-active-background-color
1759
+ );
1760
+ --amplify-internal-button-border-color: var(
1761
+ --amplify-components-button-outlined-error-active-border-color
1762
+ );
1763
+ --amplify-internal-button-color: var(
1764
+ --amplify-components-button-outlined-error-active-color
1765
+ );
1766
+ }
1767
+ .amplify-button--outlined--success {
1768
+ --amplify-internal-button-background-color: var(
1769
+ --amplify-components-button-outlined-success-background-color
1770
+ );
1771
+ --amplify-internal-button-border-color: var(
1772
+ --amplify-components-button-outlined-success-border-color
1773
+ );
1774
+ --amplify-internal-button-color: var(
1775
+ --amplify-components-button-outlined-success-color
1776
+ );
1777
+ }
1778
+ .amplify-button--outlined--success:hover {
1779
+ --amplify-internal-button-background-color: var(
1780
+ --amplify-components-button-outlined-success-hover-background-color
1781
+ );
1782
+ --amplify-internal-button-border-color: var(
1783
+ --amplify-components-button-outlined-success-hover-border-color
1784
+ );
1785
+ --amplify-internal-button-color: var(
1786
+ --amplify-components-button-outlined-success-hover-color
1787
+ );
1788
+ }
1789
+ .amplify-button--outlined--success:focus {
1790
+ --amplify-internal-button-background-color: var(
1791
+ --amplify-components-button-outlined-success-focus-background-color
1792
+ );
1793
+ --amplify-internal-button-border-color: var(
1794
+ --amplify-components-button-outlined-success-focus-border-color
1795
+ );
1796
+ --amplify-internal-button-color: var(
1797
+ --amplify-components-button-outlined-success-focus-color
1798
+ );
1799
+ --amplify-internal-button-focus-box-shadow: var(
1800
+ --amplify-components-button-outlined-success-focus-box-shadow
1801
+ );
1802
+ }
1803
+ .amplify-button--outlined--success:active {
1804
+ --amplify-internal-button-background-color: var(
1805
+ --amplify-components-button-outlined-success-active-background-color
1806
+ );
1807
+ --amplify-internal-button-border-color: var(
1808
+ --amplify-components-button-outlined-success-active-border-color
1809
+ );
1810
+ --amplify-internal-button-color: var(
1811
+ --amplify-components-button-outlined-success-active-color
1812
+ );
1813
+ }
1814
+ .amplify-button--outlined--overlay {
1815
+ --amplify-internal-button-background-color: var(
1816
+ --amplify-components-button-outlined-overlay-background-color
1817
+ );
1818
+ --amplify-internal-button-border-color: var(
1819
+ --amplify-components-button-outlined-overlay-border-color
1820
+ );
1821
+ --amplify-internal-button-color: var(
1822
+ --amplify-components-button-outlined-overlay-color
1823
+ );
1824
+ }
1825
+ .amplify-button--outlined--overlay:hover {
1826
+ --amplify-internal-button-background-color: var(
1827
+ --amplify-components-button-outlined-overlay-hover-background-color
1828
+ );
1829
+ --amplify-internal-button-border-color: var(
1830
+ --amplify-components-button-outlined-overlay-hover-border-color
1831
+ );
1832
+ --amplify-internal-button-color: var(
1833
+ --amplify-components-button-outlined-overlay-hover-color
1834
+ );
1835
+ }
1836
+ .amplify-button--outlined--overlay:focus {
1837
+ --amplify-internal-button-background-color: var(
1838
+ --amplify-components-button-outlined-overlay-focus-background-color
1839
+ );
1840
+ --amplify-internal-button-border-color: var(
1841
+ --amplify-components-button-outlined-overlay-focus-border-color
1842
+ );
1843
+ --amplify-internal-button-color: var(
1844
+ --amplify-components-button-outlined-overlay-focus-color
1845
+ );
1846
+ --amplify-internal-button-focus-box-shadow: var(
1847
+ --amplify-components-button-outlined-overlay-focus-box-shadow
1848
+ );
1849
+ }
1850
+ .amplify-button--outlined--overlay:active {
1851
+ --amplify-internal-button-background-color: var(
1852
+ --amplify-components-button-outlined-overlay-active-background-color
1853
+ );
1854
+ --amplify-internal-button-border-color: var(
1855
+ --amplify-components-button-outlined-overlay-active-border-color
1856
+ );
1857
+ --amplify-internal-button-color: var(
1858
+ --amplify-components-button-outlined-overlay-active-color
1859
+ );
1860
+ }
1400
1861
  .amplify-button--menu {
1401
1862
  border-width: var(--amplify-components-button-menu-border-width);
1402
1863
  background-color: var(--amplify-components-button-menu-background-color);
@@ -1419,10 +1880,18 @@ strong.amplify-text {
1419
1880
  background-color: var(--amplify-components-button-menu-active-background-color);
1420
1881
  }
1421
1882
  .amplify-button--primary {
1422
- border-width: var(--amplify-components-button-primary-border-width);
1423
- background-color: var(--amplify-components-button-primary-background-color);
1424
- border-color: var(--amplify-components-button-primary-border-color);
1425
- color: var(--amplify-components-button-primary-color);
1883
+ --amplify-internal-button-border-width: var(
1884
+ --amplify-components-button-primary-border-width
1885
+ );
1886
+ --amplify-internal-button-background-color: var(
1887
+ --amplify-components-button-primary-background-color
1888
+ );
1889
+ --amplify-internal-button-border-color: var(
1890
+ --amplify-components-button-primary-border-color
1891
+ );
1892
+ --amplify-internal-button-color: var(
1893
+ --amplify-components-button-primary-color
1894
+ );
1426
1895
  --amplify-internal-button-disabled-border-color: var(
1427
1896
  --amplify-components-button-primary-disabled-border-color
1428
1897
  );
@@ -1443,26 +1912,289 @@ strong.amplify-text {
1443
1912
  );
1444
1913
  }
1445
1914
  .amplify-button--primary:hover {
1446
- background-color: var(--amplify-components-button-primary-hover-background-color);
1447
- border-color: var(--amplify-components-button-primary-hover-border-color);
1448
- color: var(--amplify-components-button-primary-hover-color);
1915
+ --amplify-internal-button-background-color: var(
1916
+ --amplify-components-button-primary-hover-background-color
1917
+ );
1918
+ --amplify-internal-button-border-color: var(
1919
+ --amplify-components-button-primary-hover-border-color
1920
+ );
1921
+ --amplify-internal-button-color: var(
1922
+ --amplify-components-button-primary-hover-color
1923
+ );
1449
1924
  }
1450
1925
  .amplify-button--primary:focus {
1451
- background-color: var(--amplify-components-button-primary-focus-background-color);
1452
- border-color: var(--amplify-components-button-primary-focus-border-color);
1453
- color: var(--amplify-components-button-primary-focus-color);
1454
- box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
1926
+ --amplify-internal-button-background-color: var(
1927
+ --amplify-components-button-primary-focus-background-color
1928
+ );
1929
+ --amplify-internal-button-border-color: var(
1930
+ --amplify-components-button-primary-focus-border-color
1931
+ );
1932
+ --amplify-internal-button-color: var(
1933
+ --amplify-components-button-primary-focus-color
1934
+ );
1935
+ --amplify-internal-button-focus-box-shadow: var(
1936
+ --amplify-components-button-primary-focus-box-shadow
1937
+ );
1455
1938
  }
1456
1939
  .amplify-button--primary:active {
1457
- background-color: var(--amplify-components-button-primary-active-background-color);
1458
- border-color: var(--amplify-components-button-primary-active-border-color);
1459
- color: var(--amplify-components-button-primary-active-color);
1940
+ --amplify-internal-button-background-color: var(
1941
+ --amplify-components-button-primary-active-background-color
1942
+ );
1943
+ --amplify-internal-button-border-color: var(
1944
+ --amplify-components-button-primary-active-border-color
1945
+ );
1946
+ --amplify-internal-button-color: var(
1947
+ --amplify-components-button-primary-active-color
1948
+ );
1949
+ }
1950
+ .amplify-button--primary--info {
1951
+ --amplify-internal-button-background-color: var(
1952
+ --amplify-components-button-primary-info-background-color
1953
+ );
1954
+ --amplify-internal-button-border-color: var(
1955
+ --amplify-components-button-primary-info-border-color
1956
+ );
1957
+ --amplify-internal-button-color: var(
1958
+ --amplify-components-button-primary-info-color
1959
+ );
1960
+ }
1961
+ .amplify-button--primary--info:hover {
1962
+ --amplify-internal-button-background-color: var(
1963
+ --amplify-components-button-primary-info-hover-background-color
1964
+ );
1965
+ --amplify-internal-button-border-color: var(
1966
+ --amplify-components-button-primary-info-hover-border-color
1967
+ );
1968
+ --amplify-internal-button-color: var(
1969
+ --amplify-components-button-primary-info-hover-color
1970
+ );
1971
+ }
1972
+ .amplify-button--primary--info:focus {
1973
+ --amplify-internal-button-background-color: var(
1974
+ --amplify-components-button-primary-info-focus-background-color
1975
+ );
1976
+ --amplify-internal-button-border-color: var(
1977
+ --amplify-components-button-primary-info-focus-border-color
1978
+ );
1979
+ --amplify-internal-button-color: var(
1980
+ --amplify-components-button-primary-info-focus-color
1981
+ );
1982
+ --amplify-internal-button-focus-box-shadow: var(
1983
+ --amplify-components-button-primary-info-focus-box-shadow
1984
+ );
1985
+ }
1986
+ .amplify-button--primary--info:active {
1987
+ --amplify-internal-button-background-color: var(
1988
+ --amplify-components-button-primary-info-active-background-color
1989
+ );
1990
+ --amplify-internal-button-border-color: var(
1991
+ --amplify-components-button-primary-info-active-border-color
1992
+ );
1993
+ --amplify-internal-button-color: var(
1994
+ --amplify-components-button-primary-info-active-color
1995
+ );
1996
+ }
1997
+ .amplify-button--primary--warning {
1998
+ --amplify-internal-button-background-color: var(
1999
+ --amplify-components-button-primary-warning-background-color
2000
+ );
2001
+ --amplify-internal-button-border-color: var(
2002
+ --amplify-components-button-primary-warning-border-color
2003
+ );
2004
+ --amplify-internal-button-color: var(
2005
+ --amplify-components-button-primary-warning-color
2006
+ );
2007
+ }
2008
+ .amplify-button--primary--warning:hover {
2009
+ --amplify-internal-button-background-color: var(
2010
+ --amplify-components-button-primary-warning-hover-background-color
2011
+ );
2012
+ --amplify-internal-button-border-color: var(
2013
+ --amplify-components-button-primary-warning-hover-border-color
2014
+ );
2015
+ --amplify-internal-button-color: var(
2016
+ --amplify-components-button-primary-warning-hover-color
2017
+ );
2018
+ }
2019
+ .amplify-button--primary--warning:focus {
2020
+ --amplify-internal-button-background-color: var(
2021
+ --amplify-components-button-primary-warning-focus-background-color
2022
+ );
2023
+ --amplify-internal-button-border-color: var(
2024
+ --amplify-components-button-primary-warning-focus-border-color
2025
+ );
2026
+ --amplify-internal-button-color: var(
2027
+ --amplify-components-button-primary-warning-focus-color
2028
+ );
2029
+ --amplify-internal-button-focus-box-shadow: var(
2030
+ --amplify-components-button-primary-warning-focus-box-shadow
2031
+ );
2032
+ }
2033
+ .amplify-button--primary--warning:active {
2034
+ --amplify-internal-button-background-color: var(
2035
+ --amplify-components-button-primary-warning-active-background-color
2036
+ );
2037
+ --amplify-internal-button-border-color: var(
2038
+ --amplify-components-button-primary-warning-active-border-color
2039
+ );
2040
+ --amplify-internal-button-color: var(
2041
+ --amplify-components-button-primary-warning-active-color
2042
+ );
2043
+ }
2044
+ .amplify-button--primary--error {
2045
+ --amplify-internal-button-background-color: var(
2046
+ --amplify-components-button-primary-error-background-color
2047
+ );
2048
+ --amplify-internal-button-border-color: var(
2049
+ --amplify-components-button-primary-error-border-color
2050
+ );
2051
+ --amplify-internal-button-color: var(
2052
+ --amplify-components-button-primary-error-color
2053
+ );
2054
+ }
2055
+ .amplify-button--primary--error:hover {
2056
+ --amplify-internal-button-background-color: var(
2057
+ --amplify-components-button-primary-error-hover-background-color
2058
+ );
2059
+ --amplify-internal-button-border-color: var(
2060
+ --amplify-components-button-primary-error-hover-border-color
2061
+ );
2062
+ --amplify-internal-button-color: var(
2063
+ --amplify-components-button-primary-error-hover-color
2064
+ );
2065
+ }
2066
+ .amplify-button--primary--error:focus {
2067
+ --amplify-internal-button-background-color: var(
2068
+ --amplify-components-button-primary-error-focus-background-color
2069
+ );
2070
+ --amplify-internal-button-border-color: var(
2071
+ --amplify-components-button-primary-error-focus-border-color
2072
+ );
2073
+ --amplify-internal-button-color: var(
2074
+ --amplify-components-button-primary-error-focus-color
2075
+ );
2076
+ --amplify-internal-button-focus-box-shadow: var(
2077
+ --amplify-components-button-primary-error-focus-box-shadow
2078
+ );
2079
+ }
2080
+ .amplify-button--primary--error:active {
2081
+ --amplify-internal-button-background-color: var(
2082
+ --amplify-components-button-primary-error-active-background-color
2083
+ );
2084
+ --amplify-internal-button-border-color: var(
2085
+ --amplify-components-button-primary-error-active-border-color
2086
+ );
2087
+ --amplify-internal-button-color: var(
2088
+ --amplify-components-button-primary-error-active-color
2089
+ );
2090
+ }
2091
+ .amplify-button--primary--success {
2092
+ --amplify-internal-button-background-color: var(
2093
+ --amplify-components-button-primary-success-background-color
2094
+ );
2095
+ --amplify-internal-button-border-color: var(
2096
+ --amplify-components-button-primary-success-border-color
2097
+ );
2098
+ --amplify-internal-button-color: var(
2099
+ --amplify-components-button-primary-success-color
2100
+ );
2101
+ }
2102
+ .amplify-button--primary--success:hover {
2103
+ --amplify-internal-button-background-color: var(
2104
+ --amplify-components-button-primary-success-hover-background-color
2105
+ );
2106
+ --amplify-internal-button-border-color: var(
2107
+ --amplify-components-button-primary-success-hover-border-color
2108
+ );
2109
+ --amplify-internal-button-color: var(
2110
+ --amplify-components-button-primary-success-hover-color
2111
+ );
2112
+ }
2113
+ .amplify-button--primary--success:focus {
2114
+ --amplify-internal-button-background-color: var(
2115
+ --amplify-components-button-primary-success-focus-background-color
2116
+ );
2117
+ --amplify-internal-button-border-color: var(
2118
+ --amplify-components-button-primary-success-focus-border-color
2119
+ );
2120
+ --amplify-internal-button-color: var(
2121
+ --amplify-components-button-primary-success-focus-color
2122
+ );
2123
+ --amplify-internal-button-focus-box-shadow: var(
2124
+ --amplify-components-button-primary-success-focus-box-shadow
2125
+ );
2126
+ }
2127
+ .amplify-button--primary--success:active {
2128
+ --amplify-internal-button-background-color: var(
2129
+ --amplify-components-button-primary-success-active-background-color
2130
+ );
2131
+ --amplify-internal-button-border-color: var(
2132
+ --amplify-components-button-primary-success-active-border-color
2133
+ );
2134
+ --amplify-internal-button-color: var(
2135
+ --amplify-components-button-primary-success-active-color
2136
+ );
2137
+ }
2138
+ .amplify-button--primary--overlay {
2139
+ --amplify-internal-button-background-color: var(
2140
+ --amplify-components-button-primary-overlay-background-color
2141
+ );
2142
+ --amplify-internal-button-border-color: var(
2143
+ --amplify-components-button-primary-overlay-border-color
2144
+ );
2145
+ --amplify-internal-button-color: var(
2146
+ --amplify-components-button-primary-overlay-color
2147
+ );
2148
+ }
2149
+ .amplify-button--primary--overlay:hover {
2150
+ --amplify-internal-button-background-color: var(
2151
+ --amplify-components-button-primary-overlay-hover-background-color
2152
+ );
2153
+ --amplify-internal-button-border-color: var(
2154
+ --amplify-components-button-primary-overlay-hover-border-color
2155
+ );
2156
+ --amplify-internal-button-color: var(
2157
+ --amplify-components-button-primary-overlay-hover-color
2158
+ );
2159
+ }
2160
+ .amplify-button--primary--overlay:focus {
2161
+ --amplify-internal-button-background-color: var(
2162
+ --amplify-components-button-primary-overlay-focus-background-color
2163
+ );
2164
+ --amplify-internal-button-border-color: var(
2165
+ --amplify-components-button-primary-overlay-focus-border-color
2166
+ );
2167
+ --amplify-internal-button-color: var(
2168
+ --amplify-components-button-primary-overlay-focus-color
2169
+ );
2170
+ --amplify-internal-button-focus-box-shadow: var(
2171
+ --amplify-components-button-primary-overlay-focus-box-shadow
2172
+ );
2173
+ }
2174
+ .amplify-button--primary--overlay:active {
2175
+ --amplify-internal-button-background-color: var(
2176
+ --amplify-components-button-primary-overlay-active-background-color
2177
+ );
2178
+ --amplify-internal-button-border-color: var(
2179
+ --amplify-components-button-primary-overlay-active-border-color
2180
+ );
2181
+ --amplify-internal-button-color: var(
2182
+ --amplify-components-button-primary-overlay-active-color
2183
+ );
1460
2184
  }
1461
2185
  .amplify-button--link {
1462
- border-width: var(--amplify-components-button-link-border-width);
1463
- background-color: var(--amplify-components-button-link-background-color);
1464
- color: var(--amplify-components-button-link-color);
1465
- --amplify-internal-button-disabled-text-decoration: none;
2186
+ --amplify-internal-button-border-width: var(
2187
+ --amplify-components-button-link-border-width
2188
+ );
2189
+ --amplify-internal-button-background-color: var(
2190
+ --amplify-components-button-link-background-color
2191
+ );
2192
+ --amplify-internal-button-border-color: var(
2193
+ --amplify-components-button-link-border-color
2194
+ );
2195
+ --amplify-internal-button-color: var(
2196
+ --amplify-components-button-link-color
2197
+ );
1466
2198
  --amplify-internal-button-disabled-border-color: var(
1467
2199
  --amplify-components-button-link-disabled-border-color
1468
2200
  );
@@ -1481,23 +2213,277 @@ strong.amplify-text {
1481
2213
  --amplify-internal-button-loading-color: var(
1482
2214
  --amplify-components-button-link-loading-color
1483
2215
  );
1484
- --amplify-internal-button-loading-text-decoration: none;
1485
2216
  }
1486
2217
  .amplify-button--link:hover {
1487
- background-color: var(--amplify-components-button-link-hover-background-color);
1488
- border-color: var(--amplify-components-button-link-hover-border-color);
1489
- color: var(--amplify-components-button-link-hover-color);
2218
+ --amplify-internal-button-background-color: var(
2219
+ --amplify-components-button-link-hover-background-color
2220
+ );
2221
+ --amplify-internal-button-border-color: var(
2222
+ --amplify-components-button-link-hover-border-color
2223
+ );
2224
+ --amplify-internal-button-color: var(
2225
+ --amplify-components-button-link-hover-color
2226
+ );
1490
2227
  }
1491
2228
  .amplify-button--link:focus {
1492
- background-color: var(--amplify-components-button-link-focus-background-color);
1493
- border-color: var(--amplify-components-button-link-focus-border-color);
1494
- color: var(--amplify-components-button-link-focus-color);
1495
- box-shadow: var(--amplify-components-button-link-focus-box-shadow);
2229
+ --amplify-internal-button-background-color: var(
2230
+ --amplify-components-button-link-focus-background-color
2231
+ );
2232
+ --amplify-internal-button-border-color: var(
2233
+ --amplify-components-button-link-focus-border-color
2234
+ );
2235
+ --amplify-internal-button-color: var(
2236
+ --amplify-components-button-link-focus-color
2237
+ );
2238
+ --amplify-internal-button-focus-box-shadow: var(
2239
+ --amplify-components-button-link-focus-box-shadow
2240
+ );
1496
2241
  }
1497
2242
  .amplify-button--link:active {
1498
- background-color: var(--amplify-components-button-link-active-background-color);
1499
- border-color: var(--amplify-components-button-link-active-border-color);
1500
- color: var(--amplify-components-button-link-active-color);
2243
+ --amplify-internal-button-background-color: var(
2244
+ --amplify-components-button-link-active-background-color
2245
+ );
2246
+ --amplify-internal-button-border-color: var(
2247
+ --amplify-components-button-link-active-border-color
2248
+ );
2249
+ --amplify-internal-button-color: var(
2250
+ --amplify-components-button-link-active-color
2251
+ );
2252
+ }
2253
+ .amplify-button--link--info {
2254
+ --amplify-internal-button-background-color: var(
2255
+ --amplify-components-button-link-info-background-color
2256
+ );
2257
+ --amplify-internal-button-border-color: var(
2258
+ --amplify-components-button-link-info-border-color
2259
+ );
2260
+ --amplify-internal-button-color: var(
2261
+ --amplify-components-button-link-info-color
2262
+ );
2263
+ }
2264
+ .amplify-button--link--info:hover {
2265
+ --amplify-internal-button-background-color: var(
2266
+ --amplify-components-button-link-info-hover-background-color
2267
+ );
2268
+ --amplify-internal-button-border-color: var(
2269
+ --amplify-components-button-link-info-hover-border-color
2270
+ );
2271
+ --amplify-internal-button-color: var(
2272
+ --amplify-components-button-link-info-hover-color
2273
+ );
2274
+ }
2275
+ .amplify-button--link--info:focus {
2276
+ --amplify-internal-button-background-color: var(
2277
+ --amplify-components-button-link-info-focus-background-color
2278
+ );
2279
+ --amplify-internal-button-border-color: var(
2280
+ --amplify-components-button-link-info-focus-border-color
2281
+ );
2282
+ --amplify-internal-button-color: var(
2283
+ --amplify-components-button-link-info-focus-color
2284
+ );
2285
+ --amplify-internal-button-focus-box-shadow: var(
2286
+ --amplify-components-button-link-info-focus-box-shadow
2287
+ );
2288
+ }
2289
+ .amplify-button--link--info:active {
2290
+ --amplify-internal-button-background-color: var(
2291
+ --amplify-components-button-link-info-active-background-color
2292
+ );
2293
+ --amplify-internal-button-border-color: var(
2294
+ --amplify-components-button-link-info-active-border-color
2295
+ );
2296
+ --amplify-internal-button-color: var(
2297
+ --amplify-components-button-link-info-active-color
2298
+ );
2299
+ }
2300
+ .amplify-button--link--warning {
2301
+ --amplify-internal-button-background-color: var(
2302
+ --amplify-components-button-link-warning-background-color
2303
+ );
2304
+ --amplify-internal-button-border-color: var(
2305
+ --amplify-components-button-link-warning-border-color
2306
+ );
2307
+ --amplify-internal-button-color: var(
2308
+ --amplify-components-button-link-warning-color
2309
+ );
2310
+ }
2311
+ .amplify-button--link--warning:hover {
2312
+ --amplify-internal-button-background-color: var(
2313
+ --amplify-components-button-link-warning-hover-background-color
2314
+ );
2315
+ --amplify-internal-button-border-color: var(
2316
+ --amplify-components-button-link-warning-hover-border-color
2317
+ );
2318
+ --amplify-internal-button-color: var(
2319
+ --amplify-components-button-link-warning-hover-color
2320
+ );
2321
+ }
2322
+ .amplify-button--link--warning:focus {
2323
+ --amplify-internal-button-background-color: var(
2324
+ --amplify-components-button-link-warning-focus-background-color
2325
+ );
2326
+ --amplify-internal-button-border-color: var(
2327
+ --amplify-components-button-link-warning-focus-border-color
2328
+ );
2329
+ --amplify-internal-button-color: var(
2330
+ --amplify-components-button-link-warning-focus-color
2331
+ );
2332
+ --amplify-internal-button-focus-box-shadow: var(
2333
+ --amplify-components-button-link-warning-focus-box-shadow
2334
+ );
2335
+ }
2336
+ .amplify-button--link--warning:active {
2337
+ --amplify-internal-button-background-color: var(
2338
+ --amplify-components-button-link-warning-active-background-color
2339
+ );
2340
+ --amplify-internal-button-border-color: var(
2341
+ --amplify-components-button-link-warning-active-border-color
2342
+ );
2343
+ --amplify-internal-button-color: var(
2344
+ --amplify-components-button-link-warning-active-color
2345
+ );
2346
+ }
2347
+ .amplify-button--link--error {
2348
+ --amplify-internal-button-background-color: var(
2349
+ --amplify-components-button-link-error-background-color
2350
+ );
2351
+ --amplify-internal-button-border-color: var(
2352
+ --amplify-components-button-link-error-border-color
2353
+ );
2354
+ --amplify-internal-button-color: var(
2355
+ --amplify-components-button-link-error-color
2356
+ );
2357
+ }
2358
+ .amplify-button--link--error:hover {
2359
+ --amplify-internal-button-background-color: var(
2360
+ --amplify-components-button-link-error-hover-background-color
2361
+ );
2362
+ --amplify-internal-button-border-color: var(
2363
+ --amplify-components-button-link-error-hover-border-color
2364
+ );
2365
+ --amplify-internal-button-color: var(
2366
+ --amplify-components-button-link-error-hover-color
2367
+ );
2368
+ }
2369
+ .amplify-button--link--error:focus {
2370
+ --amplify-internal-button-background-color: var(
2371
+ --amplify-components-button-link-error-focus-background-color
2372
+ );
2373
+ --amplify-internal-button-border-color: var(
2374
+ --amplify-components-button-link-error-focus-border-color
2375
+ );
2376
+ --amplify-internal-button-color: var(
2377
+ --amplify-components-button-link-error-focus-color
2378
+ );
2379
+ --amplify-internal-button-focus-box-shadow: var(
2380
+ --amplify-components-button-link-error-focus-box-shadow
2381
+ );
2382
+ }
2383
+ .amplify-button--link--error:active {
2384
+ --amplify-internal-button-background-color: var(
2385
+ --amplify-components-button-link-error-active-background-color
2386
+ );
2387
+ --amplify-internal-button-border-color: var(
2388
+ --amplify-components-button-link-error-active-border-color
2389
+ );
2390
+ --amplify-internal-button-color: var(
2391
+ --amplify-components-button-link-error-active-color
2392
+ );
2393
+ }
2394
+ .amplify-button--link--success {
2395
+ --amplify-internal-button-background-color: var(
2396
+ --amplify-components-button-link-success-background-color
2397
+ );
2398
+ --amplify-internal-button-border-color: var(
2399
+ --amplify-components-button-link-success-border-color
2400
+ );
2401
+ --amplify-internal-button-color: var(
2402
+ --amplify-components-button-link-success-color
2403
+ );
2404
+ }
2405
+ .amplify-button--link--success:hover {
2406
+ --amplify-internal-button-background-color: var(
2407
+ --amplify-components-button-link-success-hover-background-color
2408
+ );
2409
+ --amplify-internal-button-border-color: var(
2410
+ --amplify-components-button-link-success-hover-border-color
2411
+ );
2412
+ --amplify-internal-button-color: var(
2413
+ --amplify-components-button-link-success-hover-color
2414
+ );
2415
+ }
2416
+ .amplify-button--link--success:focus {
2417
+ --amplify-internal-button-background-color: var(
2418
+ --amplify-components-button-link-success-focus-background-color
2419
+ );
2420
+ --amplify-internal-button-border-color: var(
2421
+ --amplify-components-button-link-success-focus-border-color
2422
+ );
2423
+ --amplify-internal-button-color: var(
2424
+ --amplify-components-button-link-success-focus-color
2425
+ );
2426
+ --amplify-internal-button-focus-box-shadow: var(
2427
+ --amplify-components-button-link-success-focus-box-shadow
2428
+ );
2429
+ }
2430
+ .amplify-button--link--success:active {
2431
+ --amplify-internal-button-background-color: var(
2432
+ --amplify-components-button-link-success-active-background-color
2433
+ );
2434
+ --amplify-internal-button-border-color: var(
2435
+ --amplify-components-button-link-success-active-border-color
2436
+ );
2437
+ --amplify-internal-button-color: var(
2438
+ --amplify-components-button-link-success-active-color
2439
+ );
2440
+ }
2441
+ .amplify-button--link--overlay {
2442
+ --amplify-internal-button-background-color: var(
2443
+ --amplify-components-button-link-overlay-background-color
2444
+ );
2445
+ --amplify-internal-button-border-color: var(
2446
+ --amplify-components-button-link-overlay-border-color
2447
+ );
2448
+ --amplify-internal-button-color: var(
2449
+ --amplify-components-button-link-overlay-color
2450
+ );
2451
+ }
2452
+ .amplify-button--link--overlay:hover {
2453
+ --amplify-internal-button-background-color: var(
2454
+ --amplify-components-button-link-overlay-hover-background-color
2455
+ );
2456
+ --amplify-internal-button-border-color: var(
2457
+ --amplify-components-button-link-overlay-hover-border-color
2458
+ );
2459
+ --amplify-internal-button-color: var(
2460
+ --amplify-components-button-link-overlay-hover-color
2461
+ );
2462
+ }
2463
+ .amplify-button--link--overlay:focus {
2464
+ --amplify-internal-button-background-color: var(
2465
+ --amplify-components-button-link-overlay-focus-background-color
2466
+ );
2467
+ --amplify-internal-button-border-color: var(
2468
+ --amplify-components-button-link-overlay-focus-border-color
2469
+ );
2470
+ --amplify-internal-button-color: var(
2471
+ --amplify-components-button-link-overlay-focus-color
2472
+ );
2473
+ --amplify-internal-button-focus-box-shadow: var(
2474
+ --amplify-components-button-link-overlay-focus-box-shadow
2475
+ );
2476
+ }
2477
+ .amplify-button--link--overlay:active {
2478
+ --amplify-internal-button-background-color: var(
2479
+ --amplify-components-button-link-overlay-active-background-color
2480
+ );
2481
+ --amplify-internal-button-border-color: var(
2482
+ --amplify-components-button-link-overlay-active-border-color
2483
+ );
2484
+ --amplify-internal-button-color: var(
2485
+ --amplify-components-button-link-overlay-active-color
2486
+ );
1501
2487
  }
1502
2488
  .amplify-button--destructive {
1503
2489
  border-width: var(--amplify-components-button-destructive-border-width);
@@ -3723,11 +4709,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3723
4709
  border-color: var(--amplify-components-button-active-border-color);
3724
4710
  color: var(--amplify-components-button-active-color);
3725
4711
  }
3726
- .amplify-searchfield__search:disabled {
3727
- background-color: var(--amplify-components-searchfield-button-disabled-background-color);
3728
- border-color: var(--amplify-components-searchfield-button-disabled-border-color);
3729
- color: var(--amplify-components-searchfield-button-disabled-color);
3730
- }
3731
4712
  .amplify-searchfield__search:focus {
3732
4713
  background-color: var(--amplify-components-searchfield-button-focus-background-color);
3733
4714
  border-color: var(--amplify-components-searchfield-button-focus-border-color);
@@ -3738,6 +4719,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
3738
4719
  border-color: var(--amplify-components-searchfield-button-hover-border-color);
3739
4720
  color: var(--amplify-components-searchfield-button-hover-color);
3740
4721
  }
4722
+ .amplify-searchfield__search:disabled {
4723
+ background-color: var(--amplify-components-searchfield-button-disabled-background-color);
4724
+ border-color: var(--amplify-components-searchfield-button-disabled-border-color);
4725
+ color: var(--amplify-components-searchfield-button-disabled-color);
4726
+ }
3741
4727
 
3742
4728
  .amplify-select__wrapper {
3743
4729
  flex: var(--amplify-components-select-wrapper-flex);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react-storage",
3
- "version": "2.1.3",
3
+ "version": "2.1.4",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -40,9 +40,9 @@
40
40
  "typecheck": "tsc --noEmit"
41
41
  },
42
42
  "dependencies": {
43
- "@aws-amplify/ui": "5.7.0",
44
- "@aws-amplify/ui-react": "5.1.0",
45
- "@aws-amplify/ui-react-core": "2.1.29",
43
+ "@aws-amplify/ui": "5.7.1",
44
+ "@aws-amplify/ui-react": "5.1.1",
45
+ "@aws-amplify/ui-react-core": "2.1.30",
46
46
  "classnames": "2.3.1",
47
47
  "lodash": "4.17.21",
48
48
  "tslib": "2.4.1"