@symbo.ls/scratch 3.14.0 → 3.14.2

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
-};

package/dist/esm/system/theme.js

@@ -1,481 +0,0 @@
-import { getColor } from "./color.js";
-import { getActiveConfig } from "../factory.js";
-import { isCSSVar } from "../utils/color.js";
-import {
-  isObject,
-  isString,
-  isObjectLike,
-  isArray
-} from "@symbo.ls/utils";
-const CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
-  "black",
-  "white",
-  "red",
-  "green",
-  "blue",
-  "yellow",
-  "orange",
-  "purple",
-  "pink",
-  "brown",
-  "gray",
-  "grey",
-  "cyan",
-  "magenta",
-  "lime",
-  "olive",
-  "navy",
-  "teal",
-  "aqua",
-  "maroon",
-  "silver",
-  "fuchsia",
-  "transparent",
-  "currentColor",
-  "currentcolor",
-  "inherit",
-  "initial",
-  "unset",
-  "none",
-  "aliceblue",
-  "antiquewhite",
-  "aquamarine",
-  "azure",
-  "beige",
-  "bisque",
-  "blanchedalmond",
-  "blueviolet",
-  "burlywood",
-  "cadetblue",
-  "chartreuse",
-  "chocolate",
-  "coral",
-  "cornflowerblue",
-  "cornsilk",
-  "crimson",
-  "darkblue",
-  "darkcyan",
-  "darkgoldenrod",
-  "darkgray",
-  "darkgreen",
-  "darkgrey",
-  "darkkhaki",
-  "darkmagenta",
-  "darkolivegreen",
-  "darkorange",
-  "darkorchid",
-  "darkred",
-  "darksalmon",
-  "darkseagreen",
-  "darkslateblue",
-  "darkslategray",
-  "darkslategrey",
-  "darkturquoise",
-  "darkviolet",
-  "deeppink",
-  "deepskyblue",
-  "dimgray",
-  "dimgrey",
-  "dodgerblue",
-  "firebrick",
-  "floralwhite",
-  "forestgreen",
-  "gainsboro",
-  "ghostwhite",
-  "gold",
-  "goldenrod",
-  "greenyellow",
-  "honeydew",
-  "hotpink",
-  "indianred",
-  "indigo",
-  "ivory",
-  "khaki",
-  "lavender",
-  "lavenderblush",
-  "lawngreen",
-  "lemonchiffon",
-  "lightblue",
-  "lightcoral",
-  "lightcyan",
-  "lightgoldenrodyellow",
-  "lightgray",
-  "lightgreen",
-  "lightgrey",
-  "lightpink",
-  "lightsalmon",
-  "lightseagreen",
-  "lightskyblue",
-  "lightslategray",
-  "lightslategrey",
-  "lightsteelblue",
-  "lightyellow",
-  "limegreen",
-  "linen",
-  "mediumaquamarine",
-  "mediumblue",
-  "mediumorchid",
-  "mediumpurple",
-  "mediumseagreen",
-  "mediumslateblue",
-  "mediumspringgreen",
-  "mediumturquoise",
-  "mediumvioletred",
-  "midnightblue",
-  "mintcream",
-  "mistyrose",
-  "moccasin",
-  "navajowhite",
-  "oldlace",
-  "olivedrab",
-  "orangered",
-  "orchid",
-  "palegoldenrod",
-  "palegreen",
-  "paleturquoise",
-  "palevioletred",
-  "papayawhip",
-  "peachpuff",
-  "peru",
-  "plum",
-  "powderblue",
-  "rosybrown",
-  "royalblue",
-  "saddlebrown",
-  "salmon",
-  "sandybrown",
-  "seagreen",
-  "seashell",
-  "sienna",
-  "skyblue",
-  "slateblue",
-  "slategray",
-  "slategrey",
-  "snow",
-  "springgreen",
-  "steelblue",
-  "tan",
-  "thistle",
-  "tomato",
-  "turquoise",
-  "violet",
-  "wheat",
-  "whitesmoke",
-  "yellowgreen",
-  "rebeccapurple"
-]);
-const COLOR_PARAM_TOKENS = ["color", "Color", "background", "Background", "fill", "Fill", "stroke", "Stroke"];
-const isColorParam = (param) => {
-  for (let i = 0; i < COLOR_PARAM_TOKENS.length; i++) {
-    if (param.includes(COLOR_PARAM_TOKENS[i])) return true;
-  }
-  return false;
-};
-const setThemeValue = (theme) => {
-  const value = {};
-  const { state, media, helpers, ...rest } = theme;
-  const keys = Object.keys(rest);
-  keys.map((key) => {
-    const conditions = ["color", "Color", "background", "border"];
-    const isColor = conditions.some((k) => key.includes(k));
-    return value[key] = isColor ? getColor(theme[key]) : theme[key];
-  });
-  return value;
-};
-const getThemeValue = (theme) => {
-  if (theme.value) return theme.value;
-  theme.value = setThemeValue(theme);
-  return theme.value;
-};
-const getTheme = (value, modifier) => {
-  const CONFIG = getActiveConfig();
-  if (CONFIG.useVariable) return getMediaTheme(value, modifier);
-  const THEME = CONFIG.theme;
-  if (isString(value)) {
-    const [theme, subtheme] = value.split(" ");
-    const isOurTheme = THEME[theme];
-    if (isOurTheme) {
-      if (!subtheme && !modifier) return getThemeValue(isOurTheme);
-      value = [theme, subtheme || modifier];
-    }
-  }
-  if (isObjectLike(value) && value[1]) {
-    const themeName = value[0];
-    const subThemeName = value[1];
-    const { helpers, media, state } = THEME[themeName];
-    if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
-    if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
-    if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
-  } else if (isObject(value)) return setThemeValue(value);
-};
-const setInverseTheme = (theme, variant, value) => {
-  if (isObject(variant)) {
-    theme.variants.inverse.value = setThemeValue(variant);
-  } else if (variant === true) {
-    const { color, background } = value;
-    theme.variants.inverse = {
-      value: {
-        color: background,
-        background: color
-      }
-    };
-  }
-};
-const setPseudo = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant);
-  themeValue[`&:${key}`] = result;
-  if (isObject(variant) && !variant.value) variant.value = result;
-};
-const setSelectors = (theme, value) => {
-  const { state } = theme;
-  if (!state) return;
-  const keys = Object.keys(state);
-  keys.map((key) => {
-    const variant = state[key];
-    setPseudo(theme, key, variant, value);
-    return theme;
-  });
-  return theme;
-};
-const setPrefersScheme = (theme, key, variant, themeValue) => {
-  const result = getTheme(variant);
-  themeValue[`@media (prefers-color-scheme: ${key})`] = result;
-  if (isObject(variant) && !variant.value) variant.value = result;
-};
-const setMedia = (theme, value) => {
-  const { media } = theme;
-  if (!media) return;
-  const keys = Object.keys(media);
-  keys.map((key) => {
-    const variant = media[key];
-    if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
-    if (key === "inverse") setInverseTheme(theme, variant, value);
-    return theme;
-  });
-  return theme;
-};
-const setHelpers = (theme, value) => {
-  const CONFIG = getActiveConfig();
-  const { helpers } = theme;
-  if (!helpers) return;
-  const keys = Object.keys(helpers);
-  keys.map((key) => {
-    const helper = helpers[key];
-    if (isString(helper)) helpers[key] = CONFIG.theme[helper];
-    else getThemeValue(helpers[key]);
-    return theme;
-  });
-  return theme;
-};
-const setTheme = (val, key) => {
-  const CONFIG = getActiveConfig();
-  if (CONFIG.useVariable) return setMediaTheme(val, key);
-  const { state, media, helpers } = val;
-  const value = setThemeValue(val, key);
-  const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
-  const CSSvar = `--${vp}theme-${key}`;
-  setSelectors(val, value);
-  setMedia(val, value);
-  setHelpers(val, value);
-  return { var: CSSvar, value, state, media, helpers };
-};
-const keySetters = {
-  // eslint-disable-line
-  "@": (theme, value) => setMedia(theme, value),
-  ":": (theme, value) => setSelectors(theme, value),
-  ".": (theme, value) => setHelpers(theme, value)
-};
-const generateAutoVars = (schemes, varPrefix, CONFIG) => {
-  const { cssVars: CSS_VARS } = CONFIG;
-  if (!CONFIG.cssMediaVars) CONFIG.cssMediaVars = {};
-  const MEDIA_VARS = CONFIG.cssMediaVars;
-  const globalTheme = CONFIG.globalTheme !== void 0 ? CONFIG.globalTheme : "auto";
-  const result = {};
-  const allKeys = /* @__PURE__ */ new Set();
-  for (const scheme in schemes) {
-    if (schemes[scheme]) for (const k of Object.keys(schemes[scheme])) allKeys.add(k);
-  }
-  const brokenSchemes = /* @__PURE__ */ new Set();
-  for (const param of allKeys) {
-    const symb = param.slice(0, 1);
-    if (symb === "@" || symb === "." || symb === ":") continue;
-    if (!isColorParam(param)) continue;
-    for (const scheme in schemes) {
-      if (brokenSchemes.has(scheme)) continue;
-      const val = schemes[scheme]?.[param];
-      if (val === void 0) continue;
-      const color = getColor(val, `@${scheme}`);
-      if (color === void 0) continue;
-      if (isString(color) && /^[a-z][a-zA-Z]+$/.test(color) && !CSS_NAMED_COLORS.has(color)) {
-        brokenSchemes.add(scheme);
-      }
-    }
-  }
-  for (const param of allKeys) {
-    const symb = param.slice(0, 1);
-    const hasObject = Object.values(schemes).some((s) => isObjectLike(s?.[param]));
-    if (symb === "." && hasObject) {
-      const helperName = param.slice(1);
-      const subSchemes = {};
-      for (const scheme in schemes) {
-        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
-      }
-      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${helperName}`, CONFIG);
-    } else if (symb === ":" && hasObject) {
-      const pseudoName = param.replace(/^:+/, "");
-      const subSchemes = {};
-      for (const scheme in schemes) {
-        if (isObjectLike(schemes[scheme]?.[param])) subSchemes[scheme] = schemes[scheme][param];
-      }
-      result[param] = generateAutoVars(subSchemes, `${varPrefix}-${pseudoName}`, CONFIG);
-    } else if (symb !== "@" && symb !== "." && symb !== ":") {
-      const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
-      const autoVar = `--${vp}theme-${varPrefix}-${param}`;
-      const forced = globalTheme && globalTheme !== "auto" ? String(globalTheme).replace(/^'|'$/g, "") : null;
-      let fallbackColor;
-      for (const scheme in schemes) {
-        if (brokenSchemes.has(scheme)) continue;
-        const val = schemes[scheme]?.[param];
-        if (val === void 0) continue;
-        const color = getColor(val, `@${scheme}`);
-        if (color === void 0) continue;
-        if (forced && scheme === forced || !forced && (scheme === "light" || fallbackColor === void 0)) {
-          fallbackColor = color;
-        }
-        const selector = `[data-theme="${scheme}"]`;
-        if (!MEDIA_VARS[selector]) MEDIA_VARS[selector] = {};
-        MEDIA_VARS[selector][autoVar] = color;
-        if (scheme === "dark" || scheme === "light") {
-          const mq = `@media (prefers-color-scheme: ${scheme})`;
-          if (!MEDIA_VARS[mq]) MEDIA_VARS[mq] = {};
-          MEDIA_VARS[mq][autoVar] = color;
-        }
-      }
-      if (fallbackColor !== void 0) {
-        CSS_VARS[autoVar] = fallbackColor;
-      }
-      result[param] = `var(${autoVar})`;
-      result[`.${param}`] = { [param]: result[param] };
-    }
-  }
-  if (result.background || result.color || result.backgroundColor) {
-    result[".inversed"] = {
-      color: result.background || result.backgroundColor,
-      background: result.color
-    };
-  }
-  return result;
-};
-const setMediaTheme = (val, key, suffix, prefers) => {
-  const CONFIG = getActiveConfig();
-  const { cssVars: CSS_VARS } = CONFIG;
-  const theme = { value: val };
-  const isTopLevel = !suffix && !prefers;
-  if (isObjectLike(val)) {
-    if (isTopLevel && CONFIG.useVariable) {
-      const schemes = {};
-      for (const param in val) {
-        if (param.startsWith("@") && isObjectLike(val[param])) {
-          schemes[param.slice(1)] = val[param];
-        }
-      }
-      if (Object.keys(schemes).length) {
-        const autoResult = generateAutoVars(schemes, key, CONFIG);
-        Object.assign(theme, autoResult);
-      }
-    }
-    for (const param in val) {
-      const symb = param.slice(0, 1);
-      const value = val[param];
-      if (symb === "@" || symb === ":" || symb === ".") {
-        const hasPrefers = symb === "@" && param;
-        theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
-      } else if (!isTopLevel) {
-        const color = getColor(value, prefers);
-        const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
-        const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
-        const vp = CONFIG.varPrefix ? CONFIG.varPrefix + "-" : "";
-        const CSSVar = `--${vp}theme-${key}${varmetaSuffixName}-${param}`;
-        if (CONFIG.useVariable) {
-          if (CONFIG.useThemeSuffixedVars) CSS_VARS[CSSVar] = color;
-          theme[param] = `var(${CSSVar})`;
-        } else {
-          theme[param] = color;
-        }
-        theme[`.${param}`] = { [param]: theme[param] };
-      }
-    }
-    if (!theme[".inversed"] && (theme.background || theme.color || theme.backgroundColor)) {
-      theme[".inversed"] = {
-        color: theme.background || theme.backgroundColor,
-        background: theme.color
-      };
-    }
-  }
-  if (isString(val) && isCSSVar(val)) {
-    const THEME = CONFIG.theme;
-    const value = THEME[val.slice(2)];
-    const getReferenced = getMediaTheme(value, prefers);
-    return getReferenced;
-  }
-  return theme;
-};
-const recursiveTheme = (val) => {
-  const CONFIG = getActiveConfig();
-  const obj = {};
-  for (const param in val) {
-    const symb = param.slice(0, 1);
-    if (isObjectLike(val[param])) {
-      if (symb === "@") {
-        continue;
-      } else if (symb === ":") {
-        obj[`&${param}`] = recursiveTheme(val[param]);
-      } else if (symb === ".") {
-        obj[`&${param}`] = recursiveTheme(val[param]);
-      }
-    } else obj[param] = val[param];
-  }
-  return obj;
-};
-const findModifierFromArray = (val, modifierArray) => {
-  const currentMod = modifierArray.shift();
-  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
-  return val;
-};
-const findModifier = (val, modifier) => {
-  if (isArray(modifier)) return findModifierFromArray(val, modifier);
-  else if (isString(modifier) && val[modifier]) return val[modifier];
-  else return val;
-};
-const checkForReference = (val, callback) => {
-  if (isString(val) && isCSSVar(val)) return getMediaTheme(val.slice(2));
-  return val;
-};
-const checkThemeReference = (val) => checkForReference(val, checkThemeReference);
-const getMediaTheme = (value, modifier) => {
-  const activeConfig = getActiveConfig();
-  if (isString(value) && isCSSVar(value)) {
-    value = getMediaTheme(value.slice(2));
-  }
-  if (!value || !isString(value)) {
-    if (activeConfig.verbose) {
-      console.warn(`${value} - Theme is not a string`);
-    }
-    return;
-  }
-  const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
-  let themeValue = activeConfig.theme[themeName];
-  if (themeValue && themeModifiers.length) {
-    themeValue = findModifier(themeValue, themeModifiers);
-  } else if (themeValue && modifier) {
-    themeValue = findModifier(themeValue, modifier);
-  }
-  const resolvedTheme = recursiveTheme(themeValue);
-  return resolvedTheme;
-};
-export {
-  getMediaTheme,
-  getTheme,
-  setMediaTheme,
-  setTheme
-};

package/dist/esm/system/timing.js

@@ -1,32 +0,0 @@
-import { toCamelCase } from "@symbo.ls/utils";
-import { getActiveConfig } from "../factory.js";
-import {
-  applySequenceVars,
-  generateSequence,
-  getSequenceValuePropertyPair
-} from "../utils/index.js";
-const applyTimingSequence = () => {
-  const CONFIG = getActiveConfig();
-  const { timing: TIMING } = CONFIG;
-  generateSequence(TIMING);
-  applySequenceVars(TIMING);
-};
-const getTimingFunction = (value) => {
-  const CONFIG = getActiveConfig();
-  const { timing: TIMING } = CONFIG;
-  return TIMING[value] || TIMING[toCamelCase(value)] || value;
-};
-const getTimingByKey = (value, property = "timing") => {
-  const CONFIG = getActiveConfig();
-  const { timing: TIMING } = CONFIG;
-  return getSequenceValuePropertyPair(
-    value,
-    property,
-    TIMING
-  );
-};
-export {
-  applyTimingSequence,
-  getTimingByKey,
-  getTimingFunction
-};