From ca5c24452e9b6ac917e6920b73805d78d97fc503 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Nov 2024 01:16:51 +0200 Subject: [PATCH] palettes/style meta inconsistency --- .../settings_modal/tabs/appearance_tab.js | 14 +- .../settings_modal/tabs/appearance_tab.vue | 2 +- .../tabs/style_tab/style_tab.js | 20 +-- src/i18n/en.json | 4 +- static/styles/Redmond DX.json | 127 ++++++++++++++++++ static/styles/index.json | 3 + 6 files changed, 153 insertions(+), 17 deletions(-) create mode 100644 static/styles/Redmond DX.json create mode 100644 static/styles/index.json diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index ddd501f2..076bb995 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/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() }, diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index 6ec84eb2..32e0a37f 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -102,7 +102,7 @@ @click="() => setPaletteCustom(p)" > { 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', - name: exports.name.value, - author: exports.author.value, - license: exports.license.value, - website: exports.website.value + 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') }) diff --git a/src/i18n/en.json b/src/i18n/en.json index e77e5637..a34e5cf9 100644 --- a/src/i18n/en.json +++ b/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", diff --git a/static/styles/Redmond DX.json b/static/styles/Redmond DX.json new file mode 100644 index 00000000..39018aa7 --- /dev/null +++ b/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 +} diff --git a/static/styles/index.json b/static/styles/index.json new file mode 100644 index 00000000..2f1a3e8e --- /dev/null +++ b/static/styles/index.json @@ -0,0 +1,3 @@ +{ + "Redmond DX": "/static/styles/Redmond DX.json" +}