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: [PATCH] add roundness, fix inputs

---
 src/App.scss                                  | 27 ++++++----
 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 +-
 .../moderation_tools/moderation_tools.vue     | 14 ++---
 src/components/nav_panel/nav_panel.vue        | 12 ++---
 src/components/navigation/navigation_pins.vue |  2 +-
 .../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.vue                 | 12 ++---
 .../quick_view_settings.vue                   | 10 ++--
 src/components/root.style.js                  |  8 ---
 .../settings_modal/tabs/profile_tab.scss      |  3 +-
 .../shadow_control/shadow_control.vue         |  6 +--
 src/components/shout_panel/shout_panel.vue    |  3 +-
 src/components/status/status.scss             |  5 +-
 .../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 +-
 .../user_list_menu/user_list_menu.vue         |  2 +-
 src/panel.scss                                | 17 +++---
 src/services/style_setter/style_setter.js     |  2 +-
 .../theme_data/theme_data_3.service.js        | 52 ++++++++++++++-----
 33 files changed, 150 insertions(+), 150 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 6a63492695..8efa132829 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -355,8 +355,7 @@ nav {
   user-select: none;
   color: var(--text);
   border: none;
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  border-radius: var(--roundness);
   cursor: pointer;
   box-shadow: var(--shadow);
   font-size: 1em;
@@ -380,6 +379,16 @@ nav {
   font-family: inherit;
   cursor: pointer;
   color: inherit;
+
+  &:first-child {
+    border-top-right-radius: var(--roundness);
+    border-top-left-radius: var(--roundness);
+  }
+
+  &:last-child {
+    border-bottom-right-radius: var(--roundness);
+    border-bottom-left-radius: var(--roundness);
+  }
 }
 
 .button-unstyled {
@@ -423,8 +432,7 @@ textarea {
   --_padding: 0.5em;
 
   border: none;
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  border-radius: var(--roundness);
   box-shadow: var(--shadow);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
@@ -511,8 +519,7 @@ textarea {
       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: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
       margin-right: 0.5em;
@@ -562,7 +569,7 @@ option {
 
   li {
     border: 1px solid var(--border);
-    border-radius: var(--inputRadius);
+    border-radius: var(--roundness);
     padding: 0.5em;
     margin: 0.25em;
   }
@@ -634,8 +641,7 @@ option {
 .alert {
   margin: 0 0.35em;
   padding: 0 0.25em;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  border-radius: var(--roundness);
 
   &.error {
     background-color: $fallback--alertError;
@@ -682,8 +688,7 @@ option {
   padding: 0.5em;
   border: 1px solid $fallback--faint;
   border: 1px solid var(--faint, $fallback--faint);
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  border-radius: var(--roundness);
 }
 
 .notice-dismissible {
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 64cc11a41a..7912db9463 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 2262fd0368..812d45a46f 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 8d19516f39..900eef266f 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 d0ca03a51c..a96cb7b670 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 43e7a5e444..4f8f8492e0 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 f45d231e6e..e09969ba14 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 37398ab8c0..9cddfd8ea8 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 09f341ac4c..88b7fb92a9 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 72164d30b2..716edfa78d 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 baab8c310e..489f38661e 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 a207ad6f1b..e1c771603e 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 51fa62edda..a07a8795d3 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 fbb550f06e..48a4dcbd13 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 001c46f9c4..cc506e789b 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 1e8039c61b..2f6f92b575 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 ca82354d83..7d58859d60 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 ce053503bf..7aec44046f 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 c6792a2ca2..082d84975a 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 00955d4c42..e93dd8e082 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 38bcc95499..3e421bd43d 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 ee253ffe3d..efc5233526 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 ed2283a5dd..4fefaee1b9 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 a70134699f..9278c1415f 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 0f4a94349f..600c98f70a 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 311ca0998c..b3bd423fcb 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 4371947d46..64c7de7640 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 2f2ba25a3d..755346b296 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 62861570a5..a1ac81a683 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 812f812e28..b6bf8b42f7 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 }}
diff --git a/src/panel.scss b/src/panel.scss
index d3d339eeed..8fd772cf5e 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -10,8 +10,7 @@
 
   &::after,
   & {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
   }
 
   &::after {
@@ -77,8 +76,7 @@
   &.-stub {
     &,
     &::after {
-      border-radius: $fallback--panelRadius;
-      border-radius: var(--panelRadius, $fallback--panelRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -126,16 +124,15 @@
 // TODO Should refactor panels into separate component and utilize slots
 
 .panel-heading {
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
 
   &::after {
     background-color: var(--background);
     z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     box-shadow: var(--shadow);
   }
 
@@ -179,8 +176,8 @@
 }
 
 .panel-footer {
-  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   align-items: center;
   border-width: 1px 0 0;
   border-style: solid;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b86f241ad6..4e18bbb01d 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -24,7 +24,7 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
+  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
   // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
   // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 3210c67879..6ab1b24a09 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -484,9 +484,20 @@ export const init = (extraRuleset, palette) => {
         })
       } else {
         computed[selector] = computed[selector] || {}
+        let addRuleNeeded = false
+
+        // TODO: DEFAULT TEXT COLOR
+        const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
+
+        if (
+          computedDirectives.shadow != null ||
+          computedDirectives.roundness != null
+        ) {
+          addRuleNeeded = true
+        }
 
-        // TODO make background non-mandatory
         if (computedDirectives.background) {
+          addRuleNeeded = true
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
           const lastVariantRule = variantRules[variantRules.length - 1]
@@ -501,9 +512,6 @@ export const init = (extraRuleset, palette) => {
           const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
           const inheritedBackground = computed[inheritSelector].background
 
-          // TODO: DEFAULT TEXT COLOR
-          const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
-
           dynamicVars.inheritedBackground = inheritedBackground
 
           const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
@@ -520,16 +528,25 @@ export const init = (extraRuleset, palette) => {
             }
             stacked[selector] = blend
             computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
-
-            addRule({
-              selector,
-              component: component.name,
-              ...combination,
-              parent,
-              directives: computedDirectives
-            })
           }
         }
+
+        if (!stacked[selector]) {
+          computedDirectives.background = 'transparent'
+          computedDirectives.opacity = 0
+          stacked[selector] = lowerLevelComputedBackground
+          computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
+        }
+
+        if (addRuleNeeded) {
+          addRule({
+            selector,
+            component: component.name,
+            ...combination,
+            parent,
+            directives: computedDirectives
+          })
+        }
       }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
@@ -566,6 +583,11 @@ export const init = (extraRuleset, palette) => {
       if (rule.component !== 'Root') {
         directives = Object.entries(rule.directives).map(([k, v]) => {
           switch (k) {
+            case 'roundness': {
+              return '  ' + [
+                '--roundness: ' + v + 'px'
+              ].join(';\n  ')
+            }
             case 'shadow': {
               return '  ' + [
                 '--shadow: ' + getCssShadow(v),
@@ -574,6 +596,12 @@ export const init = (extraRuleset, palette) => {
               ].join(';\n  ')
             }
             case 'background': {
+              if (v === 'transparent') {
+                return [
+                  'background-color: ' + v,
+                  '  --background: ' + v
+                ].join(';\n')
+              }
               const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
               return [
                 'background-color: ' + color,