fixed eslint, made mod work properly depending on context including in shadows

This commit is contained in:
Henry Jameson 2020-02-11 00:34:30 +02:00
parent 611da13a4b
commit 38c34b8b51
3 changed files with 49 additions and 34 deletions

View file

@ -1,6 +1,6 @@
<template>
<div class="preview-container">
<div class="underlay underlay-preview"/>
<div class="underlay underlay-preview" />
<div class="panel dummy">
<div class="panel-heading">
<div class="title">

View file

@ -1,6 +1,6 @@
import { times } from 'lodash'
import { convert } from 'chromatism'
import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js'
// While this is not used anymore right now, I left it in if we want to do custom
@ -133,8 +133,7 @@ export const generateColors = (themeData) => {
theme: {
colors: htmlColors.solid,
opacity
},
mod
}
}
}
@ -281,7 +280,18 @@ export const DEFAULT_SHADOWS = {
alpha: 1
}]
}
export const generateShadows = (input, colors, mod) => {
export const generateShadows = (input, colors) => {
// TODO this is a small hack for `mod` to work with shadows
// this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
const hackContextDict = {
button: 'btn',
panel: 'bg',
top: 'topBar',
popup: 'popover',
avatar: 'bg',
panelHeader: 'panel',
input: 'input'
}
const inputShadows = input.shadows && !input.themeEngineVersion
? shadows2to3(input.shadows)
: input.shadows || {}
@ -289,6 +299,10 @@ export const generateShadows = (input, colors, mod) => {
...DEFAULT_SHADOWS,
...inputShadows
}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
const colorSlotName = hackContextDict[slotFirstWord]
const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
const mod = isLightOnDark ? 1 : -1
const newShadow = shadowDefs.reduce((shadowAcc, def) => [
...shadowAcc,
{

View file

@ -259,13 +259,34 @@ export const computeDynamicColor = (sourceColor, getColor, mod) => {
* value and uses inheritance data to figure out color needed for the slot.
*/
export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
const value = SLOT_INHERITANCE[key]
const isObject = typeof value === 'object'
const isString = typeof value === 'string'
const sourceColor = sourceColors[key]
const variant = value.variant || value.layer || 'bg'
const isLightOnDark = relativeLuminance(colors[variant] || sourceColors[variant]) < 0.5
const value = expandSlotValue(SLOT_INHERITANCE[key])
const deps = getDependencies(key, SLOT_INHERITANCE)
const isTextColor = !!value.textColor
const variant = value.variant || value.layer
let backgroundColor = null
if (isTextColor) {
backgroundColor = alphaBlendLayers(
{ ...(colors[deps[0]] || convert(sourceColors[key] || '#FF00FF').rgb) },
getLayers(
getLayerSlot(key) || 'bg',
variant || 'bg',
getOpacitySlot(variant),
colors,
opacity
)
)
} else if (variant && variant !== key) {
backgroundColor = colors[variant] || convert(sourceColors[variant]).rgb
} else {
backgroundColor = colors.bg || convert(sourceColors.bg)
}
const isLightOnDark = relativeLuminance(backgroundColor) < 0.5
const mod = isLightOnDark ? 1 : -1
let outputColor = null
if (sourceColor) {
// Color is defined in source color
@ -280,7 +301,6 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
opacity
).slice(0, -1)
targetColor = {
// TODO: try to use alpha-blended background here
...alphaBlendLayers(
convert('#FF00FF').rgb,
layers
@ -297,43 +317,24 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
targetColor = convert(targetColor).rgb
}
outputColor = { ...targetColor }
} else if (isString && value.startsWith('#')) {
// slot: '#000000' shorthand
outputColor = convert(value).rgb
} else if (isObject && value.default) {
} else if (value.default) {
// same as above except in object form
outputColor = convert(value.default).rgb
} else {
// calculate color
const defaultColorFunc = (mod, dep) => ({ ...dep })
const deps = getDependencies(key, SLOT_INHERITANCE)
const colorFunc = (isObject && value.color) || defaultColorFunc
const colorFunc = value.color || defaultColorFunc
if (value.textColor) {
// textColor case
const bg = alphaBlendLayers(
{ ...colors[deps[0]] },
getLayers(
value.layer,
value.variant || value.layer,
getOpacitySlot(value.variant || value.layer),
colors,
opacity
)
)
const isLightOnDark = relativeLuminance(bg) > 0.5
const mod = isLightOnDark ? 1 : -1
if (value.textColor === 'bw') {
outputColor = contrastRatio(bg).rgb
outputColor = contrastRatio(backgroundColor).rgb
} else {
let color = { ...colors[deps[0]] }
if (value.color) {
color = colorFunc(mod, ...deps.map((dep) => ({ ...colors[dep] })))
}
outputColor = getTextColor(
bg,
backgroundColor,
{ ...color },
value.textColor === 'preserve'
)