@aws-amplify/ui 3.0.1 → 3.0.5

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 (8) hide show
  1. package/dist/esm/index.js +17 -18
  2. package/dist/esm/index.js.map +3 -3
  3. package/dist/index.d.ts +51 -11
  4. package/dist/index.js +17 -18
  5. package/dist/index.js.map +3 -3
  6. package/dist/styles.css +154 -65
  7. package/dist/theme.css +51 -44
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -3,7 +3,7 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Mon, 22 Nov 2021 20:49:04 GMT
6
+ * Generated on Tue, 14 Dec 2021 22:19:03 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -81,7 +81,7 @@
81
81
  --amplify-font-sizes-xxxs: 0.375rem;
82
82
  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
83
83
  "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
84
- --amplify-fonts-default-variable: "InterVariable", -apple-system, BlinkMacSystemFont,
84
+ --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
85
85
  "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
86
86
  sans-serif;
87
87
  --amplify-colors-transparent: transparent;
@@ -113,18 +113,18 @@
113
113
  --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
114
114
  --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
115
115
  --amplify-colors-background-primary: var(--amplify-colors-white);
116
- --amplify-colors-font-success: var(--amplify-colors-green-80);
117
- --amplify-colors-font-error: var(--amplify-colors-red-80);
118
- --amplify-colors-font-warning: var(--amplify-colors-orange-80);
119
- --amplify-colors-font-info: var(--amplify-colors-blue-80);
116
+ --amplify-colors-font-success: var(--amplify-colors-green-90);
117
+ --amplify-colors-font-error: var(--amplify-colors-red-90);
118
+ --amplify-colors-font-warning: var(--amplify-colors-orange-90);
119
+ --amplify-colors-font-info: var(--amplify-colors-blue-90);
120
120
  --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
121
121
  --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
122
122
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
123
123
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
124
124
  --amplify-colors-font-inverse: var(--amplify-colors-white);
125
125
  --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
126
- --amplify-colors-font-tertiary: var(--amplify-colors-neutral-60);
127
- --amplify-colors-font-secondary: var(--amplify-colors-neutral-80);
126
+ --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
127
+ --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
128
128
  --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
129
129
  --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
130
130
  --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
@@ -144,9 +144,9 @@
144
144
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
145
145
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
146
146
  --amplify-colors-neutral-60: hsl(210, 6%, 70%);
147
- --amplify-colors-neutral-40: hsl(210, 5%, 80%);
148
- --amplify-colors-neutral-20: hsl(210, 5%, 90%);
149
- --amplify-colors-neutral-10: hsl(210, 5%, 95%);
147
+ --amplify-colors-neutral-40: hsl(210, 5%, 87%);
148
+ --amplify-colors-neutral-20: hsl(210, 5%, 94%);
149
+ --amplify-colors-neutral-10: hsl(210, 5%, 98%);
150
150
  --amplify-colors-pink-100: hsl(340, 100%, 15%);
151
151
  --amplify-colors-pink-90: hsl(340, 100%, 20%);
152
152
  --amplify-colors-pink-80: hsl(340, 95%, 30%);
@@ -175,13 +175,13 @@
175
175
  --amplify-colors-teal-40: hsl(190, 70%, 70%);
176
176
  --amplify-colors-teal-20: hsl(190, 75%, 85%);
177
177
  --amplify-colors-teal-10: hsl(190, 75%, 95%);
