@aws-amplify/ui-react 6.1.1 → 6.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/esm/primitives/PasswordField/ShowPasswordButton.mjs +1 -1
  2. package/dist/esm/version.mjs +1 -1
  3. package/dist/index.js +2 -2
  4. package/dist/styles/base.css +15 -2
  5. package/dist/styles/base.layer.css +15 -2
  6. package/dist/styles/passwordField.css +39 -5
  7. package/dist/styles/passwordField.layer.css +39 -5
  8. package/dist/styles.css +54 -7
  9. package/dist/styles.layer.css +54 -7
  10. package/dist/types/primitives/types/theme.d.ts +3 -2
  11. package/dist/types/version.d.ts +1 -1
  12. package/package.json +3 -3
package/dist/esm/primitives/PasswordField/ShowPasswordButton.mjs CHANGED
@@ -18,7 +18,7 @@ const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwo
18
18
  const icon = fieldType === 'password'
19
19
  ? icons?.visibility ?? React.createElement(IconVisibility, { "aria-hidden": "true" })
20
20
  : icons?.visibilityOff ?? React.createElement(IconVisibilityOff, { "aria-hidden": "true" });
21
- return (React.createElement(Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, ref: ref, role: "switch", size: size, ...rest },
21
+ return (React.createElement(Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, colorTheme: hasError ? 'error' : undefined, ref: ref, role: "switch", size: size, ...rest },
22
22
  React.createElement(VisuallyHidden, { "aria-live": "polite" }, fieldType === 'password'
23
23
  ? passwordIsHiddenLabel
24
24
  : passwordIsShownLabel),
package/dist/esm/version.mjs CHANGED
@@ -1,3 +1,3 @@
1
- const VERSION = '6.1.1';
1
+ const VERSION = '6.1.2';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -1460,7 +1460,7 @@ const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwo
1460
1460
  const icon = fieldType === 'password'
1461
1461
  ? icons?.visibility ?? React__namespace.createElement(Field.IconVisibility, { "aria-hidden": "true" })
1462
1462
  : icons?.visibilityOff ?? React__namespace.createElement(Field.IconVisibilityOff, { "aria-hidden": "true" });
1463
- return (React__namespace.createElement(Field.Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, ref: ref, role: "switch", size: size, ...rest },
1463
+ return (React__namespace.createElement(Field.Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, colorTheme: hasError ? 'error' : undefined, ref: ref, role: "switch", size: size, ...rest },
1464
1464
  React__namespace.createElement(VisuallyHidden, { "aria-live": "polite" }, fieldType === 'password'
1465
1465
  ? passwordIsHiddenLabel
1466
1466
  : passwordIsShownLabel),
@@ -2383,7 +2383,7 @@ const defaultDeleteUserDisplayText = {
2383
2383
  warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
2384
2384
  };
2385
2385
 
2386
- const VERSION = '6.1.1';
2386
+ const VERSION = '6.1.2';
2387
2387
 
2388
2388
  const logger$2 = ui.getLogger('AccountSettings');
2389
2389
  const getIsDisabled = (formValues, validationError) => {
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/types/primitives/types/theme.d.ts CHANGED
@@ -18,13 +18,14 @@ type PurpleKeys = 'purple.10' | 'purple.20' | 'purple.40' | 'purple.60' | 'purpl
18
18
  type PinkKeys = 'pink.10' | 'pink.20' | 'pink.40' | 'pink.60' | 'pink.80' | 'pink.90' | 'pink.100';
19
19
  type NeutralKeys = 'neutral.10' | 'neutral.20' | 'neutral.40' | 'neutral.60' | 'neutral.80' | 'neutral.90' | 'neutral.100';
20
20
  type OverlayKeys = 'overlay.10' | 'overlay.20' | 'overlay.30' | 'overlay.40' | 'overlay.50' | 'overlay.60' | 'overlay.70' | 'overlay.80' | 'overlay.90';
21
- type BrandColorKeys = 'brand.primary.10' | 'brand.primary.20' | 'brand.primary.40' | 'brand.primary.60' | 'brand.primary.80' | 'brand.primary.90' | 'brand.primary.100' | 'brand.secondary.10' | 'brand.secondary.20' | 'brand.secondary.40' | 'brand.secondary.60' | 'brand.secondary.80' | 'brand.secondary.90' | 'brand.secondary.100';
21
+ type PrimaryColorKey = 'primary.10' | 'primary.20' | 'primary.40' | 'primary.60' | 'primary.80' | 'primary.90' | 'primary.100';
22
+ type SecondaryColorKey = 'secondary.10' | 'secondary.20' | 'secondary.40' | 'secondary.60' | 'secondary.80' | 'secondary.90' | 'secondary.100';
22
23
  type FontColorKeys = 'font.primary' | 'font.secondary' | 'font.tertiary' | 'font.disabled' | 'font.inverse' | 'font.interactive' | 'font.hover' | 'font.focus' | 'font.active' | 'font.success' | 'font.info' | 'font.warning' | 'font.error';
23
24
  type BackgroundColorKeys = 'background.primary' | 'background.secondary' | 'background.tertiary' | 'background.quaternary' | 'background.disabled' | 'background.success' | 'background.info' | 'background.warning' | 'background.error';
24
25
  type BorderColorKeys = 'border.primary' | 'border.secondary' | 'border.tertiary' | 'border.disabled' | 'border.focus' | 'border.pressed' | 'border.error';
25
26
  type ShadowColorKeys = 'shadow.primary' | 'shadow.secondary' | 'shadow.tertiary';
26
27
  export type BorderWidthKeys<PropertyType> = PropertyType | keyof BorderWidths;
27
- export type ColorKeys<PropertyType> = PropertyType | WhiteKey | BlackKey | RedKeys | OrangeKeys | YellowKeys | GreenKeys | TealKeys | BlueKeys | PurpleKeys | PinkKeys | NeutralKeys | OverlayKeys | BrandColorKeys | FontColorKeys | BackgroundColorKeys | BorderColorKeys | ShadowColorKeys;
28
+ export type ColorKeys<PropertyType> = PropertyType | WhiteKey | BlackKey | RedKeys | OrangeKeys | YellowKeys | GreenKeys | TealKeys | BlueKeys | PurpleKeys | PinkKeys | NeutralKeys | OverlayKeys | PrimaryColorKey | SecondaryColorKey | FontColorKeys | BackgroundColorKeys | BorderColorKeys | ShadowColorKeys;
28
29
  export type BoxShadowKeys<PropertyType> = PropertyType | keyof Shadows;
29
30
  export type FontSizeKeys<PropertyType> = PropertyType | keyof FontSizes;
30
31
  export type FontWeightKeys<PropertyType> = PropertyType | keyof FontWeights;
package/dist/types/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const VERSION = "6.1.1";
1
+ export declare const VERSION = "6.1.2";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "6.1.1",
3
+ "version": "6.1.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -49,8 +49,8 @@
49
49
  "typecheck": "tsc --noEmit"
50
50
  },
51
51
  "dependencies": {
52
- "@aws-amplify/ui": "6.0.7",
53
- "@aws-amplify/ui-react-core": "3.0.7",
52
+ "@aws-amplify/ui": "6.0.8",
53
+ "@aws-amplify/ui-react-core": "3.0.8",
54
54
  "@radix-ui/react-direction": "1.0.0",
55
55
  "@radix-ui/react-dropdown-menu": "1.0.0",
56
56
  "@radix-ui/react-slider": "1.0.0",