@godxjp/ui 18.4.0 → 18.6.0

package/dist/email/color.js

@@ -0,0 +1,37 @@
+import { EMAIL_COLOR_SOURCE, EMAIL_COLOR_SOURCE_DARK } from "./tokens.generated.js";
+const TRIPLET = /^\s*(-?\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*$/;
+const channel = (n) => Math.round(Math.min(255, Math.max(0, n * 255))).toString(16).padStart(2, "0");
+function hslToHex(triplet) {
+  const parsed = TRIPLET.exec(triplet);
+  if (!parsed) {
+    throw new TypeError(
+      `hslToHex expects a bare HSL channel triplet like "204 100% 39%", received "${triplet}".`
+    );
+  }
+  const hue = (Number(parsed[1]) % 360 + 360) % 360 / 60;
+  const saturation = Number(parsed[2]) / 100;
+  const lightness = Number(parsed[3]) / 100;
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  const second = chroma * (1 - Math.abs(hue % 2 - 1));
+  const base = lightness - chroma / 2;
+  const [r, g, b] = hue < 1 ? [chroma, second, 0] : hue < 2 ? [second, chroma, 0] : hue < 3 ? [0, chroma, second] : hue < 4 ? [0, second, chroma] : hue < 5 ? [second, 0, chroma] : [chroma, 0, second];
+  return `#${channel(r + base)}${channel(g + base)}${channel(b + base)}`;
+}
+function resolve(source) {
+  const out = {};
+  for (const [token, entry] of Object.entries(source)) {
+    out[token] = hslToHex(entry.hsl);
+  }
+  return Object.freeze(out);
+}
+const EMAIL_COLORS = resolve(
+  EMAIL_COLOR_SOURCE
+);
+const EMAIL_COLORS_DARK = resolve(
+  EMAIL_COLOR_SOURCE_DARK
+);
+export {
+  EMAIL_COLORS,
+  EMAIL_COLORS_DARK,
+  hslToHex
+};

package/dist/email/geometry.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Email geometry + typography contract — the `--email-*` component tokens resolved to the two
+ * forms an email template actually needs: a CSS string (`"480px"`, for `style="width:480px"`) and a
+ * bare number (`480`, for the legacy HTML attribute form `<table width="480">` that Outlook's Word
+ * renderer still prefers). Both come from src/tokens/components/email.css via
+ * scripts/gen-email-tokens.mjs — nothing here is hand-typed.
+ */
+import { EMAIL_GEOMETRY_SOURCE } from "./tokens.generated.js";
+/** Every `--email-*` token name declared in the component token tier. */
+export type EmailTokenName = keyof typeof EMAIL_GEOMETRY_SOURCE;
+/** The 480px transactional shell — the card and the page gutter around it. */
+export interface EmailShellTokens {
+    /** Card width as a CSS length. */
+    readonly width: string;
+    /** Card width as a number, for `<table width="…">`. */
+    readonly widthPx: number;
+    /** Width of the column INSIDE the card padding (`width − 2 × padding`). */
+    readonly contentWidth: string;
+    readonly contentWidthPx: number;
+    /** Card inset on desktop. */
+    readonly padding: string;
+    readonly paddingPx: number;
+    /** Gutter between the client viewport and the card. */
+    readonly pagePadding: string;
+    readonly pagePaddingPx: number;
+    /** Card edge hairline. */
+    readonly borderWidth: string;
+    readonly borderWidthPx: number;
+    /** Card corner radius (ignored by Outlook's Word renderer — degrade to square, never to an image). */
+    readonly radius: string;
+    readonly radiusPx: number;
+    /** Vertical rhythm between blocks. */
+    readonly gap: string;
+    readonly gapPx: number;
+    /** Tight rhythm (heading ↔ lede). */
+    readonly gapSm: string;
+    readonly gapSmPx: number;
+    /**
+     * Height the canonical invitation reference card measures at this geometry (480×407). A
+     * visual-regression target, NOT a layout input — never set a fixed height on an email card.
+     */
+    readonly referenceHeight: string;
+    readonly referenceHeightPx: number;
+}
+export declare const EMAIL_SHELL: EmailShellTokens;
+/** Type ramp. Sizes are literal px — no email client resolves the rem scale reliably. */
+export interface EmailTypographyTokens {
+    /**
+     * The canonical DXS stack, M PLUS 2 first. Web-font `@font-face` is unavailable in most clients,
+     * so this NAMES the face and degrades: a client with M PLUS 2 installed (or a webmail that
+     * already loaded it) renders the canonical face; everything else falls to Hiragino (macOS/iOS) →
+     * Yu Gothic (Windows) → Noto Sans JP → Meiryo → the system UI face → Arial → `sans-serif`. Family
+     * names are SINGLE-quoted so the value drops straight into a double-quoted `style="…"` attribute.
+     */
+    readonly fontFamily: string;
+    /** Mono stack for invoice ids, masked card numbers, ISO dates and amounts. */
+    readonly monoFontFamily: string;
+    readonly bodyFontSize: string;
+    readonly bodyFontSizePx: number;
+    readonly bodyLineHeight: number;
+    readonly bodyFontWeight: number;
+    readonly headingFontSize: string;
+    readonly headingFontSizePx: number;
+    readonly headingLineHeight: number;
+    readonly headingFontWeight: number;
+}
+export declare const EMAIL_TYPOGRAPHY: EmailTypographyTokens;
+/** The single primary call-to-action. */
+export interface EmailCtaTokens {
+    readonly height: string;
+    readonly heightPx: number;
+    /** Equal to the height so the label centres without flexbox (Outlook has none). */
+    readonly lineHeight: string;
+    readonly lineHeightPx: number;
+    readonly paddingX: string;
+    readonly paddingXPx: number;
+    readonly radius: string;
+    readonly radiusPx: number;
+    readonly fontSize: string;
+    readonly fontSizePx: number;
+    readonly fontWeight: number;
+}
+export declare const EMAIL_CTA: EmailCtaTokens;
+/** The legal band under the body — quiet type, a hairline, and the inter-link spacing. */
+export interface EmailFooterTokens {
+    readonly fontSize: string;
+    readonly fontSizePx: number;
+    readonly lineHeight: number;
+    /** Horizontal separation between adjacent footer links. */
+    readonly linkGap: string;
+    readonly linkGapPx: number;
+    readonly paddingTop: string;
+    readonly paddingTopPx: number;
+    readonly borderWidth: string;
+    readonly borderWidthPx: number;
+}
+export declare const EMAIL_FOOTER: EmailFooterTokens;
+/** Focus affordance for the webmail preview panes that DO honour `:focus` (WCAG 2.4.7/2.4.11). */
+export interface EmailFocusTokens {
+    readonly borderWidth: string;
+    readonly borderWidthPx: number;
+}
+export declare const EMAIL_FOCUS: EmailFocusTokens;
+/** Narrow-viewport reflow — apply under `@media (max-width: …)` and via `width="100%"` fallbacks. */
+export interface EmailMobileTokens {
+    /** The reflow breakpoint (card width + both gutters). */
+    readonly maxWidth: string;
+    readonly maxWidthPx: number;
+    /** The card goes fluid below the breakpoint. */
+    readonly width: string;
+    readonly padding: string;
+    readonly paddingPx: number;
+    readonly pagePadding: string;
+    readonly pagePaddingPx: number;
+    readonly headingFontSize: string;
+    readonly headingFontSizePx: number;
+    /** The CTA goes full-bleed so the tap target spans the card. */
+    readonly ctaWidth: string;
+}
+export declare const EMAIL_MOBILE: EmailMobileTokens;

package/dist/email/geometry.js

@@ -0,0 +1,90 @@
+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"),
+  monoFontFamily: raw("--email-font-family-mono"),
+  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,83 @@
+/**
+ * `@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_URGENCY, 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}`,
+ *   borderTopColor: EMAIL_URGENCY.accent,
+ *   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_URGENCY, EMAIL_URGENCY_DARK, type EmailUrgencyTokens } from "./urgency.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";
+import { EMAIL_URGENCY, EMAIL_URGENCY_DARK } from "./urgency.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 urgency: typeof EMAIL_URGENCY;
+    readonly urgencyDark: typeof EMAIL_URGENCY_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,82 @@
+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_URGENCY, EMAIL_URGENCY_DARK } from "./urgency.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";
+import { EMAIL_URGENCY as EMAIL_URGENCY2, EMAIL_URGENCY_DARK as EMAIL_URGENCY_DARK2 } from "./urgency.js";
+const EMAIL_TOKENS = Object.freeze({
+  colors: EMAIL_COLORS2,
+  colorsDark: EMAIL_COLORS_DARK2,
+  urgency: EMAIL_URGENCY2,
+  urgencyDark: EMAIL_URGENCY_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,
+  EMAIL_URGENCY,
+  EMAIL_URGENCY_DARK,
+  emailBrandMarkDataUri,
+  emailBrandMarkSvg,
+  emailBrandMarkTableHtml,
+  emailInlineStyle,
+  hslToHex,
+  roundedRectPath
+};

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

@@ -0,0 +1,27 @@
+/**
+ * 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 three rules
+ * that silently break templates — no `var()` (nothing resolves it), no `calc()` (Outlook's Word
+ * renderer drops the whole declaration) and no `"` (it closes the `style="…"` attribute mid-value,
+ * which is how a double-quoted font family corrupts a whole tag). 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) or a double
+ *   quote (it terminates the `style="…"` attribute).
+ */
+export declare function emailInlineStyle(declarations: EmailStyleDeclarations): string;

package/dist/email/inline-style.js

@@ -0,0 +1,26 @@
+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.`
+      );
+    }
+    if (serialised.includes('"')) {
+      throw new TypeError(
+        `emailInlineStyle: "${property}: ${serialised}" contains a double quote, which terminates the style="\u2026" attribute it is written into. Use single quotes \u2014 a quoted font family from EMAIL_TYPOGRAPHY already ships that way.`
+      );
+    }
+    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,167 @@
+/** 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: "--brand";
+        readonly hsl: "160.5 100% 29.6%";
+    };
+    readonly brandForeground: {
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 99% 46%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-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: "--brand";
+        readonly hsl: "160.5 100% 36%";
+    };
+    readonly brandForeground: {
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 95% 56%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-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": "22px";
+    readonly "--email-mark-height": "22px";
+    readonly "--email-mark-gap": "8px";
+    readonly "--email-wordmark-font-size": "13px";
+    readonly "--email-wordmark-font-weight": "700";
+    readonly "--email-font-family-sans": "'M PLUS 2', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Noto Sans JP', Meiryo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif";
+    readonly "--email-font-family-mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+    readonly "--email-body-font-size": "14px";
+    readonly "--email-body-line-height": "1.9";
+    readonly "--email-body-font-weight": "400";
+    readonly "--email-heading-font-size": "17px";
+    readonly "--email-heading-line-height": "1.7";
+    readonly "--email-heading-font-weight": "500";
+    readonly "--email-cta-height": "36px";
+    readonly "--email-cta-line-height": "36px";
+    readonly "--email-cta-padding-x": "16px";
+    readonly "--email-cta-radius": "6px";
+    readonly "--email-cta-font-size": "14px";
+    readonly "--email-cta-font-weight": "500";
+    readonly "--email-footer-font-size": "11px";
+    readonly "--email-footer-line-height": "1.8";
+    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": "16px";
+    readonly "--email-mobile-cta-width": "100%";
+};