AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 81 Pull requests 19 Projects Releases 1 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",