@aws-amplify/ui 3.0.1 → 3.0.2

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 (7) hide show
  1. package/dist/esm/index.js +3 -3
  2. package/dist/esm/index.js.map +2 -2
  3. package/dist/index.js +3 -3
  4. package/dist/index.js.map +2 -2
  5. package/dist/styles.css +125 -63
  6. package/dist/theme.css +49 -43
  7. 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 Wed, 24 Nov 2021 22:44:54 GMT
7
7
  */
8
8
  :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
@@ -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%);
@@ -329,40 +329,50 @@
329
329
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
330
330
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
331
331
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
332
- --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-600);
332
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
333
333
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
334
334
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
335
335
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
336
336
  --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
337
337
  --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
338
338
  --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);
339
+ --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
340
+ --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
341
341
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
342
342
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
343
343
  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
344
344
  --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
345
- --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-30);
345
+ --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
346
346
  --amplify-components-stepperfield-input-text-align: center;
347
- --amplify-components-stepperfield-input-border-color: var(--amplify-colors-brand-primary-20);
348
347
  --amplify-components-stepperfield-flex-direction: column;
348
+ --amplify-components-sliderfield-large-thumb-height: 1.5rem;
349
+ --amplify-components-sliderfield-large-thumb-width: 1.5rem;
350
+ --amplify-components-sliderfield-large-track-height: 0.625rem;
351
+ --amplify-components-sliderfield-small-thumb-height: 1rem;
352
+ --amplify-components-sliderfield-small-thumb-width: 1rem;
353
+ --amplify-components-sliderfield-small-track-height: 0.25rem;
349
354
  --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);
355
+ --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
356
+ --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
357
+ --amplify-components-sliderfield-thumb-disabled-box-shadow: none;
358
+ --amplify-components-sliderfield-thumb-disabled-border-color: transparent;
359
+ --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
360
+ --amplify-components-sliderfield-thumb-border-style: solid;
361
+ --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
362
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
351
363
  --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);
364
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
365
+ --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
354
366
  --amplify-components-sliderfield-thumb-height: 1.25rem;
355
367
  --amplify-components-sliderfield-thumb-width: 1.25rem;
368
+ --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
369
+ --amplify-components-sliderfield-range-border-radius: 9999px;
356
370
  --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;
371
+ --amplify-components-sliderfield-track-min-width: 10rem;
372
+ --amplify-components-sliderfield-track-height: 0.375rem;
361
373
  --amplify-components-sliderfield-track-border-radius: 9999px;
362
374
  --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);
375
+ --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
366
376
  --amplify-components-selectfield-flex-direction: column;
367
377
  --amplify-components-select-large-min-width: 7.5rem;
368
378
  --amplify-components-select-small-min-width: 5.5rem;
@@ -384,25 +394,19 @@
384
394
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
385
395
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
386
396
  --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);
397
+ --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
389
398
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
390
399
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
391
400
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
392
401
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
393
402
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
394
403
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
395
- --amplify-components-radio-button-checked-color: var(--amplify-colors-red-60);
404
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
396
405
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
397
406
  --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: "";
407
+ --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
408
+ --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small);
409
+ --amplify-components-radio-button-padding: var(--amplify-border-widths-medium);
406
410
  --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
407
411
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
408
412
  --amplify-components-radio-button-outline-style: solid;
@@ -804,6 +808,8 @@
804
808
  --amplify-components-alert-padding-block: var(--amplify-space-small);
805
809
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
806
810
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
811
+ --amplify-components-alert-justify-content: space-between;
812
+ --amplify-components-alert-align-items: center;
807
813
  }
808
814
 
