@aws-amplify/ui 6.0.6 → 6.0.8

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 (19) hide show
  1. package/dist/esm/helpers/authenticator/getRoute.mjs +4 -3
  2. package/dist/esm/machines/authenticator/actors/signUp.mjs +1 -0
  3. package/dist/esm/theme/tokens/components/button.mjs +2 -2
  4. package/dist/esm/theme/tokens/components/passwordField.mjs +45 -0
  5. package/dist/index.js +52 -5
  6. package/dist/styles/base.css +15 -2
  7. package/dist/styles/base.layer.css +15 -2
  8. package/dist/styles/liveness.css +13 -1
  9. package/dist/styles/liveness.layer.css +13 -1
  10. package/dist/styles/passwordField.css +39 -5
  11. package/dist/styles/passwordField.layer.css +39 -5
  12. package/dist/styles/table.css +3 -3
  13. package/dist/styles/table.layer.css +3 -3
  14. package/dist/styles.css +70 -11
  15. package/dist/styles.layer.css +70 -11
  16. package/dist/theme.css +15 -2
  17. package/dist/types/theme/tokens/components/passwordField.d.ts +7 -0
  18. package/dist/types/types/displayText.d.ts +13 -6
  19. package/package.json +1 -1
package/dist/esm/helpers/authenticator/getRoute.mjs CHANGED
@@ -9,7 +9,7 @@ const getRoute = (state, actorState) => {
9
9
  case state.matches('authenticated'):
10
10
  return 'authenticated';
11
11
  case actorState?.matches('confirmSignUp'):
12
- case actorState?.matches('confirmSignUp.resendConfirmationCode'):
12
+ case actorState?.matches('resendSignUpCode'):
13
13
  return 'confirmSignUp';
14
14
  case actorState?.matches('confirmSignIn'):
15
15
  return 'confirmSignIn';
@@ -17,8 +17,10 @@ const getRoute = (state, actorState) => {
17
17
  case actorState?.matches('setupTotp.submit'):
18
18
  return 'setupTotp';
19
19
  case actorState?.matches('signIn'):
20
+ case actorState?.matches('federatedSignIn'):
20
21
  return 'signIn';
21
22
  case actorState?.matches('signUp'):
23
+ case actorState?.matches('autoSignIn'):
22
24
  return 'signUp';
23
25
  case actorState?.matches('forceChangePassword'):
24
26
  return 'forceNewPassword';
@@ -31,7 +33,7 @@ const getRoute = (state, actorState) => {
31
33
  case actorState?.matches('confirmVerifyUserAttribute'):
32
34
  return 'confirmVerifyUser';
33
35
  case state.matches('getCurrentUser'):
34
- case actorState.matches('fetchUserAttributes'):
36
+ case actorState?.matches('fetchUserAttributes'):
35
37
  /**
36
38
  * This route is needed for autoSignIn to capture both the
37
39
  * autoSignIn.pending and the resolved states when the
@@ -39,7 +41,6 @@ const getRoute = (state, actorState) => {
39
41
  */
40
42
  return 'transition';
41
43
  default:
42
- console.debug('Cannot infer `route` from Authenticator state:', state.value);
43
44
  return null;
44
45
  }
45
46
  };
package/dist/esm/machines/authenticator/actors/signUp.mjs CHANGED
@@ -244,6 +244,7 @@ function signUpActor({ services }) {
244
244
  remoteError: context.remoteError,
245
245
  step: context.step,
246
246
  totpSecretCode: context.totpSecretCode,
247
+ username: context.username,
247
248
  unverifiedUserAttributes: context.unverifiedUserAttributes,
248
249
  }),
249
250
  },
package/dist/esm/theme/tokens/components/button.mjs CHANGED
@@ -122,11 +122,11 @@ const button = {
122
122
  },
123
123
  },
124
124
  error: {
125
- borderColor: { value: '{colors.red.60.value}' },
125
+ borderColor: { value: '{colors.red.80.value}' },
126
126
  backgroundColor: { value: 'transparent' },
127
127
  color: { value: '{colors.red.100}' },
128
128
  _hover: {
129
- borderColor: { value: '{colors.red.60.value}' },
129
+ borderColor: { value: '{colors.red.80.value}' },
130
130
  backgroundColor: { value: '{colors.red.10.value}' },
131
131
  color: { value: '{colors.red.100.value}' },
132
132
  },
package/dist/esm/theme/tokens/components/passwordField.mjs CHANGED
@@ -18,6 +18,51 @@ const passwordfield = {
18
18
  },
19
19
  color: { value: '{components.button._disabled.color.value}' },
20
20
  },
