@clay-design-system/电子邮件

这个 生命周期/ 电子邮件 clay 设计系统的级别——响应,Outlook-sefect HTML电子邮件 作者于 MJML 战时 由共同的克莱基金会标志物组成.

为什么 MJML + 内嵌符

电子邮件客户端(特别是Outlook) 没有 支持 CSS 自定义属性( C)var(--clay-*)) (中文(简体) ). 所以这个 包件从不载运 var() ——取而代之的建设步骤读取已解决的字面符号值来自: @clay-design-system/tokens (单位:千美元) dist/tokens.js 出口)和 内嵌 他们进入MJML 在建设时间.

@clay-design-system/tokens (JS literals)
   ↓  src/tokens/build-email-tokens.ts   (generates)
src/generated/base-head.mjml   ← <mj-head>: fonts, mj-class roles, dark-mode
src/generated/email-tokens.ts  ← inline-able constants + px() helper
   ↓  MJML sections + container
src/build/compile.ts  (mjml2html)
   ↓
dist/emails/<name>.html         ← standalone, previewable
dist/emails/<name>.braze.html   ← Braze full-template variant (unsubscribe token)
dist/emails/<name>.static.html  ← hand-authored fallback (no MJML)
dist/catalog.json               ← Storybook + docs source

结构

• src/container/ 共享的电子邮件外壳(page bg ~ 640px卡 ~ 560px 内部,预发页, 响应 + 暗/光)。 每封邮件都会重用.
• src/sections/ —— MJML 部分(log-header,英雄,特征集,图标-feature-list, 按钮主页脚.
• src/emails/ ——完整的电子邮件组成(容器+部分)外加静态-HTML倒置. 吉特尼奥德/ 仅限本地 : 每封邮件都是一代人 所以放在机器上 这使得它和贡献者 从来没有看到对方的运动。 构造将此文件夹模糊于 编译时间,从而产生它的工作没有改变——它根本不是承诺的。 一个新的克隆 在此开始为空; src/examples/ 持有承诺的Email Love – Braze参考出口.
• src/tokens/ - 代号 - 电子邮件桥码源.
• src/build/ ——MJML编译+Braze变换+目录.

脚本

pnpm --filter @clay-design-system/email build          # tokens bridge → tsc → compile MJML
pnpm --filter @clay-design-system/email dev            # watch + recompile MJML
pnpm --filter @clay-design-system/email tokens:check   # fail if generated token artifacts drift
pnpm --filter @clay-design-system/email test           # vitest

什么Npm包装船

只有公众表面: dist/index.js + 类型(内含符号常数), @clay-design-system/email/catalog.json, (中文(简体) ), …/emails/* (已编译 HTML, Braze和静态变种. 原始地图, dist/build, (中文(简体) ), dist/examples 财务报告和审定财务报表 dist/exports ( " 布雷兹 " 运动的出口与 图像, ~ 11 MB) 保留在 repo 中: 它们是构建输出, 无法通过 exports 地图. package.json files 是一个 plainlist,所以新的构建输出在添加到那里之前不会被发布.

在故事书下记录 生命周期/电子邮件/。 。 。 .