The transition from v10 to v11 includes significant updates and additions to color tokens, theming, size naming, with new components providing better accessibility, collaboration, and efficiency for users.
- Added new color tokens.
- Introduced layering models: layer set tokens and contextual layer tokens.
- Updated existing color token names to better reflect their usage.
- Updated layer styles with new color tokens.
- Updated text styles with new token names.
- Removal of
lightvariants (in favor of new layer and contextual token sets).
|Design tool||v11||Migration strategy|
|Figma||Update available||The v11 Figma updates are available as new libraries. Teams need to swap out assets from v10 to v11 assets to migrate. The v10 Figma files will not receive a continuous update and will remain permanently on v10.|
|Sketch||Update available||The same Sketch Cloud libraries that were used in v10 have been updated to include the v11 changes. Do not accept the library update until you are ready to work in v11. There are new v10 libraries available for teams that still need them.|
|Adobe XD||Partial update available||Some of the v11 changes have been made in the XD files. It is yet to be determined when all the other changes will be added.|
Migration to the new v11 Carbon libraries will be a manual process from v10. Here are some steps of how to migrate your Text and Color styles from v10 to v11.
- Swap the library from v10 to v11.
- Open the library panel and select the
- Click the
- Take a screenshot of the styles that didn’t swap.
- Visit the
v11Text or Color styles file in
IBM Design Systems.
- Duplicate the file and move it to your team’s space.
- Rename the duplicate file to a temporary name.
- Change the names of the text or color styles that didn’t swap in Step 5 to match the name and organization of v10.
- Swap to this temporary library.
- Update the names back to v11 and swap to the actual v11 library.
- Check nested components for text style overrides.
An actionable variant has been added to the notification component. Actionable notifications allow for interactive elements within a notification, like buttons. Actionable notifications can be styled like an inline or toast notification.
See Carbon’s actionable notification usage guidance for more information.
Popover is a new component we have added to our system. A popover is a layer that appears above all other content on the page and is used to display additional details for specific elements whether it be text or interactive elements.
See Carbon’s popover usage guidance for more information.
The tooltip component has been refactored to use the popover component under the hood to improve accessibility.
See Carbon’s tooltip usage guidance for more information.
Definition and interactive tootips now use the toggletip component to achieve accessibility standards. Toggletip uses the disclosure pattern to toggle the visibility of a popover. This popover may contain a variety of information, from descriptive text to interactive elements. Further guidance on the toggletip component is coming soon.
See Carbon’s toggletip usage guidance for more information.
The tab component variant names are changing. Default tabs will become Line tabs and Container tabs will become Contained tabs. There are three new modifiers—tabs with icons, icon-only tabs, and secondary labels. Additionally, there is a new third alignment option for tab that allows for auto-widths where each tab size is determined by the label length.
See Carbon’s tab usage guidance for more information.
UI shell Updated
The UI shell is now themeable and has been updated to use inline theming. The UI shell uses Carbon theme tokens instead of component specific tokens and the color will follow each themes styles.
All size properties for components have been renamed to be more consistent with the pixel/rem value that it is paired with.
|Size||Height (px / rem)|
|Extra small (xs)||24 / 1.5|
|Small (sm)||32 / 2|
|Medium (md)||40 / 2.5|
|Large (lg)||48 / 3|
|Extra large (xl)||64 / 4|
|Double extra large (2xl)||80 / 5|
Type tokens Breaking
The two v10 type sets—Productive and Expressive—have been blended together to work as a unified collection in v11. As a result of this convergence, type token names have been renamed to better define their relationship to one another and reflect its styling.
See Carbon’s typography guidance for more information.
Some tokens now have a compact designation, meaning the only difference it has with the token of a similar name is a variation in line height.
The four body styles stay the same but their names have been updated. The
styles are now simply just
body, while the
short styles are now
Productive and expressive while still a concept used to express different “moments” are no longer used in the type token header names. There are two new classifications—Fixed and Fluid.
Fixed headings, for the most part take the place of what were the v10 productive
headings. The first two v10 expressive headings are also now included in the
fixed type set. They are called “fixed” because they do not change sizes across
breakpoints and always remain a single fixed size. However, the term fixed is
not included in the token name but simply named
Fluid headings take the place of the v10 expressive heading. These headings are responsive and the type styles change size at different breakpoints.