bundling theme now works and so are bundled style's palettes

src/components/button.style.js

@@ -89,6 +89,13 @@ export default {
         shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
+    {
+      state: ['toggled', 'disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground 0.25 --parent)',
+        shadow: ['--buttonPressedBevel']
+      }
+    },
     {
       state: ['disabled'],
       directives: {

src/components/settings_modal/tabs/appearance_tab.js

@@ -36,6 +36,7 @@ const AppearanceTab = {
     return {
       availableStyles: [],
       bundledPalettes: [],
+      compilationCache: {},
       fileImporter: newImporter({
         accept: '.json, .piss',
         validator: this.importValidator,
@@ -84,6 +85,8 @@ const AppearanceTab = {
     PaletteEditor
   },
   mounted () {
+    this.$store.dispatch('getThemeData')
+
     const updateIndex = (resource) => {
       const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
       const currentIndex = this.$store.state.instance[`${resource}sIndex`]
@@ -102,6 +105,13 @@ const AppearanceTab = {
       })
     }
 
+    updateIndex('style').then(styles => {
+      styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
+        const meta = data.find(x => x.component === '@meta')
+        this.availableStyles.push({ key, data, name: meta.directives.name, version: 'v3' })
+      }))
+    })
+
     updateIndex('theme').then(themes => {
       themes.forEach(([key, themePromise]) => themePromise.then(data => {
         this.availableStyles.push({ key, data, name: data.name, version: 'v2' })
@@ -166,11 +176,15 @@ const AppearanceTab = {
       ]
     },
     stylePalettes () {
-      if (!this.mergedConfig.styleCustomData) return
+      const ruleset = this.$store.state.interface.styleDataUsed || []
-      const meta = this.mergedConfig.styleCustomData
+      console.log(
-        .find(x => x.component === '@meta')
+        'ASR',
-      const result = this.mergedConfig.styleCustomData
+        this.$store.state.interface.paletteDataUsed,
-        .filter(x => x.component.startsWith('@palette'))
+        this.$store.state.interface.styleDataUsed
+      )
+      if (!ruleset && ruleset.length === 0) return
+      const meta = ruleset.find(x => x.component === '@meta')
+      const result = ruleset.filter(x => x.component.startsWith('@palette'))
         .map(x => {
           const { variant, directives } = x
           const {
@@ -307,7 +321,7 @@ const AppearanceTab = {
       return key === palette
     },
     setStyle (name) {
-      this.$store.dispatch('setTheme', name)
+      this.$store.dispatch('setStyle', name)
     },
     setTheme (name) {
       this.$store.dispatch('setTheme', name)
@@ -323,18 +337,30 @@ const AppearanceTab = {
     resetTheming (name) {
       this.$store.dispatch('setStyle', 'stock')
     },
-    previewTheme (key, input) {
+    previewTheme (key, version, input) {
       let theme3
-      if (input) {
+      if (this.compilationCache[key]) {
-        const style = normalizeThemeData(input)
+        theme3 = this.compilationCache[key]
-        const theme2 = convertTheme2To3(style)
+      } else if (input) {
-        theme3 = init({
+        if (version === 'v2') {
-          inputRuleset: theme2,
+          const style = normalizeThemeData(input)
-          ultimateBackgroundColor: '#000000',
+          const theme2 = convertTheme2To3(style)
-          liteMode: true,
+          theme3 = init({
-          debug: true,
+            inputRuleset: theme2,
-          onlyNormalState: true
+            ultimateBackgroundColor: '#000000',
-        })
+            liteMode: true,
+            debug: true,
+            onlyNormalState: true
+          })
+        } else if (version === 'v3') {
+          theme3 = init({
+            inputRuleset: input,
+            ultimateBackgroundColor: '#000000',
+            liteMode: true,
+            debug: true,
+            onlyNormalState: true
+          })
+        }
       } else {
         theme3 = init({
           inputRuleset: [],
@@ -345,6 +371,10 @@ const AppearanceTab = {
         })
       }
 
+      if (!this.compilationCache[key]) {
+        this.compilationCache[key] = theme3
+      }
+
       return getScopedVersion(
         getCssRules(theme3.eager),
         '#theme-preview-' + key

src/components/settings_modal/tabs/appearance_tab.vue

@@ -18,7 +18,7 @@
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <component
             :is="'style'"
-            v-html="previewTheme('stock')"
+            v-html="previewTheme('stock', 'v3')"
           />
           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
           <preview id="theme-preview-stock" />
@@ -30,7 +30,7 @@
         <button
           v-if="isCustomThemeUsed"
           disabled
-          class="button-default theme-preview"
+          class="button-default theme-preview toggled"
         >
           <preview />
           <h4 class="theme-name">
@@ -38,20 +38,32 @@
             <span class="alert neutral version">v2</span>
           </h4>
         </button>
+        <button
+          v-if="isCustomStyleUsed"
+          disabled
+          class="button-default theme-preview toggled"
+        >
+          <preview />
+          <h4 class="theme-name">
+            {{ $t('settings.style.custom_style_used') }}
+            <span class="alert neutral version">v3</span>
+          </h4>
+        </button>
         <button
           v-for="style in availableStyles"
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
           :class="{ toggled: isThemeActive(style.key) }"
-          @click="setTheme(style.key)"
+          @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-          <component
+          <div v-if="style.ready || noIntersectionObserver">
-            :is="'style'"
+            <component
-            v-if="style.ready || noIntersectionObserver"
+              :is="'style'"
-            v-html="previewTheme(style.key, style.data)"
+              v-html="previewTheme(style.key, style.version, style.data)"
-          />
+            />
+          </div>
           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
           <preview :id="'theme-preview-' + style.key" />
           <h4 class="theme-name">

src/modules/config.js

@@ -48,7 +48,9 @@ export const defaultState = {
 
   // V3
   style: null,
+  styleCustomData: null,
   palette: null,
+  paletteCustomData: null,
   themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
   forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
   theme3hacks: { // Hacks, user overrides that are independent of theme used

src/modules/interface.js

@@ -1,11 +1,18 @@
 import { getResourcesIndex, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
 import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { deserialize } from '../services/theme_data/iss_deserializer.js'
 
 const defaultState = {
   localFonts: null,
   themeApplied: false,
   themeVersion: 'v3',
+  styleNameUsed: null,
+  styleDataUsed: null,
+  paletteNameUsed: null,
+  paletteDataUsed: null,
+  themeNameUsed: null,
+  themeDataUsed: null,
   temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
   temporaryChangesConfirm: () => {}, // used for applying temporary options
   temporaryChangesRevert: () => {}, // used for reverting temporary options
@@ -242,7 +249,10 @@ const interfaceMod = {
     },
     async fetchStylesIndex ({ commit, state }) {
       try {
-        const value = await getResourcesIndex('/static/styles/index.json')
+        const value = await getResourcesIndex(
+          '/static/styles/index.json',
+          deserialize
+        )
         commit('setInstanceOption', { name: 'stylesIndex', value })
         return value
       } catch (e) {
@@ -310,17 +320,44 @@ const interfaceMod = {
       commit('setOption', { name: 'customTheme', value: null })
       commit('setOption', { name: 'customThemeSource', value: null })
     },
-    async applyTheme (
+    async getThemeData ({ dispatch, commit, rootState, state }) {
-      { dispatch, commit, rootState, state },
+      console.log('GET THEME DATA CALLED')
-      { recompile = false } = {}
+      const getData = async (resource, index, customData, name) => {
-    ) {
+        const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
-      // If we're not not forced to recompile try using
+        const result = {}
-      // cache (tryLoadCache return true if load successful)
+
+        if (customData) {
+          result.nameUsed = 'custom' // custom data overrides name
+          result.dataUsed = customData
+        } else {
+          result.nameUsed = name
+
+          if (result.nameUsed === 'stock') {
+            result.dataUsed = null
+            return result
+          }
+
+          let fetchFunc = index[result.nameUsed]
+          // Fallbacks
+          if (!fetchFunc) {
+            const newName = Object.keys(index)[0]
+            fetchFunc = index[newName]
+            console.warn(`${capitalizedResource} with id '${state.styleNameUsed}' not found, trying back to '${newName}'`)
+            if (!fetchFunc) {
+              console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
+              fetchFunc = () => Promise.resolve(null)
+            }
+          }
+          result.dataUsed = await fetchFunc()
+        }
+        return result
+      }
 
       const {
         style: instanceStyleName,
         palette: instancePaletteName
       } = rootState.instance
+
       let {
         theme: instanceThemeV2Name,
         themesIndex,
@@ -332,22 +369,15 @@ const interfaceMod = {
         style: userStyleName,
         styleCustomData: userStyleCustomData,
         palette: userPaletteName,
-        paletteCustomData: userPaletteCustomData,
+        paletteCustomData: userPaletteCustomData
-        forceThemeRecompilation,
-        themeDebug,
-        theme3hacks
       } = rootState.config
+
       let {
         theme: userThemeV2Name,
         customTheme: userThemeV2Snapshot,
         customThemeSource: userThemeV2Source
       } = rootState.config
 
-      const forceRecompile = forceThemeRecompilation || recompile
-      if (!forceRecompile && !themeDebug && await tryLoadCache()) {
-        return commit('setThemeApplied')
-      }
-
       let majorVersionUsed
 
       console.debug(
@@ -408,44 +438,6 @@ const interfaceMod = {
 
       state.themeVersion = majorVersionUsed
 
-      let styleDataUsed = null
-      let styleNameUsed = null
-      let paletteDataUsed = null
-      // let paletteNameUsed = null
-      // let themeNameUsed = null
-      let themeDataUsed = null
-
-      const getData = async (resource, index, customData, name) => {
-        const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
-        const result = {}
-
-        if (customData) {
-          result.nameUsed = 'custom' // custom data overrides name
-          result.dataUsed = customData
-        } else {
-          result.nameUsed = name
-
-          if (result.nameUsed === 'stock') {
-            result.dataUsed = null
-            return result
-          }
-
-          let fetchFunc = index[result.nameUsed]
-          // Fallbacks
-          if (!fetchFunc) {
-            const newName = Object.keys(index)[0]
-            fetchFunc = index[newName]
-            console.warn(`${capitalizedResource} with id '${styleNameUsed}' not found, trying back to '${newName}'`)
-            if (!fetchFunc) {
-              console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
-              fetchFunc = () => Promise.resolve(null)
-            }
-          }
-          result.dataUsed = await fetchFunc()
-        }
-        return result
-      }
-
       console.debug('Version used', majorVersionUsed)
 
       if (majorVersionUsed === 'v3') {
@@ -455,9 +447,9 @@ const interfaceMod = {
           userPaletteCustomData,
           userPaletteName || instancePaletteName
         )
-        // paletteNameUsed = palette.nameUsed
+        state.paletteNameUsed = palette.nameUsed
-        paletteDataUsed = palette.dataUsed
+        state.paletteDataUsed = palette.dataUsed
-        if (Array.isArray(paletteDataUsed)) {
+        if (Array.isArray(state.paletteDataUsed)) {
           const [
             name,
             bg,
@@ -468,10 +460,10 @@ const interfaceMod = {
             cGreen = '#00FF00',
             cBlue = '#0000FF',
             cOrange = '#E3FF00'
-          ] = paletteDataUsed
+          ] = palette.dataUsed
-          paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+          state.paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
         }
-        console.debug('Palette data used', paletteDataUsed)
+        console.debug('Palette data used', palette.dataUsed)
 
         const style = await getData(
           'style',
@@ -479,8 +471,14 @@ const interfaceMod = {
           userStyleCustomData,
           userStyleName || instanceStyleName
         )
-        styleNameUsed = style.nameUsed
+        state.styleNameUsed = style.nameUsed
-        styleDataUsed = style.dataUsed
+        state.styleDataUsed = style.dataUsed
+
+        console.log(
+          'GOT THEME DATA',
+          state.styleDataUsed,
+          state.paletteDataUsed
+        )
       } else {
         const theme = await getData(
           'theme',
@@ -489,25 +487,40 @@ const interfaceMod = {
           userThemeV2Name || instanceThemeV2Name
         )
         // themeNameUsed = theme.nameUsed
-        themeDataUsed = theme.dataUsed
+        state.themeDataUsed = theme.dataUsed
-
-        // Themes v2 editor support
-        commit('setInstanceOption', { name: 'themeData', value: themeDataUsed })
       }
+    },
+    async applyTheme (
+      { dispatch, commit, rootState, state },
+      { recompile = false } = {}
+    ) {
+      const {
+        forceThemeRecompilation,
+        themeDebug,
+        theme3hacks
+      } = rootState.config
+      // If we're not not forced to recompile try using
+      // cache (tryLoadCache return true if load successful)
+
+      const forceRecompile = forceThemeRecompilation || recompile
+      if (!forceRecompile && !themeDebug && await tryLoadCache()) {
+        return commit('setThemeApplied')
+      }
+      await dispatch('getThemeData')
 
       // commit('setOption', { name: 'palette', value: paletteNameUsed })
       // commit('setOption', { name: 'style', value: styleNameUsed })
       // commit('setOption', { name: 'theme', value: themeNameUsed })
 
       const paletteIss = (() => {
-        if (!paletteDataUsed) return null
+        if (!state.paletteDataUsed) return null
         const result = {
           component: 'Root',
           directives: {}
         }
 
         Object
-          .entries(paletteDataUsed)
+          .entries(state.paletteDataUsed)
           .filter(([k]) => k !== 'name')
           .forEach(([k, v]) => {
             let issRootDirectiveName
@@ -526,7 +539,7 @@ const interfaceMod = {
         return result
       })()
 
-      const theme2ruleset = themeDataUsed && convertTheme2To3(normalizeThemeData(themeDataUsed))
+      const theme2ruleset = state.themeDataUsed && convertTheme2To3(normalizeThemeData(state.themeDataUsed))
       const hacks = []
 
       Object.entries(theme3hacks).forEach(([key, value]) => {
@@ -593,7 +606,7 @@ const interfaceMod = {
 
       const rulesetArray = [
         theme2ruleset,
-        styleDataUsed,
+        state.styleDataUsed,
         paletteIss,
         hacks
       ].filter(x => x)

src/services/style_setter/style_setter.js

@@ -226,7 +226,7 @@ export const applyConfig = (input, i18n) => {
   }
 }
 
-export const getResourcesIndex = async (url) => {
+export const getResourcesIndex = async (url, parser = JSON.parse) => {
   const cache = 'no-store'
 
   try {
@@ -243,8 +243,9 @@ export const getResourcesIndex = async (url) => {
               k,
               () => window
                 .fetch(v, { cache })
-                .then((data) => data.json())
+                .then(data => data.text())
-                .catch((e) => {
+                .then(text => parser(text))
+                .catch(e => {
                   console.error(e)
                   return null
                 })

static/styles/Redmond DX.piss

@@ -31,18 +31,18 @@
 
 @palette.Vapor {
   bg: #F0ADCD;
-  fg: #a177ee;
+  fg: #bca4ee;
   text: #602040;
-  link: #086866;
+  link: #064745;
   accent: #9DF7C8;
-  cRed: #ff0088;
+  cRed: #86004a;
-  cBlue: #20c8e9;
+  cBlue: #0e5663;
-  cGreen: #0fd27d;
+  cGreen: #0a8b51;
-  cOrange: #ECE646;
+  cOrange: #787424;
 }
 
 Root {
-  --gradientColor: color | $brightness(--fg, 20);
+  --gradientColor: color | --accent;
   --inputColor: color | #FFFFFF;
   --bevelLight: color | $brightness(--bg 50);
   --bevelDark: color | $brightness(--bg -20);

static/styles/index.json

@@ -1,3 +1,3 @@
 {
-  "Redmond DX": "/static/styles/Redmond DX.json"
+  "RedmondDX": "/static/styles/Redmond DX.piss"
 }