Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

simplified definition for text color by accounting for layers automatically,

Browse source 
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
1 changed files with 69 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/services/style_setter/style_setter.js
View file

@ -65,12 +65,12 @@ export const SLOT_INHERITANCE = {
// Foreground
fgText: {
depends: ['text', 'fg', 'underlay', 'bg'],
depends: ['text'],
layer: 'fg',
textColor: true
},
fgLink: {
depends: ['link', 'fg', 'underlay', 'bg'],
depends: ['link'],
layer: 'fg',
textColor: 'preserve'
},
@ -78,17 +78,17 @@ export const SLOT_INHERITANCE = {
// Panel header
panel: '--fg',
panelText: {
depends: ['fgText', 'panel'],
depends: ['fgText'],
layer: 'panel',
textColor: true
},
panelFaint: {
depends: ['fgText', 'panel'],
depends: ['fgText'],
layer: 'panel',
textColor: true
},
panelLink: {
depends: ['fgLink', 'panel'],
depends: ['fgLink'],
layer: 'panel',
textColor: 'preserve'
},
@ -96,12 +96,12 @@ export const SLOT_INHERITANCE = {
// Top bar
topBar: '--fg',
topBarText: {
depends: ['fgText', 'topBar'],
depends: ['fgText'],
layer: 'topBar',
textColor: true
},
topBarLink: {
depends: ['fgLink', 'topBar'],
depends: ['fgLink'],
layer: 'topBar',
textColor: 'preserve'
},
@ -109,17 +109,17 @@ export const SLOT_INHERITANCE = {
// Buttons
btn: '--fg',
btnText: {
depends: ['fgText', 'btn'],
depends: ['fgText'],
layer: 'btn'
},
btnPanelText: {
depends: ['panelText', 'btn', 'panel'],
depends: ['panelText'],
layer: 'btnPanel',
variant: 'btn',
textColor: true
},
btnTopBarText: {
depends: ['topBarText', 'btn', 'topBar'],
depends: ['topBarText'],
layer: 'btnTopBar',
variant: 'btn',
textColor: true
@ -128,18 +128,18 @@ export const SLOT_INHERITANCE = {
// Input fields
input: '--fg',
inputText: {
depends: ['text', 'input'],
depends: ['text'],
layer: 'input',
textColor: true
},
inputPanelText: {
depends: ['panelText', 'input', 'panel'],
depends: ['panelText'],
layer: 'inputPanel',
variant: 'input',
textColor: true
},
inputTopbarText: {
depends: ['topBarText', 'input', 'topBar'],
depends: ['topBarText'],
layer: 'inputTopBar',
variant: 'input',
textColor: true
@ -153,7 +153,7 @@ export const SLOT_INHERITANCE = {
textColor: true
},
alertErrorPanelText: {
depends: ['panelText', 'alertError', 'panel'],
depends: ['panelText', 'alertError'],
layer: 'alertPanel',
variant: 'alertError',
textColor: true
@ -167,7 +167,7 @@ export const SLOT_INHERITANCE = {
textColor: true
},
alertWarningPanelText: {
depends: ['panelText', 'alertWarning', 'panel'],
depends: ['panelText', 'alertWarning'],
layer: 'alertPanel',
variant: 'alertWarning',
textColor: true
@ -178,23 +178,47 @@ export const SLOT_INHERITANCE = {
depends: ['text', 'badgeNotification'],
layer: 'badge',
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 data = inheritance[key]
if (typeof data === 'string' && data.startsWith('--')) {
return [data.substring(2)]
} else {
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)) {
return depends
} else if (typeof depends === 'object') {
return [depends]
return [...depends, ...layerDeps]
} else {
return []
return [...layerDeps]
}
}
}
@ -241,25 +265,6 @@ export const topoSort = (
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
// 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.
@ -318,6 +323,8 @@ const getTextColor = function (bg, text, preserve) {
const bgIsLight = convert(bg).hsl.l > 50
const textIsLight = convert(text).hsl.l > 50
console.log(bgIsLight, textIsLight)
if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
const result = Object.assign(base, invertLightness(text).rgb)
@ -468,10 +475,7 @@ const generateColors = (themeData) => {
const colorFunc = (isObject && value.color) || defaultColorFunc
if (value.textColor) {
return {
...acc,
[key]: getTextColor(
alphaBlendLayers(
const bg = alphaBlendLayers(
{ ...acc[deps[0]] },
getLayers(
value.layer,
@ -479,11 +483,22 @@ const generateColors = (themeData) => {
acc,
opacity
)
),
)
if (value.textColor === 'bw') {
return {
...acc,
[key]: contrastRatio(bg)
}
} else {
return {
...acc,
[key]: getTextColor(
bg,
{ ...acc[deps[0]] },
value.textColor === 'preserve'
)
}
}
} else {
console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] })))
return {