809
815
  html {
@@ -1379,6 +1385,8 @@ h6.amplify-heading {
1379
1385
  }
1380
1386
 
1381
1387
  .amplify-alert {
1388
+ align-items: var(--amplify-components-alert-align-items);
1389
+ justify-content: var(--amplify-components-alert-justify-content);
1382
1390
  background-color: var(--amplify-components-alert-background-color);
1383
1391
  padding-block: var(--amplify-components-alert-padding-block);
1384
1392
  padding-inline: var(--amplify-components-alert-padding-inline);
@@ -2179,6 +2187,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2179
2187
  justify-content: var(--amplify-components-radio-button-justify-content);
2180
2188
  width: var(--amplify-components-radio-button-width);
2181
2189
  height: var(--amplify-components-radio-button-height);
2190
+ padding: var(--amplify-components-radio-button-padding);
2182
2191
  box-sizing: var(--amplify-components-radio-button-box-sizing);
2183
2192
  border-width: var(--amplify-components-radio-button-border-width);
2184
2193
  border-style: var(--amplify-components-radio-button-border-style);
@@ -2194,12 +2203,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
2194
2203
  outline-offset: var(--amplify-components-radio-button-outline-offset);
2195
2204
  }
2196
2205
  .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);
2206
+ content: "";
2207
+ display: inline-block;
2208
+ width: 100%;
2209
+ height: 100%;
2201
2210
  border-radius: var(--amplify-components-radio-button-before-border-radius);
2202
- background-color: var(--amplify-components-radio-button-before-background-color);
2211
+ background-color: currentColor;
2212
+ border-radius: 50%;
2203
2213
  }
2204
2214
  .amplify-radio__button[data-size=small] {
2205
2215
  width: var(--amplify-components-radio-button-small-width);
@@ -2290,10 +2300,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
2290
2300
  justify-content: space-between;
2291
2301
  }
2292
2302
 
2293
- .amplify-sliderfield__group {
2294
- gap: var(--amplify-components-sliderfield-group-gap);
2295
- }
2296
-
2297
2303
  .amplify-sliderfield__root {
2298
2304
  position: relative;
2299
2305
  display: flex;
@@ -2303,13 +2309,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
2303
2309
  -ms-user-select: none;
2304
2310
  user-select: none;
2305
2311
  touch-action: none;
2312
+ box-sizing: content-box;
2313
+ padding-block: var(--amplify-components-sliderfield-padding-block);
2314
+ }
2315
+ .amplify-sliderfield__root[data-disabled] {
2316
+ cursor: not-allowed;
2306
2317
  }
2307
2318
  .amplify-sliderfield__root[data-orientation=horizontal] {
2308
- height: var(--amplify-components-sliderfield-root-horizontal-height);
2319
+ height: var(--amplify-components-sliderfield-thumb-height);
2309
2320
  }
2310
2321
  .amplify-sliderfield__root[data-orientation=vertical] {
2311
2322
  flex-direction: column;
2312
- width: var(--amplify-components-sliderfield-root-horizontal-width);
2323
+ width: var(--amplify-components-sliderfield-thumb-width);
2324
+ }
2325
+ [data-size=large] .amplify-sliderfield__root[data-orientation=horizontal] {
2326
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2327
+ }
2328
+ [data-size=large] .amplify-sliderfield__root[data-orientation=vertical] {
2329
+ width: var(--amplify-components-sliderfield-large-thumb-height);
2330
+ }
2331
+ [data-size=small] .amplify-sliderfield__root[data-orientation=horizontal] {
2332
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2333
+ }
2334
+ [data-size=small] .amplify-sliderfield__root[data-orientation=vertical] {
2335
+ width: var(--amplify-components-sliderfield-small-thumb-height);
2313
2336
  }
2314
2337
 
2315
2338
  .amplify-sliderfield__track {
@@ -2319,19 +2342,34 @@ html[dir=rtl] .amplify-field-group__inner-start {
2319
2342
  background-color: var(--amplify-components-sliderfield-track-background-color);
2320
2343
  }
2321
2344
  .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);
2345
+ height: var(--amplify-components-sliderfield-track-height);
2346
+ min-width: var(--amplify-components-sliderfield-track-min-width);
2324
2347
  }
2325
2348
  .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);
