remove all "fallback variables"

src/App.scss

@@ -1,6 +1,5 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./variables";
 @import "./panel";
 
 :root {

src/_variables.scss

@@ -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;

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;

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 {

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 {

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(--roundness);
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       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(--link);
-    color: var(--postLink, $fallback--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;

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);
-    background-color: var(--bg, $fallback--bg);
     border-style: solid;
     border-width: 1px;
-    border-color: $fallback--border;
     border-color: var(--border);
     border-radius: var(--roundness);
     border-top-left-radius: 0;

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(--roundness);
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       height: 24px;
       width: 24px;
     }

src/components/chat/chat.vue

@@ -95,6 +95,5 @@
 
 <script src="./chat.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "./chat";
 </style>

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(--textFaint);
-  color: var(--faint, $fallback--text);
 }
 
 </style>

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>

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>

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(--roundness);
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 
     &.animated::before {
       display: none;

src/components/checkbox/checkbox.vue

@@ -54,7 +54,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .checkbox {

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;

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);
+    padding: var(--status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    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);
+    margin-left: var(--status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    border-left: 2px solid var(--border);
   }
 
-  .thread-ancestor.-faded .StatusContent {
+  .thread-ancestor.-faded .RichContent {
-    --link: var(--faintLink);
+    /* stylelint-disable declaration-no-important */
-    --text: var(--faint);
+    --text: var(--textFaint) !important;
-
+    --link: var(--linkFaint) !important;
-    color: var(--text);
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
+    padding-left: var(--status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    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>

src/components/desktop_nav/desktop_nav.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .DesktopNav {
   width: 100%;
   z-index: var(--ZI_navbar);

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;
+    border-top: 1px solid var(--border);
-    background-color: var(--bg, $fallback--bg);
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
     display: flex;
     justify-content: flex-end;
 

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;

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(--border);
-    border-left-color: var(--icon, $fallback--icon);
     padding-left: 7px;
     flex: 0 0 auto;
   }

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(--text);
-      color: var(--btnText, $fallback--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);
-        color: var(--accent, $fallback--link);
       }
     }
 
@@ -176,8 +171,7 @@
 
     @include focused-style {
       .svg-inline--fa {
-        color: $fallback--link;
+        color: var(--accent);
-        color: var(--accent, $fallback--link);
       }
 
       .focus-marker {

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);
-      color: var(--text, $fallback--text);
     }
   }
 

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);
-    border-color: var(--border, $fallback--border);
     display: flex;
     flex-direction: column;
     align-items: stretch;

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);
-      color: var(--cOrange, $fallback--cOrange);
     }
 
     @include unfocused-style {

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%;

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;

src/components/gallery/gallery.vue

@@ -87,8 +87,6 @@
 <script src='./gallery.js'></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Gallery {
   .gallery-rows {
     display: flex;

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);

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;

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);
-  border-color: var(--border, $fallback--border);
 }
 </style>

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;
 

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;

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;

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;

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);
+      color: var(--selectionText);
-      background-color: var(--alertNeutral, $fallback--fg);
+      background-color: var(--selectionBackground);
     }
 
     .at {
@@ -101,7 +99,7 @@
   }
 
   .serverName.-faded {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
   }
 }
 

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);
+    box-shadow: var(--shadow);
-    background-color: $fallback--fg;
-    background-color: var(--topBar, $fallback--fg);
-    box-shadow: 0 0 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--topBarShadow);
 
     .spacer {
       flex: 1;

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);
-    color: var(--text, $fallback--text);
   }
 }
 

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%;
 

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>

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;

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;

src/components/notifications/notifications.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications

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);
-  color: var(--text, $fallback--text);
 
   .loading-text svg {
     line-height: 0;
     vertical-align: middle;
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
   }
 }
 </style>

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;
   }

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(--textLight);
-    color: var(--lightText, $fallback--lightText);
   }
 
   .option-result-label {

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;

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(--textFaint);
-    color: var(--faint, $fallback--faint);
   }
 
   .preview-status {
-    border: 1px solid $fallback--border;
+    border: 1px solid var(--border);
-    border: 1px solid var(--border, $fallback--border);
+    border-radius: var(--roundness);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     padding: 0.5em;
     margin: 0;
   }
