Colours

Usage
ADEO Theme
Design
Migration

With the new accessible colours, we've added this temporary page to assist designer and developer with new colours value.

Warning

The new colours will be available from the next major version @mozaic-ds/style@2.0.0

A release candidate version is available @mozaic-ds/style@2.0.0.rc.0.

Motivation

Following the new a11y rules set by the group. The design system adopt new primary colours.

Migration guide

While it looks like a lot has changed, the migration should be transparent with the upgraded version. The design system is used in many different context and technologies. If we don't cover your use case, please feel free to contact the team.

Important

There is two version of the documentation to help you out:

Using Mozaic style package

  • Replace all hexadecimal code by the the correct scss variable.

  • In your package.json file, update @mozaic-ds/style & @mozaic-ds/tokens to the 2.0.0-rc.0 version

  • Ask your UX or Product designer for visual review

Using Mozaic JS library

This section is for Freemarker, Vue/Vue3, Svelte/Web-components and React libraries. For those who also consume the style, please make sure you've followed the previous part by replacing all hexadecimal colour from mozaic by their new value.

  • Replace all hexadecimal colour from mozaic by their new value

  • Upgrade the library to the latest release-candidate version. (checkout our dedicated channels for the number version)

  • Ask your UX or Product designer for visual review

Using specific techno (mobile)

This section is for Flutter, IOS and Android libraries.

  • Replace old colours in your theme file (dart, swift or xml) by the new value

  • Ask your UX or Product designer for visual review