@symbo.ls/scratch 3.4.5 → 3.4.6

package/dist/esm/transforms/index.js

@@ -0,0 +1,216 @@
+import { isString, isObject, exec } from "@domql/utils";
+import { getActiveConfig } from "../factory";
+import {
+  getSpacingByKey,
+  getColor,
+  getShadow,
+  getMediaColor,
+  getTimingByKey,
+  getTimingFunction,
+  getSpacingBasedOnRatio,
+  checkIfBoxSize,
+  splitSpacedValue
+} from "../system";
+import {
+  getFnPrefixAndValue,
+  isResolvedColor,
+  isCSSVar,
+  CSS_NATIVE_COLOR_REGEX,
+  splitTopLevelCommas,
+  parseColorToken
+} from "../utils";
+const BORDER_STYLES = /* @__PURE__ */ new Set([
+  "none",
+  "hidden",
+  "dotted",
+  "dashed",
+  "solid",
+  "double",
+  "groove",
+  "ridge",
+  "inset",
+  "outset",
+  "initial"
+]);
+const GRADIENT_KEYWORDS = /* @__PURE__ */ new Set([
+  "to",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "center",
+  "at",
+  "circle",
+  "ellipse",
+  "closest-side",
+  "farthest-side",
+  "closest-corner",
+  "farthest-corner"
+]);
+const isBorderStyle = (str) => BORDER_STYLES.has(str);
+const transformBorder = (border) => {
+  const str = border + "";
+  if (CSS_NATIVE_COLOR_REGEX.test(str)) return str;
+  const trimmed = str.trim();
+  if (trimmed === "none" || trimmed === "0" || trimmed === "initial" || trimmed === "inherit" || trimmed === "unset") return str;
+  const tokens = str.split(/\s+/);
+  return tokens.map((v) => {
+    v = v.trim();
+    if (!v) return "";
+    if (isCSSVar(v)) return `var(${v})`;
+    if (isBorderStyle(v)) return v;
+    if (/^\d/.test(v) || v === "0") return v;
+    const color = getColor(v);
+    if (isResolvedColor(color)) return color;
+    const spacing = getSpacingByKey(v, "border");
+    if (spacing && spacing.border) return spacing.border;
+    return v;
+  }).join(" ");
+};
+const transformTextStroke = (stroke) => {
+  if (CSS_NATIVE_COLOR_REGEX.test(stroke)) return stroke;
+  return stroke.split(/\s+/).map((v) => {
+    v = v.trim();
+    if (!v) return "";
+    if (isCSSVar(v)) return `var(${v})`;
+    if (/^\d/.test(v) || v.includes("px") || v === "0") return v;
+    const color = getColor(v);
+    if (isResolvedColor(color)) return color;
+    return v;
+  }).join(" ");
+};
+const transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
+const transformBoxShadow = (shadows, globalTheme) => {
+  if (CSS_NATIVE_COLOR_REGEX.test(shadows)) return shadows;
+  return splitTopLevelCommas(shadows).map((shadow) => {
+    shadow = shadow.trim();
+    if (!shadow) return "";
+    return shadow.split(/\s+/).map((v) => {
+      v = v.trim();
+      if (!v) return "";
+      if (isCSSVar(v)) return `var(${v})`;
+      if (v === "inset" || v === "none") return v;
+      const color = getColor(v);
+      if (isResolvedColor(color)) {
+        const mediaColor = getMediaColor(v, globalTheme);
+        if (isObject(mediaColor))
+          return Object.values(mediaColor).filter(
+            (c) => c.includes(": " + globalTheme)
+          )[0];
+        return mediaColor;
+      }
+      if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
+      const spacing = getSpacingByKey(v, "shadow");
+      if (spacing && spacing.shadow) return spacing.shadow;
+      return v;
+    }).join(" ");
+  }).join(", ");
+};
+const resolveColorsInGradient = (gradient, globalTheme) => {
+  const parenStart = gradient.indexOf("(");
+  if (parenStart === -1) return gradient;
+  const prefix = gradient.slice(0, parenStart + 1);
+  const inner = gradient.slice(parenStart + 1, gradient.lastIndexOf(")"));
+  const suffix = ")";
+  const segments = splitTopLevelCommas(inner);
+  const resolved = segments.map((segment) => {
+    segment = segment.trim();
+    const tokens = segment.split(/\s+/);
+    return tokens.map((token) => {
+      if (!token) return token;
+      if (/^\d/.test(token) || token === "0") return token;
+      if (GRADIENT_KEYWORDS.has(token)) return token;
+      if (token === "transparent") return token;
+      if (CSS_NATIVE_COLOR_REGEX.test(token)) return token;
+      const color = getColor(token);
+      if (isResolvedColor(color)) return color;
+      return token;
+    }).join(" ");
+  });
+  return prefix + resolved.join(", ") + suffix;
+};
+const transformBackgroundImage = (backgroundImage, globalTheme) => {
+  const CONFIG = getActiveConfig();
+  return backgroundImage.split(", ").map((v) => {
+    if (isCSSVar(v)) return `var(${v})`;
+    if (v.includes("url")) return v;
+    if (v.includes("gradient")) return resolveColorsInGradient(v, globalTheme);
+    else if (CONFIG.GRADIENT[backgroundImage]) {
+      return {
+        backgroundImage: getMediaColor(
+          backgroundImage,
+          globalTheme || CONFIG.globalTheme
+        )
+      };
+    } else if (v.includes("/") || v.startsWith("http") || v.includes(".") && !parseColorToken(v))
+      return `url(${v})`;
+    return v;
+  }).join(" ");
+};
+const transfromGap = (gap) => isString(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
+const transformTransition = (transition) => {
+  const arr = transition.split(" ");
+  if (!arr.length) return transition;
+  return arr.map((v) => {
+    if (isCSSVar(v)) return `var(${v})`;
+    if (v.length < 3 || v.includes("ms")) {
+      const mapWithSequence = getTimingByKey(v);
+      return mapWithSequence.timing || v;
+    }
+    if (getTimingFunction(v)) return getTimingFunction(v);
+    return v;
+  }).join(" ");
+};
+const transformDuration = (duration, props, propertyName) => {
+  if (!isString(duration)) return;
+  return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
+};
+const splitTransition = (transition) => {
+  const arr = transition.split(",");
+  if (!arr.length) return;
+  return arr.map(transformTransition).join(",");
+};
+function transformSize(propertyName, val, props = {}, opts = {}) {
+  let value = exec.call(this, val || props[propertyName]);
+  if (value === void 0 || value === null) return;
+  let fnPrefix;
+  if (isString(value)) {
+    if (value.includes("(")) {
+      const fnArr = getFnPrefixAndValue(value);
+      fnPrefix = fnArr[0];
+      value = fnArr[1];
+    }
+    const shouldScaleBoxSize = props.scaleBoxSize;
+    const isBoxSize = checkIfBoxSize(propertyName);
+    if (!shouldScaleBoxSize && isBoxSize) {
+      value = splitSpacedValue(value);
+    }
+  }
+  return opts.ratio ? getSpacingBasedOnRatio(props, propertyName, value, fnPrefix) : getSpacingByKey(value, propertyName, void 0, fnPrefix);
+}
+const transformSizeRatio = (propertyName, val = null, props) => {
+  return transformSize(propertyName, val, props, {
+    ratio: true
+  });
+};
+const transformBorderRadius = (radius, props, propertyName) => {
+  if (!isString(radius)) return;
+  return {
+    borderRadius: radius.split(" ").map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(" ")
+  };
+};
+export {
+  resolveColorsInGradient,
+  splitTransition,
+  transformBackgroundImage,
+  transformBorder,
+  transformBorderRadius,
+  transformBoxShadow,
+  transformDuration,
+  transformShadow,
+  transformSize,
+  transformSizeRatio,
+  transformTextStroke,
+  transformTransition,
+  transfromGap
+};

package/dist/esm/utils/color.js

@@ -0,0 +1,192 @@
+import {
+  document,
+  window,
+  isString,
+  isNumber,
+  isNotProduction
+} from "@domql/utils";
+const colorStringToRgbaArray = (color) => {
+  if (color === "") return [0, 0, 0, 0];
+  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 (document && window) {
+      const elem = document.body.appendChild(document.createElement("fictum"));
+      const flag = "rgb(1, 2, 3)";
+      elem.style.color = flag;
+      if (elem.style.color !== flag) {
+        document.body.removeChild(elem);
+        return;
+      }
+      elem.style.color = color;
+      if (elem.style.color === flag || elem.style.color === "") {
+        document.body.removeChild(elem);
+        return [0, 0, 0, 0];
+      }
+      color = window.getComputedStyle(elem).color;
+      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 [0, 0, 0, 0];
+};
+const mixTwoColors = (colorA, colorB, range = 0.5) => {
+  colorA = colorStringToRgbaArray(colorA);
+  colorB = colorStringToRgbaArray(colorB);
+  return mixTwoRgba(colorA, colorB, range);
+};
+const hexToRgb = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+  return `rgb(${r},${g},${b})`;
+};
+const hexToRgbArray = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+  return [r, g, b];
+};
+const rgbToHex = (r, g, b) => {
+  return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
+};
+const rgbArrayToHex = ([r, g, b]) => {
+  return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+};
+const hexToRgba = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+  return `rgba(${r},${g},${b},${alpha})`;
+};
+const mixTwoRgb = (colorA, colorB, range = 0.5) => {
+  const arr = [];
+  for (let i = 0; i < 3; i++) {
+    arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range);
+  }
+  return `rgb(${arr})`;
+};
+const changeLightness = (delta, hsl) => {
+  const [hue, saturation, lightness] = hsl;
+  const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)));
+  return [hue, saturation, newLightness];
+};
+const rgbToHSL = (r, g, b) => {
+  const a = Math.max(r, g, b);
+  const n = a - Math.min(r, g, b);
+  const f = 1 - Math.abs(a + a - n - 1);
+  const h = n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n);
+  return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2];
+};
+const hslToRgb = (h, s, l, a = s * Math.min(l, 1 - l), f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)) => [f(0), f(8), f(4)];
+const getColorShade = (col, amt) => {
+  const num = parseInt(col, 16);
+  let r = (num >> 16) + amt;
+  if (r > 255) r = 255;
+  else if (r < 0) r = 0;
+  let b = (num >> 8 & 255) + amt;
+  if (b > 255) b = 255;
+  else if (b < 0) b = 0;
+  let g = (num & 255) + amt;
+  if (g > 255) g = 255;
+  else if (g < 0) g = 0;
+  return ((g | b << 8 | r << 16) + 16777216).toString(16).slice(1);
+};
+const mixTwoRgba = (colorA, colorB, range = 0.5) => {
+  const arr = [];
+  for (let i = 0; i < 4; i++) {
+    const round = i === 3 ? (x) => x : Math.round;
+    arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range);
+  }
+  return `rgba(${arr})`;
+};
+const opacify = (color, opacity) => {
+  const arr = colorStringToRgbaArray(color);
+  if (!arr) {
+    if (isNotProduction()) console.warn(color + " color is not rgba");
+    return;
+  }
+  arr[3] = opacity;
+  return `rgba(${arr})`;
+};
+const isCSSVar = (v) => v.charCodeAt(0) === 45 && v.charCodeAt(1) === 45;
+const CSS_NATIVE_COLOR_REGEX = /(?:rgba?\(|hsla?\(|#[0-9a-fA-F]{3,8}\b)/;
+const COLOR_TOKEN_REGEX = /^([a-zA-Z]\w*)(?:\.(\d+))?(?:([+-]\d+|=\d+))?$/;
+const parseColorToken = (value) => {
+  if (!isString(value)) return null;
+  if (CSS_NATIVE_COLOR_REGEX.test(value)) return { passthrough: value };
+  if (isCSSVar(value)) return { cssVar: value };
+  const match = value.match(COLOR_TOKEN_REGEX);
+  if (!match) return null;
+  const [, name, alphaDigits, rawTone] = match;
+  const alpha = alphaDigits !== void 0 ? `0.${alphaDigits}` : void 0;
+  const tone = rawTone && rawTone[0] === "=" ? rawTone.slice(1) : rawTone;
+  return { name, alpha, tone };
+};
+const isResolvedColor = (result) => {
+  return isString(result) && (result.includes("rgb") || result.includes("var(") || result.includes("#"));
+};
+const splitTopLevelCommas = (value) => {
+  const result = [];
+  let current = "";
+  let depth = 0;
+  for (const char of value) {
+    if (char === "(") depth += 1;
+    else if (char === ")" && depth > 0) depth -= 1;
+    if (char === "," && depth === 0) {
+      result.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  if (current.length || !result.length) result.push(current);
+  return result;
+};
+const getRgbTone = (rgb, tone) => {
+  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);
+  if (abs === "-" || abs === "+") {
+    const colorShade = getColorShade(toHex, parseFloat(tone));
+    return hexToRgbArray(colorShade).join(", ");
+  } else {
+    const [r, g, b] = rgb;
+    const hsl = rgbToHSL(r, g, b);
+    const [h, s, l] = hsl;
+    const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+    return newRgb;
+  }
+};
+export {
+  CSS_NATIVE_COLOR_REGEX,
+  changeLightness,
+  colorStringToRgbaArray,
+  getColorShade,
+  getRgbTone,
+  hexToRgb,
+  hexToRgbArray,
+  hexToRgba,
+  hslToRgb,
+  isCSSVar,
+  isResolvedColor,
+  mixTwoColors,
+  mixTwoRgb,
+  mixTwoRgba,
+  opacify,
+  parseColorToken,
+  rgbArrayToHex,
+  rgbToHSL,
+  rgbToHex,
+  splitTopLevelCommas
+};

package/dist/esm/utils/font.js

@@ -0,0 +1,69 @@
+const getDefaultOrFirstKey = (LIBRARY, key) => {
+  if (LIBRARY[key]) return LIBRARY[key].value;
+  if (LIBRARY.default) return LIBRARY[LIBRARY.default].value;
+  const hasValue = Object.keys(LIBRARY)[0];
+  return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
+};
+const getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+const isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+const setFontImport = (url) => `@import url('${url}');`;
+const setInCustomFontMedia = (str) => `@font-face { ${str} }`;
+const setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
+  font-family: '${name}';
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+const setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
+}`;
+const getFontFaceEach = (name, weights) => {
+  const keys = Object.keys(weights);
+  return keys.map((key) => {
+    const { url, fontWeight } = weights[key];
+    return setCustomFont(name, url, fontWeight);
+  });
+};
+const getFontFace = (LIBRARY) => {
+  const keys = Object.keys(LIBRARY);
+  return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
+};
+const getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url);
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || "swap"
+    });
+  }
+  const isArr = weights[0];
+  if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
+  return setCustomFontMedia(name, weights.url);
+};
+const getFontFaceString = (LIBRARY) => {
+  const keys = Object.keys(LIBRARY);
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value));
+};
+export {
+  getDefaultOrFirstKey,
+  getFontFace,
+  getFontFaceEach,
+  getFontFaceEachString,
+  getFontFaceString,
+  getFontFormat,
+  isGoogleFontsUrl,
+  setCustomFont,
+  setCustomFontMedia,
+  setFontImport,
+  setInCustomFontMedia
+};

package/dist/esm/utils/index.js

@@ -0,0 +1,7 @@
+export * from "./unit.js";
+export * from "./color.js";
+export * from "./theme.js";
+export * from "./font.js";
+export * from "./sequence.js";
+export * from "./var.js";
+export * from "./sprite.js";