lildocs 0.1.2 → 0.1.3

package/dist/cli.mjs

@@ -942,6 +942,7 @@ async function exists$1(filePath) {
 //#region src/core/theme.ts
 const MIN_BACKGROUND_CONTRAST = 1.08;
 const PREFERRED_BACKGROUND_CONTRAST = 1.14;
+const MIN_DARK_BORDER_CONTRAST = 1.35;
 const MAX_BACKGROUND_CONTRAST_STEPS = 12;
 const BACKGROUND_LIGHTNESS_STEP = .015;
 const MAX_BACKGROUND_CHROMA = .03;
@@ -956,6 +957,7 @@ const themes = {
 			border: "#e5e5e5",
 			link: "#2563eb",
 			codeBackground: "#f6f8fa",
+			codeForeground: "#24292e",
 			sidebarBackground: "#fafafa"
 		},
 		font: {
@@ -963,7 +965,8 @@ const themes = {
 			body: "system-ui, sans-serif",
 			code: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
 		},
-		shiki: { theme: "github-light" }
+		shiki: { theme: "github-light" },
+		background: { gradient: "linear-gradient(180deg, rgb(37 99 235 / 0.045), transparent 220px)" }
 	},
 	minimal: {
 		color: {
@@ -973,6 +976,7 @@ const themes = {
 			border: "#dddddd",
 			link: "#0f766e",
 			codeBackground: "#f7f7f7",
+			codeForeground: "#24292e",
 			sidebarBackground: "#ffffff"
 		},
 		font: {
@@ -980,7 +984,8 @@ const themes = {
 			body: "Arial, sans-serif",
 			code: "Menlo, Consolas, monospace"
 		},
-		shiki: { theme: "github-light" }
+		shiki: { theme: "github-light" },
+		background: { gradient: "linear-gradient(180deg, rgb(15 118 110 / 0.04), transparent 220px)" }
 	}
 };
 async function resolveTheme(options) {
@@ -1056,10 +1061,11 @@ function themeToCssVariables(theme, fontOverrides = {}, linkOptions = {}, naviga
 	const navigationDuration = navigationOptions.duration ?? 180;
 	const rootVariables = themeToCssVariableBlock(theme.light, fontOverrides);
 	const darkVariables = theme.dark ? themeToCssVariableBlock(theme.dark, fontOverrides) : void 0;
+	const rootBackgroundVariables = themeToBackgroundVariableBlock(theme.light);
+	const darkBackgroundVariables = theme.dark ? themeToBackgroundVariableBlock(theme.dark) : void 0;
 	return `:root {
 ${theme.dark ? "  color-scheme: light dark;\n" : ""}${rootVariables}
-  --ld-background-image: none;
-  --ld-background-blend-mode: normal;
+${rootBackgroundVariables}
   --ld-font-logo: var(--ld-font-heading);
   --ld-link-text-decoration: ${linkDecoration.default};
   --ld-link-hover-text-decoration: ${linkDecoration.hover};
@@ -1069,7 +1075,7 @@ ${theme.dark ? "  color-scheme: light dark;\n" : ""}${rootVariables}
 
 @media (prefers-color-scheme: dark) {
   :root {
-${darkVariables}    color-scheme: dark;
+${darkVariables}${darkBackgroundVariables}    color-scheme: dark;
   }
 }` : ""}`;
 }
@@ -1112,12 +1118,18 @@ function themeToCssVariableBlock(theme, fontOverrides) {
   --ld-color-border: ${color.border};
   --ld-color-link: ${color.link};
   --ld-color-code-background: ${color.codeBackground};
+  --ld-color-code-foreground: ${color.codeForeground ?? color.text};
   --ld-color-sidebar-background: ${color.sidebarBackground ?? color.background};
   --ld-font-heading: ${fonts.heading};
   --ld-font-body: ${fonts.body};
   --ld-font-code: ${fonts.code};
 `;
 }
+function themeToBackgroundVariableBlock(theme) {
+	return `  --ld-background-image: ${theme.background?.gradient ?? "none"};
+  --ld-background-blend-mode: ${theme.background?.blendMode ?? "normal"};
+`;
+}
 function normalizeThemeColors(color) {
 	return {
 		...color,
@@ -1141,6 +1153,11 @@ function validateTheme(value, themePath) {
 		theme.font?.body,
 		theme.font?.code ?? theme.font?.mono
 	].some((item) => typeof item !== "string" || item.length === 0)) throw new LildocsError(`Local theme is missing required color or font string values: ${themePath}`);
+	if (theme.background !== void 0) {
+		if (!theme.background || typeof theme.background !== "object") throw new LildocsError(`Local theme "background" must be an object: ${themePath}`);
+		if (theme.background.gradient !== void 0 && (typeof theme.background.gradient !== "string" || theme.background.gradient.length === 0)) throw new LildocsError(`Local theme "background.gradient" must be a non-empty string: ${themePath}`);
+		if (theme.background.blendMode !== void 0 && (typeof theme.background.blendMode !== "string" || theme.background.blendMode.length === 0)) throw new LildocsError(`Local theme "background.blendMode" must be a non-empty string: ${themePath}`);
+	}
 	return theme;
 }
 function mapShikiThemeToTheme(shikiTheme, themeName) {
@@ -1156,27 +1173,30 @@ function mapShikiThemeToTheme(shikiTheme, themeName) {
 		"foreground",
 		"sideBar.foreground"
 	], shikiTheme.fg ?? (shikiTheme.type === "dark" ? "#f5f5f5" : "#111111"));
+	const mutedText = pickColor(colors, [
+		"descriptionForeground",
+		"breadcrumb.foreground",
+		"editorLineNumber.foreground",
+		"sideBar.foreground"
+	], tokenForeground(tokenColors, "comment") ?? text);
+	const border = pickColor(colors, [
+		"panel.border",
+		"sideBar.border",
+		"editorGroup.border",
+		"tab.border"
+	], shikiTheme.type === "dark" ? "#333333" : "#e5e5e5");
+	const link = pickColor(colors, [
+		"textLink.foreground",
+		"terminal.ansiBlue",
+		"activityBarBadge.background"
+	], tokenForeground(tokenColors, "markup.inline.raw") ?? (shikiTheme.type === "dark" ? "#79b8ff" : "#2563eb"));
 	return {
 		color: {
 			background,
 			text,
-			mutedText: pickColor(colors, [
-				"descriptionForeground",
-				"breadcrumb.foreground",
-				"editorLineNumber.foreground",
-				"sideBar.foreground"
-			], tokenForeground(tokenColors, "comment") ?? text),
-			border: pickColor(colors, [
-				"panel.border",
-				"sideBar.border",
-				"editorGroup.border",
-				"tab.border"
-			], shikiTheme.type === "dark" ? "#333333" : "#e5e5e5"),
-			link: pickColor(colors, [
-				"textLink.foreground",
-				"terminal.ansiBlue",
-				"activityBarBadge.background"
-			], tokenForeground(tokenColors, "markup.inline.raw") ?? (shikiTheme.type === "dark" ? "#79b8ff" : "#2563eb")),
+			mutedText,
+			border,
+			link,
 			codeBackground: ensureBackgroundContrast({
 				background,
 				candidate: pickColor(colors, [
@@ -1187,6 +1207,7 @@ function mapShikiThemeToTheme(shikiTheme, themeName) {
 				], background),
 				isDark: shikiTheme.type === "dark"
 			}),
+			codeForeground: text,
 			sidebarBackground: pickColor(colors, [
 				"sideBar.background",
 				"activityBar.background",
@@ -1198,7 +1219,8 @@ function mapShikiThemeToTheme(shikiTheme, themeName) {
 			body: "system-ui, sans-serif",
 			code: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
 		},
-		shiki: { theme: themeName }
+		shiki: { theme: themeName },
+		background: { gradient: shikiTheme.type === "dark" ? `linear-gradient(180deg, color-mix(in srgb, ${link} 16%, transparent), transparent 240px)` : `linear-gradient(180deg, color-mix(in srgb, ${link} 9%, transparent), transparent 220px)` }
 	};
 }
 function pickColor(colors, keys, fallback) {
@@ -1285,9 +1307,11 @@ function ensureDarkBorderLightness(options) {
 	const textOklch = toOklch(text);
 	const candidateOklch = toOklch(candidate);
 	if (!backgroundOklch || !textOklch || !candidateOklch || typeof backgroundOklch.l !== "number" || typeof textOklch.l !== "number" || typeof candidateOklch.l !== "number") return options.candidate;
-	if (backgroundOklch.l >= textOklch.l || candidateOklch.l > backgroundOklch.l) return options.candidate;
+	if (backgroundOklch.l >= textOklch.l) return options.candidate;
+	const currentContrast = wcagContrast(background, candidate);
+	if (candidateOklch.l > backgroundOklch.l && currentContrast >= MIN_DARK_BORDER_CONTRAST) return options.candidate;
 	let bestColor = options.candidate;
-	let bestLightness = candidateOklch.l;
+	let bestContrast = currentContrast;
 	for (let step = 1; step <= MAX_BACKGROUND_CONTRAST_STEPS; step += 1) {
 		const clampedColor = clampToRgb({
 			...candidateOklch,
@@ -1297,13 +1321,15 @@ function ensureDarkBorderLightness(options) {
 		if (!clampedColor) continue;
 		const adjustedColor = formatHex(clampedColor);
 		const adjustedParsedColor = parse(adjustedColor);
-		const adjustedOklch = adjustedParsedColor ? toOklch(adjustedParsedColor) : void 0;
+		if (!adjustedParsedColor) continue;
+		const adjustedOklch = toOklch(adjustedParsedColor);
 		if (!adjustedOklch || typeof adjustedOklch.l !== "number") continue;
-		if (adjustedOklch.l > bestLightness) {
+		const adjustedContrast = wcagContrast(background, adjustedParsedColor);
+		if (adjustedOklch.l > backgroundOklch.l && adjustedContrast > bestContrast) {
 			bestColor = adjustedColor;
-			bestLightness = adjustedOklch.l;
+			bestContrast = adjustedContrast;
 		}
-		if (adjustedOklch.l > backgroundOklch.l) return adjustedColor;
+		if (adjustedOklch.l > backgroundOklch.l && adjustedContrast >= MIN_DARK_BORDER_CONTRAST) return adjustedColor;
 	}
 	return bestColor;
 }

package/dist/render/copy-code.js

@@ -15,11 +15,13 @@
     }
 
     for (const block of blocks) {
-      if (block.querySelector(":scope > .copyCodeButton")) {
+      if (block.parentElement?.classList.contains("copyCodeBlock")) {
         continue;
       }
 
       const copyText = block.textContent ?? "";
+      const wrapper = document.createElement("div");
+      wrapper.className = "copyCodeBlock";
       const button = document.createElement("button");
       button.type = "button";
       button.className = "copyCodeButton";
@@ -45,7 +47,8 @@
         }
       });
 
-      block.append(button);
+      block.before(wrapper);
+      wrapper.append(block, button);
     }
   }
 })();

package/dist/render/styles.css

@@ -132,7 +132,7 @@ html.is-animating .transition-scale {
 
 .content {
   min-width: 0;
-  padding-block: 28px 64px;
+  padding-block: 0 64px;
   line-height: 1.65;
 }
 
@@ -154,6 +154,10 @@ html.is-animating .transition-scale {
   margin-bottom: 8px;
 }
 
+.content article > :first-child {
+  margin-top: 0;
+}
+
 .content blockquote {
   margin: 20px 0;
   padding: 10px 16px;
@@ -181,7 +185,6 @@ html.is-animating .transition-scale {
 }
 
 .content a,
-.toc a,
 .navList a {
   color: var(--ld-color-link);
 }
@@ -279,6 +282,15 @@ html.is-animating .transition-scale {
   white-space: inherit;
 }
 
+.content .copyCodeBlock {
+  position: relative;
+  margin-block: 1em;
+}
+
+.content .copyCodeBlock > pre {
+  margin: 0;
+}
+
 .content pre.shiki {
   color: var(--shiki-light);
   background: var(--shiki-light-bg);
@@ -310,6 +322,13 @@ html.is-animating .transition-scale {
   font-size: 0.92em;
 }
 
+.content :not(pre) > code {
+  padding: 0.16em 0.36em;
+  border-radius: 4px;
+  background: var(--ld-color-code-background);
+  color: var(--ld-color-code-foreground);
+}
+
 .copyCodeButton {
   position: absolute;
   top: 10px;
@@ -325,10 +344,19 @@ html.is-animating .transition-scale {
   background: color-mix(in srgb, var(--ld-color-background) 88%, transparent);
   color: var(--ld-color-muted-text);
   line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
   vertical-align: top;
   cursor: pointer;
 }
 
+.content .copyCodeBlock:hover .copyCodeButton,
+.copyCodeButton:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .copyCodeIcon {
   font-size: 18px;
   line-height: 1;
@@ -464,6 +492,7 @@ html.is-animating .transition-scale {
 }
 
 .toc a {
+  color: var(--ld-color-muted-text);
   text-decoration: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lildocs",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A lightweight CLI that turns Markdown docs into a static searchable documentation site.",
   "homepage": "https://aleclarson.github.io/lildocs/",
   "repository": {