From 077a0685ad7f965e87282a5437274de1aeefb67f Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Fri, 27 Sep 2019 15:44:33 -0400
Subject: [PATCH] 4.12.2

* Added: Helper text to `Appearance > Theme` with suggested colors, as well as the previous site fonts.
* Changed: Automatically enable or disable Twitch's Dark Theme when setting a background color, to ensure page elements stay styled correctly.
* Changed: Don't try injecting our script on `brand` or `dev` subdomains.
* Changed: Do not allow setting the alpha value of custom background colors.
* Fixed: Add relative positioning to most of our tool-tip wrapper elements, to ensure tool-tips are positioned correctly.
* Fixed: Stop modifying queries with Apollo. Just send our own queries when we need a bit of extra data. Should prevent loading issues.
* Fixed: Option to hide the Discover link in the top navigation not working.
* Fixed: Option to hide live indicators on channel cards not working.
* Fixed: Add a few more rules to the new theme to ensure all elements are colored correctly.
* Fixed: Do not square avatars within the Bits Leaderboard.
* Known Issue: Light custom themes do not look good in Theater Mode.
---
 package.json                                  |  2 +-
 src/entry.js                                  |  2 +-
 .../components/badge-term-editor.vue          |  2 +-
 .../main_menu/components/color-picker.vue     |  8 ++-
 .../components/filter-rule-editor.vue         | 10 +--
 .../main_menu/components/main-menu.vue        |  2 +-
 .../main_menu/components/profile-editor.vue   |  4 +-
 .../main_menu/components/profile-manager.vue  | 16 ++---
 .../components/setting-color-box.vue          |  8 +++
 .../main_menu/components/term-editor.vue      |  6 +-
 .../components/translation-ui.vue             |  2 +-
 .../twitch-twilight/modules/channel_bar.jsx   |  8 +--
 .../modules/css_tweaks/index.js               |  6 +-
 .../css_tweaks/styles/square-avatars.scss     | 13 ++--
 .../css_tweaks/styles/swap-sidebars.scss      |  2 +-
 .../modules/directory/following.jsx           | 14 ++--
 .../modules/directory/game.jsx                |  8 +--
 .../modules/directory/index.jsx               |  7 +-
 .../twitch-twilight/modules/theme/index.js    | 44 +++++++++---
 .../modules/video_chat/index.jsx              |  4 +-
 .../styles/color_normalizer.scss              | 70 ++++++++-----------
 src/std-components/tooltip.vue                |  2 +-
 styles/widgets.scss                           |  4 ++
 styles/widgets/color-picker.scss              | 37 +++++++++-
 styles/widgets/profile-selector.scss          |  8 +--
 styles/widgets/tab-container.scss             | 12 ++--
 26 files changed, 182 insertions(+), 119 deletions(-)

