(false);
const openCloudPanel = () => {
@@ -85,6 +91,7 @@
onMount(() => {
settingsPopup.addListener(() => {
showColourPicker = false;
+ showFontPicker = false;
showCloudPanel = false;
});
@@ -95,7 +102,7 @@
@@ -293,7 +300,7 @@
{
title: "Settings",
Content: Settings,
- props: { showColourPicker: openColourPicker, showDisclaimer, showCloudPanel: openCloudPanel },
+ props: { showColourPicker: openColourPicker, showFontPicker: openFontPicker, showDisclaimer, showCloudPanel: openCloudPanel },
},
{ title: "Shortcuts", Content: Shortcuts },
{ title: "Themes", Content: Theme },
@@ -318,6 +325,14 @@
{/if}
+{#if showFontPicker}
+ {
+ showFontPicker = false;
+ }}
+ />
+{/if}
+
{#if showDisclaimerModal && disclaimerCallbacks}
void;
+ showFontPicker: () => void;
showDisclaimer: (onConfirm: () => void, onCancel: () => void, title?: string, message?: string) => void;
showCloudPanel: () => void;
}>();
@@ -192,6 +193,16 @@
onClick: showColourPicker
}
},
+ {
+ title: "Interface Font",
+ description: "Choose the typeface used across SEQTA Learn",
+ id: 16,
+ Component: Button,
+ props: {
+ onClick: showFontPicker,
+ text: "Change"
+ }
+ },
{
title: "Icon Only Sidebar",
description: "Show only icons in the sidebar for a compact layout",
diff --git a/src/interface/pages/settings/theme.svelte b/src/interface/pages/settings/theme.svelte
index 2f14890f..fece578a 100644
--- a/src/interface/pages/settings/theme.svelte
+++ b/src/interface/pages/settings/theme.svelte
@@ -36,4 +36,4 @@
{/if}
-
\ No newline at end of file
+
diff --git a/src/interface/utils/portal.ts b/src/interface/utils/portal.ts
index d634d3be..6124639e 100644
--- a/src/interface/utils/portal.ts
+++ b/src/interface/utils/portal.ts
@@ -4,16 +4,21 @@ import type { Action } from "svelte/action";
* Svelte action that moves the element to a different DOM target.
* Defaults to the nearest ShadowRoot so styles remain intact when the app
* is rendered inside a shadow DOM. Falls back to document.body otherwise.
- * Keeps all Svelte reactivity/events intact while escaping ancestor stacking contexts.
+ * Pass `document.body` to escape transformed/contained settings popups entirely.
*/
-export const portal: Action = (node, target) => {
+export const portal: Action = (
+ node,
+ target,
+) => {
const root = node.getRootNode();
const dest = target ?? (root instanceof ShadowRoot ? root : document.body);
dest.appendChild(node);
return {
update(newTarget) {
- (newTarget ?? dest).appendChild(node);
+ const nextDest =
+ newTarget ?? (root instanceof ShadowRoot ? root : document.body);
+ nextDest.appendChild(node);
},
destroy() {
node.remove();
diff --git a/src/interface/utils/syncPageTheme.ts b/src/interface/utils/syncPageTheme.ts
new file mode 100644
index 00000000..7e45a197
--- /dev/null
+++ b/src/interface/utils/syncPageTheme.ts
@@ -0,0 +1,74 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+
+const THEME_CSS_VARS = [
+ "--better-main",
+ "--better-pale",
+ "--better-light",
+ "--text-color",
+ "--background-primary",
+ "--background-secondary",
+ "--text-primary",
+ "--theme-offset-bg",
+ "--better-sub",
+] as const;
+
+const ACCENT_CSS_VARS = [
+ "--better-main",
+ "--accent-color-value",
+ "--accentColor",
+ "--colour-betterseqta-blue",
+] as const;
+
+function extractSolidColor(value: string): string | null {
+ const trimmed = value.trim();
+ if (!trimmed || trimmed === "initial") return null;
+ if (
+ trimmed.startsWith("#") ||
+ trimmed.startsWith("rgb") ||
+ trimmed.startsWith("hsl")
+ ) {
+ return trimmed;
+ }
+ if (trimmed.includes("gradient")) {
+ const match = trimmed.match(
+ /#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}|rgba?\([^)]+\)/i,
+ );
+ return match?.[0] ?? null;
+ }
+ return null;
+}
+
+function resolvePageAccentColor(): string {
+ const computed = getComputedStyle(document.documentElement);
+ for (const name of ACCENT_CSS_VARS) {
+ const solid = extractSolidColor(computed.getPropertyValue(name));
+ if (solid) return solid;
+ }
+ const fromSettings = settingsState.selectedColor?.trim();
+ if (fromSettings) {
+ const solid = extractSolidColor(fromSettings);
+ if (solid) return solid;
+ }
+ return "#007bff";
+}
+
+/** Copy SEQTA page theme tokens onto a portaled UI root (matches analytics sync). */
+export function syncPageThemeToElement(target: HTMLElement): void {
+ const computed = getComputedStyle(document.documentElement);
+
+ for (const name of THEME_CSS_VARS) {
+ const value = computed.getPropertyValue(name).trim();
+ if (value) {
+ target.style.setProperty(name, value);
+ }
+ }
+
+ const accent = resolvePageAccentColor();
+ target.style.setProperty("--bsplus-analytics-accent", accent);
+ target.style.setProperty("--better-main", accent);
+
+ target.classList.toggle(
+ "dark",
+ document.documentElement.classList.contains("dark"),
+ );
+}
diff --git a/src/plugins/monofile.ts b/src/plugins/monofile.ts
index 82f707e9..0783c539 100644
--- a/src/plugins/monofile.ts
+++ b/src/plugins/monofile.ts
@@ -17,6 +17,7 @@ import { isSeqtaEngageExperience } from "@/seqta/utils/isSeqtaEngage";
import RegisterClickListeners from "@/seqta/utils/listeners/ClickListeners";
import { AddBetterSEQTAElements } from "@/seqta/ui/AddBetterSEQTAElements";
import { updateAllColors } from "@/seqta/ui/colors/Manager";
+import { applySelectedFont } from "@/seqta/ui/fonts/Manager";
import loading from "@/seqta/ui/Loading";
import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
import { getEngageRoutePage } from "@/seqta/utils/engageRoute";
@@ -697,6 +698,7 @@ export function init() {
new MessageHandler();
void updateAllColors();
+ applySelectedFont();
window.addEventListener("hashchange", () => {
if (settingsState.adaptiveThemeColour) void updateAllColors();
diff --git a/src/seqta/ui/fonts/Manager.ts b/src/seqta/ui/fonts/Manager.ts
new file mode 100644
index 00000000..808e4efd
--- /dev/null
+++ b/src/seqta/ui/fonts/Manager.ts
@@ -0,0 +1,136 @@
+import { settingsState } from "@/seqta/utils/listeners/SettingsState";
+import { FONT_PRESETS, getFontPreset, type FontPreset } from "./presets";
+
+const FONT_STYLE_ID = "betterseqta-font-override";
+const FONT_PICKER_BATCH_ID = "betterseqta-font-picker-preview";
+const loadedFontIds = new Set();
+let pickerFontsPromise: Promise | null = null;
+
+/** Elements that show per-font previews must stay outside the global override. */
+export const FONT_PICKER_ROOT_CLASS = "bsplus-font-picker-root";
+
+function googleFamilyParam(preset: FontPreset): string | null {
+ if (!preset.googleUrl) return null;
+ const name =
+ preset.stack.split(",")[0]?.trim().replace(/^"|"$/g, "") ?? "";
+ if (!name) return null;
+ return `family=${encodeURIComponent(name)}:wght@400;500;600;700`;
+}
+
+function injectStylesheet(id: string, href: string): Promise {
+ if (document.getElementById(id)) return Promise.resolve();
+
+ return new Promise((resolve) => {
+ const link = document.createElement("link");
+ link.id = id;
+ link.rel = "stylesheet";
+ link.href = href;
+ link.setAttribute("data-betterseqta-font-picker-batch", "true");
+ link.onload = () => resolve();
+ link.onerror = () => resolve();
+ document.head.appendChild(link);
+ });
+}
+
+/** Load all Google Fonts for picker previews (batched, awaited). */
+export function ensureFontPickerFontsLoaded(): Promise {
+ if (!pickerFontsPromise) {
+ pickerFontsPromise = (async () => {
+ const params = FONT_PRESETS.map(googleFamilyParam).filter(
+ (param): param is string => param !== null,
+ );
+
+ const chunkSize = 10;
+ for (let i = 0; i < params.length; i += chunkSize) {
+ const chunk = params.slice(i, i + chunkSize);
+ const url = `https://fonts.googleapis.com/css2?${chunk.join("&")}&display=swap`;
+ await injectStylesheet(`${FONT_PICKER_BATCH_ID}-${i / chunkSize}`, url);
+ }
+
+ try {
+ await document.fonts.ready;
+ } catch {
+ /* FontFaceSet unsupported or blocked */
+ }
+ })();
+ }
+
+ return pickerFontsPromise;
+}
+
+export function ensureFontLoaded(preset: FontPreset): void {
+ if (!preset.googleUrl || loadedFontIds.has(preset.id)) return;
+
+ if (document.querySelector(`link[data-betterseqta-font="${preset.id}"]`)) {
+ loadedFontIds.add(preset.id);
+ return;
+ }
+
+ const link = document.createElement("link");
+ link.rel = "stylesheet";
+ link.href = preset.googleUrl;
+ link.setAttribute("data-betterseqta-font", preset.id);
+ document.head.appendChild(link);
+ loadedFontIds.add(preset.id);
+}
+
+export function buildFontPreviewCss(): string {
+ return FONT_PRESETS.map(
+ (preset) => `
+.bsplus-font-picker-option[data-font-id="${preset.id}"] .bsplus-font-picker-option-name {
+ font-family: ${preset.stack} !important;
+}`,
+ ).join("\n");
+}
+
+const SEQTA_FONT_SCOPE = `
+ .legacy-root,
+ .legacy-root input,
+ .legacy-root textarea,
+ .legacy-root button,
+ .legacy-root select,
+ .legacy-root option,
+ .legacy-root .input,
+ .legacy-root *,
+ #container,
+ #container *
+`;
+
+function buildFontOverrideCss(family: string): string {
+ const rule = `font-family: ${family} !important;`;
+
+ return `
+ ${SEQTA_FONT_SCOPE} {
+ ${rule}
+ }
+
+ .iconFamily,
+ .iconFamily *,
+ button.uiButton.timetable-zoom.iconFamily,
+ [class~="iconFamily"],
+ [class~="iconFamily"] * {
+ font-family: "IconFamily" !important;
+ }
+ `;
+}
+
+export function applySelectedFont(fontId?: string | null): void {
+ if (typeof document === "undefined") return;
+
+ const preset = getFontPreset(fontId ?? settingsState.selectedFont);
+ ensureFontLoaded(preset);
+
+ document.documentElement.style.setProperty(
+ "--betterseqta-font-family",
+ preset.stack.split(",")[0]?.trim().replace(/^"|"$/g, "") ?? "Rubik",
+ );
+
+ let style = document.getElementById(FONT_STYLE_ID) as HTMLStyleElement | null;
+ if (!style) {
+ style = document.createElement("style");
+ style.id = FONT_STYLE_ID;
+ document.head.appendChild(style);
+ }
+
+ style.textContent = buildFontOverrideCss(preset.stack);
+}
diff --git a/src/seqta/ui/fonts/presets.ts b/src/seqta/ui/fonts/presets.ts
new file mode 100644
index 00000000..e03b68d1
--- /dev/null
+++ b/src/seqta/ui/fonts/presets.ts
@@ -0,0 +1,265 @@
+export const DEFAULT_FONT_ID = "rubik";
+
+export interface FontPreset {
+ id: string;
+ name: string;
+ stack: string;
+ googleUrl?: string;
+ sample: string;
+}
+
+export const FONT_PRESETS: FontPreset[] = [
+ {
+ id: "rubik",
+ name: "Rubik",
+ stack: "Rubik, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "inter",
+ name: "Inter",
+ stack: "Inter, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "poppins",
+ name: "Poppins",
+ stack: "Poppins, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "nunito",
+ name: "Nunito",
+ stack: "Nunito, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "montserrat",
+ name: "Montserrat",
+ stack: "Montserrat, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "open-sans",
+ name: "Open Sans",
+ stack: '"Open Sans", sans-serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "lato",
+ name: "Lato",
+ stack: "Lato, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "source-sans-3",
+ name: "Source Sans 3",
+ stack: '"Source Sans 3", sans-serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "raleway",
+ name: "Raleway",
+ stack: "Raleway, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "dm-sans",
+ name: "DM Sans",
+ stack: '"DM Sans", sans-serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "plus-jakarta-sans",
+ name: "Plus Jakarta Sans",
+ stack: '"Plus Jakarta Sans", sans-serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "outfit",
+ name: "Outfit",
+ stack: "Outfit, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "roboto",
+ name: "Roboto",
+ stack: "Roboto, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "work-sans",
+ name: "Work Sans",
+ stack: '"Work Sans", sans-serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "manrope",
+ name: "Manrope",
+ stack: "Manrope, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "figtree",
+ name: "Figtree",
+ stack: "Figtree, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "lexend",
+ name: "Lexend",
+ stack: "Lexend, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "ubuntu",
+ name: "Ubuntu",
+ stack: "Ubuntu, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "karla",
+ name: "Karla",
+ stack: "Karla, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "quicksand",
+ name: "Quicksand",
+ stack: "Quicksand, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "ibm-plex-sans",
+ name: "IBM Plex Sans",
+ stack: '"IBM Plex Sans", sans-serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "space-grotesk",
+ name: "Space Grotesk",
+ stack: '"Space Grotesk", sans-serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "mulish",
+ name: "Mulish",
+ stack: "Mulish, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "cabin",
+ name: "Cabin",
+ stack: "Cabin, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "oswald",
+ name: "Oswald",
+ stack: "Oswald, sans-serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "merriweather",
+ name: "Merriweather",
+ stack: "Merriweather, serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "playfair-display",
+ name: "Playfair Display",
+ stack: '"Playfair Display", serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "lora",
+ name: "Lora",
+ stack: "Lora, serif",
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "crimson-pro",
+ name: "Crimson Pro",
+ stack: '"Crimson Pro", serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "libre-baskerville",
+ name: "Libre Baskerville",
+ stack: '"Libre Baskerville", serif',
+ googleUrl:
+ "https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap",
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+ {
+ id: "system",
+ name: "System Default",
+ stack: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+ sample: "Assessment due tomorrow at 3:30pm",
+ },
+];
+
+export function getFontPreset(id?: string | null): FontPreset {
+ return (
+ FONT_PRESETS.find((preset) => preset.id === id) ??
+ FONT_PRESETS.find((preset) => preset.id === DEFAULT_FONT_ID)!
+ );
+}
diff --git a/src/seqta/utils/listeners/StorageChanges.ts b/src/seqta/utils/listeners/StorageChanges.ts
index 2d9ccf06..ed5316c8 100644
--- a/src/seqta/utils/listeners/StorageChanges.ts
+++ b/src/seqta/utils/listeners/StorageChanges.ts
@@ -1,5 +1,6 @@
import { settingsState } from "./SettingsState";
import { updateAllColors } from "@/seqta/ui/colors/Manager";
+import { applySelectedFont } from "@/seqta/ui/fonts/Manager";
// Shortcuts rendering
import { renderShortcuts } from "@/seqta/utils/Render/renderShortcuts";
@@ -40,6 +41,7 @@ export class StorageChangeHandler {
"iconOnlySidebar",
this.handleIconOnlySidebarChange.bind(this),
);
+ settingsState.register("selectedFont", () => applySelectedFont());
}
private handleIconOnlySidebarChange(newValue: boolean | undefined) {
diff --git a/src/types/storage.ts b/src/types/storage.ts
index 9ee34640..705f1d93 100644
--- a/src/types/storage.ts
+++ b/src/types/storage.ts
@@ -57,6 +57,8 @@ export interface SettingsState {
adaptiveThemeColour?: boolean;
adaptiveThemeGradient?: boolean;
adaptiveThemeColourTransition?: boolean;
+ /** Google Font preset id for SEQTA interface typography (`rubik` default). */
+ selectedFont?: string;
// depreciated keys
animatedbk: boolean;