Skip to main content

V8 Releases

v8.0.0​

30/10/2024
Release Pull Request

Brand Tokens​

Global Tokens​

New global colour tokens added.

  • supplementary-1
  • supplementary-2
  • supplementary-3
Example​
--color-global-brand-supplementary-1-50: #fdfdfd;
--color-global-brand-supplementary-1-100: #f9f9f9;
--color-global-brand-supplementary-1-200: #f3f3f3;
--color-global-brand-supplementary-1-300: #ebebeb;
--color-global-brand-supplementary-1-400: #e5e5e5;
--color-global-brand-supplementary-1-500: #e0e0e0;
--color-global-brand-supplementary-1-600: #bebebe;
--color-global-brand-supplementary-1-700: #898989;
--color-global-brand-supplementary-1-800: #5a5a5a;
--color-global-brand-supplementary-1-900: #2d2d2d;
--color-global-brand-supplementary-1-950: #0b0b0b;

Foundation Tokens​

New foundation colour tokens added.

  • supplementary-1
  • supplementary-2
  • supplementary-3
Example​
--color-foundation-supplementary-1-lighter: #fdfdfd;
--color-foundation-supplementary-1-light: #ebebeb;
--color-foundation-supplementary-1-default: #e0e0e0;
--color-foundation-supplementary-1-dark: #898989;
--color-foundation-supplementary-1-darker: #2d2d2d;
--color-foundation-supplementary-1-contrast: #121212;
--color-foundation-supplementary-1-beside: #ffffff;
--color-foundation-supplementary-1-neutral: rgba(255, 255, 255, 0.15);
--color-foundation-supplementary-1-block: #ebebeb;
--color-foundation-supplementary-1-neutral-solid: #3e3e3e;

Button Tokens​

New button colour tokens added.

  • supplementary-1
  • supplementary-2
  • supplementary-3
Example​
--color-foundation-button-supplementary-1-lighter: #fdfdfd;
--color-foundation-button-supplementary-1-light: #ebebeb;
--color-foundation-button-supplementary-1-default: #e0e0e0;
--color-foundation-button-supplementary-1-dark: #898989;
--color-foundation-button-supplementary-1-darker: #2d2d2d;
--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: #ebebeb;

New button size tokens added.

--button-size-xs-font-size: 1rem;
--button-size-xs-padding: 0 0.5rem;
--button-size-xs-height: 2rem;
--button-size-sm-font-size: 1rem;
--button-size-sm-padding: 0 0.75rem;
--button-size-sm-height: 2.25rem;
--button-size-md-font-size: 1rem;
--button-size-md-padding: 0 1rem;
--button-size-md-height: 2.5rem;
--button-size-lg-font-size: 1rem;
--button-size-lg-padding: 0 1.25rem;
--button-size-lg-height: 2.75rem;

Border Tokens​

New border colour tokens added.

--color-border-supplementary-1: #e0e0e0;
--color-border-supplementary-1-light: #ebebeb;
--color-border-supplementary-2: #e0e0e0;
--color-border-supplementary-2-light: #ebebeb;
--color-border-supplementary-3: #e0e0e0;
--color-border-supplementary-3-light: #ebebeb;

Text Tokens​

New text colour tokens added.

Example​
--color-text-supplementary-1: #e0e0e0;
--color-text-supplementary-1-light: #ebebeb;
--color-text-supplementary-2: #e0e0e0;
--color-text-supplementary-2-light: #ebebeb;
--color-text-supplementary-3: #e0e0e0;
--color-text-supplementary-3-light: #ebebeb;

Background Tokens​

New background colour tokens added.

Example​
--color-background-supplementary-1: #e0e0e0;
--color-background-supplementary-1-light: #fdfdfd;
--color-background-supplementary-2: #e0e0e0;
--color-background-supplementary-2-light: #fdfdfd;
--color-background-supplementary-3: #e0e0e0;
--color-background-supplementary-3-light: #fdfdfd;

Components​

<Button />​

  • Button size prop has new brand tokens added to control the padding and font-size.

View button documentation
<Modal />​
View modal documentation
<Alert />​

  • Added borderWidth and borderRadius tokens to the Alert component as well as borderColor tokens to the Alert variants in preperation for the NRMA 3.0 updates.

  • Added border-width and border-radius attributes to the Alert css class, border-color attributes to the Alert variants css classes and an .alert--banner class in preparation for the NRMA 3.0 updates.

  • Added a banner prop to the Alert component to allow for the alert--banner class to be applied to the Alert component and updated the docs with an example of how to use the banner prop.

View alert documentation
<Badge />​

  • New variants added:

    • outline
    • outlineInverse
    • text
    • textInverse
badge component View badge documentation
Tailwind Configuration​

  • New supplementary colour tokens added to the tailwind configuration.

View tailwind config documentation

Assets​

NRMA Logos​

  • logo-alt-1.svg renamed to logo-alt-3.svg.
  • New logo-alt-1.svg dark and light logo added.
  • New logo-alt-2.svg dark and light logo added.
  • New logo-alt-4.svg dark and light logo added.
View nrma alternative logo documentation

NRMA Logo Alt 1​

nrma logo alt 1

NRMA Logo Alt 2​

nrma logo alt 2

NRMA Logo Alt 3​

nrma logo alt 3

NRMA Logo Alt 4​

nrma logo alt 4

Documentation​

Assets​

  • New Logos subsection added to the assets documentation.
  • New page added to the logos subsecton IAG Direct Brands.
  • New page added to the logos subsecton Partner Brands.
  • New page added to the logos subsecton Alternate Logos.
Logos documentation

Brand Exploration​

  • Colour swatches added to the brand exploration page.
Brand exploration documentation

Brand Colours​

  • Colour documentation updated to display colour swatches.
  • Colours separated into tabs.
  • New supplementary colour documentation added.
Brand colour documentation

System Colours​

  • Colour documentation updated to display colour swatches.
  • Colours separated into tabs.
System colour documentation

Text Colours​

  • Colour documentation updated to display colour swatches.
  • Colours separated into tabs.
Text colour documentation

Figma​

  • Link Button variant added.

  • Button height updated to pull theme token instead of global in order to recognise brand overrides.

  • NRMA small link bold font updated to include missing underline.