@aws-amplify/ui 6.3.0 → 6.4.1

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 (23) hide show
  1. package/dist/esm/theme/tokens/components/avatar.mjs +49 -0
  2. package/dist/esm/theme/tokens/components/fileuploader.mjs +97 -0
  3. package/dist/esm/theme/tokens/components/index.mjs +4 -0
  4. package/dist/esm/types/primitives/componentClassName.mjs +25 -0
  5. package/dist/index.js +171 -0
  6. package/dist/styles/AIConversation.css +108 -0
  7. package/dist/styles/AIConversation.layer.css +110 -0
  8. package/dist/styles/FileUploader.css +138 -0
  9. package/dist/styles/FileUploader.layer.css +140 -0
  10. package/dist/styles/avatar.css +111 -0
  11. package/dist/styles/avatar.layer.css +113 -0
  12. package/dist/styles/base.css +90 -0
  13. package/dist/styles/base.layer.css +90 -0
  14. package/dist/styles.css +450 -0
  15. package/dist/styles.layer.css +450 -0
  16. package/dist/theme.css +90 -0
  17. package/dist/types/theme/components/avatar.d.ts +5 -0
  18. package/dist/types/theme/components/index.d.ts +5 -1
  19. package/dist/types/theme/tokens/components/avatar.d.ts +14 -0
  20. package/dist/types/theme/tokens/components/fileuploader.d.ts +24 -0
  21. package/dist/types/theme/tokens/components/index.d.ts +4 -0
  22. package/dist/types/types/primitives/componentClassName.d.ts +25 -0
  23. package/package.json +1 -1
