@samva/markup 0.8.0 → 0.9.0

package/dist/starters/theme.d.ts

@@ -1,45 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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 };