@mailstep/design-system 0.8.16-beta.7 → 0.8.16-beta.9
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/CommonGrid/styles.js +1 -1
- package/ui/Blocks/Modal/styles.js +5 -5
- package/ui/Elements/Select/components/CountMultiValue.js +1 -1
- package/ui/Elements/Select/themes/selectStyles.js +14 -14
- package/ui/Forms/Checkbox/styles.js +1 -1
- package/ui/Forms/Input/styles.js +1 -1
- package/ui/ThemeProvider/themes/dark.d.ts +12 -11
- package/ui/ThemeProvider/themes/dark.js +1 -1
- package/ui/ThemeProvider/themes/default.d.ts +1 -0
- package/ui/ThemeProvider/themes/default.js +1 -0
- package/ui/ThemeProvider/themes/index.d.ts +13 -11
- package/ui/index.es.js +14140 -13596
- package/ui/index.umd.js +439 -439
package/package.json
CHANGED
|
@@ -22,7 +22,7 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
|
|
|
22
22
|
return (withPagination ? gridFooterHeight : 0);
|
|
23
23
|
});
|
|
24
24
|
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"])), gridButtonStripHeight);
|
|
25
|
-
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color:
|
|
25
|
+
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: neutral20;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background-color: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: neutral20;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background-color: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), function (_a) {
|
|
26
26
|
var withButtonStrip = _a.withButtonStrip;
|
|
27
27
|
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
28
28
|
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import styled, { css, th } from '@xstyled/styled-components';
|
|
6
5
|
import { createRgba } from '../../utils';
|
|
6
|
+
import styled, { css, th } from '@xstyled/styled-components';
|
|
7
7
|
var Component;
|
|
8
8
|
(function (Component) {
|
|
9
9
|
Component["Header"] = "header";
|
|
@@ -17,19 +17,19 @@ var variantStyles = function (component, variant) {
|
|
|
17
17
|
header: {
|
|
18
18
|
default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 20px;\n border-bottom: 1px solid ", ";\n @media (min-width: 576px) {\n padding: 30px;\n border-bottom: 0;\n }\n "], ["\n padding: 20px;\n border-bottom: 1px solid ", ";\n @media (min-width: 576px) {\n padding: 30px;\n border-bottom: 0;\n }\n "])), th.color('lightGray6')),
|
|
19
19
|
compact: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 20px 20px;\n border-bottom: 1px solid ", ";\n "], ["\n padding: 20px 20px;\n border-bottom: 1px solid ", ";\n "])), th.color('lightGray6')),
|
|
20
|
-
mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 20px;\n "], ["\n padding: 20px;\n "])))
|
|
20
|
+
mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 20px;\n "], ["\n padding: 20px;\n "])))
|
|
21
21
|
},
|
|
22
22
|
dialogWindow: {
|
|
23
23
|
default: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "], ["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "]))),
|
|
24
24
|
compact: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "], ["\n border-radius: 10px;\n max-width: calc(100% - 32px);\n "]))),
|
|
25
|
-
mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 0;\n max-width: 100% !important;\n "], ["\n border-radius: 0;\n max-width: 100% !important;\n "])))
|
|
25
|
+
mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 0;\n max-width: 100% !important;\n "], ["\n border-radius: 0;\n max-width: 100% !important;\n "])))
|
|
26
26
|
},
|
|
27
27
|
contentContainer: {
|
|
28
28
|
default: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding: 20px 20px 15px;\n @media (min-width: 576px) {\n padding: 30px;\n }\n "], ["\n padding: 20px 20px 15px;\n @media (min-width: 576px) {\n padding: 30px;\n }\n "]))),
|
|
29
29
|
compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 20px 20px 15px;\n "], ["\n padding: 20px 20px 15px;\n "]))),
|
|
30
|
-
mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
30
|
+
mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
31
31
|
},
|
|
32
|
-
title: {}
|
|
32
|
+
title: {}
|
|
33
33
|
}[component][variant]);
|
|
34
34
|
};
|
|
35
35
|
export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: fixed;\n z-index: 9;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"], ["\n position: fixed;\n z-index: 9;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: ", ";\n text-align: center;\n\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n\n @media (max-width: 576px) {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 0;\n }\n"])), function (_a) {
|
|
@@ -26,7 +26,7 @@ var CountMultiValue = function (props) {
|
|
|
26
26
|
if (!shortValues) {
|
|
27
27
|
return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
|
|
28
28
|
}
|
|
29
|
-
if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value)
|
|
29
|
+
if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) === ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
|
|
30
30
|
return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
|
|
31
31
|
}
|
|
32
32
|
else {
|
|
@@ -18,9 +18,9 @@ export var CustomStyles = {
|
|
|
18
18
|
var colors = theme.colors;
|
|
19
19
|
return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
|
|
20
20
|
fontWeight: theme.textWeightNormal,
|
|
21
|
-
fontFamily: theme.font
|
|
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': {
|
|
23
|
-
color: isDisabled ? colors.defaultControlColor :
|
|
23
|
+
color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
|
|
24
24
|
} });
|
|
25
25
|
},
|
|
26
26
|
valueContainer: function (styles, _a) {
|
|
@@ -38,9 +38,9 @@ export var CustomStyles = {
|
|
|
38
38
|
multiValue: function (styles, state) {
|
|
39
39
|
var theme = state.theme;
|
|
40
40
|
return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: theme.colors.lightGray7, borderRadius: '4px', '& svg': {
|
|
41
|
-
color: theme.colors.inputTextColor
|
|
41
|
+
color: theme.colors.inputTextColor
|
|
42
42
|
}, ' > div': {
|
|
43
|
-
fontSize: '12px'
|
|
43
|
+
fontSize: '12px'
|
|
44
44
|
} });
|
|
45
45
|
},
|
|
46
46
|
multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
|
|
@@ -87,8 +87,8 @@ export var CustomStyles = {
|
|
|
87
87
|
? theme.colors.hoverToActiveOptionBackground
|
|
88
88
|
: !isDisabled
|
|
89
89
|
? theme.colors.menuHoverBackgroundColor
|
|
90
|
-
: undefined
|
|
91
|
-
}
|
|
90
|
+
: undefined
|
|
91
|
+
}
|
|
92
92
|
};
|
|
93
93
|
},
|
|
94
94
|
menu: function (styles, state) {
|
|
@@ -103,21 +103,21 @@ export var CustomStyles = {
|
|
|
103
103
|
height: '47px',
|
|
104
104
|
backgroundColor: theme.colors.defaultControlColor,
|
|
105
105
|
'&:hover': {
|
|
106
|
-
backgroundColor: theme.colors.dropdownIndicatorColor
|
|
107
|
-
}
|
|
106
|
+
backgroundColor: theme.colors.dropdownIndicatorColor
|
|
107
|
+
}
|
|
108
108
|
}, '::-webkit-scrollbar': {
|
|
109
|
-
width: '10px'
|
|
109
|
+
width: '10px'
|
|
110
110
|
}, '::-webkit-scrollbar-track': {
|
|
111
111
|
backgroundColor: theme.colors.menuHoverBackgroundColor,
|
|
112
|
-
borderRadius: '6px'
|
|
112
|
+
borderRadius: '6px'
|
|
113
113
|
} });
|
|
114
114
|
},
|
|
115
115
|
dropdownIndicator: function (styles, state) {
|
|
116
116
|
var theme = state.theme, isDisabled = state.isDisabled;
|
|
117
117
|
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', '& svg': {
|
|
118
|
-
stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor
|
|
118
|
+
stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor
|
|
119
119
|
}, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
|
|
120
|
-
padding: '0px 10px 0px 1px'
|
|
120
|
+
padding: '0px 10px 0px 1px'
|
|
121
121
|
} });
|
|
122
122
|
},
|
|
123
123
|
clearIndicator: function (styles, state) {
|
|
@@ -125,7 +125,7 @@ export var CustomStyles = {
|
|
|
125
125
|
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 4px 0px 0px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
|
|
126
126
|
},
|
|
127
127
|
indicatorSeparator: function () { return ({
|
|
128
|
-
display: 'none'
|
|
128
|
+
display: 'none'
|
|
129
129
|
}); }
|
|
130
130
|
};
|
|
131
131
|
export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
|
|
@@ -144,7 +144,7 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
|
|
|
144
144
|
dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
|
|
145
145
|
inputBorderHoverColor: th.color('gray5')({ theme: theme }),
|
|
146
146
|
activeOptionBackground: th.color('red20')({ theme: theme }),
|
|
147
|
-
hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
|
|
147
|
+
hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
|
|
148
148
|
};
|
|
149
149
|
return function (reactSelectTheme) {
|
|
150
150
|
return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: '38px', flexWrap: useFilterSubvariant ? 'nowrap' : 'wrap', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
|
|
@@ -2,8 +2,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
6
5
|
import { Icon } from '../../Elements/Icon';
|
|
6
|
+
import styled, { th } from '@xstyled/styled-components';
|
|
7
7
|
export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: transparent;\n border-color: lightGray5;\n }\n"], ["\n width: ", ";\n min-width: ", ";\n height: ", ";\n border-radius: md;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n transform: rotate(0);\n overflow: hidden;\n border: slim;\n border-color: lightGray5;\n\n input[type='checkbox']:not(:disabled):hover + & {\n border-color: gray1;\n }\n\n input[type='checkbox']:disabled + & {\n background-color: white;\n border-color: lightGray7;\n }\n\n input[type='checkbox']:checked:disabled + & {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n\n input[type='checkbox']:checked:not(:disabled) + & {\n transform: rotate(0deg);\n background-color: red1;\n border-color: red1;\n }\n\n input[type='checkbox']:not(:checked):not(:disabled) + & {\n transform: rotate(90deg);\n background-color: transparent;\n border-color: lightGray5;\n }\n"])), function (_a) {
|
|
8
8
|
var size = _a.size;
|
|
9
9
|
return size;
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -32,7 +32,7 @@ export var StyledInput = styled.input.attrs(function (props) { return ({
|
|
|
32
32
|
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n background-color: transparent;\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: transparent;\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
|
-
}, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
35
|
+
}, function (props) { return resolvePaddingRight(props); }, function (props) { return (props.type !== 'checkbox' ? '100%' : 'auto'); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
36
36
|
var big = _a.big;
|
|
37
37
|
return big
|
|
38
38
|
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
|
|
@@ -2,14 +2,23 @@ declare const darkTheme: {
|
|
|
2
2
|
colors: {
|
|
3
3
|
bgLightGray: string;
|
|
4
4
|
bgLightGray1: string;
|
|
5
|
+
typoPrimary: string;
|
|
6
|
+
textPrimary: string;
|
|
7
|
+
white: string;
|
|
8
|
+
lightGray7: string;
|
|
9
|
+
neutral20: string;
|
|
10
|
+
red1: string;
|
|
11
|
+
red20: string;
|
|
12
|
+
red30: string;
|
|
13
|
+
blue2: string;
|
|
5
14
|
lightGray1: string;
|
|
15
|
+
blue3: string;
|
|
6
16
|
lightGray2: string;
|
|
7
17
|
lightGray3: string;
|
|
8
18
|
lightGray4: string;
|
|
9
19
|
lightGray5: string;
|
|
10
20
|
lightGray6: string;
|
|
11
|
-
|
|
12
|
-
neutral20: string;
|
|
21
|
+
neutral10: string;
|
|
13
22
|
neutral300: string;
|
|
14
23
|
neutral500: string;
|
|
15
24
|
gray: string;
|
|
@@ -19,12 +28,8 @@ declare const darkTheme: {
|
|
|
19
28
|
gray4: string;
|
|
20
29
|
gray5: string;
|
|
21
30
|
blue1: string;
|
|
22
|
-
blue2: string;
|
|
23
|
-
blue3: string;
|
|
24
31
|
blue4: string;
|
|
25
|
-
textPrimary: string;
|
|
26
32
|
textTertiary: string;
|
|
27
|
-
typoPrimary: string;
|
|
28
33
|
blue10: string;
|
|
29
34
|
blue20: string;
|
|
30
35
|
blue30: string;
|
|
@@ -64,11 +69,8 @@ declare const darkTheme: {
|
|
|
64
69
|
yellow1: string;
|
|
65
70
|
yellow2: string;
|
|
66
71
|
red10: string;
|
|
67
|
-
red20: string;
|
|
68
|
-
red30: string;
|
|
69
72
|
red50: string;
|
|
70
73
|
red70: string;
|
|
71
|
-
red1: string;
|
|
72
74
|
red2: string;
|
|
73
75
|
red3: string;
|
|
74
76
|
red60: string;
|
|
@@ -89,9 +91,9 @@ declare const darkTheme: {
|
|
|
89
91
|
magenta70: string;
|
|
90
92
|
magenta80: string;
|
|
91
93
|
magenta90: string;
|
|
92
|
-
white: string;
|
|
93
94
|
};
|
|
94
95
|
shadows: {
|
|
96
|
+
dialogShadow: string;
|
|
95
97
|
boxShadow: string;
|
|
96
98
|
dropShadow: string;
|
|
97
99
|
inputFocusBoxShadow: string;
|
|
@@ -99,7 +101,6 @@ declare const darkTheme: {
|
|
|
99
101
|
tooltipBoxShadow: string;
|
|
100
102
|
cardShadow: string;
|
|
101
103
|
smooth: string;
|
|
102
|
-
dialogShadow: string;
|
|
103
104
|
headerShadow: string;
|
|
104
105
|
headerShadowB: string;
|
|
105
106
|
headerShadowNotifications: string;
|
|
@@ -10,5 +10,5 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import defaultTheme from './default';
|
|
13
|
-
var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#131A27', bgLightGray1: '#
|
|
13
|
+
var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#131A27', bgLightGray1: '#2a4054', typoPrimary: '#ffffff', textPrimary: '#ffffff', white: '#2a4054', lightGray7: '#5f5f5f', neutral20: '#2a4054', red1: '#d0d0d0', red20: '#5f5f5f', red30: '#8594A5', blue2: '#ffffff', lightGray1: '#162C3F', blue3: '#2a4054' }), shadows: __assign(__assign({}, defaultTheme.shadows), { dialogShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)' }) });
|
|
14
14
|
export default darkTheme;
|
|
@@ -12,6 +12,7 @@ declare const themes: {
|
|
|
12
12
|
lightGray5: string;
|
|
13
13
|
lightGray6: string;
|
|
14
14
|
lightGray7: string;
|
|
15
|
+
neutral10: string;
|
|
15
16
|
neutral20: string;
|
|
16
17
|
neutral300: string;
|
|
17
18
|
neutral500: string;
|
|
@@ -357,14 +358,23 @@ declare const themes: {
|
|
|
357
358
|
colors: {
|
|
358
359
|
bgLightGray: string;
|
|
359
360
|
bgLightGray1: string;
|
|
361
|
+
typoPrimary: string;
|
|
362
|
+
textPrimary: string;
|
|
363
|
+
white: string;
|
|
364
|
+
lightGray7: string;
|
|
365
|
+
neutral20: string;
|
|
366
|
+
red1: string;
|
|
367
|
+
red20: string;
|
|
368
|
+
red30: string;
|
|
369
|
+
blue2: string;
|
|
360
370
|
lightGray1: string;
|
|
371
|
+
blue3: string;
|
|
361
372
|
lightGray2: string;
|
|
362
373
|
lightGray3: string;
|
|
363
374
|
lightGray4: string;
|
|
364
375
|
lightGray5: string;
|
|
365
376
|
lightGray6: string;
|
|
366
|
-
|
|
367
|
-
neutral20: string;
|
|
377
|
+
neutral10: string;
|
|
368
378
|
neutral300: string;
|
|
369
379
|
neutral500: string;
|
|
370
380
|
gray: string;
|
|
@@ -374,12 +384,8 @@ declare const themes: {
|
|
|
374
384
|
gray4: string;
|
|
375
385
|
gray5: string;
|
|
376
386
|
blue1: string;
|
|
377
|
-
blue2: string;
|
|
378
|
-
blue3: string;
|
|
379
387
|
blue4: string;
|
|
380
|
-
textPrimary: string;
|
|
381
388
|
textTertiary: string;
|
|
382
|
-
typoPrimary: string;
|
|
383
389
|
blue10: string;
|
|
384
390
|
blue20: string;
|
|
385
391
|
blue30: string;
|
|
@@ -419,11 +425,8 @@ declare const themes: {
|
|
|
419
425
|
yellow1: string;
|
|
420
426
|
yellow2: string;
|
|
421
427
|
red10: string;
|
|
422
|
-
red20: string;
|
|
423
|
-
red30: string;
|
|
424
428
|
red50: string;
|
|
425
429
|
red70: string;
|
|
426
|
-
red1: string;
|
|
427
430
|
red2: string;
|
|
428
431
|
red3: string;
|
|
429
432
|
red60: string;
|
|
@@ -444,9 +447,9 @@ declare const themes: {
|
|
|
444
447
|
magenta70: string;
|
|
445
448
|
magenta80: string;
|
|
446
449
|
magenta90: string;
|
|
447
|
-
white: string;
|
|
448
450
|
};
|
|
449
451
|
shadows: {
|
|
452
|
+
dialogShadow: string;
|
|
450
453
|
boxShadow: string;
|
|
451
454
|
dropShadow: string;
|
|
452
455
|
inputFocusBoxShadow: string;
|
|
@@ -454,7 +457,6 @@ declare const themes: {
|
|
|
454
457
|
tooltipBoxShadow: string;
|
|
455
458
|
cardShadow: string;
|
|
456
459
|
smooth: string;
|
|
457
|
-
dialogShadow: string;
|
|
458
460
|
headerShadow: string;
|
|
459
461
|
headerShadowB: string;
|
|
460
462
|
headerShadowNotifications: string;
|