@monimesl/dot-renderer-react 0.1.0-alpha.9 → 1.0.0-beta.0

package/dist/markdown.js

@@ -0,0 +1,255 @@
+//#region src/markdown.ts
+const HEADING = /^(#{1,6})\s+(.*)$/;
+const RULE = /^ {0,3}([-*_])( *\1){2,} *$/;
+const QUOTE = /^ {0,3}> ?/;
+const LIST_ITEM = /^ {0,3}([-*+]|\d{1,9}[.)])\s+/;
+const LINK = /^(!?)\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/;
+const AUTOLINK = /^<(https?:\/\/[^>\s]+)>/;
+const PUNCTUATION = /[!-/:-@[-`{-~]/;
+const ITEM_INDENT = "  ";
+const MAX_INLINE_LENGTH = 2e4;
+function parseMarkdown(markdown) {
+	return parseBlocks(markdown.replace(/\r\n?/g, "\n").split("\n"));
+}
+function parseBlocks(lines) {
+	const blocks = [];
+	let index = 0;
+	while (index < lines.length) {
+		const line = lines[index];
+		if (line.trim() === "") {
+			index += 1;
+			continue;
+		}
+		const single = oneLineBlock(line);
+		if (single) {
+			blocks.push(single);
+			index += 1;
+		} else if (QUOTE.test(line)) {
+			const quoted = [];
+			while (index < lines.length && QUOTE.test(lines[index])) {
+				quoted.push(lines[index].replace(QUOTE, ""));
+				index += 1;
+			}
+			blocks.push({
+				kind: "quote",
+				blocks: parseBlocks(quoted)
+			});
+		} else if (LIST_ITEM.test(line)) {
+			const { list, next } = parseList(lines, index);
+			blocks.push(list);
+			index = next;
+		} else {
+			const paragraph = [];
+			while (index < lines.length && !endsParagraph(lines[index])) {
+				paragraph.push(lines[index]);
+				index += 1;
+			}
+			blocks.push({
+				kind: "paragraph",
+				content: parseInline(joinLines(paragraph))
+			});
+		}
+	}
+	return blocks;
+}
+function oneLineBlock(line) {
+	const heading = HEADING.exec(line);
+	if (heading) return {
+		kind: "heading",
+		level: Math.min(heading[1].length, 3),
+		content: parseInline(withoutClosingHashes(heading[2]))
+	};
+	if (RULE.test(line)) return { kind: "rule" };
+	const trimmed = line.trim();
+	const picture = LINK.exec(trimmed);
+	if (picture && picture[1] === "!" && picture[0].length === trimmed.length) return {
+		kind: "image",
+		alt: picture[2],
+		src: picture[3]
+	};
+	return null;
+}
+function withoutClosingHashes(text) {
+	let end = text.trimEnd().length;
+	while (end > 0 && text[end - 1] === "#") end -= 1;
+	return text.slice(0, end).trimEnd();
+}
+function endsParagraph(line) {
+	return line.trim() === "" || HEADING.test(line) || RULE.test(line) || QUOTE.test(line) || LIST_ITEM.test(line);
+}
+function joinLines(lines) {
+	let text = "";
+	lines.forEach((line, index) => {
+		text += line.trim().replace(/\\$/, "");
+		if (index < lines.length - 1) text += /( {2,}|\\)$/.test(line) ? "\n" : " ";
+	});
+	return text;
+}
+function parseList(lines, start) {
+	const ordered = isOrdered(LIST_ITEM.exec(lines[start]));
+	const items = [];
+	let index = start;
+	while (index < lines.length) {
+		const marker = LIST_ITEM.exec(lines[index]);
+		if (!marker || isOrdered(marker) !== ordered) break;
+		const indent = marker[0].length;
+		const itemLines = [lines[index].slice(indent)];
+		index += 1;
+		while (index < lines.length) {
+			const line = lines[index];
+			if (line.trim() === "") {
+				if (!lines[index + 1]?.startsWith(ITEM_INDENT)) break;
+				itemLines.push("");
+			} else if (line.startsWith(ITEM_INDENT)) itemLines.push(withoutIndent(line, indent));
+			else if (endsParagraph(line)) break;
+			else itemLines.push(line);
+			index += 1;
+		}
+		items.push(parseBlocks(itemLines));
+	}
+	return {
+		list: {
+			kind: "list",
+			ordered,
+			items
+		},
+		next: index
+	};
+}
+function isOrdered(marker) {
+	return /\d/.test(marker[1]);
+}
+function withoutIndent(line, indent) {
+	const spaces = line.length - line.trimStart().length;
+	return line.slice(Math.min(spaces, indent));
+}
+function parseInline(text) {
+	if (text.length > MAX_INLINE_LENGTH) return [{
+		kind: "text",
+		text
+	}];
+	const inlines = [];
+	const closingSearches = /* @__PURE__ */ new Map();
+	let plain = "";
+	let index = 0;
+	const flush = () => {
+		if (plain) {
+			inlines.push({
+				kind: "text",
+				text: plain
+			});
+			plain = "";
+		}
+	};
+	const take = (inline, length) => {
+		flush();
+		inlines.push(inline);
+		index += length;
+	};
+	while (index < text.length) {
+		const char = text[index];
+		const next = text[index + 1];
+		const rest = text.slice(index);
+		if (char === "\\" && next !== void 0 && PUNCTUATION.test(next)) {
+			plain += next;
+			index += 2;
+			continue;
+		}
+		if (char === "\n") {
+			take({ kind: "break" }, 1);
+			continue;
+		}
+		if (char === "`") {
+			const codeEnd = text.indexOf("`", index + 1);
+			if (codeEnd > index + 1) {
+				take({
+					kind: "code",
+					text: text.slice(index + 1, codeEnd)
+				}, codeEnd + 1 - index);
+				continue;
+			}
+		}
+		const link = LINK.exec(rest);
+		if (link) {
+			const [whole, picture, label, href] = link;
+			take(picture === "!" ? {
+				kind: "text",
+				text: label
+			} : {
+				kind: "link",
+				href,
+				children: parseInline(label)
+			}, whole.length);
+			continue;
+		}
+		const autolink = AUTOLINK.exec(rest);
+		if (autolink) {
+			const [whole, href] = autolink;
+			take({
+				kind: "link",
+				href,
+				children: [{
+					kind: "text",
+					text: href
+				}]
+			}, whole.length);
+			continue;
+		}
+		if (char === "*" || char === "_") {
+			const strong = between(text, index, char + char, closingSearches);
+			if (strong) {
+				take({
+					kind: "strong",
+					children: parseInline(strong.inner)
+				}, strong.length);
+				continue;
+			}
+			const emphasis = between(text, index, char, closingSearches);
+			if (emphasis) {
+				take({
+					kind: "emphasis",
+					children: parseInline(emphasis.inner)
+				}, emphasis.length);
+				continue;
+			}
+		}
+		plain += char;
+		index += 1;
+	}
+	flush();
+	return inlines;
+}
+function between(text, start, delimiter, closingSearches) {
+	const open = start + delimiter.length;
+	if (!text.startsWith(delimiter, start) || open >= text.length || /\s/.test(text[open])) return null;
+	const underscore = delimiter.startsWith("_");
+	if (underscore && /\w/.test(text[start - 1] ?? "")) return null;
+	let searchEnds = closingSearches.get(delimiter);
+	if (!searchEnds) {
+		searchEnds = /* @__PURE__ */ new Map();
+		closingSearches.set(delimiter, searchEnds);
+	}
+	const placesLookedAt = [];
+	let close = text.indexOf(delimiter, open + 1);
+	while (close !== -1) {
+		const earlierEnd = searchEnds.get(close);
+		if (earlierEnd !== void 0) {
+			close = earlierEnd;
+			break;
+		}
+		placesLookedAt.push(close);
+		const touchesSpace = /\s/.test(text[close - 1]);
+		const insideWord = underscore && /\w/.test(text[close + delimiter.length] ?? "");
+		const startsPair = delimiter.length === 1 && text[close + 1] === delimiter;
+		if (!touchesSpace && !insideWord && !startsPair) break;
+		close = text.indexOf(delimiter, close + (startsPair ? 2 : 1));
+	}
+	for (const place of placesLookedAt) searchEnds.set(place, close);
+	if (close === -1) return null;
+	return {
+		inner: text.slice(open, close),
+		length: close + delimiter.length - start
+	};
+}
+//#endregion
+export { parseInline, parseMarkdown };

