@aws-amplify/ui 6.3.0 → 6.4.0
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/esm/theme/tokens/components/avatar.mjs +49 -0
- package/dist/esm/theme/tokens/components/index.mjs +2 -0
- package/dist/esm/types/primitives/componentClassName.mjs +25 -0
- package/dist/index.js +74 -0
- package/dist/styles/AIConversation.css +108 -0
- package/dist/styles/AIConversation.layer.css +110 -0
- package/dist/styles/avatar.css +111 -0
- package/dist/styles/avatar.layer.css +113 -0
- package/dist/styles/base.css +29 -0
- package/dist/styles/base.layer.css +29 -0
- package/dist/styles.css +250 -0
- package/dist/styles.layer.css +250 -0
- package/dist/theme.css +29 -0
- package/dist/types/theme/components/avatar.d.ts +5 -0
- package/dist/types/theme/components/index.d.ts +3 -1
- package/dist/types/theme/tokens/components/avatar.d.ts +14 -0
- package/dist/types/theme/tokens/components/index.d.ts +2 -0
- package/dist/types/types/primitives/componentClassName.d.ts +25 -0
- package/package.json +1 -1
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
const avatar = {
|
|
2
|
+
// Default styles
|
|
3
|
+
color: { value: '{colors.font.tertiary.value}' },
|
|
4
|
+
lineHeight: { value: 1 },
|
|
5
|
+
fontWeight: { value: '{fontWeights.semibold.value}' },
|
|
6
|
+
fontSize: { value: '{fontSizes.small.value}' },
|
|
7
|
+
textAlign: { value: 'center' },
|
|
8
|
+
width: { value: '{fontSizes.xxl.value}' },
|
|
9
|
+
height: { value: '{fontSizes.xxl.value}' },
|
|
10
|
+
backgroundColor: { value: '{colors.background.tertiary}' },
|
|
11
|
+
borderRadius: { value: '100%' },
|
|
12
|
+
borderColor: { value: '{colors.border.primary.value}' },
|
|
13
|
+
borderWidth: { value: '{borderWidths.medium.value}' },
|
|
14
|
+
// Color Theme Variations
|
|
15
|
+
info: {
|
|
16
|
+
color: { value: '{colors.font.info.value}' },
|
|
17
|
+
backgroundColor: { value: '{colors.background.info.value}' },
|
|
18
|
+
borderColor: { value: '{colors.border.info.value}' },
|
|
19
|
+
},
|
|
20
|
+
warning: {
|
|
21
|
+
color: { value: '{colors.font.warning.value}' },
|
|
22
|
+
backgroundColor: { value: '{colors.background.warning.value}' },
|
|
23
|
+
borderColor: { value: '{colors.border.warning.value}' },
|
|
24
|
+
},
|
|
25
|
+
success: {
|
|
26
|
+
color: { value: '{colors.font.success.value}' },
|
|
27
|
+
backgroundColor: { value: '{colors.background.success.value}' },
|
|
28
|
+
borderColor: { value: '{colors.border.success.value}' },
|
|
29
|
+
},
|
|
30
|
+
error: {
|
|
31
|
+
color: { value: '{colors.font.error.value}' },
|
|
32
|
+
backgroundColor: { value: '{colors.background.error.value}' },
|
|
33
|
+
borderColor: { value: '{colors.border.error.value}' },
|
|
34
|
+
},
|
|
35
|
+
// Sizes
|
|
36
|
+
small: {
|
|
37
|
+
fontSize: { value: '{fontSizes.xs.value}' },
|
|
38
|
+
width: { value: '{fontSizes.xl.value}' },
|
|
39
|
+
height: { value: '{fontSizes.xl.value}' },
|
|
40
|
+
},
|
|
41
|
+
// medium is the default size
|
|
42
|
+
large: {
|
|
43
|
+
fontSize: { value: '{fontSizes.medium.value}' },
|
|
44
|
+
width: { value: '{fontSizes.xxxl.value}' },
|
|
45
|
+
height: { value: '{fontSizes.xxxl.value}' },
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { avatar };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { alert } from './alert.mjs';
|
|
2
2
|
import { autocomplete } from './autocomplete.mjs';
|
|
3
3
|
import { authenticator } from './authenticator.mjs';
|
|
4
|
+
import { avatar } from './avatar.mjs';
|
|
4
5
|
import { badge } from './badge.mjs';
|
|
5
6
|
import { breadcrumbs } from './breadcrumbs.mjs';
|
|
6
7
|
import { button } from './button.mjs';
|
|
@@ -57,6 +58,7 @@ const components = {
|
|
|
57
58
|
alert,
|
|
58
59
|
authenticator,
|
|
59
60
|
autocomplete,
|
|
61
|
+
avatar,
|
|
60
62
|
badge,
|
|
61
63
|
breadcrumbs,
|
|
62
64
|
button,
|
|
@@ -17,6 +17,31 @@ const ComponentClassName = {
|
|
|
17
17
|
AutocompleteMenuLoading: 'amplify-autocomplete__menu--loading',
|
|
18
18
|
AutocompleteMenuOption: 'amplify-autocomplete__menu__option',
|
|
19
19
|
AutocompleteMenuOptions: 'amplify-autocomplete__menu__options',
|
|
20
|
+
Avatar: 'amplify-avatar',
|
|
21
|
+
AvatarIcon: 'amplify-avatar__icon',
|
|
22
|
+
AvatarImage: 'amplify-avatar__image',
|
|
23
|
+
AIConversation: 'amplify-ai-conversation',
|
|
24
|
+
AIConversationAttachment: 'amplify-ai-conversation__attachment',
|
|
25
|
+
AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
|
|
26
|
+
AIConversationAttachmentImage: 'amplify-ai-conversation__attachment__image',
|
|
27
|
+
AIConversationAttachmentName: 'amplify-ai-conversation__attachment__name',
|
|
28
|
+
AIConversationAttachmentSize: 'amplify-ai-conversation__attachment__size',
|
|
29
|
+
AIConversationAttachmentRemove: 'amplify-ai-conversation__attachment__remove',
|
|
30
|
+
AIConversationForm: 'amplify-ai-conversation__form',
|
|
31
|
+
AIConversationFormAttach: 'amplify-ai-conversation__form__attach',
|
|
32
|
+
AIConversationFormSend: 'amplify-ai-conversation__form__send',
|
|
33
|
+
AIConversationFormField: 'amplify-ai-conversation__form__field',
|
|
34
|
+
AIConversationFormDropzone: 'amplify-ai-conversation__form__dropzone',
|
|
35
|
+
AIConversationMessage: 'amplify-ai-conversation__message',
|
|
36
|
+
AIConversationMessageAvatar: 'amplify-ai-conversation__message__avatar',
|
|
37
|
+
AIConversationMessageSender: 'amplify-ai-conversation__message__sender',
|
|
38
|
+
AIConversationMessageSenderUsername: 'amplify-ai-conversation__message__sender__username',
|
|
39
|
+
AIConversationMessageSenderTimestamp: 'amplify-ai-conversation__message__sender__timestamp',
|
|
40
|
+
AIConversationMessageBody: 'amplify-ai-conversation__message__body',
|
|
41
|
+
AIConversationMessageContent: 'amplify-ai-conversation__message__content',
|
|
42
|
+
AIConversationMessageActions: 'amplify-ai-conversation__message__actions',
|
|
43
|
+
AIConversationMessageList: 'amplify-ai-conversation__message__list',
|
|
44
|
+
AIConversationPrompt: 'amplify-ai-conversation__prompt',
|
|
20
45
|
Badge: 'amplify-badge',
|
|
21
46
|
Breadcrumbs: 'amplify-breadcrumbs',
|
|
22
47
|
BreadcrumbsList: 'amplify-breadcrumbs__list',
|
package/dist/index.js
CHANGED
|
@@ -2868,6 +2868,31 @@ const ComponentClassName = {
|
|
|
2868
2868
|
AutocompleteMenuLoading: 'amplify-autocomplete__menu--loading',
|
|
2869
2869
|
AutocompleteMenuOption: 'amplify-autocomplete__menu__option',
|
|
2870
2870
|
AutocompleteMenuOptions: 'amplify-autocomplete__menu__options',
|
|
2871
|
+
Avatar: 'amplify-avatar',
|
|
2872
|
+
AvatarIcon: 'amplify-avatar__icon',
|
|
2873
|
+
AvatarImage: 'amplify-avatar__image',
|
|
2874
|
+
AIConversation: 'amplify-ai-conversation',
|
|
2875
|
+
AIConversationAttachment: 'amplify-ai-conversation__attachment',
|
|
2876
|
+
AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
|
|
2877
|
+
AIConversationAttachmentImage: 'amplify-ai-conversation__attachment__image',
|
|
2878
|
+
AIConversationAttachmentName: 'amplify-ai-conversation__attachment__name',
|
|
2879
|
+
AIConversationAttachmentSize: 'amplify-ai-conversation__attachment__size',
|
|
2880
|
+
AIConversationAttachmentRemove: 'amplify-ai-conversation__attachment__remove',
|
|
2881
|
+
AIConversationForm: 'amplify-ai-conversation__form',
|
|
2882
|
+
AIConversationFormAttach: 'amplify-ai-conversation__form__attach',
|
|
2883
|
+
AIConversationFormSend: 'amplify-ai-conversation__form__send',
|
|
2884
|
+
AIConversationFormField: 'amplify-ai-conversation__form__field',
|
|
2885
|
+
AIConversationFormDropzone: 'amplify-ai-conversation__form__dropzone',
|
|
2886
|
+
AIConversationMessage: 'amplify-ai-conversation__message',
|
|
2887
|
+
AIConversationMessageAvatar: 'amplify-ai-conversation__message__avatar',
|
|
2888
|
+
AIConversationMessageSender: 'amplify-ai-conversation__message__sender',
|
|
2889
|
+
AIConversationMessageSenderUsername: 'amplify-ai-conversation__message__sender__username',
|
|
2890
|
+
AIConversationMessageSenderTimestamp: 'amplify-ai-conversation__message__sender__timestamp',
|
|
2891
|
+
AIConversationMessageBody: 'amplify-ai-conversation__message__body',
|
|
2892
|
+
AIConversationMessageContent: 'amplify-ai-conversation__message__content',
|
|
2893
|
+
AIConversationMessageActions: 'amplify-ai-conversation__message__actions',
|
|
2894
|
+
AIConversationMessageList: 'amplify-ai-conversation__message__list',
|
|
2895
|
+
AIConversationPrompt: 'amplify-ai-conversation__prompt',
|
|
2871
2896
|
Badge: 'amplify-badge',
|
|
2872
2897
|
Breadcrumbs: 'amplify-breadcrumbs',
|
|
2873
2898
|
BreadcrumbsList: 'amplify-breadcrumbs__list',
|
|
@@ -5563,6 +5588,54 @@ const authenticator = {
|
|
|
5563
5588
|
},
|
|
5564
5589
|
};
|
|
5565
5590
|
|
|
5591
|
+
const avatar = {
|
|
5592
|
+
// Default styles
|
|
5593
|
+
color: { value: '{colors.font.tertiary.value}' },
|
|
5594
|
+
lineHeight: { value: 1 },
|
|
5595
|
+
fontWeight: { value: '{fontWeights.semibold.value}' },
|
|
5596
|
+
fontSize: { value: '{fontSizes.small.value}' },
|
|
5597
|
+
textAlign: { value: 'center' },
|
|
5598
|
+
width: { value: '{fontSizes.xxl.value}' },
|
|
5599
|
+
height: { value: '{fontSizes.xxl.value}' },
|
|
5600
|
+
backgroundColor: { value: '{colors.background.tertiary}' },
|
|
5601
|
+
borderRadius: { value: '100%' },
|
|
5602
|
+
borderColor: { value: '{colors.border.primary.value}' },
|
|
5603
|
+
borderWidth: { value: '{borderWidths.medium.value}' },
|
|
5604
|
+
// Color Theme Variations
|
|
5605
|
+
info: {
|
|
5606
|
+
color: { value: '{colors.font.info.value}' },
|
|
5607
|
+
backgroundColor: { value: '{colors.background.info.value}' },
|
|
5608
|
+
borderColor: { value: '{colors.border.info.value}' },
|
|
5609
|
+
},
|
|
5610
|
+
warning: {
|
|
5611
|
+
color: { value: '{colors.font.warning.value}' },
|
|
5612
|
+
backgroundColor: { value: '{colors.background.warning.value}' },
|
|
5613
|
+
borderColor: { value: '{colors.border.warning.value}' },
|
|
5614
|
+
},
|
|
5615
|
+
success: {
|
|
5616
|
+
color: { value: '{colors.font.success.value}' },
|
|
5617
|
+
backgroundColor: { value: '{colors.background.success.value}' },
|
|
5618
|
+
borderColor: { value: '{colors.border.success.value}' },
|
|
5619
|
+
},
|
|
5620
|
+
error: {
|
|
5621
|
+
color: { value: '{colors.font.error.value}' },
|
|
5622
|
+
backgroundColor: { value: '{colors.background.error.value}' },
|
|
5623
|
+
borderColor: { value: '{colors.border.error.value}' },
|
|
5624
|
+
},
|
|
5625
|
+
// Sizes
|
|
5626
|
+
small: {
|
|
5627
|
+
fontSize: { value: '{fontSizes.xs.value}' },
|
|
5628
|
+
width: { value: '{fontSizes.xl.value}' },
|
|
5629
|
+
height: { value: '{fontSizes.xl.value}' },
|
|
5630
|
+
},
|
|
5631
|
+
// medium is the default size
|
|
5632
|
+
large: {
|
|
5633
|
+
fontSize: { value: '{fontSizes.medium.value}' },
|
|
5634
|
+
width: { value: '{fontSizes.xxxl.value}' },
|
|
5635
|
+
height: { value: '{fontSizes.xxxl.value}' },
|
|
5636
|
+
},
|
|
5637
|
+
};
|
|
5638
|
+
|
|
5566
5639
|
const badge = {
|
|
5567
5640
|
// Default styles
|
|
5568
5641
|
color: { value: '{colors.font.primary.value}' },
|
|
@@ -7983,6 +8056,7 @@ const components = {
|
|
|
7983
8056
|
alert,
|
|
7984
8057
|
authenticator,
|
|
7985
8058
|
autocomplete,
|
|
8059
|
+
avatar,
|
|
7986
8060
|
badge,
|
|
7987
8061
|
breadcrumbs,
|
|
7988
8062
|
button,
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
.amplify-ai-conversation {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
height: 100%;
|
|
5
|
+
}
|
|
6
|
+
.amplify-ai-conversation__message {
|
|
7
|
+
--content-bg: transparent;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: var(--flex-direction);
|
|
10
|
+
gap: var(--amplify-space-small);
|
|
11
|
+
padding: var(--amplify-space-small);
|
|
12
|
+
}
|
|
13
|
+
.amplify-ai-conversation__message__list {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
}
|
|
17
|
+
.amplify-ai-conversation__message__avatar {
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
}
|
|
20
|
+
.amplify-ai-conversation__message__sender {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: var(--flex-direction);
|
|
23
|
+
align-items: center;
|
|
24
|
+
height: var(--amplify-components-avatar-height);
|
|
25
|
+
gap: var(--amplify-space-small);
|
|
26
|
+
}
|
|
27
|
+
.amplify-ai-conversation__message__sender__username {
|
|
28
|
+
font-weight: bold;
|
|
29
|
+
}
|
|
30
|
+
.amplify-ai-conversation__message__sender__timestamp {
|
|
31
|
+
color: var(--amplify-colors-font-tertiary);
|
|
32
|
+
font-size: var(--amplify-font-sizes-small);
|
|
33
|
+
}
|
|
34
|
+
.amplify-ai-conversation__message__body {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
align-items: var(--body-align-items);
|
|
38
|
+
gap: var(--amplify-space-xs);
|
|
39
|
+
}
|
|
40
|
+
.amplify-ai-conversation__message__content {
|
|
41
|
+
background-color: var(--content-bg);
|
|
42
|
+
border-radius: var(--amplify-radii-medium);
|
|
43
|
+
padding: var(--content-padding);
|
|
44
|
+
}
|
|
45
|
+
.amplify-ai-conversation__message__actions {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
}
|
|
49
|
+
.amplify-ai-conversation__message--bubble {
|
|
50
|
+
--content-bg: var(--bg-color);
|
|
51
|
+
--content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
|
|
52
|
+
--flex-direction: row-reverse;
|
|
53
|
+
--body-align-items: flex-end;
|
|
54
|
+
}
|
|
55
|
+
.amplify-ai-conversation__message--user {
|
|
56
|
+
--bg-color: var(--amplify-colors-background-secondary);
|
|
57
|
+
}
|
|
58
|
+
.amplify-ai-conversation__message--assistant {
|
|
59
|
+
--bg-color: var(--amplify-colors-primary-10);
|
|
60
|
+
--flex-direction: row;
|
|
61
|
+
--body-align-items: flex-start;
|
|
62
|
+
}
|
|
63
|
+
.amplify-ai-conversation__form {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: row;
|
|
66
|
+
align-items: flex-start;
|
|
67
|
+
gap: var(--amplify-space-small);
|
|
68
|
+
}
|
|
69
|
+
.amplify-ai-conversation__form__dropzone {
|
|
70
|
+
text-align: initial;
|
|
71
|
+
border: none;
|
|
72
|
+
padding: var(--amplify-space-xs);
|
|
73
|
+
}
|
|
74
|
+
.amplify-ai-conversation__attachment {
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: row;
|
|
77
|
+
padding-block: var(--amplify-space-xxxs);
|
|
78
|
+
padding-inline: var(--amplify-space-xs);
|
|
79
|
+
border-width: var(--amplify-border-widths-small);
|
|
80
|
+
border-style: solid;
|
|
81
|
+
border-color: var(--amplify-colors-border-secondary);
|
|
82
|
+
border-radius: var(--amplify-radii-small);
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: var(--amplify-space-xs);
|
|
85
|
+
font-size: var(--amplify-font-sizes-small);
|
|
86
|
+
}
|
|
87
|
+
.amplify-ai-conversation__attachment__list {
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: row;
|
|
90
|
+
flex-wrap: wrap;
|
|
91
|
+
gap: var(--amplify-space-small);
|
|
92
|
+
padding-block-start: var(--amplify-space-small);
|
|
93
|
+
}
|
|
94
|
+
.amplify-ai-conversation__attachment__image {
|
|
95
|
+
width: 1rem;
|
|
96
|
+
height: 1rem;
|
|
97
|
+
-o-object-fit: cover;
|
|
98
|
+
object-fit: cover;
|
|
99
|
+
}
|
|
100
|
+
.amplify-ai-conversation__attachment__size {
|
|
101
|
+
color: var(--amplify-colors-font-tertiary);
|
|
102
|
+
}
|
|
103
|
+
.amplify-ai-conversation__attachment__remove {
|
|
104
|
+
padding: var(--amplify-space-xxs);
|
|
105
|
+
}
|
|
106
|
+
.amplify-ai-conversation__prompt {
|
|
107
|
+
font-weight: normal;
|
|
108
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
@layer amplify.components {
|
|
2
|
+
.amplify-ai-conversation {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
.amplify-ai-conversation__message {
|
|
8
|
+
--content-bg: transparent;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: var(--flex-direction);
|
|
11
|
+
gap: var(--amplify-space-small);
|
|
12
|
+
padding: var(--amplify-space-small);
|
|
13
|
+
}
|
|
14
|
+
.amplify-ai-conversation__message__list {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
}
|
|
18
|
+
.amplify-ai-conversation__message__avatar {
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
}
|
|
21
|
+
.amplify-ai-conversation__message__sender {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: var(--flex-direction);
|
|
24
|
+
align-items: center;
|
|
25
|
+
height: var(--amplify-components-avatar-height);
|
|
26
|
+
gap: var(--amplify-space-small);
|
|
27
|
+
}
|
|
28
|
+
.amplify-ai-conversation__message__sender__username {
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
}
|
|
31
|
+
.amplify-ai-conversation__message__sender__timestamp {
|
|
32
|
+
color: var(--amplify-colors-font-tertiary);
|
|
33
|
+
font-size: var(--amplify-font-sizes-small);
|
|
34
|
+
}
|
|
35
|
+
.amplify-ai-conversation__message__body {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-items: var(--body-align-items);
|
|
39
|
+
gap: var(--amplify-space-xs);
|
|
40
|
+
}
|
|
41
|
+
.amplify-ai-conversation__message__content {
|
|
42
|
+
background-color: var(--content-bg);
|
|
43
|
+
border-radius: var(--amplify-radii-medium);
|
|
44
|
+
padding: var(--content-padding);
|
|
45
|
+
}
|
|
46
|
+
.amplify-ai-conversation__message__actions {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: row;
|
|
49
|
+
}
|
|
50
|
+
.amplify-ai-conversation__message--bubble {
|
|
51
|
+
--content-bg: var(--bg-color);
|
|
52
|
+
--content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
|
|
53
|
+
--flex-direction: row-reverse;
|
|
54
|
+
--body-align-items: flex-end;
|
|
55
|
+
}
|
|
56
|
+
.amplify-ai-conversation__message--user {
|
|
57
|
+
--bg-color: var(--amplify-colors-background-secondary);
|
|
58
|
+
}
|
|
59
|
+
.amplify-ai-conversation__message--assistant {
|
|
60
|
+
--bg-color: var(--amplify-colors-primary-10);
|
|
61
|
+
--flex-direction: row;
|
|
62
|
+
--body-align-items: flex-start;
|
|
63
|
+
}
|
|
64
|
+
.amplify-ai-conversation__form {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: row;
|
|
67
|
+
align-items: flex-start;
|
|
68
|
+
gap: var(--amplify-space-small);
|
|
69
|
+
}
|
|
70
|
+
.amplify-ai-conversation__form__dropzone {
|
|
71
|
+
text-align: initial;
|
|
72
|
+
border: none;
|
|
73
|
+
padding: var(--amplify-space-xs);
|
|
74
|
+
}
|
|
75
|
+
.amplify-ai-conversation__attachment {
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: row;
|
|
78
|
+
padding-block: var(--amplify-space-xxxs);
|
|
79
|
+
padding-inline: var(--amplify-space-xs);
|
|
80
|
+
border-width: var(--amplify-border-widths-small);
|
|
81
|
+
border-style: solid;
|
|
82
|
+
border-color: var(--amplify-colors-border-secondary);
|
|
83
|
+
border-radius: var(--amplify-radii-small);
|
|
84
|
+
align-items: center;
|
|
85
|
+
gap: var(--amplify-space-xs);
|
|
86
|
+
font-size: var(--amplify-font-sizes-small);
|
|
87
|
+
}
|
|
88
|
+
.amplify-ai-conversation__attachment__list {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: row;
|
|
91
|
+
flex-wrap: wrap;
|
|
92
|
+
gap: var(--amplify-space-small);
|
|
93
|
+
padding-block-start: var(--amplify-space-small);
|
|
94
|
+
}
|
|
95
|
+
.amplify-ai-conversation__attachment__image {
|
|
96
|
+
width: 1rem;
|
|
97
|
+
height: 1rem;
|
|
98
|
+
-o-object-fit: cover;
|
|
99
|
+
object-fit: cover;
|
|
100
|
+
}
|
|
101
|
+
.amplify-ai-conversation__attachment__size {
|
|
102
|
+
color: var(--amplify-colors-font-tertiary);
|
|
103
|
+
}
|
|
104
|
+
.amplify-ai-conversation__attachment__remove {
|
|
105
|
+
padding: var(--amplify-space-xxs);
|
|
106
|
+
}
|
|
107
|
+
.amplify-ai-conversation__prompt {
|
|
108
|
+
font-weight: normal;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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);
|