@@ -456,8 +451,7 @@
 
   .text-format {
     .only-format {
-      color: $fallback--faint;
+      color: var(--textFaint);
-      color: var(--faint, $fallback--faint);
     }
   }
 
@@ -585,8 +579,7 @@
     margin: 0 0.5em;
 
     &.error {
-      color: $fallback--cRed;
+      color: var(--cRed);
-      color: var(--cRed, $fallback--cRed);
     }
   }
 
@@ -609,14 +602,10 @@
     align-items: center;
     justify-content: center;
     opacity: 0.6;
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
+    background-color: var(--bg);
-    background-color: $fallback--bg;
+    border-radius: var(--roundness);
-    background-color: var(--bg, $fallback--bg);
+    border: 2px dashed var(--text);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    border: 2px dashed $fallback--text;
-    border: 2px dashed var(--text, $fallback--text);
   }
 }
 </style>

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;

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);
-    color: var(--cRed, $validations-cRed);
   }
 
   .form-error {

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);
-      color: var(--cBlue, $fallback--cBlue);
     }
 
     @include unfocused-style {

src/components/report/report.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Report {
   .report-content {
     margin: 0.5em 0 1em;

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);
-      color: var(--cGreen, $fallback--cGreen);
     }
 
     @include unfocused-style {

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;

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(--text);
-    color: var(--btnTopBarText, $fallback--text);
   }
 }
 

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;

src/components/settings_modal/settings_modal.scss

@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .settings-modal {
   overflow: hidden;
 

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: var(--cRed);
-      color: $fallback--cRed;
     }
   }
 }

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: var(--cRed);
-      color: $fallback--cRed;
     }
   }
 }

src/components/settings_modal/tabs/profile_tab.scss

@@ -1,5 +1,3 @@
-@import "../../../variables";
-
 .profile-tab {
   .bio {
     margin: 0;

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);
-    color: var(--cOrange, $fallback--cOrange);
   }
 
   .setup-otp {

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);

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);
-    border-color: var(--border, $fallback--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);
-        border-color: var(--border, $fallback--border);
       }
 
       .btn {
@@ -294,7 +290,7 @@
     border: 0;
     box-shadow: none;
     background: transparent;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
     align-self: stretch;
   }
 

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(--text);
-      color: var(--panelText, $fallback--text);
       margin-right: 0.5em;
     }
 

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);

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);
+    padding: var(--status-margin);
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
     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);
-      color: var(--cGreen, $fallback--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 {

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;

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));
           }
         }
       }

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(--roundness);
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       z-index: 2;
       visibility: var(--_still-image-label-visibility, visible);
     }

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);
-        border-right-color: var(--border, $fallback--border);
       }
 
       &::after {
@@ -104,16 +101,14 @@
           right: 0;
           bottom: 0;
           border-right: 1px solid;
-          border-right-color: $fallback--border;
+          border-right-color: var(--border);
-          border-right-color: var(--border, $fallback--border);
         }
 
         &::before {
           flex: 0 0 6px;
           content: "";
           border-right: 1px solid;
-          border-right-color: $fallback--border;
+          border-right-color: var(--border);
-          border-right-color: var(--border, $fallback--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;

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);
+  margin-left: var(--status-margin);
-  border-left: 2px solid var(--border, $fallback--border);
+  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;

src/components/timeline/timeline.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Timeline {
   .timeline-body {
     background: none;

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;

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 {

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);

src/components/user_card/user_card.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .user-card {
   position: relative;
   z-index: 1;

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>

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 {

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;

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);
-    border-color: var(--border, $fallback--border);
     overflow: hidden;
   }
 
@@ -155,8 +152,7 @@
       width: 50%;
       max-width: 320px;
       border-right: 1px solid;
-      border-color: $fallback--border;
+      border-color: var(--border);
-      border-color: var(--border, $fallback--border);
       padding: 1.1em;
 
       > div {

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);
-    border-top-color: var(--border, $fallback--border);
 
     .error {
       font-size: 1rem;