178
- --amplify-colors-green-100: hsl(130, 100%, 15%);
179
- --amplify-colors-green-90: hsl(130, 100%, 20%);
180
- --amplify-colors-green-80: hsl(130, 95%, 30%);
181
- --amplify-colors-green-60: hsl(130, 50%, 50%);
182
- --amplify-colors-green-40: hsl(130, 75%, 75%);
183
- --amplify-colors-green-20: hsl(130, 75%, 85%);
184
- --amplify-colors-green-10: hsl(130, 75%, 95%);
178
+ --amplify-colors-green-100: hsl(130, 22%, 23%);
179
+ --amplify-colors-green-90: hsl(130, 27%, 29%);
180
+ --amplify-colors-green-80: hsl(130, 33%, 37%);
181
+ --amplify-colors-green-60: hsl(130, 43%, 46%);
182
+ --amplify-colors-green-40: hsl(130, 44%, 63%);
183
+ --amplify-colors-green-20: hsl(130, 60%, 90%);
184
+ --amplify-colors-green-10: hsl(130, 60%, 95%);
185
185
  --amplify-colors-yellow-100: hsl(60, 100%, 15%);
186
186
  --amplify-colors-yellow-90: hsl(60, 100%, 20%);
187
187
  --amplify-colors-yellow-80: hsl(60, 95%, 30%);
@@ -274,6 +274,7 @@
274
274
  --amplify-components-tabs-item-border-style: solid;
275
275
  --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
276
276
  --amplify-components-tabs-item-background-color: transparent;
277
+ --amplify-components-tabs-gap: 0;
277
278
  --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
278
279
  --amplify-components-tabs-border-style: solid;
279
280
  --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
@@ -329,40 +330,50 @@
329
330
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
330
331
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
331
332
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
332
- --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-600);
333
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
333
334
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
334
335
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
335
336
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
336
337
  --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
337
338
  --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
338
339
  --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
339
- --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-neutral-20);
340
- --amplify-components-switchfield-thumb-background: var(--amplify-colors-white);
340
+ --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
341
+ --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
341
342
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
342
343
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
343
344
  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
344
345
  --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
345
- --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-30);
346
+ --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
346
347
  --amplify-components-stepperfield-input-text-align: center;
347
- --amplify-components-stepperfield-input-border-color: var(--amplify-colors-brand-primary-20);
348
348
  --amplify-components-stepperfield-flex-direction: column;
349
+ --amplify-components-sliderfield-large-thumb-height: 1.5rem;
350
+ --amplify-components-sliderfield-large-thumb-width: 1.5rem;
351
+ --amplify-components-sliderfield-large-track-height: 0.625rem;
352
+ --amplify-components-sliderfield-small-thumb-height: 1rem;
353
+ --amplify-components-sliderfield-small-thumb-width: 1rem;
354
+ --amplify-components-sliderfield-small-track-height: 0.25rem;
349
355
  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
350
- --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-secondary);
356
+ --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
357
+ --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
358
+ --amplify-components-sliderfield-thumb-disabled-box-shadow: none;
359
+ --amplify-components-sliderfield-thumb-disabled-border-color: transparent;
360
+ --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
361
+ --amplify-components-sliderfield-thumb-border-style: solid;
362
+ --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
363
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
351
364
  --amplify-components-sliderfield-thumb-border-radius: 50%;
352
- --amplify-components-sliderfield-thumb-box-shadow: 0 2px 10px var(--amplify-colors-black);
353
- --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-white);
365
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
366
+ --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
354
367
  --amplify-components-sliderfield-thumb-height: 1.25rem;
355
368
  --amplify-components-sliderfield-thumb-width: 1.25rem;
369
+ --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
370
+ --amplify-components-sliderfield-range-border-radius: 9999px;
356
371
  --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
357
- --amplify-components-sliderfield-track-vertical-min-height: 10rem;
358
- --amplify-components-sliderfield-track-vertical-width: 0.375rem;
359
- --amplify-components-sliderfield-track-horizontal-min-width: 10rem;
360
- --amplify-components-sliderfield-track-horizontal-height: 0.375rem;
372
+ --amplify-components-sliderfield-track-min-width: 10rem;
373
+ --amplify-components-sliderfield-track-height: 0.375rem;
361
374
  --amplify-components-sliderfield-track-border-radius: 9999px;
362
375
  --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
