From 0d6a9e8a647be860b10506aecaafb4ff0f10150f Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 13 Aug 2023 23:57:34 -0400
Subject: Display extra notifications on notifications column

---
 .../extra_notifications/extra_notifications.vue    | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/extra_notifications/extra_notifications.vue

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
new file mode 100644
index 00000000..11eeb937
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="ExtraNotifications">
+    <router-link
+      v-if="unreadChatCount"
+      class="button-unstyled -link extra-notification"
+      to="chats"
+    >
+      {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+    </router-link>
+    <router-link
+      v-if="unreadAnnouncementCount"
+      class="button-unstyled -link extra-notification"
+      to="announcements"
+    >
+      {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+    </router-link>
+  </div>
+</template>
+
+<script src="./extra_notifications.js" />
+
+<style lang="scss">
+@import "../../variables";
+
+.ExtraNotifications {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .extra-notification {
+    width: 100%;
+    padding: 1em;
+  }
+
+  .extra-notification {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From c4549f0993dd2e176f6619694cfaa632d166f002 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 20:02:58 -0400
Subject: Display follow requests in extra notifications

---
 src/components/extra_notifications/extra_notifications.js  | 11 ++++++++++-
 src/components/extra_notifications/extra_notifications.vue | 11 +++++++++--
 src/i18n/en.json                                           |  3 ++-
 3 files changed, 21 insertions(+), 4 deletions(-)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 0bf904ba..1f3c6e6d 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -2,7 +2,16 @@ import { mapGetters } from 'vuex'
 
 const ExtraNotifications = {
   computed: {
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+    shouldShowChats () {
+      return this.unreadChatCount
+    },
+    shouldShowAnnouncements () {
+      return this.unreadAnnouncementCount
+    },
+    shouldShowFollowRequests () {
+      return this.followRequestCount
+    },
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount'])
   }
 }
 
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 11eeb937..f5cf1661 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,19 +1,26 @@
 <template>
   <div class="ExtraNotifications">
     <router-link
-      v-if="unreadChatCount"
+      v-if="shouldShowChats"
       class="button-unstyled -link extra-notification"
       to="chats"
     >
       {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
     </router-link>
     <router-link
-      v-if="unreadAnnouncementCount"
+      v-if="shouldShowAnnouncements"
       class="button-unstyled -link extra-notification"
       to="announcements"
     >
       {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
     </router-link>
+    <router-link
+      v-if="shouldShowFollowRequests"
+      class="button-unstyled -link extra-notification"
+      to="friend-requests"
+    >
+      {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+    </router-link>
   </div>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d58fd2fa..62e80ce3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -207,7 +207,8 @@
     "submitted_report": "submitted a report",
     "poll_ended": "poll has ended",
     "unread_announcements": "{num} unread announcement | {num} unread announcements",
-    "unread_chats": "{num} unread chat | {num} unread chats"
+    "unread_chats": "{num} unread chat | {num} unread chats",
+    "unread_follow_requests": "{num} new follow request | {num} new follow requests"
   },
   "polls": {
     "add_poll": "Add poll",
-- 
cgit v1.2.3-70-g09d2


From 7f51ea369eb4ae1252fcba9a82438fd00471e874 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 20:34:27 -0400
Subject: Make extra notification display customizable

---
 .../extra_notifications/extra_notifications.js     | 22 +++++++++---
 .../extra_notifications/extra_notifications.vue    | 27 ++++++++++++++
 .../settings_modal/tabs/notifications_tab.vue      | 41 ++++++++++++++++++++++
 src/i18n/en.json                                   | 10 +++++-
 src/modules/config.js                              |  5 +++
 src/modules/instance.js                            |  5 +++
 6 files changed, 105 insertions(+), 5 deletions(-)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 1f3c6e6d..cd687eaf 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -3,15 +3,29 @@ import { mapGetters } from 'vuex'
 const ExtraNotifications = {
   computed: {
     shouldShowChats () {
-      return this.unreadChatCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
     },
     shouldShowAnnouncements () {
-      return this.unreadAnnouncementCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
     },
     shouldShowFollowRequests () {
-      return this.followRequestCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
     },
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount'])
+    hasAnythingToShow () {
+      return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+    },
+    shouldShowCustomizationTip () {
+      return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+    },
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+  },
+  methods: {
+    openNotificationSettings () {
+      return this.$store.dispatch('openSettingsModalTab', 'notifications')
+    },
+    dismissConfigurationTip () {
+      return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+    }
   }
 }
 
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index f5cf1661..d5edf399 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -21,6 +21,29 @@
     >
       {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
     </router-link>
+    <i18n-t
+      v-if="shouldShowCustomizationTip"
+      tag="span"
+      class="extra-notification tip"
+      keypath="notifications.configuration_tip"
+    >
+      <template #theSettings>
+        <button
+          class="button-unstyled -link"
+          @click="openNotificationSettings"
+        >
+          {{ $t('notifications.configuration_tip_settings') }}
+        </button>
+      </template>
+      <template #dismiss>
+        <button
+          class="button-unstyled -link"
+          @click="dismissConfigurationTip"
+        >
+          {{ $t('notifications.configuration_tip_dismiss') }}
+        </button>
+      </template>
+    </i18n-t>
   </div>
 </template>
 
@@ -45,5 +68,9 @@
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
   }
+
+  .tip {
+    display: inline;
+  }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index fcb92135..4dfba444 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -51,6 +51,47 @@
             </li>
           </ul>
         </li>
+        <li>
+          <BooleanSetting path="showExtraNotifications">
+            {{ $t('settings.notification_show_extra') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="showChatsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_chats') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                path="showAnnouncementsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_announcements') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                path="showFollowRequestsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_follow_requests') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                path="showExtraNotificationsTip"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_tip') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 62e80ce3..90e33648 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -208,7 +208,10 @@
     "poll_ended": "poll has ended",
     "unread_announcements": "{num} unread announcement | {num} unread announcements",
     "unread_chats": "{num} unread chat | {num} unread chats",
-    "unread_follow_requests": "{num} new follow request | {num} new follow requests"
+    "unread_follow_requests": "{num} new follow request | {num} new follow requests",
+    "configuration_tip": "You can customize what to display here in {theSettings}. {dismiss}",
+    "configuration_tip_settings": "the settings",
+    "configuration_tip_dismiss": "Do not show again"
   },
   "polls": {
     "add_poll": "Add poll",
@@ -562,6 +565,11 @@
     "notification_visibility_moves": "User Migrates",
     "notification_visibility_emoji_reactions": "Reactions",
     "notification_visibility_polls": "Ends of polls you voted in",
+    "notification_show_extra": "Show extra notifications in the notifications column",
+    "notification_extra_chats": "Show unread chats",
+    "notification_extra_announcements": "Show unread announcements",
+    "notification_extra_follow_requests": "Show new follow requests",
+    "notification_extra_tip": "Show the customization tip for extra notifications",
     "no_rich_text_description": "Strip rich text formatting from all posts",
     "no_blocks": "No blocks",
     "no_mutes": "No mutes",
diff --git a/src/modules/config.js b/src/modules/config.js
index 56f8cba5..dda3d221 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -117,6 +117,11 @@ export const defaultState = {
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
+  showExtraNotifications: undefined, // instance default
+  showExtraNotificationsTip: undefined, // instance default
+  showChatsInExtraNotifications: undefined, // instance default
+  showAnnouncementsInExtraNotifications: undefined, // instance default
+  showFollowRequestsInExtraNotifications: undefined, // instance default
   maxDepthInThread: undefined, // instance default
   autocompleteSelect: undefined // instance default
 }
diff --git a/src/modules/instance.js b/src/modules/instance.js
index bb0292da..3972bd29 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -103,6 +103,11 @@ const defaultState = {
   conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',
   conversationTreeFadeAncestors: false,
+  showExtraNotifications: true,
+  showExtraNotificationsTip: true,
+  showChatsInExtraNotifications: true,
+  showAnnouncementsInExtraNotifications: true,
+  showFollowRequestsInExtraNotifications: true,
   maxDepthInThread: 6,
   autocompleteSelect: false,
 
-- 
cgit v1.2.3-70-g09d2


From 1c180ace0b12ff85cb6cfe34bfc022b0f82b1c85 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 20:39:14 -0400
Subject: Fix router links to use route objects

---
 src/components/extra_notifications/extra_notifications.js  | 3 +++
 src/components/extra_notifications/extra_notifications.vue | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index cd687eaf..01df12a3 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -17,6 +17,9 @@ const ExtraNotifications = {
     shouldShowCustomizationTip () {
       return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
     },
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
   },
   methods: {
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index d5edf399..7e09e5cc 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -3,21 +3,21 @@
     <router-link
       v-if="shouldShowChats"
       class="button-unstyled -link extra-notification"
-      to="chats"
+      :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
     >
       {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
     </router-link>
     <router-link
       v-if="shouldShowAnnouncements"
       class="button-unstyled -link extra-notification"
-      to="announcements"
+      :to="{ name: 'announcements' }"
     >
       {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
     </router-link>
     <router-link
       v-if="shouldShowFollowRequests"
       class="button-unstyled -link extra-notification"
-      to="friend-requests"
+      :to="{ name: 'friend-requests' }"
     >
       {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
     </router-link>
-- 
cgit v1.2.3-70-g09d2


From c6715b346b2b83cc255714f2e98b3169b4f5a572 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:19:41 -0400
Subject: Show unread marker for extra notifications

---
 .../extra_notifications/extra_notifications.vue    | 58 ++++++++++++----------
 1 file changed, 32 insertions(+), 26 deletions(-)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 7e09e5cc..4f32c04f 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,30 +1,39 @@
 <template>
   <div class="ExtraNotifications">
-    <router-link
-      v-if="shouldShowChats"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
-    >
-      {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
-    </router-link>
-    <router-link
-      v-if="shouldShowAnnouncements"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'announcements' }"
-    >
-      {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
-    </router-link>
-    <router-link
-      v-if="shouldShowFollowRequests"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'friend-requests' }"
-    >
-      {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
-    </router-link>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowChats"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+      >
+        {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+      </router-link>
+    </div>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowAnnouncements"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'announcements' }"
+      >
+        {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+      </router-link>
+    </div>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowFollowRequests"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'friend-requests' }"
+      >
+        {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+      </router-link>
+    </div>
     <i18n-t
       v-if="shouldShowCustomizationTip"
       tag="span"
-      class="extra-notification tip"
+      class="notification tip"
       keypath="notifications.configuration_tip"
     >
       <template #theSettings>
@@ -58,12 +67,9 @@
   flex-direction: column;
   align-items: stretch;
 
-  .extra-notification {
+  .notification {
     width: 100%;
     padding: 1em;
-  }
-
-  .extra-notification {
     border-bottom: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
-- 
cgit v1.2.3-70-g09d2


From a2c21e27428d44eac899c2497f599f9abfcb5cef Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:29:01 -0400
Subject: Make clickable area the whole row

---
 .../extra_notifications/extra_notifications.vue          | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 4f32c04f..308c79d1 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -4,7 +4,7 @@
       <div class="notification-overlay"></div>
       <router-link
         v-if="shouldShowChats"
-        class="button-unstyled -link extra-notification-link"
+        class="button-unstyled -link extra-notification"
         :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
       >
         {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
@@ -14,7 +14,7 @@
       <div class="notification-overlay"></div>
       <router-link
         v-if="shouldShowAnnouncements"
-        class="button-unstyled -link extra-notification-link"
+        class="button-unstyled -link extra-notification"
         :to="{ name: 'announcements' }"
       >
         {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
@@ -24,7 +24,7 @@
       <div class="notification-overlay"></div>
       <router-link
         v-if="shouldShowFollowRequests"
-        class="button-unstyled -link extra-notification-link"
+        class="button-unstyled -link extra-notification"
         :to="{ name: 'friend-requests' }"
       >
         {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
@@ -33,7 +33,7 @@
     <i18n-t
       v-if="shouldShowCustomizationTip"
       tag="span"
-      class="notification tip"
+      class="notification tip extra-notification"
       keypath="notifications.configuration_tip"
     >
       <template #theSettings>
@@ -69,10 +69,16 @@
 
   .notification {
     width: 100%;
-    padding: 1em;
     border-bottom: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .extra-notification {
+    padding: 1em;
   }
 
   .tip {
-- 
cgit v1.2.3-70-g09d2


From ebee2bda639988b3bfa29e0cfc9c6a76bfda5b07 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:35:56 -0400
Subject: Add icons to extra notifications

---
 .../extra_notifications/extra_notifications.js        | 13 +++++++++++++
 .../extra_notifications/extra_notifications.vue       | 19 +++++++++++++++++++
 2 files changed, 32 insertions(+)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 01df12a3..1bb0f837 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -1,5 +1,18 @@
 import { mapGetters } from 'vuex'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUserPlus,
+  faComments,
+  faBullhorn
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUserPlus,
+  faComments,
+  faBullhorn
+)
+
 const ExtraNotifications = {
   computed: {
     shouldShowChats () {
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 308c79d1..512f515c 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -7,6 +7,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="comments"
+        />
         {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
       </router-link>
     </div>
@@ -17,6 +22,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'announcements' }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="bullhorn"
+        />
         {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
       </router-link>
     </div>
@@ -27,6 +37,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'friend-requests' }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="user-plus"
+        />
         {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
       </router-link>
     </div>
@@ -81,6 +96,10 @@
     padding: 1em;
   }
 
+  .icon {
+    margin-right: 0.5em;
+  }
+
   .tip {
     display: inline;
   }
-- 
cgit v1.2.3-70-g09d2


From ff25838479ecbb6c28b741efde47b0ad9253c2da Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:48:32 -0400
Subject: Make lint happy

---
 src/components/extra_notifications/extra_notifications.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 512f515c..96489190 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ExtraNotifications">
     <div class="notification unseen">
-      <div class="notification-overlay"></div>
+      <div class="notification-overlay" />
       <router-link
         v-if="shouldShowChats"
         class="button-unstyled -link extra-notification"
@@ -16,7 +16,7 @@
       </router-link>
     </div>
     <div class="notification unseen">
-      <div class="notification-overlay"></div>
+      <div class="notification-overlay" />
       <router-link
         v-if="shouldShowAnnouncements"
         class="button-unstyled -link extra-notification"
@@ -31,7 +31,7 @@
       </router-link>
     </div>
     <div class="notification unseen">
-      <div class="notification-overlay"></div>
+      <div class="notification-overlay" />
       <router-link
         v-if="shouldShowFollowRequests"
         class="button-unstyled -link extra-notification"
-- 
cgit v1.2.3-70-g09d2


From e4ab012f21f42c3a3c5b3a0bdcf0455cf419d366 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:57:06 -0400
Subject: Move v-if condition to the right place

---
 .../extra_notifications/extra_notifications.vue        | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 96489190..6e0456a5 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="ExtraNotifications">
-    <div class="notification unseen">
+    <div
+      v-if="shouldShowChats"
+      class="notification unseen"
+    >
       <div class="notification-overlay" />
       <router-link
-        v-if="shouldShowChats"
         class="button-unstyled -link extra-notification"
         :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
       >
@@ -15,10 +17,12 @@
         {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
       </router-link>
     </div>
-    <div class="notification unseen">
+    <div
+      v-if="shouldShowAnnouncements"
+      class="notification unseen"
+    >
       <div class="notification-overlay" />
       <router-link
-        v-if="shouldShowAnnouncements"
         class="button-unstyled -link extra-notification"
         :to="{ name: 'announcements' }"
       >
@@ -30,10 +34,12 @@
         {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
       </router-link>
     </div>
-    <div class="notification unseen">
+    <div
+      v-if="shouldShowFollowRequests"
+      class="notification unseen"
+    >
       <div class="notification-overlay" />
       <router-link
-        v-if="shouldShowFollowRequests"
         class="button-unstyled -link extra-notification"
         :to="{ name: 'friend-requests' }"
       >
-- 
cgit v1.2.3-70-g09d2


From 075f2cb903fa45ea8e7a52098fd7091b0b14a9fd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:45:42 +0200
Subject: remove all "fallback variables"

---
 src/App.scss                                       |  1 -
 src/_variables.scss                                | 36 -----------------
 src/components/account_actions/account_actions.vue |  2 -
 src/components/announcement/announcement.vue       |  8 ++--
 .../announcements_page/announcements_page.vue      |  6 +--
 src/components/attachment/attachment.scss          | 18 +--------
 src/components/autosuggest/autosuggest.vue         |  6 +--
 src/components/avatar_list/avatar_list.vue         |  5 +--
 src/components/chat/chat.vue                       |  1 -
 src/components/chat_list/chat_list.vue             |  5 +--
 src/components/chat_list_item/chat_list_item.vue   |  1 -
 src/components/chat_new/chat_new.vue               |  1 -
 src/components/chat_title/chat_title.vue           |  5 +--
 src/components/checkbox/checkbox.vue               |  1 -
 src/components/color_input/color_input.scss        |  4 --
 src/components/conversation/conversation.vue       | 34 ++++++++--------
 src/components/desktop_nav/desktop_nav.scss        |  2 -
 src/components/dialog_modal/dialog_modal.vue       | 11 +-----
 src/components/emoji_input/emoji_input.vue         |  2 -
 src/components/emoji_picker/emoji_picker.scss      |  5 +--
 src/components/emoji_reactions/emoji_reactions.vue | 16 +++-----
 src/components/extra_buttons/extra_buttons.vue     |  4 +-
 .../extra_notifications/extra_notifications.vue    |  5 +--
 src/components/favorite_button/favorite_button.vue |  4 +-
 src/components/flash/flash.vue                     |  2 -
 src/components/font_control/font_control.vue       |  2 -
 src/components/gallery/gallery.vue                 |  2 -
 .../global_notice_list/global_notice_list.vue      |  2 -
 .../interface_language_switcher.vue                |  2 -
 src/components/link-preview/link-preview.vue       |  7 +---
 src/components/lists_edit/lists_edit.vue           |  2 -
 .../lists_user_search/lists_user_search.vue        |  2 -
 src/components/login_form/login_form.vue           |  2 -
 src/components/media_upload/media_upload.vue       |  2 -
 src/components/mention_link/mention_link.scss      | 10 ++---
 src/components/mobile_nav/mobile_nav.vue           |  8 +---
 .../mobile_post_status_button.vue                  |  5 +--
 .../moderation_tools/moderation_tools.vue          |  2 -
 .../mrf_transparency_panel.vue                     |  1 -
 src/components/nav_panel/nav_panel.vue             |  2 -
 src/components/navigation/navigation_pins.vue      |  2 -
 src/components/notifications/notifications.scss    |  2 -
 src/components/panel_loading/panel_loading.vue     |  8 +---
 src/components/password_reset/password_reset.vue   |  9 +----
 src/components/poll/poll.vue                       |  5 +--
 src/components/poll/poll_form.vue                  |  2 -
 .../post_status_form/post_status_form.vue          | 29 +++++---------
 src/components/react_button/react_button.vue       |  8 +---
 src/components/registration/registration.vue       |  6 +--
 src/components/reply_button/reply_button.vue       |  4 +-
 src/components/report/report.scss                  |  2 -
 src/components/retweet_button/retweet_button.vue   |  4 +-
 src/components/scope_selector/scope_selector.vue   |  2 -
 src/components/search_bar/search_bar.vue           |  5 +--
 src/components/select/select.vue                   |  3 --
 src/components/settings_modal/settings_modal.scss  |  2 -
 .../settings_modal_admin_content.scss              |  7 +---
 .../settings_modal_user_content.scss               |  7 +---
 .../settings_modal/tabs/profile_tab.scss           |  2 -
 .../settings_modal/tabs/security_tab/mfa.vue       |  5 +--
 .../tabs/security_tab/mfa_backup_codes.vue         |  2 -
 .../settings_modal/tabs/theme_tab/theme_tab.scss   | 10 ++---
 src/components/shout_panel/shout_panel.vue         |  5 +--
 src/components/side_drawer/side_drawer.vue         |  2 -
 src/components/status/status.scss                  | 45 +++++++---------------
 src/components/status_popover/status_popover.vue   |  2 -
 src/components/sticker_picker/sticker_picker.vue   |  4 +-
 src/components/still-image/still-image.vue         |  5 +--
 src/components/tab_switcher/tab_switcher.scss      | 15 ++------
 src/components/thread_tree/thread_tree.vue         |  8 ++--
 src/components/timeline/timeline.scss              |  2 -
 src/components/timeline_menu/timeline_menu.vue     |  2 -
 .../update_notification/update_notification.scss   |  4 +-
 src/components/user_avatar/user_avatar.vue         |  2 -
 src/components/user_card/user_card.scss            |  2 -
 src/components/user_note/user_note.vue             |  4 +-
 src/components/user_popover/user_popover.vue       |  2 -
 src/components/user_profile/user_profile.vue       |  2 -
 .../user_reporting_modal/user_reporting_modal.vue  |  8 +---
 src/hocs/with_load_more/with_load_more.scss        |  5 +--
 80 files changed, 99 insertions(+), 382 deletions(-)
 delete mode 100644 src/_variables.scss

(limited to 'src/components/extra_notifications/extra_notifications.vue')

diff --git a/src/App.scss b/src/App.scss
index 289add77..97d3f516 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,5 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./variables";
 @import "./panel";
 
 :root {
diff --git a/src/_variables.scss b/src/_variables.scss
deleted file mode 100644
index 751fc9a4..00000000
--- a/src/_variables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-$main-color: #f58d2c;
-$main-background: white;
-$darkened-background: whitesmoke;
-
-$fallback--bg: #121a24;
-$fallback--fg: #182230;
-$fallback--faint: rgb(185 185 186 / 50%);
-$fallback--text: #b9b9ba;
-$fallback--link: #d8a070;
-$fallback--icon: #666;
-$fallback--lightBg: rgb(21 30 42);
-$fallback--lightText: #b9b9ba;
-$fallback--border: #222;
-$fallback--cRed: #f00;
-$fallback--cBlue: #0095ff;
-$fallback--cGreen: #0fa00f;
-$fallback--cOrange: orange;
-
-$fallback--alertError: rgb(211 16 20 / 50%);
-$fallback--alertWarning: rgb(111 111 20 / 50%);
-
-$fallback--panelRadius: 10px;
-$fallback--checkboxRadius: 2px;
-$fallback--btnRadius: 4px;
-$fallback--inputRadius: 4px;
-$fallback--tooltipRadius: 5px;
-$fallback--avatarRadius: 4px;
-$fallback--avatarAltRadius: 10px;
-$fallback--attachmentRadius: 10px;
-$fallback--chatMessageRadius: 10px;
-
-$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
-  0 1px 0 0 rgb(255 255 255 / 20%) inset,
-  0 -1px 0 0 rgb(0 0 0 / 20%) inset;
-
-$status-margin: 0.75em;
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index cca7121c..9a7c6824 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -122,8 +122,6 @@
 <script src="./account_actions.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .AccountActions {
   .ellipsis-button {
     width: 2.5em;
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
index a1c5791e..92880831 100644
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@@ -99,16 +99,14 @@
 <script src="./announcement.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .announcement {
-  border-bottom: 1px solid var(--border, $fallback--border);
+  border-bottom: 1px solid var(--border);
   border-radius: 0;
-  padding: var(--status-margin, $status-margin);
+  padding: var(--status-margin);
 
   .heading,
   .body {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-bottom: var(--status-margin);
   }
 
   .footer {
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index 78d3ecee..25f830ff 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@@ -61,15 +61,13 @@
 <script src="./announcements_page.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .announcements-page {
   .post-form {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
 
     .heading,
     .body {
-      margin-bottom: var(--status-margin, $status-margin);
+      margin-bottom: var(--status-margin);
     }
 
     .post-button {
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 47660bf6..13afbe64 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Attachment {
   display: inline-flex;
   flex-direction: column;
@@ -131,23 +129,12 @@
 
     .attachment-button {
       padding: 0;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       text-align: center;
       width: 2em;
       height: 2em;
       margin-left: 0.5em;
       font-size: 1.25em;
-      // TODO: theming? hard to theme with unknown background image color
-      background: rgb(230 230 230 / 70%);
-
-      .svg-inline--fa {
-        color: rgb(0 0 0 / 60%);
-      }
-
-      &:hover .svg-inline--fa {
-        color: rgb(0 0 0 / 90%);
-      }
     }
   }
 
@@ -222,8 +209,7 @@
 
   &.-placeholder {
     display: inline-block;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
+    color: var(--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 7912db94..04f41801 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -25,8 +25,6 @@
 <script src="./autosuggest.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .autosuggest {
   position: relative;
 
@@ -41,11 +39,9 @@
     top: 100%;
     right: 0;
     max-height: 400px;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--bg);
     border-style: solid;
     border-width: 1px;
-    border-color: $fallback--border;
     border-color: var(--border);
     border-radius: var(--roundness);
     border-top-left-radius: 0;
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 2d00cb7b..9252ba32 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -17,8 +17,6 @@
 <script src="./avatar_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .avatars {
   display: flex;
   margin: 0;
@@ -36,8 +34,7 @@
     }
 
     .avatar-small {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
       height: 24px;
       width: 24px;
     }
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 65f89c73..6efe576b 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -95,6 +95,5 @@
 
 <script src="./chat.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "./chat";
 </style>
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index 27a475ed..b33ea67e 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -45,8 +45,6 @@
 <script src="./chat_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .chat-list {
   min-height: 25em;
   margin-bottom: 0;
@@ -57,8 +55,7 @@
   font-size: 1.2em;
   display: flex;
   justify-content: center;
-  color: $fallback--text;
-  color: var(--faint, $fallback--text);
+  color: var(--textFaint);
 }
 
 </style>
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index cbae2d11..0f9d5c5f 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -48,6 +48,5 @@
 <script src="./chat_list_item.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "./chat_list_item";
 </style>
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 5a872b66..673ba56b 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -48,6 +48,5 @@
 
 <script src="./chat_new.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "./chat_new";
 </style>
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 93db4fa7..68ee7a5a 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -26,8 +26,6 @@
 <script src="./chat_title.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .chat-title {
   display: flex;
   overflow: hidden;
@@ -54,8 +52,7 @@
     margin-right: 0.5em;
     height: 1.5em;
     width: 1.5em;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
 
     &.animated::before {
       display: none;
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index eac79199..6261bf3a 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -54,7 +54,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .checkbox {
diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index ca46199a..d446951c 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .color-input {
   display: inline-flex;
 
@@ -12,8 +10,6 @@
 
     input {
       background: none;
-      color: $fallback--lightText;
-      color: var(--inputText, $fallback--lightText);
       border: none;
       padding: 0;
       margin: 0;
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index d3ebf791..3d2fed54 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -213,14 +213,12 @@
 <script src="./conversation.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Conversation {
   z-index: 1;
 
   .conversation-dive-to-top-level-box {
-    padding: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    padding: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -230,20 +228,22 @@
   }
 
   .thread-ancestors {
-    margin-left: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    margin-left: var(--status-margin);
+    border-left: 2px solid var(--border);
   }
 
-  .thread-ancestor.-faded .StatusContent {
-    --link: var(--faintLink);
-    --text: var(--faint);
-
-    color: var(--text);
+  .thread-ancestor.-faded .RichContent {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    padding-left: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -256,11 +256,11 @@
   }
 
   .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
   }
 
   .conversation-status {
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
   }
 
@@ -274,7 +274,7 @@
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   /* expanded conversation in timeline */
@@ -288,7 +288,7 @@
 
   &.-expanded.status-fadein {
     background: var(--background);
-    padding: calc(var(--status-margin, $status-margin) / 2);
+    padding: calc(var(--status-margin) / 2);
   }
 }
 </style>
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 373cb2f2..61d2541c 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .DesktopNav {
   width: 100%;
   z-index: var(--ZI_navbar);
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 341cf105..b917c637 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -25,8 +25,6 @@
 <script src="./dialog_modal.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
@@ -54,8 +52,6 @@
   z-index: 2001;
   cursor: default;
   display: block;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   .dialog-modal-heading {
     .title {
@@ -66,18 +62,13 @@
   .dialog-modal-content {
     margin: 0;
     padding: 1rem;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
     white-space: normal;
   }
 
   .dialog-modal-footer {
     margin: 0;
     padding: 0.5em;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
     display: flex;
     justify-content: flex-end;
 
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 71969227..f313311e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -110,8 +110,6 @@
 <script src="./emoji_input.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .input.emoji-input {
   padding: 0;
   display: flex;
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 7d42fcfb..5602a16b 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 $emoji-picker-header-height: 36px;
 $emoji-picker-header-picture-width: 32px;
 $emoji-picker-header-picture-height: 32px;
@@ -72,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
   .additional-tabs {
     display: flex;
     border-left: 1px solid;
-    border-left-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
+    border-left-color: var(--border);
     padding-left: 7px;
     flex: 0 0 auto;
   }
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index c11b338e..a228af11 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -72,7 +72,6 @@
 
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .EmojiReactions {
@@ -102,11 +101,9 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        color: $fallback--text;
-        color: var(--btnText, $fallback--text);
 
         &.-picked-reaction {
-          border: 1px solid var(--accent, $fallback--link);
+          border: 1px solid var(--accent);
           margin-right: -1px;
         }
       }
@@ -149,18 +146,16 @@
     }
 
     .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
+      color: var(--text);
     }
 
     &.-picked-reaction {
-      border: 1px solid var(--accent, $fallback--link);
+      border: 1px solid var(--accent);
       margin-left: -1px; // offset the border, can't use inset shadows either
       margin-right: -1px;
 
       .svg-inline--fa {
-        color: $fallback--link;
-        color: var(--accent, $fallback--link);
+        color: var(--accent);
       }
     }
 
@@ -176,8 +171,7 @@
 
     @include focused-style {
       .svg-inline--fa {
-        color: $fallback--link;
-        color: var(--accent, $fallback--link);
+        color: var(--accent);
       }
 
       .focus-marker {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 48f45eb5..7b38d974 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -201,7 +201,6 @@
 <script src="./extra_buttons.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ExtraButtons {
@@ -211,8 +210,7 @@
     margin: -10px;
 
     &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
 
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 6e0456a5..600c99bb 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -80,8 +80,6 @@
 <script src="./extra_notifications.js" />
 
 <style lang="scss">
-@import "../../variables";
-
 .ExtraNotifications {
   width: 100%;
   display: flex;
@@ -91,8 +89,7 @@
   .notification {
     width: 100%;
     border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     display: flex;
     flex-direction: column;
     align-items: stretch;
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 8c883c13..2e0dd047 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -65,7 +65,6 @@
 <script src="./favorite_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .FavoriteButton {
@@ -88,8 +87,7 @@
 
     &:hover .svg-inline--fa,
     &.-favorited .svg-inline--fa {
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
+      color: var(--cOrange);
     }
 
     @include unfocused-style {
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 9f58d314..c9fc730b 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -42,8 +42,6 @@
 <script src="./flash.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Flash {
   display: inline-block;
   width: 100%;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index d5e63578..d2d1b388 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -53,8 +53,6 @@
 <script src="./font_control.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .font-control {
   input.custom-font {
     min-width: 10em;
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 96b554e3..40048285 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -87,8 +87,6 @@
 <script src='./gallery.js'></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Gallery {
   .gallery-rows {
     display: flex;
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 71e1bf30..140d0d54 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -25,8 +25,6 @@
 <script src="./global_notice_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .global-notice-list {
   position: fixed;
   top: calc(var(--navbar-height) + 0.5em);
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 364791a1..f7d5ef7e 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -104,8 +104,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../variables";
-
 .interface-language-switcher {
   .language-select {
     margin-right: 1em;
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 88b7fb92..695f0b1d 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -33,8 +33,6 @@
 <script src="./link-preview.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .link-preview-card {
   display: flex;
   flex-direction: row;
@@ -81,12 +79,9 @@
     margin: 2em 0;
   }
 
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
   border-style: solid;
   border-width: 1px;
   border-radius: var(--roundness);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
 }
 </style>
diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index 3c44579a..3c2066f6 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -165,8 +165,6 @@
 <script src="./lists_edit.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .ListEdit {
   --panel-body-padding: 0.5em;
 
diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
index 3302c83a..0f6ec125 100644
--- a/src/components/lists_user_search/lists_user_search.vue
+++ b/src/components/lists_user_search/lists_user_search.vue
@@ -28,8 +28,6 @@
 
 <script src="./lists_user_search.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .ListsUserSearch {
   .input-wrap {
     display: flex;
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 4d0fc03e..adc2dd5b 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -93,8 +93,6 @@
 <script src="./login_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .login-form {
   display: flex;
   flex-direction: column;
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2ea5567a..047e3483 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -36,8 +36,6 @@
 <script src="./media_upload.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .media-upload {
   .hidden-input-file {
     display: none;
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 1b242bdf..865b8746 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .MentionLink {
   position: relative;
   white-space: normal;
@@ -13,7 +11,7 @@
   }
 
   .mention-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
@@ -60,8 +58,8 @@
     }
 
     &.-has-selection {
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: var(--alertNeutral, $fallback--fg);
+      color: var(--selectionText);
+      background-color: var(--selectionBackground);
     }
 
     .at {
@@ -101,7 +99,7 @@
   }
 
   .serverName.-faded {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
   }
 }
 
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 00f86eed..6e134ef2 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -123,8 +123,6 @@
 <script src="./mobile_nav.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobileNav {
   z-index: var(--ZI_navbar);
 
@@ -195,11 +193,7 @@
     height: 50px;
     line-height: 50px;
     position: absolute;
-    color: var(--topBarText);
-    background-color: $fallback--fg;
-    background-color: var(--topBar, $fallback--fg);
-    box-shadow: 0 0 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--topBarShadow);
+    box-shadow: var(--shadow);
 
     .spacer {
       flex: 1;
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 41a6f0ba..ba77cb2d 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -13,8 +13,6 @@
 <script src="./mobile_post_status_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobilePostButton {
   &.button-default {
     width: 5em;
@@ -40,8 +38,7 @@
 
   svg {
     font-size: 1.5em;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 91d87b69..df3bb655 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -166,8 +166,6 @@
 <script src="./moderation_tools.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .moderation-tools-popover {
   height: 100%;
 
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index 97af4787..6dc86738 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -227,6 +227,5 @@
 <script src="./mrf_transparency_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "./mrf_transparency_panel";
 </style>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 6380deac..bf608936 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -103,8 +103,6 @@
 <script src="./nav_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavPanel {
   .panel {
     overflow: hidden;
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 44b27c20..36eb1ebe 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -28,8 +28,6 @@
 <script src="./navigation_pins.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavigationPins {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index d749890d..cfc1f3d6 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 17458e49..7a832122 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -23,22 +23,18 @@ export default {}
 </script>
 
 <style lang="scss">
-@import "src/variables";
-
 .panel-loading {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   font-size: 2em;
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
+  color: var(--text);
 
   .loading-text svg {
     line-height: 0;
     vertical-align: middle;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 </style>
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 7ac6db74..037b859e 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -30,7 +30,7 @@
           <div v-else>
             <p
               v-if="passwordResetRequested"
-              class="password-reset-required error"
+              class="alert password-reset-required error"
             >
               {{ $t('password_reset.password_reset_required') }}
             </p>
@@ -77,8 +77,6 @@
 
 <script src="./password_reset.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .password-reset-form {
   display: flex;
   flex-direction: column;
@@ -117,11 +115,6 @@
     margin: 0.3em 0 1em;
   }
 
-  .password-reset-required {
-    background-color: var(--alertError, $fallback--alertError);
-    padding: 10px 0;
-  }
-
   .notice-dismissible {
     padding-right: 2rem;
   }
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 1e97b3ca..5c743c08 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -103,8 +103,6 @@
 <script src="./poll.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll {
   .votes {
     display: flex;
@@ -121,8 +119,7 @@
     display: flex;
     flex-direction: row;
     position: relative;
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
+    color: var(--textLight);
   }
 
   .option-result-label {
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index d79bf9cf..4eb9d594 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -95,8 +95,6 @@
 <script src="./poll_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll-form {
   display: flex;
   flex-direction: column;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 1ece3c42..cf411ff1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -375,8 +375,6 @@
 <script src="./post_status_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .post-status-form {
   position: relative;
 
@@ -437,15 +435,12 @@
 
   .preview-error {
     font-style: italic;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
   }
 
   .preview-status {
-    border: 1px solid $fallback--border;
-    border: 1px solid var(--border, $fallback--border);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
     padding: 0.5em;
     margin: 0;
   }
@@ -456,8 +451,7 @@
 
   .text-format {
     .only-format {
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
+      color: var(--textFaint);
     }
   }
 
@@ -585,8 +579,7 @@
     margin: 0 0.5em;
 
     &.error {
-      color: $fallback--cRed;
-      color: var(--cRed, $fallback--cRed);
+      color: var(--cRed);
     }
   }
 
@@ -609,14 +602,10 @@
     align-items: center;
     justify-content: center;
     opacity: 0.6;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    border: 2px dashed $fallback--text;
-    border: 2px dashed var(--text, $fallback--text);
+    color: var(--text);
+    background-color: var(--bg);
+    border-radius: var(--roundness);
+    border: 2px dashed var(--text);
   }
 }
 </style>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 1b0674e6..e648e7e3 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -41,7 +41,6 @@
 <script src="./react_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ReactButton {
@@ -58,7 +57,7 @@
     height: 1px;
     width: 100%;
     margin: 0.5em;
-    background-color: var(--border, $fallback--border);
+    background-color: var(--border);
   }
 
   .reaction-picker {
@@ -99,11 +98,6 @@
     padding: 10px;
     margin: -10px;
 
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     @include unfocused-style {
       .focus-marker {
         visibility: hidden;
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 046fba1f..a2008d87 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -320,9 +320,6 @@
 
 <script src="./registration.js"></script>
 <style lang="scss">
-@import "../../variables";
-$validations-cRed: #f04124;
-
 .registration-form {
   display: flex;
   flex-direction: column;
@@ -369,8 +366,7 @@ $validations-cRed: #f04124;
   }
 
   .form-group--error .form--label {
-    color: $validations-cRed;
-    color: var(--cRed, $validations-cRed);
+    color: var(--cRed);
   }
 
   .form-error {
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 60a40a08..87c06e39 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -59,7 +59,6 @@
 <script src="./reply_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ReplyButton {
@@ -78,8 +77,7 @@
   .interactive {
     &:hover .svg-inline--fa,
     &.-active .svg-inline--fa {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
+      color: var(--cBlue);
     }
 
     @include unfocused-style {
diff --git a/src/components/report/report.scss b/src/components/report/report.scss
index 1fe11fd9..4249b850 100644
--- a/src/components/report/report.scss
+++ b/src/components/report/report.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Report {
   .report-content {
     margin: 0.5em 0 1em;
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index e1b6b153..adda9a42 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -84,7 +84,6 @@
 <script src="./retweet_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .RetweetButton {
@@ -107,8 +106,7 @@
 
     &:hover .svg-inline--fa,
     &.-repeated .svg-inline--fa {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
+      color: var(--cGreen);
     }
 
     @include unfocused-style {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 1cb6cdf2..b90ae020 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -64,8 +64,6 @@
 <script src="./scope_selector.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .ScopeSelector {
   .scope {
     display: inline-block;
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 1845dbe4..d06b4e77 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -60,8 +60,6 @@
 <script src="./search_bar.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .SearchBar {
   display: inline-flex;
   align-items: baseline;
@@ -86,8 +84,7 @@
   }
 
   .cancel-icon {
-    color: $fallback--text;
-    color: var(--btnTopBarText, $fallback--text);
+    color: var(--text);
   }
 }
 
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 30fd0bb0..32832126 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -22,8 +22,6 @@
 <script src="./select.js"> </script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* TODO fix order of styles */
 label.Select {
   padding: 0;
@@ -50,7 +48,6 @@ label.Select {
     right: 5px;
     height: 100%;
     width: 0.875em;
-    color: $fallback--text;
     font-family: var(--font);
     line-height: 2;
     z-index: 0;
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 6bc9459b..d01553db 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .settings-modal {
   overflow: hidden;
 
diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
index c984d703..bd619d7f 100644
--- a/src/components/settings_modal/settings_modal_admin_content.scss
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -45,8 +43,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index c984d703..bd619d7f 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -45,8 +43,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 52ae6c8b..7eda943b 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,5 +1,3 @@
-@import "../../../variables";
-
 .profile-tab {
   .bio {
     margin: 0;
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 8c65cfa8..9421b16e 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -139,8 +139,6 @@
 
 <script src="./mfa.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-settings {
   .mfa-heading,
   .method-item {
@@ -151,8 +149,7 @@
   }
 
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .setup-otp {
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
index 002f1bb2..32a8a759 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -21,8 +21,6 @@
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-backup-codes {
   .warning {
     color: var(--cOrange);
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 246f9a13..5e633120 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .theme-tab {
   padding-bottom: 2em;
 
@@ -162,8 +160,7 @@
   .preview-container {
     border-top: 1px dashed;
     border-bottom: 1px dashed;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     margin: 1em 0;
     padding: 1em;
     background-color: var(--wallpaper);
@@ -252,8 +249,7 @@
       .separator {
         margin: 1em;
         border-bottom: 1px solid;
-        border-color: $fallback--border;
-        border-color: var(--border, $fallback--border);
+        border-color: var(--border);
       }
 
       .btn {
@@ -294,7 +290,7 @@
     border: 0;
     box-shadow: none;
     background: transparent;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
     align-self: stretch;
   }
 
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 9278c141..62cc9568 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -75,8 +75,6 @@
 <script src="./shout_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .floating-shout {
   position: fixed;
   bottom: 0.5em;
@@ -97,8 +95,7 @@
     cursor: pointer;
 
     .icon {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+      color: var(--text);
       margin-right: 0.5em;
     }
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 2e99897b..608b5608 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -283,8 +283,6 @@
 <script src="./side_drawer.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .side-drawer-container {
   position: fixed;
   z-index: var(--ZI_navbar);
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 600c98f7..0281ab04 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Status {
   min-width: 0;
   white-space: normal;
@@ -12,24 +10,8 @@
     --_still-image-label-visibility: hidden;
   }
 
-  &.-focused {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedPost, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedPostText, $fallback--text);
-
-    --lightText: var(--selectedPostLightText, $fallback--light);
-    --faint: var(--selectedPostFaintText, $fallback--faint);
-    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
-    --postLink: var(--selectedPostPostLink, $fallback--faint);
-    --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
-    --icon: var(--selectedPostIcon, $fallback--icon);
-  }
-
   .gravestone {
-    padding: var(--status-margin, $status-margin);
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    padding: var(--status-margin);
     display: flex;
 
     .deleted-text {
@@ -40,7 +22,7 @@
 
   .status-container {
     display: flex;
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
 
     > * {
       min-width: 0;
@@ -52,7 +34,7 @@
   }
 
   .pin {
-    padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
+    padding: var(--status-margin) var(--status-margin) 0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -68,7 +50,7 @@
   }
 
   .left-side {
-    margin-right: var(--status-margin, $status-margin);
+    margin-right: var(--status-margin);
   }
 
   .right-side {
@@ -77,7 +59,7 @@
   }
 
   .usercard {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-bottom: var(--status-margin);
   }
 
   .status-username {
@@ -238,11 +220,10 @@
   }
 
   .repeat-info {
-    padding: 0.4em var(--status-margin, $status-margin);
+    padding: 0.4em var(--status-margin);
 
     .repeat-icon {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
+      color: var(--cGreen);
     }
   }
 
@@ -284,7 +265,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    margin-top: var(--status-margin, $status-margin);
+    margin-top: var(--status-margin);
 
     > * {
       max-width: 4em;
@@ -352,7 +333,7 @@
   }
 
   .favs-repeated-users {
-    margin-top: var(--status-margin, $status-margin);
+    margin-top: var(--status-margin);
   }
 
   .stats {
@@ -373,16 +354,16 @@
       height: 100%;
       width: 1px;
       left: 0;
-      background-color: var(--faint, $fallback--faint);
+      background-color: var(--textFaint);
     }
   }
 
   .stat-count {
-    margin-right: var(--status-margin, $status-margin);
+    margin-right: var(--status-margin);
     user-select: none;
 
     .stat-title {
-      color: var(--faint, $fallback--faint);
+      color: var(--textFaint);
       font-size: 0.85em;
       text-transform: uppercase;
       position: relative;
@@ -419,7 +400,7 @@
 
   .quoted-status {
     margin-top: 0.5em;
-    border: 1px solid var(--border, $fallback--border);
+    border: 1px solid var(--border);
     border-radius: var(--roundness);
 
     &.-unavailable-prompt {
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index b3bd423f..839f82e9 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -40,8 +40,6 @@
 <script src="./status_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* popover styles load on-demand, so we need to override */
 .status-popover.popover {
   font-size: 1rem;
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 904853c0..6678132e 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -32,8 +32,6 @@
 <script src="./sticker_picker.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .sticker-picker {
   width: 100%;
 
@@ -56,7 +54,7 @@
           height: 100%;
 
           &:hover {
-            filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
+            filter: drop-shadow(0 0 5px var(--accent));
           }
         }
       }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index fc46fbe6..57633827 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -28,8 +28,6 @@
 <script src="./still-image.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .still-image {
   position: relative;
   line-height: 0;
@@ -68,8 +66,7 @@
       color: #fff;
       display: block;
       padding: 2px 4px;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       z-index: 2;
       visibility: var(--_still-image-label-visibility, visible);
     }
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 489407cb..1efe1b04 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 /* stylelint-disable no-descending-specificity */
 .tab-switcher {
   display: flex;
@@ -78,8 +76,7 @@
         flex-basis: 0.5em;
         content: "";
         border-right: 1px solid;
-        border-right-color: $fallback--border;
-        border-right-color: var(--border, $fallback--border);
+        border-right-color: var(--border);
       }
 
       &::after {
@@ -104,16 +101,14 @@
           right: 0;
           bottom: 0;
           border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          border-right-color: var(--border);
         }
 
         &::before {
           flex: 0 0 6px;
           content: "";
           border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          border-right-color: var(--border);
         }
 
         &:last-child .tab {
@@ -194,8 +189,6 @@
     &.active {
       background: transparent;
       z-index: 5;
-      color: $fallback--text;
-      color: var(--tabActiveText, $fallback--text);
     }
 
     img {
@@ -237,7 +230,7 @@
     margin-top: 0.5em;
     margin-left: 0.2em;
     margin-bottom: 0.25em;
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
 
     @media all and (min-width: 800px) {
       display: none;
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 04727278..971b7001 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -119,15 +119,13 @@
 <script src="./thread_tree.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .thread-tree-replies {
-  margin-left: var(--status-margin, $status-margin);
-  border-left: 2px solid var(--border, $fallback--border);
+  margin-left: var(--status-margin);
+  border-left: 2px solid var(--border);
 }
 
 .thread-tree-replies-hidden {
-  padding: var(--status-margin, $status-margin);
+  padding: var(--status-margin);
 
   /* Make the button stretch along the whole row */
   display: flex;
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index fccf28f4..cf621bbb 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Timeline {
   .timeline-body {
     background: none;
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 91739216..d755b9dd 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -45,8 +45,6 @@
 <script src="./timeline_menu.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .timeline-menu-popover {
   min-width: 24rem;
   max-width: 100vw;
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 4337acc4..fb2edaa4 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .UpdateNotification {
   overflow: hidden;
 }
@@ -48,7 +46,7 @@
   .panel-body {
     border-width: 0 0 1px;
     border-style: solid;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
   }
 
   .panel-footer {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index a71e6992..83608c50 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -32,8 +32,6 @@
 
 <script src="./user_avatar.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .Avatar {
   --_avatarShadowBox: var(--shadow);
   --_avatarShadowFilter: var(--shadowFilter);
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index bf0ed5c2..90daaf7d 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .user-card {
   position: relative;
   z-index: 1;
diff --git a/src/components/user_note/user_note.vue b/src/components/user_note/user_note.vue
index 4290bf46..e175ced0 100644
--- a/src/components/user_note/user_note.vue
+++ b/src/components/user_note/user_note.vue
@@ -48,8 +48,6 @@
 <script src="./user_note.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-note {
   display: flex;
   flex-direction: column;
@@ -82,7 +80,7 @@
 
   .note-text.-blank {
     font-style: italic;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
   }
 }
 </style>
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 3b2bbc45..413b254c 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -24,8 +24,6 @@
 <script src="./user_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
 .user-popover.popover {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 2d8b33e7..514776ca 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -153,8 +153,6 @@
 <script src="./user_profile.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-profile {
   flex: 2;
   flex-basis: 500px;
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 4b37ff60..2bda509a 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -72,8 +72,6 @@
 <script src="./user_reporting_modal.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-reporting-panel {
   width: 90vw;
   max-width: 700px;
@@ -84,8 +82,7 @@
     display: flex;
     flex-direction: column-reverse;
     border-top: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     overflow: hidden;
   }
 
@@ -155,8 +152,7 @@
       width: 50%;
       max-width: 320px;
       border-right: 1px solid;
-      border-color: $fallback--border;
-      border-color: var(--border, $fallback--border);
+      border-color: var(--border);
       padding: 1.1em;
 
       > div {
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index bad852f4..524e4012 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -1,12 +1,9 @@
-@import "../../variables";
-
 .with-load-more {
   &-footer {
     padding: 10px;
     text-align: center;
     border-top: 1px solid;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
+    border-top-color: var(--border);
 
     .error {
       font-size: 1rem;
-- 
cgit v1.2.3-70-g09d2