1 files changed, 44 insertions, 22 deletions

diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 8196415b..91bda11e 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,4 +1,5 @@
 import { convert, brightness } from 'chromatism'
+import { flattenDeep } from 'lodash'
 import {
   alphaBlend,
   getTextColor,
@@ -20,6 +21,7 @@ import {
   normalizeCombination,
   findRules
 } from './iss_utils.js'
+import { parseCssShadow } from './css_utils.js'
 
 const DEBUG = false
 
@@ -36,7 +38,32 @@ const components = {
   ChatMessage: null
 }
 
-const findColor = (color, dynamicVars, staticVars) => {
+const findShadow = (shadows, { dynamicVars, staticVars }) => {
+  return (shadows || []).map(shadow => {
+    let targetShadow
+    if (typeof shadow === 'string') {
+      if (shadow.startsWith('$')) {
+        targetShadow = process(shadow, shadowFunctions, { findColor, findShadow }, { dynamicVars, staticVars })
+      } else if (shadow.startsWith('--')) {
+        const [variable] = shadow.split(/,/g).map(str => str.trim()) // discarding modifier since it's not supported
+        const variableSlot = variable.substring(2)
+        return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
+      } else {
+        targetShadow = parseCssShadow(shadow)
+      }
+    } else {
+      targetShadow = shadow
+    }
+
+    const shadowArray = Array.isArray(targetShadow) ? targetShadow : [targetShadow]
+    return shadowArray.map(s => ({
+      ...s,
+      color: findColor(s.color, { dynamicVars, staticVars })
+    }))
+  })
+}
+
+const findColor = (color, { dynamicVars, staticVars }) => {
   if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
   let targetColor = null
   if (color.startsWith('--')) {
@@ -76,7 +103,7 @@ const findColor = (color, dynamicVars, staticVars) => {
 
   if (color.startsWith('$')) {
     try {
-      targetColor = process(color, colorFunctions, findColor, dynamicVars, staticVars)
+      targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
     } catch (e) {
       console.error('Failure executing color function', e)
       targetColor = '#FF00FF'
@@ -89,7 +116,7 @@ const findColor = (color, dynamicVars, staticVars) => {
 const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
   const opacity = directives.textOpacity
   const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
-  const textColor = convert(findColor(intendedTextColor, dynamicVars, staticVars)).rgb
+  const textColor = convert(findColor(intendedTextColor, { dynamicVars, staticVars })).rgb
   if (opacity === null || opacity === undefined || opacity >= 1) {
     return convert(textColor).hex
   }
@@ -288,7 +315,7 @@ export const init = (extraRuleset) => {
         dynamicVars.inheritedBackground = lowerLevelBackground
         dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
 
-        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, staticVars)).rgb
+        const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
@@ -355,7 +382,7 @@ export const init = (extraRuleset) => {
 
           dynamicVars.inheritedBackground = inheritedBackground
 
-          const rgb = convert(findColor(computedDirectives.background, dynamicVars, staticVars)).rgb
+          const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
 
           if (!stacked[selector]) {
             let blend
@@ -373,21 +400,7 @@ export const init = (extraRuleset) => {
         }
 
         if (computedDirectives.shadow) {
-          dynamicVars.shadow = (computedDirectives.shadow || []).map(shadow => {
-            let targetShadow
-            if (typeof shadow === 'string') {
-              if (shadow.startsWith('$')) {
-                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, staticVars)
-              }
-            } else {
-              targetShadow = shadow
-            }
-
-            return {
-              ...targetShadow,
-              color: findColor(targetShadow.color, dynamicVars, staticVars)
-            }
-          })
+          dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
         }
 
         if (!stacked[selector]) {
@@ -403,14 +416,23 @@ export const init = (extraRuleset) => {
         const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
 
         dynamicSlots.forEach(([k, v]) => {
-          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          const [type, ...value] = v.split('|').map(x => x.trim()) // woah, Extreme!
           switch (type) {
             case 'color': {
-              const color = findColor(value, dynamicVars, staticVars)
+              const color = findColor(value[0], { dynamicVars, staticVars })
               dynamicVars[k] = color
               if (component.name === 'Root') {
                 staticVars[k.substring(2)] = color
               }
+              break
+            }
+            case 'shadow': {
+              const shadow = value
+              dynamicVars[k] = shadow
+              if (component.name === 'Root') {
+                staticVars[k.substring(2)] = shadow
+              }
+              break
             }
           }
         })