@nebutra/email 0.1.1 → 0.1.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/.turbo/turbo-build.log +14 -14
- package/.turbo/turbo-test.log +9 -9
- package/.turbo/turbo-typecheck.log +1 -1
- package/CHANGELOG.md +23 -0
- package/LICENSE +21 -676
- package/README.md +21 -4
- package/dist/index.d.ts +23 -2
- package/dist/index.js +83 -35
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
- package/src/__tests__/provider.test.ts +5 -5
- package/src/index.ts +85 -30
- package/src/templates/_layout.ts +15 -6
- package/src/templates/invitation.tsx +2 -1
package/src/templates/_layout.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { colors } from "@nebutra/brand/metadata";
|
|
2
|
+
import { getBrandOrigin } from "@nebutra/brand/metadata-helpers";
|
|
1
3
|
/**
|
|
2
4
|
* Shared HTML layout for the React Email-style template catalog.
|
|
3
5
|
*
|
|
@@ -15,7 +17,12 @@ export interface RenderedEmail {
|
|
|
15
17
|
preview: string;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Email clients do not load app CSS variables. These are identity-locked hex
|
|
22
|
+
* snapshots (VI brand-primary header), not product-chrome skins. Keep in sync with
|
|
23
|
+
* brand assets — do not invent per-template blues.
|
|
24
|
+
*/
|
|
25
|
+
const BRAND_HEADER = colors.primary["500"];
|
|
19
26
|
const COLOR_BG = "#f8fafc";
|
|
20
27
|
const COLOR_BORDER = "#e2e8f0";
|
|
21
28
|
const COLOR_HEADING = "#0f172a";
|
|
@@ -29,7 +36,7 @@ export interface BaseLayoutOptions {
|
|
|
29
36
|
}
|
|
30
37
|
|
|
31
38
|
/**
|
|
32
|
-
* Wrap a body fragment with the standard
|
|
39
|
+
* Wrap a body fragment with the standard brand-style transactional shell.
|
|
33
40
|
*/
|
|
34
41
|
export function baseLayout({ brandName, preview, body }: BaseLayoutOptions): string {
|
|
35
42
|
return `<!DOCTYPE html>
|
|
@@ -45,7 +52,7 @@ export function baseLayout({ brandName, preview, body }: BaseLayoutOptions): str
|
|
|
45
52
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background:${COLOR_BG};">
|
|
46
53
|
<tr><td align="center" style="padding:40px 16px;">
|
|
47
54
|
<table width="600" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;border-radius:12px;border:1px solid ${COLOR_BORDER};overflow:hidden;max-width:600px;width:100%;">
|
|
48
|
-
<tr><td style="background:${
|
|
55
|
+
<tr><td style="background:${BRAND_HEADER};padding:32px 40px;">
|
|
49
56
|
<h1 style="margin:0;color:#ffffff;font-size:24px;font-weight:700;letter-spacing:-0.5px;">${escapeHtml(brandName)}</h1>
|
|
50
57
|
</td></tr>
|
|
51
58
|
<tr><td style="padding:40px;">
|
|
@@ -54,8 +61,8 @@ export function baseLayout({ brandName, preview, body }: BaseLayoutOptions): str
|
|
|
54
61
|
<tr><td style="padding:24px 40px;border-top:1px solid ${COLOR_BORDER};background:${COLOR_BG};">
|
|
55
62
|
<p style="margin:0;font-size:12px;color:${COLOR_MUTED};text-align:center;">
|
|
56
63
|
© ${new Date().getFullYear()} ${escapeHtml(brandName)} ·
|
|
57
|
-
<a href="
|
|
58
|
-
<a href="
|
|
64
|
+
<a href="${getBrandOrigin("landing")}/privacy" style="color:${COLOR_MUTED};">Privacy</a> ·
|
|
65
|
+
<a href="${getBrandOrigin("landing")}/unsubscribe" style="color:${COLOR_MUTED};">Unsubscribe</a>
|
|
59
66
|
</p>
|
|
60
67
|
</td></tr>
|
|
61
68
|
</table>
|
|
@@ -66,7 +73,9 @@ export function baseLayout({ brandName, preview, body }: BaseLayoutOptions): str
|
|
|
66
73
|
}
|
|
67
74
|
|
|
68
75
|
export const palette = {
|
|
69
|
-
|
|
76
|
+
/** @deprecated alias of solid identity header — not a product skin */
|
|
77
|
+
gradient: BRAND_HEADER,
|
|
78
|
+
header: BRAND_HEADER,
|
|
70
79
|
background: COLOR_BG,
|
|
71
80
|
border: COLOR_BORDER,
|
|
72
81
|
heading: COLOR_HEADING,
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
* catalog can be migrated to React Email later without changing call sites.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
+
import { colors } from "@nebutra/brand/metadata";
|
|
9
10
|
import { baseLayout, escapeHtml, palette } from "./_layout";
|
|
10
11
|
|
|
11
12
|
export interface InvitationEmailProps {
|
|
@@ -41,7 +42,7 @@ export function render(props: InvitationEmailProps): string {
|
|
|
41
42
|
</p>
|
|
42
43
|
<p style="margin:0 0 24px;font-size:14px;color:${palette.body};">
|
|
43
44
|
Role:
|
|
44
|
-
<span style="display:inline-block;background:#e0f2fe;color
|
|
45
|
+
<span style="display:inline-block;background:#e0f2fe;color:${colors.primary["500"]};padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin-left:6px;">
|
|
45
46
|
${role}
|
|
46
47
|
</span>
|
|
47
48
|
</p>
|