From 8de7eabd8fdfc9f97fb262552f0cca9fd6da95eb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 23:26:24 +0200
Subject: [PATCH] v2 compatibility fixes
---
src/boot/after_store.js | 2 +-
.../style_switcher/style_switcher.js | 7 ++-
src/services/color_convert/color_convert.js | 5 +-
src/services/style_setter/style_setter.js | 49 ++++++++++++++++++-
src/services/theme_data/theme_data.service.js | 12 +++--
5 files changed, 62 insertions(+), 13 deletions(-)
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 6c4f0e1b..f61e9252 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -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)
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 27df0d10..76e6cdb7 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -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
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 6b228a58..93cb1ba6 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -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) {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9610d799..b43eb0dd 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -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
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 8c114004..2cae85de 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -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
},