@godxjp/ui 18.4.0 → 18.5.0

package/dist/email/geometry.js

@@ -0,0 +1,89 @@
+import { EMAIL_GEOMETRY_SOURCE } from "./tokens.generated.js";
+const raw = (name) => EMAIL_GEOMETRY_SOURCE[name];
+const num = (name) => {
+  const value = EMAIL_GEOMETRY_SOURCE[name];
+  const parsed = Number.parseFloat(value);
+  if (Number.isNaN(parsed)) {
+    throw new TypeError(`Email token ${name} ("${value}") has no numeric value.`);
+  }
+  return parsed;
+};
+const EMAIL_SHELL = Object.freeze({
+  width: raw("--email-shell-width"),
+  widthPx: num("--email-shell-width"),
+  contentWidth: `${num("--email-shell-width") - 2 * num("--email-shell-padding")}px`,
+  contentWidthPx: num("--email-shell-width") - 2 * num("--email-shell-padding"),
+  padding: raw("--email-shell-padding"),
+  paddingPx: num("--email-shell-padding"),
+  pagePadding: raw("--email-shell-page-padding"),
+  pagePaddingPx: num("--email-shell-page-padding"),
+  borderWidth: raw("--email-shell-border-width"),
+  borderWidthPx: num("--email-shell-border-width"),
+  radius: raw("--email-card-radius"),
+  radiusPx: num("--email-card-radius"),
+  gap: raw("--email-stack-gap"),
+  gapPx: num("--email-stack-gap"),
+  gapSm: raw("--email-stack-gap-sm"),
+  gapSmPx: num("--email-stack-gap-sm"),
+  referenceHeight: raw("--email-card-reference-height"),
+  referenceHeightPx: num("--email-card-reference-height")
+});
+const EMAIL_TYPOGRAPHY = Object.freeze({
+  fontFamily: raw("--email-font-family-sans"),
+  bodyFontSize: raw("--email-body-font-size"),
+  bodyFontSizePx: num("--email-body-font-size"),
+  bodyLineHeight: num("--email-body-line-height"),
+  bodyFontWeight: num("--email-body-font-weight"),
+  headingFontSize: raw("--email-heading-font-size"),
+  headingFontSizePx: num("--email-heading-font-size"),
+  headingLineHeight: num("--email-heading-line-height"),
+  headingFontWeight: num("--email-heading-font-weight")
+});
+const EMAIL_CTA = Object.freeze({
+  height: raw("--email-cta-height"),
+  heightPx: num("--email-cta-height"),
+  lineHeight: raw("--email-cta-line-height"),
+  lineHeightPx: num("--email-cta-line-height"),
+  paddingX: raw("--email-cta-padding-x"),
+  paddingXPx: num("--email-cta-padding-x"),
+  radius: raw("--email-cta-radius"),
+  radiusPx: num("--email-cta-radius"),
+  fontSize: raw("--email-cta-font-size"),
+  fontSizePx: num("--email-cta-font-size"),
+  fontWeight: num("--email-cta-font-weight")
+});
+const EMAIL_FOOTER = Object.freeze({
+  fontSize: raw("--email-footer-font-size"),
+  fontSizePx: num("--email-footer-font-size"),
+  lineHeight: num("--email-footer-line-height"),
+  linkGap: raw("--email-footer-link-gap"),
+  linkGapPx: num("--email-footer-link-gap"),
+  paddingTop: raw("--email-footer-padding-top"),
+  paddingTopPx: num("--email-footer-padding-top"),
+  borderWidth: raw("--email-footer-border-width"),
+  borderWidthPx: num("--email-footer-border-width")
+});
+const EMAIL_FOCUS = Object.freeze({
+  borderWidth: raw("--email-focus-border-width"),
+  borderWidthPx: num("--email-focus-border-width")
+});
+const EMAIL_MOBILE = Object.freeze({
+  maxWidth: raw("--email-mobile-max-width"),
+  maxWidthPx: num("--email-mobile-max-width"),
+  width: raw("--email-mobile-width"),
+  padding: raw("--email-mobile-padding"),
+  paddingPx: num("--email-mobile-padding"),
+  pagePadding: raw("--email-mobile-page-padding"),
+  pagePaddingPx: num("--email-mobile-page-padding"),
+  headingFontSize: raw("--email-mobile-heading-font-size"),
+  headingFontSizePx: num("--email-mobile-heading-font-size"),
+  ctaWidth: raw("--email-mobile-cta-width")
+});
+export {
+  EMAIL_CTA,
+  EMAIL_FOCUS,
+  EMAIL_FOOTER,
+  EMAIL_MOBILE,
+  EMAIL_SHELL,
+  EMAIL_TYPOGRAPHY
+};

