4.20.35

* Changed: Remove the `Override Channel Points Rendering` experiment. Now enabled for all users.
* Fixed: Update the theme generation rules when using accent colors.
* Fixed: Swap Sidebars and Hide Side Navigation when experiencing the experiment that expands the side navigation bar on hover.
* API Changed: Allow `overlay` rich tokens to have a background color.

package.json

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

src/experiments.json

@@ -14,13 +14,5 @@
 			{"value": true, "weight": 50},
 			{"value": false, "weight": 50}
 		]
-	},
-	"all_points": {
-		"name": "Override Channel Points Rendering",
-		"description": "Override rendering for all channel points messages, even when no message is present.",
-		"groups": [
-			{"value": true, "weight": 100},
-			{"value": false, "weight": 0}
-		]
 	}
 }

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

@@ -1139,7 +1139,7 @@ export default class ChatHook extends Module {
 		});
 
 		this.subpump.on(':pubsub-message', event => {
-			if ( event.prefix !== 'community-points-channel-v1' || ! this.experiments.getAssignment('all_points') )
+			if ( event.prefix !== 'community-points-channel-v1' )
 				return;
 
 			const service = this.ChatService.first,

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

@@ -13,7 +13,7 @@ const STYLE_VALIDATOR = document.createElement('span');
 const CLASSES = {
 	'unfollow': '.follow-btn__follow-btn--following,.follow-btn--following',
 	'top-discover': '.navigation-link[data-a-target="discover-link"]',
-	'side-nav': '.side-nav',
+	'side-nav': '.side-nav,#sideNav',
 	'side-rec-channels': '.side-nav .recommended-channels,.side-nav .side-nav-section + .side-nav-section:not(.online-friends)',
 	//'side-rec-friends': '.side-nav .recommended-friends',
 	'side-friends': '.side-nav .online-friends',

src/sites/twitch-twilight/modules/css_tweaks/styles/hide-side-nav.scss

@@ -1,4 +1,4 @@
-.side-nav {
+.side-nav,#sideNav {
 	display: none !important;
 }
 

src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss

@@ -55,6 +55,19 @@
 	}
 }
 
+.side-nav--hover-exp:not(.side-nav--expanded) {
+	transform: translateX(0) !important;
+
+	.side-nav-content {
+		transform: none !important;
+	}
+
+	&:hover {
+		transform: translateX(-19rem) !important;
+	}
+
+}
+
 
 .right-column.right-column--theatre {
 	right: unset !important;

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

@@ -21,8 +21,10 @@ const COLORS = [
 
 
 const ACCENT_COLORS = {
-	dark: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2'/*,'text-tooltip':1*/},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}},
+	//dark: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2'/*,'text-tooltip':1*/},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}},
-	light: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}},
+	//light: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}},
+	dark: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,'background-tooltip':1,'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2','text-tooltip':1},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}},
+	light: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,'background-tooltip':1,'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}},
 	accent_dark: {'c':{'accent-hover':10,'accent':9,'accent-primary-1':1,'accent-primary-2':5,'accent-primary-3':6,'accent-primary-4':7,'accent-primary-5':8},'s':{}},
 	accent_light: {'c':{'accent-hover':10,'accent':9,'accent-primary-1':1,'accent-primary-2':5,'accent-primary-3':6,'accent-primary-4':7,'accent-primary-5':8},'s':{}}
 };

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

@@ -34,10 +34,6 @@
 		background-color: var(--color-background-alt-2) !important;
 	}
 
-	.emote-picker__emote-link:hover {
-		background-color: var(--color-background-button-active) !important;
-	}
-
 	.top-stats-tab,
 	.channel-header__user {
 		color: var(--color-text-base) !important;

src/utilities/rich_tokens.js

@@ -19,9 +19,9 @@ const VALID_WEIGHTS = ['regular', 'bold', 'semibold'],
 
 	VALID_PADDING = {
 		small: '05',
-		normal: 'normal',
+		normal: '1',
-		large: 'large',
+		large: '2',
-		huge: 'huge'
+		huge: '3'
 	};
 
 
@@ -867,13 +867,36 @@ TOKEN_TYPES.overlay = function(token, createElement, ctx) {
 			);
 	}
 
+	const classes = ['ffz--overlay'];
+	const style = {};
+
+	if ( token.background ) {
+		if ( VALID_COLORS.includes(token.background) )
+			classes.push(`tw-c-background-${token.background}`);
+		else
+			style.backgroundColor = token.background;
+	}
+
+	if ( token.color ) {
+		if ( VALID_COLORS.includes(token.color) )
+			classes.push(`tw-c-text-${token.color}`);
+		else
+			style.color = token.color;
+	}
+
 	if ( ctx.vue )
-		return createElement('div', {class: 'ffz--overlay'}, [
+		return createElement('div', {
+			class: classes,
+			style
+		}, [
 			createElement('div', {class: 'ffz--overlay__content'}, content),
 			...corners
 		]);
 
-	return createElement('div', {className: 'ffz--overlay'}, [
+	return createElement('div', {
+		className: classes.join(' '),
+		style
+	}, [
 		createElement('div', {className: 'ffz--overlay__content'}, content),
 		...corners
 	]);

styles/widgets.scss

@@ -143,8 +143,8 @@ textarea.tw-input {
 
 		&:focus {
 			box-shadow:
-				inset 0 0 0 1px var(--color-twitch-purple-8),
+				inset 0 0 0 1px var(--ffz-color-accent-8),
-				0 0 6px -2px var(--color-twitch-purple-8) !important;
+				0 0 6px -2px var(--ffz-color-accent-8) !important;
 		}
 
 		.handle {
@@ -193,8 +193,8 @@ textarea.tw-input {
 
 		&:focus {
 			box-shadow:
-				inset 0 0 0 1px var(--color-twitch-purple-8),
+				inset 0 0 0 1px var(--ffz-color-accent-8),
-				0 0 6px -2px var(--color-twitch-purple-8) !important;
+				0 0 6px -2px var(--ffz-color-accent-8) !important;
 		}
 
 		.handle {

styles/widgets/check-box.scss

@@ -1,8 +1,8 @@
 .tw-checkbox__input {
 	&:indeterminate + .tw-checkbox__label {
 		&:before {
-			background: var(--color-twitch-purple-8);
+			background: var(--ffz-color-accent-8);
-			border: 1px solid var(--color-twitch-purple-8);
+			border: 1px solid var(--ffz-color-accent-8);
 		}
 
 		&:after {

styles/widgets/menu-tree.scss

@@ -12,8 +12,8 @@
 			content: '';
 			pointer-events: none;
 
-			box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
+			box-shadow: inset 0 0 0 1px var(--ffz-color-accent-8),
-				0 0 6px -2px var(--color-twitch-purple-8);
+				0 0 6px -2px var(--ffz-color-accent-8);
 		}
 	}
 

styles/widgets/profile-selector.scss

@@ -51,8 +51,8 @@
 
 	&:focus {
 		box-shadow:
-			inset 0 0 0 1px var(--color-twitch-purple-8),
+			inset 0 0 0 1px var(--ffz-color-accent-8),
-			0 0 6px -2px var(--color-twitch-purple-8);
+			0 0 6px -2px var(--ffz-color-accent-8);
 	}
 
 	&:focus,