From bbef4e40dffd012dafed71e6efff5c05e7308c3e Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Mon, 7 Oct 2024 13:39:36 +0300
Subject: [PATCH 01/20] Fix whitespaces for multiple status mute reasons,
 display bot status reason

---
 changelog.d/multiple-status-mute-reasons.fix  |  1 +
 src/components/notification/notification.scss |  1 +
 src/components/status/status.scss             |  1 +
 src/components/status/status.vue              | 21 ++++++++++++-------
 src/i18n/en.json                              |  1 +
 5 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 changelog.d/multiple-status-mute-reasons.fix

diff --git a/changelog.d/multiple-status-mute-reasons.fix b/changelog.d/multiple-status-mute-reasons.fix
new file mode 100644
index 000000000..952ccea82
--- /dev/null
+++ b/changelog.d/multiple-status-mute-reasons.fix
@@ -0,0 +1 @@
+Fix whitespaces for multiple status mute reasons, display bot status reason
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 2dbced099..0ca6aea77 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -26,6 +26,7 @@
     overflow: hidden;
     display: flex;
     flex-wrap: nowrap;
+    gap: 1ex;
 
     & .status-username,
     & .mute-thread,
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 63809ff26..344e4b8ef 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -281,6 +281,7 @@
     overflow: hidden;
     display: flex;
     flex-wrap: nowrap;
+    gap: 1ex;
 
     & .status-username,
     & .mute-thread,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 61a58cda0..7fef69df0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -36,17 +36,24 @@
         >
           {{ $t('status.sensitive_muted') }}
         </small>
+        <small
+          v-if="muteBotStatuses && botStatus"
+          class="mute-thread"
+        >
+          {{ $t('status.bot_muted') }}
+        </small>
         <small
           v-if="showReasonMutedThread"
           class="mute-thread"
         >
-          {{ $t('status.thread_muted') }}
-        </small>
-        <small
-          v-if="showReasonMutedThread && muteWordHits.length > 0"
-          class="mute-thread"
-        >
-          {{ $t('status.thread_muted_and_words') }}
+          <span>
+            {{ $t('status.thread_muted') }}
+          </span>
+          <span
+            v-if="muteWordHits.length > 0"
+          >
+            {{ $t('status.thread_muted_and_words') }}
+          </span>
         </small>
         <small
           class="mute-words"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 74cddea8b..c86bdbabd 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1151,6 +1151,7 @@
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",
     "sensitive_muted": "Muting sensitive content",
+    "bot_muted": "Muting bot content",
     "show_full_subject": "Show full subject",
     "hide_full_subject": "Hide full subject",
     "show_content": "Show content",

From 313eb8f4cd1d7df910ca7862fdb472b8c9e90277 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Nov 2024 03:18:52 +0200
Subject: [PATCH 02/20] bundling theme now works and so are bundled style's
 palettes

---
 src/components/button.style.js                |   7 +
 .../settings_modal/tabs/appearance_tab.js     |  64 ++++++--
 .../settings_modal/tabs/appearance_tab.vue    |  28 +++-
 src/modules/config.js                         |   2 +
 src/modules/interface.js                      | 153 ++++++++++--------
 src/services/style_setter/style_setter.js     |   7 +-
 .../{Redmond DX.json => Redmond DX.piss}      |  14 +-
 static/styles/index.json                      |   2 +-
 8 files changed, 171 insertions(+), 106 deletions(-)
 rename static/styles/{Redmond DX.json => Redmond DX.piss} (93%)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 248da8bbd..747cfd5eb 100644
