@mailstep/design-system 0.8.16-beta.15 → 0.8.16-beta.16

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 (9) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/SideMenu/styles.js +8 -8
  3. package/ui/Elements/Select/themes/selectStyles.js +1 -2
  4. package/ui/ThemeProvider/themes/dark.d.ts +0 -1
  5. package/ui/ThemeProvider/themes/default.d.ts +0 -1
  6. package/ui/ThemeProvider/themes/default.js +1 -1
  7. package/ui/ThemeProvider/themes/index.d.ts +0 -2
  8. package/ui/index.es.js +6451 -6457
  9. package/ui/index.umd.js +366 -366
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.16-beta.15",
3
+ "version": "0.8.16-beta.16",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/SideMenu/styles.js 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') : th.color('sideMenuSelectedText'));
31
+ return ($lightMode ? th.color('typoPrimary') : 'white');
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') : th.color('sideMenuSelectedText'));
60
+ return ($lightMode ? th('colors.red1') : 'white');
61
61
  }, function (_a) {
62
62
  var $lightMode = _a.$lightMode;
63
- return ($lightMode ? th('colors.red1') : th.color('sideMenuSelectedText'));
63
+ return ($lightMode ? th('colors.red1') : 'white');
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('sideMenuSelectedText'));
69
+ return ($lightMode ? th.color('red1') : th.color('white'));
70
70
  }, th('colors.red1'), TooltipItemLabel, function (_a) {
71
71
  var $lightMode = _a.$lightMode;
72
- return ($lightMode ? th.color('typoPrimary') : th.color('sideMenuSelectedText'));
72
+ return ($lightMode ? th.color('typoPrimary') : th.color('white'));
73
73
  }, ItemDropdownArrow, function (_a) {
74
74
  var $lightMode = _a.$lightMode;
75
- return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
75
+ return ($lightMode ? th.color('red1') : th.color('white'));
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('sideMenuSelectedText'));
82
+ return ($lightMode ? th.color('red1') : th.color('white'));
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('sideMenuSelectedText'));
110
+ return ($lightMode ? th.color('red1') : th.color('white'));
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');
package/ui/Elements/Select/themes/selectStyles.js CHANGED
@@ -124,10 +124,9 @@ export var CustomStyles = {
124
124
  }); }
125
125
  };
126
126
  export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
127
- var inputTextColor = th.color('blue2')({ theme: theme });
128
127
  var customColors = {
129
128
  primary: th.color('red1')({ theme: theme }),
130
- inputTextColor: inputTextColor,
129
+ inputTextColor: th.color('blue1')({ theme: theme }),
131
130
  backgroundColor: th.color('white')({ theme: theme }),
132
131
  backgroundColorDisabled: th.color('bgLightGray1')({ theme: theme }),
133
132
  menuBackgroundColor: th.color('white')({ theme: theme }),
package/ui/ThemeProvider/themes/dark.d.ts CHANGED
@@ -91,7 +91,6 @@ declare const darkTheme: {
91
91
  magenta70: string;
92
92
  magenta80: string;
93
93
  magenta90: string;
94
- sideMenuSelectedText: string;
95
94
  };
96
95
  shadows: {
97
96
  dialogShadow: string;
package/ui/ThemeProvider/themes/default.d.ts CHANGED
@@ -92,7 +92,6 @@ declare const defaultTheme: {
92
92
  magenta70: string;
93
93
  magenta80: string;
94
94
  magenta90: string;
95
- sideMenuSelectedText: string;
96
95
  };
97
96
  fonts: {
98
97
  primary: string;
package/ui/ThemeProvider/themes/default.js CHANGED
@@ -93,7 +93,7 @@ var defaultTheme = {
93
93
  magenta80: '#9F1853',
94
94
  magenta90: '#7B1340',
95
95
  // specific place for dark / light mode
96
- sideMenuSelectedText: '#ffffff',
96
+ // sideMenuSelectedText: '#ffffff',
97
97
  },
98
98
  fonts: {
99
99
  primary: 'Inter, sans-serif',
package/ui/ThemeProvider/themes/index.d.ts CHANGED
@@ -93,7 +93,6 @@ declare const themes: {
93
93
  magenta70: string;
94
94
  magenta80: string;
95
95
  magenta90: string;
96
- sideMenuSelectedText: string;
97
96
  };
98
97
  fonts: {
99
98
  primary: string;
@@ -448,7 +447,6 @@ declare const themes: {
448
447
  magenta70: string;
449
448
  magenta80: string;
450
449
  magenta90: string;
451
- sideMenuSelectedText: string;
452
450
  };
453
451
  shadows: {
454
452
  dialogShadow: string;