@symbo.ls/scratch 3.8.9 → 3.14.1

package/dist/esm/defaultConfig/spacing.js

@@ -1,18 +0,0 @@
-import { sequence } from "./sequence.js";
-import { typography } from "./typography.js";
-const defaultProps = {
-  base: typography.base,
-  type: "spacing",
-  ratio: sequence.phi,
-  range: [-5, 15],
-  subSequence: true,
-  mediaRegenerate: false,
-  unit: "em",
-  sequence: {},
-  scales: {},
-  vars: {}
-};
-const spacing = defaultProps;
-export {
-  spacing
-};

package/dist/esm/defaultConfig/svg.js

@@ -1,6 +0,0 @@
-const svg = {};
-const svg_data = {};
-export {
-  svg,
-  svg_data
-};

package/dist/esm/defaultConfig/templates.js

@@ -1,4 +0,0 @@
-const templates = {};
-export {
-  templates
-};

package/dist/esm/defaultConfig/theme.js

@@ -1,16 +0,0 @@
-const themeA = {
-  // eslint-disable-line no-unused-vars
-  text: "blue",
-  background: "white",
-  border: "black",
-  // .opacity(0.2),
-  active: {},
-  helpers: [],
-  themes: {},
-  inverse: {}
-  // schemeAInverse
-};
-const theme = {};
-export {
-  theme
-};

package/dist/esm/defaultConfig/timing.js

@@ -1,17 +0,0 @@
-import { sequence } from "./sequence";
-const defaultProps = {
-  default: 150,
-  base: 150,
-  type: "timing",
-  ratio: sequence["perfect-fourth"],
-  range: [-3, 12],
-  mediaRegenerate: false,
-  unit: "ms",
-  sequence: {},
-  scales: {},
-  vars: {}
-};
-const timing = defaultProps;
-export {
-  timing
-};

package/dist/esm/defaultConfig/typography.js

@@ -1,21 +0,0 @@
-import { sequence } from "./sequence.js";
-const defaultProps = {
-  browserDefault: 16,
-  base: 16,
-  type: "font-size",
-  ratio: sequence["minor-third"],
-  range: [-3, 12],
-  h1Matches: 6,
-  lineHeight: 1.5,
-  subSequence: true,
-  mediaRegenerate: false,
-  unit: "em",
-  templates: {},
-  sequence: {},
-  scales: {},
-  vars: {}
-};
-const typography = defaultProps;
-export {
-  typography
-};

package/dist/esm/defaultConfig/unit.js

@@ -1,6 +0,0 @@
-const unit = {
-  default: "em"
-};
-export {
-  unit
-};

package/dist/esm/factory.js

@@ -1,60 +0,0 @@
-import {
-  deepClone,
-  deepMerge,
-  isDefined,
-  isObject
-} from "@domql/utils";
-import * as CONF from "./defaultConfig";
-const CSS_VARS = {};
-const CSS_MEDIA_VARS = {};
-const _CONF = CONF;
-const _confLower = {};
-const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
-const toUpper = (s) => s.replace(/([A-Z])/g, "_$1").toUpperCase();
-for (const key in _CONF) {
-  const lower = key.toLowerCase();
-  _confLower[lower] = _CONF[key];
-  const camel = toCamel(lower);
-  if (camel !== lower) _confLower[camel] = _CONF[key];
-  if (lower !== key) _confLower[key] = _CONF[key];
-  const upper = toUpper(key);
-  if (upper !== key) _confLower[upper] = _CONF[key];
-}
-const CONFIG = {
-  verbose: false,
-  useVariable: true,
-  useReset: true,
-  globalTheme: "auto",
-  CSS_VARS,
-  CSS_MEDIA_VARS,
-  ..._confLower
-};
-const cachedConfig = deepClone(CONFIG);
-const FACTORY = {
-  active: "0",
-  0: CONFIG
-};
-const activateConfig = (def) => {
-  if (isDefined(def)) {
-    FACTORY.active = def;
-  }
-  return FACTORY[def || FACTORY.active];
-};
-const getActiveConfig = (def) => {
-  return FACTORY[def || FACTORY.active] || CONFIG;
-};
-const setActiveConfig = (newConfig) => {
-  if (!isObject(newConfig)) return;
-  FACTORY.active = "1";
-  FACTORY["1"] = deepMerge(newConfig, deepClone(cachedConfig));
-  return newConfig;
-};
-export {
-  CONFIG,
-  CSS_MEDIA_VARS,
-  CSS_VARS,
-  FACTORY,
-  activateConfig,
-  getActiveConfig,
-  setActiveConfig
-};

