FAQs

• General
• Sass and package management
• Additional resources

General

What are the benefits of Carbon v11 for me as a designer?

• Token names have been updated for easier application. Names are more logical and easier to apply without always having to refer to a guide.

• Nothing visually has changed in any of the components, and so no redesign work is required.

What are the benefits of Carbon v11 for me as a developer?

• CSS grid provides easier implementation of layouts, support for sub-grid, and other features that come along with this new technology.

• CSS custom properties for theming (light mode / dark mode).

• A significant reduction in compile times for most projects with the update to Sass architecture.

• Quality of life updates such as:

  • Consistent component API across the board.
  • Improvements to Sass structure for getting started and productive use experiences.

• New components:

  • Cover a wider variety of use-cases in your product with some of our new components.
  • Easily build our more accessible experiences with our accessibility component primitives.

What are the benefits to my product’s customers?

• Light/dark mode support.
• Faster time to develop new features.
• New components added that can be used instead of being newly developed.
• Accessibility primitives to help build more accessible experiences as early as possible to the development process.
• Faster load times due to smaller bundle sizes.
• New components added that can be used to build off of instead of being newly developed
• Accessibility primitives to help build more accessible experiences as early as possible in the development process

Do I need to update right away? If not, when will we need to update?

• Carbon v11 includes functionality that may be a motivator for migration, but teams can migrate to v11 when they have the bandwidth.

• Teams that are using v10 today can continue to stay on v10 and everything that is implemented will continue to work.

What will the Carbon team be supporting for v10?

• No new functionality will be introduced in v10 after the v11 release.

• We will continue to address high impact bugs that come up for the v10 release after the v11 release.

• We will continue to accept any contributions that look to address issues in the v10 release if we are unable to get to them in time for your product roadmap.

What is the rule for supporting deprecated assets?

• Assets that were deprecated from v9 to v10 will be removed in v11.

• Assets that are deprecated in v10 will remain in v11 and will be removed in v12. While the timeline of v12 has not been set, the team’s intent is for major versions to be at minimum 12 months apart.

Will I need to redesign my product?

• Visually, nothing is changing.

• There are system-side changes that will require changes to design specs and code, like the token names update and inline theming.

• Token names are largely a 1:1 update and very few tokens are keeping their v10 name. This means color tokens will have to be updated across assets.

• We are hoping to be able to provide a script that can make these changes on the code side automatically, however this has not been built or tested yet.

Why rename things instead of leaving things as they are?

• Making these updates now creates a better system user experience and it sets us up for growth and scale so new tokens can fit into the set more easily.

• The new names imply the usage and so will be much easier to apply. For example, text-03 will be text-placeholder.

How big is the effort to migrate from the v10 to v11 Figma kit?

How big is the expected effort to migrate code to v11?

Sass and package management

What packages should I be installing?

@use '@carbon/react';
Copy to clipboard

@use '@carbon/react/scss/components/[componentname]';
Copy to clipboard

What if I want to use a specific theme?

What if I want to do zoned theming or toggle themes?

What if I want to use a custom theme?

@use '@carbon/react/scss/themes' as *;

//overriding theme tokens and adding a custom token
@use '@carbon/react/scss/theme' with (
  $theme: (
    // add a completely new token
    custom-token: #bada44,
    // redefine existing tokens to new values
    text-error: rebeccapurple,
Copy to clipboard

I’m not familiar with sass. How do I learn more?

How do I know what sass modules to include at the top of my files?

What is the “as *” used at the end of some @use statements?

@use '@carbon/react/scss/theme' as *;

.some-class {
  background: $layer;
}
Copy to clipboard

@use '@carbon/react/scss/theme';

.some-class {
  background: theme.$layer;
}
Copy to clipboard

What do I do with my old Feature flags?

@use '@carbon/react' with (
  $css--default-type: true,
  $css--reset: true
);
Copy to clipboard

Additional resources