From bcc50844096b47c0656ed3338de222055a749fb1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Feb 2024 02:09:43 +0200
Subject: add roundness, fix inputs

---
 src/components/autosuggest/autosuggest.vue            | 10 +++++-----
 src/components/avatar.style.js                        |  6 ++++--
 src/components/button.style.js                        |  3 ++-
 src/components/button_unstyled.style.js               |  4 +---
 src/components/chat/chat.scss                         |  5 +++--
 src/components/emoji_input/emoji_input.vue            | 19 +++++--------------
 src/components/input.style.js                         |  1 +
 src/components/link-preview/link-preview.vue          |  6 ++----
 src/components/menu_item.style.js                     |  9 ++++++++-
 src/components/mobile_nav/mobile_nav.vue              |  4 ++--
 src/components/moderation_tools/moderation_tools.vue  | 14 +++++++-------
 src/components/nav_panel/nav_panel.vue                | 12 ++++--------
 src/components/navigation/navigation_pins.vue         |  2 +-
 src/components/notifications/notification_filters.vue | 14 +++++++-------
 src/components/panel.style.js                         |  1 +
 src/components/popover.style.js                       |  1 +
 src/components/popover/popover.vue                    | 15 ++++++---------
 .../quick_filter_settings/quick_filter_settings.vue   | 12 ++++++------
 .../quick_view_settings/quick_view_settings.vue       | 10 +++++-----
 src/components/root.style.js                          |  8 --------
 src/components/settings_modal/tabs/profile_tab.scss   |  3 +--
 src/components/shadow_control/shadow_control.vue      |  6 ++----
 src/components/shout_panel/shout_panel.vue            |  3 +--
 src/components/status/status.scss                     |  5 ++---
 src/components/status_popover/status_popover.vue      |  5 +----
 src/components/timeline/timeline.scss                 |  5 +----
 src/components/user_avatar/user_avatar.vue            | 14 +++++---------
 src/components/user_card/user_card.scss               |  3 +--
 src/components/user_list_menu/user_list_menu.vue      |  2 +-
 29 files changed, 86 insertions(+), 116 deletions(-)

(limited to 'src/components')

diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 64cc11a4..7912db94 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -1,3 +1,4 @@
+<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
 <template>
   <div
     v-click-outside="onClickOutside"
@@ -11,7 +12,7 @@
     >
     <div
       v-if="resultsVisible && filtered.length > 0"
-      class="autosuggest-results"
+      class="panel autosuggest-results"
     >
       <slot
         v-for="item in filtered"
@@ -45,13 +46,12 @@
     border-style: solid;
     border-width: 1px;
     border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
+    border-color: var(--border);
+    border-radius: var(--roundness);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     overflow-y: auto;
     z-index: 1;
   }
