V9 Releases

v9.0.0

27/11/2024

Brand Tokens

New NRMA Help Theme (3.0)

New NRMA help theme added.

This is a new NRMA theme that exists in Chroma from v9.0.0.

NRMA Help will be the primary NRMA theme moving forward. It incorporates all the new brand updates for NRMA 3.0. The long term goal is to move all platforms to NRMA Help.

When to use?

The NRMA Help theme should be utilised for all re-imagine projects. Implementing this theme will require additional design and development effort, as it significantly differs from earlier versions. Please ensure thorough testing is conducted before applying this theme.

NRMA help theme visual updates

How to use the new theme

<BrandProvider brand="nrma" theme="help" />

NRMA Brand Updates

This NRMA global brand will become our legacy theme eventually. The key updates in this version include the introduction of the Help Type font family, which replaces Graphik across all styles. Additionally, the new supplementary colours will now be available in this theme.

When to use?

This theme will support any platforms that are unable to upgrade to the new, more extensive ‘NRMA Help’ theme such as EP. As the name suggests, this will be a legacy theme. Aside from the updates mentioned and ongoing security updates, this theme will not be further supported or receive additional updates. The ultimate goal is to transition all platforms from this legacy theme to the NRMA Help theme.

NRMA visual updates

Heading and Headline font updated from Graphik to Help Type Display.
Body and Subhead font updated from Graphik to Help Type Text.

/* Previous Values */
--typography-heading-font-family: "Graphik", Helvetica, Arial;
--typography-headline-font-family: "Graphik", Helvetica, Arial;
--typography-body-font-family: "Graphik", Helvetica, Arial;

/* Updated Values */
--typography-heading-font-family: Help Type Display, Helvetica, Arial;
--typography-headline-font-family: Help Type Display, Helvetica, Arial;
--typography-body-font-family: Help Type Text, Helvetica, Arial;

Headline font weight updated from 400 to 500.

/* Previous Value */
--typography-headline-font-weight: 400;

/* Updated Value */
--typography-headline-font-weight: 500;

Primary contrast colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-primary-contrast: #fdfaf9;

/* Updated Value */
--color-foundation-primary-contrast: #f7f1ea;

Primary beside colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-primary-beside: #000a63;

/* Updated Value */
--color-foundation-primary-beside: #010c66;

Primary light colour updated from #DEE7F2 to #D9DBE9

/* Previous Value */
--color-foundation-primary-light: #dee7f2;

/* Updated Value */
--color-foundation-primary-light: #d9dbe9;

Primary lighter colour updated from #F3F5F8 to #F2F3F9

/* Previous Value */
--color-foundation-primary-lighter: #f3f5f8;

/* Updated Value */
--color-foundation-primary-lighter: #f2f3f9;

Primary neutral colour opacity updated from 0.075 to 0.10

/* Previous Value */
--color-foundation-primary-neutral: rgba(3, 57, 139, 0.075);

/* Updated Value */
--color-foundation-primary-neutral: rgba(3, 57, 139, 0.1);

Secondary contrast colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-secondary-contrast: #000a63;

/* Updated Value */
--color-foundation-secondary-contrast: #010c66;

Secondary beside colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-secondary-beside: #fdfaf9;

/* Updated Value */
--color-foundation-secondary-beside: #f7f1ea;

Secondary block colour updated from #E5E389 to #B7B658

/* Previous Value */
--color-foundation-secondary-block: #e5e389;

/* Updated Value */
--color-foundation-secondary-block: #b7b658;

Secondary neutral colour opacity updated from 0.15 to 0.20

/* Previous Value */
--color-foundation-button-secondary-neutral: rgba(238, 236, 186, 0.15);

/* Updated Value */
--color-foundation-button-secondary-neutral: rgba(238, 236, 186, 0.2);

Accent contrast colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-accent-neutral: #000a63;

/* Updated Value */
--color-foundation-accent-neutral: #010c66;

