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

View file

@ -291,8 +291,8 @@ export const generateShadows = (input, colors, mod) => {
const shadows = Object.entries({ const shadows = Object.entries({
...DEFAULT_SHADOWS, ...DEFAULT_SHADOWS,
...(input.shadows || {}) ...(input.shadows || {})
}).reduce((shadowsAcc, [slotName, shadowdefs]) => { }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
const newShadow = shadowdefs.reduce((shadowAcc, def) => [ const newShadow = shadowDefs.reduce((shadowAcc, def) => [
...shadowAcc, ...shadowAcc,
{ {
...def, ...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) => { export const setPreset = (val, commit) => {
return getThemes() return getThemes()
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark']) .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])

View file

@ -663,7 +663,14 @@ export const SLOT_ORDERED = topoSort(
Object.entries(SLOT_INHERITANCE) Object.entries(SLOT_INHERITANCE)
.sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0)) .sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {}) .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 * Dictionary where keys are color slots and values are opacity associated

View file

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

View file

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