From ae345d2c458bd0952d9b85c2e03060b2d286d320 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 17:26:08 +0200
Subject: [PATCH] buttons look great now, including unstyled ones menu items
 work too

---
 src/App.scss                                  | 19 ++--
 .../account_actions/account_actions.vue       |  5 --
 src/components/button.style.js                | 52 ++++++-----
 src/components/button_unstyled.style.js       | 88 +++++++++++++++++++
 src/components/chat_message/chat_message.vue  |  2 +-
 src/components/emoji_input/emoji_input.vue    |  1 -
 src/components/emoji_picker/emoji_picker.scss | 16 +---
 src/components/emoji_picker/emoji_picker.vue  |  8 +-
 .../extra_buttons/extra_buttons.vue           | 24 ++---
 src/components/input.style.js                 |  5 +-
 src/components/menu_item.style.js             | 10 ++-
 .../mobile_post_status_button.vue             |  2 -
 .../moderation_tools/moderation_tools.vue     | 22 ++---
 src/components/nav_panel/nav_panel.vue        | 16 ++--
 .../navigation/navigation_entry.vue           |  7 +-
 src/components/navigation/navigation_pins.vue | 12 +--
 .../notifications/notification_filters.vue    | 14 +--
 src/components/panel.style.js                 |  1 +
 src/components/panel_header.style.js          |  3 +-
 src/components/popover.style.js               |  1 +
 src/components/popover/popover.vue            | 62 +------------
 .../post_status_form/post_status_form.vue     | 25 ------
 .../quick_filter_settings.vue                 | 14 +--
 .../quick_view_settings.vue                   | 12 +--
 .../scope_selector/scope_selector.js          |  8 +-
 .../scope_selector/scope_selector.vue         |  5 --
 .../admin_tabs/frontends_tab.vue              |  4 +-
 .../settings_modal/settings_modal.vue         |  6 +-
 src/components/status/status.scss             |  5 --
 src/components/top_bar.style.js               |  1 +
 src/components/user_card/user_card.scss       | 13 ---
 .../user_list_menu/user_list_menu.vue         |  2 +-
 .../theme_data/theme_data_3.service.js        |  8 +-
 33 files changed, 224 insertions(+), 249 deletions(-)
 create mode 100644 src/components/button_unstyled.style.js

diff --git a/src/App.scss b/src/App.scss
index 1f9bab407b..27fee4b4a3 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -372,14 +372,24 @@ nav {
   }
 }
 
