@symbo.ls/scratch 3.4.4 → 3.4.6

package/dist/esm/defaultConfig/grid.js

@@ -0,0 +1,5 @@
+const defaultProps = {};
+const GRID = defaultProps;
+export {
+  GRID
+};

package/dist/esm/defaultConfig/icons.js

@@ -0,0 +1,6 @@
+const ICONS = {};
+const SEMANTIC_ICONS = {};
+export {
+  ICONS,
+  SEMANTIC_ICONS
+};

package/dist/esm/defaultConfig/index.js

@@ -0,0 +1,24 @@
+export * from "./sequence.js";
+export * from "./unit.js";
+export * from "./typography.js";
+export * from "./font.js";
+export * from "./font-family.js";
+export * from "./media.js";
+export * from "./spacing.js";
+export * from "./color.js";
+export * from "./theme.js";
+export * from "./shadow.js";
+export * from "./icons.js";
+export * from "./timing.js";
+export * from "./document.js";
+export * from "./responsive.js";
+export * from "./cases.js";
+export * from "./animation.js";
+export * from "./svg.js";
+export * from "./templates.js";
+export * from "./grid.js";
+export * from "./class.js";
+const RESET = {};
+export {
+  RESET
+};

package/dist/esm/defaultConfig/media.js

@@ -0,0 +1,9 @@
+const MEDIA = {
+  tv: "(min-width: 2780px)",
+  light: "(prefers-color-scheme: light)",
+  dark: "(prefers-color-scheme: dark)",
+  print: "print"
+};
+export {
+  MEDIA
+};

package/dist/esm/defaultConfig/responsive.js

@@ -0,0 +1,30 @@
+const BREAKPOINTS = {
+  screenL: 1920,
+  screenM: 1680,
+  screenS: 1440,
+  tabletL: 1366,
+  tabletM: 1280,
+  tabletS: 1024,
+  mobileL: 768,
+  mobileM: 560,
+  mobileS: 480,
+  mobileXS: 375
+};
+const DEVICES = {
+  screenXXL: [2560, 1440],
+  screenXL: [2240, 1260],
+  screenL: [1920, 1024],
+  screenM: [1680, 1024],
+  screenS: [1440, 720],
+  tabletL: [1366, 926],
+  tabletM: [1280, 768],
+  tabletS: [1024, 768],
+  mobileL: [768, 375],
+  mobileM: [560, 768],
+  mobileS: [480, 768],
+  mobileXS: [375, 768]
+};
+export {
+  BREAKPOINTS,
+  DEVICES
+};

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/shadow.js

@@ -0,0 +1,9 @@
+const shadow = {
+  // eslint-disable-line
+  name: "primaryShadow",
+  boxShadow: "gray12, 0 0px 50px 50px"
+};
+const SHADOW = {};
+export {
+  SHADOW
+};

package/dist/esm/defaultConfig/spacing.js

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

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

package/dist/esm/defaultConfig/templates.js

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

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,17 @@
+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

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

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

package/dist/esm/system/color.js

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

@@ -0,0 +1,16 @@
+import { merge } from "@domql/utils";
+import { getActiveConfig } from "../factory.js";
+import { getDefaultOrFirstKey } 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,50 @@
+import { isObject, isArray } from "@domql/utils";
+import { arrayzeValue } from "@symbo.ls/smbls-utils";
+import { getActiveConfig } from "../factory.js";
+import {
+  getDefaultOrFirstKey,
+  getFontFaceEach,
+  isGoogleFontsUrl,
+  setCustomFontMedia,
+  setFontImport
+} from "../utils";
+const setFont = (val, key) => {
+  const CSSvar = `--font-${key}`;
+  if (!val || isArray(val) && !val[0]) return;
+  let fontFace;
+  if (val.isVariable) {
+    if (isGoogleFontsUrl(val.url)) {
+      fontFace = setFontImport(val.url);
+    } else {
+      fontFace = setCustomFontMedia(key, val.url, val.fontWeight, {
+        fontStretch: val.fontStretch,
+        fontDisplay: val.fontDisplay || "swap"
+      });
+    }
+  } else if (val[0]) {
+    fontFace = getFontFaceEach(key, val);
+  } else {
+    fontFace = 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 = 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

@@ -0,0 +1,10 @@
+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";

package/dist/esm/system/reset.js

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

package/dist/esm/system/shadow.js

@@ -0,0 +1,91 @@
+import { getActiveConfig } from "../factory.js";
+import { getColor } from "./color.js";
+import { getSpacingByKey } from "./spacing.js";
+import { isResolvedColor, isCSSVar, splitTopLevelCommas, CSS_NATIVE_COLOR_REGEX } from "../utils/color.js";
+import {
+  isObject,
+  isString,
+  isArray
+} from "@domql/utils";
+const setShadow = (value, key, suffix, prefers) => {
+  const CONFIG = getActiveConfig();
+  if (isArray(value)) {
+    return {
+      "@light": setShadow(value[0], key, "light"),
+      "@dark": setShadow(value[1], key, "dark")
+    };
+  }
+  if (isObject(value)) {
+    const obj = {};
+    for (const variant in value) {
+      obj[variant] = setShadow(
+        value[variant],
+        key,
+        variant.startsWith("@") ? variant.slice(1) : variant
+      );
+    }
+    return obj;
+  }
+  if (isString(value) && !CSS_NATIVE_COLOR_REGEX.test(value)) {
+    value = splitTopLevelCommas(value).map((shadow) => {
+      shadow = shadow.trim();
+      return shadow.split(/\s+/).map((v) => {
+        v = v.trim();
+        if (!v) return "";
+        if (v.startsWith("--")) return `var(${v})`;
+        const color = getColor(v);
+        if (isResolvedColor(color)) return color;
+        if (/^\d/.test(v) || v === "0" || v.includes("px") || v.slice(-2) === "em") return v;
+        if (v === "inset" || v === "none") return v;
+        const spacing = getSpacingByKey(v, "shadow");
+        if (spacing && spacing.shadow) return spacing.shadow;
+        return v;
+      }).join(" ");
+    }).join(", ");
+  }
+  const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
+  if (CONFIG.useVariable) {
+    CONFIG.CSS_VARS[CSSVar] = value;
+  }
+  return {
+    var: CSSVar,
+    value
+  };
+};
+const getShadow = (value, 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 (isCSSVar(value)) return `var(${value})`;
+  const [name] = isArray(value) ? value : value.split(" ");
+  const { SHADOW } = CONFIG;
+  const val = SHADOW[name];
+  const isObj = isObject(val);
+  if (!val) {
+    if (CONFIG.verbose) console.warn("Can't find color ", name);
+    return value;
+  }
+  if (globalTheme) {
+    if (val[globalTheme]) return val[globalTheme].value;
+    else if (CONFIG.verbose) console.warn(value, " - does not have ", globalTheme);
+  }
+  if (isObj && val.value) return val.value;
+  if (isObj) {
+    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] = val.value;
+    }
+    return obj;
+  }
+  if (CONFIG.verbose) console.warn("Can't find color", value);
+  return value;
+};
+export {
+  getShadow,
+  setShadow
+};