@comet/mail-react 9.0.0-beta.1 → 9.0.0-beta.2

package/lib/theme/createTheme.test.js

@@ -1,6 +1,38 @@
 import { describe, expect, it } from "vitest";
 import { createTheme } from "./createTheme.js";
 import { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./responsiveValue.js";
+describe("createTheme text", () => {
+    it("includes default text values when no overrides given", () => {
+        const theme = createTheme();
+        expect(theme.text.fontFamily).toBe("Arial, sans-serif");
+        expect(theme.text.fontSize).toBe("16px");
+        expect(theme.text.lineHeight).toBe("20px");
+        expect(theme.text.bottomSpacing).toBe("16px");
+    });
+    it("shallow-merges text overrides with defaults", () => {
+        const theme = createTheme({ text: { fontFamily: "Georgia, serif", fontSize: "18px" } });
+        expect(theme.text.fontFamily).toBe("Georgia, serif");
+        expect(theme.text.fontSize).toBe("18px");
+        expect(theme.text.lineHeight).toBe("20px");
+        expect(theme.text.bottomSpacing).toBe("16px");
+    });
+    it("passes through variant definitions", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: { default: "32px", mobile: "24px" } },
+                },
+            },
+        });
+        expect(theme.text.variants).toBeDefined();
+        expect(theme.text.variants?.heading).toEqual({ fontSize: { default: "32px", mobile: "24px" } });
+    });
+    it("does not set defaultVariant or variants by default", () => {
+        const theme = createTheme();
+        expect(theme.text.defaultVariant).toBeUndefined();
+        expect(theme.text.variants).toBeUndefined();
+    });
+});
 describe("createTheme contentIndentation", () => {
     it("has default contentIndentation with responsive mobile value", () => {
         const theme = createTheme();

package/lib/theme/defaultTheme.js

@@ -8,4 +8,16 @@ export const defaultTheme = {
         default: createBreakpoint(600),
         mobile: createBreakpoint(420),
     },
+    text: {
+        fontFamily: "Arial, sans-serif",
+        fontSize: "16px",
+        lineHeight: "20px",
+        bottomSpacing: "16px",
+    },
+    colors: {
+        background: {
+            body: "#F2F2F2",
+            content: "#FFFFFF",
+        },
+    },
 };

package/lib/theme/responsiveValue.d.ts

@@ -14,6 +14,12 @@ export type ResponsiveValue<T = number> = T | (Partial<Record<keyof ThemeBreakpo
  * For a plain value, returns it directly. For an object, returns the `default` property.
  */
 export declare function getDefaultFromResponsiveValue<T = number>(value: ResponsiveValue<T>): T;
+/**
+ * Returns the default value from a `ResponsiveValue`, or `undefined` if the
+ * input is `undefined`. Useful for extracting inline prop values from optional
+ * theme properties.
+ */
+export declare function getDefaultOrUndefined<T>(value: ResponsiveValue<T> | undefined): T | undefined;
 /**
  * Returns the non-default breakpoint overrides from a `ResponsiveValue`.
  * For a plain value, returns an empty array. For an object, returns one

package/lib/theme/responsiveValue.js

@@ -8,6 +8,16 @@ function isResponsiveObject(value) {
 export function getDefaultFromResponsiveValue(value) {
     return isResponsiveObject(value) ? value.default : value;
 }
+/**
+ * Returns the default value from a `ResponsiveValue`, or `undefined` if the
+ * input is `undefined`. Useful for extracting inline prop values from optional
+ * theme properties.
+ */
+export function getDefaultOrUndefined(value) {
+    if (value === undefined)
+        return undefined;
+    return getDefaultFromResponsiveValue(value);
+}
 /**
  * Returns the non-default breakpoint overrides from a `ResponsiveValue`.
  * For a plain value, returns an empty array. For an object, returns one

package/lib/theme/responsiveValue.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./responsiveValue.js";
+import { getDefaultFromResponsiveValue, getDefaultOrUndefined, getResponsiveOverrides } from "./responsiveValue.js";
 describe("getDefaultFromResponsiveValue", () => {
     it("returns the value when given a plain number", () => {
         expect(getDefaultFromResponsiveValue(20)).toBe(20);
@@ -43,3 +43,20 @@ describe("getResponsiveOverrides", () => {
         expect(result).toEqual([{ breakpointKey: "mobile", value: "20px" }]);
     });
 });
+describe("getDefaultOrUndefined", () => {
+    it("returns undefined when given undefined", () => {
+        expect(getDefaultOrUndefined(undefined)).toBeUndefined();
+    });
+    it("returns the value when given a plain value", () => {
+        expect(getDefaultOrUndefined(20)).toBe(20);
+    });
+    it("returns the default property from an object", () => {
+        expect(getDefaultOrUndefined({ default: 20, mobile: 10 })).toBe(20);
+    });
+    it("works with string type", () => {
+        expect(getDefaultOrUndefined("24px")).toBe("24px");
+    });
+    it("returns default from a string responsive object", () => {
+        expect(getDefaultOrUndefined({ default: "32px", mobile: "24px" })).toBe("32px");
+    });
+});

package/lib/theme/themeTypes.d.ts

@@ -1,4 +1,51 @@
 import type { ResponsiveValue } from "./responsiveValue.js";
+/**
+ * Single source of truth for text style property names and their value types.
+ * Both `TextStyles` and `TextVariantStyles` are derived from this interface.
+ */
+interface TextStyleMap {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string | number;
+    fontStyle: string;
+    lineHeight: string | number;
+    letterSpacing: string;
+    textDecoration: string;
+    textTransform: string;
+    color: string;
+    bottomSpacing: string;
+}
+/** Base text styles where each property holds a plain value. */
+export type TextStyles = {
+    [K in keyof TextStyleMap]?: TextStyleMap[K];
+};
+/** Variant text styles where each property supports responsive values. */
+export type TextVariantStyles = {
+    [K in keyof TextStyleMap]?: ResponsiveValue<TextStyleMap[K]>;
+};
+/**
+ * Defines the variants available on the `MjmlText` component.
+ *
+ * ```ts
+ * declare module "@comet/mail-react" {
+ *     interface TextVariants {
+ *         heading: true;
+ *         body: true;
+ *     }
+ * }
+ * ```
+ */
+export interface TextVariants {
+}
+type VariantsRecord = keyof TextVariants extends never ? Record<string, TextVariantStyles> : {
+    [K in keyof TextVariants]?: TextVariantStyles;
+};
+export type VariantName = keyof TextVariants extends never ? string : keyof TextVariants;
+/** Theme configuration for text styles, variants, and default variant. */
+export interface ThemeText extends TextStyles {
+    defaultVariant?: VariantName;
+    variants?: VariantsRecord;
+}
 /**
  * A resolved breakpoint with its numeric value and a ready-to-use media query
  * string that targets viewports narrower than this breakpoint.
@@ -35,6 +82,15 @@ export interface ThemeSizes {
     /** Content indentation (left/right padding) in pixels, supporting per-breakpoint values. */
     contentIndentation: ResponsiveValue;
 }
+/** Background color tokens for usage through the email layout. */
+export interface ThemeBackgroundColors {
+    body: string;
+    content: string;
+}
+/** Color tokens for usage through the email layout. */
+export interface ThemeColors {
+    background: ThemeBackgroundColors;
+}
 /**
  * The root theme object that holds all design tokens for `@comet/mail-react`.
  *
@@ -44,4 +100,7 @@ export interface ThemeSizes {
 export interface Theme {
     sizes: ThemeSizes;
     breakpoints: ThemeBreakpoints;
+    text: ThemeText;
+    colors: ThemeColors;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.0.0-beta.1",
+  "version": "9.0.0-beta.2",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
@@ -37,11 +37,11 @@
     "storybook": "^10.3.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@comet/cli": "9.0.0-beta.1",
-    "@comet/eslint-config": "9.0.0-beta.1"
+    "@comet/cli": "9.0.0-beta.2",
+    "@comet/eslint-config": "9.0.0-beta.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "storybook": ">=10.0.0"
   },
   "peerDependenciesMeta": {
@@ -66,6 +66,9 @@
     "lint": "pnpm generate-block-types && run-p lint:prettier lint:eslint lint:tsc",
     "lint:ci": "pnpm run lint",
     "lint:eslint": "eslint --max-warnings 0 src/ '**/*.json' --no-warn-ignored",
+    "lint:fix": "run-p lint:fix:eslint lint:fix:prettier",
+    "lint:fix:eslint": "pnpm run lint:eslint --fix",
+    "lint:fix:prettier": "pnpm run lint:prettier --write",
     "lint:prettier": "pnpm exec prettier --check '*.{ts,js,json,md,yml,yaml}'",
     "lint:tsc": "tsc",
     "openspec:install-skills": "openspec init --tools github-copilot,cursor,claude",