@aws-amplify/ui-react-notifications 1.0.8 → 1.0.10

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 +1097 -48
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -83,6 +83,28 @@
83
83
  --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
84
84
  --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
85
85
  --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
86
+ --amplify-components-breadcrumbs-flex-direction: row;
87
+ --amplify-components-breadcrumbs-flex-wrap: wrap;
88
+ --amplify-components-breadcrumbs-gap: 0;
89
+ --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
90
+ --amplify-components-breadcrumbs-item-flex-direction: row;
91
+ --amplify-components-breadcrumbs-item-color: inherit;
92
+ --amplify-components-breadcrumbs-item-font-size: inherit;
93
+ --amplify-components-breadcrumbs-item-align-items: center;
94
+ --amplify-components-breadcrumbs-item-line-height: 1;
95
+ --amplify-components-breadcrumbs-separator-color: inherit;
96
+ --amplify-components-breadcrumbs-separator-font-size: inherit;
97
+ --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
98
+ --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
99
+ --amplify-components-breadcrumbs-link-font-size: inherit;
100
+ --amplify-components-breadcrumbs-link-font-weight: normal;
101
+ --amplify-components-breadcrumbs-link-text-decoration: none;
102
+ --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
103
+ --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
104
+ --amplify-components-breadcrumbs-link-current-color: inherit;
105
+ --amplify-components-breadcrumbs-link-current-font-size: inherit;
106
+ --amplify-components-breadcrumbs-link-current-font-weight: normal;
107
+ --amplify-components-breadcrumbs-link-current-text-decoration: none;
86
108
  --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
87
109
  --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
88
110
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
@@ -112,6 +134,71 @@
112
134
  --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
113
135
  --amplify-components-button-disabled-background-color: transparent;
114
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);
115
202
  --amplify-components-button-primary-border-color: transparent;
116
203
  --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
117
204
  --amplify-components-button-primary-border-style: solid;
@@ -133,6 +220,71 @@
133
220
  --amplify-components-button-primary-active-border-color: transparent;
134
221
  --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
135
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);
136
288
  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
137
289
  --amplify-components-button-menu-background-color: transparent;
138
290
  --amplify-components-button-menu-justify-content: start;
@@ -145,7 +297,7 @@
145
297
  --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
146
298
  --amplify-components-button-link-background-color: transparent;
147
299
  --amplify-components-button-link-border-color: transparent;
148
- --amplify-components-button-link-border-width: var(--amplify-space-zero);
300
+ --amplify-components-button-link-border-width: var(--amplify-border-widths-small);
149
301
  --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
150
302
  --amplify-components-button-link-hover-border-color: transparent;
151
303
  --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
@@ -163,6 +315,71 @@
163
315
  --amplify-components-button-link-loading-border-color: transparent;
164
316
  --amplify-components-button-link-loading-background-color: transparent;
165
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);
166
383
  --amplify-components-button-warning-background-color: transparent;
167
384
  --amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
168
385
  --amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
@@ -1075,6 +1292,7 @@
1075
1292
  --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
1076
1293
  --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
1077
1294
  --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
1295
+ --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05);
1078
1296
  --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
1079
1297
  --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
1080
1298
  --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);
@@ -1310,13 +1528,25 @@ strong.amplify-text {
1310
1528
  * Button base styles
1311
1529
  */
1312
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
+ );
1313
1542
  align-items: center;
1314
- 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);
1315
1545
  border-radius: var(--amplify-components-button-border-radius);
1316
1546
  border-style: var(--amplify-components-button-border-style);
1317
- border-width: var(--amplify-components-button-border-width);
1547
+ border-width: var(--amplify-internal-button-border-width);
1318
1548
  box-sizing: border-box;
1319
- color: var(--amplify-components-button-color);
1549
+ color: var(--amplify-internal-button-color);
1320
1550
  cursor: pointer;
1321
1551
  display: inline-flex;
1322
1552
  font-size: var(--amplify-components-button-font-size);
@@ -1357,24 +1587,277 @@ strong.amplify-text {
1357
1587
  --amplify-internal-button-loading-text-decoration: initial;
1358
1588
  }
