@symbo.ls/scratch 2.34.27 → 2.34.30

package/dist/cjs/utils/font.js

@@ -26,8 +26,10 @@ __export(font_exports, {
   getFontFaceEachString: () => getFontFaceEachString,
   getFontFaceString: () => getFontFaceString,
   getFontFormat: () => getFontFormat,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
+  setFontImport: () => setFontImport,
   setInCustomFontMedia: () => setInCustomFontMedia
 });
 module.exports = __toCommonJS(font_exports);
@@ -37,15 +39,26 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
 var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
-var setCustomFont = (name, url, weight) => `
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -59,6 +72,15 @@ var getFontFace = (LIBRARY) => {
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
 var getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url);
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || "swap"
+    });
+  }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
   return setCustomFontMedia(name, weights.url);

package/dist/cjs/utils/index.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,
@@ -3995,6 +4045,7 @@ __export(utils_exports, {
   hexToRgbArray: () => hexToRgbArray,
   hexToRgba: () => hexToRgba,
   hslToRgb: () => hslToRgb,
+  isGoogleFontsUrl: () => isGoogleFontsUrl,
   isScalingUnit: () => isScalingUnit,
   mixTwoColors: () => mixTwoColors,
   mixTwoRgb: () => mixTwoRgb,
@@ -4007,6 +4058,7 @@ __export(utils_exports, {
   rgbToHex: () => rgbToHex,
   setCustomFont: () => setCustomFont,
   setCustomFontMedia: () => setCustomFontMedia,
+  setFontImport: () => setFontImport,
   setInCustomFontMedia: () => setInCustomFontMedia,
   setScalingVar: () => setScalingVar,
   setSubScalingVar: () => setSubScalingVar,
@@ -4335,15 +4387,26 @@ var getDefaultOrFirstKey = (LIBRARY, key) => {
   const hasValue = Object.keys(LIBRARY)[0];
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value;
 };
-var getFontFormat = (url) => url.split(/[#?]/)[0].split(".").pop().trim();
+var getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split(".").pop().trim();
+  if (["woff2", "woff", "ttf", "otf", "eot"].includes(ext)) return ext;
+  return null;
+};
+var isGoogleFontsUrl = (url) => url && (url.includes("fonts.googleapis.com") || url.includes("fonts.gstatic.com"));
+var setFontImport = (url) => `@import url('${url}');`;
 var setInCustomFontMedia = (str) => `@font-face { ${str} }`;
-var setCustomFont = (name, url, weight) => `
+var setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url);
+  const formatStr = format ? ` format('${format}')` : "";
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`;
-var setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+  font-style: normal;${weight ? `
+  font-weight: ${weight};` : ""}${options.fontStretch ? `
+  font-stretch: ${options.fontStretch};` : ""}${options.fontDisplay ? `
+  font-display: ${options.fontDisplay};` : ""}
+  src: url('${url}')${formatStr};`;
+};
+var setCustomFontMedia = (name, url, weight, options) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`;
 var getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights);
@@ -4357,6 +4420,15 @@ var getFontFace = (LIBRARY) => {
   return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value));
 };
 var getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url);
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || "swap"
+    });
+  }
   const isArr = weights[0];
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia);
   return setCustomFontMedia(name, weights.url);

package/dist/cjs/utils/sequence.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,

package/dist/cjs/utils/var.js

@@ -1710,6 +1710,46 @@ ${element}` : ""
       }
       return element;
     };
