# Change Log ## 1.11.1 ### Patch Changes - [`d9d66a9e8`](https://github.com/chakra-ui/chakra-ui/commit/d9d66a9e876f076ffd1c8bb531fd03e9074d325f) [#4048](https://github.com/chakra-ui/chakra-ui/pull/4048) Thanks [@mcha-dev](https://github.com/mcha-dev)! - fixed boolean condition affecting bgImage url ## 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 Sample // adds main box-shadow + offset box-shadow Sample ``` **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

// adds a 3px blur and 40% saturation filter to this element

``` **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 ``` - 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! // This still works ``` - 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 ### Patch Changes - [`07d15eab4`](https://github.com/chakra-ui/chakra-ui/commit/07d15eab480724f8fee1a09b7cecdf1e968d9ddd) [#3850](https://github.com/chakra-ui/chakra-ui/pull/3850) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Refactored the creation of the theme css vars - Updated dependencies [[`d0f50a46e`](https://github.com/chakra-ui/chakra-ui/commit/d0f50a46ea6c2bcf06d8cad8b9b3994fd934be01), [`b479ff22e`](https://github.com/chakra-ui/chakra-ui/commit/b479ff22ea10c1a1393224c37c36aa6ceabc4aab), [`07d15eab4`](https://github.com/chakra-ui/chakra-ui/commit/07d15eab480724f8fee1a09b7cecdf1e968d9ddd)]: - @chakra-ui/utils@1.8.0 ## 1.10.4 ### Patch Changes - Updated dependencies [[`e9ac4cc76`](https://github.com/chakra-ui/chakra-ui/commit/e9ac4cc7629cd79efc753b4e3353bacdad46cd7d)]: - @chakra-ui/utils@1.7.0 ## 1.10.3 ### Patch Changes - [`a11810f70`](https://github.com/chakra-ui/chakra-ui/commit/a11810f705f0731f5ddc967a59b6899dfe8d5050) [#3851](https://github.com/chakra-ui/chakra-ui/pull/3851) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Fixed an issue where the transition props are not resolved correctly - Updated dependencies [[`0974e547c`](https://github.com/chakra-ui/chakra-ui/commit/0974e547c29e4efc1ba4d1eb1507d0dad7d7a77a), [`59ea894a7`](https://github.com/chakra-ui/chakra-ui/commit/59ea894a7e03d16cd7a1b89d00816eafa9fab65d)]: - @chakra-ui/utils@1.6.0 ## 1.10.2 ### Patch Changes - Updated dependencies [[`8b5eb9654`](https://github.com/chakra-ui/chakra-ui/commit/8b5eb9654affe562795d38a19f732f84732a949d)]: - @chakra-ui/utils@1.5.2 ## 1.10.1 ### Patch Changes - Updated dependencies [[`1a04a41bd`](https://github.com/chakra-ui/chakra-ui/commit/1a04a41bd2285069011a738fff422ba1a6fcce94), [`e481ba491`](https://github.com/chakra-ui/chakra-ui/commit/e481ba4914a7f163d93d4c22e2e457f1afb08721)]: - @chakra-ui/utils@1.5.1 ## 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)` ``` You can also add fallback values in event the token doesn't exist: ```jsx ``` 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 ``` ### 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 ### Patch Changes - [`a576f4de8`](https://github.com/chakra-ui/chakra-ui/commit/a576f4de850706ea7088c8a6ea687269cad05e69) Thanks [@segunadebayo](https://github.com/segunadebayo)! - Fix: avoid mutation for `getWithPriority` to get `textStyle` and `layerStyle` working consistently. ## 1.9.0 ### Minor Changes - [`035d5726e`](https://github.com/chakra-ui/chakra-ui/commit/035d5726e28396ef487b9801d7e2fa57677c703c) [#3529](https://github.com/chakra-ui/chakra-ui/pull/3529) Thanks [@callum-mellorreed-privitar](https://github.com/callum-mellorreed-privitar)! - Add support for `textStyle` and `layerStyle` theme type generation to `@chakra-ui/cli` ### Patch Changes - [`c3dcaabbc`](https://github.com/chakra-ui/chakra-ui/commit/c3dcaabbcf52ab9805a622f4e9833ad26cad9318) [#3615](https://github.com/chakra-ui/chakra-ui/pull/3615) Thanks [@segunadebayo](https://github.com/segunadebayo)! - Fix: issue where responsive styles defined in textstyles not overriden wiht props. Fix: issue where `toCSSVars` omitted the transition tokens * [`96139067d`](https://github.com/chakra-ui/chakra-ui/commit/96139067daa4b9a606b60c73f28a88ccd99d983b) [#3551](https://github.com/chakra-ui/chakra-ui/pull/3551) Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Fix: issue where RTL property keys are incorrect due to `config.property` mutation. - Fix: change `mx` and `px` to use logical properties. Instead of mapping to `marginLeft` and `marginRight`, it maps to `marginInlineStart` and `marginInlineEnd`. Same for `px` * Updated dependencies [[`e748219f3`](https://github.com/chakra-ui/chakra-ui/commit/e748219f300f0c51b0eb304fce38b014d7bcbc86), [`91ef14839`](https://github.com/chakra-ui/chakra-ui/commit/91ef148397187010804eb8f30307d2ec94c32c5b)]: - @chakra-ui/utils@1.4.0 ## 1.8.0 ### Minor Changes - [`53408372e`](https://github.com/chakra-ui/chakra-ui/commit/53408372ef6926840815a03f2ac5269e3a4757f2) [#3463](https://github.com/chakra-ui/chakra-ui/pull/3463) Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Add support for CSS Variables to the core of Chakra - Improve style computation performance by 2.5x ### Patch Changes - Updated dependencies [[`87cc23e14`](https://github.com/chakra-ui/chakra-ui/commit/87cc23e14814e02cbbfc9737c2356cef682ddd5d)]: - @chakra-ui/utils@1.3.0 ## 1.7.1 ### Patch Changes - [`e8113d3ca`](https://github.com/chakra-ui/chakra-ui/commit/e8113d3ca66e9d45ac2dbb7109ff8904cbfd1134) [#3340](https://github.com/chakra-ui/chakra-ui/pull/3340) Thanks [@MohamedSayed008](https://github.com/MohamedSayed008)! - Export `Recursive*` types from theme, styled-system * [`4943a15c0`](https://github.com/chakra-ui/chakra-ui/commit/4943a15c084fd2e66ab0dbf273233630d006dc5a) [#3306](https://github.com/chakra-ui/chakra-ui/pull/3306) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Fixed an issue where TypeScript did not allow custom breakpoint names in ResponsiveObject ## 1.7.0 ### Minor Changes - [`a97e42568`](https://github.com/chakra-ui/chakra-ui/commit/a97e42568c4470d6cd1e16b48429af93c52def49) [#3290](https://github.com/chakra-ui/chakra-ui/pull/3290) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Theme Typings: Add autocomplete for negative space values * [`ff4a36bca`](https://github.com/chakra-ui/chakra-ui/commit/ff4a36bca11cc177830f6f1da13700acd1e3a087) [#3245](https://github.com/chakra-ui/chakra-ui/pull/3245) Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Add support for `textStyle` and `layerStyle` in styled-system package. This makes it possible to use them in the component theme, `css` function, and `sx` prop as well. ```jsx const theme = { textStyles: { caps: { fontWeight: "bold", fontSize: "24px", }, }, } const styles = css({ textStyle: "caps" })(theme) ``` This also works for component theme as well. > `layerStyle`, `textStyle` and `apply` can now take responsive values as > well. - Refactored `apply` prop handling to use the style config pattern instead of add it imperatively. ### Patch Changes - [`ef34c10a0`](https://github.com/chakra-ui/chakra-ui/commit/ef34c10a0c3cfda6bafcca4aa287dfb82f130aeb) [#3253](https://github.com/chakra-ui/chakra-ui/pull/3253) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Allow numbers for `borderTop` and provide autocomplete for `fontWeight` prop * [`408aaaace`](https://github.com/chakra-ui/chakra-ui/commit/408aaaace0dd413b61354958a4c30b9f2f8aa376) [#3227](https://github.com/chakra-ui/chakra-ui/pull/3227) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Introducing a generic TypeScript type `ChakraTheme` to improve the `extendTheme` function even further. ```ts import { extendTheme } from "@chakra-ui/react" export const customTheme = extendTheme({ // here you get autocomplete for // - existing definitions from the default theme // - new components (Single and MultiStyle) // - CSS definitions // - color hues // - etc. }) export type MyCustomTheme = typeof customTheme ``` You can get typesafe access to your custom theme like this: ```ts import { useTheme } from "@chakra-ui/react" import { MyCustomTheme } from "./my-custom-theme" const MyComponent = () => { const customTheme = useTheme() //... } ``` - [`61962345c`](https://github.com/chakra-ui/chakra-ui/commit/61962345c5b1c862445c16c586e304b28c376c9a) [#3291](https://github.com/chakra-ui/chakra-ui/pull/3291) Thanks [@dominictwlee](https://github.com/dominictwlee)! - Support negative scale values for css variables. - Updated dependencies [[`ff4a36bca`](https://github.com/chakra-ui/chakra-ui/commit/ff4a36bca11cc177830f6f1da13700acd1e3a087), [`483687237`](https://github.com/chakra-ui/chakra-ui/commit/483687237f2c4fed05dc6a79693f307c601c1285), [`61962345c`](https://github.com/chakra-ui/chakra-ui/commit/61962345c5b1c862445c16c586e304b28c376c9a)]: - @chakra-ui/utils@1.2.0 ## 1.6.0 ### Minor Changes - [`90c7a4fbf`](https://github.com/chakra-ui/chakra-ui/commit/90c7a4fbfde69c01395ffe2876d7348dd72ea65a) [#3092](https://github.com/chakra-ui/chakra-ui/pull/3092) Thanks [@TimKolberger](https://github.com/TimKolberger)! - - Improved theme typing in order to provide a better autocomplete experience - Fixed a type issue where pseudo style props like `_hover` and `_active` didn't allow regular css properties ### Patch Changes - [`e434aed4a`](https://github.com/chakra-ui/chakra-ui/commit/e434aed4a7d769d0c6e98e048b2100f0efed277a) [#3214](https://github.com/chakra-ui/chakra-ui/pull/3214) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Fix issue where CSS color names are not passed correctly. ```jsx Background is red ``` ## 1.5.0 ### Minor Changes - [`d9ec9f49`](https://github.com/chakra-ui/chakra-ui/commit/d9ec9f496bfe2f81ffb84adbed099581d5f6843e) [#3049](https://github.com/chakra-ui/chakra-ui/pull/3049) Thanks [@segunadebayo](https://github.com/segunadebayo)! - Move `srOnly` prop to styled system props. This will deprecate the need for the visually hidden package. Less is more! ```jsx // If `true`, hide an element visually without hiding it from screen readers. Visually hidden // If `focusable`, the sr-only styles will be undone, making the element visible to sighted users as well as screen readers. Visually hidden but shown on focus ``` * [`26ca4cc5`](https://github.com/chakra-ui/chakra-ui/commit/26ca4cc53b8cc0ca696f2130f832965f7dc0ee53) Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Add polyfill for `inset` style prop as the CSS `inset` doesn't work in Safari - Add missing style props for grid and flex layouts: `gridTemplate`, `gridRowStart`, `gridRowEnd`, `flexFlow`, `clipPath` ## 1.4.1 ### Patch Changes - Updated dependencies [[`8b87406c`](https://github.com/chakra-ui/chakra-ui/commit/8b87406c3132586be3393117eef80d47ec82fc54)]: - @chakra-ui/utils@1.1.0 ## 1.4.0 ### Minor Changes - [`ff7c3676`](https://github.com/chakra-ui/chakra-ui/commit/ff7c36764650dc7f01957c417eae1ec8ce356495) Thanks [@segunadebayo](https://github.com/segunadebayo)! - Add support for css media query and dark class selectors. - Users can now define write styles for dark class variant ```jsx live=false This will be styled based on dark mode class in body ``` - Users can also define write styles for CSS media dark mode ```jsx live=false This will be styled based on System preference ``` **Note to maintainers** > This is an initial effort to move towards using CSS instead of JS for > color-mode styles. > > In Chakra v2, we'll only use JS to detect the initial color mode and rely on > `_dark` for changing styles. ### Patch Changes - [`6830c0e3`](https://github.com/chakra-ui/chakra-ui/commit/6830c0e36959ebd76ce1991dd89d7303ce33b0d0) Thanks [@segunadebayo](https://github.com/segunadebayo)! - - Due to Safari not support css logical properties for `right`, and `left`, I added polyfill for this css logical properties. > Affect components: `Modal`, `Drawer` - Added a `directionality` helper function to encapsulate all logic for ltr-rtl value or style flipping. * [`09f028e4`](https://github.com/chakra-ui/chakra-ui/commit/09f028e4f2539d51b1c9ac7f3aec422ee6848fa3) [#2985](https://github.com/chakra-ui/chakra-ui/pull/2985) Thanks [@TimKolberger](https://github.com/TimKolberger)! - Fixed a bug where rgb values in bgGradient did not work correctly ## 1.3.1 ### Patch Changes - [`5cef5de4`](https://github.com/chakra-ui/chakra-ui/commit/5cef5de4f45cd58f7a29436335543cb5b40c0d70) [#2918](https://github.com/chakra-ui/chakra-ui/pull/2918) Thanks [@MohamedSayed008](https://github.com/MohamedSayed008)! - ## Button - Update the style props applied for `leftIcon` and `rightIcon` to support RTL. Changed `ml` and `mr` to `marginStart` and `marginEnd` respectively. - Update the style props applied when `isLoading` is `true`. Changed `marginRight` to `marginEnd`. ## Stack - Update `directionStyles` to use logical CSS properties for RTL support. Changed `marginLeft` and `marginRight` to `marginStart` and `marginEnd` respectively. ## Styled System - Add missing `borderStart`, and `borderEnd` for style and color. - Sort `Object.assign` keys in `configs/border.ts` for better readability. ## Other RTL Fixes - Alignment for close icon for `Tag`, `Modal`, and `Drawer` components to support RTL. ## Storybook Add RTL storybook toolbar for make it easy to test layouts. Packages added: - `@storybook/addon-toolbars` ## 1.3.0 ### Minor Changes - [`a0e0bd9a`](https://github.com/chakra-ui/chakra-ui/commit/a0e0bd9a5d45fe08887f8df8d3eccc84951578df) [#2816](https://github.com/chakra-ui/chakra-ui/pull/2816) Thanks [@segunadebayo](https://github.com/segunadebayo)! - Add gradient support to chakra style props. This PR adds to props: - `bgGradient`: a shorthand, convenient style prop to apply theme-aware gradients. - `bgClip`: a shorthand for `background-clip` CSS attribute. Useful when creating text gradients. - `backgroundClip`: the typical `background-clip` CSS attribute. Useful when creating text gradients. ## The Background Gradient API To add a gradient to a component, pass the `bgGradient` prop and set its value following the API below: - `linear(, , )` - `radial(, )` and other valid css gradient properties. For linear gradients, the direction can be either of the following values: ```js "to-t" // 'to top' "to-tr" // 'to top right' "to-r" // 'to right' "to-br" // 'to bottom right' "to-b" // 'to bottom' "to-bl" // 'to bottom left' "to-l" // 'to left' "to-tl" // 'to top left' ``` ```jsx ``` You can use both theme-aware color tokens or raw CSS color values. ```jsx ``` ### Multiple Color Stops This is a gradient with multiple stops ```jsx ``` ## The Text Gradient API To add a text gradient, pass the `bgGradient` following the API and `bgClip` prop to `text`. ```jsx Welcome to Chakra UI ``` * [`4fa07745`](https://github.com/chakra-ui/chakra-ui/commit/4fa077453a5c2165b695198c57366f3cc6506c37) Thanks [@segunadebayo](https://github.com/segunadebayo)! - ## Improve performance Styled system core functions use `localCompare` to sort the transformed styles before passing it to emotion. This seems to be slower compared to its alternative `Intl.Collator`. Here's a benchmark I ran on my Chrome, Macbook Pro: ```js // Create an array of 2000 random items const arr = [] for (let i = 0; i < 2000; i++) { arr.push(`test-${Math.random()}`) } // #1 - localeCompare: 169.665ms arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base", }), ) // #2 - collator: 10.915ms const collator = new Intl.Collator("en", { numeric: true, sensitivity: "base", }) arr.sort((a, b) => collator.compare(a, b)) ``` To improve performance, I had to do the following: - Move the core functions from `@styled-system/core` into our own codebase (we could create a PR to styled-system to improve the community) - Rewrite the functions to TypeScript. Since they're written in JavaScript - Change the sorting function to use `Intl.Collator` - Change the `merge` function to use `lodash.mergeWith` To learn more, check [here](https://stackoverflow.com/questions/14677060/400x-sorting-speedup-by-switching-a-localecompareb-to-ab-1ab10/25775469) to see this benchmark. ## 1.2.0 ### Minor Changes - [`609ac595`](https://github.com/chakra-ui/chakra-ui/commit/609ac595568799c9f2c38ccbc9ef44fdc7393baa) Thanks [@segunadebayo](https://github.com/segunadebayo)! - ## 📝 Description Adds support for CSS logical properties and `direction` in the theme for future RTL optimizations. ## 🚀 New behavior Make it possible to pass css logical style props or shorthand props. For example, to pass bi-directional margin-left, users will change `ml` to `ms` OR `marginLeft` ot `marginStart`. ```jsx // not RTL friendly 🚨 // Good ✅ // or use shorthand for margin-left bi-directional ✅ ``` Here's a list of possible bi-directional shorthand style props you can pass in addition to most css logical properties: | Prop | LTR value | RTL value | | ------------------ | ---------------------------------------------- | ---------------------------------------------- | | ms | marginLeft | marginRight | | marginStart | marginLeft | marginRight | | me | marginRight | marginLeft | | marginEnd | marginRight | marginLeft | | ps | paddingLeft | paddingRight | | paddingStart | paddingLeft | paddingRight | | pe | paddingRight | paddingLeft | | paddingEnd | paddingRight | paddingLeft | | insetStart | left | right | | insetEnd | right | left | | borderStartWidth | borderLeftWidth | borderRightWidth | | borderEndWidth | borderRightWidth | borderLeftWidth | | borderStartRadius | borderTopLeftRadius + borderBottomLeftRadius | borderTopRightRadius + borderBottomRightRadius | | borderEndRadius | borderTopRightRadius + borderBottomRightRadius | borderTopLeftRadius + borderBottomLeftRadius | | roundedStart | borderTopLeftRadius + borderBottomLeftRadius | borderTopRightRadius + borderBottomRightRadius | | roundedEnd | borderTopRightRadius + borderBottomRightRadius | borderTopLeftRadius + borderBottomLeftRadius | | roundedTopStart | borderTopLeftRadius | borderTopRightRadius | | roundedTopEnd | borderTopRightRadius | borderTopLeftRadius | | roundedBottomStart | borderBottomLeftRadius | borderBottomRightRadius | | roundedBottomEnd | borderBottomRightRadius | borderBottomLeftRadius | ### Patch Changes - Updated dependencies [[`e73878ee`](https://github.com/chakra-ui/chakra-ui/commit/e73878ee686c11d3f94ad6ac61b19ae9508d75a5)]: - @chakra-ui/utils@1.0.2 ## 1.1.1 ### Patch Changes - [`127baa0f`](https://github.com/chakra-ui/chakra-ui/commit/127baa0f1926bf1f8ace6f46cfdc08606fe9d347) [#2702](https://github.com/chakra-ui/chakra-ui/pull/2702) Thanks [@terryyu](https://github.com/terryyu)! - fix style prop of shortcut definition, closes #2700 ## 1.1.0 ### Minor Changes - [`586ce3c1`](https://github.com/chakra-ui/chakra-ui/commit/586ce3c12bb3508027c36811233c539eeeb55256) [#2504](https://github.com/chakra-ui/chakra-ui/pull/2504) Thanks [@Zaynex](https://github.com/Zaynex)! - - Add `filter` to styled props - This makes `filter` prop available to `_groupHover` utility as well ### Patch Changes - Updated dependencies [[`5c482483`](https://github.com/chakra-ui/chakra-ui/commit/5c482483ce24fc798540c9792a15e06772eae213)]: - @chakra-ui/utils@1.0.1 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # 1.0.0 (2020-11-13) **Note:** Version bump only for package @chakra-ui/styled-system # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # 1.0.0-rc.8 (2020-10-29) ### Bug Fixes - **toast:** allow custom render in update ([eb8bff9](https://github.com/chakra-ui/chakra-ui/commit/eb8bff911e6ec9de0165ab1e8f5ca10d5e022459)), closes [#2362](https://github.com/chakra-ui/chakra-ui/issues/2362) # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # 1.0.0-rc.7 (2020-10-25) **Note:** Version bump only for package @chakra-ui/styled-system # 1.0.0-rc.6 (2020-10-25) **Note:** Version bump only for package @chakra-ui/styled-system # 1.0.0-rc.5 (2020-09-27) **Note:** Version bump only for package @chakra-ui/styled-system # 1.0.0-rc.4 (2020-09-25) **Note:** Version bump only for package @chakra-ui/styled-system # 1.0.0-rc.3 (2020-08-30) **Note:** Version bump only for package @chakra-ui/styled-system # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # 1.0.0-rc.2 (2020-08-09) **Note:** Version bump only for package @chakra-ui/styled-system # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # [1.0.0-rc.1](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/styled-system@1.0.0-rc.0...@chakra-ui/styled-system@1.0.0-rc.1) (2020-08-06) ### Bug Fixes - types issue with styled system ([470e14c](https://github.com/chakra-ui/chakra-ui/commit/470e14c3159898b43a54237091cf8ee707ed65a5)) - **types:** resolve type export from styled-system pkg ([0d3bd36](https://github.com/chakra-ui/chakra-ui/commit/0d3bd36d9c0dc6d94010625b49c501847ca2e165)) # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # [1.0.0-rc.0](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/styled-system@1.0.0-next.7...@chakra-ui/styled-system@1.0.0-rc.0) (2020-07-26) **Note:** Version bump only for package @chakra-ui/styled-system # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # [1.0.0-next.7](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/styled-system@1.0.0-next.6...@chakra-ui/styled-system@1.0.0-next.7) (2020-07-26) ### Bug Fixes - types issue with styled system core ([fc8b8d8](https://github.com/chakra-ui/chakra-ui/commit/fc8b8d8c0daba140da959303df59230304d34f8a)) - undefined issue in styled utilies ([42502d1](https://github.com/chakra-ui/chakra-ui/commit/42502d1f689f34fe672893104dc85d378e08a55a)) ### Reverts - breakpoint handling ([f3ee5f1](https://github.com/chakra-ui/chakra-ui/commit/f3ee5f15c48da242c4d4d43de0dc67ff7664c81e)) # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # [1.0.0-next.6](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/styled-system@1.0.0-next.5...@chakra-ui/styled-system@1.0.0-next.6) (2020-07-15) **Note:** Version bump only for package @chakra-ui/styled-system # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. # 1.0.0-next.5 (2020-07-15) ### Features - add support for css transition ([a41614c](https://github.com/chakra-ui/chakra-ui/commit/a41614c8e9757e5d38ddef6a356d2d8c718f406f)) - add transition tokens ([40c8b30](https://github.com/chakra-ui/chakra-ui/commit/40c8b30f0f0219a1ed673db97c4032e721f38e53)) - add transition tokens ([5e190fa](https://github.com/chakra-ui/chakra-ui/commit/5e190fa70b41f6e0e063d3d68f0dd32adff754eb))