@symbo.ls/scratch 3.14.0 → 3.14.1

package/dist/esm/system/reset.js

@@ -1,94 +0,0 @@
-import { deepMerge, merge, overwriteDeep } from "@symbo.ls/utils";
-import { getActiveConfig } from "../factory.js";
-import { getMediaTheme } from "./theme.js";
-const applyReset = (reset = {}) => {
-  const CONFIG = getActiveConfig();
-  const { reset: RESET, typography: TYPOGRAPHY, document: DOCUMENT } = CONFIG;
-  if (RESET) {
-    if (RESET[":root"]) {
-      const configReset = RESET;
-      const configTemplates = TYPOGRAPHY.templates;
-      configReset.body = {
-        ...CONFIG.useDocumentTheme ? getMediaTheme("document") : {},
-        ...configTemplates.body
-      };
-      configReset.h1 = configTemplates.h1;
-      configReset.h2 = configTemplates.h2;
-      configReset.h3 = configTemplates.h3;
-      configReset.h4 = configTemplates.h4;
-      configReset.h5 = configTemplates.h5;
-      configReset.h6 = configTemplates.h6;
-    }
-    const { body, ...templates } = TYPOGRAPHY.templates;
-    const globalTheme = CONFIG.useDocumentTheme ? getMediaTheme("document") : {};
-    if (RESET.html) overwriteDeep(RESET.html, globalTheme);
-    if (TYPOGRAPHY.unit) {
-      const { media: MEDIA } = CONFIG;
-      for (const key in TYPOGRAPHY) {
-        if (key.charAt(0) !== "@") continue;
-        const mediaTypo = TYPOGRAPHY[key];
-        if (!mediaTypo) continue;
-        if (mediaTypo.unit === TYPOGRAPHY.unit || !mediaTypo.unit) continue;
-        const mediaUnit = mediaTypo.unit;
-        const mediaBase = mediaTypo.base || TYPOGRAPHY.base;
-        const mediaBrowserDefault = mediaTypo.browserDefault || TYPOGRAPHY.browserDefault;
-        const mediaName = key.slice(1);
-        const query = MEDIA[mediaName];
-        if (!query) continue;
-        const mediaKey = "@media " + (query === "print" ? query : "screen and " + query);
-        if (!RESET[mediaKey]) RESET[mediaKey] = {};
-        if (!RESET[mediaKey].html) RESET[mediaKey].html = {};
-        RESET[mediaKey].html.fontSize = mediaBase / mediaBrowserDefault + mediaUnit;
-      }
-    }
-    return deepMerge(merge(RESET, reset), {
-      html: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        top: "0",
-        left: "0",
-        margin: "0",
-        WebkitFontSmoothing: "subpixel-antialiased",
-        scrollBehavior: "smooth",
-        ...globalTheme,
-        fontSize: TYPOGRAPHY.unit ? TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + TYPOGRAPHY.unit : TYPOGRAPHY.browserDefault + "px",
-        fontFamily: DOCUMENT.fontFamily,
-        lineHeight: DOCUMENT.lineHeight
-      },
-      body: {
-        boxSizing: "border-box",
-        height: "100%",
-        margin: 0,
-        fontFamily: DOCUMENT.fontFamily,
-        fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.unit.default,
-        ...templates,
-        ...body
-      },
-      a: {
-        color: "currentColor"
-      },
-      button: {
-        color: "inherit",
-        font: "inherit",
-        background: "transparent",
-        border: "none",
-        cursor: "pointer",
-        appearance: "none",
-        WebkitAppearance: "none"
-      },
-      "input, select, textarea": {
-        color: "inherit",
-        font: "inherit"
-      },
-      fieldset: {
-        border: 0,
-        padding: 0,
-        margin: 0
-      }
-    });
-  }
-};
-export {
-  applyReset
-};

package/dist/esm/system/shadow.js

