From 332d31dc02b83d6ca06837fdfb4f663050d9effd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 30 Dec 2019 00:45:48 +0200 Subject: [PATCH] support for "transparent" color keyword --- .../style_switcher/style_switcher.js | 56 +++++++++++-------- src/services/color_convert/color_convert.js | 3 +- src/services/style_setter/style_setter.js | 50 +++++++++++------ static/themes/breezy-dark.json | 8 ++- static/themes/breezy-light.json | 5 ++ 5 files changed, 78 insertions(+), 44 deletions(-) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 602a635e..9fe1bf59 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -25,6 +25,14 @@ const v1OnlyNames = [ 'cOrange' ].map(_ => _ + 'ColorLocal') +const colorConvert = (color) => { + if (color === 'transparent') { + return color + } else { + return hex2rgb(color) + } +} + export default { data () { return { @@ -228,36 +236,36 @@ export default { // fgsfds :DDDD const fgs = { - text: hex2rgb(colors.text), - panelText: hex2rgb(colors.panelText), - panelLink: hex2rgb(colors.panelLink), - btnText: hex2rgb(colors.btnText), - topBarText: hex2rgb(colors.topBarText), - inputText: hex2rgb(colors.inputText), + text: colorConvert(colors.text), + panelText: colorConvert(colors.panelText), + panelLink: colorConvert(colors.panelLink), + btnText: colorConvert(colors.btnText), + topBarText: colorConvert(colors.topBarText), + inputText: colorConvert(colors.inputText), - link: hex2rgb(colors.link), - topBarLink: hex2rgb(colors.topBarLink), + link: colorConvert(colors.link), + topBarLink: colorConvert(colors.topBarLink), - red: hex2rgb(colors.cRed), - green: hex2rgb(colors.cGreen), - blue: hex2rgb(colors.cBlue), - orange: hex2rgb(colors.cOrange) + red: colorConvert(colors.cRed), + green: colorConvert(colors.cGreen), + blue: colorConvert(colors.cBlue), + orange: colorConvert(colors.cOrange) } const bgs = { - bg: hex2rgb(colors.bg), - underlay: hex2rgb(colors.underlay), - btn: hex2rgb(colors.btn), - panel: hex2rgb(colors.panel), - topBar: hex2rgb(colors.topBar), - input: hex2rgb(colors.input), - alertError: hex2rgb(colors.alertError), - alertWarning: hex2rgb(colors.alertWarning), - badgeNotification: hex2rgb(colors.badgeNotification) + bg: colorConvert(colors.bg), + underlay: colorConvert(colors.underlay), + btn: colorConvert(colors.btn), + panel: colorConvert(colors.panel), + topBar: colorConvert(colors.topBar), + input: colorConvert(colors.input), + alertError: colorConvert(colors.alertError), + alertWarning: colorConvert(colors.alertWarning), + badgeNotification: colorConvert(colors.badgeNotification) } const bg = [bgs.bg, opacity.bg] - const underlay = [bgs.underlay, opacity.underlay] + const underlay = [bgs.underlay || colorConvert('#000000'), opacity.underlay] const panel = [underlay, bg] @@ -443,7 +451,7 @@ export default { */ normalizeLocalState (originalInput, version = 0) { let input - if (typeof originalInput.v3compat !== undefined) { + if (typeof originalInput.v3compat !== 'undefined') { version = 3 input = merge(originalInput, originalInput.v3compat) } else { @@ -574,7 +582,7 @@ export default { this.previewColors = generateColors({ v3compat: this.currentCompat, opacity: this.currentOpacity, - colors: this.currentColors, + colors: this.currentColors }) } catch (e) { console.warn(e) diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 757a36bd..32b4d50e 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -7,7 +7,8 @@ const rgb2hex = (r, g, b) => { if (r === null || typeof r === 'undefined') { return undefined } - if (r[0] === '#') { + // TODO: clean up this mess + if (r[0] === '#' || r === 'transparent') { return r } if (typeof r === 'object') { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 8740fc55..df22f94f 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -170,23 +170,32 @@ export const generateCompat = (input) => { } } -const generateColors = (input) => { +const generateColors = (themeData) => { const colors = {} - const opacity = Object.assign({ + const rawOpacity = Object.assign({ alert: 0.5, input: 0.5, faint: 0.5, underlay: 0.15 - }, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => { + }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => { if (typeof v !== 'undefined') { acc[k] = v } return acc }, {})) - const inputColors = input.colors || input + const inputColors = themeData.colors || themeData - const compat = input.v3compat || {} + const transparentsOpacity = Object.entries(inputColors).reduce((acc, [k, v]) => { + if (v === 'transparent') { + acc[k] = 0 + } + return acc + }, {}) + + const opacity = { ...rawOpacity, ...transparentsOpacity } + + const compat = themeData.v3compat || {} const compatColors = Object.entries(compat.colors || {}).reduce((acc, [key, value]) => { const newVal = value === null ? undefined : value return { ...acc, [key]: newVal } @@ -196,15 +205,22 @@ const generateColors = (input) => { if (typeof v === 'object') { acc[k] = v } else { - acc[k] = hex2rgb(v) + let value = v + if (v === 'transparent') { + value = '#FF00FF' + } + acc[k] = hex2rgb(value) } return acc }, {}) - const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l + colors.bg = col.bg + colors.underlay = col.underlay || hex2rgb('#000000') + colors.text = col.text + + const isLightOnDark = convert(colors.bg).hsl.l < convert(colors.text).hsl.l const mod = isLightOnDark ? 1 : -1 - colors.text = col.text colors.lightText = brightness(20 * mod, colors.text).rgb colors.accent = col.accent || col.link @@ -212,17 +228,15 @@ const generateColors = (input) => { colors.faint = col.faint || Object.assign({}, col.text) - colors.bg = col.bg colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb - const underlay = [col.underlay, opacity.underlay] + const underlay = [colors.underlay, opacity.underlay] const fg = [col.fg, opacity.fg] const bg = [col.bg, opacity.bg] colors.fg = col.fg colors.fgText = col.fgText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, fg]), colors.text) colors.fgLink = col.fgLink || getTextColor(alphaBlendLayers(colors.link, [underlay, bg, fg]), colors.link, true) - colors.underlay = col.underlay || hex2rgb('#000000') colors.border = col.border || brightness(2 * mod, colors.fg).rgb @@ -231,8 +245,8 @@ const generateColors = (input) => { colors.btnText = col.btnText || getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, fg, btn]), colors.fgText) colors.input = col.input || Object.assign({}, col.fg) - const inputCol = [colors.input, opacity.input] - colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, inputCol]), colors.lightText) + const input = [colors.input, opacity.input] + colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, input]), colors.lightText) colors.panel = col.panel || Object.assign({}, col.fg) const panel = [colors.panel, opacity.panel] @@ -256,12 +270,14 @@ const generateColors = (input) => { colors.cOrange = col.cOrange || hex2rgb('#E3FF00') colors.alertError = col.alertError || Object.assign({}, colors.cRed) - colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text) - colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText) + const alertError = [colors.alertError, opacity.alert] + colors.alertErrorText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text) + colors.alertErrorPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText) colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange) - colors.alertWarningText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.bg), colors.text) - colors.alertWarningPanelText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.panel), colors.panelText) + const alertWarning = [colors.alertWarning, opacity.alert] + colors.alertWarningText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text) + colors.alertWarningPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText) colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed) colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json index 7ce41384..0ed55184 100644 --- a/static/themes/breezy-dark.json +++ b/static/themes/breezy-dark.json @@ -107,8 +107,12 @@ }, "fonts": {}, "opacity": { - "input": "1", - "panel": "0" + "input": "1" + }, + "v3compat": { + "colors": { + "panel": "transparent" + } }, "colors": { "bg": "#31363b", diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json index dc43f90e..5db185dd 100644 --- a/static/themes/breezy-light.json +++ b/static/themes/breezy-light.json @@ -109,6 +109,11 @@ "opacity": { "input": "1" }, + "v3compat": { + "colors": { + "panel": "transparent" + } + }, "colors": { "bg": "#eff0f1", "text": "#232627",