@zyther/tzmail 0.1.4 → 0.5.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 +411 -78
- package/dist/core/enums/theme.enum.d.ts +11 -1
- package/dist/core/enums/theme.enum.d.ts.map +1 -1
- package/dist/core/enums/theme.enum.js +10 -0
- package/dist/core/interfaces/email.interface.d.ts +95 -5
- package/dist/core/interfaces/email.interface.d.ts.map +1 -1
- package/dist/core/interfaces/template.interface.d.ts +12 -1
- package/dist/core/interfaces/template.interface.d.ts.map +1 -1
- package/dist/factories/email-factory.d.ts +32 -6
- package/dist/factories/email-factory.d.ts.map +1 -1
- package/dist/factories/email-factory.js +110 -6
- package/dist/factories/template-factory.d.ts.map +1 -1
- package/dist/factories/template-factory.js +170 -60
- package/dist/index.d.ts +16 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +23 -1
- package/dist/providers/mailgun.transport.d.ts +10 -0
- package/dist/providers/mailgun.transport.d.ts.map +1 -0
- package/dist/providers/mailgun.transport.js +85 -0
- package/dist/providers/nodemailer.transport.d.ts +11 -0
- package/dist/providers/nodemailer.transport.d.ts.map +1 -0
- package/dist/providers/nodemailer.transport.js +23 -0
- package/dist/providers/provider-utils.d.ts +17 -0
- package/dist/providers/provider-utils.d.ts.map +1 -0
- package/dist/providers/provider-utils.js +89 -0
- package/dist/providers/provider.interface.d.ts +30 -0
- package/dist/providers/provider.interface.d.ts.map +1 -0
- package/dist/providers/provider.interface.js +2 -0
- package/dist/providers/sendgrid.transport.d.ts +10 -0
- package/dist/providers/sendgrid.transport.d.ts.map +1 -0
- package/dist/providers/sendgrid.transport.js +76 -0
- package/dist/queues/bullmq-email-queue.d.ts +153 -0
- package/dist/queues/bullmq-email-queue.d.ts.map +1 -0
- package/dist/queues/bullmq-email-queue.js +292 -0
- package/dist/services/attachment.service.d.ts +15 -37
- package/dist/services/attachment.service.d.ts.map +1 -1
- package/dist/services/attachment.service.js +58 -46
- package/dist/services/email.service.d.ts +22 -22
- package/dist/services/email.service.d.ts.map +1 -1
- package/dist/services/email.service.js +117 -33
- package/dist/services/template.service.d.ts +24 -111
- package/dist/services/template.service.d.ts.map +1 -1
- package/dist/services/template.service.js +273 -362
- package/dist/templates/base/color-accessibility.d.ts +4 -0
- package/dist/templates/base/color-accessibility.d.ts.map +1 -0
- package/dist/templates/base/color-accessibility.js +38 -0
- package/dist/templates/base/template-builder.d.ts +4 -1
- package/dist/templates/base/template-builder.d.ts.map +1 -1
- package/dist/templates/base/template-builder.js +276 -527
- package/dist/templates/themes/aurora.theme.d.ts +12 -0
- package/dist/templates/themes/aurora.theme.d.ts.map +1 -0
- package/dist/templates/themes/aurora.theme.js +88 -0
- package/dist/templates/themes/corporate.theme.d.ts +2 -1
- package/dist/templates/themes/corporate.theme.d.ts.map +1 -1
- package/dist/templates/themes/corporate.theme.js +139 -102
- package/dist/templates/themes/editorial.theme.d.ts +12 -0
- package/dist/templates/themes/editorial.theme.d.ts.map +1 -0
- package/dist/templates/themes/editorial.theme.js +90 -0
- package/dist/templates/themes/forest.theme.d.ts +12 -0
- package/dist/templates/themes/forest.theme.d.ts.map +1 -0
- package/dist/templates/themes/forest.theme.js +89 -0
- package/dist/templates/themes/glass.theme.d.ts +12 -0
- package/dist/templates/themes/glass.theme.d.ts.map +1 -0
- package/dist/templates/themes/glass.theme.js +88 -0
- package/dist/templates/themes/lavender.theme.d.ts +12 -0
- package/dist/templates/themes/lavender.theme.d.ts.map +1 -0
- package/dist/templates/themes/lavender.theme.js +91 -0
- package/dist/templates/themes/midnight.theme.d.ts +12 -0
- package/dist/templates/themes/midnight.theme.d.ts.map +1 -0
- package/dist/templates/themes/midnight.theme.js +91 -0
- package/dist/templates/themes/minimal.theme.d.ts +2 -1
- package/dist/templates/themes/minimal.theme.d.ts.map +1 -1
- package/dist/templates/themes/minimal.theme.js +142 -107
- package/dist/templates/themes/modern.theme.d.ts +2 -1
- package/dist/templates/themes/modern.theme.d.ts.map +1 -1
- package/dist/templates/themes/modern.theme.js +109 -74
- package/dist/templates/themes/monokai.theme.d.ts +2 -1
- package/dist/templates/themes/monokai.theme.d.ts.map +1 -1
- package/dist/templates/themes/monokai.theme.js +102 -66
- package/dist/templates/themes/neobrutal.theme.d.ts +12 -0
- package/dist/templates/themes/neobrutal.theme.d.ts.map +1 -0
- package/dist/templates/themes/neobrutal.theme.js +91 -0
- package/dist/templates/themes/ocean.theme.d.ts +12 -0
- package/dist/templates/themes/ocean.theme.d.ts.map +1 -0
- package/dist/templates/themes/ocean.theme.js +90 -0
- package/dist/templates/themes/pastel.theme.d.ts +12 -0
- package/dist/templates/themes/pastel.theme.d.ts.map +1 -0
- package/dist/templates/themes/pastel.theme.js +89 -0
- package/dist/templates/themes/sunset.theme.d.ts +12 -0
- package/dist/templates/themes/sunset.theme.d.ts.map +1 -0
- package/dist/templates/themes/sunset.theme.js +90 -0
- package/dist/templates/themes/system.theme.d.ts +2 -1
- package/dist/templates/themes/system.theme.d.ts.map +1 -1
- package/dist/templates/themes/system.theme.js +81 -47
- package/dist/templates/themes/theme.interface.d.ts +48 -0
- package/dist/templates/themes/theme.interface.d.ts.map +1 -1
- package/package.json +36 -14
- package/src/core/enums/template-part.enum.ts +7 -0
- package/src/core/enums/theme.enum.ts +18 -0
- package/src/core/interfaces/email.interface.ts +116 -0
- package/src/core/interfaces/template.interface.ts +71 -0
- package/src/factories/email-factory.ts +208 -0
- package/src/factories/template-factory.ts +201 -0
- package/src/index.ts +53 -0
- package/src/providers/mailgun.transport.ts +80 -0
- package/src/providers/nodemailer.transport.ts +20 -0
- package/src/providers/provider-utils.ts +91 -0
- package/src/providers/provider.interface.ts +26 -0
- package/src/providers/sendgrid.transport.ts +80 -0
- package/src/queues/bullmq-email-queue.ts +418 -0
- package/src/services/attachment.service.ts +98 -0
- package/src/services/email.service.ts +151 -0
- package/src/services/template.service.ts +431 -0
- package/src/templates/base/color-accessibility.ts +31 -0
- package/src/templates/base/template-builder.ts +438 -0
- package/src/templates/themes/aurora.theme.ts +91 -0
- package/src/templates/themes/corporate.theme.ts +156 -0
- package/src/templates/themes/editorial.theme.ts +93 -0
- package/src/templates/themes/forest.theme.ts +92 -0
- package/src/templates/themes/glass.theme.ts +91 -0
- package/src/templates/themes/lavender.theme.ts +94 -0
- package/src/templates/themes/midnight.theme.ts +94 -0
- package/src/templates/themes/minimal.theme.ts +158 -0
- package/src/templates/themes/modern.theme.ts +124 -0
- package/src/templates/themes/monokai.theme.ts +117 -0
- package/src/templates/themes/neobrutal.theme.ts +94 -0
- package/src/templates/themes/ocean.theme.ts +93 -0
- package/src/templates/themes/pastel.theme.ts +92 -0
- package/src/templates/themes/sunset.theme.ts +93 -0
- package/src/templates/themes/system.theme.ts +92 -0
- package/src/templates/themes/theme.interface.ts +95 -0
- package/src/tests/template.service.test.ts +1 -0
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
|
|
2
|
+
import { ThemeType } from '../../core/enums/theme.enum';
|
|
3
|
+
import { ITheme, IThemeColors, ITypography, ISpacing, IThemeEmailStyles } from './theme.interface';
|
|
4
|
+
|
|
5
|
+
export class MinimalTheme implements ITheme {
|
|
6
|
+
id = ThemeType.MINIMAL;
|
|
7
|
+
name = 'Minimal';
|
|
8
|
+
|
|
9
|
+
light: IThemeColors = {
|
|
10
|
+
primary: '#000000',
|
|
11
|
+
secondary: '#404040',
|
|
12
|
+
background: '#ffffff',
|
|
13
|
+
text: '#111111',
|
|
14
|
+
textMuted: '#666666',
|
|
15
|
+
border: '#e5e5e5',
|
|
16
|
+
success: '#22c55e',
|
|
17
|
+
error: '#ef4444',
|
|
18
|
+
warning: '#f97316'
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
dark: IThemeColors = {
|
|
22
|
+
primary: '#ffffff',
|
|
23
|
+
secondary: '#a3a3a3',
|
|
24
|
+
background: '#000000',
|
|
25
|
+
text: '#ffffff',
|
|
26
|
+
textMuted: '#737373',
|
|
27
|
+
border: '#262626',
|
|
28
|
+
success: '#22c55e',
|
|
29
|
+
error: '#ef4444',
|
|
30
|
+
warning: '#f97316'
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
typography: ITypography = {
|
|
34
|
+
fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
|
|
35
|
+
fontSizes: {
|
|
36
|
+
small: '13px',
|
|
37
|
+
medium: '15px',
|
|
38
|
+
large: '17px',
|
|
39
|
+
xlarge: '21px'
|
|
40
|
+
},
|
|
41
|
+
fontWeights: {
|
|
42
|
+
normal: 400,
|
|
43
|
+
medium: 500,
|
|
44
|
+
bold: 600
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
spacing: ISpacing = {
|
|
49
|
+
xs: '8px',
|
|
50
|
+
sm: '16px',
|
|
51
|
+
md: '24px',
|
|
52
|
+
lg: '32px',
|
|
53
|
+
xl: '48px'
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
emailStyles: IThemeEmailStyles = {
|
|
57
|
+
maxWidthPx: 600,
|
|
58
|
+
container: {
|
|
59
|
+
borderColor: 'border',
|
|
60
|
+
borderWidth: '1px',
|
|
61
|
+
borderRadius: '2px',
|
|
62
|
+
boxShadow: 'none'
|
|
63
|
+
},
|
|
64
|
+
header: {
|
|
65
|
+
accentColor: 'primary',
|
|
66
|
+
accentWidth: '2px',
|
|
67
|
+
horizontalPadding: '24px',
|
|
68
|
+
logoColor: 'text',
|
|
69
|
+
logoLetterSpacing: '0.02em',
|
|
70
|
+
imageBorderRadius: '0px'
|
|
71
|
+
},
|
|
72
|
+
body: {
|
|
73
|
+
accentColor: 'border',
|
|
74
|
+
accentWidth: '1px',
|
|
75
|
+
borderRadius: '2px',
|
|
76
|
+
boxShadow: 'none',
|
|
77
|
+
horizontalPadding: '24px',
|
|
78
|
+
lineHeight: 1.6
|
|
79
|
+
},
|
|
80
|
+
button: {
|
|
81
|
+
appearance: 'outline',
|
|
82
|
+
borderRadius: '2px',
|
|
83
|
+
borderWidth: '1px',
|
|
84
|
+
boxShadow: 'none',
|
|
85
|
+
textTransform: 'none',
|
|
86
|
+
letterSpacing: '0.02em'
|
|
87
|
+
},
|
|
88
|
+
footer: {
|
|
89
|
+
accentColor: 'border',
|
|
90
|
+
accentWidth: '1px'
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
// cores minimalistas
|
|
95
|
+
minimalColors = {
|
|
96
|
+
white: '#ffffff',
|
|
97
|
+
black: '#000000',
|
|
98
|
+
gray100: '#f5f5f5',
|
|
99
|
+
gray200: '#e5e5e5',
|
|
100
|
+
gray300: '#d4d4d4',
|
|
101
|
+
gray400: '#a3a3a3',
|
|
102
|
+
gray500: '#737373',
|
|
103
|
+
gray600: '#525252',
|
|
104
|
+
gray700: '#404040',
|
|
105
|
+
gray800: '#262626',
|
|
106
|
+
gray900: '#171717'
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
borderStyle = {
|
|
110
|
+
radius: {
|
|
111
|
+
none: '0px',
|
|
112
|
+
small: '2px',
|
|
113
|
+
medium: '4px',
|
|
114
|
+
large: '8px',
|
|
115
|
+
full: '9999px'
|
|
116
|
+
},
|
|
117
|
+
width: {
|
|
118
|
+
thin: '1px',
|
|
119
|
+
medium: '2px'
|
|
120
|
+
},
|
|
121
|
+
style: 'solid'
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
effects = {
|
|
125
|
+
shadow: 'none',
|
|
126
|
+
transition: 'all 0.2s ease',
|
|
127
|
+
opacity: {
|
|
128
|
+
hover: '0.7',
|
|
129
|
+
disabled: '0.5'
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
layout = {
|
|
134
|
+
maxWidth: '640px',
|
|
135
|
+
contentWidth: '560px',
|
|
136
|
+
spacingMultiplier: 1.5,
|
|
137
|
+
lineHeight: 1.6,
|
|
138
|
+
paragraphSpacing: '1.5em'
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
designSystem = {
|
|
142
|
+
grid: {
|
|
143
|
+
columns: 12,
|
|
144
|
+
gutter: '20px',
|
|
145
|
+
margin: '20px'
|
|
146
|
+
},
|
|
147
|
+
breakpoints: {
|
|
148
|
+
mobile: '480px',
|
|
149
|
+
tablet: '768px',
|
|
150
|
+
desktop: '1024px'
|
|
151
|
+
},
|
|
152
|
+
zIndex: {
|
|
153
|
+
base: 1,
|
|
154
|
+
overlay: 10,
|
|
155
|
+
modal: 100
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
|
|
2
|
+
import { ThemeType } from '../../core/enums/theme.enum';
|
|
3
|
+
import { ITheme, IThemeColors, ITypography, ISpacing, IThemeEmailStyles } from './theme.interface';
|
|
4
|
+
|
|
5
|
+
export class ModernTheme implements ITheme {
|
|
6
|
+
id = ThemeType.MODERN;
|
|
7
|
+
name = 'Modern';
|
|
8
|
+
|
|
9
|
+
light: IThemeColors = {
|
|
10
|
+
primary: '#0f172a',
|
|
11
|
+
secondary: '#64748b',
|
|
12
|
+
background: '#ffffff',
|
|
13
|
+
text: '#0f172a',
|
|
14
|
+
textMuted: '#64748b',
|
|
15
|
+
border: '#e2e8f0',
|
|
16
|
+
success: '#10b981',
|
|
17
|
+
error: '#ef4444',
|
|
18
|
+
warning: '#f59e0b'
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
dark: IThemeColors = {
|
|
22
|
+
primary: '#38bdf8',
|
|
23
|
+
secondary: '#94a3b8',
|
|
24
|
+
background: '#0f172a',
|
|
25
|
+
text: '#f1f5f9',
|
|
26
|
+
textMuted: '#94a3b8',
|
|
27
|
+
border: '#1e293b',
|
|
28
|
+
success: '#34d399',
|
|
29
|
+
error: '#f87171',
|
|
30
|
+
warning: '#fbbf24'
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
typography: ITypography = {
|
|
34
|
+
fontFamily: '"Inter", "SF Pro Display", "Segoe UI", system-ui, sans-serif',
|
|
35
|
+
fontSizes: {
|
|
36
|
+
small: '13px',
|
|
37
|
+
medium: '15px',
|
|
38
|
+
large: '17px',
|
|
39
|
+
xlarge: '24px'
|
|
40
|
+
},
|
|
41
|
+
fontWeights: {
|
|
42
|
+
normal: 400,
|
|
43
|
+
medium: 500,
|
|
44
|
+
bold: 600
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
spacing: ISpacing = {
|
|
49
|
+
xs: '6px',
|
|
50
|
+
sm: '12px',
|
|
51
|
+
md: '20px',
|
|
52
|
+
lg: '32px',
|
|
53
|
+
xl: '48px'
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
emailStyles: IThemeEmailStyles = {
|
|
57
|
+
maxWidthPx: 600,
|
|
58
|
+
container: {
|
|
59
|
+
borderColor: 'border',
|
|
60
|
+
borderWidth: '1px',
|
|
61
|
+
borderRadius: '12px',
|
|
62
|
+
boxShadow: 'none'
|
|
63
|
+
},
|
|
64
|
+
header: {
|
|
65
|
+
accentColor: 'primary',
|
|
66
|
+
accentWidth: '3px',
|
|
67
|
+
horizontalPadding: '24px',
|
|
68
|
+
logoColor: 'primary',
|
|
69
|
+
logoFontFamily: '"Inter", "Segoe UI", sans-serif',
|
|
70
|
+
logoLetterSpacing: '0.02em',
|
|
71
|
+
imageBorderRadius: '8px'
|
|
72
|
+
},
|
|
73
|
+
body: {
|
|
74
|
+
accentColor: 'primary',
|
|
75
|
+
accentWidth: '2px',
|
|
76
|
+
borderRadius: '8px',
|
|
77
|
+
boxShadow: 'none',
|
|
78
|
+
horizontalPadding: '24px',
|
|
79
|
+
lineHeight: 1.55
|
|
80
|
+
},
|
|
81
|
+
button: {
|
|
82
|
+
appearance: 'solid',
|
|
83
|
+
borderRadius: '8px',
|
|
84
|
+
borderWidth: '1px',
|
|
85
|
+
boxShadow: 'none',
|
|
86
|
+
letterSpacing: '0.01em'
|
|
87
|
+
},
|
|
88
|
+
footer: {
|
|
89
|
+
accentColor: 'secondary',
|
|
90
|
+
accentWidth: '1px'
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
gradients = {
|
|
95
|
+
primary: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
|
|
96
|
+
secondary: 'linear-gradient(135deg, #64748b 0%, #94a3b8 100%)',
|
|
97
|
+
accent: 'linear-gradient(135deg, #38bdf8 0%, #0f172a 100%)',
|
|
98
|
+
dark: 'linear-gradient(135deg, #0f172a 0%, #020617 100%)',
|
|
99
|
+
light: 'linear-gradient(135deg, #f8fafc 0%, #ffffff 100%)'
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
borderStyle = {
|
|
103
|
+
radius: {
|
|
104
|
+
small: '8px',
|
|
105
|
+
medium: '12px',
|
|
106
|
+
large: '16px',
|
|
107
|
+
full: '9999px'
|
|
108
|
+
},
|
|
109
|
+
width: '1px',
|
|
110
|
+
style: 'solid'
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
glassmorphism = {
|
|
114
|
+
light: 'rgba(255, 255, 255, 0.8)',
|
|
115
|
+
dark: 'rgba(15, 23, 42, 0.8)',
|
|
116
|
+
blur: '12px'
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
animations = {
|
|
120
|
+
hover: 'transform 0.2s ease, box-shadow 0.2s ease',
|
|
121
|
+
fade: 'opacity 0.3s ease',
|
|
122
|
+
slide: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
|
|
123
|
+
};
|
|
124
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
|
|
2
|
+
import { ThemeType } from '../../core/enums/theme.enum';
|
|
3
|
+
import { ITheme, IThemeColors, ITypography, ISpacing, IThemeEmailStyles } from './theme.interface';
|
|
4
|
+
|
|
5
|
+
export class MonokaiTheme implements ITheme {
|
|
6
|
+
id = ThemeType.MONOKAI;
|
|
7
|
+
name = 'Monokai';
|
|
8
|
+
|
|
9
|
+
light: IThemeColors = {
|
|
10
|
+
primary: '#f92672',
|
|
11
|
+
secondary: '#a6e22e',
|
|
12
|
+
background: '#f9f9f9',
|
|
13
|
+
text: '#272822',
|
|
14
|
+
textMuted: '#75715e',
|
|
15
|
+
border: '#e5e5e5',
|
|
16
|
+
success: '#a6e22e',
|
|
17
|
+
error: '#f92672',
|
|
18
|
+
warning: '#fd971f'
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
dark: IThemeColors = {
|
|
22
|
+
primary: '#f92672',
|
|
23
|
+
secondary: '#a6e22e',
|
|
24
|
+
background: '#272822',
|
|
25
|
+
text: '#f8f8f2',
|
|
26
|
+
textMuted: '#75715e',
|
|
27
|
+
border: '#3e3d32',
|
|
28
|
+
success: '#a6e22e',
|
|
29
|
+
error: '#f92672',
|
|
30
|
+
warning: '#fd971f'
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
typography: ITypography = {
|
|
34
|
+
fontFamily: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
|
|
35
|
+
fontSizes: {
|
|
36
|
+
small: '12px',
|
|
37
|
+
medium: '14px',
|
|
38
|
+
large: '16px',
|
|
39
|
+
xlarge: '20px'
|
|
40
|
+
},
|
|
41
|
+
fontWeights: {
|
|
42
|
+
normal: 400,
|
|
43
|
+
medium: 500,
|
|
44
|
+
bold: 700
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
spacing: ISpacing = {
|
|
49
|
+
xs: '4px',
|
|
50
|
+
sm: '8px',
|
|
51
|
+
md: '16px',
|
|
52
|
+
lg: '24px',
|
|
53
|
+
xl: '32px'
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// cores adicionais
|
|
57
|
+
codeHighlight = {
|
|
58
|
+
comment: '#75715e',
|
|
59
|
+
keyword: '#f92672',
|
|
60
|
+
string: '#e6db74',
|
|
61
|
+
number: '#ae81ff',
|
|
62
|
+
function: '#a6e22e',
|
|
63
|
+
variable: '#fd971f'
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
borderStyle = {
|
|
68
|
+
radius: '4px',
|
|
69
|
+
width: '2px',
|
|
70
|
+
style: 'solid'
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
effects = {
|
|
74
|
+
glow: '0 0 10px rgba(249, 38, 114, 0.3)',
|
|
75
|
+
shadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
|
76
|
+
transition: 'all 0.3s ease'
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
emailStyles: IThemeEmailStyles = {
|
|
80
|
+
maxWidthPx: 600,
|
|
81
|
+
container: {
|
|
82
|
+
borderColor: 'border',
|
|
83
|
+
borderWidth: '1px',
|
|
84
|
+
borderRadius: '4px',
|
|
85
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)'
|
|
86
|
+
},
|
|
87
|
+
header: {
|
|
88
|
+
accentColor: 'primary',
|
|
89
|
+
accentWidth: '3px',
|
|
90
|
+
horizontalPadding: '24px',
|
|
91
|
+
logoColor: 'text',
|
|
92
|
+
logoFontFamily: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
|
|
93
|
+
logoLetterSpacing: '0.02em',
|
|
94
|
+
imageBorderRadius: '3px'
|
|
95
|
+
},
|
|
96
|
+
body: {
|
|
97
|
+
accentColor: 'secondary',
|
|
98
|
+
accentWidth: '2px',
|
|
99
|
+
borderRadius: '4px',
|
|
100
|
+
boxShadow: 'none',
|
|
101
|
+
horizontalPadding: '24px',
|
|
102
|
+
lineHeight: 1.6
|
|
103
|
+
},
|
|
104
|
+
button: {
|
|
105
|
+
appearance: 'solid',
|
|
106
|
+
borderRadius: '3px',
|
|
107
|
+
borderWidth: '1px',
|
|
108
|
+
boxShadow: 'none',
|
|
109
|
+
textTransform: 'uppercase',
|
|
110
|
+
letterSpacing: '0.04em'
|
|
111
|
+
},
|
|
112
|
+
footer: {
|
|
113
|
+
accentColor: 'secondary',
|
|
114
|
+
accentWidth: '2px'
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { ThemeType } from '../../core/enums/theme.enum';
|
|
2
|
+
import { ITheme, IThemeColors, ITypography, ISpacing, IThemeEmailStyles } from './theme.interface';
|
|
3
|
+
|
|
4
|
+
export class NeoBrutalTheme implements ITheme {
|
|
5
|
+
id = ThemeType.NEOBRUTAL;
|
|
6
|
+
name = 'Neo Brutal';
|
|
7
|
+
|
|
8
|
+
light: IThemeColors = {
|
|
9
|
+
primary: '#1745C6',
|
|
10
|
+
secondary: '#FFD400',
|
|
11
|
+
background: '#FFFFFF',
|
|
12
|
+
text: '#111111',
|
|
13
|
+
textMuted: '#505050',
|
|
14
|
+
border: '#767676',
|
|
15
|
+
success: '#146C2E',
|
|
16
|
+
error: '#B42318',
|
|
17
|
+
warning: '#805B00'
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
dark: IThemeColors = {
|
|
21
|
+
primary: '#FFD400',
|
|
22
|
+
secondary: '#4F7DFF',
|
|
23
|
+
background: '#111111',
|
|
24
|
+
text: '#FAFAFA',
|
|
25
|
+
textMuted: '#C4C4C4',
|
|
26
|
+
border: '#777777',
|
|
27
|
+
success: '#75D99A',
|
|
28
|
+
error: '#FF8B82',
|
|
29
|
+
warning: '#FFD166'
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
typography: ITypography = {
|
|
33
|
+
fontFamily: 'Arial, Helvetica, "Liberation Sans", sans-serif',
|
|
34
|
+
fontSizes: {
|
|
35
|
+
small: '14px',
|
|
36
|
+
medium: '16px',
|
|
37
|
+
large: '20px',
|
|
38
|
+
xlarge: '28px'
|
|
39
|
+
},
|
|
40
|
+
fontWeights: {
|
|
41
|
+
normal: 400,
|
|
42
|
+
medium: 600,
|
|
43
|
+
bold: 800
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
spacing: ISpacing = {
|
|
48
|
+
xs: '4px',
|
|
49
|
+
sm: '8px',
|
|
50
|
+
md: '16px',
|
|
51
|
+
lg: '24px',
|
|
52
|
+
xl: '36px'
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
emailStyles: IThemeEmailStyles = {
|
|
56
|
+
maxWidthPx: 600,
|
|
57
|
+
container: {
|
|
58
|
+
borderColor: 'border',
|
|
59
|
+
borderWidth: '3px',
|
|
60
|
+
borderRadius: '0',
|
|
61
|
+
boxShadow: 'none'
|
|
62
|
+
},
|
|
63
|
+
header: {
|
|
64
|
+
accentColor: 'primary',
|
|
65
|
+
accentWidth: '8px',
|
|
66
|
+
horizontalPadding: '24px',
|
|
67
|
+
logoColor: 'text',
|
|
68
|
+
logoFontFamily: 'Arial, Helvetica, "Liberation Sans", sans-serif',
|
|
69
|
+
logoTextTransform: 'uppercase',
|
|
70
|
+
logoLetterSpacing: '0.04em',
|
|
71
|
+
imageBorderRadius: '0'
|
|
72
|
+
},
|
|
73
|
+
body: {
|
|
74
|
+
accentColor: 'secondary',
|
|
75
|
+
accentWidth: '4px',
|
|
76
|
+
borderRadius: '0',
|
|
77
|
+
boxShadow: 'none',
|
|
78
|
+
horizontalPadding: '28px',
|
|
79
|
+
lineHeight: 1.55
|
|
80
|
+
},
|
|
81
|
+
button: {
|
|
82
|
+
appearance: 'solid',
|
|
83
|
+
borderRadius: '0',
|
|
84
|
+
borderWidth: '3px',
|
|
85
|
+
boxShadow: 'none',
|
|
86
|
+
textTransform: 'uppercase',
|
|
87
|
+
letterSpacing: '0.04em'
|
|
88
|
+
},
|
|
89
|
+
footer: {
|
|
90
|
+
accentColor: 'border',
|
|
91
|
+
accentWidth: '2px'
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { ThemeType } from '../../core/enums/theme.enum';
|
|
2
|
+
import { ITheme, IThemeColors, ITypography, ISpacing, IThemeEmailStyles } from './theme.interface';
|
|
3
|
+
|
|
4
|
+
export class OceanTheme implements ITheme {
|
|
5
|
+
id = ThemeType.OCEAN;
|
|
6
|
+
name = 'Ocean';
|
|
7
|
+
|
|
8
|
+
light: IThemeColors = {
|
|
9
|
+
primary: '#075985',
|
|
10
|
+
secondary: '#0E7490',
|
|
11
|
+
background: '#F4FAFC',
|
|
12
|
+
text: '#102A43',
|
|
13
|
+
textMuted: '#486581',
|
|
14
|
+
border: '#C7DCE5',
|
|
15
|
+
success: '#166534',
|
|
16
|
+
error: '#B42318',
|
|
17
|
+
warning: '#92400E'
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
dark: IThemeColors = {
|
|
21
|
+
primary: '#67E8F9',
|
|
22
|
+
secondary: '#5EEAD4',
|
|
23
|
+
background: '#071B2B',
|
|
24
|
+
text: '#E6F4F7',
|
|
25
|
+
textMuted: '#A6C8D1',
|
|
26
|
+
border: '#244657',
|
|
27
|
+
success: '#6EE7B7',
|
|
28
|
+
error: '#FDA4AF',
|
|
29
|
+
warning: '#FCD34D'
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
typography: ITypography = {
|
|
33
|
+
fontFamily: 'Arial, Helvetica, sans-serif',
|
|
34
|
+
fontSizes: {
|
|
35
|
+
small: '14px',
|
|
36
|
+
medium: '16px',
|
|
37
|
+
large: '18px',
|
|
38
|
+
xlarge: '26px'
|
|
39
|
+
},
|
|
40
|
+
fontWeights: {
|
|
41
|
+
normal: 400,
|
|
42
|
+
medium: 500,
|
|
43
|
+
bold: 600
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
spacing: ISpacing = {
|
|
48
|
+
xs: '4px',
|
|
49
|
+
sm: '8px',
|
|
50
|
+
md: '16px',
|
|
51
|
+
lg: '24px',
|
|
52
|
+
xl: '36px'
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
emailStyles: IThemeEmailStyles = {
|
|
56
|
+
maxWidthPx: 600,
|
|
57
|
+
container: {
|
|
58
|
+
borderColor: 'border',
|
|
59
|
+
borderWidth: '1px',
|
|
60
|
+
borderRadius: '12px',
|
|
61
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)'
|
|
62
|
+
},
|
|
63
|
+
header: {
|
|
64
|
+
accentColor: 'secondary',
|
|
65
|
+
accentWidth: '4px',
|
|
66
|
+
horizontalPadding: '28px',
|
|
67
|
+
logoColor: 'primary',
|
|
68
|
+
logoFontFamily: 'Arial, Helvetica, sans-serif',
|
|
69
|
+
logoLetterSpacing: '0.02em',
|
|
70
|
+
imageBorderRadius: '8px'
|
|
71
|
+
},
|
|
72
|
+
body: {
|
|
73
|
+
accentColor: 'primary',
|
|
74
|
+
accentWidth: '3px',
|
|
75
|
+
borderRadius: '8px',
|
|
76
|
+
boxShadow: '0 1px 4px rgba(0, 0, 0, 0.06)',
|
|
77
|
+
horizontalPadding: '28px',
|
|
78
|
+
lineHeight: 1.6
|
|
79
|
+
},
|
|
80
|
+
button: {
|
|
81
|
+
appearance: 'solid',
|
|
82
|
+
borderRadius: '6px',
|
|
83
|
+
borderWidth: '1px',
|
|
84
|
+
boxShadow: 'none',
|
|
85
|
+
textTransform: 'none',
|
|
86
|
+
letterSpacing: '0.01em'
|
|
87
|
+
},
|
|
88
|
+
footer: {
|
|
89
|
+
accentColor: 'secondary',
|
|
90
|
+
accentWidth: '2px'
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { ThemeType } from '../../core/enums/theme.enum';
|
|
2
|
+
import { ITheme, IThemeColors, ITypography, ISpacing, IThemeEmailStyles } from './theme.interface';
|
|
3
|
+
|
|
4
|
+
export class PastelTheme implements ITheme {
|
|
5
|
+
id = ThemeType.PASTEL;
|
|
6
|
+
name = 'Pastel';
|
|
7
|
+
|
|
8
|
+
light: IThemeColors = {
|
|
9
|
+
primary: '#76536B',
|
|
10
|
+
secondary: '#796C78',
|
|
11
|
+
background: '#FFFAF4',
|
|
12
|
+
text: '#352D36',
|
|
13
|
+
textMuted: '#655B65',
|
|
14
|
+
border: '#E8DCD9',
|
|
15
|
+
success: '#356B56',
|
|
16
|
+
error: '#9B4148',
|
|
17
|
+
warning: '#80551F'
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
dark: IThemeColors = {
|
|
21
|
+
primary: '#765A80',
|
|
22
|
+
secondary: '#C7B7CB',
|
|
23
|
+
background: '#211D27',
|
|
24
|
+
text: '#F7F0F5',
|
|
25
|
+
textMuted: '#C9BEC9',
|
|
26
|
+
border: '#49404D',
|
|
27
|
+
success: '#8FCBAA',
|
|
28
|
+
error: '#F0A0A4',
|
|
29
|
+
warning: '#E8C17B'
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
typography: ITypography = {
|
|
33
|
+
fontFamily: 'Arial, Helvetica, sans-serif',
|
|
34
|
+
fontSizes: {
|
|
35
|
+
small: '14px',
|
|
36
|
+
medium: '16px',
|
|
37
|
+
large: '18px',
|
|
38
|
+
xlarge: '26px'
|
|
39
|
+
},
|
|
40
|
+
fontWeights: {
|
|
41
|
+
normal: 400,
|
|
42
|
+
medium: 500,
|
|
43
|
+
bold: 700
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
spacing: ISpacing = {
|
|
48
|
+
xs: '6px',
|
|
49
|
+
sm: '12px',
|
|
50
|
+
md: '20px',
|
|
51
|
+
lg: '30px',
|
|
52
|
+
xl: '44px'
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
emailStyles: IThemeEmailStyles = {
|
|
56
|
+
maxWidthPx: 600,
|
|
57
|
+
container: {
|
|
58
|
+
borderColor: 'border',
|
|
59
|
+
borderWidth: '1px',
|
|
60
|
+
borderRadius: '14px',
|
|
61
|
+
boxShadow: '0 2px 10px rgba(53, 45, 54, 0.08)'
|
|
62
|
+
},
|
|
63
|
+
header: {
|
|
64
|
+
accentColor: 'primary',
|
|
65
|
+
accentWidth: '3px',
|
|
66
|
+
horizontalPadding: '28px',
|
|
67
|
+
logoColor: 'primary',
|
|
68
|
+
logoFontFamily: 'Georgia, "Times New Roman", serif',
|
|
69
|
+
logoLetterSpacing: '0.03em',
|
|
70
|
+
imageBorderRadius: '10px'
|
|
71
|
+
},
|
|
72
|
+
body: {
|
|
73
|
+
accentColor: 'secondary',
|
|
74
|
+
accentWidth: '2px',
|
|
75
|
+
borderRadius: '10px',
|
|
76
|
+
boxShadow: 'none',
|
|
77
|
+
horizontalPadding: '28px',
|
|
78
|
+
lineHeight: 1.6
|
|
79
|
+
},
|
|
80
|
+
button: {
|
|
81
|
+
appearance: 'solid',
|
|
82
|
+
borderRadius: '18px',
|
|
83
|
+
borderWidth: '1px',
|
|
84
|
+
boxShadow: 'none',
|
|
85
|
+
letterSpacing: '0.01em'
|
|
86
|
+
},
|
|
87
|
+
footer: {
|
|
88
|
+
accentColor: 'border',
|
|
89
|
+
accentWidth: '1px'
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|