npm - @duro-app/ui-email - Versions diffs - 4.5.0 → 5.0.0 - Mend

@duro-app/ui-email 4.5.0 → 5.0.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.

Files changed (6) hide show

package/dist/components.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;~~AAkB9B~~;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAkC5F;AAED,wBAAgB,OAAO,CAAC,EAAC,EAAS,EAAE,QAAQ,EAAC,EAAE;IAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAgB3F;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAErD,wBAAgB,IAAI,CAAC,EACnB,OAAgB,EAChB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAgBA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,KAAgB,GACjB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,2CAqBA;AAED,wBAAgB,EAAE,4CAEjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IAGZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAUA;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAEA"}
1	+ {"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAkC5F;AAED,wBAAgB,OAAO,CAAC,EAAC,EAAS,EAAE,QAAQ,EAAC,EAAE;IAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAgB3F;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAErD,wBAAgB,IAAI,CAAC,EACnB,OAAgB,EAChB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAgBA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,KAAgB,GACjB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,2CAqBA;AAED,wBAAgB,EAAE,4CAEjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IAGZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAUA;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAEA"}

package/dist/index.js CHANGED Viewed

@@ -1,35 +1,35 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { Section as g, Button as p, Html as $, Head as h, Preview as b, Body as k, Container as y, Heading as f, Hr as S, Link as H, Text as z } from "@react-email/components";
-import { Img as P, Preview as U, Link as _ } from "@react-email/components";
-import { darkColors as M, lightColors as C } from "@duro-app/tokens/raw";
-const a = {
-  xs: "4px",
-  sm: "8px",
-  ms: "12px",
-  md: "16px",
-  lg: "24px",
-  xl: "32px",
-  xxl: "48px",
-  xxxl: "64px"
-}, x = {
-  sm: "8px",
-  md: "12px",
-  lg: "16px"
-}, i = {
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { Section as b, Button as k, Html as S, Head as y, Preview as z, Body as M, Container as H, Heading as C, Hr as B, Link as L, Text as N } from "@react-email/components";
+import { Img as v, Preview as J, Link as K } from "@react-email/components";
+import { SPACING_PX as s, RADII_PX as g, FONT_SIZE_REM as c, darkColors as X, lightColors as w, EMAIL_PX as P, BORDERS_PX as R } from "@duro-app/tokens/raw";
+const i = (t) => `${t}px`, _ = 16, m = (t) => i(t * _), d = {
+  xs: i(s.xs),
+  sm: i(s.sm),
+  ms: i(s.ms),
+  md: i(s.md),
+  lg: i(s.lg),
+  xl: i(s.xl),
+  xxl: i(s.xxl),
+  xxxl: i(s.xxxl)
+}, p = {
+  sm: i(g.sm),
+  md: i(g.md),
+  lg: i(g.lg)
+}, a = {
   family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',
-  // rem → px (1rem = 16px): xs .75 / sm .875 / md 1 / lg 1.125 / xl 1.25 / heading 1.5
-  sizeXs: "12px",
-  sizeSm: "14px",
-  sizeMd: "16px",
-  sizeLg: "18px",
-  sizeXl: "20px",
-  sizeHeading: "24px",
+  // FONT_SIZE_REM resolved against the fixed REM_PX root.
+  sizeXs: m(c.fontSizeXs),
+  sizeSm: m(c.fontSizeSm),
+  sizeMd: m(c.fontSizeMd),
+  sizeLg: m(c.fontSizeLg),
+  sizeXl: m(c.fontSizeXl),
+  sizeHeading: m(c.fontSizeHeading),
   weightNormal: 400,
   weightMedium: 500,
   weightSemibold: 600,
   weightBold: 700,
   lineHeight: 1.5
-}, c = (t) => ({
+}, $ = (t) => ({
   bg: t.bg,
   card: t.bgCard,
   cardBorder: t.border,
@@ -39,9 +39,9 @@ const a = {
   accent: t.accent,
   accentText: t.accentContrast,
   border: t.border
-}), u = {
-  light: c(C),
-  dark: c(M)
+}), f = {
+  light: $(w),
+  dark: $(X)
 }, n = {
   body: "d-body",
   card: "d-card",
@@ -51,8 +51,8 @@ const a = {
   button: "d-btn",
   hr: "d-hr",
   link: "d-link"
-}, m = (t) => {
-  const e = u.dark, o = t ? `${t} ` : "";
+}, h = (t) => {
+  const e = f.dark, o = t ? `${t} ` : "";
   return [
     `${o}.${n.body} { background-color: ${e.bg} !important; }`,
     `${o}.${n.card} { background-color: ${e.card} !important; border-color: ${e.cardBorder} !important; }`,
@@ -63,43 +63,43 @@ const a = {
     `${o}.${n.hr} { border-color: ${e.border} !important; }`,
     `${o}.${n.link} { color: ${e.accent} !important; }`
   ];
-}, B = [
+}, I = [
   "@media (prefers-color-scheme: dark) {",
-  ...m("").map((t) => "  " + t),
+  ...h("").map((t) => "  " + t),
   "}",
   "/* Outlook.com / Outlook mobile dark mode */",
-  ...m("[data-ogsc]")
+  ...h("[data-ogsc]")
 ].join(`
-`), d = u.light;
-function T({ preview: t, children: e }) {
-  return /* @__PURE__ */ s($, { lang: "en", children: [
-    /* @__PURE__ */ s(h, { children: [
+`), l = f.light;
+function A({ preview: t, children: e }) {
+  return /* @__PURE__ */ u(S, { lang: "en", children: [
+    /* @__PURE__ */ u(y, { children: [
       /* @__PURE__ */ r("meta", { name: "color-scheme", content: "light dark" }),
       /* @__PURE__ */ r("meta", { name: "supported-color-schemes", content: "light dark" }),
-      /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: B } })
+      /* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: I } })
     ] }),
-    t ? /* @__PURE__ */ r(b, { children: t }) : null,
+    t ? /* @__PURE__ */ r(z, { children: t }) : null,
     /* @__PURE__ */ r(
-      k,
+      M,
       {
         className: n.body,
         style: {
-          backgroundColor: d.bg,
-          fontFamily: i.family,
+          backgroundColor: l.bg,
+          fontFamily: a.family,
           margin: 0,
-          padding: `${a.xl} 0`
+          padding: `${d.xl} 0`
         },
         children: /* @__PURE__ */ r(
-          y,
+          H,
           {
             className: n.card,
             style: {
-              backgroundColor: d.card,
-              border: `1px solid ${d.cardBorder}`,
-              borderRadius: x.md,
+              backgroundColor: l.card,
+              border: `${R.hairline}px solid ${l.cardBorder}`,
+              borderRadius: p.md,
               margin: "0 auto",
-              maxWidth: "520px",
-              padding: a.xl
+              maxWidth: `${P.emailCardW}px`,
+              padding: d.xl
             },
             children: e
           }
@@ -108,108 +108,108 @@ function T({ preview: t, children: e }) {
     )
   ] });
 }
-function R({ as: t = "h1", children: e }) {
+function D({ as: t = "h1", children: e }) {
   const o = t === "h1";
   return /* @__PURE__ */ r(
-    f,
+    C,
     {
       as: t,
       className: n.heading,
       style: {
-        color: d.heading,
-        fontSize: o ? i.sizeHeading : i.sizeMd,
-        fontWeight: o ? i.weightBold : i.weightSemibold,
-        margin: o ? `0 0 ${a.md}` : `0 0 ${a.sm}`
+        color: l.heading,
+        fontSize: o ? a.sizeHeading : a.sizeMd,
+        fontWeight: o ? a.weightBold : a.weightSemibold,
+        margin: o ? `0 0 ${d.md}` : `0 0 ${d.sm}`
       },
       children: e
     }
   );
 }
-function j({
+function W({
   variant: t = "body",
   children: e,
   style: o
 }) {
-  const l = t !== "body";
+  const x = t !== "body";
   return /* @__PURE__ */ r(
-    z,
+    N,
     {
-      className: l ? n.textMuted : n.text,
+      className: x ? n.textMuted : n.text,
       style: {
-        color: l ? d.textMuted : d.text,
-        fontSize: t === "footer" ? i.sizeXs : i.sizeSm,
-        lineHeight: i.lineHeight,
-        margin: `0 0 ${a.ms}`,
+        color: x ? l.textMuted : l.text,
+        fontSize: t === "footer" ? a.sizeXs : a.sizeSm,
+        lineHeight: a.lineHeight,
+        margin: `0 0 ${d.ms}`,
         ...o
       },
       children: e
     }
   );
 }
-function I({
+function j({
   href: t,
   children: e,
   align: o = "center"
 }) {
-  return /* @__PURE__ */ r(g, { style: { textAlign: o, margin: `${a.xl} 0` }, children: /* @__PURE__ */ r(
-    p,
+  return /* @__PURE__ */ r(b, { style: { textAlign: o, margin: `${d.xl} 0` }, children: /* @__PURE__ */ r(
+    k,
     {
       href: t,
       className: n.button,
       style: {
-        backgroundColor: d.accent,
-        color: d.accentText,
-        borderRadius: x.sm,
+        backgroundColor: l.accent,
+        color: l.accentText,
+        borderRadius: p.sm,
         display: "inline-block",
-        fontSize: i.sizeSm,
-        fontWeight: i.weightSemibold,
-        padding: `${a.ms} ${a.xl}`,
+        fontSize: a.sizeSm,
+        fontWeight: a.weightSemibold,
+        padding: `${d.ms} ${d.xl}`,
         textDecoration: "none"
       },
       children: e
     }
   ) });
 }
-function O() {
-  return /* @__PURE__ */ r(S, { className: n.hr, style: { borderColor: d.border, margin: `${a.lg} 0` } });
+function F() {
+  return /* @__PURE__ */ r(B, { className: n.hr, style: { borderColor: l.border, margin: `${d.lg} 0` } });
 }
-function W({
+function U({
   href: t,
   children: e,
   style: o
 }) {
   return /* @__PURE__ */ r(
-    H,
+    L,
     {
       href: t,
       className: n.link,
-      style: { color: d.accent, textDecoration: "underline", ...o },
+      style: { color: l.accent, textDecoration: "underline", ...o },
       children: e
     }
   );
 }
-function X({
+function G({
   children: t,
   style: e
 }) {
-  return /* @__PURE__ */ r(g, { style: { margin: `${a.lg} 0`, ...e }, children: t });
+  return /* @__PURE__ */ r(b, { style: { margin: `${d.lg} 0`, ...e }, children: t });
 }
 export {
-  I as Button,
-  T as EmailShell,
-  R as Heading,
-  O as Hr,
-  P as Img,
-  W as Link,
-  U as Preview,
-  _ as RawLink,
-  X as Section,
-  j as Text,
+  j as Button,
+  A as EmailShell,
+  D as Heading,
+  F as Hr,
+  v as Img,
+  U as Link,
+  J as Preview,
+  K as RawLink,
+  G as Section,
+  W as Text,
   n as cls,
-  B as darkModeCss,
-  i as font,
-  u as palette,
-  x as radius,
-  a as space
+  I as darkModeCss,
+  a as font,
+  f as palette,
+  p as radius,
+  d as space
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/theme.ts","../src/components.tsx"],"sourcesContent":["import {darkColors, lightColors, type RawColors} from '@duro-app/tokens/raw'\n\n// ---------------------------------------------------------------------------\n// Spacing / radius / type\n//\n// Email needs literal px values (clients reset the root font-size, so rem is\n// unsafe) and table-friendly units. These mirror @duro-app/tokens (spacing /\n// type scale) converted to px. Colours, by contrast, are imported live from\n// the tokens package below so the brand palette can never drift.\n// ---------------------------------------------------------------------------\n\nexport const space = {\n xs: '4px',\n sm: '8px',\n ms: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n} as const\n\nexport const radius = {\n sm: '8px',\n md: '12px',\n lg: '16px',\n} as const\n\nexport const font = {\n family:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n // rem → px (1rem = 16px): xs .75 / sm .875 / md 1 / lg 1.125 / xl 1.25 / heading 1.5\n sizeXs: '12px',\n sizeSm: '14px',\n sizeMd: '16px',\n sizeLg: '18px',\n sizeXl: '20px',\n sizeHeading: '24px',\n weightNormal: 400,\n weightMedium: 500,\n weightSemibold: 600,\n weightBold: 700,\n lineHeight: 1.5,\n} as const\n\n// ---------------------------------------------------------------------------\n// Semantic colour roles, derived from the shared token palettes\n// ---------------------------------------------------------------------------\n\nexport interface EmailRoles {\n bg: string\n card: string\n cardBorder: string\n text: string\n textMuted: string\n heading: string\n accent: string\n accentText: string\n border: string\n}\n\nconst roles = (c: RawColors): EmailRoles => ({\n bg: c.bg,\n card: c.bgCard,\n cardBorder: c.border,\n text: c.text,\n textMuted: c.textMuted,\n heading: c.text,\n accent: c.accent,\n accentText: c.accentContrast,\n border: c.border,\n})\n\nexport const palette = {\n light: roles(lightColors),\n dark: roles(darkColors),\n} as const\n\n// ---------------------------------------------------------------------------\n// Dark-mode mechanism\n//\n// Stable classNames that the dark <style> block targets. Inline (light) styles\n// are the base; the @media (prefers-color-scheme: dark) rules override them.\n// NB: inline styles beat <style> rules, so every override MUST use !important.\n// Honoured by Apple Mail (iOS/macOS); Gmail/Outlook apply their own dark\n// transform regardless; every other client falls back to the light base.\n// ---------------------------------------------------------------------------\n\nexport const cls = {\n body: 'd-body',\n card: 'd-card',\n text: 'd-text',\n textMuted: 'd-text-muted',\n heading: 'd-heading',\n button: 'd-btn',\n hr: 'd-hr',\n link: 'd-link',\n} as const\n\nconst ruleLines = (prefix: string): string[] => {\n const d = palette.dark\n const p = prefix ? `${prefix} ` : ''\n return [\n `${p}.${cls.body} { background-color: ${d.bg} !important; }`,\n `${p}.${cls.card} { background-color: ${d.card} !important; border-color: ${d.cardBorder} !important; }`,\n `${p}.${cls.text} { color: ${d.text} !important; }`,\n `${p}.${cls.textMuted} { color: ${d.textMuted} !important; }`,\n `${p}.${cls.heading} { color: ${d.heading} !important; }`,\n `${p}.${cls.button} { background-color: ${d.accent} !important; color: ${d.accentText} !important; }`,\n `${p}.${cls.hr} { border-color: ${d.border} !important; }`,\n `${p}.${cls.link} { color: ${d.accent} !important; }`,\n ]\n}\n\nexport const darkModeCss = [\n '@media (prefers-color-scheme: dark) {',\n ...ruleLines('').map((l) => ' ' + l),\n '}',\n '/* Outlook.com / Outlook mobile dark mode /',\n ...ruleLines('[data-ogsc]'),\n].join('\\n')\n","import as React from 'react'\nimport {\n Html,\n Head,\n Body,\n Container,\n Section as RESection,\n Heading as REHeading,\n Text as REText,\n Button as REButton,\n Hr as REHr,\n Link as RELink,\n Preview,\n} from '@react-email/components'\nimport {palette, space, radius, font, cls, darkModeCss} from './theme'\n\nconst L = palette.light\n\n/*\n Root wrapper: <Html><Head> (color-scheme meta + the prefers-color-scheme\n * dark <style>) + a themed card <Body>/<Container>. Compose the rest of the\n * email inside it with the other primitives.\n */\nexport function EmailShell({preview, children}: {preview?: string; children: React.ReactNode}) {\n return (\n <Html lang=\"en\">\n <Head>\n <meta name=\"color-scheme\" content=\"light dark\" />\n <meta name=\"supported-color-schemes\" content=\"light dark\" />\n <style dangerouslySetInnerHTML={{__html: darkModeCss}} />\n </Head>\n {preview ? <Preview>{preview}</Preview> : null}\n <Body\n className={cls.body}\n style={{\n backgroundColor: L.bg,\n fontFamily: font.family,\n margin: 0,\n padding: `${space.xl} 0`,\n }}\n >\n <Container\n className={cls.card}\n style={{\n backgroundColor: L.card,\n border: `1px solid ${L.cardBorder}`,\n borderRadius: radius.md,\n margin: '0 auto',\n maxWidth: '520px',\n padding: space.xl,\n }}\n >\n {children}\n </Container>\n </Body>\n </Html>\n )\n}\n\nexport function Heading({as = 'h1', children}: {as?: 'h1' \| 'h2'; children: React.ReactNode}) {\n const isH1 = as === 'h1'\n return (\n <REHeading\n as={as}\n className={cls.heading}\n style={{\n color: L.heading,\n fontSize: isH1 ? font.sizeHeading : font.sizeMd,\n fontWeight: isH1 ? font.weightBold : font.weightSemibold,\n margin: isH1 ? `0 0 ${space.md}` : `0 0 ${space.sm}`,\n }}\n >\n {children}\n </REHeading>\n )\n}\n\nexport type TextVariant = 'body' \| 'small' \| 'footer'\n\nexport function Text({\n variant = 'body',\n children,\n style,\n}: {\n variant?: TextVariant\n children: React.ReactNode\n style?: React.CSSProperties\n}) {\n const muted = variant !== 'body'\n return (\n <REText\n className={muted ? cls.textMuted : cls.text}\n style={{\n color: muted ? L.textMuted : L.text,\n fontSize: variant === 'footer' ? font.sizeXs : font.sizeSm,\n lineHeight: font.lineHeight,\n margin: `0 0 ${space.ms}`,\n ...style,\n }}\n >\n {children}\n </REText>\n )\n}\n\nexport function Button({\n href,\n children,\n align = 'center',\n}: {\n href: string\n children: React.ReactNode\n align?: 'left' \| 'center' \| 'right'\n}) {\n return (\n <RESection style={{textAlign: align, margin: `${space.xl} 0`}}>\n <REButton\n href={href}\n className={cls.button}\n style={{\n backgroundColor: L.accent,\n color: L.accentText,\n borderRadius: radius.sm,\n display: 'inline-block',\n fontSize: font.sizeSm,\n fontWeight: font.weightSemibold,\n padding: `${space.ms} ${space.xl}`,\n textDecoration: 'none',\n }}\n >\n {children}\n </REButton>\n </RESection>\n )\n}\n\nexport function Hr() {\n return <REHr className={cls.hr} style={{borderColor: L.border, margin: `${space.lg} 0`}} />\n}\n\nexport function Link({\n href,\n children,\n style,\n}: {\n href: string\n // Optional: react-i18next <Trans> injects the link text via cloneElement,\n // so the element is declared without children (components={{ a: <Link href /> }}).\n children?: React.ReactNode\n style?: React.CSSProperties\n}) {\n return (\n <RELink\n href={href}\n className={cls.link}\n style={{color: L.accent, textDecoration: 'underline', ...style}}\n >\n {children}\n </RELink>\n )\n}\n\nexport function Section({\n children,\n style,\n}: {\n children: React.ReactNode\n style?: React.CSSProperties\n}) {\n return <RESection style={{margin: `${space.lg} 0`, ...style}}>{children}</RESection>\n}\n"],"names":["space","radius","font","roles","c","palette","lightColors","darkColors","cls","ruleLines","prefix","d","p","darkModeCss","l","L","EmailShell","preview","children","jsxs","Html","Head","jsx","Preview","Body","Container","Heading","as","isH1","REHeading","Text","variant","style","muted","REText","Button","href","align","RESection","REButton","Hr","REHr","Link","RELink","Section"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/theme.ts","../src/components.tsx"],"sourcesContent":["import {\n darkColors,\n FONT_SIZE_REM,\n lightColors,\n RADII_PX,\n SPACING_PX,\n type RawColors,\n} from '@duro-app/tokens/raw'\n\n// ---------------------------------------------------------------------------\n// Spacing / radius / type\n//\n// Email needs literal px values (clients reset the root font-size, so rem is\n// unsafe, and they cannot read CSS variables) and table-friendly units. Every\n// value below is computed from the @duro-app/tokens raw maps, so a measure\n// still comes from its token (ADR-0027); only the unit is resolved here.\n// ---------------------------------------------------------------------------\n\nconst px = <N extends number>(n: N) => `${n}px` as `${N}px`\n\n// Type sizes are rem tokens; email resolves them against a fixed root size.\nconst REM_PX = 16\nconst remPx = (rem: number) => px(rem * REM_PX)\n\nexport const space = {\n xs: px(SPACING_PX.xs),\n sm: px(SPACING_PX.sm),\n ms: px(SPACING_PX.ms),\n md: px(SPACING_PX.md),\n lg: px(SPACING_PX.lg),\n xl: px(SPACING_PX.xl),\n xxl: px(SPACING_PX.xxl),\n xxxl: px(SPACING_PX.xxxl),\n} as const\n\nexport const radius = {\n sm: px(RADII_PX.sm),\n md: px(RADII_PX.md),\n lg: px(RADII_PX.lg),\n} as const\n\nexport const font = {\n family:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n // FONT_SIZE_REM resolved against the fixed REM_PX root.\n sizeXs: remPx(FONT_SIZE_REM.fontSizeXs),\n sizeSm: remPx(FONT_SIZE_REM.fontSizeSm),\n sizeMd: remPx(FONT_SIZE_REM.fontSizeMd),\n sizeLg: remPx(FONT_SIZE_REM.fontSizeLg),\n sizeXl: remPx(FONT_SIZE_REM.fontSizeXl),\n sizeHeading: remPx(FONT_SIZE_REM.fontSizeHeading),\n weightNormal: 400,\n weightMedium: 500,\n weightSemibold: 600,\n weightBold: 700,\n lineHeight: 1.5,\n} as const\n\n// ---------------------------------------------------------------------------\n// Semantic colour roles, derived from the shared token palettes\n// ---------------------------------------------------------------------------\n\nexport interface EmailRoles {\n bg: string\n card: string\n cardBorder: string\n text: string\n textMuted: string\n heading: string\n accent: string\n accentText: string\n border: string\n}\n\nconst roles = (c: RawColors): EmailRoles => ({\n bg: c.bg,\n card: c.bgCard,\n cardBorder: c.border,\n text: c.text,\n textMuted: c.textMuted,\n heading: c.text,\n accent: c.accent,\n accentText: c.accentContrast,\n border: c.border,\n})\n\nexport const palette = {\n light: roles(lightColors),\n dark: roles(darkColors),\n} as const\n\n// ---------------------------------------------------------------------------\n// Dark-mode mechanism\n//\n// Stable classNames that the dark <style> block targets. Inline (light) styles\n// are the base; the @media (prefers-color-scheme: dark) rules override them.\n// NB: inline styles beat <style> rules, so every override MUST use !important.\n// Honoured by Apple Mail (iOS/macOS); Gmail/Outlook apply their own dark\n// transform regardless; every other client falls back to the light base.\n// ---------------------------------------------------------------------------\n\nexport const cls = {\n body: 'd-body',\n card: 'd-card',\n text: 'd-text',\n textMuted: 'd-text-muted',\n heading: 'd-heading',\n button: 'd-btn',\n hr: 'd-hr',\n link: 'd-link',\n} as const\n\nconst ruleLines = (prefix: string): string[] => {\n const d = palette.dark\n const p = prefix ? `${prefix} ` : ''\n return [\n `${p}.${cls.body} { background-color: ${d.bg} !important; }`,\n `${p}.${cls.card} { background-color: ${d.card} !important; border-color: ${d.cardBorder} !important; }`,\n `${p}.${cls.text} { color: ${d.text} !important; }`,\n `${p}.${cls.textMuted} { color: ${d.textMuted} !important; }`,\n `${p}.${cls.heading} { color: ${d.heading} !important; }`,\n `${p}.${cls.button} { background-color: ${d.accent} !important; color: ${d.accentText} !important; }`,\n `${p}.${cls.hr} { border-color: ${d.border} !important; }`,\n `${p}.${cls.link} { color: ${d.accent} !important; }`,\n ]\n}\n\nexport const darkModeCss = [\n '@media (prefers-color-scheme: dark) {',\n ...ruleLines('').map((l) => ' ' + l),\n '}',\n '/* Outlook.com / Outlook mobile dark mode /',\n ...ruleLines('[data-ogsc]'),\n].join('\\n')\n","import as React from 'react'\nimport {\n Html,\n Head,\n Body,\n Container,\n Section as RESection,\n Heading as REHeading,\n Text as REText,\n Button as REButton,\n Hr as REHr,\n Link as RELink,\n Preview,\n} from '@react-email/components'\nimport {BORDERS_PX, EMAIL_PX} from '@duro-app/tokens/raw'\nimport {palette, space, radius, font, cls, darkModeCss} from './theme'\n\nconst L = palette.light\n\n/*\n Root wrapper: <Html><Head> (color-scheme meta + the prefers-color-scheme\n * dark <style>) + a themed card <Body>/<Container>. Compose the rest of the\n * email inside it with the other primitives.\n */\nexport function EmailShell({preview, children}: {preview?: string; children: React.ReactNode}) {\n return (\n <Html lang=\"en\">\n <Head>\n <meta name=\"color-scheme\" content=\"light dark\" />\n <meta name=\"supported-color-schemes\" content=\"light dark\" />\n <style dangerouslySetInnerHTML={{__html: darkModeCss}} />\n </Head>\n {preview ? <Preview>{preview}</Preview> : null}\n <Body\n className={cls.body}\n style={{\n backgroundColor: L.bg,\n fontFamily: font.family,\n margin: 0,\n padding: `${space.xl} 0`,\n }}\n >\n <Container\n className={cls.card}\n style={{\n backgroundColor: L.card,\n border: `${BORDERS_PX.hairline}px solid ${L.cardBorder}`,\n borderRadius: radius.md,\n margin: '0 auto',\n maxWidth: `${EMAIL_PX.emailCardW}px`,\n padding: space.xl,\n }}\n >\n {children}\n </Container>\n </Body>\n </Html>\n )\n}\n\nexport function Heading({as = 'h1', children}: {as?: 'h1' \| 'h2'; children: React.ReactNode}) {\n const isH1 = as === 'h1'\n return (\n <REHeading\n as={as}\n className={cls.heading}\n style={{\n color: L.heading,\n fontSize: isH1 ? font.sizeHeading : font.sizeMd,\n fontWeight: isH1 ? font.weightBold : font.weightSemibold,\n margin: isH1 ? `0 0 ${space.md}` : `0 0 ${space.sm}`,\n }}\n >\n {children}\n </REHeading>\n )\n}\n\nexport type TextVariant = 'body' \| 'small' \| 'footer'\n\nexport function Text({\n variant = 'body',\n children,\n style,\n}: {\n variant?: TextVariant\n children: React.ReactNode\n style?: React.CSSProperties\n}) {\n const muted = variant !== 'body'\n return (\n <REText\n className={muted ? cls.textMuted : cls.text}\n style={{\n color: muted ? L.textMuted : L.text,\n fontSize: variant === 'footer' ? font.sizeXs : font.sizeSm,\n lineHeight: font.lineHeight,\n margin: `0 0 ${space.ms}`,\n ...style,\n }}\n >\n {children}\n </REText>\n )\n}\n\nexport function Button({\n href,\n children,\n align = 'center',\n}: {\n href: string\n children: React.ReactNode\n align?: 'left' \| 'center' \| 'right'\n}) {\n return (\n <RESection style={{textAlign: align, margin: `${space.xl} 0`}}>\n <REButton\n href={href}\n className={cls.button}\n style={{\n backgroundColor: L.accent,\n color: L.accentText,\n borderRadius: radius.sm,\n display: 'inline-block',\n fontSize: font.sizeSm,\n fontWeight: font.weightSemibold,\n padding: `${space.ms} ${space.xl}`,\n textDecoration: 'none',\n }}\n >\n {children}\n </REButton>\n </RESection>\n )\n}\n\nexport function Hr() {\n return <REHr className={cls.hr} style={{borderColor: L.border, margin: `${space.lg} 0`}} />\n}\n\nexport function Link({\n href,\n children,\n style,\n}: {\n href: string\n // Optional: react-i18next <Trans> injects the link text via cloneElement,\n // so the element is declared without children (components={{ a: <Link href /> }}).\n children?: React.ReactNode\n style?: React.CSSProperties\n}) {\n return (\n <RELink\n href={href}\n className={cls.link}\n style={{color: L.accent, textDecoration: 'underline', ...style}}\n >\n {children}\n </RELink>\n )\n}\n\nexport function Section({\n children,\n style,\n}: {\n children: React.ReactNode\n style?: React.CSSProperties\n}) {\n return <RESection style={{margin: `${space.lg} 0`, ...style}}>{children}</RESection>\n}\n"],"names":["px","n","REM_PX","remPx","rem","space","SPACING_PX","radius","RADII_PX","font","FONT_SIZE_REM","roles","c","palette","lightColors","darkColors","cls","ruleLines","prefix","d","p","darkModeCss","l","L","EmailShell","preview","children","jsxs","Html","Head","jsx","Preview","Body","Container","BORDERS_PX","EMAIL_PX","Heading","as","isH1","REHeading","Text","variant","style","muted","REText","Button","href","align","RESection","REButton","Hr","REHr","Link","RELink","Section"],"mappings":"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"}

package/dist/theme.d.ts CHANGED Viewed

@@ -15,12 +15,12 @@ export declare const radius: {
 };
 export declare const font: {
     readonly family: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif";
-    readonly sizeXs: "12px";
-    readonly sizeSm: "14px";
-    readonly sizeMd: "16px";
-    readonly sizeLg: "18px";
-    readonly sizeXl: "20px";
-    readonly sizeHeading: "24px";
+    readonly sizeXs: `${number}px`;
+    readonly sizeSm: `${number}px`;
+    readonly sizeMd: `${number}px`;
+    readonly sizeLg: `${number}px`;
+    readonly sizeXl: `${number}px`;
+    readonly sizeHeading: `${number}px`;
     readonly weightNormal: 400;
     readonly weightMedium: 500;
     readonly weightSemibold: 600;

package/dist/theme.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"~~AAWA~~,eAAO,MAAM,KAAK;;;;;;;;;CASR,CAAA;AAEV,eAAO,MAAM,MAAM;;;;CAIT,CAAA;AAEV,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAeP,CAAA;AAMV,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;CACf;AAcD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAYV,eAAO,MAAM,GAAG;;;;;;;;;CASN,CAAA;AAiBV,eAAO,MAAM,WAAW,QAMZ,CAAA"}
1	+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAwBA,eAAO,MAAM,KAAK;;;;;;;;;CASR,CAAA;AAEV,eAAO,MAAM,MAAM;;;;CAIT,CAAA;AAEV,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAeP,CAAA;AAMV,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;CACf;AAcD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAYV,eAAO,MAAM,GAAG;;;;;;;;;CASN,CAAA;AAiBV,eAAO,MAAM,WAAW,QAMZ,CAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui-email",
-  "version": "4.5.0",
+  "version": "5.0.0",
   "description": "Token-driven, dark/light-aware email components for Duro (React Email).",
   "license": "MIT",
   "type": "module",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@react-email/components": "^1.0.9",
-    "@duro-app/tokens": "^4.5.0"
+    "@duro-app/tokens": "^5.0.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"