@aws-amplify/ui-react-notifications 1.0.9 → 1.0.11

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