package/dist/email/index.d.ts

@@ -0,0 +1,78 @@
+/**
+ * `@godxjp/ui/email` — the email-safe design-token contract for transactional templates (issue #227).
+ *
+ * ## Why this exists
+ *
+ * A transactional email is rendered by Blade/Twig/MJML, not React, and by clients that strip
+ * `<style>`, ignore CSS custom properties, refuse relative units and block remote images. So the
+ * two things a template usually reaches for — the component library and the CSS token file — are
+ * both unavailable, and templates end up hand-copying hex and hand-drawing the logo. That is
+ * exactly the drift this module removes: it is a FRAMEWORK-NEUTRAL, zero-dependency, React-free
+ * data export of literal `#rrggbb` / `px` values plus the canonical brand-mark markup.
+ *
+ * ## The no-drift guarantee
+ *
+ * Nothing here is hand-typed. `src/tokens/foundation.css` (colour roles) and
+ * `src/tokens/components/email.css` (geometry/typography) are read by
+ * `scripts/gen-email-tokens.mjs` into `tokens.generated.ts`, and the HSL→hex conversion runs at
+ * module load. There is no hex literal anywhere in `src/email/`, so an email palette that diverges
+ * from the web palette is not something a maintainer can accidentally write.
+ * `src/email/__tests__/email-tokens.test.ts` re-derives every value straight from the CSS and
+ * asserts equality, and `pnpm check:email-token-sync` fails CI if the generated file goes stale.
+ *
+ * ## Usage
+ *
+ * ```ts
+ * import { EMAIL_COLORS, EMAIL_SHELL, EMAIL_CTA, EMAIL_BRAND_MARK, emailInlineStyle } from "@godxjp/ui/email";
+ *
+ * const card = emailInlineStyle({
+ *   width: EMAIL_SHELL.width,
+ *   padding: EMAIL_SHELL.padding,
+ *   backgroundColor: EMAIL_COLORS.surface,
+ *   border: `${EMAIL_SHELL.borderWidth} solid ${EMAIL_COLORS.border}`,
+ *   borderRadius: EMAIL_SHELL.radius,
+ * });
+ * ```
+ *
+ * A non-JS template engine (Blade, Twig, Liquid) consumes the same values through
+ * `EMAIL_TOKENS_JSON` — dump it once in the build step and read the JSON from PHP:
+ *
+ * ```sh
+ * node --input-type=module -e \
+ *   'import("@godxjp/ui/email").then(m => process.stdout.write(m.EMAIL_TOKENS_JSON))' \
+ *   > resources/design/email-tokens.json
+ * ```
+ *
+ * ## Scope
+ *
+ * Tokens, geometry and brand markup only. Copy, recipients, links, locale, triggers and queue
+ * behaviour belong to the sending application — this module knows nothing about them.
+ */
+export { hslToHex, EMAIL_COLORS, EMAIL_COLORS_DARK, type EmailColorToken, type EmailHex, } from "./color.js";
+export { EMAIL_SHELL, EMAIL_TYPOGRAPHY, EMAIL_CTA, EMAIL_FOOTER, EMAIL_FOCUS, EMAIL_MOBILE, type EmailTokenName, type EmailShellTokens, type EmailTypographyTokens, type EmailCtaTokens, type EmailFooterTokens, type EmailFocusTokens, type EmailMobileTokens, } from "./geometry.js";
+export { EMAIL_BRAND_MARK, EMAIL_BRAND_MARK_VIEWBOX, EMAIL_BRAND_MARK_CAPSULE, EMAIL_BRAND_MARK_GLYPH, emailBrandMarkSvg, emailBrandMarkDataUri, emailBrandMarkTableHtml, roundedRectPath, type EmailBrandMark, type EmailBrandMarkOptions, type EmailBrandMarkRect, } from "./brand-mark.js";
+export { emailInlineStyle, type EmailStyleDeclarations } from "./inline-style.js";
+export { EMAIL_COLOR_SOURCE, EMAIL_COLOR_SOURCE_DARK, EMAIL_GEOMETRY_SOURCE, type EmailColorSource, } from "./tokens.generated.js";
+import { EMAIL_COLORS, EMAIL_COLORS_DARK } from "./color.js";
+import { EMAIL_SHELL, EMAIL_TYPOGRAPHY, EMAIL_CTA, EMAIL_FOOTER, EMAIL_FOCUS, EMAIL_MOBILE } from "./geometry.js";
+import { EMAIL_BRAND_MARK } from "./brand-mark.js";
+/** The whole contract in one object — the shape `EMAIL_TOKENS_JSON` serialises. */
+export interface EmailTokens {
+    readonly colors: typeof EMAIL_COLORS;
+    readonly colorsDark: typeof EMAIL_COLORS_DARK;
+    readonly shell: typeof EMAIL_SHELL;
+    readonly typography: typeof EMAIL_TYPOGRAPHY;
+    readonly cta: typeof EMAIL_CTA;
+    readonly footer: typeof EMAIL_FOOTER;
+    readonly focus: typeof EMAIL_FOCUS;
+    readonly mobile: typeof EMAIL_MOBILE;
+    readonly brandMark: typeof EMAIL_BRAND_MARK;
+}
+/** Every email token, grouped. Import a single group when you only need one. */
+export declare const EMAIL_TOKENS: EmailTokens;
+/**
+ * `EMAIL_TOKENS` as pretty-printed JSON — the framework-neutral bridge for template engines that
+ * cannot import ES modules (Blade, Twig, Liquid, Handlebars on another runtime). Write it to a
+ * file in the build step and read it from the template layer.
+ */
+export declare const EMAIL_TOKENS_JSON: string;

