Merge branch 'themes3' into shigusegubu-themes3

src/App.scss

@@ -41,12 +41,31 @@ 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 {
       box-shadow: var(--shadow);
@@ -74,7 +93,7 @@ body {
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--text) 51%),
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
             linear-gradient(-45deg, var(--text) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
@@ -102,7 +121,7 @@ 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);
   }
 }
@@ -366,17 +385,42 @@ nav {
 }
 
 .menu-item {
+  display: block;
+  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;
   border-bottom: 1px solid;
+  white-space: nowrap;
   border-color: var(--border);
   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;
+
+  a,
+  button {
+    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);
@@ -693,6 +737,10 @@ option {
   &.iconLetter {
     font-size: 1.1em;
   }
+
+  &.svg-inline--fa {
+    vertical-align: -0.15em;
+  }
 }
 
 .fa-old-padding {

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') }}

src/components/alert.style.js

@@ -18,7 +18,8 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.5
+        opacity: 0.5,
+        blur: '9px'
       }
     },
     {

src/components/attachment/attachment.vue

@@ -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"
       >

src/components/emoji_input/emoji_input.vue

@@ -185,23 +185,21 @@
     position: absolute;
   }
 
-  &-item {
+  &-item.menu-item {
     display: flex;
-    cursor: pointer;
+    padding-top: 0;
-    padding: 0.2em 0.4em;
+    padding-bottom: 0;
-    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;
       }
     }

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) }}
@@ -52,48 +52,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/menu_item.style.js

@@ -7,7 +7,8 @@ export default {
     'Input',
     'Border',
     'ButtonUnstyled',
-    'Badge'
+    'Badge',
+    'Avatar'
   ],
   states: {
     hover: ':hover',
@@ -30,17 +31,44 @@ export default {
     {
       state: ['active'],
       directives: {
-        background: '$mod(--bg, 5)',
+        background: '$mod(--bg, 10)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active', 'hover'],
+      directives: {
+        background: '$mod(--bg, 15)',
         opacity: 1
       }
     },
     {
       component: 'Text',
-      variant: 'normal',
       parent: {
         component: 'MenuItem',
-        state: ['normal', 'hover'],
+        state: ['hover']
-        variant: 'normal'
+      },
+      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',

src/components/moderation_tools/moderation_tools.vue

@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="menu-item dropdown-item"
+              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="menu-item 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="menu-item 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="menu-item dropdown-item"
+            class="menu-item dropdown-item menu-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
@@ -60,7 +60,7 @@
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
@@ -70,7 +70,7 @@
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
@@ -80,7 +80,7 @@
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
@@ -91,7 +91,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
@@ -102,7 +102,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
@@ -113,7 +113,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span

src/components/navigation/navigation_entry.vue

@@ -10,7 +10,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link button-unstyled"
+        class="main-link"
         :href="href"
         @click="navigate"
       >
@@ -62,47 +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 {
-  display: flex;
-  box-sizing: border-box;
-  align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
   padding: 0;
-  width: 100%;
+  display: flex;
-  color: $fallback--link;
+  align-items: baseline;
-  color: var(--link, $fallback--link);
 
   &[aria-expanded] {
-    padding-right: 1em;
+    padding-right: var(--__horizontal-gap);
-  }
-
-  .timelines-chevron {
-    margin-right: 0;
   }
 
   .main-link {
+    line-height: var(--__line-height);
+    box-sizing: border-box;
     flex: 1;
-    padding: 0 1em;
+    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));
     }
   }
 
   .badge {
-     margin: 0 0.8em;
+    margin: 0 var(--__horizontal-gap);
   }
 }
 </style>

src/components/popover/popover.vue

@@ -94,26 +94,12 @@
   }
 
   .dropdown-item {
-    line-height: 21px;
+    border-bottom: none;
-    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;
 
     &-icon {
       svg {
-        width: 22px;
+        width: var(--__line-height);
-        margin-right: 0.75rem;
+        margin-right: var(--__horizontal-gap);
       }
     }
 
@@ -127,15 +113,15 @@
     .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;
       box-shadow: var(--shadow);
-      margin-right: 0.75em;
+      margin-right: var(--__horizontal-gap);
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;

src/components/root.style.js

@@ -9,13 +9,16 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer',
+    'Alert',
     'Button' // mobile post button
   ],
   defaultRules: [
     {
       directives: {
         '--font': 'generic | sans-serif',
-        '--monoFont': 'generic | monospace'
+        '--monoFont': 'generic | monospace',
+        '--bg': 'color | #000000', // just to establish order
+        '--wallpaper': 'color | --bg, -2'
       }
     }
   ]

src/components/scrollbar.style.js

@@ -4,7 +4,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg'
+        background: '--wallpaper'
       }
     }
   ]

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') }}

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

@@ -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/shadow_control/shadow_control.vue

@@ -219,8 +219,6 @@
 <script src="./shadow_control.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .shadow-control {
   display: flex;
   flex-wrap: wrap;
@@ -237,8 +235,6 @@
     display: flex;
     flex-wrap: wrap;
 
-    $side: 15em;
-
     input[type="number"] {
       width: 5em;
       min-width: 2em;
@@ -261,7 +257,7 @@
     .x-shift-control .wrap,
     input[type="range"] {
       margin: 0;
-      width: $side;
+      width: 15em;
       height: 2em;
     }
 
@@ -271,7 +267,7 @@
 
       .wrap {
         width: 2em;
-        height: $side;
+        height: 15em;
       }
 
       input[type="range"] {
@@ -298,8 +294,6 @@
       .preview-block {
         width: 33%;
         height: 33%;
-        background-color: $fallback--bg;
-        background-color: var(--bg, $fallback--bg);
         border-radius: var(--roundness);
       }
     }

src/components/status/status.vue

@@ -450,7 +450,7 @@
           >
             <button
               v-if="showOtherRepliesAsButton && replies.length > 1"
-              class="button-unstyled -link faint"
+              class="button-unstyled -link"
               :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
               @click.prevent="dive"
             >

src/components/underlay.style.js

@@ -6,8 +6,7 @@ export default {
   // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
-    'Panel',
+    'Panel'
-    'Alert'
   ],
   defaultRules: [
     {

src/components/user_list_menu/user_list_menu.vue

@@ -22,7 +22,7 @@
         </div>
       </template>
       <template #trigger>
-        <button class="btn button-default dropdown-item -has-submenu">
+        <button class="menu-item dropdown-item -has-submenu">
           {{ $t('lists.manage_lists') }}
           <FAIcon
             class="chevron-icon"

src/panel.scss

@@ -118,6 +118,10 @@
       padding-bottom: 0;
       align-self: stretch;
     }
+
+    > .alert {
+      line-height: calc(var(--__panel-heading-height-inner) - 2px);
+    }
   }
 }
 

src/services/style_setter/style_setter.js

@@ -8,14 +8,15 @@ import { chunk } from 'lodash'
 
 export const applyTheme = async (input) => {
   let extraRules
-  if (input.themeType !== 1) {
+  if (input.themeFileVersion === 1) {
+    extraRules = convertTheme2To3(input)
+  } else {
     const { theme } = generatePreset(input)
     extraRules = convertTheme2To3(theme)
-  } else {
-    extraRules = convertTheme2To3(input)
   }
 
-  const themes3 = init(extraRules, '#FFFFFF')
+  // Assuming that "worst case scenario background" is panel background since it's the most likely one
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -32,6 +33,8 @@ export const applyTheme = async (input) => {
         parts[0],
         ', ',
         parts[0].replace(/button/, 'thumb'),
+        ', ',
+        parts[0].replace(/scrollbar-button/, 'resizer'),
         ' {',
         parts[1],
         '}'
@@ -54,7 +57,7 @@ export const applyTheme = async (input) => {
           styleSheet.insertRule(rule, 'index-max')
         })
       })
-    }, 50)
+    }, 200)
   })
 
   return Promise.resolve()
@@ -125,7 +128,7 @@ export const getPreset = (val) => {
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
       const isV1 = Array.isArray(theme)
-      const data = isV1 ? { themeType: 1 } : theme.theme
+      const data = isV1 ? {} : theme.theme
 
       if (isV1) {
         const bg = hex2rgb(theme[1])

src/services/theme_data/css_utils.js

@@ -69,7 +69,7 @@ export const getCssShadowFilter = (input) => {
 export const getCssRules = (rules) => rules.map(rule => {
   let selector = rule.selector
   if (!selector) {
-    selector = 'body'
+    selector = 'html'
   }
   const header = selector + ' {'
   const footer = '}'
@@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
   return [
     header,
     directives + ';',
-    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
     '',
     virtualDirectives,
     footer

src/services/theme_data/theme2_keys.js

@@ -90,6 +90,7 @@ export default [
 
   // Top bar,
   'topBar',
+  'topBarText',
   'topBarLink',
 
   // Tabs,

src/services/theme_data/theme2_to_theme3.js

@@ -346,6 +346,14 @@ export const convertTheme2To3 = (data) => {
       }
       if (key === 'buttonPressed') {
         newRules.push({ ...rule, state: ['toggled'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus'] })
+      }
+      if (key === 'buttonHover') {
+        newRules.push({ ...rule, state: ['toggled', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'hover'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
       }
 
       if (rule.component === 'Button') {
@@ -489,7 +497,21 @@ export const convertTheme2To3 = (data) => {
       if (newRule.component === 'Panel') {
         return [newRule, { ...newRule, component: 'MobileDrawer' }]
       } else if (newRule.component === 'Button') {
-        return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
+        const rules = [
+          newRule,
+          { ...newRule, component: 'Tab' },
+          { ...newRule, component: 'ScrollbarElement' }
+        ]
+        console.log(newRule)
+        if (newRule.state?.indexOf('toggled') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover', 'focused'] })
+        }
+        if (newRule.state?.indexOf('hover') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+        }
+        return rules
       } else if (newRule.component === 'TopBar') {
         return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {

src/services/theme_data/theme_data_3.service.js

@@ -275,8 +275,12 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
         ...combination,
         directives: {},
-        virtualDirectives,
+        virtualDirectives: {
-        virtualDirectivesRaw
+          [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        },
+        virtualDirectivesRaw: {
+          [virtualName]: textColor
+        }
       }
     } else {
       computed[selector] = computed[selector] || {}