Carbon v11 Beta 1
The first public beta for v11
We’re excited to announce the release of our first official beta for Carbon v11! This beta focuses on bringing together the biggest updates for styling that we have planned for this release. Updates to Design Tokens, Sass Modules, CSS Grid, and more are now available through several new packages that you can try out today.
If you have the time to give us any feedback for this release, we’d love to hear from you on GitHub Discussions! Feedback is highly appreciated as it helps us to ensure the stability of the final release.
To get started, check out the first draft of our official Migration Guide. Read more about each feature or find out how to join our Release Partners program below.
Package changes
In v10, if you are using carbon-components-react you probably had to install several packages to get up and running. In v11, we’re hoping to reduce the number of packages that most teams need to install to one: @carbon/react .
The Beta 1 release includes the first public release of two packages that are critical to this strategy: @carbon/styles and @carbon/react.
To learn more about updating this package or find official package docs, check out the migration guide for developers.
Updating
We know that changing packages is a significant change when moving between versions. When going through the migration process, it is tedious to manually update import paths to common packages used today like carbon-components, carbon-components-react, or @carbon/icons-react .
While this tooling is not available in the Beta 1 release, our goal is to automate much of this through tooling. We would love to hear feedback from you on common paths this tool should automate updating over on GitHub Discussions.
Design Tokens
When reviewing our color token naming strategy, we realized that our terminology and naming conventions can be a little confusing. The Beta 1 Release allows you to try out a new set of color tokens that was crafted with clarity in mind.
To learn more about these changes, visit our initial draft guidance for color here. You can also view a table of all token updates over on GitHub.
The Beta 1 release also updates all components in the system to use this new token set. We also made sure to include a compatibility theme to help teams migrate who are using the existing set of tokens.👀
To learn more about the changes to our design tokens, check out the migration guide for color tokens: design, development
Inline Theming
Inline theming is a new feature introduced in the Beta 1 Release. This technique allows you to apply different themes to different parts of your UI. It allows themes to be nested within each other without needing custom styles or overrides. In product, it is common to use inline theming to apply a contrasting theme to a UI shell and side panels.
This new functionality was made possible by our move to CSS Custom Properties. It allows you to easily and efficiently apply themes to different parts of the page without creating separate stylesheets or duplicating CSS.
To learn more about inline theming, visit our initial draft for guidance here.
CSS Grid
The Beta 1 Release includes an implementation of CSS Grid as an alternative to the flexbox-based implementation that exists in v10. This allows teams to use CSS Grid features that they know and love with the grid from Carbon and also includes support for grid nesting.
To learn more about how to migrate to the new version of our Grid, check out the migration guide for CSS Grid.
Release partners
As the team works towards this 2021 release, we want to engage with teams using Carbon to try out parts of our release to make sure that we’re heading in the right direction.
If you’re interested in previewing and giving feedback on any of the work described here or want to help influence our direction, check out our Release Partner Program over on GitHub.
What’s coming next
We will have one more beta release before we start shipping our Release candidates for v11. This next release focuses on all major updates that we are planning on making to our React components.
If you’d like to help us out along the way, definitely join our release partner program. Otherwise, be on the lookout for the next release candidate in the next couple of months!
Josh Black is a Software Engineer based out of Austin, TX working on the Carbon Design System. The above article is personal and does not necessarily represent IBM’s positions, strategies, or opinions.
Questions or comments about Carbon? Reach out at carbon@us.ibm.com or tweet us @_carbondesign.
