@symbo.ls/scratch 3.4.5 → 3.4.6

package/dist/cjs/system/spacing.js

@@ -0,0 +1,134 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var spacing_exports = {};
+__export(spacing_exports, {
+  applySpacingSequence: () => applySpacingSequence,
+  checkIfBoxSize: () => checkIfBoxSize,
+  getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
+  getSpacingByKey: () => getSpacingByKey,
+  splitSpacedValue: () => splitSpacedValue
+});
+module.exports = __toCommonJS(spacing_exports);
+var import_smbls_utils = require("@symbo.ls/smbls-utils");
+var import_utils = require("@domql/utils");
+var import_factory = require("../factory.js");
+var import_utils2 = require("../utils");
+const runThroughMedia = (FACTORY) => {
+  for (const prop in FACTORY) {
+    const mediaProps = FACTORY[prop];
+    const isMediaName = prop.slice(0, 1) === "@";
+    if (!isMediaName) continue;
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY;
+    (0, import_utils.merge)(mediaProps, {
+      type,
+      base,
+      ratio,
+      range,
+      subSequence,
+      h1Matches,
+      unit,
+      sequence: {},
+      scales: {},
+      templates: {},
+      vars: {}
+    });
+    (0, import_utils2.generateSequence)(mediaProps);
+    (0, import_utils2.applyMediaSequenceVars)(FACTORY, prop);
+  }
+};
+const checkIfBoxSize = (propertyName) => {
+  const prop = propertyName.toLowerCase();
+  const includesWidth = prop.includes("width") || prop.includes("height");
+  const includesBorder = prop.includes("border") || prop.includes("outline");
+  return includesWidth && !includesBorder;
+};
+const applySpacingSequence = () => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { SPACING } = CONFIG;
+  (0, import_utils2.generateSequence)(SPACING);
+  (0, import_utils2.applySequenceVars)(SPACING);
+  runThroughMedia(SPACING);
+};
+const getSequence = (sequenceProps) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { SPACING } = CONFIG;
+  if (!sequenceProps || !sequenceProps.sequence) return SPACING;
+  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
+  return hasGenerated ? sequenceProps : (0, import_utils2.generateSequence)(sequenceProps);
+};
+const getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefix) => {
+  const sequence = getSequence(sequenceProps);
+  if ((0, import_utils.isString)(value)) {
+    if (!fnPrefix && value.includes("(")) {
+      const fnArray = (0, import_utils2.getFnPrefixAndValue)(value);
+      fnPrefix = fnArray[0];
+      value = fnArray[1];
+    }
+  }
+  const stack = fnPrefix ? [value] : (0, import_smbls_utils.arrayzeValue)(value);
+  if (!(0, import_utils.isArray)(stack)) return;
+  if (stack.length > 1) {
+    let suffix = "";
+    if (propertyName === "borderWidth") {
+      propertyName = "border";
+      suffix = "Width";
+    }
+    const directions = {
+      2: ["Block", "Inline"],
+      3: ["BlockStart", "Inline", "BlockEnd"],
+      4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
+    };
+    const wrapSequenceValueByDirection = (direction, i) => (0, import_utils2.getSequenceValuePropertyPair)(
+      stack[i],
+      propertyName + direction + suffix,
+      sequence,
+      fnPrefix
+    );
+    return directions[stack.length].map(
+      (dir, key) => wrapSequenceValueByDirection(dir, key)
+    );
+  }
+  return (0, import_utils2.getSequenceValuePropertyPair)(value, propertyName, sequence, fnPrefix);
+};
+const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { SPACING } = CONFIG;
+  let value = val || props[propertyName];
+  if (!fnPrefix && (0, import_utils.isString)(value) && value.includes("(")) {
+    const fnArr = (0, import_utils2.getFnPrefixAndValue)(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
+  }
+  if (props.spacingRatio) {
+    const sequenceProps = applyCustomSequence(props);
+    return getSpacingByKey(value, propertyName, sequenceProps, fnPrefix);
+  }
+  return getSpacingByKey(value, propertyName, SPACING, fnPrefix);
+};
+const splitSpacedValue = (val) => {
+  const addDefault = (v) => {
+    const isSymbol = ["+", "-", "*", "/"].includes(v);
+    const hasUnits = import_utils2.CSS_UNITS.some((unit) => val.includes(unit));
+    if (isSymbol || hasUnits) return v;
+    const isSingleLetter = v.length < 3 && /[A-Z]/.test(v);
+    if (isSingleLetter) return v + "_default";
+    return v;
+  };
+  return val.split(",").map((v) => v.trim()).map(addDefault).join(",").split(" ").map(addDefault).join(" ");
+};

