v2 compatibility fixes

This commit is contained in:
Henry Jameson 2020-01-22 23:26:24 +02:00
parent c7f42b7799
commit 8de7eabd8f
5 changed files with 62 additions and 13 deletions

View file

@ -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)

View file

@ -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

View file

@ -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) {

View file

@ -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

View file

@ -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
},