Merge branch 'themes3' into 'develop'

Themes 3.0 / Pleroma ISS (Interface Style Sheets) [Side A]

See merge request pleroma/pleroma-fe!1892

changelog.d/themes3.change

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

src/App.scss

@@ -1,9 +1,10 @@
 // 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
@@ -16,16 +17,15 @@
 }
 
 html {
-  font-size: 14px;
+  font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
 body {
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: var(--font);
   margin: 0;
-  color: $fallback--text;
+  color: var(--text);
-  color: var(--text, $fallback--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
@@ -42,17 +42,35 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--btn) transparent;
+    scrollbar-color: var(--fg) 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 {
-      background-color: var(--btn);
+      box-shadow: var(--shadow);
-      box-shadow: var(--buttonShadow);
+      border-radius: var(--roundness);
-      border-radius: var(--btnRadius);
     }
 
     // horizontal/vertical/increment/decrement are webkit-specific stuff
@@ -61,7 +79,7 @@ body {
     &::-webkit-scrollbar-button {
       --___bgPadding: 2px;
 
-      color: var(--btnText);
+      color: var(--text);
       background-repeat: no-repeat, no-repeat;
 
       &:horizontal {
@@ -69,15 +87,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
+            linear-gradient(45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -87,15 +105,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(45deg, transparent 50%, var(--text) 51%);
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(45deg, var(--text) 50%, transparent 51%);
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
@@ -104,15 +122,14 @@ body {
   }
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
-    scrollbar-color: var(--selectedMenu) var(--wallpaper);
+    scrollbar-color: var(--fg) var(--wallpaper);
     background: var(--wallpaper);
   }
 }
 
 a {
   text-decoration: none;
-  color: $fallback--link;
+  color: var(--link);
-  color: var(--link, $fallback--link);
 }
 
 h4 {
@@ -128,27 +145,12 @@ h4 {
 i[class*="icon-"],
 .svg-inline--fa,
 .iconLetter {
-  color: $fallback--icon;
+  color: var(--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);
-  background-color: $fallback--fg;
+  box-shadow: var(--shadow);
-  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;
@@ -195,8 +197,7 @@ nav {
   grid-column: 1 / span 3;
   grid-row: 1 / 1;
   pointer-events: none;
-  background-color: rgb(0 0 0 / 15%);
+  background-color: var(--underlay);
-  background-color: var(--underlay, rgb(0 0 0 / 15%));
   z-index: -1000;
 }
 
@@ -204,7 +205,6 @@ 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)));
@@ -366,106 +366,110 @@ nav {
 
 .button-default {
   user-select: none;
-  color: $fallback--text;
+  color: var(--text);
-  color: var(--btnText, $fallback--text);
-  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--fg);
   border: none;
-  border-radius: $fallback--btnRadius;
+  border-radius: var(--roundness);
-  border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  box-shadow: $fallback--buttonShadow;
+  box-shadow: var(--shadow);
-  box-shadow: var(--buttonShadow);
   font-size: 1em;
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: var(--font);
-
-  &.-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);
 
-    svg,
+.menu-item,
-    i {
+.list-item {
-      color: $fallback--text;
+  display: block;
-      color: var(--btnDisabledText, $fallback--text);
+  box-sizing: border-box;
-    }
+  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);
+
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
+  &.-non-interactive {
+    cursor: auto;
   }
 
-  &.toggled {
+  &.-active,
-    color: $fallback--text;
+  &:hover {
-    color: var(--btnToggledText, $fallback--text);
+    border-top-width: 1px;
-    background-color: $fallback--fg;
+    border-bottom-width: 1px;
-    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);
-    }
   }
 
-  &.danger {
+  &.-active + &,
-    // TODO: add better color variable
+  &:hover + & {
-    color: $fallback--text;
+    border-top-width: 0;
-    color: var(--alertErrorPanelText, $fallback--text);
+  }
-    background-color: $fallback--alertError;
+
-    background-color: var(--alertError, $fallback--alertError);
+  &:hover + .menu-item-collapsible:not(.-expanded) + &,
+  &.-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);
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -473,28 +477,23 @@ nav {
   color: inherit;
 
   &.-link {
-    color: $fallback--link;
+    /* stylelint-disable-next-line declaration-no-important */
-    color: var(--link, $fallback--link);
+    color: var(--link) !important;
-  }
-
-  &.-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;
-    background: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
     box-shadow: none;
     height: unset;
   }
@@ -502,19 +501,9 @@ textarea,
   --_padding: 0.5em;
 
   border: none;
-  border-radius: $fallback--inputRadius;
+  border-radius: var(--roundness);
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  box-shadow: var(--shadow);
-  box-shadow:
+  font-family: var(--font);
-    0 1px 0 0 rgb(0 0 0 / 20%) inset,
-    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;
@@ -528,7 +517,6 @@ textarea,
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
-    opacity: 0.5;
   }
 
   &[type="range"] {
@@ -543,9 +531,9 @@ textarea,
     display: none;
 
     &:checked + label::before {
-      box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
+      box-shadow: var(--shadow);
-      box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
+      background-color: var(--background);
-      background-color: var(--accent, $fallback--link);
+      color: var(--text);
     }
 
     &:disabled {
@@ -559,16 +547,14 @@ 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
-      box-shadow: 0 0 2px black inset;
+      background-color: var(--background);
-      box-shadow: var(--inputShadow);
+      box-shadow: var(--shadow);
       margin-right: 0.5em;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -581,8 +567,9 @@ textarea,
 
   &[type="checkbox"] {
     &:checked + label::before {
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--inputText, $fallback--text);
+      background-color: var(--background);
+      box-shadow: var(--shadow);
     }
 
     &:disabled {
@@ -600,13 +587,9 @@ textarea,
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: $fallback--checkboxRadius;
+      border-radius: var(--roundness);
-      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+      box-shadow: var(--shadow);
-      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;
@@ -623,16 +606,14 @@ textarea,
 }
 
 // Textareas should have stock line-height + vertical padding instead of huge line-height
-textarea {
+textarea.input {
   padding: var(--_padding);
   line-height: var(--post-line-height);
 }
 
 option {
-  color: $fallback--text;
+  color: var(--text);
-  color: var(--text, $fallback--text);
+  background-color: var(--background);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 }
 
 .hide-number-spinner {
@@ -653,7 +634,7 @@ option {
 
   li {
     border: 1px solid var(--border);
-    border-radius: var(--inputRadius);
+    border-radius: var(--roundness);
     padding: 0.5em;
     margin: 0.25em;
   }
@@ -714,74 +695,58 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.badge-notification {
+  &.-dot,
-    background-color: $fallback--cRed;
+  &.-counter {
-    background-color: var(--badgeNotification, $fallback--cRed);
+    margin: 0;
-    color: white;
+    position: absolute;
-    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: $fallback--tooltipRadius;
+  border-radius: var(--roundness);
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  border: 1px solid var(--border);
-
-  &.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 {
-  color: $fallback--faint;
+  --text: var(--textFaint);
-  color: var(--faint, $fallback--faint);
+  --link: var(--linkFaint);
-}
 
-.faint-link {
+  color: var(--text);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .visibility-notice {
   padding: 0.5em;
-  border: 1px solid $fallback--faint;
+  border: 1px solid var(--textFaint);
-  border: 1px solid var(--faint, $fallback--faint);
+  border-radius: var(--roundness);
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
 }
 
 .notice-dismissible {
@@ -802,6 +767,10 @@ option {
   &.iconLetter {
     font-size: 1.1em;
   }
+
+  &.svg-inline--fa {
+    vertical-align: -0.15em;
+  }
 }
 
 .fa-old-padding {
@@ -816,6 +785,11 @@ option {
   opacity: 0.25;
 }
 
+.timeago {
+  --link: var(--text);
+  --linkFaint: var(--textFaint);
+}
+
 .login-hint {
   text-align: center;
 
@@ -914,3 +888,8 @@ option {
   padding: 0;
   position: absolute;
 }
+
+*::selection {
+  color: var(--selectionText);
+  background-color: var(--selectionBackground);
+}

src/_variables.scss

@@ -1,36 +0,0 @@
-$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

@@ -328,17 +328,14 @@ const setConfig = async ({ store }) => {
 }
 
 const checkOAuthToken = async ({ store }) => {
-  // eslint-disable-next-line no-async-promise-executor
+  if (store.getters.getUserToken()) {
-  return new Promise(async (resolve, reject) => {
+    try {
-    if (store.getters.getUserToken()) {
+      await store.dispatch('loginUser', store.getters.getUserToken())
-      try {
+    } catch (e) {
-        await store.dispatch('loginUser', store.getters.getUserToken())
+      console.error(e)
-      } catch (e) {
-        console.error(e)
-      }
     }
-    resolve()
+  }
-  })
+  return Promise.resolve()
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {

src/components/account_actions/account_actions.vue

@@ -11,14 +11,14 @@
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -31,34 +31,34 @@
           <UserListMenu :user="user" />
           <button
             v-if="relationship.followed_by"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="removeUserFromFollowers"
           >
             {{ $t('user_card.remove_follower') }}
           </button>
           <button
             v-if="relationship.blocking"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
@@ -122,19 +122,12 @@
 <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

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

src/components/announcement_editor/announcement_editor.vue

@@ -3,7 +3,7 @@
     <textarea
       ref="textarea"
       v-model="announcement.content"
-      class="post-textarea"
+      class="input post-textarea"
       rows="1"
       cols="1"
       :placeholder="$t('announcements.post_placeholder')"
@@ -14,6 +14,7 @@
       <input
         id="announcement-start-time"
         v-model="announcement.startsAt"
+        class="input"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
       >
@@ -23,6 +24,7 @@
       <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,15 +61,13 @@
 <script src="./announcements_page.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .announcements-page {
   .post-form {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
 
     .heading,
     .body {
-      margin-bottom: var(--status-margin, $status-margin);
+      margin-bottom: var(--status-margin);
     }
 
     .post-button {

src/components/attachment/attachment.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Attachment {
   display: inline-flex;
   flex-direction: column;
@@ -9,10 +7,8 @@
   height: 100%;
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
+  border-radius: var(--roundness);
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: var(--border);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
 
   .attachment-wrapper {
     flex: 1 1 auto;
@@ -84,6 +80,13 @@
     }
   }
 
+  .video-container {
+    border: none;
+    outline: none;
+    color: inherit;
+    background: transparent;
+  }
+
   .audio-container {
     display: flex;
     align-items: flex-end;
@@ -126,23 +129,12 @@
 
     .attachment-button {
       padding: 0;
-      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--roundness);
-      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%);
-      }
     }
   }
 
@@ -217,8 +209,7 @@
 
   &.-placeholder {
     display: inline-block;
-    color: $fallback--link;
+    color: var(--link);
-    color: var(--postLink, $fallback--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;

src/components/attachment/attachment.style.js

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

src/components/autosuggest/autosuggest.vue

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

src/components/avatar_list/avatar_list.vue

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

src/components/badge.style.js

@@ -0,0 +1,30 @@
+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,7 +47,6 @@
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding: 0.6em 1em;
 
   --emoji-size: 14px;
 

src/components/border.style.js

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

src/components/button.style.js

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,96 @@
+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: 10px 10px 0 0;
+    border-radius: var(--roundness);
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
     &::after {
       border-radius: 0;
@@ -37,8 +37,6 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
     z-index: 1;
   }
 
@@ -61,8 +59,6 @@
     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;
@@ -79,12 +75,6 @@
       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

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

src/components/chat_list/chat_list.vue

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

src/components/chat_list_item/chat_list_item.scss

@@ -1,8 +1,6 @@
 .chat-list-item {
   display: flex;
   flex-direction: row;
-  padding: 0.75em;
-  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -11,11 +9,6 @@
     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;
   }
@@ -29,7 +22,7 @@
 
   .heading {
     width: 100%;
-    display: inline-flex;
+    display: flex;
     justify-content: space-between;
     line-height: 1em;
   }
@@ -47,18 +40,17 @@
   }
 
   .chat-preview {
-    display: inline-flex;
+    display: flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: $fallback--text;
+    color: var(--textFaint);
-    color: var(--faint, $fallback--text);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
     text-decoration: none;
     pointer-events: none;
   }
@@ -73,11 +65,6 @@
     }
   }
 
-  .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 badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>
@@ -48,6 +48,5 @@
 <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,5 +1,3 @@
-@import "../../variables";
-
 .chat-message-wrapper {
   &.hovered-message-chain {
     .animated.Avatar {
@@ -27,12 +25,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover,
-    .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -61,10 +53,12 @@
   }
 
   .status {
-    border-radius: $fallback--chatMessageRadius;
+    background-color: var(--background);
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -97,8 +91,7 @@
   .error {
     .status-content.media-body,
     .created-at {
-      color: $fallback--cRed;
+      color: var(--badgeNotification);
-      color: var(--badgeNotification, $fallback--cRed);
     }
   }
 
@@ -117,16 +110,6 @@
     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;
     }
@@ -137,22 +120,6 @@
   }
 
   .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;
     }
@@ -176,6 +143,5 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: $fallback--text;
+  color: var(--textFaint);
-  color: var(--faintedText, $fallback--text);
 }

src/components/chat_message/chat_message.style.js

@@ -0,0 +1,30 @@
+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="button-default dropdown-item dropdown-item-icon"
+                      class="menu-item dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}

src/components/chat_new/chat_new.scss

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

src/components/chat_title/chat_title.vue

@@ -26,8 +26,6 @@
 <script src="./chat_title.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .chat-title {
   display: flex;
   overflow: hidden;
@@ -54,8 +52,7 @@
     margin-right: 0.5em;
     height: 1.5em;
     width: 1.5em;
-    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--roundness);
-    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="checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -54,7 +54,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .checkbox {
@@ -62,9 +61,15 @@ 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 {
@@ -76,12 +81,9 @@ export default {
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--roundness);
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    box-shadow: var(--shadow);
-    box-shadow: 0 0 2px black inset;
+    background-color: var(--background);
-    box-shadow: var(--inputShadow);
-    background-color: $fallback--fg;
-    background-color: var(--input, $fallback--fg);
     vertical-align: top;
     text-align: center;
     line-height: 1.1em;
@@ -98,21 +100,18 @@ export default {
     }
 
     .label {
-      color: $fallback--faint;
+      color: var(--text);
-      color: var(--faint, $fallback--faint);
     }
   }
 
   input[type="checkbox"] {
     &:checked + .checkbox-indicator::before {
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--inputText, $fallback--text);
     }
 
     &:indeterminate + .checkbox-indicator::before {
       content: "–";
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--inputText, $fallback--text);
     }
   }
 

src/components/color_input/color_input.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .color-input {
   display: inline-flex;
 
@@ -12,8 +10,6 @@
 
     input {
       background: none;
-      color: $fallback--lightText;
-      color: var(--inputText, $fallback--lightText);
       border: none;
       padding: 0;
       margin: 0;

src/components/conversation/conversation.vue

@@ -28,7 +28,10 @@
         class="rightside-button"
       />
     </div>
-    <div class="conversation-body panel-body">
+    <div
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+    >
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -78,7 +81,7 @@
               :replies="getReplies(status.id)"
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
-              class="conversation-status status-fadein panel-body"
+              class="conversation-status status-fadein"
 
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
@@ -183,7 +186,7 @@
             :replies="getReplies(status.id)"
             :in-profile="inProfile"
             :profile-user-id="profileUserId"
-            class="conversation-status status-fadein panel-body"
+            class="conversation-status status-fadein"
 
             :toggle-thread-display="toggleThreadDisplay"
             :thread-display-status="threadDisplayStatus"
@@ -203,6 +206,7 @@
   </div>
   <div
     v-else
+    class="Conversation -hidden"
     :style="hiddenStyle"
   />
 </template>
@@ -210,14 +214,17 @@
 <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, $status-margin);
+    padding: var(--status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -227,20 +234,22 @@
   }
 
   .thread-ancestors {
-    margin-left: var(--status-margin, $status-margin);
+    margin-left: var(--status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    border-left: 2px solid var(--border);
   }
 
-  .thread-ancestor.-faded .StatusContent {
+  .thread-ancestor.-faded .RichContent {
-    --link: var(--faintLink);
+    /* stylelint-disable declaration-no-important */
-    --text: var(--faint);
+    --text: var(--textFaint) !important;
-
+    --link: var(--linkFaint) !important;
-    color: var(--text);
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
+    padding-left: var(--status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -253,16 +262,17 @@
   }
 
   .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
   }
 
   .conversation-status {
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
   }
 
   .thread-ancestor-has-other-replies .conversation-status,
-  &:last-child .conversation-status,
+  &:last-child:not(.-expanded) .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 {
@@ -270,20 +280,36 @@
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left: 4px solid $fallback--cRed;
+    border-left: 4px solid var(--cRed);
-    border-left-color: var(--cRed, $fallback--cRed);
+    border-radius: var(--roundness);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+    border-top-left-radius: 0;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: 0;
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
   }
 
   &.-expanded.status-fadein {
-    margin: calc(var(--status-margin, $status-margin) / 2);
+    --___margin: calc(var(--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,5 +1,3 @@
-@import "../../variables";
-
 .DesktopNav {
   width: 100%;
   z-index: var(--ZI_navbar);
@@ -9,7 +7,7 @@
   }
 
   a {
-    color: var(--topBarLink, $fallback--link);
+    color: var(--link);
   }
 
   .inner-nav {
@@ -54,27 +52,7 @@
   .button-default {
     &,
     svg {
-      color: $fallback--text;
+      color: var(--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);
     }
   }
 
@@ -94,8 +72,7 @@
       mask-repeat: no-repeat;
       mask-position: center;
       mask-size: contain;
-      background-color: $fallback--fg;
+      background-color: var(--text);
-      background-color: var(--topBarText, $fallback--fg);
       position: absolute;
       top: 0;
       bottom: 0;
@@ -116,8 +93,7 @@
     text-align: center;
 
     .svg-inline--fa {
-      color: $fallback--link;
+      color: var(--link);
-      color: var(--topBarLink, $fallback--link);
     }
   }
 

src/components/dialog_modal/dialog_modal.vue

@@ -12,7 +12,7 @@
           <slot name="header" />
         </div>
       </div>
-      <div class="dialog-modal-content">
+      <div class="panel-body dialog-modal-content">
         <slot name="default" />
       </div>
       <div class="dialog-modal-footer user-interactions panel-footer">
@@ -25,8 +25,6 @@
 <script src="./dialog_modal.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
@@ -54,8 +52,6 @@
   z-index: 2001;
   cursor: default;
   display: block;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   .dialog-modal-heading {
     .title {
@@ -66,18 +62,13 @@
   .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;
-    background-color: $fallback--bg;
+    border-top: 1px solid var(--border);
-    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="emoji-input"
+    class="input emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot
@@ -68,9 +68,9 @@
             v-for="(suggestion, index) in suggestions"
             :id="suggestionItemId(index)"
             :key="index"
-            class="autocomplete-item"
+            class="menu-item autocomplete-item"
             role="option"
-            :class="{ highlighted: index === highlighted }"
+            :class="{ '-active': index === highlighted }"
             :aria-label="autoCompleteItemLabel(suggestion)"
             :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"
@@ -110,9 +110,8 @@
 <script src="./emoji_input.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.input.emoji-input {
-
+  padding: 0;
-.emoji-input {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -127,8 +126,7 @@
     line-height: 24px;
 
     &:hover i {
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--text, $fallback--text);
     }
   }
 
@@ -145,6 +143,12 @@
   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 {
@@ -179,26 +183,28 @@
     position: absolute;
   }
 
-  &-item {
+  &-item.menu-item {
     display: flex;
-    cursor: pointer;
+    padding-top: 0;
-    padding: 0.2em 0.4em;
+    padding-bottom: 0;
-    border-bottom: 1px solid rgb(0 0 0 / 40%);
-    height: 32px;
 
     .image {
-      width: 32px;
+      width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
-      height: 32px;
+      height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
-      line-height: 32px;
+      line-height: var(--__line-height);
       text-align: center;
-      font-size: 32px;
+      margin-right: var(--__horizontal-gap);
-      margin-right: 4px;
 
       img {
-        width: 32px;
+        width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
-        height: 32px;
+        height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
         object-fit: contain;
       }
+
+      span {
+        font-size: var(--__line-height);
+        line-height: var(--__line-height);
+      }
     }
 
     .label {
@@ -216,17 +222,6 @@
         line-height: 9px;
       }
     }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--selectedMenuPopover, $fallback--fg);
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>

src/components/emoji_picker/emoji_picker.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 $emoji-picker-header-height: 36px;
 $emoji-picker-header-picture-width: 32px;
 $emoji-picker-header-picture-height: 32px;
@@ -10,15 +8,6 @@ $emoji-picker-emoji-size: 32px;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
 
   &-header-image {
     display: inline-flex;
@@ -81,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
   .additional-tabs {
     display: flex;
     border-left: 1px solid;
-    border-left-color: $fallback--icon;
+    border-left-color: var(--border);
-    border-left-color: var(--icon, $fallback--icon);
     padding-left: 7px;
     flex: 0 0 auto;
   }
@@ -109,13 +97,8 @@ $emoji-picker-emoji-size: 32px;
         pointer-events: none;
       }
 
-      &.active {
+      &.toggled {
         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="emoji-tabs-item"
+            class="button-unstyled emoji-tabs-item"
             :class="{
-              active: activeGroupView === group.id
+              toggled: activeGroupView === group.id
             }"
             :title="group.text"
             role="button"
@@ -52,8 +52,8 @@
           class="additional-tabs"
         >
           <span
-            class="stickers-tab-icon additional-tabs-item"
+            class="button-unstyled stickers-tab-icon additional-tabs-item"
-            :class="{active: showingStickers}"
+            :class="{toggled: showingStickers}"
             :title="$t('emoji.stickers')"
             @click.prevent="toggleStickers"
           >
@@ -77,7 +77,7 @@
               ref="search"
               v-model="keyword"
               type="text"
-              class="form-control"
+              class="input form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
             >

src/components/emoji_reactions/emoji_reactions.vue

@@ -72,7 +72,6 @@
 
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .EmojiReactions {
@@ -92,7 +91,6 @@
       padding: 0;
 
       .emoji-reaction-count-button {
-        background-color: var(--btn);
         margin: 0;
         height: 100%;
         border-top-left-radius: 0;
@@ -102,11 +100,9 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        color: $fallback--text;
-        color: var(--btnText, $fallback--text);
 
         &.-picked-reaction {
-          border: 1px solid var(--accent, $fallback--link);
+          border: 1px solid var(--accent);
           margin-right: -1px;
         }
       }
@@ -149,18 +145,16 @@
     }
 
     .svg-inline--fa {
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--btnText, $fallback--text);
     }
 
     &.-picked-reaction {
-      border: 1px solid var(--accent, $fallback--link);
+      border: 1px solid var(--accent);
       margin-left: -1px; // offset the border, can't use inset shadows either
       margin-right: -1px;
 
       .svg-inline--fa {
-        color: $fallback--link;
+        color: var(--accent);
-        color: var(--accent, $fallback--link);
       }
     }
 
@@ -176,8 +170,7 @@
 
     @include focused-style {
       .svg-inline--fa {
-        color: $fallback--link;
+        color: var(--accent);
-        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="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="muteConversation"
         >
@@ -29,7 +29,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unmuteConversation"
         >
@@ -40,7 +40,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
@@ -52,7 +52,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unpinStatus"
           @click="close"
@@ -65,7 +65,7 @@
         <template v-if="canBookmark">
           <button
             v-if="!status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="bookmarkStatus"
             @click="close"
@@ -77,7 +77,7 @@
           </button>
           <button
             v-if="status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="unbookmarkStatus"
             @click="close"
@@ -90,7 +90,7 @@
         </template>
         <button
           v-if="ownStatus && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="editStatus"
           @click="close"
@@ -102,7 +102,7 @@
         </button>
         <button
           v-if="isEdited && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="showStatusHistory"
           @click="close"
@@ -114,7 +114,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
@@ -125,7 +125,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="copyLink"
           @click="close"
@@ -137,7 +137,7 @@
         </button>
         <a
           v-if="!status.is_local"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           title="Source"
           :href="status.external_url"
@@ -149,7 +149,7 @@
           /><span>{{ $t("status.external_source") }}</span>
         </a>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
@@ -201,7 +201,6 @@
 <script src="./extra_buttons.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ExtraButtons {
@@ -211,8 +210,7 @@
     margin: -10px;
 
     &:hover .svg-inline--fa {
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--text, $fallback--text);
     }
   }
 

src/components/extra_notifications/extra_notifications.vue

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

src/components/favorite_button/favorite_button.vue

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

src/components/flash/flash.vue

@@ -42,8 +42,6 @@
 <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="opt exlcude-disabled visible-for-screenreader-only"
+      class="input -checkbox 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="custom-font"
+      class="input custom-font"
       type="text"
     >
   </div>
@@ -53,8 +53,6 @@
 <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

@@ -0,0 +1,40 @@
+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,8 +87,6 @@
 <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="{ ['global-' + notice.level]: true }"
+      :class="{ [notice.level]: true }"
     >
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
@@ -25,8 +25,6 @@
 <script src="./global_notice_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .global-notice-list {
   position: fixed;
   top: calc(var(--navbar-height) + 0.5em);
@@ -52,48 +50,8 @@
     }
   }
 
-  .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

@@ -0,0 +1,14 @@
+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="image-cropper-img-input"
+      class="input image-cropper-img-input"
       :accept="mimes"
     >
   </div>

src/components/importer/importer.vue

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

src/components/input.style.js

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

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

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

src/components/link.style.js

@@ -0,0 +1,24 @@
+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,6 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
+      :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
       role="listitem"
     >
       <slot
@@ -33,24 +34,15 @@ 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

@@ -0,0 +1,48 @@
+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,8 +21,6 @@
 <script src="./lists_card.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .list-card {
   display: flex;
 }
@@ -35,18 +33,6 @@
 .button-list-edit {
   margin: 0;
   padding: 1em;
-  color: $fallback--link;
+  color: var(--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,6 +36,7 @@
           id="list-edit-title"
           ref="title"
           v-model="titleDraft"
+          class="input"
         >
         <button
           v-if="id"
@@ -164,8 +165,6 @@
 <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,6 +10,7 @@
       <input
         ref="search"
         v-model="query"
+        class="input"
         :placeholder="$t('lists.search')"
         @input="onInput"
       >
@@ -27,8 +28,6 @@
 
 <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="form-control"
+              class="input form-control"
               :placeholder="$t('login.placeholder')"
             >
           </div>
@@ -29,7 +29,7 @@
               ref="passwordInput"
               v-model="user.password"
               :disabled="loggingIn"
-              class="form-control"
+              class="input form-control"
               type="password"
             >
           </div>
@@ -93,8 +93,6 @@
 <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,8 +36,6 @@
 <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,10 +1,7 @@
-@import "../../variables";
-
 .MentionLink {
   position: relative;
   white-space: normal;
   display: inline;
-  color: var(--link);
   word-break: normal;
 
   & .new,
@@ -14,7 +11,7 @@
   }
 
   .mention-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
@@ -61,8 +58,10 @@
     }
 
     &.-has-selection {
-      color: var(--alertNeutralText, $fallback--text);
+      --color: var(--selectionText);
-      background-color: var(--alertNeutral, $fallback--fg);
+      --link: var(--selectionText);
+
+      background-color: var(--selectionBackground);
     }
 
     .at {
@@ -102,7 +101,7 @@
   }
 
   .serverName.-faded {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
   }
 }
 

src/components/mention_link/mention_link.vue

@@ -22,7 +22,7 @@
         :class="classnames"
       >
         <a
-          class="short button-unstyled"
+          class="short"
           :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 showMoreLess"
+        class="button-unstyled -link showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('status.plus_more', { number: extraMentions.length }) }}
       </button><button
         v-if="expanded"
-        class="button-unstyled showMoreLess"
+        class="button-unstyled -link showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('general.show_less') }}

src/components/menu_item.style.js

@@ -0,0 +1,90 @@
+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="form-control"
+            class="input form-control"
           >
         </div>
 

src/components/mfa_form/totp_form.vue

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

src/components/mobile_drawer.style.js

@@ -0,0 +1,41 @@
+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="alert-dot"
+            class="badge -dot -notification"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,24 +37,24 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="alert-dot"
+            class="badge -dot -notification"
           />
         </button>
       </div>
     </nav>
     <aside
       v-if="currentUser"
-      class="mobile-notifications-drawer"
+      class="mobile-notifications-drawer mobile-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
     >
-      <div class="mobile-notifications-header">
+      <div class="panel-heading mobile-notifications-header">
         <span class="title">
           {{ $t('notifications.notifications') }}
           <span
             v-if="unseenCountBadgeText"
-            class="badge badge-notification unseen-count"
+            class="badge -notification unseen-count"
           >{{ unseenCountBadgeText }}</span>
         </span>
         <span class="spacer" />
@@ -123,8 +123,6 @@
 <script src="./mobile_nav.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobileNav {
   z-index: var(--ZI_navbar);
 
@@ -137,7 +135,7 @@
     box-sizing: border-box;
 
     a {
-      color: var(--topBarLink, $fallback--link);
+      color: var(--link);
     }
   }
 
@@ -165,19 +163,6 @@
     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;
@@ -185,13 +170,13 @@
     position: fixed;
     top: 0;
     left: 0;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
+    box-shadow: var(--shadow);
-    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%);
@@ -208,11 +193,7 @@
     height: 50px;
     line-height: 50px;
     position: absolute;
-    color: var(--topBarText);
+    box-shadow: var(--shadow);
-    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;
@@ -238,10 +219,6 @@
     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,8 +13,6 @@
 <script src="./mobile_post_status_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobilePostButton {
   &.button-default {
     width: 5em;
@@ -25,8 +23,6 @@
     right: 1.5em;
     // TODO: this needs its own color, it has to stand out enough and link color
     // is not very optimal for this particular use.
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -42,8 +38,7 @@
 
   svg {
     font-size: 1.5em;
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
   }
 }
 

src/components/modal/modals.style.js

@@ -0,0 +1,9 @@
+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="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleRight(&quot;admin&quot;)"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -31,14 +31,14 @@
           </span>
           <button
             v-if="canChangeActivationState"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item menu-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
             v-if="canDeleteAccount"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item menu-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,74 +50,74 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
               />
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
               />
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
               />
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
               />
               {{ $t('user_card.admin_menu.sandbox') }}
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_remote_subscription') }}
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_any_subscription') }}
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
               />
               {{ $t('user_card.admin_menu.quarantine') }}
@@ -166,8 +166,6 @@
 <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,6 +227,5 @@
 <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,7 +37,8 @@
         </NavigationEntry>
         <div
           v-show="showTimelines"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -57,12 +58,11 @@
         >
           <router-link
             :title="$t('lists.manage_lists')"
-            class="extra-button"
+            class="button-unstyled extra-button"
             :to="{ name: 'lists' }"
             @click.stop
           >
             <FAIcon
-              class="extra-button"
               fixed-width
               icon="wrench"
             />
@@ -75,7 +75,8 @@
         </NavigationEntry>
         <div
           v-show="showLists"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showLists }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -102,12 +103,10 @@
 <script src="./nav_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavPanel {
   .panel {
     overflow: hidden;
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
   }
 
   ul {
@@ -116,33 +115,6 @@
     padding: 0;
   }
 
-  li {
-    position: relative;
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  > li {
-    &:first-child .menu-item {
-      border-top-right-radius: $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;
@@ -156,16 +128,6 @@
 
   .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,7 +1,6 @@
 <template>
   <OptionalRouterLink
     v-slot="{ isActive, href, navigate } = {}"
-    ass="ass"
     :to="routeTo"
   >
     <li
@@ -11,7 +10,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link button-unstyled"
+        class="main-link"
         :href="href"
         @click="navigate"
       >
@@ -35,7 +34,7 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge -notification"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -63,73 +62,53 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+  --__line-height: 2.5em;
+  --__horizontal-gap: 0.5em;
+  --__vertical-gap: 0.4em;
 
-.NavigationEntry {
+  padding: 0;
   display: flex;
-  box-sizing: border-box;
   align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
-  padding: 0 1em;
-  width: 100%;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
 
-  .timelines-chevron {
+  &[aria-expanded] {
-    margin-right: 0;
+    padding-right: var(--__horizontal-gap);
   }
 
   .main-link {
+    line-height: var(--__line-height);
+    box-sizing: border-box;
     flex: 1;
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
   }
 
   .menu-icon {
-    margin-right: 0.8em;
+    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;
   }
 
   .extra-button {
-    width: 3em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
     text-align: center;
 
     &:last-child {
-      margin-right: -0.8em;
+      margin-right: calc(-1 * var(--__horizontal-gap));
     }
   }
 
-  &:hover {
+  .badge {
-    background-color: $fallback--lightBg;
+    margin: 0 var(--__horizontal-gap);
-    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,7 +3,8 @@
     <router-link
       v-for="item in pinnedList"
       :key="item.name"
-      class="pinned-item"
+      class="button-unstyled pinned-item"
+      active-class="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
@@ -18,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="alert-dot"
+        class="badge -dot -notification"
       />
     </router-link>
   </span>
@@ -27,25 +28,12 @@
 <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;
@@ -60,15 +48,8 @@
       margin: 0;
     }
 
-    &.router-link-active {
+    &.toggled {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
       border-bottom: 4px solid;
-
-      & .svg-inline--fa,
-      & .iconLetter {
-        color: inherit;
-      }
     }
   }
 }

src/components/notification/notification.scss

@@ -1,13 +1,15 @@
-@import "../../variables";
-
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
-  border-color: $fallback--border;
+  border-color: var(--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 {
@@ -71,28 +73,22 @@
   }
 
   &.-type--repeat .type-icon {
-    color: $fallback--cGreen;
+    color: var(--cGreen);
-    color: var(--cGreen, $fallback--cGreen);
   }
 
   &.-type--follow .type-icon {
-    color: $fallback--cBlue;
+    color: var(--cBlue);
-    color: var(--cBlue, $fallback--cBlue);
   }
 
   &.-type--follow-request .type-icon {
-    color: $fallback--cBlue;
+    color: var(--cBlue);
-    color: var(--cBlue, $fallback--cBlue);
   }
 
   &.-type--like .type-icon {
-    color: orange;
+    color: var(--cOrange);
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
   }
 
   &.-type--move .type-icon {
-    color: $fallback--cBlue;
+    color: var(--cBlue);
-    color: var(--cBlue, $fallback--cBlue);
   }
 }

src/components/notification/notification.style.js

@@ -0,0 +1,17 @@
+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-link"
+              class="timeago-link faint"
             >
               <Timeago
                 :time="notification.created_at"
@@ -247,7 +247,6 @@
         />
         <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="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('likes')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.likes }"
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('repeats')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.repeats }"
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('follows')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.follows }"
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('mentions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.mentions }"
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('moves')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.moves }"
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('polls')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.polls }"
           />{{ $t('settings.notification_visibility_polls') }}
         </button>

src/components/notifications/notifications.scss

@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
@@ -7,8 +5,7 @@
   }
 
   .loadmore-error {
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
   }
 
   .notification {
@@ -25,7 +22,7 @@
 
     &.unseen {
       .notification-overlay {
-        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
+        background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
       }
     }
   }
@@ -35,6 +32,11 @@
 .notification {
   box-sizing: border-box;
 
+  /* TODO cleanup this */
+  .Status {
+    flex: 1;
+  }
+
   &:hover .animated.Avatar {
     canvas {
       display: none;
@@ -60,24 +62,17 @@
       width: 32px;
       height: 32px;
     }
-
-    .faint {
-      --link: var(--faintLink);
-      --text: var(--faint);
-    }
   }
 
   .follow-request-accept {
     &:hover {
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--text, $fallback--text);
     }
   }
 
   .follow-request-reject {
     &:hover {
-      color: $fallback--cRed;
+      color: var(--cRed);
-      color: var(--cRed, $fallback--cRed);
     }
   }
 
@@ -97,11 +92,6 @@
     }
   }
 
-  /* 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 badge-notification unseen-count"
+              class="badge -notification unseen-count"
             >{{ unseenCountBadgeText }}</span>
           </div>
           <div
@@ -85,7 +85,7 @@
           </div>
           <button
             v-else-if="!loading"
-            class="button-unstyled -link -fullwidth"
+            class="button-unstyled -link text-center"
             @click.prevent="fetchOlderNotifications()"
           >
             <div class="new-status-notification text-center">

src/components/opacity_input/opacity_input.vue

@@ -18,7 +18,7 @@
     />
     <input
       :id="name"
-      class="input-number"
+      class="input input-number"
       type="number"
       :value="modelValue || fallback"
       :disabled="!present || disabled"

src/components/panel.style.js

@@ -0,0 +1,41 @@
+export default {
+  name: 'Panel',
+  selector: '.panel',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'PanelHeader',
+    'MenuItem',
+    'Post',
+    'Notification',
+    'Alert',
+    'UserCard',
+    'Chat',
+    'Attachment',
+    'Tab',
+    'ListItem'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        backgroundNoCssColor: 'yes',
+        background: '--bg',
+        roundness: 3,
+        blur: '5px',
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
+      }
+    }
+  ]
+}

src/components/panel_header.style.js

@@ -0,0 +1,24 @@
+export default {
+  name: 'PanelHeader',
+  selector: '.panel-heading',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'ButtonUnstyled',
+    'Badge',
+    'Alert',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      component: 'PanelHeader',
+      directives: {
+        backgroundNoCssColor: 'yes',
+        background: '--fg',
+        shadow: []
+      }
+    }
+  ]
+}

src/components/panel_loading/panel_loading.vue

@@ -23,22 +23,18 @@ export default {}
 </script>
 
 <style lang="scss">
-@import "src/variables";
-
 .panel-loading {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   font-size: 2em;
-  color: $fallback--text;
+  color: var(--text);
-  color: var(--text, $fallback--text);
 
   .loading-text svg {
     line-height: 0;
     vertical-align: middle;
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
   }
 }
 </style>

src/components/password_reset/password_reset.vue

@@ -30,7 +30,7 @@
           <div v-else>
             <p
               v-if="passwordResetRequested"
-              class="password-reset-required error"
+              class="alert password-reset-required error"
             >
               {{ $t('password_reset.password_reset_required') }}
             </p>
@@ -43,7 +43,7 @@
                 v-model="user.email"
                 :disabled="isPending"
                 :placeholder="$t('password_reset.placeholder')"
-                class="form-control"
+                class="input form-control"
                 type="input"
               >
             </div>
@@ -77,8 +77,6 @@
 
 <script src="./password_reset.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .password-reset-form {
   display: flex;
   flex-direction: column;
@@ -117,11 +115,6 @@
     margin: 0.3em 0 1em;
   }
 
-  .password-reset-required {
-    background-color: var(--alertError, $fallback--alertError);
-    padding: 10px 0;
-  }
-
   .notice-dismissible {
     padding-right: 2rem;
   }

src/components/poll/poll.vue

@@ -37,12 +37,14 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
+          class="input unstyled"
           @click="activateOption(index)"
         >
+          <!-- TODO: USE CHECKBOX -->
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -51,6 +53,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent
@@ -103,8 +106,6 @@
 <script src="./poll.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll {
   .votes {
     display: flex;
@@ -114,6 +115,10 @@
 
   .poll-option {
     margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
   }
 
   .option-result {
@@ -121,8 +126,7 @@
     display: flex;
     flex-direction: row;
     position: relative;
-    color: $fallback--lightText;
+    color: var(--textLight);
-    color: var(--lightText, $fallback--lightText);
   }
 
   .option-result-label {
@@ -141,12 +145,7 @@
   .result-fill {
     height: 100%;
     position: absolute;
-    color: $fallback--text;
+    border-radius: var(--roundness);
-    color: var(--pollText, $fallback--text);
-    background-color: $fallback--lightBg;
-    background-color: var(--poll, $fallback--lightBg);
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
     top: 0;
     left: 0;
     transition: width 0.5s;

src/components/poll/poll_form.vue

@@ -13,7 +13,7 @@
           :id="`poll-${index}`"
           v-model="options[index]"
           size="1"
-          class="poll-option-input"
+          class="input poll-option-input"
           type="text"
           :placeholder="$t('polls.option')"
           :maxlength="maxLength"
@@ -67,7 +67,7 @@
         <input
           v-model="expiryAmount"
           type="number"
-          class="expiry-amount hide-number-spinner"
+          class="input expiry-amount hide-number-spinner"
           :min="minExpirationInCurrentUnit"
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
@@ -95,8 +95,6 @@
 <script src="./poll_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll-form {
   display: flex;
   flex-direction: column;

src/components/poll/poll_graph.style.js

@@ -0,0 +1,12 @@
+export default {
+  name: 'PollGraph',
+  selector: '.result-fill',
+  defaultRules: [
+    {
+      directives: {
+        background: '--accent',
+        opacity: 0.5
+      }
+    }
+  ]
+}

src/components/popover.style.js

@@ -0,0 +1,36 @@
+export default {
+  name: 'Popover',
+  selector: '.popover',
+  lazy: true,
+  variants: {
+    modal: '.modal'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'MenuItem',
+    'Post',
+    'UserCard'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        blur: '10px',
+        shadow: [{
+          x: 2,
+          y: 2,
+          blur: 3,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.5
+        }]
+      }
+    }
+  ]
+}

src/components/popover/popover.vue

@@ -42,8 +42,6 @@
 <script src="./popover.js" />
 
 <style lang="scss">
-@import "../../variables";
-
 .popover-trigger-button {
   display: inline-block;
 }
@@ -53,42 +51,31 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
+  box-shadow: var(--shadow);
-  box-shadow: var(--popupShadow);
 }
 
 .popover-default {
   &::after {
     content: "";
     position: absolute;
-    top: 0;
+    top: -1px;
-    bottom: 0;
+    bottom: -1px;
-    left: 0;
+    left: -1px;
-    right: 0;
+    right: -1px;
-    z-index: 3;
+    z-index: -1px;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
+    box-shadow: var(--shadow);
-    box-shadow: var(--panelShadow);
     pointer-events: none;
   }
 
-  border-radius: $fallback--btnRadius;
+  border-radius: var(--roundness);
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  border-color: var(--border);
-  background-color: $fallback--bg;
+  border-style: solid;
-  background-color: var(--popover, $fallback--bg);
+  border-width: 1px;
-  color: $fallback--text;
-  color: var(--popoverText, $fallback--text);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --postLink: var(--popoverPostLink, $fallback--link);
-  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-  --icon: var(--popoverIcon, $fallback--icon);
 }
 
 .dropdown-menu {
   display: block;
-  padding: 0.5rem 0;
+  padding: 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
@@ -100,34 +87,16 @@
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
-    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border);
-    border-top: 1px solid var(--border, $fallback--border);
   }
 
   .dropdown-item {
-    line-height: 21px;
-    overflow: hidden;
-    display: block;
-    padding: 0.5em 0.75em;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: nowrap;
     border: none;
-    border-radius: 0;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    --btnText: var(--popoverText, $fallback--text);
 
     &-icon {
       svg {
-        width: 22px;
+        width: var(--__line-height);
-        margin-right: 0.75rem;
+        margin-right: var(--__horizontal-gap);
-        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
@@ -138,40 +107,18 @@
       }
     }
 
-    &:active,
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      box-shadow: none;
-
-      --btnText: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-      svg {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
-      min-width: 22px;
+      min-width: calc(var(--__line-height) + 1px);
-      max-width: 22px;
+      max-width: calc(var(--__line-height) + 1px);
-      min-height: 22px;
+      min-height: calc(var(--__line-height) + 1px);
-      max-height: 22px;
+      max-height: calc(var(--__line-height) + 1px);
-      line-height: 22px;
+      line-height: var(--__line-height);
       text-align: center;
       border-radius: 0;
-      background-color: $fallback--fg;
+      box-shadow: var(--shadow);
-      background-color: var(--input, $fallback--fg);
+      margin-right: var(--__horizontal-gap);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
-      margin-right: 0.75em;
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
@@ -188,30 +135,5 @@
       }
     }
   }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*="icon-"] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
 }
 </style>

src/components/post_status_form/post_status_form.vue

@@ -161,7 +161,7 @@
           v-model="newStatus.spoilerText"
           enable-emoji-picker
           :suggest="emojiSuggestor"
-          class="form-control"
+          class="input form-control"
         >
           <template #default="inputProps">
             <input
@@ -171,7 +171,7 @@
               :disabled="posting && !optimisticPosting"
               v-bind="propsToNative(inputProps)"
               size="1"
-              class="form-post-subject"
+              class="input form-post-subject"
             >
           </template>
         </EmojiInput>
@@ -180,7 +180,7 @@
           v-model="newStatus.status"
           :suggest="emojiUserSuggestor"
           :placement="emojiPickerPlacement"
-          class="form-control main-input"
+          class="input form-control main-input"
           enable-emoji-picker
           hide-emoji-button
           :newline-on-ctrl-enter="submitOnEnter"
@@ -198,7 +198,7 @@
               rows="1"
               cols="1"
               :disabled="posting && !optimisticPosting"
-              class="form-post-body"
+              class="input form-post-body"
               :class="{ 'scrollable-form': !!maxHeight }"
               v-bind="propsToNative(inputProps)"
               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@@ -237,7 +237,7 @@
             <Select
               id="post-content-type"
               v-model="newStatus.contentType"
-              class="form-control"
+              class="input form-control"
               :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
             >
               <option
@@ -375,8 +375,6 @@
 <script src="./post_status_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .post-status-form {
   position: relative;
 
@@ -437,15 +435,12 @@
 
   .preview-error {
     font-style: italic;
-    color: $fallback--faint;
+    color: var(--textFaint);
-    color: var(--faint, $fallback--faint);
   }
 
   .preview-status {
-    border: 1px solid $fallback--border;
+    border: 1px solid var(--border);
-    border: 1px solid var(--border, $fallback--border);
+    border-radius: var(--roundness);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     padding: 0.5em;
     margin: 0;
   }
@@ -456,8 +451,7 @@
 
   .text-format {
     .only-format {
-      color: $fallback--faint;
+      color: var(--textFaint);
-      color: var(--faint, $fallback--faint);
     }
   }
 
@@ -503,31 +497,6 @@
     padding: 0 0.1em;
     display: flex;
     align-items: center;
-
-    &.selected,
-    &:hover {
-      // needs to be specific to override icon default color
-      svg,
-      i,
-      label {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
-    }
-
-    &.disabled {
-      svg,
-      i {
-        cursor: not-allowed;
-        color: $fallback--icon;
-        color: var(--btnDisabledText, $fallback--icon);
-
-        &:hover {
-          color: $fallback--icon;
-          color: var(--btnDisabledText, $fallback--icon);
-        }
-      }
-    }
   }
 
   .error {
@@ -580,7 +549,7 @@
     line-height: 1.85;
   }
 
-  .form-post-body {
+  .input.form-post-body {
     // TODO: make a resizable textarea component?
     box-sizing: content-box; // needed for easier computation of dynamic size
     overflow: hidden;
@@ -591,6 +560,7 @@
     height: calc(var(--post-line-height) * 1em);
     min-height: calc(var(--post-line-height) * 1em);
     resize: none;
+    background: transparent;
 
     &.scrollable-form {
       overflow-y: auto;
@@ -609,8 +579,7 @@
     margin: 0 0.5em;
 
     &.error {
-      color: $fallback--cRed;
+      color: var(--cRed);
-      color: var(--cRed, $fallback--cRed);
     }
   }
 
@@ -633,14 +602,10 @@
     align-items: center;
     justify-content: center;
     opacity: 0.6;
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
+    background-color: var(--bg);
-    background-color: $fallback--bg;
+    border-radius: var(--roundness);
-    background-color: var(--bg, $fallback--bg);
+    border: 2px dashed var(--text);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    border: 2px dashed $fallback--text;
-    border: 2px dashed var(--text, $fallback--text);
   }
 }
 </style>

src/components/quick_filter_settings/quick_filter_settings.vue

@@ -16,39 +16,39 @@
         >
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityAll"
             role="menuitemradio"
             @click="replyVisibilityAll = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_all') }}
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityFollowing"
             role="menuitemradio"
             @click="replyVisibilityFollowing = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_following_short') }}
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilitySelf"
             role="menuitemradio"
             @click="replyVisibilitySelf = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_self_short') }}
@@ -60,43 +60,43 @@
           />
         </div>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="muteBotStatuses"
           @click="muteBotStatuses = !muteBotStatuses"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': muteBotStatuses }"
             :aria-hidden="true"
           />{{ $t('settings.mute_bot_posts') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMedia"
           @click="hideMedia = !hideMedia"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMedia }"
             :aria-hidden="true"
           />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMutedPosts"
           @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMutedPosts }"
             :aria-hidden="true"
           />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('filtering')"
         >

src/components/quick_view_settings/quick_view_settings.vue

@@ -12,13 +12,13 @@
       >
         <div role="group">
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'tree'"
             role="menuitemradio"
             @click="conversationDisplay = 'tree'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :aria-hidden="true"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
             /><FAIcon
@@ -27,13 +27,13 @@
             /> {{ $t('settings.conversation_display_tree_quick') }}
           </button>
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'linear'"
             role="menuitemradio"
             @click="conversationDisplay = 'linear'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
               :aria-hidden="true"
             /><FAIcon
@@ -47,45 +47,45 @@
           class="dropdown-divider"
         />
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="showUserAvatars"
           @click="showUserAvatars = !showUserAvatars"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': showUserAvatars }"
             :aria-hidden="true"
           />{{ $t('settings.mention_link_show_avatar_quick') }}
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="autoUpdate"
           @click="autoUpdate = !autoUpdate"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': autoUpdate }"
             :aria-hidden="true"
           />{{ $t('settings.auto_update') }}
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="collapseWithSubjects"
           @click="collapseWithSubjects = !collapseWithSubjects"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
             :aria-hidden="true"
           />{{ $t('settings.collapse_subject') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('general')"
         >

src/components/range_input/range_input.vue

@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="opt visible-for-screenreader-only"
+      class="input -checkbox opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
@@ -27,7 +27,7 @@
     />
     <input
       :id="name"
-      class="input-number"
+      class="input input-number"
       type="range"
       :value="modelValue || fallback"
       :disabled="!present || disabled"
@@ -38,7 +38,7 @@
     >
     <input
       :id="name + '-numeric'"
-      class="input-number"
+      class="input input-number"
       type="number"
       :aria-labelledby="name + '-label'"
       :value="modelValue || fallback"

src/components/react_button/react_button.vue

@@ -41,7 +41,6 @@
 <script src="./react_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ReactButton {
@@ -58,7 +57,7 @@
     height: 1px;
     width: 100%;
     margin: 0.5em;
-    background-color: var(--border, $fallback--border);
+    background-color: var(--border);
   }
 
   .reaction-picker {
@@ -99,11 +98,6 @@
     padding: 10px;
     margin: -10px;
 
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     @include unfocused-style {
       .focus-marker {
         visibility: hidden;

src/components/registration/registration.vue

@@ -25,7 +25,7 @@
                 id="sign-up-username"
                 v-model.trim="v$.user.username.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :aria-required="true"
                 :placeholder="$t('registration.username_placeholder')"
               >
@@ -53,7 +53,7 @@
                 id="sign-up-fullname"
                 v-model.trim="v$.user.fullname.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :aria-required="true"
                 :placeholder="$t('registration.fullname_placeholder')"
               >
@@ -81,7 +81,7 @@
                 id="email"
                 v-model="v$.user.email.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="email"
                 :aria-required="accountActivationRequired"
               >
@@ -106,7 +106,7 @@
                 id="bio"
                 v-model="user.bio"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :placeholder="bioPlaceholder"
               />
             </div>
@@ -123,7 +123,7 @@
                 id="sign-up-password"
                 v-model="user.password"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="password"
                 :aria-required="true"
               >
@@ -151,7 +151,7 @@
                 id="sign-up-password-confirmation"
                 v-model="user.confirm"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="password"
                 :aria-required="true"
               >
@@ -184,7 +184,7 @@
                 id="sign-up-birthday"
                 v-model="user.birthday"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="date"
                 :max="birthdayRequired ? birthdayMinAttr : undefined"
                 :aria-required="birthdayRequired"
@@ -229,7 +229,7 @@
                 id="reason"
                 v-model="user.reason"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :placeholder="reasonPlaceholder"
               />
             </div>
@@ -256,7 +256,7 @@
                   id="captcha-answer"
                   v-model="captcha.solution"
                   :disabled="isPending"
-                  class="form-control"
+                  class="input form-control"
                   type="text"
                   autocomplete="off"
                   autocorrect="off"
@@ -275,7 +275,7 @@
                 id="token"
                 v-model="token"
                 disabled="true"
-                class="form-control"
+                class="input form-control"
                 type="text"
               >
             </div>
@@ -320,9 +320,6 @@
 
 <script src="./registration.js"></script>
 <style lang="scss">
-@import "../../variables";
-$validations-cRed: #f04124;
-
 .registration-form {
   display: flex;
   flex-direction: column;
@@ -369,8 +366,7 @@ $validations-cRed: #f04124;
   }
 
   .form-group--error .form--label {
-    color: $validations-cRed;
+    color: var(--cRed);
-    color: var(--cRed, $validations-cRed);
   }
 
   .form-error {

src/components/reply_button/reply_button.vue

@@ -59,7 +59,6 @@
 <script src="./reply_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ReplyButton {
@@ -78,8 +77,7 @@
   .interactive {
     &:hover .svg-inline--fa,
     &.-active .svg-inline--fa {
-      color: $fallback--cBlue;
+      color: var(--cBlue);
-      color: var(--cBlue, $fallback--cBlue);
     }
 
     @include unfocused-style {