From d2a74ea1a2965eb38609bb8029a41b45beab89ce Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 15:53:49 +0200
Subject: add .input class to all inputs

---
 src/components/checkbox/checkbox.vue | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

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

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index b8b77e7c..9739c08b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="checkbox-indicator"
+      class="input checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -62,9 +62,15 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
-  &-indicator {
+  & > &-indicator {
+    /* Reset .input stuff */
+    padding: 0;
+    margin: 0;
     position: relative;
+    line-height: inherit;
+    display: inline;
     padding-left: 1.2em;
+    box-shadow: none;
   }
 
   &-indicator::before {
@@ -78,10 +84,8 @@ export default {
     height: 1.1em;
     border-radius: $fallback--checkboxRadius;
     border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    box-shadow: 0 0 2px black inset;
-    box-shadow: var(--inputShadow);
-    background-color: $fallback--fg;
-    background-color: var(--input, $fallback--fg);
+    box-shadow: var(--shadow);
+    background-color: var(--background);
     vertical-align: top;
     text-align: center;
     line-height: 1.1em;
@@ -98,21 +102,18 @@ export default {
     }
 
     .label {
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
+      color: var(--text);
     }
   }
 
   input[type="checkbox"] {
     &:checked + .checkbox-indicator::before {
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
     }
 
     &:indeterminate + .checkbox-indicator::before {
       content: "–";
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From f609aaba0c9a7c4d3c3d579a2a0021ecd5fc4028 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 13:10:11 +0200
Subject: improve checkbox styles

---
 src/components/checkbox/checkbox.vue             |  5 ++---
 src/components/font_control/font_control.vue     |  2 +-
 src/components/input.style.js                    | 10 ++++++++++
 src/components/poll/poll.vue                     |  4 ++--
 src/components/range_input/range_input.vue       |  2 +-
 src/components/shadow_control/shadow_control.vue |  2 +-
 src/services/theme_data/theme2_to_theme3.js      | 10 +++++-----
 7 files changed, 22 insertions(+), 13 deletions(-)

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

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 9739c08b..eac79199 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -82,8 +82,7 @@ export default {
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    border-radius: var(--roundness);
     box-shadow: var(--shadow);
     background-color: var(--background);
     vertical-align: top;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index b90fba56..d5e63578 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt exlcude-disabled visible-for-screenreader-only"
+      class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 985d5412..b1c9f3db 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -12,6 +12,10 @@ const hoverGlow = {
 export default {
   name: 'Input',
   selector: '.input',
+  variant: {
+    checkbox: '.-checkbox',
+    radio: '.-radio'
+  },
   states: {
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
@@ -21,6 +25,12 @@ export default {
     'Text'
   ],
   defaultRules: [
+    {
+      variant: 'checkbox',
+      directives: {
+        roundness: 1
+      }
+    },
     {
       directives: {
         background: '--fg, -5',
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 087822e1..57ec879a 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -43,7 +43,7 @@
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="input poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -52,7 +52,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
-            class="input"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index c7648f72..2f8645c0 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt visible-for-screenreader-only"
+      class="input -checkbox opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 4fefaee1..10e6476f 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -129,7 +129,7 @@
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input input-inset visible-for-screenreader-only"
+          class="input -checkbox input-inset visible-for-screenreader-only"
           type="checkbox"
         >
         <label
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 48ab96ff..743bc386 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -30,7 +30,7 @@ export const shadowsKeys = new Set([
 export const radiiKeys = new Set([
   'btn',
   'input',
-  // 'checkbox',
+  'checkbox',
   'panel',
   'avatar',
   'avatarAlt',
@@ -122,10 +122,10 @@ export const convertTheme2To3 = (data) => {
         case 'input':
           rule.component = 'Input'
           break
-        // TODO: missing feature?
-        // case 'checkbox':
-        //   rule.component = 'Input'
-        //   break
+        case 'checkbox':
+          rule.component = 'Input'
+          rule.variant = 'checkbox'
+          break
         case 'panel':
           rule.component = 'Panel'
           break
-- 
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/checkbox/checkbox.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