allow setting palettes from style

src/components/settings_modal/tabs/appearance_tab.js

@@ -33,7 +33,7 @@ const AppearanceTab = {
   data () {
     return {
       availableStyles: [],
-      availablePalettes: [],
+      bundledPalettes: [],
       fileImporter: newImporter({
         accept: '.json, .piss',
         validator: this.importValidator,
@@ -41,8 +41,8 @@ const AppearanceTab = {
         onImportFailure: this.onImportFailure
       }),
       palettesKeys: [
-        'background',
-        'foreground',
+        'bg',
+        'fg',
         'link',
         'text',
         'cRed',
@@ -103,13 +103,13 @@ const AppearanceTab = {
       }))
     })
 
-    updateIndex('palette').then(palettes => {
-      palettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
+    updateIndex('palette').then(bundledPalettes => {
+      bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
         if (Array.isArray(v)) {
           const [
             name,
-            background,
-            foreground,
+            bg,
+            fg,
             text,
             link,
             cRed = '#FF0000',
@@ -117,9 +117,9 @@ const AppearanceTab = {
             cBlue = '#0000FF',
             cOrange = '#E3FF00'
           ] = v
-          this.availablePalettes.push({ key, name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange })
+          this.bundledPalettes.push({ key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange })
         } else {
-          this.availablePalettes.push({ key, ...v })
+          this.bundledPalettes.push({ key, ...v })
         }
       }))
     })
@@ -147,6 +147,50 @@ const AppearanceTab = {
     })
   },
   computed: {
+    availablePalettes () {
+      return [
+        ...this.bundledPalettes,
+        ...this.stylePalettes
+      ]
+    },
+    stylePalettes () {
+      if (!this.mergedConfig.styleCustomData) return
+      const meta = this.mergedConfig.styleCustomData
+        .find(x => x.component === '@meta')
+      const result = this.mergedConfig.styleCustomData
+        .filter(x => x.component.startsWith('@palette'))
+        .map(x => {
+          const {
+            variant,
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          } = x
+
+          const result = {
+            name: `${meta.name}: ${variant}`,
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          }
+          return Object.fromEntries(Object.entries(result).filter(([k, v]) => v))
+        })
+      return result
+    },
     noIntersectionObserver () {
       return !window.IntersectionObserver
     },
@@ -253,6 +297,11 @@ const AppearanceTab = {
       this.$store.dispatch('setPalette', name)
       this.$store.dispatch('applyTheme')
     },
+    setPaletteCustom (p) {
+      this.$store.dispatch('resetThemeV2')
+      this.$store.dispatch('setPaletteCustom', p)
+      this.$store.dispatch('applyTheme')
+    },
     resetTheming (name) {
       this.$store.dispatch('resetThemeV2')
       this.$store.dispatch('resetThemeV3')

src/components/settings_modal/tabs/appearance_tab.scss

@@ -25,6 +25,7 @@
     grid-template-columns: 1fr 1fr;
     grid-gap: 0.5em;
 
+    h4,
     .unsupported-theme-v2 {
       grid-column: 1 / span 2;
     }

src/components/settings_modal/tabs/appearance_tab.vue

@@ -72,8 +72,9 @@
       <h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
       <div class="palettes">
         <template v-if="customThemeVersion === 'v3'">
+          <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
           <button
-            v-for="p in availablePalettes"
+            v-for="p in bundledPalettes"
             :key="p.name"
             class="btn button-default palette-entry"
             :class="{ toggled: isPaletteActive(p.key) }"
@@ -89,6 +90,26 @@
               :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
             />
           </button>
+          <h4 v-if="stylePalettes?.length > 0">
+            {{ $t('settings.style.themes3.palette.style') }}
+          </h4>
+          <button
+            v-for="p in stylePalettes || []"
+            :key="p.name"
+            class="btn button-default palette-entry"
+            :class="{ toggled: isPaletteActive(p.key) }"
+            @click="() => setPaletteCustom(p)"
+          >
+            <label>
+              {{ p.name }}
+            </label>
+            <span
+              v-for="c in palettesKeys"
+              :key="c"
+              class="palette-square"
+              :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+            />
+          </button>
         </template>
         <template v-else-if="customThemeVersion === 'v2'">
           <div class="alert neutral theme-notice unsupported-theme-v2">

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -101,6 +101,14 @@ export default {
       ].join('\n')
     })
 
+    const metaRule = computed(() => ({
+      component: '@meta',
+      name: exports.name.value,
+      author: exports.author.value,
+      license: exports.license.value,
+      website: exports.website.value
+    }))
+
     // ## Palette stuff
     const palettes = reactive([
       {
@@ -169,6 +177,22 @@ export default {
       cOrange: '#ffa500'
     })
 
+    // Raw format
+    const palettesRule = computed(() => {
+      return palettes.map(palette => {
+        const { name, ...rest } = palette
+        return {
+          component: '@palette',
+          variant: name,
+          ...Object
+            .entries(rest)
+            .filter(([k, v]) => v)
+            .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+        }
+      })
+    })
+
+    // Text format
     const palettesOut = computed(() => {
       return palettes.map(({ name, ...palette }) => {
         const entries = Object
@@ -519,6 +543,15 @@ export default {
       virtualDirectives.value = value
     }
 
+    // Raw format
+    const virtualDirectivesRule = computed(() => ({
+      component: 'Root',
+      directives: Object.fromEntries(
+        virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+      )
+    }))
+
+    // Text format
     const virtualDirectivesOut = computed(() => {
       return [
         'Root {',
@@ -548,25 +581,6 @@ export default {
       )
     })
 
-    const paletteRule = computed(() => {
-      const { name, ...rest } = selectedPalette.value
-      return {
-        component: 'Root',
-        directives: Object
-          .entries(rest)
-          .filter(([k, v]) => v)
-          .map(([k, v]) => ['--' + k, v])
-          .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
-      }
-    })
-
-    const virtualDirectivesRule = computed(() => ({
-      component: 'Root',
-      directives: Object.fromEntries(
-        virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
-      )
-    }))
-
     // ## Export and Import
     const styleExporter = newExporter({
       filename: () => exports.name.value ?? 'pleroma_theme',
@@ -613,6 +627,15 @@ export default {
       }
     })
 
+    // Raw format
+    const exportRules = computed(() => [
+      metaRule.value,
+      ...palettesRule.value,
+      virtualDirectivesRule.value,
+      ...editorFriendlyToOriginal.value
+    ])
+
+    // Text format
     const exportStyleData = computed(() => {
       return [
         metaOut.value,
@@ -630,12 +653,6 @@ export default {
       styleImporter.importData()
     }
 
-    const exportRules = computed(() => [
-      paletteRule.value,
-      virtualDirectivesRule.value,
-      ...editorFriendlyToOriginal.value
-    ])
-
     exports.applyStyle = () => {
       store.dispatch('setStyleCustom', exportRules.value)
     }