@mailstep/design-system 0.7.80 → 0.7.82-beta.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.7.80",
3
+ "version": "0.7.82-beta.2",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -0,0 +1,4 @@
1
+ import { FC } from 'react';
2
+ import { SvgProps } from '../types';
3
+
4
+ export declare const CircleHalfStroke: FC<SvgProps>;
@@ -0,0 +1,13 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ export var CircleHalfStroke = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 512 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" }) }))); };
@@ -0,0 +1,4 @@
1
+ import { FC } from 'react';
2
+ import { SvgProps } from '../types';
3
+
4
+ export declare const Moon: FC<SvgProps>;
@@ -0,0 +1,13 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ export var Moon = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 384 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" }) }))); };
@@ -0,0 +1,4 @@
1
+ import { FC } from 'react';
2
+ import { SvgProps } from '../types';
3
+
4
+ export declare const Sun: FC<SvgProps>;
@@ -0,0 +1,13 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ export var Sun = function (props) { return (_jsx("svg", __assign({ width: "18", height: "18", viewBox: "0 0 512 512", fill: "currentColor" }, props, { children: _jsx("path", { d: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) }))); };
@@ -78,3 +78,6 @@ export { MachinePackingForbidden } from './MachinePackingForbidden';
78
78
  export { Valuable } from './Valuable';
79
79
  export { MobilePhone } from './MobilePhone';
80
80
  export { Reload } from './Reload';
81
+ export { Sun } from './Sun';
82
+ export { Moon } from './Moon';
83
+ export { CircleHalfStroke } from './CircleHalfStroke';
@@ -78,3 +78,6 @@ export { MachinePackingForbidden } from './MachinePackingForbidden';
78
78
  export { Valuable } from './Valuable';
79
79
  export { MobilePhone } from './MobilePhone';
80
80
  export { Reload } from './Reload';
81
+ export { Sun } from './Sun';
82
+ export { Moon } from './Moon';
83
+ export { CircleHalfStroke } from './CircleHalfStroke';
@@ -0,0 +1,152 @@
1
+ declare const darkTheme: {
2
+ colors: {
3
+ bgLightGray: string;
4
+ bgLightGray1: string;
5
+ lightGray1: string;
6
+ lightGray2: string;
7
+ lightGray3: string;
8
+ lightGray4: string;
9
+ lightGray5: string;
10
+ lightGray6: string;
11
+ lightGray7: string;
12
+ neutral20: string;
13
+ neutral300: string;
14
+ neutral500: string;
15
+ gray: string;
16
+ gray1: string;
17
+ gray2: string;
18
+ gray3: string;
19
+ gray4: string;
20
+ gray5: string;
21
+ blue1: string;
22
+ blue2: string;
23
+ blue3: string;
24
+ blue4: string;
25
+ textPrimary: string;
26
+ textTertiary: string;
27
+ typoPrimary: string;
28
+ blue10: string;
29
+ blue20: string;
30
+ blue30: string;
31
+ blue40: string;
32
+ blue50: string;
33
+ blue60: string;
34
+ blue70: string;
35
+ blue80: string;
36
+ blue90: string;
37
+ teal20: string;
38
+ teal40: string;
39
+ teal50: string;
40
+ teal60: string;
41
+ teal70: string;
42
+ teal80: string;
43
+ teal90: string;
44
+ green10: string;
45
+ green20: string;
46
+ green30: string;
47
+ green50: string;
48
+ green60: string;
49
+ green70: string;
50
+ green80: string;
51
+ green90: string;
52
+ green: string;
53
+ successColor: string;
54
+ darkGreen: string;
55
+ orange20: string;
56
+ orange30: string;
57
+ orange50: string;
58
+ orange60: string;
59
+ orange80: string;
60
+ yellow10: string;
61
+ yellow20: string;
62
+ yellow60: string;
63
+ yellow70: string;
64
+ yellow1: string;
65
+ yellow2: string;
66
+ red10: string;
67
+ red20: string;
68
+ red30: string;
69
+ red50: string;
70
+ red70: string;
71
+ red1: string;
72
+ red2: string;
73
+ red3: string;
74
+ red60: string;
75
+ red80: string;
76
+ dangerColor: string;
77
+ purple20: string;
78
+ purple40: string;
79
+ purple50: string;
80
+ purple60: string;
81
+ purple80: string;
82
+ purple90: string;
83
+ magenta10: string;
84
+ magenta20: string;
85
+ magenta30: string;
86
+ magenta40: string;
87
+ magenta50: string;
88
+ magenta60: string;
89
+ magenta70: string;
90
+ magenta80: string;
91
+ magenta90: string;
92
+ white: string;
93
+ };
94
+ shadows: {
95
+ boxShadow: string;
96
+ dropShadow: string;
97
+ inputFocusBoxShadow: string;
98
+ dropdownMenuShadow: string;
99
+ tooltipBoxShadow: string;
100
+ cardShadow: string;
101
+ smooth: string;
102
+ dialogShadow: string;
103
+ headerShadow: string;
104
+ headerShadowB: string;
105
+ headerShadowNotifications: string;
106
+ cornerDialogShadow: string;
107
+ gridShadow: string;
108
+ tooltipShadow: string;
109
+ };
110
+ breakpoints: string[];
111
+ fonts: {
112
+ primary: string;
113
+ heading: string;
114
+ };
115
+ fontLinks: string[];
116
+ fontSizes: string[];
117
+ lineHeights: number[];
118
+ fontWeights: {
119
+ light: number;
120
+ normal: number;
121
+ medium: number;
122
+ semiBold: number;
123
+ bold: number;
124
+ };
125
+ letterSpacings: {
126
+ default: null;
127
+ sm: string;
128
+ md: string;
129
+ lg: string;
130
+ };
131
+ borders: {
132
+ slim: string;
133
+ mediumSlim: string;
134
+ medium: string;
135
+ mediumThick: string;
136
+ thick: string;
137
+ };
138
+ radii: {
139
+ sm: string;
140
+ md: string;
141
+ ml: string;
142
+ lg: string;
143
+ xl: string;
144
+ };
145
+ space: number[];
146
+ transitions: {
147
+ simpleLong: string;
148
+ inputTransition: string;
149
+ };
150
+ zIndices: number[];
151
+ };
152
+ export default darkTheme;
@@ -0,0 +1,14 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
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)' }) });
14
+ export default darkTheme;
@@ -150,7 +150,6 @@ declare const themes: {
150
150
  };
