@samva/markup 0.7.0 → 0.8.0

package/dist/starters/theme.d.ts

@@ -0,0 +1,45 @@
+import { BrandCss } from "../theme-css.js";
+//#region starters/theme.d.ts
+/**
+ * The theme variables every starter defines and a brand sets to restyle one.
+ * Each color also has a dark-mode counterpart named `<name>-dark`, which is
+ * what a brand's dark-mode `@theme` lowers to.
+ */
+declare const STARTER_THEME_VARIABLES: {
+  readonly "--color-brand": "The primary color: buttons and the main call to action.";
+  readonly "--color-brand-foreground": "Text on the primary color.";
+  readonly "--color-accent": "The secondary color: eyebrows, labels, links and highlights.";
+  readonly "--color-surface": "The content card.";
+  readonly "--font-heading": "Headings.";
+  readonly "--font-body": "Body text.";
+  readonly "--radius-button": "Button corners.";
+  readonly "--radius-card": "The content card's corners.";
+};
+type StarterThemeVariable = keyof typeof STARTER_THEME_VARIABLES;
+/** Every name a starter's `starter.css` defines: the vocabulary plus each color's `-dark` pair. */
+declare const starterThemeVariableNames: ReadonlyArray<string>;
+/**
+ * The `theme.css` a project created from a starter begins with: the starter's
+ * look, then the organization's default brand when the creator chose it, then
+ * an empty `@theme` for the project's own overrides.
+ */
+declare const starterThemeCss: (options: {
+  readonly brand: boolean;
+}) => string;
+/**
+ * The brand a starter's brand preview is compiled against: one marker value
+ * per vocabulary name, dark colors in the dark-mode `@theme`.
+ */
+declare const STARTER_PREVIEW_BRAND: {
+  readonly slug: "samva-starter-preview";
+  readonly css: string;
+};
+/**
+ * Re-brand a starter's preview, rendered against `STARTER_PREVIEW_BRAND`, with
+ * `brand`: each name takes the value the brand compiles to
+ * (`brandThemeVariables`), or the starter's own where the brand sets none. The brand's font faces join the document head.
+ */
+declare const brandStarterPreview: (previewHtml: string, starterVariables: Readonly<Record<string, string>>, brand: BrandCss) => string;
+//#endregion
+export { STARTER_PREVIEW_BRAND, STARTER_THEME_VARIABLES, StarterThemeVariable, brandStarterPreview, starterThemeCss, starterThemeVariableNames };
+//# sourceMappingURL=theme.d.ts.map

package/dist/starters/theme.js