package/dist/esm/index.js

@@ -1,12 +0,0 @@
-import * as scratchUtils from "./utils/index.js";
-import * as scratchSystem from "./system/index.js";
-export * from "./factory.js";
-export * from "./defaultConfig";
-export * from "./system";
-export * from "./utils";
-export * from "./transforms";
-export * from "./set.js";
-export {
-  scratchSystem,
-  scratchUtils
-};

package/dist/esm/set.js

@@ -1,219 +0,0 @@
-import { FACTORY, getActiveConfig, setActiveConfig } from "./factory.js";
-import {
-  setColor,
-  setGradient,
-  setFont,
-  setFontFamily,
-  setTheme,
-  setSvgIcon,
-  setSVG,
-  applyTypographySequence,
-  applySpacingSequence,
-  applyReset,
-  applyTimingSequence,
-  applyDocument,
-  setShadow
-} from "./system";
-import { deepMerge } from "@domql/utils";
-const setVars = (val, key) => {
-  const CONFIG = getActiveConfig();
-  const { CSS_VARS } = CONFIG;
-  const varName = key.startsWith("--") ? key : `--${key}`;
-  CSS_VARS[varName] = val;
-  return val;
-};
-const asIs = (val) => val;
-const VALUE_TRANSFORMERS = {
-  color: setColor,
-  gradient: setGradient,
-  font: setFont,
-  font_family: setFontFamily,
-  fontfamily: setFontFamily,
-  theme: setTheme,
-  icons: setSvgIcon,
-  semantic_icons: asIs,
-  semanticicons: asIs,
-  svg: setSVG,
-  svg_data: asIs,
-  typography: asIs,
-  shadow: setShadow,
-  spacing: asIs,
-  media: asIs,
-  grid: asIs,
-  class: asIs,
-  timing: asIs,
-  reset: asIs,
-  unit: asIs,
-  animation: asIs,
-  vars: setVars
-};
-const setValue = (factoryName, value, key) => {
-  const CONFIG = getActiveConfig();
-  const lowerName = factoryName.toLowerCase();
-  const FACTORY2 = CONFIG[lowerName] || CONFIG[factoryName];
-  if (VALUE_TRANSFORMERS[lowerName]) {
-    try {
-      const result = VALUE_TRANSFORMERS[lowerName](value, key);
-      FACTORY2[key] = result;
-      return FACTORY2;
-    } catch (error) {
-      if (CONFIG.verbose)
-        console.warn("Error setting", lowerName, "value", value, key, error);
-    }
-  }
-  if (CONFIG.verbose)
-    console.warn("Can not find", lowerName, "method in scratch");
-};
-const setEach = (factoryName, props) => {
-  const CONFIG = getActiveConfig();
-  const lowerName = factoryName.toLowerCase();
-  const keys = Object.keys(props);
-  keys.forEach((key) => {
-    try {
-      return setValue(lowerName, props[key], key);
-    } catch (error) {
-      if (CONFIG.verbose)
-        console.warn(
-          "Error setting",
-          lowerName,
-          "value",
-          props[key],
-          key,
-          error
-        );
-    }
-  });
-  return CONFIG[lowerName] || CONFIG[factoryName];
-};
-const changeGlobalTheme = (newTheme) => {
-  const CONFIG = getActiveConfig();
-  CONFIG.globalTheme = newTheme;
-  if (typeof document !== "undefined" && newTheme && newTheme !== "auto") {
-    document.documentElement.setAttribute("data-theme", newTheme);
-  }
-  for (const key in CONFIG.CSS_VARS) {
-    if (key.startsWith("--theme-")) delete CONFIG.CSS_VARS[key];
-  }
-  for (const key in CONFIG.CSS_MEDIA_VARS) {
-    delete CONFIG.CSS_MEDIA_VARS[key];
-  }
-  const source = CONFIG._originalTheme || CONFIG.theme;
-  if (source) {
-    const fresh = JSON.parse(JSON.stringify(source));
-    CONFIG.theme = fresh;
-    setEach("theme", fresh);
-  }
-  if (typeof document !== "undefined" && CONFIG.CSS_VARS) {
-    const sheets = document.styleSheets;
-    for (let i = 0; i < sheets.length; i++) {
-      try {
-        const rules = sheets[i].cssRules;
-        for (let j = 0; j < rules.length; j++) {
-          if (rules[j].selectorText === ":root") {
-            for (const key in CONFIG.CSS_VARS) {
-              rules[j].style.setProperty(key, CONFIG.CSS_VARS[key]);
-            }
-            return CONFIG;
-          }
-        }
-      } catch (e) {
-      }
-    }
-  }
-  return CONFIG;
-};
-const SET_OPTIONS = {};
-const set = (recivedConfig, options = SET_OPTIONS) => {
-  let CONFIG = getActiveConfig();
-  const {
-    version,
-    verbose,
-    useVariable,
-    useReset,
-    useSvgSprite,
-    useFontImport,
-    useIconSprite,
-    globalTheme,
-    useDocumentTheme,
-    useDefaultConfig,
-    semanticIcons,
-    SEMANTIC_ICONS,
-    // deprecated
-    semantic_icons,
-    files,
-    ...config
-  } = recivedConfig;
-  if (options.newConfig) {
-    CONFIG = setActiveConfig(options.newConfig);
-  }
-  if (files !== void 0) CONFIG.files = files;
-  if (verbose !== void 0) CONFIG.verbose = verbose;
-  if (useVariable !== void 0) CONFIG.useVariable = useVariable;
-  if (useReset !== void 0) CONFIG.useReset = useReset;
-  if (useFontImport !== void 0) CONFIG.useFontImport = useFontImport;
-  if (useSvgSprite !== void 0) CONFIG.useSvgSprite = useSvgSprite;
-  if (useIconSprite !== void 0) CONFIG.useIconSprite = useIconSprite;
-  if (useDocumentTheme !== void 0) CONFIG.useDocumentTheme = useDocumentTheme;
-  if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
-  if (recivedConfig.useThemeSuffixedVars !== void 0)
-    CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
-  if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
-  const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons;
-  if (_semanticIcons !== void 0) {
-    CONFIG.semantic_icons = _semanticIcons;
-    CONFIG.semanticIcons = CONFIG.semantic_icons;
-    CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
-  }
-  if (CONFIG.verbose) console.log(CONFIG);
-  if (typeof document !== "undefined" && CONFIG.globalTheme && CONFIG.globalTheme !== "auto") {
-    document.documentElement.setAttribute("data-theme", CONFIG.globalTheme);
-  }
-  if (!CONFIG.__svg_cache) CONFIG.__svg_cache = {};
-  const keys = Object.keys(config);
-  const keySet = new Set(keys);
-  keys.forEach((key) => {
-    const lower = key.toLowerCase();
-    if (lower !== key && keySet.has(lower)) {
-      deepMerge(config[lower], config[key]);
-    }
-  });
-  if (config.theme && !CONFIG._originalTheme) {
-    CONFIG._originalTheme = JSON.parse(JSON.stringify(config.theme));
-  }
-  keys.map((key) => {
-    const lower = key.toLowerCase();
-    if (lower !== key && keySet.has(lower)) return;
-    return setEach(key, config[key]);
-  });
-  if (config.typography || config.TYPOGRAPHY) {
-    try {
-      applyTypographySequence();
-    } catch (e) {
-      if (CONFIG.verbose) console.warn("Error applying typography sequence", e);
-    }
-  }
-  if (config.spacing || config.SPACING) {
-    try {
-      applySpacingSequence();
-    } catch (e) {
-      if (CONFIG.verbose) console.warn("Error applying spacing sequence", e);
-    }
-  }
-  if (config.timing || config.TIMING) {
-    try {
-      applyTimingSequence();
-    } catch (e) {
-      if (CONFIG.verbose) console.warn("Error applying timing sequence", e);
-    }
-  }
-  applyDocument();
-  applyReset();
-  return CONFIG;
-};
-export {
-  VALUE_TRANSFORMERS,
-  changeGlobalTheme,
-  set,
-  setEach,
-  setValue
-};

package/dist/esm/system/color.js

@@ -1,193 +0,0 @@
-import { isObject, isArray, isString } from "@domql/utils";
-import { getActiveConfig } from "../factory.js";
-import {
-  colorStringToRgbaArray,
-  getRgbTone,
-  isCSSVar,
-  parseColorToken
-} from "../utils";
-const getColor = (value, key, config) => {
-  const CONFIG = config || getActiveConfig();
-  if (!isString(value)) {
-    if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
-    return;
-  }
-  if (isCSSVar(value)) return `var(${value})`;
-  if (key && value[key]) value = value[key];
-  let name, alpha, tone;
-  if (isArray(value)) {
-    [name, alpha, tone] = value;
-  } else {
-    const parsed = parseColorToken(value);
-    if (!parsed) {
-      const { color: COLOR2, gradient: GRADIENT2 } = CONFIG;
-      const directVal = GRADIENT2[value] || COLOR2[value];
-      if (directVal) return CONFIG.useVariable ? `var(${directVal.var})` : directVal.value;
-      return value;
-    }
-    if (parsed.passthrough) return parsed.passthrough;
-    if (parsed.cssVar) return `var(${parsed.cssVar})`;
-    name = parsed.name;
-    alpha = parsed.alpha;
-    tone = parsed.tone;
-  }
-  const { color: COLOR, gradient: GRADIENT } = CONFIG;
-  let val = COLOR[name] || GRADIENT[name];
-  if (!val) {
-    if (CONFIG.verbose) console.warn("Can't find color ", name);
-    return value;
-  }
-  if (key) {
-    if (val[key]) val = val[key];
-    else if (CONFIG.verbose) console.warn(value, " - does not have ", key);
-  }
-  let rgb = val.rgb;
-  if (!rgb) {
-    return CONFIG.useVariable ? `var(${val.var})` : val.value;
-  }
-  if (tone && !val[tone]) {
-    rgb = getRgbTone(rgb, tone);
-    val[tone] = { rgb, var: `${val.var}-${tone}` };
-  }
-  if (val[tone]) rgb = val[tone].rgb;
-  if (alpha) return `rgba(${rgb}, ${alpha})`;
-  if (tone) return `rgba(${rgb}, 1)`;
-  return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
-};
-const getMediaColor = (value, globalTheme, config) => {
-  const CONFIG = config || getActiveConfig();
-  if (!globalTheme) globalTheme = CONFIG.globalTheme === "auto" ? null : CONFIG.globalTheme;
-  if (!isString(value)) {
-    if (CONFIG.verbose) console.warn(value, "- type for color is not valid");
-    return;
-  }
-  if (isCSSVar(value)) return `var(${value})`;
-  let name;
-  if (isArray(value)) {
-    name = value[0];
-  } else {
-    const parsed = parseColorToken(value);
-    if (!parsed) return value;
-    if (parsed.passthrough) return parsed.passthrough;
-    if (parsed.cssVar) return `var(${parsed.cssVar})`;
-    name = parsed.name;
-  }
-  const { color: COLOR, gradient: GRADIENT } = CONFIG;
-  const val = COLOR[name] || GRADIENT[name];
-  const isObj = isObject(val);
-  if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
-  else if (isObj) {
-    if (globalTheme) return getColor(value, `@${globalTheme}`, config);
-    else {
-      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] = getColor(value, mediaName, config);
-      }
-      return obj;
-    }
-  } else {
-    if (CONFIG.verbose) console.warn("Can't find color", value);
-    return value;
-  }
-};
-const setColor = (val, key, suffix) => {
-  const CONFIG = getActiveConfig();
-  if (isString(val) && isCSSVar(val)) {
-    const rawRef = val.slice(2);
-    val = getColor(rawRef);
-    if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
-      const parts = rawRef.split(" ");
-      const refColor = CONFIG.color[parts[0]];
-      if (refColor && refColor.value) {
-        let rgb2 = refColor.rgb;
-        const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
-        const tone = parts[2];
-        if (tone) {
-          rgb2 = getRgbTone(rgb2, tone);
-        }
-        val = `rgba(${rgb2}, ${alpha2})`;
-      } else {
-        const tone = parts[2];
-        const alpha2 = parts[1] !== void 0 ? parts[1] : "1";
-        if (tone) {
-          try {
-            const rgb2 = colorStringToRgbaArray(parts[0]);
-            if (rgb2 && rgb2.length >= 3) {
-              const tonedRgb = getRgbTone(rgb2.slice(0, 3).join(", "), tone);
-              val = `rgba(${tonedRgb}, ${alpha2})`;
-            } else {
-              val = parts[0];
-            }
-          } catch (e) {
-            val = parts[0];
-          }
-        } else {
-          val = parts[0];
-        }
-      }
-    }
-  }
-  if (isArray(val)) {
-    return {
-      "@light": setColor(val[0], key, "light"),
-      "@dark": setColor(val[1], key, "dark")
-    };
-  }
-  if (isObject(val)) {
-    const obj = {};
-    for (const variant in val) {
-      obj[variant] = setColor(
-        val[variant],
-        key,
-        variant.slice(0, 1) === "@" ? variant.slice(1) : variant
-      );
-    }
-    return obj;
-  }
-  const CSSVar = `--color-${key}` + (suffix ? `-${suffix}` : "");
-  const colorArr = colorStringToRgbaArray(val.value || val);
-  const [r, g, b, a = 1] = colorArr;
-  const alpha = parseFloat(a.toFixed(2));
-  const rgb = `${r}, ${g}, ${b}`;
-  const value = `rgba(${rgb}, ${alpha})`;
-  if (CONFIG.useVariable) {
-    CONFIG.CSS_VARS[CSSVar] = value;
-  }
-  return {
-    var: CSSVar,
-    rgb,
-    alpha,
-    value
-  };
-};
-const setGradient = (val, key, suffix) => {
-  const CONFIG = getActiveConfig();
-  if (isString(val) && isCSSVar(val)) val = getColor(val.slice(2));
-  if (isArray(val)) {
-    return {
-      "@light": setGradient(val[0], key, "light"),
-      "@dark": setGradient(val[0], key, "dark")
-    };
-  }
-  if (isObject(val)) {
-    const obj = {};
-    for (const variant in val) obj[variant] = setGradient(val[variant], key, variant.slice(0, 1) === "@" ? variant.slice(1) : variant);
-    return obj;
-  }
-  const CSSVar = `--gradient-${key}` + (suffix ? `-${suffix}` : "");
-  if (CONFIG.useVariable) {
-    CONFIG.CSS_VARS[CSSVar] = val.value || val;
-  }
-  return {
-    var: CSSVar,
-    value: val.value || val
-  };
-};
-export {
-  getColor,
-  getMediaColor,
-  setColor,
-  setGradient
-};

package/dist/esm/system/document.js

@@ -1,16 +0,0 @@
-import { merge } from "@domql/utils";
-import { getActiveConfig } from "../factory.js";
-import { getDefaultOrFirstKey } from "../utils";
-const applyDocument = () => {
-  const CONFIG = getActiveConfig();
-  const { document: DOCUMENT, font_family: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG;
-  return merge(DOCUMENT, {
-    theme: THEME.document,
-    fontFamily: getDefaultOrFirstKey(FONT_FAMILY),
-    fontSize: TYPOGRAPHY.base,
-    lineHeight: TYPOGRAPHY.lineHeight
-  });
-};
-export {
-  applyDocument
-};

package/dist/esm/system/font.js

@@ -1,58 +0,0 @@
-import { isObject, isArray } from "@domql/utils";
-import { arrayzeValue } from "@symbo.ls/smbls-utils";
-import { getActiveConfig } from "../factory.js";
-import {
-  getDefaultOrFirstKey,
-  getFontFaceEach,
-  isGoogleFontsUrl,
-  setCustomFontMedia,
-  setFontImport,
-  resolveFileUrl
-} from "../utils";
-const setFont = (val, key) => {
-  const CONFIG = getActiveConfig();
-  const CSSvar = `--font-${key}`;
-  if (!val || isArray(val) && !val[0]) return;
-  let fontFace;
-  if (val.isVariable) {
-    const url = resolveFileUrl(val.url, CONFIG.files) || val.url;
-    if (isGoogleFontsUrl(url)) {
-      fontFace = setFontImport(url);
-    } else {
-      fontFace = setCustomFontMedia(key, url, val.fontWeight, {
-        fontStretch: val.fontStretch,
-        fontDisplay: val.fontDisplay || "swap"
-      });
-    }
-  } else if (val[0]) {
-    fontFace = getFontFaceEach(key, val, CONFIG.files);
-  } else {
-    const url = Array.isArray(val.url) ? val.url.map((u) => resolveFileUrl(u, CONFIG.files) || u) : resolveFileUrl(val.url, CONFIG.files) || val.url;
-    fontFace = setCustomFontMedia(key, url, val.fontWeight, {
-      fontStyle: val.fontStyle,
-      fontDisplay: val.fontDisplay,
-      fontStretch: val.fontStretch
-    });
-  }
-  return { var: CSSvar, value: val, fontFace };
-};
-const getFontFamily = (key, factory) => {
-  const CONFIG = getActiveConfig();
-  const { font_family: FONT_FAMILY } = CONFIG;
-  return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
-};
-const setFontFamily = (val, key) => {
-  const CONFIG = getActiveConfig();
-  const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG;
-  let { value, type } = val;
-  if (val.isDefault) FONT_FAMILY.default = key;
-  if (isObject(value)) value = arrayzeValue(value);
-  const CSSvar = `--font-family-${key}`;
-  const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES[type]}`;
-  return { var: CSSvar, value: str, arr: value, type };
-};
-export {
-  getFontFamily,
-  setFont,
-  setFontFamily
-};

package/dist/esm/system/index.js

@@ -1,10 +0,0 @@
-export * from "./color.js";
-export * from "./theme.js";
-export * from "./font.js";
-export * from "./typography.js";
-export * from "./spacing.js";
-export * from "./shadow.js";
-export * from "./timing.js";
-export * from "./document.js";
-export * from "./svg.js";
-export * from "./reset.js";