Mozaic

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 all the native LEROY MERLIN colors with those specific to ADEO.

Here's how to use this feature:

mozaic.config.js

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).

You must create a file mozaic.config.js at the root of your project to use the Adeo preset (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 your local Token Export Path

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

You must define your local token export path to make it easier for you to see and use these tokens. In order 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 files
  },
}

In that way the SCSS will load the customized ones instead of the ones living in the npm package.

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:

The mozaic-tokens:build command

Run directly:

mozaic-tokens-build

Or through a package.json script for example:

...
"scripts": {
  "develop": "mozaic-tokens-build && npm run develop:watch",
}
...

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')

tokensBuild()

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 LeroyMerlin values are overridden by the Adeo Preset.

Tokens customization