package/dist/styles/FileUploader.css ADDED
@@ -0,0 +1,138 @@
1
+ .amplify-fileuploader__dropzone {
2
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
3
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
4
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
5
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
6
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
7
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
8
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
9
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
10
+ display: flex;
11
+ flex-direction: column;
12
+ align-items: center;
13
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
14
+ }
15
+ .amplify-fileuploader__dropzone--small {
16
+ flex-direction: row;
17
+ justify-content: center;
18
+ }
19
+ .amplify-fileuploader__dropzone--active {
20
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
21
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
22
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
23
+ }
24
+ .amplify-fileuploader__dropzone__icon {
25
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
26
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
27
+ }
28
+ .amplify-fileuploader__dropzone__text {
29
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
30
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
31
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
32
+ }
33
+ .amplify-fileuploader__file__list {
34
+ display: flex;
35
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
36
+ gap: var(--amplify-components-fileuploader-filelist-gap);
37
+ }
38
+ .amplify-fileuploader__file {
39
+ position: relative;
40
+ border-width: var(--amplify-components-fileuploader-file-border-width);
41
+ border-style: var(--amplify-components-fileuploader-file-border-style);
42
+ border-color: var(--amplify-components-fileuploader-file-border-color);
43
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
44
+ display: flex;
45
+ flex-direction: column;
46
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
47
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
48
+ align-items: var(--amplify-components-fileuploader-file-align-items);
49
+ }
50
+ .amplify-fileuploader__file__wrapper {
51
+ width: 100%;
52
+ display: flex;
53
+ flex-direction: row;
54
+ align-items: center;
55
+ gap: var(--amplify-components-fileuploader-file-gap);
56
+ }
57
+ .amplify-fileuploader__file__name {
58
+ text-overflow: ellipsis;
59
+ overflow: hidden;
60
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
61
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
62
+ color: var(--amplify-components-fileuploader-file-name-color);
63
+ }
64
+ .amplify-fileuploader__file__size {
65
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
66
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
67
+ color: var(--amplify-components-fileuploader-file-size-color);
68
+ }
69
+ .amplify-fileuploader__file__main {
70
+ flex: 1;
71
+ white-space: nowrap;
72
+ overflow: hidden;
73
+ }
74
+ .amplify-fileuploader__file__image {
75
+ position: relative;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ width: var(--amplify-components-fileuploader-file-image-width);
80
+ height: var(--amplify-components-fileuploader-file-image-height);
81
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
82
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
83
+ color: var(--amplify-components-fileuploader-file-image-color);
84
+ }
85
+ .amplify-fileuploader__file__image img {
86
+ max-height: 100%;
87
+ }
88
+ .amplify-fileuploader__file__status--error {
89
+ color: var(--amplify-colors-font-error);
90
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
91
+ }
92
+ .amplify-fileuploader__file__status--success {
93
+ color: var(--amplify-colors-font-success);
94
+ }
95
+ .amplify-fileuploader__loader {
96
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
97
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
98
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
99
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
100
+ --amplify-components-loader-linear-stroke-filled: var(
101
+ --amplify-components-fileuploader-loader-stroke-filled
102
+ );
103
+ overflow: hidden;
104
+ position: absolute;
105
+ bottom: 0;
106
+ left: 0;
107
+ width: 100%;
108
+ }
109
+ .amplify-fileuploader__previewer {
110
+ display: flex;
111
+ flex-direction: column;
112
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
113
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
114
+ overflow: auto;
115
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
116
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
117
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
118
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
119
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
120
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
121
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
122
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
123
+ }
124
+ .amplify-fileuploader__previewer__text {
125
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
126
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
127
+ color: var(--amplify-components-fileuploader-previewer-text-color);
128
+ }
129
+ .amplify-fileuploader__previewer__footer {
130
+ display: flex;
131
+ flex-direction: row;
132
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
133
+ }
134
+ .amplify-fileuploader__previewer__actions {
135
+ display: flex;
136
+ flex-direction: row;
137
+ gap: var(--amplify-space-small);
138
+ }
package/dist/styles/FileUploader.layer.css ADDED
@@ -0,0 +1,140 @@
1
+ @layer amplify.components {
2
+ .amplify-fileuploader__dropzone {
3
+ background-color: var(--amplify-components-fileuploader-dropzone-background-color);
4
+ border-color: var(--amplify-components-fileuploader-dropzone-border-color);
5
+ border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
6
+ border-style: var(--amplify-components-fileuploader-dropzone-border-style);
7
+ border-width: var(--amplify-components-fileuploader-dropzone-border-width);
8
+ text-align: var(--amplify-components-fileuploader-dropzone-text-align);
9
+ padding-block: var(--amplify-components-fileuploader-dropzone-padding-block);
10
+ padding-inline: var(--amplify-components-fileuploader-dropzone-padding-inline);
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ gap: var(--amplify-components-fileuploader-dropzone-gap);
15
+ }
16
+ .amplify-fileuploader__dropzone--small {
17
+ flex-direction: row;
18
+ justify-content: center;
19
+ }
20
+ .amplify-fileuploader__dropzone--active {
21
+ border-color: var(--amplify-components-fileuploader-dropzone-active-border-color);
22
+ border-width: var(--amplify-components-fileuploader-dropzone-active-border-width);
23
+ background-color: var(--amplify-components-fileuploader-dropzone-active-background-color);
24
+ }
25
+ .amplify-fileuploader__dropzone__icon {
26
+ font-size: var(--amplify-components-fileuploader-dropzone-icon-font-size);
27
+ color: var(--amplify-components-fileuploader-dropzone-icon-color);
28
+ }
29
+ .amplify-fileuploader__dropzone__text {
30
+ color: var(--amplify-components-fileuploader-dropzone-text-color);
31
+ font-size: var(--amplify-components-fileuploader-dropzone-text-font-size);
32
+ font-weight: var(--amplify-components-fileuploader-dropzone-text-font-weight);
33
+ }
34
+ .amplify-fileuploader__file__list {
35
+ display: flex;
36
+ flex-direction: var(--amplify-components-fileuploader-filelist-flex-direction);
37
+ gap: var(--amplify-components-fileuploader-filelist-gap);
38
+ }
39
+ .amplify-fileuploader__file {
40
+ position: relative;
41
+ border-width: var(--amplify-components-fileuploader-file-border-width);
42
+ border-style: var(--amplify-components-fileuploader-file-border-style);
43
+ border-color: var(--amplify-components-fileuploader-file-border-color);
44
+ border-radius: var(--amplify-components-fileuploader-file-border-radius);
45
+ display: flex;
46
+ flex-direction: column;
47
+ padding-inline: var(--amplify-components-fileuploader-file-padding-inline);
48
+ padding-block: var(--amplify-components-fileuploader-file-padding-block);
49
+ align-items: var(--amplify-components-fileuploader-file-align-items);
50
+ }
51
+ .amplify-fileuploader__file__wrapper {
52
+ width: 100%;
53
+ display: flex;
54
+ flex-direction: row;
55
+ align-items: center;
56
+ gap: var(--amplify-components-fileuploader-file-gap);
57
+ }
58
+ .amplify-fileuploader__file__name {
59
+ text-overflow: ellipsis;
60
+ overflow: hidden;
61
+ font-weight: var(--amplify-components-fileuploader-file-name-font-weight);
62
+ font-size: var(--amplify-components-fileuploader-file-name-font-size);
63
+ color: var(--amplify-components-fileuploader-file-name-color);
64
+ }
65
+ .amplify-fileuploader__file__size {
66
+ font-weight: var(--amplify-components-fileuploader-file-size-font-weight);
67
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
68
+ color: var(--amplify-components-fileuploader-file-size-color);
69
+ }
70
+ .amplify-fileuploader__file__main {
71
+ flex: 1;
72
+ white-space: nowrap;
73
+ overflow: hidden;
74
+ }
75
+ .amplify-fileuploader__file__image {
76
+ position: relative;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
80
+ width: var(--amplify-components-fileuploader-file-image-width);
81
+ height: var(--amplify-components-fileuploader-file-image-height);
82
+ background-color: var(--amplify-components-fileuploader-file-image-background-color);
83
+ border-radius: var(--amplify-components-fileuploader-file-image-border-radius);
84
+ color: var(--amplify-components-fileuploader-file-image-color);
85
+ }
86
+ .amplify-fileuploader__file__image img {
87
+ max-height: 100%;
88
+ }
89
+ .amplify-fileuploader__file__status--error {
90
+ color: var(--amplify-colors-font-error);
91
+ font-size: var(--amplify-components-fileuploader-file-size-font-size);
92
+ }
93
+ .amplify-fileuploader__file__status--success {
94
+ color: var(--amplify-colors-font-success);
95
+ }
96
+ .amplify-fileuploader__loader {
97
+ stroke-linecap: var(--amplify-components-fileuploader-loader-stroke-linecap);
98
+ stroke: var(--amplify-components-fileuploader-loader-stroke-empty);
99
+ stroke-width: var(--amplify-components-fileuploader-loader-stroke-width);
100
+ height: var(--amplify-components-fileuploader-loader-stroke-width);
101
+ --amplify-components-loader-linear-stroke-filled: var(
102
+ --amplify-components-fileuploader-loader-stroke-filled
103
+ );
104
+ overflow: hidden;
105
+ position: absolute;
106
+ bottom: 0;
107
+ left: 0;
108
+ width: 100%;
109
+ }
110
+ .amplify-fileuploader__previewer {
111
+ display: flex;
112
+ flex-direction: column;
113
+ max-width: var(--amplify-components-fileuploader-previewer-max-width);
114
+ max-height: var(--amplify-components-fileuploader-previewer-max-height);
115
+ overflow: auto;
116
+ gap: var(--amplify-components-fileuploader-previewer-body-gap);
117
+ padding-inline: var(--amplify-components-fileuploader-previewer-body-padding-inline);
118
+ padding-block: var(--amplify-components-fileuploader-previewer-body-padding-block);
119
+ background-color: var(--amplify-components-fileuploader-previewer-background-color);
120
+ border-width: var(--amplify-components-fileuploader-previewer-border-width);
121
+ border-style: var(--amplify-components-fileuploader-previewer-border-style);
122
+ border-color: var(--amplify-components-fileuploader-previewer-border-color);
123
+ border-radius: var(--amplify-components-fileuploader-previewer-border-radius);
124
+ }
125
+ .amplify-fileuploader__previewer__text {
126
+ font-weight: var(--amplify-components-fileuploader-previewer-text-font-weight);
127
+ font-size: var(--amplify-components-fileuploader-previewer-text-font-size);
128
+ color: var(--amplify-components-fileuploader-previewer-text-color);
129
+ }
130
+ .amplify-fileuploader__previewer__footer {
131
+ display: flex;
132
+ flex-direction: row;
133
+ justify-content: var(--amplify-components-fileuploader-previewer-footer-justify-content);
134
+ }
135
+ .amplify-fileuploader__previewer__actions {
136
+ display: flex;
137
+ flex-direction: row;
138
+ gap: var(--amplify-space-small);
139
+ }
140
+ }
package/dist/styles/avatar.css ADDED
@@ -0,0 +1,111 @@
1
+ .amplify-avatar {
2
+ --avatar-color: var(--amplify-components-avatar-color);
3
+ --avatar-background-color: var(--amplify-components-avatar-background-color);
4
+ --avatar-filled-background-color: var(--amplify-components-avatar-color);
5
+ --avatar-filled-color: var(--amplify-components-avatar-background-color);
6
+ --avatar-border-color: var(--amplify-components-avatar-border-color);
7
+ --avatar-size: var(--amplify-components-avatar-width);
8
+ --amplify-components-icon-height: 100%;
9
+ display: inline-flex;
10
+ align-items: center;
11
+ justify-content: center;
12
+ color: var(--avatar-color);
13
+ background-color: var(--avatar-background-color);
14
+ font-weight: var(--amplify-components-avatar-font-weight);
15
+ font-size: var(--amplify-components-avatar-font-size);
16
+ width: var(--amplify-components-avatar-width);
17
+ height: var(--amplify-components-avatar-height);
18
+ overflow: hidden;
19
+ border-radius: var(--amplify-components-avatar-border-radius);
20
+ }
21
+ .amplify-avatar--filled {
22
+ background-color: var(--avatar-filled-background-color);
23
+ color: var(--avatar-filled-color);
24
+ }
25
+ .amplify-avatar--outlined {
26
+ border-width: var(--amplify-components-avatar-border-width);
27
+ border-style: solid;
28
+ padding: var(--amplify-components-avatar-border-width);
29
+ border-color: var(--avatar-border-color);
30
+ background-color: transparent;
31
+ color: var(--avatar-color);
32
+ }
33
+ .amplify-avatar--small {
34
+ --avatar-size: var(--amplify-components-avatar-small-width);
35
+ width: var(--amplify-components-avatar-small-width);
36
+ height: var(--amplify-components-avatar-small-height);
37
+ font-size: var(--amplify-components-avatar-small-font-size);
38
+ }
39
+ .amplify-avatar--large {
40
+ --avatar-size: var(--amplify-components-avatar-large-width);
41
+ width: var(--amplify-components-avatar-large-width);
42
+ height: var(--amplify-components-avatar-large-height);
43
+ font-size: var(--amplify-components-avatar-large-font-size);
44
+ }
45
+ .amplify-avatar--warning {
46
+ --avatar-border-color: var(
47
+ --amplify-components-avatar-warning-border-color
48
+ );
49
+ --avatar-background-color: var(
50
+ --amplify-components-avatar-warning-background-color
51
+ );
52
+ --avatar-color: var(--amplify-components-avatar-warning-color);
53
+ --avatar-filled-background-color: var(
54
+ --amplify-components-avatar-warning-color
55
+ );
56
+ --avatar-filled-color: var(
57
+ --amplify-components-avatar-warning-background-color
58
+ );
59
+ }
60
+ .amplify-avatar--error {
61
+ --avatar-border-color: var(--amplify-components-avatar-error-border-color);
62
+ --avatar-background-color: var(
63
+ --amplify-components-avatar-error-background-color
64
+ );
65
+ --avatar-color: var(--amplify-components-avatar-error-color);
66
+ --avatar-filled-background-color: var(
67
+ --amplify-components-avatar-error-color
68
+ );
69
+ --avatar-filled-color: var(
70
+ --amplify-components-avatar-error-background-color
71
+ );
72
+ }
73
+ .amplify-avatar--info {
74
+ --avatar-border-color: var(--amplify-components-avatar-info-border-color);
75
+ --avatar-background-color: var(
76
+ --amplify-components-avatar-info-background-color
77
+ );
78
+ --avatar-color: var(--amplify-components-avatar-info-color);
79
+ --avatar-filled-background-color: var(
80
+ --amplify-components-avatar-info-color
81
+ );
82
+ --avatar-filled-color: var(
83
+ --amplify-components-avatar-info-background-color
84
+ );
85
+ }
86
+ .amplify-avatar--success {
87
+ --avatar-border-color: var(
88
+ --amplify-components-avatar-success-border-color
89
+ );
90
+ --avatar-background-color: var(
91
+ --amplify-components-avatar-success-background-color
92
+ );
93
+ --avatar-color: var(--amplify-components-avatar-success-color);
94
+ --avatar-filled-background-color: var(
95
+ --amplify-components-avatar-success-color
96
+ );
97
+ --avatar-filled-color: var(
98
+ --amplify-components-avatar-success-background-color
99
+ );
100
+ }
101
+ .amplify-avatar__icon {
102
+ display: flex;
103
+ font-size: calc(var(--avatar-size) * 0.6);
104
+ }
105
+ .amplify-avatar__image {
106
+ width: 100%;
107
+ height: 100%;
108
+ -o-object-fit: cover;
109
+ object-fit: cover;
110
+ display: block;
111
+ }
package/dist/styles/avatar.layer.css ADDED
@@ -0,0 +1,113 @@
1
+ @layer amplify.components {
2
+ .amplify-avatar {
3
+ --avatar-color: var(--amplify-components-avatar-color);
4
+ --avatar-background-color: var(--amplify-components-avatar-background-color);
5
+ --avatar-filled-background-color: var(--amplify-components-avatar-color);
6
+ --avatar-filled-color: var(--amplify-components-avatar-background-color);
7
+ --avatar-border-color: var(--amplify-components-avatar-border-color);
8
+ --avatar-size: var(--amplify-components-avatar-width);
9
+ --amplify-components-icon-height: 100%;
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ color: var(--avatar-color);
14
+ background-color: var(--avatar-background-color);
15
+ font-weight: var(--amplify-components-avatar-font-weight);
16
+ font-size: var(--amplify-components-avatar-font-size);
17
+ width: var(--amplify-components-avatar-width);
18
+ height: var(--amplify-components-avatar-height);
19
+ overflow: hidden;
20
+ border-radius: var(--amplify-components-avatar-border-radius);
21
+ }
22
+ .amplify-avatar--filled {
23
+ background-color: var(--avatar-filled-background-color);
24
+ color: var(--avatar-filled-color);
25
+ }
26
+ .amplify-avatar--outlined {
27
+ border-width: var(--amplify-components-avatar-border-width);
28
+ border-style: solid;
29
+ padding: var(--amplify-components-avatar-border-width);
30
+ border-color: var(--avatar-border-color);
31
+ background-color: transparent;
32
+ color: var(--avatar-color);
33
+ }
34
+ .amplify-avatar--small {
35
+ --avatar-size: var(--amplify-components-avatar-small-width);
36
+ width: var(--amplify-components-avatar-small-width);
37
+ height: var(--amplify-components-avatar-small-height);
38
+ font-size: var(--amplify-components-avatar-small-font-size);
39
+ }
40
+ .amplify-avatar--large {
41
+ --avatar-size: var(--amplify-components-avatar-large-width);
42
+ width: var(--amplify-components-avatar-large-width);
43
+ height: var(--amplify-components-avatar-large-height);
44
+ font-size: var(--amplify-components-avatar-large-font-size);
45
+ }
46
+ .amplify-avatar--warning {
47
+ --avatar-border-color: var(
48
+ --amplify-components-avatar-warning-border-color
49
+ );
50
+ --avatar-background-color: var(
51
+ --amplify-components-avatar-warning-background-color
52
+ );
53
+ --avatar-color: var(--amplify-components-avatar-warning-color);
54
+ --avatar-filled-background-color: var(
55
+ --amplify-components-avatar-warning-color
56
+ );
57
+ --avatar-filled-color: var(
58
+ --amplify-components-avatar-warning-background-color
59
+ );
60
+ }
61
+ .amplify-avatar--error {
62
+ --avatar-border-color: var(--amplify-components-avatar-error-border-color);
63
+ --avatar-background-color: var(
64
+ --amplify-components-avatar-error-background-color
65
+ );
66
+ --avatar-color: var(--amplify-components-avatar-error-color);
67
+ --avatar-filled-background-color: var(
68
+ --amplify-components-avatar-error-color
69
+ );
70
+ --avatar-filled-color: var(
71
+ --amplify-components-avatar-error-background-color
72
+ );
73
+ }
74
+ .amplify-avatar--info {
75
+ --avatar-border-color: var(--amplify-components-avatar-info-border-color);
76
+ --avatar-background-color: var(
77
+ --amplify-components-avatar-info-background-color
78
+ );
79
+ --avatar-color: var(--amplify-components-avatar-info-color);
80
+ --avatar-filled-background-color: var(
81
+ --amplify-components-avatar-info-color
82
+ );
83
+ --avatar-filled-color: var(
84
+ --amplify-components-avatar-info-background-color
85
+ );
86
+ }
87
+ .amplify-avatar--success {
88
+ --avatar-border-color: var(
89
+ --amplify-components-avatar-success-border-color
90
+ );
91
+ --avatar-background-color: var(
92
+ --amplify-components-avatar-success-background-color
93
+ );
94
+ --avatar-color: var(--amplify-components-avatar-success-color);
95
+ --avatar-filled-background-color: var(
96
+ --amplify-components-avatar-success-color
97
+ );
98
+ --avatar-filled-color: var(
99
+ --amplify-components-avatar-success-background-color
100
+ );
101
+ }
102
+ .amplify-avatar__icon {
103
+ display: flex;
104
+ font-size: calc(var(--avatar-size) * 0.6);
105
+ }
106
+ .amplify-avatar__image {
107
+ width: 100%;
108
+ height: 100%;
109
+ -o-object-fit: cover;
110
+ object-fit: cover;
111
+ display: block;
112
+ }
113
+ }
package/dist/styles/base.css CHANGED
@@ -83,6 +83,35 @@
83
83
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
84
84
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
85
85
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
86
+ --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
87
+ --amplify-components-avatar-line-height: 1;
88
+ --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
89
+ --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
90
+ --amplify-components-avatar-text-align: center;
91
+ --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
92
+ --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
93
+ --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
94
+ --amplify-components-avatar-border-radius: 100%;
95
+ --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
96
+ --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
97
+ --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
98
+ --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
99
+ --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
100
+ --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
101
+ --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
102
+ --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
103
+ --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
104
+ --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
105
+ --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
106
+ --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
107
+ --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
108
+ --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
109
+ --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
110
+ --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
111
+ --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
112
+ --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
113
+ --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
114
+ --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
86
115
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
87
116
  --amplify-components-badge-line-height: 1;
