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

Comparing version 1.10.5 to 1.11.0

CHANGELOG.md

 # Change Log
 
+## 1.11.0
+
+### Minor Changes
+
+- [`773497896`](https://github.com/chakra-ui/chakra-ui/commit/773497896e65ffbbda10e75b6e0a7bb5b68c853a)
+  [#3997](https://github.com/chakra-ui/chakra-ui/pull/3997) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - **Ring styles**
+
+  Added ring style props to make it easier to style an element's focus ring
+  shadows. Props are `ring`, `ringColor`, `ringOffset`, and `ringOffsetColor`.
+
+  ```jsx live=false
+  // adds a 2px box-shadow with `gray.400` color
+  <Box ring="2px" ringColor="gray.400">
+    Sample
+  </Box>
+
+  // adds main box-shadow + offset box-shadow
+  <Box ring="2px" ringColor="gray.400" ringOffset="3px" ringOffsetColor="white">
+   Sample
+  </Box>
+  ```
+
+  **Filter styles**
+
+  Added css variable based API to apply css filter properties (blur,
+  backdrop-blur) to an element. Props are `filter`, `blur`, `sepia`,
+  `brightness`, `invert`, `saturation`, `backdropFilter`, `backdropBlur`,
+  `sepia`, `saturation`, etc.
+
+  To use this API, you'll need to set `filter` to `auto`, same for
+  `backdropFilter`.
+
+  ```jsx live=false
+  // adds a 3px blur filter to this element
+  <Image src="boruto.png" filter="auto" blur="3px" />
+
+  // adds a 3px blur and 40% saturation filter to this element
+  <Image src="boruto.png" filter="auto" blur="3px" saturation={0.4} />
+  ```
+
+  **Transform styles**
+
+  Added css variable based API to apply css transform properties (translateX,
+  translateY, scale, etc.). Props are `translateX`, `translateY`, `rotate`,
+  `scaleX`, `scaleY`, and `scale`.
+
+  To use this API, you'll need to set `transform` to `auto` or `auto-gpu` (for
+  the GPU accelerated version).
+
+  ```jsx live=false
+  <Circle transform="auto" translateX="4" _hover={{ translateX: "8" }}>
+    <CheckIcon />
+  </Circle>
+  ```
+
+  - Add `mixBlendMode`, `backgroundBlendMode`, and `bgBlendMode` props to apply
+    blend modes to elements
+
+  - Automatic wrapping of `backgroundImage` or `bgImage` props with `url()` so
+    you can just pass the image URL directly.
+
+  ```jsx live=false
+  // You can now do this!
+  <Box bgImage="naruto.png" />
+
+  // This still works
+  <Box bgImage="url(naruto.png)" />
+  ```
+
+  - text decoration styles: Added `textDecorationColor`, `textDecorationLine`,
+    `textDecorationStyles` style props.
+
+  - Add `isolation` style prop to create a new stacking context.
+
+  **High Contrast Mode**
+
+  Fixed issue where setting `outline:0` or `outline:none` and using `box-shadow`
+  for focus outlines don't work in high-contrast mode.
+
+  To fix this, we've added `outline: 2px solid transparent` whenever you set
+  `outline:0` to make your components work in high-constrast mode by default.
+
+  [Learn more](https://sarahmhigley.com/writing/whcm-quick-tips/)
+
+  - Fix the `_dark` pseudo props to map to
+    `.chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]`.
+
+  - Added `_light` pseudo props to map to
+    `.chakra-ui-light &, [data-theme=light] &, &[data-theme=light]` for users
+    that prefer to start with dark mode.
+
+  - Added `overscroll`, `overscrollX`, and `overscrollY` style prop to manage
+    overscroll behavior of an container
+
 ## 1.10.5
@@ -4,0 +99,0 @@

dist/cjs/config/background.js

@@ -8,19 +8,6 @@ "use strict";
 
-var _parseGradient = require("../utils/parse-gradient");
-
-function bgClipTransform(value) {
-  return value === "text" ? {
-    color: "transparent",
-    backgroundClip: "text"
-  } : {
-    backgroundClip: value
-  };
-}
-
 var background = {
-  bg: _utils.t.colors("background"),
-  bgColor: _utils.t.colors("backgroundColor"),
   background: _utils.t.colors("background"),
   backgroundColor: _utils.t.colors("backgroundColor"),
-  backgroundImage: true,
+  backgroundImage: _utils.t.propT("backgroundImage", _utils.transforms.bgImage),
   backgroundSize: true,
@@ -30,23 +17,22 @@ backgroundPosition: true,
   backgroundAttachment: true,
-  backgroundBlendMode: true,
   backgroundClip: {
-    transform: bgClipTransform
+    transform: _utils.transforms.bgClip
   },
-  bgImage: _utils.t.prop("backgroundImage"),
-  bgImg: _utils.t.prop("backgroundImage"),
-  bgBlendMode: _utils.t.prop("backgroundBlendMode"),
   bgSize: _utils.t.prop("backgroundSize"),
   bgPosition: _utils.t.prop("backgroundPosition"),
+  bg: _utils.t.colors("background"),
+  bgColor: _utils.t.colors("backgroundColor"),
   bgPos: _utils.t.prop("backgroundPosition"),
   bgRepeat: _utils.t.prop("backgroundRepeat"),
   bgAttachment: _utils.t.prop("backgroundAttachment"),
-  bgGradient: {
-    property: "backgroundImage",
-    transform: _parseGradient.gradientTransform
-  },
+  bgGradient: _utils.t.propT("backgroundImage", _utils.transforms.gradient),
   bgClip: {
-    transform: bgClipTransform
+    transform: _utils.transforms.bgClip
   }
 };
 exports.background = background;
+Object.assign(background, {
+  bgImage: background.backgroundImage,
+  bgImg: background.backgroundImage
+});
 //# sourceMappingURL=background.js.map

dist/cjs/config/color.js

@@ -11,3 +11,2 @@ "use strict";
   textColor: _utils.t.colors("color"),
-  opacity: true,
   fill: _utils.t.colors("fill"),
@@ -14,0 +13,0 @@ stroke: _utils.t.colors("stroke")

dist/cjs/config/flexbox.js

@@ -6,19 +6,8 @@ "use strict";
 
-var _createTransform = require("../create-transform");
-
 var _utils = require("../utils");
 
-var _static, _static2;
+var _createTransform = require("../utils/create-transform");
 
-var reverse = {
-  "row-reverse": {
-    space: "--chakra-space-x-reverse",
-    divide: "--chakra-divide-x-reverse"
-  },
-  "column-reverse": {
-    space: "--chakra-space-y-reverse",
-    divide: "--chakra-divide-y-reverse"
-  }
-};
-var owlSelector = "& > :not(style) ~ :not(style)";
+var _templates = require("../utils/templates");
+
 var flexbox = {
@@ -31,22 +20,6 @@ alignItems: true,
   flexDirection: {
-    transform: function transform(value) {
-      var _reverse$value;
-
-      var _ref = (_reverse$value = reverse[value]) != null ? _reverse$value : {},
-          space = _ref.space,
-          divide = _ref.divide;
-
-      var result = {
-        flexDirection: value
-      };
-      if (space) result[space] = 1;
-      if (divide) result[divide] = 1;
-      return result;
-    }
+    transform: _utils.transforms.flexDirection
   },
-  spaceX: {
-    "static": (_static = {}, _static[owlSelector] = {
-      marginInlineStart: "calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",
-      marginInlineEnd: "calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"
-    }, _static),
+  experimental_spaceX: {
+    "static": _templates.spaceXTemplate,
     transform: (0, _createTransform.createTransform)({
@@ -61,7 +34,4 @@ scale: "space",
   },
-  spaceY: {
-    "static": (_static2 = {}, _static2[owlSelector] = {
-      marginTop: "calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",
-      marginBottom: "calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"
-    }, _static2),
+  experimental_spaceY: {
+    "static": _templates.spaceYTemplate,
     transform: (0, _createTransform.createTransform)({
@@ -86,6 +56,8 @@ scale: "space",
   placeContent: true,
-  placeSelf: true,
-  flexDir: _utils.t.prop("flexDirection")
+  placeSelf: true
 };
 exports.flexbox = flexbox;
+Object.assign(flexbox, {
+  flexDir: flexbox.flexDirection
+});
 //# sourceMappingURL=flexbox.js.map

dist/cjs/config/index.js

@@ -29,2 +29,18 @@ "use strict";
 
+var _effect = require("./effect");
+
+Object.keys(_effect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _effect[key]) return;
+  exports[key] = _effect[key];
+});
+
+var _filter = require("./filter");
+
+Object.keys(_filter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _filter[key]) return;
+  exports[key] = _filter[key];
+});
+
 var _flexbox = require("./flexbox");
@@ -46,2 +62,10 @@
 
+var _interactivity = require("./interactivity");
+
+Object.keys(_interactivity).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _interactivity[key]) return;
+  exports[key] = _interactivity[key];
+});
+
 var _layout = require("./layout");
@@ -55,2 +79,10 @@
 
+var _list = require("./list");
+
+Object.keys(_list).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _list[key]) return;
+  exports[key] = _list[key];
+});
+
 var _others = require("./others");
