@maily-to/shared 0.0.1

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 (11) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.d.mts +114 -0
  3. package/dist/index.d.mts.map +1 -0
  4. package/dist/index.d.ts +114 -0
  5. package/dist/index.d.ts.map +1 -0
  6. package/dist/index.js +213 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/index.mjs +203 -0
  9. package/dist/index.mjs.map +1 -0
  10. package/package.json +47 -0
  11. package/readme.md +33 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License
2
+
3
+ Copyright (c) Arik Chakma
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
package/dist/index.d.mts ADDED
@@ -0,0 +1,114 @@
1
+ import * as CSS$1 from "csstype";
2
+ import * as CSS from "csstype";
3
+
4
+ //#region src/theme.d.ts
5
+ declare const allowedFallbackFonts: readonly ["Arial", "Helvetica", "Verdana", "Georgia", "Times New Roman", "serif", "sans-serif", "monospace", "cursive", "fantasy"];
6
+ type FallbackFont = (typeof allowedFallbackFonts)[number];
7
+ declare const allowedFontFormats: readonly ["woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg"];
8
+ type FontFormat = (typeof allowedFontFormats)[number];
9
+ type FontWeight = CSS$1.Properties["fontWeight"];
10
+ type FontStyle = CSS$1.Properties["fontStyle"];
11
+ interface FontProps {
12
+ /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
13
+ fontFamily: string;
14
+ /** An array is possible, but the order of the array is the priority order */
15
+ fallbackFontFamily: FallbackFont;
16
+ /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
17
+ webFont?: {
18
+ url: string;
19
+ format: FontFormat;
20
+ };
21
+ /** Default: 'normal' */
22
+ fontStyle?: FontStyle;
23
+ /** Default: 400 */
24
+ fontWeight?: FontWeight;
25
+ }
26
+ interface BaseThemeOptions {
27
+ container?: Partial<Pick<CSS$1.Properties, "backgroundColor" | "maxWidth" | "minWidth" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "borderRadius" | "borderWidth" | "borderColor">>;
28
+ body?: Partial<Pick<CSS$1.Properties, "backgroundColor" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft">>;
29
+ button?: Partial<Pick<CSS$1.Properties, "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "backgroundColor" | "color">>;
30
+ link?: Partial<Pick<CSS$1.Properties, "color">>;
31
+ font?: Pick<FontProps, "fontFamily" | "fallbackFontFamily" | "webFont"> | null;
32
+ }
33
+ /**
34
+ * The theme options for the editor.
35
+ * currently, we don't allow any customizations for the colors in the editor.
36
+ * that's why we have a separate theme for the editor.
37
+ */
38
+ interface EditorThemeOptions extends BaseThemeOptions {}
39
+ /**
40
+ * The theme options for the renderer.
41
+ * currently, we don't allow any customizations for the colors in the editor.
42
+ * that's why we have a separate theme for the renderer.
43
+ */
44
+ interface RendererThemeOptions extends BaseThemeOptions {
45
+ colors?: Partial<{
46
+ heading: string;
47
+ paragraph: string;
48
+ horizontal: string;
49
+ footer: string;
50
+ blockquoteBorder: string;
51
+ codeBackground: string;
52
+ codeText: string;
53
+ linkCardTitle: string;
54
+ linkCardDescription: string;
55
+ linkCardBadgeText: string;
56
+ linkCardBadgeBackground: string;
57
+ linkCardSubTitle: string;
58
+ }>;
59
+ fontSize?: Partial<{
60
+ paragraph: Partial<{
61
+ size: string;
62
+ lineHeight: string;
63
+ }>;
64
+ footer: Partial<{
65
+ size: string;
66
+ lineHeight: string;
67
+ }>;
68
+ }>;
69
+ }
70
+ declare const DEFAULT_FONT: FontProps;
71
+ declare const DEFAULT_LINK_TEXT_COLOR = "#111827";
72
+ declare const DEFAULT_RENDERER_THEME: RendererThemeOptions;
73
+ declare const DEFAULT_EDITOR_THEME: EditorThemeOptions;
74
+ //#endregion
75
+ //#region src/css-variables.d.ts
76
+ declare module "csstype" {
77
+ interface Properties {
78
+ [index: `--mly-${string}`]: any;
79
+ }
80
+ }
81
+ /**
82
+ * if the value is undefined, it will return an empty object
83
+ * so that we don't override the default value
84
+ * @param name - The name of the CSS variable
85
+ * @param value - The value of the CSS variable
86
+ * @returns The CSS variable value
87
+ */
88
+ declare function getVariableValue(name: `--mly-${string}`, value: any): CSS.Properties;
89
+ /**
90
+ * Get the CSS variables for the theme
91
+ * @param theme - The theme
92
+ * @returns The CSS variables
93
+ * @example
94
+ * ```ts
95
+ * const theme = {
96
+ * body: {
97
+ * backgroundColor: 'red',
98
+ * },
99
+ * };
100
+ *
101
+ * const cssVariables = getCssVariables(theme);
102
+ *
103
+ * console.log(cssVariables);
104
+ * // { '--mly-body-background-color': 'red' }
105
+ */
106
+ declare function getMailyCssVariables(theme: EditorThemeOptions): CSS.Properties;
107
+ //#endregion
108
+ //#region src/font.d.ts
109
+ type Font = Pick<FontProps, "fontFamily" | "fallbackFontFamily" | "webFont">;
110
+ declare function loadFont(font: Font): void;
111
+ declare function fontStyle(font: Font): string;
112
+ //#endregion
113
+ export { BaseThemeOptions, DEFAULT_EDITOR_THEME, DEFAULT_FONT, DEFAULT_LINK_TEXT_COLOR, DEFAULT_RENDERER_THEME, EditorThemeOptions, FallbackFont, FontFormat, FontProps, RendererThemeOptions, allowedFallbackFonts, allowedFontFormats, fontStyle, getMailyCssVariables, getVariableValue, loadFont };
114
+ //# sourceMappingURL=index.d.mts.map
package/dist/index.d.mts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.mts","names":["DEFAULT_FONT: FontProps","DEFAULT_RENDERER_THEME: RendererThemeOptions","DEFAULT_EDITOR_THEME: EditorThemeOptions","name: `--mly-${string}`","value: any","theme: EditorThemeOptions","font: Font"],"sources":["../src/theme.ts","../src/css-variables.ts","../src/font.ts"],"sourcesContent":[],"mappings":";;;;cAEa;KAaD,YAAA,WAAuB;cAEtB;AAfA,KAwBD,UAAA,GAxBC,CAAA,OAwBoB,kBAd/B,CAAA,CAAA,MAAA,CAAA;AAGF,KAaK,UAAA,GAAa,KAAA,CAAI,UAba,CAAA,YAAA,CAAA;AAEnC,KAYK,SAAA,GAAY,KAAA,CAAI,UANnB,CAAA,WAAA,CAAA;AAGU,UAKK,SAAA,CALgB;EAAA;EAEX,UACjB,EAAA,MAAA;EAEL;EAAiB,kBAAA,EAIK,YAJL;EAAA;EAIK,OAIV,CAAA,EAAA;IAAA,GAAA,EAGE,MAAA;IAAA,MAEC,EALH,UAKG;EAAA,CAAA;EAGf;EAAiB,SAAA,CAAA,EALH,SAKG;EAAA;EAGP,UADN,CAAA,EALW,UAKX;;AAgBE,UAlBW,gBAAA,CAkBP;EAAA,SADN,CAAA,EAhBU,OAgBV,CAfA,IAeA,CAdE,KAAA,CAAI,UAcN,EAAA,iBAAA,GAAA,UAAA,GAAA,UAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,aAAA,CAAA,CAAA;EAAA,IAAA,CAAA,EADK,OAAA,CACL,IADK,CAEH,KAAA,CAAI,UAFD,EAAA,iBAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,aAAA,CAAA,CAAA;EAAA,MAYH,CAAA,EAFK,OAED,CADN,IACM,CAAJ,KAAA,CAAI,UAAA,EAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,aAAA,GAAA,iBAAA,GAAA,OAAA,CAAA,CAAA;EAAA,IAAA,CAAA,EASD,OAVL,CAUa,IAVb,CAUkB,KAAA,CAAI,UAVtB,EAAA,OAAA,CAAA,CAAA;EAAA,IAAA,CAAA,EAWK,IAZE,CAaP,SAbO,EAAA,YAAA,GAAA,oBAAA,GAAA,SAAA,CAAA,GAAA,IAAA;;;;;;AAYF;AAWQ,UAAA,kBAAA,SAA2B,gBAAA,CAAA,CAAA;AAO5C;;;;;AAea,UAfI,oBAAA,SAA6B,gBAejC,CAAA;EAAA,MAfiC,CAAA,EACnC,OADmC,CAAA;IAAA,OAAA,EAAA,MAAA;IA2B9C,SAAaA,EAAAA,MAAc;IAS3B,UAAa,EAAA,MAAA;IAEb,MAAaC,EAAAA,MAAAA;IA6Db,gBAAaC,EAAAA,MAAAA;;;;ICzMmD,mBAAA,EAAA,MAAA;IAehE,iBAAgB,EAAA,MAAA;IA8BhB,uBAAgB,EAAA,MAAA;IAAA,gBAAA,EAAA,MAAA;EAAA,CAAA,CAAA;EACP,QACN,CAAA,EDsEU,OCtEN,CAAA;IAAA,SAAA,EDuEQ,OCvER,CAAA;;;;IChDkC,MAEpC,EFyHO,OEzHP,CAAA;MAAA,IAAA,EAAA,MAAA;MAAA,UAAY,EAAA,MAAA;IAAA,CAAA,CAAA;EAAL,CAAA,CAAA;AAEZ;AAQgB,cFsHHF,YEtHmB,EFsHL,SEtHK;cF+HnB,uBAAA;cAEAC,wBAAwB;cA6DxBC,sBAAsB;;;;;IAxMnC,CAAA,KAAa,EAAA,SAAA,MAAA,EAUX,CAAA,EAAA,GAAA;EAGF;AAEA;AASA;AAAiC;AAEX;AAGtB;;;;AAWc,iBC1BE,gBAAA,CD0BF,IAAA,EAAA,SAAA,MAAA,EAAA,EAAA,KAAA,EAAA,GAAA,CAAA,ECvBX,GAAA,CAAI,UDuBO;;AAEC;AAGf;;;;;;;;;;;;;;;AAsCS,iBCvCO,oBAAA,CDuCP,KAAA,ECtCA,kBDsCA,CAAA,ECrCN,GAAA,CAAI,UDqCE;;;KEnFJ,IAAA,GAAO,KAAK;iBAED,QAAA,OAAe;iBAQf,SAAA,OAAgB"}
package/dist/index.d.ts ADDED
@@ -0,0 +1,114 @@
1
+ import * as CSS$1 from "csstype";
2
+ import * as CSS from "csstype";
3
+
4
+ //#region src/theme.d.ts
5
+ declare const allowedFallbackFonts: readonly ["Arial", "Helvetica", "Verdana", "Georgia", "Times New Roman", "serif", "sans-serif", "monospace", "cursive", "fantasy"];
6
+ type FallbackFont = (typeof allowedFallbackFonts)[number];
7
+ declare const allowedFontFormats: readonly ["woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg"];
8
+ type FontFormat = (typeof allowedFontFormats)[number];
9
+ type FontWeight = CSS$1.Properties["fontWeight"];
10
+ type FontStyle = CSS$1.Properties["fontStyle"];
11
+ interface FontProps {
12
+ /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
13
+ fontFamily: string;
14
+ /** An array is possible, but the order of the array is the priority order */
15
+ fallbackFontFamily: FallbackFont;
16
+ /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
17
+ webFont?: {
18
+ url: string;
19
+ format: FontFormat;
20
+ };
21
+ /** Default: 'normal' */
22
+ fontStyle?: FontStyle;
23
+ /** Default: 400 */
24
+ fontWeight?: FontWeight;
25
+ }
26
+ interface BaseThemeOptions {
27
+ container?: Partial<Pick<CSS$1.Properties, "backgroundColor" | "maxWidth" | "minWidth" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "borderRadius" | "borderWidth" | "borderColor">>;
28
+ body?: Partial<Pick<CSS$1.Properties, "backgroundColor" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft">>;
29
+ button?: Partial<Pick<CSS$1.Properties, "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "backgroundColor" | "color">>;
30
+ link?: Partial<Pick<CSS$1.Properties, "color">>;
31
+ font?: Pick<FontProps, "fontFamily" | "fallbackFontFamily" | "webFont"> | null;
32
+ }
33
+ /**
34
+ * The theme options for the editor.
35
+ * currently, we don't allow any customizations for the colors in the editor.
36
+ * that's why we have a separate theme for the editor.
37
+ */
38
+ interface EditorThemeOptions extends BaseThemeOptions {}
39
+ /**
40
+ * The theme options for the renderer.
41
+ * currently, we don't allow any customizations for the colors in the editor.
42
+ * that's why we have a separate theme for the renderer.
43
+ */
44
+ interface RendererThemeOptions extends BaseThemeOptions {
45
+ colors?: Partial<{
46
+ heading: string;
47
+ paragraph: string;
48
+ horizontal: string;
49
+ footer: string;
50
+ blockquoteBorder: string;
51
+ codeBackground: string;
52
+ codeText: string;
53
+ linkCardTitle: string;
54
+ linkCardDescription: string;
55
+ linkCardBadgeText: string;
56
+ linkCardBadgeBackground: string;
57
+ linkCardSubTitle: string;
58
+ }>;
59
+ fontSize?: Partial<{
60
+ paragraph: Partial<{
61
+ size: string;
62
+ lineHeight: string;
63
+ }>;
64
+ footer: Partial<{
65
+ size: string;
66
+ lineHeight: string;
67
+ }>;
68
+ }>;
69
+ }
70
+ declare const DEFAULT_FONT: FontProps;
71
+ declare const DEFAULT_LINK_TEXT_COLOR = "#111827";
72
+ declare const DEFAULT_RENDERER_THEME: RendererThemeOptions;
73
+ declare const DEFAULT_EDITOR_THEME: EditorThemeOptions;
74
+ //#endregion
75
+ //#region src/css-variables.d.ts
76
+ declare module "csstype" {
77
+ interface Properties {
78
+ [index: `--mly-${string}`]: any;
79
+ }
80
+ }
81
+ /**
82
+ * if the value is undefined, it will return an empty object
83
+ * so that we don't override the default value
84
+ * @param name - The name of the CSS variable
85
+ * @param value - The value of the CSS variable
86
+ * @returns The CSS variable value
87
+ */
88
+ declare function getVariableValue(name: `--mly-${string}`, value: any): CSS.Properties;
89
+ /**
90
+ * Get the CSS variables for the theme
91
+ * @param theme - The theme
92
+ * @returns The CSS variables
93
+ * @example
94
+ * ```ts
95
+ * const theme = {
96
+ * body: {
97
+ * backgroundColor: 'red',
98
+ * },
99
+ * };
100
+ *
101
+ * const cssVariables = getCssVariables(theme);
102
+ *
103
+ * console.log(cssVariables);
104
+ * // { '--mly-body-background-color': 'red' }
105
+ */
106
+ declare function getMailyCssVariables(theme: EditorThemeOptions): CSS.Properties;
107
+ //#endregion
108
+ //#region src/font.d.ts
109
+ type Font = Pick<FontProps, "fontFamily" | "fallbackFontFamily" | "webFont">;
110
+ declare function loadFont(font: Font): void;
111
+ declare function fontStyle(font: Font): string;
112
+ //#endregion
113
+ export { BaseThemeOptions, DEFAULT_EDITOR_THEME, DEFAULT_FONT, DEFAULT_LINK_TEXT_COLOR, DEFAULT_RENDERER_THEME, EditorThemeOptions, FallbackFont, FontFormat, FontProps, RendererThemeOptions, allowedFallbackFonts, allowedFontFormats, fontStyle, getMailyCssVariables, getVariableValue, loadFont };
114
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","names":["DEFAULT_FONT: FontProps","DEFAULT_RENDERER_THEME: RendererThemeOptions","DEFAULT_EDITOR_THEME: EditorThemeOptions","name: `--mly-${string}`","value: any","theme: EditorThemeOptions","font: Font"],"sources":["../src/theme.ts","../src/css-variables.ts","../src/font.ts"],"sourcesContent":[],"mappings":";;;;cAEa;KAaD,YAAA,WAAuB;cAEtB;AAfA,KAwBD,UAAA,GAxBC,CAAA,OAwBoB,kBAd/B,CAAA,CAAA,MAAA,CAAA;AAGF,KAaK,UAAA,GAAa,KAAA,CAAI,UAba,CAAA,YAAA,CAAA;AAEnC,KAYK,SAAA,GAAY,KAAA,CAAI,UANnB,CAAA,WAAA,CAAA;AAGU,UAKK,SAAA,CALgB;EAAA;EAEX,UACjB,EAAA,MAAA;EAEL;EAAiB,kBAAA,EAIK,YAJL;EAAA;EAIK,OAIV,CAAA,EAAA;IAAA,GAAA,EAGE,MAAA;IAAA,MAEC,EALH,UAKG;EAAA,CAAA;EAGf;EAAiB,SAAA,CAAA,EALH,SAKG;EAAA;EAGP,UADN,CAAA,EALW,UAKX;;AAgBE,UAlBW,gBAAA,CAkBP;EAAA,SADN,CAAA,EAhBU,OAgBV,CAfA,IAeA,CAdE,KAAA,CAAI,UAcN,EAAA,iBAAA,GAAA,UAAA,GAAA,UAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,aAAA,GAAA,cAAA,GAAA,aAAA,GAAA,aAAA,CAAA,CAAA;EAAA,IAAA,CAAA,EADK,OAAA,CACL,IADK,CAEH,KAAA,CAAI,UAFD,EAAA,iBAAA,GAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,aAAA,CAAA,CAAA;EAAA,MAYH,CAAA,EAFK,OAED,CADN,IACM,CAAJ,KAAA,CAAI,UAAA,EAAA,YAAA,GAAA,cAAA,GAAA,eAAA,GAAA,aAAA,GAAA,iBAAA,GAAA,OAAA,CAAA,CAAA;EAAA,IAAA,CAAA,EASD,OAVL,CAUa,IAVb,CAUkB,KAAA,CAAI,UAVtB,EAAA,OAAA,CAAA,CAAA;EAAA,IAAA,CAAA,EAWK,IAZE,CAaP,SAbO,EAAA,YAAA,GAAA,oBAAA,GAAA,SAAA,CAAA,GAAA,IAAA;;;;;;AAYF;AAWQ,UAAA,kBAAA,SAA2B,gBAAA,CAAA,CAAA;AAO5C;;;;;AAea,UAfI,oBAAA,SAA6B,gBAejC,CAAA;EAAA,MAfiC,CAAA,EACnC,OADmC,CAAA;IAAA,OAAA,EAAA,MAAA;IA2B9C,SAAaA,EAAAA,MAAc;IAS3B,UAAa,EAAA,MAAA;IAEb,MAAaC,EAAAA,MAAAA;IA6Db,gBAAaC,EAAAA,MAAAA;;;;ICzMmD,mBAAA,EAAA,MAAA;IAehE,iBAAgB,EAAA,MAAA;IA8BhB,uBAAgB,EAAA,MAAA;IAAA,gBAAA,EAAA,MAAA;EAAA,CAAA,CAAA;EACP,QACN,CAAA,EDsEU,OCtEN,CAAA;IAAA,SAAA,EDuEQ,OCvER,CAAA;;;;IChDkC,MAEpC,EFyHO,OEzHP,CAAA;MAAA,IAAA,EAAA,MAAA;MAAA,UAAY,EAAA,MAAA;IAAA,CAAA,CAAA;EAAL,CAAA,CAAA;AAEZ;AAQgB,cFsHHF,YEtHmB,EFsHL,SEtHK;cF+HnB,uBAAA;cAEAC,wBAAwB;cA6DxBC,sBAAsB;;;;;IAxMnC,CAAA,KAAa,EAAA,SAAA,MAAA,EAUX,CAAA,EAAA,GAAA;EAGF;AAEA;AASA;AAAiC;AAEX;AAGtB;;;;AAWc,iBC1BE,gBAAA,CD0BF,IAAA,EAAA,SAAA,MAAA,EAAA,EAAA,KAAA,EAAA,GAAA,CAAA,ECvBX,GAAA,CAAI,UDuBO;;AAEC;AAGf;;;;;;;;;;;;;;;AAsCS,iBCvCO,oBAAA,CDuCP,KAAA,ECtCA,kBDsCA,CAAA,ECrCN,GAAA,CAAI,UDqCE;;;KEnFJ,IAAA,GAAO,KAAK;iBAED,QAAA,OAAe;iBAQf,SAAA,OAAgB"}
package/dist/index.js ADDED
@@ -0,0 +1,213 @@
1
+
2
+ //#region src/theme.ts
3
+ const allowedFallbackFonts = [
4
+ "Arial",
5
+ "Helvetica",
6
+ "Verdana",
7
+ "Georgia",
8
+ "Times New Roman",
9
+ "serif",
10
+ "sans-serif",
11
+ "monospace",
12
+ "cursive",
13
+ "fantasy"
14
+ ];
15
+ const allowedFontFormats = [
16
+ "woff",
17
+ "woff2",
18
+ "truetype",
19
+ "opentype",
20
+ "embedded-opentype",
21
+ "svg"
22
+ ];
23
+ const DEFAULT_FONT = {
24
+ fallbackFontFamily: "sans-serif",
25
+ fontFamily: "Inter",
26
+ webFont: {
27
+ url: "https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19",
28
+ format: "woff2"
29
+ }
30
+ };
31
+ const DEFAULT_LINK_TEXT_COLOR = "#111827";
32
+ const DEFAULT_RENDERER_THEME = {
33
+ colors: {
34
+ heading: "#111827",
35
+ paragraph: "#374151",
36
+ horizontal: "#EAEAEA",
37
+ footer: "#64748B",
38
+ blockquoteBorder: "#D1D5DB",
39
+ codeBackground: "#EFEFEF",
40
+ codeText: "#111827",
41
+ linkCardTitle: "#111827",
42
+ linkCardDescription: "#6B7280",
43
+ linkCardBadgeText: "#111827",
44
+ linkCardBadgeBackground: "#FEF08A",
45
+ linkCardSubTitle: "#6B7280"
46
+ },
47
+ fontSize: {
48
+ paragraph: {
49
+ size: "15px",
50
+ lineHeight: "26.25px"
51
+ },
52
+ footer: {
53
+ size: "14px",
54
+ lineHeight: "24px"
55
+ }
56
+ },
57
+ container: {
58
+ backgroundColor: "#ffffff",
59
+ maxWidth: "600px",
60
+ minWidth: "300px",
61
+ paddingTop: "0.5rem",
62
+ paddingRight: "0.5rem",
63
+ paddingBottom: "0.5rem",
64
+ paddingLeft: "0.5rem",
65
+ borderRadius: "0px",
66
+ borderWidth: "0px",
67
+ borderColor: "transparent"
68
+ },
69
+ body: {
70
+ backgroundColor: "#ffffff",
71
+ paddingTop: "0px",
72
+ paddingRight: "0px",
73
+ paddingBottom: "0px",
74
+ paddingLeft: "0px"
75
+ },
76
+ button: {
77
+ backgroundColor: "#000000",
78
+ color: "#ffffff",
79
+ paddingTop: "10px",
80
+ paddingRight: "32px",
81
+ paddingBottom: "10px",
82
+ paddingLeft: "32px"
83
+ },
84
+ link: { color: DEFAULT_LINK_TEXT_COLOR },
85
+ font: DEFAULT_FONT
86
+ };
87
+ const DEFAULT_EDITOR_THEME = {
88
+ container: {
89
+ backgroundColor: "#ffffff",
90
+ maxWidth: "600px",
91
+ minWidth: "300px",
92
+ paddingTop: "8px",
93
+ paddingRight: "8px",
94
+ paddingBottom: "8px",
95
+ paddingLeft: "8px",
96
+ borderRadius: "0px",
97
+ borderWidth: "0px",
98
+ borderColor: "transparent"
99
+ },
100
+ body: {
101
+ backgroundColor: "#ffffff",
102
+ paddingTop: "0px",
103
+ paddingRight: "0px",
104
+ paddingBottom: "0px",
105
+ paddingLeft: "0px"
106
+ },
107
+ button: {
108
+ backgroundColor: "#000000",
109
+ color: "#ffffff",
110
+ paddingTop: "10px",
111
+ paddingRight: "32px",
112
+ paddingBottom: "10px",
113
+ paddingLeft: "32px"
114
+ },
115
+ link: { color: DEFAULT_LINK_TEXT_COLOR },
116
+ font: DEFAULT_FONT
117
+ };
118
+
119
+ //#endregion
120
+ //#region src/css-variables.ts
121
+ /**
122
+ * if the value is undefined, it will return an empty object
123
+ * so that we don't override the default value
124
+ * @param name - The name of the CSS variable
125
+ * @param value - The value of the CSS variable
126
+ * @returns The CSS variable value
127
+ */
128
+ function getVariableValue(name, value) {
129
+ if (value === void 0 || value === null || value === "") return {};
130
+ return { [name]: value };
131
+ }
132
+ /**
133
+ * Get the CSS variables for the theme
134
+ * @param theme - The theme
135
+ * @returns The CSS variables
136
+ * @example
137
+ * ```ts
138
+ * const theme = {
139
+ * body: {
140
+ * backgroundColor: 'red',
141
+ * },
142
+ * };
143
+ *
144
+ * const cssVariables = getCssVariables(theme);
145
+ *
146
+ * console.log(cssVariables);
147
+ * // { '--mly-body-background-color': 'red' }
148
+ */
149
+ function getMailyCssVariables(theme) {
150
+ const font = theme.font || DEFAULT_FONT;
151
+ return {
152
+ ...getVariableValue("--mly-body-background-color", theme.body?.backgroundColor),
153
+ ...getVariableValue("--mly-body-padding-top", theme.body?.paddingTop),
154
+ ...getVariableValue("--mly-body-padding-right", theme.body?.paddingRight),
155
+ ...getVariableValue("--mly-body-padding-bottom", theme.body?.paddingBottom),
156
+ ...getVariableValue("--mly-body-padding-left", theme.body?.paddingLeft),
157
+ ...getVariableValue("--mly-container-background-color", theme.container?.backgroundColor),
158
+ ...getVariableValue("--mly-container-max-width", theme.container?.maxWidth),
159
+ ...getVariableValue("--mly-container-min-width", theme.container?.minWidth),
160
+ ...getVariableValue("--mly-container-padding-top", theme.container?.paddingTop),
161
+ ...getVariableValue("--mly-container-padding-right", theme.container?.paddingRight),
162
+ ...getVariableValue("--mly-container-padding-bottom", theme.container?.paddingBottom),
163
+ ...getVariableValue("--mly-container-padding-left", theme.container?.paddingLeft),
164
+ ...getVariableValue("--mly-container-border-radius", theme.container?.borderRadius),
165
+ ...getVariableValue("--mly-container-border-width", theme.container?.borderWidth),
166
+ ...getVariableValue("--mly-container-border-color", theme.container?.borderColor),
167
+ ...getVariableValue("--mly-button-background-color", theme.button?.backgroundColor),
168
+ ...getVariableValue("--mly-button-text-color", theme.button?.color),
169
+ ...getVariableValue("--mly-button-padding-top", theme.button?.paddingTop),
170
+ ...getVariableValue("--mly-button-padding-right", theme.button?.paddingRight),
171
+ ...getVariableValue("--mly-button-padding-bottom", theme.button?.paddingBottom),
172
+ ...getVariableValue("--mly-button-padding-left", theme.button?.paddingLeft),
173
+ ...getVariableValue("--mly-link-color", theme.link?.color),
174
+ ...getVariableValue("--mly-font-family", font.fontFamily),
175
+ ...getVariableValue("--mly-font-fallback-family", font.fallbackFontFamily),
176
+ "--mly-font": `var(--mly-font-family), var(--mly-font-fallback-family)`
177
+ };
178
+ }
179
+
180
+ //#endregion
181
+ //#region src/font.ts
182
+ function loadFont(font) {
183
+ const style = fontStyle(font);
184
+ const styleElement = document.createElement("style");
185
+ styleElement.textContent = style;
186
+ document.head.appendChild(styleElement);
187
+ }
188
+ function fontStyle(font) {
189
+ const { fontFamily, fallbackFontFamily, webFont } = font;
190
+ const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
191
+ const style = `
192
+ @font-face {
193
+ font-family: '${fontFamily}';
194
+ font-style: normal;
195
+ font-weight: 400;
196
+ mso-font-alt: '${fallbackFontFamily}';
197
+ ${src}
198
+ }`;
199
+ return style;
200
+ }
201
+
202
+ //#endregion
203
+ exports.DEFAULT_EDITOR_THEME = DEFAULT_EDITOR_THEME;
204
+ exports.DEFAULT_FONT = DEFAULT_FONT;
205
+ exports.DEFAULT_LINK_TEXT_COLOR = DEFAULT_LINK_TEXT_COLOR;
206
+ exports.DEFAULT_RENDERER_THEME = DEFAULT_RENDERER_THEME;
207
+ exports.allowedFallbackFonts = allowedFallbackFonts;
208
+ exports.allowedFontFormats = allowedFontFormats;
209
+ exports.fontStyle = fontStyle;
210
+ exports.getMailyCssVariables = getMailyCssVariables;
211
+ exports.getVariableValue = getVariableValue;
212
+ exports.loadFont = loadFont;
213
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["DEFAULT_FONT: FontProps","DEFAULT_RENDERER_THEME: RendererThemeOptions","DEFAULT_EDITOR_THEME: EditorThemeOptions","name: `--mly-${string}`","value: any","theme: EditorThemeOptions","font: Font"],"sources":["../src/theme.ts","../src/css-variables.ts","../src/font.ts"],"sourcesContent":["import type * as CSS from 'csstype';\n\nexport const allowedFallbackFonts = [\n 'Arial',\n 'Helvetica',\n 'Verdana',\n 'Georgia',\n 'Times New Roman',\n 'serif',\n 'sans-serif',\n 'monospace',\n 'cursive',\n 'fantasy',\n] as const;\n\nexport type FallbackFont = (typeof allowedFallbackFonts)[number];\n\nexport const allowedFontFormats = [\n 'woff',\n 'woff2',\n 'truetype',\n 'opentype',\n 'embedded-opentype',\n 'svg',\n] as const;\n\nexport type FontFormat = (typeof allowedFontFormats)[number];\n\ntype FontWeight = CSS.Properties['fontWeight'];\ntype FontStyle = CSS.Properties['fontStyle'];\n\nexport interface FontProps {\n /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */\n fontFamily: string;\n /** An array is possible, but the order of the array is the priority order */\n fallbackFontFamily: FallbackFont;\n /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */\n webFont?: {\n url: string;\n format: FontFormat;\n };\n /** Default: 'normal' */\n fontStyle?: FontStyle;\n /** Default: 400 */\n fontWeight?: FontWeight;\n}\n\nexport interface BaseThemeOptions {\n container?: Partial<\n Pick<\n CSS.Properties,\n | 'backgroundColor'\n | 'maxWidth'\n | 'minWidth'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'borderRadius'\n | 'borderWidth'\n | 'borderColor'\n >\n >;\n body?: Partial<\n Pick<\n CSS.Properties,\n | 'backgroundColor'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n >\n >;\n button?: Partial<\n Pick<\n CSS.Properties,\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'backgroundColor'\n | 'color'\n >\n >;\n link?: Partial<Pick<CSS.Properties, 'color'>>;\n font?: Pick<\n FontProps,\n 'fontFamily' | 'fallbackFontFamily' | 'webFont'\n > | null;\n}\n\n/**\n * The theme options for the editor.\n * currently, we don't allow any customizations for the colors in the editor.\n * that's why we have a separate theme for the editor.\n */\nexport interface EditorThemeOptions extends BaseThemeOptions {}\n\n/**\n * The theme options for the renderer.\n * currently, we don't allow any customizations for the colors in the editor.\n * that's why we have a separate theme for the renderer.\n */\nexport interface RendererThemeOptions extends BaseThemeOptions {\n colors?: Partial<{\n heading: string;\n paragraph: string;\n horizontal: string;\n footer: string;\n blockquoteBorder: string;\n codeBackground: string;\n codeText: string;\n linkCardTitle: string;\n linkCardDescription: string;\n linkCardBadgeText: string;\n linkCardBadgeBackground: string;\n linkCardSubTitle: string;\n }>;\n fontSize?: Partial<{\n paragraph: Partial<{\n size: string;\n lineHeight: string;\n }>;\n footer: Partial<{\n size: string;\n lineHeight: string;\n }>;\n }>;\n}\n\nexport const DEFAULT_FONT: FontProps = {\n fallbackFontFamily: 'sans-serif',\n fontFamily: 'Inter',\n webFont: {\n url: 'https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19',\n format: 'woff2',\n },\n};\n\nexport const DEFAULT_LINK_TEXT_COLOR = '#111827';\n\nexport const DEFAULT_RENDERER_THEME: RendererThemeOptions = {\n colors: {\n heading: '#111827',\n paragraph: '#374151',\n horizontal: '#EAEAEA',\n footer: '#64748B',\n blockquoteBorder: '#D1D5DB',\n codeBackground: '#EFEFEF',\n codeText: '#111827',\n linkCardTitle: '#111827',\n linkCardDescription: '#6B7280',\n linkCardBadgeText: '#111827',\n linkCardBadgeBackground: '#FEF08A',\n linkCardSubTitle: '#6B7280',\n },\n fontSize: {\n paragraph: {\n size: '15px',\n lineHeight: '26.25px',\n },\n footer: {\n size: '14px',\n lineHeight: '24px',\n },\n },\n\n container: {\n backgroundColor: '#ffffff',\n maxWidth: '600px',\n minWidth: '300px',\n paddingTop: '0.5rem',\n paddingRight: '0.5rem',\n paddingBottom: '0.5rem',\n paddingLeft: '0.5rem',\n\n borderRadius: '0px',\n borderWidth: '0px',\n borderColor: 'transparent',\n },\n body: {\n backgroundColor: '#ffffff',\n\n paddingTop: '0px',\n paddingRight: '0px',\n paddingBottom: '0px',\n paddingLeft: '0px',\n },\n button: {\n backgroundColor: '#000000',\n color: '#ffffff',\n paddingTop: '10px',\n paddingRight: '32px',\n paddingBottom: '10px',\n paddingLeft: '32px',\n },\n link: {\n color: DEFAULT_LINK_TEXT_COLOR,\n },\n font: DEFAULT_FONT,\n};\n\nexport const DEFAULT_EDITOR_THEME: EditorThemeOptions = {\n container: {\n backgroundColor: '#ffffff',\n maxWidth: '600px',\n minWidth: '300px',\n paddingTop: '8px',\n paddingRight: '8px',\n paddingBottom: '8px',\n paddingLeft: '8px',\n\n borderRadius: '0px',\n borderWidth: '0px',\n borderColor: 'transparent',\n },\n body: {\n backgroundColor: '#ffffff',\n\n paddingTop: '0px',\n paddingRight: '0px',\n paddingBottom: '0px',\n paddingLeft: '0px',\n },\n button: {\n backgroundColor: '#000000',\n color: '#ffffff',\n paddingTop: '10px',\n paddingRight: '32px',\n paddingBottom: '10px',\n paddingLeft: '32px',\n },\n link: {\n color: DEFAULT_LINK_TEXT_COLOR,\n },\n font: DEFAULT_FONT,\n};\n","import type * as CSS from 'csstype';\nimport { DEFAULT_FONT, type EditorThemeOptions } from './theme';\n\ndeclare module 'csstype' {\n interface Properties {\n [index: `--mly-${string}`]: any;\n }\n}\n\n/**\n * if the value is undefined, it will return an empty object\n * so that we don't override the default value\n * @param name - The name of the CSS variable\n * @param value - The value of the CSS variable\n * @returns The CSS variable value\n */\nexport function getVariableValue(\n name: `--mly-${string}`,\n value: any\n): CSS.Properties {\n if (value === undefined || value === null || value === '') {\n return {};\n }\n\n return {\n [name]: value,\n };\n}\n\n/**\n * Get the CSS variables for the theme\n * @param theme - The theme\n * @returns The CSS variables\n * @example\n * ```ts\n * const theme = {\n * body: {\n * backgroundColor: 'red',\n * },\n * };\n *\n * const cssVariables = getCssVariables(theme);\n *\n * console.log(cssVariables);\n * // { '--mly-body-background-color': 'red' }\n */\nexport function getMailyCssVariables(\n theme: EditorThemeOptions\n): CSS.Properties {\n const font = theme.font || DEFAULT_FONT;\n\n return {\n ...getVariableValue(\n '--mly-body-background-color',\n theme.body?.backgroundColor\n ),\n ...getVariableValue('--mly-body-padding-top', theme.body?.paddingTop),\n ...getVariableValue('--mly-body-padding-right', theme.body?.paddingRight),\n ...getVariableValue('--mly-body-padding-bottom', theme.body?.paddingBottom),\n ...getVariableValue('--mly-body-padding-left', theme.body?.paddingLeft),\n\n ...getVariableValue(\n '--mly-container-background-color',\n theme.container?.backgroundColor\n ),\n ...getVariableValue('--mly-container-max-width', theme.container?.maxWidth),\n ...getVariableValue('--mly-container-min-width', theme.container?.minWidth),\n\n ...getVariableValue(\n '--mly-container-padding-top',\n theme.container?.paddingTop\n ),\n ...getVariableValue(\n '--mly-container-padding-right',\n theme.container?.paddingRight\n ),\n ...getVariableValue(\n '--mly-container-padding-bottom',\n theme.container?.paddingBottom\n ),\n ...getVariableValue(\n '--mly-container-padding-left',\n theme.container?.paddingLeft\n ),\n\n ...getVariableValue(\n '--mly-container-border-radius',\n theme.container?.borderRadius\n ),\n ...getVariableValue(\n '--mly-container-border-width',\n theme.container?.borderWidth\n ),\n ...getVariableValue(\n '--mly-container-border-color',\n theme.container?.borderColor\n ),\n\n ...getVariableValue(\n '--mly-button-background-color',\n theme.button?.backgroundColor\n ),\n ...getVariableValue('--mly-button-text-color', theme.button?.color),\n ...getVariableValue('--mly-button-padding-top', theme.button?.paddingTop),\n ...getVariableValue(\n '--mly-button-padding-right',\n theme.button?.paddingRight\n ),\n ...getVariableValue(\n '--mly-button-padding-bottom',\n theme.button?.paddingBottom\n ),\n ...getVariableValue('--mly-button-padding-left', theme.button?.paddingLeft),\n\n ...getVariableValue('--mly-link-color', theme.link?.color),\n\n ...getVariableValue('--mly-font-family', font.fontFamily),\n ...getVariableValue('--mly-font-fallback-family', font.fallbackFontFamily),\n '--mly-font': `var(--mly-font-family), var(--mly-font-fallback-family)`,\n };\n}\n","import type { FontProps } from './theme';\n\ntype Font = Pick<FontProps, 'fontFamily' | 'fallbackFontFamily' | 'webFont'>;\n\nexport function loadFont(font: Font): void {\n const style = fontStyle(font);\n\n const styleElement = document.createElement('style');\n styleElement.textContent = style;\n document.head.appendChild(styleElement);\n}\n\nexport function fontStyle(font: Font): string {\n const { fontFamily, fallbackFontFamily, webFont } = font;\n\n const src = webFont\n ? `src: url(${webFont.url}) format('${webFont.format}');`\n : '';\n\n const style = `\n @font-face {\n font-family: '${fontFamily}';\n font-style: normal;\n font-weight: 400;\n mso-font-alt: '${fallbackFontFamily}';\n ${src}\n }`;\n\n return style;\n}\n"],"mappings":"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"}
package/dist/index.mjs ADDED
@@ -0,0 +1,203 @@
1
+ //#region src/theme.ts
2
+ const allowedFallbackFonts = [
3
+ "Arial",
4
+ "Helvetica",
5
+ "Verdana",
6
+ "Georgia",
7
+ "Times New Roman",
8
+ "serif",
9
+ "sans-serif",
10
+ "monospace",
11
+ "cursive",
12
+ "fantasy"
13
+ ];
14
+ const allowedFontFormats = [
15
+ "woff",
16
+ "woff2",
17
+ "truetype",
18
+ "opentype",
19
+ "embedded-opentype",
20
+ "svg"
21
+ ];
22
+ const DEFAULT_FONT = {
23
+ fallbackFontFamily: "sans-serif",
24
+ fontFamily: "Inter",
25
+ webFont: {
26
+ url: "https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19",
27
+ format: "woff2"
28
+ }
29
+ };
30
+ const DEFAULT_LINK_TEXT_COLOR = "#111827";
31
+ const DEFAULT_RENDERER_THEME = {
32
+ colors: {
33
+ heading: "#111827",
34
+ paragraph: "#374151",
35
+ horizontal: "#EAEAEA",
36
+ footer: "#64748B",
37
+ blockquoteBorder: "#D1D5DB",
38
+ codeBackground: "#EFEFEF",
39
+ codeText: "#111827",
40
+ linkCardTitle: "#111827",
41
+ linkCardDescription: "#6B7280",
42
+ linkCardBadgeText: "#111827",
43
+ linkCardBadgeBackground: "#FEF08A",
44
+ linkCardSubTitle: "#6B7280"
45
+ },
46
+ fontSize: {
47
+ paragraph: {
48
+ size: "15px",
49
+ lineHeight: "26.25px"
50
+ },
51
+ footer: {
52
+ size: "14px",
53
+ lineHeight: "24px"
54
+ }
55
+ },
56
+ container: {
57
+ backgroundColor: "#ffffff",
58
+ maxWidth: "600px",
59
+ minWidth: "300px",
60
+ paddingTop: "0.5rem",
61
+ paddingRight: "0.5rem",
62
+ paddingBottom: "0.5rem",
63
+ paddingLeft: "0.5rem",
64
+ borderRadius: "0px",
65
+ borderWidth: "0px",
66
+ borderColor: "transparent"
67
+ },
68
+ body: {
69
+ backgroundColor: "#ffffff",
70
+ paddingTop: "0px",
71
+ paddingRight: "0px",
72
+ paddingBottom: "0px",
73
+ paddingLeft: "0px"
74
+ },
75
+ button: {
76
+ backgroundColor: "#000000",
77
+ color: "#ffffff",
78
+ paddingTop: "10px",
79
+ paddingRight: "32px",
80
+ paddingBottom: "10px",
81
+ paddingLeft: "32px"
82
+ },
83
+ link: { color: DEFAULT_LINK_TEXT_COLOR },
84
+ font: DEFAULT_FONT
85
+ };
86
+ const DEFAULT_EDITOR_THEME = {
87
+ container: {
88
+ backgroundColor: "#ffffff",
89
+ maxWidth: "600px",
90
+ minWidth: "300px",
91
+ paddingTop: "8px",
92
+ paddingRight: "8px",
93
+ paddingBottom: "8px",
94
+ paddingLeft: "8px",
95
+ borderRadius: "0px",
96
+ borderWidth: "0px",
97
+ borderColor: "transparent"
98
+ },
99
+ body: {
100
+ backgroundColor: "#ffffff",
101
+ paddingTop: "0px",
102
+ paddingRight: "0px",
103
+ paddingBottom: "0px",
104
+ paddingLeft: "0px"
105
+ },
106
+ button: {
107
+ backgroundColor: "#000000",
108
+ color: "#ffffff",
109
+ paddingTop: "10px",
110
+ paddingRight: "32px",
111
+ paddingBottom: "10px",
112
+ paddingLeft: "32px"
113
+ },
114
+ link: { color: DEFAULT_LINK_TEXT_COLOR },
115
+ font: DEFAULT_FONT
116
+ };
117
+
118
+ //#endregion
119
+ //#region src/css-variables.ts
120
+ /**
121
+ * if the value is undefined, it will return an empty object
122
+ * so that we don't override the default value
123
+ * @param name - The name of the CSS variable
124
+ * @param value - The value of the CSS variable
125
+ * @returns The CSS variable value
126
+ */
127
+ function getVariableValue(name, value) {
128
+ if (value === void 0 || value === null || value === "") return {};
129
+ return { [name]: value };
130
+ }
131
+ /**
132
+ * Get the CSS variables for the theme
133
+ * @param theme - The theme
134
+ * @returns The CSS variables
135
+ * @example
136
+ * ```ts
137
+ * const theme = {
138
+ * body: {
139
+ * backgroundColor: 'red',
140
+ * },
141
+ * };
142
+ *
143
+ * const cssVariables = getCssVariables(theme);
144
+ *
145
+ * console.log(cssVariables);
146
+ * // { '--mly-body-background-color': 'red' }
147
+ */
148
+ function getMailyCssVariables(theme) {
149
+ const font = theme.font || DEFAULT_FONT;
150
+ return {
151
+ ...getVariableValue("--mly-body-background-color", theme.body?.backgroundColor),
152
+ ...getVariableValue("--mly-body-padding-top", theme.body?.paddingTop),
153
+ ...getVariableValue("--mly-body-padding-right", theme.body?.paddingRight),
154
+ ...getVariableValue("--mly-body-padding-bottom", theme.body?.paddingBottom),
155
+ ...getVariableValue("--mly-body-padding-left", theme.body?.paddingLeft),
156
+ ...getVariableValue("--mly-container-background-color", theme.container?.backgroundColor),
157
+ ...getVariableValue("--mly-container-max-width", theme.container?.maxWidth),
158
+ ...getVariableValue("--mly-container-min-width", theme.container?.minWidth),
159
+ ...getVariableValue("--mly-container-padding-top", theme.container?.paddingTop),
160
+ ...getVariableValue("--mly-container-padding-right", theme.container?.paddingRight),
161
+ ...getVariableValue("--mly-container-padding-bottom", theme.container?.paddingBottom),
162
+ ...getVariableValue("--mly-container-padding-left", theme.container?.paddingLeft),
163
+ ...getVariableValue("--mly-container-border-radius", theme.container?.borderRadius),
164
+ ...getVariableValue("--mly-container-border-width", theme.container?.borderWidth),
165
+ ...getVariableValue("--mly-container-border-color", theme.container?.borderColor),
166
+ ...getVariableValue("--mly-button-background-color", theme.button?.backgroundColor),
167
+ ...getVariableValue("--mly-button-text-color", theme.button?.color),
168
+ ...getVariableValue("--mly-button-padding-top", theme.button?.paddingTop),
169
+ ...getVariableValue("--mly-button-padding-right", theme.button?.paddingRight),
170
+ ...getVariableValue("--mly-button-padding-bottom", theme.button?.paddingBottom),
171
+ ...getVariableValue("--mly-button-padding-left", theme.button?.paddingLeft),
172
+ ...getVariableValue("--mly-link-color", theme.link?.color),
173
+ ...getVariableValue("--mly-font-family", font.fontFamily),
174
+ ...getVariableValue("--mly-font-fallback-family", font.fallbackFontFamily),
175
+ "--mly-font": `var(--mly-font-family), var(--mly-font-fallback-family)`
176
+ };
177
+ }
178
+
179
+ //#endregion
180
+ //#region src/font.ts
181
+ function loadFont(font) {
182
+ const style = fontStyle(font);
183
+ const styleElement = document.createElement("style");
184
+ styleElement.textContent = style;
185
+ document.head.appendChild(styleElement);
186
+ }
187
+ function fontStyle(font) {
188
+ const { fontFamily, fallbackFontFamily, webFont } = font;
189
+ const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
190
+ const style = `
191
+ @font-face {
192
+ font-family: '${fontFamily}';
193
+ font-style: normal;
194
+ font-weight: 400;
195
+ mso-font-alt: '${fallbackFontFamily}';
196
+ ${src}
197
+ }`;
198
+ return style;
199
+ }
200
+
201
+ //#endregion
202
+ export { DEFAULT_EDITOR_THEME, DEFAULT_FONT, DEFAULT_LINK_TEXT_COLOR, DEFAULT_RENDERER_THEME, allowedFallbackFonts, allowedFontFormats, fontStyle, getMailyCssVariables, getVariableValue, loadFont };
203
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","names":["DEFAULT_FONT: FontProps","DEFAULT_RENDERER_THEME: RendererThemeOptions","DEFAULT_EDITOR_THEME: EditorThemeOptions","name: `--mly-${string}`","value: any","theme: EditorThemeOptions","font: Font"],"sources":["../src/theme.ts","../src/css-variables.ts","../src/font.ts"],"sourcesContent":["import type * as CSS from 'csstype';\n\nexport const allowedFallbackFonts = [\n 'Arial',\n 'Helvetica',\n 'Verdana',\n 'Georgia',\n 'Times New Roman',\n 'serif',\n 'sans-serif',\n 'monospace',\n 'cursive',\n 'fantasy',\n] as const;\n\nexport type FallbackFont = (typeof allowedFallbackFonts)[number];\n\nexport const allowedFontFormats = [\n 'woff',\n 'woff2',\n 'truetype',\n 'opentype',\n 'embedded-opentype',\n 'svg',\n] as const;\n\nexport type FontFormat = (typeof allowedFontFormats)[number];\n\ntype FontWeight = CSS.Properties['fontWeight'];\ntype FontStyle = CSS.Properties['fontStyle'];\n\nexport interface FontProps {\n /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */\n fontFamily: string;\n /** An array is possible, but the order of the array is the priority order */\n fallbackFontFamily: FallbackFont;\n /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */\n webFont?: {\n url: string;\n format: FontFormat;\n };\n /** Default: 'normal' */\n fontStyle?: FontStyle;\n /** Default: 400 */\n fontWeight?: FontWeight;\n}\n\nexport interface BaseThemeOptions {\n container?: Partial<\n Pick<\n CSS.Properties,\n | 'backgroundColor'\n | 'maxWidth'\n | 'minWidth'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'borderRadius'\n | 'borderWidth'\n | 'borderColor'\n >\n >;\n body?: Partial<\n Pick<\n CSS.Properties,\n | 'backgroundColor'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n >\n >;\n button?: Partial<\n Pick<\n CSS.Properties,\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'backgroundColor'\n | 'color'\n >\n >;\n link?: Partial<Pick<CSS.Properties, 'color'>>;\n font?: Pick<\n FontProps,\n 'fontFamily' | 'fallbackFontFamily' | 'webFont'\n > | null;\n}\n\n/**\n * The theme options for the editor.\n * currently, we don't allow any customizations for the colors in the editor.\n * that's why we have a separate theme for the editor.\n */\nexport interface EditorThemeOptions extends BaseThemeOptions {}\n\n/**\n * The theme options for the renderer.\n * currently, we don't allow any customizations for the colors in the editor.\n * that's why we have a separate theme for the renderer.\n */\nexport interface RendererThemeOptions extends BaseThemeOptions {\n colors?: Partial<{\n heading: string;\n paragraph: string;\n horizontal: string;\n footer: string;\n blockquoteBorder: string;\n codeBackground: string;\n codeText: string;\n linkCardTitle: string;\n linkCardDescription: string;\n linkCardBadgeText: string;\n linkCardBadgeBackground: string;\n linkCardSubTitle: string;\n }>;\n fontSize?: Partial<{\n paragraph: Partial<{\n size: string;\n lineHeight: string;\n }>;\n footer: Partial<{\n size: string;\n lineHeight: string;\n }>;\n }>;\n}\n\nexport const DEFAULT_FONT: FontProps = {\n fallbackFontFamily: 'sans-serif',\n fontFamily: 'Inter',\n webFont: {\n url: 'https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19',\n format: 'woff2',\n },\n};\n\nexport const DEFAULT_LINK_TEXT_COLOR = '#111827';\n\nexport const DEFAULT_RENDERER_THEME: RendererThemeOptions = {\n colors: {\n heading: '#111827',\n paragraph: '#374151',\n horizontal: '#EAEAEA',\n footer: '#64748B',\n blockquoteBorder: '#D1D5DB',\n codeBackground: '#EFEFEF',\n codeText: '#111827',\n linkCardTitle: '#111827',\n linkCardDescription: '#6B7280',\n linkCardBadgeText: '#111827',\n linkCardBadgeBackground: '#FEF08A',\n linkCardSubTitle: '#6B7280',\n },\n fontSize: {\n paragraph: {\n size: '15px',\n lineHeight: '26.25px',\n },\n footer: {\n size: '14px',\n lineHeight: '24px',\n },\n },\n\n container: {\n backgroundColor: '#ffffff',\n maxWidth: '600px',\n minWidth: '300px',\n paddingTop: '0.5rem',\n paddingRight: '0.5rem',\n paddingBottom: '0.5rem',\n paddingLeft: '0.5rem',\n\n borderRadius: '0px',\n borderWidth: '0px',\n borderColor: 'transparent',\n },\n body: {\n backgroundColor: '#ffffff',\n\n paddingTop: '0px',\n paddingRight: '0px',\n paddingBottom: '0px',\n paddingLeft: '0px',\n },\n button: {\n backgroundColor: '#000000',\n color: '#ffffff',\n paddingTop: '10px',\n paddingRight: '32px',\n paddingBottom: '10px',\n paddingLeft: '32px',\n },\n link: {\n color: DEFAULT_LINK_TEXT_COLOR,\n },\n font: DEFAULT_FONT,\n};\n\nexport const DEFAULT_EDITOR_THEME: EditorThemeOptions = {\n container: {\n backgroundColor: '#ffffff',\n maxWidth: '600px',\n minWidth: '300px',\n paddingTop: '8px',\n paddingRight: '8px',\n paddingBottom: '8px',\n paddingLeft: '8px',\n\n borderRadius: '0px',\n borderWidth: '0px',\n borderColor: 'transparent',\n },\n body: {\n backgroundColor: '#ffffff',\n\n paddingTop: '0px',\n paddingRight: '0px',\n paddingBottom: '0px',\n paddingLeft: '0px',\n },\n button: {\n backgroundColor: '#000000',\n color: '#ffffff',\n paddingTop: '10px',\n paddingRight: '32px',\n paddingBottom: '10px',\n paddingLeft: '32px',\n },\n link: {\n color: DEFAULT_LINK_TEXT_COLOR,\n },\n font: DEFAULT_FONT,\n};\n","import type * as CSS from 'csstype';\nimport { DEFAULT_FONT, type EditorThemeOptions } from './theme';\n\ndeclare module 'csstype' {\n interface Properties {\n [index: `--mly-${string}`]: any;\n }\n}\n\n/**\n * if the value is undefined, it will return an empty object\n * so that we don't override the default value\n * @param name - The name of the CSS variable\n * @param value - The value of the CSS variable\n * @returns The CSS variable value\n */\nexport function getVariableValue(\n name: `--mly-${string}`,\n value: any\n): CSS.Properties {\n if (value === undefined || value === null || value === '') {\n return {};\n }\n\n return {\n [name]: value,\n };\n}\n\n/**\n * Get the CSS variables for the theme\n * @param theme - The theme\n * @returns The CSS variables\n * @example\n * ```ts\n * const theme = {\n * body: {\n * backgroundColor: 'red',\n * },\n * };\n *\n * const cssVariables = getCssVariables(theme);\n *\n * console.log(cssVariables);\n * // { '--mly-body-background-color': 'red' }\n */\nexport function getMailyCssVariables(\n theme: EditorThemeOptions\n): CSS.Properties {\n const font = theme.font || DEFAULT_FONT;\n\n return {\n ...getVariableValue(\n '--mly-body-background-color',\n theme.body?.backgroundColor\n ),\n ...getVariableValue('--mly-body-padding-top', theme.body?.paddingTop),\n ...getVariableValue('--mly-body-padding-right', theme.body?.paddingRight),\n ...getVariableValue('--mly-body-padding-bottom', theme.body?.paddingBottom),\n ...getVariableValue('--mly-body-padding-left', theme.body?.paddingLeft),\n\n ...getVariableValue(\n '--mly-container-background-color',\n theme.container?.backgroundColor\n ),\n ...getVariableValue('--mly-container-max-width', theme.container?.maxWidth),\n ...getVariableValue('--mly-container-min-width', theme.container?.minWidth),\n\n ...getVariableValue(\n '--mly-container-padding-top',\n theme.container?.paddingTop\n ),\n ...getVariableValue(\n '--mly-container-padding-right',\n theme.container?.paddingRight\n ),\n ...getVariableValue(\n '--mly-container-padding-bottom',\n theme.container?.paddingBottom\n ),\n ...getVariableValue(\n '--mly-container-padding-left',\n theme.container?.paddingLeft\n ),\n\n ...getVariableValue(\n '--mly-container-border-radius',\n theme.container?.borderRadius\n ),\n ...getVariableValue(\n '--mly-container-border-width',\n theme.container?.borderWidth\n ),\n ...getVariableValue(\n '--mly-container-border-color',\n theme.container?.borderColor\n ),\n\n ...getVariableValue(\n '--mly-button-background-color',\n theme.button?.backgroundColor\n ),\n ...getVariableValue('--mly-button-text-color', theme.button?.color),\n ...getVariableValue('--mly-button-padding-top', theme.button?.paddingTop),\n ...getVariableValue(\n '--mly-button-padding-right',\n theme.button?.paddingRight\n ),\n ...getVariableValue(\n '--mly-button-padding-bottom',\n theme.button?.paddingBottom\n ),\n ...getVariableValue('--mly-button-padding-left', theme.button?.paddingLeft),\n\n ...getVariableValue('--mly-link-color', theme.link?.color),\n\n ...getVariableValue('--mly-font-family', font.fontFamily),\n ...getVariableValue('--mly-font-fallback-family', font.fallbackFontFamily),\n '--mly-font': `var(--mly-font-family), var(--mly-font-fallback-family)`,\n };\n}\n","import type { FontProps } from './theme';\n\ntype Font = Pick<FontProps, 'fontFamily' | 'fallbackFontFamily' | 'webFont'>;\n\nexport function loadFont(font: Font): void {\n const style = fontStyle(font);\n\n const styleElement = document.createElement('style');\n styleElement.textContent = style;\n document.head.appendChild(styleElement);\n}\n\nexport function fontStyle(font: Font): string {\n const { fontFamily, fallbackFontFamily, webFont } = font;\n\n const src = webFont\n ? `src: url(${webFont.url}) format('${webFont.format}');`\n : '';\n\n const style = `\n @font-face {\n font-family: '${fontFamily}';\n font-style: normal;\n font-weight: 400;\n mso-font-alt: '${fallbackFontFamily}';\n ${src}\n }`;\n\n return style;\n}\n"],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@maily-to/shared",
3
+ "version": "0.0.1",
4
+ "private": false,
5
+ "description": "Shared utilities for Maily",
6
+ "sideEffects": false,
7
+ "main": "./dist/index.js",
8
+ "module": "./dist/index.mjs",
9
+ "types": "./dist/index.d.ts",
10
+ "files": [
11
+ "dist/**"
12
+ ],
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/index.mjs",
16
+ "require": "./dist/index.js"
17
+ },
18
+ "./package.json": "./package.json"
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "git+https://github.com/arikchakma/maily.to.git",
23
+ "directory": "packages/shared"
24
+ },
25
+ "author": "Arik Chakma <arikchangma@gmail.com>",
26
+ "keywords": [
27
+ "maily.to",
28
+ "react",
29
+ "email"
30
+ ],
31
+ "devDependencies": {
32
+ "typescript": "^5.8.2",
33
+ "tsconfig": "0.0.0"
34
+ },
35
+ "dependencies": {
36
+ "csstype": "^3.1.3",
37
+ "zod": "^3.24.2"
38
+ },
39
+ "publishConfig": {
40
+ "access": "public"
41
+ },
42
+ "scripts": {
43
+ "dev": "tsdown --watch",
44
+ "clean": "rm -rf dist",
45
+ "build": "tsdown"
46
+ }
47
+ }
package/readme.md ADDED
@@ -0,0 +1,33 @@
1
+ <div align="center"><img height="150" src="https://maily.to/brand/icon.svg" /></div>
2
+ <br>
3
+
4
+ <div align="center"><strong>@maily-to/shared</strong></div>
5
+ <div align="center">Shared utilities for <a href="https://maily.to">Maily</a>.</div>
6
+ <br />
7
+
8
+ <p align="center">
9
+ <a href="https://github.com/arikchakma/maily.to/blob/main/license">
10
+ <img src="https://img.shields.io/badge/License-MIT-222222.svg" />
11
+ </a>
12
+ <a href="https://buymeacoffee.com/arikchakma">
13
+ <img src="https://img.shields.io/badge/-buy_me_a%C2%A0coffee-222222?logo=buy-me-a-coffee" alt="Buy me a coffee" />
14
+ </a>
15
+ </p>
16
+
17
+ <br>
18
+
19
+ ## Install
20
+
21
+ Install `@maily-to/shared` from your command line.
22
+
23
+ ```sh
24
+ pnpm add @maily-to/shared
25
+ ```
26
+
27
+ ## Contributions
28
+
29
+ Feel free to submit pull requests, create issues, or spread the word.
30
+
31
+ ## License
32
+
33
+ MIT &copy; [Arik Chakma](https://twitter.com/imarikchakma)