package/dist/cjs/system/svg.js

@@ -0,0 +1,97 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var svg_exports = {};
+__export(svg_exports, {
+  appendSVGSprite: () => appendSVGSprite,
+  appendSvgIconsSprite: () => appendSvgIconsSprite,
+  setSVG: () => setSVG,
+  setSvgIcon: () => setSvgIcon
+});
+module.exports = __toCommonJS(svg_exports);
+var import_utils = require("@domql/utils");
+var import_utils2 = require("../utils");
+var import_factory = require("../factory.js");
+const DEF_OPTIONS = {
+  document: import_utils.document
+};
+const setSVG = (val, key) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (!val) {
+    if (CONFIG.verbose) console.warn("setSVG: val is not defined", key);
+    return;
+  }
+  if (CONFIG.useSvgSprite) {
+    return (0, import_utils2.convertSvgToSymbol)(key, val);
+  }
+  return val;
+};
+const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG;
+  for (const key in LIBRARY) lib[key] = CONFIG.SVG[key];
+  appendSVG(lib, options);
+};
+const setSvgIcon = (val, key) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (CONFIG.useIconSprite && !CONFIG.SEMANTIC_ICONS?.[key]) {
+    return setSVG(val, key);
+  }
+  return val;
+};
+const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS;
+  for (const key in LIBRARY) lib[key] = CONFIG.ICONS[key];
+  appendSVG(lib, options);
+};
+const createSVGSpriteElement = (options = { isRoot: true }) => {
+  if (!import_utils.document || !import_utils.document.createElementNS) return;
+  const svgElem = import_utils.document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  if (options.isRoot) {
+    svgElem.setAttribute("aria-hidden", "true");
+    svgElem.setAttribute("width", "0");
+    svgElem.setAttribute("height", "0");
+    svgElem.setAttribute("style", "position:absolute");
+    svgElem.setAttribute("id", "svgSprite");
+  }
+  return svgElem;
+};
+const appendSVG = (lib, options = DEF_OPTIONS) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const doc = options.document || import_utils.document;
+  if (!doc || !doc.documentElement) {
+    if (CONFIG.verbose) {
+      console.warn("To append SVG sprites it should be run in browser environment");
+    }
+    return (0, import_utils2.generateSprite)(lib);
+  }
+  const exists = doc.querySelector("#svgSprite");
+  const SVGsprite = (0, import_utils2.generateSprite)(lib);
+  if (exists) {
+    const tempSVG = createSVGSpriteElement({ isRoot: false });
+    tempSVG.innerHTML = SVGsprite;
+    exists.append(...tempSVG.children);
+  } else {
+    const svgSpriteDOM = createSVGSpriteElement();
+    if (svgSpriteDOM && svgSpriteDOM.nodeType) {
+      svgSpriteDOM.innerHTML = SVGsprite;
+      doc.body.prepend(svgSpriteDOM);
+    }
+  }
+};

package/dist/cjs/system/theme.js