package/dist/page-root.js

@@ -6,7 +6,7 @@ function PageRoot({ page, components }) {
 	const context = useMemo(() => ({
 		h(type, props, ...children) {
 			const component = components[type];
-			if (!component) throw new Error(`The renderer has no component registered for tag '<${type}>'`);
+			if (!component) throw new Error(`The renderer has no component for <${type}>. Check the tag's name, or pass a component for it to the renderer.`);
 			return createElement(component, props, ...children);
 		},
 		text: toText,

package/dist/pull-to-refresh.js

@@ -0,0 +1,120 @@
+import { useTheme } from "./theme.js";
+import { CENTERED } from "./components/tokens.js";
+import { LoadingIcon } from "./components/spinner.js";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pull-to-refresh.tsx
+const PULL_DISTANCE = 64;
+const LONGEST_PULL = PULL_DISTANCE * 1.5;
+const RESISTANCE = .5;
+const INDICATOR_SIZE = 36;
+const DRAG_DISTANCE = 6;
+function PullToRefresh({ page, children }) {
+	const { colors } = useTheme();
+	const refreshing = useSyncExternalStore(page.subscribeToRefreshing, page.isRefreshing);
+	const [pullDistance, setPullDistance] = useState(0);
+	const areaRef = useRef(null);
+	useEffect(() => {
+		const area = areaRef.current;
+		const view = area.ownerDocument.defaultView;
+		let startY;
+		let pulled = 0;
+		let dragged = false;
+		const begin = (y) => {
+			const atTop = view.scrollY <= 0;
+			startY = page.refreshable && atTop && !page.isRefreshing() ? y : void 0;
+			dragged = false;
+		};
+		const move = (y, event) => {
+			if (startY === void 0) return;
+			const distance = (y - startY) * RESISTANCE;
+			if (distance <= 0) {
+				pulled = 0;
+				setPullDistance(0);
+				return;
+			}
+			if (event.cancelable) event.preventDefault();
+			if (distance > DRAG_DISTANCE) dragged = true;
+			pulled = Math.min(distance, LONGEST_PULL);
+			setPullDistance(pulled);
+		};
+		const end = () => {
+			if (startY !== void 0 && pulled >= PULL_DISTANCE) page.refresh();
+			startY = void 0;
+			pulled = 0;
+			setPullDistance(0);
+		};
+		const ignoreDragClick = (event) => {
+			if (dragged) {
+				dragged = false;
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		};
+		const touchStart = (event) => begin(event.touches[0].clientY);
+		const touchMove = (event) => move(event.touches[0].clientY, event);
+		const mouseDown = (event) => {
+			if (event.button === 0) begin(event.clientY);
+		};
+		const mouseMove = (event) => move(event.clientY, event);
+		const removeListeners = [
+			listen(area, "touchstart", touchStart, { passive: true }),
+			listen(area, "touchmove", touchMove, { passive: false }),
+			listen(area, "touchend", end),
+			listen(area, "touchcancel", end),
+			listen(area, "mousedown", mouseDown),
+			listen(area, "click", ignoreDragClick, { capture: true }),
+			listen(view, "mousemove", mouseMove),
+			listen(view, "mouseup", end)
+		];
+		return () => {
+			for (const removeListener of removeListeners) removeListener();
+		};
+	}, [page]);
+	const indicatorDistance = refreshing ? PULL_DISTANCE : pullDistance;
+	const arrowTurn = Math.min(pullDistance, PULL_DISTANCE) / PULL_DISTANCE * 180;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: areaRef,
+		className: "dot-pull-to-refresh",
+		style: { display: "contents" },
+		children: [children, indicatorDistance > 0 ? /* @__PURE__ */ jsx("span", {
+			role: refreshing ? "status" : void 0,
+			"aria-label": refreshing ? "Refreshing" : void 0,
+			style: {
+				position: "fixed",
+				top: 0,
+				left: "50%",
+				zIndex: 2,
+				...CENTERED,
+				width: INDICATOR_SIZE,
+				height: INDICATOR_SIZE,
+				marginLeft: -18,
+				borderRadius: "50%",
+				background: colors.surface,
+				color: colors.primary,
+				boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+				transform: `translateY(${indicatorDistance - INDICATOR_SIZE / 2}px)`,
+				transition: pullDistance > 0 ? "none" : "transform 0.2s",
+				pointerEvents: "none"
+			},
+			children: refreshing ? /* @__PURE__ */ jsx(LoadingIcon, { size: 20 }) : /* @__PURE__ */ jsx("svg", {
+				width: 20,
+				height: 20,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				style: { transform: `rotate(${arrowTurn}deg)` },
+				children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M6 13l6 6 6-6" })
+			})
+		}) : null]
+	});
+}
+function listen(target, type, listener, options) {
+	target.addEventListener(type, listener, options);
+	return () => target.removeEventListener(type, listener, options);
+}
+//#endregion
+export { PullToRefresh };

package/dist/root.js

@@ -1,43 +1,63 @@
 import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.js";
+import { HOME_INDICATOR } from "./components/padding.js";
 import { PortalContainerContext } from "./portal.js";
 import { PageRoot } from "./page-root.js";
+import { PullToRefresh } from "./pull-to-refresh.js";
+import { mergeColors } from "@monimesl/dot-core";
 import { useMemo, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/root.tsx
 function Root({ page, dotContext, components, wrapper: Wrapper }) {
 	const theme = useSyncExternalStore(dotContext.theme.subscribe, dotContext.theme.get);
 	const systemContext = useSyncExternalStore(dotContext.systemContext.subscribe, dotContext.systemContext.get);
-	const resolved = useMemo(() => resolveTheme(theme, systemContext.scheme), [theme, systemContext.scheme]);
+	const pageColors = useSyncExternalStore(page.subscribeToColors, page.getColors);
+	const resolvedTheme = useMemo(() => resolveTheme(theme, systemContext.scheme, pageColors), [
+		theme,
+		systemContext.scheme,
+		pageColors
+	]);
 	const [rootElement, setRootElement] = useState(null);
-	const content = /* @__PURE__ */ jsx(PageRoot, {
+	const pageContent = /* @__PURE__ */ jsx(PageRoot, {
 		page,
 		components
 	});
 	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value: resolved,
+		value: resolvedTheme,
 		children: /* @__PURE__ */ jsx("div", {
 			ref: setRootElement,
 			className: "dot-theme-root",
-			"data-dot-scheme": resolved.scheme,
+			"data-dot-scheme": resolvedTheme.scheme,
 			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
 				value: rootElement,
-				children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
-					theme: {
-						...theme,
-						scheme: resolved.scheme
-					},
-					children: content
-				}) : /* @__PURE__ */ jsx(DefaultSurface, { children: content })
+				children: /* @__PURE__ */ jsx(PullToRefresh, {
+					page,
+					children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
+						theme: withPageColors(theme, resolvedTheme.scheme, pageColors),
+						children: pageContent
+					}) : /* @__PURE__ */ jsx(DefaultSurface, { children: pageContent })
+				})
 			})
 		})
 	});
 }