Accent beside colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-accent-beside: #fdfaf9;

/* Updated Value */
--color-foundation-accent-beside: #f7f1ea;

Accent block colour updated from #AADDB8 to #7BA286

/* Previous Value */
--color-foundation-accent-block: #aaddb8;

/* Updated Value */
--color-foundation-accent-block: #7ba286;

Accent neutral colour opacity updated from 0.15 to 0.20

/* Previous Value */
--color-foundation-button-accent-neutral: rgba(237, 244, 240, 0.15);

/* Updated Value */
--color-foundation-button-accent-neutral: rgba(237, 244, 240, 0.2);

New supplementary-1 colour set added

--color-foundation-supplementary-1-lighter: #fff8f7;
--color-foundation-supplementary-1-light: #fbcec1;
--color-foundation-supplementary-1-default: #f9ae97;
--color-foundation-supplementary-1-dark: #ca7d66;
--color-foundation-supplementary-1-darker: #733320;
--color-foundation-supplementary-1-contrast: #010c66;
--color-foundation-supplementary-1-beside: #f7f1ea;
--color-foundation-supplementary-1-neutral: rgba(255, 236, 230, 0.2);
--color-foundation-supplementary-1-block: #dd9782;
--color-foundation-supplementary-1-neutral-solid: #360e03;

New supplementary-2 colour set added

--color-foundation-supplementary-2-lighter: #e6e7f0;
--color-foundation-supplementary-2-light: #cccee0;
--color-foundation-supplementary-2-default: #cccee0;
--color-foundation-supplementary-2-dark: #999ec2;
--color-foundation-supplementary-2-darker: #62689b;
--color-foundation-supplementary-2-contrast: #010c66;
--color-foundation-supplementary-2-beside: #f7f1ea;
--color-foundation-supplementary-2-neutral: rgba(230, 231, 240, 0.2);
--color-foundation-supplementary-2-block: #b3b7da;
--color-foundation-supplementary-2-neutral-solid: #40467a;

Link light colour updated from #DEE7F2 to #D9DBE9

/* Previous Value */
--color-foundation-link-light: #dee7f2;

/* Updated Value */
--color-foundation-link-light: #d9dbe9;

Link lighter colour updated from #F3F5F8 to #F2F3F9

/* Previous Value */
--color-foundation-link-lighter: #f3f5f8;

/* Updated Value */
--color-foundation-link-lighter: #f2f3f9;

Greyscale contrast colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-greyscale-contrast: #fdfaf9;

/* Updated Value */
--color-foundation-greyscale-contrast: #f7f1ea;

Greyscale beside colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-greyscale-beside: #000a63;

/* Updated Value */
--color-foundation-greyscale-beside: #010c66;

Grey 700 and neutral dark updated from #908C8C to #8F8A8A

/* Previous Value */
--color-foundation-neutral-dark: #908c8c;

/* Updated Value */
--color-foundation-neutral-dark: #8f8a8a;

Error contrast colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-error-contrast: #fdfaf9;

/* Updated Value */
--color-foundation-neutral-contrast: #f7f1ea;

Error beside colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-error-contrast: #000a63;

/* Updated Value */
--color-foundation-neutral-dark: #010c66;

Success contrast colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-success-contrast: #fdfaf9;

/* Updated Value */
--color-foundation-success-dark: #f7f1ea;

Success beside colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-success-beside: #000a63;

/* Updated Value */
--color-foundation-success-beside: #010c66;

Information contrast colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-information-contrast: #fdfaf9;

/* Updated Value */
--color-foundation-information-contrast: #f7f1ea;

Information beside colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-information-beside: #000a63;

/* Updated Value */
--color-foundation-information-beside: #010c66;

Warning contrast colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-foundation-warning-contrast: #fdfaf9;

/* Updated Value */
--color-foundation-warning-contrast: #f7f1ea;

Warning beside colour updated from #000A63 to #010C66

/* Previous Value */
--color-foundation-warning-beside: #000a63;

