@monimesl/dot-renderer-react 0.1.0-alpha.21 → 0.1.0-alpha.24

package/dist/components/slider.js

@@ -8,9 +8,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/slider.tsx
 const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint, disabled, onChange }) => {
 	const { colors } = useTheme();
-	const [position, move] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
+	const [positionText, showPosition] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
 	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
-	const shown = position === "" ? String(min) : position;
+	const shownValue = positionText === "" ? String(min) : positionText;
 	return /* @__PURE__ */ jsxs(Field, {
 		label: void 0,
 		hint,
@@ -27,7 +27,7 @@ const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint,
 					color: colors.subtle,
 					fontVariantNumeric: "tabular-nums"
 				},
-				children: shown
+				children: shownValue
 			}) : null]
 		}) : null, /* @__PURE__ */ jsx("input", {
 			className: "dot-slider",
@@ -35,13 +35,13 @@ const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint,
 			min,
 			max,
 			step,
-			value: shown,
+			value: shownValue,
 			disabled,
 			"aria-label": label,
 			...controlAttributes,
 			onChange: (event) => {
 				const next = event.currentTarget.value;
-				move(next);
+				showPosition(next);
 				onChange?.(createEvent("change", { value: Number(next) }));
 			},
 			style: {

package/dist/components/stepper.js

@@ -1,5 +1,5 @@
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
+import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { Field } from "./field.js";
 import { useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";
@@ -9,11 +9,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stepper.tsx
 const Stepper$1 = ({ value, min, max, step = 1, label, hint, disabled, onChange }) => {
 	const { colors } = useTheme();
-	const [shown, show] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
+	const [shownText, showText] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
 	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
-	const current = shown === "" ? min ?? 0 : Number(shown);
+	const current = shownText === "" ? min ?? 0 : Number(shownText);
 	const moveTo = (next) => {
-		show(String(next));
+		showText(String(next));
 		onChange?.(createEvent("change", { value: next }));
 	};
 	const atMin = min !== void 0 && current - step < min;
@@ -71,9 +71,7 @@ function StepButton({ icon, label, disabled, onPress }) {
 		disabled,
 		onClick: onPress,
 		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
+			...CENTERED,
 			width: 40,
 			height: 40,
 			border: "none",

package/dist/components/steps.js

@@ -1,5 +1,5 @@
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, WEIGHTS } from "./tokens.js";
+import { CENTERED, FONT_SIZE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ const Steps = ({ children, ...padding }) => /* @__PURE__ */ jsx("ol", {
 	},
 	children
 });
-function mark(colors, status) {
+function stepMark(colors, status) {
 	switch (status) {
 		case "done": return {
 			background: colors.success,
@@ -41,7 +41,7 @@ function mark(colors, status) {
 }
 const Step = ({ title, text, status = "upcoming" }) => {
 	const { colors } = useTheme();
-	const { background, border, icon } = mark(colors, status);
+	const { background, border, icon } = stepMark(colors, status);
 	return /* @__PURE__ */ jsxs("li", {
 		className: "dot-step",
 		"aria-current": status === "current" ? "step" : void 0,
@@ -58,9 +58,7 @@ const Step = ({ title, text, status = "upcoming" }) => {
 			},
 			children: [/* @__PURE__ */ jsx("span", {
 				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
+					...CENTERED,
 					flexShrink: 0,
 					width: MARK_SIZE,
 					height: MARK_SIZE,

package/dist/components/tabs.js

@@ -1,5 +1,5 @@
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
+import { CENTERED, FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { TabsRoot } from "../vendor/@base-ui/react/tabs/root/TabsRoot.js";
 import { TabsTab } from "../vendor/@base-ui/react/tabs/tab/TabsTab.js";
@@ -15,6 +15,14 @@ const TabsContext = createContext({
 const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }) => {
 	const { colors, radius } = useTheme();
 	const segmented = variant === "segmented";
+	let variantStyle;
+	if (segmented) variantStyle = {
+		gap: 2,
+		padding: 3,
+		borderRadius: radius,
+		background: colors.muted
+	};
+	else variantStyle = { borderBottom: `1px solid ${colors.border}` };
 	return /* @__PURE__ */ jsx(TabsRoot, {
 		value: value ?? null,
 		onValueChange: (next) => {
@@ -26,12 +34,7 @@ const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }
 			style: {
 				display: "flex",
 				overflowX: "auto",
-				...segmented ? {
-					gap: 2,
-					padding: 3,
-					borderRadius: radius,
-					background: colors.muted
-				} : { borderBottom: `1px solid ${colors.border}` }
+				...variantStyle
 			},
 			children: /* @__PURE__ */ jsx(TabsContext.Provider, {
 				value: {
@@ -50,13 +53,22 @@ const Tab$1 = ({ value, label, badge }) => {
 	const selected = value === chosen;
 	let color = colors.subtle;
 	if (selected) color = segmented ? colors.text : colors.primary;
+	let variantStyle;
+	if (segmented) variantStyle = {
+		borderRadius: Math.max(radius - 2, 0),
+		background: selected ? colors.surface : "transparent",
+		boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
+	};
+	else variantStyle = {
+		marginBottom: -1,
+		background: "transparent",
+		borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
+	};
 	return /* @__PURE__ */ jsxs(TabsTab, {
 		className: "dot-tab",
 		value,
 		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
+			...CENTERED,
 			gap: 6,
 			flex: "1 0 auto",
 			minHeight: segmented ? 36 : 44,
@@ -67,15 +79,7 @@ const Tab$1 = ({ value, label, badge }) => {
 			whiteSpace: "nowrap",
 			color,
 			cursor: "pointer",
-			...segmented ? {
-				borderRadius: Math.max(radius - 2, 0),
-				background: selected ? colors.surface : "transparent",
-				boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
-			} : {
-				marginBottom: -1,
-				background: "transparent",
-				borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
-			}
+			...variantStyle
 		},
 		children: [label, badge ? /* @__PURE__ */ jsx("span", {
 			style: {

package/dist/components/text.js

@@ -52,12 +52,12 @@ const DECORATION = {
 };
 const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
 	const theme = useTheme();
-	const nested = useContext(InsideText);
+	const insideText = useContext(InsideText);
 	const inProse = useContext(InsideProse);
 	const { heading, lineHeight, weight: defaultWeight } = VARIANTS[variant];
 	const defaultLeading = inProse && !heading ? "relaxed" : "normal";
 	const style = {
-		display: nested ? "inline" : "block",
+		display: insideText ? "inline" : "block",
 		marginInline: 0,
 		marginBlockEnd: 0,
 		marginBlockStart: inProse && heading ? void 0 : 0,
@@ -72,7 +72,7 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		...selectable ? SELECTABLE : void 0,
 		...paddingStyle(padding)
 	};
-	if (!nested) {
+	if (!insideText) {
 		style.lineHeight = lineHeight + LEADING_CHANGE[leading ?? defaultLeading];
 		style.textWrap = heading ? "balance" : "pretty";
 		style.overflowWrap = "anywhere";
@@ -87,7 +87,7 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		value: true,
 		children
 	});
-	if ((variant === "title" || variant === "subtitle") && !nested) return /* @__PURE__ */ jsx(variant === "title" ? "h2" : "h3", {
+	if ((variant === "title" || variant === "subtitle") && !insideText) return /* @__PURE__ */ jsx(variant === "title" ? "h2" : "h3", {
 		className: "dot-text dot-heading",
 		style,
 		children: content
@@ -100,7 +100,8 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 };
 function textColor(tone, theme) {
 	if (isTone(tone)) return toneColor(theme.colors, tone);
-	return tone === "onPrimary" ? theme.colors.onPrimary : customColor(tone, theme);
+	if (tone === "onPrimary") return theme.colors.onPrimary;
+	return customColor(tone, theme);
 }
 //#endregion
 export { Text };

package/dist/components/toggles.js

@@ -1,5 +1,5 @@
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
+import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { FieldLabel } from "./field.js";
 import { CHECK_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
@@ -35,9 +35,7 @@ function ChoiceMark({ round, checked, children }) {
 	const filled = checked && !round;
 	return /* @__PURE__ */ jsx("span", {
 		style: {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
+			...CENTERED,
 			flexShrink: 0,
 			width: 22,
 			height: 22,

package/dist/components/tokens.js

@@ -20,6 +20,11 @@ const WEIGHTS = {
 };
 const CARD_RADIUS_SCALE = 1.5;
 const DISABLED_OPACITY = .6;
+const CENTERED = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+};
 const ICON_SIZE = {
 	small: 16,
 	medium: 20,
@@ -41,4 +46,4 @@ const SELECTABLE = {
 	WebkitUserSelect: "text"
 };
 //#endregion
-export { CARD_RADIUS_SCALE, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };

package/dist/markdown.js

@@ -148,13 +148,15 @@ function parseInline(text) {
 			take({ kind: "break" }, 1);
 			continue;
 		}
-		const codeEnd = char === "`" ? text.indexOf("`", index + 1) : -1;
-		if (codeEnd > index + 1) {
-			take({
-				kind: "code",
-				text: text.slice(index + 1, codeEnd)
-			}, codeEnd + 1 - index);
-			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) {
@@ -182,21 +184,23 @@ function parseInline(text) {
 			}, whole.length);
 			continue;
 		}
-		const strong = char === "*" || char === "_" ? between(text, index, char + char) : null;
-		if (strong) {
-			take({
-				kind: "strong",
-				children: parseInline(strong.inner)
-			}, strong.length);
-			continue;
-		}
-		const emphasis = char === "*" || char === "_" ? between(text, index, char) : null;
-		if (emphasis) {
-			take({
-				kind: "emphasis",
-				children: parseInline(emphasis.inner)
-			}, emphasis.length);
-			continue;
+		if (char === "*" || char === "_") {
+			const strong = between(text, index, char + char);
+			if (strong) {
+				take({
+					kind: "strong",
+					children: parseInline(strong.inner)
+				}, strong.length);
+				continue;
+			}
+			const emphasis = between(text, index, char);
+			if (emphasis) {
+				take({
+					kind: "emphasis",
+					children: parseInline(emphasis.inner)
+				}, emphasis.length);
+				continue;
+			}
 		}
 		plain += char;
 		index += 1;

package/dist/pull-to-refresh.js

@@ -1,20 +1,22 @@
 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 [pull, setPull] = useState(0);
-	const area = useRef(null);
+	const [pullDistance, setPullDistance] = useState(0);
+	const areaRef = useRef(null);
 	useEffect(() => {
-		const element = area.current;
-		const view = element.ownerDocument.defaultView;
+		const area = areaRef.current;
+		const view = area.ownerDocument.defaultView;
 		let startY;
 		let pulled = 0;
 		let dragged = false;
@@ -28,19 +30,19 @@ function PullToRefresh({ page, children }) {
 			const distance = (y - startY) * RESISTANCE;
 			if (distance <= 0) {
 				pulled = 0;
-				setPull(0);
+				setPullDistance(0);
 				return;
 			}
 			if (event.cancelable) event.preventDefault();
 			if (distance > DRAG_DISTANCE) dragged = true;
-			pulled = Math.min(distance, PULL_DISTANCE * 1.5);
-			setPull(pulled);
+			pulled = Math.min(distance, LONGEST_PULL);
+			setPullDistance(pulled);
 		};
 		const end = () => {
 			if (startY !== void 0 && pulled >= PULL_DISTANCE) page.refresh();
 			startY = void 0;
 			pulled = 0;
-			setPull(0);
+			setPullDistance(0);
 		};
 		const ignoreDragClick = (event) => {
 			if (dragged) {
@@ -55,25 +57,27 @@ function PullToRefresh({ page, children }) {
 			if (event.button === 0) begin(event.clientY);
 		};
 		const mouseMove = (event) => move(event.clientY, event);
-		const stops = [
-			listen(element, "touchstart", touchStart, { passive: true }),
-			listen(element, "touchmove", touchMove, { passive: false }),
-			listen(element, "touchend", end),
-			listen(element, "touchcancel", end),
-			listen(element, "mousedown", mouseDown),
-			listen(element, "click", ignoreDragClick, { capture: true }),
+		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 () => stops.forEach((stop) => stop());
+		return () => {
+			for (const removeListener of removeListeners) removeListener();
+		};
 	}, [page]);
-	const shown = refreshing ? PULL_DISTANCE : pull;
-	const ready = pull >= PULL_DISTANCE;
+	const indicatorDistance = refreshing ? PULL_DISTANCE : pullDistance;
+	const arrowTurn = Math.min(pullDistance, PULL_DISTANCE) / PULL_DISTANCE * 180;
 	return /* @__PURE__ */ jsxs("div", {
-		ref: area,
+		ref: areaRef,
 		className: "dot-pull-to-refresh",
 		style: { display: "contents" },
-		children: [children, shown > 0 ? /* @__PURE__ */ jsx("span", {
+		children: [children, indicatorDistance > 0 ? /* @__PURE__ */ jsx("span", {
 			role: refreshing ? "status" : void 0,
 			"aria-label": refreshing ? "Refreshing" : void 0,
 			style: {
@@ -81,9 +85,7 @@ function PullToRefresh({ page, children }) {
 				top: 0,
 				left: "50%",
 				zIndex: 2,
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
+				...CENTERED,
 				width: INDICATOR_SIZE,
 				height: INDICATOR_SIZE,
 				marginLeft: -18,
@@ -91,8 +93,8 @@ function PullToRefresh({ page, children }) {
 				background: colors.surface,
 				color: colors.primary,
 				boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-				transform: `translateY(${shown - INDICATOR_SIZE / 2}px)`,
-				transition: pull > 0 ? "none" : "transform 0.2s",
+				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", {
@@ -104,7 +106,7 @@ function PullToRefresh({ page, children }) {
 				strokeWidth: 2.5,
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
-				style: { transform: `rotate(${ready ? 180 : pull / PULL_DISTANCE * 180}deg)` },
+				style: { transform: `rotate(${arrowTurn}deg)` },
 				children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M6 13l6 6 6-6" })
 			})
 		}) : null]

package/dist/root.js

@@ -2,40 +2,53 @@ import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.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: /* @__PURE__ */ jsx(PullToRefresh, {
 					page,
 					children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
-						theme: {
-							...theme,
-							scheme: resolved.scheme
-						},
-						children: content
-					}) : /* @__PURE__ */ jsx(DefaultSurface, { children: content })
+						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", {

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;
@@ -21,6 +21,6 @@ export interface ResolvedTheme {
   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,30 +37,64 @@ 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(colors.custom ?? {}, scheme),
+		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)) {
@@ -68,14 +103,15 @@ function resolveCustomColors(custom, scheme) {
 	}
 	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
 		};