trying to fix transition

src/components/style_switcher/style_switcher.js

@@ -16,7 +16,12 @@ export default {
       bgColorLocal: '',
       bgOpacityLocal: undefined,
 
-      btnColorLocal: '',
+      fgColorLocal: '',
+      fgOpacityLocal: undefined,
+      fgTextColorLocal: undefined,
+      fgLinkColorLocal: undefined,
+
+      btnColorLocal: undefined,
       btnTextColorLocal: undefined,
       btnOpacityLocal: undefined,
 
@@ -30,8 +35,11 @@ export default {
 
       topBarColorLocal: undefined,
       topBarTextColorLocal: undefined,
+      topBarLinkColorLocal: undefined,
       topBarOpacityLocal: undefined,
 
+      alertOpacityLocal: undefined,
+
       redColorLocal: '',
       blueColorLocal: '',
       greenColorLocal: '',
@@ -66,7 +74,8 @@ export default {
       return {
         colors: {
           bg: this.bgColorLocal,
-          fg: this.textColorLocal,
+          fg: this.fgColorLocal,
+          text: this.textColorLocal,
           panel: this.panelColorLocal,
           topBar: this.topBarColorLocal,
           btn: this.btnColorLocal,
@@ -87,18 +96,26 @@ export default {
         }
       }
     },
-    previewRules () {
+    preview () {
       try {
         if (!this.currentTheme.colors.bg) {
-          return ''
+          return {}
         }
-        const generated = StyleSetter.generatePreset(this.currentTheme)
+        return StyleSetter.generatePreset(this.currentTheme)
-        return [generated.colorRules, generated.radiiRules, 'color: var(--text)'].join(';')
       } catch (e) {
         console.error('CATCH')
         console.error(e)
-        return ''
+        return {}
       }
+    },
+    previewTheme () {
+      if (!this.preview.theme) return { colors: {}, radii: {} }
+      console.log(this.preview.theme)
+      return this.preview.theme
+    },
+    previewRules () {
+      if (!this.preview.colorRules) return ''
+      return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
     }
   },
   components: {
@@ -140,7 +157,7 @@ export default {
               if (parsed._pleroma_theme_version === 1) {
                 this.normalizeLocalState(parsed, 1)
               } else if (parsed._pleroma_theme_version === 2) {
-                this.normalizeLocalState(parsed.theme)
+                this.normalizeLocalState(parsed.theme, 2)
               } else {
                 // A theme from the future, spooky
                 this.invalidThemeImported = true
@@ -180,6 +197,10 @@ export default {
     },
 
     clearV1 () {
+      this.fgOpacityLocal = undefined
+      this.fgTextColorLocal = undefined
+      this.fgLinkColorLocal = undefined
+
       this.panelColorLocal = undefined
       this.topBarColorLocal = undefined
       this.btnTextColorLocal = undefined
@@ -198,13 +219,35 @@ export default {
       this.topBarOpacityLocal = undefined
     },
 
-    normalizeLocalState (input, version = 2) {
+    /**
+     * This applies stored theme data onto form.
+     * @param {Object} input - input data
+     * @param {Number} version - version of data. 0 means try to guess based on data.
+     */
+    normalizeLocalState (input, version = 0) {
       const colors = input.colors || input
       const radii = input.radii || input
 
+      if (version === 0) {
+        if (input.version) version = input.version
+        // Old v1 naming: fg is text, btn is foreground
+        if (typeof input.text === 'undefined' && typeof input.fg !== 'undefined') {
+          version = 1
+        }
+        // New v2 naming: text is text, fg is foreground
+        if (typeof input.text !== 'undefined' && typeof input.fg !== 'undefined') {
+          version = 2
+        }
+      }
+
       this.bgColorLocal = rgb2hex(colors.bg)
-      this.btnColorLocal = rgb2hex(colors.btn)
+      if (version === 1) {
-      this.textColorLocal = rgb2hex(colors.text || colors.fg)
+        this.fgColorLocal = rgb2hex(colors.btn)
+        this.textColorLocal = rgb2hex(colors.fg)
+      } else {
+        this.fgColorLocal = rgb2hex(colors.fg)
+        this.textColorLocal = rgb2hex(colors.text)
+      }
       this.linkColorLocal = rgb2hex(colors.link)
 
       if (version === 1) {
@@ -231,7 +274,7 @@ export default {
   watch: {
     selected () {
       if (this.selectedVersion === 1) {
-        this.clearV1();
+        this.clearV1()
         this.bgColorLocal = this.selected[1]
         this.btnColorLocal = this.selected[2]
         this.textColorLocal = this.selected[3]

src/components/style_switcher/style_switcher.vue

@@ -56,9 +56,9 @@
         <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
       </div>
       <div class="color-item">
-        <ColorInput name="fgColor" v-model="btnColorLocal" :label="$t('settings.foreground')"/>
+        <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
         <OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
-        <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="textColorLocal"/>
+        <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.btnText"/>
         <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
       </div>
       <div class="color-item">
@@ -98,19 +98,19 @@
       </div>
       <div class="color-item">
         <h4>Buttons</h4>
-        <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+        <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
-        <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
-        <ColorInput name="buttonTextColor" v-model="buttonTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
       </div>
       <div class="color-item">
         <h4>Borders</h4>
-        <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" label="Color"/>
+        <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
-        <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
       </div>
       <div class="color-item">
         <h4>Faint text</h4>
-        <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
-        <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
       </div>
     </div>
   </div>

src/services/style_setter/style_setter.js

@@ -101,7 +101,6 @@ const generatePreset = (input) => {
     attachmentRadius: input.attachmentRadius
   }
   const colors = {}
-
   const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
     if (typeof v === 'object') {
       acc[k] = v
@@ -111,12 +110,32 @@ const generatePreset = (input) => {
     return acc
   }, {})
 
-  colors.fg = col.fg || col.text                   // text
+  let version = 0
-  colors.text = col.fg || col.text                   // text
-  colors.lightFg = col.fg || col.text                   // text
 
-  colors.bg = col.bg                         // background
+  if (input.version) {
-  colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg
+    version = input.version
+  }
+  // Old v1 naming: fg is text, btn is foreground
+  if (typeof col.text === 'undefined' && typeof col.fg !== 'undefined') {
+    version = 1
+  }
+  // New v2 naming: text is text, fg is foreground
+  if (typeof col.text !== 'undefined' && typeof col.fg !== 'undefined') {
+    version = 2
+  }
+
+  colors.text = version === 1 ? col.fg : col.text
+  colors.lightText = colors.text
+
+  colors.bg = col.bg
+  colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
+
+  colors.fg = version === 1 ? col.btn : col.fg
+  console.log('BENIN')
+  console.log(version)
+  console.log(col)
+  console.log(colors.text)
+  colors.fgText = getTextColor(colors.fg, colors.text)
 
   colors.btn = col.btn || { r: 0, g: 0, b: 0 }
   colors.btnText = getTextColor(colors.btn, colors.text)
@@ -128,11 +147,11 @@ const generatePreset = (input) => {
   colors.topBarText = getTextColor(colors.topBar, colors.text)
 
   colors.input = col.input || Object.assign({ a: 0.5 }, col.btn)
-  colors.border = col.btn       // borders
+  colors.border = col.btn
   colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
 
-  colors.link = col.link                   // links
+  colors.link = col.link
-  colors.icon = mixrgb(colors.bg, colors.text) // icons
+  colors.icon = mixrgb(colors.bg, colors.text)
 
   colors.cBlue = col.cBlue
   colors.cRed = col.cRed
@@ -150,7 +169,11 @@ const generatePreset = (input) => {
 
   return {
     colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
-    radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')
+    radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
+    theme: {
+      colors,
+      radii
+    }
   }
 }
 
@@ -196,6 +219,7 @@ const StyleSetter = {
   setStyle,
   setPreset,
   setColors,
+  getTextColor,
   generatePreset
 }