@aws-amplify/ui 6.0.7 → 6.0.9

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 (18) hide show
  1. package/dist/esm/helpers/authenticator/getRoute.mjs +14 -3
  2. package/dist/esm/machines/authenticator/actors/signIn.mjs +2 -7
  3. package/dist/esm/machines/authenticator/actors/signUp.mjs +11 -13
  4. package/dist/esm/machines/authenticator/actors/utils.mjs +10 -0
  5. package/dist/esm/machines/authenticator/index.mjs +1 -4
  6. package/dist/esm/theme/tokens/components/button.mjs +2 -2
  7. package/dist/esm/theme/tokens/components/passwordField.mjs +45 -0
  8. package/dist/index.js +82 -29
  9. package/dist/styles/base.css +15 -2
  10. package/dist/styles/base.layer.css +15 -2
  11. package/dist/styles/passwordField.css +39 -5
  12. package/dist/styles/passwordField.layer.css +39 -5
  13. package/dist/styles.css +54 -7
  14. package/dist/styles.layer.css +54 -7
  15. package/dist/theme.css +15 -2
  16. package/dist/types/machines/authenticator/actors/utils.d.ts +13 -0
  17. package/dist/types/theme/tokens/components/passwordField.d.ts +7 -0
  18. package/package.json +1 -1
