Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

support for "transparent" color keyword

Browse Source
This commit is contained in:
Henry Jameson 2019-12-30 00:45:48 +02:00
parent 6e11924c27
commit 332d31dc02
5 changed files with 78 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/style_switcher/style_switcher.js
View File

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

3
src/services/color_convert/color_convert.js
View File

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

50
src/services/style_setter/style_setter.js
View File

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

8
static/themes/breezy-dark.json
View File

@ -107,8 +107,12 @@
},
"fonts": {},
"opacity": {
"input": "1",
"panel": "0"
"input": "1"
},
"v3compat": {
"colors": {
"panel": "transparent"
}
},
"colors": {
"bg": "#31363b",

5
static/themes/breezy-light.json
View File

@ -109,6 +109,11 @@
"opacity": {
"input": "1"
},
"v3compat": {
"colors": {
"panel": "transparent"
}
},
"colors": {
"bg": "#eff0f1",
"text": "#232627",