multiple fixes to make style switcher not die. Made shadows work, incuding compatibility

This commit is contained in:
Henry Jameson 2020-01-20 01:31:54 +02:00
parent 6a3714fcc6
commit 6e1c538e41
5 changed files with 94 additions and 59 deletions

View file

@ -11,7 +11,8 @@ import {
generateRadii,
generateFonts,
composePreset,
getThemes
getThemes,
shadows2to3
} from '../../services/style_setter/style_setter.js'
import {
CURRENT_VERSION,
@ -159,62 +160,66 @@ export default {
},
// This needs optimization maybe
previewContrast () {
if (!this.previewTheme.colors.bg) return {}
const colors = this.previewTheme.colors
const opacity = this.previewTheme.opacity
if (!colors.bg) return {}
const hints = (ratio) => ({
text: ratio.toPrecision(3) + ':1',
// AA level, AAA level
aa: ratio >= 4.5,
aaa: ratio >= 7,
// same but for 18pt+ texts
laa: ratio >= 3,
laaa: ratio >= 4.5
})
const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
try {
if (!this.previewTheme.colors.bg) return {}
const colors = this.previewTheme.colors
const opacity = this.previewTheme.opacity
if (!colors.bg) return {}
const hints = (ratio) => ({
text: ratio.toPrecision(3) + ':1',
// AA level, AAA level
aa: ratio >= 4.5,
aaa: ratio >= 7,
// same but for 18pt+ texts
laa: ratio >= 3,
laaa: ratio >= 4.5
})
const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
const slotIsBaseText = key === 'text' || key === 'link'
const slotIsText = slotIsBaseText || (
typeof value === 'object' && value !== null && value.textColor
)
if (!slotIsText) return acc
const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
const background = variant || layer
const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
const textColors = [
key,
...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
]
const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
const slotIsBaseText = key === 'text' || key === 'link'
const slotIsText = slotIsBaseText || (
typeof value === 'object' && value !== null && value.textColor
)
if (!slotIsText) return acc
const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
const background = variant || layer
const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
const textColors = [
key,
...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
]
const layers = getLayers(
layer,
variant || layer,
opacitySlot,
colorsConverted,
opacity
)
const layers = getLayers(
layer,
variant || layer,
opacitySlot,
colorsConverted,
opacity
)
return {
...acc,
...textColors.reduce((acc, textColorKey) => {
const newKey = slotIsBaseText
? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
: textColorKey
return {
...acc,
[newKey]: getContrastRatioLayers(
colorsConverted[textColorKey],
layers,
colorsConverted[textColorKey]
)
}
}, {})
}
}, {})
return {
...acc,
...textColors.reduce((acc, textColorKey) => {
const newKey = slotIsBaseText
? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
: textColorKey
return {
...acc,
[newKey]: getContrastRatioLayers(
colorsConverted[textColorKey],
layers,
colorsConverted[textColorKey]
)
}
}, {})
}
}, {})
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
} catch (e) {
console.warn('Failure computing contrasts', e)
}
},
previewRules () {
if (!this.preview.rules) return ''
@ -466,7 +471,11 @@ export default {
if (!this.keepShadows) {
this.clearShadows()
this.shadowsLocal = shadows
if (version === 2) {
this.shadowsLocal = shadows2to3(shadows)
} else {
this.shadowsLocal = shadows
}
this.shadowSelected = this.shadowsAvailable[0]
}

View file

@ -291,8 +291,8 @@ export const generateShadows = (input, colors, mod) => {
const shadows = Object.entries({
...DEFAULT_SHADOWS,
...(input.shadows || {})
}).reduce((shadowsAcc, [slotName, shadowdefs]) => {
const newShadow = shadowdefs.reduce((shadowAcc, def) => [
}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
const newShadow = shadowDefs.reduce((shadowAcc, def) => [
...shadowAcc,
{
...def,
@ -380,6 +380,25 @@ export const getThemes = () => {
})
}
/**
* This handles compatibility issues when importing v2 theme's shadows to current format
*
* Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
*/
export const shadows2to3 = (shadows) => {
return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
const isDynamic = ({ color }) => console.log(color) || color.startsWith('--')
const newShadow = shadowDefs.reduce((shadowAcc, def) => [
...shadowAcc,
{
...def,
alpha: isDynamic(def) ? 1 : def.alpha
}
], [])
return { ...shadowsAcc, [slotName]: newShadow }
}, {})
}
export const setPreset = (val, commit) => {
return getThemes()
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])

View file

@ -663,7 +663,14 @@ export const SLOT_ORDERED = topoSort(
Object.entries(SLOT_INHERITANCE)
.sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
)
).sort((a, b) => {
const depsA = getDependencies(a, SLOT_INHERITANCE).length
const depsB = getDependencies(b, SLOT_INHERITANCE).length
if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return 0
if (depsA === 0 && depsB !== 0) return -1
if (depsB === 0 && depsA !== 0) return 1
})
/**
* Dictionary where keys are color slots and values are opacity associated

View file

@ -53,7 +53,7 @@
"blur": 0,
"spread": "1",
"color": "--accent",
"alpha": "0.3",
"alpha": "1",
"inset": true
},
{

View file

@ -53,7 +53,7 @@
"blur": 0,
"spread": "1",
"color": "--accent",
"alpha": "0.3",
"alpha": "1",
"inset": true
},
{