@janga/norna 0.7.3 → 0.7.4

package/scripts/lib/site-content.mjs

@@ -30,6 +30,7 @@ const knownNestedFrontmatterKeys = new Set([
 	'carousel',
 	'color',
 	'colors',
+	'density',
 	'desktop',
 	'fontFamily',
 	'from',
@@ -59,13 +60,12 @@ const knownNestedFrontmatterKeys = new Set([
 	'pageWidth',
 	'preset',
 	'presentation',
+	'rhythm',
 	'sections',
 	'sectionGap',
-	'sectionHeadingToBody',
 	'size',
-	'spacing',
-	'subheadingRuleTop',
-	'subheadingTop',
+	'spacingAfter',
+	'spacingBefore',
 	'textColor',
 	'theme',
 	'typography',

package/scripts/lib/typography.mjs

@@ -5,171 +5,199 @@ export const typographyPresetNames = [
 	'statement',
 ];
 
+export const typographyRhythmNames = [
+	'compact',
+	'normal',
+	'airy',
+];
+
 export const typographyPresets = {
 	'quiet-gallery': {
 		headings: {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'large',
+				size: 'medium',
 				lineHeight: 1.04,
-				spacing: '0.55em',
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.08,
-				spacing: '0.65em',
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'small',
+				size: 'medium',
 				lineHeight: 1.35,
-				spacing: '0.9rem',
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.5,
-				spacing: '0.85rem',
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.5,
-			paragraphSpacing: '0.85em',
 		},
 		caption: {
 			align: { desktop: 'center', mobile: 'center' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.35,
-			spacing: '0.5em',
 		},
 	},
 	'compact-gallery': {
 		headings: {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'large',
+				size: 'medium',
 				lineHeight: 1.04,
-				spacing: '0.45em',
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.08,
-				spacing: '0.45em',
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'small',
+				size: 'medium',
 				lineHeight: 1.3,
-				spacing: '0.75rem',
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.42,
-				spacing: '0.6rem',
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.42,
-			paragraphSpacing: '0.6em',
 		},
 		caption: {
 			align: { desktop: 'center', mobile: 'center' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.25,
-			spacing: '0.35em',
 		},
 	},
 	'text-forward': {
 		headings: {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'large',
+				size: 'medium',
 				lineHeight: 1.06,
-				spacing: '0.65em',
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.12,
-				spacing: '0.8em',
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'small',
+				size: 'medium',
 				lineHeight: 1.35,
-				spacing: '1rem',
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.55,
-				spacing: '0.85rem',
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.62,
-			paragraphSpacing: '1em',
 		},
 		caption: {
 			align: { desktop: 'left', mobile: 'left' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.4,
-			spacing: '0.6em',
 		},
 	},
 	statement: {
 		headings: {
 			h1: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'xlarge',
+				size: 'medium',
 				lineHeight: 1.02,
-				spacing: '0.45em',
 			},
 			h2: {
 				align: { desktop: 'left', mobile: 'left' },
-				size: 'large',
+				size: 'medium',
 				lineHeight: 1.04,
-				spacing: '0.5em',
 			},
 			h3: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.18,
-				spacing: '0.85rem',
 			},
 			h4: {
 				align: { desktop: 'left', mobile: 'left' },
 				size: 'medium',
 				lineHeight: 1.42,
-				spacing: '0.75rem',
 			},
 		},
 		body: {
 			align: { desktop: 'left', mobile: 'left' },
 			size: 'medium',
 			lineHeight: 1.42,
-			paragraphSpacing: '0.75em',
 		},
 		caption: {
 			align: { desktop: 'center', mobile: 'center' },
-			size: 'small',
+			size: 'medium',
 			lineHeight: 1.3,
-			spacing: '0.45em',
+		},
+	},
+};
+
+export const typographyRhythms = {
+	compact: {
+		headings: {
+			h1: { spacingBefore: '0', spacingAfter: '0.4em' },
+			h2: { spacingBefore: '0', spacingAfter: '0.45em' },
+			h3: { spacingBefore: '1.2em', spacingAfter: '0.4em' },
+			h4: { spacingBefore: '0.9em', spacingAfter: '0.35em' },
+		},
+		body: {
+			paragraphSpacing: '0.65em',
+		},
+		caption: {
+			spacingBefore: '0.35em',
+		},
+	},
+	normal: {
+		headings: {
+			h1: { spacingBefore: '0', spacingAfter: '0.5em' },
+			h2: { spacingBefore: '0', spacingAfter: '0.55em' },
+			h3: { spacingBefore: '1.5em', spacingAfter: '0.5em' },
+			h4: { spacingBefore: '1.1em', spacingAfter: '0.4em' },
+		},
+		body: {
+			paragraphSpacing: '0.85em',
+		},
+		caption: {
+			spacingBefore: '0.5em',
+		},
+	},
+	airy: {
+		headings: {
+			h1: { spacingBefore: '0', spacingAfter: '0.65em' },
+			h2: { spacingBefore: '0', spacingAfter: '0.7em' },
+			h3: { spacingBefore: '1.9em', spacingAfter: '0.6em' },
+			h4: { spacingBefore: '1.35em', spacingAfter: '0.5em' },
+		},
+		body: {
+			paragraphSpacing: '1em',
+		},
+		caption: {
+			spacingBefore: '0.65em',
 		},
 	},
 };
 
 export const defaultTypography = {
 	preset: 'quiet-gallery',
+	rhythm: 'normal',
 };
 
 const isPlainObject = (value) => (
@@ -196,26 +224,38 @@ export const mergeDeep = (base, override) => {
 
 export const resolveTypographyConfig = (typography = defaultTypography) => {
 	const presetName = typography?.preset ?? defaultTypography.preset;
+	const rhythmName = typography?.rhythm ?? defaultTypography.rhythm;
 	const preset = typographyPresets[presetName];
+	const rhythm = typographyRhythms[rhythmName];
 
 	if (!preset) {
 		throw new Error(`Unknown typography preset: ${presetName}`);
 	}
 
+	if (!rhythm) {
+		throw new Error(`Unknown typography rhythm: ${rhythmName}`);
+	}
+
 	return {
 		preset: presetName,
-		values: mergeDeep(preset, typography?.overrides),
+		rhythm: rhythmName,
+		values: mergeDeep(mergeDeep(preset, rhythm), typography?.overrides),
 	};
 };
 
 export const resolveTypographyOverride = (baseResolved, typographyConfig) => {
-	if (typographyConfig?.preset) {
-		return resolveTypographyConfig(typographyConfig);
+	if (typographyConfig?.preset || typographyConfig?.rhythm) {
+		return resolveTypographyConfig({
+			preset: typographyConfig.preset ?? baseResolved.preset,
+			rhythm: typographyConfig.rhythm ?? baseResolved.rhythm,
+			overrides: typographyConfig.overrides,
+		});
 	}
 
 	if (typographyConfig?.overrides) {
 		return {
 			preset: baseResolved.preset,
+			rhythm: baseResolved.rhythm,
 			values: mergeDeep(baseResolved.values, typographyConfig.overrides),
 		};
 	}

package/scripts/show-typography.mjs

@@ -6,6 +6,7 @@ import {
 	resolveTypographyConfig,
 	toYamlLines,
 	typographyPresets,
+	typographyRhythms,
 } from './lib/typography.mjs';
 import {
 	getContentFiles,
@@ -29,22 +30,26 @@ const typographyValuePaths = [
 	['headings', 'h1', 'align', 'mobile'],
 	['headings', 'h1', 'size'],
 	['headings', 'h1', 'lineHeight'],
-	['headings', 'h1', 'spacing'],
+	['headings', 'h1', 'spacingBefore'],
+	['headings', 'h1', 'spacingAfter'],
 	['headings', 'h2', 'align', 'desktop'],
 	['headings', 'h2', 'align', 'mobile'],
 	['headings', 'h2', 'size'],
 	['headings', 'h2', 'lineHeight'],
-	['headings', 'h2', 'spacing'],
+	['headings', 'h2', 'spacingBefore'],
+	['headings', 'h2', 'spacingAfter'],
 	['headings', 'h3', 'align', 'desktop'],
 	['headings', 'h3', 'align', 'mobile'],
 	['headings', 'h3', 'size'],
 	['headings', 'h3', 'lineHeight'],
-	['headings', 'h3', 'spacing'],
+	['headings', 'h3', 'spacingBefore'],
+	['headings', 'h3', 'spacingAfter'],
 	['headings', 'h4', 'align', 'desktop'],
 	['headings', 'h4', 'align', 'mobile'],
 	['headings', 'h4', 'size'],
 	['headings', 'h4', 'lineHeight'],
-	['headings', 'h4', 'spacing'],
+	['headings', 'h4', 'spacingBefore'],
+	['headings', 'h4', 'spacingAfter'],
 	['body', 'align', 'desktop'],
 	['body', 'align', 'mobile'],
 	['body', 'size'],
@@ -54,8 +59,20 @@ const typographyValuePaths = [
 	['caption', 'align', 'mobile'],
 	['caption', 'size'],
 	['caption', 'lineHeight'],
-	['caption', 'spacing'],
+	['caption', 'spacingBefore'],
 ];
+const rhythmValuePaths = new Set([
+	'headings.h1.spacingBefore',
+	'headings.h1.spacingAfter',
+	'headings.h2.spacingBefore',
+	'headings.h2.spacingAfter',
+	'headings.h3.spacingBefore',
+	'headings.h3.spacingAfter',
+	'headings.h4.spacingBefore',
+	'headings.h4.spacingAfter',
+	'body.paragraphSpacing',
+	'caption.spacingBefore',
+]);
 const countIndent = (line) => line.match(/^\s*/)?.[0].length ?? 0;
 
 const isPlainObject = (value) => (
@@ -106,12 +123,15 @@ const annotateResolvedValues = (resolved, sources) => {
 	return annotated;
 };
 
-const presetSources = (presetName) => {
+const defaultSources = (presetName, rhythmName) => {
 	const sources = {};
 
 	for (const path of typographyValuePaths) {
+		const pathKey = path.join('.');
 		setPath(sources, path, {
-			source: `preset:${presetName}`,
+			source: rhythmValuePaths.has(pathKey)
+				? `rhythm:${rhythmName}`
+				: `preset:${presetName}`,
 			inherited: false,
 		});
 	}
@@ -151,7 +171,7 @@ const inheritedSources = (sources) => {
 const resolveAnnotatedTypographyConfig = (typographyConfig, sourceLabel) => {
 	const resolved = resolveTypographyConfig(typographyConfig ?? defaultTypography);
 	const sources = applyOverrideSources(
-		presetSources(resolved.preset),
+		defaultSources(resolved.preset, resolved.rhythm),
 		typographyConfig,
 		sourceLabel,
 	);
@@ -162,14 +182,44 @@ const resolveAnnotatedTypographyConfig = (typographyConfig, sourceLabel) => {
 			source: typographyConfig?.preset ? sourceLabel : 'engine default',
 			...(typographyConfig?.preset ? {} : { inherited: true }),
 		},
+		rhythm: {
+			value: resolved.rhythm,
+			source: typographyConfig?.rhythm ? sourceLabel : 'engine default',
+			...(typographyConfig?.rhythm ? {} : { inherited: true }),
+		},
 		resolved,
 		sources,
 	};
 };
 
 const resolveAnnotatedTypographyOverride = (baseAnnotated, typographyConfig, sourceLabel) => {
-	if (typographyConfig?.preset) {
-		return resolveAnnotatedTypographyConfig(typographyConfig, sourceLabel);
+	if (typographyConfig?.preset || typographyConfig?.rhythm) {
+		const resolvedConfig = {
+			preset: typographyConfig.preset ?? baseAnnotated.resolved.preset,
+			rhythm: typographyConfig.rhythm ?? baseAnnotated.resolved.rhythm,
+			overrides: typographyConfig.overrides,
+		};
+		const resolved = resolveTypographyConfig(resolvedConfig);
+		const sources = applyOverrideSources(
+			defaultSources(resolved.preset, resolved.rhythm),
+			typographyConfig,
+			sourceLabel,
+		);
+
+		return {
+			preset: {
+				value: resolved.preset,
+				source: typographyConfig.preset ? sourceLabel : baseAnnotated.preset.source,
+				...(typographyConfig.preset ? {} : { inherited: true }),
+			},
+			rhythm: {
+				value: resolved.rhythm,
+				source: typographyConfig.rhythm ? sourceLabel : baseAnnotated.rhythm.source,
+				...(typographyConfig.rhythm ? {} : { inherited: true }),
+			},
+			resolved,
+			sources,
+		};
 	}
 
 	if (typographyConfig?.overrides) {
@@ -186,6 +236,11 @@ const resolveAnnotatedTypographyOverride = (baseAnnotated, typographyConfig, sou
 				source: baseAnnotated.preset.source,
 				inherited: true,
 			},
+			rhythm: {
+				value: resolved.rhythm,
+				source: baseAnnotated.rhythm.source,
+				inherited: true,
+			},
 			resolved,
 			sources,
 		};
@@ -197,6 +252,11 @@ const resolveAnnotatedTypographyOverride = (baseAnnotated, typographyConfig, sou
 			source: baseAnnotated.preset.source,
 			inherited: true,
 		},
+		rhythm: {
+			value: baseAnnotated.resolved.rhythm,
+			source: baseAnnotated.rhythm.source,
+			inherited: true,
+		},
 		resolved: baseAnnotated.resolved,
 		sources: inheritedSources(baseAnnotated.sources),
 	};
@@ -204,6 +264,7 @@ const resolveAnnotatedTypographyOverride = (baseAnnotated, typographyConfig, sou
 
 const formatAnnotatedTypography = (annotated) => ({
 	preset: annotated.preset,
+	rhythm: annotated.rhythm,
 	resolved: annotateResolvedValues(annotated.resolved, annotated.sources),
 });
 
@@ -305,7 +366,10 @@ const readPageTypography = async (contentFile, themeTypography) => {
 };
 
 if (mode === 'presets') {
-	console.log(toYamlLines(typographyPresets).join('\n'));
+	console.log(toYamlLines({
+		presets: typographyPresets,
+		rhythms: typographyRhythms,
+	}).join('\n'));
 } else if (mode === 'show') {
 	const themeTypography = await readThemeTypography();
 	const pages = await Promise.all((await getContentFiles()).map((contentFile) => readPageTypography(contentFile, themeTypography)));

package/scripts/test-engine-commands.mjs

@@ -4,6 +4,7 @@ import { mkdir, mkdtemp, readFile, realpath, rm, writeFile } from 'node:fs/promi
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { typographyPresets, typographyRhythms } from './lib/typography.mjs';
 
 const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const cliPath = path.join(repoRoot, 'bin', 'norna.mjs');
@@ -51,6 +52,23 @@ try {
 	assert.equal(presetsResult.status, 0, presetsResult.stderr || presetsResult.stdout);
 	assert.match(presetsResult.stdout, /quiet-gallery:/);
 	assert.match(presetsResult.stdout, /text-forward:/);
+	assert.match(presetsResult.stdout, /rhythms:/);
+	assert.match(presetsResult.stdout, /normal:/);
+	for (const [presetName, preset] of Object.entries(typographyPresets)) {
+		for (const [level, heading] of Object.entries(preset.headings)) {
+			assert.equal(heading.size, 'medium', `${presetName} ${level} should use medium size`);
+		}
+		assert.equal(preset.body.size, 'medium', `${presetName} body should use medium size`);
+		assert.equal(preset.caption.size, 'medium', `${presetName} caption should use medium size`);
+	}
+	for (const [rhythmName, rhythm] of Object.entries(typographyRhythms)) {
+		for (const [level, heading] of Object.entries(rhythm.headings)) {
+			assert.match(heading.spacingBefore, /^(0|[\d.]+em)$/, `${rhythmName} ${level} spacingBefore should be text-relative`);
+			assert.match(heading.spacingAfter, /^[\d.]+em$/, `${rhythmName} ${level} spacingAfter should be text-relative`);
+		}
+		assert.match(rhythm.body.paragraphSpacing, /^[\d.]+em$/, `${rhythmName} body paragraphSpacing should be text-relative`);
+		assert.match(rhythm.caption.spacingBefore, /^[\d.]+em$/, `${rhythmName} caption spacingBefore should be text-relative`);
+	}
 
 	const showResult = runCli(['--site-dir', path.join(initializedSiteRoot, 'site'), 'typography', 'show']);
 	assert.equal(showResult.status, 0, showResult.stderr || showResult.stdout);

package/scripts/test-package-check.mjs

@@ -235,7 +235,15 @@ This route verifies that packaged norna sites can build route pages.
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
-		'--section-heading-font-size-desktop: clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem)',
+		'--section-heading-font-size-desktop: clamp(1.35rem, 1.1rem + 0.9vw, 2rem)',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-heading-spacing-after: 0.55em',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-markdown-h3-spacing-before: 1.5em',
 	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
@@ -273,6 +281,14 @@ This route verifies that packaged norna sites can build route pages.
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'--section-caption-line-height: 1.35',
 	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-caption-spacing-before: 0.5em',
+	);
+	await assertFileIncludes(
+		path.join(siteProjectRoot, 'dist', 'index.html'),
+		'--section-caption-font-size-desktop: clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
+	);
 	await assertFileIncludes(
 		path.join(siteProjectRoot, 'dist', 'index.html'),
 		'class="inline-style inline-style-highlight" style="--inline-style-color: #ffd84d"',
@@ -371,14 +387,14 @@ This route verifies that packaged norna sites can build route pages.
 		siteContentPath,
 		siteContent.replace(
 			'      typography:\n        preset: statement',
-			'      typography:\n        overrides:\n          caption:\n            spacing: wide',
+			'      typography:\n        overrides:\n          caption:\n            spacingBefore: wide',
 		),
 	);
 	await runExpectFailure(
 		npxBin,
 		['norna', 'build'],
 		{ cwd: siteProjectRoot, env: npmEnv },
-		'sections.0.presentation.typography.overrides.caption.spacing',
+		'sections.0.presentation.typography.overrides.caption.spacingBefore',
 	);
 	await writeFile(
 		siteContentPath,