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.
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:
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:
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.
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:
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')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!