From 0c5dcb4d1ba437782f9fc2accb0ba321fd1ffe62 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Mon, 5 Oct 2020 13:16:37 -0400
Subject: [PATCH] 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                                  |  2 +-
 src/modules/chat/index.js                     |  2 +-
 .../twitch-twilight/modules/chat/index.js     |  2 +-
 .../twitch-twilight/modules/theme/index.js    | 41 +++++++++++++++++++
 src/sites/twitch-twilight/styles/chat.scss    |  4 ++
 5 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 1f9ee24d..b20f733f 100755
--- a/package.json
+++ b/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": {
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index 00940c5c..9be248eb 100644
--- a/src/modules/chat/index.js
+++ b/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',
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index a2848666..a6e7c4b8 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/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);
diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js
index 46a380d5..9754e076 100644
--- a/src/sites/twitch-twilight/modules/theme/index.js
+++ b/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();
 	}
 }
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss
index c1933f1e..88daff00 100644
--- a/src/sites/twitch-twilight/styles/chat.scss
+++ b/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,