@@ -72,8 +104,8 @@
 
-var _shadow = require("./shadow");
+var _ring = require("./ring");
 
-Object.keys(_shadow).forEach(function (key) {
+Object.keys(_ring).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _shadow[key]) return;
-  exports[key] = _shadow[key];
+  if (key in exports && exports[key] === _ring[key]) return;
+  exports[key] = _ring[key];
 });
@@ -89,26 +121,18 @@
 
-var _typography = require("./typography");
+var _textDecoration = require("./text-decoration");
 
-Object.keys(_typography).forEach(function (key) {
+Object.keys(_textDecoration).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _typography[key]) return;
-  exports[key] = _typography[key];
+  if (key in exports && exports[key] === _textDecoration[key]) return;
+  exports[key] = _textDecoration[key];
 });
 
-var _outline = require("./outline");
+var _transform = require("./transform");
 
-Object.keys(_outline).forEach(function (key) {
+Object.keys(_transform).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _outline[key]) return;
-  exports[key] = _outline[key];
+  if (key in exports && exports[key] === _transform[key]) return;
+  exports[key] = _transform[key];
 });
 
-var _list = require("./list");
-
-Object.keys(_list).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _list[key]) return;
-  exports[key] = _list[key];
-});
-
 var _transition = require("./transition");
@@ -122,9 +146,9 @@
 
-var _transform = require("./transform");
+var _typography = require("./typography");
 
-Object.keys(_transform).forEach(function (key) {
+Object.keys(_typography).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _transform[key]) return;
-  exports[key] = _transform[key];
+  if (key in exports && exports[key] === _typography[key]) return;
+  exports[key] = _typography[key];
 });
 //# sourceMappingURL=index.js.map

dist/cjs/config/layout.js

@@ -26,5 +26,14 @@ "use strict";
   overflowY: true,
+  overscrollBehavior: true,
+  overscrollBehaviorX: true,
+  overscrollBehaviorY: true,
   display: true,
   verticalAlign: true,
-  boxSizing: true
+  boxSizing: true,
+  boxDecorationBreak: true,
+  "float": _utils.t.propT("float", _utils.transforms["float"]),
+  objectFit: true,
+  objectPosition: true,
+  visibility: true,
+  isolation: true
 };
@@ -38,3 +47,6 @@ exports.layout = layout;
   minH: layout.minHeight,
-  maxH: layout.maxHeight
+  maxH: layout.maxHeight,
+  overscroll: layout.overscrollBehavior,
+  overscrollX: layout.overscrollBehaviorX,
+  overscrollY: layout.overscrollBehaviorY
 });