--- a/src/components/button.style.js
+++ b/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: {
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 076bb995f..711b1961b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/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 meta = this.mergedConfig.styleCustomData
-        .find(x => x.component === '@meta')
-      const result = this.mergedConfig.styleCustomData
-        .filter(x => x.component.startsWith('@palette'))
+      const ruleset = this.$store.state.interface.styleDataUsed || []
+      console.log(
+        'ASR',
+        this.$store.state.interface.paletteDataUsed,
+        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) {
-        const style = normalizeThemeData(input)
-        const theme2 = convertTheme2To3(style)
-        theme3 = init({
-          inputRuleset: theme2,
-          ultimateBackgroundColor: '#000000',
-          liteMode: true,
-          debug: true,
-          onlyNormalState: true
-        })
+      if (this.compilationCache[key]) {
+        theme3 = this.compilationCache[key]
+      } else if (input) {
+        if (version === 'v2') {
+          const style = normalizeThemeData(input)
+          const theme2 = convertTheme2To3(style)
+          theme3 = init({
+            inputRuleset: theme2,
+            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
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 32e0a37fa..5c1c46fe3 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/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
-            :is="'style'"
-            v-if="style.ready || noIntersectionObserver"
-            v-html="previewTheme(style.key, style.data)"
-          />
+          <div v-if="style.ready || noIntersectionObserver">
+            <component
+              :is="'style'"
+              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">
diff --git a/src/modules/config.js b/src/modules/config.js
index d046425c4..b3b8950b2 100644
--- a/src/modules/config.js
+++ b/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
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 0af736717..1e23a43df 100644
--- a/src/modules/interface.js
+++ b/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 (
-      { dispatch, commit, rootState, state },
-      { recompile = false } = {}
-    ) {
-      // If we're not not forced to recompile try using
-      // cache (tryLoadCache return true if load successful)
+    async getThemeData ({ dispatch, commit, rootState, state }) {
+      console.log('GET THEME DATA CALLED')
+      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 '${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,
-        forceThemeRecompilation,
-        themeDebug,
-        theme3hacks
+        paletteCustomData: userPaletteCustomData
       } = 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
-        paletteDataUsed = palette.dataUsed
-        if (Array.isArray(paletteDataUsed)) {
+        state.paletteNameUsed = palette.nameUsed
+        state.paletteDataUsed = palette.dataUsed
+        if (Array.isArray(state.paletteDataUsed)) {
           const [
             name,
             bg,
@@ -468,10 +460,10 @@ const interfaceMod = {
             cGreen = '#00FF00',
             cBlue = '#0000FF',
             cOrange = '#E3FF00'
-          ] = paletteDataUsed
-          paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+          ] = palette.dataUsed
+          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
-        styleDataUsed = style.dataUsed
+        state.styleNameUsed = style.nameUsed
+        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
-
-        // Themes v2 editor support
-        commit('setInstanceOption', { name: 'themeData', value: themeDataUsed })
+        state.themeDataUsed = theme.dataUsed
       }
+    },
+    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)
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3ccba9da8..7ea947647 100644
--- a/src/services/style_setter/style_setter.js
+++ b/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())
-                .catch((e) => {
+                .then(data => data.text())
+                .then(text => parser(text))
+                .catch(e => {
                   console.error(e)
                   return null
                 })
diff --git a/static/styles/Redmond DX.json b/static/styles/Redmond DX.piss
similarity index 93%
rename from static/styles/Redmond DX.json
rename to static/styles/Redmond DX.piss
index 39018aa7e..c9ce0c04d 100644
--- a/static/styles/Redmond DX.json	
+++ b/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;
-  cBlue: #20c8e9;
-  cGreen: #0fd27d;
-  cOrange: #ECE646;
+  cRed: #86004a;
+  cBlue: #0e5663;
+  cGreen: #0a8b51;
+  cOrange: #787424;
 }
 
 Root {
-  --gradientColor: color | $brightness(--fg, 20);
+  --gradientColor: color | --accent;
   --inputColor: color | #FFFFFF;
   --bevelLight: color | $brightness(--bg 50);
   --bevelDark: color | $brightness(--bg -20);
diff --git a/static/styles/index.json b/static/styles/index.json
index 2f1a3e8ec..7a136cbc7 100644
--- a/static/styles/index.json
+++ b/static/styles/index.json
@@ -1,3 +1,3 @@
 {
-  "Redmond DX": "/static/styles/Redmond DX.json"
+  "RedmondDX": "/static/styles/Redmond DX.piss"
 }

From 507824224fc7fdd88d4624d8157b9f4a44318df7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Nov 2024 21:35:54 +0200
Subject: [PATCH 03/20] changelog

---
 changelog.d/tabs.change | 1 +
 changelog.d/themes3.add | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 changelog.d/tabs.change
 create mode 100644 changelog.d/themes3.add

diff --git a/changelog.d/tabs.change b/changelog.d/tabs.change
new file mode 100644
index 000000000..e716ad427
--- /dev/null
+++ b/changelog.d/tabs.change
@@ -0,0 +1 @@
+Tabs now have indentation for better visibility of which tab is currently active
diff --git a/changelog.d/themes3.add b/changelog.d/themes3.add
new file mode 100644
index 000000000..040957ced
--- /dev/null
+++ b/changelog.d/themes3.add
@@ -0,0 +1 @@
+UI for making v3 themes and palettes, support for bundling v3 themes

From fd1e3f65a86be1dc1c1fb7252c2b9de7bf7ed6c7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Nov 2024 22:19:11 +0200
Subject: [PATCH 04/20] Added fetching of *.custom.* indexes that aren't part
 of source tree

---
 changelog.d/custom.add                    |  1 +
 src/services/style_setter/style_setter.js | 75 +++++++++++++++--------
 static/.gitignore                         |  1 +
 3 files changed, 50 insertions(+), 27 deletions(-)
 create mode 100644 changelog.d/custom.add
 create mode 100644 static/.gitignore

diff --git a/changelog.d/custom.add b/changelog.d/custom.add
new file mode 100644
index 000000000..97848d7e4
--- /dev/null
+++ b/changelog.d/custom.add
@@ -0,0 +1 @@
+Added support for fetching /{resource}.custom.ext to allow adding instance-specific themes without altering sourcetree
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 7ea947647..1892c1116 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -228,35 +228,56 @@ export const applyConfig = (input, i18n) => {
 
 export const getResourcesIndex = async (url, parser = JSON.parse) => {
   const cache = 'no-store'
+  const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
+  let builtin
+  let custom
+
+  const resourceTransform = (resources) => {
+    return Object
+      .entries(resources)
+      .map(([k, v]) => {
+        if (typeof v === 'object') {
+          return [k, () => Promise.resolve(v)]
+        } else if (typeof v === 'string') {
+          return [
+            k,
+            () => window
+              .fetch(v, { cache })
+              .then(data => data.text())
+              .then(text => parser(text))
+              .catch(e => {
+                console.error(e)
+                return null
+              })
+          ]
+        } else {
+          console.error(`Unknown resource format - ${k} is a ${typeof v}`)
+          return [k, null]
+        }
+      })
+  }
 
   try {
-    const data = await window.fetch(url, { cache })
-    const resources = await data.json()
-    return Object.fromEntries(
-      Object
-        .entries(resources)
-        .map(([k, v]) => {
-          if (typeof v === 'object') {
-            return [k, () => Promise.resolve(v)]
-          } else if (typeof v === 'string') {
-            return [
-              k,
-              () => window
-                .fetch(v, { cache })
-                .then(data => data.text())
-                .then(text => parser(text))
-                .catch(e => {
-                  console.error(e)
-                  return null
-                })
-            ]
-          } else {
-            console.error(`Unknown resource format - ${k} is a ${typeof v}`)
-            return [k, null]
-          }
-        })
-    )
+    const builtinData = await window.fetch(url, { cache })
+    const builtinResources = await builtinData.json()
+    builtin = resourceTransform(builtinResources)
   } catch (e) {
-    return Promise.reject(e)
+    builtin = []
+    console.warn(`Builtin resources at ${url} unavailable`)
   }
+
+  try {
+    const customData = await window.fetch(customUrl, { cache })
+    const customResources = await customData.json()
+    custom = resourceTransform(customResources)
+  } catch (e) {
+    custom = []
+    console.warn(`Custom resources at ${customUrl} unavailable`)
+  }
+
+  const total = [...builtin, ...custom]
+  if (total.length === 0) {
+    return Promise.reject(new Error(`Resource at ${url} and ${customUrl} completely unavailable. Panicking`))
+  }
+  return Promise.resolve(Object.fromEntries(total))
 }
diff --git a/static/.gitignore b/static/.gitignore
new file mode 100644
index 000000000..3332292a1
--- /dev/null
+++ b/static/.gitignore
@@ -0,0 +1 @@
+*.custom.*

From 691a79e3bed46af49187ae4c6acfde1099de52cd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Nov 2024 15:27:08 +0200
Subject: [PATCH 05/20] fix theme2 editor

---
 .../settings_modal/tabs/theme_tab/theme_tab.js  | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 00418b03c..e534a7773 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -138,7 +138,6 @@ export default {
     })
   },
   mounted () {
-    this.loadThemeFromLocalStorage()
     if (typeof this.shadowSelected === 'undefined') {
       this.shadowSelected = this.shadowsAvailable[0]
     }
@@ -296,6 +295,9 @@ export default {
         return {}
       }
     },
+    themeDataUsed () {
+      return this.$store.state.interface.themeDataUsed
+    },
     shadowsAvailable () {
       return Object.keys(DEFAULT_SHADOWS).sort()
     },
@@ -478,15 +480,11 @@ export default {
       this.dismissWarning()
     },
     loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
-      const {
-        customTheme: theme,
-        customThemeSource: source
-      } = this.$store.getters.mergedConfig
-      if (theme || source) {
+      const theme = this.themeDataUsed?.source
+      if (theme) {
         this.loadTheme(
           {
-            theme,
-            source: forceSnapshot ? theme : source
+            theme
           },
           'localStorage',
           confirmLoadSource
@@ -705,6 +703,9 @@ export default {
     }
   },
   watch: {
+    themeDataUsed () {
+      this.loadThemeFromLocalStorage()
+    },
     currentRadii () {
       try {
         this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii

From b32909a9e60fb97ca80463ad841986151ad41a40 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Nov 2024 15:27:17 +0200
Subject: [PATCH 06/20] cleanup

---
 src/modules/interface.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/modules/interface.js b/src/modules/interface.js
index 1e23a43df..260cb6349 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -321,7 +321,6 @@ const interfaceMod = {
       commit('setOption', { name: 'customThemeSource', value: null })
     },
     async getThemeData ({ dispatch, commit, rootState, state }) {
-      console.log('GET THEME DATA CALLED')
       const getData = async (resource, index, customData, name) => {
         const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
         const result = {}
@@ -473,12 +472,6 @@ const interfaceMod = {
         )
         state.styleNameUsed = style.nameUsed
         state.styleDataUsed = style.dataUsed
-
-        console.log(
-          'GOT THEME DATA',
-          state.styleDataUsed,
-          state.paletteDataUsed
-        )
       } else {
         const theme = await getData(
           'theme',

From 10aa5755a4b31c8b55bbcb25326a9f81d3901487 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Nov 2024 17:03:09 +0200
Subject: [PATCH 07/20] make old theme tab truly deprecated

---
 src/components/settings_modal/settings_modal_user_content.js  | 3 +++
 src/components/settings_modal/settings_modal_user_content.vue | 3 ++-
 src/i18n/en.json                                              | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index a6d850ec5..f6b49819a 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -64,6 +64,9 @@ const SettingsModalContent = {
     },
     bodyLock () {
       return this.$store.state.interface.settingsModalState === 'visible'
+    },
+    expertLevel () {
+      return this.$store.state.config.expertLevel
     }
   },
   methods: {
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 695102bd8..06605e7dc 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -28,7 +28,8 @@
       <StyleTab />
     </div>
     <div
-      :label="$t('settings.theme')"
+      v-if="expertLevel > 0"
+      :label="$t('settings.theme_old')"
       icon="paint-brush"
       data-tab-name="theme"
     >
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a34e5cf97..e047cb79a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -701,6 +701,7 @@
     "use_websockets": "Use websockets (Realtime updates)",
     "text": "Text",
     "theme": "Theme",
+    "theme_old": "Theme (old)",
     "theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
     "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
     "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",

From 86900061c232ed925a254f813e718a0df104b67a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Nov 2024 17:03:35 +0200
Subject: [PATCH 08/20] fix variables crashing the tab

---
 src/components/settings_modal/tabs/style_tab/style_tab.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index cea734962..d105630d5 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -540,8 +540,8 @@ export default {
         const [valType, valVal] = value.split('|')
         return {
           name: name.substring(2),
-          valType: valType.trim(),
-          value: valVal.trim()
+          valType: valType?.trim(),
+          value: valVal?.trim()
         }
       })
 

From d8a951dc527c3459b3059d922c11e227a471e344 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Nov 2024 17:03:49 +0200
Subject: [PATCH 09/20] don't use lite mode because it causes issues with
 excluded components

---
 src/components/settings_modal/tabs/style_tab/style_tab.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index d105630d5..42756d03b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -693,14 +693,13 @@ export default {
         overallPreviewRules.value = init({
           inputRuleset: exportRules.value,
           ultimateBackgroundColor: '#000000',
-          liteMode: true,
           debug: true
         }).eager
       } catch (e) {
         console.error('Could not compile preview theme', e)
         return null
       }
-    }, 1000)
+    }, 5000)
     //
     // Apart from "hover" we can't really show how component looks like in
     // certain states, so we have to fake them.

From 98a4b07ec12cb81acaf00f9274ccc3aa72f35343 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Nov 2024 17:05:49 +0200
Subject: [PATCH 10/20] update Redmond DX style

---
 static/styles/Redmond DX.piss | 46 ++++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/static/styles/Redmond DX.piss b/static/styles/Redmond DX.piss
index c9ce0c04d..30b17a2ad 100644
--- a/static/styles/Redmond DX.piss	
+++ b/static/styles/Redmond DX.piss	
@@ -47,9 +47,10 @@ Root {
   --bevelLight: color | $brightness(--bg 50);
   --bevelDark: color | $brightness(--bg -20);
   --bevelExtraDark: color | #404040;
-  --buttonDefaultBevel: shadow | $borderSide(--bevelExtraDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelDark bottom-right 1 2);
-  --buttonPressedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner;
-  --defaultInputBevel: shadow | $borderSide(--bevelLight bottom-right 1), $borderSide(--bevelDark top-left 1 1), $borderSide(--bg bottom-right 1 2), $borderSide(--bevelExtraDark top-left 1 2);
+  --buttonDefaultBevel: shadow | $borderSide(--bevelDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelExtraDark bottom-right 1 2);
+  --buttonPressedFocusedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner;
+  --buttonPressedBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2);
+  --defaultInputBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2), $borderSide(--bg bottom-right 1 2);
 }
 
 Button:toggled {
@@ -80,12 +81,44 @@ Button:pressed:hover {
   shadow: --buttonPressedBevel
 }
 
+Button:hover:pressed:focused {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Button:pressed:focused {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Button:toggled:pressed {
+  shadow: --buttonPressedFocusedBevel
+}
+
 Input {
   background: $mod(--bg -80);
   shadow: --defaultInputBevel;
   roundness: 0
 }
 
+Input:focused {
+  shadow: inset 0 0 0 1 #000000 / 1, --defaultInputBevel
+}
+
+Input:focused:hover {
+  shadow: --defaultInputBevel
+}
+
+Input:focused:hover:disabled {
+  shadow: --defaultInputBevel
+}
+
+Input:hover {
+  shadow: --defaultInputBevel
+}
+
+Input:disabled {
+  shadow: --defaultInputBevel
+}
+
 Panel {
   shadow: --buttonDefaultBevel;
   roundness: 0
@@ -106,7 +139,8 @@ Tab:active {
 }
 
 Tab:active:hover {
-  background: --bg
+  background: --bg;
+  shadow: --defaultButtonBevel
 }
 
 Tab:active:hover:disabled {
@@ -125,3 +159,7 @@ Tab {
   background: --bg;
   shadow: --buttonDefaultBevel
 }
+
+Tab:hover:active {
+  shadow: --buttonDefaultBevel
+}

From 877f8bec4569bce7a917ea64dead02f623aec317 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 21 Nov 2024 19:40:07 +0200
Subject: [PATCH 11/20] make overall preview follow selected palette + initial
 load

---
 .../tabs/style_tab/style_tab.js               | 106 +++++++++++-------
 1 file changed, 63 insertions(+), 43 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 42756d03b..5975afd74 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -82,7 +82,12 @@ export default {
     const exports = {}
     const store = useStore()
     // All rules that are made by editor
-    const allEditedRules = reactive({})
+    const allEditedRules = ref(store.state.interface.styleDataUsed || {})
+    const styleDataUsed = computed(() => store.state.interface.styleDataUsed)
+
+    watch([styleDataUsed], (value) => {
+      onImport(store.state.interface.styleDataUsed)
+    }, { once: true })
 
     exports.isActive = computed(() => {
       const tabSwitcher = getCurrentInstance().parent.ctx
@@ -171,6 +176,8 @@ export default {
     exports.selectedPalette = selectedPalette
     provide('selectedPalette', selectedPalette)
 
+    watch([selectedPalette], () => updateOverallPreview())
+
     exports.getNewPalette = () => ({
       name: 'new palette',
       bg: '#121a24',
@@ -338,7 +345,7 @@ export default {
     // Templates for directives
     const isElementPresent = (component, directive, defaultValue = '') => computed({
       get () {
-        return get(allEditedRules, getPath(component, directive)) != null
+        return get(allEditedRules.value, getPath(component, directive)) != null
       },
       set (value) {
         if (value) {
@@ -346,9 +353,9 @@ export default {
             editorFriendlyFallbackStructure.value,
             getPath(component, directive)
           )
-          set(allEditedRules, getPath(component, directive), fallback ?? defaultValue)
+          set(allEditedRules.value, getPath(component, directive), fallback ?? defaultValue)
         } else {
-          unset(allEditedRules, getPath(component, directive))
+          unset(allEditedRules.value, getPath(component, directive))
         }
       }
     })
@@ -357,7 +364,7 @@ export default {
       get () {
         let usedRule
         const fallback = editorFriendlyFallbackStructure.value
-        const real = allEditedRules
+        const real = allEditedRules.value
         const path = getPath(component, directive)
 
         usedRule = get(real, path) // get real
@@ -369,9 +376,9 @@ export default {
       },
       set (value) {
         if (value) {
-          set(allEditedRules, getPath(component, directive), value)
+          set(allEditedRules.value, getPath(component, directive), value)
         } else {
-          unset(allEditedRules, getPath(component, directive))
+          unset(allEditedRules.value, getPath(component, directive))
         }
       }
     })
@@ -520,7 +527,7 @@ export default {
       }
 
       componentsMap.values().forEach(({ name }) => {
-        convert(name, allEditedRules[name])
+        convert(name, allEditedRules.value[name])
       })
 
       return resultRules
@@ -599,6 +606,40 @@ export default {
       getExportedObject: () => exportStyleData.value
     })
 
+    const onImport = parsed => {
+      const editorComponents = parsed.filter(x => x.component.startsWith('@'))
+      const rootComponent = parsed.find(x => x.component === 'Root')
+      const rules = parsed.filter(x => !x.component.startsWith('@') && x.component !== 'Root')
+      const metaIn = editorComponents.find(x => x.component === '@meta').directives
+      const palettesIn = editorComponents.filter(x => x.component === '@palette')
+
+      exports.name.value = metaIn.name
+      exports.license.value = metaIn.license
+      exports.author.value = metaIn.author
+      exports.website.value = metaIn.website
+
+      const newVirtualDirectives = Object
+        .entries(rootComponent.directives)
+        .map(([name, value]) => {
+          const [valType, valVal] = value.split('|').map(x => x.trim())
+          return { name: name.substring(2), valType, value: valVal }
+        })
+      virtualDirectives.value = newVirtualDirectives
+
+      onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
+
+      Object.keys(allEditedRules.value).forEach((k) => delete allEditedRules.value[k])
+
+      rules.forEach(rule => {
+        rulesToEditorFriendly(
+          [rule],
+          allEditedRules.value
+        )
+      })
+
+      exports.updateOverallPreview()
+    }
+
     const styleImporter = newImporter({
       accept: '.piss',
       parser (string) { return deserialize(string) },
@@ -606,39 +647,7 @@ export default {
         console.error('Failure importing style:', result)
         this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
       },
-      onImport (parsed, filename) {
-        const editorComponents = parsed.filter(x => x.component.startsWith('@'))
-        const rootComponent = parsed.find(x => x.component === 'Root')
-        const rules = parsed.filter(x => !x.component.startsWith('@') && x.component !== 'Root')
-        const metaIn = editorComponents.find(x => x.component === '@meta').directives
-        const palettesIn = editorComponents.filter(x => x.component === '@palette')
-
-        exports.name.value = metaIn.name
-        exports.license.value = metaIn.license
-        exports.author.value = metaIn.author
-        exports.website.value = metaIn.website
-
-        const newVirtualDirectives = Object
-          .entries(rootComponent.directives)
-          .map(([name, value]) => {
-            const [valType, valVal] = value.split('|').map(x => x.trim())
-            return { name: name.substring(2), valType, value: valVal }
-          })
-        virtualDirectives.value = newVirtualDirectives
-
-        onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
-
-        Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
-
-        rules.forEach(rule => {
-          rulesToEditorFriendly(
-            [rule],
-            allEditedRules
-          )
-        })
-
-        exports.updateOverallPreview()
-      }
+      onImport
     })
 
     // Raw format
@@ -691,7 +700,18 @@ export default {
     const updateOverallPreview = throttle(() => {
       try {
         overallPreviewRules.value = init({
-          inputRuleset: exportRules.value,
+          inputRuleset: [
+            ...exportRules.value,
+            {
+              component: 'Root',
+              directives: Object.fromEntries(
+                Object
+                  .entries(selectedPalette.value)
+                  .filter(([k, v]) => k && v && k !== 'name')
+                  .map(([k, v]) => [`--${k}`, `color | ${v}`])
+              )
+            }
+          ],
           ultimateBackgroundColor: '#000000',
           debug: true
         }).eager
@@ -802,7 +822,7 @@ export default {
 
     watch(
       [
-        allEditedRules,
+        allEditedRules.value,
         palettes,
         selectedPalette,
         selectedState,

From 02cf4fd43f4505ee8d3b17399daaa8d0f868e4e9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 19:35:15 +0200
Subject: [PATCH 12/20] fix virtual subcomponents not being read properly

---
 .../settings_modal/tabs/style_tab/style_tab.js      | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 5975afd74..bcf156656 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -298,7 +298,7 @@ export default {
       }
 
       if (hasChildren) {
-        acc._children = acc._children ?? {}
+        output._children = output._children ?? {}
         const {
           component: cComponent,
           variant: cVariant = 'normal',
@@ -307,7 +307,7 @@ export default {
         } = child
 
         const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
-        set(output._children, cPath, directives)
+        set(output._children, cPath, { directives })
       } else {
         output.directives = parent.directives
       }
@@ -628,14 +628,7 @@ export default {
 
       onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
 
-      Object.keys(allEditedRules.value).forEach((k) => delete allEditedRules.value[k])
-
-      rules.forEach(rule => {
-        rulesToEditorFriendly(
-          [rule],
-          allEditedRules.value
-        )
-      })
+      allEditedRules.value = rulesToEditorFriendly(rules)
 
       exports.updateOverallPreview()
     }

From 00438e852e6b629f539c6154f80a03d4c87b4d45 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 19:37:03 +0200
Subject: [PATCH 13/20] fix some minor issues in Redmond DX

---
 static/styles/Redmond DX.piss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/styles/Redmond DX.piss b/static/styles/Redmond DX.piss
index 30b17a2ad..7777b7d33 100644
--- a/static/styles/Redmond DX.piss	
+++ b/static/styles/Redmond DX.piss	
@@ -47,7 +47,7 @@ Root {
   --bevelLight: color | $brightness(--bg 50);
   --bevelDark: color | $brightness(--bg -20);
   --bevelExtraDark: color | #404040;
-  --buttonDefaultBevel: shadow | $borderSide(--bevelDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelExtraDark bottom-right 1 2);
+  --buttonDefaultBevel: shadow | $borderSide(--bevelExtraDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelDark bottom-right 1 2);
   --buttonPressedFocusedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner;
   --buttonPressedBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2);
   --defaultInputBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2), $borderSide(--bg bottom-right 1 2);
@@ -163,3 +163,7 @@ Tab {
 Tab:hover:active {
   shadow: --buttonDefaultBevel
 }
+
+TopBar Link {
+  textColor: #ffffff
+}

From 7b56b3f411d0f32fa9221d8ba5a6843a69826777 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 19:42:50 +0200
Subject: [PATCH 14/20] more predictable styles order, custom styles before
 builtins

---
 .../settings_modal/tabs/appearance_tab.js           | 13 ++++++++++---
 src/services/style_setter/style_setter.js           |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 711b1961b..d314dc78b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -34,7 +34,8 @@ library.add(
 const AppearanceTab = {
   data () {
     return {
-      availableStyles: [],
+      availableThemesV3: [],
+      availableThemesV2: [],
       bundledPalettes: [],
       compilationCache: {},
       fileImporter: newImporter({
@@ -108,13 +109,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' })
+        this.availableThemesV3.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' })
+        this.availableThemesV2.push({ key, data, name: data.name, version: 'v2' })
       }))
     })
 
@@ -169,6 +170,12 @@ const AppearanceTab = {
     })
   },
   computed: {
+    availableStyles () {
+      return [
+        ...this.availableThemesV3,
+        ...this.availableThemesV2
+      ]
+    },
     availablePalettes () {
       return [
         ...this.bundledPalettes,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1892c1116..f57fd80e9 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -275,7 +275,7 @@ export const getResourcesIndex = async (url, parser = JSON.parse) => {
     console.warn(`Custom resources at ${customUrl} unavailable`)
   }
 
-  const total = [...builtin, ...custom]
+  const total = [...custom, ...builtin]
   if (total.length === 0) {
     return Promise.reject(new Error(`Resource at ${url} and ${customUrl} completely unavailable. Panicking`))
   }

From c81948620fbcc9728d72e6f4758c4e31030f6085 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 19:45:10 +0200
Subject: [PATCH 15/20] use compact mode for shadow control in old ui

---
 src/components/settings_modal/tabs/theme_tab/theme_tab.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 43046104c..886d97764 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -958,6 +958,7 @@
             :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
             :fallback="currentShadowFallback"
             :static-vars="previewTheme.colors"
+            :compact="true"
           />
         </div>
         <div

From 7ae0d6b95dd26d6c4010ecda2720e24111889294 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 20:07:25 +0200
Subject: [PATCH 16/20] fix reset not resetting

---
 src/components/settings_modal/tabs/style_tab/style_tab.js  | 4 ++++
 src/components/settings_modal/tabs/style_tab/style_tab.vue | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index bcf156656..722670ea4 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -661,6 +661,10 @@ export default {
       ].join('\n\n')
     })
 
+    exports.clearStyle = () => {
+      onImport(store.state.interface.styleDataUsed)
+    }
+
     exports.exportStyle = () => {
       styleExporter.exportData()
     }
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index eabbb582f..68a0193fd 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -21,7 +21,7 @@
             <div class="style-actions">
               <button
                 class="btn button-default button-new"
-                @click="clearTheme"
+                @click="clearStyle"
               >
                 <FAIcon icon="arrows-rotate" />
                 {{ $t('settings.style.themes3.editor.reset_style') }}

From fdc9d8dc721e228580ad4f75f331af0e659d80ae Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 20:08:06 +0200
Subject: [PATCH 17/20] update preview on colors changing

---
 src/components/settings_modal/tabs/style_tab/style_tab.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 722670ea4..533a553fa 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -357,6 +357,7 @@ export default {
         } else {
           unset(allEditedRules.value, getPath(component, directive))
         }
+        exports.updateOverallPreview()
       }
     })
 
@@ -380,6 +381,7 @@ export default {
         } else {
           unset(allEditedRules.value, getPath(component, directive))
         }
+        exports.updateOverallPreview()
       }
     })
 

From 4af8a307eeabf9517ca2fb477f12c7e31823bda9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 21:59:00 +0200
Subject: [PATCH 18/20] allow spaces inside function definition

---
 src/services/theme_data/iss_deserializer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 196007e65..55a596a5f 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -15,7 +15,7 @@ export const deserializeShadow = string => {
     // spread (optional)
     '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
     // either hex, variable or function
-    '(#[0-9a-f]{6}|--[a-z0-9\\-_]+|\\$[a-z0-9\\-()_]+)',
+    '(#[0-9a-f]{6}|--[a-z0-9\\-_]+|\\$[a-z0-9\\-()_ ]+)',
     // opacity (optional)
     '(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?',
     // name

From 462d8efde8b3114b104db8deb818ac70b671d200 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 22:28:02 +0200
Subject: [PATCH 19/20] fix accent color

---
 src/modules/interface.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/modules/interface.js b/src/modules/interface.js
index 260cb6349..8d05dea49 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -448,6 +448,8 @@ const interfaceMod = {
         )
         state.paletteNameUsed = palette.nameUsed
         state.paletteDataUsed = palette.dataUsed
+        state.paletteDataUsed.link = state.paletteDataUsed.link || state.paletteDataUsed.accent
+        state.paletteDataUsed.accent = state.paletteDataUsed.accent || state.paletteDataUsed.link
         if (Array.isArray(state.paletteDataUsed)) {
           const [
             name,
@@ -460,7 +462,18 @@ const interfaceMod = {
             cBlue = '#0000FF',
             cOrange = '#E3FF00'
           ] = palette.dataUsed
-          state.paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+          state.paletteDataUsed = {
+            name,
+            bg,
+            fg,
+            text,
+            link,
+            accent: link,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange
+          }
         }
         console.debug('Palette data used', palette.dataUsed)
 

From 47edd347423f5bb312596dea850a40ba656e166d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Nov 2024 22:33:54 +0200
Subject: [PATCH 20/20] Breezy theme

---
 static/styles/Breezy DX.piss | 63 ++++++++++++++++++++++++++++++++++++
 static/styles/index.json     |  3 +-
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 static/styles/Breezy DX.piss

diff --git a/static/styles/Breezy DX.piss b/static/styles/Breezy DX.piss
new file mode 100644
index 000000000..06f0cd5f8
--- /dev/null
+++ b/static/styles/Breezy DX.piss	
@@ -0,0 +1,63 @@
+@meta {
+  name: Breezy DX;
+  author: HJ;
+  license: WTFPL;
+  website: ebin.club;
+}
+
+@palette.Dark {
+  bg: #121a24;
+  fg: #182230;
+  text: #b9b9ba;
+  link: #d8a070;
+  accent: #d8a070;
+  cRed: #FF0000;
+  cBlue: #0095ff;
+  cGreen: #0fa00f;
+  cOrange: #ffa500;
+}
+
+@palette.Light {
+  bg: #f2f6f9;
+  fg: #d6dfed;
+  text: #304055;
+  underlay: #5d6086;
+  accent: #f55b1b;
+  cBlue: #0095ff;
+  cRed: #d31014;
+  cGreen: #0fa00f;
+  cOrange: #ffa500;
+  border: #d8e6f9;
+}
+
+Root {
+  --badgeNotification: color | --cRed;
+  --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1;
+  --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1;
+  --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35;
+  --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1;
+  --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05, inset 0 20 0 80 --accent / 0.2;
+  --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35;
+  --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1;
+  --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1;
+}
+
+Button:disabled {
+  shadow: --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Button:hover {
+  shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Input {
+  shadow: --defaultInputBevel
+}
+
+PanelHeader {
+  shadow: inset 0 30 30 -30 #ffffff / 0.25
+}
+
+Tab:hover {
+  shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
+}
diff --git a/static/styles/index.json b/static/styles/index.json
index 7a136cbc7..52365cd3c 100644
--- a/static/styles/index.json
+++ b/static/styles/index.json
@@ -1,3 +1,4 @@
 {
-  "RedmondDX": "/static/styles/Redmond DX.piss"
+  "RedmondDX": "/static/styles/Redmond DX.piss",
+  "BreezyDX": "/static/styles/Breezy DX.piss"
 }