package/dist/email/index.js

@@ -0,0 +1,76 @@
+import {
+  hslToHex,
+  EMAIL_COLORS,
+  EMAIL_COLORS_DARK
+} from "./color.js";
+import {
+  EMAIL_SHELL,
+  EMAIL_TYPOGRAPHY,
+  EMAIL_CTA,
+  EMAIL_FOOTER,
+  EMAIL_FOCUS,
+  EMAIL_MOBILE
+} from "./geometry.js";
+import {
+  EMAIL_BRAND_MARK,
+  EMAIL_BRAND_MARK_VIEWBOX,
+  EMAIL_BRAND_MARK_CAPSULE,
+  EMAIL_BRAND_MARK_GLYPH,
+  emailBrandMarkSvg,
+  emailBrandMarkDataUri,
+  emailBrandMarkTableHtml,
+  roundedRectPath
+} from "./brand-mark.js";
+import { emailInlineStyle } from "./inline-style.js";
+import {
+  EMAIL_COLOR_SOURCE,
+  EMAIL_COLOR_SOURCE_DARK,
+  EMAIL_GEOMETRY_SOURCE
+} from "./tokens.generated.js";
+import { EMAIL_COLORS as EMAIL_COLORS2, EMAIL_COLORS_DARK as EMAIL_COLORS_DARK2 } from "./color.js";
+import {
+  EMAIL_SHELL as EMAIL_SHELL2,
+  EMAIL_TYPOGRAPHY as EMAIL_TYPOGRAPHY2,
+  EMAIL_CTA as EMAIL_CTA2,
+  EMAIL_FOOTER as EMAIL_FOOTER2,
+  EMAIL_FOCUS as EMAIL_FOCUS2,
+  EMAIL_MOBILE as EMAIL_MOBILE2
+} from "./geometry.js";
+import { EMAIL_BRAND_MARK as EMAIL_BRAND_MARK2 } from "./brand-mark.js";
+const EMAIL_TOKENS = Object.freeze({
+  colors: EMAIL_COLORS2,
+  colorsDark: EMAIL_COLORS_DARK2,
+  shell: EMAIL_SHELL2,
+  typography: EMAIL_TYPOGRAPHY2,
+  cta: EMAIL_CTA2,
+  footer: EMAIL_FOOTER2,
+  focus: EMAIL_FOCUS2,
+  mobile: EMAIL_MOBILE2,
+  brandMark: EMAIL_BRAND_MARK2
+});
+const EMAIL_TOKENS_JSON = JSON.stringify(EMAIL_TOKENS, null, 2);
+export {
+  EMAIL_BRAND_MARK,
+  EMAIL_BRAND_MARK_CAPSULE,
+  EMAIL_BRAND_MARK_GLYPH,
+  EMAIL_BRAND_MARK_VIEWBOX,
+  EMAIL_COLORS,
+  EMAIL_COLORS_DARK,
+  EMAIL_COLOR_SOURCE,
+  EMAIL_COLOR_SOURCE_DARK,
+  EMAIL_CTA,
+  EMAIL_FOCUS,
+  EMAIL_FOOTER,
+  EMAIL_GEOMETRY_SOURCE,
+  EMAIL_MOBILE,
+  EMAIL_SHELL,
+  EMAIL_TOKENS,
+  EMAIL_TOKENS_JSON,
+  EMAIL_TYPOGRAPHY,
+  emailBrandMarkDataUri,
+  emailBrandMarkSvg,
+  emailBrandMarkTableHtml,
+  emailInlineStyle,
+  hslToHex,
+  roundedRectPath
+};

