Bolt 7 Highlights

The vision for Bolt 7 was built around two core concepts: density modes and color theming. It includes all of the changes necessary to support those new features, and to support planned enhancements that will be rolled out throughout the year.

As an annual major version update, Bolt 7 also includes routine maintenance such as removing deprecated features, and switching the early-access styles available in future theme to be the default.

The migration guide offers step-by-step instructions for consuming this upgrade, based on current usage.

While the migration guide explains what consumers have to change, this article will focus on what consumers can do with the new system.

Bolt 7 adds support for two additional density modes: compact and sparse.

Compact mode shrinks certain spacing between and within components, allowing more elements to fit on the page.

Sparse mode expands the same spacing, which may be preferred in some scenarios for readability.

All of Bolt's components have been updated to apply density-aware spacing where appropriate. In general, vertical spacing is fluid (density-aware) while horizontal spacing is fixed. An exception to this rule is the spacing within elements like Chips and Buttons, which tend to be clustered horizontally in a layout. The horizontal space within those components is also fluid.

Most of Bolt's spacing utility classes now apply fluid spacing as well, except for the ones that apply a horizontal margin. The classes used to apply inline left and right margin apply fixed spacing, independent of density mode.

The concept of Theme Tokens were first introduced back in Bolt 5. Unlike palette tokens, these colors are named by semantic meaning, which makes them more robust against future branding updates or other color value changes.

For version 7, Bolt's Theme Tokens have been updated to closely align with the theme system of Material Design, which will allow for greater alignment across platforms and frameworks.

Additionally, all Bolt components have been updated to use the modern theme tokens internally. This lead to improvements in contextually-aware component styles, and provides support for alternative global themes (ie: dark mode) in the near future.

All of Bolt's Theme Tokens fall into distinct color roles that describe their purpose.

The exact color value of each token might change depending on theme, but roles ensure that they change predictably, in a way that maintains the intended relationship between different colors on the page.

The following example shows how status color roles are used in Notification styles.

Outline color: --bolt-theme-success
Icon color: --bolt-theme-success
Background: --bolt-theme-successContainer
Foreground: --bolt-theme-onSuccessContainer

When styling parts of the page not provided by Bolt, or building your own custom elements, you will likely want to use Design Tokens. In most cases, you should use Theme Tokens for colors, and only use Palette Tokens in cases where it's necessary to reference a specific static color value.

Color roles help determine the most appropriate Theme Token to use when writing custom styles. For example, "Surface" may be used for a background color, with "On Surface" as its foreground color.

Many of the colors that fall under these roles will adjust in response to contextual theming, and all of them are aware of global theming.

By default, Bolt uses a global "light mode" theme. "Dark mode" configuration will be added in a Bolt 7 feature release.

Bolt tokens and styles have already been updated internally as of 7.0 to provide support for upcoming global theme configuration.

In order to use dark mode, consuming apps will need to make sure they are using the dynamic CSS versions of theme tokens, not the static SASS tokens. The SASS version of theme tokens are essentially stuck in "light mode" and will eventually be phased out.

The following example shows how a success notification looks in dark mode compared to light mode, while using the same global theme tokens for both.

As it sounds, global theming affects the entire application at a global level, while contextual theming creates a localized theming context.

The most critical theme tokens exist as both global and contextual variables. For example, link color has a contextual token in addition to the global link color token, to provide accessible links for any background context.

When contextual theme tokens are used within a container that uses one of Bolt's background color classes, they will update based on the color of that background class. This ensures that all Bolt components, as well as custom components using contextual tokens, always have a predictable and accessible appearance

If the element you're styling might be affected by different color contexts, use contextual tokens.

If the element should only be aware of global light/dark theme, and should not change in response to a parent background color, use global theme tokens.

Global theme tokens tend to be applicable when styling an element that has its own container with a solid background. For example, the body of an accordion provides its own surface, and is not affected by the color context of a parent container.

Contextual theme tokens are useful for elements that do not have a built-in surface, and need to provide sufficient contrast with the color of their parent.

For example, the accordion group header sits outside of the accordion surface, therefore its color is based on local context.

In a dark blue background context, the group header text changes from charcoal to white for visibility.

Prior to Bolt 7, consumers were responsible for ensuring components provided sufficient color contrast when using them with a background class.

Now, Button, Chip, and Icon all apply contextually aware color by default, and consumers should only need to review contrast if manually configuring the component's color.

All components have been reviewed for use across various global and contextual theming scenarios, and should work out-of-the-box in all theme conditions. Notable exceptions to this are the Tag and Note components. For Tag, consumers will likely wish to pick their own subset of colors anyway, since the meaning of each color is determined by its particular use case. The status icons used in Note use global status colors, which are the same regardless of background color context, and may not provide sufficient contrast in all cases.

We recommend not using Tag or Note on colored background containers, or at least reviewing the accessibility of color combinations if doing so.

The color of Tabset is now configurable, including a contextual option that matches the parent container.

This essentially allows Tabset to appear transparent, which is especially useful for full-width borderless tabs.

Bolt 7 sets us up to do many more great things this year!

Some of the enhancements that are directly related to Bolt 7 changes include dark mode, more 'auto-' color options, and a few more details related to data-density.

Dark mode will add configuration for a global "dark" theme affecting Bolt's components and styles.

'Auto-' color options will allow consumers to choose hierarchical colors that respond appropriately to theming contexts. For example, Button uses vibrant blue as a primary accent color by default, and adjusts as needed using the "primary" color dictated by the theme. Secondary and tertiary color options would follow similar logic to set an appropriate hierarchical color in each context.

On the data-density front, we plan to add a method for consumers to opt out of responsive typography, locking typography styles to either their smallest or largest setting. Additionally, expanded breakpoints will allow for greater use of screen real estate for power users.

We have many more objectives on our horizon, including:

• Pattern & example pages
• New component build (action menu, divider, card, additional pagination variations)
• Bespoke Nationwide font
• Bolt for M3 (Flutter)
• and more!

For more details on these developments as they unfold, join us for bi-weekly office hours, or reach out using one of our channels.

We always welcome feedback, and look forward to seeing what you build with Bolt.