@@ -1,92 +0,0 @@
-import { getActiveConfig } from "../factory.js";
-import { getColor } from "./color.js";
-import { getSpacingByKey } from "./spacing.js";
-import { isResolvedColor, isCSSVar, splitTopLevelCommas, CSS_NATIVE_COLOR_REGEX } from "../utils/color.js";
-import {
-  isObject,
-  isString,
-  isArray
-} from "@symbo.ls/utils";
-const setShadow = (value, key, suffix, prefers) => {
-  const CONFIG = getActiveConfig();
-  if (isArray(value)) {
-    return {
-      "@light": setShadow(value[0], key, "light"),
-      "@dark": setShadow(value[1], key, "dark")
-    };
-  }
-  if (isObject(value)) {
-    const obj = {};
-    for (const variant in value) {
-      obj[variant] = setShadow(
-        value[variant],
-        key,
-        variant.startsWith("@") ? variant.slice(1) : variant
-      );
-    }
-    return obj;
-  }
-  if (isString(value) && !CSS_NATIVE_COLOR_REGEX.test(value)) {
-    value = splitTopLevelCommas(value).map((shadow) => {
-      shadow = shadow.trim();
-      return shadow.split(/\s+/).map((v) => {
-        v = v.trim();
-        if (!v) return "";
-        if (v.startsWith("--")) return `var(${v})`;
-        const color = getColor(v);
-        if (isResolvedColor(color)) return color;
-        if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
-        if (v === "inset" || v === "none") return v;
-        const spacing = getSpacingByKey(v, "shadow");
-        if (spacing && spacing.shadow) return spacing.shadow;
-        return v;
-      }).join(" ");
-    }).join(", ");
-  }
-  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
-  const CSSVar = `--${vp}shadow-${key}` + (suffix ? `-${suffix}` : "");
-  if (CONFIG.useVariable) {
-    CONFIG.cssVars[CSSVar] = value;
-  }
-  return {
-    var: CSSVar,
-    value
-  };
-};
-const getShadow = (value, globalTheme) => {
-  const CONFIG = getActiveConfig();
-  if (!globalTheme) globalTheme = CONFIG.globalTheme;
-  if (!isString(value)) {
-    if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
-    return;
-  }
-  if (isCSSVar(value)) return `var(${value})`;
-  const [name] = isArray(value) ? value : value.split(" ");
-  const SHADOW = CONFIG.shadow;
-  const val = SHADOW[name];
-  const isObj = isObject(val);
-  if (!val) {
-    if (CONFIG.verbose) console.warn("Can't find color ", name);
-    return value;
-  }
-  if (globalTheme) {
-    if (val[globalTheme]) return val[globalTheme].value;
-    else if (CONFIG.verbose) console.warn(value, " - does not have ", globalTheme);
-  }
-  if (isObj && val.value) return val.value;
-  if (isObj) {
-    const obj = {};
-    for (const mediaName in val) {
-      const query = CONFIG.media[mediaName.slice(1)];
-      const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
-      obj[media] = val.value;
-    }
-    return obj;
-  }
-  if (CONFIG.verbose) console.warn("Can't find color", value);
-  return value;
-};
-export {
-  getShadow,
-  setShadow
-};

package/dist/esm/system/spacing.js

