mirrors/youjo-fe
mirrors/youjo-fe
1
0
Fork 0
mirror of https://git.youjo.love/youjo/youjo-fe.git synced 2024-11-20 05:49:54 +01:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/style_switcher/style_switcher.js
View file

@ -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
}

2
src/services/color_convert/color_convert.js
View file

@ -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
}

9
src/services/style_setter/style_setter.js
View file

@ -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 }

14
static/themes/breezy-dark.json
View file

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

19
static/themes/breezy-light.json
View file

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