@symbo.ls/scratch 2.11.331 → 2.11.338

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.11.331",
+  "version": "2.11.338",
   "files": [
     "src",
     "dist"
@@ -29,5 +29,5 @@
     "@symbo.ls/utils": "latest",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "c1ce82619a9c90dcb12862a1cef1d7fc10b8718b"
+  "gitHead": "f8b3e371bac70f5de8e4bfe27887819bfbb0bfc9"
 }

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
@@ -27,9 +27,15 @@ export const colorStringToRgbaArray = color => {
       const flag = 'rgb(1, 2, 3)'
       elem.style.color = flag
       // color set failed - some monstrous css rule is probably taking over the color of our object
-      if (elem.style.color !== flag) return
+      if (elem.style.color !== flag) {
+        document.body.removeChild(elem)
+        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 === '') {
+        document.body.removeChild(elem)
+        return [0, 0, 0, 0] // color parse failed
+      }
       color = window.getComputedStyle(elem).color
       document.body.removeChild(elem)
     }
@@ -41,8 +47,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) => {