From fe41eecd77cb38931d3657c6ffc27d4c4dfe7908 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 25 Sep 2018 18:37:14 -0400
Subject: [PATCH] 4.0.0-rc12.22

* Fixed: Rename all references to `tw-c-background` to `tw-c-background-base` and `tw-c-text` to `tw-c-text-base` to fix rendering issues with FrankerFaceZ's custom UI due to Twitch CSS changes.
---
 src/main.js                                               | 2 +-
 src/modules/chat/actions/index.jsx                        | 4 ++--
 src/modules/chat/components/chat-rich.vue                 | 2 +-
 src/modules/main_menu/components/action-editor.vue        | 2 +-
 src/modules/main_menu/components/experiments.vue          | 4 ++--
 src/modules/main_menu/components/filter-editor.vue        | 2 +-
 src/modules/main_menu/components/main-menu.vue            | 4 ++--
 src/modules/main_menu/components/profile-manager.vue      | 2 +-
 src/modules/metadata.jsx                                  | 8 ++++----
 src/modules/translation_ui/components/translation-ui.vue  | 4 ++--
 src/modules/viewer_cards/card.vue                         | 4 ++--
 src/sites/twitch-twilight/modules/chat/emote_menu.jsx     | 6 +++---
 src/sites/twitch-twilight/modules/chat/index.js           | 2 +-
 src/sites/twitch-twilight/modules/chat/line.js            | 4 ++--
 src/sites/twitch-twilight/modules/chat/rich_content.jsx   | 2 +-
 src/sites/twitch-twilight/modules/chat/scroller.js        | 2 +-
 src/sites/twitch-twilight/modules/directory/following.jsx | 2 +-
 src/sites/twitch-twilight/modules/directory/index.jsx     | 2 +-
 src/sites/twitch-twilight/modules/featured-follow.vue     | 2 +-
 src/sites/twitch-twilight/modules/host-options.vue        | 2 +-
 src/sites/twitch-twilight/modules/video_chat/index.jsx    | 6 +++---
 src/sites/twitch-twilight/styles/theme.scss               | 4 ++--
 22 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/main.js b/src/main.js