@@ -1,121 +0,0 @@
-import { arrayzeValue } from "@symbo.ls/utils";
-import { isArray, isString, merge } from "@symbo.ls/utils";
-import { getActiveConfig } from "../factory.js";
-import {
-  CSS_UNITS,
-  applyMediaSequenceVars,
-  applySequenceVars,
-  generateSequence,
-  getFnPrefixAndValue,
-  getSequenceValuePropertyPair
-} from "../utils/index.js";
-const runThroughMedia = (FACTORY) => {
-  for (const prop in FACTORY) {
-    const mediaProps = FACTORY[prop];
-    const isMediaName = prop.slice(0, 1) === "@";
-    if (!isMediaName) continue;
-    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY;
-    merge(mediaProps, {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit,
-      sequence: {},
-      scales: {},
-      templates: {},
-      vars: {}
-    });
-    generateSequence(mediaProps);
-    applyMediaSequenceVars(FACTORY, prop);
-  }
-};
-const checkIfBoxSize = (propertyName) => {
-  const prop = propertyName.toLowerCase();
-  const includesWidth = prop.includes("width") || prop.includes("height");
-  const includesBorder = prop.includes("border") || prop.includes("outline");
-  return includesWidth && !includesBorder;
-};
-const applySpacingSequence = () => {
-  const CONFIG = getActiveConfig();
-  const { spacing: SPACING } = CONFIG;
-  generateSequence(SPACING);
-  applySequenceVars(SPACING);
-  runThroughMedia(SPACING);
-};
-const getSequence = (sequenceProps) => {
-  const CONFIG = getActiveConfig();
-  const { spacing: SPACING } = CONFIG;
-  if (!sequenceProps || !sequenceProps.sequence) return SPACING;
-  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
-  return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
-};
-const getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
-  const sequence = getSequence(sequenceProps);
-  if (isString(value)) {
-    if (!fnPrefix && value.includes("(")) {
-      const fnArray = getFnPrefixAndValue(value);
-      fnPrefix = fnArray[0];
-      value = fnArray[1];
-    }
-  }
-  const stack = fnPrefix ? [value] : arrayzeValue(value);
-  if (!isArray(stack)) return;
-  if (stack.length > 1) {
-    let suffix = "";
-    if (propertyName === "borderWidth") {
-      propertyName = "border";
-      suffix = "Width";
-    }
-    const directions = {
-      2: ["Block", "Inline"],
-      3: ["BlockStart", "Inline", "BlockEnd"],
-      4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
-    };
-    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
-      stack[i],
-      propertyName + direction + suffix,
-      sequence,
-      fnPrefix
-    );
-    return directions[stack.length].map(
-      (dir, key) => wrapSequenceValueByDirection(dir, key)
-    );
-  }
-  return getSequenceValuePropertyPair(value, propertyName, sequence, fnPrefix);
-};
-const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
-  const CONFIG = getActiveConfig();
-  const { spacing: SPACING } = CONFIG;
-  let value = val || props[propertyName];
-  if (!fnPrefix && isString(value) && value.includes("(")) {
-    const fnArr = getFnPrefixAndValue(value);
-    fnPrefix = fnArr[0];
-    value = fnArr[1];
-  }
-  if (props.spacingRatio) {
-    const sequenceProps = applyCustomSequence(props);
-    return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix);
-  }
-  return getSpacingByKey(value, propertyName, SPACING, fnPrefix);
-};
-const splitSpacedValue = (val) => {
-  const addDefault = (v) => {
-    const isSymbol = ["+", "-", "*", "/"].includes(v);
-    const hasUnits = CSS_UNITS.some((unit) => val.includes(unit));
-    if (isSymbol || hasUnits) return v;
-    const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
-    if (isSingleLetter) return v + "_default";
-    return v;
-  };
-  return val.split(",").map((v) => v.trim()).map(addDefault).join(",").split(" ").map(addDefault).join(" ");
-};
-export {
-  applySpacingSequence,
-  checkIfBoxSize,
-  getSpacingBasedOnRatio,
-  getSpacingByKey,
-  splitSpacedValue
-};

package/dist/esm/system/svg.js