1359
1589
  .amplify-button:hover {
1360
- background-color: var(--amplify-components-button-hover-background-color);
1361
- border-color: var(--amplify-components-button-hover-border-color);
1362
- 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
+ );
1363
1599
  }
1364
1600
  .amplify-button:focus {
1365
- background-color: var(--amplify-components-button-hover-background-color);
1366
- border-color: var(--amplify-components-button-focus-border-color);
1367
- color: var(--amplify-components-button-focus-color);
1368
- 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);
1369
1611
  }
1370
1612
  .amplify-button:active {
1371
- background-color: var(--amplify-components-button-active-background-color);
1372
- border-color: var(--amplify-components-button-active-border-color);
1373
- 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
+ );
1374
1622
  }
1375
1623
  .amplify-button--fullwidth {
1376
1624
  width: 100%;
1377
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
+ }
1378
1861
  .amplify-button--menu {
1379
1862
  border-width: var(--amplify-components-button-menu-border-width);
1380
1863
  background-color: var(--amplify-components-button-menu-background-color);
@@ -1397,10 +1880,18 @@ strong.amplify-text {
1397
1880
  background-color: var(--amplify-components-button-menu-active-background-color);
1398
1881
  }
1399
1882
  .amplify-button--primary {
1400
- border-width: var(--amplify-components-button-primary-border-width);
1401
- background-color: var(--amplify-components-button-primary-background-color);
1402
- border-color: var(--amplify-components-button-primary-border-color);
1403
- 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
+ );
1404
1895
  --amplify-internal-button-disabled-border-color: var(
1405
1896
  --amplify-components-button-primary-disabled-border-color
1406
1897
  );
@@ -1421,26 +1912,289 @@ strong.amplify-text {
1421
1912
  );
1422
1913
  }
1423
1914
  .amplify-button--primary:hover {
1424
- background-color: var(--amplify-components-button-primary-hover-background-color);
1425
- border-color: var(--amplify-components-button-primary-hover-border-color);
1426
- 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
+ );
1427
1924
  }
1428
1925
  .amplify-button--primary:focus {
1429
- background-color: var(--amplify-components-button-primary-focus-background-color);
1430
- border-color: var(--amplify-components-button-primary-focus-border-color);
1431
- color: var(--amplify-components-button-primary-focus-color);
1432
- 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
+ );
1433
1938
  }
1434
1939
  .amplify-button--primary:active {
1435
- background-color: var(--amplify-components-button-primary-active-background-color);
1436
- border-color: var(--amplify-components-button-primary-active-border-color);
1437
- 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
+ );
1438
2184
  }
1439
2185
  .amplify-button--link {
1440
- border-width: var(--amplify-components-button-link-border-width);
1441
- background-color: var(--amplify-components-button-link-background-color);
1442
- color: var(--amplify-components-button-link-color);
1443
- --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
+ );
1444
2198
  --amplify-internal-button-disabled-border-color: var(
1445
2199
  --amplify-components-button-link-disabled-border-color
1446
2200
  );
@@ -1459,23 +2213,277 @@ strong.amplify-text {
1459
2213
  --amplify-internal-button-loading-color: var(
1460
2214
  --amplify-components-button-link-loading-color
1461
2215
  );
1462
- --amplify-internal-button-loading-text-decoration: none;
1463
2216
  }
1464
2217
  .amplify-button--link:hover {
1465
- background-color: var(--amplify-components-button-link-hover-background-color);
1466
- border-color: var(--amplify-components-button-link-hover-border-color);
1467
- 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
+ );
1468
2227
  }
1469
2228
  .amplify-button--link:focus {
1470
- background-color: var(--amplify-components-button-link-focus-background-color);
1471
- border-color: var(--amplify-components-button-link-focus-border-color);
1472
- color: var(--amplify-components-button-link-focus-color);
1473
- 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
+ );
1474
2241
  }
1475
2242
  .amplify-button--link:active {
1476
- background-color: var(--amplify-components-button-link-active-background-color);
1477
- border-color: var(--amplify-components-button-link-active-border-color);
1478
- 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
+ );
1479
2487
  }