88
117
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
@@ -672,6 +701,67 @@
672
701
  --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
673
702
  --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
674
703
  --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
704
+ --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
705
+ --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
706
+ --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
707
+ --amplify-components-fileuploader-dropzone-border-style: dashed;
708
+ --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small);
709
+ --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small);
710
+ --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl);
711
+ --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large);
712
+ --amplify-components-fileuploader-dropzone-text-align: center;
713
+ --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10);
714
+ --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius);
715
+ --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed);
716
+ --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style);
717
+ --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium);
718
+ --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary);
719
+ --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl);
720
+ --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary);
721
+ --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium);
722
+ --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold);
723
+ --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary);
724
+ --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small);
725
+ --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary);
726
+ --amplify-components-fileuploader-file-border-style: solid;
727
+ --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small);
728
+ --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs);
729
+ --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small);
730
+ --amplify-components-fileuploader-file-gap: var(--amplify-space-small);
731
+ --amplify-components-fileuploader-file-align-items: baseline;
732
+ --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium);
733
+ --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold);
734
+ --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary);
735
+ --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small);
736
+ --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal);
737
+ --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary);
738
+ --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl);
739
+ --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl);
740
+ --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary);
741
+ --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary);
742
+ --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small);
743
+ --amplify-components-fileuploader-filelist-flex-direction: column;
744
+ --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small);
745
+ --amplify-components-fileuploader-loader-stroke-linecap: round;
746
+ --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary);
747
+ --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled);
748
+ --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large);
749
+ --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary);
750
+ --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary);
751
+ --amplify-components-fileuploader-previewer-border-style: solid;
752
+ --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small);
753
+ --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small);
754
+ --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero);
755
+ --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero);
756
+ --amplify-components-fileuploader-previewer-max-height: 40rem;
757
+ --amplify-components-fileuploader-previewer-max-width: auto;
758
+ --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium);
759
+ --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold);
760
+ --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary);
761
+ --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium);
762
+ --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium);
763
+ --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small);
764
+ --amplify-components-fileuploader-previewer-footer-justify-content: flex-end;
675
765
  --amplify-components-flex-gap: var(--amplify-space-medium);
676
766
  --amplify-components-flex-justify-content: normal;
677
767
  --amplify-components-flex-align-items: stretch;