From 7f2a66f262e5b378909c15f5a2c51befeffbf82a Mon Sep 17 00:00:00 2001
From: Gianni Ceccarelli <gceccarelli@veritone.com>
Date: Thu, 14 Dec 2023 13:58:07 +0000
Subject: allow a theme to specify a font - #225

---
 packages/frontend/src/scripts/theme.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

(limited to 'packages/frontend/src/scripts/theme.ts')

diff --git a/packages/frontend/src/scripts/theme.ts b/packages/frontend/src/scripts/theme.ts
index d2474bf10f..8bfb03f0dd 100644
--- a/packages/frontend/src/scripts/theme.ts
+++ b/packages/frontend/src/scripts/theme.ts
@@ -54,6 +54,8 @@ export const getBuiltinThemesRef = () => {
 	return builtinThemes;
 };
 
+const themeFontFaceName = 'sharkey-theme-font-face';
+
 let timeout = null;
 
 export function applyTheme(theme: Theme, persist = true) {
@@ -84,7 +86,32 @@ export function applyTheme(theme: Theme, persist = true) {
 		}
 	}
 
+	let existingFontFace;
+	document.fonts.forEach(
+		(fontFace) => {
+			if (fontFace.family === themeFontFaceName) existingFontFace = fontFace;
+		},
+	);
+	if (existingFontFace) document.fonts.delete(existingFontFace);
+
+	const fontFaceSrc = props.fontFaceSrc;
+	const fontFaceOpts = props.fontFaceOpts || {};
+
+	if (fontFaceSrc) {
+		const fontFace = new FontFace(
+			themeFontFaceName,
+			fontFaceSrc, fontFaceOpts,
+		);
+		document.fonts.add(fontFace);
+		fontFace.load().catch(
+			(failure) => {
+				console.log(failure);
+			},
+		);
+	}
+
 	for (const [k, v] of Object.entries(props)) {
+		if (k.startsWith('font')) continue;
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	}
 
@@ -128,6 +155,10 @@ function compile(theme: Theme): Record<string, string> {
 
 	for (const [k, v] of Object.entries(theme.props)) {
 		if (k.startsWith('$')) continue; // ignore const
+		if (k.startsWith('font')) { // font specs are different
+			props[k] = v;
+			continue;
+		}
 
 		props[k] = v.startsWith('"') ? v.replace(/^"\s*/, '') : genValue(getColor(v));
 	}
-- 
cgit v1.2.3-freya