simplified definition for text color by accounting for layers automatically,

fixed badge notification text color by adding 'bw' option for textColor
This commit is contained in:
Henry Jameson 2020-01-11 23:07:41 +02:00
parent cce64077b5
commit 38f2b969e4

View file

@ -65,12 +65,12 @@ export const SLOT_INHERITANCE = {
// Foreground // Foreground
fgText: { fgText: {
depends: ['text', 'fg', 'underlay', 'bg'], depends: ['text'],
layer: 'fg', layer: 'fg',
textColor: true textColor: true
}, },
fgLink: { fgLink: {
depends: ['link', 'fg', 'underlay', 'bg'], depends: ['link'],
layer: 'fg', layer: 'fg',
textColor: 'preserve' textColor: 'preserve'
}, },
@ -78,17 +78,17 @@ export const SLOT_INHERITANCE = {
// Panel header // Panel header
panel: '--fg', panel: '--fg',
panelText: { panelText: {
depends: ['fgText', 'panel'], depends: ['fgText'],
layer: 'panel', layer: 'panel',
textColor: true textColor: true
}, },
panelFaint: { panelFaint: {
depends: ['fgText', 'panel'], depends: ['fgText'],
layer: 'panel', layer: 'panel',
textColor: true textColor: true
}, },
panelLink: { panelLink: {
depends: ['fgLink', 'panel'], depends: ['fgLink'],
layer: 'panel', layer: 'panel',
textColor: 'preserve' textColor: 'preserve'
}, },
@ -96,12 +96,12 @@ export const SLOT_INHERITANCE = {
// Top bar // Top bar
topBar: '--fg', topBar: '--fg',
topBarText: { topBarText: {
depends: ['fgText', 'topBar'], depends: ['fgText'],
layer: 'topBar', layer: 'topBar',
textColor: true textColor: true
}, },
topBarLink: { topBarLink: {
depends: ['fgLink', 'topBar'], depends: ['fgLink'],
layer: 'topBar', layer: 'topBar',
textColor: 'preserve' textColor: 'preserve'
}, },
@ -109,17 +109,17 @@ export const SLOT_INHERITANCE = {
// Buttons // Buttons
btn: '--fg', btn: '--fg',
btnText: { btnText: {
depends: ['fgText', 'btn'], depends: ['fgText'],
layer: 'btn' layer: 'btn'
}, },
btnPanelText: { btnPanelText: {
depends: ['panelText', 'btn', 'panel'], depends: ['panelText'],
layer: 'btnPanel', layer: 'btnPanel',
variant: 'btn', variant: 'btn',
textColor: true textColor: true
}, },
btnTopBarText: { btnTopBarText: {
depends: ['topBarText', 'btn', 'topBar'], depends: ['topBarText'],
layer: 'btnTopBar', layer: 'btnTopBar',
variant: 'btn', variant: 'btn',
textColor: true textColor: true
@ -128,18 +128,18 @@ export const SLOT_INHERITANCE = {
// Input fields // Input fields
input: '--fg', input: '--fg',
inputText: { inputText: {
depends: ['text', 'input'], depends: ['text'],
layer: 'input', layer: 'input',
textColor: true textColor: true
}, },
inputPanelText: { inputPanelText: {
depends: ['panelText', 'input', 'panel'], depends: ['panelText'],
layer: 'inputPanel', layer: 'inputPanel',
variant: 'input', variant: 'input',
textColor: true textColor: true
}, },
inputTopbarText: { inputTopbarText: {
depends: ['topBarText', 'input', 'topBar'], depends: ['topBarText'],
layer: 'inputTopBar', layer: 'inputTopBar',
variant: 'input', variant: 'input',
textColor: true textColor: true
@ -153,7 +153,7 @@ export const SLOT_INHERITANCE = {
textColor: true textColor: true
}, },
alertErrorPanelText: { alertErrorPanelText: {
depends: ['panelText', 'alertError', 'panel'], depends: ['panelText', 'alertError'],
layer: 'alertPanel', layer: 'alertPanel',
variant: 'alertError', variant: 'alertError',
textColor: true textColor: true
@ -167,7 +167,7 @@ export const SLOT_INHERITANCE = {
textColor: true textColor: true
}, },
alertWarningPanelText: { alertWarningPanelText: {
depends: ['panelText', 'alertWarning', 'panel'], depends: ['panelText', 'alertWarning'],
layer: 'alertPanel', layer: 'alertPanel',
variant: 'alertWarning', variant: 'alertWarning',
textColor: true textColor: true
@ -178,23 +178,47 @@ export const SLOT_INHERITANCE = {
depends: ['text', 'badgeNotification'], depends: ['text', 'badgeNotification'],
layer: 'badge', layer: 'badge',
variant: 'badgeNotification', variant: 'badgeNotification',
textColor: true textColor: 'bw'
} }
} }
export const getLayersArray = (layer, data = LAYERS) => {
let array = [layer]
let parent = data[layer]
while (parent) {
array.unshift(parent)
parent = data[parent]
}
return array
}
export const getLayers = (layer, variant = layer, colors, opacity) => {
return getLayersArray(layer).map((currentLayer) => ([
currentLayer === layer
? colors[variant]
: colors[currentLayer],
opacity[currentLayer]
]))
}
const getDependencies = (key, inheritance) => { const getDependencies = (key, inheritance) => {
const data = inheritance[key] const data = inheritance[key]
if (typeof data === 'string' && data.startsWith('--')) { if (typeof data === 'string' && data.startsWith('--')) {
return [data.substring(2)] return [data.substring(2)]
} else { } else {
if (data === null) return [] if (data === null) return []
const { depends } = data const { depends, layer, variant } = data
const layerDeps = layer
? getLayersArray(layer).map(currentLayer => {
return currentLayer === layer
? variant || layer
: currentLayer
})
: []
if (Array.isArray(depends)) { if (Array.isArray(depends)) {
return depends return [...depends, ...layerDeps]
} else if (typeof depends === 'object') {
return [depends]
} else { } else {
return [] return [...layerDeps]
} }
} }
} }
@ -241,25 +265,6 @@ export const topoSort = (
export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE) export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE)
export const getLayersArray = (layer, data = LAYERS) => {
let array = [layer]
let parent = data[layer]
while (parent) {
array.unshift(parent)
parent = data[parent]
}
return array
}
export const getLayers = (layer, variant = layer, colors, opacity) => {
return getLayersArray(layer).map((currentLayer) => ([
currentLayer === layer
? colors[variant]
: colors[currentLayer],
opacity[currentLayer]
]))
}
// While this is not used anymore right now, I left it in if we want to do custom // While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct // styles that aren't just colors, so user can pick from a few different distinct
// styles as well as set their own colors in the future. // styles as well as set their own colors in the future.
@ -318,6 +323,8 @@ const getTextColor = function (bg, text, preserve) {
const bgIsLight = convert(bg).hsl.l > 50 const bgIsLight = convert(bg).hsl.l > 50
const textIsLight = convert(text).hsl.l > 50 const textIsLight = convert(text).hsl.l > 50
console.log(bgIsLight, textIsLight)
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) { if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {} const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
const result = Object.assign(base, invertLightness(text).rgb) const result = Object.assign(base, invertLightness(text).rgb)
@ -468,10 +475,7 @@ const generateColors = (themeData) => {
const colorFunc = (isObject && value.color) || defaultColorFunc const colorFunc = (isObject && value.color) || defaultColorFunc
if (value.textColor) { if (value.textColor) {
return { const bg = alphaBlendLayers(
...acc,
[key]: getTextColor(
alphaBlendLayers(
{ ...acc[deps[0]] }, { ...acc[deps[0]] },
getLayers( getLayers(
value.layer, value.layer,
@ -479,11 +483,22 @@ const generateColors = (themeData) => {
acc, acc,
opacity opacity
) )
), )
if (value.textColor === 'bw') {
return {
...acc,
[key]: contrastRatio(bg)
}
} else {
return {
...acc,
[key]: getTextColor(
bg,
{ ...acc[deps[0]] }, { ...acc[deps[0]] },
value.textColor === 'preserve' value.textColor === 'preserve'
) )
} }
}
} else { } else {
console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] }))) console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] })))
return { return {