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

Comparing version 1.9.1 to 1.10.0

CHANGELOG.md

 # Change Log
 
+## 1.10.0
+
+### Minor Changes
+
+- [`32e79f835`](https://github.com/chakra-ui/chakra-ui/commit/32e79f83545740e1df73e7ce689e4101646bb57d)
+  [#3648](https://github.com/chakra-ui/chakra-ui/pull/3648) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Add support for css
+  variable tokens. This means you can create a css variable and reference value
+  in the tokens.
+
+  ```jsx
+  // We're convert `colors.red.200` to `var(--chakra-colors-red-200)`
+  <Box
+    sx={{
+      "--banner-color": "colors.red.200",
+      "& .banner": {
+        bg: "var(--banner-color)",
+      },
+    }}
+  />
+  ```
+
+  You can also add fallback values in event the token doesn't exist:
+
+  ```jsx
+  <Box
+    sx={{
+      // evaluates to #fff if `colors.red.1000` doesn't exists in theme map
+      "--banner-color": "colors.red.1000, #fff",
+      "& .banner": {
+        bg: "var(--banner-color)",
+      },
+    }}
+  />
+  ```
+
+  This opens new possbilities with css variables, for example you can apply
+  responsive token values like you would with style props.
+
+  > TypeScript support for this is still WIP
+
+  ```jsx
+  <Box
+    sx={{
+      "--banner-color": ["colors.red.200", "colors.pink.400"],
+      "& .banner": {
+        bg: "var(--banner-color)",
+      },
+    }}
+  />
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+  [[`a58b724e9`](https://github.com/chakra-ui/chakra-ui/commit/a58b724e9c8656044f866b658f378662f2a44b46),
+  [`b724a9dd9`](https://github.com/chakra-ui/chakra-ui/commit/b724a9dd9429d02c0b2c7f7deac66d3553100bdc)]:
+  - @chakra-ui/utils@1.5.0
+
 ## 1.9.1
@@ -4,0 +63,0 @@

dist/cjs/config/transform.js

@@ -5,2 +5,7 @@ "use strict";
 exports.transform = void 0;
+
+var _utils = require("@chakra-ui/utils");
+
+var _utils2 = require("../utils");
+
 var templates = {
@@ -10,2 +15,8 @@ auto: "var(--chakra-transform)",
 };
+
+var degreeTransform = function degreeTransform(value) {
+  if ((0, _utils.isCssVar)(value) || value == null) return value;
+  return (0, _utils.isNumber)(value) ? value + "deg" : value;
+};
+
 var transform = {
@@ -20,5 +31,23 @@ transform: {
   },
-  transformOrigin: true
+  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
+  }
 };
 exports.transform = transform;
 //# sourceMappingURL=transform.js.map

dist/cjs/css.js

@@ -5,6 +5,8 @@ "use strict";
 exports.getCss = getCss;
-exports.css = exports.expandResponsive = void 0;
+exports.css = void 0;
 
 var _utils = require("@chakra-ui/utils");
 
+var _expandResponsive = require("./expand-responsive");
+
 var _pseudos = require("./pseudos");
@@ -20,47 +22,32 @@
 
-var expandResponsive = function expandResponsive(styles) {
-  return function (theme) {
-    if (!theme.__breakpoints) return styles;
-    var _theme$__breakpoints = theme.__breakpoints,
-        isResponsive = _theme$__breakpoints.isResponsive,
-        toArrayValue = _theme$__breakpoints.toArrayValue,
-        medias = _theme$__breakpoints.media;
-    var computedStyles = {};
+var isCSSVariableTokenValue = function isCSSVariableTokenValue(key, value) {
+  return key.startsWith("--") && (0, _utils.isString)(value) && !(0, _utils.isCssVar)(value);
+};
 
-    for (var key in styles) {
-      var value = (0, _utils.runIfFn)(styles[key], theme);
-      if (value == null) continue;
-      value = (0, _utils.isObject)(value) && isResponsive(value) ? toArrayValue(value) : value;
+var resolveTokenValue = function resolveTokenValue(theme, value) {
+  var _ref, _getVar2;
 
-      if (!Array.isArray(value)) {
-        computedStyles[key] = value;
-        continue;
-      }
+  if (value == null) return value;
 
-      var queries = value.slice(0, medias.length).length;
+  var getVar = function getVar(val) {
+    var _theme$__cssMap, _theme$__cssMap$val;
 
-      for (var index = 0; index < queries; index += 1) {
-        var media = medias == null ? void 0 : medias[index];
+    return (_theme$__cssMap = theme.__cssMap) == null ? void 0 : (_theme$__cssMap$val = _theme$__cssMap[val]) == null ? void 0 : _theme$__cssMap$val.varRef;
+  };
 
-        if (!media) {
-          computedStyles[key] = value[index];
-          continue;
-        }
+  var getValue = function getValue(val) {
+    var _getVar;
 
-        computedStyles[media] = computedStyles[media] || {};
+    return (_getVar = getVar(val)) != null ? _getVar : val;
+  };
 
-        if (value[index] == null) {
-          continue;
-        }
-
-        computedStyles[media][key] = value[index];
-      }
-    }
-
-    return computedStyles;
-  };
+  var valueSplit = value.split(",").map(function (v) {
+    return v.trim();
+  });
+  var tokenValue = valueSplit[0],
+      fallbackValue = valueSplit[1];
+  value = (_ref = (_getVar2 = getVar(tokenValue)) != null ? _getVar2 : getValue(fallbackValue)) != null ? _ref : getValue(value);
+  return value;
 };
 
-exports.expandResponsive = expandResponsive;
-
 function getCss(options) {
@@ -80,11 +67,36 @@ var _options$configs = options.configs,
 
-    var styles = expandResponsive(_styles)(theme);
+    var styles = (0, _expandResponsive.expandResponsive)(_styles)(theme);
     var computedStyles = {};
 
-    for (var k in styles) {
+    for (var key in styles) {
       var _config$transform, _config, _config2, _config3, _config4;
 
-      var valueOrFn = styles[k];
+      var valueOrFn = styles[key];
+      /**
+       * allows the user to pass functional values
+       * boxShadow: theme => `0 2px 2px ${theme.colors.red}`
+       */
+
       var value = (0, _utils.runIfFn)(valueOrFn, theme);
-      var key = k in pseudos ? pseudos[k] : k;
+      /**
+       * converts pseudo shorthands to valid selector
+       * "_hover" => "&:hover"
+       */
+
+      if (key in pseudos) {
+        key = pseudos[key];
+      }
+      /**
+       * allows the user to use theme tokens in css vars
+       * { --banner-height: "sizes.md" } => { --banner-height: "var(--chakra-sizes-md)" }
+       *
+       * You can also provide fallback values
+       * { --banner-height: "sizes.no-exist, 40px" } => { --banner-height: "40px" }
+       */
+
+
+      if (isCSSVariableTokenValue(key, value)) {
+        value = resolveTokenValue(theme, value);
+      }
+
       var config = configs[key];
@@ -107,3 +119,19 @@
       var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme, _styles)) != null ? _config$transform : value;
+      /**
+       * Used for `layerStyle`, `textStyle` and `apply`. After getting the
+       * styles in the theme, we need to process them since they might
+       * contain theme tokens.
+       *
+       * `processResult` is the config property we pass to `layerStyle`, `textStyle` and `apply`
+       */
+
       rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue;
+      /**
+       * allows us define css properties for RTL and LTR.
+       *
+       * const marginStart = {
+       *   property: theme => theme.direction === "rtl" ? "marginRight": "marginLeft",
+       * }
+       */
+
       var configProperty = (0, _utils.runIfFn)((_config3 = config) == null ? void 0 : _config3.property, theme);
@@ -110,0 +138,0 @@

dist/esm/config/transform.js

@@ -0,1 +1,3 @@
+import { isCssVar, isNumber } from "@chakra-ui/utils";
+import { t } from "../utils";
 var templates = {
@@ -5,2 +7,8 @@ auto: "var(--chakra-transform)",
 };
+
+var degreeTransform = value => {
+  if (isCssVar(value) || value == null) return value;
+  return isNumber(value) ? value + "deg" : value;
+};
+
 export var transform = {
@@ -17,4 +25,22 @@ transform: {
   },
-  transformOrigin: true
+  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
+  }
 };
 //# sourceMappingURL=transform.js.map

dist/esm/css.js

@@ -1,45 +0,31 @@
-import { isObject, mergeWith as merge, runIfFn } from "@chakra-ui/utils";
+import { isObject, mergeWith as merge, runIfFn, isCssVar, isString } from "@chakra-ui/utils";
+import { expandResponsive } from "./expand-responsive";
 import { pseudoSelectors } from "./pseudos";
 import { systemProps as systemPropConfigs } from "./system";
-export var expandResponsive = styles => theme => {
-  if (!theme.__breakpoints) return styles;
-  var {
-    isResponsive,
-    toArrayValue,
-    media: medias
-  } = theme.__breakpoints;
-  var computedStyles = {};
 
-  for (var key in styles) {
-    var value = runIfFn(styles[key], theme);
-    if (value == null) continue;
-    value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;
+var isCSSVariableTokenValue = (key, value) => key.startsWith("--") && isString(value) && !isCssVar(value);
 
-    if (!Array.isArray(value)) {
-      computedStyles[key] = value;
-      continue;
-    }
+var resolveTokenValue = (theme, value) => {
+  var _ref, _getVar2;
 
-    var queries = value.slice(0, medias.length).length;
+  if (value == null) return value;
 
-    for (var index = 0; index < queries; index += 1) {
-      var media = medias == null ? void 0 : medias[index];
+  var getVar = val => {
+    var _theme$__cssMap, _theme$__cssMap$val;
 
-      if (!media) {
-        computedStyles[key] = value[index];
-        continue;
-      }
+    return (_theme$__cssMap = theme.__cssMap) == null ? void 0 : (_theme$__cssMap$val = _theme$__cssMap[val]) == null ? void 0 : _theme$__cssMap$val.varRef;
+  };
 
-      computedStyles[media] = computedStyles[media] || {};
+  var getValue = val => {
+    var _getVar;
 
-      if (value[index] == null) {
-        continue;
-      }
+    return (_getVar = getVar(val)) != null ? _getVar : val;
+  };
 
-      computedStyles[media][key] = value[index];
-    }
-  }
+  var valueSplit = value.split(",").map(v => v.trim());
+  var [tokenValue, fallbackValue] = valueSplit;
+  value = (_ref = (_getVar2 = getVar(tokenValue)) != null ? _getVar2 : getValue(fallbackValue)) != null ? _ref : getValue(value);
+  return value;
+};
 
-  return computedStyles;
-};
 export function getCss(options) {
@@ -62,8 +48,33 @@ var {
 
-    for (var k in styles) {
+    for (var key in styles) {
       var _config$transform, _config, _config2, _config3, _config4;
 
-      var valueOrFn = styles[k];
+      var valueOrFn = styles[key];
+      /**
+       * allows the user to pass functional values
+       * boxShadow: theme => `0 2px 2px ${theme.colors.red}`
+       */
+
       var value = runIfFn(valueOrFn, theme);
-      var key = k in pseudos ? pseudos[k] : k;
+      /**
+       * converts pseudo shorthands to valid selector
+       * "_hover" => "&:hover"
+       */
+
+      if (key in pseudos) {
+        key = pseudos[key];
+      }
+      /**
+       * allows the user to use theme tokens in css vars
+       * { --banner-height: "sizes.md" } => { --banner-height: "var(--chakra-sizes-md)" }
+       *
+       * You can also provide fallback values
+       * { --banner-height: "sizes.no-exist, 40px" } => { --banner-height: "40px" }
+       */
+
+
+      if (isCSSVariableTokenValue(key, value)) {
+        value = resolveTokenValue(theme, value);
+      }
+
       var config = configs[key];
@@ -86,3 +97,19 @@
       var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme, _styles)) != null ? _config$transform : value;
+      /**
+       * Used for `layerStyle`, `textStyle` and `apply`. After getting the
+       * styles in the theme, we need to process them since they might
+       * contain theme tokens.
+       *
+       * `processResult` is the config property we pass to `layerStyle`, `textStyle` and `apply`
+       */
+
       rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue;
+      /**
+       * allows us define css properties for RTL and LTR.
+       *
+       * const marginStart = {
+       *   property: theme => theme.direction === "rtl" ? "marginRight": "marginLeft",
+       * }
+       */
+
       var configProperty = runIfFn((_config3 = config) == null ? void 0 : _config3.property, theme);
@@ -89,0 +116,0 @@

dist/types/css.d.ts

@@ -5,4 +5,3 @@ import { Dict } from "@chakra-ui/utils";
 import { CssTheme, StyleObjectOrFn } from "./types";
-export declare const expandResponsive: (styles: Dict) => (theme: Dict) => Record<string, any>;
-interface Options {
+interface GetCSSOptions {
     theme: CssTheme;
@@ -12,5 +11,5 @@ configs?: Config;
 }
-export declare function getCss(options: Options): (stylesOrFn: Dict, nested?: boolean) => Record<string, any>;
+export declare function getCss(options: GetCSSOptions): (stylesOrFn: Dict, nested?: boolean) => Record<string, any>;
 export declare const css: (styles: StyleObjectOrFn) => (theme: any) => Record<string, any>;
 export {};
 //# sourceMappingURL=css.d.ts.map

dist/types/prop-config.d.ts

@@ -5,3 +5,3 @@ import { Dict } from "@chakra-ui/utils";
 import type { CssTheme, Transform } from "./types";
-declare type CSSProp = keyof CSS.Properties;
+declare type CSSProp = keyof CSS.Properties | (string & {});
 declare type MaybeArray<T> = T | T[];
@@ -37,3 +37,3 @@ declare type MaybeThemeFunction<T> = T | ((theme: CssTheme) => T);
 export declare type Config = Record<string, PropConfig | true>;
-export declare function toConfig(scale: ThemeScale, transform?: Transform): <T extends "transition" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clipPath" | "color" | "colorAdjust" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "pointerEvents" | "position" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMargin" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textDecorationWidth" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "columnRule" | "columns" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "lineClamp" | "listStyle" | "margin" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "padding" | "placeItems" | "placeSelf" | "textDecoration" | "textEmphasis" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnGap" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msAlignSelf" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msJustifySelf" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransformOrigin" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnGap" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphens" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontVariantAlternates" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollbarTrackColor" | "textCombineHorizontal" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBinding" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "msScrollbarTrackColor" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OTransform" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect">(property: T | T[]) => PropConfig;
+export declare function toConfig(scale: ThemeScale, transform?: Transform): <T extends CSSProp>(property: T | T[]) => PropConfig;
 interface Opts {
@@ -40,0 +40,0 @@ scale?: ThemeScale;

dist/types/theming.types.d.ts

@@ -267,3 +267,2 @@ // regenerate by running
   sizes:
-    | "0"
     | "1"
@@ -324,4 +323,2 @@ | "2"
   space:
-    | "0"
-    | "-0"
     | "1"
@@ -328,0 +325,0 @@ | "-1"

package.json

 {
   "name": "@chakra-ui/styled-system",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "Style function for css-in-js building component libraries",
@@ -57,5 +57,5 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/utils": "1.4.0",
+    "@chakra-ui/utils": "1.5.0",
     "csstype": "^3.0.6"
   }
 }

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

767782

increased by0.69%

Number of package files

183

increased by3.39%

Lines of code

6146

increased by2.5%

Dependency changes

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

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

• - Removed@types/object-assign@4.0.30(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedreact@18.3.1(transitive)

• Updated@chakra-ui/utils@1.5.0