21
+ _error: {
22
+ color: { value: '{components.button.outlined.error.color.value}' },
23
+ backgroundColor: {
24
+ value: '{components.button.outlined.error.backgroundColor.value}',
25
+ },
26
+ borderColor: {
27
+ value: '{components.button.outlined.error.borderColor.value}',
28
+ },
29
+ _active: {
30
+ borderColor: {
31
+ value: '{components.button.outlined.error._active.borderColor.value}',
32
+ },
33
+ backgroundColor: {
34
+ value: '{components.button.outlined.error._active.backgroundColor.value}',
35
+ },
36
+ color: {
37
+ value: '{components.button.outlined.error._active.color.value}',
38
+ },
39
+ },
40
+ _focus: {
41
+ borderColor: {
42
+ value: '{components.button.outlined.error._focus.borderColor.value}',
43
+ },
44
+ backgroundColor: {
45
+ value: '{components.button.outlined.error._focus.backgroundColor.value}',
46
+ },
47
+ color: {
48
+ value: '{components.button.outlined.error._focus.color.value}',
49
+ },
50
+ boxShadow: {
51
+ value: '{components.button.outlined.error._focus.boxShadow.value}',
52
+ },
53
+ },
54
+ _hover: {
55
+ borderColor: {
56
+ value: '{components.button.outlined.error._hover.borderColor.value}',
57
+ },
58
+ backgroundColor: {
59
+ value: '{components.button.outlined.error._hover.backgroundColor.value}',
60
+ },
61
+ color: {
62
+ value: '{components.button.outlined.error._hover.color.value}',
63
+ },
64
+ },
65
+ },
21
66
  _focus: {
22
67
  backgroundColor: {
23
68
  value: '{components.button._focus.backgroundColor.value}',
package/dist/index.js CHANGED
@@ -2355,7 +2355,7 @@ const getRoute = (state, actorState) => {
2355
2355
  case state.matches('authenticated'):
2356
2356
  return 'authenticated';
2357
2357
  case actorState?.matches('confirmSignUp'):
2358
- case actorState?.matches('confirmSignUp.resendConfirmationCode'):
2358
+ case actorState?.matches('resendSignUpCode'):
2359
2359
  return 'confirmSignUp';
2360
2360
  case actorState?.matches('confirmSignIn'):
2361
2361
  return 'confirmSignIn';
@@ -2363,8 +2363,10 @@ const getRoute = (state, actorState) => {
2363
2363
  case actorState?.matches('setupTotp.submit'):
2364
2364
  return 'setupTotp';
2365
2365
  case actorState?.matches('signIn'):
2366
+ case actorState?.matches('federatedSignIn'):
2366
2367
  return 'signIn';
2367
2368
  case actorState?.matches('signUp'):
2369
+ case actorState?.matches('autoSignIn'):
2368
2370
  return 'signUp';
2369
2371
  case actorState?.matches('forceChangePassword'):
2370
2372
  return 'forceNewPassword';
@@ -2377,7 +2379,7 @@ const getRoute = (state, actorState) => {
2377
2379
  case actorState?.matches('confirmVerifyUserAttribute'):
2378
2380
  return 'confirmVerifyUser';
2379
2381
  case state.matches('getCurrentUser'):
2380
- case actorState.matches('fetchUserAttributes'):
2382
+ case actorState?.matches('fetchUserAttributes'):
2381
2383
  /**
2382
2384
  * This route is needed for autoSignIn to capture both the
2383
2385
  * autoSignIn.pending and the resolved states when the
@@ -2385,7 +2387,6 @@ const getRoute = (state, actorState) => {
2385
2387
  */
2386
2388
  return 'transition';
2387
2389
  default:
2388
- console.debug('Cannot infer `route` from Authenticator state:', state.value);
2389
2390
  return null;
2390
2391
  }
2391
2392
  };
@@ -4441,6 +4442,7 @@ function signUpActor({ services }) {
4441
4442
  remoteError: context.remoteError,
4442
4443
  step: context.step,
4443
4444
  totpSecretCode: context.totpSecretCode,
4445
+ username: context.username,
4444
4446
  unverifiedUserAttributes: context.unverifiedUserAttributes,
4445
4447
  }),
4446
4448
  },
@@ -5461,11 +5463,11 @@ const button = {
5461
5463
  },
5462
5464
  },
5463
5465
  error: {
5464
- borderColor: { value: '{colors.red.60.value}' },
5466
+ borderColor: { value: '{colors.red.80.value}' },
5465
5467
  backgroundColor: { value: 'transparent' },
5466
5468
  color: { value: '{colors.red.100}' },
5467
5469
  _hover: {
5468
- borderColor: { value: '{colors.red.60.value}' },
5470
+ borderColor: { value: '{colors.red.80.value}' },
5469
5471
  backgroundColor: { value: '{colors.red.10.value}' },
5470
5472
  color: { value: '{colors.red.100.value}' },
5471
5473
  },
@@ -6824,6 +6826,51 @@ const passwordfield = {
6824
6826
  },
6825
6827
  color: { value: '{components.button._disabled.color.value}' },
6826
6828
  },