@@ -41,0 +53,0 @@ /**

dist/cjs/config/others.js

@@ -8,10 +8,2 @@ "use strict";
 
-var floatTransform = function floatTransform(value, theme) {
-  var map = {
-    left: "right",
-    right: "left"
-  };
-  return theme.direction === "rtl" ? map[value] : value;
-};
-
 var srOnly = {
@@ -52,18 +44,2 @@ border: "0px",
 var others = {
-  animation: true,
-  appearance: true,
-  visibility: true,
-  userSelect: true,
-  pointerEvents: true,
-  cursor: true,
-  resize: true,
-  objectFit: true,
-  objectPosition: true,
-  "float": {
-    property: "float",
-    transform: floatTransform
-  },
-  willChange: true,
-  filter: true,
-  clipPath: true,
   srOnly: {
@@ -70,0 +46,0 @@ transform: function transform(value) {

dist/cjs/config/transform.js

@@ -6,46 +6,18 @@ "use strict";
 
-var _utils = require("@chakra-ui/utils");
+var _utils = require("../utils");
 
-var _utils2 = require("../utils");
-
-var templates = {
-  auto: "var(--chakra-transform)",
-  "auto-gpu": "var(--chakra-transform-gpu)"
-};
-
-var degreeTransform = function degreeTransform(value) {
-  if ((0, _utils.isCssVar)(value) || value == null) return value;
-  return (0, _utils.isNumber)(value) ? value + "deg" : value;
-};
-
 var transform = {
-  transform: {
-    property: "transform",
-    transform: function transform(value) {
-      var _templates$value;
-
-      return (_templates$value = templates[value]) != null ? _templates$value : value;
-    }
-  },
+  clipPath: true,
+  transform: _utils.t.propT("transform", _utils.transforms.transform),
   transformOrigin: true,
-  translateX: _utils2.t.spaceT("--chakra-translate-x"),
-  translateY: _utils2.t.spaceT("--chakra-translate-y"),
-  rotateX: {
-    property: "--chakra-rotate-x",
-    transform: degreeTransform
-  },
-  rotateY: {
-    property: "--chakra-rotate-y",
-    transform: degreeTransform
-  },
-  skewX: {
-    property: "--chakra-skew-x",
-    transform: degreeTransform
-  },
-  skewY: {
-    property: "--chakra-skew-y",
-    transform: degreeTransform
-  }
+  translateX: _utils.t.spaceT("--chakra-translate-x"),
+  translateY: _utils.t.spaceT("--chakra-translate-y"),
+  skewX: _utils.t.degreeT("--chakra-skew-x"),
+  skewY: _utils.t.degreeT("--chakra-skew-y"),
+  scaleX: _utils.t.prop("--chakra-scale-x"),
+  scaleY: _utils.t.prop("--chakra-scale-y"),
+  scale: _utils.t.prop(["--chakra-scale-x", "--chakra-scale-y"]),
+  rotate: _utils.t.degreeT("--chakra-rotate")
 };
 exports.transform = transform;
 //# sourceMappingURL=transform.js.map

dist/cjs/config/transition.js

@@ -10,2 +10,5 @@ "use strict";
   transition: true,
+  transitionDelay: true,
+  animation: true,
+  willChange: true,
   transitionDuration: _utils.t.prop("transitionDuration", "transition.duration"),
@@ -12,0 +15,0 @@ transitionProperty: _utils.t.prop("transitionProperty", "transition.property"),

dist/cjs/config/typography.js

@@ -6,4 +6,2 @@ "use strict";
 
-var _createTransform = require("../create-transform");
-
 var _utils = require("../utils");
@@ -13,3 +11,3 @@
   fontFamily: _utils.t.prop("fontFamily", "fonts"),
-  fontSize: _utils.t.prop("fontSize", "fontSizes", _createTransform.px),
+  fontSize: _utils.t.prop("fontSize", "fontSizes", _utils.transforms.px),
   fontWeight: _utils.t.prop("fontWeight", "fontWeights"),
@@ -25,6 +23,2 @@ lineHeight: _utils.t.prop("lineHeight", "lineHeights"),
   whiteSpace: true,
-  textDecoration: true,
-  textDecor: {
-    property: "textDecoration"
-  },
   noOfLines: {
@@ -31,0 +25,0 @@ "static": {

dist/cjs/create-theme-vars/theme-tokens.js

@@ -11,3 +11,3 @@ "use strict";
 
-var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition"];
+var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"];
 
@@ -14,0 +14,0 @@ function extractTokens(theme) {

dist/cjs/create-theme-vars/to-css-var.js

@@ -10,4 +10,2 @@ "use strict";
 
-var _transformTemplate = require("./transform-template");
-
 var _themeTokens = require("./theme-tokens");
@@ -36,11 +34,8 @@
   var defaultCssVars = {
-    "--chakra-ring-offset": "0px",
+    "--chakra-ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
+    "--chakra-ring-offset-width": "0px",
+    "--chakra-ring-offset-color": "#fff",
     "--chakra-ring-color": "rgba(66, 153, 225, 0.6)",
-    "--chakra-ring-width": "3px",
-    "--chakra-ring-inset": "var(--chakra-empty, /*!*/ /*!*/)",
-    "--chakra-ring-offset-shadow": "var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset) var(--chakra-ring-offset-color, transparent)",
-    "--chakra-ring-shadow": "var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset)) var(--chakra-ring-color)",
-    "--chakra-ring": "var(--chakra-ring-offset-shadow), var(--chakra-ring-shadow), 0 0 transparent",
-    "--chakra-transform-gpu": (0, _transformTemplate.getTransformGpuTemplate)(),
-    "--chakra-transform": (0, _transformTemplate.getTransformTemplate)(),
+    "--chakra-ring-offset-shadow": "0 0 #0000",
+    "--chakra-ring-shadow": "0 0 #0000",
     "--chakra-space-x-reverse": "0",
@@ -47,0 +42,0 @@ "--chakra-space-y-reverse": "0"

dist/cjs/css.js

@@ -9,4 +9,2 @@ "use strict";
 
-var _expandResponsive = require("./expand-responsive");
-
 var _pseudos = require("./pseudos");
@@ -16,2 +14,4 @@
 
+var _expandResponsive = require("./utils/expand-responsive");
+
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
@@ -18,0 +18,0 @@

dist/cjs/index.js

@@ -5,5 +5,6 @@ "use strict";
 var _exportNames = {
-  tokenToCSSVar: true
+  tokenToCSSVar: true,
+  WithCSSVar: true
 };
-exports.tokenToCSSVar = void 0;
+exports.WithCSSVar = exports.tokenToCSSVar = void 0;
 
@@ -28,9 +29,9 @@ var _config = require("./config");
 
-var _types = require("./types");
+var _system = require("./system.types");
 
-Object.keys(_types).forEach(function (key) {
+Object.keys(_system).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  exports[key] = _types[key];
+  if (key in exports && exports[key] === _system[key]) return;
+  exports[key] = _system[key];
 });
@@ -47,9 +48,9 @@
 
-var _system = require("./system");
+var _system2 = require("./system");
 
-Object.keys(_system).forEach(function (key) {
+Object.keys(_system2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _system[key]) return;
-  exports[key] = _system[key];
+  if (key in exports && exports[key] === _system2[key]) return;
+  exports[key] = _system2[key];
 });
@@ -66,5 +67,9 @@
 
-var _createTransform = require("./create-transform");
+var _createTransform = require("./utils/create-transform");
 
 exports.tokenToCSSVar = _createTransform.tokenToCSSVar;
+
+var _types = require("./utils/types");
+
+exports.WithCSSVar = _types.WithCSSVar;
 //# sourceMappingURL=index.js.map

dist/cjs/pseudos.js

@@ -280,6 +280,12 @@ "use strict";
   /**
-   * Styles for when `.dark` is applied to any parent of
+   * Styles for when `data-theme` is applied to any parent of
    * this component or element.
    */
-  _dark: ".dark &, [data-theme=dark] &"
+  _dark: ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]",
+
+  /**
+   * Styles for when `data-theme` is applied to any parent of
+   * this component or element.
+   */
+  _light: ".chakra-ui-light &, [data-theme=light] &, &[data-theme=light]"
 };
@@ -286,0 +292,0 @@ exports.pseudoSelectors = pseudoSelectors;

dist/cjs/system.js

@@ -14,5 +14,5 @@ "use strict";
 
-var systemProps = (0, _utils.mergeWith)({}, _config.background, _config.border, _config.color, _config.flexbox, _config.layout, _config.outline, _config.grid, _config.others, _config.position, _config.shadow, _config.space, _config.typography, _config.transform, _config.list, _config.transition);
+var systemProps = (0, _utils.mergeWith)({}, _config.background, _config.border, _config.color, _config.flexbox, _config.layout, _config.filter, _config.ring, _config.interactivity, _config.grid, _config.others, _config.position, _config.effect, _config.space, _config.typography, _config.textDecoration, _config.transform, _config.list, _config.transition);
 exports.systemProps = systemProps;
-var layoutSystem = (0, _utils.mergeWith)({}, _config.space, _config.layout, _config.flexbox, _config.grid, _config.position);
+var layoutSystem = Object.assign({}, _config.space, _config.layout, _config.flexbox, _config.grid, _config.position);
 var layoutPropNames = (0, _utils.objectKeys)(layoutSystem);
