Autumn 2026 release notes

Posted 22/04/2026

The purpose of this document is to summarise all of the changes falling under the banner of our "Autumn 2026 Release" and outline what you have to do to update your assets.

The changes

Migration to the GitHub Package Registry (GPR)

nib plans to move entirely off of our @nib and @nib-components orgs in the npm registry by the end of 2026 and so we have made the decision to move all of mesh across now to coincide with the major update to design tokens.

Each package has been published under the @nib-group scope, with a new mesh- prefix in the package name for easier discoverability.

To install these packages you will need to ensure you have appropriate permissions, either from a personal access token or rqp packages auth npm.

You will need to update all references to mesh packages across your repos (typically just your package.json and import statements). A regex find and replace does a decent job of this but be aware that there are other nib npm packages that have not moved. It might be simpler to update all nib package references, and then undo the ones that have not moved.

Find:

@(nib-components|nib)\/([a-z-]+)

Replace:

@nib-group/mesh-$2

Tokens v2

Structural changes

The way that tokens are structured and consumed has been completely overhauled in this release. A focus on performance and bundle size has led to a more modular structure for tokens, with a move to CSS as the primary output format. This has allowed us to remove a number of output formats and reduce the overall size of our token packages.

Loading CSS tokens

The theme no longer loads all tokens for a brand as a JS string to pass to Styled Components. This also allowed us to move the tokenMapping to the actual token repo, rather than the theme package.

Instead, we are exporting CSS files per brand that contain all of the tokens as CSS custom properties. You will need to load these CSS files in your app to use the tokens.

Each brand provides the following CSS files:

• tokens.default.css — contains the default (light mode) tokens. Required by every brand.
• tokens.dark.css — contains the dark mode tokens. Only available for brands that support dark mode (currently only nib).
• tokens.css — a convenience file that includes both default and dark mode tokens. Only available for brands that support dark mode.

If your brand does not support dark mode, import only the tokens.default.css file:

import '@nib-group/design-tokens/common/tokens.css';
import '@nib-group/design-tokens/brand/gu/tokens.default.css';

If your brand does support dark mode (e.g. nib), you must also include the dark mode tokens. You can either import both files separately, or use the combined tokens.css:

import '@nib-group/design-tokens/common/tokens.css'; /* Both light and dark mode tokens in one file */
// or import separately if you prefer
import '@nib-group/design-tokens/brand/nib/tokens.default.css'; /* Default (light) mode tokens */
import '@nib-group/design-tokens/brand/nib/tokens.dark.css'; /* Dark mode tokens */

Or use the combined file:

import '@nib-group/design-tokens/common/tokens.css'; /* Required by all brands */
import '@nib-group/design-tokens/brand/nib/tokens.css'; /* Includes both default and dark mode tokens */

If your project supports multiple brands, you can import the CSS file for each brand as needed. Importantly, you will need to ensure that the CSS file for the active brand is loaded in your app, as the tokens are not namespaced by brand and will conflict if multiple brands' token CSS files are loaded at the same time.

Conceptual changes

Tokens v2 includes a number of conceptual changes, including adopting a multi-dimensional mode approach. The single mode lever has been replaced by sentiment with an additional level of flexibility, prominence which can be set to heighten or lessen the sentiment.

Previously supported modes all have an equivalent sentiment/prominence combination, and the ability to dial up or down the prominence allowing for a much wider range of expression and flexibility in design.

There is a simple mapping for most modes:

• mode="default" = sentiment="default" prominence="default"
• mode="alt" = sentiment="default" prominence="gentle"
• mode="feature" = sentiment="hero" prominence="default"
• mode="sage|sunset|warm" = sentiment="sage|sunset|warm" prominence="default"

New sentiments also added:

• informative
• cautionary
• positive
• negative

There are more levels of prominence available for each sentiment (not all prominence levels are available for all sentiments):

• default
• gentle
• muted
• prominent

Additional sentiments of positive, negative, informative and cautionary have been added to all brands.

The sage, sunset and warm modes for nib have been moved directly to sentiments and similarly have a number of prominence levels to allow for more flexible use of these color palettes across a wider range of use cases.

Dimensional modes

V2 introduces an adjustable spacing scale and container width modes, which can be set at the root of your app or anywhere in your component tree. This allows for much more flexibility in the styling of our components, and allows us to better support a wider range of use cases and applications.

An information-dense application or portal may want to use the condensed spacing and a wider container width, while a more marketing-focused site may want to use the spacious spacing to create more whitespace and a more premium feel.

Spacing mode options include:

• compact
• condensed
• default
• relaxed
• spacious

Container mode options include:

• narrow
• wide
• default

Dark mode support

V2 introduces official support for dark mode in our themes and tokens. Initially, only nib has a dark mode theme configured, but the new token structure allows for easy addition of dark mode themes for our other brands in the future.

Dark mode is completely controlled by the user's system or browser preferences, with no manual override. This means that if a user has dark mode enabled on their device, they will automatically receive the dark mode theme when using our products. There is no way to force dark mode on or off, as we believe that respecting the user's system preferences is the best approach for accessibility and user experience.

Bundling improvements

Given the explosion of possible mode combinations, it was essential that we improve the tree-shaking capabilities of our tokens and theme packages. To this end, we have moved to a sub-path export structure for these packages, which allows consumers to import only the pieces of the theme or token set that they need.

You will now need to import the ThemeProvider from the root of the theme package, and the actual theme for your brand from a sub-path:

import Theme from '@nib-group/mesh-theme';
import nib from '@nib-group/mesh-theme/brand/nib';

Tokens have been similarly split into numerous sub-path exports to allow for more granular imports and better tree-shaking, as well as shifting our primary output format to CSS custom properties which can be imported directly into your app.

Styled Components ThemeProvider gutted

The theme object has been greatly reduced as tokens now handle nearly all of our styling decisions, not the styled-components' ThemeProvider. All that remains is an id and some button css customisations.

All selectors removed, along with the corresponding pieces of the theme object.

Deprecated packages

Some packages have been deprecated and will no longer be maintained or supported. These packages have been removed from the new package list and will need to be removed from your dependencies and imports:

• react-html
• masked-textbox
• password-textbox

Updating your assets

Install new packages and update imports

Ensure you are able to install from the GitHub Package Registry, and update all package references to the new @nib-group/mesh- packages. Take note of the new sub-path exports for themes.

Load token CSS files

Theme no longer loads all tokens for a brand as a JS string to pass to Styled Components. This also allowed us to move the tokenMapping to the actual token repo, rather than the theme package. Instead, we are exporting CSS files per brand that contain all of the tokens as CSS custom properties.

Import the CSS files for the active brand into your app to load the tokens as CSS custom properties. If your brand does not support dark mode, you only need tokens.default.css. If your brand supports dark mode (e.g. nib), you must also include tokens.dark.css, or use the combined tokens.css which includes both. See the Loading CSS tokens section above for details.

Remove theme selectors and update Box props

All selectors have been removed so any color imports will have to be deleted, as well as properties on components like Box that map to theme-based values:

- import {colorBrandBase, colorWarmWhite20, colorWhite, colorDarkest} from '@nib-components/theme';

const App = () => (
-  <Box background="brandBase" foreground="white">
+  <Box sentiment="hero" background="default" foreground="default">
);

See our migration guide for help finding suitable replacements for these selectors.

Update mode props to sentiment and prominence

The mode prop on ModeProvider and Box has been replaced by sentiment and prominence.

default mode

- <Box mode="default">
+ <Box sentiment="default">

alt mode

- <Box mode="alt">
+ <Box sentiment="default" prominence="gentle">

feature mode

- <ModeProvider mode="feature">
+ <ModeProvider sentiment="hero" prominence="default">

Dimensional modes

Additionally, there are now spacing and container modes that can be set on the ModeProvider or Box to control the spacing scale and container width used in that part of the component tree.

<ModeProvider spacing="condensed" container="wide">
  <Box>This box and all children will use the condensed spacing scale and wide container width.</Box>
</ModeProvider>

Component/prop changes

• borderRadius options changed from none, small, standard and full, to zero, small, default, large and full
• Alerts are now driven by the new positive/negative/informative/cautionary sentiments and are visually different to the previous version.
• Card background is now just default meaning if it is the same sentiment as the parent it will have the same background. Distinction between cards and backgrounds can be achieved via different sentiment or prominence values.
• The removal of surface and surfaceProminent background tokens affects a number of components including Card, Alert, Carousel, DatePicker, HeroPanel, InfoBox,ProductCard, SkipLink, Tabs and VillainPanel.
• Border width values changed. - fine removed, thin now 1px
• Container width is now controlled by a mode. The width prop on the Container, and the containerWidth prop on components that have a nested container, now set the container mode. It can no longer be set responsively.
• Default Logo export has a useEffect that checks the user's color scheme preference and serves a different logo for light and dark mode.
• mode prop deprecated on NavLayout, removed on Box and ModeProvider.
• Tag colours may be different across some brands