/* Updated Value */
--color-foundation-warning-beside: #010c66;

Text white colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--color-text-white: #fdfaf9;

/* Updated Value */
--color-text-white: #f7f1ea;

Interactive default borderColor updated from #000A63 to #8F8A8A

/* Previous Value */
--color-interactive-default-border-color: #000a63;

/* Updated Value */
--color-interactive-default-border-color: #8f8a8a;

Icon light colour updated from #FDFAF9 to #F7F1EA

/* Previous Value */
--icon-light-color: #fdfaf9;

/* Updated Value */
--icon-light-color: #f7f1ea;

State Brand Updates

New supplementary-1 colour set added

--color-foundation-button-supplementary-1-lighter: #e3f7fc;
--color-foundation-button-supplementary-1-light: #82c0e6;
--color-foundation-button-supplementary-1-default: #3f9ed8;
--color-foundation-button-supplementary-1-dark: #0074ad;
--color-foundation-button-supplementary-1-darker: #0d202b;
--color-foundation-button-supplementary-1-contrast: #121212;
--color-foundation-button-supplementary-1-beside: #ffffff;
--color-foundation-button-supplementary-1-neutral: rgba(255, 255, 255, 0.15);
--color-foundation-button-supplementary-1-block: #82c0e6;

New supplementary-2 colour set added

--color-foundation-button-supplementary-2-lighter: #ffedf1;
--color-foundation-button-supplementary-2-light: #f8bac5;
--color-foundation-button-supplementary-2-default: #f595a6;
--color-foundation-button-supplementary-2-dark: #935964;
--color-foundation-button-supplementary-2-darker: #311e21;
--color-foundation-button-supplementary-2-contrast: #121212;
--color-foundation-button-supplementary-2-beside: #ffffff;
--color-foundation-button-supplementary-2-neutral: rgba(255, 255, 255, 0.15);
--color-foundation-button-supplementary-2-block: #f8bac5;

New supplementary-3 colour set added

--color-foundation-button-supplementary-3-lighter: #ffefe1;
--color-foundation-button-supplementary-3-light: #f9b57e;
--color-foundation-button-supplementary-3-default: #f68d39;
--color-foundation-button-supplementary-3-dark: #945522;
--color-foundation-button-supplementary-3-darker: #311c0b;
--color-foundation-button-supplementary-3-contrast: #121212;
--color-foundation-button-supplementary-3-beside: #ffffff;
--color-foundation-button-supplementary-3-neutral: rgba(255, 255, 255, 0.15);
--color-foundation-button-supplementary-3-block: #f9b57e;

Badge Tokens

New supplementary-1 token set added.
New supplementary-2 token set added.
New supplementary-3 token set added.

Button Tokens

New supplementary-1 token set added.
New supplementary-2 token set added.
New supplementary-3 token set added.

Checkbox Tokens

New font-weight checkbox token added.
Updated font-family & font-size checkbox tokens.

/* Default values */
--checkbox-font-family: "Roboto", sans-serif;
--checkbox-font-size: 16px;
--checkbox-font-weight: 400;

Input Tokens

New input font-weight token added.

/* Default value */
--input-font-weight: 400;

Input Group Tokens

New InputGroup background-color token added.

/* Default value */
--input-group-background-color: #f0f2f7;

Label Tokens

New Label line-height token added.

/* Default value */
--label-line-height: 1.5;

Legend Tokens

New Legend line-height token added.

/* Default value */
--legend-line-height: 1.5;

Radio Tokens

New radio font-weight token added.

/* Default value */
--radio-font-weight: 400;

Radio Block Tokens

New and updated Radio Block tokens: height, fontFamily, fontSize, fontWeight.

/* Default value */
--radio-block-height: 24px;

Segmented Control Tokens

New and updated tokens: fontFamily, fontSize, fontWeight.

/* Default values */
--segmented-control-font-family: sans-serif;
--segmented-control-font-size: 16px;
--segmented-control-font-weight: 400;

