@aws-amplify/ui 6.14.0 → 6.15.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/styles/StorageBrowser.css +0 -1
- package/dist/styles/StorageBrowser.layer.css +0 -1
- package/dist/styles/modal.css +81 -0
- package/dist/styles/modal.layer.css +83 -0
- package/dist/styles.css +83 -1
- package/dist/styles.layer.css +83 -1
- package/dist/types/theme/components/index.d.ts +3 -1
- package/dist/types/theme/components/modal.d.ts +10 -0
- package/package.json +1 -1
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/* Modal component with highest specificity to override global resets */
|
|
2
|
+
.amplify-modal__overlay.amplify-modal__overlay {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
bottom: 0;
|
|
8
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
9
|
+
z-index: 1000;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.amplify-modal__content.amplify-modal__content {
|
|
17
|
+
background-color: var(--amplify-colors-background-primary);
|
|
18
|
+
padding: var(--amplify-space-large);
|
|
19
|
+
border-radius: var(--amplify-radii-medium);
|
|
20
|
+
box-shadow: var(--amplify-shadows-large);
|
|
21
|
+
max-width: 500px;
|
|
22
|
+
width: 90%;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.amplify-modal__header.amplify-modal__header {
|
|
27
|
+
margin-bottom: var(--amplify-space-medium);
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: space-between;
|
|
30
|
+
align-items: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.amplify-modal__title.amplify-modal__title {
|
|
34
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
35
|
+
font-size: var(--amplify-font-sizes-large);
|
|
36
|
+
margin: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.amplify-modal__close-button.amplify-modal__close-button {
|
|
40
|
+
background: none;
|
|
41
|
+
border: none;
|
|
42
|
+
font-size: var(--amplify-font-sizes-large);
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
padding: var(--amplify-space-xs);
|
|
45
|
+
color: var(--amplify-colors-font-secondary);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.amplify-modal__close-button.amplify-modal__close-button:hover {
|
|
49
|
+
color: var(--amplify-colors-font-primary);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.amplify-modal__body.amplify-modal__body {
|
|
53
|
+
margin-bottom: var(--amplify-space-medium);
|
|
54
|
+
color: var(--amplify-colors-font-primary);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.amplify-modal__footer.amplify-modal__footer {
|
|
58
|
+
display: flex;
|
|
59
|
+
gap: var(--amplify-space-xs);
|
|
60
|
+
justify-content: flex-end;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.amplify-modal__list-title.amplify-modal__list-title {
|
|
64
|
+
margin-bottom: var(--amplify-space-xs);
|
|
65
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.amplify-modal__list.amplify-modal__list {
|
|
70
|
+
margin: var(--amplify-space-xs) 0;
|
|
71
|
+
padding-left: var(--amplify-space-medium);
|
|
72
|
+
max-height: 250px;
|
|
73
|
+
overflow-y: auto;
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
list-style: disc;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.amplify-modal__list-item.amplify-modal__list-item {
|
|
79
|
+
margin-bottom: var(--amplify-space-xxs);
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
@layer amplify.components {
|
|
2
|
+
/* Modal component with highest specificity to override global resets */
|
|
3
|
+
.amplify-modal__overlay.amplify-modal__overlay {
|
|
4
|
+
position: fixed;
|
|
5
|
+
top: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
10
|
+
z-index: 1000;
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.amplify-modal__content.amplify-modal__content {
|
|
18
|
+
background-color: var(--amplify-colors-background-primary);
|
|
19
|
+
padding: var(--amplify-space-large);
|
|
20
|
+
border-radius: var(--amplify-radii-medium);
|
|
21
|
+
box-shadow: var(--amplify-shadows-large);
|
|
22
|
+
max-width: 500px;
|
|
23
|
+
width: 90%;
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.amplify-modal__header.amplify-modal__header {
|
|
28
|
+
margin-bottom: var(--amplify-space-medium);
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: space-between;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.amplify-modal__title.amplify-modal__title {
|
|
35
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
36
|
+
font-size: var(--amplify-font-sizes-large);
|
|
37
|
+
margin: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.amplify-modal__close-button.amplify-modal__close-button {
|
|
41
|
+
background: none;
|
|
42
|
+
border: none;
|
|
43
|
+
font-size: var(--amplify-font-sizes-large);
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
padding: var(--amplify-space-xs);
|
|
46
|
+
color: var(--amplify-colors-font-secondary);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.amplify-modal__close-button.amplify-modal__close-button:hover {
|
|
50
|
+
color: var(--amplify-colors-font-primary);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.amplify-modal__body.amplify-modal__body {
|
|
54
|
+
margin-bottom: var(--amplify-space-medium);
|
|
55
|
+
color: var(--amplify-colors-font-primary);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.amplify-modal__footer.amplify-modal__footer {
|
|
59
|
+
display: flex;
|
|
60
|
+
gap: var(--amplify-space-xs);
|
|
61
|
+
justify-content: flex-end;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.amplify-modal__list-title.amplify-modal__list-title {
|
|
65
|
+
margin-bottom: var(--amplify-space-xs);
|
|
66
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
67
|
+
box-sizing: border-box;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.amplify-modal__list.amplify-modal__list {
|
|
71
|
+
margin: var(--amplify-space-xs) 0;
|
|
72
|
+
padding-left: var(--amplify-space-medium);
|
|
73
|
+
max-height: 250px;
|
|
74
|
+
overflow-y: auto;
|
|
75
|
+
box-sizing: border-box;
|
|
76
|
+
list-style: disc;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.amplify-modal__list-item.amplify-modal__list-item {
|
|
80
|
+
margin-bottom: var(--amplify-space-xxs);
|
|
81
|
+
box-sizing: border-box;
|
|
82
|
+
}
|
|
83
|
+
}
|
package/dist/styles.css
CHANGED
|
@@ -4816,6 +4816,88 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4816
4816
|
gap: var(--amplify-components-message-dismiss-gap);
|
|
4817
4817
|
}
|
|
4818
4818
|
|
|
4819
|
+
/* Modal component with highest specificity to override global resets */
|
|
4820
|
+
.amplify-modal__overlay.amplify-modal__overlay {
|
|
4821
|
+
position: fixed;
|
|
4822
|
+
top: 0;
|
|
4823
|
+
left: 0;
|
|
4824
|
+
right: 0;
|
|
4825
|
+
bottom: 0;
|
|
4826
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
4827
|
+
z-index: 1000;
|
|
4828
|
+
display: flex;
|
|
4829
|
+
align-items: center;
|
|
4830
|
+
justify-content: center;
|
|
4831
|
+
box-sizing: border-box;
|
|
4832
|
+
}
|
|
4833
|
+
|
|
4834
|
+
.amplify-modal__content.amplify-modal__content {
|
|
4835
|
+
background-color: var(--amplify-colors-background-primary);
|
|
4836
|
+
padding: var(--amplify-space-large);
|
|
4837
|
+
border-radius: var(--amplify-radii-medium);
|
|
4838
|
+
box-shadow: var(--amplify-shadows-large);
|
|
4839
|
+
max-width: 500px;
|
|
4840
|
+
width: 90%;
|
|
4841
|
+
box-sizing: border-box;
|
|
4842
|
+
}
|
|
4843
|
+
|
|
4844
|
+
.amplify-modal__header.amplify-modal__header {
|
|
4845
|
+
margin-bottom: var(--amplify-space-medium);
|
|
4846
|
+
display: flex;
|
|
4847
|
+
justify-content: space-between;
|
|
4848
|
+
align-items: center;
|
|
4849
|
+
}
|
|
4850
|
+
|
|
4851
|
+
.amplify-modal__title.amplify-modal__title {
|
|
4852
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
4853
|
+
font-size: var(--amplify-font-sizes-large);
|
|
4854
|
+
margin: 0;
|
|
4855
|
+
}
|
|
4856
|
+
|
|
4857
|
+
.amplify-modal__close-button.amplify-modal__close-button {
|
|
4858
|
+
background: none;
|
|
4859
|
+
border: none;
|
|
4860
|
+
font-size: var(--amplify-font-sizes-large);
|
|
4861
|
+
cursor: pointer;
|
|
4862
|
+
padding: var(--amplify-space-xs);
|
|
4863
|
+
color: var(--amplify-colors-font-secondary);
|
|
4864
|
+
}
|
|
4865
|
+
|
|
4866
|
+
.amplify-modal__close-button.amplify-modal__close-button:hover {
|
|
4867
|
+
color: var(--amplify-colors-font-primary);
|
|
4868
|
+
}
|
|
4869
|
+
|
|
4870
|
+
.amplify-modal__body.amplify-modal__body {
|
|
4871
|
+
margin-bottom: var(--amplify-space-medium);
|
|
4872
|
+
color: var(--amplify-colors-font-primary);
|
|
4873
|
+
}
|
|
4874
|
+
|
|
4875
|
+
.amplify-modal__footer.amplify-modal__footer {
|
|
4876
|
+
display: flex;
|
|
4877
|
+
gap: var(--amplify-space-xs);
|
|
4878
|
+
justify-content: flex-end;
|
|
4879
|
+
}
|
|
4880
|
+
|
|
4881
|
+
.amplify-modal__list-title.amplify-modal__list-title {
|
|
4882
|
+
margin-bottom: var(--amplify-space-xs);
|
|
4883
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
4884
|
+
box-sizing: border-box;
|
|
4885
|
+
}
|
|
4886
|
+
|
|
4887
|
+
.amplify-modal__list.amplify-modal__list {
|
|
4888
|
+
margin: var(--amplify-space-xs) 0;
|
|
4889
|
+
padding-left: var(--amplify-space-medium);
|
|
4890
|
+
max-height: 250px;
|
|
4891
|
+
overflow-y: auto;
|
|
4892
|
+
box-sizing: border-box;
|
|
4893
|
+
list-style: disc;
|
|
4894
|
+
}
|
|
4895
|
+
|
|
4896
|
+
.amplify-modal__list-item.amplify-modal__list-item {
|
|
4897
|
+
margin-bottom: var(--amplify-space-xxs);
|
|
4898
|
+
box-sizing: border-box;
|
|
4899
|
+
}
|
|
4900
|
+
|
|
4819
4901
|
.amplify-pagination {
|
|
4820
4902
|
list-style-type: none;
|
|
4821
4903
|
}
|
|
@@ -7024,7 +7106,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
7024
7106
|
animation-timing-function: linear;
|
|
7025
7107
|
animation-name: spin;
|
|
7026
7108
|
}
|
|
7027
|
-
|
|
7028
7109
|
@keyframes spin {
|
|
7029
7110
|
0% {
|
|
7030
7111
|
transform: rotate(0deg);
|
|
@@ -7036,6 +7117,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
7036
7117
|
transform: rotate(360deg);
|
|
7037
7118
|
}
|
|
7038
7119
|
}
|
|
7120
|
+
|
|
7039
7121
|
.amplify-ai-conversation {
|
|
7040
7122
|
display: flex;
|
|
7041
7123
|
flex-direction: column;
|
package/dist/styles.layer.css
CHANGED
|
@@ -4817,6 +4817,88 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
4817
4817
|
gap: var(--amplify-components-message-dismiss-gap);
|
|
4818
4818
|
}
|
|
4819
4819
|
|
|
4820
|
+
/* Modal component with highest specificity to override global resets */
|
|
4821
|
+
.amplify-modal__overlay.amplify-modal__overlay {
|
|
4822
|
+
position: fixed;
|
|
4823
|
+
top: 0;
|
|
4824
|
+
left: 0;
|
|
4825
|
+
right: 0;
|
|
4826
|
+
bottom: 0;
|
|
4827
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
4828
|
+
z-index: 1000;
|
|
4829
|
+
display: flex;
|
|
4830
|
+
align-items: center;
|
|
4831
|
+
justify-content: center;
|
|
4832
|
+
box-sizing: border-box;
|
|
4833
|
+
}
|
|
4834
|
+
|
|
4835
|
+
.amplify-modal__content.amplify-modal__content {
|
|
4836
|
+
background-color: var(--amplify-colors-background-primary);
|
|
4837
|
+
padding: var(--amplify-space-large);
|
|
4838
|
+
border-radius: var(--amplify-radii-medium);
|
|
4839
|
+
box-shadow: var(--amplify-shadows-large);
|
|
4840
|
+
max-width: 500px;
|
|
4841
|
+
width: 90%;
|
|
4842
|
+
box-sizing: border-box;
|
|
4843
|
+
}
|
|
4844
|
+
|
|
4845
|
+
.amplify-modal__header.amplify-modal__header {
|
|
4846
|
+
margin-bottom: var(--amplify-space-medium);
|
|
4847
|
+
display: flex;
|
|
4848
|
+
justify-content: space-between;
|
|
4849
|
+
align-items: center;
|
|
4850
|
+
}
|
|
4851
|
+
|
|
4852
|
+
.amplify-modal__title.amplify-modal__title {
|
|
4853
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
4854
|
+
font-size: var(--amplify-font-sizes-large);
|
|
4855
|
+
margin: 0;
|
|
4856
|
+
}
|
|
4857
|
+
|
|
4858
|
+
.amplify-modal__close-button.amplify-modal__close-button {
|
|
4859
|
+
background: none;
|
|
4860
|
+
border: none;
|
|
4861
|
+
font-size: var(--amplify-font-sizes-large);
|
|
4862
|
+
cursor: pointer;
|
|
4863
|
+
padding: var(--amplify-space-xs);
|
|
4864
|
+
color: var(--amplify-colors-font-secondary);
|
|
4865
|
+
}
|
|
4866
|
+
|
|
4867
|
+
.amplify-modal__close-button.amplify-modal__close-button:hover {
|
|
4868
|
+
color: var(--amplify-colors-font-primary);
|
|
4869
|
+
}
|
|
4870
|
+
|
|
4871
|
+
.amplify-modal__body.amplify-modal__body {
|
|
4872
|
+
margin-bottom: var(--amplify-space-medium);
|
|
4873
|
+
color: var(--amplify-colors-font-primary);
|
|
4874
|
+
}
|
|
4875
|
+
|
|
4876
|
+
.amplify-modal__footer.amplify-modal__footer {
|
|
4877
|
+
display: flex;
|
|
4878
|
+
gap: var(--amplify-space-xs);
|
|
4879
|
+
justify-content: flex-end;
|
|
4880
|
+
}
|
|
4881
|
+
|
|
4882
|
+
.amplify-modal__list-title.amplify-modal__list-title {
|
|
4883
|
+
margin-bottom: var(--amplify-space-xs);
|
|
4884
|
+
font-weight: var(--amplify-font-weights-bold);
|
|
4885
|
+
box-sizing: border-box;
|
|
4886
|
+
}
|
|
4887
|
+
|
|
4888
|
+
.amplify-modal__list.amplify-modal__list {
|
|
4889
|
+
margin: var(--amplify-space-xs) 0;
|
|
4890
|
+
padding-left: var(--amplify-space-medium);
|
|
4891
|
+
max-height: 250px;
|
|
4892
|
+
overflow-y: auto;
|
|
4893
|
+
box-sizing: border-box;
|
|
4894
|
+
list-style: disc;
|
|
4895
|
+
}
|
|
4896
|
+
|
|
4897
|
+
.amplify-modal__list-item.amplify-modal__list-item {
|
|
4898
|
+
margin-bottom: var(--amplify-space-xxs);
|
|
4899
|
+
box-sizing: border-box;
|
|
4900
|
+
}
|
|
4901
|
+
|
|
4820
4902
|
.amplify-pagination {
|
|
4821
4903
|
list-style-type: none;
|
|
4822
4904
|
}
|
|
@@ -7025,7 +7107,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
7025
7107
|
animation-timing-function: linear;
|
|
7026
7108
|
animation-name: spin;
|
|
7027
7109
|
}
|
|
7028
|
-
|
|
7029
7110
|
@keyframes spin {
|
|
7030
7111
|
0% {
|
|
7031
7112
|
transform: rotate(0deg);
|
|
@@ -7037,6 +7118,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
7037
7118
|
transform: rotate(360deg);
|
|
7038
7119
|
}
|
|
7039
7120
|
}
|
|
7121
|
+
|
|
7040
7122
|
.amplify-ai-conversation {
|
|
7041
7123
|
display: flex;
|
|
7042
7124
|
flex-direction: column;
|
|
@@ -24,6 +24,7 @@ import type { InputTheme } from './input';
|
|
|
24
24
|
import type { LoaderTheme } from './loader';
|
|
25
25
|
import type { MenuTheme } from './menu';
|
|
26
26
|
import type { MessageTheme } from './message';
|
|
27
|
+
import type { ModalTheme } from './modal';
|
|
27
28
|
import type { PaginationTheme } from './pagination';
|
|
28
29
|
import type { PlaceholderTheme } from './placeholder';
|
|
29
30
|
import type { RadioTheme } from './radio';
|
|
@@ -47,7 +48,7 @@ import type { ToggleButtonTheme, ToggleButtonGroupTheme } from './toggleButton';
|
|
|
47
48
|
import type { ComponentTheme, BaseComponentTheme, BaseTheme } from './utils';
|
|
48
49
|
export type { ClassNameFunction } from '../createTheme/createComponentClasses';
|
|
49
50
|
export type { ComponentTheme, BaseComponentTheme, BaseTheme };
|
|
50
|
-
export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AIConversationTheme, 'ai-conversation', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<AvatarTheme, 'avatar', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<FileUploaderTheme, 'fileuploader', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageBrowserTheme, 'storage-browser', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
|
|
51
|
+
export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AIConversationTheme, 'ai-conversation', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<AvatarTheme, 'avatar', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<FileUploaderTheme, 'fileuploader', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<ModalTheme, 'modal', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageBrowserTheme, 'storage-browser', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
|
|
51
52
|
export type AllComponentThemes = {
|
|
52
53
|
accordion: AccordionTheme;
|
|
53
54
|
'ai-conversation': AIConversationTheme;
|
|
@@ -74,6 +75,7 @@ export type AllComponentThemes = {
|
|
|
74
75
|
loader: LoaderTheme;
|
|
75
76
|
menu: MenuTheme;
|
|
76
77
|
message: MessageTheme;
|
|
78
|
+
modal: ModalTheme;
|
|
77
79
|
pagination: PaginationTheme;
|
|
78
80
|
placeholder: PlaceholderTheme;
|
|
79
81
|
radio: RadioTheme;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ComponentStyles, Elements } from './utils';
|
|
2
|
+
export type ModalTheme<Required extends boolean = false> = ComponentStyles & Elements<{
|
|
3
|
+
overlay?: ComponentStyles;
|
|
4
|
+
content?: ComponentStyles;
|
|
5
|
+
header?: ComponentStyles;
|
|
6
|
+
title?: ComponentStyles;
|
|
7
|
+
body?: ComponentStyles;
|
|
8
|
+
footer?: ComponentStyles;
|
|
9
|
+
'close-button'?: ComponentStyles;
|
|
10
|
+
}, Required>;
|