@veracity/vui 1.8.0-beta.0 → 1.8.0-redesign.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 +121 -44
- package/dist/cjs/button/theme.d.ts.map +1 -1
- package/dist/cjs/button/theme.js +135 -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/theme.d.ts +23 -1
- package/dist/cjs/heading/theme.d.ts.map +1 -1
- package/dist/cjs/heading/theme.js +29 -7
- 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 +0 -2
- 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/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.d.ts.map +1 -1
- package/dist/cjs/tag/tag.js +9 -6
- package/dist/cjs/tag/tag.types.d.ts +3 -2
- package/dist/cjs/tag/tag.types.d.ts.map +1 -1
- package/dist/cjs/tag/tagButton.js +3 -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 +497 -39
- package/dist/cjs/theme/components.d.ts.map +1 -1
- package/dist/cjs/theme/components.js +72 -70
- package/dist/cjs/theme/defaultTheme.d.ts +795 -46
- 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/toast.d.ts.map +1 -1
- package/dist/cjs/toast/toast.js +1 -1
- 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 +121 -44
- package/dist/esm/button/theme.d.ts.map +1 -1
- package/dist/esm/button/theme.js +135 -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/theme.d.ts +23 -1
- package/dist/esm/heading/theme.d.ts.map +1 -1
- package/dist/esm/heading/theme.js +29 -7
- 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 +0 -2
- 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/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.d.ts.map +1 -1
- package/dist/esm/tag/tag.js +9 -6
- package/dist/esm/tag/tag.types.d.ts +3 -2
- package/dist/esm/tag/tag.types.d.ts.map +1 -1
- package/dist/esm/tag/tagButton.js +3 -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 +497 -39
- 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 +795 -46
- 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/toast.d.ts.map +1 -1
- package/dist/esm/toast/toast.js +1 -1
- 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 +143 -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/theme.ts +29 -7
- 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 +0 -2
- 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 +17 -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/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 -10
- package/src/tag/tag.types.ts +32 -31
- package/src/tag/tagButton.tsx +2 -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/toast.tsx +0 -1
- package/src/toast/useToast.tsx +2 -1
- package/src/tutorial/tutorialCard.tsx +10 -3
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Thu, 17 Feb 2022 11:35:15 GMT
|
|
4
|
+
*/
|
|
5
|
+
export const buttonSizeLargeFontSize: "1.125rem";
|
|
6
|
+
export const buttonSizeLargeLineHeight: "1.75rem";
|
|
7
|
+
export const buttonSizeLargePadding: "0.5rem 1rem";
|
|
8
|
+
export const buttonSizeMediumFontSize: "1rem";
|
|
9
|
+
export const buttonSizeMediumLineHeight: "1.5rem";
|
|
10
|
+
export const buttonSizeMediumPadding: "0.25rem calc(0.25rem * 3)";
|
|
11
|
+
export const buttonSizeSmallFontSize: "0.875rem";
|
|
12
|
+
export const buttonSizeSmallLineHeight: "1.25rem";
|
|
13
|
+
export const buttonSizeSmallPadding: "calc(0.25rem / 2) 0.5rem";
|
|
14
|
+
export const buttonSizeDefaultFontSize: "1rem";
|
|
15
|
+
export const buttonSizeDefaultLineHeight: "1.5rem";
|
|
16
|
+
export const buttonSizeDefaultPadding: "0.25rem calc(0.25rem * 3)";
|
|
17
|
+
export const buttonTypePrimaryDefaultBorderColorDark: "hsla(0, 0%, 0%, 0)";
|
|
18
|
+
export const buttonTypePrimaryDefaultBorderColorLight: "hsla(0, 0%, 0%, 0)";
|
|
19
|
+
export const buttonTypePrimaryDefaultBackgroundColorDark: "hsla(218, 100%, 28%, 1)";
|
|
20
|
+
export const buttonTypePrimaryDefaultBackgroundColorLight: "hsla(139, 100%, 78%, 1)";
|
|
21
|
+
export const buttonTypePrimaryDefaultTextColorDark: "hsla(40, 3%, 100%, 1)";
|
|
22
|
+
export const buttonTypePrimaryDefaultTextColorLight: "hsla(223, 67%, 18%, 1)";
|
|
23
|
+
export const buttonTypePrimaryHoverBorderColorDark: "hsla(0, 0%, 0%, 0)";
|
|
24
|
+
export const buttonTypePrimaryHoverBorderColorLight: "hsla(0, 0%, 0%, 0)";
|
|
25
|
+
export const buttonTypePrimaryHoverBackgroundColorDark: "hsla(218, 100%, 20%, 1)";
|
|
26
|
+
export const buttonTypePrimaryHoverBackgroundColorLight: "hsla(139, 100%, 70%, 1)";
|
|
27
|
+
export const buttonTypePrimaryHoverTextColorDark: "hsla(40, 3%, 100%, 1)";
|
|
28
|
+
export const buttonTypePrimaryHoverTextColorLight: "hsla(223, 67%, 18%, 1)";
|
|
29
|
+
export const buttonTypePrimaryActiveBorderColorDark: "hsla(0, 0%, 0%, 0)";
|
|
30
|
+
export const buttonTypePrimaryActiveBorderColorLight: "hsla(0, 0%, 0%, 0)";
|
|
31
|
+
export const buttonTypePrimaryActiveBackgroundColorDark: "hsla(218, 100%, 35%, 1)";
|
|
32
|
+
export const buttonTypePrimaryActiveBackgroundColorLight: "hsla(139, 100%, 85%, 1)";
|
|
33
|
+
export const buttonTypePrimaryActiveTextColorDark: "hsla(40, 3%, 100%, 1)";
|
|
34
|
+
export const buttonTypePrimaryActiveTextColorLight: "hsla(223, 67%, 18%, 1)";
|
|
35
|
+
export const buttonTypePrimaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
|
|
36
|
+
export const buttonTypeSecondaryDefaultBorderColorDark: "hsla(218, 100%, 28%, 1)";
|
|
37
|
+
export const buttonTypeSecondaryDefaultBorderColorLight: "hsla(139, 100%, 78%, 1)";
|
|
38
|
+
export const buttonTypeSecondaryDefaultBackgroundColorDark: "hsla(0, 0%, 0%, 0)";
|
|
39
|
+
export const buttonTypeSecondaryDefaultBackgroundColorLight: "hsla(0, 0%, 0%, 0)";
|
|
40
|
+
export const buttonTypeSecondaryDefaultTextColorDark: "hsla(218, 100%, 28%, 1)";
|
|
41
|
+
export const buttonTypeSecondaryDefaultTextColorLight: "hsla(139, 100%, 78%, 1)";
|
|
42
|
+
export const buttonTypeSecondaryHoverBorderColorDark: "hsla(218, 100%, 28%, 1)";
|
|
43
|
+
export const buttonTypeSecondaryHoverBorderColorLight: "hsla(139, 100%, 78%, 1)";
|
|
44
|
+
export const buttonTypeSecondaryHoverBackgroundColorDark: "hsla(196, 74%, 90%, 1)";
|
|
45
|
+
export const buttonTypeSecondaryHoverBackgroundColorLight: "hsla(218, 100%, 25%, 1)";
|
|
46
|
+
export const buttonTypeSecondaryHoverTextColorDark: "hsla(218, 100%, 28%, 1)";
|
|
47
|
+
export const buttonTypeSecondaryHoverTextColorLight: "hsla(139, 100%, 78%, 1)";
|
|
48
|
+
export const buttonTypeSecondaryActiveBorderColorDark: "hsla(218, 100%, 28%, 1)";
|
|
49
|
+
export const buttonTypeSecondaryActiveBorderColorLight: "hsla(139, 100%, 78%, 1)";
|
|
50
|
+
export const buttonTypeSecondaryActiveBackgroundColorDark: "hsla(196, 74%, 95%, 1)";
|
|
51
|
+
export const buttonTypeSecondaryActiveBackgroundColorLight: "hsla(218, 100%, 35%, 1)";
|
|
52
|
+
export const buttonTypeSecondaryActiveTextColorDark: "hsla(218, 100%, 28%, 1)";
|
|
53
|
+
export const buttonTypeSecondaryActiveTextColorLight: "hsla(139, 100%, 78%, 1)";
|
|
54
|
+
export const buttonTypeSecondaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
|
|
55
|
+
export const buttonTypeTertiaryDefaultBorderColorDark: "hsla(0, 0%, 0%, 0)";
|
|
56
|
+
export const buttonTypeTertiaryDefaultBorderColorLight: "hsla(0, 0%, 0%, 0)";
|
|
57
|
+
export const buttonTypeTertiaryDefaultBackgroundColorDark: "hsla(0, 0%, 0%, 0)";
|
|
58
|
+
export const buttonTypeTertiaryDefaultBackgroundColorLight: "hsla(0, 0%, 0%, 0)";
|
|
59
|
+
export const buttonTypeTertiaryDefaultTextColorDark: "hsla(218, 100%, 28%, 1)";
|
|
60
|
+
export const buttonTypeTertiaryDefaultTextColorLight: "hsla(139, 100%, 78%, 1)";
|
|
61
|
+
export const buttonTypeTertiaryHoverBorderColorDark: "hsla(0, 0%, 0%, 0)";
|
|
62
|
+
export const buttonTypeTertiaryHoverBorderColorLight: "hsla(0, 0%, 0%, 0)";
|
|
63
|
+
export const buttonTypeTertiaryHoverBackgroundColorDark: "hsla(196, 74%, 90%, 1)";
|
|
64
|
+
export const buttonTypeTertiaryHoverBackgroundColorLight: "hsla(218, 100%, 25%, 1)";
|
|
65
|
+
export const buttonTypeTertiaryHoverTextColorDark: "hsla(218, 100%, 28%, 1)";
|
|
66
|
+
export const buttonTypeTertiaryHoverTextColorLight: "hsla(139, 100%, 78%, 1)";
|
|
67
|
+
export const buttonTypeTertiaryActiveBorderColorDark: "hsla(0, 0%, 0%, 0)";
|
|
68
|
+
export const buttonTypeTertiaryActiveBorderColorLight: "hsla(0, 0%, 0%, 0)";
|
|
69
|
+
export const buttonTypeTertiaryActiveBackgroundColorDark: "hsla(196, 74%, 95%, 1)";
|
|
70
|
+
export const buttonTypeTertiaryActiveBackgroundColorLight: "hsla(218, 100%, 35%, 1)";
|
|
71
|
+
export const buttonTypeTertiaryActiveTextColorDark: "hsla(218, 100%, 28%, 1)";
|
|
72
|
+
export const buttonTypeTertiaryActiveTextColorLight: "hsla(139, 100%, 78%, 1)";
|
|
73
|
+
export const buttonTypeTertiaryFocusOutline: "0.25rem solid hsla(196, 100%, 43%, 1)";
|
|
74
|
+
export const buttonDisabledCursor: "default";
|
|
75
|
+
export const buttonDisabledOpacity: "50%";
|
|
76
|
+
export const buttonBorderStyle: "solid";
|
|
77
|
+
export const buttonBorderWidth: "calc(0.125rem / 2)";
|
|
78
|
+
export const buttonFontFamily: "'Avenir Next', Arial, sans-serif";
|
|
79
|
+
export const buttonFontSize: "1rem";
|
|
80
|
+
export const buttonLineHeight: "1.5rem";
|
|
81
|
+
export const buttonFontWeight: "500";
|
|
82
|
+
export const buttonPadding: "calc(0.25rem * 1.5) calc(0.25rem * 3)";
|
|
83
|
+
export const buttonTransition: "all 0.15s ease-in-out";
|
|
84
|
+
export const buttonCursor: "pointer";
|
|
85
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../../../src/onedesign-tokens/dist/js/es6/rem/button.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,iDAAkD;AAClD,kDAAmD;AACnD,mDAAoD;AACpD,8CAA+C;AAC/C,kDAAmD;AACnD,kEAAmE;AACnE,iDAAkD;AAClD,kDAAmD;AACnD,gEAAiE;AACjE,+CAAgD;AAChD,mDAAoD;AACpD,mEAAoE;AACpE,2EAA4E;AAC5E,4EAA6E;AAC7E,oFAAqF;AACrF,qFAAsF;AACtF,4EAA6E;AAC7E,8EAA+E;AAC/E,yEAA0E;AAC1E,0EAA2E;AAC3E,kFAAmF;AACnF,mFAAoF;AACpF,0EAA2E;AAC3E,4EAA6E;AAC7E,0EAA2E;AAC3E,2EAA4E;AAC5E,mFAAoF;AACpF,oFAAqF;AACrF,2EAA4E;AAC5E,6EAA8E;AAC9E,oFAAqF;AACrF,kFAAmF;AACnF,mFAAoF;AACpF,iFAAkF;AAClF,kFAAmF;AACnF,gFAAiF;AACjF,iFAAkF;AAClF,gFAAiF;AACjF,iFAAkF;AAClF,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,iFAAkF;AAClF,kFAAmF;AACnF,oFAAqF;AACrF,sFAAuF;AACvF,+EAAgF;AAChF,gFAAiF;AACjF,sFAAuF;AACvF,4EAA6E;AAC7E,6EAA8E;AAC9E,gFAAiF;AACjF,iFAAkF;AAClF,+EAAgF;AAChF,gFAAiF;AACjF,0EAA2E;AAC3E,2EAA4E;AAC5E,kFAAmF;AACnF,oFAAqF;AACrF,6EAA8E;AAC9E,8EAA+E;AAC/E,2EAA4E;AAC5E,4EAA6E;AAC7E,mFAAoF;AACpF,qFAAsF;AACtF,8EAA+E;AAC/E,+EAAgF;AAChF,qFAAsF;AACtF,6CAA8C;AAC9C,0CAA2C;AAC3C,wCAAyC;AACzC,qDAAsD;AACtD,kEAAmE;AACnE,oCAAqC;AACrC,wCAAyC;AACzC,qCAAsC;AACtC,oEAAqE;AACrE,uDAAwD;AACxD,qCAAsC"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Thu, 17 Feb 2022 11:35:15 GMT
|
|
4
|
+
*/
|
|
5
|
+
export const buttonSizeLargeFontSize = "1.125rem";
|
|
6
|
+
export const buttonSizeLargeLineHeight = "1.75rem";
|
|
7
|
+
export const buttonSizeLargePadding = "0.5rem 1rem";
|
|
8
|
+
export const buttonSizeMediumFontSize = "1rem";
|
|
9
|
+
export const buttonSizeMediumLineHeight = "1.5rem";
|
|
10
|
+
export const buttonSizeMediumPadding = "0.25rem calc(0.25rem * 3)";
|
|
11
|
+
export const buttonSizeSmallFontSize = "0.875rem";
|
|
12
|
+
export const buttonSizeSmallLineHeight = "1.25rem";
|
|
13
|
+
export const buttonSizeSmallPadding = "calc(0.25rem / 2) 0.5rem";
|
|
14
|
+
export const buttonSizeDefaultFontSize = "1rem";
|
|
15
|
+
export const buttonSizeDefaultLineHeight = "1.5rem";
|
|
16
|
+
export const buttonSizeDefaultPadding = "0.25rem calc(0.25rem * 3)";
|
|
17
|
+
export const buttonTypePrimaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
|
|
18
|
+
export const buttonTypePrimaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
|
|
19
|
+
export const buttonTypePrimaryDefaultBackgroundColorDark = "hsla(218, 100%, 28%, 1)";
|
|
20
|
+
export const buttonTypePrimaryDefaultBackgroundColorLight = "hsla(139, 100%, 78%, 1)";
|
|
21
|
+
export const buttonTypePrimaryDefaultTextColorDark = "hsla(40, 3%, 100%, 1)";
|
|
22
|
+
export const buttonTypePrimaryDefaultTextColorLight = "hsla(223, 67%, 18%, 1)";
|
|
23
|
+
export const buttonTypePrimaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
|
|
24
|
+
export const buttonTypePrimaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
|
|
25
|
+
export const buttonTypePrimaryHoverBackgroundColorDark = "hsla(218, 100%, 20%, 1)";
|
|
26
|
+
export const buttonTypePrimaryHoverBackgroundColorLight = "hsla(139, 100%, 70%, 1)";
|
|
27
|
+
export const buttonTypePrimaryHoverTextColorDark = "hsla(40, 3%, 100%, 1)";
|
|
28
|
+
export const buttonTypePrimaryHoverTextColorLight = "hsla(223, 67%, 18%, 1)";
|
|
29
|
+
export const buttonTypePrimaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
|
|
30
|
+
export const buttonTypePrimaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
|
|
31
|
+
export const buttonTypePrimaryActiveBackgroundColorDark = "hsla(218, 100%, 35%, 1)";
|
|
32
|
+
export const buttonTypePrimaryActiveBackgroundColorLight = "hsla(139, 100%, 85%, 1)";
|
|
33
|
+
export const buttonTypePrimaryActiveTextColorDark = "hsla(40, 3%, 100%, 1)";
|
|
34
|
+
export const buttonTypePrimaryActiveTextColorLight = "hsla(223, 67%, 18%, 1)";
|
|
35
|
+
export const buttonTypePrimaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
|
|
36
|
+
export const buttonTypeSecondaryDefaultBorderColorDark = "hsla(218, 100%, 28%, 1)";
|
|
37
|
+
export const buttonTypeSecondaryDefaultBorderColorLight = "hsla(139, 100%, 78%, 1)";
|
|
38
|
+
export const buttonTypeSecondaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
|
|
39
|
+
export const buttonTypeSecondaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
|
|
40
|
+
export const buttonTypeSecondaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
|
|
41
|
+
export const buttonTypeSecondaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
|
|
42
|
+
export const buttonTypeSecondaryHoverBorderColorDark = "hsla(218, 100%, 28%, 1)";
|
|
43
|
+
export const buttonTypeSecondaryHoverBorderColorLight = "hsla(139, 100%, 78%, 1)";
|
|
44
|
+
export const buttonTypeSecondaryHoverBackgroundColorDark = "hsla(196, 74%, 90%, 1)";
|
|
45
|
+
export const buttonTypeSecondaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
|
|
46
|
+
export const buttonTypeSecondaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
|
|
47
|
+
export const buttonTypeSecondaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
|
|
48
|
+
export const buttonTypeSecondaryActiveBorderColorDark = "hsla(218, 100%, 28%, 1)";
|
|
49
|
+
export const buttonTypeSecondaryActiveBorderColorLight = "hsla(139, 100%, 78%, 1)";
|
|
50
|
+
export const buttonTypeSecondaryActiveBackgroundColorDark = "hsla(196, 74%, 95%, 1)";
|
|
51
|
+
export const buttonTypeSecondaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
|
|
52
|
+
export const buttonTypeSecondaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
|
|
53
|
+
export const buttonTypeSecondaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
|
|
54
|
+
export const buttonTypeSecondaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
|
|
55
|
+
export const buttonTypeTertiaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
|
|
56
|
+
export const buttonTypeTertiaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
|
|
57
|
+
export const buttonTypeTertiaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
|
|
58
|
+
export const buttonTypeTertiaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
|
|
59
|
+
export const buttonTypeTertiaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
|
|
60
|
+
export const buttonTypeTertiaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
|
|
61
|
+
export const buttonTypeTertiaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
|
|
62
|
+
export const buttonTypeTertiaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
|
|
63
|
+
export const buttonTypeTertiaryHoverBackgroundColorDark = "hsla(196, 74%, 90%, 1)";
|
|
64
|
+
export const buttonTypeTertiaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
|
|
65
|
+
export const buttonTypeTertiaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
|
|
66
|
+
export const buttonTypeTertiaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
|
|
67
|
+
export const buttonTypeTertiaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
|
|
68
|
+
export const buttonTypeTertiaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
|
|
69
|
+
export const buttonTypeTertiaryActiveBackgroundColorDark = "hsla(196, 74%, 95%, 1)";
|
|
70
|
+
export const buttonTypeTertiaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
|
|
71
|
+
export const buttonTypeTertiaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
|
|
72
|
+
export const buttonTypeTertiaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
|
|
73
|
+
export const buttonTypeTertiaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
|
|
74
|
+
export const buttonDisabledCursor = "default";
|
|
75
|
+
export const buttonDisabledOpacity = "50%";
|
|
76
|
+
export const buttonBorderStyle = "solid";
|
|
77
|
+
export const buttonBorderWidth = "calc(0.125rem / 2)";
|
|
78
|
+
export const buttonFontFamily = "'Avenir Next', Arial, sans-serif";
|
|
79
|
+
export const buttonFontSize = "1rem";
|
|
80
|
+
export const buttonLineHeight = "1.5rem";
|
|
81
|
+
export const buttonFontWeight = "500";
|
|
82
|
+
export const buttonPadding = "calc(0.25rem * 1.5) calc(0.25rem * 3)";
|
|
83
|
+
export const buttonTransition = "all 0.15s ease-in-out";
|
|
84
|
+
export const buttonCursor = "pointer";
|
package/dist/esm/p/theme.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/p/theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/p/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,wBAKC"}
|
package/dist/esm/p/theme.js
CHANGED
|
@@ -5,23 +5,15 @@ const defaultProps = {
|
|
|
5
5
|
const sizes = {
|
|
6
6
|
sm: {
|
|
7
7
|
fontSize: 'sm',
|
|
8
|
-
lineHeight: '
|
|
8
|
+
lineHeight: '22px'
|
|
9
9
|
},
|
|
10
10
|
md: {
|
|
11
11
|
fontSize: 'md',
|
|
12
|
-
lineHeight: '
|
|
12
|
+
lineHeight: '26px'
|
|
13
13
|
},
|
|
14
14
|
lg: {
|
|
15
15
|
fontSize: 'lg',
|
|
16
|
-
lineHeight: '
|
|
17
|
-
},
|
|
18
|
-
xl: {
|
|
19
|
-
fontSize: '20px',
|
|
20
|
-
lineHeight: '30px'
|
|
21
|
-
},
|
|
22
|
-
xxl: {
|
|
23
|
-
fontSize: '24px',
|
|
24
|
-
lineHeight: '36px'
|
|
16
|
+
lineHeight: '32px'
|
|
25
17
|
}
|
|
26
18
|
};
|
|
27
19
|
const variants = {};
|
|
@@ -17,6 +17,6 @@ export const Progress = vui((props, ref) => {
|
|
|
17
17
|
setWidth(w > 100 ? 100 : w);
|
|
18
18
|
}, [value, max]);
|
|
19
19
|
return (React.createElement(ProgressBase, { className: cs('vui-progress', className), ref: ref, ...styles.container, ...rest, bg: "grey.10", borderRadius: "sm", h: 1 },
|
|
20
|
-
React.createElement(Box, { bg: "
|
|
20
|
+
React.createElement(Box, { bg: "seaBlue.28", borderRadius: "sm", position: "relative", textAlign: "right", transition: "width 0.4s ease-in-out;", w: `${width}%` }, showPercentage && value >= minPercentageDisplay && (React.createElement(Box, { ...styles.percentage, position: "absolute", right: "0" }, `${width}%`)))));
|
|
21
21
|
});
|
|
22
22
|
export default Progress;
|
package/dist/esm/t/theme.d.ts
CHANGED
|
@@ -17,7 +17,16 @@ declare const _default: {
|
|
|
17
17
|
fontSize: string;
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
|
-
variants: {
|
|
20
|
+
variants: {
|
|
21
|
+
label: {
|
|
22
|
+
fontSize: string;
|
|
23
|
+
fontWeight: string;
|
|
24
|
+
};
|
|
25
|
+
caption: {
|
|
26
|
+
fontSize: string;
|
|
27
|
+
fontWeight: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
21
30
|
};
|
|
22
31
|
export default _default;
|
|
23
32
|
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/t/theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/t/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,wBAKC"}
|
package/dist/esm/t/theme.js
CHANGED
|
@@ -16,7 +16,16 @@ const sizes = {
|
|
|
16
16
|
fontSize: 'lg'
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
const variants = {
|
|
19
|
+
const variants = {
|
|
20
|
+
label: {
|
|
21
|
+
fontSize: 'md',
|
|
22
|
+
fontWeight: 'demi'
|
|
23
|
+
},
|
|
24
|
+
caption: {
|
|
25
|
+
fontSize: 'sm',
|
|
26
|
+
fontWeight: 'medium'
|
|
27
|
+
}
|
|
28
|
+
};
|
|
20
29
|
export default {
|
|
21
30
|
baseStyle,
|
|
22
31
|
defaultProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tbody.d.ts","sourceRoot":"","sources":["../../../src/table/tbody.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"tbody.d.ts","sourceRoot":"","sources":["../../../src/table/tbody.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS,iIAkBrB,CAAA;AAED,0DAA0D;AAC1D,eAAO,MAAM,KAAK,mEAiBhB,CAAA;AAEF,eAAe,KAAK,CAAA"}
|
package/dist/esm/table/tbody.js
CHANGED
|
@@ -17,6 +17,10 @@ export const TbodyBase = styled.tbodyBox `
|
|
|
17
17
|
&[data-variant='striped'][data-selected='false']:nth-of-type(odd):not(:hover) td {
|
|
18
18
|
background-color: grey.10;
|
|
19
19
|
}
|
|
20
|
+
|
|
21
|
+
&[data-variant='basic']:hover td {
|
|
22
|
+
background-color: transparent;
|
|
23
|
+
}
|
|
20
24
|
}
|
|
21
25
|
`;
|
|
22
26
|
/** Displays Table body with built-in support for rows. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/table/theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/table/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,wBAMC"}
|
package/dist/esm/table/theme.js
CHANGED
|
@@ -4,8 +4,8 @@ import { IconProp } from '../icon';
|
|
|
4
4
|
import { SystemProps } from '../system';
|
|
5
5
|
import { ThemingProps } from '../theme';
|
|
6
6
|
export declare type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn';
|
|
7
|
-
export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl';
|
|
8
|
-
export declare type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | undefined;
|
|
7
|
+
export declare type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl';
|
|
8
|
+
export declare type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined;
|
|
9
9
|
export declare type TabsProps = SystemProps & ThemingProps<'Tabs'> & ChildrenProp & {
|
|
10
10
|
activeTabId?: number;
|
|
11
11
|
showBorder?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,oBAAY,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,oBAAY,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAEH,oBAAY,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkB,cAAc,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkB,cAAc,EAAE,MAAM,cAAc,CAAA;AAW7D,eAAO,MAAM,UAAU,uDA2DrB,CAAA;AAEF,eAAe,UAAU,CAAA"}
|
|
@@ -4,19 +4,27 @@ import { vui } from '../core';
|
|
|
4
4
|
import { Icon } from '../icon';
|
|
5
5
|
import { List, ListItem } from '../list';
|
|
6
6
|
import { cs } from '../utils';
|
|
7
|
+
import theme from './theme';
|
|
7
8
|
const iconSizeMapper = {
|
|
8
9
|
sm: 'xs',
|
|
9
10
|
md: 'sm',
|
|
10
11
|
lg: 'md',
|
|
11
|
-
xl: 'lg'
|
|
12
|
+
xl: 'lg',
|
|
13
|
+
xxl: 'xl'
|
|
12
14
|
};
|
|
13
15
|
export const TabsNavBar = vui((props, ref) => {
|
|
14
16
|
const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
|
|
15
17
|
const iconSize = iconSizeMapper?.[size] || 'md';
|
|
16
|
-
|
|
18
|
+
const { sizes } = theme ?? {};
|
|
19
|
+
const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize;
|
|
20
|
+
const h = sizes[size ?? 'md'].tabsNavBar.h;
|
|
21
|
+
const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth;
|
|
22
|
+
const py = sizes[size ?? 'md'].tabsNavBar.py;
|
|
23
|
+
const iconMarginRight = size === 'xxl' ? '16px' : '8px';
|
|
24
|
+
return (React.createElement(List, { borderBottom: showBorder ? '1px solid sandstone.79' : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { activeBg: "skyBlue.90", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: "seaBlue.28", disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, h: h, hoverBg: "skyBlue.85", key: tab.id, onClick: () => onNavItemClick?.(tab.id || 0), position: "relative", px: "16px", py: py },
|
|
17
25
|
React.createElement(Box, { alignItems: "center" },
|
|
18
|
-
!!tab.icon && React.createElement(Icon, { mr:
|
|
26
|
+
!!tab.icon && React.createElement(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }),
|
|
19
27
|
tab.title),
|
|
20
|
-
!tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "
|
|
28
|
+
!tab.disabled && tab.id === activeNavItem && (React.createElement(Box, { animation: animationDirection, bg: "seaBlue.28", bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
|
|
21
29
|
});
|
|
22
30
|
export default TabsNavBar;
|
package/dist/esm/tabs/theme.d.ts
CHANGED
|
@@ -3,10 +3,46 @@ declare const _default: {
|
|
|
3
3
|
defaultProps: {};
|
|
4
4
|
parts: string[];
|
|
5
5
|
sizes: {
|
|
6
|
-
sm: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
sm: {
|
|
7
|
+
tabsNavBar: {
|
|
8
|
+
borderWidth: string;
|
|
9
|
+
fontSize: string;
|
|
10
|
+
h: string;
|
|
11
|
+
py: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
md: {
|
|
15
|
+
tabsNavBar: {
|
|
16
|
+
borderWidth: string;
|
|
17
|
+
fontSize: string;
|
|
18
|
+
h: string;
|
|
19
|
+
py: string;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
lg: {
|
|
23
|
+
tabsNavBar: {
|
|
24
|
+
borderWidth: string;
|
|
25
|
+
fontSize: string;
|
|
26
|
+
h: number;
|
|
27
|
+
py: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
xl: {
|
|
31
|
+
tabsNavBar: {
|
|
32
|
+
borderWidth: string;
|
|
33
|
+
fontSize: string;
|
|
34
|
+
h: number;
|
|
35
|
+
py: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
xxl: {
|
|
39
|
+
tabsNavBar: {
|
|
40
|
+
borderWidth: string;
|
|
41
|
+
fontSize: string;
|
|
42
|
+
h: number;
|
|
43
|
+
py: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
10
46
|
};
|
|
11
47
|
variants: {};
|
|
12
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tabs/theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tabs/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,wBAMC"}
|
package/dist/esm/tabs/theme.js
CHANGED
|
@@ -2,10 +2,47 @@ const baseStyle = {};
|
|
|
2
2
|
const defaultProps = {};
|
|
3
3
|
const parts = ['container', 'tabsNavBar', 'tab'];
|
|
4
4
|
const sizes = {
|
|
5
|
-
sm: {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
sm: {
|
|
6
|
+
tabsNavBar: {
|
|
7
|
+
borderWidth: '2px',
|
|
8
|
+
fontSize: 'xs',
|
|
9
|
+
h: '20px',
|
|
10
|
+
py: '4px'
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
md: {
|
|
14
|
+
tabsNavBar: {
|
|
15
|
+
borderWidth: '2px',
|
|
16
|
+
fontSize: 'sm',
|
|
17
|
+
// lineHeight: '20px',
|
|
18
|
+
h: '32px',
|
|
19
|
+
py: '6px'
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
lg: {
|
|
23
|
+
tabsNavBar: {
|
|
24
|
+
borderWidth: '3px',
|
|
25
|
+
fontSize: 'md',
|
|
26
|
+
h: 40,
|
|
27
|
+
py: '8px'
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
xl: {
|
|
31
|
+
tabsNavBar: {
|
|
32
|
+
borderWidth: '4px',
|
|
33
|
+
fontSize: 'lg',
|
|
34
|
+
h: 48,
|
|
35
|
+
py: '10px'
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
xxl: {
|
|
39
|
+
tabsNavBar: {
|
|
40
|
+
borderWidth: '4px',
|
|
41
|
+
fontSize: 'lg',
|
|
42
|
+
h: 56,
|
|
43
|
+
py: '12px'
|
|
44
|
+
}
|
|
45
|
+
}
|
|
9
46
|
};
|
|
10
47
|
const variants = {};
|
|
11
48
|
export default {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAuBnB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG;
|
|
1
|
+
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,OAAO,MAAM,WAAW,CAAA;AAE/B,eAAO,MAAM,OAAO,gIAuBnB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG;YA4FN,gBAAgB;UAClB,cAAc;UACd,cAAc;CACrB,CAAA;AAMD,eAAe,GAAG,CAAA"}
|
package/dist/esm/tag/tag.js
CHANGED
|
@@ -7,7 +7,7 @@ import TagIcon from './tagIcon';
|
|
|
7
7
|
import TagText from './tagText';
|
|
8
8
|
export const TagBase = styled.spanBox `
|
|
9
9
|
align-items: center;
|
|
10
|
-
border-radius:
|
|
10
|
+
border-radius: xl;
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
font-weight: medium;
|
|
13
13
|
justify-content: center;
|
|
@@ -23,8 +23,8 @@ export const TagBase = styled.spanBox `
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
&[aria-disabled='true'] {
|
|
26
|
-
background-color: disabled.bg;
|
|
27
|
-
color: disabled.color;
|
|
26
|
+
background-color: disabled .bg;
|
|
27
|
+
color: disabled .color;
|
|
28
28
|
cursor: not-allowed;
|
|
29
29
|
user-select: none;
|
|
30
30
|
}
|
|
@@ -34,12 +34,15 @@ export const TagBase = styled.spanBox `
|
|
|
34
34
|
* Exposes some props to the children via context.
|
|
35
35
|
*/
|
|
36
36
|
export const Tag = vui((props, ref) => {
|
|
37
|
-
const { casing, children, className, colorScheme
|
|
37
|
+
const { casing, children, className, colorScheme, disabled, icon, iconLeft, iconRight, isFullWidth, isInteractive = props.onClick !== undefined, isRound, isTruncated = true, itemLeft, itemRight, onClick, onDelete, size = 'md', text, variant, weight, ...rest } = props;
|
|
38
38
|
const styles = useStyleConfig('Tag', props);
|
|
39
39
|
const { activeBg, h, hoverBg, spaceX: spaceXBase = 0, ...tagStyles } = styles.container;
|
|
40
|
-
const context = useMemo(() => filterUndefined({
|
|
40
|
+
const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
|
|
41
41
|
const spaceX = spaceXBase / 8;
|
|
42
|
-
|
|
42
|
+
let spaceXText = (spaceXBase + 4) / 8;
|
|
43
|
+
if (size === 'xs') {
|
|
44
|
+
spaceXText = spaceXBase / 8;
|
|
45
|
+
}
|
|
43
46
|
const pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
|
|
44
47
|
const pr = icon || itemRight || iconRight ? spaceX : spaceXText;
|
|
45
48
|
const interactiveProps = !disabled && isInteractive
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { IconProp } from '../icon';
|
|
3
3
|
import { SystemProps, TypographyProps } from '../system';
|
|
4
4
|
import { ThemingProps } from '../theme';
|
|
5
|
-
export declare type
|
|
5
|
+
export declare type TagInnerProps = {
|
|
6
6
|
/** Alias for textTransform prop. @deprecated */
|
|
7
7
|
casing?: TypographyProps['textTransform'];
|
|
8
|
-
/** Available theme colors for this component. @
|
|
8
|
+
/** Available theme colors for this component. @deprecated */
|
|
9
9
|
colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
|
|
10
10
|
/** Displays tag and its content in disabled state with appropriate styling. */
|
|
11
11
|
disabled?: boolean;
|
|
@@ -32,4 +32,5 @@ export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
|
|
|
32
32
|
/** Alias for fontWeight prop. @deprecated */
|
|
33
33
|
weight?: TypographyProps['fontWeight'];
|
|
34
34
|
};
|
|
35
|
+
export declare type TagProps = SystemProps & ThemingProps<'Tag'> & TagInnerProps;
|
|
35
36
|
//# sourceMappingURL=tag.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,
|
|
1
|
+
{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,aAAa,GAAG;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA;AAED,oBAAY,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA"}
|
|
@@ -8,6 +8,8 @@ export const TagButton = vui((props, ref) => {
|
|
|
8
8
|
const { className, ...rest } = props;
|
|
9
9
|
const mergedProps = { ...useTagContext(), ...props };
|
|
10
10
|
const styles = useStyleConfig('Tag', useTagContext());
|
|
11
|
-
return (React.createElement(Button, { borderColor: "transparent",
|
|
11
|
+
return (React.createElement(Button, { borderColor: "transparent",
|
|
12
|
+
// borderRadius={isRound ? undefined : 2}
|
|
13
|
+
className: cs('vui-tagButton', className), disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: mergedProps.variant, ...styles.button, ...rest }));
|
|
12
14
|
});
|
|
13
15
|
export default TagButton;
|