Select Tokens

New Select font-weight token added.

/* Default value */
--select-font-weight: 400;

Textarea Tokens

New textarea font-weight token added.

/* Default value */
--textarea-font-weight: 400;

Utility Tokens

border-radius-700 renamed to border-radius-800, value remains 64px.
New border radius tokens added for 40px, 48px, 56px, 72px, 80px, 88px and 96px.

--border-radius-0: 0;
--border-radius-100: 2px;
--border-radius-200: 4px;
--border-radius-300: 8px;
--border-radius-400: 12px;
--border-radius-500: 16px;
--border-radius-550: 24px;
--border-radius-600: 32px;
--border-radius-650: 40px;
--border-radius-700: 48px;
--border-radius-750: 56px;
--border-radius-800: 64px;
--border-radius-850: 72px;
--border-radius-900: 80px;
--border-radius-950: 88px;
--border-radius-1000: 96px;

Assets

New NRMA Fonts

New Help Type Display and Help Type Text font sets added.

Components

Button

New supplementary1, supplementary2, and supplementary3 variants for State.
New supplementary1 and supplementary2 variants for NRMA.

Badge

New supplementary1, supplementary2, and supplementary3 variants for State.
New supplementary1 and supplementary2 variants for NRMA.

Tailwind Configuration

Updated white and black colour references to target the foundation colours.

/* Previous Values */
theme: {
  colors: {
    black: "var(--color-text-black)",
    white: "var(--color-text-white)",
  }
}

/* Updated Values */
theme: {
  colors: {
    black: "var(--color-foundation-neutral-black, #000000)",
    white: "var(--color-foundation-neutral-white, #ffffff)",
  }
}

Added white and black definitions for the textColor object.

textColor: {
  black: "var(--color-text-black, #000000)",
  white: "var(--color-text-white, #ffffff)",
}

View tailwind configuration documentation

Figma

fontSize tokens added to Chroma Component Library (already in code).
fontWeight tokens added to Chroma Component Library (already in code).
New Body typography styles added (to replace Theme Library typography styles).
New fontSize typography styles added to align with Chroma fontSize tokens (replaces body “small” typography classes).
Button icon sizing linked to font variables to adapt to font size, and property names updates to align to code.
Datepicker calendar overall internal padding reduced to align to code.
Alert button icon padding increased from 16px to 24px to align with code.
Bug fix: Radio Block font awesome icon default size increased from 42px to 48px to align with icon component sizing and 8px sizing grid.
Text and Icons updated to typography style using variables for:
- Accordion
- Alert
- Autocomplete
- Checkbox
- Datepicker
- Date Format
- Input
- Input Format
- Input Group
- Label
- Legend
- Link
- Link Button
- Number Plate
- Password
- Radio
- Radio Block
- Segmented Control
- Select
- Tab
- Textarea

v9.0.0​

Brand Tokens​

New NRMA Help Theme (3.0)​

When to use?​

NRMA Brand Updates​

When to use?​

State Brand Updates​

Badge Tokens​

Button Tokens​

Checkbox Tokens​

Input Tokens​

Input Group Tokens​

Label Tokens​

Legend Tokens​

Radio Tokens​

Radio Block Tokens​

Segmented Control Tokens​

Select Tokens​

Textarea Tokens​

Utility Tokens​

Assets​

New NRMA Fonts​

Components​

Button​

Badge​

Tailwind Configuration​

Figma​

v9.0.0

Brand Tokens

New NRMA Help Theme (3.0)

When to use?

NRMA Brand Updates

When to use?

State Brand Updates

Badge Tokens

Button Tokens

Checkbox Tokens

Input Tokens

Input Group Tokens

Label Tokens

Legend Tokens

Radio Tokens

Radio Block Tokens

Segmented Control Tokens

Select Tokens

Textarea Tokens

Utility Tokens

Assets

New NRMA Fonts

Components

Button

Badge

Tailwind Configuration

Figma