363
- --amplify-components-sliderfield-root-vertical-width: 2rem;
364
- --amplify-components-sliderfield-root-horizontal-height: 2rem;
365
- --amplify-components-sliderfield-group-gap: var(--amplify-space-small);
376
+ --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
366
377
  --amplify-components-selectfield-flex-direction: column;
367
378
  --amplify-components-select-large-min-width: 7.5rem;
368
379
  --amplify-components-select-small-min-width: 5.5rem;
@@ -384,25 +395,19 @@
384
395
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
385
396
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
386
397
  --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
387
- --amplify-components-radio-button-disabled-color: var(--amplify-colors-white);
388
- --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-white);
398
+ --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
389
399
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
390
400
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
391
401
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
392
402
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
393
403
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
394
404
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
395
- --amplify-components-radio-button-checked-color: var(--amplify-colors-red-60);
405
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
396
406
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
397
407
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
398
- --amplify-components-radio-button-small-height: var(--amplify-font-sizes-xs);
399
- --amplify-components-radio-button-small-width: var(--amplify-font-sizes-xs);
400
- --amplify-components-radio-button-before-background-color: currentColor;
401
- --amplify-components-radio-button-before-border-radius: 50%;
402
- --amplify-components-radio-button-before-height: 50%;
403
- --amplify-components-radio-button-before-width: 50%;
404
- --amplify-components-radio-button-before-display: inline-block;
405
- --amplify-components-radio-button-before-content: "";
408
+ --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
409
+ --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small);
410
+ --amplify-components-radio-button-padding: var(--amplify-border-widths-medium);
406
411
  --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
407
412
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
408
413
  --amplify-components-radio-button-outline-style: solid;
@@ -804,6 +809,8 @@
804
809
  --amplify-components-alert-padding-block: var(--amplify-space-small);
805
810
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
806
811
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
812
+ --amplify-components-alert-justify-content: space-between;
813
+ --amplify-components-alert-align-items: center;
807
814
  }
808
815
 
