@aws-amplify/ui 6.0.7 → 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 (14) 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/passwordField.css +39 -5
  9. package/dist/styles/passwordField.layer.css +39 -5
  10. package/dist/styles.css +54 -7
  11. package/dist/styles.layer.css +54 -7
  12. package/dist/theme.css +15 -2
  13. package/dist/types/theme/tokens/components/passwordField.d.ts +7 -0
  14. 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/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.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);
@@ -4592,11 +4605,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4592
4605
  --amplify-components-button-hover-color: var(
4593
4606
  --amplify-components-passwordfield-button-hover-color
4594
4607
  );
4595
- }
4596
-
4597
- .amplify-field__show-password--error {
4598
- color: var(--amplify-components-fieldcontrol-error-color);
4599
- 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
+ );
4600
4647
  }
4601
4648
 
4602
4649
  .amplify-phonenumberfield select:not(:focus) {
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);
@@ -4593,11 +4606,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4593
4606
  --amplify-components-button-hover-color: var(
4594
4607
  --amplify-components-passwordfield-button-hover-color
4595
4608
  );
4596
- }
4597
-
4598
- .amplify-field__show-password--error {
4599
- color: var(--amplify-components-fieldcontrol-error-color);
4600
- 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
+ );
4601
4648
  }
4602
4649
 
4603
4650
  .amplify-phonenumberfield select:not(:focus) {
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.0.7",
3
+ "version": "6.0.8",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {