multiple fixes to make style switcher not die. Made shadows work, incuding compatibility
This commit is contained in:
parent
6a3714fcc6
commit
6e1c538e41
5 changed files with 94 additions and 59 deletions
|
@ -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]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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'])
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue