V10 Releases

v10.0.0

05/02/2025

Release Pull Request

Brand Tokens

System Tokens

• New backdrop token added.

--color-global-system-backdrop-dark: rgba(43, 46, 56, 0.9);

NRMA Help Theme Updates

• Updated accordion and inverse styling.
• Updated divider inverse border color.
• Updated modal styling.
• Updated radio outline styling.
• Updated segmented-control radio styling.
• Updated tab styling.
• Updated checkbox outline styling.

Spacing Tokens

• New spacing utility tokens added.

--spacing-1300: 96px;
--spacing-1400: 112px;
--spacing-1500: 128px;

Checkbox Tokens

• Refactored the token naming convention.
• Tokens grouped into input and label naming conventions
• New outline token variant added.

--checkbox-outline-input-size: 24px;
--checkbox-outline-input-border-width: 2px;
--checkbox-outline-input-outer-background-color: #ffffff;
--checkbox-outline-input-outer-border-color: #121212;
--checkbox-outline-input-inner-border-color: #ffffff;
--checkbox-outline-label-border-width: 1px;
--checkbox-outline-label-border-color: #121212;
--checkbox-outline-label-padding: 1rem 1rem 1rem 3.2rem;
--checkbox-outline-label-background-color: #ffffff;
--checkbox-outline-label-color: #121212;
--checkbox-outline-label-border-radius: 4px;
--checkbox-outline-hover-input-outer-background-color: #ffffff;
--checkbox-outline-hover-input-outer-border-color: #240046;
--checkbox-outline-hover-input-inner-border-color: #ffffff;
--checkbox-outline-hover-label-color: #121212;
--checkbox-outline-hover-label-border-color: #240046;
--checkbox-outline-hover-label-background-color: #efefef;
--checkbox-outline-focus-label-outline: 2px solid #121212;
--checkbox-outline-error-input-outer-background-color: #ffffff;
--checkbox-outline-error-input-outer-border-color: #da0000;
--checkbox-outline-error-input-inner-border-color: #ffffff;
--checkbox-outline-error-label-border-color: #da0000;
--checkbox-outline-disabled-input-outer-background-color: #f0f2f7;
--checkbox-outline-disabled-input-outer-border-color: #909194;
--checkbox-outline-disabled-input-inner-border-color: #909194;
--checkbox-outline-disabled-label-color: #909194;
--checkbox-outline-disabled-label-border-color: #909194;
--checkbox-outline-disabled-label-background-color: #f0f2f7;
--checkbox-outline-checked-input-outer-background-color: #ffffff;
--checkbox-outline-checked-input-outer-border-color: #ffffff;
--checkbox-outline-checked-input-inner-border-color: #240046;
--checkbox-outline-checked-label-color: #ffffff;
--checkbox-outline-checked-label-background-color: #240046;
--checkbox-outline-checked-label-border-color: #240046;

Radio Tokens

• Refactored the token naming convention.
• Tokens grouped into input and label naming conventions
• New outline token variant added.

--radio-outline-input-size: 24px;
--radio-outline-input-border-width: 2px;
--radio-outline-input-outer-background-color: #ffffff;
--radio-outline-input-outer-border-color: #121212;
--radio-outline-input-inner-background-color: #ffffff;
--radio-outline-label-border-width: 1px;
--radio-outline-label-border-color: #121212;
--radio-outline-label-padding: 1rem 1rem 1rem 3.2rem;
--radio-outline-label-background-color: #ffffff;
--radio-outline-label-color: #121212;
--radio-outline-label-border-radius: 4px;
--radio-outline-hover-input-outer-background-color: #ffffff;
--radio-outline-hover-input-outer-border-color: #240046;
--radio-outline-hover-input-inner-background-color: #ffffff;
--radio-outline-hover-label-color: #121212;
--radio-outline-hover-label-background-color: #efefef;
--radio-outline-hover-label-border-color: #240046;
--radio-outline-focus-label-outline: 2px solid #121212;
--radio-outline-error-input-outer-background-color: #ffffff;
--radio-outline-error-input-outer-border-color: #da0000;
--radio-outline-error-input-inner-background-color: #ffffff;
--radio-outline-error-label-border-color: #da0000;
--radio-outline-disabled-input-outer-background-color: #f0f2f7;
--radio-outline-disabled-input-outer-border-color: #909194;
--radio-outline-disabled-input-inner-background-color: #909194;
--radio-outline-disabled-label-background-color: #f0f2f7;
--radio-outline-disabled-label-color: #909194;
--radio-outline-disabled-label-border-color: #909194;
--radio-outline-checked-input-outer-background-color: #ffffff;
--radio-outline-checked-input-outer-border-color: #ffffff;
--radio-outline-checked-input-inner-background-color: #240046;
--radio-outline-checked-label-color: #ffffff;
--radio-outline-checked-label-background-color: #240046;
--radio-outline-checked-label-border-color: #240046;