@@ -0,0 +1,234 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_exports = {};
+__export(theme_exports, {
+  getMediaTheme: () => getMediaTheme,
+  getTheme: () => getTheme,
+  setMediaTheme: () => setMediaTheme,
+  setTheme: () => setTheme
+});
+module.exports = __toCommonJS(theme_exports);
+var import_color = require("./color");
+var import_factory = require("../factory.js");
+var import_color2 = require("../utils/color.js");
+var import_utils = require("@domql/utils");
+const setThemeValue = (theme) => {
+  const value = {};
+  const { state, media, helpers, ...rest } = theme;
+  const keys = Object.keys(rest);
+  keys.map((key) => {
+    const conditions = ["color", "Color", "background", "border"];
+    const isColor = conditions.some((k) => key.includes(k));
+    return value[key] = isColor ? (0, import_color.getColor)(theme[key]) : theme[key];
+  });
+  return value;
+};
+const getThemeValue = (theme) => {
+  if (theme.value) return theme.value;
+  theme.value = setThemeValue(theme);
+  return theme.value;
+};
+const getTheme = (value, modifier) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (CONFIG.useVariable) return getMediaTheme(value, modifier);
+  const { THEME } = CONFIG;
+  if ((0, import_utils.isString)(value)) {
+    const [theme, subtheme] = value.split(" ");
+    const isOurTheme = THEME[theme];
+    if (isOurTheme) {
+      if (!subtheme && !modifier) return getThemeValue(isOurTheme);
+      value = [theme, subtheme || modifier];
+    }
+  }
+  if ((0, import_utils.isObjectLike)(value) && value[1]) {
+    const themeName = value[0];
+    const subThemeName = value[1];
+    const { helpers, media, state } = THEME[themeName];
+    if (media && media[subThemeName]) return getThemeValue(media[subThemeName]);
+    if (helpers && helpers[subThemeName]) return getThemeValue(helpers[subThemeName]);
+    if (state && state[subThemeName]) return getThemeValue(state[subThemeName]);
+  } else if ((0, import_utils.isObject)(value)) return setThemeValue(value);
+};
+const setInverseTheme = (theme, variant, value) => {
+  if ((0, import_utils.isObject)(variant)) {
+    theme.variants.inverse.value = setThemeValue(variant);
+  } else if (variant === true) {
+    const { color, background } = value;
+    theme.variants.inverse = {
+      value: {
+        color: background,
+        background: color
+      }
+    };
+  }
+};
+const setPseudo = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant);
+  themeValue[`&:${key}`] = result;
+  if ((0, import_utils.isObject)(variant) && !variant.value) variant.value = result;
+};
+const setSelectors = (theme, value) => {
+  const { state } = theme;
+  if (!state) return;
+  const keys = Object.keys(state);
+  keys.map((key) => {
+    const variant = state[key];
+    setPseudo(theme, key, variant, value);
+    return theme;
+  });
+  return theme;
+};
+const setPrefersScheme = (theme, key, variant, themeValue) => {
+  const result = getTheme(variant);
+  themeValue[`@media (prefers-color-scheme: ${key})`] = result;
+  if ((0, import_utils.isObject)(variant) && !variant.value) variant.value = result;
+};
+const setMedia = (theme, value) => {
+  const { media } = theme;
+  if (!media) return;
+  const keys = Object.keys(media);
+  keys.map((key) => {
+    const variant = media[key];
+    if (key === "dark" || key === "light") setPrefersScheme(theme, key, variant, value);
+    if (key === "inverse") setInverseTheme(theme, variant, value);
+    return theme;
+  });
+  return theme;
+};
+const setHelpers = (theme, value) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { helpers } = theme;
+  if (!helpers) return;
+  const keys = Object.keys(helpers);
+  keys.map((key) => {
+    const helper = helpers[key];
+    if ((0, import_utils.isString)(helper)) helpers[key] = CONFIG.THEME[helper];
+    else getThemeValue(helpers[key]);
+    return theme;
+  });
+  return theme;
+};
+const setTheme = (val, key) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (CONFIG.useVariable) return setMediaTheme(val, key);
+  const { state, media, helpers } = val;
+  const value = setThemeValue(val, key);
+  const CSSvar = `--theme-${key}`;
+  setSelectors(val, value);
+  setMedia(val, value);
+  setHelpers(val, value);
+  return { var: CSSvar, value, state, media, helpers };
+};
+const keySetters = {
+  // eslint-disable-line
+  "@": (theme, value) => setMedia(theme, value),
+  ":": (theme, value) => setSelectors(theme, value),
+  ".": (theme, value) => setHelpers(theme, value)
+};
+const setMediaTheme = (val, key, suffix, prefers) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { CSS_VARS } = CONFIG;
+  const theme = { value: val };
+  if ((0, import_utils.isObjectLike)(val)) {
+    for (const param in val) {
+      const symb = param.slice(0, 1);
+      const value = val[param];
+      if (symb === "@" || symb === ":" || symb === ".") {
+        const hasPrefers = symb === "@" && param;
+        theme[param] = setMediaTheme(value, key, param, prefers || hasPrefers);
+      } else {
+        const color = (0, import_color.getColor)(value, prefers);
+        const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
+        const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
+        const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
+        if (CONFIG.useVariable) {
+          CSS_VARS[CSSVar] = color;
+          theme[param] = `var(${CSSVar})`;
+        } else {
+          theme[param] = color;
+        }
+        theme[`.${param}`] = { [param]: theme[param] };
+      }
+    }
+    if (theme.background || theme.color || theme.backgroundColor) {
+      theme[".inversed"] = {
+        color: theme.background || theme.backgroundColor,
+        background: theme.color
+      };
+    }
+  }
+  if ((0, import_utils.isString)(val) && (0, import_color2.isCSSVar)(val)) {
+    const { THEME } = CONFIG;
+    const value = THEME[val.slice(2)];
+    const getReferenced = getMediaTheme(value, prefers);
+    return getReferenced;
+  }
+  return theme;
+};
+const recursiveTheme = (val) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const obj = {};
+  for (const param in val) {
+    const symb = param.slice(0, 1);
+    if ((0, import_utils.isObjectLike)(val[param])) {
+      if (symb === "@") {
+        const query = CONFIG.MEDIA[param.slice(1)];
+        const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+        obj[media] = recursiveTheme(val[param]);
+      } else if (symb === ":") {
+        obj[`&${param}`] = recursiveTheme(val[param]);
+      }
+    } else obj[param] = val[param];
+  }
+  return obj;
+};
+const findModifierFromArray = (val, modifierArray) => {
+  const currentMod = modifierArray.shift();
+  if (val[currentMod]) return findModifierFromArray(val[currentMod], modifierArray);
+  return val;
+};
+const findModifier = (val, modifier) => {
+  if ((0, import_utils.isArray)(modifier)) return findModifierFromArray(val, modifier);
+  else if ((0, import_utils.isString)(modifier) && val[modifier]) return val[modifier];
+  else return val;
+};
+const checkForReference = (val, callback) => {
+  if ((0, import_utils.isString)(val) && (0, import_color2.isCSSVar)(val)) return getMediaTheme(val.slice(2));
+  return val;
+};
+const checkThemeReference = (val) => checkForReference(val, checkThemeReference);
+const getMediaTheme = (value, modifier) => {
+  const activeConfig = (0, import_factory.getActiveConfig)();
+  if ((0, import_utils.isString)(value) && (0, import_color2.isCSSVar)(value)) {
+    value = getMediaTheme(value.slice(2));
+  }
+  if (!value || !(0, import_utils.isString)(value)) {
+    if (activeConfig.verbose) {
+      console.warn(`${value} - Theme is not a string`);
+    }
+    return;
+  }
+  const [themeName, ...themeModifiers] = (0, import_utils.isArray)(value) ? value : value.split(" ");
+  let themeValue = activeConfig.THEME[themeName];
+  if (themeValue && (themeModifiers || modifier)) {
+    themeValue = findModifier(themeValue, themeModifiers.length ? themeModifiers : modifier);
+  }
+  const resolvedTheme = recursiveTheme(themeValue);
+  return resolvedTheme;
+};

