@symbo.ls/scratch 2.10.162 → 2.10.164

package/dist/esm/system/reset.js

@@ -1,63 +0,0 @@
-import { getActiveConfig } from "../factory.js";
-import { getMediaTheme } from ".";
-import { deepMerge, merge } from "@domql/utils";
-const applyReset = (reset = {}) => {
-  const CONFIG = getActiveConfig();
-  const { CSS_VARS, RESET, TYPOGRAPHY, DOCUMENT } = CONFIG;
-  if (RESET) {
-    if (RESET[":root"]) {
-      const configReset = RESET;
-      const configTemplates = TYPOGRAPHY.templates;
-      configReset.body = {
-        ...getMediaTheme("document", `@${CONFIG.globalTheme}`),
-        ...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;
-    return deepMerge(merge(RESET, reset), {
-      html: {
-        position: "absolute",
-        overflow: "hidden",
-        width: "100%",
-        height: "100%",
-        top: "0",
-        left: "0",
-        margin: "0",
-        WebkitFontSmoothing: "antialiased",
-        transform: "translate3d(0, 0, 1px)",
-        scrollBehavior: "smooth",
-        fontSize: 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,
-        ...CONFIG.useDocumentTheme ? getMediaTheme("document", `@${CONFIG.globalTheme}`) : {},
-        ...templates,
-        ...body
-      },
-      // form elements
-      fieldset: {
-        border: 0,
-        padding: 0,
-        margin: 0
-      },
-      "select, input": {
-        fontFamily: DOCUMENT.fontFamily
-      }
-    });
-  }
-};
-export {
-  applyReset
-};

package/dist/esm/system/spacing.js

@@ -1,115 +0,0 @@
-import { getActiveConfig } from "../factory.js";
-import { isString } from "@domql/utils";
-import {
-  applySequenceVars,
-  arrayze,
-  generateSequence,
-  getSequenceValuePropertyPair,
-  merge
-} from "../utils";
-const runThroughMedia = (sequenceProps) => {
-  for (const prop in sequenceProps) {
-    const mediaProps = sequenceProps[prop];
-    if (prop.slice(0, 1) === "@") {
-      const { type, base, ratio, range, subSequence, h1Matches, unit } = sequenceProps;
-      merge(mediaProps, {
-        type,
-        base,
-        ratio,
-        range,
-        subSequence,
-        h1Matches,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      });
-      generateSequence(mediaProps);
-      const mediaName = prop.slice(1);
-      applySequenceVars(mediaProps, mediaName);
-    }
-  }
-};
-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)
-    return SPACING;
-  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
-  return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
-};
-const getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
-  const sequence = getSequence(sequenceProps);
-  const stack = arrayze(value);
-  if (!stack)
-    return;
-  if (isString(value) && value.includes("calc")) {
-    return { [propertyName]: value };
-  }
-  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
-    );
-    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
-  }
-  return getSequenceValuePropertyPair(
-    value,
-    propertyName,
-    sequence
-  );
-};
-const getSpacingBasedOnRatio = (props, propertyName, val) => {
-  const CONFIG = getActiveConfig();
-  const { SPACING } = CONFIG;
-  const { spacingRatio, unit } = props;
-  const value = val || props[propertyName];
-  if (spacingRatio) {
-    let sequenceProps = SPACING[spacingRatio];
-    if (!sequenceProps) {
-      const { type, base, range, subSequence } = SPACING;
-      sequenceProps = SPACING[spacingRatio] = merge({
-        ratio: spacingRatio,
-        type: type + "-" + spacingRatio,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      }, {
-        base,
-        range,
-        subSequence,
-        ratio: SPACING.ratio,
-        unit: SPACING.unit
-      });
-    }
-    applySequenceVars(sequenceProps, null, { useDefault: false });
-    return getSpacingByKey(value, propertyName, sequenceProps);
-  }
-  return getSpacingByKey(value, propertyName);
-};
-export {
-  applySpacingSequence,
-  getSpacingBasedOnRatio,
-  getSpacingByKey
-};

package/dist/esm/system/svg.js

@@ -1,61 +0,0 @@
-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

@@ -1,240 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

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