@veracity/vui 1.9.1 → 2.0.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/cjs/avatar/avatar.js +1 -1
- package/dist/cjs/badge/badge.d.ts +9 -0
- package/dist/cjs/badge/badge.d.ts.map +1 -0
- package/dist/cjs/badge/badge.js +35 -0
- package/dist/cjs/badge/badge.types.d.ts +17 -0
- package/dist/cjs/badge/badge.types.d.ts.map +1 -0
- package/dist/cjs/badge/badge.types.js +2 -0
- package/dist/cjs/badge/index.d.ts +3 -0
- package/dist/cjs/badge/index.d.ts.map +1 -0
- package/dist/cjs/badge/index.js +23 -0
- package/dist/cjs/badge/theme.d.ts +130 -0
- package/dist/cjs/badge/theme.d.ts.map +1 -0
- package/dist/cjs/badge/theme.js +135 -0
- package/dist/cjs/button/button.d.ts +1 -1
- package/dist/cjs/button/button.d.ts.map +1 -1
- package/dist/cjs/button/button.js +16 -23
- package/dist/cjs/button/button.types.d.ts +3 -4
- package/dist/cjs/button/button.types.d.ts.map +1 -1
- package/dist/cjs/button/buttons.js +8 -8
- package/dist/cjs/button/consts.js +3 -3
- package/dist/cjs/button/theme.d.ts +204 -44
- package/dist/cjs/button/theme.d.ts.map +1 -1
- package/dist/cjs/button/theme.js +220 -54
- package/dist/cjs/buttonGroup/buttonGroup.d.ts.map +1 -1
- package/dist/cjs/buttonGroup/buttonGroup.js +5 -5
- package/dist/cjs/buttonGroup/buttonGroup.types.d.ts +2 -3
- package/dist/cjs/buttonGroup/buttonGroup.types.d.ts.map +1 -1
- package/dist/cjs/buttonGroup/helpers.d.ts.map +1 -1
- package/dist/cjs/buttonGroup/helpers.js +2 -3
- package/dist/cjs/buttonToggleGroup/buttonToggleGroup.d.ts.map +1 -1
- package/dist/cjs/buttonToggleGroup/buttonToggleGroup.js +1 -1
- package/dist/cjs/checkbox/checkbox.js +1 -1
- package/dist/cjs/copyToClipboard/copyToClipboard.js +1 -1
- package/dist/cjs/core/vuiProvider/globalStyle.d.ts.map +1 -1
- package/dist/cjs/core/vuiProvider/globalStyle.js +55 -38
- package/dist/cjs/footer/footerTrademark.js +1 -1
- package/dist/cjs/heading/heading.d.ts.map +1 -1
- package/dist/cjs/heading/heading.js +7 -1
- package/dist/cjs/heading/heading.types.d.ts +1 -0
- package/dist/cjs/heading/heading.types.d.ts.map +1 -1
- package/dist/cjs/heading/theme.d.ts +67 -9
- package/dist/cjs/heading/theme.d.ts.map +1 -1
- package/dist/cjs/heading/theme.js +69 -11
- package/dist/cjs/icon/icon.types.d.ts +1 -1
- package/dist/cjs/icon/icon.types.d.ts.map +1 -1
- package/dist/cjs/icon/theme.d.ts +5 -0
- package/dist/cjs/icon/theme.d.ts.map +1 -1
- package/dist/cjs/icon/theme.js +5 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/input/input.js +1 -1
- package/dist/cjs/input/inputInput.js +1 -1
- package/dist/cjs/link/link.d.ts.map +1 -1
- package/dist/cjs/link/link.js +3 -3
- package/dist/cjs/link/link.types.d.ts +1 -1
- package/dist/cjs/link/link.types.d.ts.map +1 -1
- package/dist/cjs/link/theme.d.ts +21 -4
- package/dist/cjs/link/theme.d.ts.map +1 -1
- package/dist/cjs/link/theme.js +30 -17
- package/dist/cjs/list/listItem.d.ts.map +1 -1
- package/dist/cjs/list/listItem.js +6 -2
- package/dist/cjs/notification/consts.js +10 -10
- package/dist/cjs/notification/notification.d.ts.map +1 -1
- package/dist/cjs/notification/notification.js +10 -8
- package/dist/cjs/notification/notification.types.d.ts +2 -2
- package/dist/cjs/notification/notification.types.d.ts.map +1 -1
- package/dist/cjs/notification/notificationButton.d.ts.map +1 -1
- package/dist/cjs/notification/notificationButton.js +5 -1
- package/dist/cjs/notification/notificationIcon.d.ts.map +1 -1
- package/dist/cjs/notification/notificationIcon.js +3 -2
- package/dist/cjs/notification/notificationText.d.ts.map +1 -1
- package/dist/cjs/notification/notificationText.js +1 -1
- package/dist/cjs/notification/notificationTitle.d.ts +2 -2
- package/dist/cjs/notification/notificationTitle.d.ts.map +1 -1
- package/dist/cjs/notification/notificationTitle.js +2 -2
- package/dist/cjs/notification/theme.d.ts +31 -16
- package/dist/cjs/notification/theme.d.ts.map +1 -1
- package/dist/cjs/notification/theme.js +32 -26
- package/dist/cjs/onedesign-tokens/dist/js/es6/rem/button.d.ts +85 -0
- package/dist/cjs/onedesign-tokens/dist/js/es6/rem/button.d.ts.map +1 -0
- package/dist/cjs/onedesign-tokens/dist/js/es6/rem/button.js +88 -0
- package/dist/cjs/p/theme.d.ts +0 -8
- package/dist/cjs/p/theme.d.ts.map +1 -1
- package/dist/cjs/p/theme.js +3 -11
- package/dist/cjs/progress/progress.js +1 -1
- package/dist/cjs/select/selectButton.js +1 -1
- package/dist/cjs/sidemenu/sidemenu.js +1 -1
- package/dist/cjs/sidemenu/sidemenuItem.js +2 -2
- package/dist/cjs/t/theme.d.ts +10 -1
- package/dist/cjs/t/theme.d.ts.map +1 -1
- package/dist/cjs/t/theme.js +10 -1
- package/dist/cjs/table/tbody.d.ts.map +1 -1
- package/dist/cjs/table/tbody.js +4 -0
- package/dist/cjs/table/theme.d.ts +5 -0
- package/dist/cjs/table/theme.d.ts.map +1 -1
- package/dist/cjs/table/theme.js +6 -1
- package/dist/cjs/tabs/tabs.types.d.ts +2 -2
- package/dist/cjs/tabs/tabs.types.d.ts.map +1 -1
- package/dist/cjs/tabs/tabsNavBar.d.ts.map +1 -1
- package/dist/cjs/tabs/tabsNavBar.js +13 -5
- package/dist/cjs/tabs/theme.d.ts +40 -4
- package/dist/cjs/tabs/theme.d.ts.map +1 -1
- package/dist/cjs/tabs/theme.js +41 -4
- package/dist/cjs/tag/tag.js +9 -6
- package/dist/cjs/tag/tag.types.d.ts +4 -3
- package/dist/cjs/tag/tag.types.d.ts.map +1 -1
- package/dist/cjs/tag/tagButton.d.ts.map +1 -1
- package/dist/cjs/tag/tagButton.js +1 -1
- package/dist/cjs/tag/theme.d.ts +178 -32
- package/dist/cjs/tag/theme.d.ts.map +1 -1
- package/dist/cjs/tag/theme.js +182 -65
- package/dist/cjs/textarea/textarea.js +1 -1
- package/dist/cjs/theme/components.d.ts +624 -47
- package/dist/cjs/theme/components.d.ts.map +1 -1
- package/dist/cjs/theme/components.js +76 -74
- package/dist/cjs/theme/defaultTheme.d.ts +916 -48
- package/dist/cjs/theme/defaultTheme.d.ts.map +1 -1
- package/dist/cjs/theme/foundations/colors.d.ts +523 -0
- package/dist/cjs/theme/foundations/colors.d.ts.map +1 -1
- package/dist/cjs/theme/foundations/colors.js +389 -1
- package/dist/cjs/theme/foundations/fontWeights.d.ts +0 -1
- package/dist/cjs/theme/foundations/fontWeights.d.ts.map +1 -1
- package/dist/cjs/theme/foundations/fontWeights.js +1 -2
- package/dist/cjs/theme/foundations/index.d.ts +292 -1
- package/dist/cjs/theme/foundations/index.d.ts.map +1 -1
- package/dist/cjs/theme/foundations/radii.d.ts +5 -0
- package/dist/cjs/theme/foundations/radii.d.ts.map +1 -1
- package/dist/cjs/theme/foundations/radii.js +8 -3
- package/dist/cjs/toast/useToast.d.ts.map +1 -1
- package/dist/cjs/toast/useToast.js +1 -1
- package/dist/cjs/tutorial/tutorialCard.d.ts.map +1 -1
- package/dist/cjs/tutorial/tutorialCard.js +3 -3
- package/dist/esm/avatar/avatar.js +1 -1
- package/dist/esm/badge/badge.d.ts +9 -0
- package/dist/esm/badge/badge.d.ts.map +1 -0
- package/dist/esm/badge/badge.js +17 -0
- package/dist/esm/badge/badge.types.d.ts +17 -0
- package/dist/esm/badge/badge.types.d.ts.map +1 -0
- package/dist/esm/badge/badge.types.js +1 -0
- package/dist/esm/badge/index.d.ts +3 -0
- package/dist/esm/badge/index.d.ts.map +1 -0
- package/dist/esm/badge/index.js +2 -0
- package/dist/esm/badge/theme.d.ts +130 -0
- package/dist/esm/badge/theme.d.ts.map +1 -0
- package/dist/esm/badge/theme.js +133 -0
- package/dist/esm/button/button.d.ts +1 -1
- package/dist/esm/button/button.d.ts.map +1 -1
- package/dist/esm/button/button.js +16 -23
- package/dist/esm/button/button.types.d.ts +3 -4
- package/dist/esm/button/button.types.d.ts.map +1 -1
- package/dist/esm/button/buttons.js +8 -8
- package/dist/esm/button/consts.js +3 -3
- package/dist/esm/button/theme.d.ts +204 -44
- package/dist/esm/button/theme.d.ts.map +1 -1
- package/dist/esm/button/theme.js +220 -58
- package/dist/esm/buttonGroup/buttonGroup.d.ts.map +1 -1
- package/dist/esm/buttonGroup/buttonGroup.js +6 -6
- package/dist/esm/buttonGroup/buttonGroup.types.d.ts +2 -3
- package/dist/esm/buttonGroup/buttonGroup.types.d.ts.map +1 -1
- package/dist/esm/buttonGroup/helpers.d.ts.map +1 -1
- package/dist/esm/buttonGroup/helpers.js +2 -3
- package/dist/esm/buttonToggleGroup/buttonToggleGroup.d.ts.map +1 -1
- package/dist/esm/buttonToggleGroup/buttonToggleGroup.js +1 -1
- package/dist/esm/checkbox/checkbox.js +1 -1
- package/dist/esm/copyToClipboard/copyToClipboard.js +1 -1
- package/dist/esm/core/vuiProvider/globalStyle.d.ts.map +1 -1
- package/dist/esm/core/vuiProvider/globalStyle.js +55 -38
- package/dist/esm/footer/footerTrademark.js +1 -1
- package/dist/esm/heading/heading.d.ts.map +1 -1
- package/dist/esm/heading/heading.js +8 -2
- package/dist/esm/heading/heading.types.d.ts +1 -0
- package/dist/esm/heading/heading.types.d.ts.map +1 -1
- package/dist/esm/heading/theme.d.ts +67 -9
- package/dist/esm/heading/theme.d.ts.map +1 -1
- package/dist/esm/heading/theme.js +69 -11
- package/dist/esm/icon/icon.types.d.ts +1 -1
- package/dist/esm/icon/icon.types.d.ts.map +1 -1
- package/dist/esm/icon/theme.d.ts +5 -0
- package/dist/esm/icon/theme.d.ts.map +1 -1
- package/dist/esm/icon/theme.js +5 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/input/input.js +1 -1
- package/dist/esm/input/inputInput.js +1 -1
- package/dist/esm/link/link.d.ts.map +1 -1
- package/dist/esm/link/link.js +3 -3
- package/dist/esm/link/link.types.d.ts +1 -1
- package/dist/esm/link/link.types.d.ts.map +1 -1
- package/dist/esm/link/theme.d.ts +21 -4
- package/dist/esm/link/theme.d.ts.map +1 -1
- package/dist/esm/link/theme.js +30 -17
- package/dist/esm/list/listItem.d.ts.map +1 -1
- package/dist/esm/list/listItem.js +6 -2
- package/dist/esm/notification/consts.js +10 -10
- package/dist/esm/notification/notification.d.ts.map +1 -1
- package/dist/esm/notification/notification.js +11 -9
- package/dist/esm/notification/notification.types.d.ts +2 -2
- package/dist/esm/notification/notification.types.d.ts.map +1 -1
- package/dist/esm/notification/notificationButton.d.ts.map +1 -1
- package/dist/esm/notification/notificationButton.js +4 -1
- package/dist/esm/notification/notificationIcon.d.ts.map +1 -1
- package/dist/esm/notification/notificationIcon.js +3 -2
- package/dist/esm/notification/notificationText.d.ts.map +1 -1
- package/dist/esm/notification/notificationText.js +1 -1
- package/dist/esm/notification/notificationTitle.d.ts +2 -2
- package/dist/esm/notification/notificationTitle.d.ts.map +1 -1
- package/dist/esm/notification/notificationTitle.js +2 -2
- package/dist/esm/notification/theme.d.ts +31 -16
- package/dist/esm/notification/theme.d.ts.map +1 -1
- package/dist/esm/notification/theme.js +32 -26
- package/dist/esm/onedesign-tokens/dist/js/es6/rem/button.d.ts +85 -0
- package/dist/esm/onedesign-tokens/dist/js/es6/rem/button.d.ts.map +1 -0
- package/dist/esm/onedesign-tokens/dist/js/es6/rem/button.js +84 -0
- package/dist/esm/p/theme.d.ts +0 -8
- package/dist/esm/p/theme.d.ts.map +1 -1
- package/dist/esm/p/theme.js +3 -11
- package/dist/esm/progress/progress.js +1 -1
- package/dist/esm/select/selectButton.js +1 -1
- package/dist/esm/sidemenu/sidemenu.js +1 -1
- package/dist/esm/sidemenu/sidemenuItem.js +2 -2
- package/dist/esm/t/theme.d.ts +10 -1
- package/dist/esm/t/theme.d.ts.map +1 -1
- package/dist/esm/t/theme.js +10 -1
- package/dist/esm/table/tbody.d.ts.map +1 -1
- package/dist/esm/table/tbody.js +4 -0
- package/dist/esm/table/theme.d.ts +5 -0
- package/dist/esm/table/theme.d.ts.map +1 -1
- package/dist/esm/table/theme.js +6 -1
- package/dist/esm/tabs/tabs.types.d.ts +2 -2
- package/dist/esm/tabs/tabs.types.d.ts.map +1 -1
- package/dist/esm/tabs/tabsNavBar.d.ts.map +1 -1
- package/dist/esm/tabs/tabsNavBar.js +12 -4
- package/dist/esm/tabs/theme.d.ts +40 -4
- package/dist/esm/tabs/theme.d.ts.map +1 -1
- package/dist/esm/tabs/theme.js +41 -4
- package/dist/esm/tag/tag.js +9 -6
- package/dist/esm/tag/tag.types.d.ts +4 -3
- package/dist/esm/tag/tag.types.d.ts.map +1 -1
- package/dist/esm/tag/tagButton.d.ts.map +1 -1
- package/dist/esm/tag/tagButton.js +1 -1
- package/dist/esm/tag/theme.d.ts +178 -32
- package/dist/esm/tag/theme.d.ts.map +1 -1
- package/dist/esm/tag/theme.js +182 -65
- package/dist/esm/textarea/textarea.js +1 -1
- package/dist/esm/theme/components.d.ts +624 -47
- package/dist/esm/theme/components.d.ts.map +1 -1
- package/dist/esm/theme/components.js +2 -0
- package/dist/esm/theme/defaultTheme.d.ts +916 -48
- package/dist/esm/theme/defaultTheme.d.ts.map +1 -1
- package/dist/esm/theme/foundations/colors.d.ts +523 -0
- package/dist/esm/theme/foundations/colors.d.ts.map +1 -1
- package/dist/esm/theme/foundations/colors.js +365 -0
- package/dist/esm/theme/foundations/fontWeights.d.ts +0 -1
- package/dist/esm/theme/foundations/fontWeights.d.ts.map +1 -1
- package/dist/esm/theme/foundations/fontWeights.js +1 -2
- package/dist/esm/theme/foundations/index.d.ts +292 -1
- package/dist/esm/theme/foundations/index.d.ts.map +1 -1
- package/dist/esm/theme/foundations/radii.d.ts +5 -0
- package/dist/esm/theme/foundations/radii.d.ts.map +1 -1
- package/dist/esm/theme/foundations/radii.js +8 -3
- package/dist/esm/toast/useToast.d.ts.map +1 -1
- package/dist/esm/toast/useToast.js +1 -1
- package/dist/esm/tutorial/tutorialCard.d.ts.map +1 -1
- package/dist/esm/tutorial/tutorialCard.js +3 -3
- package/package.json +1 -1
- package/src/avatar/avatar.tsx +1 -1
- package/src/badge/badge.tsx +36 -0
- package/src/badge/badge.types.ts +17 -0
- package/src/badge/index.ts +2 -0
- package/src/badge/theme.ts +140 -0
- package/src/button/button.tsx +19 -28
- package/src/button/button.types.ts +4 -8
- package/src/button/buttons.tsx +8 -8
- package/src/button/consts.ts +3 -3
- package/src/button/theme.ts +229 -71
- package/src/buttonGroup/buttonGroup.tsx +6 -9
- package/src/buttonGroup/buttonGroup.types.ts +2 -3
- package/src/buttonGroup/helpers.ts +2 -4
- package/src/buttonToggleGroup/buttonToggleGroup.tsx +0 -2
- package/src/checkbox/checkbox.tsx +1 -1
- package/src/copyToClipboard/copyToClipboard.tsx +1 -1
- package/src/core/vuiProvider/globalStyle.tsx +55 -38
- package/src/footer/footerTrademark.tsx +1 -1
- package/src/heading/heading.tsx +19 -2
- package/src/heading/heading.types.ts +2 -0
- package/src/heading/theme.ts +69 -11
- package/src/icon/icon.types.ts +1 -1
- package/src/icon/theme.ts +5 -0
- package/src/index.ts +1 -0
- package/src/input/input.tsx +1 -1
- package/src/input/inputInput.tsx +1 -1
- package/src/link/link.tsx +2 -3
- package/src/link/link.types.ts +1 -1
- package/src/link/theme.ts +30 -20
- package/src/list/listItem.tsx +6 -2
- package/src/notification/consts.ts +10 -10
- package/src/notification/notification.tsx +16 -11
- package/src/notification/notification.types.ts +2 -2
- package/src/notification/notificationButton.tsx +10 -5
- package/src/notification/notificationIcon.tsx +6 -3
- package/src/notification/notificationText.tsx +2 -1
- package/src/notification/notificationTitle.tsx +3 -9
- package/src/notification/theme.ts +32 -34
- package/src/onedesign-tokens/dist/js/es6/rem/button.js +85 -0
- package/src/p/theme.ts +3 -11
- package/src/progress/progress.tsx +1 -1
- package/src/select/selectButton.tsx +1 -1
- package/src/sidemenu/sidemenu.tsx +1 -1
- package/src/sidemenu/sidemenuItem.tsx +3 -3
- package/src/t/theme.ts +10 -1
- package/src/table/tbody.tsx +4 -0
- package/src/table/theme.ts +6 -1
- package/src/tabs/tabs.types.ts +2 -2
- package/src/tabs/tabsNavBar.tsx +23 -6
- package/src/tabs/theme.ts +41 -4
- package/src/tag/tag.tsx +11 -11
- package/src/tag/tag.types.ts +32 -31
- package/src/tag/tagButton.tsx +1 -2
- package/src/tag/theme.ts +183 -80
- package/src/textarea/textarea.tsx +1 -1
- package/src/theme/components.ts +2 -0
- package/src/theme/foundations/colors.ts +401 -0
- package/src/theme/foundations/fontWeights.ts +1 -2
- package/src/theme/foundations/radii.ts +8 -3
- package/src/toast/useToast.tsx +2 -1
- package/src/tutorial/tutorialCard.tsx +10 -3
|
@@ -1,49 +1,12 @@
|
|
|
1
|
-
import { Dict } from '../utils';
|
|
2
|
-
declare function variantOutlined(props: Dict): {
|
|
3
|
-
container: {
|
|
4
|
-
borderColor: string;
|
|
5
|
-
hoverBorderColor: string;
|
|
6
|
-
focusRing: number;
|
|
7
|
-
hoverBg: string;
|
|
8
|
-
activeBg: string;
|
|
9
|
-
bg: string;
|
|
10
|
-
borderWidth: number;
|
|
11
|
-
color: string;
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
declare function variantSolid(props: Dict): {
|
|
15
|
-
container: {
|
|
16
|
-
hoverBg: string;
|
|
17
|
-
hoverBorderColor: string;
|
|
18
|
-
activeBg: string;
|
|
19
|
-
bg: string;
|
|
20
|
-
borderColor: string;
|
|
21
|
-
borderWidth: number;
|
|
22
|
-
color: string;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
declare function variantText(props: Dict): {
|
|
26
|
-
container: {
|
|
27
|
-
hoverBg: string;
|
|
28
|
-
hoverBorderColor: string;
|
|
29
|
-
activeBg: string;
|
|
30
|
-
bg: string;
|
|
31
|
-
borderColor: string;
|
|
32
|
-
borderWidth: number;
|
|
33
|
-
color: string;
|
|
34
|
-
focusRing: number;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
1
|
declare const _default: {
|
|
38
2
|
baseStyle: {};
|
|
39
3
|
defaultProps: {
|
|
40
|
-
colorScheme: string;
|
|
41
4
|
size: string;
|
|
42
5
|
variant: string;
|
|
43
6
|
};
|
|
44
7
|
parts: string[];
|
|
45
8
|
sizes: {
|
|
46
|
-
|
|
9
|
+
sm: {
|
|
47
10
|
container: {
|
|
48
11
|
fontSize: string;
|
|
49
12
|
h: number;
|
|
@@ -55,7 +18,7 @@ declare const _default: {
|
|
|
55
18
|
};
|
|
56
19
|
text: {};
|
|
57
20
|
};
|
|
58
|
-
|
|
21
|
+
md: {
|
|
59
22
|
container: {
|
|
60
23
|
fontSize: string;
|
|
61
24
|
h: number;
|
|
@@ -67,7 +30,7 @@ declare const _default: {
|
|
|
67
30
|
};
|
|
68
31
|
text: {};
|
|
69
32
|
};
|
|
70
|
-
|
|
33
|
+
lg: {
|
|
71
34
|
container: {
|
|
72
35
|
fontSize: string;
|
|
73
36
|
h: number;
|
|
@@ -79,7 +42,7 @@ declare const _default: {
|
|
|
79
42
|
};
|
|
80
43
|
text: {};
|
|
81
44
|
};
|
|
82
|
-
|
|
45
|
+
xl: {
|
|
83
46
|
container: {
|
|
84
47
|
fontSize: string;
|
|
85
48
|
h: number;
|
|
@@ -93,9 +56,206 @@ declare const _default: {
|
|
|
93
56
|
};
|
|
94
57
|
};
|
|
95
58
|
variants: {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
59
|
+
primaryDark: {
|
|
60
|
+
container: {
|
|
61
|
+
bg: string;
|
|
62
|
+
borderColor: string;
|
|
63
|
+
color: string;
|
|
64
|
+
hoverBg: string;
|
|
65
|
+
hoverBorderColor: string;
|
|
66
|
+
hoverColor: string;
|
|
67
|
+
activeBg: string;
|
|
68
|
+
activeBorderColor: string;
|
|
69
|
+
activeColor: string;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
primaryLight: {
|
|
73
|
+
container: {
|
|
74
|
+
bg: string;
|
|
75
|
+
borderColor: string;
|
|
76
|
+
color: string;
|
|
77
|
+
hoverBg: string;
|
|
78
|
+
hoverBorderColor: string;
|
|
79
|
+
hoverColor: string;
|
|
80
|
+
activeBg: string;
|
|
81
|
+
activeBorderColor: string;
|
|
82
|
+
activeColor: string;
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
secondaryDark: {
|
|
86
|
+
container: {
|
|
87
|
+
bg: string;
|
|
88
|
+
borderColor: string;
|
|
89
|
+
color: string;
|
|
90
|
+
hoverBg: string;
|
|
91
|
+
hoverBorderColor: string;
|
|
92
|
+
hoverColor: string;
|
|
93
|
+
activeBg: string;
|
|
94
|
+
activeBorderColor: string;
|
|
95
|
+
activeColor: string;
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
secondaryLight: {
|
|
99
|
+
container: {
|
|
100
|
+
bg: string;
|
|
101
|
+
borderColor: string;
|
|
102
|
+
color: string;
|
|
103
|
+
hoverBg: string;
|
|
104
|
+
hoverBorderColor: string;
|
|
105
|
+
hoverColor: string;
|
|
106
|
+
activeBg: string;
|
|
107
|
+
activeBorderColor: string;
|
|
108
|
+
activeColor: string;
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
tertiaryDark: {
|
|
112
|
+
container: {
|
|
113
|
+
bg: string;
|
|
114
|
+
borderColor: string;
|
|
115
|
+
color: string;
|
|
116
|
+
hoverBg: string;
|
|
117
|
+
hoverBorderColor: string;
|
|
118
|
+
hoverColor: string;
|
|
119
|
+
activeBg: string;
|
|
120
|
+
activeBorderColor: string;
|
|
121
|
+
activeColor: string;
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
tertiaryLight: {
|
|
125
|
+
container: {
|
|
126
|
+
bg: string;
|
|
127
|
+
borderColor: string;
|
|
128
|
+
color: string;
|
|
129
|
+
hoverBg: string;
|
|
130
|
+
hoverBorderColor: string;
|
|
131
|
+
hoverColor: string;
|
|
132
|
+
activeBg: string;
|
|
133
|
+
activeBorderColor: string;
|
|
134
|
+
activeColor: string;
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
solidBlue: {
|
|
138
|
+
container: {
|
|
139
|
+
bg: string;
|
|
140
|
+
borderColor: string;
|
|
141
|
+
color: string;
|
|
142
|
+
disabledBg: string;
|
|
143
|
+
disabledBorderColor: string;
|
|
144
|
+
disabledColor: string;
|
|
145
|
+
hoverBg: string;
|
|
146
|
+
hoverBorderColor: string;
|
|
147
|
+
focusBg: string;
|
|
148
|
+
activeBg: string;
|
|
149
|
+
activeBorderColor: string;
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
blueOutlined: {
|
|
153
|
+
container: {
|
|
154
|
+
bg: string;
|
|
155
|
+
borderColor: string;
|
|
156
|
+
color: string;
|
|
157
|
+
disabledBg: string;
|
|
158
|
+
disabledBorderColor: string;
|
|
159
|
+
disabledColor: string;
|
|
160
|
+
hoverBg: string;
|
|
161
|
+
hoverBorderColor: string;
|
|
162
|
+
activeBg: string;
|
|
163
|
+
activeBorderColor: string;
|
|
164
|
+
};
|
|
165
|
+
};
|
|
166
|
+
blueText: {
|
|
167
|
+
container: {
|
|
168
|
+
bg: string;
|
|
169
|
+
borderColor: string;
|
|
170
|
+
color: string;
|
|
171
|
+
disabledBg: string;
|
|
172
|
+
disabledBorderColor: string;
|
|
173
|
+
disabledColor: string;
|
|
174
|
+
hoverBg: string;
|
|
175
|
+
hoverBorderColor: string;
|
|
176
|
+
focusBg: string;
|
|
177
|
+
activeBg: string;
|
|
178
|
+
activeBorderColor: string;
|
|
179
|
+
};
|
|
180
|
+
};
|
|
181
|
+
solidGreen: {
|
|
182
|
+
container: {
|
|
183
|
+
bg: string;
|
|
184
|
+
borderColor: string;
|
|
185
|
+
color: string;
|
|
186
|
+
disabledBg: string;
|
|
187
|
+
disabledBorderColor: string;
|
|
188
|
+
disabledColor: string;
|
|
189
|
+
hoverBg: string;
|
|
190
|
+
hoverBorderColor: string;
|
|
191
|
+
focusBg: string;
|
|
192
|
+
activeBg: string;
|
|
193
|
+
activeBorderColor: string;
|
|
194
|
+
};
|
|
195
|
+
};
|
|
196
|
+
solidRed: {
|
|
197
|
+
container: {
|
|
198
|
+
bg: string;
|
|
199
|
+
borderColor: string;
|
|
200
|
+
color: string;
|
|
201
|
+
disabledBg: string;
|
|
202
|
+
disabledBorderColor: string;
|
|
203
|
+
disabledColor: string;
|
|
204
|
+
hoverBg: string;
|
|
205
|
+
hoverBorderColor: string;
|
|
206
|
+
focusBg: string;
|
|
207
|
+
activeBg: string;
|
|
208
|
+
activeBorderColor: string;
|
|
209
|
+
};
|
|
210
|
+
};
|
|
211
|
+
subtleBlue: {
|
|
212
|
+
container: {
|
|
213
|
+
bg: string;
|
|
214
|
+
borderColor: string;
|
|
215
|
+
color: string;
|
|
216
|
+
disabledBg: string;
|
|
217
|
+
disabledBorderColor: string;
|
|
218
|
+
disabledColor: string;
|
|
219
|
+
hoverBg: string;
|
|
220
|
+
hoverBorderColor: string;
|
|
221
|
+
focusBg: string;
|
|
222
|
+
activeBg: string;
|
|
223
|
+
activeBorderColor: string;
|
|
224
|
+
};
|
|
225
|
+
};
|
|
226
|
+
subtleRed: {
|
|
227
|
+
container: {
|
|
228
|
+
bg: string;
|
|
229
|
+
borderColor: string;
|
|
230
|
+
hoverBg: string;
|
|
231
|
+
hoverBorderColor: string;
|
|
232
|
+
focusBg: string;
|
|
233
|
+
activeBg: string;
|
|
234
|
+
color: string;
|
|
235
|
+
};
|
|
236
|
+
};
|
|
237
|
+
subtleYellow: {
|
|
238
|
+
container: {
|
|
239
|
+
bg: string;
|
|
240
|
+
borderColor: string;
|
|
241
|
+
hoverBg: string;
|
|
242
|
+
hoverBorderColor: string;
|
|
243
|
+
focusBg: string;
|
|
244
|
+
activeBg: string;
|
|
245
|
+
color: string;
|
|
246
|
+
};
|
|
247
|
+
};
|
|
248
|
+
subtleGreen: {
|
|
249
|
+
container: {
|
|
250
|
+
bg: string;
|
|
251
|
+
borderColor: string;
|
|
252
|
+
hoverBg: string;
|
|
253
|
+
hoverBorderColor: string;
|
|
254
|
+
focusBg: string;
|
|
255
|
+
activeBg: string;
|
|
256
|
+
color: string;
|
|
257
|
+
};
|
|
258
|
+
};
|
|
99
259
|
};
|
|
100
260
|
};
|
|
101
261
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/button/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+RA,wBAMC"}
|
package/dist/cjs/button/theme.js
CHANGED
|
@@ -1,59 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
function variantOutlined(props) {
|
|
4
|
-
var _a;
|
|
5
|
-
const { colorScheme: c } = props;
|
|
6
|
-
const container = Object.assign(Object.assign({}, (_a = variantText(props)) === null || _a === void 0 ? void 0 : _a.container), { borderColor: `${c}.80`, hoverBorderColor: `${c}.80`, focusRing: 3 });
|
|
7
|
-
return { container };
|
|
8
|
-
}
|
|
9
|
-
function variantSolid(props) {
|
|
10
|
-
const { colorScheme: c } = props;
|
|
11
|
-
const container = {
|
|
12
|
-
hoverBg: `${c}.90`,
|
|
13
|
-
hoverBorderColor: `${c}.90`,
|
|
14
|
-
activeBg: `${c}.100`,
|
|
15
|
-
bg: `${c}.80`,
|
|
16
|
-
borderColor: `${c}.80`,
|
|
17
|
-
borderWidth: 1,
|
|
18
|
-
color: 'white'
|
|
19
|
-
};
|
|
20
|
-
// Special cases
|
|
21
|
-
if (c === 'prussian') {
|
|
22
|
-
container.activeBg = 'prussian.50';
|
|
23
|
-
container.hoverBg = 'prussian.60';
|
|
24
|
-
container.hoverBorderColor = 'prussian.60';
|
|
25
|
-
}
|
|
26
|
-
return { container };
|
|
27
|
-
}
|
|
28
|
-
function variantText(props) {
|
|
29
|
-
const { colorScheme: c } = props;
|
|
30
|
-
const container = {
|
|
31
|
-
hoverBg: `${c}.20`,
|
|
32
|
-
hoverBorderColor: `${c}.20`,
|
|
33
|
-
activeBg: `${c}.30`,
|
|
34
|
-
bg: 'transparent',
|
|
35
|
-
borderColor: 'transparent',
|
|
36
|
-
borderWidth: 1,
|
|
37
|
-
color: `${c}.80`,
|
|
38
|
-
focusRing: 2
|
|
39
|
-
};
|
|
40
|
-
// Special cases
|
|
41
|
-
if (c === 'prussian') {
|
|
42
|
-
container.activeBg = 'blue.30';
|
|
43
|
-
container.hoverBg = 'blue.20';
|
|
44
|
-
container.hoverBorderColor = 'blue.20';
|
|
45
|
-
}
|
|
46
|
-
return { container };
|
|
47
|
-
}
|
|
48
3
|
const baseStyle = {};
|
|
49
4
|
const defaultProps = {
|
|
50
|
-
colorScheme: 'prussian',
|
|
51
5
|
size: 'md',
|
|
52
|
-
variant: '
|
|
6
|
+
variant: 'primaryDark'
|
|
53
7
|
};
|
|
54
8
|
const parts = ['container', 'icon', 'text'];
|
|
55
9
|
const sizes = {
|
|
56
|
-
|
|
10
|
+
sm: {
|
|
57
11
|
container: {
|
|
58
12
|
fontSize: 'sm',
|
|
59
13
|
h: 24,
|
|
@@ -65,7 +19,7 @@ const sizes = {
|
|
|
65
19
|
},
|
|
66
20
|
text: {}
|
|
67
21
|
},
|
|
68
|
-
|
|
22
|
+
md: {
|
|
69
23
|
container: {
|
|
70
24
|
fontSize: 'sm',
|
|
71
25
|
h: 32,
|
|
@@ -77,7 +31,7 @@ const sizes = {
|
|
|
77
31
|
},
|
|
78
32
|
text: {}
|
|
79
33
|
},
|
|
80
|
-
|
|
34
|
+
lg: {
|
|
81
35
|
container: {
|
|
82
36
|
fontSize: 'md',
|
|
83
37
|
h: 40,
|
|
@@ -89,7 +43,7 @@ const sizes = {
|
|
|
89
43
|
},
|
|
90
44
|
text: {}
|
|
91
45
|
},
|
|
92
|
-
|
|
46
|
+
xl: {
|
|
93
47
|
container: {
|
|
94
48
|
fontSize: 'lg',
|
|
95
49
|
h: 48,
|
|
@@ -103,9 +57,221 @@ const sizes = {
|
|
|
103
57
|
}
|
|
104
58
|
};
|
|
105
59
|
const variants = {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
60
|
+
primaryDark: {
|
|
61
|
+
container: {
|
|
62
|
+
bg: 'buttonTypePrimaryDefaultBackgroundColorDark',
|
|
63
|
+
borderColor: 'buttonTypePrimaryDefaultBorderColorDark',
|
|
64
|
+
color: 'buttonTypePrimaryDefaultTextColorDark',
|
|
65
|
+
hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',
|
|
66
|
+
hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
|
|
67
|
+
hoverColor: 'buttonTypePrimaryHoverTextColorDark',
|
|
68
|
+
activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',
|
|
69
|
+
activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
|
|
70
|
+
activeColor: 'buttonTypePrimaryActiveTextColorDark'
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
primaryLight: {
|
|
74
|
+
container: {
|
|
75
|
+
bg: 'buttonTypePrimaryDefaultBackgroundColorLight',
|
|
76
|
+
borderColor: 'buttonTypePrimaryDefaultBorderColorLight',
|
|
77
|
+
color: 'buttonTypePrimaryDefaultTextColorLight',
|
|
78
|
+
hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',
|
|
79
|
+
hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',
|
|
80
|
+
hoverColor: 'buttonTypePrimaryHoverTextColorLight',
|
|
81
|
+
activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',
|
|
82
|
+
activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',
|
|
83
|
+
activeColor: 'buttonTypePrimaryActiveTextColorLight'
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
secondaryDark: {
|
|
87
|
+
container: {
|
|
88
|
+
bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',
|
|
89
|
+
borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',
|
|
90
|
+
color: 'buttonTypeSecondaryDefaultTextColorDark',
|
|
91
|
+
// discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
|
|
92
|
+
// hover will change from 90 to 85
|
|
93
|
+
hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',
|
|
94
|
+
hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',
|
|
95
|
+
hoverColor: 'buttonTypeSecondaryHoverTextColorDark',
|
|
96
|
+
// discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
|
|
97
|
+
// active will change from 95% to 90%
|
|
98
|
+
activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',
|
|
99
|
+
activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',
|
|
100
|
+
activeColor: 'buttonTypeSecondaryActiveTextColorDark'
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
secondaryLight: {
|
|
104
|
+
container: {
|
|
105
|
+
bg: 'buttonTypeSecondaryDefaultBackgroundColorLight',
|
|
106
|
+
borderColor: 'buttonTypeSecondaryDefaultBorderColorLight',
|
|
107
|
+
color: 'buttonTypeSecondaryDefaultTextColorLight',
|
|
108
|
+
hoverBg: 'buttonTypeSecondaryHoverBackgroundColorLight',
|
|
109
|
+
hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorLight',
|
|
110
|
+
hoverColor: 'buttonTypeSecondaryHoverTextColorLight',
|
|
111
|
+
activeBg: 'buttonTypeSecondaryActiveBackgroundColorLight',
|
|
112
|
+
activeBorderColor: 'buttonTypeSecondaryActiveBorderColorLight',
|
|
113
|
+
activeColor: 'buttonTypeSecondaryActiveTextColorLight'
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
tertiaryDark: {
|
|
117
|
+
container: {
|
|
118
|
+
bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',
|
|
119
|
+
borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',
|
|
120
|
+
color: 'buttonTypeTertiaryDefaultTextColorDark',
|
|
121
|
+
hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',
|
|
122
|
+
hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',
|
|
123
|
+
hoverColor: 'buttonTypeTertiaryHoverTextColorDark',
|
|
124
|
+
activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',
|
|
125
|
+
activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',
|
|
126
|
+
activeColor: 'buttonTypeTertiaryActiveTextColorDark'
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
tertiaryLight: {
|
|
130
|
+
container: {
|
|
131
|
+
bg: 'buttonTypeTertiaryDefaultBackgroundColorLight',
|
|
132
|
+
borderColor: 'buttonTypeTertiaryDefaultBorderColorLight',
|
|
133
|
+
color: 'buttonTypeTertiaryDefaultTextColorLight',
|
|
134
|
+
hoverBg: 'buttonTypeTertiaryHoverBackgroundColorLight',
|
|
135
|
+
hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorLight',
|
|
136
|
+
hoverColor: 'buttonTypeTertiaryHoverTextColorLight',
|
|
137
|
+
activeBg: 'buttonTypeTertiaryActiveBackgroundColorLight',
|
|
138
|
+
activeBorderColor: 'buttonTypeTertiaryActiveBorderColorLight',
|
|
139
|
+
activeColor: 'buttonTypeTertiaryActiveTextColorLight'
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
solidBlue: {
|
|
143
|
+
container: {
|
|
144
|
+
bg: 'seaBlue.28',
|
|
145
|
+
borderColor: 'seaBlue.28',
|
|
146
|
+
color: 'white',
|
|
147
|
+
disabledBg: 'darkBlue.75',
|
|
148
|
+
disabledBorderColor: 'darkBlue.75',
|
|
149
|
+
disabledColor: 'white',
|
|
150
|
+
// proper order next: hover, focus, active
|
|
151
|
+
hoverBg: 'seaBlue.20',
|
|
152
|
+
hoverBorderColor: 'seaBlue.20',
|
|
153
|
+
focusBg: 'seaBlue.28',
|
|
154
|
+
activeBg: 'seaBlue.35',
|
|
155
|
+
activeBorderColor: 'seaBlue.35'
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
blueOutlined: {
|
|
159
|
+
container: {
|
|
160
|
+
bg: 'white',
|
|
161
|
+
borderColor: 'seaBlue.28',
|
|
162
|
+
color: 'seaBlue.28',
|
|
163
|
+
disabledBg: 'white',
|
|
164
|
+
disabledBorderColor: 'darkBlue.75',
|
|
165
|
+
disabledColor: 'darkBlue.75',
|
|
166
|
+
hoverBg: 'skyBlue.85',
|
|
167
|
+
hoverBorderColor: 'seaBlue.35',
|
|
168
|
+
// focusBg: 'white',
|
|
169
|
+
activeBg: 'skyBlue.90',
|
|
170
|
+
activeBorderColor: 'seaBlue.35'
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
blueText: {
|
|
174
|
+
container: {
|
|
175
|
+
bg: 'transparent',
|
|
176
|
+
borderColor: 'transparent',
|
|
177
|
+
color: 'seaBlue.28',
|
|
178
|
+
disabledBg: 'white',
|
|
179
|
+
disabledBorderColor: 'white',
|
|
180
|
+
disabledColor: 'darkBlue.75',
|
|
181
|
+
hoverBg: 'skyBlue.85',
|
|
182
|
+
hoverBorderColor: 'skyBlue.85',
|
|
183
|
+
focusBg: 'transparent',
|
|
184
|
+
activeBg: 'skyBlue.90',
|
|
185
|
+
activeBorderColor: 'skyBlue.90'
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
solidGreen: {
|
|
189
|
+
container: {
|
|
190
|
+
bg: 'landGreen.35',
|
|
191
|
+
borderColor: 'landGreen.35',
|
|
192
|
+
color: 'white',
|
|
193
|
+
disabledBg: 'landGreen.70',
|
|
194
|
+
disabledBorderColor: 'landGreen.70',
|
|
195
|
+
disabledColor: 'white',
|
|
196
|
+
hoverBg: 'landGreen.25',
|
|
197
|
+
hoverBorderColor: 'landGreen.25',
|
|
198
|
+
focusBg: 'landGreen.35',
|
|
199
|
+
activeBg: 'landGreen.41',
|
|
200
|
+
activeBorderColor: 'landGreen.41'
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
solidRed: {
|
|
204
|
+
container: {
|
|
205
|
+
bg: 'energyRed.45',
|
|
206
|
+
borderColor: 'energyRed.45',
|
|
207
|
+
color: 'white',
|
|
208
|
+
disabledBg: 'energyRed.80',
|
|
209
|
+
disabledBorderColor: 'energyRed.80',
|
|
210
|
+
disabledColor: 'white',
|
|
211
|
+
// proper order is important next: hover > focus > active
|
|
212
|
+
hoverBg: 'energyRed.35',
|
|
213
|
+
hoverBorderColor: 'energyRed.35',
|
|
214
|
+
focusBg: 'energyRed.45',
|
|
215
|
+
activeBg: 'energyRed.50',
|
|
216
|
+
activeBorderColor: 'energyRed.50'
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
// subtleBlue is an internal variant, used in notification; based on primaryDark
|
|
220
|
+
subtleBlue: {
|
|
221
|
+
container: {
|
|
222
|
+
bg: 'transparent',
|
|
223
|
+
borderColor: 'transparent',
|
|
224
|
+
color: 'seaBlue.28',
|
|
225
|
+
disabledBg: 'white',
|
|
226
|
+
disabledBorderColor: 'darkBlue.75',
|
|
227
|
+
disabledColor: 'darkBlue.75',
|
|
228
|
+
// proper order is important next: hover > focus > active
|
|
229
|
+
hoverBg: 'skyBlue.90',
|
|
230
|
+
hoverBorderColor: 'skyBlue.90',
|
|
231
|
+
focusBg: 'transparent',
|
|
232
|
+
activeBg: 'skyBlue.85',
|
|
233
|
+
activeBorderColor: 'skyBlue.85'
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
// subtleRed is an internal variant, used in notification; based on primaryDark
|
|
237
|
+
subtleRed: {
|
|
238
|
+
container: {
|
|
239
|
+
bg: 'transparent',
|
|
240
|
+
borderColor: 'transparent',
|
|
241
|
+
// proper order is important next: hover > focus > active
|
|
242
|
+
hoverBg: 'energyRed.90',
|
|
243
|
+
hoverBorderColor: 'energyRed.90',
|
|
244
|
+
focusBg: 'transparent',
|
|
245
|
+
activeBg: 'energyRed.85',
|
|
246
|
+
color: 'energyRed.45'
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
// subtleYellow is an internal variant, used in notification; based on primaryDark
|
|
250
|
+
subtleYellow: {
|
|
251
|
+
container: {
|
|
252
|
+
bg: 'transparent',
|
|
253
|
+
borderColor: 'transparent',
|
|
254
|
+
// proper order is important next: hover > focus > active
|
|
255
|
+
hoverBg: 'sunflower.70',
|
|
256
|
+
hoverBorderColor: 'sunflower.70',
|
|
257
|
+
focusBg: 'transparent',
|
|
258
|
+
activeBg: 'sunflower.65',
|
|
259
|
+
color: 'sunflower.15'
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
// subtleGreen is an internal variant, used in notification; based on primaryDark
|
|
263
|
+
subtleGreen: {
|
|
264
|
+
container: {
|
|
265
|
+
bg: 'transparent',
|
|
266
|
+
borderColor: 'transparent',
|
|
267
|
+
// proper order is important next: hover > focus > active
|
|
268
|
+
hoverBg: 'landGreen.90',
|
|
269
|
+
hoverBorderColor: 'landGreen.90',
|
|
270
|
+
focusBg: 'transparent',
|
|
271
|
+
activeBg: 'landGreen.85',
|
|
272
|
+
color: 'landGreen.30'
|
|
273
|
+
}
|
|
274
|
+
}
|
|
109
275
|
};
|
|
110
276
|
exports.default = {
|
|
111
277
|
baseStyle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDActB,CAAA;AAEF,eAAe,WAAW,CAAA"}
|
|
@@ -76,12 +76,12 @@ exports.ButtonGroupBase = core_1.styled.divBox `
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
> *:disabled {
|
|
79
|
-
border-color: disabled.border;
|
|
79
|
+
border-color: disabled .border;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
//
|
|
83
83
|
> .${utils_1.activeClassName} {
|
|
84
|
-
background-color: ${p => core_1.th.color(
|
|
84
|
+
background-color: ${p => core_1.th.color('skyBlue.90')};
|
|
85
85
|
}
|
|
86
86
|
`;
|
|
87
87
|
/**
|
|
@@ -89,9 +89,9 @@ exports.ButtonGroupBase = core_1.styled.divBox `
|
|
|
89
89
|
* Exposes some props to the children via context.
|
|
90
90
|
*/
|
|
91
91
|
exports.ButtonGroup = (0, core_1.vui)((props, ref) => {
|
|
92
|
-
const { className,
|
|
93
|
-
const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({
|
|
92
|
+
const { className, disabled, innerBorderColor, size, variant = 'secondaryDark' } = props, rest = __rest(props, ["className", "disabled", "innerBorderColor", "size", "variant"]);
|
|
93
|
+
const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ disabled, size, variant }), [disabled, size, variant]);
|
|
94
94
|
return (react_1.default.createElement(context_1.ButtonGroupProvider, { value: context },
|
|
95
|
-
react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, {
|
|
95
|
+
react_1.default.createElement(exports.ButtonGroupBase, Object.assign({ className: (0, utils_1.cs)('vui-buttonGroup', className) }, { innerBorderColor: innerBorderColor ? innerBorderColor : (0, helpers_1.getInnerBorderColor)(props), ref }, rest))));
|
|
96
96
|
});
|
|
97
97
|
exports.default = exports.ButtonGroup;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { ButtonColorScheme } from '../button/button.types';
|
|
2
1
|
import { SystemProps } from '../system';
|
|
3
2
|
import { ThemingProps } from '../theme';
|
|
4
3
|
export declare type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
|
|
5
|
-
/** Available theme colors for this component. */
|
|
6
|
-
colorScheme?:
|
|
4
|
+
/** Available theme colors for this component. @deprecated */
|
|
5
|
+
colorScheme?: string;
|
|
7
6
|
/** Makes all wrapped buttons disabled. */
|
|
8
7
|
disabled?: boolean;
|
|
9
8
|
/** Border color between the buttons. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAMnE"}
|
|
@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.getInnerBorderColor = void 0;
|
|
4
4
|
/** Returns appropriate color for the border between the buttons. */
|
|
5
5
|
function getInnerBorderColor(props) {
|
|
6
|
-
const {
|
|
6
|
+
const { disabled, variant } = props;
|
|
7
7
|
if (disabled)
|
|
8
8
|
return 'disabled.border';
|
|
9
|
-
|
|
10
|
-
return `${colorScheme}.${shade}`;
|
|
9
|
+
return `${variant}`;
|
|
11
10
|
}
|
|
12
11
|
exports.getInnerBorderColor = getInnerBorderColor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,
|
|
1
|
+
{"version":3,"file":"buttonToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAU9D,CAAA;AAED,eAAe,iBAAiB,CAAA"}
|