mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-24 03:45:03 +01:00
v2 compatibility fixes
This commit is contained in:
parent
c7f42b7799
commit
8de7eabd8f
@ -280,7 +280,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||
const customThemePresent = customThemeSource || customTheme
|
||||
|
||||
if (customThemePresent) {
|
||||
if (customThemeSource && customThemeSource.version === CURRENT_VERSION) {
|
||||
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
|
||||
applyTheme(customThemeSource)
|
||||
} else {
|
||||
applyTheme(customTheme)
|
||||
|
@ -12,7 +12,8 @@ import {
|
||||
generateFonts,
|
||||
composePreset,
|
||||
getThemes,
|
||||
shadows2to3
|
||||
shadows2to3,
|
||||
colors2to3
|
||||
} from '../../services/style_setter/style_setter.js'
|
||||
import {
|
||||
CURRENT_VERSION,
|
||||
@ -588,7 +589,9 @@ export default {
|
||||
const opacity = input.opacity
|
||||
const shadows = input.shadows || {}
|
||||
const fonts = input.fonts || {}
|
||||
const colors = input.colors || input
|
||||
const colors = !input.themeEngineVersion
|
||||
? colors2to3(input.colors)
|
||||
: input.colors || input
|
||||
|
||||
if (version === 0) {
|
||||
if (input.version) version = input.version
|
||||
|
@ -185,10 +185,9 @@ export const rgba2css = function (rgba) {
|
||||
* @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
|
||||
*/
|
||||
export const getTextColor = function (bg, text, preserve) {
|
||||
const bgIsLight = relativeLuminance(bg) > 0.5
|
||||
const textIsLight = relativeLuminance(text) > 0.5
|
||||
const contrast = getContrastRatio(bg, text)
|
||||
|
||||
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
|
||||
if (contrast < 4.5) {
|
||||
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
|
||||
const result = Object.assign(base, invertLightness(text).rgb)
|
||||
if (!preserve && getContrastRatio(bg, result) < 4.5) {
|
||||
|
@ -110,7 +110,9 @@ const getCssShadowFilter = (input) => {
|
||||
}
|
||||
|
||||
export const generateColors = (themeData) => {
|
||||
const sourceColors = themeData.colors || themeData
|
||||
const sourceColors = !themeData.themeEngineVersion
|
||||
? colors2to3(themeData.colors)
|
||||
: themeData.colors || themeData
|
||||
|
||||
const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
|
||||
const mod = isLightOnDark ? 1 : -1
|
||||
@ -283,9 +285,12 @@ export const DEFAULT_SHADOWS = {
|
||||
}]
|
||||
}
|
||||
export const generateShadows = (input, colors, mod) => {
|
||||
const inputShadows = !input.themeEngineVersion
|
||||
? shadows2to3(input.shadows)
|
||||
: input.shadows || {}
|
||||
const shadows = Object.entries({
|
||||
...DEFAULT_SHADOWS,
|
||||
...(input.shadows || {})
|
||||
...inputShadows
|
||||
}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
|
||||
const newShadow = shadowDefs.reduce((shadowAcc, def) => [
|
||||
...shadowAcc,
|
||||
@ -374,6 +379,46 @@ export const getThemes = () => {
|
||||
}, {})
|
||||
})
|
||||
}
|
||||
export const colors2to3 = (colors) => {
|
||||
return Object.entries(colors).reduce((acc, [slotName, color]) => {
|
||||
const btnStates = ['', 'Pressed', 'Disabled', 'Toggled']
|
||||
const btnPositions = ['', 'Panel', 'TopBar']
|
||||
switch (slotName) {
|
||||
case 'lightBg':
|
||||
return { ...acc, highlight: color }
|
||||
case 'btn':
|
||||
return {
|
||||
...acc,
|
||||
...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {})
|
||||
}
|
||||
case 'btnText':
|
||||
console.log(
|
||||
btnPositions
|
||||
.map(position => btnStates.map(state => state + position))
|
||||
.flat()
|
||||
.reduce(
|
||||
(statePositionAcc, statePosition) =>
|
||||
({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
|
||||
, {}
|
||||
)
|
||||
)
|
||||
return {
|
||||
...acc,
|
||||
...btnPositions
|
||||
.map(position => btnStates.map(state => state + position))
|
||||
.flat()
|
||||
.reduce(
|
||||
(statePositionAcc, statePosition) =>
|
||||
({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
|
||||
, {}
|
||||
)
|
||||
}
|
||||
default:
|
||||
console.log('aaa', slotName, color, acc)
|
||||
return { ...acc, [slotName]: color }
|
||||
}
|
||||
}, {})
|
||||
}
|
||||
|
||||
/**
|
||||
* This handles compatibility issues when importing v2 theme's shadows to current format
|
||||
|
@ -283,12 +283,12 @@ export const SLOT_INHERITANCE = {
|
||||
opacity: 'panel'
|
||||
},
|
||||
panelText: {
|
||||
depends: ['fgText'],
|
||||
depends: ['text'],
|
||||
layer: 'panel',
|
||||
textColor: true
|
||||
},
|
||||
panelFaint: {
|
||||
depends: ['fgText'],
|
||||
depends: ['text'],
|
||||
layer: 'panel',
|
||||
opacity: 'faint',
|
||||
textColor: true
|
||||
@ -302,7 +302,7 @@ export const SLOT_INHERITANCE = {
|
||||
// Top bar
|
||||
topBar: '--fg',
|
||||
topBarText: {
|
||||
depends: ['fgText'],
|
||||
depends: ['text'],
|
||||
layer: 'topBar',
|
||||
textColor: true
|
||||
},
|
||||
@ -313,7 +313,9 @@ export const SLOT_INHERITANCE = {
|
||||
},
|
||||
|
||||
// Tabs
|
||||
tab: '--btn',
|
||||
tab: {
|
||||
depends: ['btn']
|
||||
},
|
||||
tabText: {
|
||||
depends: ['btnText'],
|
||||
layer: 'btn',
|
||||
@ -331,7 +333,7 @@ export const SLOT_INHERITANCE = {
|
||||
opacity: 'btn'
|
||||
},
|
||||
btnText: {
|
||||
depends: ['fgText'],
|
||||
depends: ['text'],
|
||||
layer: 'btn',
|
||||
textColor: true
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user