@aws-amplify/ui 6.0.0 → 6.0.1

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 (5) hide show
  1. package/dist/styles/liveness.css +56 -7
  2. package/dist/styles/liveness.layer.css +56 -7
  3. package/dist/styles.css +56 -7
  4. package/dist/styles.layer.css +56 -7
  5. package/package.json +1 -1
package/dist/styles/liveness.css CHANGED
@@ -6,7 +6,8 @@
6
6
  }
7
7
 
8
8
  .amplify-liveness-cancel-button {
9
- background-color: var(--amplify-colors-background-primary);
9
+ background-color: #fff;
10
+ color: hsl(190, 95%, 30%);
10
11
  }
11
12
 
12
13
  .amplify-liveness-fade-out {
@@ -46,6 +47,7 @@
46
47
  left: 0;
47
48
  width: 100%;
48
49
  height: 100%;
50
+ transform: scaleX(-1);
49
51
  }
50
52
 
51
53
  .amplify-liveness-freshness-canvas {
@@ -95,12 +97,16 @@
95
97
  .amplify-liveness-recording-icon {
96
98
  flex-direction: column;
97
99
  align-items: center;
98
- background-color: var(--amplify-colors-background-primary);
100
+ background-color: #fff;
99
101
  padding: var(--amplify-space-xxs);
100
102
  gap: var(--amplify-space-xxs);
101
103
  border-radius: var(--amplify-radii-small);
102
104
  }
103
105
 
106
+ .amplify-liveness-recording-icon .amplify-text {
107
+ color: var(--amplify-colors-black);
108
+ }
109
+
104
110
  .amplify-liveness-instruction-overlay {
105
111
  z-index: 1;
106
112
  }
@@ -121,7 +127,7 @@
121
127
  .amplify-liveness-toast {
122
128
  background-color: var(--amplify-colors-background-primary);
123
129
  padding: var(--amplify-space-small);
124
- border-radius: var(--amplify-radii-medium);
130
+ max-width: 100%;
125
131
  }
126
132
 
127
133
  .amplify-liveness-toast__message {
@@ -130,8 +136,13 @@
130
136
  flex-direction: column;
131
137
  }
132
138
 
139
+ .amplify-liveness-toast--medium {
140
+ border-radius: var(--amplify-radii-medium);
141
+ }
142
+
133
143
  .amplify-liveness-toast--large {
134
- font-size: var(--amplify-font-sizes-xl);
144
+ font-size: var(--amplify-font-sizes-xxl);
145
+ padding: 0 var(--amplify-space-xs);
135
146
  }
136
147
 
137
148
  .amplify-liveness-toast--primary {
@@ -295,9 +306,10 @@
295
306
  }
296
307
 
297
308
  .amplify-liveness-start-screen-warning {
298
- color: var(--amplify-colors-orange-80);
299
- background-color: var(--amplify-colors-orange-20);
309
+ color: var(--amplify-colors-blue-90);
310
+ background-color: var(--amplify-colors-blue-20);
300
311
  align-items: center;
312
+ z-index: 3;
301
313
  }
302
314
 
303
315
  .amplify-liveness-start-screen-instructions__heading {
@@ -316,7 +328,7 @@
316
328
  top: 0;
317
329
  width: 100%;
318
330
  height: 100%;
319
- padding: var(--amplify-space-xl);
331
+ padding: var(--amplify-space-large);
320
332
  }
321
333
 
322
334
  .amplify-liveness-error-modal {
@@ -371,4 +383,41 @@
371
383
  width: 240px;
372
384
  border: 1px solid var(--amplify-colors-border-secondary);
373
385
  border-radius: 2px;
386
+ z-index: 4;
387
+ }
388
+
389
+ .amplify-liveness-start-screen-camera-select {
390
+ flex-direction: column;
391
+ position: absolute;
392
+ left: 0;
393
+ top: 0;
394
+ width: 100%;
395
+ height: 100%;
396
+ padding: var(--amplify-space-xl);
397
+ align-items: center;
398
+ justify-content: flex-end;
399
+ display: flex;
400
+ z-index: 2;
401
+ }
402
+
403
+ .amplify-liveness-start-screen-camera-select__container {
404
+ display: flex;
405
+ justify-content: space-between;
406
+ align-items: inherit;
407
+ gap: var(--amplify-space-xs);
408
+ }
409
+
410
+ .amplify-liveness-start-screen-camera-select__label,
411
+ .amplify-liveness-start-screen-camera-select .amplify-select,
412
+ .amplify-liveness-start-screen-camera-select .amplify-select__wrapper,
413
+ .amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper {
414
+ background-color: var(--amplify-colors-background-primary);
415
+ color: var(--amplify-colors-font-primary);
416
+ }
417
+
418
+ .amplify-liveness-start-screen-camera-waiting {
419
+ flex-direction: column;
420
+ align-items: center;
421
+ justify-content: center;
422
+ height: 480px;
374
423
  }
package/dist/styles/liveness.layer.css CHANGED
@@ -7,7 +7,8 @@
7
7
  }
8
8
 
9
9
  .amplify-liveness-cancel-button {
10
- background-color: var(--amplify-colors-background-primary);
10
+ background-color: #fff;
11
+ color: hsl(190, 95%, 30%);
11
12
  }
12
13
 
13
14
  .amplify-liveness-fade-out {
@@ -47,6 +48,7 @@
47
48
  left: 0;
48
49
  width: 100%;
49
50
  height: 100%;
51
+ transform: scaleX(-1);
50
52
  }
51
53
 
52
54
  .amplify-liveness-freshness-canvas {
@@ -96,12 +98,16 @@
96
98
  .amplify-liveness-recording-icon {
97
99
  flex-direction: column;
98
100
  align-items: center;
99
- background-color: var(--amplify-colors-background-primary);
101
+ background-color: #fff;
100
102
  padding: var(--amplify-space-xxs);
101
103
  gap: var(--amplify-space-xxs);
102
104
  border-radius: var(--amplify-radii-small);
103
105
  }
104
106
 
107
+ .amplify-liveness-recording-icon .amplify-text {
108
+ color: var(--amplify-colors-black);
109
+ }
110
+
105
111
  .amplify-liveness-instruction-overlay {
106
112
  z-index: 1;
107
113
  }
@@ -122,7 +128,7 @@
122
128
  .amplify-liveness-toast {
123
129
  background-color: var(--amplify-colors-background-primary);
124
130
  padding: var(--amplify-space-small);
125
- border-radius: var(--amplify-radii-medium);
131
+ max-width: 100%;
126
132
  }
127
133
 
128
134
  .amplify-liveness-toast__message {
@@ -131,8 +137,13 @@
131
137
  flex-direction: column;
132
138
  }
133
139
 
140
+ .amplify-liveness-toast--medium {
141
+ border-radius: var(--amplify-radii-medium);
142
+ }
143
+
134
144
  .amplify-liveness-toast--large {
135
- font-size: var(--amplify-font-sizes-xl);
145
+ font-size: var(--amplify-font-sizes-xxl);
146
+ padding: 0 var(--amplify-space-xs);
136
147
  }
137
148
 
138
149
  .amplify-liveness-toast--primary {
@@ -296,9 +307,10 @@
296
307
  }
297
308
 
298
309
  .amplify-liveness-start-screen-warning {
299
- color: var(--amplify-colors-orange-80);
300
- background-color: var(--amplify-colors-orange-20);
310
+ color: var(--amplify-colors-blue-90);
311
+ background-color: var(--amplify-colors-blue-20);
301
312
  align-items: center;
313
+ z-index: 3;
302
314
  }
303
315
 
304
316
  .amplify-liveness-start-screen-instructions__heading {
@@ -317,7 +329,7 @@
317
329
  top: 0;
318
330
  width: 100%;
319
331
  height: 100%;
320
- padding: var(--amplify-space-xl);
332
+ padding: var(--amplify-space-large);
321
333
  }
322
334
 
323
335
  .amplify-liveness-error-modal {
@@ -372,5 +384,42 @@
372
384
  width: 240px;
373
385
  border: 1px solid var(--amplify-colors-border-secondary);
374
386
  border-radius: 2px;
387
+ z-index: 4;
388
+ }
389
+
390
+ .amplify-liveness-start-screen-camera-select {
391
+ flex-direction: column;
392
+ position: absolute;
393
+ left: 0;
394
+ top: 0;
395
+ width: 100%;
396
+ height: 100%;
397
+ padding: var(--amplify-space-xl);
398
+ align-items: center;
399
+ justify-content: flex-end;
400
+ display: flex;
401
+ z-index: 2;
402
+ }
403
+
404
+ .amplify-liveness-start-screen-camera-select__container {
405
+ display: flex;
406
+ justify-content: space-between;
407
+ align-items: inherit;
408
+ gap: var(--amplify-space-xs);
409
+ }
410
+
411
+ .amplify-liveness-start-screen-camera-select__label,
412
+ .amplify-liveness-start-screen-camera-select .amplify-select,
413
+ .amplify-liveness-start-screen-camera-select .amplify-select__wrapper,
414
+ .amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper {
415
+ background-color: var(--amplify-colors-background-primary);
416
+ color: var(--amplify-colors-font-primary);
417
+ }
418
+
419
+ .amplify-liveness-start-screen-camera-waiting {
420
+ flex-direction: column;
421
+ align-items: center;
422
+ justify-content: center;
423
+ height: 480px;
375
424
  }
376
425
  }
