@symbo.ls/scratch 3.6.8 → 3.7.0

package/dist/cjs/transforms/index.js

@@ -153,7 +153,7 @@ const transformBackgroundImage = (backgroundImage, globalTheme) => {
     if ((0, import_utils2.isCSSVar)(v)) return `var(${v})`;
     if (v.includes("url")) return v;
     if (v.includes("gradient")) return resolveColorsInGradient(v, globalTheme);
-    else if (CONFIG.GRADIENT[backgroundImage]) {
+    else if (CONFIG.gradient[backgroundImage]) {
       return {
         backgroundImage: (0, import_system.getMediaColor)(
           backgroundImage,

package/dist/cjs/utils/sequence.js

@@ -218,7 +218,7 @@ const generateSequencePosition = (sequenceProps, position = 0) => {
 };
 const getSequenceValue = (value = "A", sequenceProps) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { UNIT } = CONFIG;
+  const { unit: UNIT } = CONFIG;
   if ((0, import_utils.isString)(value) && (0, import_color.isCSSVar)(value)) return `var(${value})`;
   const { sequence, unit = UNIT.default, useVariable } = sequenceProps;
   const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;

package/dist/cjs/utils/var.js

@@ -38,7 +38,7 @@ const setVariables = (result, key) => {
 };
 const applySequenceGlobalVars = (vars, obj, options) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { UNIT } = CONFIG;
+  const { unit: UNIT } = CONFIG;
   const unit = obj.unit || UNIT.default;
   const { base, ratio, type } = obj;
   const prefix = "--" + (type && type.replace(".", "-"));
@@ -53,7 +53,7 @@ const applySequenceGlobalVars = (vars, obj, options) => {
 };
 const applySequenceVars = (FACTORY, options = {}) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { UNIT, TIMING, CSS_VARS } = CONFIG;
+  const { unit: UNIT, timing: TIMING, CSS_VARS } = CONFIG;
   const unit = FACTORY.unit || UNIT.default;
   const { mediaRegenerate, sequence, scales } = FACTORY;
   if (!mediaRegenerate) {
@@ -77,7 +77,7 @@ const applySequenceVars = (FACTORY, options = {}) => {
 };
 const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
   const CONFIG = (0, import_factory.getActiveConfig)();
-  const { UNIT, MEDIA, CSS_VARS } = CONFIG;
+  const { unit: UNIT, media: MEDIA, CSS_VARS } = CONFIG;
   const mediaName = media.slice(1);
   const unit = FACTORY.unit || UNIT.default;
   const { mediaRegenerate } = FACTORY;

package/dist/esm/defaultConfig/animation.js

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

package/dist/esm/defaultConfig/cases.js

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

package/dist/esm/defaultConfig/color.js

@@ -3,9 +3,9 @@ var proto = {
   name: "",
   value: ""
 };
-const COLOR = {};
-const GRADIENT = {};
+const color = {};
+const gradient = {};
 export {
-  COLOR,
-  GRADIENT
+  color,
+  gradient
 };

package/dist/esm/defaultConfig/document.js

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

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

@@ -4,15 +4,15 @@ var defaultFont = {
   family: "",
   type: ""
 };
-const FONT_FAMILY = {};
-const FONT_FAMILY_TYPES = {
+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 = {};
+const font_face = {};
 export {
-  FONT_FACE,
-  FONT_FAMILY,
-  FONT_FAMILY_TYPES
+  font_face,
+  font_family,
+  font_family_types
 };

package/dist/esm/defaultConfig/font.js

@@ -7,7 +7,7 @@ var defFont = {
   fontStretch: "normal",
   fontOpticalSizing: "auto"
 };
-const FONT = {};
+const font = {};
 export {
-  FONT
+  font
 };

package/dist/esm/defaultConfig/grid.js

@@ -1,5 +1,5 @@
 const defaultProps = {};
-const GRID = defaultProps;
+const grid = defaultProps;
 export {
-  GRID
+  grid
 };

package/dist/esm/defaultConfig/icons.js

@@ -1,6 +1,6 @@
-const ICONS = {};
-const SEMANTIC_ICONS = {};
+const icons = {};
+const semantic_icons = {};
 export {
-  ICONS,
-  SEMANTIC_ICONS
+  icons,
+  semantic_icons
 };

package/dist/esm/defaultConfig/index.js

@@ -18,7 +18,7 @@ export * from "./svg.js";
 export * from "./templates.js";
 export * from "./grid.js";
 export * from "./class.js";
-const RESET = {};
+const reset = {};
 export {
-  RESET
+  reset
 };

package/dist/esm/defaultConfig/media.js

@@ -1,9 +1,9 @@
-const MEDIA = {
+const media = {
   tv: "(min-width: 2780px)",
   light: "(prefers-color-scheme: light)",
   dark: "(prefers-color-scheme: dark)",
   print: "print"
 };
 export {
-  MEDIA
+  media
 };

package/dist/esm/defaultConfig/responsive.js

@@ -1,4 +1,4 @@
-const BREAKPOINTS = {
+const breakpoints = {
   screenL: 1920,
   screenM: 1680,
   screenS: 1440,
@@ -10,7 +10,7 @@ const BREAKPOINTS = {
   mobileS: 480,
   mobileXS: 375
 };
-const DEVICES = {
+const devices = {
   screenXXL: [2560, 1440],
   screenXL: [2240, 1260],
   screenL: [1920, 1024],
@@ -25,6 +25,6 @@ const DEVICES = {
   mobileXS: [375, 768]
 };
 export {
-  BREAKPOINTS,
-  DEVICES
+  breakpoints,
+  devices
 };

package/dist/esm/defaultConfig/sequence.js

@@ -1,4 +1,4 @@
-const SEQUENCE = {
+const sequence = {
   "minor-second": 1.067,
   "major-second": 1.125,
   "minor-third": 1.2,
@@ -25,5 +25,5 @@ const SEQUENCE = {
   "double-octave": 4
 };
 export {
-  SEQUENCE
+  sequence
 };

package/dist/esm/defaultConfig/shadow.js

@@ -1,9 +1,4 @@
-const shadow = {
-  // eslint-disable-line
-  name: "primaryShadow",
-  boxShadow: "gray12, 0 0px 50px 50px"
-};
-const SHADOW = {};
+const shadow = {};
 export {
-  SHADOW
+  shadow
 };

package/dist/esm/defaultConfig/spacing.js

@@ -1,9 +1,9 @@
-import { SEQUENCE } from "./sequence.js";
-import { TYPOGRAPHY } from "./typography.js";
+import { sequence } from "./sequence.js";
+import { typography } from "./typography.js";
 const defaultProps = {
-  base: TYPOGRAPHY.base,
+  base: typography.base,
   type: "spacing",
-  ratio: SEQUENCE.phi,
+  ratio: sequence.phi,
   range: [-5, 15],
   subSequence: true,
   mediaRegenerate: false,
@@ -12,7 +12,7 @@ const defaultProps = {
   scales: {},
   vars: {}
 };
-const SPACING = defaultProps;
+const spacing = defaultProps;
 export {
-  SPACING
+  spacing
 };

package/dist/esm/defaultConfig/svg.js

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

package/dist/esm/defaultConfig/templates.js

@@ -1,4 +1,4 @@
-const TEMPLATES = {};
+const templates = {};
 export {
-  TEMPLATES
+  templates
 };

package/dist/esm/defaultConfig/theme.js

@@ -10,7 +10,7 @@ const themeA = {
   inverse: {}
   // schemeAInverse
 };
-const THEME = {};
+const theme = {};
 export {
-  THEME
+  theme
 };

package/dist/esm/defaultConfig/timing.js

@@ -1,9 +1,9 @@
-import { SEQUENCE } from "./sequence";
+import { sequence } from "./sequence";
 const defaultProps = {
   default: 150,
   base: 150,
   type: "timing",
-  ratio: SEQUENCE["perfect-fourth"],
+  ratio: sequence["perfect-fourth"],
   range: [-3, 12],
   mediaRegenerate: false,
   unit: "ms",
@@ -11,7 +11,7 @@ const defaultProps = {
   scales: {},
   vars: {}
 };
-const TIMING = defaultProps;
+const timing = defaultProps;
 export {
-  TIMING
+  timing
 };

package/dist/esm/defaultConfig/typography.js

@@ -1,9 +1,9 @@
-import { SEQUENCE } from "./sequence.js";
+import { sequence } from "./sequence.js";
 const defaultProps = {
   browserDefault: 16,
   base: 16,
   type: "font-size",
-  ratio: SEQUENCE["minor-third"],
+  ratio: sequence["minor-third"],
   range: [-3, 12],
   h1Matches: 6,
   lineHeight: 1.5,
@@ -15,7 +15,7 @@ const defaultProps = {
   scales: {},
   vars: {}
 };
-const TYPOGRAPHY = defaultProps;
+const typography = defaultProps;
 export {
-  TYPOGRAPHY
+  typography
 };

package/dist/esm/defaultConfig/unit.js

@@ -1,6 +1,6 @@
-const UNIT = {
+const unit = {
   default: "em"
 };
 export {
-  UNIT
+  unit
 };

package/dist/esm/factory.js

@@ -9,10 +9,16 @@ const CSS_VARS = {};
 const CSS_MEDIA_VARS = {};
 const _CONF = CONF;
 const _confLower = {};
+const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
+const toUpper = (s) => s.replace(/([A-Z])/g, "_$1").toUpperCase();
 for (const key in _CONF) {
   const lower = key.toLowerCase();
   _confLower[lower] = _CONF[key];
+  const camel = toCamel(lower);
+  if (camel !== lower) _confLower[camel] = _CONF[key];
   if (lower !== key) _confLower[key] = _CONF[key];
+  const upper = toUpper(key);
+  if (upper !== key) _confLower[upper] = _CONF[key];
 }
 const CONFIG = {
   verbose: false,

package/dist/esm/set.js

@@ -25,9 +25,11 @@ const VALUE_TRANSFORMERS = {
   gradient: setGradient,
   font: setFont,
   font_family: setFontFamily,
+  fontfamily: setFontFamily,
   theme: setTheme,
   icons: setSvgIcon,
   semantic_icons: setSameValue,
+  semanticicons: setSameValue,
   svg: setSVG,
   svg_data: setSameValue,
   typography: setSameValue,
@@ -84,6 +86,7 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     globalTheme,
     useDocumentTheme,
     useDefaultConfig,
+    semanticIcons,
     SEMANTIC_ICONS,
     semantic_icons,
     files,
@@ -103,9 +106,10 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
   if (globalTheme !== void 0) CONFIG.globalTheme = globalTheme;
   if (recivedConfig.useThemeSuffixedVars !== void 0) CONFIG.useThemeSuffixedVars = recivedConfig.useThemeSuffixedVars;
   if (useDefaultConfig !== void 0) CONFIG.useDefaultConfig = useDefaultConfig;
-  const _semanticIcons = SEMANTIC_ICONS || semantic_icons;
+  const _semanticIcons = semanticIcons || SEMANTIC_ICONS || semantic_icons;
   if (_semanticIcons !== void 0) {
     CONFIG.semantic_icons = _semanticIcons;
+    CONFIG.semanticIcons = CONFIG.semantic_icons;
     CONFIG.SEMANTIC_ICONS = CONFIG.semantic_icons;
   }
   if (CONFIG.verbose) console.log(CONFIG);
@@ -123,21 +127,21 @@ const set = (recivedConfig, options = SET_OPTIONS) => {
     if (lower !== key && keySet.has(lower)) return;
     return setEach(key, config[key]);
   });
-  if (config.TYPOGRAPHY || config.typography) {
+  if (config.typography || config.TYPOGRAPHY) {
     try {
       applyTypographySequence();
     } catch (e) {
       if (CONFIG.verbose) console.warn("Error applying typography sequence", e);
     }
   }
-  if (config.SPACING || config.spacing) {
+  if (config.spacing || config.SPACING) {
     try {
       applySpacingSequence();
     } catch (e) {
       if (CONFIG.verbose) console.warn("Error applying spacing sequence", e);
     }
   }
-  if (config.TIMING || config.timing) {
+  if (config.timing || config.TIMING) {
     try {
       applyTimingSequence();
     } catch (e) {

package/dist/esm/system/color.js

@@ -26,7 +26,7 @@ const getColor = (value, key, config) => {
     alpha = parsed.alpha;
     tone = parsed.tone;
   }
-  const { COLOR, GRADIENT } = CONFIG;
+  const { color: COLOR, gradient: GRADIENT } = CONFIG;
   let val = COLOR[name] || GRADIENT[name];
   if (!val) {
     if (CONFIG.verbose) console.warn("Can't find color ", name);
@@ -67,7 +67,7 @@ const getMediaColor = (value, globalTheme, config) => {
     if (parsed.cssVar) return `var(${parsed.cssVar})`;
     name = parsed.name;
   }
-  const { COLOR, GRADIENT } = CONFIG;
+  const { color: COLOR, gradient: GRADIENT } = CONFIG;
   const val = COLOR[name] || GRADIENT[name];
   const isObj = isObject(val);
   if (isObj && val.value) return getColor(value, `@${globalTheme}`, config);
@@ -76,7 +76,7 @@ const getMediaColor = (value, globalTheme, config) => {
     else {
       const obj = {};
       for (const mediaName in val) {
-        const query = CONFIG.MEDIA[mediaName.slice(1)];
+        const query = CONFIG.media[mediaName.slice(1)];
         const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
         obj[media] = getColor(value, mediaName, config);
       }
@@ -94,7 +94,7 @@ const setColor = (val, key, suffix) => {
     val = getColor(rawRef);
     if (!(val.includes("rgb") || val.includes("var") || val.includes("#"))) {
       const parts = rawRef.split(" ");
-      const refColor = CONFIG.COLOR[parts[0]];
+      const refColor = CONFIG.color[parts[0]];
       if (refColor && refColor.value) {
         let rgb2 = refColor.rgb;
         const alpha2 = parts[1] !== void 0 ? parts[1] : "1";

package/dist/esm/system/document.js

@@ -3,7 +3,7 @@ import { getActiveConfig } from "../factory.js";
 import { getDefaultOrFirstKey } from "../utils";
 const applyDocument = () => {
   const CONFIG = getActiveConfig();
-  const { DOCUMENT, FONT_FAMILY, THEME, TYPOGRAPHY } = CONFIG;
+  const { document: DOCUMENT, font_family: FONT_FAMILY, theme: THEME, typography: TYPOGRAPHY } = CONFIG;
   return merge(DOCUMENT, {
     theme: THEME.document,
     fontFamily: getDefaultOrFirstKey(FONT_FAMILY),

package/dist/esm/system/font.js

@@ -34,12 +34,12 @@ const setFont = (val, key) => {
 };
 const getFontFamily = (key, factory) => {
   const CONFIG = getActiveConfig();
-  const { FONT_FAMILY } = CONFIG;
+  const { font_family: FONT_FAMILY } = CONFIG;
   return getDefaultOrFirstKey(factory || FONT_FAMILY, key);
 };
 const setFontFamily = (val, key) => {
   const CONFIG = getActiveConfig();
-  const { FONT_FAMILY, FONT_FAMILY_TYPES } = CONFIG;
+  const { font_family: FONT_FAMILY, font_family_types: FONT_FAMILY_TYPES } = CONFIG;
   let { value, type } = val;
   if (val.isDefault) FONT_FAMILY.default = key;
   if (isObject(value)) value = arrayzeValue(value);

package/dist/esm/system/reset.js

@@ -3,7 +3,7 @@ import { getActiveConfig } from "../factory.js";
 import { getMediaTheme } from "./theme.js";
 const applyReset = (reset = {}) => {
   const CONFIG = getActiveConfig();
-  const { RESET, TYPOGRAPHY, DOCUMENT } = CONFIG;
+  const { reset: RESET, typography: TYPOGRAPHY, document: DOCUMENT } = CONFIG;
   if (RESET) {
     if (RESET[":root"]) {
       const configReset = RESET;
@@ -43,7 +43,7 @@ const applyReset = (reset = {}) => {
         height: "100%",
         margin: 0,
         fontFamily: DOCUMENT.fontFamily,
-        fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.UNIT.default,
+        fontSize: TYPOGRAPHY.base / TYPOGRAPHY.browserDefault + CONFIG.unit.default,
         ...templates,
         ...body
       },

package/dist/esm/system/shadow.js

@@ -61,7 +61,7 @@ const getShadow = (value, globalTheme) => {
   }
   if (isCSSVar(value)) return `var(${value})`;
   const [name] = isArray(value) ? value : value.split(" ");
-  const { SHADOW } = CONFIG;
+  const SHADOW = CONFIG.shadow;
   const val = SHADOW[name];
   const isObj = isObject(val);
   if (!val) {
@@ -76,7 +76,7 @@ const getShadow = (value, globalTheme) => {
   if (isObj) {
     const obj = {};
     for (const mediaName in val) {
-      const query = CONFIG.MEDIA[mediaName.slice(1)];
+      const query = CONFIG.media[mediaName.slice(1)];
       const media = "@media " + (query === "print" ? `${query}` : `screen and ${query}`);
       obj[media] = val.value;
     }

package/dist/esm/system/spacing.js

@@ -40,14 +40,14 @@ const checkIfBoxSize = (propertyName) => {
 };
 const applySpacingSequence = () => {
   const CONFIG = getActiveConfig();
-  const { SPACING } = CONFIG;
+  const { spacing: SPACING } = CONFIG;
   generateSequence(SPACING);
   applySequenceVars(SPACING);
   runThroughMedia(SPACING);
 };
 const getSequence = (sequenceProps) => {
   const CONFIG = getActiveConfig();
-  const { SPACING } = CONFIG;
+  const { spacing: SPACING } = CONFIG;
   if (!sequenceProps || !sequenceProps.sequence) return SPACING;
   const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
   return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
@@ -88,7 +88,7 @@ const getSpacingByKey = (value, propertyName = "padding", sequenceProps, fnPrefi
 };
 const getSpacingBasedOnRatio = (props, propertyName, val, fnPrefix) => {
   const CONFIG = getActiveConfig();
-  const { SPACING } = CONFIG;
+  const { spacing: SPACING } = CONFIG;
   let value = val || props[propertyName];
   if (!fnPrefix && isString(value) && value.includes("(")) {
     const fnArr = getFnPrefixAndValue(value);

package/dist/esm/system/svg.js

@@ -17,21 +17,21 @@ const setSVG = (val, key) => {
 };
 const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig();
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG;
-  for (const key in LIBRARY) lib[key] = CONFIG.SVG[key];
+  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 = getActiveConfig();
-  if (CONFIG.useIconSprite && !CONFIG.SEMANTIC_ICONS?.[key]) {
+  if (CONFIG.useIconSprite && !CONFIG.semantic_icons?.[key]) {
     return setSVG(val, key);
   }
   return val;
 };
 const appendSvgIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig();
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS;
-  for (const key in LIBRARY) lib[key] = CONFIG.ICONS[key];
+  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 }) => {

package/dist/esm/system/theme.js

@@ -26,7 +26,7 @@ const getThemeValue = (theme) => {
 const getTheme = (value, modifier) => {
   const CONFIG = getActiveConfig();
   if (CONFIG.useVariable) return getMediaTheme(value, modifier);
-  const { THEME } = CONFIG;
+  const THEME = CONFIG.theme;
   if (isString(value)) {
     const [theme, subtheme] = value.split(" ");
     const isOurTheme = THEME[theme];
@@ -97,7 +97,7 @@ const setHelpers = (theme, value) => {
   const keys = Object.keys(helpers);
   keys.map((key) => {
     const helper = helpers[key];
-    if (isString(helper)) helpers[key] = CONFIG.THEME[helper];
+    if (isString(helper)) helpers[key] = CONFIG.theme[helper];
     else getThemeValue(helpers[key]);
     return theme;
   });
@@ -230,7 +230,7 @@ const setMediaTheme = (val, key, suffix, prefers) => {
     }
   }
   if (isString(val) && isCSSVar(val)) {
-    const { THEME } = CONFIG;
+    const THEME = CONFIG.theme;
     const value = THEME[val.slice(2)];
     const getReferenced = getMediaTheme(value, prefers);
     return getReferenced;
@@ -279,7 +279,7 @@ const getMediaTheme = (value, modifier) => {
     return;
   }
   const [themeName, ...themeModifiers] = isArray(value) ? value : value.split(" ");
-  let themeValue = activeConfig.THEME[themeName];
+  let themeValue = activeConfig.theme[themeName];
   if (themeValue && themeModifiers.length) {
     themeValue = findModifier(themeValue, themeModifiers);
   } else if (themeValue && modifier) {

package/dist/esm/system/timing.js

@@ -7,18 +7,18 @@ import {
 } from "../utils";
 const applyTimingSequence = () => {
   const CONFIG = getActiveConfig();
-  const { TIMING } = CONFIG;
+  const { timing: TIMING } = CONFIG;
   generateSequence(TIMING);
   applySequenceVars(TIMING);
 };
 const getTimingFunction = (value) => {
   const CONFIG = getActiveConfig();
-  const { TIMING } = CONFIG;
+  const { timing: TIMING } = CONFIG;
   return TIMING[value] || TIMING[toCamelCase(value)] || value;
 };
 const getTimingByKey = (value, property = "timing") => {
   const CONFIG = getActiveConfig();
-  const { TIMING } = CONFIG;
+  const { timing: TIMING } = CONFIG;
   return getSequenceValuePropertyPair(
     value,
     property,

package/dist/esm/system/typography.js

@@ -9,7 +9,7 @@ import {
 } from "../utils";
 const runThroughMedia = (FACTORY) => {
   const CONFIG = getActiveConfig();
-  const { TYPOGRAPHY, MEDIA } = CONFIG;
+  const { typography: TYPOGRAPHY, media: MEDIA } = CONFIG;
   for (const prop in FACTORY) {
     const isPropMedia = prop.slice(0, 1) === "@";
     const mediaValue = FACTORY[prop];
@@ -66,7 +66,7 @@ const applyHeadings = (props) => {
 };
 const applyTypographySequence = () => {
   const CONFIG = getActiveConfig();
-  const { TYPOGRAPHY } = CONFIG;
+  const { typography: TYPOGRAPHY } = CONFIG;
   generateSequence(TYPOGRAPHY);
   applyHeadings(TYPOGRAPHY);
   applySequenceVars(TYPOGRAPHY);
@@ -74,7 +74,7 @@ const applyTypographySequence = () => {
 };
 const getFontSizeByKey = (value) => {
   const CONFIG = getActiveConfig();
-  const { TYPOGRAPHY } = CONFIG;
+  const { typography: TYPOGRAPHY } = CONFIG;
   return getSequenceValuePropertyPair(value, "fontSize", TYPOGRAPHY);
 };
 export {

package/dist/esm/transforms/index.js

@@ -135,7 +135,7 @@ const transformBackgroundImage = (backgroundImage, globalTheme) => {
     if (isCSSVar(v)) return `var(${v})`;
     if (v.includes("url")) return v;
     if (v.includes("gradient")) return resolveColorsInGradient(v, globalTheme);
-    else if (CONFIG.GRADIENT[backgroundImage]) {
+    else if (CONFIG.gradient[backgroundImage]) {
       return {
         backgroundImage: getMediaColor(
           backgroundImage,