@mailstep/design-system 0.8.32 → 0.8.33-beta.0
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/README.md +76 -76
- package/package.json +148 -148
- package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js +1 -1
- package/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.js +1 -1
- package/ui/Blocks/Modal/styles.js +1 -1
- package/ui/Elements/Badge/Badge.js +1 -1
- package/ui/Elements/Button/styles.js +1 -1
- package/ui/Elements/ErrorMessage/ErrorMessage.js +2 -2
- package/ui/Elements/HighlightBox/HighlightBox.d.ts +1 -0
- package/ui/Elements/HighlightBox/HighlightBox.js +14 -12
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg +12 -12
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg +17 -17
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg +17 -17
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg +12 -12
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg +46 -46
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg +19 -19
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogoSmall.svg +4 -4
- package/ui/Elements/Logo/assets/warehouse/manager.svg +5 -5
- package/ui/Elements/Logo/assets/warehouse/manager2.svg +5 -5
- package/ui/Elements/Logo/assets/warehouse/manager3.svg +4 -4
- package/ui/Elements/Select/themes/selectStyles.js +3 -2
- package/ui/Elements/Select/types.d.ts +1 -0
- package/ui/Elements/Toggle/Toggle.js +2 -2
- package/ui/Forms/Input/styles.js +4 -4
- package/ui/ThemeProvider/themes/dark.d.ts +13 -9
- package/ui/ThemeProvider/themes/dark.js +7 -12
- package/ui/ThemeProvider/themes/default.d.ts +4 -0
- package/ui/ThemeProvider/themes/default.js +5 -1
- package/ui/ThemeProvider/themes/index.d.ts +21 -9
- package/ui/ThemeProvider/themes/mailwise.d.ts +4 -0
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -19,7 +19,7 @@ const InputIcon = styled$1.div`
|
|
|
19
19
|
svg {
|
|
20
20
|
stroke: lightGray3;
|
|
21
21
|
cursor: pointer;
|
|
22
|
-
color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("
|
|
22
|
+
color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("inputErrorColor") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
|
|
23
23
|
}
|
|
24
24
|
`;
|
|
25
25
|
const ClearableInputIcon = styled$1(InputIcon)`
|
|
@@ -44,7 +44,7 @@ const IconWrapper = styled$1.div`
|
|
|
44
44
|
const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "textarea" : "input" }))`
|
|
45
45
|
${system};
|
|
46
46
|
border: slim;
|
|
47
|
-
border-color: ${({ $isInvalid }) => $isInvalid ? th.color("
|
|
47
|
+
border-color: ${({ $isInvalid }) => $isInvalid ? th.color("inputErrorColor") : th.color("lightGray6")};
|
|
48
48
|
background-color: white;
|
|
49
49
|
box-sizing: border-box;
|
|
50
50
|
background-clip: padding-box;
|
|
@@ -145,9 +145,9 @@ const Suffix = styled$1.div`
|
|
|
145
145
|
`;
|
|
146
146
|
const InputRow = styled$1.div`
|
|
147
147
|
position: relative;
|
|
148
|
-
color: ${({ $isInvalid }) => $isInvalid ? th.color("
|
|
148
|
+
color: ${({ $isInvalid }) => $isInvalid ? th.color("inputErrorColor") : th.color("gray")};
|
|
149
149
|
& > * {
|
|
150
|
-
border-color: ${({ $isInvalid, variant }) => $isInvalid ? th.color("
|
|
150
|
+
border-color: ${({ $isInvalid, variant }) => $isInvalid ? th.color("inputErrorColor") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6")};
|
|
151
151
|
color: ${({ hasValue }) => hasValue ? th.color("typoPrimary") : th.color("gray")};
|
|
152
152
|
}
|
|
153
153
|
:hover > * {
|
|
@@ -11,33 +11,30 @@ declare const darkTheme: {
|
|
|
11
11
|
neutral20: string;
|
|
12
12
|
neutral30: string;
|
|
13
13
|
neutral300: string;
|
|
14
|
-
red1: string;
|
|
15
|
-
red20: string;
|
|
16
14
|
red30: string;
|
|
17
|
-
red60: string;
|
|
18
|
-
red70: string;
|
|
19
|
-
red80: string;
|
|
20
|
-
yellow20: string;
|
|
21
|
-
yellow60: string;
|
|
22
|
-
neutral500: string;
|
|
23
15
|
lightGray1: string;
|
|
24
16
|
lightGray2: string;
|
|
25
17
|
lightGray3: string;
|
|
26
18
|
lightGray4: string;
|
|
27
19
|
lightGray6: string;
|
|
28
20
|
blue1: string;
|
|
29
|
-
blue2: string;
|
|
30
21
|
blue3: string;
|
|
31
22
|
blue10: string;
|
|
23
|
+
inputErrorColor: string;
|
|
32
24
|
sideMenuSelectedText: string;
|
|
25
|
+
dashboardBackground: string;
|
|
26
|
+
iconStroke: string;
|
|
27
|
+
modalBackground: string;
|
|
33
28
|
black: string;
|
|
34
29
|
lightGray5: string;
|
|
30
|
+
neutral500: string;
|
|
35
31
|
gray: string;
|
|
36
32
|
gray1: string;
|
|
37
33
|
gray2: string;
|
|
38
34
|
gray3: string;
|
|
39
35
|
gray4: string;
|
|
40
36
|
gray5: string;
|
|
37
|
+
blue2: string;
|
|
41
38
|
blue4: string;
|
|
42
39
|
textTertiary: string;
|
|
43
40
|
blue20: string;
|
|
@@ -72,15 +69,22 @@ declare const darkTheme: {
|
|
|
72
69
|
orange60: string;
|
|
73
70
|
orange80: string;
|
|
74
71
|
yellow10: string;
|
|
72
|
+
yellow20: string;
|
|
73
|
+
yellow60: string;
|
|
75
74
|
yellow70: string;
|
|
76
75
|
yellow80: string;
|
|
77
76
|
yellow90: string;
|
|
78
77
|
yellow1: string;
|
|
79
78
|
yellow2: string;
|
|
80
79
|
red10: string;
|
|
80
|
+
red20: string;
|
|
81
81
|
red50: string;
|
|
82
|
+
red70: string;
|
|
83
|
+
red1: string;
|
|
82
84
|
red2: string;
|
|
83
85
|
red3: string;
|
|
86
|
+
red60: string;
|
|
87
|
+
red80: string;
|
|
84
88
|
dangerColor: string;
|
|
85
89
|
purple20: string;
|
|
86
90
|
purple40: string;
|
|
@@ -4,7 +4,7 @@ const darkTheme = {
|
|
|
4
4
|
...defaultTheme,
|
|
5
5
|
colors: {
|
|
6
6
|
...defaultTheme.colors,
|
|
7
|
-
bgLightGray: "#
|
|
7
|
+
bgLightGray: "#203444",
|
|
8
8
|
bgLightGray1: "#3a667b",
|
|
9
9
|
bgLightGray2: "#F1F5F9",
|
|
10
10
|
typoPrimary: "#ededed",
|
|
@@ -15,25 +15,20 @@ const darkTheme = {
|
|
|
15
15
|
neutral20: "#2e475d",
|
|
16
16
|
neutral30: "#42505d",
|
|
17
17
|
neutral300: "#d6d9df",
|
|
18
|
-
red1: "#73e1ff",
|
|
19
|
-
red20: "#3a667b",
|
|
20
18
|
red30: "#8594A5",
|
|
21
|
-
red60: "#55d1f3",
|
|
22
|
-
red70: "#d1f5ff",
|
|
23
|
-
red80: "#d1f5ff",
|
|
24
|
-
yellow20: "#857000",
|
|
25
|
-
yellow60: "#e77c00",
|
|
26
|
-
neutral500: "#55d1f3",
|
|
27
19
|
lightGray1: "#162C3F",
|
|
28
20
|
lightGray2: "#1a2b38",
|
|
29
21
|
lightGray3: "#7e8489",
|
|
30
22
|
lightGray4: "#7A90A1",
|
|
31
23
|
lightGray6: "#7A90A1",
|
|
32
24
|
blue1: "#ffffff",
|
|
33
|
-
|
|
34
|
-
blue3: "#081724",
|
|
25
|
+
blue3: "#05111b",
|
|
35
26
|
blue10: "#2e475d",
|
|
36
|
-
|
|
27
|
+
inputErrorColor: "#E94324",
|
|
28
|
+
sideMenuSelectedText: "#ffffff",
|
|
29
|
+
dashboardBackground: "#1b2b38",
|
|
30
|
+
iconStroke: "#d9fffa",
|
|
31
|
+
modalBackground: "#647483"
|
|
37
32
|
},
|
|
38
33
|
shadows: {
|
|
39
34
|
...defaultTheme.shadows,
|
|
@@ -107,7 +107,11 @@ declare const defaultTheme: {
|
|
|
107
107
|
magenta80: string;
|
|
108
108
|
magenta90: string;
|
|
109
109
|
error: string;
|
|
110
|
+
inputErrorColor: string;
|
|
110
111
|
sideMenuSelectedText: string;
|
|
112
|
+
dashboardBackground: string;
|
|
113
|
+
iconStroke: string;
|
|
114
|
+
modalBackground: string;
|
|
111
115
|
};
|
|
112
116
|
fonts: {
|
|
113
117
|
primary: string;
|
|
@@ -108,7 +108,11 @@ const defaultTheme = {
|
|
|
108
108
|
magenta80: "#9F1853",
|
|
109
109
|
magenta90: "#7B1340",
|
|
110
110
|
error: "#ea5455",
|
|
111
|
-
|
|
111
|
+
inputErrorColor: "#DB2B19",
|
|
112
|
+
sideMenuSelectedText: "#ffffff",
|
|
113
|
+
dashboardBackground: "#ffffff",
|
|
114
|
+
iconStroke: "#22394E",
|
|
115
|
+
modalBackground: "#22394E"
|
|
112
116
|
},
|
|
113
117
|
fonts: {
|
|
114
118
|
primary: "Inter, sans-serif",
|
|
@@ -108,7 +108,11 @@ declare const themes: {
|
|
|
108
108
|
magenta80: string;
|
|
109
109
|
magenta90: string;
|
|
110
110
|
error: string;
|
|
111
|
+
inputErrorColor: string;
|
|
111
112
|
sideMenuSelectedText: string;
|
|
113
|
+
dashboardBackground: string;
|
|
114
|
+
iconStroke: string;
|
|
115
|
+
modalBackground: string;
|
|
112
116
|
};
|
|
113
117
|
fonts: {
|
|
114
118
|
primary: string;
|
|
@@ -368,7 +372,11 @@ declare const themes: {
|
|
|
368
372
|
magenta80: string;
|
|
369
373
|
magenta90: string;
|
|
370
374
|
error: string;
|
|
375
|
+
inputErrorColor: string;
|
|
371
376
|
sideMenuSelectedText: string;
|
|
377
|
+
dashboardBackground: string;
|
|
378
|
+
iconStroke: string;
|
|
379
|
+
modalBackground: string;
|
|
372
380
|
};
|
|
373
381
|
fonts: {
|
|
374
382
|
primary: string;
|
|
@@ -400,33 +408,30 @@ declare const themes: {
|
|
|
400
408
|
neutral20: string;
|
|
401
409
|
neutral30: string;
|
|
402
410
|
neutral300: string;
|
|
403
|
-
red1: string;
|
|
404
|
-
red20: string;
|
|
405
411
|
red30: string;
|
|
406
|
-
red60: string;
|
|
407
|
-
red70: string;
|
|
408
|
-
red80: string;
|
|
409
|
-
yellow20: string;
|
|
410
|
-
yellow60: string;
|
|
411
|
-
neutral500: string;
|
|
412
412
|
lightGray1: string;
|
|
413
413
|
lightGray2: string;
|
|
414
414
|
lightGray3: string;
|
|
415
415
|
lightGray4: string;
|
|
416
416
|
lightGray6: string;
|
|
417
417
|
blue1: string;
|
|
418
|
-
blue2: string;
|
|
419
418
|
blue3: string;
|
|
420
419
|
blue10: string;
|
|
420
|
+
inputErrorColor: string;
|
|
421
421
|
sideMenuSelectedText: string;
|
|
422
|
+
dashboardBackground: string;
|
|
423
|
+
iconStroke: string;
|
|
424
|
+
modalBackground: string;
|
|
422
425
|
black: string;
|
|
423
426
|
lightGray5: string;
|
|
427
|
+
neutral500: string;
|
|
424
428
|
gray: string;
|
|
425
429
|
gray1: string;
|
|
426
430
|
gray2: string;
|
|
427
431
|
gray3: string;
|
|
428
432
|
gray4: string;
|
|
429
433
|
gray5: string;
|
|
434
|
+
blue2: string;
|
|
430
435
|
blue4: string;
|
|
431
436
|
textTertiary: string;
|
|
432
437
|
blue20: string;
|
|
@@ -461,15 +466,22 @@ declare const themes: {
|
|
|
461
466
|
orange60: string;
|
|
462
467
|
orange80: string;
|
|
463
468
|
yellow10: string;
|
|
469
|
+
yellow20: string;
|
|
470
|
+
yellow60: string;
|
|
464
471
|
yellow70: string;
|
|
465
472
|
yellow80: string;
|
|
466
473
|
yellow90: string;
|
|
467
474
|
yellow1: string;
|
|
468
475
|
yellow2: string;
|
|
469
476
|
red10: string;
|
|
477
|
+
red20: string;
|
|
470
478
|
red50: string;
|
|
479
|
+
red70: string;
|
|
480
|
+
red1: string;
|
|
471
481
|
red2: string;
|
|
472
482
|
red3: string;
|
|
483
|
+
red60: string;
|
|
484
|
+
red80: string;
|
|
473
485
|
dangerColor: string;
|
|
474
486
|
purple20: string;
|
|
475
487
|
purple40: string;
|
|
@@ -199,7 +199,11 @@ declare const mailwiseTheme: {
|
|
|
199
199
|
magenta80: string;
|
|
200
200
|
magenta90: string;
|
|
201
201
|
error: string;
|
|
202
|
+
inputErrorColor: string;
|
|
202
203
|
sideMenuSelectedText: string;
|
|
204
|
+
dashboardBackground: string;
|
|
205
|
+
iconStroke: string;
|
|
206
|
+
modalBackground: string;
|
|
203
207
|
};
|
|
204
208
|
fonts: {
|
|
205
209
|
primary: string;
|