package/dist/cjs/system/timing.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var timing_exports = {};
+__export(timing_exports, {
+  applyTimingSequence: () => applyTimingSequence,
+  getTimingByKey: () => getTimingByKey,
+  getTimingFunction: () => getTimingFunction
+});
+module.exports = __toCommonJS(timing_exports);
+var import_smbls_utils = require("@symbo.ls/smbls-utils");
+var import_factory = require("../factory.js");
+var import_utils = require("../utils");
+const applyTimingSequence = () => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TIMING } = CONFIG;
+  (0, import_utils.generateSequence)(TIMING);
+  (0, import_utils.applySequenceVars)(TIMING);
+};
+const getTimingFunction = (value) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TIMING } = CONFIG;
+  return TIMING[value] || TIMING[(0, import_smbls_utils.toCamelCase)(value)] || value;
+};
+const getTimingByKey = (value, property = "timing") => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TIMING } = CONFIG;
+  return (0, import_utils.getSequenceValuePropertyPair)(
+    value,
+    property,
+    TIMING
+  );
+};

package/dist/cjs/system/typography.js

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var typography_exports = {};
+__export(typography_exports, {
+  applyHeadings: () => applyHeadings,
+  applyTypographySequence: () => applyTypographySequence,
+  getFontSizeByKey: () => getFontSizeByKey,
+  runThroughMedia: () => runThroughMedia
+});
+module.exports = __toCommonJS(typography_exports);
+var import_utils = require("@domql/utils");
+var import_factory = require("../factory.js");
+var import_utils2 = require("../utils");
+const runThroughMedia = (FACTORY) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TYPOGRAPHY, MEDIA } = CONFIG;
+  for (const prop in FACTORY) {
+    const isPropMedia = prop.slice(0, 1) === "@";
+    const mediaValue = FACTORY[prop];
+    if (!isPropMedia) continue;
+    const { mediaRegenerate } = FACTORY;
+    const mediaName = prop.slice(1);
+    const { type, base, ratio, range, subSequence, h1Matches, unit } = FACTORY;
+    (0, import_utils.merge)(mediaValue, {
+      type,
+      base,
+      ratio,
+      range,
+      subSequence,
+      h1Matches,
+      unit
+    });
+    const query = MEDIA[mediaName];
+    const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
+    TYPOGRAPHY.templates[media] = {
+      fontSize: mediaValue.base / TYPOGRAPHY.browserDefault + unit
+    };
+    if (!mediaRegenerate) {
+      (0, import_utils2.applyMediaSequenceVars)(FACTORY, prop);
+      continue;
+    }
+    (0, import_utils.merge)(mediaValue, {
+      sequence: {},
+      scales: {},
+      templates: {},
+      vars: {}
+    });
+    (0, import_utils2.generateSequence)(mediaValue);
+    (0, import_utils2.applyMediaSequenceVars)(FACTORY, prop);
+  }
+};
+const applyHeadings = (props) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  if (props.h1Matches) {
+    const unit = props.unit;
+    const HEADINGS = (0, import_utils2.findHeadings)(props);
+    const { templates } = props;
+    for (const k in HEADINGS) {
+      const headerName = `h${parseInt(k) + 1}`;
+      const headerStyle = templates[headerName];
+      templates[headerName] = {
+        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
+      };
+    }
+  }
+};
+const applyTypographySequence = () => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TYPOGRAPHY } = CONFIG;
+  (0, import_utils2.generateSequence)(TYPOGRAPHY);
+  applyHeadings(TYPOGRAPHY);
+  (0, import_utils2.applySequenceVars)(TYPOGRAPHY);
+  runThroughMedia(TYPOGRAPHY);
+};
+const getFontSizeByKey = (value) => {
+  const CONFIG = (0, import_factory.getActiveConfig)();
+  const { TYPOGRAPHY } = CONFIG;
+  return (0, import_utils2.getSequenceValuePropertyPair)(value, "fontSize", TYPOGRAPHY);
+};

package/dist/cjs/tests/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tests_exports = {};
+__export(tests_exports, {
+  testWCAGAA: () => testWCAGAA,
+  testWCAGAAA: () => testWCAGAAA
+});
+module.exports = __toCommonJS(tests_exports);
+const testWCAGAA = (colorA, colorB) => {
+};
+const testWCAGAAA = (colorA, colorB) => {
+};