Solvedcarbon 2021 Release Proposals

This planning issue is currently a WIP. Everything listed here is subject to change

This umbrella issue is going to be organized into multiple topics. Each topic refers to a proposed change to our ecosystem of packages that will be shipped in our Q2 2021 release. Topics can relate to several packages, or just one, and should have an accompanying discussion linked at the bottom of the section.

Overview

Bringing in IBM Plex

Status: Proposal

Currently, we offer support for a handful of font faces (Sans, Mono, Serif) and a handful of weights (light, normal, semibold). We also offer a way for these fonts to be loaded easily through Google Fonts by default.

However, it seems like the usage for IBM Plex has grown broadly to include the following use-cases:

• Able to include different fonts from: http://github.com/ibm/plex for internationalization
• Able to leverage the Variable Font as opposed to Sans plus a variety of weights
• Able to bring in multiple weights as opposed to our limited set

Discussion Link: #7531
Planning Issue: TODO

Packages impacted

• carbon-components
• @carbon/type
• @carbon/elements

Links & Resources

• IBM Plex on GitHub
• Example with Inter UI

Color tokens update

Updates to the component color tokens with two main objectives:

1. Make token names more user-friendly by applying usage specific names in order to help users more easily understand what the token is used for and when/where to apply it without having to frequently reference the usage guide.
2. Better account for the background layering modal. At the moment we only account for two layers and it needs to account for at least three. Third layer stacking currently breaks in the dark themes. See discussion post for more details
   • There are two possible solutions to solve this: creating a nested solution with each theme (proposal 1) or implementing inline theming (proposal 2)

Links and resources:

• Proposal 1 token list Color sets
• Proposal 2 token list Inline theming

Packages impacted:

• carbon-components
• carbon-elements

Discussion Link: #7743
Planning Issue: #8148

Rename the size props in components

Currently size in component code are:

But should be:

• Small: 32px
• Medium/default: 40px
• Large: 48px

With potential to add:

• XS: 24px
• XL: 64px

Packages impacted:

• carbon-components
• carbon-components-react

Combine spacing + layout token scales

There is little value in having two distinct spacing and layout scales. It could easily all be one scale. Need to look at adding a few larger scale steps as well.

Packages impacted:

• carbon-components
• carbon-elements

CSS Grid Support

Our grid implementation uses flexbox as the underlying layout mechanism for teams to achieve 12/16 column layouts. As we look towards dropping support for IE11 in our next release, it would make sense for us to provide first-class support for CSS Grid.

Packages impacted:

• carbon-components
• carbon-components-react

Planning Issue: TODO