Merge branch 'develop' into 'scrobbles-age'

# Conflicts:
#   src/i18n/en.json

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .emoji-tab {
   .btn-group .btn:not(:first-child) {
     margin-left: 0.5em;
@@ -25,7 +23,7 @@
   }
 
   .emoji-unsaved {
-    box-shadow: 0 3px 5px var(--cBlue, $fallback--cBlue);
+    box-shadow: 0 3px 5px var(--cBlue);
   }
 
   .emoji-list {
@@ -56,6 +54,6 @@
   }
 
   .warning {
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 }

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -13,13 +13,15 @@
           <button
             class="button button-default btn"
             type="button"
-            @click="reloadEmoji">
+            @click="reloadEmoji"
+          >
             {{ $t('admin_dash.emoji.reload') }}
           </button>
           <button
             class="button button-default btn"
             type="button"
-            @click="importFromFS">
+            @click="importFromFS"
+          >
             {{ $t('admin_dash.emoji.importFS') }}
           </button>
         </li>
@@ -28,7 +30,8 @@
           <button
             class="button button-default btn"
             type="button"
-            @click="$refs.remotePackPopover.showPopover">
+            @click="$refs.remotePackPopover.showPopover"
+          >
             {{ $t('admin_dash.emoji.remote_packs') }}
 
             <Popover
@@ -43,11 +46,16 @@
               <template #content>
                 <div class="emoji-tab-popover-input">
                   <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
-                  <input v-model="remotePackInstance" :placeholder="$t('admin_dash.emoji.remote_pack_instance')">
+                  <input
+                    v-model="remotePackInstance"
+                    class="input"
+                    :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
+                  >
                   <button
                     class="button button-default btn emoji-tab-popover-button"
                     type="button"
-                    @click="listRemotePacks">
+                    @click="listRemotePacks"
+                  >
                     {{ $t('admin_dash.emoji.do_list') }}
                   </button>
                 </div>
@@ -61,9 +69,22 @@
         <li>
           <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4>
 
-          <Select class="form-control" v-model="packName">
-            <option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option>
-            <option v-for="(pack, listPackName) in knownPacks" :label="listPackName" :key="listPackName">
+          <Select
+            v-model="packName"
+            class="form-control"
+          >
+            <option
+              value=""
+              disabled
+              hidden
+            >
+              {{ $t('admin_dash.emoji.emoji_pack') }}
+            </option>
+            <option
+              v-for="(pack, listPackName) in knownPacks"
+              :key="listPackName"
+              :label="listPackName"
+            >
               {{ listPackName }}
             </option>
           </Select>
@@ -71,7 +92,8 @@
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
-            @click="$refs.createPackPopover.showPopover">
+            @click="$refs.createPackPopover.showPopover"
+          >
             {{ $t('admin_dash.emoji.create_pack') }}
           </button>
           <Popover
@@ -86,11 +108,16 @@
             <template #content>
               <div class="emoji-tab-popover-input">
                 <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
-                <input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
+                <input
+                  v-model="newPackName"
+                  :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                  class="input"
+                >
                 <button
                   class="button button-default btn emoji-tab-popover-button"
                   type="button"
-                  @click="createEmojiPack">
+                  @click="createEmojiPack"
+                >
                   {{ $t('admin_dash.emoji.create') }}
                 </button>
               </div>
@@ -105,67 +132,96 @@
             <li>
               <label>
                 {{ $t('admin_dash.emoji.description') }}
-                <ModifiedIndicator :changed="metaEdited('description')" message-key="admin_dash.emoji.metadata_changed" />
+                <ModifiedIndicator
+                  :changed="metaEdited('description')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
 
                 <textarea
                   v-model="packMeta.description"
                   :disabled="pack.remote !== undefined"
-                  class="bio resize-height" />
+                  class="bio resize-height input"
+                />
               </label>
             </li>
             <li>
               <label>
                 {{ $t('admin_dash.emoji.homepage') }}
-                <ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" />
+                <ModifiedIndicator
+                  :changed="metaEdited('homepage')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
 
-              <input
-                class="emoji-info-input" v-model="packMeta.homepage"
-                :disabled="pack.remote !== undefined">
+                <input
+                  v-model="packMeta.homepage"
+                  class="emoji-info-input input"
+                  :disabled="pack.remote !== undefined"
+                >
               </label>
             </li>
             <li>
               <label>
                 {{ $t('admin_dash.emoji.fallback_src') }}
-                <ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" />
+                <ModifiedIndicator
+                  :changed="metaEdited('fallback-src')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
 
-                <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
+                <input
+                  v-model="packMeta['fallback-src']"
+                  class="emoji-info-input input"
+                  :disabled="pack.remote !== undefined"
+                >
               </label>
             </li>
             <li>
               <label>
                 {{ $t('admin_dash.emoji.fallback_sha256') }}
 
-                <input :disabled="true" class="emoji-info-input" v-model="packMeta['fallback-src-sha256']">
+                <input
+                  v-model="packMeta['fallback-src-sha256']"
+                  :disabled="true"
+                  class="emoji-info-input input"
+                >
               </label>
             </li>
             <li>
-              <Checkbox :disabled="pack.remote !== undefined" v-model="packMeta['share-files']">
+              <Checkbox
+                v-model="packMeta['share-files']"
+                :disabled="pack.remote !== undefined"
+              >
                 {{ $t('admin_dash.emoji.share') }}
               </Checkbox>
 
-              <ModifiedIndicator :changed="metaEdited('share-files')" message-key="admin_dash.emoji.metadata_changed" />
+              <ModifiedIndicator
+                :changed="metaEdited('share-files')"
+                message-key="admin_dash.emoji.metadata_changed"
+              />
             </li>
             <li class="btn-group">
               <button
+                v-if="pack.remote === undefined"
                 class="button button-default btn"
                 type="button"
-                v-if="pack.remote === undefined"
-                @click="savePackMetadata">
+                @click="savePackMetadata"
+              >
                 {{ $t('admin_dash.emoji.save_meta') }}
               </button>
               <button
+                v-if="pack.remote === undefined"
                 class="button button-default btn"
                 type="button"
-                v-if="pack.remote === undefined"
-                @click="savePackMetadata">
+                @click="savePackMetadata"
+              >
                 {{ $t('admin_dash.emoji.revert_meta') }}
               </button>
 
               <button
-                class="button button-default btn"
                 v-if="pack.remote === undefined"
+                class="button button-default btn"
                 type="button"
-                @click="deleteModalVisible = true">
+                @click="deleteModalVisible = true"
+              >
                 {{ $t('admin_dash.emoji.delete_pack') }}
 
                 <ConfirmModal
@@ -174,16 +230,18 @@
                   :cancel-text="$t('status.delete_confirm_cancel_button')"
                   :confirm-text="$t('status.delete_confirm_accept_button')"
                   @cancelled="deleteModalVisible = false"
-                  @accepted="deleteEmojiPack" >
+                  @accepted="deleteEmojiPack"
+                >
                   {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
                 </ConfirmModal>
               </button>
 
               <button
+                v-if="pack.remote !== undefined"
                 class="button button-default btn"
                 type="button"
-                v-if="pack.remote !== undefined"
-                @click="$refs.dlPackPopover.showPopover">
+                @click="$refs.dlPackPopover.showPopover"
+              >
                 {{ $t('admin_dash.emoji.download_pack') }}
 
                 <Popover
@@ -202,12 +260,17 @@
                         <div class="emoji-tab-popover-input">
                           <label>
                             {{ $t('admin_dash.emoji.download_as_name') }}
-                            <input class="emoji-data-input"
+                            <input
                               v-model="remotePackDownloadAs"
-                              :placeholder="$t('admin_dash.emoji.download_as_name_full')">
+                              class="emoji-data-input input"
+                              :placeholder="$t('admin_dash.emoji.download_as_name_full')"
+                            >
                           </label>
 
-                          <div v-if="downloadWillReplaceLocal" class="warning">
+                          <div
+                            v-if="downloadWillReplaceLocal"
+                            class="warning"
+                          >
                             <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
                           </div>
                         </div>
@@ -215,7 +278,8 @@
                         <button
                           class="button button-default btn"
                           type="button"
-                          @click="downloadRemotePack">
+                          @click="downloadRemotePack"
+                        >
                           {{ $t('admin_dash.emoji.download') }}
                         </button>
                       </div>
@@ -231,31 +295,47 @@
           <h4>
             {{ $t('admin_dash.emoji.files') }}
 
-            <ModifiedIndicator v-if="pack"
+            <ModifiedIndicator
+              v-if="pack"
               :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
-              message-key="admin_dash.emoji.emoji_changed"/>
+              message-key="admin_dash.emoji.emoji_changed"
+            />
           </h4>
 
-          <div class="emoji-list" v-if="pack">
+          <div
+            v-if="pack"
+            class="emoji-list"
+          >
             <EmojiEditingPopover
               v-if="pack.remote === undefined"
-              placement="bottom" new-upload
+              placement="bottom"
+              new-upload
               :title="$t('admin_dash.emoji.adding_new')"
-              :packName="packName"
-              @updatePackFiles="updatePackFiles" @displayError="displayError"
+              :pack-name="packName"
+              @updatePackFiles="updatePackFiles"
+              @displayError="displayError"
             >
               <template #trigger>
-                <FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" />
+                <FAIcon
+                  icon="plus"
+                  size="2x"
+                  :title="$t('admin_dash.emoji.add_file')"
+                />
               </template>
             </EmojiEditingPopover>
 
             <EmojiEditingPopover
-              placement="top" ref="emojiPopovers"
-              v-for="(file, shortcode) in pack.files" :key="shortcode"
+              v-for="(file, shortcode) in pack.files"
+              ref="emojiPopovers"
+              :key="shortcode"
+              placement="top"
               :title="$t('admin_dash.emoji.editing', [shortcode])"
               :disabled="pack.remote !== undefined"
-              :shortcode="shortcode" :file="file" :packName="packName"
-              @updatePackFiles="updatePackFiles" @displayError="displayError"
+              :shortcode="shortcode"
+              :file="file"
+              :pack-name="packName"
+              @updatePackFiles="updatePackFiles"
+              @displayError="displayError"
             >
               <template #trigger>
                 <StillImage

src/components/settings_modal/admin_tabs/frontends_tab.vue

@@ -6,7 +6,10 @@
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
       <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
-      <ul class="setting-list" v-if="adminDraft">
+      <ul
+        v-if="adminDraft"
+        class="setting-list"
+      >
         <li>
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
@@ -23,12 +26,18 @@
           </ul>
         </li>
       </ul>
-      <div v-else class="setting-list">
+      <div
+        v-else
+        class="setting-list"
+      >
         {{ $t('admin_dash.frontend.default_frontend_unavail') }}
       </div>
 
       <div class="setting-list relative">
-        <PanelLoading class="overlay" v-if="working"/>
+        <PanelLoading
+          v-if="working"
+          class="overlay"
+        />
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
         <ul class="cards-list">
           <li
@@ -107,7 +116,7 @@
                       <button
                         v-for="ref in frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="update(frontend, ref)"
                         @click="close"
                       >
@@ -164,7 +173,7 @@
                       <button
                         v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="setDefault(frontend, ref)"
                         @click="close"
                       >

src/components/settings_modal/admin_tabs/instance_tab.vue

@@ -8,7 +8,10 @@
         </li>
         <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
         <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
-          <AttachmentSetting compact path=":pleroma.:instance.:favicon" />
+          <AttachmentSetting
+            compact
+            path=":pleroma.:instance.:favicon"
+          />
         </li>
         <li>
           <StringSetting path=":pleroma.:instance.:email" />
@@ -20,7 +23,10 @@
           <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
         <li>
-          <AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
+          <AttachmentSetting
+            compact
+            path=":pleroma.:instance.:instance_thumbnail"
+          />
         </li>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />

src/components/settings_modal/helpers/attachment_setting.vue

@@ -29,7 +29,7 @@
         <label for="path">{{ $t('settings.url') }}</label>
         <input
           :id="path"
-          class="string-input"
+          class="input string-input"
           :disabled="shouldBeDisabled"
           :value="realDraftMode ? draft : state"
           @change="update"

src/components/settings_modal/helpers/emoji_editing_popover.vue

@@ -1,10 +1,10 @@
 <template>
   <Popover
+    ref="emojiPopover"
     trigger="click"
     :placement="placement"
     bound-to-selector=".emoji-list"
     popover-class="emoji-tab-edit-popover popover-default"
-    ref="emojiPopover"
     :bound-to="{ x: 'container' }"
     :offset="{ y: 5 }"
     :disabled="disabled"
@@ -18,23 +18,36 @@
         {{ title }}
       </h3>
 
-      <StillImage class="emoji" v-if="emojiPreview" :src="emojiPreview" />
-      <div v-else class="emoji"></div>
+      <StillImage
+        v-if="emojiPreview"
+        class="emoji"
+        :src="emojiPreview"
+      />
+      <div
+        v-else
+        class="emoji"
+      />
 
-      <div class="emoji-tab-popover-input" v-if="newUpload">
+      <div
+        v-if="newUpload"
+        class="emoji-tab-popover-input"
+      >
         <input
           type="file"
           accept="image/*"
-          class="emoji-tab-popover-file"
-          @change="uploadFile = $event.target.files">
+          class="emoji-tab-popover-file input"
+          @change="uploadFile = $event.target.files"
+        >
       </div>
       <div>
         <div class="emoji-tab-popover-input">
           <label>
             {{ $t('admin_dash.emoji.shortcode') }}
-            <input class="emoji-data-input"
+            <input
               v-model="editedShortcode"
-              :placeholder="$t('admin_dash.emoji.new_shortcode')">
+              class="emoji-data-input input"
+              :placeholder="$t('admin_dash.emoji.new_shortcode')"
+            >
           </label>
         </div>
 
@@ -42,9 +55,11 @@
           <label>
             {{ $t('admin_dash.emoji.filename') }}
 
-            <input class="emoji-data-input"
+            <input
               v-model="editedFile"
-              :placeholder="$t('admin_dash.emoji.new_filename')">
+              class="emoji-data-input input"
+              :placeholder="$t('admin_dash.emoji.new_filename')"
+            >
           </label>
         </div>
 
@@ -52,7 +67,8 @@
           class="button button-default btn"
           type="button"
           :disabled="newUpload ? uploadFile.length == 0 : !isEdited"
-          @click="newUpload ? uploadEmoji() : saveEditedEmoji()">
+          @click="newUpload ? uploadEmoji() : saveEditedEmoji()"
+        >
           {{ $t('admin_dash.emoji.save') }}
         </button>
 
@@ -60,13 +76,15 @@
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
-            @click="deleteModalVisible = true">
+            @click="deleteModalVisible = true"
+          >
             {{ $t('admin_dash.emoji.delete') }}
           </button>
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
-            @click="revertEmoji">
+            @click="revertEmoji"
+          >
             {{ $t('admin_dash.emoji.revert') }}
           </button>
           <ConfirmModal
@@ -75,7 +93,8 @@
             :cancel-text="$t('status.delete_confirm_cancel_button')"
             :confirm-text="$t('status.delete_confirm_accept_button')"
             @cancelled="deleteModalVisible = false"
-            @accepted="deleteEmoji" >
+            @accepted="deleteEmoji"
+          >
             {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
           </ConfirmModal>
         </template>
@@ -91,6 +110,30 @@ import StillImage from 'components/still-image/still-image.vue'
 
 export default {
   components: { Popover, ConfirmModal, StillImage },
+  inject: ['emojiAddr'],
+  props: {
+    placement: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    newUpload: Boolean,
+
+    title: String,
+    packName: String,
+    shortcode: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    },
+    file: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    }
+  },
+  emits: ['updatePackFiles', 'displayError'],
   data () {
     return {
       uploadFile: [],
@@ -113,7 +156,6 @@ export default {
       return !this.newUpload && (this.editedShortcode !== this.shortcode || this.editedFile !== this.file)
     }
   },
-  inject: ['emojiAddr'],
   methods: {
     saveEditedEmoji () {
       if (!this.isEdited) return
@@ -167,29 +209,6 @@ export default {
         this.$emit('updatePackFiles', resp)
       })
     }
-  },
-  emits: ['updatePackFiles', 'displayError'],
-  props: {
-    placement: String,
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-
-    newUpload: Boolean,
-
-    title: String,
-    packName: String,
-    shortcode: {
-      type: String,
-      // Only exists when this is not a new upload
-      default: ''
-    },
-    file: {
-      type: String,
-      // Only exists when this is not a new upload
-      default: ''
-    }
   }
 }
 </script>

src/components/settings_modal/helpers/number_setting.vue

@@ -17,7 +17,7 @@
     </label>
     <input
       :id="path"
-      class="number-input"
+      class="input number-input"
       type="number"
       :step="step || 1"
       :disabled="shouldBeDisabled"

src/components/settings_modal/helpers/string_setting.vue

@@ -17,7 +17,7 @@
     </label>
     <input
       :id="path"
-      class="string-input"
+      class="input string-input"
       :disabled="shouldBeDisabled"
       :value="realDraftMode ? draft : state"
       @change="update"

src/components/settings_modal/helpers/unit_setting.vue

@@ -11,7 +11,7 @@
     </label>
     <input
       :id="path"
-      class="number-input"
+      class="input number-input"
       type="number"
       step="1"
       :disabled="disabled"

src/components/settings_modal/settings_modal.scss

@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .settings-modal {
   overflow: hidden;
 

src/components/settings_modal/settings_modal.vue

@@ -14,7 +14,7 @@
           <div
             v-if="currentSaveStateNotice"
             class="alert"
-            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            :class="{ success: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
             @click.prevent
           >
             {{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
@@ -70,7 +70,7 @@
           <template #content="{close}">
             <div class="dropdown-menu">
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backup"
                 @click="close"
               >
@@ -80,7 +80,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backupWithTheme"
                 @click="close"
               >
@@ -90,7 +90,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="restore"
                 @click="close"
               >

src/components/settings_modal/tabs/filtering_tab.vue

@@ -44,6 +44,29 @@
             {{ $t('settings.mute_bot_posts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="muteSensitiveStatuses">
+            {{ $t('settings.mute_sensitive_posts') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideMutedFederationRestrictions">
+            {{ $t('settings.hide_muted_federation_restrictions') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
+          >
+            <li
+              v-for="item in muteFederationRestrictionsLevels"
+              :key="'mute_' + item + '_federation_restriction'"
+            >
+              <BooleanSetting :path="'muteFederationRestrictions.' + item">
+                {{ $t('settings.mute_' + item + '_federation_restriction') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
         <li>
           <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
@@ -67,7 +90,7 @@
           <textarea
             id="muteWords"
             v-model="muteWordsString"
-            class="resize-height"
+            class="input resize-height"
           />
           <div>{{ $t('settings.filtering_explanation') }}</div>
         </li>

src/components/settings_modal/tabs/notifications_tab.vue

@@ -19,7 +19,10 @@
           </div>
         </li>
         <li>
-          <BooleanSetting path="unseenAtTop" expert="1">
+          <BooleanSetting
+            path="unseenAtTop"
+            expert="1"
+          >
             {{ $t('settings.notification_setting_unseen_at_top') }}
           </BooleanSetting>
         </li>
@@ -38,7 +41,9 @@
         </li>
         <li>
           <h3> {{ $t('settings.notification_visibility') }}</h3>
-          <p v-if="expertLevel > 0">{{ $t('settings.notification_setting_filters_chrome_push') }}</p>
+          <p v-if="expertLevel > 0">
+            {{ $t('settings.notification_setting_filters_chrome_push') }}
+          </p>
           <ul class="setting-list two-column">
             <li>
               <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>

src/components/settings_modal/tabs/profile_tab.scss

@@ -1,5 +1,3 @@
-@import "../../../variables";
-
 .profile-tab {
   .bio {
     margin: 0;
@@ -43,16 +41,14 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
   }
 
   .reset-button {
     position: absolute;
     top: 0.2em;
     right: 0.2em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
     background-color: rgb(0 0 0 / 60%);
     opacity: 0.7;
     width: 1.5em;

src/components/settings_modal/tabs/profile_tab.vue

@@ -12,7 +12,7 @@
           <input
             id="username"
             v-model="newName"
-            class="name-changer"
+            class="input name-changer"
             v-bind="propsToNative(inputProps)"
           >
         </template>
@@ -26,7 +26,7 @@
         <template #default="inputProps">
           <textarea
             v-model="newBio"
-            class="bio resize-height"
+            class="input bio resize-height"
             v-bind="propsToNative(inputProps)"
           />
         </template>
@@ -47,7 +47,7 @@
           id="birthday"
           v-model="newBirthday"
           type="date"
-          class="birthday-input"
+          class="input birthday-input"
         >
         <Checkbox v-model="showBirthday">
           {{ $t('settings.birthday.show_birthday') }}
@@ -71,6 +71,7 @@
                 v-model="newFields[i].name"
                 :placeholder="$t('settings.profile_fields.name')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -85,6 +86,7 @@
                 v-model="newFields[i].value"
                 :placeholder="$t('settings.profile_fields.value')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -205,6 +207,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('banner', $event)"
         >
       </div>
@@ -247,6 +250,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('background', $event)"
         >
       </div>

src/components/settings_modal/tabs/security_tab/mfa.vue

@@ -99,12 +99,14 @@
                 <input
                   v-model="otpConfirmToken"
                   type="text"
+                  class="input"
                 >
 
                 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
                 <input
                   v-model="currentPassword"
                   type="password"
+                  class="input"
                 >
                 <div class="confirm-otp-actions">
                   <button
@@ -137,8 +139,6 @@
 
 <script src="./mfa.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-settings {
   .mfa-heading,
   .method-item {
@@ -149,8 +149,7 @@
   }
 
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .setup-otp {

src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue

@@ -21,16 +21,13 @@
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-backup-codes {
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>

src/components/settings_modal/tabs/security_tab/mfa_totp.vue

@@ -30,6 +30,7 @@
       <input
         v-model="currentPassword"
         type="password"
+        class="input"
       >
     </confirm>
     <div

src/components/settings_modal/tabs/security_tab/security_tab.vue

@@ -8,6 +8,7 @@
           v-model="newEmail"
           type="email"
           autocomplete="email"
+          class="input"
         >
       </div>
       <div>
@@ -16,6 +17,7 @@
           v-model="changeEmailPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -40,6 +42,7 @@
         <input
           v-model="changePasswordInputs[0]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -47,6 +50,7 @@
         <input
           v-model="changePasswordInputs[1]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -54,6 +58,7 @@
         <input
           v-model="changePasswordInputs[2]"
           type="password"
+          class="input"
         >
       </div>
       <button
@@ -155,6 +160,7 @@
         </i18n-t>
         <input
           v-model="addAliasTarget"
+          class="input"
         >
       </div>
       <button
@@ -187,6 +193,7 @@
         </i18n-t>
         <input
           v-model="moveAccountTarget"
+          class="input"
         >
       </div>
       <div>
@@ -195,6 +202,7 @@
           v-model="moveAccountPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -222,6 +230,7 @@
         <input
           v-model="deleteAccountConfirmPasswordInput"
           type="password"
+          class="input"
         >
         <button
           class="btn button-default"

src/components/settings_modal/tabs/theme_tab/preview.vue

@@ -5,7 +5,7 @@
       <div class="panel-heading">
         <div class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
         </div>
@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink);">
+              <a style="color: var(--linkFaint);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>
@@ -95,6 +95,7 @@
         <input
           :value="$t('settings.style.preview.input')"
           type="text"
+          class="input"
         >
 
         <div class="actions">
@@ -103,6 +104,7 @@
               id="preview_checkbox"
               checked="very yes"
               type="checkbox"
+              class="input"
             >
             <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
           </span>

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -4,15 +4,7 @@ import {
   getContrastRatioLayers
 } from 'src/services/color_convert/color_convert.js'
 import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
+  getThemes
 } from 'src/services/style_setter/style_setter.js'
 import {
   newImporter,
@@ -25,7 +17,15 @@ import {
   CURRENT_VERSION,
   OPACITIES,
   getLayers,
-  getOpacitySlot
+  getOpacitySlot,
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  composePreset,
+  shadows2to3,
+  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
@@ -514,6 +514,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
         }
@@ -521,6 +522,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customThemeSource',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .theme-tab {
   padding-bottom: 2em;
 
@@ -162,8 +160,7 @@
   .preview-container {
     border-top: 1px dashed;
     border-bottom: 1px dashed;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     margin: 1em 0;
     padding: 1em;
     background-color: var(--wallpaper);
@@ -227,8 +224,6 @@
         min-width: 20px;
         min-height: 20px;
         line-height: 20px;
-        border-radius: $fallback--avatarAltRadius;
-        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       }
 
       .avatar {
@@ -254,8 +249,7 @@
       .separator {
         margin: 1em;
         border-bottom: 1px solid;
-        border-color: $fallback--border;
-        border-color: var(--border, $fallback--border);
+        border-color: var(--border);
       }
 
       .btn {
@@ -296,7 +290,7 @@
     border: 0;
     box-shadow: none;
     background: transparent;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
     align-self: stretch;
   }