Modal Tokens

• Added backdrop-background-color token to control the modal overlay styling.

--modal-backdrop-background-color: rgba(43, 46, 56, 0.9);

Divider Tokens

• New inverse tokens added for use on dark backgrounds.

--divider-inverse-border-color: #ffffff;
--divider-inverse-color: #ffffff;

Accordion Tokens

• New inverse tokens added for use on dark backgrounds.

--accordion-inverse-border: 1px solid #f4f2f6;
--accordion-inverse-button-background-color: transparent;
--accordion-inverse-button-color: #ffffff;
--accordion-inverse-button-icon-color: #f6f7fa;
--accordion-inverse-button-hover-background-color: rgba(255, 255, 255, 0.15);
--accordion-inverse-button-hover-color: #ffffff;
--accordion-inverse-button-hover-icon-color: #f6f7fa;
--accordion-inverse-button-focus-background-color: transparent;
--accordion-inverse-button-focus-color: #ffffff;
--accordion-inverse-button-focus-icon-color: #f6f7fa;
--accordion-inverse-button-selected-color: #ffffff;
--accordion-inverse-content-background-color: transparent;
--accordion-inverse-content-color: #ffffff;

Segmented Control Tokens

• New radio variant tokens added.

--segmented-control-radio-background-color: #ffffff;
--segmented-control-radio-border: 1px solid #121212;
--segmented-control-radio-border-color: #121212;
--segmented-control-radio-border-width: 1px solid;
--segmented-control-radio-color: #121212;
--segmented-control-radio-padding: 0.75rem;
--segmented-control-radio-input-size: 24px;
--segmented-control-radio-input-border-width: 2px;
--segmented-control-radio-input-outer-background-color: #ffffff;
--segmented-control-radio-input-outer-border-color: #121212;
--segmented-control-radio-input-inner-background-color: #ffffff;
--segmented-control-radio-hover-color: #383e44;
--segmented-control-radio-hover-border-color: #383e44;
--segmented-control-radio-hover-background-color: #efefef;
--segmented-control-radio-hover-input-outer-background-color: #ffffff;
--segmented-control-radio-hover-input-outer-border-color: #383e44;
--segmented-control-radio-disabled-background-color: #f0f2f7;
--segmented-control-radio-disabled-border-color: #909194;
--segmented-control-radio-disabled-color: #909194;
--segmented-control-radio-disabled-input-outer-background-color: #f0f2f7;
--segmented-control-radio-disabled-input-outer-border-color: #909194;
--segmented-control-radio-disabled-input-inner-background-color: #909194;
--segmented-control-radio-disabled-checked-color: #ffffff;
--segmented-control-radio-checked-color: #ffffff;
--segmented-control-radio-checked-background-color: #383e44;
--segmented-control-radio-checked-border-color: #383e44;
--segmented-control-radio-checked-input-outer-background-color: #ffffff;
--segmented-control-radio-checked-input-outer-border-color: #ffffff;
--segmented-control-radio-checked-input-inner-background-color: #383e44;
--segmented-control-radio-error-checked-input-inner-background-color: #383e44;
--segmented-control-radio-error-checked-input-inner-border-color: #ffffff;
--segmented-control-radio-error-input-outer-background-color: #ffffff;
--segmented-control-radio-error-input-outer-border-color: #da0000;
--segmented-control-radio-block-label-padding: 0.75rem 3rem 0.75rem;

