@chakra-ui/styled-system - npm Package Compare versions

Comparing version 0.0.0-pr-202204174930 to 0.0.0-pr-202204203645

dist/chakra-ui-styled-system.cjs.dev.js

@@ -1871,111 +1871,73 @@ 'use strict';
 
+function createThemeVars(target, options) {
+  var context = {
+    cssMap: {},
+    cssVars: {}
+  };
+  utils.walkObject(target, function (value, path) {
+    var _tokenHandlerMap$firs;
+
+    // firstKey will be e.g. "space"
+    var firstKey = path[0];
+    var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler;
+
+    var _handler = handler(path, value, options),
+        cssVars = _handler.cssVars,
+        cssMap = _handler.cssMap;
+
+    Object.assign(context.cssVars, cssVars);
+    Object.assign(context.cssMap, cssMap);
+  });
+  return context;
+}
+
 /**
- * Convert a token name to a css variable
- *
- * @example
- * tokenToCssVar('colors.red.500', 'chakra')
- * => {
- *   variable: '--chakra-colors-red-500',
- *   reference: 'var(--chakra-colors-red-500)'
- * }
+ * Define transformation handlers for ThemeScale
  */
-function tokenToCssVar(token, prefix) {
-  return cssVar(String(token).replace(/\./g, "-"), undefined, prefix);
-}
+var tokenHandlerMap = {
+  space: function space(keys, value, options) {
+    var _extends2;
 
-function createThemeVars(flatTokens, options) {
-  var cssVars = {};
-  var cssMap = {};
+    var properties = tokenHandlerMap.defaultHandler(keys, value, options);
+    var firstKey = keys[0],
+        referenceKeys = keys.slice(1);
+    var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
+    var negativeVarKey = keys.join("-");
 
-  var _loop = function _loop() {
-    var _Object$entries$_i = _Object$entries[_i],
-        token = _Object$entries$_i[0],
-        tokenValue = _Object$entries$_i[1];
-    var isSemantic = tokenValue.isSemantic,
-        value = tokenValue.value;
+    var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix),
+        variable = _cssVar.variable,
+        reference = _cssVar.reference;
 
-    var _tokenToCssVar = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix),
-        variable = _tokenToCssVar.variable,
-        reference = _tokenToCssVar.reference;
+    var negativeValue = calc.negate(value);
+    var varRef = calc.negate(reference);
+    return {
+      cssVars: properties.cssVars,
+      cssMap: _extends({}, properties.cssMap, (_extends2 = {}, _extends2[negativeLookupKey] = {
+        value: "" + negativeValue,
+        "var": "" + variable,
+        varRef: varRef
+      }, _extends2))
+    };
+  },
+  defaultHandler: function defaultHandler(keys, value, options) {
+    var _cssVars, _cssMap;
 
-    if (!isSemantic) {
-      if (token.startsWith("space")) {
-        var keys = token.split(".");
-        var firstKey = keys[0],
-            referenceKeys = keys.slice(1);
-        /** @example space.-4 */
+    var lookupKey = keys.join(".");
+    var varKey = keys.join("-");
 
-        var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
-        var negativeValue = calc.negate(value);
-        var negatedReference = calc.negate(reference);
-        cssMap[negativeLookupKey] = {
-          value: negativeValue,
-          "var": variable,
-          varRef: negatedReference
-        };
-      }
+    var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix),
+        variable = _cssVar2.variable,
+        reference = _cssVar2.reference;
 
-      cssVars[variable] = value;
-      cssMap[token] = {
+    return {
+      cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars),
+      cssMap: (_cssMap = {}, _cssMap[lookupKey] = {
         value: value,
         "var": variable,
         varRef: reference
-      };
-      return "continue";
-    }
-
-    var lookupToken = function lookupToken(maybeToken) {
-      var scale = String(token).split(".")[0];
-      var withScale = [scale, maybeToken].join(".");
-      /** @example flatTokens['space.4'] === '16px' */
-
-      var resolvedTokenValue = flatTokens[withScale];
-      if (!resolvedTokenValue) return maybeToken;
-
-      var _tokenToCssVar2 = tokenToCssVar(withScale, options == null ? void 0 : options.cssVarPrefix),
-          reference = _tokenToCssVar2.reference;
-
-      return reference;
+      }, _cssMap)
     };
-
-    var normalizedValue = utils.isObject(value) ? value : {
-      "default": value
-    };
-    cssVars = utils.mergeWith(cssVars, Object.entries(normalizedValue).reduce(function (acc, _ref) {
-      var _pseudoSelectors$cond, _acc$conditionSelecto;
-
-      var conditionAlias = _ref[0],
-          conditionValue = _ref[1];
-      var maybeReference = lookupToken(conditionValue);
-
-      if (conditionAlias === "default") {
-        acc[variable] = maybeReference;
-        return acc;
-      }
-      /** @example { _dark: "#fff" } => { '.chakra-ui-dark': "#fff" } */
-
-
-      var conditionSelector = (_pseudoSelectors$cond = pseudoSelectors == null ? void 0 : pseudoSelectors[conditionAlias]) != null ? _pseudoSelectors$cond : conditionAlias;
-      acc[conditionSelector] = (_acc$conditionSelecto = {}, _acc$conditionSelecto[variable] = maybeReference, _acc$conditionSelecto);
-      return acc;
-    }, {}));
-    cssMap[token] = {
-      value: reference,
-      "var": variable,
-      varRef: reference
-    };
-  };
-
-  for (var _i = 0, _Object$entries = Object.entries(flatTokens); _i < _Object$entries.length; _i++) {
-    var _ret = _loop();
-
-    if (_ret === "continue") continue;
   }
+};
 
-  return {
-    cssVars: cssVars,
-    cssMap: cssMap
-  };
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -2002,5 +1964,2 @@ if (source == null) return {};
 }
-function extractSemanticTokens(theme) {
-  return theme.semanticTokens;
-}
 function omitVars(rawTheme) {
@@ -2015,26 +1974,2 @@ rawTheme.__cssMap;
 
-function flattenTokens(_ref) {
-  var _flatten, _flatten2;
-
-  var tokens = _ref.tokens,
-      semanticTokens = _ref.semanticTokens;
-  return Object.fromEntries([].concat(Object.entries((_flatten = utils.flatten(tokens)) != null ? _flatten : {}).map(function (_ref2) {
-    var token = _ref2[0],
-        value = _ref2[1];
-    var enhancedToken = {
-      isSemantic: false,
-      value: value
-    };
-    return [token, enhancedToken];
-  }), Object.entries((_flatten2 = utils.flatten(semanticTokens, 1)) != null ? _flatten2 : {}).map(function (_ref3) {
-    var token = _ref3[0],
-        value = _ref3[1];
-    var enhancedToken = {
-      isSemantic: true,
-      value: value
-    };
-    return [token, enhancedToken];
-  })));
-}
-
 function toCSSVar(rawTheme) {
@@ -2050,10 +1985,5 @@ var _theme$config;
   var tokens = extractTokens(theme);
-  var semanticTokens = extractSemanticTokens(theme);
-  var flatTokens = flattenTokens({
-    tokens: tokens,
-    semanticTokens: semanticTokens
-  });
   var cssVarPrefix = (_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix;
 
-  var _createThemeVars = createThemeVars(flatTokens, {
+  var _createThemeVars = createThemeVars(tokens, {
     cssVarPrefix: cssVarPrefix
@@ -2091,3 +2021,2 @@ }),
 exports.filter = filter;
-exports.flattenTokens = flattenTokens;
 exports.flexbox = flexbox;
@@ -2104,4 +2033,2 @@ exports.getCss = getCss;
 exports.propNames = propNames;
-exports.pseudoPropNames = pseudoPropNames;
-exports.pseudoSelectors = pseudoSelectors;
 exports.ring = ring;
@@ -2108,0 +2035,0 @@ exports.scroll = scroll;

dist/chakra-ui-styled-system.cjs.prod.js

@@ -1871,111 +1871,73 @@ 'use strict';
 
+function createThemeVars(target, options) {
+  var context = {
+    cssMap: {},
+    cssVars: {}
+  };
+  utils.walkObject(target, function (value, path) {
+    var _tokenHandlerMap$firs;
+
+    // firstKey will be e.g. "space"
+    var firstKey = path[0];
+    var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler;
+
+    var _handler = handler(path, value, options),
+        cssVars = _handler.cssVars,
+        cssMap = _handler.cssMap;
+
+    Object.assign(context.cssVars, cssVars);
+    Object.assign(context.cssMap, cssMap);
+  });
+  return context;
+}
+
 /**
- * Convert a token name to a css variable
- *
- * @example
- * tokenToCssVar('colors.red.500', 'chakra')
- * => {
- *   variable: '--chakra-colors-red-500',
- *   reference: 'var(--chakra-colors-red-500)'
- * }
+ * Define transformation handlers for ThemeScale
  */
-function tokenToCssVar(token, prefix) {
-  return cssVar(String(token).replace(/\./g, "-"), undefined, prefix);
-}
+var tokenHandlerMap = {
+  space: function space(keys, value, options) {
+    var _extends2;
 
-function createThemeVars(flatTokens, options) {
-  var cssVars = {};
-  var cssMap = {};
+    var properties = tokenHandlerMap.defaultHandler(keys, value, options);
+    var firstKey = keys[0],
+        referenceKeys = keys.slice(1);
+    var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
+    var negativeVarKey = keys.join("-");
 
-  var _loop = function _loop() {
-    var _Object$entries$_i = _Object$entries[_i],
-        token = _Object$entries$_i[0],
-        tokenValue = _Object$entries$_i[1];
-    var isSemantic = tokenValue.isSemantic,
-        value = tokenValue.value;
+    var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix),
+        variable = _cssVar.variable,
+        reference = _cssVar.reference;
 
-    var _tokenToCssVar = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix),
-        variable = _tokenToCssVar.variable,
-        reference = _tokenToCssVar.reference;
+    var negativeValue = calc.negate(value);
+    var varRef = calc.negate(reference);
+    return {
+      cssVars: properties.cssVars,
+      cssMap: _extends({}, properties.cssMap, (_extends2 = {}, _extends2[negativeLookupKey] = {
+        value: "" + negativeValue,
+        "var": "" + variable,
+        varRef: varRef
+      }, _extends2))
+    };
+  },
+  defaultHandler: function defaultHandler(keys, value, options) {
+    var _cssVars, _cssMap;
 
-    if (!isSemantic) {
-      if (token.startsWith("space")) {
-        var keys = token.split(".");
-        var firstKey = keys[0],
-            referenceKeys = keys.slice(1);
-        /** @example space.-4 */
+    var lookupKey = keys.join(".");
+    var varKey = keys.join("-");
 
-        var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
-        var negativeValue = calc.negate(value);
-        var negatedReference = calc.negate(reference);
-        cssMap[negativeLookupKey] = {
-          value: negativeValue,
-          "var": variable,
-          varRef: negatedReference
-        };
-      }
+    var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix),
+        variable = _cssVar2.variable,
+        reference = _cssVar2.reference;
 
-      cssVars[variable] = value;
-      cssMap[token] = {
+    return {
+      cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars),
+      cssMap: (_cssMap = {}, _cssMap[lookupKey] = {
         value: value,
         "var": variable,
         varRef: reference
-      };
-      return "continue";
-    }
-
-    var lookupToken = function lookupToken(maybeToken) {
-      var scale = String(token).split(".")[0];
-      var withScale = [scale, maybeToken].join(".");
-      /** @example flatTokens['space.4'] === '16px' */
-
-      var resolvedTokenValue = flatTokens[withScale];
-      if (!resolvedTokenValue) return maybeToken;
-
-      var _tokenToCssVar2 = tokenToCssVar(withScale, options == null ? void 0 : options.cssVarPrefix),
-          reference = _tokenToCssVar2.reference;
-
-      return reference;
+      }, _cssMap)
     };
-
-    var normalizedValue = utils.isObject(value) ? value : {
-      "default": value
-    };
-    cssVars = utils.mergeWith(cssVars, Object.entries(normalizedValue).reduce(function (acc, _ref) {
-      var _pseudoSelectors$cond, _acc$conditionSelecto;
-
-      var conditionAlias = _ref[0],
-          conditionValue = _ref[1];
-      var maybeReference = lookupToken(conditionValue);
-
-      if (conditionAlias === "default") {
-        acc[variable] = maybeReference;
-        return acc;
-      }
-      /** @example { _dark: "#fff" } => { '.chakra-ui-dark': "#fff" } */
-
-
-      var conditionSelector = (_pseudoSelectors$cond = pseudoSelectors == null ? void 0 : pseudoSelectors[conditionAlias]) != null ? _pseudoSelectors$cond : conditionAlias;
-      acc[conditionSelector] = (_acc$conditionSelecto = {}, _acc$conditionSelecto[variable] = maybeReference, _acc$conditionSelecto);
-      return acc;
-    }, {}));
-    cssMap[token] = {
-      value: reference,
-      "var": variable,
-      varRef: reference
-    };
-  };
-
-  for (var _i = 0, _Object$entries = Object.entries(flatTokens); _i < _Object$entries.length; _i++) {
-    var _ret = _loop();
-
-    if (_ret === "continue") continue;
   }
+};
 
-  return {
-    cssVars: cssVars,
-    cssMap: cssMap
-  };
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -2002,5 +1964,2 @@ if (source == null) return {};
 }
-function extractSemanticTokens(theme) {
-  return theme.semanticTokens;
-}
 function omitVars(rawTheme) {
@@ -2015,26 +1974,2 @@ rawTheme.__cssMap;
 
-function flattenTokens(_ref) {
-  var _flatten, _flatten2;
-
-  var tokens = _ref.tokens,
-      semanticTokens = _ref.semanticTokens;
-  return Object.fromEntries([].concat(Object.entries((_flatten = utils.flatten(tokens)) != null ? _flatten : {}).map(function (_ref2) {
-    var token = _ref2[0],
-        value = _ref2[1];
-    var enhancedToken = {
-      isSemantic: false,
-      value: value
-    };
-    return [token, enhancedToken];
-  }), Object.entries((_flatten2 = utils.flatten(semanticTokens, 1)) != null ? _flatten2 : {}).map(function (_ref3) {
-    var token = _ref3[0],
-        value = _ref3[1];
-    var enhancedToken = {
-      isSemantic: true,
-      value: value
-    };
-    return [token, enhancedToken];
-  })));
-}
-
 function toCSSVar(rawTheme) {
@@ -2050,10 +1985,5 @@ var _theme$config;
   var tokens = extractTokens(theme);
-  var semanticTokens = extractSemanticTokens(theme);
-  var flatTokens = flattenTokens({
-    tokens: tokens,
-    semanticTokens: semanticTokens
-  });
   var cssVarPrefix = (_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix;
 
-  var _createThemeVars = createThemeVars(flatTokens, {
+  var _createThemeVars = createThemeVars(tokens, {
     cssVarPrefix: cssVarPrefix
@@ -2091,3 +2021,2 @@ }),
 exports.filter = filter;
-exports.flattenTokens = flattenTokens;
 exports.flexbox = flexbox;
@@ -2104,4 +2033,2 @@ exports.getCss = getCss;
 exports.propNames = propNames;
-exports.pseudoPropNames = pseudoPropNames;
-exports.pseudoSelectors = pseudoSelectors;
 exports.ring = ring;
@@ -2108,0 +2035,0 @@ exports.scroll = scroll;

dist/chakra-ui-styled-system.esm.js

@@ -1,2 +0,2 @@
-import { isObject, isString, isNumber, isCssVar, memoizedGet, objectKeys, mergeWith, runIfFn, pick, flatten, analyzeBreakpoints } from '@chakra-ui/utils';
+import { isObject, isString, isNumber, isCssVar, memoizedGet, objectKeys, mergeWith, runIfFn, walkObject, pick, analyzeBreakpoints } from '@chakra-ui/utils';
 
@@ -1867,111 +1867,73 @@ function _extends() {
 
+function createThemeVars(target, options) {
+  var context = {
+    cssMap: {},
+    cssVars: {}
+  };
+  walkObject(target, function (value, path) {
+    var _tokenHandlerMap$firs;
+
+    // firstKey will be e.g. "space"
+    var firstKey = path[0];
+    var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler;
+
+    var _handler = handler(path, value, options),
+        cssVars = _handler.cssVars,
+        cssMap = _handler.cssMap;
+
+    Object.assign(context.cssVars, cssVars);
+    Object.assign(context.cssMap, cssMap);
+  });
+  return context;
+}
+
 /**
- * Convert a token name to a css variable
- *
- * @example
- * tokenToCssVar('colors.red.500', 'chakra')
- * => {
- *   variable: '--chakra-colors-red-500',
- *   reference: 'var(--chakra-colors-red-500)'
- * }
+ * Define transformation handlers for ThemeScale
  */
-function tokenToCssVar(token, prefix) {
-  return cssVar(String(token).replace(/\./g, "-"), undefined, prefix);
-}
+var tokenHandlerMap = {
+  space: function space(keys, value, options) {
+    var _extends2;
 
-function createThemeVars(flatTokens, options) {
-  var cssVars = {};
-  var cssMap = {};
+    var properties = tokenHandlerMap.defaultHandler(keys, value, options);
+    var firstKey = keys[0],
+        referenceKeys = keys.slice(1);
+    var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
+    var negativeVarKey = keys.join("-");
 
-  var _loop = function _loop() {
-    var _Object$entries$_i = _Object$entries[_i],
-        token = _Object$entries$_i[0],
-        tokenValue = _Object$entries$_i[1];
-    var isSemantic = tokenValue.isSemantic,
-        value = tokenValue.value;
+    var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix),
+        variable = _cssVar.variable,
+        reference = _cssVar.reference;
 
-    var _tokenToCssVar = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix),
-        variable = _tokenToCssVar.variable,
-        reference = _tokenToCssVar.reference;
+    var negativeValue = calc.negate(value);
+    var varRef = calc.negate(reference);
+    return {
+      cssVars: properties.cssVars,
+      cssMap: _extends({}, properties.cssMap, (_extends2 = {}, _extends2[negativeLookupKey] = {
+        value: "" + negativeValue,
+        "var": "" + variable,
+        varRef: varRef
+      }, _extends2))
+    };
+  },
+  defaultHandler: function defaultHandler(keys, value, options) {
+    var _cssVars, _cssMap;
 
-    if (!isSemantic) {
-      if (token.startsWith("space")) {
-        var keys = token.split(".");
-        var firstKey = keys[0],
-            referenceKeys = keys.slice(1);
-        /** @example space.-4 */
+    var lookupKey = keys.join(".");
+    var varKey = keys.join("-");
 
-        var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
-        var negativeValue = calc.negate(value);
-        var negatedReference = calc.negate(reference);
-        cssMap[negativeLookupKey] = {
-          value: negativeValue,
-          "var": variable,
-          varRef: negatedReference
-        };
-      }
+    var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix),
+        variable = _cssVar2.variable,
+        reference = _cssVar2.reference;
 
-      cssVars[variable] = value;
-      cssMap[token] = {
+    return {
+      cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars),
+      cssMap: (_cssMap = {}, _cssMap[lookupKey] = {
         value: value,
         "var": variable,
         varRef: reference
-      };
-      return "continue";
-    }
-
-    var lookupToken = function lookupToken(maybeToken) {
-      var scale = String(token).split(".")[0];
-      var withScale = [scale, maybeToken].join(".");
-      /** @example flatTokens['space.4'] === '16px' */
-
-      var resolvedTokenValue = flatTokens[withScale];
-      if (!resolvedTokenValue) return maybeToken;
-
-      var _tokenToCssVar2 = tokenToCssVar(withScale, options == null ? void 0 : options.cssVarPrefix),
-          reference = _tokenToCssVar2.reference;
-
-      return reference;
+      }, _cssMap)
     };
-
-    var normalizedValue = isObject(value) ? value : {
-      "default": value
-    };
-    cssVars = mergeWith(cssVars, Object.entries(normalizedValue).reduce(function (acc, _ref) {
-      var _pseudoSelectors$cond, _acc$conditionSelecto;
-
-      var conditionAlias = _ref[0],
-          conditionValue = _ref[1];
-      var maybeReference = lookupToken(conditionValue);
-
-      if (conditionAlias === "default") {
-        acc[variable] = maybeReference;
-        return acc;
-      }
-      /** @example { _dark: "#fff" } => { '.chakra-ui-dark': "#fff" } */
-
-
-      var conditionSelector = (_pseudoSelectors$cond = pseudoSelectors == null ? void 0 : pseudoSelectors[conditionAlias]) != null ? _pseudoSelectors$cond : conditionAlias;
-      acc[conditionSelector] = (_acc$conditionSelecto = {}, _acc$conditionSelecto[variable] = maybeReference, _acc$conditionSelecto);
-      return acc;
-    }, {}));
-    cssMap[token] = {
-      value: reference,
-      "var": variable,
-      varRef: reference
-    };
-  };
-
-  for (var _i = 0, _Object$entries = Object.entries(flatTokens); _i < _Object$entries.length; _i++) {
-    var _ret = _loop();
-
-    if (_ret === "continue") continue;
   }
+};
 
-  return {
-    cssVars: cssVars,
-    cssMap: cssMap
-  };
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -1998,5 +1960,2 @@ if (source == null) return {};
 }
-function extractSemanticTokens(theme) {
-  return theme.semanticTokens;
-}
 function omitVars(rawTheme) {
@@ -2011,26 +1970,2 @@ rawTheme.__cssMap;
 
-function flattenTokens(_ref) {
-  var _flatten, _flatten2;
-
-  var tokens = _ref.tokens,
-      semanticTokens = _ref.semanticTokens;
-  return Object.fromEntries([].concat(Object.entries((_flatten = flatten(tokens)) != null ? _flatten : {}).map(function (_ref2) {
-    var token = _ref2[0],
-        value = _ref2[1];
-    var enhancedToken = {
-      isSemantic: false,
-      value: value
-    };
-    return [token, enhancedToken];
-  }), Object.entries((_flatten2 = flatten(semanticTokens, 1)) != null ? _flatten2 : {}).map(function (_ref3) {
-    var token = _ref3[0],
-        value = _ref3[1];
-    var enhancedToken = {
-      isSemantic: true,
-      value: value
-    };
-    return [token, enhancedToken];
-  })));
-}
-
 function toCSSVar(rawTheme) {
@@ -2046,10 +1981,5 @@ var _theme$config;
   var tokens = extractTokens(theme);
-  var semanticTokens = extractSemanticTokens(theme);
-  var flatTokens = flattenTokens({
-    tokens: tokens,
-    semanticTokens: semanticTokens
-  });
   var cssVarPrefix = (_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix;
 
-  var _createThemeVars = createThemeVars(flatTokens, {
+  var _createThemeVars = createThemeVars(tokens, {
     cssVarPrefix: cssVarPrefix
@@ -2078,2 +2008,2 @@ }),
 
-export { addPrefix, background, border, calc, color, css, cssVar, effect, filter, flattenTokens, flexbox, getCss, grid, interactivity, isStyleProp, layout, layoutPropNames, list, others, position, propNames, pseudoPropNames, pseudoSelectors, ring, scroll, space, systemProps, textDecoration, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography };
+export { addPrefix, background, border, calc, color, css, cssVar, effect, filter, flexbox, getCss, grid, interactivity, isStyleProp, layout, layoutPropNames, list, others, position, propNames, ring, scroll, space, systemProps, textDecoration, toCSSVar, toVarDefinition, toVarReference, tokenToCSSVar, transform, transition, typography };

dist/declarations/src/create-theme-vars/create-theme-vars.d.ts

 import { Dict } from "@chakra-ui/utils";
-import { FlatTokens } from "./flatten-tokens";
 export interface CreateThemeVarsOptions {
@@ -10,6 +9,3 @@ cssVarPrefix?: string;
 }
-export declare function createThemeVars(flatTokens: FlatTokens, options: CreateThemeVarsOptions): {
-    cssVars: {};
-    cssMap: {};
-};
+export declare function createThemeVars(target: Dict, options: CreateThemeVarsOptions): ThemeVars;
 //# sourceMappingURL=create-theme-vars.d.ts.map

dist/declarations/src/create-theme-vars/index.d.ts

 export * from "./calc";
 export * from "./css-var";
 export * from "./to-css-var";
-export * from "./flatten-tokens";
 export type { ThemeScale } from "./theme-tokens";
 //# sourceMappingURL=index.d.ts.map

dist/declarations/src/create-theme-vars/theme-tokens.d.ts

@@ -7,3 +7,2 @@ import { Dict } from "@chakra-ui/utils";
 };
-export declare function extractSemanticTokens(theme: Dict): any;
 export declare function omitVars(rawTheme: Dict): {
@@ -10,0 +9,0 @@ [x: string]: any;

dist/declarations/src/create-theme-vars/to-css-var.d.ts

 import { Dict } from "@chakra-ui/utils";
-import type { WithCSSVar } from "../utils";
+import type { WithCSSVar } from "../utils/types";
 export declare function toCSSVar<T extends Dict>(rawTheme: T): WithCSSVar<T>;
 //# sourceMappingURL=to-css-var.d.ts.map

dist/declarations/src/index.d.ts

@@ -7,3 +7,2 @@ export * from "./config";
 export * from "./create-theme-vars";
-export * from "./pseudos";
 export type { ResponsiveValue } from "./utils";
@@ -10,0 +9,0 @@ export { tokenToCSSVar } from "./utils/create-transform";

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "0.0.0-pr-202204174930",
+  "version": "0.0.0-pr-202204203645",
   "description": "Style function for css-in-js building component libraries",
@@ -39,3 +39,3 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/utils": "0.0.0-pr-202204174930",
+    "@chakra-ui/utils": "1.9.1",
     "csstype": "^3.0.9"
@@ -42,0 +42,0 @@ },

src/create-theme-vars/create-theme-vars.ts

@@ -1,6 +0,5 @@
-import { Dict, isObject, mergeWith } from "@chakra-ui/utils"
+import { Dict, walkObject } from "@chakra-ui/utils"
+import { ThemeScale } from "./theme-tokens"
 import { calc, Operand } from "./calc"
 import { cssVar } from "./css-var"
-import { FlatToken, FlatTokens } from "./flatten-tokens"
-import { pseudoSelectors } from "../pseudos"
 
@@ -16,95 +15,84 @@ export interface CreateThemeVarsOptions {
 
-/**
- * Convert a token name to a css variable
- *
- * @example
- * tokenToCssVar('colors.red.500', 'chakra')
- * => {
- *   variable: '--chakra-colors-red-500',
- *   reference: 'var(--chakra-colors-red-500)'
- * }
- */
-function tokenToCssVar(token: string | number, prefix?: string) {
-  return cssVar(String(token).replace(/\./g, "-"), undefined, prefix)
-}
+export function createThemeVars(target: Dict, options: CreateThemeVarsOptions) {
+  const context: ThemeVars = {
+    cssMap: {},
+    cssVars: {},
+  }
 
-export function createThemeVars(
-  flatTokens: FlatTokens,
-  options: CreateThemeVarsOptions,
-) {
-  let cssVars = {}
-  const cssMap = {}
+  walkObject(target, (value, path) => {
+    // firstKey will be e.g. "space"
+    const [firstKey] = path
 
-  for (const [token, tokenValue] of Object.entries<FlatToken>(flatTokens)) {
-    const { isSemantic, value } = tokenValue
-    const { variable, reference } = tokenToCssVar(token, options?.cssVarPrefix)
+    const handler = tokenHandlerMap[firstKey] ?? tokenHandlerMap.defaultHandler
 
-    if (!isSemantic) {
-      if (token.startsWith("space")) {
-        const keys = token.split(".")
-        const [firstKey, ...referenceKeys] = keys
-        /** @example space.-4 */
-        const negativeLookupKey = `${firstKey}.-${referenceKeys.join(".")}`
-        const negativeValue = calc.negate(value as Operand)
-        const negatedReference = calc.negate(reference)
-        cssMap[negativeLookupKey] = {
-          value: negativeValue,
-          var: variable,
-          varRef: negatedReference,
-        }
-      }
+    const { cssVars, cssMap } = handler(path, value, options)
+    Object.assign(context.cssVars, cssVars)
+    Object.assign(context.cssMap, cssMap)
+  })
 
-      cssVars[variable] = value
-      cssMap[token] = {
-        value,
-        var: variable,
-        varRef: reference,
-      }
-      continue
-    }
+  return context
+}
 
-    const lookupToken = (maybeToken: string) => {
-      const scale = String(token).split(".")[0]
-      const withScale = [scale, maybeToken].join(".")
-      /** @example flatTokens['space.4'] === '16px' */
-      const resolvedTokenValue = flatTokens[withScale]
-      if (!resolvedTokenValue) return maybeToken
-      const { reference } = tokenToCssVar(withScale, options?.cssVarPrefix)
-      return reference
-    }
+type TokenHandler = (
+  keys: string[],
+  value: unknown | { reference: string },
+  options: CreateThemeVarsOptions,
+) => ThemeVars
 
-    const normalizedValue = isObject(value) ? value : { default: value }
+/**
+ * Define transformation handlers for ThemeScale
+ */
+const tokenHandlerMap: Partial<Record<ThemeScale, TokenHandler>> & {
+  defaultHandler: TokenHandler
+} = {
+  space: (keys, value, options) => {
+    const properties = tokenHandlerMap.defaultHandler(keys, value, options)
+    const [firstKey, ...referenceKeys] = keys
 
-    cssVars = mergeWith(
-      cssVars,
-      Object.entries(normalizedValue).reduce(
-        (acc, [conditionAlias, conditionValue]) => {
-          const maybeReference = lookupToken(conditionValue)
-          if (conditionAlias === "default") {
-            acc[variable] = maybeReference
-            return acc
-          }
+    const negativeLookupKey = `${firstKey}.-${referenceKeys.join(".")}`
+    const negativeVarKey = keys.join("-")
+    const { variable, reference } = cssVar(
+      negativeVarKey,
+      undefined,
+      options.cssVarPrefix,
+    )
 
-          /** @example { _dark: "#fff" } => { '.chakra-ui-dark': "#fff" } */
-          const conditionSelector =
-            pseudoSelectors?.[conditionAlias] ?? conditionAlias
-          acc[conditionSelector] = { [variable]: maybeReference }
+    const negativeValue = calc.negate(value as Operand)
+    const varRef = calc.negate(reference)
 
-          return acc
+    return {
+      cssVars: properties.cssVars,
+      cssMap: {
+        ...properties.cssMap,
+        [negativeLookupKey]: {
+          value: `${negativeValue}`,
+          var: `${variable}`,
+          varRef,
         },
-        {} as any,
-      ),
+      },
+    }
+  },
+  defaultHandler: (keys, value, options) => {
+    const lookupKey = keys.join(".")
+    const varKey = keys.join("-")
+
+    const { variable, reference } = cssVar(
+      varKey,
+      undefined,
+      options.cssVarPrefix,
     )
 
-    cssMap[token] = {
-      value: reference,
-      var: variable,
-      varRef: reference,
+    return {
+      cssVars: {
+        [variable]: value,
+      },
+      cssMap: {
+        [lookupKey]: {
+          value,
+          var: variable,
+          varRef: reference,
+        },
+      },
     }
-  }
-
-  return {
-    cssVars,
-    cssMap,
-  }
+  },
 }

src/create-theme-vars/index.ts

 export * from "./calc"
 export * from "./css-var"
 export * from "./to-css-var"
-export * from "./flatten-tokens"
 export type { ThemeScale } from "./theme-tokens"

src/create-theme-vars/theme-tokens.ts

@@ -29,10 +29,6 @@ import { Dict, pick } from "@chakra-ui/utils"
 export function extractTokens(theme: Dict) {
-  const _tokens = tokens as unknown as string[]
+  const _tokens = (tokens as unknown) as string[]
   return pick(theme, _tokens)
 }
 
-export function extractSemanticTokens(theme: Dict) {
-  return theme.semanticTokens
-}
-
 export function omitVars(rawTheme: Dict) {
@@ -39,0 +35,0 @@ const { __cssMap, __cssVars, __breakpoints, ...cleanTheme } = rawTheme

src/create-theme-vars/to-css-var.ts

 import { analyzeBreakpoints, Dict } from "@chakra-ui/utils"
-import type { WithCSSVar } from "../utils"
+import type { WithCSSVar } from "../utils/types"
 import { createThemeVars } from "./create-theme-vars"
-import { extractSemanticTokens, extractTokens, omitVars } from "./theme-tokens"
-import { flattenTokens } from "./flatten-tokens"
+import { extractTokens, omitVars } from "./theme-tokens"
 
@@ -16,4 +15,2 @@ export function toCSSVar<T extends Dict>(rawTheme: T) {
   const tokens = extractTokens(theme)
-  const semanticTokens = extractSemanticTokens(theme)
-  const flatTokens = flattenTokens({ tokens, semanticTokens })
 
@@ -33,3 +30,3 @@ const cssVarPrefix = theme.config?.cssVarPrefix
     cssVars,
-  } = createThemeVars(flatTokens, { cssVarPrefix })
+  } = createThemeVars(tokens, { cssVarPrefix })
 
@@ -36,0 +33,0 @@ const defaultCssVars: Dict = {

src/index.ts

@@ -7,3 +7,2 @@ export * from "./config"
 export * from "./create-theme-vars"
-export * from "./pseudos"
 export type { ResponsiveValue } from "./utils"
@@ -10,0 +9,0 @@ export { tokenToCSSVar } from "./utils/create-transform"

No alert changes

Worsened metrics

Total package byte prevSize

443091

decreased by-2.41%

Number of package files

127

decreased by-2.31%

Lines of code

11630

decreased by-2.22%

Dependency changes

• + Added@chakra-ui/utils@1.9.1(transitive)

• - Removed@chakra-ui/utils@0.0.0-pr-202204174930(transitive)

• Updated@chakra-ui/utils@1.9.1