Tokens customization

Mozaic is first thought to answer to LEROY MERLIN's brand guidelines but customisation is also allowed.

However, we also offer you the possibility to extend Mozaic to meet specific customization needs.

We have set Mozaic to be customisable to meet the needs of LEROY MERLIN's main brand: ADEO.

Indeed, Mozaic natively embeds a preset, allowing to automatically override the native LEROY MERLIN colors with those specific to ADEO.

Good to know

Please, take note of the ADEO colour theme to use this preset.

Here's how to use this feature:

Use the mozaic.config.js file

The file mozaic.config.js allows you to extend the configuration of Mozaic.

You can learn more about this file by reading the dedicated page.

To use the ADEO preset, you must create a file mozaic.config.js at the root of your project (if it does not already exist) and follow these steps:

1 - Set the preset property

In the mozaic.config.js file you must add a preset property and give it adeo as value:


module.exports = {
preset: 'adeo',

2 - Define a local token export path

Using the ADEO preset, Mozaic will generate a series of tokens for you to use in your project.

In order to make it easier for you to see and use these tokens, it is preferable that these tokens be generated directly inside a folder in your project.

Therefore, to achieve this, you must indicate to Mozaic a local export path for the tokens.

To do that, you must add the following code to the mozaic.config.js file in addition to the elements that are already included:


module.exports = {
preset: 'adeo',
tokens: {
localTokensExportPath: './dest/build/', // path to compiled tokens files

Good to know

By setting the localTokensExportPath property in the mozaic.config.js file, you tell Mozaic not only where to generate new tokens, but also that it should use these new tokens when compiling the SCSS files.

Be aware

The definition of the local token export path, using the localTokensExportPath property, is an important step in the use of the ADEO preset, and more generally in the customization of tokens.

Indeed, if you forget to set this property, new tokens will be generated directly inside the @mozaic-ds/tokens package and this can cause many side effects in your project.

3 - Compiling tokens

Great! You are about to be able to use the ADEO preset, but you still have one last step to take: Compiling tokens.

You have two options to compile tokens:

3.1 - The mozaic-tokens-build command

Run the mozaic-tokens-build command directly:

npx mozaic-tokens-build

Or through a package.json script for example:


"scripts": {
"tokens:build": "mozaic-tokens-build"

3.2 - Using the js function

If you want to trigger the tokens build inside a node script, you can use the function provided by Mozaic:

const tokensBuild = require('@mozaic-ds/tokens/tokensBuild')

4 - It's ready!

When triggering either the command or the function, you should see a list of messages looking like this logging into the console:

Property Value Collisions:
Collision detected at: color.primary-01.100! Original value: #EAF3E2, New value: #000

This is a sign that everything is working properly and that the LEROY MERLIN values are overridden by the ADEO preset. Congratulations!