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

Comparing version 0.0.0-pr-202204203645 to 0.0.0-pr-20220421928

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

@@ -1871,73 +1871,111 @@ '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;
-}
-
 /**
- * Define transformation handlers for ThemeScale
+ * 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)'
+ * }
  */
-var tokenHandlerMap = {
-  space: function space(keys, value, options) {
-    var _extends2;
+function tokenToCssVar(token, prefix) {
+  return cssVar(String(token).replace(/\./g, "-"), undefined, prefix);
+}
 
-    var properties = tokenHandlerMap.defaultHandler(keys, value, options);
-    var firstKey = keys[0],
-        referenceKeys = keys.slice(1);
-    var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
-    var negativeVarKey = keys.join("-");
+function createThemeVars(flatTokens, options) {
+  var cssVars = {};
+  var cssMap = {};
 
-    var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix),
-        variable = _cssVar.variable,
-        reference = _cssVar.reference;
+  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 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;
+    var _tokenToCssVar = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix),
+        variable = _tokenToCssVar.variable,
+        reference = _tokenToCssVar.reference;
 
-    var lookupKey = keys.join(".");
-    var varKey = keys.join("-");
+    if (!isSemantic) {
+      if (token.startsWith("space")) {
+        var keys = token.split(".");
+        var firstKey = keys[0],
+            referenceKeys = keys.slice(1);
+        /** @example space.-4 */
 
-    var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix),
-        variable = _cssVar2.variable,
-        reference = _cssVar2.reference;
+        var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
+        var negativeValue = calc.negate(value);
+        var negatedReference = calc.negate(reference);
+        cssMap[negativeLookupKey] = {
+          value: negativeValue,
+          "var": variable,
+          varRef: negatedReference
+        };
+      }
 
-    return {
-      cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars),
-      cssMap: (_cssMap = {}, _cssMap[lookupKey] = {
+      cssVars[variable] = value;
+      cssMap[token] = {
         value: value,
         "var": variable,
         varRef: reference
-      }, _cssMap)
+      };
+      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;
     };
+
+    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) {
@@ -1964,2 +2002,5 @@ if (source == null) return {};
 }
+function extractSemanticTokens(theme) {
+  return theme.semanticTokens;
+}
 function omitVars(rawTheme) {
@@ -1974,2 +2015,26 @@ 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) {
@@ -1985,5 +2050,10 @@ 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(tokens, {
+  var _createThemeVars = createThemeVars(flatTokens, {
     cssVarPrefix: cssVarPrefix
@@ -2021,2 +2091,3 @@ }),
 exports.filter = filter;
+exports.flattenTokens = flattenTokens;
 exports.flexbox = flexbox;
@@ -2033,2 +2104,4 @@ exports.getCss = getCss;
 exports.propNames = propNames;
+exports.pseudoPropNames = pseudoPropNames;
+exports.pseudoSelectors = pseudoSelectors;
 exports.ring = ring;
@@ -2035,0 +2108,0 @@ exports.scroll = scroll;

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

@@ -1871,73 +1871,111 @@ '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;
-}
-
 /**
- * Define transformation handlers for ThemeScale
+ * 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)'
+ * }
  */
-var tokenHandlerMap = {
-  space: function space(keys, value, options) {
-    var _extends2;
+function tokenToCssVar(token, prefix) {
+  return cssVar(String(token).replace(/\./g, "-"), undefined, prefix);
+}
 
-    var properties = tokenHandlerMap.defaultHandler(keys, value, options);
-    var firstKey = keys[0],
-        referenceKeys = keys.slice(1);
-    var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
-    var negativeVarKey = keys.join("-");
+function createThemeVars(flatTokens, options) {
+  var cssVars = {};
+  var cssMap = {};
 
-    var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix),
-        variable = _cssVar.variable,
-        reference = _cssVar.reference;
+  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 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;
+    var _tokenToCssVar = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix),
+        variable = _tokenToCssVar.variable,
+        reference = _tokenToCssVar.reference;
 
-    var lookupKey = keys.join(".");
-    var varKey = keys.join("-");
+    if (!isSemantic) {
+      if (token.startsWith("space")) {
+        var keys = token.split(".");
+        var firstKey = keys[0],
+            referenceKeys = keys.slice(1);
+        /** @example space.-4 */
 
-    var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix),
-        variable = _cssVar2.variable,
-        reference = _cssVar2.reference;
+        var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
+        var negativeValue = calc.negate(value);
+        var negatedReference = calc.negate(reference);
+        cssMap[negativeLookupKey] = {
+          value: negativeValue,
+          "var": variable,
+          varRef: negatedReference
+        };
+      }
 
-    return {
-      cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars),
-      cssMap: (_cssMap = {}, _cssMap[lookupKey] = {
+      cssVars[variable] = value;
+      cssMap[token] = {
         value: value,
         "var": variable,
         varRef: reference
-      }, _cssMap)
+      };
+      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;
     };
+
+    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) {
@@ -1964,2 +2002,5 @@ if (source == null) return {};
 }
+function extractSemanticTokens(theme) {
+  return theme.semanticTokens;
+}
 function omitVars(rawTheme) {
@@ -1974,2 +2015,26 @@ 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) {
@@ -1985,5 +2050,10 @@ 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(tokens, {
+  var _createThemeVars = createThemeVars(flatTokens, {
     cssVarPrefix: cssVarPrefix
@@ -2021,2 +2091,3 @@ }),
 exports.filter = filter;
+exports.flattenTokens = flattenTokens;
 exports.flexbox = flexbox;
@@ -2033,2 +2104,4 @@ exports.getCss = getCss;
 exports.propNames = propNames;
+exports.pseudoPropNames = pseudoPropNames;
+exports.pseudoSelectors = pseudoSelectors;
 exports.ring = ring;
@@ -2035,0 +2108,0 @@ exports.scroll = scroll;

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

@@ -1,2 +0,2 @@
-import { isObject, isString, isNumber, isCssVar, memoizedGet, objectKeys, mergeWith, runIfFn, walkObject, pick, analyzeBreakpoints } from '@chakra-ui/utils';
+import { isObject, isString, isNumber, isCssVar, memoizedGet, objectKeys, mergeWith, runIfFn, pick, flatten, analyzeBreakpoints } from '@chakra-ui/utils';
 
@@ -1867,73 +1867,111 @@ 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;
-}
-
 /**
- * Define transformation handlers for ThemeScale
+ * 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)'
+ * }
  */
-var tokenHandlerMap = {
-  space: function space(keys, value, options) {
-    var _extends2;
+function tokenToCssVar(token, prefix) {
+  return cssVar(String(token).replace(/\./g, "-"), undefined, prefix);
+}
 
-    var properties = tokenHandlerMap.defaultHandler(keys, value, options);
-    var firstKey = keys[0],
-        referenceKeys = keys.slice(1);
-    var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
-    var negativeVarKey = keys.join("-");
+function createThemeVars(flatTokens, options) {
+  var cssVars = {};
+  var cssMap = {};
 
-    var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix),
-        variable = _cssVar.variable,
-        reference = _cssVar.reference;
+  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 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;
+    var _tokenToCssVar = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix),
+        variable = _tokenToCssVar.variable,
+        reference = _tokenToCssVar.reference;
 
-    var lookupKey = keys.join(".");
-    var varKey = keys.join("-");
+    if (!isSemantic) {
+      if (token.startsWith("space")) {
+        var keys = token.split(".");
+        var firstKey = keys[0],
+            referenceKeys = keys.slice(1);
+        /** @example space.-4 */
 
-    var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix),
-        variable = _cssVar2.variable,
-        reference = _cssVar2.reference;
+        var negativeLookupKey = firstKey + ".-" + referenceKeys.join(".");
+        var negativeValue = calc.negate(value);
+        var negatedReference = calc.negate(reference);
+        cssMap[negativeLookupKey] = {
+          value: negativeValue,
+          "var": variable,
+          varRef: negatedReference
+        };
+      }
 
-    return {
-      cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars),
-      cssMap: (_cssMap = {}, _cssMap[lookupKey] = {
+      cssVars[variable] = value;
+      cssMap[token] = {
         value: value,
         "var": variable,
         varRef: reference
-      }, _cssMap)
+      };
+      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;
     };
+
+    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) {
@@ -1960,2 +1998,5 @@ if (source == null) return {};
 }
+function extractSemanticTokens(theme) {
+  return theme.semanticTokens;
+}
 function omitVars(rawTheme) {
@@ -1970,2 +2011,26 @@ 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) {
@@ -1981,5 +2046,10 @@ 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(tokens, {
+  var _createThemeVars = createThemeVars(flatTokens, {
     cssVarPrefix: cssVarPrefix
@@ -2008,2 +2078,2 @@ }),
 
-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 };
+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 };

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 {
@@ -9,3 +10,6 @@ cssVarPrefix?: string;
 }
-export declare function createThemeVars(target: Dict, options: CreateThemeVarsOptions): ThemeVars;
+export declare function createThemeVars(flatTokens: FlatTokens, options: CreateThemeVarsOptions): {
+    cssVars: {};
+    cssMap: {};
+};
 //# 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,2 +7,3 @@ import { Dict } from "@chakra-ui/utils";
 };
+export declare function extractSemanticTokens(theme: Dict): any;
 export declare function omitVars(rawTheme: Dict): {
@@ -9,0 +10,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/types";
+import type { WithCSSVar } from "../utils";
 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,2 +7,3 @@ export * from "./config";
 export * from "./create-theme-vars";
+export * from "./pseudos";
 export type { ResponsiveValue } from "./utils";
@@ -9,0 +10,0 @@ export { tokenToCSSVar } from "./utils/create-transform";

package.json

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

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

@@ -1,5 +0,6 @@
-import { Dict, walkObject } from "@chakra-ui/utils"
-import { ThemeScale } from "./theme-tokens"
+import { Dict, isObject, mergeWith } from "@chakra-ui/utils"
 import { calc, Operand } from "./calc"
 import { cssVar } from "./css-var"
+import { FlatToken, FlatTokens } from "./flatten-tokens"
+import { pseudoSelectors } from "../pseudos"
 
@@ -15,84 +16,95 @@ export interface CreateThemeVarsOptions {
 
-export function createThemeVars(target: Dict, options: CreateThemeVarsOptions) {
-  const context: ThemeVars = {
-    cssMap: {},
-    cssVars: {},
-  }
+/**
+ * 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)
+}
 
-  walkObject(target, (value, path) => {
-    // firstKey will be e.g. "space"
-    const [firstKey] = path
+export function createThemeVars(
+  flatTokens: FlatTokens,
+  options: CreateThemeVarsOptions,
+) {
+  let cssVars = {}
+  const cssMap = {}
 
-    const handler = tokenHandlerMap[firstKey] ?? tokenHandlerMap.defaultHandler
+  for (const [token, tokenValue] of Object.entries<FlatToken>(flatTokens)) {
+    const { isSemantic, value } = tokenValue
+    const { variable, reference } = tokenToCssVar(token, options?.cssVarPrefix)
 
-    const { cssVars, cssMap } = handler(path, value, options)
-    Object.assign(context.cssVars, cssVars)
-    Object.assign(context.cssMap, cssMap)
-  })
+    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,
+        }
+      }
 
-  return context
-}
+      cssVars[variable] = value
+      cssMap[token] = {
+        value,
+        var: variable,
+        varRef: reference,
+      }
+      continue
+    }
 
-type TokenHandler = (
-  keys: string[],
-  value: unknown | { reference: string },
-  options: CreateThemeVarsOptions,
-) => ThemeVars
+    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
+    }
 
-/**
- * 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
+    const normalizedValue = isObject(value) ? value : { default: value }
 
-    const negativeLookupKey = `${firstKey}.-${referenceKeys.join(".")}`
-    const negativeVarKey = keys.join("-")
-    const { variable, reference } = cssVar(
-      negativeVarKey,
-      undefined,
-      options.cssVarPrefix,
-    )
+    cssVars = mergeWith(
+      cssVars,
+      Object.entries(normalizedValue).reduce(
+        (acc, [conditionAlias, conditionValue]) => {
+          const maybeReference = lookupToken(conditionValue)
+          if (conditionAlias === "default") {
+            acc[variable] = maybeReference
+            return acc
+          }
 
-    const negativeValue = calc.negate(value as Operand)
-    const varRef = calc.negate(reference)
+          /** @example { _dark: "#fff" } => { '.chakra-ui-dark': "#fff" } */
+          const conditionSelector =
+            pseudoSelectors?.[conditionAlias] ?? conditionAlias
+          acc[conditionSelector] = { [variable]: maybeReference }
 
-    return {
-      cssVars: properties.cssVars,
-      cssMap: {
-        ...properties.cssMap,
-        [negativeLookupKey]: {
-          value: `${negativeValue}`,
-          var: `${variable}`,
-          varRef,
+          return acc
         },
-      },
-    }
-  },
-  defaultHandler: (keys, value, options) => {
-    const lookupKey = keys.join(".")
-    const varKey = keys.join("-")
-
-    const { variable, reference } = cssVar(
-      varKey,
-      undefined,
-      options.cssVarPrefix,
+        {} as any,
+      ),
     )
 
-    return {
-      cssVars: {
-        [variable]: value,
-      },
-      cssMap: {
-        [lookupKey]: {
-          value,
-          var: variable,
-          varRef: reference,
-        },
-      },
+    cssMap[token] = {
+      value: reference,
+      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,6 +29,10 @@ 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) {
@@ -35,0 +39,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/types"
+import type { WithCSSVar } from "../utils"
 import { createThemeVars } from "./create-theme-vars"
-import { extractTokens, omitVars } from "./theme-tokens"
+import { extractSemanticTokens, extractTokens, omitVars } from "./theme-tokens"
+import { flattenTokens } from "./flatten-tokens"
 
@@ -15,2 +16,4 @@ export function toCSSVar<T extends Dict>(rawTheme: T) {
   const tokens = extractTokens(theme)
+  const semanticTokens = extractSemanticTokens(theme)
+  const flatTokens = flattenTokens({ tokens, semanticTokens })
 
@@ -30,3 +33,3 @@ const cssVarPrefix = theme.config?.cssVarPrefix
     cssVars,
-  } = createThemeVars(tokens, { cssVarPrefix })
+  } = createThemeVars(flatTokens, { cssVarPrefix })
 
@@ -33,0 +36,0 @@ const defaultCssVars: Dict = {

src/index.ts

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

No alert changes

Improved metrics

Total package byte prevSize

454023

increased by2.47%

Number of package files

130

increased by2.36%

Lines of code

11894

increased by2.27%

Dependency changes

• + Added@chakra-ui/utils@0.0.0-pr-20220421928(transitive)

• - Removed@chakra-ui/utils@1.9.1(transitive)

• Updated@chakra-ui/utils@0.0.0-pr-20220421928