package/dist/esm/helpers/authenticator/getRoute.mjs CHANGED
@@ -1,4 +1,15 @@
1
1
  const getRoute = (state, actorState) => {
2
+ // 'federatedSignIn' exists as a state on both the 'signInActor' and 'signUpActor',
3
+ // match against the `actorState` initially to determine if the federated sign in flow
4
+ // has begun, then which actor has begun the flow and return the corresponding `route`
5
+ if (actorState?.matches('federatedSignIn')) {
6
+ if (state.matches('signUpActor')) {
7
+ return 'signUp';
8
+ }
9
+ if (state.matches('signInActor')) {
10
+ return 'signIn';
11
+ }
12
+ }
2
13
  switch (true) {
3
14
  case state.matches('idle'):
4
15
  return 'idle';
@@ -9,7 +20,7 @@ const getRoute = (state, actorState) => {
9
20
  case state.matches('authenticated'):
10
21
  return 'authenticated';
11
22
  case actorState?.matches('confirmSignUp'):
12
- case actorState?.matches('confirmSignUp.resendConfirmationCode'):
23
+ case actorState?.matches('resendSignUpCode'):
13
24
  return 'confirmSignUp';
14
25
  case actorState?.matches('confirmSignIn'):
15
26
  return 'confirmSignIn';
@@ -19,6 +30,7 @@ const getRoute = (state, actorState) => {
19
30
  case actorState?.matches('signIn'):
20
31
  return 'signIn';
21
32
  case actorState?.matches('signUp'):
33
+ case actorState?.matches('autoSignIn'):
22
34
  return 'signUp';
23
35
  case actorState?.matches('forceChangePassword'):
24
36
  return 'forceNewPassword';
@@ -31,7 +43,7 @@ const getRoute = (state, actorState) => {
31
43
  case actorState?.matches('confirmVerifyUserAttribute'):
32
44
  return 'confirmVerifyUser';
33
45
  case state.matches('getCurrentUser'):
34
- case actorState.matches('fetchUserAttributes'):
46
+ case actorState?.matches('fetchUserAttributes'):
35
47
  /**
36
48
  * This route is needed for autoSignIn to capture both the
37
49
  * autoSignIn.pending and the resolved states when the
@@ -39,7 +51,6 @@ const getRoute = (state, actorState) => {
39
51
  */
40
52
  return 'transition';
41
53
  default:
42
- console.debug('Cannot infer `route` from Authenticator state:', state.value);
43
54
  return null;
44
55
  }
45
56
  };
package/dist/esm/machines/authenticator/actors/signIn.mjs CHANGED
@@ -4,6 +4,7 @@ import { runValidators } from '../../../validators/index.mjs';
4
4
  import ACTIONS from '../actions.mjs';
5
5
  import { defaultServices } from '../defaultServices.mjs';
6
6
  import GUARDS from '../guards.mjs';
7
+ import { getFederatedSignInState } from './utils.mjs';
7
8
 
8
9
  const handleSignInResponse = {
9
10
  onDone: [
@@ -83,13 +84,7 @@ function signInActor({ services }) {
83
84
  { target: 'signIn' },
84
85
  ],
85
86
  },
86
- federatedSignIn: {
87
- entry: ['sendUpdate', 'clearError'],
88
- invoke: {
89
- src: 'signInWithRedirect',
90
- onError: { actions: 'setRemoteError' },
91
- },
92
- },
87
+ federatedSignIn: getFederatedSignInState('signIn'),
93
88
  fetchUserAttributes: {
94
89
  invoke: {
95
90
  src: 'fetchUserAttributes',
package/dist/esm/machines/authenticator/actors/signUp.mjs CHANGED
@@ -4,6 +4,7 @@ import { getSignUpInput } from '../utils.mjs';
4
4
  import { runValidators } from '../../../validators/index.mjs';
5
5
  import ACTIONS from '../actions.mjs';
6
6
  import GUARDS from '../guards.mjs';
7
+ import { getFederatedSignInState } from './utils.mjs';
7
8
 
8
9
  const handleResetPasswordResponse = {
9
10
  onDone: [
@@ -90,6 +91,7 @@ function signUpActor({ services }) {
90
91
  ...handleFetchUserAttributesResponse,
91
92
  },
92
93
  },
94
+ federatedSignIn: getFederatedSignInState('signUp'),
93
95
  resetPassword: {
94
96
  invoke: { src: 'resetPassword', ...handleResetPasswordResponse },
95
97
  },
@@ -115,6 +117,9 @@ function signUpActor({ services }) {
115
117
  signUp: {
116
118
  type: 'parallel',
117
119
  exit: 'clearTouched',
120
+ on: {
121
+ FEDERATED_SIGN_IN: { target: 'federatedSignIn' },
122
+ },
118
123
  states: {
119
124
  validation: {
120
125
  initial: 'pending',
@@ -133,8 +138,8 @@ function signUpActor({ services }) {
133
138
  invalid: { entry: 'sendUpdate' },
134
139
  },
135
140
  on: {
136
- CHANGE: { actions: 'handleInput', target: '.pending' },
137
141
  BLUR: { actions: 'handleBlur', target: '.pending' },
142
+ CHANGE: { actions: 'handleInput', target: '.pending' },
138
143
  },
139
144
  },
140
145
  submission: {
@@ -144,14 +149,6 @@ function signUpActor({ services }) {
144
149
  entry: ['sendUpdate'],
145
150
  on: {
146
151
  SUBMIT: { actions: 'handleSubmit', target: 'validate' },
147
- FEDERATED_SIGN_IN: 'federatedSignIn',
148
- },
149
- },
150
- federatedSignIn: {
151
- entry: ['sendUpdate', 'clearError'],
152
- invoke: {
153
- src: 'federatedSignIn',
154
- onError: { actions: 'setRemoteError' },
155
152
  },
156
153
  },
157
154
  validate: {
@@ -159,13 +156,13 @@ function signUpActor({ services }) {
159
156
  invoke: {
160
157
  src: 'validateSignUp',
161
158
  onDone: {
162
- target: 'signUp',
159
+ target: 'handleSignUp',
163
160
  actions: 'clearValidationError',
164
161
  },
165
162
  onError: { actions: 'setFieldErrors', target: 'idle' },
166
163
  },
167
164
  },
168
- signUp: {
165
+ handleSignUp: {
169
166
  tags: 'pending',
170
167
  entry: ['setUsernameSignUp', 'clearError'],
171
168
  exit: 'sendUpdate',
@@ -244,6 +241,7 @@ function signUpActor({ services }) {
244
241
  remoteError: context.remoteError,
245
242
  step: context.step,
246
243
  totpSecretCode: context.totpSecretCode,
244
+ username: context.username,
247
245
  unverifiedUserAttributes: context.unverifiedUserAttributes,
248
246
  }),
249
247
  },
@@ -267,10 +265,10 @@ function signUpActor({ services }) {
267
265
  resendSignUpCode({ username }) {
268
266
  return resendSignUpCode({ username });
269
267
  },
270
- async federatedSignIn(_, { data }) {
268
+ signInWithRedirect(_, { data }) {
271
269
  return signInWithRedirect(data);
272
270
  },
273
- async handleSignUp(context) {
271
+ handleSignUp(context) {
274
272
  const { formValues, loginMechanisms, username } = context;
275
273
  const loginMechanism = loginMechanisms[0];
276
274
  const input = getSignUpInput(username, formValues, loginMechanism);
package/dist/esm/machines/authenticator/actors/utils.mjs ADDED
@@ -0,0 +1,10 @@
1
+ const getFederatedSignInState = (target) => ({
2
+ entry: ['sendUpdate', 'clearError'],
3
+ invoke: {
4
+ src: 'signInWithRedirect',
5
+ onDone: { target },
6
+ onError: { actions: 'setRemoteError', target },
7
+ },
8
+ });
9
+
10
+ export { getFederatedSignInState };
package/dist/esm/machines/authenticator/index.mjs CHANGED
@@ -238,10 +238,7 @@ function createAuthenticatorMachine(options) {
238
238
  initial: 'spawnActor',
239
239
  states: {
240
240
  spawnActor: {
241
- always: {
242
- actions: 'spawnSignOutActor',
243
- target: 'runActor',
244
- },
241
+ always: { actions: 'spawnSignOutActor', target: 'runActor' },
245
242
  },
246
243
  runActor: {
247
244
  entry: 'clearActorDoneData',
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
@@ -2345,6 +2345,17 @@ const NAVIGABLE_ROUTE_EVENT = {
2345
2345
  };
2346
2346
 
2347
2347
  const getRoute = (state, actorState) => {
2348
+ // 'federatedSignIn' exists as a state on both the 'signInActor' and 'signUpActor',
2349
+ // match against the `actorState` initially to determine if the federated sign in flow
2350
+ // has begun, then which actor has begun the flow and return the corresponding `route`
2351
+ if (actorState?.matches('federatedSignIn')) {
2352
+ if (state.matches('signUpActor')) {
2353
+ return 'signUp';
2354
+ }
2355
+ if (state.matches('signInActor')) {
2356
+ return 'signIn';
2357
+ }
2358
+ }
2348
2359
  switch (true) {
2349
2360
  case state.matches('idle'):
2350
2361
  return 'idle';
@@ -2355,7 +2366,7 @@ const getRoute = (state, actorState) => {
2355
2366
  case state.matches('authenticated'):
2356
2367
  return 'authenticated';
2357
2368
  case actorState?.matches('confirmSignUp'):
2358
- case actorState?.matches('confirmSignUp.resendConfirmationCode'):
2369
+ case actorState?.matches('resendSignUpCode'):
2359
2370
  return 'confirmSignUp';
2360
2371
  case actorState?.matches('confirmSignIn'):
2361
2372
  return 'confirmSignIn';
@@ -2365,6 +2376,7 @@ const getRoute = (state, actorState) => {
2365
2376
  case actorState?.matches('signIn'):
2366
2377
  return 'signIn';
2367
2378
  case actorState?.matches('signUp'):
2379
+ case actorState?.matches('autoSignIn'):
2368
2380
  return 'signUp';
2369
2381
  case actorState?.matches('forceChangePassword'):
2370
2382
  return 'forceNewPassword';
@@ -2377,7 +2389,7 @@ const getRoute = (state, actorState) => {
2377
2389
  case actorState?.matches('confirmVerifyUserAttribute'):
2378
2390
  return 'confirmVerifyUser';
2379
2391
  case state.matches('getCurrentUser'):
2380
- case actorState.matches('fetchUserAttributes'):
2392
+ case actorState?.matches('fetchUserAttributes'):
2381
2393
  /**
2382
2394
  * This route is needed for autoSignIn to capture both the
2383
2395
  * autoSignIn.pending and the resolved states when the
@@ -2385,7 +2397,6 @@ const getRoute = (state, actorState) => {
2385
2397
  */
2386
2398
  return 'transition';
2387
2399
  default:
2388
- console.debug('Cannot infer `route` from Authenticator state:', state.value);
2389
2400
  return null;
2390
2401
  }
2391
2402
  };
@@ -3882,6 +3893,15 @@ function forgotPasswordActor({ services, }) {
3882
3893
  });
3883
3894
  }
3884
3895
 
3896
+ const getFederatedSignInState = (target) => ({
3897
+ entry: ['sendUpdate', 'clearError'],
3898
+ invoke: {
3899
+ src: 'signInWithRedirect',
3900
+ onDone: { target },
3901
+ onError: { actions: 'setRemoteError', target },
3902
+ },
3903
+ });
3904
+
3885
3905
  const handleSignInResponse = {
3886
3906
  onDone: [
3887
3907
  {
@@ -3960,13 +3980,7 @@ function signInActor({ services }) {
3960
3980
  { target: 'signIn' },
3961
3981
  ],
3962
3982
  },
3963
- federatedSignIn: {
3964
- entry: ['sendUpdate', 'clearError'],
3965
- invoke: {
3966
- src: 'signInWithRedirect',
3967
- onError: { actions: 'setRemoteError' },
3968
- },
3969
- },
3983
+ federatedSignIn: getFederatedSignInState('signIn'),
3970
3984
  fetchUserAttributes: {
3971
3985
  invoke: {
3972
3986
  src: 'fetchUserAttributes',
@@ -4287,6 +4301,7 @@ function signUpActor({ services }) {
4287
4301
  ...handleFetchUserAttributesResponse,
4288
4302
  },
4289
4303
  },
4304
+ federatedSignIn: getFederatedSignInState('signUp'),
4290
4305
  resetPassword: {
4291
4306
  invoke: { src: 'resetPassword', ...handleResetPasswordResponse },
4292
4307
  },
@@ -4312,6 +4327,9 @@ function signUpActor({ services }) {
4312
4327
  signUp: {
4313
4328
  type: 'parallel',
4314
4329
  exit: 'clearTouched',
4330
+ on: {
4331
+ FEDERATED_SIGN_IN: { target: 'federatedSignIn' },
4332
+ },
4315
4333
  states: {
4316
4334
  validation: {
4317
4335
  initial: 'pending',
@@ -4330,8 +4348,8 @@ function signUpActor({ services }) {
4330
4348
  invalid: { entry: 'sendUpdate' },
4331
4349
  },
4332
4350
  on: {
4333
- CHANGE: { actions: 'handleInput', target: '.pending' },
4334
4351
  BLUR: { actions: 'handleBlur', target: '.pending' },
4352
+ CHANGE: { actions: 'handleInput', target: '.pending' },
4335
4353
  },
4336
4354
  },
4337
4355
  submission: {
@@ -4341,14 +4359,6 @@ function signUpActor({ services }) {
4341
4359
  entry: ['sendUpdate'],
4342
4360
  on: {
4343
4361
  SUBMIT: { actions: 'handleSubmit', target: 'validate' },
4344
- FEDERATED_SIGN_IN: 'federatedSignIn',
4345
- },
4346
- },
4347
- federatedSignIn: {
4348
- entry: ['sendUpdate', 'clearError'],
4349
- invoke: {
4350
- src: 'federatedSignIn',
4351
- onError: { actions: 'setRemoteError' },
4352
4362
  },
4353
4363
  },
4354
4364
  validate: {
@@ -4356,13 +4366,13 @@ function signUpActor({ services }) {
4356
4366
  invoke: {
4357
4367
  src: 'validateSignUp',
4358
4368
  onDone: {
4359
- target: 'signUp',
4369
+ target: 'handleSignUp',
4360
4370
  actions: 'clearValidationError',
4361
4371
  },
4362
4372
  onError: { actions: 'setFieldErrors', target: 'idle' },
4363
4373
  },
4364
4374
  },
4365
- signUp: {
4375
+ handleSignUp: {
4366
4376
  tags: 'pending',
4367
4377
  entry: ['setUsernameSignUp', 'clearError'],
4368
4378
  exit: 'sendUpdate',
@@ -4441,6 +4451,7 @@ function signUpActor({ services }) {
4441
4451
  remoteError: context.remoteError,
4442
4452
  step: context.step,
4443
4453
  totpSecretCode: context.totpSecretCode,
4454
+ username: context.username,
4444
4455
  unverifiedUserAttributes: context.unverifiedUserAttributes,
4445
4456
  }),
4446
4457
  },
@@ -4464,10 +4475,10 @@ function signUpActor({ services }) {
4464
4475
  resendSignUpCode({ username }) {
4465
4476
  return auth.resendSignUpCode({ username });
4466
4477
  },
4467
- async federatedSignIn(_, { data }) {
4478
+ signInWithRedirect(_, { data }) {
4468
4479
  return auth.signInWithRedirect(data);
4469
4480
  },
4470
- async handleSignUp(context) {
4481
+ handleSignUp(context) {
4471
4482
  const { formValues, loginMechanisms, username } = context;
4472
4483
  const loginMechanism = loginMechanisms[0];
4473
4484
  const input = getSignUpInput(username, formValues, loginMechanism);
@@ -4839,10 +4850,7 @@ function createAuthenticatorMachine(options) {
4839
4850
  initial: 'spawnActor',
4840
4851
  states: {
4841
4852
  spawnActor: {
4842
- always: {
4843
- actions: 'spawnSignOutActor',
4844
- target: 'runActor',
4845
- },
4853
+ always: { actions: 'spawnSignOutActor', target: 'runActor' },
4846
4854
  },
4847
4855
  runActor: {
4848
4856
  entry: 'clearActorDoneData',
@@ -5461,11 +5469,11 @@ const button = {
5461
5469
  },
5462
5470
  },
5463
5471
  error: {
5464
- borderColor: { value: '{colors.red.60.value}' },
5472
+ borderColor: { value: '{colors.red.80.value}' },
5465
5473
  backgroundColor: { value: 'transparent' },
5466
5474
  color: { value: '{colors.red.100}' },
5467
5475
  _hover: {
5468
- borderColor: { value: '{colors.red.60.value}' },
5476
+ borderColor: { value: '{colors.red.80.value}' },
5469
5477
  backgroundColor: { value: '{colors.red.10.value}' },
5470
5478
  color: { value: '{colors.red.100.value}' },
5471
5479
  },
@@ -6824,6 +6832,51 @@ const passwordfield = {
6824
6832
  },
6825
6833
  color: { value: '{components.button._disabled.color.value}' },
6826
6834
  },
6835
+ _error: {
6836
+ color: { value: '{components.button.outlined.error.color.value}' },
6837
+ backgroundColor: {
6838
+ value: '{components.button.outlined.error.backgroundColor.value}',
6839
+ },
6840
+ borderColor: {
6841
+ value: '{components.button.outlined.error.borderColor.value}',
6842
+ },
6843
+ _active: {
6844
+ borderColor: {
6845
+ value: '{components.button.outlined.error._active.borderColor.value}',
6846
+ },
6847
+ backgroundColor: {
6848
+ value: '{components.button.outlined.error._active.backgroundColor.value}',
6849
+ },
6850
+ color: {
6851
+ value: '{components.button.outlined.error._active.color.value}',
6852
+ },
6853
+ },
6854
+ _focus: {
6855
+ borderColor: {
6856
+ value: '{components.button.outlined.error._focus.borderColor.value}',
6857
+ },
6858
+ backgroundColor: {
6859
+ value: '{components.button.outlined.error._focus.backgroundColor.value}',
6860
+ },
6861
+ color: {
6862
+ value: '{components.button.outlined.error._focus.color.value}',
6863
+ },
6864
+ boxShadow: {
6865
+ value: '{components.button.outlined.error._focus.boxShadow.value}',
6866
+ },
6867
+ },
6868
+ _hover: {
6869
+ borderColor: {
6870
+ value: '{components.button.outlined.error._hover.borderColor.value}',
6871
+ },
6872
+ backgroundColor: {
6873
+ value: '{components.button.outlined.error._hover.backgroundColor.value}',
6874
+ },
6875
+ color: {
6876
+ value: '{components.button.outlined.error._hover.color.value}',
6877
+ },
6878
+ },
6879
+ },
6827
6880
  _focus: {
6828
6881
  backgroundColor: {
6829
6882
  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/machines/authenticator/actors/utils.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ export declare const getFederatedSignInState: (target: 'signIn' | 'signUp') => {
2
+ entry: string[];
3
+ invoke: {
4
+ src: string;
5
+ onDone: {
6
+ target: "signIn" | "signUp";
7
+ };
8
+ onError: {
9
+ actions: string;
10
+ target: "signIn" | "signUp";
11
+ };
12
+ };
13
+ };
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.9",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {