Carbon v11 Beta 1

The first public beta for v11

Josh Black
Aug 6 · 4 min read

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

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

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

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

Example of inline theming on a page

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

A grid overlay on a page

To learn more about how to migrate to the new version of our Grid, check out the migration guide for CSS Grid.

Release partners

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

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.

_carbondesign

Carbon is the design system for IBM software products.

_carbondesign

Carbon is the design system for IBM software products. It is a series of individual styles, components, and guidelines used for creating unified UI.

Josh Black

Written by

Building design systems for IBM. Thoughts are my own.

_carbondesign

Carbon is the design system for IBM software products. It is a series of individual styles, components, and guidelines used for creating unified UI.