+function withPageColors(theme, scheme, pageColors) {
+	return {
+		...theme,
+		scheme,
+		colors: {
+			...theme.colors,
+			...mergeColors(theme.colors ?? {}, pageColors)
+		}
+	};
+}
 function DefaultSurface({ children }) {
 	const { colors } = useTheme();
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-surface",
 		style: {
+			boxSizing: "border-box",
 			minHeight: "100vh",
+			paddingBottom: HOME_INDICATOR,
 			display: "flex",
 			flexDirection: "column",
 			background: colors.background,

package/dist/styles.css

@@ -1,95 +1 @@
-/*
- * Dot's own stylesheet: what inline styles can't say, such as pseudo-elements, keyframes and
- * rules for every element. The global rules join the lowest layer, so they never override a
- * component's own styles; the components' rules are outside the layers.
- */
-
-@layer base {
-  .dot-theme-root,
-  .dot-theme-root *,
-  .dot-theme-root ::before,
-  .dot-theme-root ::after {
-    box-sizing: border-box;
-  }
-
-  .dot-theme-root :is(button, input, select, textarea) {
-    font: inherit;
-  }
-
-  [data-dot-scheme='light'] {
-    color-scheme: light;
-  }
-
-  [data-dot-scheme='dark'] {
-    color-scheme: dark;
-  }
-}
-
-/* Skeleton: pulses down to 40% every 1.2s. */
-@keyframes dot-skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* Image: no wider than the space it's given, unless a Scroll lets it keep its own width. */
-.dot-image {
-  display: block;
-  max-width: 100%;
-}
-
-/* List: a full-width line under each row but the last, in the color the list passes. */
-.dot-list > .dot-list-item:not(:last-child) {
-  border-bottom: 1px solid var(--dot-list-divider);
-}
-
-/* Scroll: a row that scrolls sideways with the finger, without a scroll bar. */
-.dot-scroll {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-}
-
-.dot-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-/* Each child keeps its width, a View as wide as its widest fixed-size child. Children are styled
-   here rather than wrapped, as a For loop's items reach the row as one child. */
-.dot-scroll > * {
-  flex: 0 0 auto;
-  width: min-content;
-  scroll-snap-align: var(--dot-scroll-snap);
-}
-
-/* A picture's own width sets its item's: with a max-width of 100%, it would count for none. */
-.dot-scroll .dot-image {
-  max-width: none;
-}
-
-/* Sheet: slides up over a page that dims, and back down when it closes. Base UI marks the first
-   and last frames, and waits for the transitions before it removes the sheet. */
-.dot-sheet-backdrop {
-  transition: opacity 0.2s;
-}
-
-.dot-sheet {
-  transition: transform 0.2s ease-out;
-}
-
-.dot-sheet-backdrop:is([data-starting-style], [data-ending-style]) {
-  opacity: 0;
-}
-
-.dot-sheet:is([data-starting-style], [data-ending-style]) {
-  transform: translateY(100%);
-}
+@layer base{.dot-theme-root,.dot-theme-root *,.dot-theme-root :before,.dot-theme-root :after{box-sizing:border-box}.dot-theme-root :is(button,input,select,textarea){font:inherit}[data-dot-scheme=light]{color-scheme:light}[data-dot-scheme=dark]{color-scheme:dark}.dot-theme-root{-webkit-user-select:none;user-select:none}.dot-theme-root :is(input,textarea){-webkit-user-select:text;user-select:text}}@keyframes dot-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.dot-image{max-width:100%;display:block}.dot-list>.dot-list-item:not(:last-child){border-bottom:1px solid var(--dot-list-divider)}.dot-scroll{overscroll-behavior-x:contain;scrollbar-width:none;flex-direction:row;display:flex;position:relative;overflow:auto hidden}.dot-scroll::-webkit-scrollbar{display:none}.dot-scroll>*{scroll-snap-align:var(--dot-scroll-snap);flex:none;width:min-content}.dot-scroll .dot-image{max-width:none}.dot-disclosure>summary{list-style:none}.dot-disclosure>summary::-webkit-details-marker{display:none}.dot-steps>.dot-step:last-child .dot-step-line{display:none}.dot-sheet-backdrop{transition:opacity .2s}.dot-sheet{transition:transform .2s ease-out}.dot-sheet-backdrop:is([data-starting-style],[data-ending-style]){opacity:0}.dot-sheet:is([data-starting-style],[data-ending-style]){transform:translateY(100%)}.dot-prose>.dot-heading{margin-block-start:.5em}.dot-prose>.dot-heading:first-child{margin-block-start:0}

package/dist/theme.d.ts

@@ -1,4 +1,4 @@
-import { ColorScheme, Theme, ThemeShape } from "@monimesl/dot-core";
+import { ColorScheme, PageColors, Theme, ThemeShape } from "@monimesl/dot-core";
 //#region src/theme.d.ts
 export interface ResolvedColors {
   primary: string;
@@ -17,9 +17,10 @@ export interface ResolvedColors {
 export interface ResolvedTheme {
   scheme: ColorScheme;
   colors: ResolvedColors;
+  customColors: Readonly<Record<string, string>>;
   shape: ThemeShape;
   radius: number;
 }
-export declare function resolveTheme(theme: Theme, systemScheme: ColorScheme): ResolvedTheme;
+export declare function resolveTheme(theme: Theme, systemScheme: ColorScheme, pageColors?: PageColors): ResolvedTheme;
 export declare function useTheme(): ResolvedTheme;
 //#endregion

package/dist/theme.js

@@ -1,4 +1,5 @@
-import { contrast, darken } from "./color.js";
+import { darken, mix } from "./color.js";
+import { DEFAULT_BACKGROUND, READABLE_CONTRAST, contrast, isDark, pageBackground, textOn, themeScheme } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 //#region src/theme.ts
 const FONT_FAMILY = "system-ui, sans-serif";
@@ -11,7 +12,7 @@ const SHAPE_RADIUS = {
 const DEFAULT_COLORS = {
 	light: {
 		primary: "#1c1c1e",
-		background: "#f2f2f2",
+		background: DEFAULT_BACKGROUND.light,
 		surface: "#ffffff",
 		text: "#111111",
 		subtle: "#8e8e93",
@@ -24,7 +25,7 @@ const DEFAULT_COLORS = {
 	},
 	dark: {
 		primary: "#f5f5f5",
-		background: "#121212",
+		background: DEFAULT_BACKGROUND.dark,
 		surface: "#1e1e1e",
 		text: "#f5f5f5",
 		subtle: "#8e8e93",
@@ -36,37 +37,81 @@ const DEFAULT_COLORS = {
 		danger: "#ff6961"
 	}
 };
-const MOST_DARKENING = 15;
-function resolveTheme(theme, systemScheme) {
-	const scheme = !theme.scheme || theme.scheme === "system" ? systemScheme : theme.scheme;
+function resolveTheme(theme, systemScheme, pageColors = {}) {
+	const scheme = themeScheme(theme, systemScheme);
 	const defaults = DEFAULT_COLORS[scheme];
-	const colors = theme.colors ?? {};
-	const pick = (color, fallback) => color?.[scheme] ?? fallback;
+	const themeColors = theme.colors ?? {};
+	const ownColor = (name) => pageColors[name]?.[scheme] ?? themeColors[name]?.[scheme];
 	const shape = theme.shape ?? "soft";
-	const surface = pick(colors.surface, defaults.surface);
-	const text = pick(colors.text, defaults.text);
-	const primary = pick(colors.primary, defaults.primary);
+	const background = pageBackground(pageColors.background, theme, systemScheme);
+	const onDashBackground = background === defaults.background;
+	let surfaces = defaults;
+	if (!onDashBackground) surfaces = surfacesOn(background);
+	const surface = ownColor("surface") ?? surfaces.surface;
+	const text = ownColor("text") ?? readableText(defaults.text, background);
+	let subtle = defaults.subtle;
+	if (!onDashBackground) subtle = quieterText(text, background, surface);
+	const primary = ownColor("primary") ?? defaults.primary;
 	return {
 		scheme,
 		colors: {
 			...defaults,
 			...primaryAndOnPrimary(primary, surface, text, scheme),
-			background: pick(colors.background, defaults.background),
+			background,
 			surface,
-			text
+			text,
+			muted: ownColor("muted") ?? surfaces.muted,
+			border: ownColor("border") ?? surfaces.border,
+			subtle: ownColor("subtle") ?? subtle
 		},
+		customColors: resolveCustomColors(themeColors.custom ?? {}, scheme),
 		shape,
 		radius: SHAPE_RADIUS[shape]
 	};
 }
+function surfacesOn(background) {
+	if (isDark(background)) return {
+		surface: mix(background, "#ffffff", .08),
+		muted: mix(background, "#ffffff", .14),
+		border: mix(background, "#ffffff", .16)
+	};
+	return {
+		surface: mix(background, "#ffffff", .75),
+		muted: mix(background, "#000000", .06),
+		border: mix(background, "#000000", .1)
+	};
+}
+const QUIET_CONTRAST = 3;
+function quieterText(text, background, surface) {
+	for (let shareOfBackground = .5; shareOfBackground > 0; shareOfBackground -= .05) {
+		const quieter = mix(text, background, shareOfBackground);
+		const readsOnBackground = contrast(quieter, background) >= QUIET_CONTRAST;
+		const readsOnSurface = contrast(quieter, surface) >= QUIET_CONTRAST;
+		if (readsOnBackground && readsOnSurface) return quieter;
+	}
+	return text;
+}
+function readableText(text, background) {
+	if (contrast(text, background) >= READABLE_CONTRAST) return text;
+	return textOn(background);
+}
+function resolveCustomColors(custom, scheme) {
+	const resolved = {};
+	for (const [name, color] of Object.entries(custom)) {
+		const value = color[scheme] ?? color.light ?? color.dark;
+		if (value) resolved[name] = value;
+	}
+	return resolved;
+}
+const MOST_DARKENING = 15;
 function primaryAndOnPrimary(primary, surface, text, scheme) {
-	if (contrast(primary, surface) >= 4.5) return {
+	if (contrast(primary, surface) >= READABLE_CONTRAST) return {
 		primary,
 		onPrimary: surface
 	};
 	if (scheme === "light") for (let points = .5; points <= MOST_DARKENING; points += .5) {
 		const darker = darken(primary, points);
-		if (contrast(darker, surface) >= 4.5) return {
+		if (contrast(darker, surface) >= READABLE_CONTRAST) return {
 			primary: darker,
 			onPrimary: surface
 		};