v2.8.0

Full web changelog · Documentation

npm install reshaped

New color tokens

We are adding new color tokens: warning and brand.
Warning colors are used as a new role in between critical and positive colors, while brand colors can be used for brand assets as a standalone color different from primary colors.
With the new colors support we have introduced new colors for component like Badge and Progress.

If you're using your own themes, make sure to generate them again to include
new color tokens in the builders. If you're using a custom theme in Figma,
update its definition in the theming plugin you're using.

Application screen example

We have added a new example of the whole application screen built with Reshaped and its design is included in our Design license.
It features the whole page layout relying completely on the Reshaped components utilities, including its responsive behaviour and interactive components, like DropdownMenu or Toast.

Other improvements

• PostCSS: Added getConfig() function to support viewport breakpoints theming
• Badge, Figma: Exposed icon properties in Figma
• Button: Added flex layout support for the button children
• Button: Reduced the vertical padding to work with larger slots without stretching the button
• Button, Figma: Extracted .button-content into a separate cmponent to improve the library performance and maintenance experience
• Button, Figma: Added slot support
• Icon: Fixed svg rendering error happening for icon components using prop-types
• Icon: Added linear logo to the iconset in Figma
• MenuItem: Fixed Tailwind CSS reset overriding button styles
• Overlay: Fixed Tailwind CSS cursor override
• Slot, Figma: Fixed slot overriding styles of the swapped components
• Timeline, Figma: Fixed the content slot auto layout
• View: added minWidth and minHeight support
• View: added overflow auto support