diff --git a/src/components/avatar.style.js b/src/components/avatar.style.js
index 2262fd03..812d45a4 100644
--- a/src/components/avatar.style.js
+++ b/src/components/avatar.style.js
@@ -1,11 +1,13 @@
 export default {
   name: 'Avatar',
   selector: '.Avatar',
+  variants: {
+    compact: '.-compact'
+  },
   defaultRules: [
     {
       directives: {
-        background: '--bg',
-        opacity: 0,
+        roundness: 3,
         shadow: [{
           x: 0,
           y: 1,
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 8d19516f..900eef26 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -64,7 +64,8 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        roundness: 3
       }
     },
     {
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index d0ca03a5..a96cb7b6 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -15,9 +15,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg',
-        shadow: [],
-        opacity: 0
+        shadow: []
       }
     },
     {
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 43e7a5e4..4f8f8492 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -18,8 +18,9 @@
     overflow: visible;
     min-height: calc(100vh - var(--navbar-height));
     margin: 0;
-    border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
+    border-radius: var(--roundness);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
     &::after {
       border-radius: 0;
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index f45d231e..e09969ba 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="root"
-    class="emoji-input"
+    class="input emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot
@@ -68,9 +68,9 @@
             v-for="(suggestion, index) in suggestions"
             :id="suggestionItemId(index)"
             :key="index"
-            class="autocomplete-item"
+            class="menu-item autocomplete-item"
             role="option"
-            :class="{ highlighted: index === highlighted }"
+            :class="{ active: index === highlighted }"
             :aria-label="autoCompleteItemLabel(suggestion)"
             :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"
@@ -145,7 +145,9 @@
   textarea {
     flex: 1 0 auto;
     color: inherit;
+    padding: 0;
     background: none;
+    box-shadow: none;
     border: none;
     outline: none;
   }
@@ -186,7 +188,6 @@
     display: flex;
     cursor: pointer;
     padding: 0.2em 0.4em;
-    border-bottom: 1px solid rgb(0 0 0 / 40%);
     height: 32px;
 
     .image {
@@ -219,16 +220,6 @@
         line-height: 9px;
       }
     }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--selectedMenuPopover, $fallback--fg);
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 37398ab8..9cddfd8e 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -34,6 +34,7 @@ export default {
     {
       directives: {
         background: '--fg, -5',
+        roundness: 3,
         shadow: [{
           x: 0,
           y: 0,
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 09f341ac..88b7fb92 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -51,8 +51,7 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      border-radius: $fallback--attachmentRadius;
-      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -86,8 +85,7 @@
   color: var(--text, $fallback--text);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-radius: var(--roundness);
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
 }
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 72164d30..716edfa7 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -9,7 +9,7 @@ export default {
   ],
   states: {
     hover: ':hover',
-    active: 'active'
+    active: '.active'
   },
   defaultRules: [
     {
@@ -25,6 +25,13 @@ export default {
         opacity: 1
       }
     },
+    {
+      state: ['active'],
+      directives: {
+        background: '$mod(--bg, 5)',
+        opacity: 1
+      }
+    },
     {
       component: 'Text',
       variant: 'normal',
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index baab8c31..489f3866 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="alert-dot"
+            class="badge alert-dot"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,7 +37,7 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="alert-dot"
+            class="badge alert-dot"
           />
         </button>
       </div>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index a207ad6f..e1c77160 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -54,7 +54,7 @@
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
               />
               {{ $t('user_card.admin_menu.force_nsfw') }}
@@ -64,7 +64,7 @@
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
               />
               {{ $t('user_card.admin_menu.strip_media') }}
@@ -74,7 +74,7 @@
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
               />
               {{ $t('user_card.admin_menu.force_unlisted') }}
@@ -84,7 +84,7 @@
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
               />
               {{ $t('user_card.admin_menu.sandbox') }}
@@ -95,7 +95,7 @@
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_remote_subscription') }}
@@ -106,7 +106,7 @@
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_any_subscription') }}
@@ -117,7 +117,7 @@
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
               />
               {{ $t('user_card.admin_menu.quarantine') }}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 51fa62ed..a07a8795 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -126,17 +126,13 @@
 
   > li {
     &:first-child.menu-item {
-      border-top-right-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-top-right-radius: var(--roundness);
+      border-top-left-radius: var(--roundness);
     }
 
     &:last-child.menu-item {
-      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);
+      border-bottom-right-radius: var(--roundness);
+      border-bottom-left-radius: var(--roundness);
     }
   }
 
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index fbb550f0..48a4dcbd 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="alert-dot"
+        class="badge alert-dot"
       />
     </router-link>
   </span>
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 001c46f9..cc506e78 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -12,7 +12,7 @@
           @click="toggleNotificationFilter('likes')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.likes }"
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
@@ -21,7 +21,7 @@
           @click="toggleNotificationFilter('repeats')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.repeats }"
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
@@ -30,7 +30,7 @@
           @click="toggleNotificationFilter('follows')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.follows }"
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
@@ -39,7 +39,7 @@
           @click="toggleNotificationFilter('mentions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.mentions }"
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
@@ -48,7 +48,7 @@
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
@@ -57,7 +57,7 @@
           @click="toggleNotificationFilter('moves')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.moves }"
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
@@ -66,7 +66,7 @@
           @click="toggleNotificationFilter('polls')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.polls }"
           />{{ $t('settings.notification_visibility_polls') }}
         </button>
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 1e8039c6..2f6f92b5 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -17,6 +17,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        roundness: 3,
         shadow: [{
           x: 1,
           y: 1,
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index ca82354d..7d58859d 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -9,6 +9,7 @@ export default {
     'Text',
     'Link',
     'Icon',
+    'Border',
     'Button',
     'ButtonUnstyled',
     'Input',
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index ce053503..7aec4404 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -69,13 +69,15 @@
     pointer-events: none;
   }
 
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  border-radius: var(--roundness);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: 1px;
 }
 
 .dropdown-menu {
   display: block;
-  padding: 0.5rem 0;
+  padding: 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
@@ -108,8 +110,6 @@
     height: 100%;
     box-sizing: border-box;
 
-    --btnText: var(--popoverText, $fallback--text);
-
     &-icon {
       svg {
         width: 22px;
@@ -134,10 +134,7 @@
       line-height: 22px;
       text-align: center;
       border-radius: 0;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
+      box-shadow: var(--shadow);
       margin-right: 0.75em;
 
       &.menu-checkbox-checked::after {
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index c6792a2c..082d8497 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -22,7 +22,7 @@
             @click="replyVisibilityAll = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_all') }}
@@ -35,7 +35,7 @@
             @click="replyVisibilityFollowing = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_following_short') }}
@@ -48,7 +48,7 @@
             @click="replyVisibilitySelf = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_self_short') }}
@@ -66,7 +66,7 @@
           @click="muteBotStatuses = !muteBotStatuses"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': muteBotStatuses }"
             :aria-hidden="true"
           />{{ $t('settings.mute_bot_posts') }}
@@ -78,7 +78,7 @@
           @click="hideMedia = !hideMedia"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMedia }"
             :aria-hidden="true"
           />{{ $t('settings.hide_media_previews') }}
@@ -90,7 +90,7 @@
           @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMutedPosts }"
             :aria-hidden="true"
           />{{ $t('settings.hide_all_muted_posts') }}
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 00955d4c..e93dd8e0 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -18,7 +18,7 @@
             @click="conversationDisplay = 'tree'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :aria-hidden="true"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
             /><FAIcon
@@ -33,7 +33,7 @@
             @click="conversationDisplay = 'linear'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
               :aria-hidden="true"
             /><FAIcon
@@ -53,7 +53,7 @@
           @click="showUserAvatars = !showUserAvatars"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': showUserAvatars }"
             :aria-hidden="true"
           />{{ $t('settings.mention_link_show_avatar_quick') }}
@@ -66,7 +66,7 @@
           @click="autoUpdate = !autoUpdate"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': autoUpdate }"
             :aria-hidden="true"
           />{{ $t('settings.auto_update') }}
@@ -79,7 +79,7 @@
           @click="collapseWithSubjects = !collapseWithSubjects"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
             :aria-hidden="true"
           />{{ $t('settings.collapse_subject') }}
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 38bcc954..3e421bd4 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -6,13 +6,5 @@ export default {
     'Modals',
     'Popover',
     'TopBar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    }
   ]
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index ee253ffe..efc52335 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -43,8 +43,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
   }
 
   .reset-button {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index ed2283a5..4fefaee1 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -293,16 +293,14 @@
         linear-gradient(-45deg, transparent 75%, #666 75%);
       background-size: 20px 20px;
       background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: $fallback--inputRadius;
-      border-radius: var(--inputRadius, $fallback--inputRadius);
+      border-radius: var(--roundness);
 
       .preview-block {
         width: 33%;
         height: 33%;
         background-color: $fallback--bg;
         background-color: var(--bg, $fallback--bg);
-        border-radius: $fallback--panelRadius;
-        border-radius: var(--panelRadius, $fallback--panelRadius);
+        border-radius: var(--roundness);
       }
     }
   }
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index a7013469..9278c141 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -128,8 +128,7 @@
     img {
       height: 24px;
       width: 24px;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       margin-right: 0.5em;
       margin-top: 0.25em;
     }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0f4a9434..600c98f7 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -247,7 +247,7 @@
   }
 
   .repeater-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     margin-left: 28px;
     width: 20px;
     height: 20px;
@@ -363,7 +363,6 @@
 
   .avatar-row {
     flex: 1;
-    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -421,7 +420,7 @@
   .quoted-status {
     margin-top: 0.5em;
     border: 1px solid var(--border, $fallback--border);
-    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+    border-radius: var(--roundness);
 
     &.-unavailable-prompt {
       padding: 0.5em;
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 311ca099..b3bd423f 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -47,12 +47,9 @@
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
   /* TODO cleanup this */
   .Status.Status {
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 4371947d..64c7de76 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,22 +10,19 @@
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
-    background-color: var(--badgeNeutral);
   }
 
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
     text-align: right;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
     position: absolute;
     left: calc(50% - 0.5em);
     top: calc(50% - 0.4em);
     padding: 0.2em;
     margin-left: 0.7em;
     margin-top: -1em;
-    background-color: var(--badgeNeutral);
-    color: var(--badgeNeutralText);
   }
 
   .loadmore-button {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 2f2ba25a..755346b2 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -43,16 +43,14 @@
   &.-compact {
     width: 32px;
     height: 32px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
   }
 
   .avatar {
     width: 100%;
     height: 100%;
     box-shadow: var(--_avatarShadowBox);
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
 
     &.-better-shadow {
       box-shadow: var(--_avatarShadowInset);
@@ -64,13 +62,11 @@
     }
 
     &.-compact {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
     }
 
     &.-placeholder {
-      background-color: $fallback--fg;
-      background-color: var(--fg, $fallback--fg);
+      background-color: var(--background);
     }
   }
 
@@ -87,7 +83,7 @@
     padding: 0.2em;
     background: rgb(127 127 127 / 50%);
     color: #fff;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
   }
 }
 </style>
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 62861570..a1ac81a6 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -153,8 +153,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       opacity: 0;
       transition: opacity 0.2s ease;
 
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 812f812e..b6bf8b42 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -14,7 +14,7 @@
             @click="toggleList(list.id)"
           >
             <span
-              class="menu-checkbox"
+              class="input menu-checkbox"
               :class="{ 'menu-checkbox-checked': list.inList }"
             />
             {{ list.title }}
-- 
cgit v1.2.3-70-g09d2