6829
+ _error: {
6830
+ color: { value: '{components.button.outlined.error.color.value}' },
6831
+ backgroundColor: {
6832
+ value: '{components.button.outlined.error.backgroundColor.value}',
6833
+ },
6834
+ borderColor: {
6835
+ value: '{components.button.outlined.error.borderColor.value}',
6836
+ },
6837
+ _active: {
6838
+ borderColor: {
6839
+ value: '{components.button.outlined.error._active.borderColor.value}',
6840
+ },
6841
+ backgroundColor: {
6842
+ value: '{components.button.outlined.error._active.backgroundColor.value}',
6843
+ },
6844
+ color: {
6845
+ value: '{components.button.outlined.error._active.color.value}',
6846
+ },
6847
+ },
6848
+ _focus: {
6849
+ borderColor: {
6850
+ value: '{components.button.outlined.error._focus.borderColor.value}',
6851
+ },
6852
+ backgroundColor: {
6853
+ value: '{components.button.outlined.error._focus.backgroundColor.value}',
6854
+ },
6855
+ color: {
6856
+ value: '{components.button.outlined.error._focus.color.value}',
6857
+ },
6858
+ boxShadow: {
6859
+ value: '{components.button.outlined.error._focus.boxShadow.value}',
6860
+ },
6861
+ },
6862
+ _hover: {
6863
+ borderColor: {
6864
+ value: '{components.button.outlined.error._hover.borderColor.value}',
6865
+ },
6866
+ backgroundColor: {
6867
+ value: '{components.button.outlined.error._hover.backgroundColor.value}',
6868
+ },
6869
+ color: {
6870
+ value: '{components.button.outlined.error._hover.color.value}',
6871
+ },
6872
+ },
6873
+ },
6827
6874
  _focus: {
6828
6875
  backgroundColor: {
6829
6876
  value: '{components.button._focus.backgroundColor.value}',
package/dist/styles/base.css CHANGED
@@ -197,10 +197,10 @@
197
197
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
198
198
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
199
199
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
200
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
200
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
201
201
  --amplify-components-button-outlined-error-background-color: transparent;
202
202
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
203
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
203
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
204
204
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
205
205
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
206
206
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -851,6 +851,19 @@
851
851
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
852
852
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
853
853
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
854
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
855
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
856
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
857
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
858
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
859
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
860
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
861
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
862
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
863
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
864
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
865
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
866
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
854
867
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
855
868
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
856
869
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
package/dist/styles/base.layer.css CHANGED
@@ -198,10 +198,10 @@
198
198
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
199
199
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
200
200
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
201
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
201
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
202
202
  --amplify-components-button-outlined-error-background-color: transparent;
203
203
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
204
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
204
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
205
205
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
206
206
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
207
207
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -852,6 +852,19 @@
852
852
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
853
853
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
854
854
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
855
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
856
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
857
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
858
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
859
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
860
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
861
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
862
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
863
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
864
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
865
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
866
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
867
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
855
868
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
856
869
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
857
870
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
package/dist/styles/liveness.css CHANGED
@@ -5,6 +5,12 @@
5
5
  right: var(--amplify-space-medium);
6
6
  }
7
7
 
8
+ .liveness-detector .amplify-button--primary:focus {
9
+ box-shadow: unset;
10
+ outline: var(--amplify-components-button-focus-color) solid 2px;
11
+ outline-offset: 2px;
12
+ }
13
+
8
14
  .amplify-liveness-cancel-button {
9
15
  background-color: #fff;
10
16
  color: hsl(190, 95%, 30%);
@@ -39,6 +45,7 @@
39
45
  left: 0;
40
46
  height: 100%;
41
47
  width: 100%;
48
+ z-index: 2;
42
49
  }
43
50
 
44
51
  .amplify-liveness-video {
@@ -108,7 +115,7 @@
108
115
  }
109
116
 
110
117
  .amplify-liveness-instruction-overlay {
111
- z-index: 1;
118
+ z-index: 2;
112
119
  }
113
120
 
114
121
  .amplify-liveness-countdown-container {
@@ -342,6 +349,10 @@
342
349
  font-weight: var(--amplify-font-weights-bold);
343
350
  }
344
351
 
352
+ .amplify-liveness-hint--mobile {
353
+ margin-top: var(--amplify-space-xxxl);
354
+ }
355
+
345
356
  .amplify-liveness-hint__text {
346
357
  align-items: center;
347
358
  gap: var(--amplify-space-xs);
@@ -419,5 +430,6 @@
419
430
  flex-direction: column;
420
431
  align-items: center;
421
432
  justify-content: center;
433
+ text-align: center;
422
434
  height: 480px;
423
435
  }
package/dist/styles/liveness.layer.css CHANGED
@@ -6,6 +6,12 @@
6
6
  right: var(--amplify-space-medium);
7
7
  }
