@duro-app/ui-email 5.0.0 → 5.2.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { EmailShell, Heading, Text, Button, Hr, Link, Section, type TextVariant } from './components';
-export { palette, space, radius, font, cls, darkModeCss, type EmailRoles } from './theme';
+export { EmailShell, Heading, Text, Button, Hr, Link, Section, type TextVariant, } from './components.js';
+export { palette, space, radius, font, cls, darkModeCss, type EmailRoles } from './theme.js';
 export { Img, Preview, Link as RawLink } from '@react-email/components';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,WAAW,EAAC,MAAM,cAAc,CAAA;AACnG,OAAO,EAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,UAAU,EAAC,MAAM,SAAS,CAAA;AAIvF,OAAO,EAAC,GAAG,EAAE,OAAO,EAAE,IAAI,IAAI,OAAO,EAAC,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,EAAE,EACF,IAAI,EACJ,OAAO,EACP,KAAK,WAAW,GACjB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,UAAU,EAAC,MAAM,YAAY,CAAA;AAI1F,OAAO,EAAC,GAAG,EAAE,OAAO,EAAE,IAAI,IAAI,OAAO,EAAC,MAAM,yBAAyB,CAAA"}

package/dist/index.js.map

@@ -1 +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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"}
+{"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.js'\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui-email",
-  "version": "5.0.0",
+  "version": "5.2.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": "^5.0.0"
+    "@duro-app/tokens": "^5.2.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"