Merge branch 'themes3' into shigusegubu-themes3

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,
-        virtualDirectivesRaw
+        virtualDirectives: {
+          [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        },
+        virtualDirectivesRaw: {
+          [virtualName]: textColor
+        }
       }
     } else {
       computed[selector] = computed[selector] || {}