8
8
 
9
+ .liveness-detector .amplify-button--primary:focus {
10
+ box-shadow: unset;
11
+ outline: var(--amplify-components-button-focus-color) solid 2px;
12
+ outline-offset: 2px;
13
+ }
14
+
9
15
  .amplify-liveness-cancel-button {
10
16
  background-color: #fff;
11
17
  color: hsl(190, 95%, 30%);
@@ -40,6 +46,7 @@
40
46
  left: 0;
41
47
  height: 100%;
42
48
  width: 100%;
49
+ z-index: 2;
43
50
  }
44
51
 
45
52
  .amplify-liveness-video {
@@ -109,7 +116,7 @@
109
116
  }
110
117
 
111
118
  .amplify-liveness-instruction-overlay {
112
- z-index: 1;
119
+ z-index: 2;
113
120
  }
114
121
 
115
122
  .amplify-liveness-countdown-container {
@@ -343,6 +350,10 @@
343
350
  font-weight: var(--amplify-font-weights-bold);
344
351
  }
345
352
 
353
+ .amplify-liveness-hint--mobile {
354
+ margin-top: var(--amplify-space-xxxl);
355
+ }
356
+
346
357
  .amplify-liveness-hint__text {
347
358
  align-items: center;
348
359
  gap: var(--amplify-space-xs);
@@ -420,6 +431,7 @@
420
431
  flex-direction: column;
421
432
  align-items: center;
422
433
  justify-content: center;
434
+ text-align: center;
423
435
  height: 480px;
424
436
  }
425
437
  }
package/dist/styles/passwordField.css CHANGED
@@ -41,9 +41,43 @@
41
41
  --amplify-components-button-hover-color: var(
42
42
  --amplify-components-passwordfield-button-hover-color
43
43
  );
44
- }
45
-
46
- .amplify-field__show-password--error {
47
- color: var(--amplify-components-fieldcontrol-error-color);
48
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
44
+ --amplify-components-button-outlined-error-color: var(
45
+ --amplify-components-passwordfield-button-error-color
46
+ );
47
+ --amplify-components-button-outlined-error-border-color: var(
48
+ --amplify-components-passwordfield-button-error-border-color
49
+ );
50
+ --amplify-components-button-outlined-error-background-color: var(
51
+ --amplify-components-passwordfield-button-error-background-color
52
+ );
53
+ --amplify-components-button-outlined-error-active-color: var(
54
+ --amplify-components-passwordfield-button-error-active-color
55
+ );
56
+ --amplify-components-button-outlined-error-active-border-color: var(
57
+ --amplify-components-passwordfield-button-error-active-border-color
58
+ );
59
+ --amplify-components-button-outlined-error-active-background-color: var(
60
+ --amplify-components-passwordfield-button-error-active-background-color
61
+ );
62
+ --amplify-components-button-outlined-error-hover-color: var(
63
+ --amplify-components-passwordfield-button-error-hover-color
64
+ );
65
+ --amplify-components-button-outlined-error-hover-border-color: var(
66
+ --amplify-components-passwordfield-button-error-hover-border-color
67
+ );
68
+ --amplify-components-button-outlined-error-hover-background-color: var(
69
+ --amplify-components-passwordfield-button-error-hover-background-color
70
+ );
71
+ --amplify-components-button-outlined-error-focus-color: var(
72
+ --amplify-components-passwordfield-button-error-focus-color
73
+ );
74
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
75
+ --amplify-components-passwordfield-button-error-focus-box-shadow
76
+ );
77
+ --amplify-components-button-outlined-error-focus-border-color: var(
78
+ --amplify-components-passwordfield-button-error-focus-border-color
79
+ );
80
+ --amplify-components-button-outlined-error-focus-background-color: var(
81
+ --amplify-components-passwordfield-button-error-focus-background-color
82
+ );
49
83
  }
package/dist/styles/passwordField.layer.css CHANGED
@@ -42,10 +42,44 @@
42
42
  --amplify-components-button-hover-color: var(
43
43
  --amplify-components-passwordfield-button-hover-color
44
44
  );
