palettes/style meta inconsistency

src/components/settings_modal/tabs/appearance_tab.js

@@ -172,8 +172,8 @@ const AppearanceTab = {
       const result = this.mergedConfig.styleCustomData
         .filter(x => x.component.startsWith('@palette'))
         .map(x => {
+          const { variant, directives } = x
           const {
-            variant,
             bg,
             fg,
             text,
@@ -184,10 +184,10 @@ const AppearanceTab = {
             cGreen,
             cOrange,
             wallpaper
-          } = x
+          } = directives
 
           const result = {
-            name: `${meta.name}: ${variant}`,
+            name: `${meta.directives.name || this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
             bg,
             fg,
             text,
@@ -240,12 +240,12 @@ const AppearanceTab = {
       return themeVersion
     },
     isCustomThemeUsed () {
-      const { theme } = this.mergedConfig
-      return theme === 'custom'
+      const { customTheme, customThemeSource } = this.mergedConfig
+      return customTheme != null || customThemeSource != null
     },
     isCustomStyleUsed (name) {
-      const { style } = this.mergedConfig
-      return style === 'custom'
+      const { styleCustomData } = this.mergedConfig
+      return styleCustomData != null
     },
     ...SharedComputedObject()
   },

src/components/settings_modal/tabs/appearance_tab.vue

@@ -102,7 +102,7 @@
               @click="() => setPaletteCustom(p)"
             >
               <label>
-                {{ p.name }}
+                {{ p.name ?? $t('settings.style.themes3.palette.user') }}
               </label>
               <span
                 v-for="c in palettesKeys"

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

@@ -86,7 +86,6 @@ export default {
 
     exports.isActive = computed(() => {
       const tabSwitcher = getCurrentInstance().parent.ctx
-      console.log('TABSW', tabSwitcher)
       return tabSwitcher ? tabSwitcher.isActive('style') : false
     })
 
@@ -109,10 +108,12 @@ export default {
 
     const metaRule = computed(() => ({
       component: '@meta',
+      directives: {
         name: exports.name.value,
         author: exports.author.value,
         license: exports.license.value,
         website: exports.website.value
+      }
     }))
 
     // ## Palette stuff
@@ -190,9 +191,9 @@ export default {
         return {
           component: '@palette',
           variant: name,
-          ...Object
+          directives: Object
             .entries(rest)
-            .filter(([k, v]) => v)
+            .filter(([k, v]) => v && k)
             .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
         }
       })
@@ -203,6 +204,7 @@ export default {
       return palettes.map(({ name, ...palette }) => {
         const entries = Object
           .entries(palette)
+          .filter(([k, v]) => v && k)
           .map(([slot, data]) => `  ${slot}: ${data};`)
           .join('\n')
 
@@ -561,7 +563,9 @@ export default {
     const virtualDirectivesOut = computed(() => {
       return [
         'Root {',
-        ...virtualDirectives.value.map(vd => `  --${vd.name}: ${vd.valType} | ${vd.value};`),
+        ...virtualDirectives.value
+          .filter(vd => vd.name && vd.valType && vd.value)
+          .map(vd => `  --${vd.name}: ${vd.valType} | ${vd.value};`),
         '}'
       ].join('\n')
     })

src/i18n/en.json

@@ -750,6 +750,7 @@
     "more_settings": "More settings",
     "style": {
       "custom_theme_used": "(Custom theme)",
+      "custom_style_used": "(Custom style)",
       "stock_theme_used": "(Stock theme)",
       "themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
       "appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
@@ -775,7 +776,8 @@
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
           "bundled": "Bundled palettes",
           "style": "Palettes provided by selected style",
-          "user": "Custom palette"
+          "user": "Custom palette",
+          "imported": "Imported"
         },
         "editor": {
           "title": "Style",

static/styles/Redmond DX.json

@@ -0,0 +1,127 @@
+@meta {
+  name: Redmond DX;
+  author: HJ;
+  license: WTFPL;
+  website: ebin.club;
+}
+
+@palette.Modern {
+  bg: #D3CFC7;
+  fg: #092369;
+  text: #000000;
+  link: #0000FF;
+  accent: #A5C9F0;
+  cRed: #FF3000;
+  cBlue: #009EFF;
+  cGreen: #309E00;
+  cOrange: #FFCE00;
+}
+
+@palette.Classic {
+  bg: #BFBFBF;
+  fg: #000180;
+  text: #000000;
+  link: #0000FF;
+  accent: #A5C9F0;
+  cRed: #FF0000;
+  cBlue: #2E2ECE;
+  cGreen: #007E00;
+  cOrange: #CE8F5F;
+}
+
+@palette.Vapor {
+  bg: #F0ADCD;
+  fg: #a177ee;
+  text: #602040;
+  link: #086866;
+  accent: #9DF7C8;
+  cRed: #ff0088;
+  cBlue: #20c8e9;
+  cGreen: #0fd27d;
+  cOrange: #ECE646;
+}
+
+Root {
+  --gradientColor: color | $brightness(--fg, 20);
+  --inputColor: color | #FFFFFF;
+  --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);
+}
+
+Button:toggled {
+  background: --bg;
+  shadow: --buttonPressedBevel
+}
+
+Button:focused {
+  shadow: --buttonDefaultBevel, 0 0 0 1 #000000 / 1
+}
+
+Button:pressed {
+  shadow: --buttonPressedBevel
+}
+
+Button:hover {
+  shadow: --buttonDefaultBevel;
+  background: --bg
+}
+
+Button {
+  shadow: --buttonDefaultBevel;
+  background: --bg;
+  roundness: 0
+}
+
+Button:pressed:hover {
+  shadow: --buttonPressedBevel
+}
+
+Input {
+  background: $mod(--bg -80);
+  shadow: --defaultInputBevel;
+  roundness: 0
+}
+
+Panel {
+  shadow: --buttonDefaultBevel;
+  roundness: 0
+}
+
+PanelHeader {
+  shadow: inset -1100 0 1000 -1000 --gradientColor / 1 #Gradient ;
+  background: --fg
+}
+
+Tab:hover {
+  background: --bg;
+  shadow: --buttonDefaultBevel
+}
+
+Tab:active {
+  background: --bg
+}
+
+Tab:active:hover {
+  background: --bg
+}
+
+Tab:active:hover:disabled {
+  background: --bg
+}
+
+Tab:hover:disabled {
+  background: --bg
+}
+
+Tab:disabled {
+  background: --bg
+}
+
+Tab {
+  background: --bg;
+  shadow: --buttonDefaultBevel
+}

static/styles/index.json

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