@symbo.ls/scratch 2.11.255 → 2.11.261

package/dist/cjs/utils/var.js

@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../../domql/packages/utils/dist/cjs/key.js
+// ../../node_modules/@domql/utils/dist/cjs/key.js
 var require_key = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -57,7 +57,7 @@ var require_key = __commonJS({
       generateKey: () => generateKey
     });
     module2.exports = __toCommonJS2(key_exports);
-    var generateKey = function() {
+    var generateKey = /* @__PURE__ */ function() {
       let index = 0;
       function newId() {
         index++;
@@ -69,9 +69,9 @@ var require_key = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/env.js
+// ../../node_modules/@domql/utils/dist/cjs/env.js
 var require_env = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -107,9 +107,9 @@ var require_env = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/globals.js
+// ../../node_modules/@domql/utils/dist/cjs/globals.js
 var require_globals = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -143,9 +143,9 @@ var require_globals = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/node.js
+// ../../node_modules/@domql/utils/dist/cjs/node.js
 var require_node = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -180,9 +180,9 @@ var require_node = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/types.js
+// ../../node_modules/@domql/utils/dist/cjs/types.js
 var require_types = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -270,9 +270,9 @@ var require_types = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/array.js
+// ../../node_modules/@domql/utils/dist/cjs/array.js
 var require_array = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -383,9 +383,9 @@ var require_array = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/string.js
+// ../../node_modules/@domql/utils/dist/cjs/string.js
 var require_string = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -448,9 +448,9 @@ var require_string = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/object.js
+// ../../node_modules/@domql/utils/dist/cjs/object.js
 var require_object = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -958,9 +958,9 @@ var require_object = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/function.js
+// ../../node_modules/@domql/utils/dist/cjs/function.js
 var require_function = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1033,9 +1033,9 @@ var require_function = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/log.js
+// ../../node_modules/@domql/utils/dist/cjs/log.js
 var require_log = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1074,9 +1074,9 @@ var require_log = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/cookie.js
+// ../../node_modules/@domql/utils/dist/cjs/cookie.js
 var require_cookie = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1130,9 +1130,9 @@ var require_cookie = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/tags.js
+// ../../node_modules/@domql/utils/dist/cjs/tags.js
 var require_tags = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1295,9 +1295,9 @@ var require_tags = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/index.js
+// ../../node_modules/@domql/utils/dist/cjs/index.js
 var require_cjs = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.11.255",
+  "version": "2.11.261",
   "files": [
     "src",
     "dist"
@@ -29,5 +29,5 @@
     "@symbo.ls/utils": "latest",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "789077788ae862a474a34ae9d8844186c44624c1"
+  "gitHead": "53e63702105d8c7baf0f136c5756383533bf3b30"
 }

package/src/system/spacing.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { arrayzeValue } from '@symbo.ls/utils'
-import { isString, merge } from '@domql/utils'
+import { isArray, isString, merge } from '@domql/utils'
 
 import { getActiveConfig } from '../factory.js'
 import {
@@ -70,13 +70,13 @@ export const getSpacingByKey = (
 ) => {
   const sequence = getSequence(sequenceProps)
 
-  const stack = arrayzeValue(value)
-  if (!stack) return
-
-  if (isString(value) && value.includes('calc')) {
+  if (isString(value) && (value.includes('calc') || value.includes('var'))) {
     return { [propertyName]: value }
   }
 
+  const stack = arrayzeValue(value)
+  if (!isArray(stack)) return
+
   if (stack.length > 1) {
     let suffix = ''
     if (propertyName === 'borderWidth') {

package/src/transforms/index.js

@@ -8,7 +8,8 @@ import {
   getShadow,
   getMediaColor,
   getTimingByKey,
-  getTimingFunction
+  getTimingFunction,
+  getSpacingBasedOnRatio
 } from '../system'
 
 const isBorderStyle = str => [
@@ -104,3 +105,38 @@ export const splitTransition = transition => {
   if (!arr.length) return
   return arr.map(transformTransition).join(',')
 }
+
+export const checkIfBoxSize = propertyName => {
+  const prop = propertyName.toLowerCase()
+  return (prop.includes('width') || prop.includes('height')) && !prop.includes('border')
+}
+
+export const transformSize = (propertyName, val, props = {}, opts = {}) => {
+  let value = val !== undefined ? val : props[propertyName]
+
+  if (value === undefined) return
+
+  const shouldScaleBoxSize = props.scaleBoxSize
+  const isBoxSize = checkIfBoxSize(propertyName)
+
+  if (!shouldScaleBoxSize && isBoxSize && isString(value)) {
+    value = value.split(' ').map(v => {
+      const isSingleLetter = v.length < 3 && /[A-Z]/.test(v)
+      const hasUnits = ['%', 'vw', 'vh', 'ch'].some(unit => value.includes(unit))
+      if (isSingleLetter && !hasUnits) return v + '_default'
+      return v
+    }).join(' ')
+  }
+
+  if (opts.ratio) {
+    return getSpacingBasedOnRatio(props, propertyName, value)
+  } else {
+    return getSpacingByKey(value, propertyName)
+  }
+}
+
+export const transformSizeRatio = (propertyName, props) => {
+  return transformSize(propertyName, null, props, {
+    ratio: true
+  })
+}

package/src/utils/sequence.js

@@ -194,6 +194,7 @@ export const getSequenceValue = (value = 'A', sequenceProps) => {
     value === 'min-content' ||
     value === 'max-content' ||
     value.includes('calc') ||
+    value.includes('var') ||
     !startsWithDashOrLetter
   ) return value