45
- }
46
-
47
- .amplify-field__show-password--error {
48
- color: var(--amplify-components-fieldcontrol-error-color);
49
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
45
+ --amplify-components-button-outlined-error-color: var(
46
+ --amplify-components-passwordfield-button-error-color
47
+ );
48
+ --amplify-components-button-outlined-error-border-color: var(
49
+ --amplify-components-passwordfield-button-error-border-color
50
+ );
51
+ --amplify-components-button-outlined-error-background-color: var(
52
+ --amplify-components-passwordfield-button-error-background-color
53
+ );
54
+ --amplify-components-button-outlined-error-active-color: var(
55
+ --amplify-components-passwordfield-button-error-active-color
56
+ );
57
+ --amplify-components-button-outlined-error-active-border-color: var(
58
+ --amplify-components-passwordfield-button-error-active-border-color
59
+ );
60
+ --amplify-components-button-outlined-error-active-background-color: var(
61
+ --amplify-components-passwordfield-button-error-active-background-color
62
+ );
63
+ --amplify-components-button-outlined-error-hover-color: var(
64
+ --amplify-components-passwordfield-button-error-hover-color
65
+ );
66
+ --amplify-components-button-outlined-error-hover-border-color: var(
67
+ --amplify-components-passwordfield-button-error-hover-border-color
68
+ );
69
+ --amplify-components-button-outlined-error-hover-background-color: var(
70
+ --amplify-components-passwordfield-button-error-hover-background-color
71
+ );
72
+ --amplify-components-button-outlined-error-focus-color: var(
73
+ --amplify-components-passwordfield-button-error-focus-color
74
+ );
75
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
76
+ --amplify-components-passwordfield-button-error-focus-box-shadow
77
+ );
78
+ --amplify-components-button-outlined-error-focus-border-color: var(
79
+ --amplify-components-passwordfield-button-error-focus-border-color
80
+ );
81
+ --amplify-components-button-outlined-error-focus-background-color: var(
82
+ --amplify-components-passwordfield-button-error-focus-background-color
83
+ );
50
84
  }
51
85
  }
package/dist/styles/table.css CHANGED
@@ -80,6 +80,9 @@
80
80
  var(--amplify-components-table-header-border-width)
81
81
  var(--amplify-components-table-header-border-width);
82
82
  }
83
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
84
+ background-color: var(--amplify-components-table-row-striped-background-color);
85
+ }
83
86
  .amplify-table__caption {
84
87
  caption-side: var(--amplify-components-table-caption-caption-side);
85
88
  color: var(--amplify-components-table-caption-color);
@@ -138,9 +141,6 @@
138
141
  .amplify-table__td:last-child {
139
142
  border-right-width: var(--amplify-components-table-data-border-width);
140
143
  }
141
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
142
- background-color: var(--amplify-components-table-row-striped-background-color);
143
- }
144
144
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
145
145
  background-color: var(--amplify-components-table-row-hover-background-color);
146
146
  }
package/dist/styles/table.layer.css CHANGED
@@ -81,6 +81,9 @@
81
81
  var(--amplify-components-table-header-border-width)
82
82
  var(--amplify-components-table-header-border-width);
83
83
  }
84
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
85
+ background-color: var(--amplify-components-table-row-striped-background-color);
86
+ }
84
87
  .amplify-table__caption {
85
88
  caption-side: var(--amplify-components-table-caption-caption-side);
86
89
  color: var(--amplify-components-table-caption-color);
@@ -139,9 +142,6 @@
139
142
  .amplify-table__td:last-child {
140
143
  border-right-width: var(--amplify-components-table-data-border-width);
141
144
  }
142
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
143
- background-color: var(--amplify-components-table-row-striped-background-color);
144
- }
145
145
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
146
146
  background-color: var(--amplify-components-table-row-hover-background-color);
147
147
  }
package/dist/styles.css CHANGED
@@ -197,10 +197,10 @@
197
197
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
198
198
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
199
199
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
200
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
200
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
201
201
  --amplify-components-button-outlined-error-background-color: transparent;
202
202
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
203
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
203
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
204
204
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
205
205
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
206
206
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -851,6 +851,19 @@
851
851
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
852
852
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
853
853
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
854
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
855
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
856
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
857
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
858
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
859
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
860
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
861
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
862
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
863
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
864
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
865
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
866
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
854
867
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
855
868
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
856
869
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -3911,6 +3924,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
3911
3924
  right: var(--amplify-space-medium);
3912
3925
  }
3913
3926
 
3927
+ .liveness-detector .amplify-button--primary:focus {
3928
+ box-shadow: unset;
3929
+ outline: var(--amplify-components-button-focus-color) solid 2px;
3930
+ outline-offset: 2px;
3931
+ }
3932
+
3914
3933
  .amplify-liveness-cancel-button {
3915
3934
  background-color: #fff;
3916
3935
  color: hsl(190, 95%, 30%);
@@ -3945,6 +3964,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3945
3964
  left: 0;
3946
3965
  height: 100%;
3947
3966
  width: 100%;
3967
+ z-index: 2;
3948
3968
  }
3949
3969
 
3950
3970
  .amplify-liveness-video {
@@ -4014,7 +4034,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4014
4034
  }
4015
4035
 
4016
4036
  .amplify-liveness-instruction-overlay {
4017
- z-index: 1;
4037
+ z-index: 2;
4018
4038
  }
4019
4039
 