151
151
  zIndices: number[];
152
152
  };
153
- light: import('..').Theme;
154
153
  mailwise: {
155
154
  screens: {
156
155
  _: number;
@@ -354,5 +353,156 @@ declare const themes: {
354
353
  };
355
354
  zIndices: number[];
356
355
  };
356
+ dark: {
357
+ colors: {
358
+ bgLightGray: string;
359
+ bgLightGray1: string;
360
+ lightGray1: string;
361
+ lightGray2: string;
362
+ lightGray3: string;
363
+ lightGray4: string;
364
+ lightGray5: string;
365
+ lightGray6: string;
366
+ lightGray7: string;
367
+ neutral20: string;
368
+ neutral300: string;
369
+ neutral500: string;
370
+ gray: string;
371
+ gray1: string;
372
+ gray2: string;
373
+ gray3: string;
374
+ gray4: string;
375
+ gray5: string;
376
+ blue1: string;
377
+ blue2: string;
378
+ blue3: string;
379
+ blue4: string;
380
+ textPrimary: string;
381
+ textTertiary: string;
382
+ typoPrimary: string;
383
+ blue10: string;
384
+ blue20: string;
385
+ blue30: string;
386
+ blue40: string;
387
+ blue50: string;
388
+ blue60: string;
389
+ blue70: string;
390
+ blue80: string;
391
+ blue90: string;
392
+ teal20: string;
393
+ teal40: string;
394
+ teal50: string;
395
+ teal60: string;
396
+ teal70: string;
397
+ teal80: string;
398
+ teal90: string;
399
+ green10: string;
400
+ green20: string;
401
+ green30: string;
402
+ green50: string;
403
+ green60: string;
404
+ green70: string;
405
+ green80: string;
406
+ green90: string;
407
+ green: string;
408
+ successColor: string;
409
+ darkGreen: string;
410
+ orange20: string;
411
+ orange30: string;
412
+ orange50: string;
413
+ orange60: string;
414
+ orange80: string;
415
+ yellow10: string;
416
+ yellow20: string;
417
+ yellow60: string;
418
+ yellow70: string;
419
+ yellow1: string;
420
+ yellow2: string;
421
+ red10: string;
422
+ red20: string;
423
+ red30: string;
424
+ red50: string;
425
+ red70: string;
426
+ red1: string;
427
+ red2: string;
428
+ red3: string;
429
+ red60: string;
430
+ red80: string;
431
+ dangerColor: string;
432
+ purple20: string;
433
+ purple40: string;
434
+ purple50: string;
435
+ purple60: string;
436
+ purple80: string;
437
+ purple90: string;
438
+ magenta10: string;
439
+ magenta20: string;
440
+ magenta30: string;
441
+ magenta40: string;
442
+ magenta50: string;
443
+ magenta60: string;
444
+ magenta70: string;
445
+ magenta80: string;
446
+ magenta90: string;
447
+ white: string;
448
+ };
449
+ shadows: {
450
+ boxShadow: string;
451
+ dropShadow: string;
452
+ inputFocusBoxShadow: string;
453
+ dropdownMenuShadow: string;
454
+ tooltipBoxShadow: string;
455
+ cardShadow: string;
456
+ smooth: string;
457
+ dialogShadow: string;
458
+ headerShadow: string;
459
+ headerShadowB: string;
460
+ headerShadowNotifications: string;
461
+ cornerDialogShadow: string;
462
+ gridShadow: string;
463
+ tooltipShadow: string;
464
+ };
465
+ breakpoints: string[];
466
+ fonts: {
467
+ primary: string;
468
+ heading: string;
469
+ };
470
+ fontLinks: string[];
471
+ fontSizes: string[];
472
+ lineHeights: number[];
473
+ fontWeights: {
474
+ light: number;
475
+ normal: number;
476
+ medium: number;
477
+ semiBold: number;
478
+ bold: number;
479
+ };
480
+ letterSpacings: {
481
+ default: null;
482
+ sm: string;
483
+ md: string;
484
+ lg: string;
485
+ };
486
+ borders: {
487
+ slim: string;
488
+ mediumSlim: string;
489
+ medium: string;
490
+ mediumThick: string;
491
+ thick: string;
492
+ };
493
+ radii: {
494
+ sm: string;
495
+ md: string;
496
+ ml: string;
497
+ lg: string;
498
+ xl: string;
499
+ };
500
+ space: number[];
501
+ transitions: {
502
+ simpleLong: string;
503
+ inputTransition: string;
504
+ };
505
+ zIndices: number[];
506
+ };
357
507
  };
358
508
  export default themes;
@@ -1,9 +1,9 @@
1
1
  import defaultTheme from './default';
2
- import light from './light';
3
2
  import mailwise from './mailwise';
3
+ import darkTheme from './dark';
4
4
  var themes = {
5
5
  default: defaultTheme,
6
- light: light,
7
- mailwise: mailwise
6
+ mailwise: mailwise,
7
+ dark: darkTheme
8
8
  };
9
9
  export default themes;
@@ -46,7 +46,7 @@ export type Themes = {
46
46
  };
47
47
  export interface Props {
48
48
  children: React.ReactNode;
49
- theme: 'default' | 'light' | 'mailwise';
49
+ theme: 'default' | 'mailwise' | 'dark';
50
50
  preflight?: boolean;
51
51
  language?: string;
52
52
  }