@mailstep/design-system 0.8.16-beta.12 → 0.8.16-beta.14
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/package.json +1 -1
- package/ui/Blocks/SideMenu/styles.js +8 -8
- package/ui/Elements/Select/themes/selectStyles.js +5 -3
- package/ui/Elements/Select/types.d.ts +3 -1
- package/ui/Forms/Input/styles.js +1 -1
- package/ui/ThemeProvider/themes/dark.d.ts +1 -0
- package/ui/ThemeProvider/themes/default.d.ts +1 -0
- package/ui/ThemeProvider/themes/default.js +3 -1
- package/ui/ThemeProvider/themes/index.d.ts +2 -0
- package/ui/index.es.js +14278 -13652
- package/ui/index.umd.js +446 -446
package/package.json
CHANGED
|
@@ -28,7 +28,7 @@ export var ItemLabel = styled.div(templateObject_6 || (templateObject_6 = __make
|
|
|
28
28
|
});
|
|
29
29
|
export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n svg {\n max-width: 11px;\n }\n"], ["\n color: ", ";\n svg {\n max-width: 11px;\n }\n"])), function (_a) {
|
|
30
30
|
var $lightMode = _a.$lightMode;
|
|
31
|
-
return ($lightMode ? th.color('typoPrimary') : '
|
|
31
|
+
return ($lightMode ? th.color('typoPrimary') : th.color('sideMenuSelectedText'));
|
|
32
32
|
});
|
|
33
33
|
export var TooltipItemLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"], ["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"])));
|
|
34
34
|
export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
@@ -57,29 +57,29 @@ export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9
|
|
|
57
57
|
return ($isCompact ? 'center' : 'space-between');
|
|
58
58
|
}, function (_a) {
|
|
59
59
|
var $lightMode = _a.$lightMode;
|
|
60
|
-
return ($lightMode ? th('colors.red1') : '
|
|
60
|
+
return ($lightMode ? th('colors.red1') : th.color('sideMenuSelectedText'));
|
|
61
61
|
}, function (_a) {
|
|
62
62
|
var $lightMode = _a.$lightMode;
|
|
63
|
-
return ($lightMode ? th('colors.red1') : '
|
|
63
|
+
return ($lightMode ? th('colors.red1') : th.color('sideMenuSelectedText'));
|
|
64
64
|
}, TooltipItemLabel, function (_a) {
|
|
65
65
|
var $lightMode = _a.$lightMode;
|
|
66
66
|
return ($lightMode ? th.color('red20') : th.color('blue2'));
|
|
67
67
|
}, function (_a) {
|
|
68
68
|
var $lightMode = _a.$lightMode;
|
|
69
|
-
return ($lightMode ? th.color('red1') : th.color('
|
|
69
|
+
return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
|
|
70
70
|
}, th('colors.red1'), TooltipItemLabel, function (_a) {
|
|
71
71
|
var $lightMode = _a.$lightMode;
|
|
72
|
-
return ($lightMode ? th.color('typoPrimary') : th.color('
|
|
72
|
+
return ($lightMode ? th.color('typoPrimary') : th.color('sideMenuSelectedText'));
|
|
73
73
|
}, ItemDropdownArrow, function (_a) {
|
|
74
74
|
var $lightMode = _a.$lightMode;
|
|
75
|
-
return ($lightMode ? th.color('red1') : th.color('
|
|
75
|
+
return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
|
|
76
76
|
});
|
|
77
77
|
export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"], ["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"])), function (_a) {
|
|
78
78
|
var $lightMode = _a.$lightMode;
|
|
79
79
|
return ($lightMode ? th.color('blue2') : undefined);
|
|
80
80
|
}, ItemLabel, ItemLabel, function (_a) {
|
|
81
81
|
var $lightMode = _a.$lightMode;
|
|
82
|
-
return ($lightMode ? th.color('red1') : th.color('
|
|
82
|
+
return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
|
|
83
83
|
}, function (_a) {
|
|
84
84
|
var $lightMode = _a.$lightMode;
|
|
85
85
|
return ($lightMode ? th.color('red1') : th.color('blue2'));
|
|
@@ -107,7 +107,7 @@ export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_1
|
|
|
107
107
|
return th.color('red1');
|
|
108
108
|
}, function (_a) {
|
|
109
109
|
var $lightMode = _a.$lightMode;
|
|
110
|
-
return ($lightMode ? th.color('red1') : th.color('
|
|
110
|
+
return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
|
|
111
111
|
}, ItemDropdownArrow, ItemLinkWrap, function (_a) {
|
|
112
112
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
|
|
113
113
|
return $isCompact ? 'none' : $lightMode ? th.color('neutral20') : th.color('blue4');
|
|
@@ -16,7 +16,7 @@ export var CustomStyles = {
|
|
|
16
16
|
var _b;
|
|
17
17
|
var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
|
|
18
18
|
var colors = theme.colors;
|
|
19
|
-
return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.
|
|
19
|
+
return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.backgroundColorDisabled : colors.backgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
|
|
20
20
|
fontWeight: theme.textWeightNormal,
|
|
21
21
|
fontFamily: theme.font
|
|
22
22
|
}, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minWidth: 'min-content', '.inputIcon': {
|
|
@@ -93,7 +93,7 @@ export var CustomStyles = {
|
|
|
93
93
|
},
|
|
94
94
|
menu: function (styles, state) {
|
|
95
95
|
var theme = state.theme;
|
|
96
|
-
return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '4px', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', backgroundColor: theme.colors.
|
|
96
|
+
return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '4px', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', backgroundColor: theme.colors.menuBackgroundColor });
|
|
97
97
|
},
|
|
98
98
|
menuList: function (styles, _a) {
|
|
99
99
|
var theme = _a.theme;
|
|
@@ -128,7 +128,9 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
|
|
|
128
128
|
var customColors = {
|
|
129
129
|
primary: th.color('red1')({ theme: theme }),
|
|
130
130
|
inputTextColor: inputTextColor,
|
|
131
|
-
|
|
131
|
+
backgroundColor: th.color('white')({ theme: theme }),
|
|
132
|
+
backgroundColorDisabled: th.color('bgLightGray1')({ theme: theme }),
|
|
133
|
+
menuBackgroundColor: th.color('white')({ theme: theme }),
|
|
132
134
|
optionTextColor: th.color('blue2')({ theme: theme }),
|
|
133
135
|
menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),
|
|
134
136
|
inputDisabledColor: th.color('lightGray1')({ theme: theme }),
|
|
@@ -61,7 +61,9 @@ export type BaseColors = {
|
|
|
61
61
|
optionTextColor: string;
|
|
62
62
|
inputDisabledColor: string;
|
|
63
63
|
inputBorderColor: string;
|
|
64
|
-
|
|
64
|
+
backgroundColor: string;
|
|
65
|
+
backgroundColorDisabled: string;
|
|
66
|
+
menuBackgroundColor: string;
|
|
65
67
|
inputTextColor: string;
|
|
66
68
|
placeholderTextColor: string;
|
|
67
69
|
activeOptionBackground: string;
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -29,7 +29,7 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
|
|
|
29
29
|
export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
|
|
30
30
|
export var StyledInput = styled.input.attrs(function (props) { return ({
|
|
31
31
|
as: props.$asTextArea ? 'textarea' : 'input'
|
|
32
|
-
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n background-color:
|
|
32
|
+
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n background-color: white;\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n background-color: white;\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: ", ";\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
|
|
33
33
|
var $isInvalid = _a.$isInvalid;
|
|
34
34
|
return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
|
|
35
35
|
}, function (props) { return resolvePaddingRight(props); }, function (props) { return (props.type !== 'checkbox' ? '100%' : 'auto'); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
@@ -91,7 +91,9 @@ var defaultTheme = {
|
|
|
91
91
|
magenta60: '#EE5396',
|
|
92
92
|
magenta70: '#D12771',
|
|
93
93
|
magenta80: '#9F1853',
|
|
94
|
-
magenta90: '#7B1340'
|
|
94
|
+
magenta90: '#7B1340',
|
|
95
|
+
// specific place for dark / light mode
|
|
96
|
+
sideMenuSelectedText: '#ffffff',
|
|
95
97
|
},
|
|
96
98
|
fonts: {
|
|
97
99
|
primary: 'Inter, sans-serif',
|
|
@@ -93,6 +93,7 @@ declare const themes: {
|
|
|
93
93
|
magenta70: string;
|
|
94
94
|
magenta80: string;
|
|
95
95
|
magenta90: string;
|
|
96
|
+
sideMenuSelectedText: string;
|
|
96
97
|
};
|
|
97
98
|
fonts: {
|
|
98
99
|
primary: string;
|
|
@@ -447,6 +448,7 @@ declare const themes: {
|
|
|
447
448
|
magenta70: string;
|
|
448
449
|
magenta80: string;
|
|
449
450
|
magenta90: string;
|
|
451
|
+
sideMenuSelectedText: string;
|
|
450
452
|
};
|
|
451
453
|
shadows: {
|
|
452
454
|
dialogShadow: string;
|