@clay-design-system/email 0.0.0-stage → 0.2.1

package/dist/tokens/build-email-tokens.js

@@ -0,0 +1,229 @@
+/**
+ * Token → email bridge.
+ *
+ * Emails cannot use CSS custom properties (`var(--clay-*)`) — Outlook and others strip them. So this
+ * script reads the RESOLVED LITERAL token values from `@clay-design-system/tokens` (the dist/tokens.js ES export)
+ * and materializes them into two generated artifacts consumed by the MJML sections:
+ *
+ *   src/generated/base-head.mjml   — <mj-head> fragment: fonts, mj-class roles, dark-mode <mj-style>
+ *   src/generated/email-tokens.ts  — inline-able constants + px() helper for section authoring/docs
+ *
+ * Both are GENERATED — never edit by hand. `pnpm --filter @clay-design-system/email tokens:check` regenerates
+ * and fails on drift (mirrors the repo-wide `docs:check` guard).
+ *
+ * Run as the first step of the package build (before compile.ts).
+ */
+import { writeFileSync, mkdirSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as tokens from '@clay-design-system/tokens';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const generatedDir = resolve(__dirname, '..', 'generated');
+mkdirSync(generatedDir, { recursive: true });
+/** Unitless number token → px string. Line-heights/weights stay unitless (valid + preferred in email). */
+const px = (n) => `${n}px`;
+// ── Resolved literals from the foundation (single source of truth) ──────────────────────────────
+const color = {
+    page: tokens.ClayColorBackgroundDefaultSecondary, // #f3f4f5
+    surface: tokens.ClayColorBackgroundDefaultDefault, // #ffffff
+    text: tokens.ClayColorTextDefaultDefault, // #252526
+    textMuted: tokens.ClayColorTextDefaultSecondary, // #45454a (grey-700)
+    brand: tokens.ClayColorBackgroundBrandDefault, // #6161ff
+    brandLink: tokens.ClayColorTextBrandDefault, // #6161ff
+    onBrand: tokens.ClayColorTextOnDark, // #ffffff
+    // Stone / warm-beige palette (quote cards, warm editorial surfaces)
+    surfaceWarm: tokens.ClayColorStone100, // #f7f3ea
+    surfaceWarmBorder: tokens.ClayColorStone200, // #f2e7d6
+    // dark-mode surfaces (from the grey ramp)
+    pageDark: tokens.ClayFoundationBrandColorGrey950, // #000000
+    surfaceDark: tokens.ClayFoundationBrandColorGrey800, // #252526
+    textDark: tokens.ClayColorTextOnDark, // #ffffff
+};
+// Lifecycle email type scale — matches Life cycle DS Figma (Heading 1-5, Paragraph 1-4).
+// All entries carry an explicit `weight` so email-tokens.ts is self-documenting without inference.
+const type = {
+    family: tokens.ClayEmailTypeFamily,
+    weightRegular: tokens.ClayEmailTypeWeightRegular,
+    weightSemi: tokens.ClayEmailTypeWeightSemi,
+    // Headings h1–h4 shrink on mobile (emaillove @media step-down); h5 and below do not.
+    h1: { size: px(tokens.ClayEmailTypeH1Size), sizeMobile: px(tokens.ClayEmailTypeH1SizeMobile), weight: tokens.ClayEmailTypeWeightSemi, lineHeight: tokens.ClayEmailTypeH1LineHeight, letterSpacing: px(tokens.ClayEmailTypeH1LetterSpacing) },
+    h2: { size: px(tokens.ClayEmailTypeH2Size), sizeMobile: px(tokens.ClayEmailTypeH2SizeMobile), weight: tokens.ClayEmailTypeWeightSemi, lineHeight: tokens.ClayEmailTypeH2LineHeight, letterSpacing: px(tokens.ClayEmailTypeH2LetterSpacing) },
+    h3: { size: px(tokens.ClayEmailTypeH3Size), sizeMobile: px(tokens.ClayEmailTypeH3SizeMobile), weight: tokens.ClayEmailTypeWeightSemi, lineHeight: tokens.ClayEmailTypeH3LineHeight, letterSpacing: px(tokens.ClayEmailTypeH3LetterSpacing) },
+    h4: { size: px(tokens.ClayEmailTypeH4Size), sizeMobile: px(tokens.ClayEmailTypeH4SizeMobile), weight: tokens.ClayEmailTypeWeightSemi, lineHeight: tokens.ClayEmailTypeH4LineHeight },
+    h5: { size: px(tokens.ClayEmailTypeH5Size), sizeMobile: px(tokens.ClayEmailTypeH5SizeMobile), weight: tokens.ClayEmailTypeWeightSemi, lineHeight: tokens.ClayEmailTypeH5LineHeight },
+    p1: { size: px(tokens.ClayEmailTypeP1Size), sizeMobile: px(tokens.ClayEmailTypeP1SizeMobile), weight: tokens.ClayEmailTypeWeightRegular, lineHeight: tokens.ClayEmailTypeP1LineHeight },
+    p2: { size: px(tokens.ClayEmailTypeP2Size), sizeMobile: px(tokens.ClayEmailTypeP2SizeMobile), weight: tokens.ClayEmailTypeWeightRegular, lineHeight: tokens.ClayEmailTypeP2LineHeight },
+    p3: { size: px(tokens.ClayEmailTypeP3Size), sizeMobile: px(tokens.ClayEmailTypeP3SizeMobile), weight: tokens.ClayEmailTypeWeightRegular, lineHeight: tokens.ClayEmailTypeP3LineHeight },
+    p4: { size: px(tokens.ClayEmailTypeP4Size), sizeMobile: px(tokens.ClayEmailTypeP4SizeMobile), weight: tokens.ClayEmailTypeWeightRegular, lineHeight: tokens.ClayEmailTypeP4LineHeight },
+    button: { size: px(tokens.ClayEmailTypeButtonSize), weight: tokens.ClayEmailTypeButtonWeight, lineHeight: tokens.ClayEmailTypeButtonLineHeight },
+};
+const layout = {
+    canvasWidth: 640,
+    contentWidth: 560,
+    hPadding: px(tokens.ClaySizeSpace1000), // 40px
+    sectionY: px(tokens.ClaySizeSpace600), // 24px
+    gapMd: px(tokens.ClaySizeSpace400), // 16px
+    gapLg: px(tokens.ClaySizeSpace800), // 32px
+    cardRadius: px(tokens.ClayRadiusLg), // 16px
+    pillRadius: px(tokens.ClayRadiusFull), // 9999px
+    iconSize: px(tokens.ClaySizeSpace600), // 24px
+};
+// Effects (shadows) — from the foundation effect tokens. Emails are mostly flat; exposed for cards
+// that need elevation. Values are already email-safe CSS box-shadow strings.
+const effect = {
+    shadowLight: tokens.ClayEffectShadowLight,
+    shadowHard: tokens.ClayEffectShadowHard,
+};
+// The email fallback stack Poppins → system — email clients frequently lack the webfont.
+const fontStack = `Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif`;
+const BANNER = 'GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`.';
+// ── 1. base-head.mjml — an <mj-head> FRAGMENT (included inside the container's <mj-head>) ─────────
+const baseHead = `<!-- ${BANNER} -->
+<mj-raw>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="x-apple-disable-message-reformatting" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="supported-color-schemes" content="light dark" />
+</mj-raw>
+<mj-font name="Poppins" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" />
+
+<mj-attributes>
+  <mj-all font-family="${fontStack}" />
+  <mj-text color="${color.text}" font-size="${type.p1.size}" line-height="${type.p1.lineHeight}" padding="0" />
+  <!-- Lifecycle heading scale (semi-bold default; override font-weight inline for regular variant) -->
+  <mj-class name="clay-h1" color="${color.text}" font-size="${type.h1.size}" font-weight="${type.weightSemi}" line-height="${type.h1.lineHeight}" letter-spacing="${type.h1.letterSpacing}" />
+  <mj-class name="clay-h2" color="${color.text}" font-size="${type.h2.size}" font-weight="${type.weightSemi}" line-height="${type.h2.lineHeight}" letter-spacing="${type.h2.letterSpacing}" />
+  <mj-class name="clay-h3" color="${color.text}" font-size="${type.h3.size}" font-weight="${type.weightSemi}" line-height="${type.h3.lineHeight}" letter-spacing="${type.h3.letterSpacing}" />
+  <mj-class name="clay-h4" color="${color.text}" font-size="${type.h4.size}" font-weight="${type.weightSemi}" line-height="${type.h4.lineHeight}" />
+  <mj-class name="clay-h5" color="${color.text}" font-size="${type.h5.size}" font-weight="${type.weightSemi}" line-height="${type.h5.lineHeight}" />
+  <!-- Lifecycle paragraph scale (regular-weight default) -->
+  <mj-class name="clay-p1" color="${color.text}" font-size="${type.p1.size}" font-weight="${type.weightRegular}" line-height="${type.p1.lineHeight}" />
+  <mj-class name="clay-p2" color="${color.text}" font-size="${type.p2.size}" font-weight="${type.weightRegular}" line-height="${type.p2.lineHeight}" />
+  <mj-class name="clay-p3" color="${color.textMuted}" font-size="${type.p3.size}" font-weight="${type.weightRegular}" line-height="${type.p3.lineHeight}" />
+  <mj-class name="clay-p4" color="${color.textMuted}" font-size="${type.p4.size}" font-weight="${type.weightRegular}" line-height="${type.p4.lineHeight}" />
+  <mj-class name="clay-button" background-color="${color.brand}" color="${color.onBrand}" border-radius="${layout.pillRadius}" font-size="${type.button.size}" font-weight="${type.button.weight}" inner-padding="12px 24px" />
+</mj-attributes>
+
+<mj-style>
+  /* Client resets emaillove ships that MJML omits (Outlook.com line-height, image gaps). */
+  img { display: block; }
+  .ExternalClass { width: 100%; }
+  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
+  /* Dark-only images hidden in light mode; swapped in the dark block below. */
+  .dl { display: none; }
+
+  /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
+     @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
+     hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
+     mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
+  @media only screen and (max-width: 479px) {
+    .clay-h1 > div { font-size: ${type.h1.sizeMobile} !important; }
+    .clay-h2 > div { font-size: ${type.h2.sizeMobile} !important; }
+    .clay-h3 > div { font-size: ${type.h3.sizeMobile} !important; }
+    .clay-h4 > div { font-size: ${type.h4.sizeMobile} !important; }
+
+    /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
+       Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
+       Targets the outer td MJML generates with inline padding-left/padding-right. */
+    .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
+    .email-mobile-px-16 > table > tbody > tr > td { padding-right: 16px !important; padding-left: 16px !important; }
+    .email-mobile-px-0 > table > tbody > tr > td { padding-right: 0 !important; padding-left: 0 !important; }
+    .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
+
+    /* Mobile text centering — apply as css-class on mj-text elements whose content should be
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
+    .email-mobile-center > div { text-align: center !important; }
+
+    /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
+       text-align on the td does not reposition its block-level child table (CSS text-align
+       only affects inline content), so the nested image-wrapper table also needs margin:auto
+       to actually override the mj-image align="left"/"right" attribute on mobile. */
+    .email-mobile-center-img { text-align: center !important; }
+    .email-mobile-center-img > table { margin: 0 auto !important; }
+
+    /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
+       Makes the button's inner table fill the column width and centers it.
+       Matches emaillove .mj-b-full pattern. */
+    .email-btn-full > table { width: 100% !important; }
+    .email-btn-full > table > tbody > tr > td { text-align: center !important; }
+  }
+
+  /* Left-aligned button content — apply css-class="email-btn-left" to mj-button.
+     Overrides MJML's default text-align:center on the inner td and anchor so
+     icon+text rows (e.g. buttons-icons) are left-aligned like the emaillove source. */
+  .email-btn-left > table > tbody > tr > td { text-align: left !important; }
+  .email-btn-left > table > tbody > tr > td > a { text-align: left !important; }
+
+  /* Decorative image tilt — apply css-class="email-tilt-1".."email-tilt-4" to mj-image for a
+     fanned photo-stack look (e.g. an avatar composite row). Webkit/Blink clients rotate the
+     image; Outlook and other non-supporting clients silently ignore the transform and show the
+     image unrotated — safe graceful degradation, never a broken layout. */
+  .email-tilt-1 { transform: rotate(-6deg); }
+  .email-tilt-2 { transform: rotate(4deg); }
+  .email-tilt-3 { transform: rotate(-4deg); }
+  .email-tilt-4 { transform: rotate(6deg); }
+
+  :root { color-scheme: light dark; supported-color-schemes: light dark; }
+  @media (prefers-color-scheme: dark) {
+    body, .email-page { background-color: ${color.pageDark} !important; }
+    /*
+     * email-card: flip a section or column's background to dark.
+     *
+     * Three selectors cover every compiled MJML structure:
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
+     *   3. .email-card > table > tbody > tr > td
+     *                           — the content td inside mj-column (carries inline bg-color
+     *                             + border-radius when background-color is set on mj-column)
+     *
+     * Apply css-class="email-card" to any mj-section or mj-column that should
+     * become dark. Works for grey inner cards (#f3f4f5), coloured panels, etc.
+     */
+    .email-card,
+    .email-card > table,
+    .email-card > table > tbody > tr > td { background-color: ${color.surfaceDark} !important; }
+    .email-text, .email-text * { color: ${color.textDark} !important; }
+    .ll { display: none !important; }
+    .dl { display: block !important; }
+    /* Black CTA button invert — apply css-class="email-btn-invert-dark" to invert a black
+       mj-button to white background + black text in dark mode. Matches emaillove global
+       .mj-b>td { background-color:#ffffff } pattern for black CTA buttons. */
+    .email-btn-invert-dark > table > tbody > tr > td { background-color: #ffffff !important; }
+    .email-btn-invert-dark > table > tbody > tr > td > a { background-color: #ffffff !important; color: #000000 !important; }
+  }
+  /* Outlook.com + Gmail-app dark mode — these clients ignore prefers-color-scheme and instead
+     prefix overridden nodes with data-ogsc (foreground) / data-ogsb (background). */
+  [data-ogsb] body, [data-ogsb] .email-page { background-color: ${color.pageDark} !important; }
+  [data-ogsb] .email-card,
+  [data-ogsb] .email-card > table,
+  [data-ogsb] .email-card > table > tbody > tr > td { background-color: ${color.surfaceDark} !important; }
+  [data-ogsc] .email-text, [data-ogsc] .email-text * { color: ${color.textDark} !important; }
+</mj-style>
+`;
+writeFileSync(resolve(generatedDir, 'base-head.mjml'), baseHead);
+// ── 2. email-tokens.ts — inline-able constants for section authoring + docs ──────────────────────
+const emailTokensTs = `// ${BANNER}
+// Inline-able literal token values for MJML email authoring. Emails cannot use var(--clay-*),
+// so sections copy these literals. Roles that mj-class carries (clay-h1…h5, clay-p1…p4, clay-button) live in base-head.mjml.
+
+/** Unitless size/spacing token → px string. */
+export const px = (n: number): string => \`\${n}px\`
+
+export const emailColor = ${JSON.stringify(color, null, 2)} as const
+
+export const emailType = ${JSON.stringify(type, null, 2)} as const
+
+export const emailLayout = ${JSON.stringify(layout, null, 2)} as const
+
+export const emailEffect = ${JSON.stringify(effect, null, 2)} as const
+
+/** Poppins → system fallback stack (email webfonts are unreliable). */
+export const emailFontStack = ${JSON.stringify(fontStack)}
+`;
+writeFileSync(resolve(generatedDir, 'email-tokens.ts'), emailTokensTs);
+console.log('@clay-design-system/email: token bridge generated (base-head.mjml + email-tokens.ts)');
+//# sourceMappingURL=build-email-tokens.js.map

package/dist/tokens/build-email-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-email-tokens.js","sourceRoot":"","sources":["../../src/tokens/build-email-tokens.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@clay-design-system/email",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./catalog.json": "./dist/catalog.json",
+    "./emails/*": "./dist/emails/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@clay-design-system/tokens": "0.12.0"
+  },
+  "devDependencies": {
+    "@types/mjml": "^4.7.4",
+    "@types/node": "^22.0.0",
+    "chokidar": "^4.0.0",
+    "cloudinary": "^2.5.1",
+    "mjml": "^4.15.3",
+    "tsx": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0"
+  },
+  "scripts": {
+    "build": "tsx src/tokens/build-email-tokens.ts && tsx src/tokens/build-email-assets.ts && tsc && tsx src/build/compile.ts && tsx src/build/export-braze.ts",
+    "dev": "tsx src/build/compile.ts --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "tokens:check": "tsx src/tokens/build-email-tokens.ts && git diff --exit-code -- src/generated",
+    "export:braze": "tsx src/build/export-braze.ts",
+    "export:braze:cdn": "tsx src/build/export-braze.ts --cdn-base=https://assets.monday.com/email/",
+    "email:upload": "tsx src/build/upload-assets.ts",
+    "email:upload:dry-run": "tsx src/build/upload-assets.ts --dry-run",
+    "library:upload": "tsx src/build/upload-library-assets.ts",
+    "library:upload:dry-run": "tsx src/build/upload-library-assets.ts --dry-run",
+    "library:generate-map": "tsx src/build/generate-stock-library-map.ts",
+    "email:resolve-visuals": "tsx src/build/visual-resolver.ts"
+  }
 }