fix v2 breezy themes having messed up pressed buttons. updated v2.1 breezy

themes to have derived colors instead of fixed ones.
This commit is contained in:
Henry Jameson 2020-02-12 00:45:37 +02:00
parent 29133fb008
commit 60446c56a5
5 changed files with 25 additions and 26 deletions

View file

@ -62,6 +62,7 @@ export default {
selected: this.$store.getters.mergedConfig.theme, selected: this.$store.getters.mergedConfig.theme,
themeWarning: undefined, themeWarning: undefined,
tempImportFile: undefined, tempImportFile: undefined,
engineVersion: 0,
previewShadows: {}, previewShadows: {},
previewColors: {}, previewColors: {},
@ -510,7 +511,7 @@ export default {
colors: this.currentColors colors: this.currentColors
}) })
this.previewShadows = generateShadows( this.previewShadows = generateShadows(
{ shadows: this.shadowsLocal }, { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
this.previewColors.theme.colors, this.previewColors.theme.colors,
this.previewColors.mod this.previewColors.mod
) )
@ -607,6 +608,8 @@ export default {
} }
} }
this.engineVersion = version
// Stuff that differs between V1 and V2 // Stuff that differs between V1 and V2
if (version === 1) { if (version === 1) {
this.fgColorLocal = rgb2hex(colors.btn) this.fgColorLocal = rgb2hex(colors.btn)
@ -653,7 +656,7 @@ export default {
if (!this.keepShadows) { if (!this.keepShadows) {
this.clearShadows() this.clearShadows()
if (version === 2) { if (version === 2) {
this.shadowsLocal = shadows2to3(shadows) this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
} else { } else {
this.shadowsLocal = shadows this.shadowsLocal = shadows
} }

View file

@ -214,8 +214,6 @@ export const getCssColor = (input, a) => {
} else if (typeof input === 'string') { } else if (typeof input === 'string') {
if (input.startsWith('#')) { if (input.startsWith('#')) {
rgb = hex2rgb(input) rgb = hex2rgb(input)
} else if (input.startsWith('--')) {
return `var(${input})`
} else { } else {
return input return input
} }

View file

@ -1,6 +1,6 @@
import { convert } from 'chromatism' import { convert } from 'chromatism'
import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js' import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js' import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
export const applyTheme = (input) => { export const applyTheme = (input) => {
const { rules } = generatePreset(input) const { rules } = generatePreset(input)
@ -242,7 +242,7 @@ export const generateShadows = (input, colors) => {
input: 'input' input: 'input'
} }
const inputShadows = input.shadows && !input.themeEngineVersion const inputShadows = input.shadows && !input.themeEngineVersion
? shadows2to3(input.shadows) ? shadows2to3(input.shadows, input.opacity)
: input.shadows || {} : input.shadows || {}
const shadows = Object.entries({ const shadows = Object.entries({
...DEFAULT_SHADOWS, ...DEFAULT_SHADOWS,
@ -368,14 +368,15 @@ export const colors2to3 = (colors) => {
* *
* Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
*/ */
export const shadows2to3 = (shadows) => { export const shadows2to3 = (shadows, opacity) => {
return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => { return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
const isDynamic = ({ color }) => color.startsWith('--') const isDynamic = ({ color }) => color.startsWith('--')
const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
const newShadow = shadowDefs.reduce((shadowAcc, def) => [ const newShadow = shadowDefs.reduce((shadowAcc, def) => [
...shadowAcc, ...shadowAcc,
{ {
...def, ...def,
alpha: isDynamic(def) ? 1 : def.alpha alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
} }
], []) ], [])
return { ...shadowsAcc, [slotName]: newShadow } return { ...shadowsAcc, [slotName]: newShadow }

View file

@ -21,7 +21,7 @@
"y": "0", "y": "0",
"blur": "0", "blur": "0",
"spread": "1", "spread": "1",
"color": "#ffffff", "color": "--btn,900",
"alpha": "0.15", "alpha": "0.15",
"inset": true "inset": true
}, },
@ -42,7 +42,7 @@
"blur": "40", "blur": "40",
"spread": "-40", "spread": "-40",
"inset": true, "inset": true,
"color": "#ffffff", "color": "--panel,900",
"alpha": "0.1" "alpha": "0.1"
} }
], ],
@ -72,7 +72,7 @@
"y": "0", "y": "0",
"blur": 0, "blur": 0,
"spread": "1", "spread": "1",
"color": "#ffffff", "color": "--btn,900",
"alpha": 0.2, "alpha": 0.2,
"inset": true "inset": true
}, },
@ -92,7 +92,7 @@
"y": "0", "y": "0",
"blur": 0, "blur": 0,
"spread": "1", "spread": "1",
"color": "#FFFFFF", "color": "--input,900",
"alpha": "0.2", "alpha": "0.2",
"inset": true "inset": true
} }
@ -105,9 +105,9 @@
"link": "#3daee9", "link": "#3daee9",
"fg": "#31363b", "fg": "#31363b",
"panel": "transparent", "panel": "transparent",
"input": "#232629", "input": "--bg,-6.47",
"topBarLink": "#eff0f1", "topBarLink": "--topBarText",
"btn": "#31363b", "btn": "--bg",
"border": "#4c545b", "border": "#4c545b",
"cRed": "#da4453", "cRed": "#da4453",
"cBlue": "#3daee9", "cBlue": "#3daee9",

View file

@ -21,7 +21,7 @@
"y": "0", "y": "0",
"blur": "0", "blur": "0",
"spread": "1", "spread": "1",
"color": "#000000", "color": "--btn,900",
"alpha": "0.3", "alpha": "0.3",
"inset": true "inset": true
}, },
@ -42,7 +42,7 @@
"blur": "40", "blur": "40",
"spread": "-40", "spread": "-40",
"inset": true, "inset": true,
"color": "#ffffff", "color": "--panel,900",
"alpha": "0.1" "alpha": "0.1"
} }
], ],
@ -72,7 +72,7 @@
"y": "0", "y": "0",
"blur": 0, "blur": 0,
"spread": "1", "spread": "1",
"color": "#ffffff", "color": "--btn,900",
"alpha": 0.2, "alpha": 0.2,
"inset": true "inset": true
}, },
@ -92,7 +92,7 @@
"y": "0", "y": "0",
"blur": 0, "blur": 0,
"spread": "1", "spread": "1",
"color": "#000000", "color": "--input,900",
"alpha": "0.2", "alpha": "0.2",
"inset": true "inset": true
} }
@ -104,14 +104,11 @@
"colors": { "colors": {
"bg": "#eff0f1", "bg": "#eff0f1",
"text": "#232627", "text": "#232627",
"fg": "#bcc2c7", "fg": "#475057",
"accent": "#2980b9", "accent": "#2980b9",
"panel": "#475057", "input": "--bg,-6.47",
"panelText": "#fcfcfc", "topBarLink": "--topBarText",
"input": "#fcfcfc", "btn": "--bg",
"topBar": "#475057",
"topBarLink": "#eff0f1",
"btn": "#eff0f1",
"cRed": "#da4453", "cRed": "#da4453",
"cBlue": "#2980b9", "cBlue": "#2980b9",
"cGreen": "#27ae60", "cGreen": "#27ae60",