809
816
  html {
@@ -1379,6 +1386,8 @@ h6.amplify-heading {
1379
1386
  }
1380
1387
 
1381
1388
  .amplify-alert {
1389
+ align-items: var(--amplify-components-alert-align-items);
1390
+ justify-content: var(--amplify-components-alert-justify-content);
1382
1391
  background-color: var(--amplify-components-alert-background-color);
1383
1392
  padding-block: var(--amplify-components-alert-padding-block);
1384
1393
  padding-inline: var(--amplify-components-alert-padding-inline);
@@ -1428,7 +1437,7 @@ h6.amplify-heading {
1428
1437
  display: grid;
1429
1438
  width: 100vw;
1430
1439
  height: 100vh;
1431
- overflow: auto;
1440
+ height: -webkit-fill-available;
1432
1441
  background-color: var(--amplify-colors-background-secondary, #e1e5e9);
1433
1442
  /* Override browser default `body { margin: 8px }` */
1434
1443
  position: fixed;
@@ -1436,6 +1445,31 @@ h6.amplify-heading {
1436
1445
  left: 0;
1437
1446
  /* Having a z-index at least "wins" by default */
1438
1447
  z-index: 1;
1448
+ /* top-align at the top 20% of the screen */
1449
+ box-sizing: border-box;
1450
+ padding-top: 20vh;
1451
+ align-content: flex-start;
1452
+ }
1453
+ @media (max-width: 30rem) {
1454
+ [data-amplify-authenticator][data-variation=modal] {
1455
+ overflow: auto;
1456
+ padding-top: 0;
1457
+ }
1458
+ }
1459
+
1460
+ [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1461
+ max-height: 60vh;
1462
+ overflow-y: auto;
1463
+ /* Scroll shadows, adapted from https://codepen.io/chriscoyier/pen/YzXBYvL */
1464
+ background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) center bottom;
1465
+ background-repeat: no-repeat;
1466
+ background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
1467
+ background-attachment: local, local, scroll, scroll;
1468
+ }
1469
+ @media (max-width: 30rem) {
1470
+ [data-amplify-authenticator][data-variation=modal] [data-amplify-router-content] {
1471
+ max-height: unset;
1472
+ }
1439
1473
  }
1440
1474
 
1441
1475
  /* Texture for modal */
@@ -2179,6 +2213,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2179
2213
  justify-content: var(--amplify-components-radio-button-justify-content);
2180
2214
  width: var(--amplify-components-radio-button-width);
2181
2215
  height: var(--amplify-components-radio-button-height);
2216
+ padding: var(--amplify-components-radio-button-padding);
2182
2217
  box-sizing: var(--amplify-components-radio-button-box-sizing);
2183
2218
  border-width: var(--amplify-components-radio-button-border-width);
2184
2219
  border-style: var(--amplify-components-radio-button-border-style);
@@ -2194,12 +2229,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
2194
2229
  outline-offset: var(--amplify-components-radio-button-outline-offset);
2195
2230
  }
2196
2231
  .amplify-radio__button::before {
2197
- content: var(--amplify-components-radio-button-before-content);
2198
- display: var(--amplify-components-radio-button-before-display);
2199
- width: var(--amplify-components-radio-button-before-width);
2200
- height: var(--amplify-components-radio-button-before-height);
2232
+ content: "";
2233
+ display: inline-block;
2234
+ width: 100%;
2235
+ height: 100%;
2201
2236
  border-radius: var(--amplify-components-radio-button-before-border-radius);
2202
- background-color: var(--amplify-components-radio-button-before-background-color);
2237
+ background-color: currentColor;
2238
+ border-radius: 50%;
2203
2239
  }
2204
2240
  .amplify-radio__button[data-size=small] {
2205
2241
  width: var(--amplify-components-radio-button-small-width);
@@ -2290,10 +2326,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
2290
2326
  justify-content: space-between;
2291
2327
  }
2292
2328
 
2293
- .amplify-sliderfield__group {
2294
- gap: var(--amplify-components-sliderfield-group-gap);
2295
- }
2296
-
2297
2329
  .amplify-sliderfield__root {
2298
2330
  position: relative;
2299
2331
  display: flex;
@@ -2303,13 +2335,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
2303
2335
  -ms-user-select: none;
2304
2336
  user-select: none;
2305
2337
  touch-action: none;
2338
+ box-sizing: content-box;
2339
+ padding-block: var(--amplify-components-sliderfield-padding-block);
2340
+ }
2341
+ .amplify-sliderfield__root[data-disabled] {
2342
+ cursor: not-allowed;
2306
2343
  }
2307
2344
  .amplify-sliderfield__root[data-orientation=horizontal] {
2308
- height: var(--amplify-components-sliderfield-root-horizontal-height);
2345
+ height: var(--amplify-components-sliderfield-thumb-height);
2309
2346
  }
2310
2347
  .amplify-sliderfield__root[data-orientation=vertical] {
2311
2348
  flex-direction: column;
2312
- width: var(--amplify-components-sliderfield-root-horizontal-width);
2349
+ width: var(--amplify-components-sliderfield-thumb-width);
2350
+ }
2351
+ [data-size=large] .amplify-sliderfield__root[data-orientation=horizontal] {
2352
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2353
+ }
2354
+ [data-size=large] .amplify-sliderfield__root[data-orientation=vertical] {
2355
+ width: var(--amplify-components-sliderfield-large-thumb-height);
2356
+ }
2357
+ [data-size=small] .amplify-sliderfield__root[data-orientation=horizontal] {
2358
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2359
+ }
2360
+ [data-size=small] .amplify-sliderfield__root[data-orientation=vertical] {
2361
+ width: var(--amplify-components-sliderfield-small-thumb-height);
2313
2362
  }
2314
2363
 
2315
2364
  .amplify-sliderfield__track {
@@ -2319,19 +2368,34 @@ html[dir=rtl] .amplify-field-group__inner-start {
2319
2368
  background-color: var(--amplify-components-sliderfield-track-background-color);
2320
2369
  }
2321
2370
  .amplify-sliderfield__track[data-orientation=horizontal] {
2322
- height: var(--amplify-components-sliderfield-track-horizontal-height);
2323
- min-width: var(--amplify-components-sliderfield-track-horizontal-min-width);
2371
+ height: var(--amplify-components-sliderfield-track-height);
2372
+ min-width: var(--amplify-components-sliderfield-track-min-width);
2324
2373
  }
2325
2374
  .amplify-sliderfield__track[data-orientation=vertical] {
2326
- width: var(--amplify-components-sliderfield-track-vertical-width);
2327
- min-height: var(--amplify-components-sliderfield-track-vertical-min-height);
2375
+ width: var(--amplify-components-sliderfield-track-height);
2376
+ min-height: var(--amplify-components-sliderfield-track-min-width);
2377
+ }
2378
+ [data-size=large] .amplify-sliderfield__track[data-orientation=vertical] {
2379
+ width: var(--amplify-components-sliderfield-large-track-height);
2380
+ }
2381
+ [data-size=large] .amplify-sliderfield__track[data-orientation=horizontal] {
2382
+ height: var(--amplify-components-sliderfield-large-track-height);
2383
+ }
2384
+ [data-size=small] .amplify-sliderfield__track[data-orientation=vertical] {
2385
+ width: var(--amplify-components-sliderfield-small-track-height);
2386
+ }
2387
+ [data-size=small] .amplify-sliderfield__track[data-orientation=horizontal] {
2388
+ height: var(--amplify-components-sliderfield-small-track-height);
2328
2389
  }
2329
2390
 
2330
2391
  .amplify-sliderfield__range {
2331
2392
  position: absolute;
2332
- border-radius: 9999px;
2393
+ border-radius: var(--amplify-components-sliderfield-range-border-radius);
2333
2394
  background-color: var(--amplify-components-sliderfield-range-background-color);
2334
2395
  }
2396
+ .amplify-sliderfield__range[data-disabled] {
2397
+ background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
2398
+ }
2335
2399
  .amplify-sliderfield__range[data-orientation=horizontal] {
2336
2400
  height: 100%;
2337
2401
  }
@@ -2346,13 +2410,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
2346
2410
  background-color: var(--amplify-components-sliderfield-thumb-background-color);
2347
2411
  box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
2348
2412
  border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
2413
+ border-width: var(--amplify-components-sliderfield-thumb-border-width);
2414
+ border-color: var(--amplify-components-sliderfield-thumb-border-color);
2415
+ border-style: var(--amplify-components-sliderfield-thumb-border-style);
2349
2416
  }
2350
2417
  .amplify-sliderfield__thumb:hover {
2351
2418
  background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
2419
+ border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
2352
2420
  }
2353
2421
  .amplify-sliderfield__thumb:focus {
2354
2422
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
2355
2423
  }
2424
+ .amplify-sliderfield__thumb[data-disabled] {
2425
+ background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
2426
+ border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
2427
+ box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
2428
+ }
2429
+ [data-size=large] .amplify-sliderfield__thumb {
2430
+ width: var(--amplify-components-sliderfield-large-thumb-width);
2431
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2432
+ }
2433
+ [data-size=small] .amplify-sliderfield__thumb {
2434
+ width: var(--amplify-components-sliderfield-small-thumb-width);
2435
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2436
+ }
2356
2437
 
2357
2438
  .amplify-stepperfield {
2358
2439
  flex-direction: var(--amplify-components-stepperfield-flex-direction);
@@ -2362,15 +2443,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
2362
2443
  -webkit-border-end: none;
2363
2444
  border-inline-end: none;
2364
2445
  }
2446
+ [data-variation=quiet] .amplify-stepperfield__button--decrease {
2447
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2448
+ border-radius: 0;
2449
+ }
2365
2450
 
2366
2451
  .amplify-stepperfield__button--increase[data-invalid=true] {
2367
2452
  -webkit-border-start: none;
2368
2453
  border-inline-start: none;
2369
2454
  }
2455
+ [data-variation=quiet] .amplify-stepperfield__button--increase {
2456
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2457
+ border-radius: 0;
2458
+ }
2370
2459
 
2371
2460
  .amplify-stepperfield__input {
2372
2461
  -moz-appearance: textfield;
2373
- border-color: var(--amplify-components-stepperfield-input-border-color);
2374
2462
  text-align: var(--amplify-components-stepperfield-input-text-align);
2375
2463
  }
2376
2464
  .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
@@ -2420,10 +2508,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
2420
2508
  width: var(--amplify-components-switchfield-track-width);
2421
2509
  height: var(--amplify-components-switchfield-track-height);
2422
2510
  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
2423
- background: var(--amplify-components-switchfield-track-background);
2511
+ background-color: var(--amplify-components-switchfield-track-background-color);
2424
2512
  }
2425
2513
  .amplify-switch-track[data-checked=true] {
2426
- background: var(--amplify-components-switchfield-track-checked-background);
2514
+ background-color: var(--amplify-components-switchfield-track-checked-background-color);
2427
2515
  }
2428
2516
  .amplify-switch-track[data-disabled=true] {
2429
2517
  opacity: var(--amplify-components-switchfield-disabled-opacity);
@@ -2434,7 +2522,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2434
2522
  }
2435
2523
 
2436
2524
  .amplify-switch-thumb {
2437
- background: var(--amplify-components-switchfield-thumb-background);
2525
+ background-color: var(--amplify-components-switchfield-thumb-background-color);
2438
2526
  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
2439
2527
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
2440
2528
  width: var(--amplify-components-switchfield-thumb-width);
@@ -2554,6 +2642,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2554
2642
  border-width: 0 0 var(--amplify-components-tabs-border-width) 0;
2555
2643
  border-style: var(--amplify-components-tabs-border-style);
2556
2644
  border-color: var(--amplify-components-tabs-border-color);
2645
+ gap: var(--amplify-components-tabs-gap);
2557
2646
  }
2558
2647
  .amplify-tabs[data-indicator-position=top] {
2559
2648
  border-width: var(--amplify-components-tabs-border-width) 0 0 0;
package/dist/theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 22 Nov 2021 20:49:04 GMT
3
+ * Generated on Tue, 14 Dec 2021 22:19:03 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -79,7 +79,7 @@
79
79
  --amplify-font-sizes-xxxs: 0.375rem;
80
80
  --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
81
81
  'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
82
- --amplify-fonts-default-variable: 'InterVariable', -apple-system, BlinkMacSystemFont,
82
+ --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
83
83
  'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
84
84
  sans-serif;
85
85
  --amplify-colors-transparent: transparent;
@@ -111,18 +111,18 @@
111
111
  --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
112
112
  --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
113
113
  --amplify-colors-background-primary: var(--amplify-colors-white);
114
- --amplify-colors-font-success: var(--amplify-colors-green-80);
115
- --amplify-colors-font-error: var(--amplify-colors-red-80);
116
- --amplify-colors-font-warning: var(--amplify-colors-orange-80);
117
- --amplify-colors-font-info: var(--amplify-colors-blue-80);
114
+ --amplify-colors-font-success: var(--amplify-colors-green-90);
115
+ --amplify-colors-font-error: var(--amplify-colors-red-90);
116
+ --amplify-colors-font-warning: var(--amplify-colors-orange-90);
117
+ --amplify-colors-font-info: var(--amplify-colors-blue-90);
118
118
  --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
119
119
  --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
120
120
  --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
121
121
  --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
122
122
  --amplify-colors-font-inverse: var(--amplify-colors-white);
123
123
  --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
124
- --amplify-colors-font-tertiary: var(--amplify-colors-neutral-60);
125
- --amplify-colors-font-secondary: var(--amplify-colors-neutral-80);
124
+ --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
125
+ --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
126
126
  --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
127
127
  --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
128
128
  --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
@@ -142,9 +142,9 @@
142
142
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
143
143
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
144
144
  --amplify-colors-neutral-60: hsl(210, 6%, 70%);
145
- --amplify-colors-neutral-40: hsl(210, 5%, 80%);
146
- --amplify-colors-neutral-20: hsl(210, 5%, 90%);
147
- --amplify-colors-neutral-10: hsl(210, 5%, 95%);
145
+ --amplify-colors-neutral-40: hsl(210, 5%, 87%);
146
+ --amplify-colors-neutral-20: hsl(210, 5%, 94%);
147
+ --amplify-colors-neutral-10: hsl(210, 5%, 98%);
148
148
  --amplify-colors-pink-100: hsl(340, 100%, 15%);
149
149
  --amplify-colors-pink-90: hsl(340, 100%, 20%);
150
150
  --amplify-colors-pink-80: hsl(340, 95%, 30%);
@@ -173,13 +173,13 @@
173
173
  --amplify-colors-teal-40: hsl(190, 70%, 70%);
174
174
  --amplify-colors-teal-20: hsl(190, 75%, 85%);
175
175
  --amplify-colors-teal-10: hsl(190, 75%, 95%);
176
- --amplify-colors-green-100: hsl(130, 100%, 15%);
177
- --amplify-colors-green-90: hsl(130, 100%, 20%);
178
- --amplify-colors-green-80: hsl(130, 95%, 30%);
179
- --amplify-colors-green-60: hsl(130, 50%, 50%);
180
- --amplify-colors-green-40: hsl(130, 75%, 75%);
181
- --amplify-colors-green-20: hsl(130, 75%, 85%);
182
- --amplify-colors-green-10: hsl(130, 75%, 95%);
176
+ --amplify-colors-green-100: hsl(130, 22%, 23%);
177
+ --amplify-colors-green-90: hsl(130, 27%, 29%);
178
+ --amplify-colors-green-80: hsl(130, 33%, 37%);
179
+ --amplify-colors-green-60: hsl(130, 43%, 46%);
180
+ --amplify-colors-green-40: hsl(130, 44%, 63%);
181
+ --amplify-colors-green-20: hsl(130, 60%, 90%);
182
+ --amplify-colors-green-10: hsl(130, 60%, 95%);
183
183
  --amplify-colors-yellow-100: hsl(60, 100%, 15%);
184
184
  --amplify-colors-yellow-90: hsl(60, 100%, 20%);
185
185
  --amplify-colors-yellow-80: hsl(60, 95%, 30%);
@@ -272,6 +272,7 @@
272
272
  --amplify-components-tabs-item-border-style: solid;
273
273
  --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
274
274
  --amplify-components-tabs-item-background-color: transparent;
275
+ --amplify-components-tabs-gap: 0;
275
276
  --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
276
277
  --amplify-components-tabs-border-style: solid;
277
278
  --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
@@ -327,40 +328,50 @@
327
328
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
328
329
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
329
330
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
330
- --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-600);
331
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
331
332
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
332
333
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
333
334
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
334
335
  --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
335
336
  --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
336
337
  --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
337
- --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-neutral-20);
338
- --amplify-components-switchfield-thumb-background: var(--amplify-colors-white);
338
+ --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
339
+ --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
339
340
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
340
341
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
341
342
  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