@@ -0,0 +1,77 @@
+import { escapeAttribute } from "../email/html.js";
+import { a as brandThemeVariables, l as printBrandCss, s as darkVariableName } from "../theme-css-hFqcPSar.js";
+//#region starters/theme.ts
+/**
+* The theme variables every starter defines and a brand sets to restyle one.
+* Each color also has a dark-mode counterpart named `<name>-dark`, which is
+* what a brand's dark-mode `@theme` lowers to.
+*/
+const STARTER_THEME_VARIABLES = {
+	"--color-brand": "The primary color: buttons and the main call to action.",
+	"--color-brand-foreground": "Text on the primary color.",
+	"--color-accent": "The secondary color: eyebrows, labels, links and highlights.",
+	"--color-surface": "The content card.",
+	"--font-heading": "Headings.",
+	"--font-body": "Body text.",
+	"--radius-button": "Button corners.",
+	"--radius-card": "The content card's corners."
+};
+/** Every name a starter's `starter.css` defines: the vocabulary plus each color's `-dark` pair. */
+const starterThemeVariableNames = Object.keys(STARTER_THEME_VARIABLES).flatMap((name) => name.startsWith("--color-") ? [name, darkVariableName(name)] : [name]);
+/**
+* The `theme.css` a project created from a starter begins with: the starter's
+* look, then the organization's default brand when the creator chose it, then
+* an empty `@theme` for the project's own overrides.
+*/
+const starterThemeCss = (options) => [
+	"@import \"./starter.css\";",
+	...options.brand ? ["@import \"samva:brand\";"] : [],
+	"@theme {}",
+	""
+].join("\n");
+const markerColor = (index) => `#5a${(57344 + index).toString(16)}`;
+/** Each vocabulary name's marker value in the preview brand. */
+const PREVIEW_MARKERS = Object.fromEntries(starterThemeVariableNames.map((name, index) => {
+	if (name.startsWith("--color-")) return [name, markerColor(index)];
+	if (name.startsWith("--font-")) return [name, `samva-preview${name.slice(1)}, sans-serif`];
+	return [name, `${(1731 + index) / 100}px`];
+}));
+const lightMarkers = () => Object.fromEntries(Object.entries(PREVIEW_MARKERS).filter(([name]) => !name.endsWith("-dark")));
+/**
+* The brand a starter's brand preview is compiled against: one marker value
+* per vocabulary name, dark colors in the dark-mode `@theme`.
+*/
+const STARTER_PREVIEW_BRAND = {
+	slug: "samva-starter-preview",
+	css: printBrandCss({
+		variables: lightMarkers(),
+		dark: Object.fromEntries(Object.entries(lightMarkers()).filter(([name]) => name.startsWith("--color-")).map(([name]) => [name, PREVIEW_MARKERS[darkVariableName(name)]])),
+		fontFaces: []
+	})
+};
+const replaceOutsideStyles = (html, replace) => html.split(/(<style[^>]*>[\s\S]*?<\/style>)/).map((segment) => segment.startsWith("<style") ? replace(segment, (value) => value) : replace(segment, escapeAttribute)).join("");
+/**
+* Re-brand a starter's preview, rendered against `STARTER_PREVIEW_BRAND`, with
+* `brand`: each name takes the value the brand compiles to
+* (`brandThemeVariables`), or the starter's own where the brand sets none. The brand's font faces join the document head.
+*/
+const brandStarterPreview = (previewHtml, starterVariables, brand) => {
+	const brandVariables = brandThemeVariables(brand);
+	const values = Object.entries(PREVIEW_MARKERS).map(([name, marker]) => {
+		const value = brandVariables[name] ?? starterVariables[name];
+		if (value === void 0) throw new TypeError(`The starter defines no ${name}.`);
+		return [marker, value];
+	});
+	const rebranded = replaceOutsideStyles(previewHtml, (segment, escape) => values.reduce((text, [marker, value]) => text.replaceAll(escape(marker), escape(value)), segment));
+	if (brand.fontFaces.length === 0) return rebranded;
+	const faces = printBrandCss({
+		variables: {},
+		dark: {},
+		fontFaces: brand.fontFaces
+	});
+	return rebranded.replace("</head>", `<style>${faces}</style></head>`);
+};
+//#endregion
+export { STARTER_PREVIEW_BRAND, STARTER_THEME_VARIABLES, brandStarterPreview, starterThemeCss, starterThemeVariableNames };
+
+//# sourceMappingURL=theme.js.map

package/dist/starters.d.ts

@@ -0,0 +1,2 @@
+import { a as StarterMeta, i as StarterId, n as EmailStarterVariable, o as StarterVariable, r as StarterCategory, s as starterCatalog, t as EmailStarterId } from "./catalog-CKuOooB8.js";
+export { EmailStarterId, EmailStarterVariable, StarterCategory, StarterId, StarterMeta, StarterVariable, starterCatalog };

package/dist/{presets.js → starters.js}

@@ -1,12 +1,5 @@
-//#region presets/catalog.ts
-const RECOMMENDED_THEME = {
-	colors: {
-		brand: "#4f46e5",
-		"brand-foreground": "#ffffff"
-	},
-	radiusPx: { brand: 8 }
-};
-const presetCatalog = [
+//#region starters/catalog.ts
+const starterCatalog = [
 	{
 		id: "linear-login-code",
 		channel: "email",
@@ -876,6 +869,6 @@ const presetCatalog = [
 	}
 ];
 //#endregion
-export { RECOMMENDED_THEME, presetCatalog };
+export { starterCatalog };
 
-//# sourceMappingURL=presets.js.map
+//# sourceMappingURL=starters.js.map