Update dependency @vue/babel-plugin-jsx to v1.2.2

.gitlab-ci.yml

@@ -43,8 +43,6 @@ lint:
 
 test:
   stage: test
-  tags:
-    - amd64
   variables:
     APT_CACHE_DIR: apt-cache
   script:
@@ -56,8 +54,6 @@ test:
 
 build:
   stage: build
-  tags:
-    - amd64
   script:
     - yarn
     - npm run build

changelog.d/ci-runner.skip

@@ -1 +0,0 @@
-stop using that one runner for intensive tasks

changelog.d/mute-nsfw.add

@@ -1 +0,0 @@
-Added ability to mute sensitive posts (ported from eintei)

changelog.d/non-expiring-polls-indication.fix

@@ -1 +0,0 @@
-The expiry date indication won't be shown if the poll never expires

changelog.d/notif-types.fix

@@ -1 +0,0 @@
-Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests

changelog.d/poll-ended-notifications.fix

@@ -1 +0,0 @@
-Add poll end notifications to fetched types.

changelog.d/quotes-count.add

@@ -1 +0,0 @@
-Display quotes count on posts and add quotes list page

changelog.d/scrobbles-age-filter.add

@@ -1 +0,0 @@
-Option to only show scrobbles that are recent enough

changelog.d/status-loading-indicator.add

@@ -1 +0,0 @@
-Display loading and error indicator for conversation page

changelog.d/themes3-cache.add

@@ -1 +0,0 @@
-Add caching system for themes3

changelog.d/themes3-fixes.fix

@@ -1 +0,0 @@
-fix color inputs and some in-development themes3 issues

changelog.d/themes3.change

@@ -1 +0,0 @@
-Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.

package.json

@@ -32,7 +32,6 @@
     "click-outside-vue3": "4.0.1",
     "cropperjs": "1.5.13",
     "escape-html": "1.0.3",
-    "hash-sum": "^2.0.0",
     "js-cookie": "3.0.5",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
@@ -58,10 +57,10 @@
     "@intlify/vue-i18n-loader": "5.0.1",
     "@ungap/event-target": "0.2.4",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.2.1",
+    "@vue/babel-plugin-jsx": "1.2.2",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.8",
-    "autoprefixer": "10.4.19",
+    "autoprefixer": "10.4.18",
     "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.7",

src/App.scss

