@symbo.ls/scratch 2.11.224 → 2.11.226

package/dist/cjs/index.js

@@ -1630,8 +1630,10 @@ var opacify = (color, opacity) => {
   return `rgba(${arr})`;
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -3123,10 +3125,22 @@ var transformTextStroke = (stroke) => {
     return v;
   }).join(" ");
 };
-var transformShadow = (sh, globalTheme) => {
-  return sh.split(",").map((shadow) => getShadow(shadow, globalTheme)).join(",");
-};
-var transformBoxShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
+var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
+var transformBoxShadow = (shadows) => shadows.split("|").map((shadow) => {
+  return shadow.split(", ").map((v) => {
+    v = v.trim();
+    if (v.slice(0, 2) === "--")
+      return `var(${v})`;
+    if (getColor(v).length > 2)
+      return getColor(v);
+    if (v.includes("px") || v.slice(-2) === "em")
+      return v;
+    const arr = v.split(" ");
+    if (!arr.length)
+      return v;
+    return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
+  }).join(" ");
+}).join(",");
 var transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG2 = getActiveConfig();
   return backgroundImage.split(", ").map((v) => {

package/dist/cjs/set.js

@@ -1668,8 +1668,10 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils2.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils2.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils2.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);

package/dist/cjs/system/color.js

@@ -1659,8 +1659,10 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils2.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils2.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils2.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);

package/dist/cjs/system/index.js

@@ -1686,8 +1686,10 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils2.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils2.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils2.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);

package/dist/cjs/system/shadow.js

@@ -1584,6 +1584,43 @@ var import_utils9 = __toESM(require_cjs(), 1);
 // src/utils/color.js
 var import_globals = __toESM(require_cjs2(), 1);
 var import_utils2 = __toESM(require_cjs(), 1);
+var colorStringToRgbaArray = (color) => {
+  if (color === "")
+    return;
+  if (color.toLowerCase() === "transparent")
+    return [0, 0, 0, 0];
+  if (color[0] === "#") {
+    if (color.length < 7) {
+      color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
+    }
+    return [
+      parseInt(color.substr(1, 2), 16),
+      parseInt(color.substr(3, 2), 16),
+      parseInt(color.substr(5, 2), 16),
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+    ];
+  }
+  if (color.indexOf("rgb") === -1) {
+    if (import_globals.document && import_globals.window) {
+      const elem = import_globals.document.body.appendChild(import_globals.document.createElement("fictum"));
+      const flag = "rgb(1, 2, 3)";
+      elem.style.color = flag;
+      if (elem.style.color !== flag)
+        return;
+      elem.style.color = color;
+      if (elem.style.color === flag || elem.style.color === "")
+        return;
+      color = import_globals.window.getComputedStyle(elem).color;
+      import_globals.document.body.removeChild(elem);
+    }
+  }
+  if (color.indexOf("rgb") === 0) {
+    if (color.indexOf("rgba") === -1)
+      color = `${color}, 1`;
+    return color.match(/[\.\d]+/g).map((a) => +a);
+  }
+  return [];
+};
 var hexToRgbArray = (hex, alpha = 1) => {
   const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
   return [r, g, b];
@@ -1622,8 +1659,10 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils2.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils2.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils2.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);

package/dist/cjs/system/theme.js

@@ -1586,6 +1586,43 @@ var getActiveConfig = (def) => {
 // src/utils/color.js
 var import_globals = __toESM(require_cjs2(), 1);
 var import_utils2 = __toESM(require_cjs(), 1);
+var colorStringToRgbaArray = (color) => {
+  if (color === "")
+    return;
+  if (color.toLowerCase() === "transparent")
+    return [0, 0, 0, 0];
+  if (color[0] === "#") {
+    if (color.length < 7) {
+      color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
+    }
+    return [
+      parseInt(color.substr(1, 2), 16),
+      parseInt(color.substr(3, 2), 16),
+      parseInt(color.substr(5, 2), 16),
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+    ];
+  }
+  if (color.indexOf("rgb") === -1) {
+    if (import_globals.document && import_globals.window) {
+      const elem = import_globals.document.body.appendChild(import_globals.document.createElement("fictum"));
+      const flag = "rgb(1, 2, 3)";
+      elem.style.color = flag;
+      if (elem.style.color !== flag)
+        return;
+      elem.style.color = color;
+      if (elem.style.color === flag || elem.style.color === "")
+        return;
+      color = import_globals.window.getComputedStyle(elem).color;
+      import_globals.document.body.removeChild(elem);
+    }
+  }
+  if (color.indexOf("rgb") === 0) {
+    if (color.indexOf("rgba") === -1)
+      color = `${color}, 1`;
+    return color.match(/[\.\d]+/g).map((a) => +a);
+  }
+  return [];
+};
 var hexToRgbArray = (hex, alpha = 1) => {
   const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
   return [r, g, b];
@@ -1624,8 +1661,10 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils2.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils2.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils2.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);

package/dist/cjs/transforms/index.js

@@ -1592,6 +1592,43 @@ var import_utils9 = __toESM(require_cjs(), 1);
 // src/utils/color.js
 var import_globals = __toESM(require_cjs2(), 1);
 var import_utils2 = __toESM(require_cjs(), 1);
+var colorStringToRgbaArray = (color) => {
+  if (color === "")
+    return;
+  if (color.toLowerCase() === "transparent")
+    return [0, 0, 0, 0];
+  if (color[0] === "#") {
+    if (color.length < 7) {
+      color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : "");
+    }
+    return [
+      parseInt(color.substr(1, 2), 16),
+      parseInt(color.substr(3, 2), 16),
+      parseInt(color.substr(5, 2), 16),
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+    ];
+  }
+  if (color.indexOf("rgb") === -1) {
+    if (import_globals.document && import_globals.window) {
+      const elem = import_globals.document.body.appendChild(import_globals.document.createElement("fictum"));
+      const flag = "rgb(1, 2, 3)";
+      elem.style.color = flag;
+      if (elem.style.color !== flag)
+        return;
+      elem.style.color = color;
+      if (elem.style.color === flag || elem.style.color === "")
+        return;
+      color = import_globals.window.getComputedStyle(elem).color;
+      import_globals.document.body.removeChild(elem);
+    }
+  }
+  if (color.indexOf("rgb") === 0) {
+    if (color.indexOf("rgba") === -1)
+      color = `${color}, 1`;
+    return color.match(/[\.\d]+/g).map((a) => +a);
+  }
+  return [];
+};
 var hexToRgbArray = (hex, alpha = 1) => {
   const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
   return [r, g, b];
@@ -1630,8 +1667,10 @@ var getColorShade = (col, amt) => {
   return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils2.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils2.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils2.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);
@@ -2079,10 +2118,22 @@ var transformTextStroke = (stroke) => {
     return v;
   }).join(" ");
 };