@@ -19,0 +19,0 @@ exports.layoutPropNames = layoutPropNames;

dist/cjs/utils/index.js

@@ -5,12 +5,15 @@ "use strict";
 var _exportNames = {
-  t: true
+  t: true,
+  transforms: true
 };
 exports.t = void 0;
 
-var _utils = require("@chakra-ui/utils");
+var _createTransform = require("./create-transform");
 
-var _createTransform = require("../create-transform");
+var _propConfig = require("./prop-config");
 
-var _propConfig = require("../prop-config");
+var _transformFunctions = require("./transform-functions");
 
+exports.transforms = _transformFunctions.transformFunctions;
+
 var _types = require("./types");
@@ -27,6 +30,2 @@
 
-function fractionalValue(value) {
-  return !(0, _utils.isNumber)(value) || value > 1 ? value : value * 100 + "%";
-}
-
 var t = {
@@ -37,5 +36,11 @@ borderWidths: (0, _propConfig.toConfig)("borderWidths"),
   borders: (0, _propConfig.toConfig)("borders"),
-  radii: (0, _propConfig.toConfig)("radii", _createTransform.px),
-  space: (0, _propConfig.toConfig)("space", _createTransform.px),
-  spaceT: (0, _propConfig.toConfig)("space", _createTransform.px),
+  radii: (0, _propConfig.toConfig)("radii", _transformFunctions.transformFunctions.px),
+  space: (0, _propConfig.toConfig)("space", _transformFunctions.transformFunctions.px),
+  spaceT: (0, _propConfig.toConfig)("space", _transformFunctions.transformFunctions.px),
+  degreeT: function degreeT(property) {
+    return {
+      property: property,
+      transform: _transformFunctions.transformFunctions.degree
+    };
+  },
   prop: function prop(property, scale, transform) {
@@ -52,8 +57,15 @@ return _extends({
   },
-  sizes: (0, _propConfig.toConfig)("sizes", _createTransform.px),
-  sizesT: (0, _propConfig.toConfig)("sizes", fractionalValue),
+  propT: function propT(property, transform) {
+    return {
+      property: property,
+      transform: transform
+    };
+  },
+  sizes: (0, _propConfig.toConfig)("sizes", _transformFunctions.transformFunctions.px),
+  sizesT: (0, _propConfig.toConfig)("sizes", _transformFunctions.transformFunctions.fraction),
   shadows: (0, _propConfig.toConfig)("shadows"),
-  logical: _propConfig.logical
+  logical: _propConfig.logical,
+  blur: (0, _propConfig.toConfig)("blur", _transformFunctions.transformFunctions.blur)
 };
 exports.t = t;
 //# sourceMappingURL=index.js.map

dist/esm/config/background.js

@@ -1,19 +0,6 @@
-import { t } from "../utils";
-import { gradientTransform } from "../utils/parse-gradient";
-
-function bgClipTransform(value) {
-  return value === "text" ? {
-    color: "transparent",
-    backgroundClip: "text"
-  } : {
-    backgroundClip: value
-  };
-}
-
+import { t, transforms } from "../utils";
 export var background = {
-  bg: t.colors("background"),
-  bgColor: t.colors("backgroundColor"),
   background: t.colors("background"),
   backgroundColor: t.colors("backgroundColor"),
-  backgroundImage: true,
+  backgroundImage: t.propT("backgroundImage", transforms.bgImage),
   backgroundSize: true,
@@ -23,22 +10,21 @@ backgroundPosition: true,
   backgroundAttachment: true,
-  backgroundBlendMode: true,
   backgroundClip: {
-    transform: bgClipTransform
+    transform: transforms.bgClip
   },
-  bgImage: t.prop("backgroundImage"),
-  bgImg: t.prop("backgroundImage"),
-  bgBlendMode: t.prop("backgroundBlendMode"),
   bgSize: t.prop("backgroundSize"),
   bgPosition: t.prop("backgroundPosition"),
+  bg: t.colors("background"),
+  bgColor: t.colors("backgroundColor"),
   bgPos: t.prop("backgroundPosition"),
   bgRepeat: t.prop("backgroundRepeat"),
   bgAttachment: t.prop("backgroundAttachment"),
-  bgGradient: {
-    property: "backgroundImage",
-    transform: gradientTransform
-  },
+  bgGradient: t.propT("backgroundImage", transforms.gradient),
   bgClip: {
-    transform: bgClipTransform
+    transform: transforms.bgClip
   }
 };
+Object.assign(background, {
+  bgImage: background.backgroundImage,
+  bgImg: background.backgroundImage
+});
 //# sourceMappingURL=background.js.map

dist/esm/config/color.js

@@ -5,3 +5,2 @@ import { t } from "../utils";
   textColor: t.colors("color"),
-  opacity: true,
   fill: t.colors("fill"),
@@ -8,0 +7,0 @@ stroke: t.colors("stroke")

dist/esm/config/flexbox.js

@@ -1,14 +0,4 @@
-import { createTransform } from "../create-transform";
-import { t } from "../utils";
-var reverse = {
-  "row-reverse": {
-    space: "--chakra-space-x-reverse",
-    divide: "--chakra-divide-x-reverse"
-  },
-  "column-reverse": {
-    space: "--chakra-space-y-reverse",
-    divide: "--chakra-divide-y-reverse"
-  }
-};
-var owlSelector = "& > :not(style) ~ :not(style)";
+import { t, transforms } from "../utils";
+import { createTransform } from "../utils/create-transform";
+import { spaceXTemplate, spaceYTemplate } from "../utils/templates";
 export var flexbox = {
@@ -21,25 +11,6 @@ alignItems: true,
   flexDirection: {
-    transform(value) {
-      var _reverse$value;
-
-      var {
-        space,
-        divide
-      } = (_reverse$value = reverse[value]) != null ? _reverse$value : {};
-      var result = {
-        flexDirection: value
-      };
-      if (space) result[space] = 1;
-      if (divide) result[divide] = 1;
-      return result;
-    }
-
+    transform: transforms.flexDirection
   },
-  spaceX: {
-    static: {
-      [owlSelector]: {
-        marginInlineStart: "calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",
-        marginInlineEnd: "calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"
-      }
-    },
+  experimental_spaceX: {
+    static: spaceXTemplate,
     transform: createTransform({
@@ -52,9 +23,4 @@ scale: "space",
   },
-  spaceY: {
-    static: {
-      [owlSelector]: {
-        marginTop: "calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",
-        marginBottom: "calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"
-      }
-    },
+  experimental_spaceY: {
+    static: spaceYTemplate,
     transform: createTransform({
@@ -77,5 +43,7 @@ scale: "space",
   placeContent: true,
-  placeSelf: true,
-  flexDir: t.prop("flexDirection")
+  placeSelf: true
 };
+Object.assign(flexbox, {
+  flexDir: flexbox.flexDirection
+});
 //# sourceMappingURL=flexbox.js.map

dist/esm/config/index.js

 export * from "./background";
 export * from "./border";
 export * from "./color";
+export * from "./effect";
+export * from "./filter";
 export * from "./flexbox";
 export * from "./grid";
+export * from "./interactivity";
 export * from "./layout";
+export * from "./list";
 export * from "./others";
 export * from "./position";
-export * from "./shadow";
+export * from "./ring";
 export * from "./space";
+export * from "./text-decoration";
+export * from "./transform";
+export * from "./transition";
 export * from "./typography";
-export * from "./outline";
-export * from "./list";
-export * from "./transition";
-export * from "./transform";
 //# sourceMappingURL=index.js.map

dist/esm/config/layout.js

@@ -1,2 +0,2 @@
-import { t } from "../utils";
+import { t, transforms } from "../utils";
 export var layout = {
@@ -20,5 +20,14 @@ width: t.sizesT("width"),
   overflowY: true,
+  overscrollBehavior: true,
+  overscrollBehaviorX: true,
+  overscrollBehaviorY: true,
   display: true,
   verticalAlign: true,
-  boxSizing: true
+  boxSizing: true,
+  boxDecorationBreak: true,
+  float: t.propT("float", transforms.float),
+  objectFit: true,
+  objectPosition: true,
+  visibility: true,
+  isolation: true
 };
@@ -31,3 +40,6 @@ Object.assign(layout, {
   minH: layout.minHeight,
-  maxH: layout.maxHeight
+  maxH: layout.maxHeight,
+  overscroll: layout.overscrollBehavior,
+  overscrollX: layout.overscrollBehaviorX,
+  overscrollY: layout.overscrollBehaviorY
 });
@@ -34,0 +46,0 @@ /**

dist/esm/config/others.js

 import { memoizedGet as get } from "@chakra-ui/utils";
-
-var floatTransform = (value, theme) => {
-  var map = {
-    left: "right",
-    right: "left"
-  };
-  return theme.direction === "rtl" ? map[value] : value;
-};
-
 var srOnly = {
@@ -46,18 +37,2 @@ border: "0px",
 export var others = {
-  animation: true,
-  appearance: true,
-  visibility: true,
-  userSelect: true,
-  pointerEvents: true,
-  cursor: true,
-  resize: true,
-  objectFit: true,
-  objectPosition: true,
-  float: {
-    property: "float",
-    transform: floatTransform
-  },
-  willChange: true,
-  filter: true,
-  clipPath: true,
   srOnly: {
@@ -64,0 +39,0 @@ transform(value) {

dist/esm/config/transform.js

@@ -1,44 +0,15 @@
-import { isCssVar, isNumber } from "@chakra-ui/utils";
-import { t } from "../utils";
-var templates = {
-  auto: "var(--chakra-transform)",
-  "auto-gpu": "var(--chakra-transform-gpu)"
-};
-
-var degreeTransform = value => {
-  if (isCssVar(value) || value == null) return value;
-  return isNumber(value) ? value + "deg" : value;
-};
-
+import { t, transforms } from "../utils";
 export var transform = {
-  transform: {
-    property: "transform",
-
-    transform(value) {
-      var _templates$value;
-
-      return (_templates$value = templates[value]) != null ? _templates$value : value;
-    }
-
-  },
+  clipPath: true,
+  transform: t.propT("transform", transforms.transform),
   transformOrigin: true,
   translateX: t.spaceT("--chakra-translate-x"),
   translateY: t.spaceT("--chakra-translate-y"),
-  rotateX: {
-    property: "--chakra-rotate-x",
-    transform: degreeTransform
-  },
-  rotateY: {
-    property: "--chakra-rotate-y",
-    transform: degreeTransform
-  },
-  skewX: {
-    property: "--chakra-skew-x",
-    transform: degreeTransform
-  },
-  skewY: {
-    property: "--chakra-skew-y",
-    transform: degreeTransform
-  }
+  skewX: t.degreeT("--chakra-skew-x"),
+  skewY: t.degreeT("--chakra-skew-y"),
+  scaleX: t.prop("--chakra-scale-x"),
+  scaleY: t.prop("--chakra-scale-y"),
+  scale: t.prop(["--chakra-scale-x", "--chakra-scale-y"]),
+  rotate: t.degreeT("--chakra-rotate")
 };
 //# sourceMappingURL=transform.js.map

dist/esm/config/transition.js

 import { t } from "../utils";
 export var transition = {
   transition: true,
+  transitionDelay: true,
+  animation: true,
+  willChange: true,
   transitionDuration: t.prop("transitionDuration", "transition.duration"),
@@ -5,0 +8,0 @@ transitionProperty: t.prop("transitionProperty", "transition.property"),

dist/esm/config/typography.js

@@ -1,6 +0,5 @@
-import { px } from "../create-transform";
-import { t } from "../utils";
+import { t, transforms } from "../utils";
 export var typography = {
   fontFamily: t.prop("fontFamily", "fonts"),
-  fontSize: t.prop("fontSize", "fontSizes", px),
+  fontSize: t.prop("fontSize", "fontSizes", transforms.px),
   fontWeight: t.prop("fontWeight", "fontWeights"),
@@ -16,6 +15,2 @@ lineHeight: t.prop("lineHeight", "lineHeights"),
   whiteSpace: true,
-  textDecoration: true,
-  textDecor: {
-    property: "textDecoration"
-  },
   noOfLines: {
@@ -22,0 +17,0 @@ static: {

dist/esm/create-theme-vars/theme-tokens.js

 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import { pick } from "@chakra-ui/utils";
-var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition"];
+var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"];
 export function extractTokens(theme) {
@@ -6,0 +6,0 @@ var _tokens = tokens;

dist/esm/create-theme-vars/to-css-var.js

@@ -5,3 +5,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { createThemeVars } from "./create-theme-vars";
-import { getTransformGpuTemplate, getTransformTemplate } from "./transform-template";
 import { extractTokens, omitVars } from "./theme-tokens";
@@ -35,11 +34,8 @@ export function toCSSVar(rawTheme) {
   var defaultCssVars = {
-    "--chakra-ring-offset": "0px",
+    "--chakra-ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
+    "--chakra-ring-offset-width": "0px",
+    "--chakra-ring-offset-color": "#fff",
     "--chakra-ring-color": "rgba(66, 153, 225, 0.6)",
-    "--chakra-ring-width": "3px",
-    "--chakra-ring-inset": "var(--chakra-empty, /*!*/ /*!*/)",
-    "--chakra-ring-offset-shadow": "var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset) var(--chakra-ring-offset-color, transparent)",
-    "--chakra-ring-shadow": "var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset)) var(--chakra-ring-color)",
-    "--chakra-ring": "var(--chakra-ring-offset-shadow), var(--chakra-ring-shadow), 0 0 transparent",
-    "--chakra-transform-gpu": getTransformGpuTemplate(),
-    "--chakra-transform": getTransformTemplate(),
+    "--chakra-ring-offset-shadow": "0 0 #0000",
+    "--chakra-ring-shadow": "0 0 #0000",
     "--chakra-space-x-reverse": "0",
@@ -46,0 +42,0 @@ "--chakra-space-y-reverse": "0"

dist/esm/css.js

@@ -1,5 +0,5 @@
-import { isObject, mergeWith as merge, runIfFn, isCssVar, isString } from "@chakra-ui/utils";
-import { expandResponsive } from "./expand-responsive";
+import { isCssVar, isObject, isString, mergeWith as merge, runIfFn } from "@chakra-ui/utils";
 import { pseudoSelectors } from "./pseudos";
 import { systemProps as systemPropConfigs } from "./system";
+import { expandResponsive } from "./utils/expand-responsive";
 
@@ -6,0 +6,0 @@ var isCSSVariableTokenValue = (key, value) => key.startsWith("--") && isString(value) && !isCssVar(value);

dist/esm/index.js

 export * from "./config";
 export * from "./css";
-export * from "./types";
+export * from "./system.types";
 export * from "./theming.types";
 export * from "./system";
 export * from "./create-theme-vars";
-export { tokenToCSSVar } from "./create-transform";
+export { tokenToCSSVar } from "./utils/create-transform";
+export { WithCSSVar } from "./utils/types";
 //# sourceMappingURL=index.js.map

dist/esm/pseudos.js

@@ -254,8 +254,14 @@ import { objectKeys } from "@chakra-ui/utils";
   /**
-   * Styles for when `.dark` is applied to any parent of
+   * Styles for when `data-theme` is applied to any parent of
    * this component or element.
    */
-  _dark: ".dark &, [data-theme=dark] &"
+  _dark: ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]",
+
+  /**
+   * Styles for when `data-theme` is applied to any parent of
+   * this component or element.
+   */
+  _light: ".chakra-ui-light &, [data-theme=light] &, &[data-theme=light]"
 };
 export var pseudoPropNames = objectKeys(pseudoSelectors);
 //# sourceMappingURL=pseudos.js.map

dist/esm/system.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import { mergeWith, objectKeys } from "@chakra-ui/utils";
-import { background, border, color, flexbox, grid, layout, list, others, outline, position, shadow, space, transform, transition, typography } from "./config";
+import { background, border, color, effect, filter, flexbox, grid, interactivity, layout, list, others, position, ring, space, textDecoration, transform, transition, typography } from "./config";
 import { pseudoPropNames, pseudoSelectors } from "./pseudos";
-export var systemProps = mergeWith({}, background, border, color, flexbox, layout, outline, grid, others, position, shadow, space, typography, transform, list, transition);
-var layoutSystem = mergeWith({}, space, layout, flexbox, grid, position);
+export var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition);
+var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
 export var layoutPropNames = objectKeys(layoutSystem);
@@ -9,0 +9,0 @@ export var propNames = [...objectKeys(systemProps), ...pseudoPropNames];

dist/esm/utils/index.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { isNumber } from "@chakra-ui/utils";
-import { createTransform, px as pxTransform } from "../create-transform";
-import { logical, toConfig } from "../prop-config";
+import { createTransform } from "./create-transform";
+import { logical, toConfig } from "./prop-config";
+import { transformFunctions as transforms } from "./transform-functions";
+export { transforms };
 export * from "./types";
-
-function fractionalValue(value) {
-  return !isNumber(value) || value > 1 ? value : value * 100 + "%";
-}
-
 export var t = {
@@ -17,19 +13,38 @@ borderWidths: toConfig("borderWidths"),
   borders: toConfig("borders"),
-  radii: toConfig("radii", pxTransform),
-  space: toConfig("space", pxTransform),
-  spaceT: toConfig("space", pxTransform),
-  prop: (property, scale, transform) => _extends({
-    property,
-    scale
-  }, scale && {
-    transform: createTransform({
-      scale,
+  radii: toConfig("radii", transforms.px),
+  space: toConfig("space", transforms.px),
+  spaceT: toConfig("space", transforms.px),
+
+  degreeT(property) {
+    return {
+      property,
+      transform: transforms.degree
+    };
+  },
+
+  prop(property, scale, transform) {
+    return _extends({
+      property,
+      scale
+    }, scale && {
+      transform: createTransform({
+        scale,
+        transform
+      })
+    });
+  },
+
+  propT(property, transform) {
+    return {
+      property,
       transform
-    })
-  }),
-  sizes: toConfig("sizes", pxTransform),
-  sizesT: toConfig("sizes", fractionalValue),
+    };
+  },
+
+  sizes: toConfig("sizes", transforms.px),
+  sizesT: toConfig("sizes", transforms.fraction),
   shadows: toConfig("shadows"),
-  logical
+  logical,
+  blur: toConfig("blur", transforms.blur)
 };
 //# sourceMappingURL=index.js.map

dist/types/config/background.d.ts

 import * as CSS from "csstype";
-import type { Config } from "../prop-config";
+import type { Config } from "../utils/prop-config";
 import { Token } from "../utils";
@@ -39,10 +39,2 @@ export declare const background: Config;
     /**
-     * The CSS `background-blend-mode` property
-     */
-    backgroundBlendMode?: Token<CSS.Property.BackgroundBlendMode>;
-    /**
-     * The CSS `background-blend-mode` property
-     */
-    bgBlendMode?: Token<CSS.Property.BackgroundBlendMode>;
-    /**
      * The CSS `background-size` property
@@ -49,0 +41,0 @@ */

dist/types/config/border.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { Token } from "../utils";
@@ -4,0 +4,0 @@ export declare const border: Config;

dist/types/config/color.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { Token } from "../utils";
@@ -22,7 +22,3 @@ export declare const color: Config;
     stroke?: Token<CSS.Property.Color, "colors">;
-    /**
-     * The CSS `opacity` property
-     */
-    opacity?: Token<CSS.Property.Opacity>;
 }
 //# sourceMappingURL=color.d.ts.map

dist/types/config/flexbox.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
 import { Length, Token } from "../utils";
+import { Config } from "../utils/prop-config";
 export declare const flexbox: Config;
@@ -173,3 +173,11 @@ export interface FlexboxProps {
     placeSelf?: Token<CSS.Property.PlaceSelf>;
+    /**
+     * Controls the horizontal space between elements
+     */
+    experimental_spaceX?: Token<CSS.Property.Margin | number, "space">;
+    /**
+     * Controls the vertical space between elements
+     */
+    experimental_spaceY?: Token<CSS.Property.Margin | number, "space">;
 }
 //# sourceMappingURL=flexbox.d.ts.map

dist/types/config/grid.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { Token } from "../utils";
@@ -4,0 +4,0 @@ export declare const grid: Config;

dist/types/config/index.d.ts

 export * from "./background";
 export * from "./border";
 export * from "./color";
+export * from "./effect";
+export * from "./filter";
 export * from "./flexbox";
 export * from "./grid";
+export * from "./interactivity";
 export * from "./layout";
+export * from "./list";
 export * from "./others";
 export * from "./position";
-export * from "./shadow";
+export * from "./ring";
 export * from "./space";
+export * from "./text-decoration";
+export * from "./transform";
+export * from "./transition";
 export * from "./typography";
-export * from "./outline";
-export * from "./list";
-export * from "./transition";
-export * from "./transform";
 //# sourceMappingURL=index.d.ts.map

dist/types/config/layout.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { Length, Token } from "../utils";
@@ -15,2 +15,3 @@ export declare const layout: Config;
      * The CSS `display` property
+     * @deprecated - Please use `display` instead
      */
@@ -96,3 +97,51 @@ d?: Token<CSS.Property.Display>;
     boxSizing?: CSS.Property.BoxSizing;
+    /**
+     * The CSS `box-decoration` property
+     */
+    boxDecorationBreak?: Token<CSS.Property.BoxDecorationBreak>;
+    /**
+     * The CSS `float` property
+     */
+    float?: Token<CSS.Property.Float>;
+    /**
+     * The CSS `object-fit` property
+     */
+    objectFit?: Token<CSS.Property.ObjectFit>;
+    /**
+     * The CSS `object-position` property
+     */
+    objectPosition?: Token<CSS.Property.ObjectPosition<Length>>;
+    /**
+     * The CSS `overscroll-behavior` property
+     */
+    overscrollBehavior?: Token<CSS.Property.OverscrollBehavior>;
+    /**
+     * The CSS `overscroll-behavior` property
+     */
+    overscroll?: Token<CSS.Property.OverscrollBehavior>;
+    /**
+     * The CSS `overscroll-behavior-x` property
+     */
+    overscrollBehaviorX?: Token<CSS.Property.OverscrollBehaviorX>;
+    /**
+     * The CSS `overscroll-behavior-x` property
+     */
+    overscrollX?: Token<CSS.Property.OverscrollBehaviorX>;
+    /**
+     * The CSS `overscroll-behavior-y` property
+     */
+    overscrollBehaviorY?: Token<CSS.Property.OverscrollBehaviorY>;
+    /**
+     * The CSS `overscroll-behavior-y` property
+     */
+    overscrollY?: Token<CSS.Property.OverscrollBehaviorY>;
+    /**
+     * The CSS `visibility` property
+     */
+    visibility?: Token<CSS.Property.Visibility>;
+    /**
+     * The CSS `isolation` property
+     */
+    isolation?: Token<CSS.Property.Isolation>;
 }
 //# sourceMappingURL=layout.d.ts.map

dist/types/config/list.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { ResponsiveValue } from "../utils";
@@ -4,0 +4,0 @@ export declare const list: Config;

dist/types/config/others.d.ts

@@ -1,55 +0,6 @@
-import * as CSS from "csstype";
-import { Config } from "../prop-config";
-import { Length, ResponsiveValue, Token } from "../utils";
+import { Config } from "../utils/prop-config";
+import { ResponsiveValue, Token } from "../utils/types";
 export declare const others: Config;
 export interface OtherProps {
     /**
-     * The CSS `animation` property
-     */
-    animation?: ResponsiveValue<CSS.Property.Animation>;
-    /**
-     * The CSS `appearance` property
-     */
-    appearance?: ResponsiveValue<CSS.Property.Appearance>;
-    /**
-     * The CSS `visibility` property
-     */
-    visibility?: ResponsiveValue<CSS.Property.Visibility>;
-    /**
-     * The CSS `user-select` property
-     */
-    userSelect?: ResponsiveValue<CSS.Property.UserSelect>;
-    /**
-     * The CSS `pointer-events` property
-     */
-    pointerEvents?: ResponsiveValue<CSS.Property.PointerEvents>;
-    /**
-     * The CSS `cursor` property
-     */
-    cursor?: ResponsiveValue<CSS.Property.Cursor>;
-    /**
-     * The CSS `resize` property
-     */
-    resize?: ResponsiveValue<CSS.Property.Resize>;
-    /**
-     * The CSS `object-fit` property
-     */
-    objectFit?: ResponsiveValue<CSS.Property.ObjectFit>;
-    /**
-     * The CSS `object-position` property
-     */
-    objectPosition?: ResponsiveValue<CSS.Property.ObjectPosition<Length>>;
-    /**
-     * The CSS `float` property
-     */
-    float?: ResponsiveValue<CSS.Property.Float>;
-    /**
-     * The CSS `will-change` property
-     */
-    willChange?: ResponsiveValue<CSS.Property.WillChange>;
-    /**
-     * The CSS `filter` property
-     */
-    filter?: ResponsiveValue<CSS.Property.Filter>;
-    /**
      * If `true`, hide an element visually without hiding it from screen readers.
@@ -62,8 +13,2 @@ *
     /**
-     * The CSS `clip-path` property.
-     *
-     * It creates a clipping region that sets what part of an element should be shown.
-     */
-    clipPath?: ResponsiveValue<CSS.Property.ClipPath>;
-    /**
      * The layer style object to apply.
@@ -70,0 +15,0 @@ * Note: Styles must be located in `theme.layerStyles`

dist/types/config/position.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { Token } from "../utils";
@@ -4,0 +4,0 @@ export declare const position: Config;

dist/types/config/space.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { Token } from "../utils";
@@ -4,0 +4,0 @@ export declare const space: Config;

dist/types/config/transform.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
-import { Token } from "../utils";
-declare const templates: {
-    auto: string;
-    "auto-gpu": string;
-};
+import { Config } from "../utils/prop-config";
+import { Length, Token } from "../utils";
 export declare const transform: Config;
@@ -13,3 +9,3 @@ export interface TransformProps {
      */
-    transform?: Token<CSS.Property.Transform | keyof typeof templates>;
+    transform?: Token<CSS.Property.Transform | "auto" | "auto-gpu">;
     /**
@@ -19,4 +15,53 @@ * The CSS `transform-origin` property
     transformOrigin?: Token<CSS.Property.TransformOrigin | number, "sizes">;
+    /**
+     * The CSS `clip-path` property.
+     *
+     * It creates a clipping region that sets what part of an element should be shown.
+     */
+    clipPath?: Token<CSS.Property.ClipPath>;
+    /**
+     * Translate value of an elements in the x-direction.
+     * - Only works if `transform=auto`
+     * - It sets the value of `--chakra-translate-x`
+     */
+    translateX?: Token<Length>;
+    /**
+     * Translate value of an elements in the y-direction.
+     * - Only works if `transform=auto`
+     * - It sets the value of `--chakra-translate-y`
+     */
+    translateY?: Token<Length>;
+    /**
+     * Sets the rotate value of the element
+     */
+    rotate?: Token<Length>;
+    /**
+     * Skew value of an elements in the x-direction.
+     * - Only works if `transform=auto`
+     * - It sets the value of `--chakra-skew-x`
+     */
+    skewX?: Token<Length>;
+    /**
+     * Skew value of an elements in the y-direction.
+     * - Only works if `transform=auto`
+     * - It sets the value of `--chakra-skew-y`
+     */
+    skewY?: Token<Length>;
+    /**
+     * Scale value of an elements in the x-direction.
+     * - Only works if `transform=auto`
+     * - It sets the value of `--chakra-scale-x`
+     */
+    scaleX?: Token<Length>;
+    /**
+     * Scale value of an elements in the y-direction.
+     * - Only works if `transform=auto`
+     * - It sets the value of `--chakra-scale-y`
+     */
+    scaleY?: Token<Length>;
+    /**
+     * Sets the scale value of the element
+     */
+    scale?: Token<Length>;
 }
-export {};
 //# sourceMappingURL=transform.d.ts.map

dist/types/config/transition.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
-import { ResponsiveValue } from "../utils";
+import { Config } from "../utils/prop-config";
+import { Token } from "../utils";
 export declare const transition: Config;
@@ -9,16 +9,28 @@ export interface TransitionProps {
      */
-    transition?: ResponsiveValue<CSS.Property.Transition>;
+    transition?: Token<CSS.Property.Transition>;
     /**
      * The CSS `transition-property` property
      */
-    transitionProperty?: ResponsiveValue<CSS.Property.TransitionProperty>;
+    transitionProperty?: Token<CSS.Property.TransitionProperty>;
     /**
      * The CSS `transition-timing-function` property
      */
-    transitionTimingFunction?: ResponsiveValue<CSS.Property.TransitionTimingFunction>;
+    transitionTimingFunction?: Token<CSS.Property.TransitionTimingFunction>;
     /**
      * The CSS `transition-duration` property
      */
-    transitionDuration?: ResponsiveValue<string>;
+    transitionDuration?: Token<string>;
+    /**
+     * The CSS `transition-delay` property
+     */
+    transitionDelay?: Token<CSS.Property.TransitionDelay>;
+    /**
+     * The CSS `animation` property
+     */
+    animation?: Token<CSS.Property.Animation>;
+    /**
+     * The CSS `will-change` property
+     */
+    willChange?: Token<CSS.Property.WillChange>;
 }
 //# sourceMappingURL=transition.d.ts.map

dist/types/config/typography.d.ts

 import * as CSS from "csstype";
-import { Config } from "../prop-config";
+import { Config } from "../utils/prop-config";
 import { ResponsiveValue, Token } from "../utils";
@@ -58,10 +58,2 @@ export declare const typography: Config;
     /**
-     * The CSS `text-decoration` property
-     */
-    textDecoration?: Token<CSS.Property.TextDecoration | number>;
-    /**
-     * The CSS `text-decoration` property
-     */
-    textDecor?: Token<CSS.Property.TextDecoration | number>;
-    /**
      * Used to visually truncate a text after a number of lines.
@@ -68,0 +60,0 @@ */

dist/types/create-theme-vars/theme-tokens.d.ts

 import { Dict } from "@chakra-ui/utils";
-declare const tokens: readonly ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition"];
+declare const tokens: readonly ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"];
 export declare type ThemeScale = typeof tokens[number] | "transition.duration" | "transition.property" | "transition.easing";
@@ -4,0 +4,0 @@ export declare function extractTokens(theme: Dict): {

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

 import { Dict } from "@chakra-ui/utils";
-import type { WithCSSVar } from "../types";
+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/types/css.d.ts

 import { Dict } from "@chakra-ui/utils";
 import * as CSS from "csstype";
-import { Config } from "./prop-config";
-import { CssTheme, StyleObjectOrFn } from "./types";
+import { StyleObjectOrFn } from "./system.types";
+import { Config } from "./utils/prop-config";
+import { CssTheme } from "./utils/types";
 interface GetCSSOptions {
@@ -6,0 +7,0 @@ theme: CssTheme;

dist/types/index.d.ts

 export * from "./config";
 export * from "./css";
-export * from "./types";
+export * from "./system.types";
 export * from "./theming.types";
@@ -8,3 +8,5 @@ export * from "./system";
 export type { ResponsiveValue } from "./utils";
-export { tokenToCSSVar } from "./create-transform";
+export { tokenToCSSVar } from "./utils/create-transform";
+export declare type OmitSpaceXY<T> = Omit<T, "spaceX" | "spaceY">;
+export { WithCSSVar } from "./utils/types";
 //# sourceMappingURL=index.d.ts.map

dist/types/pseudos.d.ts

@@ -192,9 +192,14 @@ export declare const pseudoSelectors: {
     /**
-     * Styles for when `.dark` is applied to any parent of
+     * Styles for when `data-theme` is applied to any parent of
      * this component or element.
      */
     _dark: string;
+    /**
+     * Styles for when `data-theme` is applied to any parent of
+     * this component or element.
+     */
+    _light: string;
 };
 export declare type Pseudos = typeof pseudoSelectors;
-export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_indeterminate" | "_groupHover" | "_groupFocus" | "_groupActive" | "_groupDisabled" | "_groupInvalid" | "_groupChecked" | "_placeholder" | "_fullScreen" | "_selection" | "_rtl" | "_mediaDark" | "_dark")[];
+export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_indeterminate" | "_groupHover" | "_groupFocus" | "_groupActive" | "_groupDisabled" | "_groupInvalid" | "_groupChecked" | "_placeholder" | "_fullScreen" | "_selection" | "_rtl" | "_mediaDark" | "_dark" | "_light")[];
 //# sourceMappingURL=pseudos.d.ts.map

dist/types/utils/parse-gradient.d.ts

 import { Dict } from "@chakra-ui/utils";
-import { PropConfig } from "../prop-config";
+import { Transform } from "./types";
 export declare function parseGradient(value: string | null | undefined, theme: Dict): string | null | undefined;
-export declare const gradientTransform: PropConfig["transform"];
+export declare const gradientTransform: Transform;
 //# sourceMappingURL=parse-gradient.d.ts.map

dist/types/utils/types.d.ts

@@ -0,1 +1,2 @@
+import { AnalyzeBreakpointsReturn, Dict } from "@chakra-ui/utils";
 import { ThemeTypings } from "../theming.types";
@@ -8,2 +9,18 @@ export declare type ResponsiveArray<T> = Array<T | null>;
 export declare type Token<CSSType, ThemeKey = unknown> = ThemeKey extends keyof ThemeTypings ? ResponsiveValue<Union<CSSType | ThemeTypings[ThemeKey]>> : ResponsiveValue<CSSType>;
+export declare type CSSMap = Dict<{
+    value: string;
+    var: string;
+    varRef: string;
+}>;
+export declare type Transform = (value: any, theme: CssTheme, styles?: Dict) => any;
+export declare type WithCSSVar<T> = T & {
+    __cssVars: Dict;
+    __cssMap: CSSMap;
+    __breakpoints: AnalyzeBreakpointsReturn;
+};
+export declare type CssTheme = WithCSSVar<{
+    breakpoints: Dict;
+    direction?: "ltr" | "rtl";
+    [key: string]: any;
+}>;
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.10.5",
+  "version": "1.11.0",
   "description": "Style function for css-in-js building component libraries",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1004559

increased by26.6%

Number of package files

243

increased by10.96%

Lines of code

7520

increased by17.32%

No dependency changes