Guide
Ready to make the move to Carbon v11? Our Migration Guide helps designers and developers learn more about this release and how to start migrating to v11 today
Overview
Carbon v11 focuses on quality of life updates for designers and developers. This update includes changes to our token names for ease of use, component API updates for a more predictable developer experience, along with new features like CSS grid in order to build robust layouts on top of the 2x grid. With no changes to the IBM Design Language, v11 will not require any brand-driven product redesigns.
To get started migrating, check out our Getting started section below. To learn about this release, check out our Changelog.
Getting started
Whether you are a designer or a developer, we have curated guidance ready for you as your team makes their migration. Dive in using one of the looks below to get started.
Changelog
The v11 release of Carbon is focused on improving the designer and developer experience of using Carbon. This release does not include any changes to the IBM Design Language and will not require any Product UIs to be visually redesigned.
This release also includes different compatability features to make it easy to use aspects of v10 in v11, such as color tokens.
To learn more about some of the high-level updates coming to Carbon, keep reading below. For a full reference of what has changed in this release, check out our v11 Migration Docs.
Theming
Design Kits
Package changes
Styles
React
Icons
IBM Plex
What’s changing
- Theming
- Color tokens
- Type tokens
- CSS Custom Properties
- Light & Dark Mode
- Design Kit
- Package changes
- Styles
- Update to Dart Sass
- Update to Sass Modules
- Reduction in compile times
- React
- Component API changes
classNameconventionssizeprop- Tabs
- Accessibility updates
- Notification
- Tooltip
- Icons
- Component API changes
- CSS Grid
- IBM Plex
What’s changing
- APIs: Size prop naming conventions have been updated to be consistent across all components.
- Color tokens: Existing tokens have been renamed to better reflect their usage and new tokens have been added to fill existing color token gaps in our system.
- Sass modules: Carbon styles have been updated to use its own dedicated package and is transitioning to Sass modules.
- Theming: New support for inline theming and light or dark modes.
- Design kit: The Sketch theme libraries have been updated to include all v11 updates. Other design tools may have a rolling update to come.
- Components: A new one-package install along with new components and API updates.
- Grid: New CSS Grid support to make it easier to build layouts.
- Component props: Changes include updates
className, event handlers and size props. - Component updates: While working with IBM Accessibility group we have focused on updating the following accessibility primitives: Notification, Tooltip and Content Switcher.
- Changes to
@carbon/icons-react: We are updating the default size tomdautomatically included in the@carbon/reactpackage. - New Components: We have some exciting new components! Here they are: Popover, Tooltip, Dialog.