4.20.40

* Added: New option for adjusting the font size on Twitch outside of chat.
* Changed: Use tabular numbers (fixed width) for chat timestamps.
* Fixed: Update the default font size to `13` to reflect changes made in Twitch's recent update.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.39",
+  "version": "4.20.40",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

src/modules/chat/index.js

@@ -100,7 +100,7 @@ export default class Chat extends Module {
 		});
 
 		this.settings.add('chat.font-size', {
-			default: 12,
+			default: 13,
 			ui: {
 				path: 'Chat > Appearance >> General',
 				title: 'Font Size',

src/sites/twitch-twilight/modules/chat/index.js

@@ -631,7 +631,7 @@ export default class ChatHook extends Module {
 		this.css_tweaks.setVariable('chat-width', `${width/10}rem`);
 		this.css_tweaks.setVariable('negative-chat-width', `${-width/10}rem`);
 
-		this.css_tweaks.toggle('chat-font', size !== 12 || font !== 'inherit');
+		this.css_tweaks.toggle('chat-font', size !== 13 || font !== 'inherit');
 		this.css_tweaks.toggle('chat-width', this.settings.get('chat.use-width'));
 
 		this.css_tweaks.toggle('emote-alignment-padded', emote_alignment === 1);

src/sites/twitch-twilight/modules/theme/index.js

@@ -44,6 +44,18 @@ export default class ThemeEngine extends Module {
 
 		// Font
 
+		this.settings.add('theme.font.size', {
+			default: 13,
+			ui: {
+				path: 'Appearance > Theme >> Fonts',
+				title: 'Font Size',
+				description: 'How large should normal text be, in pixels. This may be affected by your browser\'s zoom and font settings. The old default was: `12`',
+				component: 'setting-text-box'
+			},
+			changed: () => this.updateFont()
+		});
+
+
 		// Colors
 
 		this.settings.add('theme.color.background', {
@@ -171,6 +183,34 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 		this.css_tweaks.setVariable('border-color', dark ? (gray ? '#2a2a2a'  : '#2c2541') : '#dad8de');
 	}*/
 
+	updateFont() {
+		let size = this.settings.get('theme.font.size');
+		if ( typeof size === 'string' && /^[0-9.]+$/.test(size) )
+			size = parseFloat(size);
+		else
+			size = null;
+
+		if ( ! size || isNaN(size) || ! isFinite(size) || size < 1 || size === 13 ) {
+			this.css_tweaks.delete('font-size');
+			return;
+		}
+
+		size = size / 10;
+
+		this.css_tweaks.set('font-size', `html body {
+	--font-size-1: ${(54/13) * size}rem;
+	--font-size-2: ${(36/13) * size}rem;
+	--font-size-3: ${(24/13) * size}rem;
+	--font-size-4: ${(18/13) * size}rem;
+	--font-size-5: ${(14/13) * size}rem;
+	--font-size-6: ${size}rem;
+	--font-size-7: ${(12/13) * size}rem;
+	--font-size-8: ${(12/13) * size}rem;
+	--font-size-base: ${size}rem;
+}
+`);
+	}
+
 	updateCSS() {
 		//this.updateOldCSS();
 
@@ -372,5 +412,6 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 	onEnable() {
 		//this.updateSetting(this.settings.get('theme.dark'));
 		this.updateCSS();
+		this.updateFont();
 	}
 }

src/sites/twitch-twilight/styles/chat.scss

@@ -38,6 +38,10 @@
 	pointer-events: none;
 }
 
+.chat-line__timestamp {
+	font-variant-numeric: tabular-nums;
+}
+
 .ffz-notice-line {
 	&:focus-within,
 	&:hover,