@monimesl/dot-renderer-react 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/components/text.js

@@ -1,9 +1,9 @@
+import { SELECTABLE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, SELECTABLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
-import { isTone, toneColor } from "./tones.js";
+import { textToneColor } from "./box.js";
 import { InsideProse } from "./prose-context.js";
-import { customColor } from "./box.js";
+import { DEFAULT_VARIANTS } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text.tsx
@@ -50,10 +50,12 @@ const DECORATION = {
 	underline: "underline",
 	strikethrough: "line-through"
 };
-const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+const Text$1 = ({ variant: namedVariant, tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
 	const theme = useTheme();
 	const insideText = useContext(InsideText);
 	const inProse = useContext(InsideProse);
+	let variant = namedVariant ?? DEFAULT_VARIANTS.Text;
+	if (!Object.hasOwn(VARIANTS, variant)) variant = DEFAULT_VARIANTS.Text;
 	const { heading, lineHeight, weight: defaultWeight } = VARIANTS[variant];
 	const defaultLeading = inProse && !heading ? "relaxed" : "normal";
 	const style = {
@@ -61,16 +63,17 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		marginInline: 0,
 		marginBlockEnd: 0,
 		marginBlockStart: inProse && heading ? void 0 : 0,
-		fontSize: FONT_SIZE[variant],
-		fontWeight: WEIGHTS[weight ?? defaultWeight],
+		fontSize: theme.fontSize[variant],
+		fontFamily: heading ? theme.headingFontFamily : void 0,
+		fontWeight: WEIGHTS[weight ?? (heading ? theme.headingWeight : void 0) ?? defaultWeight],
 		fontStyle: italic ? "italic" : void 0,
 		letterSpacing: variant === "display" ? "-0.02em" : "normal",
-		color: tone ? textColor(tone, theme) : "inherit",
+		color: tone ? textToneColor(tone, theme) : "inherit",
 		textAlign: align,
 		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
 		fontVariantNumeric: numeric ? "tabular-nums" : void 0,
 		...selectable ? SELECTABLE : void 0,
-		...paddingStyle(padding)
+		...paddingStyle(padding, theme.space)
 	};
 	if (!insideText) {
 		style.lineHeight = lineHeight + LEADING_CHANGE[leading ?? defaultLeading];
@@ -98,10 +101,5 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, decoration, num
 		children: content
 	});
 };
-function textColor(tone, theme) {
-	if (isTone(tone)) return toneColor(theme.colors, tone);
-	if (tone === "onPrimary") return theme.colors.onPrimary;
-	return customColor(tone, theme);
-}
 //#endregion
-export { Text };
+export { Text$1 as Text };

package/dist/components/toast.js

@@ -1,5 +1,5 @@
+import { ICON_SIZE, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, SPACE } from "./tokens.js";
 import { IconSvg } from "./icon-svg.js";
 import { STATUS_ARTWORK } from "./tones.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -7,7 +7,7 @@ import { useEffect, useEffectEvent, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toast.tsx
 const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontSize } = useTheme();
 	const [hidden, setHidden] = useState(false);
 	const [previousMessage, setPreviousMessage] = useState(message);
 	if (message !== previousMessage) {
@@ -42,7 +42,7 @@ const Toast$1 = ({ message, tone = "default", duration = 2500, onHide }) => {
 			borderRadius: radius,
 			background: colors.primary,
 			color: colors.onPrimary,
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
 		},
 		children: [tone === "default" ? null : /* @__PURE__ */ jsx(IconSvg, {

package/dist/components/toggles.js

@@ -1,5 +1,5 @@
+import { CENTERED, ICON_SIZE, SPACE, pressLook } from "./tokens.js";
 import { useTheme } from "../theme.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";
@@ -14,7 +14,8 @@ import { createEvent } from "@monimesl/dot-core";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/toggles.tsx
-function rowStyle(colors, disabled) {
+function rowStyle(theme, disabled) {
+	const { colors, fontSize } = theme;
 	return {
 		display: "flex",
 		alignItems: "center",
@@ -24,10 +25,9 @@ function rowStyle(colors, disabled) {
 		border: "none",
 		background: "transparent",
 		color: colors.text,
-		fontSize: FONT_SIZE.body,
+		fontSize: fontSize.body,
 		textAlign: "start",
-		opacity: disabled ? DISABLED_OPACITY : 1,
-		cursor: disabled ? "default" : "pointer"
+		...pressLook(disabled)
 	};
 }
 function ChoiceMark({ round, checked, children }) {
@@ -47,14 +47,15 @@ function ChoiceMark({ round, checked, children }) {
 	});
 }
 const Switch$1 = ({ checked = false, label, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	return /* @__PURE__ */ jsxs(SwitchRoot, {
 		className: "dot-switch",
 		checked,
 		disabled,
 		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
 		style: {
-			...rowStyle(colors, disabled),
+			...rowStyle(theme, disabled),
 			justifyContent: "space-between"
 		},
 		children: [label ? /* @__PURE__ */ jsx("span", { children: label }) : null, /* @__PURE__ */ jsx("span", {
@@ -81,13 +82,14 @@ const Switch$1 = ({ checked = false, label, disabled, onChange }) => {
 	});
 };
 const Checkbox$1 = ({ checked = false, label, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	return /* @__PURE__ */ jsxs(CheckboxRoot, {
 		className: "dot-checkbox",
 		checked,
 		disabled,
 		onCheckedChange: (next) => onChange?.(createEvent("change", { checked: next })),
-		style: rowStyle(colors, disabled),
+		style: rowStyle(theme, disabled),
 		children: [/* @__PURE__ */ jsx(ChoiceMark, {
 			round: false,
 			checked,
@@ -122,13 +124,14 @@ const RadioGroup$1 = ({ value, label, disabled = false, onChange, children }) =>
 	});
 };
 const Radio$1 = ({ value, label, disabled }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
+	const { colors } = theme;
 	if (value === void 0) return null;
 	return /* @__PURE__ */ jsx(RadioRoot, {
 		className: "dot-radio",
 		value,
 		disabled,
-		style: (state) => rowStyle(colors, state.disabled),
+		style: (state) => rowStyle(theme, state.disabled),
 		render: (props, state) => /* @__PURE__ */ jsxs("span", {
 			...props,
 			children: [/* @__PURE__ */ jsx(ChoiceMark, {

package/dist/components/tokens.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/tokens.d.ts
+export declare const SPACE: {
+  readonly none: 0;
+  readonly small: 4;
+  readonly medium: 8;
+  readonly large: 16;
+};
+export declare const FONT_SIZE: {
+  readonly caption: 13;
+  readonly body: 15;
+  readonly lead: 17;
+  readonly subtitle: 17;
+  readonly title: 20;
+  readonly display: 32;
+};
+//#endregion

package/dist/components/tokens.js

@@ -20,6 +20,31 @@ const WEIGHTS = {
 };
 const CARD_RADIUS_SCALE = 1.5;
 const DISABLED_OPACITY = .6;
+function pressLook(disabled) {
+	return {
+		opacity: disabled ? DISABLED_OPACITY : 1,
+		cursor: disabled ? "default" : "pointer"
+	};
+}
+const SHADOWS = {
+	light: {
+		low: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06)",
+		high: "0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.14)"
+	},
+	dark: {
+		low: "0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3)",
+		high: "0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.5)"
+	}
+};
+const SHADOW_REACH = {
+	top: 20,
+	sides: 32,
+	bottom: 44
+};
+const SCROLL_SHADOW_ROOM = {
+	top: 6,
+	bottom: 10
+};
 const CENTERED = {
 	display: "flex",
 	alignItems: "center",
@@ -46,4 +71,4 @@ const SELECTABLE = {
 	WebkitUserSelect: "text"
 };
 //#endregion
-export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SCROLL_SHADOW_ROOM, SELECTABLE, SHADOWS, SHADOW_REACH, SPACE, WEIGHTS, pressLook };

package/dist/components/view.js

@@ -1,11 +1,12 @@
+import { DISABLED_OPACITY, SHADOWS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { SPACE } from "./tokens.js";
 import { insets, paddingStyle } from "./padding.js";
-import { Footer as Footer$1 } from "./footer.js";
-import { pressable } from "./pressable.js";
+import { SideRoomContext } from "./side-room.js";
 import { boxStyle } from "./box.js";
-import { createEvent } from "@monimesl/dot-core";
-import { Children, isValidElement } from "react";
+import { pressable } from "./pressable.js";
+import { HiddenViewContext } from "./hidden-view.js";
+import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
+import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
 const ALIGN = {
@@ -25,37 +26,58 @@ const CARD_LOOK = {
 	border: "subtle",
 	radius: "large"
 };
+const RAISED_CARD_LOOK = {
+	...CARD_LOOK,
+	border: "none"
+};
 const View$1 = (props) => {
-	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children } = props;
+	const { id, hidden = false, disabled = false, direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = DEFAULT_VARIANTS.View, onTap, children } = props;
 	const theme = useTheme();
+	const sideRoomAround = useContext(SideRoomContext);
+	const hiddenAround = useContext(HiddenViewContext);
 	const card = variant === "card";
+	const raisedCard = card && theme.elevation === "raised" && props.elevation !== "none";
+	let cardLook;
+	if (card) cardLook = raisedCard ? RAISED_CARD_LOOK : CARD_LOOK;
+	const elevation = props.elevation ?? (raisedCard ? "low" : "none");
+	const padding = paddingStyle(props, theme.space, card ? insets(theme.space.large) : void 0);
 	const style = {
-		display: "flex",
+		display: hidden ? "none" : "flex",
 		flexDirection: direction,
 		alignItems: ALIGN[align],
 		justifyContent: JUSTIFY[justify],
 		flexWrap: wrap ? "wrap" : "nowrap",
-		gap: SPACE[gap],
-		...paddingStyle(props, card ? insets(SPACE.large) : void 0),
-		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
-		cursor: onTap ? "pointer" : void 0
+		gap: theme.space[gap],
+		...padding,
+		"--dot-view-top": `${padding.paddingTop}px`,
+		"--dot-view-bottom": `${padding.paddingBottom}px`,
+		"--dot-view-start": `${padding.paddingInlineStart}px`,
+		"--dot-view-end": `${padding.paddingInlineEnd}px`,
+		...boxStyle(props, theme, cardLook),
+		opacity: disabled ? DISABLED_OPACITY : void 0,
+		cursor: onTap && !disabled ? "pointer" : void 0
 	};
-	if (endsWithFooter(children)) style.paddingBottom = 0;
+	if (elevation !== "none") style.boxShadow = SHADOWS[theme.scheme][elevation];
 	if (grow) {
 		style.flexGrow = 1;
 		style.minWidth = 0;
 	}
-	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
+	const press = onTap && !disabled ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-view",
+		"data-dot-view": id,
+		hidden,
+		inert: disabled,
 		style,
 		...press,
-		children
+		children: /* @__PURE__ */ jsx(HiddenViewContext.Provider, {
+			value: hiddenAround || hidden,
+			children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
+				value: sideRoomAround && direction !== "row",
+				children
+			})
+		})
 	});
 };
-function endsWithFooter(children) {
-	const last = Children.toArray(children).at(-1);
-	return isValidElement(last) && last.type === Footer$1;
-}
 //#endregion
 export { View$1 as View };

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Pinned } from "./components/pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
 import { RichText } from "./components/rich-text.js";
@@ -40,4 +41,4 @@ import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
 import { View } from "./components/view.js";
 import "./components/index.js";
 import { ResolvedColors, ResolvedTheme, resolveTheme, useTheme } from "./theme.js";
-export { AmountInput, Avatar, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };
+export { AmountInput, Avatar, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };

package/dist/index.js

@@ -19,6 +19,7 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Pinned } from "./components/pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
 import { Text } from "./components/text.js";
@@ -40,4 +41,4 @@ import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };

package/dist/page-root.js

@@ -1,18 +1,24 @@
-import { toList, toText } from "@monimesl/dot-core";
+import { useTheme } from "./theme.js";
+import { toList, toText, withComponentDefaults } from "@monimesl/dot-core";
 import { Fragment, createElement, useMemo, useSyncExternalStore } from "react";
 //#region src/page-root.tsx
 function PageRoot({ page, components }) {
 	const state = useSyncExternalStore(page.subscribe, page.getState);
+	const themeComponents = useTheme().components;
 	const context = useMemo(() => ({
 		h(type, props, ...children) {
 			const component = components[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);
+			return createElement(component, withComponentDefaults(type, props, themeComponents), ...children);
 		},
 		text: toText,
 		on: (handler, data) => page.on(handler, data),
 		each: (items, render, key) => createElement(Fragment, null, toList(items).map((item, index) => createElement(Fragment, { key: key ? String(key(item, index)) : index }, ...render(item, index))))
-	}), [page, components]);
+	}), [
+		page,
+		components,
+		themeComponents
+	]);
 	if (!state) return null;
 	return page.viewRenderer(state, context);
 }

package/dist/pull-to-refresh.js

@@ -1,5 +1,5 @@
-import { useTheme } from "./theme.js";
 import { CENTERED } from "./components/tokens.js";
+import { useTheme } from "./theme.js";
 import { LoadingIcon } from "./components/spinner.js";
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/root.js

@@ -1,4 +1,4 @@
-import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.js";
+import { ThemeContext, resolveTheme, useTheme } from "./theme.js";
 import { HOME_INDICATOR } from "./components/padding.js";
 import { PortalContainerContext } from "./portal.js";
 import { PageRoot } from "./page-root.js";
@@ -27,6 +27,7 @@ function Root({ page, dotContext, components, wrapper: Wrapper }) {
 			ref: setRootElement,
 			className: "dot-theme-root",
 			"data-dot-scheme": resolvedTheme.scheme,
+			style: { overflow: "clip" },
 			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
 				value: rootElement,
 				children: /* @__PURE__ */ jsx(PullToRefresh, {
@@ -51,7 +52,7 @@ function withPageColors(theme, scheme, pageColors) {
 	};
 }
 function DefaultSurface({ children }) {
-	const { colors } = useTheme();
+	const { colors, fontFamily } = useTheme();
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-surface",
 		style: {
@@ -62,7 +63,7 @@ function DefaultSurface({ children }) {
 			flexDirection: "column",
 			background: colors.background,
 			color: colors.text,
-			fontFamily: FONT_FAMILY
+			fontFamily
 		},
 		children
 	});

package/dist/styles.css

@@ -1 +1 @@
-@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}
+@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::-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-bar-top:not(:not(.dot-toast,[hidden])~*){margin-top:calc(-1 * var(--dot-view-top,0px))}.dot-bar-bottom:not(:has(~:not(.dot-toast,[hidden]))){margin-bottom:calc(-1 * var(--dot-view-bottom,0px) - env(safe-area-inset-bottom,0px))}html{overscroll-behavior-y: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,8 +1,10 @@
-import { ColorScheme, PageColors, Theme, ThemeShape } from "@monimesl/dot-core";
+import { FONT_SIZE, SPACE } from "./components/tokens.js";
+import { ColorScheme, PageColors, Theme, ThemeComponents, ThemeElevation, ThemeShape, ThemeWeight } from "@monimesl/dot-core";
 //#region src/theme.d.ts
 export interface ResolvedColors {
   primary: string;
   onPrimary: string;
+  primaryText: string;
   background: string;
   surface: string;
   text: string;
@@ -20,6 +22,15 @@ export interface ResolvedTheme {
   customColors: Readonly<Record<string, string>>;
   shape: ThemeShape;
   radius: number;
+  fontFamily: string;
+  headingFontFamily: string;
+  headingWeight: ThemeWeight | undefined;
+  fontSize: Readonly<Record<keyof typeof FONT_SIZE, number>>;
+  components: ThemeComponents;
+  icons: Readonly<Record<string, string>>;
+  gradients: Readonly<Record<string, string>>;
+  space: Readonly<Record<keyof typeof SPACE, number>>;
+  elevation: ThemeElevation;
 }
 export declare function resolveTheme(theme: Theme, systemScheme: ColorScheme, pageColors?: PageColors): ResolvedTheme;
 export declare function useTheme(): ResolvedTheme;

package/dist/theme.js

@@ -1,8 +1,29 @@
+import { FONT_SIZE, SPACE } from "./components/tokens.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";
+const DENSITY_SCALE = {
+	compact: .75,
+	regular: 1,
+	comfortable: 1.25
+};
+const TEXT_SCALE = {
+	small: .9,
+	regular: 1,
+	large: 1.1
+};
+const GRADIENT_DIRECTIONS = {
+	down: "to bottom",
+	right: "to right",
+	diagonal: "to bottom right"
+};
+const FONT_FAMILIES = {
+	system: "system-ui, sans-serif",
+	rounded: "ui-rounded, \"SF Pro Rounded\", system-ui, sans-serif",
+	serif: "ui-serif, \"New York\", Georgia, serif",
+	mono: "ui-monospace, \"SF Mono\", Menlo, monospace"
+};
 const SHAPE_RADIUS = {
 	square: 0,
 	subtle: 4,
@@ -51,22 +72,71 @@ function resolveTheme(theme, systemScheme, pageColors = {}) {
 	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;
+	const { primary, onPrimary } = primaryAndOnPrimary(ownColor("primary") ?? defaults.primary, surface, text, scheme);
+	const primaryReads = contrast(primary, background) >= READABLE_CONTRAST && contrast(primary, surface) >= READABLE_CONTRAST;
+	const colors = {
+		...defaults,
+		primary,
+		onPrimary,
+		primaryText: primaryReads ? primary : text,
+		background,
+		surface,
+		text,
+		muted: ownColor("muted") ?? surfaces.muted,
+		border: ownColor("border") ?? surfaces.border,
+		subtle: ownColor("subtle") ?? subtle,
+		info: ownColor("info") ?? defaults.info,
+		success: ownColor("success") ?? defaults.success,
+		warning: ownColor("warning") ?? defaults.warning,
+		danger: ownColor("danger") ?? defaults.danger
+	};
+	const customColors = resolveCustomColors(themeColors.custom ?? {}, scheme);
+	const fontFamily = FONT_FAMILIES[theme.font ?? "system"] ?? FONT_FAMILIES.system;
+	let headingFontFamily = fontFamily;
+	if (theme.headingFont) headingFontFamily = FONT_FAMILIES[theme.headingFont] ?? fontFamily;
 	return {
 		scheme,
-		colors: {
-			...defaults,
-			...primaryAndOnPrimary(primary, surface, text, scheme),
-			background,
-			surface,
-			text,
-			muted: ownColor("muted") ?? surfaces.muted,
-			border: ownColor("border") ?? surfaces.border,
-			subtle: ownColor("subtle") ?? subtle
-		},
-		customColors: resolveCustomColors(themeColors.custom ?? {}, scheme),
+		colors,
+		customColors,
 		shape,
-		radius: SHAPE_RADIUS[shape]
+		radius: SHAPE_RADIUS[shape],
+		fontFamily,
+		headingFontFamily,
+		headingWeight: theme.headingWeight,
+		fontSize: scaledFontSize(TEXT_SCALE[theme.textSize ?? "regular"] ?? 1),
+		components: theme.components ?? {},
+		icons: theme.icons ?? {},
+		gradients: resolveGradients(theme.gradients ?? {}, colors, customColors),
+		space: scaledSpace(DENSITY_SCALE[theme.density ?? "regular"] ?? 1),
+		elevation: theme.elevation === "raised" ? "raised" : "flat"
+	};
+}
+function scaledFontSize(scale) {
+	const sizes = { ...FONT_SIZE };
+	for (const variant of Object.keys(sizes)) sizes[variant] = Math.round(FONT_SIZE[variant] * scale);
+	return sizes;
+}
+function resolveGradients(gradients, colors, customColors) {
+	const resolved = {};
+	for (const [name, gradient] of Object.entries(gradients)) {
+		if (!gradient) continue;
+		const from = themeColor(gradient.from, colors, customColors);
+		const to = themeColor(gradient.to, colors, customColors);
+		const direction = GRADIENT_DIRECTIONS[gradient.direction ?? "down"] ?? GRADIENT_DIRECTIONS.down;
+		if (from && to) resolved[name] = `linear-gradient(${direction}, ${from}, ${to})`;
+	}
+	return resolved;
+}
+function themeColor(name, colors, customColors) {
+	if (Object.hasOwn(colors, name)) return colors[name];
+	if (Object.hasOwn(customColors, name)) return customColors[name];
+}
+function scaledSpace(scale) {
+	return {
+		none: SPACE.none,
+		small: Math.round(SPACE.small * scale),
+		medium: Math.round(SPACE.medium * scale),
+		large: Math.round(SPACE.large * scale)
 	};
 }
 function surfacesOn(background) {
@@ -126,4 +196,4 @@ function useTheme() {
 	return useContext(ThemeContext);
 }
 //#endregion
-export { FONT_FAMILY, ThemeContext, resolveTheme, useTheme };
+export { ThemeContext, resolveTheme, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.11",
   "description": "React renderer for Dot webviews",
   "type": "module",
   "repository": {
@@ -29,8 +29,8 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "uqr": "^0.1.3",
-    "@monimesl/dot-webview": "1.0.0-beta.1",
-    "@monimesl/dot-core": "1.0.0-beta.1"
+    "@monimesl/dot-core": "1.0.0-beta.11",
+    "@monimesl/dot-webview": "1.0.0-beta.11"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
@@ -46,7 +46,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "1.0.0-beta.1"
+    "@monimesl/dot-service": "1.0.0-beta.11"
   },
   "publishConfig": {
     "access": "public"