4020
4040
  .amplify-liveness-countdown-container {
@@ -4248,6 +4268,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4248
4268
  font-weight: var(--amplify-font-weights-bold);
4249
4269
  }
4250
4270
 
4271
+ .amplify-liveness-hint--mobile {
4272
+ margin-top: var(--amplify-space-xxxl);
4273
+ }
4274
+
4251
4275
  .amplify-liveness-hint__text {
4252
4276
  align-items: center;
4253
4277
  gap: var(--amplify-space-xs);
@@ -4325,6 +4349,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4325
4349
  flex-direction: column;
4326
4350
  align-items: center;
4327
4351
  justify-content: center;
4352
+ text-align: center;
4328
4353
  height: 480px;
4329
4354
  }
4330
4355
 
@@ -4580,11 +4605,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4580
4605
  --amplify-components-button-hover-color: var(
4581
4606
  --amplify-components-passwordfield-button-hover-color
4582
4607
  );
4583
- }
4584
-
4585
- .amplify-field__show-password--error {
4586
- color: var(--amplify-components-fieldcontrol-error-color);
4587
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
4608
+ --amplify-components-button-outlined-error-color: var(
4609
+ --amplify-components-passwordfield-button-error-color
4610
+ );
4611
+ --amplify-components-button-outlined-error-border-color: var(
4612
+ --amplify-components-passwordfield-button-error-border-color
4613
+ );
4614
+ --amplify-components-button-outlined-error-background-color: var(
4615
+ --amplify-components-passwordfield-button-error-background-color
4616
+ );
4617
+ --amplify-components-button-outlined-error-active-color: var(
4618
+ --amplify-components-passwordfield-button-error-active-color
4619
+ );
4620
+ --amplify-components-button-outlined-error-active-border-color: var(
4621
+ --amplify-components-passwordfield-button-error-active-border-color
4622
+ );
4623
+ --amplify-components-button-outlined-error-active-background-color: var(
4624
+ --amplify-components-passwordfield-button-error-active-background-color
4625
+ );
4626
+ --amplify-components-button-outlined-error-hover-color: var(
4627
+ --amplify-components-passwordfield-button-error-hover-color
4628
+ );
4629
+ --amplify-components-button-outlined-error-hover-border-color: var(
4630
+ --amplify-components-passwordfield-button-error-hover-border-color
4631
+ );
4632
+ --amplify-components-button-outlined-error-hover-background-color: var(
4633
+ --amplify-components-passwordfield-button-error-hover-background-color
4634
+ );
4635
+ --amplify-components-button-outlined-error-focus-color: var(
4636
+ --amplify-components-passwordfield-button-error-focus-color
4637
+ );
4638
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
4639
+ --amplify-components-passwordfield-button-error-focus-box-shadow
4640
+ );
4641
+ --amplify-components-button-outlined-error-focus-border-color: var(
4642
+ --amplify-components-passwordfield-button-error-focus-border-color
4643
+ );
4644
+ --amplify-components-button-outlined-error-focus-background-color: var(
4645
+ --amplify-components-passwordfield-button-error-focus-background-color
4646
+ );
4588
4647
  }
4589
4648
 
4590
4649
  .amplify-phonenumberfield select:not(:focus) {
@@ -5327,6 +5386,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5327
5386
  var(--amplify-components-table-header-border-width)
5328
5387
  var(--amplify-components-table-header-border-width);
5329
5388
  }
5389
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5390
+ background-color: var(--amplify-components-table-row-striped-background-color);
5391
+ }
5330
5392
  .amplify-table__caption {
5331
5393
  caption-side: var(--amplify-components-table-caption-caption-side);
5332
5394
  color: var(--amplify-components-table-caption-color);
@@ -5385,9 +5447,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
5385
5447
  .amplify-table__td:last-child {
5386
5448
  border-right-width: var(--amplify-components-table-data-border-width);
5387
5449
  }
5388
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5389
- background-color: var(--amplify-components-table-row-striped-background-color);
5390
- }
5391
5450
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
5392
5451
  background-color: var(--amplify-components-table-row-hover-background-color);
5393
5452
  }
package/dist/styles.layer.css CHANGED
@@ -198,10 +198,10 @@
198
198
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
199
199
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
200
200
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
201
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
201
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
202
202
  --amplify-components-button-outlined-error-background-color: transparent;
203
203
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
204
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
204
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
205
205
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
206
206
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
207
207
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -852,6 +852,19 @@
852
852
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
853
853
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
854
854
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
855
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
856
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
857
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
858
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
859
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
860
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
861
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
862
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
863
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
864
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
865
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
866
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
867
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
855
868
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
856
869
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
857
870
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -3912,6 +3925,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
3912
3925
  right: var(--amplify-space-medium);
3913
3926
  }
3914
3927
 