Tab Tokens

• Added tab border-radius token.
• Added tab button text-align token.
• Added tab inactive border-width token.
• Added tab selected border-width, box-shadow and color tokens.
• Added tab content xs tokens.

--tab-border-radius: 12px 12px 0 0;
--tab-button-text-align: center;
--tab-inactive-border-width: 0 0 1px;
--tab-selected-border-width: 0 0 1px 0;
--tab-selected-box-shadow: inset 0px -3px 0px #010c66;
--tab-selected-color: #010c66;
--tab-content-xs-border-width: 1px;
--tab-content-xs-padding: 0 1rem 1rem;

• Added tab inverse tokens.

--tab-inverse-border-color: #d8d8d8;
--tab-inverse-button-color: #ffffff;
--tab-inverse-content-background-color: transparent;
--tab-inverse-content-color: #ffffff;
--tab-inverse-inactive-background-color: transparent;
--tab-inverse-inactive-color: #ffffff;
--tab-inverse-selected-background-color: transparent;
--tab-inverse-selected-color: #ffffff;
--tab-inverse-selected-box-shadow: none;
--tab-inverse-hover-background-color: rgba(255, 255, 255, 0.15);
--tab-inverse-hover-color: #ffffff;
--tab-inverse-icon-color: #008375;

Components

Checkbox Component

• New outline variant added.
• New cols prop added to control grid columns.

View component documentation

Radio Component

• New outline variant added.
• New cols prop added to control grid columns.

View component documentation

Divider Component

• New inverse prop added.

View component documentation

Accordion Component

• New inverse variant added.

View component documentation

Link Component

• Added display: inline-flex to link styling.

.link {
  display: inline-flex;
}

View component documentation

Segmented Control Component

• New radio variant added.

View component documentation

Tab Component

• Added inverse variant added.

• Added config layer override specific to the NRMA help theme to change the tab arrow icons.

View component documentation

Logo Component

• Updated coastline naming to coastline-bank.
• New brands added.
• aant
• australian-military-bank
• bank-first
• bank-of-us
• bcu-bank
• defence-bank
• mystate-bank
• pn-bank

View component documentation

Grid Component

• Extended cols prop to allow for a number or object to be passed in. This will enable more control over columns per viewport.

View component documentation

Column Component

• Extended cols prop to allow for a number or object to be passed in. This will enable more control over columns per viewport.

View component documentation

Assets

Icons

• New core and product icon sets added for the NRMA help theme.

View NRMA help core icons

View NRMA help product icons

Logos

• New aant logo added.
• New australian-military-bank logo added.
• New bank-first logo added.
• New bank-of-us logo added.
• New bcu-bank logo added.
• New defence-bank logo added.
• New mystate-bank logo added.
• New pn-bank logo added.
• Updated coastline logo and changed name to coastline-bank.
• Updated bendigo-bank default and mobile logos.

View logo assets

Fonts

• Updated NRMA and NRMA help theme font help-type
• Renamed help-type font to help-type-web.

• help-type-display heading font renamed to help-type-display-web.

• help-type-text body font renamed to help-type-text-web.

Documentation

Foundations Documentation

• Updated spacing table with new 1300 - 1500 tokens.
• Updated spacing table with missing 1100 and 1200 tokens.

View documentation

Getting Started Documentation

• Updated the copy in the Getting Started > Start Designing page.

View documentation

Radio Block Component

• Fixed icon examples, should be <span> not <p> as the <p> overrides internal text styles.

View component documentation

Figma

• Bugfix: Accordion button height updated from 56px to 50px to align closer to code.

• Bugfix: Divider dotted variant archived due to bug and new variant created.

• Bugfix: Header vertical alignment in viewport sizes less than 1200px corrected to align content to centre.

• Feature: Modal close button hover state added in prototyping.
• Border radius tokens: CSS variables names updated for Dev mode.
• Spacing tokens: CSS variables names updated for Dev mode.
• Typography new styles added for Headings, Headline and Subheadings.

• Typography converted to new styes: Divider, Footer, Header (content placeholders only), Lists, Message, Modal, Price, Progress Loader, Progress Indicator, Toggle Content and Tooltip.