1480
2488
  .amplify-button--destructive {
1481
2489
  border-width: var(--amplify-components-button-destructive-border-width);
@@ -2254,6 +3262,47 @@ strong.amplify-text {
2254
3262
  align-self: center;
2255
3263
  }
2256
3264
 
3265
+ .amplify-breadcrumbs__list {
3266
+ display: flex;
3267
+ flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
3268
+ flex-direction: var(--amplify-components-breadcrumbs-flex-direction);
3269
+ gap: var(--amplify-components-breadcrumbs-gap);
3270
+ color: var(--amplify-components-breadcrumbs-color);
3271
+ }
3272
+
3273
+ .amplify-breadcrumbs__item {
3274
+ display: inline-flex;
3275
+ flex-direction: var(--amplify-components-breadcrumbs-item-flex-direction);
3276
+ align-items: var(--amplify-components-breadcrumbs-item-align-items);
3277
+ line-height: var(--amplify-components-breadcrumbs-item-line-height);
3278
+ color: var(--amplify-components-breadcrumbs-item-color);
3279
+ font-size: var(--amplify-components-breadcrumbs-item-font-size);
3280
+ }
3281
+
3282
+ .amplify-breadcrumbs__separator {
3283
+ color: var(--amplify-components-breadcrumbs-separator-color);
3284
+ font-size: var(--amplify-components-breadcrumbs-separator-font-size);
3285
+ padding-inline: var(--amplify-components-breadcrumbs-separator-padding-inline);
3286
+ }
3287
+
3288
+ .amplify-breadcrumbs__link {
3289
+ color: var(--amplify-components-breadcrumbs-link-color);
3290
+ font-size: var(--amplify-components-breadcrumbs-link-font-size);
3291
+ font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
3292
+ padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
3293
+ padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
3294
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3295
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3296
+ }
3297
+
3298
+ .amplify-breadcrumbs__link--current {
3299
+ color: var(--amplify-components-breadcrumbs-link-current-color);
3300
+ font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
3301
+ font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
3302
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3303
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3304
+ }
3305
+
2257
3306
  .amplify-card {
2258
3307
  background-color: var(--amplify-components-card-background-color);
2259
3308
  border-radius: var(--amplify-components-card-border-radius);
@@ -3660,11 +4709,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
3660
4709
  border-color: var(--amplify-components-button-active-border-color);
3661
4710
  color: var(--amplify-components-button-active-color);
3662
4711
  }
3663
- .amplify-searchfield__search:disabled {
3664
- background-color: var(--amplify-components-searchfield-button-disabled-background-color);
3665
- border-color: var(--amplify-components-searchfield-button-disabled-border-color);
3666
- color: var(--amplify-components-searchfield-button-disabled-color);
3667
- }
3668
4712
  .amplify-searchfield__search:focus {
3669
4713
  background-color: var(--amplify-components-searchfield-button-focus-background-color);
3670
4714
  border-color: var(--amplify-components-searchfield-button-focus-border-color);
@@ -3675,6 +4719,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
3675
4719
  border-color: var(--amplify-components-searchfield-button-hover-border-color);
3676
4720
  color: var(--amplify-components-searchfield-button-hover-color);
3677
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
+ }
3678
4727
 
3679
4728
  .amplify-select__wrapper {
3680
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-notifications",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -40,14 +40,14 @@
40
40
  "typecheck": "tsc --noEmit"
41
41
  },
42
42
  "dependencies": {
43
- "@aws-amplify/ui": "5.6.9",
44
- "@aws-amplify/ui-react": "5.0.7",
45
- "@aws-amplify/ui-react-core-notifications": "1.0.5",
43
+ "@aws-amplify/ui": "5.7.1",
44
+ "@aws-amplify/ui-react": "5.1.1",
45
+ "@aws-amplify/ui-react-core-notifications": "1.0.7",
46
46
  "classnames": "2.3.1",
47
47
  "tinycolor2": "1.4.2"
48
48
  },
49
49
  "peerDependencies": {
50
- "aws-amplify": ">= 5.0.1",
50
+ "aws-amplify": "^5.0.1",
51
51
  "react": ">= 16.14.0",
52
52
  "react-dom": ">= 16.14.0"
53
53
  },