@symbo.ls/scratch 2.27.0 → 2.27.11

package/dist/cjs/utils/theme.js

@@ -24,11 +24,8 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 var returnSubThemeOrDefault = (orig, theme) => {
-  if (!orig)
-    return;
-  if (orig.themes && orig.themes[theme])
-    return orig.themes[theme];
-  if (orig[theme])
-    return [orig, orig[theme]];
+  if (!orig) return;
+  if (orig.themes && orig.themes[theme]) return orig.themes[theme];
+  if (orig[theme]) return [orig, orig[theme]];
   return orig;
 };

package/dist/cjs/utils/var.js

@@ -51,8 +51,8 @@ var require_cjs = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
-    var src_exports = {};
-    __export2(src_exports, {
+    var index_exports = {};
+    __export2(index_exports, {
       arrayzeValue: () => arrayzeValue,
       copyJavaScriptToClipboard: () => copyJavaScriptToClipboard,
       copyStringToClipboard: () => copyStringToClipboard,
@@ -73,12 +73,11 @@ var require_cjs = __commonJS({
       toTitleCase: () => toTitleCase,
       toggleFullscreen: () => toggleFullscreen
     });
-    module2.exports = __toCommonJS2(src_exports);
+    module2.exports = __toCommonJS2(index_exports);
     var window22 = globalThis;
     var document22 = window22.document;
     var isObject2 = (arg) => {
-      if (arg === null)
-        return false;
+      if (arg === null) return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
     var isString2 = (arg) => typeof arg === "string";
@@ -103,13 +102,11 @@ var require_cjs = __commonJS({
     };
     var findClosestNumberInFactory = (val, factory) => {
       val = parseFloat(val);
-      if (isObject2(factory))
-        factory = Object.values(factory);
+      if (isObject2(factory)) factory = Object.values(factory);
       return findClosestNumber(val, factory);
     };
     var formatDate = (timestamp) => {
-      if (!timestamp)
-        return "";
+      if (!timestamp) return "";
       const d = new Date(timestamp);
       const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
       const mo = new Intl.DateTimeFormat("en", { month: "short" }).format(d);
@@ -176,8 +173,7 @@ var require_cjs = __commonJS({
         scriptEle.type = type;
         scriptEle.text = xhr.responseText;
         doc.body.appendChild(scriptEle);
-        if (typeof fallback === "function")
-          fallback();
+        if (typeof fallback === "function") fallback();
       } else {
         throw new Error(`Failed to load the script ${FILE_URL}`);
       }
@@ -245,20 +241,15 @@ var require_cjs = __commonJS({
     );
     var toDashCase2 = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
     var toDescriptionCase = (str = "") => {
-      if (typeof str !== "string")
-        return;
+      if (typeof str !== "string") return;
       const result = str.replace(/([A-Z])/g, " $1");
       return result.charAt(0).toUpperCase() + result.slice(1);
     };
     var arrayzeValue = (val) => {
-      if (isArray2(val))
-        return val;
-      if (isString2(val))
-        return val.split(" ");
-      if (isObject2(val))
-        return Object.values(val);
-      if (isNumber2(val))
-        return [val];
+      if (isArray2(val)) return val;
+      if (isString2(val)) return val.split(" ");
+      if (isObject2(val)) return Object.values(val);
+      if (isNumber2(val)) return [val];
     };
   }
 });
@@ -287,8 +278,7 @@ var isFunction = (arg) => typeof arg === "function";
 var isNull = (arg) => arg === null;
 var isArray = (arg) => Array.isArray(arg);
 var isObjectLike = (arg) => {
-  if (arg === null)
-    return false;
+  if (arg === null) return false;
   return typeof arg === "object";
 };
 var isUndefined = (arg) => {
@@ -356,8 +346,7 @@ var deepClone = (obj, options = {}) => {
   const clone2 = targetWindow ? isArray(obj) ? new targetWindow.Array() : new targetWindow.Object() : isArray(obj) ? [] : {};
   visited.set(obj, clone2);
   for (const key in obj) {
-    if (!Object.prototype.hasOwnProperty.call(obj, key))
-      continue;
+    if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
     if (exclude.includes(key) || key.startsWith("__") || key === "__proto__")
       continue;
     const value = obj[key];
@@ -687,24 +676,21 @@ var applyMediaSequenceVars = (FACTORY2, media, options = {}) => {
   const { mediaRegenerate } = FACTORY2;
   const { sequence, scales } = FACTORY2[media];
   const query = MEDIA2[mediaName];
-  if (!query && CONFIG2.verbose)
-    console.warn("Can't find media query ", query);
+  if (!query && CONFIG2.verbose) console.warn("Can't find media query ", query);
   if (!mediaRegenerate) {
     let underMediaQuery = CSS_VARS2[`@media ${query}`];
-    if (!underMediaQuery)
-      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
     applySequenceGlobalVars(underMediaQuery, FACTORY2[media], options);
     return;
   }
   for (const key in sequence) {
     const item = sequence[key];
     const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
-    if (!query && CONFIG2.verbose)
-      console.warn("Can't find query ", query);
+    if (!query && CONFIG2.verbose) console.warn("Can't find query ", query);
     let underMediaQuery = CSS_VARS2[`@media ${query}`];
-    if (!underMediaQuery)
-      underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
+    if (!underMediaQuery) underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
     underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
     CSS_VARS2[item.variable + "_" + mediaName] = value;
   }
 };
+// @preserve-env

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.27.0",
+  "version": "2.27.11",
   "files": [
     "src",
     "dist"
@@ -18,16 +18,16 @@
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
-    "build:iife": "npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs --bundle",
+    "build:iife": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
     "build": "npm run build:cjs",
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^2.27.0",
-    "@symbo.ls/utils": "^2.27.0",
+    "@domql/utils": "^2.27.11",
+    "@symbo.ls/utils": "^2.27.11",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "40a924693178a7d7b9e94aac0282b9d31602eca7"
+  "gitHead": "0189e4620f901c763754d06de65bcf6075c05618"
 }

package/src/system/typography.js

@@ -23,15 +23,7 @@ export const runThroughMedia = FACTORY => {
     const { mediaRegenerate } = FACTORY
     const mediaName = prop.slice(1)
 
-    const {
-      type,
-      base,
-      ratio,
-      range,
-      subSequence,
-      h1Matches,
-      unit
-    } = FACTORY
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY
 
     merge(mediaValue, {
       type,
@@ -44,7 +36,8 @@ export const runThroughMedia = FACTORY => {
     })
 
     const query = MEDIA[mediaName]
-    const media = '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
+    const media =
+      '@media ' + (query === 'print' ? `${query}` : `screen and ${query}`)
     TYPOGRAPHY.templates[media] = {
       fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
     }
@@ -67,7 +60,7 @@ export const runThroughMedia = FACTORY => {
   }
 }
 
-export const applyHeadings = (props) => {
+export const applyHeadings = props => {
   const CONFIG = getActiveConfig()
   if (props.h1Matches) {
     const unit = props.unit
@@ -76,13 +69,16 @@ export const applyHeadings = (props) => {
     for (const k in HEADINGS) {
       const headerName = `h${parseInt(k) + 1}`
       const headerStyle = templates[headerName]
-      if (!HEADINGS[k]) continue
       templates[headerName] = {
-        fontSize: CONFIG.useVariable ? `var(${HEADINGS[k]?.variable})` : `${HEADINGS[k].scaling}${unit}`,
+        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)
+        letterSpacing: headerStyle
+          ? headerStyle.letterSpacing
+          : props.letterSpacing,
+        fontWeight: headerStyle ? headerStyle.fontWeight : 900 - k * 100
       }
     }
   }
@@ -101,9 +97,5 @@ export const applyTypographySequence = () => {
 export const getFontSizeByKey = value => {
   const CONFIG = getActiveConfig()
   const { TYPOGRAPHY } = CONFIG
-  return getSequenceValuePropertyPair(
-    value,
-    'fontSize',
-    TYPOGRAPHY
-  )
+  return getSequenceValuePropertyPair(value, 'fontSize', TYPOGRAPHY)
 }

package/src/utils/color.js

@@ -1,6 +1,12 @@
 'use strict'
 
-import { document, window, isString, isNumber } from '@domql/utils'
+import {
+  document,
+  window,
+  isString,
+  isNumber,
+  isNotProduction
+} from '@domql/utils'
 const ENV = process.env.NODE_ENV
 
 export const colorStringToRgbaArray = color => {
@@ -10,11 +16,22 @@ export const colorStringToRgbaArray = color => {
   // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
   if (color[0] === '#') {
     if (color.length < 7) {
-      color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '')
-    } return [parseInt(color.substr(1, 2), 16),
+      color =
+        '#' +
+        color[1] +
+        color[1] +
+        color[2] +
+        color[2] +
+        color[3] +
+        color[3] +
+        (color.length > 4 ? color[4] + color[4] : '')
+    }
+    return [
+      parseInt(color.substr(1, 2), 16),
       parseInt(color.substr(3, 2), 16),
       parseInt(color.substr(5, 2), 16),
-      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1]
+      color.length > 7 ? parseInt(color.substr(7, 2), 16) / 255 : 1
+    ]
   }
 
   // convert named colors
@@ -81,11 +98,7 @@ export const hexToRgba = (hex, alpha = 1) => {
 export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
   const arr = []
   for (let i = 0; i < 3; i++) {
-    arr[i] = ~~(
-      colorA[i] + (
-        (colorB[i] - colorA[i]) * range
-      )
-    )
+    arr[i] = ~~(colorA[i] + (colorB[i] - colorA[i]) * range)
   }
   return `rgb(${arr})`
 }
@@ -93,25 +106,27 @@ export const mixTwoRgb = (colorA, colorB, range = 0.5) => {
 export const changeLightness = (delta, hsl) => {
   const [hue, saturation, lightness] = hsl
 
-  const newLightness = Math.max(
-    0,
-    Math.min(100, lightness + parseFloat(delta))
-  )
+  const newLightness = Math.max(0, Math.min(100, lightness + parseFloat(delta)))
 
   return [hue, saturation, newLightness]
 }
 
 export const rgbToHSL = (r, g, b) => {
-  const a = Math.max(r, g, b); const n = a - Math.min(r, g, b); const f = (1 - Math.abs(a + a - n - 1))
-  const h = n && ((a == r) ? (g - b) / n : ((a == g) ? 2 + (b - r) / n : 4 + (r - g) / n)) //eslint-disable-line
+  const a = Math.max(r, g, b)
+  const n = a - Math.min(r, g, b)
+  const f = 1 - Math.abs(a + a - n - 1)
+  const h =
+    n && (a == r ? (g - b) / n : a == g ? 2 + (b - r) / n : 4 + (r - g) / n) //eslint-disable-line
   return [60 * (h < 0 ? h + 6 : h), f ? n / f : 0, (a + a - n) / 2]
 }
 
-export const hslToRgb = (h, s, l,
+export const hslToRgb = (
+  h,
+  s,
+  l,
   a = s * Math.min(l, 1 - l),
-  f = (n, k = (n + h / 30) % 12) => l - a * Math.max(
-    Math.min(k - 3, 9 - k, 1), -1
-  )
+  f = (n, k = (n + h / 30) % 12) =>
+    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
 ) => [f(0), f(8), f(4)]
 
 export const getColorShade = (col, amt) => {
@@ -122,12 +137,12 @@ export const getColorShade = (col, amt) => {
   if (r > 255) r = 255
   else if (r < 0) r = 0
 
-  let b = ((num >> 8) & 0x00FF) + amt
+  let b = ((num >> 8) & 0x00ff) + amt
 
   if (b > 255) b = 255
   else if (b < 0) b = 0
 
-  let g = (num & 0x0000FF) + amt
+  let g = (num & 0x0000ff) + amt
 
   if (g > 255) g = 255
   else if (g < 0) g = 0
@@ -138,12 +153,8 @@ export const getColorShade = (col, amt) => {
 export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
   const arr = []
   for (let i = 0; i < 4; i++) {
-    const round = (i === 3) ? x => x : Math.round
-    arr[i] = round(
-      (colorA[i] + (
-        (colorB[i] - colorA[i]) * range
-      ))
-    )
+    const round = i === 3 ? x => x : Math.round
+    arr[i] = round(colorA[i] + (colorB[i] - colorA[i]) * range)
   }
   return `rgba(${arr})`
 }
@@ -151,7 +162,7 @@ export const mixTwoRgba = (colorA, colorB, range = 0.5) => {
 export const opacify = (color, opacity) => {
   const arr = colorStringToRgbaArray(color)
   if (!arr) {
-    if (ENV === 'testing' || ENV === 'development') console.warn(color + ' color is not rgba')
+    if (isNotProduction(ENV)) console.warn(color + ' color is not rgba')
     return
   }
   arr[3] = opacity
@@ -159,7 +170,8 @@ export const opacify = (color, opacity) => {
 }
 
 export const getRgbTone = (rgb, tone) => {
-  if (isString(rgb) && rgb.includes('rgb')) rgb = colorStringToRgbaArray(rgb).join(', ')
+  if (isString(rgb) && rgb.includes('rgb'))
+    rgb = colorStringToRgbaArray(rgb).join(', ')
   if (isString(rgb)) rgb = rgb.split(',').map(v => parseFloat(v.trim()))
   if (isNumber(tone)) tone += ''
   const toHex = rgbArrayToHex(rgb)
@@ -172,7 +184,7 @@ export const getRgbTone = (rgb, tone) => {
     const [r, g, b] = rgb
     const hsl = rgbToHSL(r, g, b)
     const [h, s, l] = hsl // eslint-disable-line
-    const newRgb = hslToRgb(h, s, parseFloat(tone) / 100 * 255)
+    const newRgb = hslToRgb(h, s, (parseFloat(tone) / 100) * 255)
     return newRgb
   }
 }

package/src/utils/sprite.js

@@ -1,12 +1,12 @@
 'use strict'
 
-import { isArray, isString } from '@domql/utils'
+import { isArray, isNotProduction, isString } from '@domql/utils'
 import { getActiveConfig } from '../factory'
 
 const ENV = process.env.NODE_ENV || 'development'
-const isDev = ENV === 'development' || ENV === 'testing'
+const isDev = isNotProduction(ENV)
 
-export const generateSprite = (icons) => {
+export const generateSprite = icons => {
   const CONFIG = getActiveConfig()
 
   let sprite = ''
@@ -20,7 +20,7 @@ export const generateSprite = (icons) => {
   return sprite
 }
 
-const parseRootAttributes = (htmlString) => {
+const parseRootAttributes = htmlString => {
   const val = htmlString.default || htmlString
   if (!isString(val)) {
     if (isDev) console.warn('parseRootAttributes:', val, 'is not a string')
@@ -33,7 +33,9 @@ const parseRootAttributes = (htmlString) => {
   }
 
   const attrString = match[1]
-  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm)
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  )
   return attrs.reduce((acc, attr) => {
     const [key, value] = attr.split('=')
     acc[key] = value.replace(/['"]/g, '')
@@ -49,7 +51,9 @@ const replaceIdsAndUrls = (code, key) => {
   if (isArray(matches)) {
     matches.forEach(() => {
       const randomKey = Math.floor(Math.random() * 100000)
-      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`)
+      replacedCode = code
+        .replace(idRegex, `id="${key}-${randomKey}"`)
+        .replace(urlRegex, `url(#${key}-${randomKey})`)
     })
   }
   return replacedCode
@@ -64,7 +68,8 @@ export const convertSvgToSymbol = (key, code) => {
 
   const replacedCode = replaceIdsAndUrls(code, key)
 
-  let symbol = replacedCode.replace('<svg',
+  let symbol = replacedCode.replace(
+    '<svg',
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   )