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

package/dist/generated/email-tokens.d.ts

@@ -0,0 +1,101 @@
+/** Unitless size/spacing token → px string. */
+export declare const px: (n: number) => string;
+export declare const emailColor: {
+    readonly page: "#f3f4f5";
+    readonly surface: "#ffffff";
+    readonly text: "#252526";
+    readonly textMuted: "#7c7b7b";
+    readonly brand: "#6161ff";
+    readonly brandLink: "#6161ff";
+    readonly onBrand: "#ffffff";
+    readonly surfaceWarm: "#f7f3ea";
+    readonly surfaceWarmBorder: "#f2e7d6";
+    readonly pageDark: "#000000";
+    readonly surfaceDark: "#252526";
+    readonly textDark: "#ffffff";
+};
+export declare const emailType: {
+    readonly family: "Poppins, sans-serif";
+    readonly weightRegular: 400;
+    readonly weightSemi: 600;
+    readonly h1: {
+        readonly size: "56px";
+        readonly sizeMobile: "48px";
+        readonly weight: 600;
+        readonly lineHeight: 1.1;
+        readonly letterSpacing: "-1px";
+    };
+    readonly h2: {
+        readonly size: "48px";
+        readonly sizeMobile: "40px";
+        readonly weight: 600;
+        readonly lineHeight: 1.3;
+        readonly letterSpacing: "-1px";
+    };
+    readonly h3: {
+        readonly size: "40px";
+        readonly sizeMobile: "32px";
+        readonly weight: 600;
+        readonly lineHeight: 1.3;
+        readonly letterSpacing: "-1px";
+    };
+    readonly h4: {
+        readonly size: "32px";
+        readonly sizeMobile: "24px";
+        readonly weight: 600;
+        readonly lineHeight: 1.3;
+    };
+    readonly h5: {
+        readonly size: "24px";
+        readonly sizeMobile: "24px";
+        readonly weight: 600;
+        readonly lineHeight: 1.3;
+    };
+    readonly p1: {
+        readonly size: "16px";
+        readonly sizeMobile: "16px";
+        readonly weight: 400;
+        readonly lineHeight: 1.4;
+    };
+    readonly p2: {
+        readonly size: "15px";
+        readonly sizeMobile: "15px";
+        readonly weight: 400;
+        readonly lineHeight: 1.4;
+    };
+    readonly p3: {
+        readonly size: "14px";
+        readonly sizeMobile: "14px";
+        readonly weight: 400;
+        readonly lineHeight: 1.5;
+    };
+    readonly p4: {
+        readonly size: "12px";
+        readonly sizeMobile: "12px";
+        readonly weight: 400;
+        readonly lineHeight: 1.5;
+    };
+    readonly button: {
+        readonly size: "16px";
+        readonly weight: 400;
+        readonly lineHeight: 1;
+    };
+};
+export declare const emailLayout: {
+    readonly canvasWidth: 640;
+    readonly contentWidth: 560;
+    readonly hPadding: "40px";
+    readonly sectionY: "24px";
+    readonly gapMd: "16px";
+    readonly gapLg: "32px";
+    readonly cardRadius: "16px";
+    readonly pillRadius: "9999px";
+    readonly iconSize: "24px";
+};
+export declare const emailEffect: {
+    readonly shadowLight: "0px 0px 40px 0px rgba(23, 24, 28, 0.06)";
+    readonly shadowHard: "0px 8px 40px 0px rgba(23, 24, 28, 0.12)";
+};
+/** Poppins → system fallback stack (email webfonts are unreliable). */
+export declare const emailFontStack = "Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+//# sourceMappingURL=email-tokens.d.ts.map

