@monimesl/dot-renderer-react 1.0.0-beta.6 → 1.0.0-beta.8

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";
@@ -51,7 +51,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 +62,7 @@ function DefaultSurface({ children }) {
 			flexDirection: "column",
 			background: colors.background,
 			color: colors.text,
-			fontFamily: FONT_FAMILY
+			fontFamily
 		},
 		children
 	});

package/dist/theme.d.ts

@@ -1,4 +1,5 @@
-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;
@@ -20,6 +21,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,
@@ -52,21 +73,66 @@ function resolveTheme(theme, systemScheme, pageColors = {}) {
 	let subtle = defaults.subtle;
 	if (!onDashBackground) subtle = quieterText(text, background, surface);
 	const primary = ownColor("primary") ?? defaults.primary;
+	const colors = {
+		...defaults,
+		...primaryAndOnPrimary(primary, surface, text, scheme),
+		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)) {
+		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 +192,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.6",
+  "version": "1.0.0-beta.8",
   "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-core": "1.0.0-beta.6",
-    "@monimesl/dot-webview": "1.0.0-beta.6"
+    "@monimesl/dot-core": "1.0.0-beta.8",
+    "@monimesl/dot-webview": "1.0.0-beta.8"
   },
   "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.6"
+    "@monimesl/dot-service": "1.0.0-beta.8"
   },
   "publishConfig": {
     "access": "public"