+    function getRootState(param) {
+      var _a, _b;
+      let state2 = null;
+      const hasRootState = (obj) => {
+        var _a2;
+        return obj.__element && ((_a2 = obj.root) == null ? void 0 : _a2.isRootState);
+      };
+      if (!this) {
+        state2 = window.platformState || ((_a = window.smblsApp) == null ? void 0 : _a.state);
+      } else if (hasRootState(this)) {
+        state2 = this.root;
+      } else if (this.__ref && this.__ref.path) {
+        const hasPlatformState = this.state && hasRootState(this.state);
+        const hasPlatformStateOnParent = this.call("isFunction", this.state) && this.parent.state && hasRootState(this.parent.state);
+        if (hasPlatformState || hasPlatformStateOnParent) {
+          state2 = this.state.root || this.parent.state.root;
+        }
+      }
+      if (!state2) {
+        state2 = window.platformState || ((_b = window.smblsApp) == null ? void 0 : _b.state);
+      }
+      return param ? state2[param] : state2;
+    }
+    function getRoot(key) {
+      var _a;
+      const rootElem = (_a = this.getRootState()) == null ? void 0 : _a.__element;
+      return rootElem && Object.keys(rootElem).length > 0 && key ? rootElem[key] : rootElem;
+    }
+    function getRootData(key) {
+      return this.getRoot("data") && Object.keys(this.getRoot("data")).length > 0 && key ? this.getRoot("data")[key] : this.getRoot("data");
+    }
+    function getRootContext(key) {
+      var _a;
+      const ctx = (_a = this.getRoot()) == null ? void 0 : _a.context;
+      return key ? ctx[key] : ctx;
+    }
+    function getContext(key) {
+      const ctx = this.context;
+      return key ? ctx[key] : ctx;
+    }
     var ROOT = {
       key: ":root",
       node: document22 ? document22.body : report("DocumentNotDefined", document22)
@@ -2000,6 +2040,11 @@ ${element}` : ""
       "getRef",
       "getChildren",
       "getPath",
+      "getRootState",
+      "getRoot",
+      "getRootData",
+      "getRootContext",
+      "getContext",
       "setNodeStyles",
       "spotByPath",
       "keys",
@@ -3118,6 +3163,11 @@ ${element}` : ""
         lookdown,
         lookdownAll,
         getRef,
+        getRootState,
+        getRoot,
+        getRootData,
+        getRootContext,
+        getContext,
         getPath,
         setNodeStyles,
         spotByPath,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.34.27",
+  "version": "2.34.30",
   "files": [
     "src",
     "dist"
@@ -25,9 +25,9 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^2.34.27",
-    "@symbo.ls/utils": "^2.34.27",
+    "@domql/utils": "^2.34.30",
+    "@symbo.ls/utils": "^2.34.30",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "1994ef5ac77cba0564a416c60e9d0a984543d9af"
+  "gitHead": "e8c2af04ccfbe5521b5a2d5473b6e5236954edba"
 }

package/src/system/font.js

@@ -7,7 +7,9 @@ import { getActiveConfig } from '../factory.js'
 import {
   getDefaultOrFirstKey,
   getFontFaceEach,
-  setCustomFontMedia
+  isGoogleFontsUrl,
+  setCustomFontMedia,
+  setFontImport
 } from '../utils'
 
 export const setFont = (val, key) => {
@@ -15,9 +17,21 @@ export const setFont = (val, key) => {
 
   if (!val || (isArray(val) && !val[0])) return
 
-  const fontFace = val[0]
-    ? getFontFaceEach(key, val)
-    : setCustomFontMedia(key, val.url)
+  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 }
 }

package/src/utils/font.js

@@ -7,41 +7,81 @@ export const getDefaultOrFirstKey = (LIBRARY, key) => {
   return hasValue && LIBRARY[hasValue] && LIBRARY[hasValue].value
 }
 
-export const getFontFormat = url => url.split(/[#?]/)[0].split('.').pop().trim()
+export const getFontFormat = (url) => {
+  const ext = url.split(/[#?]/)[0].split('.').pop().trim()
+  if (['woff2', 'woff', 'ttf', 'otf', 'eot'].includes(ext)) return ext
+  return null
+}
+
+export const isGoogleFontsUrl = (url) =>
+  url &&
+  (url.includes('fonts.googleapis.com') || url.includes('fonts.gstatic.com'))
 
-export const setInCustomFontMedia = str => `@font-face { ${str} }`
+export const setFontImport = (url) => `@import url('${url}');`
 
-export const setCustomFont = (name, url, weight) => `
+export const setInCustomFontMedia = (str) => `@font-face { ${str} }`
+
+export const setCustomFont = (name, url, weight, options = {}) => {
+  const format = getFontFormat(url)
+  const formatStr = format ? ` format('${format}')` : ''
+  return `
   font-family: '${name}';
-  font-style: normal;
-  ${weight && `font-weight: ${weight};`}
-  src: url('${url}') format('${getFontFormat(url)}');`
+  font-style: normal;${
+    weight
+      ? `
+  font-weight: ${weight};`
+      : ''
+  }${
+    options.fontStretch
+      ? `
+  font-stretch: ${options.fontStretch};`
+      : ''
+  }${
+    options.fontDisplay
+      ? `
+  font-display: ${options.fontDisplay};`
+      : ''
+  }
+  src: url('${url}')${formatStr};`
+}
 
-export const setCustomFontMedia = (name, url, weight) => `@font-face {
-  ${setCustomFont(name, url, weight)}
+export const setCustomFontMedia = (
+  name,
+  url,
+  weight,
+  options
+) => `@font-face {${setCustomFont(name, url, weight, options)}
 }`
-// src: url('${url}') format('${getFontFormat(url)}');
 
 export const getFontFaceEach = (name, weights) => {
   const keys = Object.keys(weights)
-  return keys.map(key => {
+  return keys.map((key) => {
     const { url, fontWeight } = weights[key]
     return setCustomFont(name, url, fontWeight)
   })
 }
 
-export const getFontFace = LIBRARY => {
+export const getFontFace = (LIBRARY) => {
   const keys = Object.keys(LIBRARY)
-  return keys.map(key => getFontFaceEach(key, LIBRARY[key].value))
+  return keys.map((key) => getFontFaceEach(key, LIBRARY[key].value))
 }
 
 export const getFontFaceEachString = (name, weights) => {
+  if (weights && weights.isVariable) {
+    if (isGoogleFontsUrl(weights.url)) {
+      return setFontImport(weights.url)
+    }
+    return setCustomFontMedia(name, weights.url, weights.fontWeight, {
+      fontStretch: weights.fontStretch,
+      fontDisplay: weights.fontDisplay || 'swap'
+    })
+  }
   const isArr = weights[0]
   if (isArr) return getFontFaceEach(name, weights).map(setInCustomFontMedia)
   return setCustomFontMedia(name, weights.url)
 }
 
-export const getFontFaceString = LIBRARY => {
+export const getFontFaceString = (LIBRARY) => {
   const keys = Object.keys(LIBRARY)
-  return keys.map(key => getFontFaceEachString(key, LIBRARY[key].value))
+  return keys.map((key) => getFontFaceEachString(key, LIBRARY[key].value))
 }