@symbo.ls/scratch 2.10.149 → 2.10.156

package/dist/esm/system/svg.js

@@ -0,0 +1,61 @@
+import { document } from "@domql/globals";
+import { generateSprite, convertSvgToSymbol } from "../utils";
+import { getActiveConfig } from "../factory.js";
+const DEF_OPTIONS = {
+  document
+};
+const setSVG = (val, key) => {
+  if (!val) {
+    if (CONFIG.verbose)
+      console.warn("setSVG: val is not defined", key);
+    return;
+  }
+  const CONFIG = getActiveConfig();
+  if (CONFIG.useSvgSprite) {
+    return convertSvgToSymbol(key, val);
+  }
+  return val;
+};
+const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = getActiveConfig();
+  const doc = options.document || document;
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG;
+  for (let key in LIBRARY)
+    lib[key] = CONFIG.SVG[key];
+  const SVGsprite = generateSprite(lib);
+  if (!doc) {
+    console.warn("To append SVG sprites it should be run in browser environment");
+    return SVGsprite;
+  }
+  const svgSpriteDOM = doc.createElement("template");
+  svgSpriteDOM.innerHTML = SVGsprite;
+  doc.body.appendChild(svgSpriteDOM.content);
+};
+const setIcon = (val, key) => {
+  const CONFIG = getActiveConfig();
+  if (CONFIG.useIconSprite) {
+    return setSVG(val, key);
+  }
+  return val;
+};
+const appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = getActiveConfig();
+  const doc = options.document || document;
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS;
+  for (let key in LIBRARY)
+    lib[key] = CONFIG.ICONS[key];
+  const SVGsprite = generateSprite(lib);
+  if (!doc) {
+    console.warn("To append SVG Icon sprites it should be run in browser environment");
+    return SVGsprite;
+  }
+  const iconsSpriteDOM = doc.createElement("template");
+  iconsSpriteDOM.innerHTML = SVGsprite;
+  doc.body.appendChild(iconsSpriteDOM.content);
+};
+export {
+  appendIconsSprite,
+  appendSVGSprite,
+  setIcon,
+  setSVG
+};

package/dist/esm/system/theme.js

@@ -0,0 +1,240 @@
+import { getColor } from "./color";
+import { getActiveConfig } from "../factory.js";
+import {
+  isObject,
+  isString,
+  isObjectLike,
+  isArray
+} from "@domql/utils";
+const ENV = "development";
+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;
+  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 CSSvar = `--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 setMediaTheme = (val, key, suffix, prefers) => {
+  const CONFIG = getActiveConfig();
+  const { CSS_VARS } = CONFIG;
+  const theme = { value: val };
+  if (isObjectLike(val)) {
+    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 {
+        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 CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
+        if (CONFIG.useVariable) {
+          CSS_VARS[CSSVar] = color;
+          theme[param] = `var(${CSSVar})`;
+        } else {
+          theme[param] = color;
+        }
+        theme[`.${param}`] = { [param]: theme[param] };
+      }
+    }
+    if (theme["background"] || theme["color"] || theme["backgroundColor"]) {
+      theme[".inversed"] = {
+        color: theme["background"] || theme["backgroundColor"],
+        background: theme["color"]
+      };
+    }
+  }
+  if (isString(val) && val.slice(0, 2) === "--") {
+    const { THEME } = CONFIG;
+    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 === "@") {
+        const query = CONFIG.MEDIA[param.slice(1)];
+        const media = `@media screen and ${query}`;
+        obj[media] = 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) && val.slice(0, 2) === "--")
+    return getMediaTheme(val.slice(2));
+  return val;
+};
+const checkThemeReference = (val) => checkForReference(val, checkThemeReference);
+const getMediaTheme = (val, mod) => {
+  const CONFIG = getActiveConfig();
+  if (isString(val) && val.slice(0, 2) === "--")
+    val = getMediaTheme(val.slice(2));
+  if (!val || !isString(val)) {
+    if (CONFIG.verbose)
+      console.warn(val, "- theme is not string");
+    return;
+  }
+  const [name, ...modifier] = isArray(val) ? val : val.split(" ");
+  let value = CONFIG.THEME[name];
+  if (value && (modifier || mod)) {
+    value = findModifier(value, modifier.length ? modifier : mod);
+  }
+  const r = recursiveTheme(value);
+  return r;
+};
+export {
+  getMediaTheme,
+  getTheme,
+  setMediaTheme,
+  setTheme
+};

package/dist/esm/system/timing.js

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

package/dist/esm/system/typography.js

@@ -0,0 +1,80 @@
+import { getActiveConfig } from "../factory.js";
+import {
+  applySequenceVars,
+  findHeadings,
+  generateSequence,
+  getSequenceValuePropertyPair,
+  merge
+} from "../utils";
+const runThroughMedia = (props) => {
+  const CONFIG = getActiveConfig();
+  const { TYPOGRAPHY, MEDIA } = CONFIG;
+  for (const prop in props) {
+    const mediaProps = props[prop];
+    if (prop.slice(0, 1) === "@") {
+      const { type, base, ratio, range, subSequence, h1Matches, unit } = props;
+      merge(mediaProps, {
+        type,
+        base,
+        ratio,
+        range,
+        subSequence,
+        h1Matches,
+        unit,
+        sequence: {},
+        scales: {},
+        templates: {},
+        vars: {}
+      });
+      generateSequence(mediaProps);
+      const mediaName = prop.slice(1);
+      applySequenceVars(mediaProps, mediaName);
+      const query = MEDIA[mediaName];
+      TYPOGRAPHY.templates[`@media screen and ${query}`] = {
+        fontSize: mediaProps.base / TYPOGRAPHY.browserDefault + unit
+      };
+    }
+  }
+};
+const applyHeadings = (props) => {
+  const CONFIG = getActiveConfig();
+  if (props.h1Matches) {
+    const unit = props.unit;
+    const HEADINGS = findHeadings(props);
+    const { templates } = props;
+    for (const k in HEADINGS) {
+      const headerName = `h${parseInt(k) + 1}`;
+      const headerStyle = templates[headerName];
+      templates[headerName] = {
+        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k].variable})` : `${HEADINGS[k].scaling}${unit}`,
+        margin: headerStyle ? headerStyle.margin : 0,
+        lineHeight: headerStyle ? headerStyle.lineHeight : props.lineHeight,
+        letterSpacing: headerStyle ? headerStyle.letterSpacing : props.letterSpacing,
+        fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
+      };
+    }
+  }
+};
+const applyTypographySequence = () => {
+  const CONFIG = getActiveConfig();
+  const { TYPOGRAPHY } = CONFIG;
+  generateSequence(TYPOGRAPHY);
+  applyHeadings(TYPOGRAPHY);
+  applySequenceVars(TYPOGRAPHY);
+  runThroughMedia(TYPOGRAPHY);
+};
+const getFontSizeByKey = (value) => {
+  const CONFIG = getActiveConfig();
+  const { TYPOGRAPHY } = CONFIG;
+  return getSequenceValuePropertyPair(
+    value,
+    "fontSize",
+    TYPOGRAPHY
+  );
+};
+export {
+  applyHeadings,
+  applyTypographySequence,
+  getFontSizeByKey,
+  runThroughMedia
+};