3928
+ .liveness-detector .amplify-button--primary:focus {
3929
+ box-shadow: unset;
3930
+ outline: var(--amplify-components-button-focus-color) solid 2px;
3931
+ outline-offset: 2px;
3932
+ }
3933
+
3915
3934
  .amplify-liveness-cancel-button {
3916
3935
  background-color: #fff;
3917
3936
  color: hsl(190, 95%, 30%);
@@ -3946,6 +3965,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3946
3965
  left: 0;
3947
3966
  height: 100%;
3948
3967
  width: 100%;
3968
+ z-index: 2;
3949
3969
  }
3950
3970
 
3951
3971
  .amplify-liveness-video {
@@ -4015,7 +4035,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4015
4035
  }
4016
4036
 
4017
4037
  .amplify-liveness-instruction-overlay {
4018
- z-index: 1;
4038
+ z-index: 2;
4019
4039
  }
4020
4040
 
4021
4041
  .amplify-liveness-countdown-container {
@@ -4249,6 +4269,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4249
4269
  font-weight: var(--amplify-font-weights-bold);
4250
4270
  }
4251
4271
 
4272
+ .amplify-liveness-hint--mobile {
4273
+ margin-top: var(--amplify-space-xxxl);
4274
+ }
4275
+
4252
4276
  .amplify-liveness-hint__text {
4253
4277
  align-items: center;
4254
4278
  gap: var(--amplify-space-xs);
@@ -4326,6 +4350,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4326
4350
  flex-direction: column;
4327
4351
  align-items: center;
4328
4352
  justify-content: center;
4353
+ text-align: center;
4329
4354
  height: 480px;
4330
4355
  }
4331
4356
 
@@ -4581,11 +4606,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4581
4606
  --amplify-components-button-hover-color: var(
4582
4607
  --amplify-components-passwordfield-button-hover-color
4583
4608
  );
4584
- }
4585
-
4586
- .amplify-field__show-password--error {
4587
- color: var(--amplify-components-fieldcontrol-error-color);
4588
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
4609
+ --amplify-components-button-outlined-error-color: var(
4610
+ --amplify-components-passwordfield-button-error-color
4611
+ );
4612
+ --amplify-components-button-outlined-error-border-color: var(
4613
+ --amplify-components-passwordfield-button-error-border-color
4614
+ );
4615
+ --amplify-components-button-outlined-error-background-color: var(
4616
+ --amplify-components-passwordfield-button-error-background-color
4617
+ );
4618
+ --amplify-components-button-outlined-error-active-color: var(
4619
+ --amplify-components-passwordfield-button-error-active-color
4620
+ );
4621
+ --amplify-components-button-outlined-error-active-border-color: var(
4622
+ --amplify-components-passwordfield-button-error-active-border-color
4623
+ );
4624
+ --amplify-components-button-outlined-error-active-background-color: var(
4625
+ --amplify-components-passwordfield-button-error-active-background-color
4626
+ );
4627
+ --amplify-components-button-outlined-error-hover-color: var(
4628
+ --amplify-components-passwordfield-button-error-hover-color
4629
+ );
4630
+ --amplify-components-button-outlined-error-hover-border-color: var(
4631
+ --amplify-components-passwordfield-button-error-hover-border-color
4632
+ );
4633
+ --amplify-components-button-outlined-error-hover-background-color: var(
4634
+ --amplify-components-passwordfield-button-error-hover-background-color
4635
+ );
4636
+ --amplify-components-button-outlined-error-focus-color: var(
4637
+ --amplify-components-passwordfield-button-error-focus-color
4638
+ );
4639
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
4640
+ --amplify-components-passwordfield-button-error-focus-box-shadow
4641
+ );
4642
+ --amplify-components-button-outlined-error-focus-border-color: var(
4643
+ --amplify-components-passwordfield-button-error-focus-border-color
4644
+ );
4645
+ --amplify-components-button-outlined-error-focus-background-color: var(
4646
+ --amplify-components-passwordfield-button-error-focus-background-color
4647
+ );
4589
4648
  }
4590
4649
 
4591
4650
  .amplify-phonenumberfield select:not(:focus) {
@@ -5328,6 +5387,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5328
5387
  var(--amplify-components-table-header-border-width)
5329
5388
  var(--amplify-components-table-header-border-width);
5330
5389
  }
5390
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5391
+ background-color: var(--amplify-components-table-row-striped-background-color);
5392
+ }
5331
5393
  .amplify-table__caption {
5332
5394
  caption-side: var(--amplify-components-table-caption-caption-side);
5333
5395
  color: var(--amplify-components-table-caption-color);
@@ -5386,9 +5448,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
5386
5448
  .amplify-table__td:last-child {
5387
5449
  border-right-width: var(--amplify-components-table-data-border-width);
5388
5450
  }
5389
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5390
- background-color: var(--amplify-components-table-row-striped-background-color);
5391
- }
5392
5451
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
5393
5452
  background-color: var(--amplify-components-table-row-hover-background-color);