+.menu-item {
+  border: none;
+  outline: none;
+  text-align: initial;
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  color: inherit;
+}
+
 .button-unstyled {
-  background: none;
   border: none;
   outline: none;
   display: inline;
   text-align: initial;
   font-size: 100%;
   font-family: inherit;
+  box-shadow: var(--shadow);
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -393,13 +403,6 @@ nav {
   &.-fullwidth {
     width: 100%;
   }
-
-  &.-hover-highlight {
-    &:hover svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-  }
 }
 
 input,
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index ce19291a1d..1c3c1419cd 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -130,11 +130,6 @@
     margin: -0.5em 0;
     padding: 0.5em 0;
     text-align: center;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 5a5e42716d..8d19516f39 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -10,6 +10,14 @@ const border = (top, shadow) => ({
 
 const buttonInsetFakeBorders = [border(true, false), border(false, true)]
 const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const buttonOuterShadow = {
+  x: 0,
+  y: 0,
+  blur: 2,
+  spread: 0,
+  color: '#000000',
+  alpha: 1
+}
 
 const hoverGlow = {
   x: 0,
@@ -22,7 +30,7 @@ const hoverGlow = {
 
 export default {
   name: 'Button', // Name of the component
-  selector: '.button', // CSS selector/prefix
+  selector: '.button-default', // CSS selector/prefix
   // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
   // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
   states: {
@@ -39,8 +47,8 @@ export default {
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
     // Variants save on computation time since adding new variant just adds one more "set".
-    normal: '-default', // you can override normal variant, it will be appenended to the main class
-    danger: '-default.danger'
+    // normal: '', // you can override normal variant, it will be appenended to the main class
+    danger: '.danger'
     // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
     // This (currently) is further multipled by number of places where component can exist.
   },
@@ -56,21 +64,7 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 2,
-          spread: 0,
-          color: '#000000',
-          alpha: 1
-        }, ...buttonInsetFakeBorders]
-      }
-    },
-    {
-      variant: 'unstyled',
-      directives: {
-        background: '--fg',
-        opacity: 0
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
       }
     },
     {
@@ -82,7 +76,7 @@ export default {
     {
       state: ['pressed'],
       directives: {
-        shadow: [...inputInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
       }
     },
     {
@@ -95,7 +89,7 @@ export default {
       state: ['toggled'],
       directives: {
         background: '--accent,-24.2',
-        shadow: [...inputInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
       }
     },
     {
@@ -112,6 +106,13 @@ export default {
         shadow: [...buttonInsetFakeBorders]
       }
     },
+    {
+      state: ['disabled', 'hover'],
+      directives: {
+        background: '$blend(--background, 0.25, --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
     {
       component: 'Text',
       parent: {
@@ -122,6 +123,17 @@ export default {
         textOpacity: 0.25,
         textOpacityMode: 'blend'
       }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
     }
   ]
 }
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
new file mode 100644
index 0000000000..d0ca03a51c
--- /dev/null
+++ b/src/components/button_unstyled.style.js
@@ -0,0 +1,88 @@
+export default {
+  name: 'ButtonUnstyled',
+  selector: '.button-unstyled',
+  states: {
+    disabled: ':disabled',
+    toggled: '.toggled',
+    pressed: ':active',
+    hover: ':hover',
+    focused: ':focus-within'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [],
+        opacity: 0
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 381574c32e..166889d71d 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -53,7 +53,7 @@
                 <template #content>
                   <div class="dropdown-menu">
                     <button
-                      class="button-default dropdown-item dropdown-item-icon"
+                      class="menu-item dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 34f4241024..f45d231e6e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -227,7 +227,6 @@
 
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b06..7dcaeb6cf9 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -10,15 +10,6 @@ $emoji-picker-emoji-size: 32px;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
 
   &-header-image {
     display: inline-flex;
@@ -104,13 +95,8 @@ $emoji-picker-emoji-size: 32px;
         pointer-events: none;
       }
 
-      &.active {
+      &.toggled {
         border-bottom: 4px solid;
-
-        svg {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
       }
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 9092fab69a..7b7353abe4 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -23,9 +23,9 @@
             v-for="group in filteredEmojiGroups"
             :ref="setGroupRef('group-header-' + group.id)"
             :key="group.id"
-            class="emoji-tabs-item"
+            class="button-unstyled emoji-tabs-item"
             :class="{
-              active: activeGroupView === group.id
+              toggled: activeGroupView === group.id
             }"
             :title="group.text"
             role="button"
@@ -52,8 +52,8 @@
           class="additional-tabs"
         >
           <span
-            class="stickers-tab-icon additional-tabs-item"
-            :class="{active: showingStickers}"
+            class="button-unstyled stickers-tab-icon additional-tabs-item"
+            :class="{toggled: showingStickers}"
             :title="$t('emoji.stickers')"
             @click.prevent="toggleStickers"
           >
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index b7d3b1d3ab..6b43da4dcf 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -18,7 +18,7 @@
       >
         <button
           v-if="canMute && !status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="muteConversation"
         >
@@ -29,7 +29,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unmuteConversation"
         >
@@ -40,7 +40,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
@@ -52,7 +52,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unpinStatus"
           @click="close"
@@ -65,7 +65,7 @@
         <template v-if="canBookmark">
           <button
             v-if="!status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="bookmarkStatus"
             @click="close"
@@ -77,7 +77,7 @@
           </button>
           <button
             v-if="status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="unbookmarkStatus"
             @click="close"
@@ -90,7 +90,7 @@
         </template>
         <button
           v-if="ownStatus && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="editStatus"
           @click="close"
@@ -102,7 +102,7 @@
         </button>
         <button
           v-if="isEdited && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="showStatusHistory"
           @click="close"
@@ -114,7 +114,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
@@ -125,7 +125,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="copyLink"
           @click="close"
@@ -137,7 +137,7 @@
         </button>
         <a
           v-if="!status.is_local"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           title="Source"
           :href="status.external_url"
@@ -149,7 +149,7 @@
           /><span>{{ $t("status.external_source") }}</span>
         </a>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 4d0690cf1a..37398ab8c0 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -24,19 +24,16 @@ export default {
   selector: '.input',
   states: {
     disabled: ':disabled',
-    pressed: ':active',
     hover: ':hover',
     focused: ':focus-within'
   },
-  // variants: {
-  // },
   validInnerComponents: [
     'Text'
   ],
   defaultRules: [
     {
       directives: {
-        background: '--fg',
+        background: '--fg, -5',
         shadow: [{
           x: 0,
           y: 0,
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 43b5c35a3a..72164d30b2 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -14,7 +14,15 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg'
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '$mod(--bg, 5)',
+        opacity: 1
       }
     },
     {
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index ef0f51fe31..41a6f0ba4b 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -25,8 +25,6 @@
     right: 1.5em;
     // TODO: this needs its own color, it has to stand out enough and link color
     // is not very optimal for this particular use.
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index b708cdc8fa..a207ad6f1b 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleRight(&quot;admin&quot;)"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -31,14 +31,14 @@
           </span>
           <button
             v-if="canChangeActivationState"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
             v-if="canDeleteAccount"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
@@ -60,7 +60,7 @@
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
@@ -70,7 +70,7 @@
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
@@ -80,7 +80,7 @@
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
@@ -91,7 +91,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
@@ -102,7 +102,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
@@ -113,7 +113,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 33547a4121..51fa62edda 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -38,6 +38,7 @@
         <div
           v-show="showTimelines"
           class="timelines-background"
+          :class="{ expanded: showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -57,12 +58,11 @@
         >
           <router-link
             :title="$t('lists.manage_lists')"
-            class="extra-button"
+            class="button-unstyled extra-button"
             :to="{ name: 'lists' }"
             @click.stop
           >
             <FAIcon
-              class="extra-button"
               fixed-width
               icon="wrench"
             />
@@ -76,6 +76,7 @@
         <div
           v-show="showLists"
           class="timelines-background"
+          :class="{ expanded: showTimelines }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -156,16 +157,11 @@
 
   .timelines-background {
     padding: 0 0 0 0.6em;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
   }
 
-  .timelines {
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+  .timelines-background.expanded + .NavigationEntry {
+    border-top: 1px solid;
+    border-color: var(--border);
   }
 
   .nav-panel-heading {
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 59722f6c1c..ed805944df 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -70,17 +70,22 @@
   align-items: baseline;
   height: 3.5em;
   line-height: 3.5em;
-  padding: 0 1em;
+  padding: 0;
   width: 100%;
   color: $fallback--link;
   color: var(--link, $fallback--link);
 
+  &[aria-expanded] {
+    padding-right: 1em;
+  }
+
   .timelines-chevron {
     margin-right: 0;
   }
 
   .main-link {
     flex: 1;
+    padding: 0 1em;
   }
 
   .menu-icon {
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4fbb4f95ce..fbb550f06e 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -3,7 +3,8 @@
     <router-link
       v-for="item in pinnedList"
       :key="item.name"
-      class="pinned-item"
+      class="button-unstyled pinned-item"
+      activeClass="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
@@ -60,15 +61,8 @@
       margin: 0;
     }
 
-    &.router-link-active {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+    &.toggled {
       border-bottom: 4px solid;
-
-      & .svg-inline--fa,
-      & .iconLetter {
-        color: inherit;
-      }
     }
   }
 }
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 1315b51add..001c46f9c4 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -8,7 +8,7 @@
     <template #content>
       <div class="dropdown-menu">
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('likes')"
         >
           <span
@@ -17,7 +17,7 @@
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('repeats')"
         >
           <span
@@ -26,7 +26,7 @@
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('follows')"
         >
           <span
@@ -35,7 +35,7 @@
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('mentions')"
         >
           <span
@@ -44,7 +44,7 @@
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
@@ -53,7 +53,7 @@
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('moves')"
         >
           <span
@@ -62,7 +62,7 @@
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('polls')"
         >
           <span
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d680a58d83..ce9812a681 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -6,6 +6,7 @@ export default {
     'Link',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input',
     'PanelHeader',
     'MenuItem'
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 1d89b4cee3..c32304e1c4 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -5,7 +5,8 @@ export default {
     'Text',
     'Link',
     'Icon',
-    'Button'
+    'Button',
+    'ButtonUnstyled'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 9f1e6cf0f7..a3a554fd78 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -10,6 +10,7 @@ export default {
     'Link',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input',
     'PanelHeader',
     'MenuItem'
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 1a4bffd91c..ce053503bf 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -53,8 +53,7 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
-  box-shadow: var(--popupShadow);
+  box-shadow: var(--shadow);
 }
 
 .popover-default {
@@ -66,24 +65,12 @@
     left: 0;
     right: 0;
     z-index: 3;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     pointer-events: none;
   }
 
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--text;
-  color: var(--popoverText, $fallback--text);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --postLink: var(--popoverPostLink, $fallback--link);
-  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-  --icon: var(--popoverIcon, $fallback--icon);
 }
 
 .dropdown-menu {
@@ -127,7 +114,6 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
@@ -138,25 +124,6 @@
       }
     }
 
-    &:active,
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      box-shadow: none;
-
-      --btnText: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-      svg {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
@@ -188,30 +155,5 @@
       }
     }
   }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*="icon-"] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
 }
 </style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7dd9efb400..a53000839b 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -503,31 +503,6 @@
     padding: 0 0.1em;
     display: flex;
     align-items: center;
-
-    &.selected,
-    &:hover {
-      // needs to be specific to override icon default color
-      svg,
-      i,
-      label {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
-    }
-
-    &.disabled {
-      svg,
-      i {
-        cursor: not-allowed;
-        color: $fallback--icon;
-        color: var(--btnDisabledText, $fallback--icon);
-
-        &:hover {
-          color: $fallback--icon;
-          color: var(--btnDisabledText, $fallback--icon);
-        }
-      }
-    }
   }
 
   .error {
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index b81215a1a2..c6792a2ca2 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -16,7 +16,7 @@
         >
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityAll"
             role="menuitemradio"
             @click="replyVisibilityAll = true"
@@ -29,7 +29,7 @@
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityFollowing"
             role="menuitemradio"
             @click="replyVisibilityFollowing = true"
@@ -42,7 +42,7 @@
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilitySelf"
             role="menuitemradio"
             @click="replyVisibilitySelf = true"
@@ -60,7 +60,7 @@
           />
         </div>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="muteBotStatuses"
           @click="muteBotStatuses = !muteBotStatuses"
@@ -72,7 +72,7 @@
           />{{ $t('settings.mute_bot_posts') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMedia"
           @click="hideMedia = !hideMedia"
@@ -84,7 +84,7 @@
           />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMutedPosts"
           @click="hideMutedPosts = !hideMutedPosts"
@@ -96,7 +96,7 @@
           />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('filtering')"
         >
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 9f5cdabc91..00955d4c42 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -12,7 +12,7 @@
       >
         <div role="group">
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'tree'"
             role="menuitemradio"
             @click="conversationDisplay = 'tree'"
@@ -27,7 +27,7 @@
             /> {{ $t('settings.conversation_display_tree_quick') }}
           </button>
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'linear'"
             role="menuitemradio"
             @click="conversationDisplay = 'linear'"
@@ -47,7 +47,7 @@
           class="dropdown-divider"
         />
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="showUserAvatars"
           @click="showUserAvatars = !showUserAvatars"
@@ -60,7 +60,7 @@
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="autoUpdate"
           @click="autoUpdate = !autoUpdate"
@@ -73,7 +73,7 @@
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="collapseWithSubjects"
           @click="collapseWithSubjects = !collapseWithSubjects"
@@ -85,7 +85,7 @@
           />{{ $t('settings.collapse_subject') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('general')"
         >
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 74bf7284ac..52cda368b8 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -44,10 +44,10 @@ const ScopeSelector = {
     },
     css () {
       return {
-        public: { selected: this.currentScope === 'public' },
-        unlisted: { selected: this.currentScope === 'unlisted' },
-        private: { selected: this.currentScope === 'private' },
-        direct: { selected: this.currentScope === 'direct' }
+        public: { toggled: this.currentScope === 'public' },
+        unlisted: { toggled: this.currentScope === 'unlisted' },
+        private: { toggled: this.currentScope === 'private' },
+        direct: { toggled: this.currentScope === 'direct' }
       }
     }
   },
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d6e7265b20..1cb6cdf2c6 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -73,11 +73,6 @@
     min-width: 1.3em;
     min-height: 1.3em;
     text-align: center;
-
-    &.selected svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index dd4c9790ad..fa91afc1b4 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -103,7 +103,7 @@
                       <button
                         v-for="ref in frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="update(frontend, ref)"
                         @click="close"
                       >
@@ -160,7 +160,7 @@
                       <button
                         v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="setDefault(frontend, ref)"
                         @click="close"
                       >
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 4e7fd931a5..d5931318e6 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -70,7 +70,7 @@
           <template #content="{close}">
             <div class="dropdown-menu">
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backup"
                 @click="close"
               >
@@ -80,7 +80,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backupWithTheme"
                 @click="close"
               >
@@ -90,7 +90,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="restore"
                 @click="close"
               >
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 760c6ac1af..0f4a94349f 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -135,11 +135,6 @@
     .button-unstyled {
       padding: 5px;
       margin: -5px;
-
-      &:hover svg {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
     }
 
     .svg-inline--fa {
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index 99e8efdc1e..fd4005220b 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -6,6 +6,7 @@ export default {
     'Text',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input'
   ],
   defaultRules: [
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4ab93a8a36..62861570a5 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -110,19 +110,8 @@
 }
 
 .user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   padding: 0 26px;
 
-  a {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-
-    &:hover {
-      color: var(--icon);
-    }
-  }
-
   .container {
     min-width: 0;
     padding: 16px 0 6px;
@@ -334,8 +323,6 @@
   padding: 0.5em 1.5em 0;
   text-align: center;
   justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   flex-wrap: wrap;
 }
 
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 06947ab7e7..812f812e28 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -10,7 +10,7 @@
           <button
             v-for="list in lists"
             :key="list.id"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="toggleList(list.id)"
           >
             <span
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 2f4a6e7186..0d205c7372 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -16,6 +16,7 @@ import MenuItem from 'src/components/menu_item.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
+import ButtonUnstyled from 'src/components/button_unstyled.style.js'
 import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
 import Link from 'src/components/link.style.js'
@@ -49,6 +50,7 @@ const components = {
   PanelHeader,
   TopBar,
   Button,
+  ButtonUnstyled,
   Input
 }
 
@@ -208,7 +210,6 @@ export const init = (extraRuleset, palette) => {
     })
     .map(({ data }) => data)
 
-  console.log(ruleset)
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
   const addRule = (rule) => {
@@ -437,11 +438,6 @@ export const init = (extraRuleset, palette) => {
           }
         }
 
-        if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
-          console.log(existingRules)
-          console.log(computedRule, newTextRule)
-        }
-
         dynamicVars.inheritedBackground = lowerLevelBackground
 
         // TODO properly provide "parent" text color?