diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 7 | ||||
| -rw-r--r-- | src/services/color_convert/color_convert.js | 2 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 9 |
3 files changed, 10 insertions, 8 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 17ae9f30..807f9efc 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -62,6 +62,7 @@ export default { selected: this.$store.getters.mergedConfig.theme, themeWarning: undefined, tempImportFile: undefined, + engineVersion: 0, previewShadows: {}, previewColors: {}, @@ -510,7 +511,7 @@ export default { colors: this.currentColors }) this.previewShadows = generateShadows( - { shadows: this.shadowsLocal }, + { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion }, this.previewColors.theme.colors, this.previewColors.mod ) @@ -607,6 +608,8 @@ export default { } } + this.engineVersion = version + // Stuff that differs between V1 and V2 if (version === 1) { this.fgColorLocal = rgb2hex(colors.btn) @@ -653,7 +656,7 @@ export default { if (!this.keepShadows) { this.clearShadows() if (version === 2) { - this.shadowsLocal = shadows2to3(shadows) + this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity) } else { this.shadowsLocal = shadows } diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 3b6fdcc7..ec104269 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -214,8 +214,6 @@ export const getCssColor = (input, a) => { } else if (typeof input === 'string') { if (input.startsWith('#')) { rgb = hex2rgb(input) - } else if (input.startsWith('--')) { - return `var(${input})` } else { return input } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 48f51c59..c8610507 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,6 +1,6 @@ import { convert } from 'chromatism' 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) => { const { rules } = generatePreset(input) @@ -242,7 +242,7 @@ export const generateShadows = (input, colors) => { input: 'input' } const inputShadows = input.shadows && !input.themeEngineVersion - ? shadows2to3(input.shadows) + ? shadows2to3(input.shadows, input.opacity) : input.shadows || {} const shadows = Object.entries({ ...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 */ -export const shadows2to3 = (shadows) => { +export const shadows2to3 = (shadows, opacity) => { return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => { const isDynamic = ({ color }) => color.startsWith('--') + const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])] const newShadow = shadowDefs.reduce((shadowAcc, def) => [ ...shadowAcc, { ...def, - alpha: isDynamic(def) ? 1 : def.alpha + alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha } ], []) return { ...shadowsAcc, [slotName]: newShadow } |