package/dist/email/inline-style.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Inline-style serialisation for HTML email.
+ *
+ * Email clients do not run the cascade: Gmail strips `<style>`, Outlook resolves no custom
+ * property, and only the `style=""` attribute on the painting element is universally honoured.
+ * `emailInlineStyle` turns a declaration map into that attribute value AND enforces the two rules
+ * that silently break templates — no `var()` (nothing resolves it) and no `calc()` (Outlook's Word
+ * renderer drops the whole declaration). Failing loudly at template-build time beats a broken
+ * layout discovered in Mailpit.
+ */
+/** A declaration map. Numbers are emitted verbatim (already-unitless values like `font-weight`). */
+export type EmailStyleDeclarations = Record<string, string | number | null | undefined>;
+/**
+ * Serialise declarations into an inline `style` attribute value.
+ *
+ * ```ts
+ * emailInlineStyle({ width: EMAIL_SHELL.width, backgroundColor: EMAIL_COLORS.surface })
+ * // "width:480px;background-color:#fdfdfb"
+ * ```
+ *
+ * `null` / `undefined` values are dropped, so a conditional declaration needs no branch.
+ *
+ * @throws if a value contains `var()` or `calc()` — neither survives an email client.
+ */
+export declare function emailInlineStyle(declarations: EmailStyleDeclarations): string;

package/dist/email/inline-style.js

