@mailstep/design-system 0.9.1 → 0.9.2

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.9.1",
3
+ "version": "0.9.2",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -118,7 +118,7 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
118
118
  children: /* @__PURE__ */ jsx(Button, {
119
119
  onClick: onOpenPresetsModal,
120
120
  type: "button",
121
- variant: "default",
121
+ variant: "outline",
122
122
  appearance: "tertiary",
123
123
  children: /* @__PURE__ */ jsx(Trans, {
124
124
  id: "dataGrid.presets.title",
@@ -18,6 +18,7 @@ const PresetsModalBody = ({ onOpenCreatePresetModal, gridPresets, handleSelectPr
18
18
  display: "flex",
19
19
  rowGap: "12px",
20
20
  flexWrap: "wrap",
21
+ color: "typoPrimary",
21
22
  children: hasPresets ? presets?.map(([presetName, filters], index) => {
22
23
  const isSelected = presetName === selectedPresetName;
23
24
  return /* @__PURE__ */ jsxs(Tag, {
@@ -74,7 +74,7 @@ const CommonGridWithStyles = styled$1(CommonGrid)`
74
74
  color: typoPrimary;
75
75
  font-weight: normal;
76
76
  border-bottom: 1px solid;
77
- border-color: lightGray3;
77
+ border-color: gridBorderColor;
78
78
  height: ${40}px;
79
79
  }
80
80
  & .gridHead {
@@ -91,6 +91,7 @@ const StyledButton = styled$1.button`
91
91
  &[data-variant='outline'] {
92
92
  background-color: white;
93
93
  border: slim;
94
+
94
95
  &[data-appearance='primary'] {
95
96
  color: typoPrimary;
96
97
  border-color: typoPrimary;
@@ -101,10 +102,22 @@ const StyledButton = styled$1.button`
101
102
  }
102
103
  }
103
104
  }
105
+
104
106
  &[data-appearance='secondary'] {
105
107
  color: red1;
106
108
  border-color: red1;
107
109
 
110
+ @media (hover: hover) {
111
+ :hover {
112
+ background-color: red20;
113
+ }
114
+ }
115
+ }
116
+
117
+ &[data-appearance='tertiary'] {
118
+ color: dangerColor;
119
+ border-color: dangerColor;
120
+
108
121
  @media (hover: hover) {
109
122
  :hover {
110
123
  background-color: red20;
@@ -26,9 +26,11 @@ declare const darkTheme: {
26
26
  blue10: string;
27
27
  inputErrorColor: string;
28
28
  sideMenuSelectedText: string;
29
+ sideMenuBackground: string;
29
30
  dashboardBackground: string;
30
31
  iconStroke: string;
31
32
  modalBackground: string;
33
+ gridBorderColor: string;
32
34
  black: string;
33
35
  lightGray5: string;
34
36
  neutral500: string;
@@ -30,9 +30,11 @@ const darkTheme = {
30
30
  blue10: "#2e475d",
31
31
  inputErrorColor: "#E94324",
32
32
  sideMenuSelectedText: "#ffffff",
33
+ sideMenuBackground: "#1b2b38",
33
34
  dashboardBackground: "#1b2b38",
34
35
  iconStroke: "#d9fffa",
35
- modalBackground: "#647483"
36
+ modalBackground: "#647483",
37
+ gridBorderColor: "#425f7a"
36
38
  },
37
39
  shadows: {
38
40
  ...defaultTheme.shadows,
@@ -109,9 +109,11 @@ declare const defaultTheme: {
109
109
  error: string;
110
110
  inputErrorColor: string;
111
111
  sideMenuSelectedText: string;
112
+ sideMenuBackground: string;
112
113
  dashboardBackground: string;
113
114
  iconStroke: string;
114
115
  modalBackground: string;
116
+ gridBorderColor: string;
115
117
  };
116
118
  fonts: {
117
119
  primary: string;
@@ -110,9 +110,11 @@ const defaultTheme = {
110
110
  error: "#ea5455",
111
111
  inputErrorColor: "#DB2B19",
112
112
  sideMenuSelectedText: "#ffffff",
113
+ sideMenuBackground: "#162C3F",
113
114
  dashboardBackground: "#ffffff",
114
115
  iconStroke: "#22394E",
115
- modalBackground: "#22394E"
116
+ modalBackground: "#22394E",
117
+ gridBorderColor: "#D2D8DF"
116
118
  },
117
119
  fonts: {
118
120
  primary: "Inter, sans-serif",
@@ -110,9 +110,11 @@ declare const themes: {
110
110
  error: string;
111
111
  inputErrorColor: string;
112
112
  sideMenuSelectedText: string;
113
+ sideMenuBackground: string;
113
114
  dashboardBackground: string;
114
115
  iconStroke: string;
115
116
  modalBackground: string;
117
+ gridBorderColor: string;
116
118
  };
117
119
  fonts: {
118
120
  primary: string;
@@ -374,9 +376,11 @@ declare const themes: {
374
376
  error: string;
375
377
  inputErrorColor: string;
376
378
  sideMenuSelectedText: string;
379
+ sideMenuBackground: string;
377
380
  dashboardBackground: string;
378
381
  iconStroke: string;
379
382
  modalBackground: string;
383
+ gridBorderColor: string;
380
384
  };
381
385
  fonts: {
382
386
  primary: string;
@@ -423,9 +427,11 @@ declare const themes: {
423
427
  blue10: string;
424
428
  inputErrorColor: string;
425
429
  sideMenuSelectedText: string;
430
+ sideMenuBackground: string;
426
431
  dashboardBackground: string;
427
432
  iconStroke: string;
428
433
  modalBackground: string;
434
+ gridBorderColor: string;
429
435
  black: string;
430
436
  lightGray5: string;
431
437
  neutral500: string;
@@ -647,9 +653,11 @@ declare const themes: {
647
653
  blue10: string;
648
654
  inputErrorColor: string;
649
655
  sideMenuSelectedText: string;
656
+ sideMenuBackground: string;
650
657
  dashboardBackground: string;
651
658
  iconStroke: string;
652
659
  modalBackground: string;
660
+ gridBorderColor: string;
653
661
  black: string;
654
662
  lightGray5: string;
655
663
  neutral500: string;
@@ -201,9 +201,11 @@ declare const mailwiseTheme: {
201
201
  error: string;
202
202
  inputErrorColor: string;
203
203
  sideMenuSelectedText: string;
204
+ sideMenuBackground: string;
204
205
  dashboardBackground: string;
205
206
  iconStroke: string;
206
207
  modalBackground: string;
208
+ gridBorderColor: string;
207
209
  };
208
210
  fonts: {
209
211
  primary: string;
@@ -26,9 +26,11 @@ declare const mailwiseDark: {
26
26
  blue10: string;
27
27
  inputErrorColor: string;
28
28
  sideMenuSelectedText: string;
29
+ sideMenuBackground: string;
29
30
  dashboardBackground: string;
30
31
  iconStroke: string;
31
32
  modalBackground: string;
33
+ gridBorderColor: string;
32
34
  black: string;
33
35
  lightGray5: string;
34
36
  neutral500: string;