2349
+ width: var(--amplify-components-sliderfield-track-height);
2350
+ min-height: var(--amplify-components-sliderfield-track-min-width);
2351
+ }
2352
+ [data-size=large] .amplify-sliderfield__track[data-orientation=vertical] {
2353
+ width: var(--amplify-components-sliderfield-large-track-height);
2354
+ }
2355
+ [data-size=large] .amplify-sliderfield__track[data-orientation=horizontal] {
2356
+ height: var(--amplify-components-sliderfield-large-track-height);
2357
+ }
2358
+ [data-size=small] .amplify-sliderfield__track[data-orientation=vertical] {
2359
+ width: var(--amplify-components-sliderfield-small-track-height);
2360
+ }
2361
+ [data-size=small] .amplify-sliderfield__track[data-orientation=horizontal] {
2362
+ height: var(--amplify-components-sliderfield-small-track-height);
2328
2363
  }
2329
2364
 
2330
2365
  .amplify-sliderfield__range {
2331
2366
  position: absolute;
2332
- border-radius: 9999px;
2367
+ border-radius: var(--amplify-components-sliderfield-range-border-radius);
2333
2368
  background-color: var(--amplify-components-sliderfield-range-background-color);
2334
2369
  }
2370
+ .amplify-sliderfield__range[data-disabled] {
2371
+ background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
2372
+ }
2335
2373
  .amplify-sliderfield__range[data-orientation=horizontal] {
2336
2374
  height: 100%;
2337
2375
  }
@@ -2346,13 +2384,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
2346
2384
  background-color: var(--amplify-components-sliderfield-thumb-background-color);
2347
2385
  box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
2348
2386
  border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
2387
+ border-width: var(--amplify-components-sliderfield-thumb-border-width);
2388
+ border-color: var(--amplify-components-sliderfield-thumb-border-color);
2389
+ border-style: var(--amplify-components-sliderfield-thumb-border-style);
2349
2390
  }
2350
2391
  .amplify-sliderfield__thumb:hover {
2351
2392
  background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
2393
+ border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
2352
2394
  }
2353
2395
  .amplify-sliderfield__thumb:focus {
2354
2396
  box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
2355
2397
  }
2398
+ .amplify-sliderfield__thumb[data-disabled] {
2399
+ background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
2400
+ border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
2401
+ box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
2402
+ }
2403
+ [data-size=large] .amplify-sliderfield__thumb {
2404
+ width: var(--amplify-components-sliderfield-large-thumb-width);
2405
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2406
+ }
2407
+ [data-size=small] .amplify-sliderfield__thumb {
2408
+ width: var(--amplify-components-sliderfield-small-thumb-width);
2409
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2410
+ }
2356
2411
 
2357
2412
  .amplify-stepperfield {
2358
2413
  flex-direction: var(--amplify-components-stepperfield-flex-direction);
@@ -2362,15 +2417,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
2362
2417
  -webkit-border-end: none;
2363
2418
  border-inline-end: none;
2364
2419
  }
2420
+ [data-variation=quiet] .amplify-stepperfield__button--decrease {
2421
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2422
+ border-radius: 0;
2423
+ }
2365
2424
 
2366
2425
  .amplify-stepperfield__button--increase[data-invalid=true] {
2367
2426
  -webkit-border-start: none;
2368
2427
  border-inline-start: none;
2369
2428
  }
2429
+ [data-variation=quiet] .amplify-stepperfield__button--increase {
2430
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2431
+ border-radius: 0;
2432
+ }
2370
2433
 
2371
2434
  .amplify-stepperfield__input {
2372
2435
  -moz-appearance: textfield;
2373
- border-color: var(--amplify-components-stepperfield-input-border-color);
2374
2436
  text-align: var(--amplify-components-stepperfield-input-text-align);
2375
2437
  }
2376
2438
  .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
@@ -2420,10 +2482,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
2420
2482
  width: var(--amplify-components-switchfield-track-width);
2421
2483
  height: var(--amplify-components-switchfield-track-height);
2422
2484
  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
2423
- background: var(--amplify-components-switchfield-track-background);
2485
+ background-color: var(--amplify-components-switchfield-track-background-color);
2424
2486
  }