diff --git a/package.json b/package.json
index b02872ab..e5c2bc46 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.12.0",
+  "version": "4.12.2",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {
diff --git a/src/entry.js b/src/entry.js
index eb58a937..a1a794ae 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -2,7 +2,7 @@
 'use strict';
 (() => {
 	// Don't run on certain sub-domains.
-	if ( /^(?:localhost\.rig|blog|player|im|chatdepot|tmi|api|)\./.test(location.hostname) )
+	if ( /^(?:localhost\.rig|blog|player|im|chatdepot|tmi|api|brand|dev)\./.test(location.hostname) )
 		return;
 
 	const DEBUG = localStorage.ffzDebugMode == 'true' && document.body.classList.contains('ffz-dev') && ! window.Ember,
diff --git a/src/modules/main_menu/components/badge-term-editor.vue b/src/modules/main_menu/components/badge-term-editor.vue
index e20a1cc8..61d2aec2 100644
--- a/src/modules/main_menu/components/badge-term-editor.vue
+++ b/src/modules/main_menu/components/badge-term-editor.vue
@@ -43,7 +43,7 @@
 					</figure>
 				</div>
 			</div>
-			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-tooltip-wrapper">
+			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip-wrapper">
 				<button
 					v-if="editing"
 					:class="{active: edit_data.remove}"
diff --git a/src/modules/main_menu/components/color-picker.vue b/src/modules/main_menu/components/color-picker.vue
index ca2ccb59..20ed7705 100644
--- a/src/modules/main_menu/components/color-picker.vue
+++ b/src/modules/main_menu/components/color-picker.vue
@@ -23,7 +23,7 @@
 				<figure v-else class="ffz-i-eyedropper" />
 			</button>
 			<div v-if="open" v-on-clickaway="closePicker" class="tw-absolute tw-z-above tw-right-0">
-				<chrome-picker :value="colors" @input="onPick" />
+				<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
 			</div>
 		</div>
 		<div v-else class="tw-relative">
@@ -44,7 +44,7 @@
 				:class="{'ffz-bottom-100': openUp}"
 				class="tw-absolute tw-z-above tw-balloon--up tw-balloon--right"
 			>
-				<chrome-picker :value="colors" @input="onPick" />
+				<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
 			</div>
 		</div>
 	</div>
@@ -63,6 +63,10 @@ export default {
 
 	props: {
 		value: String,
+		alpha: {
+			type: Boolean,
+			default: true
+		},
 		default: {
 			type: String,
 			default: '#000'
diff --git a/src/modules/main_menu/components/filter-rule-editor.vue b/src/modules/main_menu/components/filter-rule-editor.vue
index 5c0e6b09..bd6590f2 100644
--- a/src/modules/main_menu/components/filter-rule-editor.vue
+++ b/src/modules/main_menu/components/filter-rule-editor.vue
@@ -14,7 +14,7 @@
 
 		<div
 			v-if="isShort"
-			class="tw-mg-l-1 tw-pd-x-1 tw-border-l tw-flex tw-align-items-center ffz--profile__icon tw-tooltip-wrapper"
+			class="tw-mg-l-1 tw-pd-x-1 tw-border-l tw-flex tw-align-items-center ffz--profile__icon tw-relative tw-tooltip-wrapper"
 		>
 			<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
 			<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
@@ -31,7 +31,7 @@
 			:class="[isShort ? '' : 'tw-mg-l-1']"
 			class="tw-border-l tw-pd-l-1 tw-flex tw-flex-column tw-flex-wrap tw-justify-content-start tw-align-items-start"
 		>
-			<div v-if="! isShort" class="tw-mg-b-1 tw-border-b tw-pd-b-1 tw-full-width tw-flex tw-justify-content-center ffz--profile__icon tw-tooltip-wrapper">
+			<div v-if="! isShort" class="tw-mg-b-1 tw-border-b tw-pd-b-1 tw-full-width tw-flex tw-justify-content-center ffz--profile__icon tw-relative tw-tooltip-wrapper">
 				<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
 				<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
 					<span v-if="passes">
@@ -44,13 +44,13 @@
 			</div>
 
 			<template v-if="deleting">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('delete')">
+				<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="$emit('delete')">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
+				<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -58,7 +58,7 @@
 				</button>
 			</template>
 			<template v-else>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
+				<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
diff --git a/src/modules/main_menu/components/main-menu.vue b/src/modules/main_menu/components/main-menu.vue
index 7cccf9f8..78f09b54 100644
--- a/src/modules/main_menu/components/main-menu.vue
+++ b/src/modules/main_menu/components/main-menu.vue
@@ -33,7 +33,7 @@
 					<figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
 				</span>
 			</button>
-			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-tooltip-wrapper" @click="popout">
+			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="popout">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-link-ext" />
 				</span>
diff --git a/src/modules/main_menu/components/profile-editor.vue b/src/modules/main_menu/components/profile-editor.vue
index 540bc470..ba385d65 100644
--- a/src/modules/main_menu/components/profile-editor.vue
+++ b/src/modules/main_menu/components/profile-editor.vue
@@ -42,7 +42,7 @@
 				</div>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
 				@click="resetExport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -57,7 +57,7 @@
 				{{ export_message }}
 			</section>
 			<button
-				class="tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
 				@click="resetExport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
diff --git a/src/modules/main_menu/components/profile-manager.vue b/src/modules/main_menu/components/profile-manager.vue
index b262ec92..46144943 100644
--- a/src/modules/main_menu/components/profile-manager.vue
+++ b/src/modules/main_menu/components/profile-manager.vue
@@ -32,7 +32,7 @@
 				</div>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -47,7 +47,7 @@
 				{{ import_message }}
 			</section>
 			<button
-				class="tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -66,7 +66,7 @@
 				<button
 					v-for="(profile, idx) in import_profiles"
 					:key="idx"
-					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay tw-tooltip-wrapper"
+					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay tw-relative tw-tooltip-wrapper"
 					@click="importProfile(profile)"
 				>
 					<span class="tw-button__text tw-c-text-overlay">
@@ -78,7 +78,7 @@
 				</button>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -113,7 +113,7 @@
 				</button>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -138,7 +138,7 @@
 						<span class="ffz-i-ellipsis-vert" />
 					</div>
 
-					<div v-if="p.url" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-tooltip-wrapper tw-font-size-4">
+					<div v-if="p.url" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative tw-tooltip-wrapper tw-font-size-4">
 						<span class="ffz-i-download-cloud" />
 						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 							<div class="tw-mg-b-05">
@@ -164,12 +164,12 @@
 					</div>
 
 					<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-l tw-mg-l-1 tw-pd-l-1">
-						<div v-if="p.live" class="ffz--profile__icon ffz-i-ok tw-tooltip-wrapper">
+						<div v-if="p.live" class="ffz--profile__icon ffz-i-ok tw-relative tw-tooltip-wrapper">
 							<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 								{{ t('setting.profiles.active', 'This profile is active.') }}
 							</div>
 						</div>
-						<div v-if="! p.live" class="ffz--profile__icon ffz-i-cancel tw-tooltip-wrapper">
+						<div v-if="! p.live" class="ffz--profile__icon ffz-i-cancel tw-relative tw-tooltip-wrapper">
 							<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 								{{ t('setting.profiles.inactive', 'This profile is not active.') }}
 							</div>
diff --git a/src/modules/main_menu/components/setting-color-box.vue b/src/modules/main_menu/components/setting-color-box.vue
index 8fcb50ac..22184bde 100644
--- a/src/modules/main_menu/components/setting-color-box.vue
+++ b/src/modules/main_menu/components/setting-color-box.vue
@@ -12,6 +12,7 @@
 			<color-picker
 				:id="item.full_key"
 				ref="control"
+				:alpha="alpha"
 				:nullable="true"
 				:value="color"
 				@input="onInput"
@@ -62,6 +63,13 @@ export default {
 				return '';
 
 			return this.value;
+		},
+
+		alpha() {
+			if ( this.item.alpha != null )
+				return this.item.alpha;
+
+			return true;
 		}
 	},
 
diff --git a/src/modules/main_menu/components/term-editor.vue b/src/modules/main_menu/components/term-editor.vue
index 7c7e162e..330f5d6c 100644
--- a/src/modules/main_menu/components/term-editor.vue
+++ b/src/modules/main_menu/components/term-editor.vue
@@ -1,13 +1,13 @@
 <template lang="html">
 	<div class="ffz--term">
 		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
-			<div v-if="! is_valid" class="tw-tooltip-wrapper tw-mg-r-05">
+			<div v-if="! is_valid" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
 				<figure class="tw-c-text-error ffz-i-attention" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 					{{ t('setting.terms.warn-invalid', 'This highlight term is invalid.') }}
 				</div>
 			</div>
-			<div v-if="! is_safe" class="tw-tooltip-wrapper tw-mg-r-05">
+			<div v-if="! is_safe" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
 				<figure class="tw-c-text-hint ffz-i-attention" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 					{{ t('setting.terms.warn-complex', 'This highlight term is potentially too complex. It may cause client lag.') }}
@@ -56,7 +56,7 @@
 					</option>
 				</select>
 			</div>
-			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-tooltip-wrapper">
+			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip-wrapper">
 				<button
 					v-if="editing"
 					:class="{active: edit_data.remove}"
diff --git a/src/modules/translation_ui/components/translation-ui.vue b/src/modules/translation_ui/components/translation-ui.vue
index a7a1776c..44d17f54 100644
--- a/src/modules/translation_ui/components/translation-ui.vue
+++ b/src/modules/translation_ui/components/translation-ui.vue
@@ -31,7 +31,7 @@
 					<figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
 				</span>
 			</button>
-			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-tooltip-wrapper" @click="popout">
+			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="popout">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-link-ext" />
 				</span>
diff --git a/src/sites/twitch-twilight/modules/channel_bar.jsx b/src/sites/twitch-twilight/modules/channel_bar.jsx
index f2cd6d42..f520be61 100644
--- a/src/sites/twitch-twilight/modules/channel_bar.jsx
+++ b/src/sites/twitch-twilight/modules/channel_bar.jsx
@@ -5,9 +5,9 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {get, deep_copy} from 'utilities/object';
+import {get} from 'utilities/object';
 
-import CHANNEL_QUERY from './channel_header_query.gql';
+//import CHANNEL_QUERY from './channel_header_query.gql';
 
 
 export default class ChannelBar extends Module {
@@ -25,14 +25,14 @@ export default class ChannelBar extends Module {
 		this.inject('metadata');
 		this.inject('socket');
 
-		this.apollo.registerModifier('ChannelPage_ChannelHeader', CHANNEL_QUERY);
+		/*this.apollo.registerModifier('ChannelPage_ChannelHeader', CHANNEL_QUERY);
 		this.apollo.registerModifier('ChannelPage_ChannelHeader', data => {
 			const u = data && data.data && data.data.user;
 			if ( u ) {
 				const o = u.profileViewCount = new Number(u.profileViewCount || 0);
 				o.data = deep_copy(u);
 			}
-		}, false);
+		}, false);*/
 
 
 		this.settings.add('channel.metadata.force-above', {
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js
index 22f73ac5..29ba9fe2 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/index.js
+++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js
@@ -11,7 +11,7 @@ import {has} from 'utilities/object';
 const STYLE_VALIDATOR = document.createElement('span');
 
 const CLASSES = {
-	'top-discover': '.top-nav__nav-link[data-a-target="discover-link"]',
+	'top-discover': '.navigation-link[data-a-target="discover-link"]',
 	'side-nav': '.side-nav',
 	'side-rec-channels': '.side-nav .recommended-channels,.side-nav .ffz--popular-channels',
 	'side-rec-friends': '.side-nav .recommended-friends',
@@ -31,7 +31,7 @@ const CLASSES = {
 	'pinned-cheer': '.pinned-cheer,.pinned-cheer-v2,.channel-leaderboard',
 	'whispers': 'body .whispers',
 
-	'dir-live-ind': '.live-channel-card:not([data-a-target*="host"]) .stream-type-indicator.stream-type-indicator--live,.stream-thumbnail__card .stream-type-indicator.stream-type-indicator--live,.preview-card .stream-type-indicator.stream-type-indicator--live,.preview-card .preview-card-stat.preview-card-stat--live',
+	'dir-live-ind': '.preview-card[data-ffz-type="live"] .tw-channel-status-text-indicator,.live-channel-card:not([data-a-target*="host"]) .stream-type-indicator.stream-type-indicator--live,.stream-thumbnail__card .stream-type-indicator.stream-type-indicator--live,.preview-card .stream-type-indicator.stream-type-indicator--live,.preview-card .preview-card-stat.preview-card-stat--live',
 	'profile-hover': '.preview-card .tw-relative:hover .ffz-channel-avatar',
 	'not-live-bar': 'div[data-test-selector="non-live-video-banner-layout"]',
 	'channel-live-ind': '.channel-header__user .tw-channel-status-text-indicator'
@@ -228,7 +228,7 @@ export default class CSSTweaks extends Module {
 			ui: {
 				path: 'Appearance > Theme >> Fonts',
 				title: 'Font Family',
-				description: 'Override the font used for the entire Twitch website.',
+				description: 'Override the font used for the entire Twitch website. The old default font was: `"Helvetica Neue",Helvetica,Arial,sans-serif`',
 				component: 'setting-text-box'
 			},
 			changed: () => this.updateFont()
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
index 82ebd30b..02d1fec1 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
@@ -1,8 +1,7 @@
-.player-streaminfo__picture img[src],
-.side-nav-card__avatar.tw-border-radius-rounded,
-.tw-avatar .tw-border-radius-rounded {
-	.tw-root--theme-dark &,
-	& {
-		border-radius: 0 !important;
-	}
+.tw-avatar {
+	--border-radius-rounded: 0 !important;
+}
+
+.bits-leaderboard-medal .tw-avatar {
+	--border-radius-rounded: 9000px !important;
 }
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss
index f0513476..e4e8321a 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss
@@ -72,7 +72,7 @@
 	right: 0;
 }
 
-body .whispers--theatre-mode.whispers--right-column-expanded {
+body .whispers--theatre-mode.whispers--right-column-expanded-beside {
 	left: var(--ffz-chat-width) !important;
 	right: 0 !important;
 }
diff --git a/src/sites/twitch-twilight/modules/directory/following.jsx b/src/sites/twitch-twilight/modules/directory/following.jsx
index 86832efe..1fc3af6d 100644
--- a/src/sites/twitch-twilight/modules/directory/following.jsx
+++ b/src/sites/twitch-twilight/modules/directory/following.jsx
@@ -11,12 +11,12 @@ import {get} from 'utilities/object';
 import Popper from 'popper.js';
 import {makeReference} from 'utilities/tooltip';
 
-import FOLLOWED_INDEX from './followed_index.gql';
+/*import FOLLOWED_INDEX from './followed_index.gql';
 import FOLLOWED_HOSTS from './followed_hosts.gql';
 import FOLLOWED_CHANNELS from './followed_channels.gql';
 import FOLLOWED_LIVE from './followed_live.gql';
 import SUBSCRIBED_CHANNELS from './sidenav_subscribed.gql';
-import RECOMMENDED_CHANNELS from './recommended_channels.gql';
+import RECOMMENDED_CHANNELS from './recommended_channels.gql';*/
 
 export default class Following extends SiteModule {
 	constructor(...args) {
@@ -66,7 +66,7 @@ export default class Following extends SiteModule {
 			changed: () => this.parent.DirectoryCard.forceUpdate()
 		});
 
-		this.apollo.registerModifier('FollowedChannels_RENAME2', FOLLOWED_CHANNELS);
+		/*this.apollo.registerModifier('FollowedChannels_RENAME2', FOLLOWED_CHANNELS);
 		this.apollo.registerModifier('SideNav_SubscribedChannels', SUBSCRIBED_CHANNELS);
 		this.apollo.registerModifier('RecommendedChannels', RECOMMENDED_CHANNELS);
 
@@ -97,7 +97,7 @@ export default class Following extends SiteModule {
 
 				shelf.node.content.edges = this.parent.processNodes(edges);
 			}
-		}, false);
+		}, false);*/
 
 		this.hosts = new WeakMap;
 	}
@@ -185,7 +185,7 @@ export default class Following extends SiteModule {
 			'data.currentUser.recommendations.liveRecommendations.nodes.0.createdAt'
 		);*/
 
-		if ( this.router.current_name !== 'dir-following' )
+		/*if ( this.router.current_name !== 'dir-following' )
 			return;
 
 		const bit = this.router.match[1];
@@ -204,11 +204,11 @@ export default class Following extends SiteModule {
 				'data.currentUser.followedLiveUsers.nodes.0.stream.createdAt'
 			);*/
 
-		else if ( bit === 'hosts' )
+		/*else if ( bit === 'hosts' )
 			this.apollo.ensureQuery(
 				'FollowingHosts_CurrentUser',
 				'data.currentUser.followedHosts.nodes.0.hosting.stream.createdAt'
-			);
+			);*/
 	}
 
 	onEnable() {
diff --git a/src/sites/twitch-twilight/modules/directory/game.jsx b/src/sites/twitch-twilight/modules/directory/game.jsx
index 4cd07555..4ac99a8a 100644
--- a/src/sites/twitch-twilight/modules/directory/game.jsx
+++ b/src/sites/twitch-twilight/modules/directory/game.jsx
@@ -8,7 +8,7 @@ import {SiteModule} from 'utilities/module';
 import {createElement} from 'utilities/dom';
 import { get } from 'utilities/object';
 
-import GAME_QUERY from './game.gql';
+//import GAME_QUERY from './game.gql';
 
 export default class Game extends SiteModule {
 	constructor(...args) {
@@ -27,16 +27,16 @@ export default class Game extends SiteModule {
 			['dir-game-index', 'dir-community', 'dir-game-videos', 'dir-game-clips', 'dir-game-details']
 		);
 
-		this.apollo.registerModifier('DirectoryPage_Game', GAME_QUERY);
+		/*this.apollo.registerModifier('DirectoryPage_Game', GAME_QUERY);
 		this.apollo.registerModifier('DirectoryPage_Game', res => {
 			/*setTimeout(() =>
 				this.apollo.ensureQuery(
 					'DirectoryPage_Game',
 					'data.game.streams.edges.0.node.createdAt'
-				), 500);*/
+				), 500);* /
 
 			this.modifyStreams(res);
-		}, false);
+		}, false);*/
 	}
 
 	modifyStreams(res) { // eslint-disable-line class-methods-use-this
diff --git a/src/sites/twitch-twilight/modules/directory/index.jsx b/src/sites/twitch-twilight/modules/directory/index.jsx
index bcc81462..ebe1a009 100644
--- a/src/sites/twitch-twilight/modules/directory/index.jsx
+++ b/src/sites/twitch-twilight/modules/directory/index.jsx
@@ -11,7 +11,7 @@ import {get} from 'utilities/object';
 
 import Following from './following';
 import Game from './game';
-import BrowsePopular from './browse_popular';
+//import BrowsePopular from './browse_popular';
 
 
 export const CARD_CONTEXTS = ((e ={}) => {
@@ -45,7 +45,7 @@ export default class Directory extends SiteModule {
 
 		this.inject(Following);
 		this.inject(Game);
-		this.inject(BrowsePopular);
+		//this.inject(BrowsePopular);
 
 		this.DirectoryCard = this.fine.define(
 			'directory-card',
@@ -336,6 +336,7 @@ export default class Directory extends SiteModule {
 			game = props.gameTitle || props.playerMetadataGame || (props.trackingProps && props.trackingProps.categoryName);
 
 		container.classList.toggle('ffz-hide-thumbnail', this.settings.provider.get('directory.game.hidden-thumbnails', []).includes(game));
+		container.dataset.ffzType = props.streamType;
 
 		const should_hide = (props.streamType === 'rerun' && this.settings.get('directory.hide-vodcasts')) ||
 			(props.context !== CARD_CONTEXTS.SingleGameList && this.settings.provider.get('directory.game.blocked-games', []).includes(game));
@@ -447,7 +448,7 @@ export default class Directory extends SiteModule {
 			inst.ffz_uptime_el = card.querySelector('.ffz-uptime-element');
 			if ( ! inst.ffz_uptime_el )
 				card.appendChild(inst.ffz_uptime_el = (<div class="ffz-uptime-element tw-absolute tw-right-0 tw-top-0 tw-mg-1">
-					<div class="tw-tooltip-wrapper">
+					<div class="tw-relative tw-tooltip-wrapper">
 						<div class="preview-card-stat tw-align-items-center tw-border-radi-us-small tw-c-background-overlay tw-c-text-overlay tw-flex tw-font-size-6 tw-justify-content-center">
 							<div class="tw-flex tw-c-text-live">
 								<figure class="ffz-i-clock" />
diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js
index 1a425d73..552519dd 100644
--- a/src/sites/twitch-twilight/modules/theme/index.js
+++ b/src/sites/twitch-twilight/modules/theme/index.js
@@ -20,11 +20,14 @@ export default class ThemeEngine extends Module {
 		this.inject('settings');
 
 		this.inject('site');
+		this.inject('site.fine');
 		this.inject('site.css_tweaks');
 		this.inject('site.router');
 
 		this.should_enable = true;
 
+		// Font
+
 		// Colors
 
 		this.settings.add('theme.color.background', {
@@ -32,7 +35,9 @@ export default class ThemeEngine extends Module {
 			ui: {
 				path: 'Appearance > Theme >> Colors @{"description": "This is a quick preview of a new system coming soon to FrankerFaceZ. Expect heavy changes here, including separate Basic and Advanced modes, and better color selection."}',
 				title: 'Background',
-				component: 'setting-color-box'
+				description: 'Try `#0E0C13` for something close to the old dark theme, or `#0E0E0E` for a nice dark gray. Transparent colors not allowed.',
+				component: 'setting-color-box',
+				alpha: false
 			},
 			changed: () => this.updateCSS()
 		});
@@ -42,6 +47,7 @@ export default class ThemeEngine extends Module {
 			ui: {
 				path: 'Appearance > Theme >> Colors',
 				title: 'Text',
+				description: 'If not set, this will automatically be set to white or black based on the brightness of the background.',
 				component: 'setting-color-box'
 			},
 			changed: () => this.updateCSS()
@@ -55,13 +61,12 @@ export default class ThemeEngine extends Module {
 			},
 
 			ui: {
-				path: 'Appearance @{"description": "Personalize the appearance of Twitch. Change the color scheme and fonts and tune the layout to optimize your experience."} > Theme >> General',
+				path: 'Appearance @{"description": "Personalize the appearance of Twitch. Change the color scheme and fonts and tune the layout to optimize your experience."} > Theme >> Legacy',
 				title: 'Gray (no Purple)',
 				description: `*Requires Dark Theme to be Enabled.*
 
-I see my website and I want it painted black...
-
-This is a very early feature and will change as there is time.`,
+This setting will be going away very soon, as the new theme system matures.
+The CSS loaded by this setting is far too heavy and can cause performance issues.`,
 				component: 'setting-check-box'
 			},
 
@@ -115,12 +120,32 @@ This is a very early feature and will change as there is time.`,
 
 		const background = Color.RGBA.fromCSS(this.settings.get('theme.color.background'));
 		if ( background ) {
+			background.a = 1;
 			bits.push(`--color-background-body: ${background.toCSS()};`);
 
 			const hsla = background.toHSLA(),
 				luma = hsla.l;
 			dark = luma < 0.5;
 
+			if ( dark && ! this.settings.get('theme.can-dark') )
+				return this.css_tweaks.delete('colors');
+
+			// Make sure the Twitch theme is set correctly.
+			try {
+				const store = this.resolve('site').store,
+					theme = store.getState().ui.theme,
+					wanted_theme = dark ? 1 : 0;
+
+				if( theme !== wanted_theme )
+					store.dispatch({
+						type: 'core.ui.THEME_CHANGED',
+						theme: wanted_theme
+					});
+			} catch(err) {
+				this.log.warning('Unable to automatically set the Twitch Dark Theme state.', err);
+			}
+
+			bits.push(`--color-background-input-focus: ${background.toCSS()};`);
 			bits.push(`--color-background-base: ${hsla._l(luma + (dark ? .05 : -.05)).toCSS()};`);
 			bits.push(`--color-background-alt: ${hsla._l(luma + (dark ? .1 : -.1)).toCSS()};`);
 			bits.push(`--color-background-alt-2: ${hsla._l(luma + (dark ? .15 : -.15)).toCSS()};`);
@@ -135,10 +160,13 @@ This is a very early feature and will change as there is time.`,
 			bits.push(`--color-text-base: ${text.toCSS()};`);
 
 			const hsla = text.toHSLA(),
-				luma = hsla.l;
+				alpha = hsla.a;
 
-			bits.push(`--color-text-alt: ${hsla._l(luma + (dark ? -.1 : .1)).toRGBA().toCSS()};`);
-			bits.push(`--color-text-alt-2: ${hsla._l(luma + (dark ? -.2 : .2)).toRGBA().toCSS()};`);
+			bits.push(`--color-text-label: ${text.toCSS()};`);
+			bits.push(`--color-text-label-optional: ${hsla._a(alpha - 0.4).toCSS()};`);
+
+			bits.push(`--color-text-alt: ${hsla._a(alpha - 0.2).toCSS()};`);
+			bits.push(`--color-text-alt-2: ${hsla._a(alpha - 0.4).toCSS()};`);
 		}
 
 
diff --git a/src/sites/twitch-twilight/modules/video_chat/index.jsx b/src/sites/twitch-twilight/modules/video_chat/index.jsx
index b7a0e3f6..94c2090c 100644
--- a/src/sites/twitch-twilight/modules/video_chat/index.jsx
+++ b/src/sites/twitch-twilight/modules/video_chat/index.jsx
@@ -254,7 +254,7 @@ export default class VideoChatHook extends Module {
 					<button class="tw-button tw-button--text" data-test-selector="parent-reply-button" onClick={msg._reply_handler}>
 						<span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span>
 					</button>
-					<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-tooltip-wrapper">
+					<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative tw-tooltip-wrapper">
 						• { t.i18n.t('video-chat.time', '{time,humantime} ago', {
 							time: msg.timestamp
 						}) }
@@ -288,7 +288,7 @@ export default class VideoChatHook extends Module {
 					>
 						{this.props.hideTimestamp || (<div data-test-selector="message-timestamp" class="tw-align-right tw-flex tw-flex-shrink-0 vod-message__header">
 							<div class="tw-mg-r-05">
-								<div class="tw-inline-flex tw-tooltip-wrapper">
+								<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
 									<button class="tw-block tw-full-width tw-interactable tw-interactable--inverted" onClick={this.onTimestampClickHandler}>
 										<div class="tw-pd-x-05">
 											<p class="tw-font-size-7">{print_duration(context.comment.contentOffset)}</p>
diff --git a/src/sites/twitch-twilight/styles/color_normalizer.scss b/src/sites/twitch-twilight/styles/color_normalizer.scss
index 4e4ef9e0..dffbb61d 100644
--- a/src/sites/twitch-twilight/styles/color_normalizer.scss
+++ b/src/sites/twitch-twilight/styles/color_normalizer.scss
@@ -1,45 +1,37 @@
-body {
-	background-color: var(--color-background-body) !important;
-}
+.tw-root--theme-dark, html {
+	body,
+	.channel-header,
+	.channel-root__right-column,
+	.chat-room,
+	.carousel-player-nav-arrow__container {
+		background-color: var(--color-background-body) !important;
+	}
 
-.tw-root--theme-dark .channel-root__right-column,
-.channel-root__right-column {
-	background-color: var(--color-background-body) !important;
-}
+	.clmgr-table__row,
+	.room-upsell,
+	.video-card {
+		background-color: var(--color-background-base) !important;
+	}
 
-.tw-root--theme-dark .chat-room,
-.chat-room {
-	background-color: var(--color-background-body) !important;
-}
+	.side-nav__overlay-wrapper,
+	.thread-header__title-bar-container--focused {
+		background-color: var(--color-background-alt) !important;
+	}
 
-.tw-root--theme-dark .carousel-player-nav-arrow__container,
-.carousel-player-nav-arrow__container {
-	background-color: var(--color-background-body) !important;
-}
+	.clmgr-table__row:hover,
+	.thread-header__title-bar-container,
+	.whispers-list-item:hover,
+	.side-nav-card__link:hover {
+		background-color: var(--color-background-alt-2) !important;
+	}
 
-.tw-root--theme-dark .side-nav__overlay-wrapper,
-.side-nav__overlay-wrapper {
-	background-color: var(--color-background-alt) !important;
-}
+	.channel-header__user {
+		color: var(--color-text-base) !important;
+	}
 
-.tw-root--theme-dark .side-nav-card__link:hover,
-.side-nav-card__link:hover {
-	background-color: var(--color-background-alt-2) !important;
-}
-
-.tw-root--theme-dark .channel-header,
-.channel-header {
-	background-color: var(--color-background-body) !important;
-}
-
-.tw-root--theme-dark .channel-header__user,
-.channel-header__user {
-	color: var(--color-text-base) !important;
-}
-
-.tw-root--theme-dark .chat-line__moderation,
-.tw-root--theme-dark .chat-line__status,
-.chat-line__moderation,
-.chat-line__status {
-	color: var(--color-text-alt-2) !important;
+	.chat-line__timestamp,
+	.chat-line__moderation,
+	.chat-line__status {
+		color: var(--color-text-alt-2) !important;
+	}
 }
\ No newline at end of file
diff --git a/src/std-components/tooltip.vue b/src/std-components/tooltip.vue
index 29a3862f..c2d5756c 100644
--- a/src/std-components/tooltip.vue
+++ b/src/std-components/tooltip.vue
@@ -1,5 +1,5 @@
 <template functional>
-	<div class="tw-tooltip-wrapper">
+	<div class="tw-relative tw-tooltip-wrapper">
 		<slot />
 		<div
 			:class="`tw-tooltip--align-${props.align||'center'} tw-tooltip--${props.above ? 'up' : 'down'}`"
diff --git a/styles/widgets.scss b/styles/widgets.scss
index d5e2b942..7c39646b 100644
--- a/styles/widgets.scss
+++ b/styles/widgets.scss
@@ -248,8 +248,12 @@ textarea.tw-input {
 	p {
 		white-space: pre-line;
 	}
+}
 
+.ffz--changelog,
+.ffz--widget {
 	code {
+		user-select: all;
 		padding: 2px 5px;
 		border-radius: 2px;
 		background-color: rgba(0,0,0,0.1);
diff --git a/styles/widgets/color-picker.scss b/styles/widgets/color-picker.scss
index a1a85b0e..051281cf 100644
--- a/styles/widgets/color-picker.scss
+++ b/styles/widgets/color-picker.scss
@@ -1,4 +1,4 @@
-$color: #dad8de;
+/*$color: #dad8de;
 $bg-color: #17141f;
 $border-color: #2c2541;
 
@@ -8,6 +8,7 @@ $input-border: #392e5c;
 $input-active-border: #7d5bbe;
 
 
+
 .tw-root--theme-dark {
 	.vc-sketch {
 		background: $bg-color;
@@ -93,4 +94,38 @@ $input-active-border: var(--ffz-color-5);
 	.vc-sketch-presets-color {
 		box-shadow: inset 0 0 0 1px $border-color;
 	}
+}*/
+
+.vc-sketch {
+	background-color: var(--color-background-body) !important;
+	box-shadow: 0 0 0 1px var(--color-border-base) !important;
+}
+
+.vc-sketch-active-color {
+	box-shadow: inset 0 0 0 1px var(--color-border-base) !important;
+}
+
+.vc-sketch-field {
+	.vc-input__input {
+		background-color: var(--color-background-input) !important;
+		color: var(--color-text-input) !important;
+		box-shadow: inset 0 0 0 1px var(--color-border-input) !important;
+
+		&:focus {
+			box-shadow: inset 0 0 0 1px var(--color-border-input-focus),
+				0 0 6px -2px var(--color-border-input-focus) !important;
+		}
+	}
+
+	.vc-input__label {
+		color: var(--color-text-label) !important;
+	}
+}
+
+.vc-sketch-presets {
+	border-top-color: var(--color-border-base) !important;
+}
+
+.vc-sketch-presets-color {
+	box-shadow: inset 0 0 0 1px var(--color-border-base) !important;
 }
\ No newline at end of file
diff --git a/styles/widgets/profile-selector.scss b/styles/widgets/profile-selector.scss
index a8a72229..a80a1432 100644
--- a/styles/widgets/profile-selector.scss
+++ b/styles/widgets/profile-selector.scss
@@ -32,7 +32,7 @@
 	}
 
 	&.current {
-		border-left-color: var(--color-twitch-purple-8);
+		border-left-color: var(--color-border-button-active);
 	}
 
 	.description {
@@ -57,11 +57,7 @@
 
 	&:focus,
 	&:hover {
-		background: var(--color-opac-p-1);
-
-		.tw-root--theme-dark & {
-			background: var(--color-opac-p-4);
-		}
+		background-color: var(--color-background-alt-2);
 	}
 }
 
diff --git a/styles/widgets/tab-container.scss b/styles/widgets/tab-container.scss
index d1d47442..f0c1c615 100644
--- a/styles/widgets/tab-container.scss
+++ b/styles/widgets/tab-container.scss
@@ -5,8 +5,8 @@
 		outline: none;
 
 		.tab.active {
-			box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
-				0 0 6px -2px var(--color-twitch-purple-8);
+			box-shadow: inset 0 0 0 1px var(--color-border-tab-active),
+				0 0 6px -2px var(--color-border-tab-active);
 		}
 	}
 
@@ -18,11 +18,7 @@
 		border-right: 1px solid;
 		&:first-child { border-left-width: 1px; border-left-style: solid }
 
-		border-color: $border-light;
-
-		.tw-root--theme-dark & {
-			border-color: $border-dark;
-		}
+		border-color: var(--color-border-base);
 
 		&.active:after {
 			position: absolute;
@@ -30,7 +26,7 @@
 			left: 0;
 			right: 0;
 			content: '';
-			border-bottom: 4px solid var(--color-twitch-purple-8);
+			border-bottom: 4px solid var(--color-border-tab-active);
 		}
 	}