index 753e68ed..41f3dafe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc12.21',
+	major: 4, minor: 0, revision: 0, extra: '-rc12.22',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>
diff --git a/src/modules/chat/actions/index.jsx b/src/modules/chat/actions/index.jsx
index 29e12996..e64add89 100644
--- a/src/modules/chat/actions/index.jsx
+++ b/src/modules/chat/actions/index.jsx
@@ -171,9 +171,9 @@ export default class Actions extends Module {
 				manual: true,
 				html: true,
 
-				tooltipClass: 'ffz-action-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
+				tooltipClass: 'ffz-action-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
 				arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
-				arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background  tw-absolute',
+				arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base  tw-absolute',
 				innerClass: 'tw-pd-1',
 
 				popper: {
diff --git a/src/modules/chat/components/chat-rich.vue b/src/modules/chat/components/chat-rich.vue
index ef54e077..1e2648be 100644
--- a/src/modules/chat/components/chat-rich.vue
+++ b/src/modules/chat/components/chat-rich.vue
@@ -1,7 +1,7 @@
 <template>
 	<a :href="url" class="chat-card__link" target="_blank" rel="noreferrer noopener">
 		<div class="ffz--chat-card tw-elevation-1 tw-mg-t">
-			<div class="tw-c-background tw-flex tw-flex-nowrap tw-pd-05">
+			<div class="tw-c-background-base tw-flex tw-flex-nowrap tw-pd-05">
 				<div class="chat-card__preview-img tw-c-background-alt-2 tw-align-items-center tw-flex tw-flex-shrink-0 tw-justify-content-center">
 					<div class="tw-card-img tw-flex-shrink-0 tw-flex tw-justify-content-center">
 						<img
diff --git a/src/modules/main_menu/components/action-editor.vue b/src/modules/main_menu/components/action-editor.vue
index ebd7cede..f5ce8546 100644
--- a/src/modules/main_menu/components/action-editor.vue
+++ b/src/modules/main_menu/components/action-editor.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-	<div class="ffz--action tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
+	<div class="ffz--action tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
 		<div class="tw-flex tw-flex-shrink-0 tw-align-items-start handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
 			<span class="ffz-i-ellipsis-vert" />
 		</div>
diff --git a/src/modules/main_menu/components/experiments.vue b/src/modules/main_menu/components/experiments.vue
index f7e4e807..1e9c0230 100644
--- a/src/modules/main_menu/components/experiments.vue
+++ b/src/modules/main_menu/components/experiments.vue
@@ -28,7 +28,7 @@
 				:key="key"
 				:data-key="key"
 			>
-				<div class="tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
+				<div class="tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
 
 					<div class="tw-flex-grow-1">
 						<h4>{{ exp.name }}</h4>
@@ -83,7 +83,7 @@
 			>
 				<div
 					:class="{live: exp.in_use}"
-					class="ffz--experiment-row tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex"
+					class="ffz--experiment-row tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex"
 				>
 					<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-r tw-mg-r-1 tw-pd-r-1">
 						<div v-if="exp.in_use" class="ffz--profile__icon ffz-i-ok tw-tooltip-wrapper">
diff --git a/src/modules/main_menu/components/filter-editor.vue b/src/modules/main_menu/components/filter-editor.vue
index 2b8c86e5..f25e227c 100644
--- a/src/modules/main_menu/components/filter-editor.vue
+++ b/src/modules/main_menu/components/filter-editor.vue
@@ -3,7 +3,7 @@
 		<div ref="list" class="ffz--rule-list">
 			<section v-for="(rule, idx) in rules" :key="`rule-${idx}`">
 				<div
-					class="ffz--rule tw-elevation-1 tw-c-background tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
+					class="ffz--rule tw-elevation-1 tw-c-background-base tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
 					tabindex="0"
 				>
 					<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-handle tw-pd-x-05 tw-pd-y-1">
diff --git a/src/modules/main_menu/components/main-menu.vue b/src/modules/main_menu/components/main-menu.vue
index 8666e991..271d29f7 100644
--- a/src/modules/main_menu/components/main-menu.vue
+++ b/src/modules/main_menu/components/main-menu.vue
@@ -1,9 +1,9 @@
 <template lang="html">
 	<div
 		:class="{ maximized: maximized || exclusive, exclusive, faded }"
-		class="ffz-dialog ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column"
+		class="ffz-dialog ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
 	>
-		<header ref="header" class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="maybeResize($event)">
+		<header ref="header" class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="maybeResize($event)">
 			<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
 			<div class="tw-flex-grow-1 tw-pd-x-2">
 				<div class="tw-search-input">
diff --git a/src/modules/main_menu/components/profile-manager.vue b/src/modules/main_menu/components/profile-manager.vue
index 36aaaa16..b068eb5f 100644
--- a/src/modules/main_menu/components/profile-manager.vue
+++ b/src/modules/main_menu/components/profile-manager.vue
@@ -31,7 +31,7 @@
 			>
 				<div
 					:class="{live: p.live}"
-					class="ffz--profile tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap"
+					class="ffz--profile tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap"
 					tabindex="0"
 				>
 					<div class="tw-flex tw-flex-shrink-0 tw-align-items-center handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
diff --git a/src/modules/metadata.jsx b/src/modules/metadata.jsx
index c3cfcb77..a6ded93e 100644
--- a/src/modules/metadata.jsx
+++ b/src/modules/metadata.jsx
@@ -433,10 +433,10 @@ export default class Metadata extends Module {
 									manual: true,
 									html: true,
 
-									tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background tw-c-text',
+									tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base tw-c-text-base',
 									// Hide the arrow for now, until we re-do our CSS to make it render correctly.
 									arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
-									arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background tw-absolute',
+									arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
 									innerClass: 'tw-pd-1',
 
 									popper: {
@@ -743,10 +743,10 @@ export default class Metadata extends Module {
 									manual: true,
 									html: true,
 
-									tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
+									tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
 									// Hide the arrow for now, until we re-do our CSS to make it render correctly.
 									arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
-									arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background  tw-absolute',
+									arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base  tw-absolute',
 									innerClass: 'tw-pd-1',
 
 									popper: {
diff --git a/src/modules/translation_ui/components/translation-ui.vue b/src/modules/translation_ui/components/translation-ui.vue
index 5e164131..ad960538 100644
--- a/src/modules/translation_ui/components/translation-ui.vue
+++ b/src/modules/translation_ui/components/translation-ui.vue
@@ -1,9 +1,9 @@
 <template lang="html">
 	<div
 		:class="{ maximized: maximized || exclusive, exclusive, faded }"
-		class="ffz-dialog tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column"
+		class="ffz-dialog tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
 	>
-		<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
+		<header class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
 			<h3 class="ffz-i-zreknarf ffz-i-pd-1">{{ t('i18n.ui.title', 'Translation Editor') }}</h3>
 			<div class="tw-flex-grow-1 tw-pd-x-2">
 				<div class="tw-search-input">
diff --git a/src/modules/viewer_cards/card.vue b/src/modules/viewer_cards/card.vue
index 9a7f729f..c92d83c5 100644
--- a/src/modules/viewer_cards/card.vue
+++ b/src/modules/viewer_cards/card.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		:style="{zIndex: z}"
-		class="ffz-mod-card tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column"
+		class="ffz-mod-card tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
 		tabindex="0"
 		@focusin="onFocus"
 		@keyup.esc="close"
@@ -80,7 +80,7 @@
 		</header>
 		<error-tab v-if="errored" />
 		<template v-else-if="loaded">
-			<section class="tw-c-background">
+			<section class="tw-c-background-base">
 				<div class="mod-cards__tabs-container tw-border-t">
 					<div
 						v-for="(data, key) in tabs"
diff --git a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
index bed63076..898bb1ab 100644
--- a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
@@ -397,7 +397,7 @@ export default class EmoteMenu extends Module {
 					tones = Object.entries(emoji.variants).map(([tone, emoji]) => this.renderTone(emoji, tone));
 
 				return (<div class="tw-absolute tw-balloon tw-balloon--up tw-balloon--right tw-balloon tw-block">
-					<div class="tw-border-b tw-border-l tw-border-r tw-border-t tw-border-radius-medium tw-c-background tw-elevation-1">
+					<div class="tw-border-b tw-border-l tw-border-r tw-border-t tw-border-radius-medium tw-c-background-base tw-elevation-1">
 						{this.renderTone(emoji, null)}
 						{tones}
 					</div>
@@ -1578,7 +1578,7 @@ export default class EmoteMenu extends Module {
 					class={`tw-balloon tw-balloon--md tw-balloon--up tw-balloon--right tw-block tw-absolute ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
 					data-a-target="emote-picker"
 				>
-					<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background">
+					<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base">
 						<div
 							class="emote-picker__tab-content scrollable-area"
 							data-test-selector="scrollable-area-wrapper"
@@ -1627,7 +1627,7 @@ export default class EmoteMenu extends Module {
 									/>}
 								</div>
 							</div>)}
-							<div class="emote-picker__tabs-container tw-flex tw-border-t tw-c-background">
+							<div class="emote-picker__tabs-container tw-flex tw-border-t tw-c-background-base">
 								<div
 									class={`ffz-tooltip emote-picker__tab tw-pd-x-1${tab === 'fav' ? ' emote-picker__tab--active' : ''}`}
 									id="emote-picker__fav"
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index 40a96c4f..58fb0e50 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -477,7 +477,7 @@ export default class ChatHook extends Module {
 						return null;
 
 					return createElement('div', {
-						className: 'tw-border-l tw-c-background-alt-2 tw-c-text tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
+						className: 'tw-border-l tw-c-background-alt-2 tw-c-text-base tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
 					}, 'There was an error displaying chat.');
 
 				} else
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index 14b70845..41a9fa01 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -349,7 +349,7 @@ export default class ChatLine extends Module {
 									className: 'chatter-name',
 									onClick: this.ffz_user_click_handler //e => this.props.onUsernameClick(user.login, null, msg.id, e.currentTarget.getBoundingClientRect().bottom)
 								}, e('span', {
-									className: 'tw-c-text tw-strong'
+									className: 'tw-c-text-base tw-strong'
 								}, user.userDisplayName)),
 								plan: plan.prime ?
 									t.i18n.t('chat.sub.twitch-prime', 'Twitch Prime') :
@@ -382,7 +382,7 @@ export default class ChatLine extends Module {
 									className: 'chatter-name',
 									onClick: this.ffz_user_click_handler
 								}, e('span', {
-									className: 'tw-c-text tw-strong'
+									className: 'tw-c-text-base tw-strong'
 								}, user.userDisplayName))
 							})
 						]);
diff --git a/src/sites/twitch-twilight/modules/chat/rich_content.jsx b/src/sites/twitch-twilight/modules/chat/rich_content.jsx
index 365ebd6d..26addb80 100644
--- a/src/sites/twitch-twilight/modules/chat/rich_content.jsx
+++ b/src/sites/twitch-twilight/modules/chat/rich_content.jsx
@@ -142,7 +142,7 @@ export default class RichContent extends Module {
 
 			renderCard() {
 				return (<div class="ffz--chat-card tw-elevation-1 tw-mg-t">
-					<div class="tw-c-background tw-flex tw-flex-nowrap tw-pd-05">
+					<div class="tw-c-background-base tw-flex tw-flex-nowrap tw-pd-05">
 						{this.renderCardImage()}
 						{this.renderCardDescription()}
 					</div>
diff --git a/src/sites/twitch-twilight/modules/chat/scroller.js b/src/sites/twitch-twilight/modules/chat/scroller.js
index d3816479..6c9e89bb 100644
--- a/src/sites/twitch-twilight/modules/chat/scroller.js
+++ b/src/sites/twitch-twilight/modules/chat/scroller.js
@@ -136,7 +136,7 @@ export default class Scroller extends Module {
 						return null;
 
 					return createElement('div', {
-						className: 'tw-border-l tw-c-background-alt-2 tw-c-text tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
+						className: 'tw-border-l tw-c-background-alt-2 tw-c-text-base tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
 					}, [
 						createElement('div', {className: 'tw-mg-b-1'}, 'There was an error displaying chat.'),
 						! auto && createElement('button', {
diff --git a/src/sites/twitch-twilight/modules/directory/following.jsx b/src/sites/twitch-twilight/modules/directory/following.jsx
index 9b1f4228..9216b8a6 100644
--- a/src/sites/twitch-twilight/modules/directory/following.jsx
+++ b/src/sites/twitch-twilight/modules/directory/following.jsx
@@ -266,7 +266,7 @@ export default class Following extends SiteModule {
 		}
 
 		this.hostMenu = (<div class="ffz-host-menu tw-balloon tw-block">
-			<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background">
+			<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base">
 				<div class="scrollable-area" data-simplebar>
 					<div class="simplebar-scroll-content">
 						<div class="simplebar-content">
diff --git a/src/sites/twitch-twilight/modules/directory/index.jsx b/src/sites/twitch-twilight/modules/directory/index.jsx
index aad6cb19..6796c095 100644
--- a/src/sites/twitch-twilight/modules/directory/index.jsx
+++ b/src/sites/twitch-twilight/modules/directory/index.jsx
@@ -409,7 +409,7 @@ export default class Directory extends SiteModule {
 			href={link}
 			onClick={e => this.routeClick(e, link)} // eslint-disable-line react/jsx-no-bind
 		>
-			<div class={`tw-absolute tw-right-0 tw-border-l tw-c-background ${is_video ? 'tw-top-0 tw-border-b' : 'tw-bottom-0 tw-border-t'}`}>
+			<div class={`tw-absolute tw-right-0 tw-border-l tw-c-background-base ${is_video ? 'tw-top-0 tw-border-b' : 'tw-bottom-0 tw-border-t'}`}>
 				<figure class="tw-aspect tw-aspect--align-top">
 					<img src={src} title={props.channelDisplayName} />
 				</figure>
diff --git a/src/sites/twitch-twilight/modules/featured-follow.vue b/src/sites/twitch-twilight/modules/featured-follow.vue
index 174fff3c..38da3eb0 100644
--- a/src/sites/twitch-twilight/modules/featured-follow.vue
+++ b/src/sites/twitch-twilight/modules/featured-follow.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-	<div class="ffz-featured-follow tw-c-background">
+	<div class="ffz-featured-follow tw-c-background-base">
 		<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
 			<h4>{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4>
 
diff --git a/src/sites/twitch-twilight/modules/host-options.vue b/src/sites/twitch-twilight/modules/host-options.vue
index 655f5229..cbdca77d 100644
--- a/src/sites/twitch-twilight/modules/host-options.vue
+++ b/src/sites/twitch-twilight/modules/host-options.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-	<div class="ffz-auto-host-options tw-c-background">
+	<div class="ffz-auto-host-options tw-c-background-base">
 		<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
 			<h4>{{ t('metadata.host.title', 'Auto Host Management') }}</h4>
 		</header>
diff --git a/src/sites/twitch-twilight/modules/video_chat/index.jsx b/src/sites/twitch-twilight/modules/video_chat/index.jsx
index c58350e9..6caa06ff 100644
--- a/src/sites/twitch-twilight/modules/video_chat/index.jsx
+++ b/src/sites/twitch-twilight/modules/video_chat/index.jsx
@@ -112,9 +112,9 @@ export default class VideoChatHook extends Module {
 						</button>
 						<div class={`tw-absolute tw-balloon tw-balloon--down tw-balloon--right tw-balloon--sm ${is_open ? 'tw-block' : 'tw-hide'}`}>
 							<div class="tw-absolute tw-balloon__tail tw-overflow-hidden">
-								<div class="tw-absolute tw-balloon__tail-symbol tw-border-b tw-border-l tw-border-r tw-border-t tw-c-background" />
+								<div class="tw-absolute tw-balloon__tail-symbol tw-border-b tw-border-l tw-border-r tw-border-t tw-c-background-base" />
 							</div>
-							<div class="tw-border-b tw-border-l tw-border-r tw-border-radius-medium tw-border-t tw-c-background tw-elevation-1 tw-pd-y-1">
+							<div class="tw-border-b tw-border-l tw-border-r tw-border-radius-medium tw-border-t tw-c-background-base tw-elevation-1 tw-pd-y-1">
 								<button class="tw-interactable tw-interactable--inverted tw-full-width tw-pd-y-05 tw-pd-x-1">{
 									t.i18n.t('video-chat.copy-link', 'Copy Link')
 								}</button>
@@ -153,7 +153,7 @@ export default class VideoChatHook extends Module {
 				const tokens = msg.ffz_tokens = msg.ffz_tokens || t.chat.tokenizeMessage(msg, u),
 					rich_content = FFZRichContent && t.chat.pluckRichContent(tokens, msg);
 
-				return (<div class="tw-align-items-start tw-flex tw-flex-nowrap tw-c-text">
+				return (<div class="tw-align-items-start tw-flex tw-flex-nowrap tw-c-text-base">
 					<div class="tw-flex-grow-1" data-room-id={msg.roomID} data-room={msg.roomLogin} data-user-id={user.id} data-user={user.login}>
 						<span class="chat-line__message--badges">{
 							t.chat.badges.render(msg, createElement)
diff --git a/src/sites/twitch-twilight/styles/theme.scss b/src/sites/twitch-twilight/styles/theme.scss
index 30b7743e..e67469a8 100644
--- a/src/sites/twitch-twilight/styles/theme.scss
+++ b/src/sites/twitch-twilight/styles/theme.scss
@@ -1382,7 +1382,7 @@
 	.tw-c-background-body {
 		background-color: var(--ffz-color-21) !important;
 	}
-	.tw-c-background {
+	.tw-c-background-base {
 		background-color: var(--ffz-color-0) !important;
 	}
 	.tw-c-background-alt {
@@ -1451,7 +1451,7 @@
 	.tw-c-background-scrollbar {
 		background-color: var(--ffz-color-0) !important;
 	}
-	.tw-c-text {
+	.tw-c-text-base {
 		color: var(--ffz-color-1) !important;
 	}
 	.tw-c-text-alt {