2425
2487
  .amplify-switch-track[data-checked=true] {
2426
- background: var(--amplify-components-switchfield-track-checked-background);
2488
+ background-color: var(--amplify-components-switchfield-track-checked-background-color);
2427
2489
  }
2428
2490
  .amplify-switch-track[data-disabled=true] {
2429
2491
  opacity: var(--amplify-components-switchfield-disabled-opacity);
@@ -2434,7 +2496,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
2434
2496
  }
2435
2497
 
2436
2498
  .amplify-switch-thumb {
2437
- background: var(--amplify-components-switchfield-thumb-background);
2499
+ background-color: var(--amplify-components-switchfield-thumb-background-color);
2438
2500
  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
2439
2501
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
2440
2502
  width: var(--amplify-components-switchfield-thumb-width);
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 Wed, 24 Nov 2021 22:44:54 GMT
4
4
  */
5
5
 
6
6
  :root, [data-amplify-theme] {
@@ -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%);
@@ -327,40 +327,50 @@
327
327
  --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
328
328
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
329
329
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
330
- --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-600);
330
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
331
331
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
332
332
  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
333
333
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
334
334
  --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
335
335
  --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
336
336
  --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);
337
+ --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
338
+ --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
339
339
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
340
340
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
341
341
  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
342
342
  --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
343
- --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-30);
343
+ --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
344
344
  --amplify-components-stepperfield-input-text-align: center;
345
- --amplify-components-stepperfield-input-border-color: var(--amplify-colors-brand-primary-20);
346
345
  --amplify-components-stepperfield-flex-direction: column;
346
+ --amplify-components-sliderfield-large-thumb-height: 1.5rem;
347
+ --amplify-components-sliderfield-large-thumb-width: 1.5rem;
348
+ --amplify-components-sliderfield-large-track-height: 0.625rem;
349
+ --amplify-components-sliderfield-small-thumb-height: 1rem;
350
+ --amplify-components-sliderfield-small-thumb-width: 1rem;
351
+ --amplify-components-sliderfield-small-track-height: 0.25rem;
347
352
  --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);
353
+ --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
354
+ --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
355
+ --amplify-components-sliderfield-thumb-disabled-box-shadow: none;
356
+ --amplify-components-sliderfield-thumb-disabled-border-color: transparent;
357
+ --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
358
+ --amplify-components-sliderfield-thumb-border-style: solid;
359
+ --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
360
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
349
361
  --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);
362
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
363
+ --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
352
364
  --amplify-components-sliderfield-thumb-height: 1.25rem;
353
365
  --amplify-components-sliderfield-thumb-width: 1.25rem;
366
+ --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
367
+ --amplify-components-sliderfield-range-border-radius: 9999px;
354
368
  --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;
369
+ --amplify-components-sliderfield-track-min-width: 10rem;
370
+ --amplify-components-sliderfield-track-height: 0.375rem;
359
371
  --amplify-components-sliderfield-track-border-radius: 9999px;
360
372
  --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);
373
+ --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
364
374
  --amplify-components-selectfield-flex-direction: column;
365
375
  --amplify-components-select-large-min-width: 7.5rem;
366
376
  --amplify-components-select-small-min-width: 5.5rem;
@@ -382,25 +392,19 @@
382
392
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
383
393
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
384
394
  --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);
395
+ --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
387
396
  --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
388
397
  --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
389
398
  --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
390
399
  --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
391
400
  --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
392
401
  --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
393
- --amplify-components-radio-button-checked-color: var(--amplify-colors-red-60);
402
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
394
403
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
395
404
  --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: "";
405
+ --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
406
+ --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small);
407
+ --amplify-components-radio-button-padding: var(--amplify-border-widths-medium);
404
408
  --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
405
409
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
406
410
  --amplify-components-radio-button-outline-style: solid;
@@ -802,4 +806,6 @@
802
806
  --amplify-components-alert-padding-block: var(--amplify-space-small);
803
807
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
804
808
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
809
+ --amplify-components-alert-justify-content: space-between;
810
+ --amplify-components-alert-align-items: center;
805
811
  }
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.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "exports": {