Chakra-ui/chakra-ui @chakra-ui/[email protected] On GitHub

773497896 #3997 Thanks @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. // 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. // 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). <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.

• 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

• 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