more fixes

src/App.scss

@@ -379,6 +379,9 @@ nav {
   font-family: inherit;
   cursor: pointer;
   color: inherit;
+  position: relative;
+  border-bottom: 1px solid;
+  border-color: var(--border);
 
   &:first-child {
     border-top-right-radius: var(--roundness);

src/components/attachment/attachment.scss

@@ -9,10 +9,8 @@
   height: 100%;
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
+  border-radius: var(--roundness);
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: var(--border);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
 
   .attachment-wrapper {
     flex: 1 1 auto;

src/components/chat_list_item/chat_list_item.scss

@@ -73,11 +73,6 @@
     }
   }
 
-  .Avatar {
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-  }
-
   .chat-preview-body {
     --emoji-size: 1.4em;
 

src/components/conversation/conversation.vue

@@ -275,11 +275,11 @@
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left: 4px solid $fallback--cRed;
+    border-left: 4px solid var(--cRed);
-    border-left-color: var(--cRed, $fallback--cRed);
+    border-radius: var(--roundness);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+    border-top-left-radius: 0;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: 0;
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
   }
 
   &.-expanded.status-fadein {

src/components/nav_panel/nav_panel.vue

@@ -117,29 +117,6 @@
     padding: 0;
   }
 
-  li {
-    position: relative;
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  > li {
-    &:first-child.menu-item {
-      border-top-right-radius: var(--roundness);
-      border-top-left-radius: var(--roundness);
-    }
-
-    &:last-child.menu-item {
-      border-bottom-right-radius: var(--roundness);
-      border-bottom-left-radius: var(--roundness);
-    }
-  }
-
-  li:last-child {
-    border: none;
-  }
-
   .navigation-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;

src/components/poll/poll.vue

@@ -140,12 +140,7 @@
   .result-fill {
     height: 100%;
     position: absolute;
-    color: $fallback--text;
+    border-radius: var(--roundness);
-    color: var(--pollText, $fallback--text);
-    background-color: $fallback--lightBg;
-    background-color: var(--poll, $fallback--lightBg);
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
     top: 0;
     left: 0;
     transition: width 0.5s;

src/components/post_status_form/post_status_form.vue

@@ -171,7 +171,7 @@
               :disabled="posting && !optimisticPosting"
               v-bind="propsToNative(inputProps)"
               size="1"
-              class="form-post-subject"
+              class="input form-post-subject"
             >
           </template>
         </EmojiInput>
@@ -198,7 +198,7 @@
               rows="1"
               cols="1"
               :disabled="posting && !optimisticPosting"
-              class="form-post-body"
+              class="input form-post-body"
               :class="{ 'scrollable-form': !!maxHeight }"
               v-bind="propsToNative(inputProps)"
               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@@ -555,7 +555,7 @@
     line-height: 1.85;
   }
 
-  .form-post-body {
+  .input.form-post-body {
     // TODO: make a resizable textarea component?
     box-sizing: content-box; // needed for easier computation of dynamic size
     overflow: hidden;
@@ -566,7 +566,6 @@
     height: calc(var(--post-line-height) * 1em);
     min-height: calc(var(--post-line-height) * 1em);
     resize: none;
-    text: inherit;
     background: transparent;
 
     &.scrollable-form {

src/components/report/report.scss

@@ -10,12 +10,8 @@
   }
 
   .reported-status {
-    border: 1px solid $fallback--faint;
+    border: 1px solid var(--border);
-    border-color: var(--faint, $fallback--faint);
+    border-radius: var(--roundness);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
     display: block;
     padding: 0.5em;
     margin: 0.5em 0;

src/components/settings_modal/tabs/profile_tab.scss

@@ -50,8 +50,7 @@
     position: absolute;
     top: 0.2em;
     right: 0.2em;
-    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--roundness);
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     background-color: rgb(0 0 0 / 60%);
     opacity: 0.7;
     width: 1.5em;

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -227,8 +227,6 @@
         min-width: 20px;
         min-height: 20px;
         line-height: 20px;
-        border-radius: $fallback--avatarAltRadius;
-        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       }
 
       .avatar {

src/components/timeline_menu/timeline_menu.vue

@@ -60,65 +60,6 @@
     margin: 0;
     padding: 0;
   }
-
-  a {
-    display: block;
-    padding: 0 0.65em;
-    height: 3.5em;
-    line-height: 3.5em;
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuText, $fallback--link);
-
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-    }
-
-    &.router-link-active {
-      font-weight: bolder;
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    svg {
-      margin-right: 0.4em;
-      margin-left: -0.2em;
-    }
-  }
-
-  li {
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    padding: 0;
-
-    &:last-child a {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child {
-      border: none;
-    }
-  }
 }
 
 .TimelineMenu {
@@ -159,8 +100,6 @@
   }
 
   &.open .timeline-menu-title svg {
-    color: $fallback--text;
-    color: var(--panelText, $fallback--text);
     transform: rotate(180deg);
   }
 

src/components/user_profile/user_profile.vue

@@ -181,9 +181,8 @@
     .user-profile-field {
       display: flex;
       margin: 0.25em;
-      border: 1px solid var(--border, $fallback--border);
+      border: 1px solid var(--border);
-      border-radius: $fallback--inputRadius;
+      border-radius: var(--roundness);
-      border-radius: var(--inputRadius, $fallback--inputRadius);
 
       .user-profile-field-name {
         flex: 0 1 30%;
@@ -191,7 +190,7 @@
         text-align: right;
         color: var(--lightText);
         min-width: 120px;
-        border-right: 1px solid var(--border, $fallback--border);
+        border-right: 1px solid var(--border);
       }
 
       .user-profile-field-value {