Skip to main content

V6 Releases

v6.2.0​

Released: 23/07/2024

Release Pull Request

Components​

  • <Modal /> added brandTheme prop to enable brand specific themes via the internal <BrandProvider /> component.

v6.1.1​

Released: 17/07/2024

Release Pull Request

Components​

  • <Modal /> bugfix close (x) button not displaying correctly due to css inheritance issue.

v6.1.0​

Released: 10/07/2024

Release Pull Request

Assets​

Logo only Brands

  • New brand logos sets added for:

    • Australian Mutual Bank
    • Coastline
    • Community First Bank
    • Horizon Bank
    • Move Bank
    • Queensland Country Bank
    • Regional Australia Bank
    • Summerland Bank
    • The Capricornian
    • The Mutual Bank

Components​

  • <InputFormat /> onChange 2nd argument was returning the formatted value instead of the raw string.

  • <Logo /> has additional brands available which are listed in the assets section for the release above.

  • <Alert /> bugfix <Icon /> component dependency

Documentation​

  • Updated the <InputFormat /> docs to include the 2nd raw value argument from the onChange callback.

  • Added new section for the <Logo /> docs to display 'logo only brands'

v6.0.1​

Released: 01/07/2024

Release Pull Request

Components​

  • CHR-4120: Added missing dependency to <Tooltip /> .

  • CHR-4116: Fixed Typescript type for useBrandProvider hook.
  • CHR-4153: Added @types/react as peer dependency

Documentation​

  • Fixed syntax error in Alert example which was causing it to not render.

  • Added v6 release notes link to the release notes landing page.

  • Fixed className attribute in some docs pages that had incorrectly been set as class

  • Updated the Chroma Releases page to use a dynamic version, replacing the hard coded v5 value to expand by default.

  • Updated order of releases in the Relase Notes landing page and Chroma Versions page.

6.0.0​

v6.0.0​

Released: 12/06/2024

Release Pull Request

This is a visual breaking release for NRMA and WFI brands.

NRMA Brand Updates​

NRMA Visual Changes

Brand Tokens​

Colours​

  • primary colour updated from #000E82 to #010C66
  • secondary colour updated from #0133AD to #D7D667
  • accent updated from #DFF2FF to #91BF9E
  • interactive and link colour updated from #0133AD to #010C66
  • link inverse colour updated from #FFFFFF to #FDFAF9

  • primary, secondary, accent, interactive and link colour sets updated to reflect change

  • error colour updated from #BF0000 to #A93532
  • success updated from #0C8543 to #186336
  • information updated from #298194 to #257688
  • warning updated from #C6501B to #C54B14

  • error, success, information and warning colour sets updated to reflect change

  • contrast token updated from #FFFFFF to #FDFAF9
  • beside token updated from #222222 to #000A63
  • grey and neutral colours updated to new neutral tones

  • heading and headline typography colours updated from #00084E to #010C66

  • body and subheading typography colours updated from #33394D to #010C66

  • white text colour updated from #FFFFFF to #FDFAF9
  • black text colour updated from #222222 to #010C66
  • light text updated from #3B3939 to #343D85
  • icon colour updated from #000E82 to #010C66

Typography​

Headline​
  • font weight updated from 300 to 400
  • font family updated from Tiempos to Graphik
  • font size at lg viewport updated from 42px to 36px
  • line height updated from mixed to 1.3
Headline Compact​
  • font size at sm viewport updated from 30px to 28px
  • font size at lg viewport updated from 36px to 32px

Box Shadow​

  • Colour updated from rgb(0, 14, 130) to rgb(72, 70, 69)

Components​

Accordion​
  • border updated from grey.600 to neutral.dark

  • button hover background colour updated from accent.light to primary.neutral

Badge​
  • default text colour updated from neutral.white to text.white

  • inverse background colour update from neutral.white to neutral.light

  • lighter variants text colours updated from neutral.black to typography.body

Button​
  • CTA-3 updated from secondary to accent
  • border widths updated from 1px to 2px
Button group​
  • margin right update from 8px to 16px
  • text and link colour updated from #FFFFFF to neutral.lighter
Input​
  • backgrounds updated from #FFFFFF to #FDFAF9

  • light background colour updated from neutral.white to neutral.light

Icon​
  • weight updated from 300 to 900 (solid)
  • width updated from 93px to 217px
  • xs width updated from 52px to 126px
Label​
  • font weight updated from 700 to 500
Legend​
  • font weight updated from 700 to 500
Tab​

  • inactive background colour updated from accent.lighter to primary.light

  • selected background colour updated from neutral.white to neutral.light

  • border colour updated from grey.600 to neutral.dark

  • contact background colour updated from neutral.white to neutral.light

Assets​

Logo​

  • All logo files have been updated

Favicon​

  • All favicons have been updated

WFI Brand Updates​

WFI Visual Changes

Brand Tokens​

Colours​

  • primary colour updated from #00665B to #006C67
  • secondary colour updated from #B6BA05 to #F0B311
  • accent updated from #C5C5C5 to #F7901E
  • interactive colour updated from #00665B to #006C67
  • link colour updated from #2163DE to #006C67

  • primary, secondary, accent, interactive and link colour sets updated to reflect change

  • error.lighter colour updated from #FDF2F2 to #FDEFED
  • error.dark colour updated from #830000 to #AC0606
  • error.block colour updated from #AE0000 to #AC0606
  • grey and neutral colours updated to new neutral tones
  • heading typography colours updated from #00665B to #323232
  • headline typography colours updated from #00665B to #006C67

  • body and subheading typography colours updated from #121212 to #323232

  • icon colour updated from #121212 to #006C67

Typography​

heading and headline​
  • font weight updated from 600 to 700
  • font sizes updated
  • line heights updated

Components​

Autocomplete Container​
  • autocomplete-container now clears if the value is set to ""
Badge​
  • border radius updated from 4px to 56px
Button​
  • border radius updated from 0px to 8px
Input​
  • border radius updated from 4px to 8px
Icon​
  • weight updated from 900 to 400 (regular)
Logo​
  • width updated from 126px to 329px
  • height updated from 66px to 48px
  • xs width updated from 98px to 68px
  • xs height updated from 52px to 48px

Assets​

Logo​

  • All logo files have been updated

Favicon​

  • All favicons have been updated