5394
5453
  }
package/dist/theme.css CHANGED
@@ -194,10 +194,10 @@
194
194
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
195
195
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
196
196
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
197
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
197
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
198
198
  --amplify-components-button-outlined-error-background-color: transparent;
199
199
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
200
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
200
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
201
201
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
202
202
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
203
203
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -848,6 +848,19 @@
848
848
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
849
849
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
850
850
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
851
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
852
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
853
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
854
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
855
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
856
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
857
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
858
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
859
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
860
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
861
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
862
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
863
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
851
864
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
852
865
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
853
866
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
package/dist/types/theme/tokens/components/passwordField.d.ts CHANGED
@@ -1,8 +1,15 @@
1
1
  import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
2
2
  type StateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
3
+ type StateWithShadowTokens<Output> = StateTokens<Output> & DesignTokenProperties<'boxShadow', Output>;
4
+ type ErrorStateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output> & {
5
+ _hover?: StateTokens<Output>;
6
+ _focus?: StateWithShadowTokens<Output>;
7
+ _active?: StateTokens<Output>;
8
+ };
3
9
  type ButtonTokens<Output> = DesignTokenProperties<'color', Output> & {
4
10
  _active?: StateTokens<Output>;
5
11
  _disabled?: StateTokens<Output>;
12
+ _error?: ErrorStateTokens<Output>;
6
13
  _focus?: StateTokens<Output>;
7
14
  _hover?: StateTokens<Output>;
8
15
  };
package/dist/types/types/displayText.d.ts CHANGED
@@ -51,9 +51,14 @@ type GetPrefix = 'get';
51
51
  */
52
52
  type DisplayTextBody = string;
53
53
  type DisplayTextSuffix = FieldSuffix | TextSuffix;
54
- type GetDisplayTextKey = `${GetPrefix}${DisplayTextBody}${DisplayTextSuffix}`;
55
- type DisplayTextKey = `${DisplayTextBody}${DisplayTextSuffix}`;
56
- type DisplayTextBase = Record<GetDisplayTextKey, (...args: any) => string | undefined> | Record<DisplayTextKey, string>;
54
+ type DisplayTextFunctionKey = `${GetPrefix}${DisplayTextBody}${DisplayTextSuffix}`;
55
+ type DisplayTextStringKey = `${DisplayTextBody}${DisplayTextSuffix}`;
56
+ type DisplayTextFunction = (...args: any) => string | undefined;
57
+ type DisplayTextFunctions = Record<DisplayTextFunctionKey, DisplayTextFunction>;
58
+ type DisplayTextStrings = Record<DisplayTextStringKey, string>;
59
+ type IsDisplayTextFunction<T, K> = T extends DisplayTextFunctionKey ? K extends DisplayTextFunction ? T : never : never;
60
+ type IsDisplayTextString<T, K> = T extends DisplayTextStringKey ? K extends string ? T : never : never;
61
+ type FilterDisplayText<T, K> = IsDisplayTextFunction<T, K> | IsDisplayTextString<T, K>;
57
62
  /**
58
63
  * Display Text type utility for creating standardized `DisplayText` interfaces
59
64
  * for usage as public exports and extended with `Required` for default values.
@@ -66,6 +71,7 @@ type DisplayTextBase = Record<GetDisplayTextKey, (...args: any) => string | unde
66
71
  * type SomeComponentDisplayText = DisplayTextTemplate<{
67
72
  * getCopyButtonText?: GetCopyButtonText;
68
73
  * submitButtonText?: string;
74
+ * usernameFieldLabel?: string;
69
75
  * }>;
70
76
  *
71
77
  * // default interface
@@ -74,11 +80,12 @@ type DisplayTextBase = Record<GetDisplayTextKey, (...args: any) => string | unde
74
80
  * // default values
75
81
  * const someComponentDisplayText: SomeComponentDisplayTextDefault = {
76
82
  * getCopyButtonText: (hasCopied) => (hasCopied ? 'Copied' : 'Copy'),
77
- * submitButtonText: 'Submit'
83
+ * submitButtonText: 'Submit',
84
+ * usernameFieldLabel: 'Username',
78
85
  * };
79
86
  * ```
80
87
  */
81
- export type DisplayTextTemplate<T extends DisplayTextBase> = {
82
- [K in keyof T]: K extends GetDisplayTextKey | DisplayTextKey ? T[K] : never;
88
+ export type DisplayTextTemplate<T extends DisplayTextFunctions | DisplayTextStrings> = {
89
+ [K in keyof T as FilterDisplayText<K, T[K]>]: T[K];
83
90
  };
84
91
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.0.6",
3
+ "version": "6.0.8",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {