@parallelworks/ui 0.44.0 → 0.45.0

package/dist/editor/themes.js

@@ -1,91 +1,90 @@
+import { parseColor, toHex } from "../theme/color.js";
+import { DEFAULT_THEME, schemeFor } from "../theme/model.js";
+import { deriveTheme } from "../theme/derive.js";
 //#region src/editor/themes.ts
 function expandShorthandHex(color) {
 	return /^#([0-9a-fA-F]{3,4})$/.test(color) ? "#" + color.slice(1).split("").map((c) => c + c).join("") : color;
 }
-function normalizeThemeColors(colors) {
-	return Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, expandShorthandHex(value)]));
+var fallbacks = {};
+/** A token as Monaco takes it: a 6-digit hex. Monaco can't read display-p3, so
+*  a wide-gamut value is mapped back into sRGB; the default theme fills in for
+*  a host that sets no tokens. */
+function token(name, mode) {
+	const set = typeof window === "undefined" ? "" : getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	const color = parseColor(expandShorthandHex(set));
+	if (color) return toHex(color);
+	fallbacks[mode] ??= deriveTheme(schemeFor(DEFAULT_THEME, mode));
+	return fallbacks[mode][name];
 }
-function themeVar(name, fallback) {
-	if (typeof window === "undefined") return fallback;
-	return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
-}
-function createEditorThemes() {
-	const dark = {
-		foreground: themeVar("--theme-app", "#e6edf3"),
-		background: themeVar("--theme-panel-bg", "#161b22"),
-		border: themeVar("--theme-border", "#30363d"),
-		lineHighlight: themeVar("--theme-muted-panel-bg", "#21262d"),
-		lineNumber: themeVar("--theme-muted-text-color", "#8b949e"),
-		selection: themeVar("--theme-element", "#2f81f7"),
-		selectionFg: themeVar("--theme-element-text", "#ffffff"),
-		disabledBg: themeVar("--theme-input-disabled-bg", "#1c2128"),
-		disabledFg: themeVar("--theme-muted-text-color", "#8b949e")
-	};
-	const light = {
-		disabledBg: themeVar("--theme-input-disabled-bg", "#f3f4f6"),
-		disabledFg: themeVar("--theme-muted-text-color", "#5f6b76"),
-		border: themeVar("--theme-border", "#d1d5db"),
-		selection: themeVar("--theme-element", "#2f81f7"),
-		selectionFg: themeVar("--theme-element-text", "#ffffff")
-	};
+var RULES = [
+	["", "--theme-code-text"],
+	[
+		"comment",
+		"--theme-code-comment",
+		"italic"
+	],
+	["keyword", "--theme-code-keyword"],
+	["string", "--theme-code-string"],
+	["attribute.value", "--theme-code-string"],
+	["regexp", "--theme-code-string"],
+	["number", "--theme-code-number"],
+	["constant", "--theme-code-number"],
+	["predefined", "--theme-code-function"],
+	["type", "--theme-code-type"],
+	["type.yaml", "--theme-code-property"],
+	["tag", "--theme-code-property"],
+	["attribute.name", "--theme-code-property"],
+	["delimiter", "--theme-code-text"],
+	["operators", "--theme-code-text"]
+];
+function editorTheme(mode, disabled) {
+	const c = (name) => token(name, mode);
+	const foreground = disabled ? c("--theme-muted-text-color") : c("--theme-code-text");
+	const background = disabled ? c("--theme-input-disabled-bg") : c("--theme-panel-bg");
 	return {
-		"app-dark": {
-			base: "vs-dark",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.foreground": dark.foreground,
-				"editor.background": dark.background,
-				"editor.border": dark.border,
-				"editorCursor.foreground": dark.foreground,
-				"editor.lineHighlightBackground": dark.lineHighlight,
-				"editorLineNumber.foreground": dark.lineNumber,
-				"editor.selectionBackground": dark.selection,
-				"editor.selectionForeground": dark.selectionFg
-			}
-		},
-		"app-dark-disabled": {
-			base: "vs-dark",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.foreground": dark.disabledFg,
-				"editor.background": dark.disabledBg,
-				"editor.border": dark.border,
-				"editorCursor.foreground": "transparent",
-				"editor.lineHighlightBackground": dark.disabledBg,
-				"editorLineNumber.foreground": dark.disabledFg,
-				"editor.selectionBackground": dark.selection,
-				"editor.selectionForeground": dark.selectionFg
-			}
-		},
-		"app-light-disabled": {
-			base: "vs",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.foreground": light.disabledFg,
-				"editor.background": light.disabledBg,
-				"editor.border": light.border,
-				"editorCursor.foreground": "transparent",
-				"editor.lineHighlightBackground": light.disabledBg,
-				"editorLineNumber.foreground": light.disabledFg,
-				"editor.selectionBackground": light.selection,
-				"editor.selectionForeground": light.selectionFg
-			}
+		base: mode === "dark" ? "vs-dark" : "vs",
+		inherit: true,
+		rules: disabled ? [{
+			token: "",
+			foreground: foreground.slice(1)
+		}] : RULES.map(([name, t, fontStyle]) => ({
+			token: name,
+			foreground: c(t).slice(1),
+			...fontStyle ? { fontStyle } : {}
+		})),
+		colors: {
+			"editor.foreground": foreground,
+			"editor.background": background,
+			"editor.border": c("--theme-border"),
+			"editorCursor.foreground": disabled ? background : c("--theme-app"),
+			"editor.lineHighlightBackground": disabled ? background : c("--theme-hover"),
+			"editorLineNumber.foreground": c("--theme-placeholder"),
+			"editorLineNumber.activeForeground": c("--theme-muted-text-color"),
+			"editor.selectionBackground": c("--theme-accent-subtle"),
+			"editor.inactiveSelectionBackground": c("--theme-hover")
 		}
 	};
 }
+/** Monaco themes read from the document's tokens: call again after the host applies another theme. */
 function defineEditorThemes(monacoEditor) {
-	const themes = createEditorThemes();
-	for (const [name, themeData] of Object.entries(themes)) monacoEditor.defineTheme(name, {
-		...themeData,
-		colors: normalizeThemeColors(themeData.colors)
+	for (const mode of ["light", "dark"]) for (const disabled of [false, true]) monacoEditor.defineTheme(getThemeName(mode === "dark", disabled), editorTheme(mode, disabled));
+}
+/** Redefines the editor themes when the host applies other tokens to the document,
+*  and sets `current()` again, so an open editor follows a theme being edited. */
+function followThemeTokens(monacoEditor, current) {
+	if (typeof MutationObserver === "undefined") return () => {};
+	const observer = new MutationObserver(() => {
+		defineEditorThemes(monacoEditor);
+		monacoEditor.setTheme(current());
+	});
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["style"]
 	});
+	return () => observer.disconnect();
 }
 function getThemeName(isDark, disabled) {
-	if (isDark) return disabled ? "app-dark-disabled" : "app-dark";
-	return disabled ? "app-light-disabled" : "vs";
+	return `app-${isDark ? "dark" : "light"}${disabled ? "-disabled" : ""}`;
 }
 //#endregion
-export { defineEditorThemes, expandShorthandHex, getThemeName };
+export { defineEditorThemes, expandShorthandHex, followThemeTokens, getThemeName };