@@ -0,0 +1,21 @@
+const UNRESOLVABLE = /\bvar\(|\bcalc\(/;
+function emailInlineStyle(declarations) {
+  const parts = [];
+  for (const [property, value] of Object.entries(declarations)) {
+    if (value === null || value === void 0 || value === "") continue;
+    const serialised = String(value);
+    if (UNRESOLVABLE.test(serialised)) {
+      throw new TypeError(
+        `emailInlineStyle: "${property}: ${serialised}" uses var()/calc(), which no email client resolves. Pass the literal value from the @godxjp/ui/email token export instead.`
+      );
+    }
+    parts.push(`${kebab(property)}:${serialised}`);
+  }
+  return parts.join(";");
+}
+function kebab(property) {
+  return property.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+export {
+  emailInlineStyle
+};

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

@@ -0,0 +1,147 @@
+/** One email colour slot and the web role it is derived from. `hsl` is the raw channel triplet. */
+export interface EmailColorSource {
+    /** The semantic role in src/tokens/foundation.css this slot mirrors. */
+    readonly cssVar: string;
+    /** The role's HSL channel triplet, verbatim (`H S% L%`). Converted to hex at module load. */
+    readonly hsl: string;
+}
+/** Light-scheme colour sources — the canonical transactional-email palette. */
+export declare const EMAIL_COLOR_SOURCE: {
+    readonly background: {
+        readonly cssVar: "--background";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly foreground: {
+        readonly cssVar: "--foreground";
+        readonly hsl: "48 8% 13%";
+    };
+    readonly surface: {
+        readonly cssVar: "--card";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly surfaceForeground: {
+        readonly cssVar: "--card-foreground";
+        readonly hsl: "48 8% 13%";
+    };
+    readonly muted: {
+        readonly cssVar: "--muted";
+        readonly hsl: "45 15% 95%";
+    };
+    readonly mutedForeground: {
+        readonly cssVar: "--muted-foreground";
+        readonly hsl: "44 5% 42%";
+    };
+    readonly border: {
+        readonly cssVar: "--border";
+        readonly hsl: "30 7% 83%";
+    };
+    readonly primary: {
+        readonly cssVar: "--primary";
+        readonly hsl: "204 100% 39%";
+    };
+    readonly primaryForeground: {
+        readonly cssVar: "--primary-foreground";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly focus: {
+        readonly cssVar: "--ring";
+        readonly hsl: "204 100% 39%";
+    };
+    readonly brand: {
+        readonly cssVar: "--success";
+        readonly hsl: "146 40% 58%";
+    };
+    readonly brandForeground: {
+        readonly cssVar: "--success-foreground";
+        readonly hsl: "60 33% 99%";
+    };
+};
+/** Dark-scheme colour sources, for `@media (prefers-color-scheme: dark)` overrides. */
+export declare const EMAIL_COLOR_SOURCE_DARK: {
+    readonly background: {
+        readonly cssVar: "--background";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly foreground: {
+        readonly cssVar: "--foreground";
+        readonly hsl: "60 20% 96%";
+    };
+    readonly surface: {
+        readonly cssVar: "--card";
+        readonly hsl: "48 8% 12%";
+    };
+    readonly surfaceForeground: {
+        readonly cssVar: "--card-foreground";
+        readonly hsl: "60 20% 96%";
+    };
+    readonly muted: {
+        readonly cssVar: "--muted";
+        readonly hsl: "45 6% 18%";
+    };
+    readonly mutedForeground: {
+        readonly cssVar: "--muted-foreground";
+        readonly hsl: "44 6% 64%";
+    };
+    readonly border: {
+        readonly cssVar: "--border";
+        readonly hsl: "45 6% 22%";
+    };
+    readonly primary: {
+        readonly cssVar: "--primary";
+        readonly hsl: "204 90% 60%";
+    };
+    readonly primaryForeground: {
+        readonly cssVar: "--primary-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly focus: {
+        readonly cssVar: "--ring";
+        readonly hsl: "204 90% 60%";
+    };
+    readonly brand: {
+        readonly cssVar: "--success";
+        readonly hsl: "146 45% 55%";
+    };
+    readonly brandForeground: {
+        readonly cssVar: "--success-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+};
+/** Raw `--email-*` declarations from the component token tier, verbatim. */
+export declare const EMAIL_GEOMETRY_SOURCE: {
+    readonly "--email-shell-width": "480px";
+    readonly "--email-shell-padding": "32px";
+    readonly "--email-shell-page-padding": "24px";
+    readonly "--email-shell-border-width": "1px";
+    readonly "--email-card-radius": "10px";
+    readonly "--email-card-reference-height": "407px";
+    readonly "--email-stack-gap": "24px";
+    readonly "--email-stack-gap-sm": "12px";
+    readonly "--email-mark-width": "32px";
+    readonly "--email-mark-height": "32px";
+    readonly "--email-font-family-sans": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif";
+    readonly "--email-body-font-size": "14px";
+    readonly "--email-body-line-height": "1.7";
+    readonly "--email-body-font-weight": "400";
+    readonly "--email-heading-font-size": "20px";
+    readonly "--email-heading-line-height": "1.25";
+    readonly "--email-heading-font-weight": "700";
+    readonly "--email-cta-height": "44px";
+    readonly "--email-cta-line-height": "44px";
+    readonly "--email-cta-padding-x": "24px";
+    readonly "--email-cta-radius": "6px";
+    readonly "--email-cta-font-size": "14px";
+    readonly "--email-cta-font-weight": "700";
+    readonly "--email-footer-font-size": "12px";
+    readonly "--email-footer-line-height": "1.5";
+    readonly "--email-footer-link-gap": "12px";
+    readonly "--email-footer-padding-top": "20px";
+    readonly "--email-footer-border-width": "1px";
+    readonly "--email-focus-border-width": "2px";
+    readonly "--email-mobile-max-width": "520px";
+    readonly "--email-mobile-width": "100%";
+    readonly "--email-mobile-padding": "20px";
+    readonly "--email-mobile-page-padding": "12px";
+    readonly "--email-mobile-heading-font-size": "18px";
+    readonly "--email-mobile-cta-width": "100%";
+};

package/dist/email/tokens.generated.js

@@ -0,0 +1,142 @@
+const EMAIL_COLOR_SOURCE = {
+  "background": {
+    "cssVar": "--background",
+    "hsl": "60 33% 99%"
+  },
+  "foreground": {
+    "cssVar": "--foreground",
+    "hsl": "48 8% 13%"
+  },
+  "surface": {
+    "cssVar": "--card",
+    "hsl": "60 33% 99%"
+  },
+  "surfaceForeground": {
+    "cssVar": "--card-foreground",
+    "hsl": "48 8% 13%"
+  },
+  "muted": {
+    "cssVar": "--muted",
+    "hsl": "45 15% 95%"
+  },
+  "mutedForeground": {
+    "cssVar": "--muted-foreground",
+    "hsl": "44 5% 42%"
+  },
+  "border": {
+    "cssVar": "--border",
+    "hsl": "30 7% 83%"
+  },
+  "primary": {
+    "cssVar": "--primary",
+    "hsl": "204 100% 39%"
+  },
+  "primaryForeground": {
+    "cssVar": "--primary-foreground",
+    "hsl": "60 33% 99%"
+  },
+  "focus": {
+    "cssVar": "--ring",
+    "hsl": "204 100% 39%"
+  },
+  "brand": {
+    "cssVar": "--success",
+    "hsl": "146 40% 58%"
+  },
+  "brandForeground": {
+    "cssVar": "--success-foreground",
+    "hsl": "60 33% 99%"
+  }
+};
+const EMAIL_COLOR_SOURCE_DARK = {
+  "background": {
+    "cssVar": "--background",
+    "hsl": "48 9% 9%"
+  },
+  "foreground": {
+    "cssVar": "--foreground",
+    "hsl": "60 20% 96%"
+  },
+  "surface": {
+    "cssVar": "--card",
+    "hsl": "48 8% 12%"
+  },
+  "surfaceForeground": {
+    "cssVar": "--card-foreground",
+    "hsl": "60 20% 96%"
+  },
+  "muted": {
+    "cssVar": "--muted",
+    "hsl": "45 6% 18%"
+  },
+  "mutedForeground": {
+    "cssVar": "--muted-foreground",
+    "hsl": "44 6% 64%"
+  },
+  "border": {
+    "cssVar": "--border",
+    "hsl": "45 6% 22%"
+  },
+  "primary": {
+    "cssVar": "--primary",
+    "hsl": "204 90% 60%"
+  },
+  "primaryForeground": {
+    "cssVar": "--primary-foreground",
+    "hsl": "48 9% 9%"
+  },
+  "focus": {
+    "cssVar": "--ring",
+    "hsl": "204 90% 60%"
+  },
+  "brand": {
+    "cssVar": "--success",
+    "hsl": "146 45% 55%"
+  },
+  "brandForeground": {
+    "cssVar": "--success-foreground",
+    "hsl": "48 9% 9%"
+  }
+};
+const EMAIL_GEOMETRY_SOURCE = {
+  "--email-shell-width": "480px",
+  "--email-shell-padding": "32px",
+  "--email-shell-page-padding": "24px",
+  "--email-shell-border-width": "1px",
+  "--email-card-radius": "10px",
+  "--email-card-reference-height": "407px",
+  "--email-stack-gap": "24px",
+  "--email-stack-gap-sm": "12px",
+  "--email-mark-width": "32px",
+  "--email-mark-height": "32px",
+  "--email-font-family-sans": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
+  "--email-body-font-size": "14px",
+  "--email-body-line-height": "1.7",
+  "--email-body-font-weight": "400",
+  "--email-heading-font-size": "20px",
+  "--email-heading-line-height": "1.25",
+  "--email-heading-font-weight": "700",
+  "--email-cta-height": "44px",
+  "--email-cta-line-height": "44px",
+  "--email-cta-padding-x": "24px",
+  "--email-cta-radius": "6px",
+  "--email-cta-font-size": "14px",
+  "--email-cta-font-weight": "700",
+  "--email-footer-font-size": "12px",
+  "--email-footer-line-height": "1.5",
+  "--email-footer-link-gap": "12px",
+  "--email-footer-padding-top": "20px",
+  "--email-footer-border-width": "1px",
+  "--email-focus-border-width": "2px",
+  "--email-mobile-max-width": "520px",
+  "--email-mobile-width": "100%",
+  "--email-mobile-padding": "20px",
+  "--email-mobile-page-padding": "12px",
+  "--email-mobile-heading-font-size": "18px",
+  "--email-mobile-cta-width": "100%"
+};
+export {
+  EMAIL_COLOR_SOURCE,
+  EMAIL_COLOR_SOURCE_DARK,
+  EMAIL_GEOMETRY_SOURCE
+};

package/dist/i18n/messages/en.json

@@ -145,6 +145,11 @@
       "mainLabel": "Main content",
       "footerLabel": "Footer"
     },
+    "legalDocumentShell": {
+      "contents": "Contents",
+      "version": "Version {version}",
+      "effectiveDate": "Effective {date}"
+    },
     "topbar": {
       "toggleSidebar": "Toggle sidebar",
       "search": "Search",
@@ -162,6 +167,10 @@
       "next": "Next",
       "dotsLabel": "Choose slide",
       "goToSlide": "Go to slide {index}"
+    },
+    "listRow": {
+      "unread": "Unread",
+      "read": "Read"
     }
   },
   "ui": {
@@ -292,7 +301,11 @@
     "densitySwitch": "Switch to {density} density",
     "rowActions": "Row actions",
     "empty": "No data",
-    "loading": "Loading…"
+    "loading": "Loading…",
+    "error": "Couldn't load this list",
+    "errorDescription": "The data could not be retrieved. Try again in a moment.",
+    "denied": "You don't have access to this list",
+    "deniedDescription": "Ask an administrator to grant you permission to view these records."
   },
   "dataGrid": {
     "search": "Search",
@@ -304,6 +317,10 @@
   },
   "status": {
     "active": "Active",
+    "trialing": "Trialing",
+    "past_due": "Past due",
+    "incomplete": "Incomplete",
+    "canceled": "Canceled",
     "completed": "Completed",
     "delivered": "Delivered",
     "done": "Done",
@@ -353,6 +370,8 @@
   "chart": {
     "empty": "No data to display",
     "summaryCartesian": "Chart with {series} series across {points} data points",
-    "summaryPie": "Pie chart with {slices} slices"
+    "summaryPie": "Pie chart with {slices} slices",
+    "summaryTrend": "Bar trend with {points} data points",
+    "trendCurrent": "current"
   }
 }