@symbo.ls/scratch 2.10.149 → 2.10.156

package/dist/esm/defaultConfig/sequence.js

@@ -0,0 +1,29 @@
+const SEQUENCE = {
+  "minor-second": 1.067,
+  "major-second": 1.125,
+  "minor-third": 1.2,
+  "major-third": 1.25,
+  "perfect-fourth": 1.333,
+  "augmented-fourth": 1.414,
+  "perfect-fifth": 1.5,
+  "minor-sixth": 1.6,
+  phi: 1.618,
+  // golden-ratio
+  "major-sixth": 1.667,
+  "square-root-3": 1.732,
+  // theodorus
+  "minor-seventh": 1.778,
+  "major-seventh": 1.875,
+  octave: 2,
+  "square-root-5": 2.23,
+  // pythagoras
+  "major-tenth": 2.5,
+  "major-eleventh": 2.667,
+  "major-twelfth": 3,
+  pi: 3.14,
+  // archimedes
+  "double-octave": 4
+};
+export {
+  SEQUENCE
+};

package/dist/esm/defaultConfig/spacing.js

@@ -0,0 +1,16 @@
+import { SEQUENCE, TYPOGRAPHY } from ".";
+const defaultProps = {
+  base: TYPOGRAPHY.base,
+  type: "spacing",
+  ratio: SEQUENCE.phi,
+  range: [-5, 15],
+  subSequence: true,
+  unit: "em",
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+const SPACING = defaultProps;
+export {
+  SPACING
+};

package/dist/esm/defaultConfig/svg.js

@@ -0,0 +1,6 @@
+const SVG = {};
+const SVG_DATA = {};
+export {
+  SVG,
+  SVG_DATA
+};

package/dist/esm/defaultConfig/theme.js

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

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

package/dist/esm/defaultConfig/typography.js

@@ -0,0 +1,19 @@
+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,
+  unit: "em",
+  templates: {},
+  sequence: {},
+  scales: {},
+  vars: {}
+};
+const TYPOGRAPHY = defaultProps;
+export {
+  TYPOGRAPHY
+};

package/dist/esm/defaultConfig/unit.js

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

package/dist/esm/factory.js

@@ -0,0 +1,39 @@
+import { deepClone, isDefined } from "@domql/utils";
+import * as CONF from "./defaultConfig";
+const CSS_VARS = {};
+const CONFIG = {
+  verbose: false,
+  useVariable: true,
+  useReset: true,
+  CSS_VARS,
+  ...CONF
+};
+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) => {
+  if (isDefined(def) && !FACTORY[def]) {
+    FACTORY[def] = deepClone(cachedConfig);
+    return FACTORY[def];
+  }
+  return FACTORY[def || FACTORY.active];
+};
+const setActiveConfig = (def) => {
+  return FACTORY.active = FACTORY[def];
+};
+export {
+  CONFIG,
+  CSS_VARS,
+  FACTORY,
+  activateConfig,
+  getActiveConfig,
+  setActiveConfig
+};

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from "./factory.js";
+export * from "./utils";
+export * from "./set.js";
+export * from "./defaultConfig";

package/dist/esm/set.js

@@ -0,0 +1,113 @@
+import { FACTORY, getActiveConfig } from "./factory.js";
+import {
+  setColor,
+  setGradient,
+  setFont,
+  setFontFamily,
+  setTheme,
+  setIcon,
+  setSVG,
+  applyTypographySequence,
+  applySpacingSequence,
+  applyReset,
+  applyTimingSequence,
+  applyDocument
+} from "./system";
+import { isFunction } from "./utils";
+const ENV = "development";
+const setCases = (val, key) => {
+  if (isFunction(val))
+    return val();
+  return val;
+};
+const setSameValue = (val, key) => val;
+const VALUE_TRANSFORMERS = {
+  color: setColor,
+  gradient: setGradient,
+  font: setFont,
+  font_family: setFontFamily,
+  theme: setTheme,
+  icons: setIcon,
+  svg: setSVG,
+  svg_data: setSameValue,
+  typography: setSameValue,
+  cases: setCases,
+  spacing: setSameValue,
+  media: setSameValue,
+  timing: setSameValue,
+  reset: setSameValue,
+  unit: setSameValue,
+  animation: setSameValue
+};
+const setValue = (FACTORY_NAME, value, key) => {
+  const CONFIG = getActiveConfig();
+  const factoryName = FACTORY_NAME.toLowerCase();
+  const FACTORY2 = CONFIG[FACTORY_NAME];
+  if (VALUE_TRANSFORMERS[factoryName]) {
+    const result = VALUE_TRANSFORMERS[factoryName](value, key);
+    FACTORY2[key] = result;
+    return FACTORY2;
+  }
+  if (CONFIG.verbose)
+    console.warn("Can not find", factoryName, "method in scratch");
+};
+const setEach = (factoryName, props) => {
+  const CONFIG = getActiveConfig();
+  const FACTORY_NAME = factoryName.toUpperCase();
+  const keys = Object.keys(props);
+  keys.map((key) => setValue(FACTORY_NAME, props[key], key));
+  return CONFIG[FACTORY_NAME];
+};
+const SET_OPTIONS = {};
+const set = (recivedConfig, options = SET_OPTIONS) => {
+  let CONFIG = getActiveConfig();
+  const {
+    version,
+    verbose,
+    useVariable,
+    useReset,
+    useSvgSprite,
+    useFontImport,
+    useIconSprite,
+    globalTheme,
+    useDocumentTheme,
+    ...config
+  } = recivedConfig;
+  if (options.newConfig) {
+    FACTORY["active"] = options.newConfig;
+    CONFIG = getActiveConfig(options.newConfig);
+  }
+  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 (CONFIG.verbose)
+    console.log(CONFIG);
+  const keys = Object.keys(config);
+  keys.map((key) => setEach(key, config[key]));
+  applyTypographySequence();
+  applySpacingSequence();
+  applyTimingSequence();
+  applyDocument();
+  applyReset();
+  return CONFIG;
+};
+export * from "./system";
+export {
+  VALUE_TRANSFORMERS,
+  set,
+  setEach,
+  setValue
+};

package/dist/esm/system/color.js

@@ -0,0 +1,156 @@
+import { getActiveConfig } from "../factory.js";
+import { isObject, isArray, isString } from "@domql/utils";
+import {
+  colorStringToRgbaArray,
+  rgbToHSL,
+  hexToRgbArray,
+  rgbArrayToHex,
+  hslToRgb,
+  getColorShade
+} from "../utils";
+const getColor = (value, key) => {
+  const CONFIG = getActiveConfig();
+  if (!isString(value)) {
+    if (CONFIG.verbose)
+      console.warn(value, "- type for color is not valid");
+    return;
+  }
+  if (value.slice(0, 2) === "--")
+    return `var(${value})`;
+  if (key && value[key])
+    value = value[key];
+  const [name, alpha, tone] = isArray(value) ? value : value.split(" ");
+  const { COLOR, 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) {
+    if (tone) {
+      if (!val[tone]) {
+        const toHex = rgbArrayToHex(rgb.split(", ").map((v) => parseFloat(v)));
+        if (tone.slice(0, 1) === "-" || tone.slice(0, 1) === "+") {
+          rgb = hexToRgbArray(getColorShade(toHex, parseFloat(tone))).join(", ");
+        } else {
+          const [r, g, b] = [...rgb.split(", ").map((v) => parseInt(v))];
+          const hsl = rgbToHSL(r, g, b);
+          const [h, s, l] = hsl;
+          const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255);
+          rgb = newRgb;
+        }
+        val[tone] = { rgb, var: `${val.var}-${tone}` };
+      } else
+        rgb = val[tone].rgb;
+    }
+    if (alpha)
+      return `rgba(${rgb}, ${alpha})`;
+    return CONFIG.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
+  } else
+    return CONFIG.useVariable ? `var(${val.var})` : val.value;
+};
+const getMediaColor = (value, property, globalTheme) => {
+  const CONFIG = getActiveConfig();
+  if (!globalTheme)
+    globalTheme = CONFIG.globalTheme;
+  if (!isString(value)) {
+    if (CONFIG.verbose)
+      console.warn(value, "- type for color is not valid");
+    return;
+  }
+  if (value.slice(0, 2) === "--")
+    return { [property]: `var(${value})` };
+  const [name] = isArray(value) ? value : value.split(" ");
+  const { COLOR, GRADIENT } = CONFIG;
+  const val = COLOR[name] || GRADIENT[name];
+  const isObj = isObject(val);
+  if (isObj && val.value)
+    return { [property]: getColor(value, globalTheme) };
+  else if (isObj) {
+    if (globalTheme)
+      return { [property]: getColor(value, `@${globalTheme}`) };
+    else {
+      const obj = {};
+      for (const mediaName in val) {
+        const query = CONFIG.MEDIA[mediaName.slice(1)];
+        const media = `@media screen and ${query}`;
+        obj[media] = { [property]: getColor(value, mediaName) };
+      }
+      return obj;
+    }
+  } else {
+    if (CONFIG.verbose)
+      console.warn("Can't find color", value);
+    return { [property]: value };
+  }
+};
+const setColor = (val, key, suffix) => {
+  const CONFIG = getActiveConfig();
+  if (isString(val) && val.slice(0, 2) === "--")
+    val = getColor(val.slice(2));
+  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 [r, g, b, a = 1] = colorStringToRgbaArray(val.value || val);
+  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) && val.slice(0, 2) === "--")
+    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

@@ -0,0 +1,15 @@
+import { getActiveConfig } from "../factory.js";
+import { getDefaultOrFirstKey, merge } from "../utils";
+const applyDocument = () => {
+  const CONFIG = getActiveConfig();
+  const { DOCUMENT, FONT_FAMILY, THEME, 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

@@ -0,0 +1,35 @@
+import { isObject } from "@domql/utils";
+import { getActiveConfig } from "../factory.js";
+import {
+  arrayze,
+  getDefaultOrFirstKey,
+  getFontFaceEach,
+  setCustomFontMedia
+} from "../utils";
+const setFont = (val, key) => {
+  const CSSvar = `--font-${key}`;
+  const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
+  return { var: CSSvar, value: val, fontFace };
+};
+const getFontFamily = (key, factory) => {
+  const CONFIG = getActiveConfig();
+  const { FONT_FAMILY } = CONFIG;
+  return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
+};
+const setFontFamily = (val, key) => {
+  const CONFIG = getActiveConfig();
+  const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG;
+  let { value, type } = val;
+  if (val.isDefault)
+    FONT_FAMILY.default = key;
+  if (isObject(value))
+    value = arrayze(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

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

package/dist/esm/system/reset.js

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

@@ -0,0 +1,115 @@
+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
+};