package/dist/generated/email-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-tokens.d.ts","sourceRoot":"","sources":["../../src/generated/email-tokens.ts"],"names":[],"mappings":"AAIA,+CAA+C;AAC/C,eAAO,MAAM,EAAE,GAAI,GAAG,MAAM,KAAG,MAAkB,CAAA;AAEjD,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAab,CAAA;AAEV,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEZ,CAAA;AAEV,eAAO,MAAM,WAAW;;;;;;;;;;CAUd,CAAA;AAEV,eAAO,MAAM,WAAW;;;CAGd,CAAA;AAEV,uEAAuE;AACvE,eAAO,MAAM,cAAc,4DAA4D,CAAA"}

package/dist/generated/email-tokens.js

@@ -0,0 +1,104 @@
+// GENERATED by src/tokens/build-email-tokens.ts — do not edit. Run `pnpm --filter @clay-design-system/email tokens:check`.
+// 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) => `${n}px`;
+export const emailColor = {
+    "page": "#f3f4f5",
+    "surface": "#ffffff",
+    "text": "#252526",
+    "textMuted": "#7c7b7b",
+    "brand": "#6161ff",
+    "brandLink": "#6161ff",
+    "onBrand": "#ffffff",
+    "surfaceWarm": "#f7f3ea",
+    "surfaceWarmBorder": "#f2e7d6",
+    "pageDark": "#000000",
+    "surfaceDark": "#252526",
+    "textDark": "#ffffff"
+};
+export const emailType = {
+    "family": "Poppins, sans-serif",
+    "weightRegular": 400,
+    "weightSemi": 600,
+    "h1": {
+        "size": "56px",
+        "sizeMobile": "48px",
+        "weight": 600,
+        "lineHeight": 1.1,
+        "letterSpacing": "-1px"
+    },
+    "h2": {
+        "size": "48px",
+        "sizeMobile": "40px",
+        "weight": 600,
+        "lineHeight": 1.3,
+        "letterSpacing": "-1px"
+    },
+    "h3": {
+        "size": "40px",
+        "sizeMobile": "32px",
+        "weight": 600,
+        "lineHeight": 1.3,
+        "letterSpacing": "-1px"
+    },
+    "h4": {
+        "size": "32px",
+        "sizeMobile": "24px",
+        "weight": 600,
+        "lineHeight": 1.3
+    },
+    "h5": {
+        "size": "24px",
+        "sizeMobile": "24px",
+        "weight": 600,
+        "lineHeight": 1.3
+    },
+    "p1": {
+        "size": "16px",
+        "sizeMobile": "16px",
+        "weight": 400,
+        "lineHeight": 1.4
+    },
+    "p2": {
+        "size": "15px",
+        "sizeMobile": "15px",
+        "weight": 400,
+        "lineHeight": 1.4
+    },
+    "p3": {
+        "size": "14px",
+        "sizeMobile": "14px",
+        "weight": 400,
+        "lineHeight": 1.5
+    },
+    "p4": {
+        "size": "12px",
+        "sizeMobile": "12px",
+        "weight": 400,
+        "lineHeight": 1.5
+    },
+    "button": {
+        "size": "16px",
+        "weight": 400,
+        "lineHeight": 1
+    }
+};
+export const emailLayout = {
+    "canvasWidth": 640,
+    "contentWidth": 560,
+    "hPadding": "40px",
+    "sectionY": "24px",
+    "gapMd": "16px",
+    "gapLg": "32px",
+    "cardRadius": "16px",
+    "pillRadius": "9999px",
+    "iconSize": "24px"
+};
+export const emailEffect = {
+    "shadowLight": "0px 0px 40px 0px rgba(23, 24, 28, 0.06)",
+    "shadowHard": "0px 8px 40px 0px rgba(23, 24, 28, 0.12)"
+};
+/** Poppins → system fallback stack (email webfonts are unreliable). */
+export const emailFontStack = "Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+//# sourceMappingURL=email-tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"email-tokens.js","sourceRoot":"","sources":["../../src/generated/email-tokens.ts"],"names":[],"mappings":"AAAA,2HAA2H;AAC3H,8FAA8F;AAC9F,6HAA6H;AAE7H,+CAA+C;AAC/C,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,GAAG,CAAC,IAAI,CAAA;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IACtB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,aAAa,EAAE,SAAS;IACxB,mBAAmB,EAAE,SAAS;IAC9B,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;IACxB,UAAU,EAAE,SAAS;CACb,CAAA;AAEV,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,QAAQ,EAAE,qBAAqB;IAC/B,eAAe,EAAE,GAAG;IACpB,YAAY,EAAE,GAAG;IACjB,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;QACjB,eAAe,EAAE,MAAM;KACxB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;QACjB,eAAe,EAAE,MAAM;KACxB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;QACjB,eAAe,EAAE,MAAM;KACxB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;KAClB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;KAClB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;KAClB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;KAClB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;KAClB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,GAAG;KAClB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG;QACb,YAAY,EAAE,CAAC;KAChB;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,aAAa,EAAE,GAAG;IAClB,cAAc,EAAE,GAAG;IACnB,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,MAAM;IACpB,YAAY,EAAE,QAAQ;IACtB,UAAU,EAAE,MAAM;CACV,CAAA;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,aAAa,EAAE,yCAAyC;IACxD,YAAY,EAAE,yCAAyC;CAC/C,CAAA;AAEV,uEAAuE;AACvE,MAAM,CAAC,MAAM,cAAc,GAAG,yDAAyD,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @clay-design-system/email public entry.
+ *
+ * Runtime surface = the inline-able email token constants (generated from @clay-design-system/tokens) and the
+ * catalog types. Compiled email HTML is read from `@clay-design-system/email/catalog.json`.
+ */
+export * from './generated/email-tokens';
+export type { Catalog, CatalogItem, CatalogKind } from './build/catalog';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * @clay-design-system/email public entry.
+ *
+ * Runtime surface = the inline-able email token constants (generated from @clay-design-system/tokens) and the
+ * catalog types. Compiled email HTML is read from `@clay-design-system/email/catalog.json`.
+ */
+export * from './generated/email-tokens';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,0BAA0B,CAAA"}