342
343
  --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
343
- --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-30);
344
+ --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
344
345
  --amplify-components-stepperfield-input-text-align: center;
345
- --amplify-components-stepperfield-input-border-color: var(--amplify-colors-brand-primary-20);
346
346
  --amplify-components-stepperfield-flex-direction: column;
347
+ --amplify-components-sliderfield-large-thumb-height: 1.5rem;
348
+ --amplify-components-sliderfield-large-thumb-width: 1.5rem;
349
+ --amplify-components-sliderfield-large-track-height: 0.625rem;
350
+ --amplify-components-sliderfield-small-thumb-height: 1rem;
351
+ --amplify-components-sliderfield-small-thumb-width: 1rem;
352
+ --amplify-components-sliderfield-small-track-height: 0.25rem;
347
353
  --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
348
- --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-secondary);
354
+ --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
355
+ --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
356
+ --amplify-components-sliderfield-thumb-disabled-box-shadow: none;
357
+ --amplify-components-sliderfield-thumb-disabled-border-color: transparent;
358
+ --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
359
+ --amplify-components-sliderfield-thumb-border-style: solid;
360
+ --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
361
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
349
362
  --amplify-components-sliderfield-thumb-border-radius: 50%;
350
- --amplify-components-sliderfield-thumb-box-shadow: 0 2px 10px var(--amplify-colors-black);
351
- --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-white);
363
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
364
+ --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
352
365
  --amplify-components-sliderfield-thumb-height: 1.25rem;
