Merge branch 'themes3-grand-finale-maybe' into shigusegubu-themes3

src/boot/after_store.js

@@ -390,6 +390,13 @@ const afterStoreSetup = async ({ store, i18n }) => {
   app.use(store)
   app.use(i18n)
 
+  // Little thing to get out of invalid theme state
+  window.resetThemes = () => {
+    store.dispatch('resetThemeV3')
+    store.dispatch('resetThemeV3Palette')
+    store.dispatch('resetThemeV2')
+  }
+
   app.use(vClickOutside)
   app.use(VBodyScrollLock)
   app.use(VueVirtualScroller)

src/components/opacity_input/opacity_input.vue

@@ -8,7 +8,7 @@
       class="label"
       :class="{ faint: !present || disabled }"
     >
-      {{ $t('settings.style.common.opacity') }}
+      {{ label  }}
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
@@ -39,7 +39,7 @@ export default {
     Checkbox
   },
   props: [
-    'name', 'modelValue', 'fallback', 'disabled'
+    'name', 'label', 'modelValue', 'fallback', 'disabled'
   ],
   emits: ['update:modelValue'],
   computed: {

src/components/palette_editor/palette_editor.vue

@@ -75,17 +75,7 @@ const paletteKeys = [
   'cBlue',
   'cGreen',
   'cOrange',
-  'wallpaper',
+  'wallpaper'
-  'extra1',
-  'extra2',
-  'extra3',
-  'extra4',
-  'extra5',
-  'extra6',
-  'extra7',
-  'extra8',
-  'extra9',
-  'extra10'
 ]
 
 const fallback = (key) => {

src/components/roundness_input/roundness_input.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="roundness-control style-control"
+    :class="{ disabled: !present || disabled }"
+  >
+    <label
+      :for="name"
+      class="label"
+      :class="{ faint: !present || disabled }"
+    >
+      {{ label }}
+    </label>
+    <Checkbox
+      v-if="typeof fallback !== 'undefined'"
+      :model-value="present"
+      :disabled="disabled"
+      class="opt"
+      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
+    />
+    <input
+      :id="name"
+      class="input input-number"
+      type="number"
+      :value="modelValue || fallback"
+      :disabled="!present || disabled"
+      :class="{ disabled: !present || disabled }"
+      max="999"
+      min="0"
+      step="1"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+  </div>
+</template>
+
+<script>
+import Checkbox from '../checkbox/checkbox.vue'
+export default {
+  components: {
+    Checkbox
+  },
+  props: [
+    'name', 'label', 'modelValue', 'fallback', 'disabled'
+  ],
+  emits: ['update:modelValue'],
+  computed: {
+    present () {
+      return typeof this.modelValue !== 'undefined'
+    }
+  }
+}
+</script>

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',
+        'bg',
-        'foreground',
+        'fg',
         'link',
         'text',
         'cRed',
@@ -103,13 +103,13 @@ const AppearanceTab = {
       }))
     })
 
-    updateIndex('palette').then(palettes => {
+    updateIndex('palette').then(bundledPalettes => {
-      palettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
+      bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
         if (Array.isArray(v)) {
           const [
             name,
-            background,
+            bg,
-            foreground,
+            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

@@ -1,6 +1,6 @@
-import { ref, reactive, computed, watch, provide } from 'vue'
+import { ref, reactive, computed, watch, watchEffect, provide } from 'vue'
 import { useStore } from 'vuex'
-import { get, set, unset } from 'lodash'
+import { get, set, unset, throttle } from 'lodash'
 
 import Select from 'src/components/select/select.vue'
 import SelectMotion from 'src/components/select/select_motion.vue'
@@ -11,6 +11,7 @@ import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
 import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
+import RoundnessInput from 'src/components/roundness_input/roundness_input.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Tooltip from 'src/components/tooltip/tooltip.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
@@ -72,6 +73,7 @@ export default {
     ColorInput,
     PaletteEditor,
     OpacityInput,
+    RoundnessInput,
     ContrastRatio,
     Preview,
     VirtualDirectivesTab
@@ -99,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([
       {
@@ -167,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
@@ -347,6 +373,8 @@ export default {
     exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
     exports.editedOpacity = getEditedElement(null, 'opacity')
     exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
+    exports.editedRoundness = getEditedElement(null, 'roundness')
+    exports.isRoundnessPresent = isElementPresent(null, 'roundness', 0)
     exports.editedTextColor = getEditedElement('Text', 'textColor')
     exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
     exports.editedTextAuto = getEditedElement('Text', 'textAuto')
@@ -515,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 {',
@@ -544,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',
@@ -609,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,
@@ -626,12 +653,6 @@ export default {
       styleImporter.importData()
     }
 
-    const exportRules = computed(() => [
-      paletteRule.value,
-      virtualDirectivesRule.value,
-      ...editorFriendlyToOriginal.value
-    ])
-
     exports.applyStyle = () => {
       store.dispatch('setStyleCustom', exportRules.value)
     }
@@ -639,13 +660,21 @@ export default {
     const overallPreviewRules = ref([])
     exports.overallPreviewRules = overallPreviewRules
 
-    const overallPreviewCssRules = computed(() => getScopedVersion(
+    const overallPreviewCssRules = ref([])
-      getCssRules(overallPreviewRules.value),
+    watchEffect(throttle(() => {
-      '#edited-style-preview'
+      try {
-    ).join('\n'))
+        overallPreviewCssRules.value = getScopedVersion(
+          getCssRules(overallPreviewRules.value),
+          '#edited-style-preview'
+        ).join('\n')
+      } catch (e) {
+        console.error(e)
+      }
+    }, 500))
+
     exports.overallPreviewCssRules = overallPreviewCssRules
 
-    const updateOverallPreview = () => {
+    const updateOverallPreview = throttle(() => {
       try {
         overallPreviewRules.value = init({
           inputRuleset: exportRules.value,
@@ -657,7 +686,7 @@ export default {
         console.error('Could not compile preview theme', e)
         return null
       }
-    }
+    }, 1000)
     //
     // Apart from "hover" we can't really show how component looks like in
     // certain states, so we have to fake them.
@@ -730,10 +759,13 @@ export default {
         return r.component === 'Root'
       })
       const rootDirectivesEntries = Object.entries(rootComponent.directives)
-      const directives = Object.fromEntries(
+      const directives = {}
-        rootDirectivesEntries
+      rootDirectivesEntries
-          .filter(([k, v]) => k.startsWith('--') && v.startsWith('color | '))
+        .filter(([k, v]) => k.startsWith('--') && v.startsWith('color | '))
-          .map(([k, v]) => [k.substring(2), v.substring('color | '.length)]))
+        .map(([k, v]) => [k.substring(2), v.substring('color | '.length)])
+        .forEach(([k, v]) => {
+          directives[k] = findColor(v, { dynamicVars: {}, staticVars: directives })
+        })
       return directives
     })
     provide('staticVars', staticVars)

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -286,6 +286,14 @@
             <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
               <Checkbox v-model="isOpacityPresent" />
             </Tooltip>
+            <RoundnessInput
+              v-model="editedRoundness"
+              :disabled="!isRoundnessPresent"
+              :label="$t('settings.style.themes3.editor.roundness')"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isRoundnessPresent" />
+            </Tooltip>
           </div>
           <div
             key="shadow"

src/components/shadow_control/shadow_control.js

@@ -112,9 +112,14 @@ export default {
     },
     getColorFallback () {
       if (this.staticVars && this.selected?.color) {
-        const computedColor = findColor(this.selected.color, { dynamicVars: {}, staticVars: this.staticVars }, true)
+        try {
-        if (computedColor) return rgb2hex(computedColor)
+          const computedColor = findColor(this.selected.color, { dynamicVars: {}, staticVars: this.staticVars }, true)
-        return null
+          if (computedColor) return rgb2hex(computedColor)
+          return null
+        } catch (e) {
+          console.warn(e)
+          return null
+        }
       } else {
         return this.currentFallback?.color
       }

src/components/tab_switcher/tab_switcher.scss

@@ -119,7 +119,7 @@
       .tab {
         flex: 1;
         box-sizing: content-box;
-        min-width: 10em;
+        max-width: 9em;
         min-width: 1px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -128,6 +128,11 @@
         margin-right: -200px;
         margin-left: 1em;
 
+        &:not(.active) {
+          margin-top: 0;
+          margin-left: 1.5em;
+        }
+
         @media all and (max-width: 800px) {
           padding-left: 0.25em;
           padding-right: calc(0.25em + 200px);
@@ -181,6 +186,7 @@
 
     &:not(.active) {
       z-index: 4;
+      margin-top: 0.25em;
 
       &:hover {
         z-index: 6;

src/i18n/en.json

@@ -771,17 +771,9 @@
           "cGreen": "Green color",
           "cOrange": "Orange color",
           "wallpaper": "Wallpaper",
-          "extra1": "Extra 1",
+          "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
-          "extra2": "Extra 2",
+          "bundled": "Bundled palettes",
-          "extra3": "Extra 3",
+          "style": "Palettes provided by selected style"
-          "extra4": "Extra 4",
-          "extra5": "Extra 5",
-          "extra6": "Extra 6",
-          "extra7": "Extra 7",
-          "extra8": "Extra 8",
-          "extra9": "Extra 9",
-          "extra10": "Extra 10",
-          "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
         },
         "editor": {
           "title": "Style",
@@ -802,6 +794,8 @@
           "icon_color": "Icon color",
           "link_color": "Link color",
           "contrast": "Text contrast",
+          "roundness": "Roundness",
+          "opacity": "Opacity",
           "border_color": "Border color",
           "include_in_rule": "Add to rule",
           "test_string": "TEST",

src/modules/interface.js

@@ -460,8 +460,8 @@ const interfaceMod = {
         if (Array.isArray(paletteDataUsed)) {
           const [
             name,
-            background,
+            bg,
-            foreground,
+            fg,
             text,
             link,
             cRed = '#FF0000',
@@ -469,10 +469,10 @@ const interfaceMod = {
             cBlue = '#0000FF',
             cOrange = '#E3FF00'
           ] = paletteDataUsed
-          paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
+          paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
         }
+        console.log(paletteDataUsed)
 
-        console.log('USCD', userStyleCustomData)
         const style = await getData(
           'style',
           stylesIndex,

src/services/theme_data/theme3_slot_functions.js

@@ -15,6 +15,11 @@ export const process = (text, functions, { findColor, findShadow }, { dynamicVar
 export const colorFunctions = {
   alpha: {
     argsNeeded: 2,
+    documentation: 'Changes alpha value of the color only to be used for CSS variables',
+    args: [
+      'color: source color used',
+      'amount: alpha value'
+    ],
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [color, amountArg] = args
 
@@ -25,6 +30,11 @@ export const colorFunctions = {
   },
   brightness: {
     argsNeeded: 2,
+    document: 'Changes brightness/lightness of color in HSL colorspace',
+    args: [
+      'color: source color used',
+      'amount: lightness value'
+    ],
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [color, amountArg] = args
 
@@ -35,6 +45,15 @@ export const colorFunctions = {
   },
   textColor: {
     argsNeeded: 2,
+    documentation: 'Get text color with adequate contrast for given background and intended text color. Same function is used internally',
+    args: [
+      'background: color of backdrop where text will be shown',
+      'foreground: intended text color',
+      `[preserve]: (optional) intended color preservation:
+'preserve' - try to preserve the color
+'no-preserve' - if can't get adequate color - fall back to black or white
+'no-auto' - don't do anything (useless as a color function)`
+    ],
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
 
@@ -46,6 +65,12 @@ export const colorFunctions = {
   },
   blend: {
     argsNeeded: 3,
+    documentation: 'Alpha blending between two colors',
+    args: [
+      'background: bottom layer color',
+      'amount: opacity of top layer',
+      'foreground: upper layer color'
+    ],
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [backgroundArg, amountArg, foregroundArg] = args
 
@@ -58,6 +83,11 @@ export const colorFunctions = {
   },
   mod: {
     argsNeeded: 2,
+    documentation: 'Old function that increases or decreases brightness depending if color is dark or light. Advised against using it as it might give unexpected results.',
+    args: [
+      'color: source color',
+      'amount: how much darken/brighten the color'
+    ],
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [colorArg, amountArg] = args
 
@@ -75,6 +105,13 @@ export const colorFunctions = {
 export const shadowFunctions = {
   borderSide: {
     argsNeeded: 3,
+    documentation: 'Simulate a border on a side with a shadow, best works on inset border',
+    args: [
+      'color: border color',
+      'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
+      '[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
+      '[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
+    ],
     exec: (args, { findColor }) => {
       const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args
 

src/services/theme_data/theme_data_3.service.js

@@ -227,8 +227,8 @@ export const init = ({
       bScore += b.component === 'Text' ? 1 : 0
 
       // Debug
-      a.specifityScore = aScore
+      a._specificityScore = aScore
-      b.specifityScore = bScore
+      b._specificityScore = bScore
 
       if (aScore === bScore) {
         return ai - bi

static/palettes/index.json

@@ -5,8 +5,8 @@
   "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
   "classic-dark": {
     "name": "Classic Dark",
-    "background": "#161c20",
+    "bg": "#161c20",
-    "foreground": "#282e32",
+    "fg": "#282e32",
     "text": "#b9b9b9",
     "link": "#baaa9c",
     "cRed": "#d31014",
@@ -18,8 +18,8 @@
   "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
   "tomorrow-night": {
     "name": "Tomorrow Night",
-    "background": "#1d1f21",
+    "bg": "#1d1f21",
-    "foreground": "#373b41",
+    "fg": "#373b41",
     "link": "#81a2be",
     "text": "#c5c8c6",
     "cRed": "#cc6666",