v5 Releases
v5.1.0
In this release, our focus has been on enhancing the documentation and adding some new Typography styles.
The Headline and Subheading tokens have been added to the brand-tokens package and currently the only brand that takes advantage of these is NRMA. Additional brands may be updated to use these tokens in the future. The new Headline and Subheading styles can be seen on the Typography page.
For the documentation we have introduced a new Foundations section to the side navigation, where the Colours section now resides as a subsection. Additionally, a Typography page has been added, alongside other utility styles. Our Getting Started section has seen expansion to encompass Accessibility, Brands and Tokens, with dedicated pages tailored for both Designers and Developers. Guidance on extending Chroma has also been added to our Guides section. Furthermore, we've streamlined the component page URLs, significantly reducing them to a more concise format.
Brand Assets
- Added new webfont "Tiempos".
Brand Tokens
- Added new typography tokens and classes for `headline`, `headline-compact` and `subheading`.
- Added new `tertiary` typography tokens to allow for brands to pass in additional fonts
- Updated the default h1, h2, h3, h4, h5, h6 line-heights across all brands
- Updated `nrma` brand tokens to include a new tertiary font (Tiempos), also heading line-height overrides
For more information view the typography overview page.
Documentation
- Updated Typography page with new Headline, Headline Compact and Subheading Typography styles.
- Added Conditional Alert warning component which shows when the user is not on the current stable version of the docs with a link to the current.
- Migrated the About Chroma page from the product site to`/docs/getting-started/about`
- Migrated the Start Developing from the product site to`/docs/getting-started/start-developing`
- Migrated Brands in Chroma page from product site to`/docs/getting-started/brands`
- Migrated the Start Designing page from the product site to`/docs/getting-started/designing`
- Migrated Accessibility page from the Product site to`/docs/getting-started/accessibility`
- Updated links on the Homepage and Getting Started pages to point to the new docs locations
- Added Colours overview page and moved Colours section to new Foundations category `/docs/foundations/colours`
- Migrated the Foundations - Typography page from the product site to a new Foundations section, `/docs/foundations/typography`
- Updated Component slugs in the docs to be cleaner urls:
- Old component url structure: `/5.0.1/chroma/docs/chroma/pages/Components/modal/`
- New component url structure: `/5.0.1/chroma/docs/components/modal/`
Figma
- List icon example added
- boxShadow styles added to Chroma Component Library as variable styles
- Header boxShadow linked to Component Library style to enable theme switching.
v5.0.0
v5 is about aligning all the versioning across brand tokens, components and assets to ensure 100% compatibility.
We have consolidated our code repositories into a unified monorepo, a strategic measure aimed at facilitating seamless updates and versioning for the Chroma team.
Every release will now encompass a comprehensive snapshot of the design system code, inclusive of documentation which enables users to reference historical versions of the documentation.
Brand Tokens, Brand Assets, and Components will be assigned a unified version number, reinstating the capability for developers to install components either as a consolidated package or as individual component packages directly from Nexus.
Moving forwrd each release will include a comprehensive list of changes and additions to the design system listed under their respective sections such as Brand Tokens and Components.
Why v5?
What is the problem v5 will solve?
v5 solves the confusion around versioning and compatibility.
Prior to v5 all components were independently released and versioned which made it difficult to know what versions of the components are compatible with which version of the brand tokens. Even trying to understand what the latest version of components are to use was hard to communicate.
This was creating confusion around versioning and also made it difficult to ensure compatibility for each component release we made.
Pre v5 problem
// package.json with so many packages and different versions
"devDependencies": {
"@iag/chroma-react-ui.accordion": "1.0.17",
"@iag/chroma-react-ui.button": "2.1.3",
"@iag/chroma-react-ui.form-group": "0.0.9",
"@iag/chroma-react-ui.input": "2.0.4",
etc...
}
// application with so many imports
import { Accordion, AccordionItem } from "@iag/chroma-react-ui.accordion";
import { Button } from "@iag/chroma-react-ui.button";
import { FormGroup } from "@iag/chroma-react-ui.form-group";
import { Input } from "@iag/chroma-react-ui.input";
v5 Solution
// package.json with a single package version
"devDependencies": {
"@iag/chroma-react-ui.components": "5.0.0",
}
// application with just one import location
import {
Accordion,
AccordionItem,
Button,
FormGroup,
Input,
} from "@iag/chroma-react-ui.components";
How does v5 solve this problem
v5 solves this by aligning all versioning to a set numbering. This means that the v5 releases will use v5 components, v5 tokens and v5 assets. This will reduce confusion around versioning and ensure a more compatible release for applications to use.
v5 Release
------------------
|- v5 components
|- v5 brand tokens
|- v5 assets
|- v5 documentation
|- v5 figma files
Components
No changes have been made to the component api's which means they are backwards compatible with previous versions of bit components.
A bundled package is now available
All components are now available as part of a single bundled package to make upgrading easier.
npm install @iag/chroma-react-ui.components
Individual components can still be used
You can also still use each component as a separate package, however we recommend the bundled approach which makes it easy to update and ensure compatibility.
npm install @iag/chroma-react-ui.components.button
What do I need to do in order to start using v5?
There is an install guide available for more information.
For existing applications there are some helpful guides available in order to upgrade to v5.
You will only need to update your current .npmrc registry.
// Remove this
@iag:registry=https://nexus3.auiag.corp/repos/repository/chroma/
// Add this (if you don't already have it)
registry=https://nexus3.auiag.corp/repos/repository/iag-npm-all/
Documentation
We have taken the decision to move from Storybook to Docusaurus, a tool that enables us to create a more complete documentation experience. It will allow us to create a more consistent and cohesive experience for our users, as well as provide a more streamlined workflow for our team. Over time this documentation will become the primary source of truth for our design system and remove the confusion of having multiple sites.
Figma
Figma files will be updated to v5 to align with code
Figma assets will be labelled as per the major version. Only the code repositories will update with semantic versioning. In this update Chroma Figma files will be changing their version number from v2 to v5 to align with the latest Code version. They will be the exact same Figma files, with just a name change.
Chroma Figma files always align to the latest Code version. Aligning the version numbers will allow both designers and developers to be clearer on which Chroma assets are compatible and easily identify where updates may be required to align with the latest.
View Chroma Figma files.(opens in new window)