From 8de7eabd8fdfc9f97fb262552f0cca9fd6da95eb Mon Sep 17 00:00:00 2001 From: Henry Jameson 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 },