@@ -1,10 +1,9 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
+@import "./variables";
 @import "./panel";
 
 :root {
-  --font-size: 14px;
-  --status-margin: 0.75em;
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
   // Z-Index stuff
@@ -14,21 +13,19 @@
   --ZI_navbar_popovers: 7500;
   --ZI_navbar: 7000;
   --ZI_popovers: 6000;
-
-  // Fallback for when stuff is loading
-  --background: var(--bg);
 }
 
 html {
-  font-size: var(--font-size);
+  font-size: 14px;
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
 body {
   font-family: sans-serif;
-  font-family: var(--font);
+  font-family: var(--interfaceFont, sans-serif);
   margin: 0;
-  color: var(--text);
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
@@ -45,35 +42,17 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--fg) transparent;
+    scrollbar-color: var(--btn) transparent;
 
     &::-webkit-scrollbar {
       background: transparent;
     }
 
-    &::-webkit-scrollbar-corner {
-      background: transparent;
-    }
-
-    &::-webkit-resizer {
-      /* stylelint-disable-next-line declaration-no-important */
-      background-color: transparent !important;
-      background-image:
-        linear-gradient(
-          135deg,
-          transparent calc(50% - 1px),
-          var(--textFaint) 50%,
-          transparent calc(50% + 1px),
-          transparent calc(75% - 1px),
-          var(--textFaint) 75%,
-          transparent calc(75% + 1px),
-        );
-    }
-
     &::-webkit-scrollbar-button,
     &::-webkit-scrollbar-thumb {
-      box-shadow: var(--shadow);
+      background-color: var(--btn);
-      border-radius: var(--roundness);
+      box-shadow: var(--buttonShadow);
+      border-radius: var(--btnRadius);
     }
 
     // horizontal/vertical/increment/decrement are webkit-specific stuff
@@ -82,7 +61,7 @@ body {
     &::-webkit-scrollbar-button {
       --___bgPadding: 2px;
 
-      color: var(--text);
+      color: var(--btnText);
       background-repeat: no-repeat, no-repeat;
 
       &:horizontal {
@@ -90,15 +69,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -108,15 +87,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
+            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
@@ -125,14 +104,15 @@ body {
   }
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
-    scrollbar-color: var(--fg) var(--wallpaper);
+    scrollbar-color: var(--selectedMenu) var(--wallpaper);
     background: var(--wallpaper);
   }
 }
 
 a {
   text-decoration: none;
-  color: var(--link);
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
 }
 
 h4 {
@@ -148,12 +128,27 @@ h4 {
 i[class*="icon-"],
 .svg-inline--fa,
 .iconLetter {
-  color: var(--icon);
+  color: $fallback--icon;
+  color: var(--icon, $fallback--icon);
+}
+
+.button-unstyled:hover,
+a:hover {
+  > i[class*="icon-"],
+  > .svg-inline--fa,
+  > .iconLetter {
+    color: var(--text);
+  }
 }
 
 nav {
   z-index: var(--ZI_navbar);
-  box-shadow: var(--shadow);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
+  box-shadow: 0 0 4px rgb(0 0 0 / 60%);
+  box-shadow: var(--topBarShadow);
   box-sizing: border-box;
   height: var(--navbar-height);
   position: fixed;
@@ -200,7 +195,8 @@ nav {
   grid-column: 1 / span 3;
   grid-row: 1 / 1;
   pointer-events: none;
-  background-color: var(--underlay);
+  background-color: rgb(0 0 0 / 15%);
+  background-color: var(--underlay, rgb(0 0 0 / 15%));
   z-index: -1000;
 }
 
@@ -208,6 +204,7 @@ nav {
   --miniColumn: 25rem;
   --maxiColumn: 45rem;
   --columnGap: 1em;
+  --status-margin: 0.75em;
   --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
   --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
   --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
@@ -369,113 +366,106 @@ nav {
 
 .button-default {
   user-select: none;
-  color: var(--text);
+  color: $fallback--text;
+  color: var(--btnText, $fallback--text);
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
   border: none;
-  border-radius: var(--roundness);
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  background-color: var(--background);
+  box-shadow: $fallback--buttonShadow;
-  box-shadow: var(--shadow);
+  box-shadow: var(--buttonShadow);
   font-size: 1em;
   font-family: sans-serif;
-  font-family: var(--font);
+  font-family: var(--interfaceFont, sans-serif);
+
+  &.-sublime {
+    background: transparent;
+  }
+
+  i[class*="icon-"],
+  .svg-inline--fa {
+    color: $fallback--text;
+    color: var(--btnText, $fallback--text);
+  }
 
   &::-moz-focus-inner {
     border: none;
   }
 
+  &:hover {
+    box-shadow: 0 0 4px rgb(255 255 255 / 30%);
+    box-shadow: var(--buttonHoverShadow);
+  }
+
+  &:active {
+    box-shadow:
+      0 0 4px 0 rgb(255 255 255 / 30%),
+      0 1px 0 0 rgb(0 0 0 / 20%) inset,
+      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
+    box-shadow: var(--buttonPressedShadow);
+    color: $fallback--text;
+    color: var(--btnPressedText, $fallback--text);
+    background-color: $fallback--fg;
+    background-color: var(--btnPressed, $fallback--fg);
+
+    svg,
+    i {
+      color: $fallback--text;
+      color: var(--btnPressedText, $fallback--text);
+    }
+  }
+
   &:disabled {
     cursor: not-allowed;
-  }
+    color: $fallback--text;
-}
+    color: var(--btnDisabledText, $fallback--text);
+    background-color: $fallback--fg;
+    background-color: var(--btnDisabled, $fallback--fg);
 
-.menu-item,
+    svg,
-.list-item {
+    i {
-  display: block;
+      color: $fallback--text;
-  box-sizing: border-box;
+      color: var(--btnDisabledText, $fallback--text);
-  border: none;
+    }
-  outline: none;
-  text-align: initial;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: 400;
-  cursor: pointer;
-  color: inherit;
-  clear: both;
-  position: relative;
-  white-space: nowrap;
-  border-color: var(--border);
-  border-style: solid;
-  border-width: 0;
-  border-top-width: 1px;
-  width: 100%;
-  line-height: var(--__line-height);
-  padding: var(--__vertical-gap) var(--__horizontal-gap);
-  background: transparent;
-
-  --__line-height: 1.5em;
-  --__horizontal-gap: 0.75em;
-  --__vertical-gap: 0.5em;
-
-  &.-non-interactive {
-    cursor: auto;
   }
 
-  &.-active,
+  &.toggled {
-  &:hover {
+    color: $fallback--text;
-    border-top-width: 1px;
+    color: var(--btnToggledText, $fallback--text);
-    border-bottom-width: 1px;
+    background-color: $fallback--fg;
+    background-color: var(--btnToggled, $fallback--fg);
+    box-shadow:
+      0 0 4px 0 rgb(255 255 255 / 30%),
+      0 1px 0 0 rgb(0 0 0 / 20%) inset,
+      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
+    box-shadow: var(--buttonPressedShadow);
+
+    svg,
+    i {
+      color: $fallback--text;
+      color: var(--btnToggledText, $fallback--text);
+    }
   }
 
-  &.-active + &,
+  &.danger {
-  &:hover + & {
+    // TODO: add better color variable
-    border-top-width: 0;
+    color: $fallback--text;
-  }
+    color: var(--alertErrorPanelText, $fallback--text);
-
+    background-color: $fallback--alertError;
-  &:hover + .menu-item-collapsible:not(.-expanded) + &,
+    background-color: var(--alertError, $fallback--alertError);
-  &.-active + .menu-item-collapsible:not(.-expanded) + & {
-    border-top-width: 0;
-  }
-
-  &[aria-expanded="true"] {
-    border-bottom-width: 1px;
-  }
-
-  a,
-  button:not(.button-default) {
-    text-align: initial;
-    padding: 0;
-    background: none;
-    border: none;
-    outline: none;
-    display: inline;
-    font-size: 100%;
-    font-family: inherit;
-    line-height: unset;
-    color: var(--text);
-  }
-
-  &:first-child {
-    border-top-right-radius: var(--roundness);
-    border-top-left-radius: var(--roundness);
-    border-top-width: 0;
-  }
-
-  &:last-child {
-    border-bottom-right-radius: var(--roundness);
-    border-bottom-left-radius: var(--roundness);
-    border-bottom-width: 0;
   }
 }
 
 .button-unstyled {
+  background: none;
   border: none;
   outline: none;
   display: inline;
   text-align: initial;
   font-size: 100%;
   font-family: inherit;
-  box-shadow: var(--shadow);
-  background-color: transparent;
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -483,23 +473,28 @@ nav {
   color: inherit;
 
   &.-link {
-    /* stylelint-disable-next-line declaration-no-important */
+    color: $fallback--link;
-    color: var(--link) !important;
+    color: var(--link, $fallback--link);
+  }
+
+  &.-fullwidth {
+    width: 100%;
+  }
+
+  &.-hover-highlight {
+    &:hover svg {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
   }
 }
 
 input,
-textarea {
+textarea,
-  border: none;
-  display: inline-block;
-  outline: none;
-}
-
 .input {
   &.unstyled {
     border-radius: 0;
-    /* stylelint-disable-next-line declaration-no-important */
+    background: none;
-    background: none !important;
     box-shadow: none;
     height: unset;
   }
@@ -507,11 +502,19 @@ textarea {
   --_padding: 0.5em;
 
   border: none;
-  border-radius: var(--roundness);
+  border-radius: $fallback--inputRadius;
-  background-color: var(--background);
+  border-radius: var(--inputRadius, $fallback--inputRadius);
-  color: var(--text);
+  box-shadow:
-  box-shadow: var(--shadow);
+    0 1px 0 0 rgb(0 0 0 / 20%) inset,
-  font-family: var(--font);
+    0 -1px 0 0 rgb(255 255 255 / 20%) inset,
+    0 0 2px 0 rgb(0 0 0 / 100%) inset;
+  box-shadow: var(--inputShadow);
+  background-color: $fallback--fg;
+  background-color: var(--input, $fallback--fg);
+  color: $fallback--lightText;
+  color: var(--inputText, $fallback--lightText);
+  font-family: sans-serif;
+  font-family: var(--inputFont, sans-serif);
   font-size: 1em;
   margin: 0;
   box-sizing: border-box;
@@ -525,6 +528,7 @@ textarea {
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
+    opacity: 0.5;
   }
 
   &[type="range"] {
@@ -539,9 +543,9 @@ textarea {
     display: none;
 
     &:checked + label::before {
-      box-shadow: var(--shadow);
+      box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
-      background-color: var(--background);
+      box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
-      color: var(--text);
+      background-color: var(--accent, $fallback--link);
     }
 
     &:disabled {
@@ -555,14 +559,16 @@ textarea {
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: "•";
+      content: "";
       transition: box-shadow 200ms;
       width: 1.1em;
       height: 1.1em;
       border-radius: 100%; // Radio buttons should always be circle
-      background-color: var(--background);
+      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--shadow);
+      box-shadow: var(--inputShadow);
       margin-right: 0.5em;
+      background-color: $fallback--fg;
+      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -575,9 +581,8 @@ textarea {
 
   &[type="checkbox"] {
     &:checked + label::before {
-      color: var(--text);
+      color: $fallback--text;
-      background-color: var(--background);
+      color: var(--inputText, $fallback--text);
-      box-shadow: var(--shadow);
     }
 
     &:disabled {
@@ -595,9 +600,13 @@ textarea {
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: var(--roundness);
+      border-radius: $fallback--checkboxRadius;
-      box-shadow: var(--shadow);
+      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+      box-shadow: 0 0 2px black inset;
+      box-shadow: var(--inputShadow);
       margin-right: 0.5em;
+      background-color: $fallback--fg;
+      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -614,14 +623,16 @@ textarea {
 }
 
 // Textareas should have stock line-height + vertical padding instead of huge line-height
-textarea.input {
+textarea {
   padding: var(--_padding);
   line-height: var(--post-line-height);
 }
 
 option {
-  color: var(--text);
+  color: $fallback--text;
-  background-color: var(--background);
+  color: var(--text, $fallback--text);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
 }
 
 .hide-number-spinner {
@@ -642,7 +653,7 @@ option {
 
   li {
     border: 1px solid var(--border);
-    border-radius: var(--roundness);
+    border-radius: var(--inputRadius);
     padding: 0.5em;
     margin: 0.25em;
   }
@@ -703,58 +714,74 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.-dot,
+  &.badge-notification {
-  &.-counter {
+    background-color: $fallback--cRed;
-    margin: 0;
+    background-color: var(--badgeNotification, $fallback--cRed);
-    position: absolute;
+    color: white;
-  }
+    color: var(--badgeNotificationText, white);
-
-  &.-dot {
-    min-height: 8px;
-    max-height: 8px;
-    min-width: 8px;
-    max-width: 8px;
-    padding: 0;
-    line-height: 0;
-    font-size: 0;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-  }
-
-  &.-counter {
-    border-radius: var(--roundness);
-    font-size: 0.75em;
-    line-height: 1;
-    text-align: right;
-    padding: 0.2em;
-    min-width: 0;
-    left: calc(50% - 0.5em);
-    top: calc(50% - 0.4em);
-    margin-left: 0.7em;
-    margin-top: -1em;
   }
 }
 
 .alert {
   margin: 0 0.35em;
   padding: 0 0.25em;
-  border-radius: var(--roundness);
+  border-radius: $fallback--tooltipRadius;
-  border: 1px solid var(--border);
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+
+  &.error {
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
+    color: $fallback--text;
+    color: var(--alertErrorText, $fallback--text);
+
+    .panel-heading & {
+      color: $fallback--text;
+      color: var(--alertErrorPanelText, $fallback--text);
+    }
+  }
+
+  &.warning {
+    background-color: $fallback--alertWarning;
+    background-color: var(--alertWarning, $fallback--alertWarning);
+    color: $fallback--text;
+    color: var(--alertWarningText, $fallback--text);
+
+    .panel-heading & {
+      color: $fallback--text;
+      color: var(--alertWarningPanelText, $fallback--text);
+    }
+  }
+
+  &.success {
+    background-color: var(--alertSuccess, $fallback--alertWarning);
+    color: var(--alertSuccessText, $fallback--text);
+
+    .panel-heading & {
+      color: var(--alertSuccessPanelText, $fallback--text);
+    }
+  }
 }
 
 .faint {
-  --text: var(--textFaint);
+  color: $fallback--faint;
-  --link: var(--linkFaint);
+  color: var(--faint, $fallback--faint);
+}
 
-  color: var(--text);
+.faint-link {
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .visibility-notice {
   padding: 0.5em;
-  border: 1px solid var(--textFaint);
+  border: 1px solid $fallback--faint;
-  border-radius: var(--roundness);
+  border: 1px solid var(--faint, $fallback--faint);
+  border-radius: $fallback--inputRadius;
+  border-radius: var(--inputRadius, $fallback--inputRadius);
 }
 
 .notice-dismissible {
@@ -775,10 +802,6 @@ option {
   &.iconLetter {
     font-size: 1.1em;
   }
-
-  &.svg-inline--fa {
-    vertical-align: -0.15em;
-  }
 }
 
 .fa-old-padding {
@@ -793,11 +816,6 @@ option {
   opacity: 0.25;
 }
 
-.timeago {
-  --link: var(--text);
-  --linkFaint: var(--textFaint);
-}
-
 .login-hint {
   text-align: center;
 
@@ -896,8 +914,3 @@ option {
   padding: 0;
   position: absolute;
 }
-
-*::selection {
-  color: var(--selectionText);
-  background-color: var(--selectionBackground);
-}

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-show="$store.state.interface.themeApplied"
     id="app-loaded"
     :style="bgStyle"
   >

src/_variables.scss

@@ -0,0 +1,36 @@
+$main-color: #f58d2c;
+$main-background: white;
+$darkened-background: whitesmoke;
+
+$fallback--bg: #121a24;
+$fallback--fg: #182230;
+$fallback--faint: rgb(185 185 186 / 50%);
+$fallback--text: #b9b9ba;
+$fallback--link: #d8a070;
+$fallback--icon: #666;
+$fallback--lightBg: rgb(21 30 42);
+$fallback--lightText: #b9b9ba;
+$fallback--border: #222;
+$fallback--cRed: #f00;
+$fallback--cBlue: #0095ff;
+$fallback--cGreen: #0fa00f;
+$fallback--cOrange: orange;
+
+$fallback--alertError: rgb(211 16 20 / 50%);
+$fallback--alertWarning: rgb(111 111 20 / 50%);
+
+$fallback--panelRadius: 10px;
+$fallback--checkboxRadius: 2px;
+$fallback--btnRadius: 4px;
+$fallback--inputRadius: 4px;
+$fallback--tooltipRadius: 5px;
+$fallback--avatarRadius: 4px;
+$fallback--avatarAltRadius: 10px;
+$fallback--attachmentRadius: 10px;
+$fallback--chatMessageRadius: 10px;
+
+$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
+  0 1px 0 0 rgb(255 255 255 / 20%) inset,
+  0 -1px 0 0 rgb(0 0 0 / 20%) inset;
+
+$status-margin: 0.75em;

src/boot/after_store.js

@@ -14,7 +14,7 @@ import { windowWidth, windowHeight } from '../services/window_utils/window_utils
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
-import { applyTheme, applyConfig, tryLoadCache } from '../services/style_setter/style_setter.js'
+import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
@@ -328,14 +328,17 @@ const setConfig = async ({ store }) => {
 }
 
 const checkOAuthToken = async ({ store }) => {
-  if (store.getters.getUserToken()) {
+  // eslint-disable-next-line no-async-promise-executor
-    try {
+  return new Promise(async (resolve, reject) => {
-      await store.dispatch('loginUser', store.getters.getUserToken())
+    if (store.getters.getUserToken()) {
-    } catch (e) {
+      try {
-      console.error(e)
+        await store.dispatch('loginUser', store.getters.getUserToken())
+      } catch (e) {
+        console.error(e)
+      }
     }
-  }
+    resolve()
-  return Promise.resolve()
+  })
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
@@ -353,25 +356,20 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   await setConfig({ store })
 
-  const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
+  const { customTheme, customThemeSource } = store.state.config
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  if (!forceThemeRecompilation && tryLoadCache()) {
+  if (customThemePresent) {
-    store.commit('setThemeApplied')
+    if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-  } else {
+      applyTheme(customThemeSource)
-    if (customThemePresent) {
-      if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-        applyTheme(customThemeSource)
-      } else {
-        applyTheme(customTheme)
-      }
-      store.commit('setThemeApplied')
-    } else if (theme) {
-      // do nothing, it will load asynchronously
     } else {
-      console.error('Failed to load any theme!')
+      applyTheme(customTheme)
     }
+  } else if (theme) {
+    // do nothing, it will load asynchronously
+  } else {
+    console.error('Failed to load any theme!')
   }
 
   applyConfig(store.state.config)

src/boot/routes.js

@@ -25,7 +25,6 @@ import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
 import ListsEdit from 'components/lists_edit/lists_edit.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
-import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -52,7 +51,6 @@ export default (store) => {
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
     { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-    { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
     {
       name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',

src/components/account_actions/account_actions.vue

@@ -11,14 +11,14 @@
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="dropdown-item menu-item"
+              class="btn button-default dropdown-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="dropdown-item menu-item"
+              class="btn button-default dropdown-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -31,34 +31,34 @@
           <UserListMenu :user="user" />
           <button
             v-if="relationship.followed_by"
-            class="dropdown-item menu-item"
+            class="btn button-default btn-block dropdown-item"
             @click="removeUserFromFollowers"
           >
             {{ $t('user_card.remove_follower') }}
           </button>
           <button
             v-if="relationship.blocking"
-            class="dropdown-item menu-item"
+            class="btn button-default btn-block dropdown-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="dropdown-item menu-item"
+            class="btn button-default btn-block dropdown-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="dropdown-item menu-item"
+            class="btn button-default btn-block dropdown-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="dropdown-item menu-item"
+            class="btn button-default btn-block dropdown-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
@@ -122,12 +122,19 @@
 <script src="./account_actions.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .AccountActions {
   .ellipsis-button {
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;
     text-align: center;
+
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
   }
 }
 </style>

src/components/alert.style.js

@@ -1,51 +0,0 @@
-export default {
-  name: 'Alert',
-  selector: '.alert',
-  validInnerComponents: [
-    'Text',
-    'Icon',
-    'Link',
-    'Border',
-    'ButtonUnstyled'
-  ],
-  variants: {
-    normal: '.neutral',
-    error: '.error',
-    warning: '.warning',
-    success: '.success'
-  },
-  defaultRules: [
-    {
-      directives: {
-        background: '--text',
-        opacity: 0.5,
-        blur: '9px'
-      }
-    },
-    {
-      parent: {
-        component: 'Alert'
-      },
-      component: 'Border',
-      textColor: '--parent'
-    },
-    {
-      variant: 'error',
-      directives: {
-        background: '--cRed'
-      }
-    },
-    {
-      variant: 'warning',
-      directives: {
-        background: '--cOrange'
-      }
-    },
-    {
-      variant: 'success',
-      directives: {
-        background: '--cGreen'
-      }
-    }
-  ]
-}

src/components/announcement/announcement.vue

@@ -99,14 +99,16 @@
 <script src="./announcement.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .announcement {
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border, $fallback--border);
   border-radius: 0;
-  padding: var(--status-margin);
+  padding: var(--status-margin, $status-margin);
 
   .heading,
   .body {
-    margin-bottom: var(--status-margin);
+    margin-bottom: var(--status-margin, $status-margin);
   }
 
   .footer {

src/components/announcement_editor/announcement_editor.vue

@@ -3,7 +3,7 @@
     <textarea
       ref="textarea"
       v-model="announcement.content"
-      class="input post-textarea"
+      class="post-textarea"
       rows="1"
       cols="1"
       :placeholder="$t('announcements.post_placeholder')"
@@ -14,7 +14,6 @@
       <input
         id="announcement-start-time"
         v-model="announcement.startsAt"
-        class="input"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
       >
@@ -24,7 +23,6 @@
       <input
         id="announcement-end-time"
         v-model="announcement.endsAt"
-        class="input"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
       >

src/components/announcements_page/announcements_page.vue

@@ -61,13 +61,15 @@
 <script src="./announcements_page.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .announcements-page {
   .post-form {
-    padding: var(--status-margin);
+    padding: var(--status-margin, $status-margin);
 
     .heading,
     .body {
-      margin-bottom: var(--status-margin);
+      margin-bottom: var(--status-margin, $status-margin);
     }
 
     .post-button {

src/components/attachment/attachment.scss

@@ -1,3 +1,5 @@
+@import "../../variables";
+
 .Attachment {
   display: inline-flex;
   flex-direction: column;
@@ -7,8 +9,10 @@
   height: 100%;
   border-style: solid;
   border-width: 1px;
-  border-radius: var(--roundness);
+  border-radius: $fallback--attachmentRadius;
-  border-color: var(--border);
+  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
 
   .attachment-wrapper {
     flex: 1 1 auto;
@@ -80,13 +84,6 @@
     }
   }
 
-  .video-container {
-    border: none;
-    outline: none;
-    color: inherit;
-    background: transparent;
-  }
-
   .audio-container {
     display: flex;
     align-items: flex-end;
@@ -129,12 +126,23 @@
 
     .attachment-button {
       padding: 0;
-      border-radius: var(--roundness);
+      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       text-align: center;
       width: 2em;
       height: 2em;
       margin-left: 0.5em;
       font-size: 1.25em;
+      // TODO: theming? hard to theme with unknown background image color
+      background: rgb(230 230 230 / 70%);
+
+      .svg-inline--fa {
+        color: rgb(0 0 0 / 60%);
+      }
+
+      &:hover .svg-inline--fa {
+        color: rgb(0 0 0 / 90%);
+      }
     }
   }
 
@@ -209,7 +217,8 @@
 
   &.-placeholder {
     display: inline-block;
-    color: var(--link);
+    color: $fallback--link;
+    color: var(--postLink, $fallback--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;

src/components/attachment/attachment.style.js

@@ -1,24 +0,0 @@
-export default {
-  name: 'Attachment',
-  selector: '.Attachment',
-  validInnerComponents: [
-    'Border',
-    'ButtonUnstyled',
-    'Input'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3
-      }
-    },
-    {
-      component: 'ButtonUnstyled',
-      parent: { component: 'Attachment' },
-      directives: {
-        background: '#FFFFFF',
-        opacity: 0.5
-      }
-    }
-  ]
-}

src/components/attachment/attachment.vue

@@ -38,7 +38,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="input description-field"
+        class="description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >
@@ -175,6 +175,7 @@
         :is="videoTag"
         v-if="type === 'video' && !hidden"
         class="video-container"
+        :class="{ 'button-unstyled': 'isModal' }"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >
@@ -252,7 +253,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="input description-field"
+        class="description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >

src/components/autosuggest/autosuggest.vue

@@ -1,4 +1,3 @@
-<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
 <template>
   <div
     v-click-outside="onClickOutside"
@@ -7,12 +6,12 @@
     <input
       v-model="term"
       :placeholder="placeholder"
-      class="input autosuggest-input"
+      class="autosuggest-input"
       @click="onInputClick"
     >
     <div
       v-if="resultsVisible && filtered.length > 0"
-      class="panel autosuggest-results"
+      class="autosuggest-results"
     >
       <slot
         v-for="item in filtered"
@@ -25,6 +24,8 @@
 <script src="./autosuggest.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .autosuggest {
   position: relative;
 
@@ -39,15 +40,18 @@
     top: 100%;
     right: 0;
     max-height: 400px;
-    background-color: var(--bg);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
     border-style: solid;
     border-width: 1px;
-    border-color: var(--border);
+    border-color: $fallback--border;
-    border-radius: var(--roundness);
+    border-color: var(--border, $fallback--border);
+    border-radius: $fallback--inputRadius;
+    border-radius: var(--inputRadius, $fallback--inputRadius);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--shadow);
+    box-shadow: var(--panelShadow);
     overflow-y: auto;
     z-index: 1;
   }

src/components/avatar_list/avatar_list.vue

@@ -17,6 +17,8 @@
 <script src="./avatar_list.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .avatars {
   display: flex;
   margin: 0;
@@ -34,7 +36,8 @@
     }
 
     .avatar-small {
-      border-radius: var(--roundness);
+      border-radius: $fallback--avatarAltRadius;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       height: 24px;
       width: 24px;
     }

src/components/badge.style.js

@@ -1,30 +0,0 @@
-export default {
-  name: 'Badge',
-  selector: '.badge',
-  validInnerComponents: [
-    'Text',
-    'Icon'
-  ],
-  variants: {
-    notification: '.-notification'
-  },
-  defaultRules: [
-    {
-      component: 'Root',
-      directives: {
-        '--badgeNotification': 'color | --cRed'
-      }
-    },
-    {
-      directives: {
-        background: '--cGreen'
-      }
-    },
-    {
-      variant: 'notification',
-      directives: {
-        background: '--cRed'
-      }
-    }
-  ]
-}

src/components/basic_user_card/basic_user_card.vue

@@ -47,6 +47,7 @@
   display: flex;
   flex: 1 0;
   margin: 0;
+  padding: 0.6em 1em;
 
   --emoji-size: 14px;
 

src/components/border.style.js

@@ -1,13 +0,0 @@
-export default {
-  name: 'Border',
-  selector: '/*border*/',
-  virtual: true,
-  defaultRules: [
-    {
-      directives: {
-        textColor: '$mod(--parent, 10)',
-        textAuto: 'no-auto'
-      }
-    }
-  ]
-}

src/components/button.style.js

@@ -1,101 +0,0 @@
-export default {
-  name: 'Button', // Name of the component
-  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: {
-    // States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
-    // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
-    // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
-    // normal: '' // normal state is implicitly added, it is always included
-    toggled: '.toggled',
-    pressed: ':active',
-    hover: ':hover:not(:disabled)',
-    focused: ':focus-within',
-    disabled: ':disabled'
-  },
-  // 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: '', // 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.
-  },
-  // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
-  validInnerComponents: [
-    'Text',
-    'Icon'
-  ],
-  // Default rules, used as "default theme", essentially.
-  defaultRules: [
-    {
-      component: 'Root',
-      directives: {
-        '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
-        '--defaultButtonShadow': 'shadow | 0 0 2 #000000',
-        '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
-        '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
-      }
-    },
-    {
-      // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
-      // like within it
-      directives: {
-        background: '--fg',
-        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
-        roundness: 3
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
-      }
-    },
-    {
-      state: ['pressed'],
-      directives: {
-        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
-      }
-    },
-    {
-      state: ['hover', 'pressed'],
-      directives: {
-        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
-      }
-    },
-    {
-      state: ['toggled'],
-      directives: {
-        background: '--inheritedBackground,-14.2',
-        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
-      }
-    },
-    {
-      state: ['toggled', 'hover'],
-      directives: {
-        background: '--inheritedBackground,-14.2',
-        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
-      }
-    },
-    {
-      state: ['disabled'],
-      directives: {
-        background: '$blend(--inheritedBackground, 0.25, --parent)',
-        shadow: ['--defaultButtonBevel']
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'Button',
-        state: ['disabled']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
-      }
-    }
-  ]
-}

src/components/button_unstyled.style.js

@@ -1,96 +0,0 @@
-export default {
-  name: 'ButtonUnstyled',
-  selector: '.button-unstyled',
-  states: {
-    toggled: '.toggled',
-    disabled: ':disabled',
-    hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
-  },
-  validInnerComponents: [
-    'Text',
-    'Icon',
-    'Badge'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '#ffffff',
-        opacity: 0,
-        shadow: []
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['hover']
-      },
-      directives: {
-        textColor: '--parent--text'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['toggled']
-      },
-      directives: {
-        textColor: '--parent--text'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['toggled', 'hover']
-      },
-      directives: {
-        textColor: '--parent--text'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['toggled', 'focused']
-      },
-      directives: {
-        textColor: '--parent--text'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['toggled', 'focused', 'hover']
-      },
-      directives: {
-        textColor: '--parent--text'
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['disabled']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['disabled']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
-      }
-    }
-  ]
-}

src/components/chat/chat.scss

@@ -11,15 +11,15 @@
 
   .chat-view-body {
     box-sizing: border-box;
+    background-color: var(--chatBg, $fallback--bg);
     display: flex;
     flex-direction: column;
     width: 100%;
     overflow: visible;
     min-height: calc(100vh - var(--navbar-height));
     margin: 0;
-    border-radius: var(--roundness);
+    border-radius: 10px 10px 0 0;
-    border-bottom-left-radius: 0;
+    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
-    border-bottom-right-radius: 0;
 
     &::after {
       border-radius: 0;
@@ -37,6 +37,8 @@
   .footer {
     position: sticky;
     bottom: 0;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
     z-index: 1;
   }
 
@@ -59,6 +61,8 @@
     position: absolute;
     right: 1.3em;
     top: -3.2em;
+    background-color: $fallback--fg;
+    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -75,6 +79,12 @@
       visibility: visible;
     }
 
+    i {
+      font-size: 1em;
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;

src/components/chat/chat.style.js

@@ -1,19 +0,0 @@
-export default {
-  name: 'Chat',
-  selector: '.chat-message-list',
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Avatar',
-    'ChatMessage'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        blur: '5px'
-      }
-    }
-  ]
-}

src/components/chat/chat.vue

@@ -26,7 +26,7 @@
           </div>
         </div>
         <div
-          class="chat-message-list message-list"
+          class="message-list"
           :style="{ height: scrollableContainerHeight }"
         >
           <template v-if="!errorLoadingChat">
@@ -61,7 +61,7 @@
               <FAIcon icon="chevron-down" />
               <div
                 v-if="newMessageCount"
-                class="badge -notification unread-chat-count unread-message-count"
+                class="badge badge-notification unread-chat-count unread-message-count"
               >
                 {{ newMessageCount }}
               </div>
@@ -95,5 +95,6 @@
 
 <script src="./chat.js"></script>
 <style lang="scss">
+@import "../../variables";
 @import "./chat";
 </style>

src/components/chat_list/chat_list.vue

@@ -45,6 +45,8 @@
 <script src="./chat_list.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .chat-list {
   min-height: 25em;
   margin-bottom: 0;
@@ -55,7 +57,8 @@
   font-size: 1.2em;
   display: flex;
   justify-content: center;
-  color: var(--textFaint);
+  color: $fallback--text;
+  color: var(--faint, $fallback--text);
 }
 
 </style>

src/components/chat_list_item/chat_list_item.scss

@@ -1,6 +1,8 @@
 .chat-list-item {
   display: flex;
   flex-direction: row;
+  padding: 0.75em;
+  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -9,6 +11,11 @@
     outline: none;
   }
 
+  &:hover {
+    background-color: var(--selectedPost, $fallback--lightBg);
+    box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
+  }
+
   .chat-list-item-left {
     margin-right: 1em;
   }
@@ -22,7 +29,7 @@
 
   .heading {
     width: 100%;
-    display: flex;
+    display: inline-flex;
     justify-content: space-between;
     line-height: 1em;
   }
@@ -40,17 +47,18 @@
   }
 
   .chat-preview {
-    display: flex;
+    display: inline-flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: var(--textFaint);
+    color: $fallback--text;
+    color: var(--faint, $fallback--text);
     width: 100%;
   }
 
   a {
-    color: var(--linkFaint);
+    color: var(--faintLink, $fallback--link);
     text-decoration: none;
     pointer-events: none;
   }
@@ -65,6 +73,11 @@
     }
   }
 
+  .Avatar {
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+  }
+
   .chat-preview-body {
     --emoji-size: 1.4em;
 

src/components/chat_list_item/chat_list_item.vue

@@ -36,7 +36,7 @@
         />
         <div
           v-if="chat.unread > 0"
-          class="badge -notification unread-chat-count"
+          class="badge badge-notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>
@@ -48,5 +48,6 @@
 <script src="./chat_list_item.js"></script>
 
 <style lang="scss">
+@import "../../variables";
 @import "./chat_list_item";
 </style>

src/components/chat_message/chat_message.scss

@@ -1,3 +1,5 @@
+@import "../../variables";
+
 .chat-message-wrapper {
   &.hovered-message-chain {
     .animated.Avatar {
@@ -25,6 +27,12 @@
 
   .menu-icon {
     cursor: pointer;
+
+    &:hover,
+    .extra-button-popover.open & {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
   }
 
   .popover {
@@ -53,12 +61,10 @@
   }
 
   .status {
-    background-color: var(--background);
+    border-radius: $fallback--chatMessageRadius;
-    color: var(--text);
+    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
-    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
-    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -91,7 +97,8 @@
   .error {
     .status-content.media-body,
     .created-at {
-      color: var(--badgeNotification);
+      color: $fallback--cRed;
+      color: var(--badgeNotification, $fallback--cRed);
     }
   }
 
@@ -110,6 +117,16 @@
     align-content: end;
     justify-content: flex-end;
 
+    a {
+      color: var(--chatMessageOutgoingLink, $fallback--link);
+    }
+
+    .status {
+      color: var(--chatMessageOutgoingText, $fallback--text);
+      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
+      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
+    }
+
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -120,6 +137,22 @@
   }
 
   .incoming {
+    a {
+      color: var(--chatMessageIncomingLink, $fallback--link);
+    }
+
+    .status {
+      color: var(--chatMessageIncomingText, $fallback--text);
+      background-color: var(--chatMessageIncomingBg, $fallback--bg);
+      border: 1px solid var(--chatMessageIncomingBorder, --border);
+    }
+
+    .created-at {
+      a {
+        color: var(--chatMessageIncomingText, $fallback--text);
+      }
+    }
+
     .chat-message-menu {
       left: 0.4rem;
     }
@@ -143,5 +176,6 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: var(--textFaint);
+  color: $fallback--text;
+  color: var(--faintedText, $fallback--text);
 }

src/components/chat_message/chat_message.style.js

@@ -1,30 +0,0 @@
-export default {
-  name: 'ChatMessage',
-  selector: '.chat-message',
-  variants: {
-    outgoing: '.outgoing'
-  },
-  validInnerComponents: [
-    'Text',
-    'Icon',
-    'Border',
-    'Button',
-    'RichContent',
-    'Attachment',
-    'PollGraph'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg, 2',
-        backgroundNoCssColor: 'yes'
-      }
-    },
-    {
-      variant: 'outgoing',
-      directives: {
-        background: '--bg, 5'
-      }
-    }
-  ]
-}

src/components/chat_message/chat_message.vue

@@ -53,7 +53,7 @@
                 <template #content>
                   <div class="dropdown-menu">
                     <button
-                      class="menu-item dropdown-item dropdown-item-icon"
+                      class="button-default dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}

src/components/chat_new/chat_new.scss

@@ -16,6 +16,11 @@
     padding-bottom: 0.7rem;
   }
 
+  .basic-user-card:hover {
+    cursor: pointer;
+    background-color: var(--selectedPost, $fallback--lightBg);
+  }
+
   .go-back-button {
     text-align: center;
     line-height: 1;

src/components/chat_new/chat_new.vue

@@ -16,29 +16,27 @@
         />
       </button>
     </div>
-    <div class="panel-body">
+    <div class="input-wrap">
-      <div class="input-wrap">
+      <div class="input-search">
-        <div class="input-search">
+        <FAIcon
-          <FAIcon
+          class="search-icon fa-scale-110 fa-old-padding"
-            class="search-icon fa-scale-110 fa-old-padding"
+          icon="search"
-            icon="search"
+        />
-          />
-        </div>
-        <input
-          ref="search"
-          v-model="query"
-          class="input"
-          placeholder="Search people"
-          @input="onInput"
-        >
       </div>
-      <div class="member-list">
+      <input
-        <div
+        ref="search"
-          v-for="user in availableUsers"
+        v-model="query"
-          :key="user.id"
+        placeholder="Search people"
-          class="list-item"
+        @input="onInput"
-          @click.capture.prevent="goToChat(user)"
+      >
-        >
+    </div>
+    <div class="member-list">
+      <div
+        v-for="user in availableUsers"
+        :key="user.id"
+        class="member"
+      >
+        <div @click.capture.prevent="goToChat(user)">
           <BasicUserCard :user="user" />
         </div>
       </div>
@@ -48,5 +46,6 @@
 
 <script src="./chat_new.js"></script>
 <style lang="scss">
+@import "../../variables";
 @import "./chat_new";
 </style>

src/components/chat_title/chat_title.vue

@@ -26,6 +26,8 @@
 <script src="./chat_title.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .chat-title {
   display: flex;
   overflow: hidden;
@@ -52,7 +54,8 @@
     margin-right: 0.5em;
     height: 1.5em;
     width: 1.5em;
-    border-radius: var(--roundness);
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 
     &.animated::before {
       display: none;

src/components/checkbox/checkbox.vue

@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input -checkbox checkbox-indicator"
+      class="checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -54,6 +54,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../../variables";
 @import "../../mixins";
 
 .checkbox {
@@ -61,15 +62,9 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
-  & > &-indicator {
+  &-indicator {
-    /* Reset .input stuff */
-    padding: 0;
-    margin: 0;
     position: relative;
-    line-height: inherit;
-    display: inline;
     padding-left: 1.2em;
-    box-shadow: none;
   }
 
   &-indicator::before {
@@ -81,9 +76,12 @@ export default {
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: var(--roundness);
+    border-radius: $fallback--checkboxRadius;
-    box-shadow: var(--shadow);
+    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    background-color: var(--background);
+    box-shadow: 0 0 2px black inset;
+    box-shadow: var(--inputShadow);
+    background-color: $fallback--fg;
+    background-color: var(--input, $fallback--fg);
     vertical-align: top;
     text-align: center;
     line-height: 1.1em;
@@ -100,18 +98,21 @@ export default {
     }
 
     .label {
-      color: var(--text);
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
     }
   }
 
   input[type="checkbox"] {
     &:checked + .checkbox-indicator::before {
-      color: var(--text);
+      color: $fallback--text;
+      color: var(--inputText, $fallback--text);
     }
 
     &:indeterminate + .checkbox-indicator::before {
       content: "–";
-      color: var(--text);
+      color: $fallback--text;
+      color: var(--inputText, $fallback--text);
     }
   }
 

src/components/color_input/color_input.scss

@@ -1,3 +1,5 @@
+@import "../../variables";
+
 .color-input {
   display: inline-flex;
 
@@ -9,8 +11,9 @@
     padding: 0.2em 8px;
 
     input {
-      color: var(--text);
       background: none;
+      color: $fallback--lightText;
+      color: var(--inputText, $fallback--lightText);
       border: none;
       padding: 0;
       margin: 0;
@@ -20,38 +23,21 @@
         min-width: 3em;
         padding: 0;
       }
-    }
 
-    .nativeColor {
+      &.nativeColor {
-      cursor: pointer;
+        flex: 0 0 2em;
-      flex: 0 0 auto;
+        min-width: 2em;
-
+        align-self: stretch;
-      input {
+        min-height: 100%;
-        appearance: none;
-        max-width: 0;
-        min-width: 0;
-        max-height: 0;
-        /* stylelint-disable-next-line declaration-no-important */
-        opacity: 0 !important;
       }
     }
 
     .computedIndicator,
-    .validIndicator,
-    .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
-      margin: 0 0.5em;
       min-width: 2em;
       align-self: stretch;
-      min-height: 1.5em;
+      min-height: 100%;
-      border-radius: var(--roundness);
-    }
-
-    .invalidIndicator {
-      background: transparent;
-      box-sizing: border-box;
-      border: 2px solid var(--cRed);
     }
 
     .transparentIndicator {
@@ -72,13 +58,11 @@
       &::after {
         top: 0;
         left: 0;
-        border-top-left-radius: var(--roundness);
       }
 
       &::before {
         bottom: 0;
         right: 0;
-        border-bottom-right-radius: var(--roundness);
       }
     }
   }

src/components/color_input/color_input.vue

@@ -25,51 +25,30 @@
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
       >
-      <div
+      <input
         v-if="validColor"
-        class="validIndicator"
+        :id="name"
-        :style="{backgroundColor: modelValue || fallback}"
+        class="nativeColor unstyled"
-      />
+        type="color"
+        :value="modelValue || fallback"
+        :disabled="!present || disabled"
+        @input="$emit('update:modelValue', $event.target.value)"
+      >
       <div
-        v-else-if="transparentColor"
+        v-if="transparentColor"
         class="transparentIndicator"
       />
       <div
-        v-else-if="computedColor"
+        v-if="computedColor"
         class="computedIndicator"
         :style="{backgroundColor: fallback}"
       />
-      <div
-        v-else
-        class="invalidIndicator"
-      />
-      <label class="nativeColor">
-        <FAIcon icon="eye-dropper" />
-        <input
-          :id="name"
-          class="unstyled"
-          type="color"
-          :value="modelValue || fallback"
-          :disabled="!present || disabled"
-          @input="$emit('update:modelValue', $event.target.value)"
-        >
-      </label>
     </div>
   </div>
 </template>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
-
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faEyeDropper
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faEyeDropper
-)
-
 export default {
   components: {
     Checkbox
@@ -129,3 +108,12 @@ export default {
 }
 </script>
 <style lang="scss" src="./color_input.scss"></style>
+
+<style lang="scss">
+.color-control {
+  input.text-input {
+    max-width: 7em;
+    flex: 1;
+  }
+}
+</style>

src/components/conversation/conversation.js

@@ -56,8 +56,7 @@ const conversation = {
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
       statusContentPropertiesObject: {},
-      inlineDivePosition: null,
+      inlineDivePosition: null
-      loadStatusError: null
     }
   },
   props: [
@@ -393,15 +392,11 @@ const conversation = {
             this.setHighlight(this.originalStatusId)
           })
       } else {
-        this.loadStatusError = null
         this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()
           })
-          .catch((error) => {
-            this.loadStatusError = error
-          })
       }
     },
     getReplies (id) {

src/components/conversation/conversation.vue

@@ -28,27 +28,7 @@
         class="rightside-button"
       />
     </div>
-    <div
+    <div class="conversation-body panel-body">
-      v-if="isPage && !status"
-      class="conversation-body"
-      :class="{ 'panel-body': isExpanded }"
-    >
-      <p v-if="!loadStatusError">
-        <FAIcon
-          spin
-          icon="circle-notch"
-        />
-        {{ $t('status.loading') }}
-      </p>
-      <p v-else>
-        {{ $t('status.load_error', { error: loadStatusError }) }}
-      </p>
-    </div>
-    <div
-      v-else
-      class="conversation-body"
-      :class="{ 'panel-body': isExpanded }"
-    >
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -223,7 +203,6 @@
   </div>
   <div
     v-else
-    class="Conversation -hidden"
     :style="hiddenStyle"
   />
 </template>
@@ -231,17 +210,14 @@
 <script src="./conversation.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .Conversation {
   z-index: 1;
 
-  &.-hidden {
-    background: var(--__panel-background);
-    backdrop-filter: var(--__panel-backdrop-filter);
-  }
-
   .conversation-dive-to-top-level-box {
-    padding: var(--status-margin);
+    padding: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border, $fallback--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -251,22 +227,20 @@
   }
 
   .thread-ancestors {
-    margin-left: var(--status-margin);
+    margin-left: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border);
+    border-left: 2px solid var(--border, $fallback--border);
   }
 
-  .thread-ancestor.-faded .RichContent {
+  .thread-ancestor.-faded .StatusContent {
-    /* stylelint-disable declaration-no-important */
+    --link: var(--faintLink);
-    --text: var(--textFaint) !important;
+    --text: var(--faint);
-    --link: var(--linkFaint) !important;
+
-    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    color: var(--text);
-    --funtextCyantext: var(--funtextCyantextFaint) !important;
-    /* stylelint-enable declaration-no-important */
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin);
+    padding-left: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border, $fallback--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -279,17 +253,16 @@
   }
 
   .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin);
+    padding: var(--status-margin, $status-margin);
   }
 
   .conversation-status {
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border, $fallback--border);
     border-radius: 0;
   }
 
   .thread-ancestor-has-other-replies .conversation-status,
-  &:last-child:not(.-expanded) .conversation-status,
+  &:last-child .conversation-status,
-  &.-expanded .conversation-status:last-child,
   .thread-ancestor:last-child .conversation-status,
   .thread-ancestor:last-child .thread-ancestor-dive-box,
   &.-expanded .thread-tree .conversation-status {
@@ -297,36 +270,20 @@
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--border, $fallback--border);
   }
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left: 4px solid var(--cRed);
+    border-left: 4px solid $fallback--cRed;
-    border-radius: var(--roundness);
+    border-left-color: var(--cRed, $fallback--cRed);
-    border-top-left-radius: 0;
+    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-top-right-radius: 0;
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--border, $fallback--border);
   }
 
   &.-expanded.status-fadein {
-    --___margin: calc(var(--status-margin) / 2);
+    margin: calc(var(--status-margin, $status-margin) / 2);
-
-    background: var(--background);
-    margin: var(--___margin);
-
-    &::before {
-      z-index: -1;
-      content: "";
-      display: block;
-      position: absolute;
-      top: calc(var(--___margin) * -1);
-      bottom: calc(var(--___margin) * -1);
-      left: calc(var(--___margin) * -1);
-      right: calc(var(--___margin) * -1);
-      background: var(--background);
-      backdrop-filter: var(--__panel-backdrop-filter);
-    }
   }
 }
 </style>

src/components/desktop_nav/desktop_nav.scss

@@ -1,3 +1,5 @@
+@import "../../variables";
+
 .DesktopNav {
   width: 100%;
   z-index: var(--ZI_navbar);
@@ -7,7 +9,7 @@
   }
 
   a {
-    color: var(--link);
+    color: var(--topBarLink, $fallback--link);
   }
 
   .inner-nav {
@@ -52,7 +54,27 @@
   .button-default {
     &,
     svg {
-      color: var(--text);
+      color: $fallback--text;
+      color: var(--btnTopBarText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPressedTopBar, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPressedTopBarText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnDisabledTopBarText, $fallback--text);
+    }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnToggledTopBarText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btnToggledTopBar, $fallback--fg);
     }
   }
 
@@ -72,7 +94,8 @@
       mask-repeat: no-repeat;
       mask-position: center;
       mask-size: contain;
-      background-color: var(--text);
+      background-color: $fallback--fg;
+      background-color: var(--topBarText, $fallback--fg);
       position: absolute;
       top: 0;
       bottom: 0;
@@ -93,7 +116,8 @@
     text-align: center;
 
     .svg-inline--fa {
-      color: var(--link);
+      color: $fallback--link;
+      color: var(--topBarLink, $fallback--link);
     }
   }
 

src/components/dialog_modal/dialog_modal.vue

@@ -12,7 +12,7 @@
           <slot name="header" />
         </div>
       </div>
-      <div class="panel-body dialog-modal-content">
+      <div class="dialog-modal-content">
         <slot name="default" />
       </div>
       <div class="dialog-modal-footer user-interactions panel-footer">
@@ -25,6 +25,8 @@
 <script src="./dialog_modal.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
@@ -52,6 +54,8 @@
   z-index: 2001;
   cursor: default;
   display: block;
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
 
   .dialog-modal-heading {
     .title {
@@ -62,13 +66,18 @@
   .dialog-modal-content {
     margin: 0;
     padding: 1rem;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
     white-space: normal;
   }
 
   .dialog-modal-footer {
     margin: 0;
     padding: 0.5em;
-    border-top: 1px solid var(--border);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
     display: flex;
     justify-content: flex-end;
 

src/components/emoji_input/emoji_input.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="root"
-    class="input emoji-input"
+    class="emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot
@@ -68,9 +68,9 @@
             v-for="(suggestion, index) in suggestions"
             :id="suggestionItemId(index)"
             :key="index"
-            class="menu-item autocomplete-item"
+            class="autocomplete-item"
             role="option"
-            :class="{ '-active': index === highlighted }"
+            :class="{ highlighted: index === highlighted }"
             :aria-label="autoCompleteItemLabel(suggestion)"
             :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"
@@ -110,8 +110,9 @@
 <script src="./emoji_input.js"></script>
 
 <style lang="scss">
-.input.emoji-input {
+@import "../../variables";
-  padding: 0;
+
+.emoji-input {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -126,7 +127,8 @@
     line-height: 24px;
 
     &:hover i {
-      color: var(--text);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
   }
 
@@ -143,12 +145,6 @@
   input,
   textarea {
     flex: 1 0 auto;
-    color: inherit;
-    /* stylelint-disable-next-line declaration-no-important */
-    background: none !important;
-    box-shadow: none;
-    border: none;
-    outline: none;
   }
 
   &.with-picker input {
@@ -183,28 +179,26 @@
     position: absolute;
   }
 
-  &-item.menu-item {
+  &-item {
     display: flex;
-    padding-top: 0;
+    cursor: pointer;
-    padding-bottom: 0;
+    padding: 0.2em 0.4em;
+    border-bottom: 1px solid rgb(0 0 0 / 40%);
+    height: 32px;
 
     .image {
-      width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      width: 32px;
-      height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      height: 32px;
-      line-height: var(--__line-height);
+      line-height: 32px;
       text-align: center;
-      margin-right: var(--__horizontal-gap);
+      font-size: 32px;
+      margin-right: 4px;
 
       img {
-        width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        width: 32px;
-        height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        height: 32px;
         object-fit: contain;
       }
-
-      span {
-        font-size: var(--__line-height);
-        line-height: var(--__line-height);
-      }
     }
 
     .label {
@@ -222,6 +216,17 @@
         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);
+      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
+      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
+    }
   }
 }
 </style>

src/components/emoji_picker/emoji_picker.scss

@@ -1,3 +1,5 @@
+@import "../../variables";
+
 $emoji-picker-header-height: 36px;
 $emoji-picker-header-picture-width: 32px;
 $emoji-picker-header-picture-height: 32px;
@@ -8,6 +10,15 @@ $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;
@@ -70,7 +81,8 @@ $emoji-picker-emoji-size: 32px;
   .additional-tabs {
     display: flex;
     border-left: 1px solid;
-    border-left-color: var(--border);
+    border-left-color: $fallback--icon;
+    border-left-color: var(--icon, $fallback--icon);
     padding-left: 7px;
     flex: 0 0 auto;
   }
@@ -97,8 +109,13 @@ $emoji-picker-emoji-size: 32px;
         pointer-events: none;
       }
 
-      &.toggled {
+      &.active {
         border-bottom: 4px solid;
+
+        svg {
+          color: $fallback--lightText;
+          color: var(--lightText, $fallback--lightText);
+        }
       }
     }
   }

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="button-unstyled emoji-tabs-item"
+            class="emoji-tabs-item"
             :class="{
-              toggled: activeGroupView === group.id
+              active: activeGroupView === group.id
             }"
             :title="group.text"
             role="button"
@@ -52,8 +52,8 @@
           class="additional-tabs"
         >
           <span
-            class="button-unstyled stickers-tab-icon additional-tabs-item"
+            class="stickers-tab-icon additional-tabs-item"
-            :class="{toggled: showingStickers}"
+            :class="{active: showingStickers}"
             :title="$t('emoji.stickers')"
             @click.prevent="toggleStickers"
           >
@@ -77,7 +77,7 @@
               ref="search"
               v-model="keyword"
               type="text"
-              class="input form-control"
+              class="form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
             >

src/components/emoji_reactions/emoji_reactions.vue

@@ -72,6 +72,7 @@
 
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
+@import "../../variables";
 @import "../../mixins";
 
 .EmojiReactions {
@@ -91,6 +92,7 @@
       padding: 0;
 
       .emoji-reaction-count-button {
+        background-color: var(--btn);
         margin: 0;
         height: 100%;
         border-top-left-radius: 0;
@@ -100,9 +102,11 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
+        color: $fallback--text;
+        color: var(--btnText, $fallback--text);
 
         &.-picked-reaction {
-          border: 1px solid var(--accent);
+          border: 1px solid var(--accent, $fallback--link);
           margin-right: -1px;
         }
       }
@@ -145,16 +149,18 @@
     }
 
     .svg-inline--fa {
-      color: var(--text);
+      color: $fallback--text;
+      color: var(--btnText, $fallback--text);
     }
 
     &.-picked-reaction {
-      border: 1px solid var(--accent);
+      border: 1px solid var(--accent, $fallback--link);
       margin-left: -1px; // offset the border, can't use inset shadows either
       margin-right: -1px;
 
       .svg-inline--fa {
-        color: var(--accent);
+        color: $fallback--link;
+        color: var(--accent, $fallback--link);
       }
     }
 
@@ -170,7 +176,8 @@
 
     @include focused-style {
       .svg-inline--fa {
-        color: var(--accent);
+        color: $fallback--link;
+        color: var(--accent, $fallback--link);
       }
 
       .focus-marker {

src/components/extra_buttons/extra_buttons.vue

@@ -12,13 +12,13 @@
   >
     <template #content="{close}">
       <div
-        :id="`popup-menu-${randomSeed}`"
         class="dropdown-menu"
         role="menu"
+        :id="`popup-menu-${randomSeed}`"
       >
         <button
           v-if="canMute && !status.thread_muted"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="muteConversation"
         >
@@ -29,7 +29,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unmuteConversation"
         >
@@ -40,7 +40,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
@@ -52,7 +52,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default 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="menu-item dropdown-item dropdown-item-icon"
+            class="button-default dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="bookmarkStatus"
             @click="close"
@@ -77,7 +77,7 @@
           </button>
           <button
             v-if="status.bookmarked"
-            class="menu-item dropdown-item dropdown-item-icon"
+            class="button-default dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="unbookmarkStatus"
             @click="close"
@@ -90,7 +90,7 @@
         </template>
         <button
           v-if="ownStatus && editingAvailable"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="editStatus"
           @click="close"
@@ -102,7 +102,7 @@
         </button>
         <button
           v-if="isEdited && editingAvailable"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="showStatusHistory"
           @click="close"
@@ -114,7 +114,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
@@ -125,7 +125,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="copyLink"
           @click="close"
@@ -137,7 +137,7 @@
         </button>
         <a
           v-if="!status.is_local"
-          class="menu-item dropdown-item dropdown-item-icon"
+          class="button-default 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="menu-item dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
@@ -201,6 +201,7 @@
 <script src="./extra_buttons.js"></script>
 
 <style lang="scss">
+@import "../../variables";
 @import "../../mixins";
 
 .ExtraButtons {
@@ -210,7 +211,8 @@
     margin: -10px;
 
     &:hover .svg-inline--fa {
-      color: var(--text);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
   }
 

src/components/extra_notifications/extra_notifications.vue

@@ -80,6 +80,8 @@
 <script src="./extra_notifications.js" />
 
 <style lang="scss">
+@import "../../variables";
+
 .ExtraNotifications {
   width: 100%;
   display: flex;
@@ -89,7 +91,8 @@
   .notification {
     width: 100%;
     border-bottom: 1px solid;
-    border-color: var(--border);
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
     display: flex;
     flex-direction: column;
     align-items: stretch;

src/components/favorite_button/favorite_button.vue

@@ -65,6 +65,7 @@
 <script src="./favorite_button.js"></script>
 
 <style lang="scss">
+@import "../../variables";
 @import "../../mixins";
 
 .FavoriteButton {
@@ -87,7 +88,8 @@
 
     &:hover .svg-inline--fa,
     &.-favorited .svg-inline--fa {
-      color: var(--cOrange);
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
     }
 
     @include unfocused-style {

src/components/flash/flash.vue

@@ -42,6 +42,8 @@
 <script src="./flash.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .Flash {
   display: inline-block;
   width: 100%;

src/components/font_control/font_control.vue

@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
+      class="opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@@ -44,7 +44,7 @@
       v-if="isCustom"
       :id="name"
       v-model="family"
-      class="input custom-font"
+      class="custom-font"
       type="text"
     >
   </div>
@@ -53,6 +53,8 @@
 <script src="./font_control.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .font-control {
   input.custom-font {
     min-width: 10em;

src/components/fun_text.style.js

@@ -1,40 +0,0 @@
-export default {
-  name: 'FunText',
-  selector: '/*fun-text*/',
-  virtual: true,
-  variants: {
-    greentext: '.greentext',
-    cyantext: '.cyantext'
-  },
-  states: {
-    faint: '.faint'
-  },
-  defaultRules: [
-    {
-      directives: {
-        textColor: '--text',
-        textAuto: 'preserve'
-      }
-    },
-    {
-      state: ['faint'],
-      directives: {
-        textOpacity: 0.5
-      }
-    },
-    {
-      variant: 'greentext',
-      directives: {
-        textColor: '--cGreen',
-        textAuto: 'preserve'
-      }
-    },
-    {
-      variant: 'cyantext',
-      directives: {
-        textColor: '--cBlue',
-        textAuto: 'preserve'
-      }
-    }
-  ]
-}

src/components/gallery/gallery.vue

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

src/components/global_notice_list/global_notice_list.vue

@@ -4,7 +4,7 @@
       v-for="(notice, index) in notices"
       :key="index"
       class="alert global-notice"
-      :class="{ [notice.level]: true }"
+      :class="{ ['global-' + notice.level]: true }"
     >
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
@@ -25,6 +25,8 @@
 <script src="./global_notice_list.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .global-notice-list {
   position: fixed;
   top: calc(var(--navbar-height) + 0.5em);
@@ -50,8 +52,48 @@
     }
   }
 
+  .global-error {
+    background-color: var(--alertPopupError, $fallback--cRed);
+    color: var(--alertPopupErrorText, $fallback--text);
+
+    .svg-inline--fa {
+      color: var(--alertPopupErrorText, $fallback--text);
+    }
+  }
+
+  .global-warning {
+    background-color: var(--alertPopupWarning, $fallback--cOrange);
+    color: var(--alertPopupWarningText, $fallback--text);
+
+    .svg-inline--fa {
+      color: var(--alertPopupWarningText, $fallback--text);
+    }
+  }
+
+  .global-success {
+    background-color: var(--alertPopupSuccess, $fallback--cGreen);
+    color: var(--alertPopupSuccessText, $fallback--text);
+
+    .svg-inline--fa {
+      color: var(--alertPopupSuccessText, $fallback--text);
+    }
+  }
+
+  .global-info {
+    background-color: var(--alertPopupNeutral, $fallback--fg);
+    color: var(--alertPopupNeutralText, $fallback--text);
+
+    .svg-inline--fa {
+      color: var(--alertPopupNeutralText, $fallback--text);
+    }
+  }
+
   .close-notice {
     padding-right: 0.2em;
+
+    .svg-inline--fa:hover {
+      opacity: 0.6;
+    }
   }
 }
 </style>

src/components/icon.style.js

@@ -1,14 +0,0 @@
-export default {
-  name: 'Icon',
-  virtual: true,
-  selector: '.svg-inline--fa',
-  defaultRules: [
-    {
-      component: 'Icon',
-      directives: {
-        textColor: '$blend(--stack, 0.5, --parent--text)',
-        textAuto: 'no-auto'
-      }
-    }
-  ]
-}

src/components/image_cropper/image_cropper.vue

@@ -41,7 +41,7 @@
     <input
       ref="input"
       type="file"
-      class="input image-cropper-img-input"
+      class="image-cropper-img-input"
       :accept="mimes"
     >
   </div>

src/components/importer/importer.vue

@@ -3,7 +3,6 @@
     <form>
       <input
         ref="input"
-        class="input"
         type="file"
         @change="change"
       >

src/components/input.style.js

@@ -1,60 +0,0 @@
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--text',
-  alpha: 1
-}
-
-export default {
-  name: 'Input',
-  selector: '.input',
-  variant: {
-    checkbox: '.-checkbox',
-    radio: '.-radio'
-  },
-  states: {
-    disabled: ':disabled',
-    hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
-  },
-  validInnerComponents: [
-    'Text'
-  ],
-  defaultRules: [
-    {
-      component: 'Root',
-      directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
-      }
-    },
-    {
-      variant: 'checkbox',
-      directives: {
-        roundness: 1
-      }
-    },
-    {
-      directives: {
-        '--font': 'generic | inherit',
-        background: '--fg, -5',
-        roundness: 3,
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 2,
-          spread: 0,
-          color: '#000000',
-          alpha: 1
-        }, '--defaultInputBevel']
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        shadow: [hoverGlow, '--defaultInputBevel']
-      }
-    }
-  ]
-}

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -104,6 +104,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../../variables";
+
 .interface-language-switcher {
   .language-select {
     margin-right: 1em;

src/components/link-preview/link-preview.vue

@@ -33,6 +33,8 @@
 <script src="./link-preview.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .link-preview-card {
   display: flex;
   flex-direction: row;
@@ -49,7 +51,8 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      border-radius: var(--roundness);
+      border-radius: $fallback--attachmentRadius;
+      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
     }
   }
 
@@ -79,10 +82,13 @@
     margin: 2em 0;
   }
 
-  color: var(--text);
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
   border-style: solid;
   border-width: 1px;
-  border-radius: var(--roundness);
+  border-radius: $fallback--attachmentRadius;
-  border-color: var(--border);
+  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
 }
 </style>

src/components/link.style.js

@@ -1,24 +0,0 @@
-export default {
-  name: 'Link',
-  selector: 'a',
-  virtual: true,
-  states: {
-    faint: '.faint'
-  },
-  defaultRules: [
-    {
-      component: 'Link',
-      directives: {
-        textColor: '--link'
-      }
-    },
-    {
-      component: 'Link',
-      state: ['faint'],
-      directives: {
-        textOpacity: 0.5,
-        textOpacityMode: 'fake'
-      }
-    }
-  ]
-}

src/components/list/list.vue

@@ -7,7 +7,6 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
-      :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
       role="listitem"
     >
       <slot
@@ -34,15 +33,24 @@ export default {
     getKey: {
       type: Function,
       default: item => item.id
-    },
-    getClass: {
-      type: Function,
-      default: item => ''
-    },
-    nonInteractive: {
-      type: Boolean,
-      default: false
     }
   }
 }
 </script>
+
+<style lang="scss">
+@import "../../variables";
+
+.list {
+  &-item:not(:last-child) {
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
+</style>

src/components/list/list_item.style.js

@@ -1,48 +0,0 @@
-export default {
-  name: 'ListItem',
-  selector: '.list-item',
-  states: {
-    active: '.-active',
-    hover: ':hover:not(.-non-interactive)'
-  },
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    },
-    {
-      state: ['active'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover', 'active'],
-      directives: {
-        background: '--inheritedBackground, 20',
-        opacity: 1
-      }
-    }
-  ]
-}

src/components/lists_card/lists_card.vue

@@ -21,6 +21,8 @@
 <script src="./lists_card.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .list-card {
   display: flex;
 }
@@ -33,6 +35,18 @@
 .button-list-edit {
   margin: 0;
   padding: 1em;
-  color: var(--link);
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
+
+  &:hover {
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--link;
+    color: var(--selectedMenuText, $fallback--link);
+
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+  }
 }
 </style>

src/components/lists_edit/lists_edit.vue

@@ -36,7 +36,6 @@
           id="list-edit-title"
           ref="title"
           v-model="titleDraft"
-          class="input"
         >
         <button
           v-if="id"
@@ -165,6 +164,8 @@
 <script src="./lists_edit.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .ListEdit {
   --panel-body-padding: 0.5em;
 

src/components/lists_user_search/lists_user_search.vue

@@ -10,7 +10,6 @@
       <input
         ref="search"
         v-model="query"
-        class="input"
         :placeholder="$t('lists.search')"
         @input="onInput"
       >
@@ -28,6 +27,8 @@
 
 <script src="./lists_user_search.js"></script>
 <style lang="scss">
+@import "../../variables";
+
 .ListsUserSearch {
   .input-wrap {
     display: flex;

src/components/login_form/login_form.vue

@@ -18,7 +18,7 @@
               id="username"
               v-model="user.username"
               :disabled="loggingIn"
-              class="input form-control"
+              class="form-control"
               :placeholder="$t('login.placeholder')"
             >
           </div>
@@ -29,7 +29,7 @@
               ref="passwordInput"
               v-model="user.password"
               :disabled="loggingIn"
-              class="input form-control"
+              class="form-control"
               type="password"
             >
           </div>
@@ -93,6 +93,8 @@
 <script src="./login_form.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .login-form {
   display: flex;
   flex-direction: column;

src/components/media_upload/media_upload.vue

@@ -36,6 +36,8 @@
 <script src="./media_upload.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .media-upload {
   .hidden-input-file {
     display: none;

src/components/mention_link/mention_link.scss

@@ -1,7 +1,10 @@
+@import "../../variables";
+
 .MentionLink {
   position: relative;
   white-space: normal;
   display: inline;
+  color: var(--link);
   word-break: normal;
 
   & .new,
@@ -11,7 +14,7 @@
   }
 
   .mention-avatar {
-    border-radius: var(--roundness);
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
@@ -58,10 +61,8 @@
     }
 
     &.-has-selection {
-      --color: var(--selectionText);
+      color: var(--alertNeutralText, $fallback--text);
-      --link: var(--selectionText);
+      background-color: var(--alertNeutral, $fallback--fg);
-
-      background-color: var(--selectionBackground);
     }
 
     .at {
@@ -101,7 +102,7 @@
   }
 
   .serverName.-faded {
-    color: var(--linkFaint);
+    color: var(--faintLink, $fallback--link);
   }
 }
 

src/components/mention_link/mention_link.vue

@@ -22,7 +22,7 @@
         :class="classnames"
       >
         <a
-          class="short"
+          class="short button-unstyled"
           :class="{ '-with-tooltip': shouldShowTooltip }"
           :href="url"
           @click.prevent="onClick"

src/components/mentions_line/mentions_line.vue

@@ -22,13 +22,13 @@
       />
       </span><button
         v-if="!expanded"
-        class="button-unstyled -link showMoreLess"
+        class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('status.plus_more', { number: extraMentions.length }) }}
       </button><button
         v-if="expanded"
-        class="button-unstyled -link showMoreLess"
+        class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('general.show_less') }}

src/components/menu_item.style.js

@@ -1,90 +0,0 @@
-export default {
-  name: 'MenuItem',
-  selector: '.menu-item',
-  validInnerComponents: [
-    'Text',
-    'Icon',
-    'Input',
-    'Border',
-    'ButtonUnstyled',
-    'Badge',
-    'Avatar'
-  ],
-  states: {
-    hover: ':hover',
-    active: '.-active'
-  },
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        background: '$mod(--bg, 5)',
-        opacity: 1
-      }
-    },
-    {
-      state: ['active'],
-      directives: {
-        background: '$mod(--bg, 10)',
-        opacity: 1
-      }
-    },
-    {
-      state: ['active', 'hover'],
-      directives: {
-        background: '$mod(--bg, 15)',
-        opacity: 1
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'MenuItem',
-        state: ['hover']
-      },
-      directives: {
-        textColor: '--link',
-        textAuto: 'no-preserve'
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'MenuItem',
-        state: ['active']
-      },
-      directives: {
-        textColor: '--link',
-        textAuto: 'no-preserve'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'MenuItem',
-        state: ['active']
-      },
-      directives: {
-        textColor: '--link',
-        textAuto: 'no-preserve'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'MenuItem',
-        state: ['hover']
-      },
-      directives: {
-        textColor: '--link',
-        textAuto: 'no-preserve'
-      }
-    }
-  ]
-}

src/components/mfa_form/recovery_form.vue

@@ -16,7 +16,7 @@
           <input
             id="code"
             v-model="code"
-            class="input form-control"
+            class="form-control"
           >
         </div>
 

src/components/mfa_form/totp_form.vue

@@ -18,7 +18,7 @@
           <input
             id="code"
             v-model="code"
-            class="input form-control"
+            class="form-control"
           >
         </div>
 

src/components/mobile_drawer.style.js

@@ -1,41 +0,0 @@
-export default {
-  name: 'MobileDrawer',
-  selector: '.mobile-drawer',
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'PanelHeader',
-    'MenuItem',
-    'Notification',
-    'Alert',
-    'UserCard'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        backgroundNoCssColor: 'yes'
-      }
-    },
-    {
-      component: 'PanelHeader',
-      parent: { component: 'MobileDrawer' },
-      directives: {
-        background: '--fg',
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }]
-      }
-    }
-  ]
-}

src/components/mobile_nav/mobile_nav.vue

@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="badge -dot -notification"
+            class="alert-dot"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,24 +37,24 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="badge -dot -notification"
+            class="alert-dot"
           />
         </button>
       </div>
     </nav>
     <aside
       v-if="currentUser"
-      class="mobile-notifications-drawer mobile-drawer"
+      class="mobile-notifications-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
     >
-      <div class="panel-heading mobile-notifications-header">
+      <div class="mobile-notifications-header">
         <span class="title">
           {{ $t('notifications.notifications') }}
           <span
             v-if="unseenCountBadgeText"
-            class="badge -notification unseen-count"
+            class="badge badge-notification unseen-count"
           >{{ unseenCountBadgeText }}</span>
         </span>
         <span class="spacer" />
@@ -123,6 +123,8 @@
 <script src="./mobile_nav.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .MobileNav {
   z-index: var(--ZI_navbar);
 
@@ -135,7 +137,7 @@
     box-sizing: border-box;
 
     a {
-      color: var(--link);
+      color: var(--topBarLink, $fallback--link);
     }
   }
 
@@ -163,6 +165,19 @@
     display: flex;
   }
 
+  .alert-dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
   .mobile-notifications-drawer {
     width: 100%;
     height: 100vh;
@@ -170,13 +185,13 @@
     position: fixed;
     top: 0;
     left: 0;
-    box-shadow: var(--shadow);
+    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
+    box-shadow: var(--panelShadow);
     transition-property: transform;
     transition-duration: 0.25s;
     transform: translateX(0);
     z-index: var(--ZI_navbar);
     -webkit-overflow-scrolling: touch;
-    background: var(--background);
 
     &.-closed {
       transform: translateX(100%);
@@ -193,7 +208,11 @@
     height: 50px;
     line-height: 50px;
     position: absolute;
-    box-shadow: var(--shadow);
+    color: var(--topBarText);
+    background-color: $fallback--fg;
+    background-color: var(--topBar, $fallback--fg);
+    box-shadow: 0 0 4px rgb(0 0 0 / 60%);
+    box-shadow: var(--topBarShadow);
 
     .spacer {
       flex: 1;
@@ -219,6 +238,10 @@
     height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
 
     .notifications {
       padding: 0;

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -13,6 +13,8 @@
 <script src="./mobile_post_status_button.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .MobilePostButton {
   &.button-default {
     width: 5em;
@@ -23,6 +25,8 @@
     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;
@@ -38,7 +42,8 @@
 
   svg {
     font-size: 1.5em;
-    color: var(--text);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
   }
 }
 

src/components/modal/modals.style.js

@@ -1,9 +0,0 @@
-export default {
-  name: 'Modals',
-  selector: '.modal-view',
-  lazy: true,
-  validInnerComponents: [
-    'Panel'
-  ],
-  defaultRules: []
-}

src/components/moderation_tools/moderation_tools.vue

@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="menu-item dropdown-item menu-item"
+              class="button-default 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="menu-item dropdown-item menu-item"
+              class="button-default 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="menu-item dropdown-item menu-item"
+            class="button-default 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="menu-item dropdown-item menu-item"
+            class="button-default dropdown-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,74 +50,74 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="menu-item dropdown-item menu-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
-                class="input menu-checkbox"
+                class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
               />
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="menu-item dropdown-item menu-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
-                class="input menu-checkbox"
+                class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
               />
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="menu-item dropdown-item menu-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
-                class="input menu-checkbox"
+                class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
               />
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="menu-item dropdown-item menu-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
-                class="input menu-checkbox"
+                class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
               />
               {{ $t('user_card.admin_menu.sandbox') }}
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item menu-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
-                class="input menu-checkbox"
+                class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_remote_subscription') }}
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item menu-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
-                class="input menu-checkbox"
+                class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_any_subscription') }}
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item menu-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
-                class="input menu-checkbox"
+                class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
               />
               {{ $t('user_card.admin_menu.quarantine') }}
@@ -166,6 +166,8 @@
 <script src="./moderation_tools.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .moderation-tools-popover {
   height: 100%;
 

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

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

src/components/nav_panel/nav_panel.vue

@@ -37,8 +37,7 @@
         </NavigationEntry>
         <div
           v-show="showTimelines"
-          class="timelines-background menu-item-collapsible"
+          class="timelines-background"
-          :class="{ '-expanded': showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -58,11 +57,12 @@
         >
           <router-link
             :title="$t('lists.manage_lists')"
-            class="button-unstyled extra-button"
+            class="extra-button"
             :to="{ name: 'lists' }"
             @click.stop
           >
             <FAIcon
+              class="extra-button"
               fixed-width
               icon="wrench"
             />
@@ -75,8 +75,7 @@
         </NavigationEntry>
         <div
           v-show="showLists"
-          class="timelines-background menu-item-collapsible"
+          class="timelines-background"
-          :class="{ '-expanded': showLists }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -103,10 +102,12 @@
 <script src="./nav_panel.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .NavPanel {
   .panel {
     overflow: hidden;
-    box-shadow: var(--shadow);
+    box-shadow: var(--panelShadow);
   }
 
   ul {
@@ -115,6 +116,33 @@
     padding: 0;
   }
 
+  li {
+    position: relative;
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+
+  > li {
+    &:first-child .menu-item {
+      border-top-right-radius: $fallback--panelRadius;
+      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-top-left-radius: $fallback--panelRadius;
+      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    }
+
+    &: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);
+    }
+  }
+
+  li:last-child {
+    border: none;
+  }
+
   .navigation-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;
@@ -128,6 +156,16 @@
 
   .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);
   }
 
   .nav-panel-heading {

src/components/navigation/navigation_entry.vue

@@ -1,6 +1,7 @@
 <template>
   <OptionalRouterLink
     v-slot="{ isActive, href, navigate } = {}"
+    ass="ass"
     :to="routeTo"
   >
     <li
@@ -10,7 +11,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link"
+        class="main-link button-unstyled"
         :href="href"
         @click="navigate"
       >
@@ -34,7 +35,7 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge -notification"
+        class="badge badge-notification"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -62,53 +63,73 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-.NavigationEntry.menu-item {
+@import "../../variables";
-  --__line-height: 2.5em;
-  --__horizontal-gap: 0.5em;
-  --__vertical-gap: 0.4em;
 
-  padding: 0;
+.NavigationEntry {
   display: flex;
+  box-sizing: border-box;
   align-items: baseline;
-
+  height: 3.5em;
-  &[aria-expanded] {
+  line-height: 3.5em;
-    padding-right: var(--__horizontal-gap);
+  padding: 0 1em;
-  }
+  width: 100%;
-
+  color: $fallback--link;
-  .main-link {
+  color: var(--link, $fallback--link);
-    line-height: var(--__line-height);
-    box-sizing: border-box;
-    flex: 1;
-    padding: var(--__vertical-gap) var(--__horizontal-gap);
-  }
-
-  .menu-icon {
-    line-height: var(--__line-height);
-    padding: 0;
-    width: var(--__line-height);
-    margin-right: var(--__horizontal-gap);
-  }
 
   .timelines-chevron {
-    line-height: var(--__line-height);
-    padding: 0;
-    width: var(--__line-height);
     margin-right: 0;
   }
 
+  .main-link {
+    flex: 1;
+  }
+
+  .menu-icon {
+    margin-right: 0.8em;
+  }
+
   .extra-button {
-    line-height: var(--__line-height);
+    width: 3em;
-    padding: 0;
-    width: var(--__line-height);
     text-align: center;
 
     &:last-child {
-      margin-right: calc(-1 * var(--__horizontal-gap));
+      margin-right: -0.8em;
     }
   }
 
-  .badge {
+  &:hover {
-    margin: 0 var(--__horizontal-gap);
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--link;
+    color: var(--selectedMenuText, $fallback--link);
+
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+
+    .menu-icon {
+      --icon: var(--text, $fallback--icon);
+    }
+  }
+
+  &.-active {
+    font-weight: bolder;
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--text;
+    color: var(--selectedMenuText, $fallback--text);
+
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+
+    .menu-icon {
+      --icon: var(--text, $fallback--icon);
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 </style>

src/components/navigation/navigation_pins.vue

@@ -3,8 +3,7 @@
     <router-link
       v-for="item in pinnedList"
       :key="item.name"
-      class="button-unstyled pinned-item"
+      class="pinned-item"
-      active-class="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
@@ -19,7 +18,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge -dot -notification"
+        class="alert-dot"
       />
     </router-link>
   </span>
@@ -28,12 +27,25 @@
 <script src="./navigation_pins.js"></script>
 
 <style lang="scss">
+@import "../../variables";
+
 .NavigationPins {
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
   height: 100%;
 
+  .alert-dot {
+    border-radius: 100%;
+    height: 0.5em;
+    width: 0.5em;
+    position: absolute;
+    right: calc(50% - 0.75em);
+    top: calc(50% - 0.5em);
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
   .pinned-item {
     position: relative;
     flex: 1 0 3em;
@@ -48,8 +60,15 @@
       margin: 0;
     }
 
-    &.toggled {
+    &.router-link-active {
+      color: $fallback--text;
+      color: var(--panelText, $fallback--text);
       border-bottom: 4px solid;
+
+      & .svg-inline--fa,
+      & .iconLetter {
+        color: inherit;
+      }
     }
   }
 }

src/components/notification/notification.scss

@@ -1,15 +1,13 @@
+@import "../../variables";
+
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
-  border-color: var(--border);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
   word-wrap: break-word;
   word-break: break-word;
 
-  &.Status {
-    /* stylelint-disable-next-line declaration-no-important */
-    background-color: transparent !important;
-  }
-
   --emoji-size: 14px;
 
   &:hover {
@@ -73,22 +71,28 @@
   }
 
   &.-type--repeat .type-icon {
-    color: var(--cGreen);
+    color: $fallback--cGreen;
+    color: var(--cGreen, $fallback--cGreen);
   }
 
   &.-type--follow .type-icon {
-    color: var(--cBlue);
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
   }
 
   &.-type--follow-request .type-icon {
-    color: var(--cBlue);
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
   }
 
   &.-type--like .type-icon {
-    color: var(--cOrange);
+    color: orange;
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
   }
 
   &.-type--move .type-icon {
-    color: var(--cBlue);
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
   }
 }

src/components/notification/notification.style.js

@@ -1,17 +0,0 @@
-export default {
-  name: 'Notification',
-  selector: '.Notification',
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar',
-    'Attachment'
-  ],
-  defaultRules: []
-}

src/components/notification/notification.vue

@@ -155,7 +155,7 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="timeago-link faint"
+              class="timeago-link faint-link"
             >
               <Timeago
                 :time="notification.created_at"
@@ -247,6 +247,7 @@
         />
         <template v-else>
           <StatusContent
+            :class="{ faint: !statusExpanded }"
             :compact="!statusExpanded"
             :status="notification.status"
           />

src/components/notifications/notification_filters.vue

@@ -8,65 +8,65 @@
     <template #content>
       <div class="dropdown-menu">
         <button
-          class="menu-item dropdown-item"
+          class="button-default dropdown-item"
           @click="toggleNotificationFilter('likes')"
         >
           <span
-            class="input menu-checkbox"
+            class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.likes }"
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
         <button
-          class="menu-item dropdown-item"
+          class="button-default dropdown-item"
           @click="toggleNotificationFilter('repeats')"
         >
           <span
-            class="input menu-checkbox"
+            class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.repeats }"
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
         <button
-          class="menu-item dropdown-item"
+          class="button-default dropdown-item"
           @click="toggleNotificationFilter('follows')"
         >
           <span
-            class="input menu-checkbox"
+            class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.follows }"
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
         <button
-          class="menu-item dropdown-item"
+          class="button-default dropdown-item"
           @click="toggleNotificationFilter('mentions')"
         >
           <span
-            class="input menu-checkbox"
+            class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.mentions }"
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
         <button
-          class="menu-item dropdown-item"
+          class="button-default dropdown-item"
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
-            class="input menu-checkbox"
+            class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
         <button
-          class="menu-item dropdown-item"
+          class="button-default dropdown-item"
           @click="toggleNotificationFilter('moves')"
         >
           <span
-            class="input menu-checkbox"
+            class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.moves }"
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
         <button
-          class="menu-item dropdown-item"
+          class="button-default dropdown-item"
           @click="toggleNotificationFilter('polls')"
         >
           <span
-            class="input menu-checkbox"
+            class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.polls }"
           />{{ $t('settings.notification_visibility_polls') }}
         </button>

src/components/notifications/notifications.scss

@@ -1,3 +1,5 @@
+@import "../../variables";
+
 .Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
@@ -5,7 +7,8 @@
   }
 
   .loadmore-error {
-    color: var(--text);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
   }
 
   .notification {
@@ -22,7 +25,7 @@
 
     &.unseen {
       .notification-overlay {
-        background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
+        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
       }
     }
   }
@@ -32,11 +35,6 @@
 .notification {
   box-sizing: border-box;
 
-  /* TODO cleanup this */
-  .Status {
-    flex: 1;
-  }
-
   &:hover .animated.Avatar {
     canvas {
       display: none;
@@ -62,17 +60,24 @@
       width: 32px;
       height: 32px;
     }
+
+    .faint {
+      --link: var(--faintLink);
+      --text: var(--faint);
+    }
   }
 
   .follow-request-accept {
     &:hover {
-      color: var(--text);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
   }
 
   .follow-request-reject {
     &:hover {
-      color: var(--cRed);
+      color: $fallback--cRed;
+      color: var(--cRed, $fallback--cRed);
     }
   }
 
@@ -92,6 +97,11 @@
     }
   }
 
+  /* TODO cleanup this */
+  .Status {
+    flex: 1;
+  }
+
   time {
     white-space: nowrap;
   }

src/components/notifications/notifications.vue

@@ -18,7 +18,7 @@
             {{ $t('notifications.notifications') }}
             <span
               v-if="unseenCountBadgeText"
-              class="badge -notification unseen-count"
+              class="badge badge-notification unseen-count"
             >{{ unseenCountBadgeText }}</span>
           </div>
           <div
@@ -85,7 +85,7 @@
           </div>
           <button
             v-else-if="!loading"
-            class="button-unstyled -link text-center"
+            class="button-unstyled -link -fullwidth"
             @click.prevent="fetchOlderNotifications()"
           >
             <div class="new-status-notification text-center">