-var transformShadow = (sh, globalTheme) => {
-  return sh.split(",").map((shadow) => getShadow(shadow, globalTheme)).join(",");
-};
-var transformBoxShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
+var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
+var transformBoxShadow = (shadows) => shadows.split("|").map((shadow) => {
+  return shadow.split(", ").map((v) => {
+    v = v.trim();
+    if (v.slice(0, 2) === "--")
+      return `var(${v})`;
+    if (getColor(v).length > 2)
+      return getColor(v);
+    if (v.includes("px") || v.slice(-2) === "em")
+      return v;
+    const arr = v.split(" ");
+    if (!arr.length)
+      return v;
+    return arr.map((v2) => getSpacingByKey(v2, "shadow").shadow).join(" ");
+  }).join(" ");
+}).join(",");
 var transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG2 = getActiveConfig();
   return backgroundImage.split(", ").map((v) => {

package/dist/cjs/utils/color.js

@@ -1492,8 +1492,10 @@ var opacify = (color, opacity) => {
   return `rgba(${arr})`;
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);

package/dist/cjs/utils/index.js

@@ -1515,8 +1515,10 @@ var opacify = (color, opacity) => {
   return `rgba(${arr})`;
 };
 var getRgbTone = (rgb, tone) => {
+  if ((0, import_utils.isString)(rgb) && rgb.includes("rgb"))
+    rgb = colorStringToRgbaArray(rgb).join(", ");
   if ((0, import_utils.isString)(rgb))
-    rgb = rgb.split(", ").map((v) => parseFloat(v));
+    rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
   if ((0, import_utils.isNumber)(tone))
     tone += "";
   const toHex = rgbArrayToHex(rgb);

package/package.json

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

package/src/transforms/index.js

@@ -46,11 +46,19 @@ export const transformTextStroke = stroke => {
   }).join(' ')
 }
 
-export const transformShadow = (sh, globalTheme) => {
-  return sh.split(',').map(shadow => getShadow(shadow, globalTheme)).join(',')
-}
+export const transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
 
-export const transformBoxShadow = (sh, globalTheme) => getShadow(sh, globalTheme)
+export const transformBoxShadow = shadows => shadows.split('|').map(shadow => {
+  return shadow.split(', ').map(v => {
+    v = v.trim()
+    if (v.slice(0, 2) === '--') return `var(${v})`
+    if (getColor(v).length > 2) return getColor(v)
+    if (v.includes('px') || v.slice(-2) === 'em') return v
+    const arr = v.split(' ')
+    if (!arr.length) return v
+    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
+  }).join(' ')
+}).join(',')
 
 export const transformBackgroundImage = (backgroundImage, globalTheme) => {
   const CONFIG = getActiveConfig()

package/src/utils/color.js

@@ -155,7 +155,8 @@ export const opacify = (color, opacity) => {
 }
 
 export const getRgbTone = (rgb, tone) => {
-  if (isString(rgb)) rgb = rgb.split(', ').map(v => parseFloat(v))
+  if (isString(rgb) && rgb.includes('rgb')) rgb = colorStringToRgbaArray(rgb).join(', ')
+  if (isString(rgb)) rgb = rgb.split(',').map(v => parseFloat(v.trim()))
   if (isNumber(tone)) tone += ''
   const toHex = rgbArrayToHex(rgb)
   const abs = tone.slice(0, 1)