shadow slots work + minor fixes

4 files changed, 99 insertions, 38 deletions

diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 8395f6a7..412accf9 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -2,6 +2,26 @@ import { convert } from 'chromatism'
 
 import { rgba2css } from '../color_convert/color_convert.js'
 
+export const parseCssShadow = (text) => {
+  const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
+  const inset = /inset/.exec(text)?.[0]
+  const color = text.replace(dimensions, '').replace(inset, '')
+
+  const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
+  const isInset = inset?.trim() === 'inset'
+  console.log(color.trim())
+  const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
+
+  return {
+    x,
+    y,
+    blur,
+    spread,
+    inset: isInset,
+    color: colorString
+  }
+}
+
 export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
 
 export const getCssShadow = (input, usesDropShadow) => {
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 743bc386..b367af36 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -100,6 +100,8 @@ export const temporary = new Set([
 export const temporaryColors = {}
 
 export const convertTheme2To3 = (data) => {
+  data.colors.accent = data.colors.accent || data.colors.link
+  data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
     basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
@@ -111,7 +113,8 @@ export const convertTheme2To3 = (data) => {
 
   const convertRadii = () => {
     const newRules = []
-    radiiKeys.forEach(key => {
+    Object.keys(data.radii).forEach(key => {
+      if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
       const originalRadius = data.radii[key]
       const rule = {}
 
@@ -150,13 +153,17 @@ export const convertTheme2To3 = (data) => {
         roundness: originalRadius
       }
       newRules.push(rule)
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+      }
     })
     return newRules
   }
 
   const convertShadows = () => {
     const newRules = []
-    shadowsKeys.forEach(key => {
+    Object.keys(data.shadows).forEach(key => {
+      if (!shadowsKeys.has(key)) return
       const originalShadow = data.shadows[key]
       const rule = {}
 
@@ -205,6 +212,10 @@ export const convertTheme2To3 = (data) => {
       if (key === 'buttonPressed') {
         newRules.push({ ...rule, state: ['toggled'] })
       }
+
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+      }
     })
     return newRules
   }
@@ -234,10 +245,13 @@ export const convertTheme2To3 = (data) => {
       rule.component = 'ChatMessage'
     } else if (prefix === 'poll') {
       rule.component = 'PollGraph'
+    } else if (prefix === 'btn') {
+      rule.component = 'Button'
     } else {
       rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
     }
     return keys.map((key) => {
+      if (!data.colors[key]) return null
       const leftoverKey = key.replace(prefix, '')
       const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
       const last = parts.slice(-1)[0]
@@ -335,12 +349,17 @@ export const convertTheme2To3 = (data) => {
           newRule.variant = variantArray[0].toLowerCase()
         }
       }
-      console.log(key, newRule)
-      return newRule
+
+      if (newRule.component === 'Button') {
+        console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
+        return [newRule, { ...newRule, component: 'ScrollbarElement' }]
+      } else {
+        return [newRule]
+      }
     })
   })
 
-  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
+  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
 
   return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
 }
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
index 2324e121..2715c827 100644
--- a/src/services/theme_data/theme3_slot_functions.js
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -1,7 +1,7 @@
 import { convert, brightness } from 'chromatism'
 import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
 
-export const process = (text, functions, findColor, dynamicVars, staticVars) => {
+export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
   const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
   const args = argsString.split(/,/g).map(a => a.trim())
 
@@ -9,27 +9,27 @@ export const process = (text, functions, findColor, dynamicVars, staticVars) =>
   if (args.length < func.argsNeeded) {
     throw new Error(`$${funcName} requires at least ${func.argsNeeded} arguments, but ${args.length} were provided`)
   }
-  return func.exec(args, findColor, dynamicVars, staticVars)
+  return func.exec(args, { findColor, findShadow }, { dynamicVars, staticVars })
 }
 
 export const colorFunctions = {
   alpha: {
     argsNeeded: 2,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [color, amountArg] = args
 
-      const colorArg = convert(findColor(color, dynamicVars, staticVars)).rgb
+      const colorArg = convert(findColor(color, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
       return { ...colorArg, a: amount }
     }
   },
   blend: {
     argsNeeded: 3,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [backgroundArg, amountArg, foregroundArg] = args
 
-      const background = convert(findColor(backgroundArg, dynamicVars, staticVars)).rgb
-      const foreground = convert(findColor(foregroundArg, dynamicVars, staticVars)).rgb
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
 
       return alphaBlend(background, amount, foreground)
@@ -37,10 +37,10 @@ export const colorFunctions = {
   },
   mod: {
     argsNeeded: 2,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [colorArg, amountArg] = args
 
-      const color = convert(findColor(colorArg, dynamicVars, staticVars)).rgb
+      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
 
       const effectiveBackground = dynamicVars.lowerLevelBackground
@@ -54,7 +54,7 @@ export const colorFunctions = {
 export const shadowFunctions = {
   borderSide: {
     argsNeeded: 3,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }) => {
       const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args
 
       const width = Number(widthArg)
@@ -86,7 +86,7 @@ export const shadowFunctions = {
             break
         }
       })
-      return targetShadow
+      return [targetShadow]
     }
   }
 }
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
             }
           }
         })