package/dist/esm/tests/index.js

@@ -0,0 +1,8 @@
+const testWCAGAA = (colorA, colorB) => {
+};
+const testWCAGAAA = (colorA, colorB) => {
+};
+export {
+  testWCAGAA,
+  testWCAGAAA
+};

package/dist/esm/utils/color.js

@@ -0,0 +1,143 @@
+import { document, window } from "@domql/globals";
+const ENV = "development";
+const 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 (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)
+        return;
+      elem.style.color = color;
+      if (elem.style.color === flag || elem.style.color === "")
+        return;
+      color = window.getComputedStyle(elem).color;
+      document.body.removeChild(elem);
+    } else
+      console.warn("Color conversion failed, no document or window object found");
+  }
+  if (color.indexOf("rgb") === 0) {
+    if (color.indexOf("rgba") === -1)
+      color = `${color}, 1`;
+    return color.match(/[\.\d]+/g).map((a) => +a);
+  }
+};
+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).toString(16);
+};
+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 (ENV === "test" || ENV === "development")
+      console.warn(color + "color is not rgba");
+    return;
+  }
+  arr[3] = opacity;
+  return `rgba(${arr})`;
+};
+export {
+  changeLightness,
+  colorStringToRgbaArray,
+  getColorShade,
+  hexToRgb,
+  hexToRgbArray,
+  hexToRgba,
+  hslToRgb,
+  mixTwoColors,
+  mixTwoRgb,
+  mixTwoRgba,
+  opacify,
+  rgbArrayToHex,
+  rgbToHSL,
+  rgbToHex
+};

package/dist/esm/utils/font.js

@@ -0,0 +1,50 @@
+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) => url.split(/[#?]/)[0].split(".").pop().trim();
+const setInCustomFontMedia = (str) => `@font-face { ${str} }`;
+const setCustomFont = (name, url, weight) => `
+  font-family: '${name}';
+  font-style: normal;
+  ${weight && `font-weight: ${weight};`}
+  src: url('${url}') format('${getFontFormat(url)}');`;
+const setCustomFontMedia = (name, url, weight) => `@font-face {
+  ${setCustomFont(name, url, weight)}
+}`;
+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) => {
+  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,
+  setCustomFont,
+  setCustomFontMedia,
+  setInCustomFontMedia
+};

package/dist/esm/utils/index.js

@@ -0,0 +1,6 @@
+export * from "./object.js";
+export * from "./color.js";
+export * from "./font.js";
+export * from "./sequence.js";
+export * from "./var.js";
+export * from "./sprite.js";

package/dist/esm/utils/object.js

@@ -0,0 +1,53 @@
+const isString = (arg) => typeof arg === "string";
+const isArray = (arg) => Array.isArray(arg);
+const isObject = (arg) => {
+  if (arg === null)
+    return false;
+  return typeof arg === "object" && arg.constructor === Object;
+};
+const isObjectLike = (arg) => {
+  if (arg === null)
+    return false;
+  return typeof arg === "object";
+};
+const merge = (obj, original) => {
+  for (const e in original) {
+    const objProp = obj[e];
+    const originalProp = original[e];
+    if (objProp === void 0) {
+      obj[e] = originalProp;
+    }
+  }
+  return obj;
+};
+const deepMerge = (obj, obj2) => {
+  for (const e in obj2) {
+    const objProp = obj[e];
+    const obj2Prop = obj2[e];
+    if (objProp === void 0) {
+      obj[e] = obj2Prop;
+    } else if (isObjectLike(objProp) && isObject(obj2Prop)) {
+      deepMerge(objProp, obj2Prop);
+    }
+  }
+  return obj;
+};
+const arrayze = (val) => {
+  if (isString(val))
+    return val.split(" ");
+  if (isObject(val))
+    return Object.keys(val).map((v) => val[v]);
+  if (isArray(val))
+    return val;
+};
+const isFunction = (arg) => typeof arg === "function";
+export {
+  arrayze,
+  deepMerge,
+  isArray,
+  isFunction,
+  isObject,
+  isObjectLike,
+  isString,
+  merge
+};