@symbo.ls/scratch 3.4.5 → 3.4.9

package/dist/esm/system/spacing.js

@@ -0,0 +1,121 @@
+import { arrayzeValue } from "@symbo.ls/smbls-utils";
+import { isArray, isString, merge } from "@domql/utils";
+import { getActiveConfig } from "../factory.js";
+import {
+  CSS_UNITS,
+  applyMediaSequenceVars,
+  applySequenceVars,
+  generateSequence,
+  getFnPrefixAndValue,
+  getSequenceValuePropertyPair
+} from "../utils";
+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 } = CONFIG;
+  generateSequence(SPACING);
+  applySequenceVars(SPACING);
+  runThroughMedia(SPACING);
+};
+const getSequence = (sequenceProps) => {
+  const CONFIG = getActiveConfig();
+  const { 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 } = 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

@@ -0,0 +1,77 @@
+import { document } from "@domql/utils";
+import { generateSprite, convertSvgToSymbol } from "../utils";
+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] = CONFIG.SVG[key];
+  appendSVG(lib, options);
+};
+const setSvgIcon = (val, key) => {
+  const CONFIG = getActiveConfig();
+  if (CONFIG.useIconSprite && !CONFIG.SEMANTIC_ICONS?.[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] = CONFIG.ICONS[key];
+  appendSVG(lib, options);
+};
+const createSVGSpriteElement = (options = { isRoot: true }) => {
+  if (!document || !document.createElementNS) return;
+  const svgElem = document.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 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);
+  if (exists) {
+    const tempSVG = createSVGSpriteElement({ isRoot: false });
+    tempSVG.innerHTML = SVGsprite;
+    exists.append(...tempSVG.children);
+  } else {
+    const svgSpriteDOM = createSVGSpriteElement();
+    if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+      svgSpriteDOM.innerHTML = SVGsprite;
+      doc.body.prepend(svgSpriteDOM);
+    }
+  }
+};
+export {
+  appendSVGSprite,
+  appendSvgIconsSprite,
+  setSVG,
+  setSvgIcon
+};

package/dist/esm/system/theme.js

@@ -0,0 +1,219 @@
+import { getColor } from "./color";
+import { getActiveConfig } from "../factory.js";
+import { isCSSVar } from "../utils/color.js";
+import {
+  isObject,
+  isString,
+  isObjectLike,
+  isArray
+} from "@domql/utils";
+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) && isCSSVar(val)) {
+    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 " + (query === "print" ? `${query}` : `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) && 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 || modifier)) {
+    themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
+  }
+  const resolvedTheme = recursiveTheme(themeValue);
+  return resolvedTheme;
+};
+export {
+  getMediaTheme,
+  getTheme,
+  setMediaTheme,
+  setTheme
+};

package/dist/esm/system/timing.js

@@ -0,0 +1,32 @@
+import { toCamelCase } from "@symbo.ls/smbls-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,85 @@
+import { merge } from "@domql/utils";
+import { getActiveConfig } from "../factory.js";
+import {
+  applyMediaSequenceVars,
+  applySequenceVars,
+  findHeadings,
+  generateSequence,
+  getSequenceValuePropertyPair
+} from "../utils";
+const runThroughMedia = (FACTORY) => {
+  const CONFIG = getActiveConfig();
+  const { TYPOGRAPHY, MEDIA } = CONFIG;
+  for (const prop in FACTORY) {
+    const isPropMedia = prop.slice(0, 1) === "@";
+    const mediaValue = FACTORY[prop];
+    if (!isPropMedia) continue;
+    const { mediaRegenerate } = FACTORY;
+    const mediaName = prop.slice(1);
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY;
+    merge(mediaValue, {
+      type,
+      base,
+      ratio,
+      range,
+      subSequence,
+      h1Matches,
+      unit
+    });
+    const query = MEDIA[mediaName];
+    const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+    TYPOGRAPHY.templates[media] = {
+      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
+    };
+    if (!mediaRegenerate) {
+      applyMediaSequenceVars(FACTORY, prop);
+      continue;
+    }
+    merge(mediaValue, {
+      sequence: {},
+      scales: {},
+      templates: {},
+      vars: {}
+    });
+    generateSequence(mediaValue);
+    applyMediaSequenceVars(FACTORY, prop);
+  }
+};
+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
+};