@aws-amplify/ui-react 6.1.0 → 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.
- package/dist/{Field-0ebfe8d5.js → Field-e99a3ed1.js} +5 -5
- package/dist/esm/primitives/Alert/AlertIcon.mjs +5 -5
- package/dist/esm/primitives/PasswordField/ShowPasswordButton.mjs +1 -1
- package/dist/esm/version.mjs +1 -1
- package/dist/index.js +3 -3
- package/dist/internal.js +1 -1
- package/dist/styles/base.css +15 -2
- package/dist/styles/base.layer.css +15 -2
- package/dist/styles/liveness.css +13 -1
- package/dist/styles/liveness.layer.css +13 -1
- package/dist/styles/passwordField.css +39 -5
- package/dist/styles/passwordField.layer.css +39 -5
- package/dist/styles/table.css +3 -3
- package/dist/styles/table.layer.css +3 -3
- package/dist/styles.css +70 -11
- package/dist/styles.layer.css +70 -11
- package/dist/types/primitives/Alert/AlertIcon.d.ts +3 -3
- package/dist/types/primitives/types/theme.d.ts +3 -2
- package/dist/types/version.d.ts +1 -1
- package/package.json +3 -3
|
@@ -864,21 +864,21 @@ const IconWarning = (props) => {
|
|
|
864
864
|
/**
|
|
865
865
|
* @internal For internal Amplify UI use only. May be removed in a future release.
|
|
866
866
|
*/
|
|
867
|
-
const AlertIcon = ({ variation, ariaHidden, }) => {
|
|
867
|
+
const AlertIcon = ({ variation, ariaHidden, ariaLabel, role, }) => {
|
|
868
868
|
const icons = useIcons('alert');
|
|
869
869
|
let icon;
|
|
870
870
|
switch (variation) {
|
|
871
871
|
case 'info':
|
|
872
|
-
icon = icons?.info ?? React__namespace.createElement(IconInfo, { "aria-hidden": ariaHidden });
|
|
872
|
+
icon = icons?.info ?? (React__namespace.createElement(IconInfo, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
873
873
|
break;
|
|
874
874
|
case 'error':
|
|
875
|
-
icon = icons?.error ?? React__namespace.createElement(IconError, { "aria-hidden": ariaHidden });
|
|
875
|
+
icon = icons?.error ?? (React__namespace.createElement(IconError, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
876
876
|
break;
|
|
877
877
|
case 'warning':
|
|
878
|
-
icon = icons?.warning ?? React__namespace.createElement(IconWarning, { "aria-hidden": ariaHidden });
|
|
878
|
+
icon = icons?.warning ?? (React__namespace.createElement(IconWarning, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
879
879
|
break;
|
|
880
880
|
case 'success':
|
|
881
|
-
icon = icons?.success ?? React__namespace.createElement(IconCheckCircle, { "aria-hidden": ariaHidden });
|
|
881
|
+
icon = icons?.success ?? (React__namespace.createElement(IconCheckCircle, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
882
882
|
break;
|
|
883
883
|
}
|
|
884
884
|
return icon ? (React__namespace.createElement("span", { className: ui.ComponentClassName.AlertIcon }, icon)) : null;
|
|
@@ -12,21 +12,21 @@ import { IconWarning } from '../Icon/icons/IconWarning.mjs';
|
|
|
12
12
|
/**
|
|
13
13
|
* @internal For internal Amplify UI use only. May be removed in a future release.
|
|
14
14
|
*/
|
|
15
|
-
const AlertIcon = ({ variation, ariaHidden, }) => {
|
|
15
|
+
const AlertIcon = ({ variation, ariaHidden, ariaLabel, role, }) => {
|
|
16
16
|
const icons = useIcons('alert');
|
|
17
17
|
let icon;
|
|
18
18
|
switch (variation) {
|
|
19
19
|
case 'info':
|
|
20
|
-
icon = icons?.info ?? React.createElement(IconInfo, { "aria-hidden": ariaHidden });
|
|
20
|
+
icon = icons?.info ?? (React.createElement(IconInfo, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
21
21
|
break;
|
|
22
22
|
case 'error':
|
|
23
|
-
icon = icons?.error ?? React.createElement(IconError, { "aria-hidden": ariaHidden });
|
|
23
|
+
icon = icons?.error ?? (React.createElement(IconError, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
24
24
|
break;
|
|
25
25
|
case 'warning':
|
|
26
|
-
icon = icons?.warning ?? React.createElement(IconWarning, { "aria-hidden": ariaHidden });
|
|
26
|
+
icon = icons?.warning ?? (React.createElement(IconWarning, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
27
27
|
break;
|
|
28
28
|
case 'success':
|
|
29
|
-
icon = icons?.success ?? React.createElement(IconCheckCircle, { "aria-hidden": ariaHidden });
|
|
29
|
+
icon = icons?.success ?? (React.createElement(IconCheckCircle, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
|
|
30
30
|
break;
|
|
31
31
|
}
|
|
32
32
|
return icon ? (React.createElement("span", { className: ComponentClassName.AlertIcon }, icon)) : null;
|
|
@@ -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
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var isEqual = require('lodash/isEqual.js');
|
|
7
7
|
var uiReactCore = require('@aws-amplify/ui-react-core');
|
|
8
8
|
var ui = require('@aws-amplify/ui');
|
|
9
|
-
var Field = require('./Field-
|
|
9
|
+
var Field = require('./Field-e99a3ed1.js');
|
|
10
10
|
require('aws-amplify/storage');
|
|
11
11
|
var debounce = require('lodash/debounce.js');
|
|
12
12
|
var Dropdown = require('@radix-ui/react-dropdown-menu');
|
|
@@ -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.
|
|
2386
|
+
const VERSION = '6.1.2';
|
|
2387
2387
|
|
|
2388
2388
|
const logger$2 = ui.getLogger('AccountSettings');
|
|
2389
2389
|
const getIsDisabled = (formValues, validationError) => {
|
package/dist/internal.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Field = require('./Field-
|
|
5
|
+
var Field = require('./Field-e99a3ed1.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var Storage = require('aws-amplify/storage');
|
|
8
8
|
var ui = require('@aws-amplify/ui');
|
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-
|
|
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-
|
|
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);
|
|
@@ -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-
|
|
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-
|
|
204
|
+
--amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
|
|
205
205
|
--amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
|
|
206
206
|
--amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
|
|
207
207
|
--amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
|
|
@@ -852,6 +852,19 @@
|
|
|
852
852
|
--amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
|
|
853
853
|
--amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
|
|
854
854
|
--amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
|
|
855
|
+
--amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
|
|
856
|
+
--amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
|
|
857
|
+
--amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
|
|
858
|
+
--amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
|
|
859
|
+
--amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
|
|
860
|
+
--amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
|
|
861
|
+
--amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
|
|
862
|
+
--amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
|
|
863
|
+
--amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
|
|
864
|
+
--amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
|
|
865
|
+
--amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
|
|
866
|
+
--amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
|
|
867
|
+
--amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
|
|
855
868
|
--amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
|
|
856
869
|
--amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
|
|
857
870
|
--amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
|
package/dist/styles/liveness.css
CHANGED
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
right: var(--amplify-space-medium);
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
.liveness-detector .amplify-button--primary:focus {
|
|
9
|
+
box-shadow: unset;
|
|
10
|
+
outline: var(--amplify-components-button-focus-color) solid 2px;
|
|
11
|
+
outline-offset: 2px;
|
|
12
|
+
}
|
|
13
|
+
|
|
8
14
|
.amplify-liveness-cancel-button {
|
|
9
15
|
background-color: #fff;
|
|
10
16
|
color: hsl(190, 95%, 30%);
|
|
@@ -39,6 +45,7 @@
|
|
|
39
45
|
left: 0;
|
|
40
46
|
height: 100%;
|
|
41
47
|
width: 100%;
|
|
48
|
+
z-index: 2;
|
|
42
49
|
}
|
|
43
50
|
|
|
44
51
|
.amplify-liveness-video {
|
|
@@ -108,7 +115,7 @@
|
|
|
108
115
|
}
|
|
109
116
|
|
|
110
117
|
.amplify-liveness-instruction-overlay {
|
|
111
|
-
z-index:
|
|
118
|
+
z-index: 2;
|
|
112
119
|
}
|
|
113
120
|
|
|
114
121
|
.amplify-liveness-countdown-container {
|
|
@@ -342,6 +349,10 @@
|
|
|
342
349
|
font-weight: var(--amplify-font-weights-bold);
|
|
343
350
|
}
|
|
344
351
|
|
|
352
|
+
.amplify-liveness-hint--mobile {
|
|
353
|
+
margin-top: var(--amplify-space-xxxl);
|
|
354
|
+
}
|
|
355
|
+
|
|
345
356
|
.amplify-liveness-hint__text {
|
|
346
357
|
align-items: center;
|
|
347
358
|
gap: var(--amplify-space-xs);
|
|
@@ -419,5 +430,6 @@
|
|
|
419
430
|
flex-direction: column;
|
|
420
431
|
align-items: center;
|
|
421
432
|
justify-content: center;
|
|
433
|
+
text-align: center;
|
|
422
434
|
height: 480px;
|
|
423
435
|
}
|
|
@@ -6,6 +6,12 @@
|
|
|
6
6
|
right: var(--amplify-space-medium);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.liveness-detector .amplify-button--primary:focus {
|
|
10
|
+
box-shadow: unset;
|
|
11
|
+
outline: var(--amplify-components-button-focus-color) solid 2px;
|
|
12
|
+
outline-offset: 2px;
|
|
13
|
+
}
|
|
14
|
+
|
|
9
15
|
.amplify-liveness-cancel-button {
|
|
10
16
|
background-color: #fff;
|
|
11
17
|
color: hsl(190, 95%, 30%);
|
|
@@ -40,6 +46,7 @@
|
|
|
40
46
|
left: 0;
|
|
41
47
|
height: 100%;
|
|
42
48
|
width: 100%;
|
|
49
|
+
z-index: 2;
|
|
43
50
|
}
|
|
44
51
|
|
|
45
52
|
.amplify-liveness-video {
|
|
@@ -109,7 +116,7 @@
|
|
|
109
116
|
}
|
|
110
117
|
|
|
111
118
|
.amplify-liveness-instruction-overlay {
|
|
112
|
-
z-index:
|
|
119
|
+
z-index: 2;
|
|
113
120
|
}
|
|
114
121
|
|
|
115
122
|
.amplify-liveness-countdown-container {
|
|
@@ -343,6 +350,10 @@
|
|
|
343
350
|
font-weight: var(--amplify-font-weights-bold);
|
|
344
351
|
}
|
|
345
352
|
|
|
353
|
+
.amplify-liveness-hint--mobile {
|
|
354
|
+
margin-top: var(--amplify-space-xxxl);
|
|
355
|
+
}
|
|
356
|
+
|
|
346
357
|
.amplify-liveness-hint__text {
|
|
347
358
|
align-items: center;
|
|
348
359
|
gap: var(--amplify-space-xs);
|
|
@@ -420,6 +431,7 @@
|
|
|
420
431
|
flex-direction: column;
|
|
421
432
|
align-items: center;
|
|
422
433
|
justify-content: center;
|
|
434
|
+
text-align: center;
|
|
423
435
|
height: 480px;
|
|
424
436
|
}
|
|
425
437
|
}
|
|
@@ -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
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
}
|
|
@@ -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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
--amplify-components-button-outlined-error-color: var(
|
|
46
|
+
--amplify-components-passwordfield-button-error-color
|
|
47
|
+
);
|
|
48
|
+
--amplify-components-button-outlined-error-border-color: var(
|
|
49
|
+
--amplify-components-passwordfield-button-error-border-color
|
|
50
|
+
);
|
|
51
|
+
--amplify-components-button-outlined-error-background-color: var(
|
|
52
|
+
--amplify-components-passwordfield-button-error-background-color
|
|
53
|
+
);
|
|
54
|
+
--amplify-components-button-outlined-error-active-color: var(
|
|
55
|
+
--amplify-components-passwordfield-button-error-active-color
|
|
56
|
+
);
|
|
57
|
+
--amplify-components-button-outlined-error-active-border-color: var(
|
|
58
|
+
--amplify-components-passwordfield-button-error-active-border-color
|
|
59
|
+
);
|
|
60
|
+
--amplify-components-button-outlined-error-active-background-color: var(
|
|
61
|
+
--amplify-components-passwordfield-button-error-active-background-color
|
|
62
|
+
);
|
|
63
|
+
--amplify-components-button-outlined-error-hover-color: var(
|
|
64
|
+
--amplify-components-passwordfield-button-error-hover-color
|
|
65
|
+
);
|
|
66
|
+
--amplify-components-button-outlined-error-hover-border-color: var(
|
|
67
|
+
--amplify-components-passwordfield-button-error-hover-border-color
|
|
68
|
+
);
|
|
69
|
+
--amplify-components-button-outlined-error-hover-background-color: var(
|
|
70
|
+
--amplify-components-passwordfield-button-error-hover-background-color
|
|
71
|
+
);
|
|
72
|
+
--amplify-components-button-outlined-error-focus-color: var(
|
|
73
|
+
--amplify-components-passwordfield-button-error-focus-color
|
|
74
|
+
);
|
|
75
|
+
--amplify-components-button-outlined-error-focus-box-shadow: var(
|
|
76
|
+
--amplify-components-passwordfield-button-error-focus-box-shadow
|
|
77
|
+
);
|
|
78
|
+
--amplify-components-button-outlined-error-focus-border-color: var(
|
|
79
|
+
--amplify-components-passwordfield-button-error-focus-border-color
|
|
80
|
+
);
|
|
81
|
+
--amplify-components-button-outlined-error-focus-background-color: var(
|
|
82
|
+
--amplify-components-passwordfield-button-error-focus-background-color
|
|
83
|
+
);
|
|
50
84
|
}
|
|
51
85
|
}
|
package/dist/styles/table.css
CHANGED
|
@@ -80,6 +80,9 @@
|
|
|
80
80
|
var(--amplify-components-table-header-border-width)
|
|
81
81
|
var(--amplify-components-table-header-border-width);
|
|
82
82
|
}
|
|
83
|
+
.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
84
|
+
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
85
|
+
}
|
|
83
86
|
.amplify-table__caption {
|
|
84
87
|
caption-side: var(--amplify-components-table-caption-caption-side);
|
|
85
88
|
color: var(--amplify-components-table-caption-color);
|
|
@@ -138,9 +141,6 @@
|
|
|
138
141
|
.amplify-table__td:last-child {
|
|
139
142
|
border-right-width: var(--amplify-components-table-data-border-width);
|
|
140
143
|
}
|
|
141
|
-
.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
142
|
-
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
143
|
-
}
|
|
144
144
|
.amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
|
|
145
145
|
background-color: var(--amplify-components-table-row-hover-background-color);
|
|
146
146
|
}
|
|
@@ -81,6 +81,9 @@
|
|
|
81
81
|
var(--amplify-components-table-header-border-width)
|
|
82
82
|
var(--amplify-components-table-header-border-width);
|
|
83
83
|
}
|
|
84
|
+
.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
85
|
+
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
86
|
+
}
|
|
84
87
|
.amplify-table__caption {
|
|
85
88
|
caption-side: var(--amplify-components-table-caption-caption-side);
|
|
86
89
|
color: var(--amplify-components-table-caption-color);
|
|
@@ -139,9 +142,6 @@
|
|
|
139
142
|
.amplify-table__td:last-child {
|
|
140
143
|
border-right-width: var(--amplify-components-table-data-border-width);
|
|
141
144
|
}
|
|
142
|
-
.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
143
|
-
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
144
|
-
}
|
|
145
145
|
.amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
|
|
146
146
|
background-color: var(--amplify-components-table-row-hover-background-color);
|
|
147
147
|
}
|
package/dist/styles.css
CHANGED
|
@@ -197,10 +197,10 @@
|
|
|
197
197
|
--amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
|
|
198
198
|
--amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
|
|
199
199
|
--amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
|
|
200
|
-
--amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-
|
|
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-
|
|
203
|
+
--amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
|
|
204
204
|
--amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
|
|
205
205
|
--amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
|
|
206
206
|
--amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
|
|
@@ -851,6 +851,19 @@
|
|
|
851
851
|
--amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
|
|
852
852
|
--amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
|
|
853
853
|
--amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
|
|
854
|
+
--amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
|
|
855
|
+
--amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
|
|
856
|
+
--amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
|
|
857
|
+
--amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
|
|
858
|
+
--amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
|
|
859
|
+
--amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
|
|
860
|
+
--amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
|
|
861
|
+
--amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
|
|
862
|
+
--amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
|
|
863
|
+
--amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
|
|
864
|
+
--amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
|
|
865
|
+
--amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
|
|
866
|
+
--amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
|
|
854
867
|
--amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
|
|
855
868
|
--amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
|
|
856
869
|
--amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
|
|
@@ -3911,6 +3924,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3911
3924
|
right: var(--amplify-space-medium);
|
|
3912
3925
|
}
|
|
3913
3926
|
|
|
3927
|
+
.liveness-detector .amplify-button--primary:focus {
|
|
3928
|
+
box-shadow: unset;
|
|
3929
|
+
outline: var(--amplify-components-button-focus-color) solid 2px;
|
|
3930
|
+
outline-offset: 2px;
|
|
3931
|
+
}
|
|
3932
|
+
|
|
3914
3933
|
.amplify-liveness-cancel-button {
|
|
3915
3934
|
background-color: #fff;
|
|
3916
3935
|
color: hsl(190, 95%, 30%);
|
|
@@ -3945,6 +3964,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3945
3964
|
left: 0;
|
|
3946
3965
|
height: 100%;
|
|
3947
3966
|
width: 100%;
|
|
3967
|
+
z-index: 2;
|
|
3948
3968
|
}
|
|
3949
3969
|
|
|
3950
3970
|
.amplify-liveness-video {
|
|
@@ -4014,7 +4034,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4014
4034
|
}
|
|
4015
4035
|
|
|
4016
4036
|
.amplify-liveness-instruction-overlay {
|
|
4017
|
-
z-index:
|
|
4037
|
+
z-index: 2;
|
|
4018
4038
|
}
|
|
4019
4039
|
|
|
4020
4040
|
.amplify-liveness-countdown-container {
|
|
@@ -4248,6 +4268,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4248
4268
|
font-weight: var(--amplify-font-weights-bold);
|
|
4249
4269
|
}
|
|
4250
4270
|
|
|
4271
|
+
.amplify-liveness-hint--mobile {
|
|
4272
|
+
margin-top: var(--amplify-space-xxxl);
|
|
4273
|
+
}
|
|
4274
|
+
|
|
4251
4275
|
.amplify-liveness-hint__text {
|
|
4252
4276
|
align-items: center;
|
|
4253
4277
|
gap: var(--amplify-space-xs);
|
|
@@ -4325,6 +4349,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4325
4349
|
flex-direction: column;
|
|
4326
4350
|
align-items: center;
|
|
4327
4351
|
justify-content: center;
|
|
4352
|
+
text-align: center;
|
|
4328
4353
|
height: 480px;
|
|
4329
4354
|
}
|
|
4330
4355
|
|
|
@@ -4580,11 +4605,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4580
4605
|
--amplify-components-button-hover-color: var(
|
|
4581
4606
|
--amplify-components-passwordfield-button-hover-color
|
|
4582
4607
|
);
|
|
4583
|
-
|
|
4584
|
-
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4608
|
+
--amplify-components-button-outlined-error-color: var(
|
|
4609
|
+
--amplify-components-passwordfield-button-error-color
|
|
4610
|
+
);
|
|
4611
|
+
--amplify-components-button-outlined-error-border-color: var(
|
|
4612
|
+
--amplify-components-passwordfield-button-error-border-color
|
|
4613
|
+
);
|
|
4614
|
+
--amplify-components-button-outlined-error-background-color: var(
|
|
4615
|
+
--amplify-components-passwordfield-button-error-background-color
|
|
4616
|
+
);
|
|
4617
|
+
--amplify-components-button-outlined-error-active-color: var(
|
|
4618
|
+
--amplify-components-passwordfield-button-error-active-color
|
|
4619
|
+
);
|
|
4620
|
+
--amplify-components-button-outlined-error-active-border-color: var(
|
|
4621
|
+
--amplify-components-passwordfield-button-error-active-border-color
|
|
4622
|
+
);
|
|
4623
|
+
--amplify-components-button-outlined-error-active-background-color: var(
|
|
4624
|
+
--amplify-components-passwordfield-button-error-active-background-color
|
|
4625
|
+
);
|
|
4626
|
+
--amplify-components-button-outlined-error-hover-color: var(
|
|
4627
|
+
--amplify-components-passwordfield-button-error-hover-color
|
|
4628
|
+
);
|
|
4629
|
+
--amplify-components-button-outlined-error-hover-border-color: var(
|
|
4630
|
+
--amplify-components-passwordfield-button-error-hover-border-color
|
|
4631
|
+
);
|
|
4632
|
+
--amplify-components-button-outlined-error-hover-background-color: var(
|
|
4633
|
+
--amplify-components-passwordfield-button-error-hover-background-color
|
|
4634
|
+
);
|
|
4635
|
+
--amplify-components-button-outlined-error-focus-color: var(
|
|
4636
|
+
--amplify-components-passwordfield-button-error-focus-color
|
|
4637
|
+
);
|
|
4638
|
+
--amplify-components-button-outlined-error-focus-box-shadow: var(
|
|
4639
|
+
--amplify-components-passwordfield-button-error-focus-box-shadow
|
|
4640
|
+
);
|
|
4641
|
+
--amplify-components-button-outlined-error-focus-border-color: var(
|
|
4642
|
+
--amplify-components-passwordfield-button-error-focus-border-color
|
|
4643
|
+
);
|
|
4644
|
+
--amplify-components-button-outlined-error-focus-background-color: var(
|
|
4645
|
+
--amplify-components-passwordfield-button-error-focus-background-color
|
|
4646
|
+
);
|
|
4588
4647
|
}
|
|
4589
4648
|
|
|
4590
4649
|
.amplify-phonenumberfield select:not(:focus) {
|
|
@@ -5327,6 +5386,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
5327
5386
|
var(--amplify-components-table-header-border-width)
|
|
5328
5387
|
var(--amplify-components-table-header-border-width);
|
|
5329
5388
|
}
|
|
5389
|
+
.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
5390
|
+
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
5391
|
+
}
|
|
5330
5392
|
.amplify-table__caption {
|
|
5331
5393
|
caption-side: var(--amplify-components-table-caption-caption-side);
|
|
5332
5394
|
color: var(--amplify-components-table-caption-color);
|
|
@@ -5385,9 +5447,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
5385
5447
|
.amplify-table__td:last-child {
|
|
5386
5448
|
border-right-width: var(--amplify-components-table-data-border-width);
|
|
5387
5449
|
}
|
|
5388
|
-
.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
5389
|
-
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
5390
|
-
}
|
|
5391
5450
|
.amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
|
|
5392
5451
|
background-color: var(--amplify-components-table-row-hover-background-color);
|
|
5393
5452
|
}
|
package/dist/styles.layer.css
CHANGED
|
@@ -198,10 +198,10 @@
|
|
|
198
198
|
--amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
|
|
199
199
|
--amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
|
|
200
200
|
--amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
|
|
201
|
-
--amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-
|
|
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-
|
|
204
|
+
--amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
|
|
205
205
|
--amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
|
|
206
206
|
--amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
|
|
207
207
|
--amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
|
|
@@ -852,6 +852,19 @@
|
|
|
852
852
|
--amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
|
|
853
853
|
--amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
|
|
854
854
|
--amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
|
|
855
|
+
--amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
|
|
856
|
+
--amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
|
|
857
|
+
--amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
|
|
858
|
+
--amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
|
|
859
|
+
--amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
|
|
860
|
+
--amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
|
|
861
|
+
--amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
|
|
862
|
+
--amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
|
|
863
|
+
--amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
|
|
864
|
+
--amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
|
|
865
|
+
--amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
|
|
866
|
+
--amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
|
|
867
|
+
--amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
|
|
855
868
|
--amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
|
|
856
869
|
--amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
|
|
857
870
|
--amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
|
|
@@ -3912,6 +3925,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3912
3925
|
right: var(--amplify-space-medium);
|
|
3913
3926
|
}
|
|
3914
3927
|
|
|
3928
|
+
.liveness-detector .amplify-button--primary:focus {
|
|
3929
|
+
box-shadow: unset;
|
|
3930
|
+
outline: var(--amplify-components-button-focus-color) solid 2px;
|
|
3931
|
+
outline-offset: 2px;
|
|
3932
|
+
}
|
|
3933
|
+
|
|
3915
3934
|
.amplify-liveness-cancel-button {
|
|
3916
3935
|
background-color: #fff;
|
|
3917
3936
|
color: hsl(190, 95%, 30%);
|
|
@@ -3946,6 +3965,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3946
3965
|
left: 0;
|
|
3947
3966
|
height: 100%;
|
|
3948
3967
|
width: 100%;
|
|
3968
|
+
z-index: 2;
|
|
3949
3969
|
}
|
|
3950
3970
|
|
|
3951
3971
|
.amplify-liveness-video {
|
|
@@ -4015,7 +4035,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4015
4035
|
}
|
|
4016
4036
|
|
|
4017
4037
|
.amplify-liveness-instruction-overlay {
|
|
4018
|
-
z-index:
|
|
4038
|
+
z-index: 2;
|
|
4019
4039
|
}
|
|
4020
4040
|
|
|
4021
4041
|
.amplify-liveness-countdown-container {
|
|
@@ -4249,6 +4269,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4249
4269
|
font-weight: var(--amplify-font-weights-bold);
|
|
4250
4270
|
}
|
|
4251
4271
|
|
|
4272
|
+
.amplify-liveness-hint--mobile {
|
|
4273
|
+
margin-top: var(--amplify-space-xxxl);
|
|
4274
|
+
}
|
|
4275
|
+
|
|
4252
4276
|
.amplify-liveness-hint__text {
|
|
4253
4277
|
align-items: center;
|
|
4254
4278
|
gap: var(--amplify-space-xs);
|
|
@@ -4326,6 +4350,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4326
4350
|
flex-direction: column;
|
|
4327
4351
|
align-items: center;
|
|
4328
4352
|
justify-content: center;
|
|
4353
|
+
text-align: center;
|
|
4329
4354
|
height: 480px;
|
|
4330
4355
|
}
|
|
4331
4356
|
|
|
@@ -4581,11 +4606,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4581
4606
|
--amplify-components-button-hover-color: var(
|
|
4582
4607
|
--amplify-components-passwordfield-button-hover-color
|
|
4583
4608
|
);
|
|
4584
|
-
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4588
|
-
|
|
4609
|
+
--amplify-components-button-outlined-error-color: var(
|
|
4610
|
+
--amplify-components-passwordfield-button-error-color
|
|
4611
|
+
);
|
|
4612
|
+
--amplify-components-button-outlined-error-border-color: var(
|
|
4613
|
+
--amplify-components-passwordfield-button-error-border-color
|
|
4614
|
+
);
|
|
4615
|
+
--amplify-components-button-outlined-error-background-color: var(
|
|
4616
|
+
--amplify-components-passwordfield-button-error-background-color
|
|
4617
|
+
);
|
|
4618
|
+
--amplify-components-button-outlined-error-active-color: var(
|
|
4619
|
+
--amplify-components-passwordfield-button-error-active-color
|
|
4620
|
+
);
|
|
4621
|
+
--amplify-components-button-outlined-error-active-border-color: var(
|
|
4622
|
+
--amplify-components-passwordfield-button-error-active-border-color
|
|
4623
|
+
);
|
|
4624
|
+
--amplify-components-button-outlined-error-active-background-color: var(
|
|
4625
|
+
--amplify-components-passwordfield-button-error-active-background-color
|
|
4626
|
+
);
|
|
4627
|
+
--amplify-components-button-outlined-error-hover-color: var(
|
|
4628
|
+
--amplify-components-passwordfield-button-error-hover-color
|
|
4629
|
+
);
|
|
4630
|
+
--amplify-components-button-outlined-error-hover-border-color: var(
|
|
4631
|
+
--amplify-components-passwordfield-button-error-hover-border-color
|
|
4632
|
+
);
|
|
4633
|
+
--amplify-components-button-outlined-error-hover-background-color: var(
|
|
4634
|
+
--amplify-components-passwordfield-button-error-hover-background-color
|
|
4635
|
+
);
|
|
4636
|
+
--amplify-components-button-outlined-error-focus-color: var(
|
|
4637
|
+
--amplify-components-passwordfield-button-error-focus-color
|
|
4638
|
+
);
|
|
4639
|
+
--amplify-components-button-outlined-error-focus-box-shadow: var(
|
|
4640
|
+
--amplify-components-passwordfield-button-error-focus-box-shadow
|
|
4641
|
+
);
|
|
4642
|
+
--amplify-components-button-outlined-error-focus-border-color: var(
|
|
4643
|
+
--amplify-components-passwordfield-button-error-focus-border-color
|
|
4644
|
+
);
|
|
4645
|
+
--amplify-components-button-outlined-error-focus-background-color: var(
|
|
4646
|
+
--amplify-components-passwordfield-button-error-focus-background-color
|
|
4647
|
+
);
|
|
4589
4648
|
}
|
|
4590
4649
|
|
|
4591
4650
|
.amplify-phonenumberfield select:not(:focus) {
|
|
@@ -5328,6 +5387,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
5328
5387
|
var(--amplify-components-table-header-border-width)
|
|
5329
5388
|
var(--amplify-components-table-header-border-width);
|
|
5330
5389
|
}
|
|
5390
|
+
.amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
5391
|
+
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
5392
|
+
}
|
|
5331
5393
|
.amplify-table__caption {
|
|
5332
5394
|
caption-side: var(--amplify-components-table-caption-caption-side);
|
|
5333
5395
|
color: var(--amplify-components-table-caption-color);
|
|
@@ -5386,9 +5448,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
5386
5448
|
.amplify-table__td:last-child {
|
|
5387
5449
|
border-right-width: var(--amplify-components-table-data-border-width);
|
|
5388
5450
|
}
|
|
5389
|
-
.amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
|
|
5390
|
-
background-color: var(--amplify-components-table-row-striped-background-color);
|
|
5391
|
-
}
|
|
5392
5451
|
.amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
|
|
5393
5452
|
background-color: var(--amplify-components-table-row-hover-background-color);
|
|
5394
5453
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { AlertVariations } from '../types';
|
|
3
|
-
interface AlertIconProps {
|
|
2
|
+
import { AlertVariations, ViewProps } from '../types';
|
|
3
|
+
interface AlertIconProps extends Pick<ViewProps, 'role' | 'ariaLabel'> {
|
|
4
4
|
variation?: AlertVariations;
|
|
5
5
|
ariaHidden?: boolean;
|
|
6
6
|
}
|
|
@@ -8,7 +8,7 @@ interface AlertIconProps {
|
|
|
8
8
|
* @internal For internal Amplify UI use only. May be removed in a future release.
|
|
9
9
|
*/
|
|
10
10
|
export declare const AlertIcon: {
|
|
11
|
-
({ variation, ariaHidden, }: AlertIconProps): JSX.Element | null;
|
|
11
|
+
({ variation, ariaHidden, ariaLabel, role, }: AlertIconProps): JSX.Element | null;
|
|
12
12
|
displayName: string;
|
|
13
13
|
};
|
|
14
14
|
export {};
|
|
@@ -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
|
|
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 |
|
|
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
|
+
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.
|
|
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.
|
|
53
|
-
"@aws-amplify/ui-react-core": "3.0.
|
|
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",
|