feat: update fonts extension, add option for math font

remove font vars from theme css, fonts can now only be controlled via font chooser
2025-04-03 12:19:02 +00:00 · 2024-04-25 23:59:11 +10:00 · 2024-04-25 23:59:11 +10:00 · 26cbdf7e2e
commit 26cbdf7e2e
parent 1576680a66
11 changed files with 147 additions and 168 deletions
--- a/scripts/generate-theme-css.mjs
+++ b/scripts/generate-theme-css.mjs
@ -132,33 +132,6 @@ const getComputedPropertyValue = (el, prop) => {
    variableAliases[variable.value] ??= variable.name;
  };

-const styleFonts = () => {
-  overrideStyle({
-    selector: `[style*="Segoe UI"]`,
-    property: "font-family",
-    variable: "font-sans",
-    specificity: [],
-  });
-  overrideStyle({
-    selector: `[style*="Georgia"]`,
-    property: "font-family",
-    variable: "font-serif",
-    specificity: [],
-  });
-  overrideStyle({
-    selector: `[style*="iawriter-mono"]`,
-    property: "font-family",
-    variable: "font-mono",
-    specificity: [],
-  });
-  overrideStyle({
-    selector: `[style*="SFMono-Regular"]`,
-    property: "font-family",
-    variable: "font-code",
-    specificity: [],
-  });
-};
-
 const styleText = () => {
  const primary = cssVariable({
      name: "fg-primary",
@ -903,7 +876,6 @@ const styleCode = () => {
    ) { background: transparent !important; }`;
 };

-styleFonts();
 styleText();
 styleBorders();
 styleColoredText();
--- a/src/core/menu/menu.css
+++ b/src/core/menu/menu.css
@ -47,7 +47,7 @@ body {
  height: 100vh;
  margin: 0;
  color: var(--theme--fg-primary);
-  font-family: var(--theme--font-sans);
+  font-family: var(--font--sans);
  overflow: hidden;
 }

--- a/src/core/theme.css
+++ b/src/core/theme.css
--- a/src/core/variables.css
+++ b/src/core/variables.css
@ -5,14 +5,6 @@
 */

 body.dark {
-  --theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
-    "Segoe UI Emoji", "Segoe UI Symbol";
-  --theme--font-serif: Lyon-Text, Georgia, ui-serif, serif;
-  --theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
-  --theme--font-code: "SFMono-Regular", Menlo, Consolas, "PT Mono",
-    "Liberation Mono", Courier, monospace;
-
  --theme--fg-primary: rgba(255, 255, 255, 0.81);
  --theme--fg-secondary: rgb(155, 155, 155);
  --theme--fg-border: rgb(47, 47, 47);
@ -101,14 +93,6 @@ body.dark {
 }

 body:not(.dark) {
-  --theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
-    "Segoe UI Emoji", "Segoe UI Symbol";
-  --theme--font-serif: Lyon-Text, Georgia, ui-serif, serif;
-  --theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
-  --theme--font-code: "SFMono-Regular", Menlo, Consolas, "PT Mono",
-    "Liberation Mono", Courier, monospace;
-
  --theme--fg-primary: rgb(55, 53, 47);
  --theme--fg-secondary: rgba(25, 23, 17, 0.6);
  --theme--fg-border: rgb(233, 233, 231);
@ -194,4 +178,4 @@ body:not(.dark) {
  --theme--code-selector: var(--theme--code-builtin);
  --theme--code-inserted: var(--theme--code-builtin);
  --theme--code-deleted: var(--theme--code-boolean);
-}
+}
--- a/src/extensions/font-chooser/fonts.css
+++ b/src/extensions/font-chooser/fonts.css
@ -1,25 +0,0 @@
-/**
- * notion-enhancer: font chooser
- * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
- * (c) 2021 admiraldus (https://github.com/admiraldus)
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-:root {
-  --theme--font_sans: var(--font_chooser--sans);
-  --theme--font_serif: var(--font_chooser--serif);
-  --theme--font_mono: var(--font_chooser--mono);
-  --theme--font_code: var(--font_chooser--code);
-}
-
-.notion-quote-block {
-  font-family: var(--font_chooser--quotes, inherit) !important;
-}
-
-[placeholder='Untitled'],
-[placeholder='Heading 1'],
-[placeholder='Heading 2'],
-[placeholder='Heading 3'] {
-  font-family: var(--font_chooser--headings, inherit) !important;
-}
--- a/src/extensions/font-chooser/fonts.mjs
+++ b/src/extensions/font-chooser/fonts.mjs
@ -1,28 +0,0 @@
-/**
- * notion-enhancer: font chooser
- * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
- * (c) 2021 admiraldus (https://github.com/admiraldus
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-'use strict';
-
-export default async function ({}, db) {
-  const defaults = {
-    sans: " -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'",
-    serif:
-      "Lyon-Text, Georgia, YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif",
-    mono: 'iawriter-mono, Nitti, Menlo, Courier, monospace',
-    code: "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace",
-    quotes: 'inherit',
-    headings: 'inherit',
-  };
-  for (let style of ['sans', 'serif', 'mono', 'code', 'quotes', 'headings']) {
-    const font = await db.get([style]);
-    document.documentElement.style.setProperty(
-      `--font_chooser--${style}`,
-      font || defaults[style]
-    );
-  }
-}
--- a/src/extensions/font-chooser/mod.json
+++ b/src/extensions/font-chooser/mod.json
@ -1,68 +0,0 @@
-{
-  "name": "font chooser",
-  "id": "e0d8d148-45e7-4d79-8313-e7b2ad8abe16",
-  "version": "0.4.0",
-  "description": "set custom fonts.",
-  "tags": ["extension", "customisation"],
-  "authors": [
-    {
-      "name": "TorchAtlas",
-      "homepage": "https://github.com/torchatlas/",
-      "avatar": "https://avatars.githubusercontent.com/u/12666855"
-    }
-  ],
-  "js": {
-    "client": ["fonts.mjs"],
-    "menu": ["fonts.mjs"],
-    "frame": ["fonts.mjs"]
-  },
-  "css": {
-    "client": ["fonts.css"],
-    "menu": ["fonts.css"],
-    "frame": ["fonts.css"]
-  },
-  "options": [
-    {
-      "type": "text",
-      "key": "sans",
-      "label": "sans-serif (inc. ui)",
-      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
-      "value": ""
-    },
-    {
-      "type": "text",
-      "key": "serif",
-      "label": "serif",
-      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
-      "value": ""
-    },
-    {
-      "type": "text",
-      "key": "mono",
-      "label": "monospace",
-      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
-      "value": ""
-    },
-    {
-      "type": "text",
-      "key": "code",
-      "label": "code",
-      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
-      "value": ""
-    },
-    {
-      "type": "text",
-      "key": "quotes",
-      "label": "quotes",
-      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
-      "value": ""
-    },
-    {
-      "type": "text",
-      "key": "headings",
-      "label": "headings",
-      "tooltip": "**this font needs to be installed on your device** - leave the option blank to use notion's default font",
-      "value": ""
-    }
-  ]
-}
--- a/src/extensions/fonts/client.css
+++ b/src/extensions/fonts/client.css
@ -0,0 +1,52 @@
+/**
+ * notion-enhancer: fonts
+ * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
+ * (c) 2021 admiraldus (https://github.com/admiraldus)
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+:root {
+  --font--sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
+    "Segoe UI Emoji", "Segoe UI Symbol";
+  --font--serif: Lyon-Text, Georgia, ui-serif, serif;
+  --font--mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
+  --font--code: "SFMono-Regular", Menlo, Consolas, "PT Mono",
+    "Liberation Mono", Courier, monospace;
+  --font--math: KaTeX_Main, Times New Roman, serif;
+  --font--quotes: inherit;
+  --font--headings: inherit;
+}
+
+[style*="Segoe UI"] {
+  font-family: var(--font--sans) !important;
+}
+
+[style*="Georgia"] {
+  font-family: var(--font--serif) !important;
+}
+
+[style*="iawriter-mono"] {
+  font-family: var(--font--mono) !important;
+}
+
+[style*=SFMono-Regular] {
+  font-family: var(--font--code) !important;
+}
+
+[placeholder='Untitled'],
+[placeholder='Heading 1'],
+[placeholder='Heading 2'],
+[placeholder='Heading 3'] {
+  font-family: var(--font--headings) !important;
+}
+
+.notion-quote-block {
+  font-family: var(--font--quotes) !important;
+}
+
+.katex,
+.katex * {
+  font-family: var(--font--math) !important;
+}
--- a/src/extensions/fonts/client.mjs
+++ b/src/extensions/fonts/client.mjs
@ -0,0 +1,25 @@
+/**
+ * notion-enhancer: fonts
+ * (c) 2021 TorchAtlas (https://github.com/torchatlas/)
+ * (c) 2021 admiraldus (https://github.com/admiraldus
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+"use strict";
+
+export default async (api, db) => {
+  for (const style of [
+    "sans",
+    "serif",
+    "mono",
+    "code",
+    "math",
+    "quotes",
+    "headings",
+  ]) {
+    const font = await db.get(style);
+    if (!font) continue;
+    document.documentElement.style.setProperty(`--font--${style}`, font);
+  }
+};
--- a/src/extensions/fonts/mod.json
+++ b/src/extensions/fonts/mod.json
@ -0,0 +1,66 @@
+{
+  "name": "Fonts",
+  "version": "0.5.0",
+  "id": "e0d8d148-45e7-4d79-8313-e7b2ad8abe16",
+  "description": "Replace Notion's default fonts with any font installed on your system.",
+  "tags": ["customisation", "font-chooser"],
+  "authors": [
+    {
+      "name": "TorchAtlas",
+      "homepage": "https://github.com/torchatlas/",
+      "avatar": "https://avatars.githubusercontent.com/u/12666855"
+    },
+    {
+      "name": "dragonwocky",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    }
+  ],
+  "options": [
+    {
+      "type": "text",
+      "key": "sans",
+      "label": "Sans serif",
+      "description": "Sets the font used across Notion's interface and as the default page font. Leave this blank to use Notion's default sans serif font.",
+      "value": "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, \"Apple Color Emoji\", Arial, sans-serif, \"Segoe UI Emoji\", \"Segoe UI Symbol\""
+    },
+    {
+      "type": "text",
+      "key": "serif",
+      "description": "Sets the font used on serif-styled pages (configurable via the <i class='i-ellipsis -mb-px'></i> <i>Style, export and more...</i> menu). Leave this blank to use Notion's default serif font.",
+      "value": "Lyon-Text, Georgia, ui-serif, serif"
+    },
+    {
+      "type": "text",
+      "key": "mono",
+      "description": "Sets the font used on mono-styled pages (configurable via the <i class='i-ellipsis -mb-px'></i> <i>Style, export and more...</i> menu). Leave this blank to use Notion's default monospaced font.",
+      "value": "iawriter-mono, Nitti, Menlo, Courier, monospace"
+    },
+    {
+      "type": "text",
+      "key": "code",
+      "description": "Sets the font used for code blocks and inline code. Leave this blank to use Notion's default code font.",
+      "value": "\"SFMono-Regular\", Menlo, Consolas, \"PT Mono\", \"Liberation Mono\", Courier, monospace"
+    },
+    {
+      "type": "text",
+      "key": "math",
+      "description": "Sets the font used for math equations. Leave this blank to use Notion's default math font.",
+      "value": "KaTeX_Main, Times New Roman, serif"
+    },
+    {
+      "type": "text",
+      "key": "quotes",
+      "description": "Sets the font used for quote blocks. Leave this blank to inherit the page's font style.",
+      "value": ""
+    },
+    {
+      "type": "text",
+      "key": "headings",
+      "description": "Sets the font used for page headings. Leave this blank to inherit the page's font style.",
+      "value": ""
+    }
+  ],
+  "clientStyles": ["client.css"],
+  "clientScripts": ["client.mjs"]
+}
--- a/src/registry.json
+++ b/src/registry.json
@ -2,6 +2,7 @@
  "core",
  "extensions/topbar",
  "extensions/tweaks",
+  "extensions/fonts",
  "extensions/scroller",
  "extensions/outliner",
  "extensions/word-counter",