353
366
  --amplify-components-sliderfield-thumb-width: 1.25rem;
367
+ --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
368
+ --amplify-components-sliderfield-range-border-radius: 9999px;
354
369
  --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
355
- --amplify-components-sliderfield-track-vertical-min-height: 10rem;
356
- --amplify-components-sliderfield-track-vertical-width: 0.375rem;
357
- --amplify-components-sliderfield-track-horizontal-min-width: 10rem;
358
- --amplify-components-sliderfield-track-horizontal-height: 0.375rem;
370
+ --amplify-components-sliderfield-track-min-width: 10rem;
371
+ --amplify-components-sliderfield-track-height: 0.375rem;
359
372
  --amplify-components-sliderfield-track-border-radius: 9999px;
360
373
  --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
361
- --amplify-components-sliderfield-root-vertical-width: 2rem;
362
- --amplify-components-sliderfield-root-horizontal-height: 2rem;
363
- --amplify-components-sliderfield-group-gap: var(--amplify-space-small);
374
+ --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
364
375
  --amplify-components-selectfield-flex-direction: column;
365
376
  --amplify-components-select-large-min-width: 7.5rem;
366
377
  --amplify-components-select-small-min-width: 5.5rem;
@@ -382,25 +393,19 @@
382
393
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
383
394
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
384
395
  --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
