@symbo.ls/scratch 2.11.331 → 2.11.337

package/src/system/color.js

@@ -87,7 +87,17 @@ export const getMediaColor = (value, globalTheme, config) => {
 export const setColor = (val, key, suffix) => {
   const CONFIG = getActiveConfig()
 
-  if (isString(val) && val.slice(0, 2) === '--') val = getColor(val.slice(2))
+  if (isString(val) && val.slice(0, 2) === '--') {
+    val = getColor(val.slice(2))
+    if (!(
+      val.includes('rgb') ||
+      val.includes('var') ||
+      val.includes('#')
+    )) {
+      if (CONFIG.verbose) console.warn(val, '- referred but does not exist')
+      val = val.split(' ')[0]
+    }
+  }
 
   if (isArray(val)) {
     return {
@@ -109,7 +119,8 @@ export const setColor = (val, key, suffix) => {
   }
 
   const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : '')
-  const [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val)
+  const colorArr = colorStringToRgbaArray(val.value || val)
+  const [r, g, b, a = 1] = colorArr
   const alpha = parseFloat(a.toFixed(2))
   const rgb = `${r}, ${g}, ${b}`
   const value = `rgba(${rgb}, ${alpha})`

package/src/utils/color.js

@@ -5,7 +5,7 @@ import { isString, isNumber } from '@domql/utils'
 const ENV = process.env.NODE_ENV
 
 export const colorStringToRgbaArray = color => {
-  if (color === '') return
+  if (color === '') return [0, 0, 0, 0]
   if (color.toLowerCase() === 'transparent') return [0, 0, 0, 0]
 
   // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
@@ -29,7 +29,7 @@ export const colorStringToRgbaArray = color => {
       // color set failed - some monstrous css rule is probably taking over the color of our object
       if (elem.style.color !== flag) return
       elem.style.color = color
-      if (elem.style.color === flag || elem.style.color === '') return // color parse failed
+      if (elem.style.color === flag || elem.style.color === '') return [0, 0, 0, 0] // color parse failed
       color = window.getComputedStyle(elem).color
       document.body.removeChild(elem)
     }
@@ -41,8 +41,7 @@ export const colorStringToRgbaArray = color => {
     return color.match(/[\.\d]+/g).map(a => +a) // eslint-disable-line
   }
 
-  // TODO: fix this
-  return []
+  return [0, 0, 0, 0]
 }
 
 export const mixTwoColors = (colorA, colorB, range = 0.5) => {