@@ -1,113 +0,0 @@
-import { document } from "@symbo.ls/utils";
-import { generateSprite, convertSvgToSymbol } from "../utils/index.js";
-import { getActiveConfig } from "../factory.js";
-const DEF_OPTIONS = {
-  document
-};
-const setSVG = (val, key) => {
-  const CONFIG = getActiveConfig();
-  if (!val) {
-    if (CONFIG.verbose) console.warn("setSVG: val is not defined", key);
-    return;
-  }
-  if (CONFIG.useSvgSprite) {
-    return convertSvgToSymbol(key, val);
-  }
-  return val;
-};
-const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
-  const CONFIG = getActiveConfig();
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.svg;
-  for (const key in LIBRARY) lib[key] = LIBRARY[key];
-  appendSVG(lib, options);
-};
-const setSvgIcon = (val, key) => {
-  const CONFIG = getActiveConfig();
-  if (CONFIG.useIconSprite && !CONFIG.semanticIcons?.[key]) {
-    return setSVG(val, key);
-  }
-  return val;
-};
-const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
-  const CONFIG = getActiveConfig();
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.icons;
-  for (const key in LIBRARY) lib[key] = LIBRARY[key];
-  appendSVG(lib, options);
-};
-const createSVGSpriteElement = (doc, options = { isRoot: true }) => {
-  if (!doc || !doc.createElementNS) return;
-  const svgElem = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
-  if (options.isRoot) {
-    svgElem.setAttribute("aria-hidden", "true");
-    svgElem.setAttribute("width", "0");
-    svgElem.setAttribute("height", "0");
-    svgElem.setAttribute("style", "position:absolute");
-    svgElem.setAttribute("id", "svgSprite");
-  }
-  return svgElem;
-};
-const parseSVGSprite = (doc, svgString) => {
-  const DOMParserCtor = typeof DOMParser !== "undefined" ? DOMParser : null;
-  if (DOMParserCtor) {
-    const wrapped = `<svg xmlns="http://www.w3.org/2000/svg">${svgString}</svg>`;
-    const parser = new DOMParserCtor();
-    const parsed = parser.parseFromString(wrapped, "image/svg+xml");
-    if (parsed.querySelector("parsererror")) return null;
-    return parsed.documentElement;
-  }
-  return null;
-};
-const moveChildren = (doc, from, to) => {
-  while (from.firstChild) {
-    const child = from.firstChild;
-    to.appendChild(doc.importNode(child, true));
-    child.remove();
-  }
-};
-const appendSVG = (lib, options = DEF_OPTIONS) => {
-  const CONFIG = getActiveConfig();
-  const doc = options.document || document;
-  if (!doc || !doc.documentElement) {
-    if (CONFIG.verbose) {
-      console.warn("To append SVG sprites it should be run in browser environment");
-    }
-    return generateSprite(lib);
-  }
-  const exists = doc.querySelector("#svgSprite");
-  const SVGsprite = generateSprite(lib);
-  const spriteHtml = `<svg aria-hidden="true" width="0" height="0" style="position:absolute" id="svgSprite">${SVGsprite}</svg>`;
-  const parsed = parseSVGSprite(doc, SVGsprite);
-  if (exists) {
-    if (parsed) {
-      moveChildren(doc, parsed, exists);
-    } else if (doc.body.insertAdjacentHTML) {
-      exists.insertAdjacentHTML("beforeend", SVGsprite);
-    } else {
-      const tempSVG = createSVGSpriteElement(doc, { isRoot: false });
-      tempSVG.innerHTML = SVGsprite;
-      exists.append(...tempSVG.children);
-    }
-  } else {
-    if (parsed) {
-      const svgSpriteDOM = createSVGSpriteElement(doc);
-      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-        moveChildren(doc, parsed, svgSpriteDOM);
-        doc.body.prepend(svgSpriteDOM);
-      }
-    } else if (doc.body.insertAdjacentHTML) {
-      doc.body.insertAdjacentHTML("afterbegin", spriteHtml);
-    } else {
-      const svgSpriteDOM = createSVGSpriteElement(doc);
-      if (svgSpriteDOM && svgSpriteDOM.nodeType) {
-        svgSpriteDOM.innerHTML = SVGsprite;
-        doc.body.prepend(svgSpriteDOM);
-      }
-    }
-  }
-};
-export {
-  appendSVGSprite,
-  appendSvgIconsSprite,
-  setSVG,
-  setSvgIcon
-};