385
- --amplify-components-radio-button-disabled-color: var(--amplify-colors-white);
386
- --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-white);
396
+ --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
387
397
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
388
398
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
389
399
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
390
400
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
391
401
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
392
402
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
393
- --amplify-components-radio-button-checked-color: var(--amplify-colors-red-60);
403
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
394
404
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
395
405
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
396
- --amplify-components-radio-button-small-height: var(--amplify-font-sizes-xs);
397
- --amplify-components-radio-button-small-width: var(--amplify-font-sizes-xs);
398
- --amplify-components-radio-button-before-background-color: currentColor;
399
- --amplify-components-radio-button-before-border-radius: 50%;
400
- --amplify-components-radio-button-before-height: 50%;
401
- --amplify-components-radio-button-before-width: 50%;
402
- --amplify-components-radio-button-before-display: inline-block;
403
- --amplify-components-radio-button-before-content: "";
406
+ --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
407
+ --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small);
408
+ --amplify-components-radio-button-padding: var(--amplify-border-widths-medium);
404
409
  --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
405
410
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
406
411
  --amplify-components-radio-button-outline-style: solid;
@@ -802,4 +807,6 @@
802
807
  --amplify-components-alert-padding-block: var(--amplify-space-small);
803
808
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
804
809
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
810
+ --amplify-components-alert-justify-content: space-between;
811
+ --amplify-components-alert-align-items: center;
805
812
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "3.0.1",
3
+ "version": "3.0.5",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {