@mailstep/design-system 0.8.16-beta.6 → 0.8.16-beta.8

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.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/Modal/styles.js +6 -6
  3. package/ui/Elements/Select/components/CountMultiValue.js +1 -1
  4. package/ui/Elements/Select/themes/selectStyles.js +14 -14
  5. package/ui/Forms/Checkbox/styles.js +1 -1
  6. package/ui/Forms/Input/styles.js +1 -1
  7. package/ui/ThemeProvider/themes/dark.d.ts +12 -11
  8. package/ui/ThemeProvider/themes/dark.js +1 -1
  9. package/ui/ThemeProvider/themes/default.d.ts +1 -0
  10. package/ui/ThemeProvider/themes/default.js +1 -0
  11. package/ui/ThemeProvider/themes/index.d.ts +13 -11
  12. package/ui/index.es.js +14069 -14105
  13. package/ui/index.umd.js +361 -361
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.16-beta.6",
3
+ "version": "0.8.16-beta.8",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/Modal/styles.js CHANGED
@@ -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) {
@@ -38,7 +38,7 @@ export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 =
38
38
  });
39
39
  export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"], ["\n background-color: ", ";\n margin: auto;\n box-shadow: dialogShadow;\n min-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n\n ", "\n ", ";\n\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (min-width: 576px) {\n margin: ", " auto 0 auto;\n }\n"])), function (_a) {
40
40
  var $backgroundColor = _a.$backgroundColor;
41
- return $backgroundColor || '#fefefe';
41
+ return $backgroundColor || th.color('white');
42
42
  }, function (_a) {
43
43
  var $minWidth = _a.$minWidth;
44
44
  return $minWidth || '10%';
package/ui/Elements/Select/components/CountMultiValue.js CHANGED
@@ -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) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.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 {
package/ui/Elements/Select/themes/selectStyles.js CHANGED
@@ -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 : !!selectProps.value ? colors.inputTextColor : 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 });
package/ui/Forms/Checkbox/styles.js CHANGED
@@ -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 "]))) : '';
package/ui/ThemeProvider/themes/dark.d.ts CHANGED
@@ -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
- lightGray7: string;
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;
package/ui/ThemeProvider/themes/dark.js CHANGED
@@ -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: '#1E2A3A', lightGray1: '#1A2435', lightGray2: '#162030', lightGray3: '#2E3A4A', lightGray4: '#3A4656', lightGray5: '#4A5666', lightGray6: '#2E3A4A', lightGray7: '#253040', neutral20: '#1E2A3A', neutral300: '#9AABBF', neutral500: '#B0C0D4', gray: '#7A8A9A', gray1: '#8A9AAA', gray2: '#6A7A8A', gray3: '#9AACBA', gray4: '#B0C4D8', gray5: '#8A9CB0', blue1: '#D0E0F0', blue2: '#C0D4E8', blue3: '#E0ECF8', blue4: '#F0F6FC', textPrimary: '#E8ECF2', textTertiary: '#8A9AB0', typoPrimary: '#D0E0F0', blue10: '#0D1A2A', blue20: '#122440', blue30: '#1A3050', blue40: '#6FADFF', blue50: '#4A9AFF', blue60: '#3A8AFF', blue70: '#5A9AFF', blue80: '#6AA8FF', blue90: '#8ABAE8', teal20: '#0A1E24', teal40: '#1A3A40', teal50: '#1aa1a7', teal60: '#00B1D0', teal70: '#1aa1da', teal80: '#2AB0C0', teal90: '#3AC0D0', green10: '#0A1A10', green20: '#102A18', green30: '#1A3A22', green50: '#81dd91', green60: '#2AB860', green70: '#3AC870', green80: '#4AD880', green90: '#2AC880', green: '#13CE62', successColor: '#2AB858', darkGreen: '#2AB860', orange20: '#1A1408', orange30: '#2A2010', orange50: '#ff9f43', orange60: '#FFA820', orange80: '#D08020', yellow10: '#1A1A08', yellow20: '#2A2810', yellow60: '#FFE600', yellow70: '#FFD702', yellow1: '#FFD702', yellow2: '#F2E871', red10: '#1A0A08', red20: '#2A1410', red30: '#3A1E18', red50: '#ff7c7b', red70: '#E84040', red1: '#E84040', red2: '#F05040', red3: '#C83030', red60: '#E84040', red80: '#D03030', dangerColor: '#F04838', purple20: '#14102A', purple40: '#2A8AC0', purple50: '#6A90D0', purple60: '#8A78E0', purple80: '#6A5AC0', purple90: '#4A6AB0', magenta10: '#1A0A14', magenta20: '#2A1420', magenta30: '#3A1E30', magenta40: '#FFAFD2', magenta50: '#FF7EB6', magenta60: '#EE5396', magenta70: '#D12771', magenta80: '#9F1853', magenta90: '#7B1340' }), shadows: __assign(__assign({}, defaultTheme.shadows), { boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.3)', dropShadow: '0px 5px 40px rgba(0, 0, 0, 0.3)', inputFocusBoxShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.4)', dropdownMenuShadow: '0 5px 25px rgba(0, 0, 0, 0.3)', tooltipBoxShadow: '0px 2px 20px rgba(0, 0, 0, 0.3)', cardShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.4)', smooth: '0px 4px 25px 0px rgba(0, 0, 0, 0.3)', dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.25)', headerShadow: '1px 2px 3px rgba(0, 0, 0, 0.4)', headerShadowB: '1px 1px 3px rgba(0, 0, 0, 0.4)', headerShadowNotifications: '1px 1px 2px rgba(0, 0, 0, 0.4)', cornerDialogShadow: '1px 1px 3px 1px rgba(0, 0, 0, 0.4)', gridShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.3)', tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.3)' }) });
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;
package/ui/ThemeProvider/themes/default.d.ts CHANGED
@@ -11,6 +11,7 @@ declare const defaultTheme: {
11
11
  lightGray5: string;
12
12
  lightGray6: string;
13
13
  lightGray7: string;
14
+ neutral10: string;
14
15
  neutral20: string;
15
16
  neutral300: string;
16
17
  neutral500: string;
package/ui/ThemeProvider/themes/default.js CHANGED
@@ -11,6 +11,7 @@ var defaultTheme = {
11
11
  lightGray5: '#A3B3C1',
12
12
  lightGray6: '#D2D8DF',
13
13
  lightGray7: '#E7EBEF',
14
+ neutral10: '#FAFBFC',
14
15
  neutral20: '#F1F5F9',
15
16
  neutral300: '#5E6C84',
16
17
  neutral500: '#42526E',
package/ui/ThemeProvider/themes/index.d.ts CHANGED
@@ -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
- lightGray7: string;
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;