package/dist/tokens/build-email-assets.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Email asset bridge — recolors real Clay/monday foundation assets with foundation TOKEN colors and
+ * writes them as SVG files to src/assets/icons/ and src/assets/logos/.
+ *
+ * Sections generated (MJML references relative SVG paths, no base64):
+ *   - src/sections/logo-header/logo-header.mjml       (monday.com wordmark, light + dark)
+ *   - src/sections/icon-feature-list/icon-feature-list.mjml  (Clay icons, iris-brand recolored)
+ *   - src/sections/list-icon-items/list-icon-items.mjml      (Clay icons, iris-brand recolored)
+ *   - src/sections/header/header.mjml                        (product logo, light + dark)
+ *
+ * Asset files written:
+ *   src/assets/icons/   ← recolored Clay line icons (SVG, currentColor → brand #6161ff)
+ *   src/assets/logos/   ← monday wordmark + product logos (SVG, light + dark variants)
+ *   src/assets/*.png    ← raster image placeholders (committed separately, not touched here)
+ *
+ * Run via `pnpm --filter @clay-design-system/email build` (before compile step).
+ */
+export {};
+//# sourceMappingURL=build-email-assets.d.ts.map

package/dist/tokens/build-email-assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-email-assets.d.ts","sourceRoot":"","sources":["../../src/tokens/build-email-assets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG"}

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

@@ -0,0 +1,186 @@
+/**
+ * Email asset bridge — recolors real Clay/monday foundation assets with foundation TOKEN colors and
+ * writes them as SVG files to src/assets/icons/ and src/assets/logos/.
+ *
+ * Sections generated (MJML references relative SVG paths, no base64):
+ *   - src/sections/logo-header/logo-header.mjml       (monday.com wordmark, light + dark)
+ *   - src/sections/icon-feature-list/icon-feature-list.mjml  (Clay icons, iris-brand recolored)
+ *   - src/sections/list-icon-items/list-icon-items.mjml      (Clay icons, iris-brand recolored)
+ *   - src/sections/header/header.mjml                        (product logo, light + dark)
+ *
+ * Asset files written:
+ *   src/assets/icons/   ← recolored Clay line icons (SVG, currentColor → brand #6161ff)
+ *   src/assets/logos/   ← monday wordmark + product logos (SVG, light + dark variants)
+ *   src/assets/*.png    ← raster image placeholders (committed separately, not touched here)
+ *
+ * Run via `pnpm --filter @clay-design-system/email build` (before compile step).
+ */
+import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync } from 'node:fs';
+import { resolve, dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as tokens from '@clay-design-system/tokens';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const emailSrc = resolve(__dirname, '..');
+const reactSrc = resolve(emailSrc, '..', '..', 'react', 'src');
+const assetsIcons = resolve(emailSrc, 'assets', 'icons');
+const assetsLogos = resolve(emailSrc, 'assets', 'logos');
+const emailsDir = resolve(emailSrc, 'emails');
+mkdirSync(assetsIcons, { recursive: true });
+mkdirSync(assetsLogos, { recursive: true });
+// Foundation token colors — single source of truth for asset coloring.
+const onDark = tokens.ClayColorTextOnDark; // #ffffff (dark-mode text/logos)
+const brand = tokens.ClayColorBackgroundBrandDefault; // #6161ff (icons, iris)
+const BANNER = 'GENERATED by src/tokens/build-email-assets.ts — do not edit. Real DS assets recolored via foundation tokens.';
+// ── Helpers ──────────────────────────────────────────────────────────────────
+/**
+ * Recolor a Clay icon SVG (currentColor → color), write to assets/icons/<name>.svg,
+ * and return the relative src path for use in MJML.
+ */
+const writeIconSvg = (name, color) => {
+    const svg = readFileSync(resolve(reactSrc, 'icons', 'svg', `${name}.svg`), 'utf-8');
+    writeFileSync(resolve(assetsIcons, `${name}.svg`), svg.replace(/currentColor/g, color));
+    return `../../assets/icons/${name}.svg`;
+};
+/**
+ * Write a logo SVG to assets/logos/<filename> and return the relative src path.
+ */
+const writeLogoSvg = (content, filename) => {
+    writeFileSync(resolve(assetsLogos, filename), content);
+    return `../../assets/logos/${filename}`;
+};
+// ── monday.com wordmark ───────────────────────────────────────────────────────
+// Master logo: colored symbol (#00BA5F / #FB275D / #FFCC00) + grey-900 (#17181C) wordmark text.
+// Light variant = as-is. Dark variant = recolor wordmark text to white only.
+const wordmarkSrc = resolve(reactSrc, 'logos', 'products', 'monday-com', 'Layout=Master, Type Color=Black, Com=On.svg');
+const wordmark = readFileSync(wordmarkSrc, 'utf-8');
+const logoLightSrc = writeLogoSvg(wordmark, 'wordmark-light.svg');
+const logoDarkSrc = writeLogoSvg(wordmark.replace(/#17181[cC]/g, onDark), 'wordmark-dark.svg');
+const logoHeader = `<!-- ${BANNER} -->
+<mj-section padding="24px 40px">
+  <mj-column>
+    <mj-image css-class="ll" width="150px" align="center" padding="0" alt="monday.com" src="${logoLightSrc}" />
+    <mj-image css-class="dl" width="150px" align="center" padding="0" alt="monday.com" src="${logoDarkSrc}" />
+  </mj-column>
+</mj-section>
+`;
+writeFileSync(resolve(emailSrc, 'sections', 'logo-header', 'logo-header.mjml'), logoHeader);
+// ── icon-feature-list ─────────────────────────────────────────────────────────
+const featureRows = [
+    { icon: 'download-01', title: 'Extract key details', desc: 'Automatically pull important information from emails, documents, or updates into your boards.' },
+    { icon: 'file-02', title: 'Categorize effortlessly', desc: 'Let AI sort and label tasks based on urgency, sentiment, or topic.' },
+    { icon: 'align-left', title: 'Summarize updates', desc: 'Quickly get the gist of lengthy updates or threads without reading every detail.' },
+];
+const iconFeatureRow = (r) => {
+    const src = writeIconSvg(r.icon, brand);
+    return `  <mj-section padding="8px 40px">
+    <mj-column width="44px" vertical-align="top">
+      <mj-image src="${src}" width="24px" align="left" padding="0" alt="" />
+    </mj-column>
+    <mj-column vertical-align="top">
+      <mj-text mj-class="clay-h5" css-class="email-text">${r.title}</mj-text>
+      <mj-spacer height="4px" />
+      <mj-text mj-class="clay-p1" css-class="email-text">${r.desc}</mj-text>
+    </mj-column>
+  </mj-section>`;
+};
+const iconList = `<!-- ${BANNER} -->
+${featureRows.map(iconFeatureRow).join('\n')}
+`;
+writeFileSync(resolve(emailSrc, 'sections', 'icon-feature-list', 'icon-feature-list.mjml'), iconList);
+// ── list-icon-items ───────────────────────────────────────────────────────────
+const listRows = [
+    { icon: 'check-done-01', title: 'Stay on top of every task', desc: 'Assign owners, set due dates, and track status — all in one place, so nothing slips through.' },
+    { icon: 'users-01', title: 'Collaborate across teams', desc: 'Share boards with anyone, invite guests, and keep every stakeholder in the loop without extra tools.' },
+    { icon: 'lightning-01', title: 'Automate the repetitive stuff', desc: 'Build no-code workflows that move items, send alerts, and update fields the moment conditions are met.' },
+    { icon: 'eye', title: 'Get full visibility in real time', desc: 'Dashboards and live reports surface blockers and progress instantly, so you can act before things stall.' },
+];
+const iconListRow = (r, i) => {
+    const src = writeIconSvg(r.icon, brand);
+    return `  <mj-section padding="${i === 0 ? '0' : '20px 0 0'}">
+    <mj-group width="100%">
+      <mj-column width="7.857143%" vertical-align="top" padding="0">
+        <mj-image src="${src}" width="24px" align="left" padding="0" alt="" />
+      </mj-column>
+      <mj-column width="92.142857%" vertical-align="top" padding-left="8px">
+        <mj-text mj-class="clay-p2" css-class="email-text" color="#000000"><span style="font-weight:600;">${r.title}</span><br /><span>${r.desc}</span></mj-text>
+      </mj-column>
+    </mj-group>
+  </mj-section>`;
+};
+const listIconItemsMjml = `<!-- ${BANNER} -->
+<!-- list-icon-items — DS icon per row (brand-recolored SVG) aligned top with title + description.
+     mj-group keeps icon + text inline at ALL viewport sizes (no stacking).
+     Mobile: H-padding → 24px (email-mobile-px-24 on wrapper). -->
+<mj-wrapper padding="24px 40px" background-color="#ffffff" css-class="email-card email-mobile-px-24">
+${listRows.map(iconListRow).join('\n')}
+</mj-wrapper>
+`;
+mkdirSync(resolve(emailSrc, 'sections', 'list-icon-items'), { recursive: true });
+writeFileSync(resolve(emailSrc, 'sections', 'list-icon-items', 'list-icon-items.mjml'), listIconItemsMjml);
+const HEADER_LOGO = {
+    dir: 'monday-com',
+    alt: 'monday.com',
+    width: '178px',
+    lightFile: 'Layout=Master, Type Color=Black, Com=On.svg',
+    darkFile: 'Layout=Master, Type Color=White, Com=On.svg',
+};
+const writeProductLogo = (dir, file, outName) => writeLogoSvg(readFileSync(resolve(reactSrc, 'logos', 'products', dir, file), 'utf-8'), outName);
+const hlLightSrc = writeProductLogo(HEADER_LOGO.dir, HEADER_LOGO.lightFile, 'product-logo-light.svg');
+const hlDarkSrc = writeProductLogo(HEADER_LOGO.dir, HEADER_LOGO.darkFile, 'product-logo-dark.svg');
+const headerMjml = `<!-- ${BANNER} -->
+<!-- header: one monday product logo, centered. Light: "Type Color=Black" (.ll class).
+     Dark: "Type Color=White" (.dl class, via @media prefers-color-scheme:dark).
+     To swap product: edit HEADER_LOGO in build-email-assets.ts and rebuild. -->
+<mj-section padding="24px 40px" css-class="email-mobile-px-24">
+  <mj-column>
+    <mj-image css-class="ll" alt="${HEADER_LOGO.alt}" width="${HEADER_LOGO.width}" align="center" padding="0" src="${hlLightSrc}" />
+    <mj-image css-class="dl" alt="${HEADER_LOGO.alt}" width="${HEADER_LOGO.width}" align="center" padding="0" src="${hlDarkSrc}" />
+  </mj-column>
+</mj-section>
+`;
+mkdirSync(resolve(emailSrc, 'sections', 'header'), { recursive: true });
+writeFileSync(resolve(emailSrc, 'sections', 'header', 'header.mjml'), headerMjml);
+// ── icons referenced by real composed emails ──────────────────────────────────
+// The three generators above only ever write the icons baked into their OWN default example
+// content. Any icon a real composed email under src/emails/ actually picks — a different one, per
+// campaign — was never copied/recolored here, so compile.ts's inlineAssetsInHtml found no file at
+// the resolved path and silently left the raw relative src in the shipped HTML (a real, already-
+// shipped bug — confirmed in hr-agent-activation/tp1b-scheduling-library, which references
+// search-lg/calendar-check-02/user-check-01, none of which existed in assets/icons/ before this).
+// src/emails/ is gitignored local-only output, so this scan is a no-op on a fresh clone until
+// someone composes an email — that's correct, there's nothing to generate yet.
+function findMjmlFiles(dir) {
+    if (!existsSync(dir))
+        return [];
+    const out = [];
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const full = join(dir, entry.name);
+        if (entry.isDirectory())
+            out.push(...findMjmlFiles(full));
+        else if (entry.name.endsWith('.mjml'))
+            out.push(full);
+    }
+    return out;
+}
+const referencedIconNames = new Set();
+for (const file of findMjmlFiles(emailsDir)) {
+    const content = readFileSync(file, 'utf-8');
+    for (const match of content.matchAll(/assets\/icons\/([a-zA-Z0-9_-]+)\.svg/g)) {
+        referencedIconNames.add(match[1]);
+    }
+}
+let missingIcons = 0;
+for (const name of referencedIconNames) {
+    const svgSrc = resolve(reactSrc, 'icons', 'svg', `${name}.svg`);
+    if (!existsSync(svgSrc)) {
+        console.warn(`@clay-design-system/email: ⚠ icon "${name}" referenced by a composed email does not exist in the Clay icon registry (packages/react/src/icons/svg/) — its <mj-image> will stay broken until the name is fixed`);
+        missingIcons++;
+        continue;
+    }
+    writeIconSvg(name, brand);
+}
+if (referencedIconNames.size > 0) {
+    console.log(`@clay-design-system/email: ${referencedIconNames.size - missingIcons}/${referencedIconNames.size} composed-email icon(s) recolored from the Clay registry`);
+}
+console.log('@clay-design-system/email: SVG assets written to src/assets/icons/ + src/assets/logos/ (no base64)');
+//# sourceMappingURL=build-email-assets.js.map

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

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

package/dist/tokens/build-email-tokens.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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).
+ */
+export {};
+//# sourceMappingURL=build-email-tokens.d.ts.map

package/dist/tokens/build-email-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-email-tokens.d.ts","sourceRoot":"","sources":["../../src/tokens/build-email-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG"}