Make drafts work with Themes 3

src/App.scss

@@ -749,9 +749,8 @@ option {
     margin-top: -1em;
   }
 
-  &.badge-neutral {
+  &.-neutral {
-    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral);
-    background-color: var(--badgeNeutral, $fallback--cGreen);
     color: white;
     color: var(--badgeNeutralText, white);
   }

src/components/draft/draft.vue

@@ -72,18 +72,14 @@
 <script src="./draft.js"></script>
 
 <style lang="scss">
-@import "src/variables";
-
 .Draft {
   margin: 1em;
 
   .status-content {
-    border: 1px solid $fallback--faint;
+    border: 1px solid;
-    border-color: var(--faint, $fallback--faint);
+    border-color: var(--faint);
-    border-radius: $fallback--inputRadius;
+    border-radius: var(--inputRadius);
-    border-radius: var(--inputRadius, $fallback--inputRadius);
+    color: var(--text);
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
     padding: 0.5em;
     margin: 0.5em 0;
   }

src/components/draft_closer/draft_closer.vue

@@ -5,7 +5,7 @@
       v-body-scroll-lock="true"
       class="confirm-modal"
       :on-cancel="cancel"
-      >
+    >
       <template #header>
         <span>
           {{ $t('post_status.close_confirm_title') }}

src/components/navigation/navigation_entry.vue

@@ -34,8 +34,8 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge -notification"
+        class="badge"
-        :class="[`badge-${item.badgeStyle}`]"
+        :class="[`-${item.badgeStyle}`]"
       >
         {{ getters[item.badgeGetter] }}
       </div>

src/components/navigation/navigation_pins.vue

@@ -19,8 +19,8 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge -dot -notification"
+        class="badge -dot"
-        :class="[`alert-dot-${item.badgeStyle}`]"
+        :class="[`-${item.badgeStyle}`]"
       />
     </router-link>
   </span>
@@ -36,13 +36,11 @@
   height: 100%;
 
   &.alert-dot-notification {
-    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification);
-    background-color: var(--badgeNotification, $fallback--cRed);
   }
 
   &.alert-dot-neutral {
-    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral);
-    background-color: var(--badgeNeutral, $fallback--cGreen);
   }
 
   .pinned-item {

src/components/side_drawer/side_drawer.vue

@@ -255,7 +255,7 @@
             /> {{ $t('nav.drafts') }}
             <span
               v-if="draftCount"
-              class="badge badge-neutral"
+              class="badge -neutral"
             >
               {{ draftCount }}
             </span>