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

3 files changed, 49 insertions, 34 deletions

diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 5b8c3839..8afbb123 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -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">
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b9a23ad7..32102152 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -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,
       {
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index e9ed3781..7479a55e 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -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'
         )