package/dist/styles.css CHANGED
@@ -3905,7 +3905,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3905
3905
  }
3906
3906
 
3907
3907
  .amplify-liveness-cancel-button {
3908
- background-color: var(--amplify-colors-background-primary);
3908
+ background-color: #fff;
3909
+ color: hsl(190, 95%, 30%);
3909
3910
  }
3910
3911
 
3911
3912
  .amplify-liveness-fade-out {
@@ -3945,6 +3946,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3945
3946
  left: 0;
3946
3947
  width: 100%;
3947
3948
  height: 100%;
3949
+ transform: scaleX(-1);
3948
3950
  }
3949
3951
 
3950
3952
  .amplify-liveness-freshness-canvas {
@@ -3994,12 +3996,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
3994
3996
  .amplify-liveness-recording-icon {
3995
3997
  flex-direction: column;
3996
3998
  align-items: center;
3997
- background-color: var(--amplify-colors-background-primary);
3999
+ background-color: #fff;
3998
4000
  padding: var(--amplify-space-xxs);
3999
4001
  gap: var(--amplify-space-xxs);
4000
4002
  border-radius: var(--amplify-radii-small);
4001
4003
  }
4002
4004
 
4005
+ .amplify-liveness-recording-icon .amplify-text {
4006
+ color: var(--amplify-colors-black);
4007
+ }
4008
+
4003
4009
  .amplify-liveness-instruction-overlay {
4004
4010
  z-index: 1;
4005
4011
  }
@@ -4020,7 +4026,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4020
4026
  .amplify-liveness-toast {
4021
4027
  background-color: var(--amplify-colors-background-primary);
4022
4028
  padding: var(--amplify-space-small);
4023
- border-radius: var(--amplify-radii-medium);
4029
+ max-width: 100%;
4024
4030
  }
4025
4031
 
4026
4032
  .amplify-liveness-toast__message {
@@ -4029,8 +4035,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
4029
4035
  flex-direction: column;
4030
4036
  }
4031
4037
 
4038
+ .amplify-liveness-toast--medium {
4039
+ border-radius: var(--amplify-radii-medium);
4040
+ }
4041
+
4032
4042
  .amplify-liveness-toast--large {
4033
- font-size: var(--amplify-font-sizes-xl);
4043
+ font-size: var(--amplify-font-sizes-xxl);
4044
+ padding: 0 var(--amplify-space-xs);
4034
4045
  }
4035
4046
 
4036
4047
  .amplify-liveness-toast--primary {
@@ -4194,9 +4205,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4194
4205
  }
4195
4206
 
4196
4207
  .amplify-liveness-start-screen-warning {
4197
- color: var(--amplify-colors-orange-80);
4198
- background-color: var(--amplify-colors-orange-20);
4208
+ color: var(--amplify-colors-blue-90);
4209
+ background-color: var(--amplify-colors-blue-20);
4199
4210
  align-items: center;
4211
+ z-index: 3;
4200
4212
  }
4201
4213
 
4202
4214
  .amplify-liveness-start-screen-instructions__heading {
@@ -4215,7 +4227,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4215
4227
  top: 0;
4216
4228
  width: 100%;
4217
4229
  height: 100%;
4218
- padding: var(--amplify-space-xl);
4230
+ padding: var(--amplify-space-large);
4219
4231
  }
4220
4232
 
4221
4233
  .amplify-liveness-error-modal {
@@ -4270,6 +4282,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
4270
4282
  width: 240px;
4271
4283
  border: 1px solid var(--amplify-colors-border-secondary);
4272
4284
  border-radius: 2px;
4285
+ z-index: 4;
4286
+ }
4287
+
4288
+ .amplify-liveness-start-screen-camera-select {
4289
+ flex-direction: column;
4290
+ position: absolute;
4291
+ left: 0;
4292
+ top: 0;
4293
+ width: 100%;
4294
+ height: 100%;
4295
+ padding: var(--amplify-space-xl);
4296
+ align-items: center;
4297
+ justify-content: flex-end;
4298
+ display: flex;
4299
+ z-index: 2;
4300
+ }
4301
+
4302
+ .amplify-liveness-start-screen-camera-select__container {
4303
+ display: flex;
4304
+ justify-content: space-between;
4305
+ align-items: inherit;
4306
+ gap: var(--amplify-space-xs);
4307
+ }
4308
+
4309
+ .amplify-liveness-start-screen-camera-select__label,
4310
+ .amplify-liveness-start-screen-camera-select .amplify-select,
4311
+ .amplify-liveness-start-screen-camera-select .amplify-select__wrapper,
4312
+ .amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper {
4313
+ background-color: var(--amplify-colors-background-primary);
4314
+ color: var(--amplify-colors-font-primary);
4315
+ }
4316
+
4317
+ .amplify-liveness-start-screen-camera-waiting {
4318
+ flex-direction: column;
4319
+ align-items: center;
4320
+ justify-content: center;
4321
+ height: 480px;
4273
4322
  }
4274
4323
 
4275
4324
  .amplify-menu__wrapper {
package/dist/styles.layer.css CHANGED
@@ -3906,7 +3906,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
3906
3906
  }
3907
3907
 
3908
3908
  .amplify-liveness-cancel-button {
3909
- background-color: var(--amplify-colors-background-primary);
3909
+ background-color: #fff;
3910
+ color: hsl(190, 95%, 30%);
3910
3911
  }
3911
3912
 
3912
3913
  .amplify-liveness-fade-out {
@@ -3946,6 +3947,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3946
3947
  left: 0;
3947
3948
  width: 100%;
3948
3949
  height: 100%;
3950
+ transform: scaleX(-1);
3949
3951
  }
3950
3952
 
3951
3953
  .amplify-liveness-freshness-canvas {
@@ -3995,12 +3997,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
3995
3997
  .amplify-liveness-recording-icon {
3996
3998
  flex-direction: column;
3997
3999
  align-items: center;
3998
- background-color: var(--amplify-colors-background-primary);
4000
+ background-color: #fff;
3999
4001
  padding: var(--amplify-space-xxs);
4000
4002
  gap: var(--amplify-space-xxs);
4001
4003
  border-radius: var(--amplify-radii-small);
4002
4004
  }
4003
4005
 
4006
+ .amplify-liveness-recording-icon .amplify-text {
4007
+ color: var(--amplify-colors-black);
4008
+ }
4009
+
4004
4010
  .amplify-liveness-instruction-overlay {
4005
4011
  z-index: 1;
4006
4012
  }
@@ -4021,7 +4027,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4021
4027
  .amplify-liveness-toast {
4022
4028
  background-color: var(--amplify-colors-background-primary);
4023
4029
  padding: var(--amplify-space-small);
4024
- border-radius: var(--amplify-radii-medium);
4030
+ max-width: 100%;
4025
4031
  }
4026
4032
 
4027
4033
  .amplify-liveness-toast__message {
@@ -4030,8 +4036,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
4030
4036
  flex-direction: column;
4031
4037
  }
4032
4038
 
4039
+ .amplify-liveness-toast--medium {
4040
+ border-radius: var(--amplify-radii-medium);
4041
+ }
4042
+
4033
4043
  .amplify-liveness-toast--large {
4034
- font-size: var(--amplify-font-sizes-xl);
4044
+ font-size: var(--amplify-font-sizes-xxl);
4045
+ padding: 0 var(--amplify-space-xs);
4035
4046
  }
4036
4047
 
4037
4048
  .amplify-liveness-toast--primary {
@@ -4195,9 +4206,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4195
4206
  }
4196
4207
 
4197
4208
  .amplify-liveness-start-screen-warning {
4198
- color: var(--amplify-colors-orange-80);
4199
- background-color: var(--amplify-colors-orange-20);
4209
+ color: var(--amplify-colors-blue-90);
4210
+ background-color: var(--amplify-colors-blue-20);
4200
4211
  align-items: center;
4212
+ z-index: 3;
4201
4213
  }
4202
4214
 
4203
4215
  .amplify-liveness-start-screen-instructions__heading {
@@ -4216,7 +4228,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4216
4228
  top: 0;
4217
4229
  width: 100%;
4218
4230
  height: 100%;
4219
- padding: var(--amplify-space-xl);
4231
+ padding: var(--amplify-space-large);
4220
4232
  }
4221
4233
 
4222
4234
  .amplify-liveness-error-modal {
@@ -4271,6 +4283,43 @@ html[dir=rtl] .amplify-field-group__inner-start {
4271
4283
  width: 240px;
4272
4284
  border: 1px solid var(--amplify-colors-border-secondary);
4273
4285
  border-radius: 2px;
4286
+ z-index: 4;
4287
+ }
4288
+
4289
+ .amplify-liveness-start-screen-camera-select {
4290
+ flex-direction: column;
4291
+ position: absolute;
4292
+ left: 0;
4293
+ top: 0;
4294
+ width: 100%;
4295
+ height: 100%;
4296
+ padding: var(--amplify-space-xl);
4297
+ align-items: center;
4298
+ justify-content: flex-end;
4299
+ display: flex;
4300
+ z-index: 2;
4301
+ }
4302
+
4303
+ .amplify-liveness-start-screen-camera-select__container {
4304
+ display: flex;
4305
+ justify-content: space-between;
4306
+ align-items: inherit;
4307
+ gap: var(--amplify-space-xs);
4308
+ }
4309
+
4310
+ .amplify-liveness-start-screen-camera-select__label,
4311
+ .amplify-liveness-start-screen-camera-select .amplify-select,
4312
+ .amplify-liveness-start-screen-camera-select .amplify-select__wrapper,
4313
+ .amplify-liveness-start-screen-camera-select .amplify-select__icon-wrapper {
4314
+ background-color: var(--amplify-colors-background-primary);
4315
+ color: var(--amplify-colors-font-primary);
4316
+ }
4317
+
4318
+ .amplify-liveness-start-screen-camera-waiting {
4319
+ flex-direction: column;
4320
+ align-items: center;
4321
+ justify-content: center;
4322
+ height: 480px;
4274
4323
  }
4275
4324
 
4276
4325
  .amplify-menu__wrapper {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.0.0",
3
+ "version": "6.0.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {