@symbo.ls/scratch 2.10.161 → 2.10.163

package/package.json

@@ -2,17 +2,17 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.10.161",
+  "version": "2.10.163",
   "files": [
     "src",
     "dist"
   ],
   "repository": "https://github.com/symbo-ls/scratch",
   "type": "module",
-  "module": "dist/esm/index.js",
+  "module": "index.js",
   "unpkg": "dist/iife/index.js",
   "jsdelivr": "dist/iife/index.js",
-  "main": "dist/esm/index.js",
+  "main": "index.js",
   "exports": "./dist/cjs/index.js",
   "source": "src/index.js",
   "publishConfig": {},
@@ -21,7 +21,7 @@
     "build:esm": "npx esbuild ./src/*.js ./src/**/*.js --target=es2020 --format=esm --outdir=dist/esm",
     "build:cjs": "npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs",
     "build:iife": "npx esbuild ./src/index.js --target=es2020 --format=iife --outdir=dist/iife --bundle --minify",
-    "build": "yarn build:esm && yarn build:cjs",
+    "build": "yarn build:cjs",
     "prepublish": "rimraf -I dist && yarn build && yarn copy:package:cjs"
   },
   "dependencies": {
@@ -36,5 +36,5 @@
     "> 1%",
     "ie >= 9"
   ],
-  "gitHead": "f9ad1b5f9b5230f9219b31df4b6b4b451d5dfa8f"
+  "gitHead": "9b654d48bb8ba26e3b1b7095b5ed7b813b61e1e0"
 }

package/dist/esm/defaultConfig/animation.js

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

package/dist/esm/defaultConfig/cases.js

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

package/dist/esm/defaultConfig/color.js

@@ -1,12 +0,0 @@
-var proto = {
-  // eslint-disable-line
-  name: "",
-  value: "",
-  themes: {}
-};
-const COLOR = {};
-const GRADIENT = {};
-export {
-  COLOR,
-  GRADIENT
-};

package/dist/esm/defaultConfig/document.js

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

package/dist/esm/defaultConfig/font-family.js

@@ -1,19 +0,0 @@
-import { getFontFace } from "../utils";
-var defaultFont = {
-  // eslint-disable-line
-  name: "",
-  family: "",
-  type: ""
-};
-const FONT_FAMILY = {};
-const FONT_FAMILY_TYPES = {
-  "sans-serif": "Helvetica, Arial, sans-serif, --system-default",
-  serif: "Times New Roman, Georgia, serif, --system-default",
-  monospace: "Courier New, monospace, --system-default"
-};
-const FONT_FACE = getFontFace(FONT_FAMILY);
-export {
-  FONT_FACE,
-  FONT_FAMILY,
-  FONT_FAMILY_TYPES
-};

package/dist/esm/defaultConfig/font.js

@@ -1,13 +0,0 @@
-var defFont = {
-  // eslint-disable-line
-  name: "",
-  url: "",
-  fontStyle: "",
-  fontWeight: 500,
-  fontStretch: "normal",
-  fontOpticalSizing: "auto"
-};
-const FONT = {};
-export {
-  FONT
-};

package/dist/esm/defaultConfig/icons.js

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

package/dist/esm/defaultConfig/index.js

@@ -1,20 +0,0 @@
-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 "./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";
-const RESET = {};
-export {
-  RESET
-};

package/dist/esm/defaultConfig/media.js

@@ -1,19 +0,0 @@
-const MEDIA = {
-  tv: "(min-width: 2780px)",
-  screenL: "(max-width: 1920px)",
-  screenM: "(max-width: 1680px)",
-  screenS: "(max-width: 1440px)",
-  tabletL: "(max-width: 1366px)",
-  tabletM: "(max-width: 1280px)",
-  tabletS: "(max-width: 1024px)",
-  mobileL: "(max-width: 768px)",
-  mobileM: "(max-width: 560px)",
-  mobileS: "(max-width: 480px)",
-  mobileXS: "(max-width: 375px)",
-  light: "(prefers-color-scheme: light)",
-  dark: "(prefers-color-scheme: dark)",
-  print: "print"
-};
-export {
-  MEDIA
-};

package/dist/esm/defaultConfig/responsive.js

@@ -1,28 +0,0 @@
-const BREAKPOINTS = {
-  screenL: 1920,
-  screenM: 1680,
-  screenS: 1440,
-  tabletL: 1366,
-  tabletM: 1280,
-  tabletS: 1024,
-  mobileL: 768,
-  mobileM: 560,
-  mobileS: 480,
-  mobileXS: 375
-};
-const DEVICES = {
-  screenL: [1920, 1024],
-  screenM: [1680, 1024],
-  screenS: [1440, 978],
-  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

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

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

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

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

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

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

package/dist/esm/set.js

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

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

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

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

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