Override font-family-modern font weight

dev/update-font-weight-override.js

@@ -0,0 +1,42 @@
+import fs from 'node:fs/promises';
+import cssParser from 'css';
+
+try {
+  const fontWeight350Rules = [];
+
+  const sw = await fetch('https://www.tumblr.com/sw.js').then((result) => result.text());
+  const urls = sw.match(/https:\/\/assets\.tumblr\.com\/pop\/[a-z0-9-]+\.css/g);
+  for (const url of urls) {
+    console.log('downloading', url);
+    const cssText = await fetch(url).then((response) => response.text());
+
+    const ast = cssParser.parse(cssText);
+    const rules = ast.stylesheet.rules
+      .filter((rule) => rule.type === 'rule');
+
+    fontWeight350Rules.push(...rules.filter(
+      ({ declarations }) =>
+        declarations.find(({ property, value }) => property === 'font-family' && value === 'var(--font-family-modern)') &&
+        declarations.find(({ property, value }) => property === 'font-weight' && value === '350')
+    ));
+  }
+
+  const selectorSets = [...new Set(fontWeight350Rules.map(({ selectors }) => selectors.join(', ')))];
+
+  const override = `/*
+Tumblr uses an unusual font weight of 350 on most --font-family-modern (Favorit Modern)
+text, which may result in thin text when overriding the --font-family-modern variable.
+
+This file is automatically generated by dev/update-font-weight-override.js and contains
+the selectors of all native Tumblr rules which set font-family: var(--font-family-modern)
+and font-weight: 350.
+*/
+${selectorSets.join(',\n')} {
+  font-weight: normal;
+}\n`;
+
+  await fs.writeFile('src/fontWeightOverride.css', override, { encoding: 'utf8', flag: 'w+' });
+  console.log(`wrote ${selectorSets.length} selector sets`);
+} catch (e) {
+  console.log(e);
+}

package.json

@@ -8,10 +8,12 @@
     "build-webextension": "web-ext build",
     "sign-webextension": "web-ext sign",
     "webstore-upload": "chrome-webstore-upload upload --source=src/ --auto-publish",
-    "update-palette-system-data": "node dev/update-palette-system-data.js"
+    "update-palette-system-data": "node dev/update-palette-system-data.js",
+    "update-font-weight-override": "node dev/update-font-weight-override.js"
   },
   "devDependencies": {
     "chrome-webstore-upload-cli": "^3.3.1",
+    "css": "^3.0.0",
     "eslint": "^8.57.1",
     "eslint-config-semistandard": "^17.0.0",
     "eslint-config-standard": "^17.1.0",

src/fontWeightOverride.css

@@ -0,0 +1,91 @@
+/*
+Tumblr uses an unusual font weight of 350 on most --font-family-modern (Favorit Modern)
+text, which may result in thin text when overriding the --font-family-modern variable.
+
+This file is automatically generated by dev/update-font-weight-override.js and contains
+the selectors of all native Tumblr rules which set font-family: var(--font-family-modern)
+and font-weight: 350.
+*/
+.vgL3J,
+.TZgeO,
+.Gt2Q9,
+.n63mn,
+.OmZD7, .RSZnt,
+.gAJ73,
+.AiALR .enHco .fgOG_,
+.j8Eiw,
+.h7IR_,
+.ctBr6,
+.CsHnt,
+.fBQsy,
+.h6QpP,
+.zFlRa,
+.R4hFV,
+.gty8w,
+.sG03a,
+.EKpJR,
+.y0RtB,
+.ZyaT_,
+.WqS4f,
+.R8_EV,
+.deHVW .x66yu, .cJ1ik .x66yu, .PCzZt .x66yu, .deHVW .pLL0g, .cJ1ik .pLL0g, .PCzZt .pLL0g,
+.L2HBn .x66yu, .n_fvx .x66yu, .L2HBn .pLL0g, .n_fvx .pLL0g,
+.Pl0ah,
+.NjLa2,
+.KVX8S,
+.ZRkRa,
+.F0gXR,
+.q9P6T,
+.u8J1W .wVZAK .M523y,
+.Hzn1C,
+.YmIEY,
+.wjhBM,
+.GutOb .BV4gt,
+.tSUo6,
+.zGDfg,
+.QKm6q .BnVIB .mV8AT,
+.Ks9nn .ZR5vI,
+.c1xDI,
+.xPEP2,
+.rB7hU,
+.RPMuM,
+.KPqE4 p.zDaqs,
+.Sft1t,
+.dJl65,
+.YmlZc,
+.KaTRm,
+.qyc0j,
+.YMD5o,
+.pYQdH .uHcx_,
+.Nq9JP,
+.amytk,
+.Z7ew7,
+.srYxv,
+.OfCo4,
+.WiceP,
+.f8LOG,
+.uaMQw,
+.Jo8I3,
+._ilsA,
+.kbuhn,
+.Isbe9,
+.SuDWJ,
+.nhqrO.ldaI8,
+.I3pYl,
+.YVaw6 .uJ0hL,
+.F3D5L,
+.R4UJx,
+.XADCw,
+.PpzPj,
+.L3C_C,
+.iWoxw,
+.iLTKv,
+.YtLa6 .aPaHS,
+.YtLa6 .G6FrY,
+.mhABv,
+.Z_cvW,
+.kjdMf .Shb25,
+.vgRpB,
+.Vt7qF .wL4YA.jk3gM .UEULa {
+  font-weight: normal;
+}

src/main.js

@@ -3,6 +3,12 @@ const paletteSystemData = fetch(browser.runtime.getURL('/paletteSystemData.json'
 const setCssVariable = ([property, value]) => document.documentElement.style.setProperty(`--${property}`, value);
 const removeCssVariable = ([property]) => document.documentElement.style.removeProperty(`--${property}`);
 
+const documentInteractive = new Promise((resolve) =>
+  document.readyState === 'loading'
+    ? document.addEventListener('readystatechange', resolve, { once: true })
+    : resolve()
+);
+
 let appliedPaletteEntries = [];
 
 const applyCurrentPalette = async function () {
@@ -40,6 +46,12 @@ const applyCurrentPalette = async function () {
   appliedPaletteEntries = currentPaletteEntries;
 };
 
+const fontWeightOverride = Object.assign(document.createElement('link'), {
+  rel: 'stylesheet',
+  id: 'palettes-for-tumblr-override',
+  href: browser.runtime.getURL(`/fontWeightOverride.css?t=${Date.now()}`)
+});
+
 const applyFontFamily = async function () {
   const { fontFamily = '' } = await browser.storage.local.get('fontFamily');
   const { customFontFamily = '' } = await browser.storage.local.get('customFontFamily');
@@ -52,6 +64,10 @@ const applyFontFamily = async function () {
     '--font-family-modern',
     fontFamily === 'custom' ? customFontFamily : fontFamily
   );
+  await documentInteractive;
+  document.getElementById('palettes-for-tumblr-override')?.remove();
+  (fontFamily === 'custom' ? customFontFamily : fontFamily) &&
+    document.documentElement.append(fontWeightOverride);
 };
 
 const applyFontSize = async function () {

src/manifest.json

@@ -39,7 +39,7 @@
   },
   "permissions": [ "storage" ],
   "web_accessible_resources": [{
-    "resources": [ "*.json" ],
+    "resources": [ "*.json", "*.css" ],
     "matches": [ "*://www.tumblr.com/*" ]
   }],