therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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