@mozaic-ds/tokens

Mozaic Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development

🎨 Getting started

Adeo Design System is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of Adeo.

Learn more about the vision and guidelines by visiting the main documentation website.

📦 Install

To install mozaic-tokens in your project, you need to run the following command using npm:

npm install --save @mozaic-ds/tokens@latest

If you prefer Yarn, use the following command instead:

yarn add @mozaic-ds/tokens@latest

[!IMPORTANT] If the package @mozaic-ds/styles is already installed in your project, then you don't need to install the @mozaic-ds/tokens package.
The @mozaic-ds/tokens package is a dependency of the @mozaic-ds/styles package, so it is installed automatically when the latter is installed.

📝 Usage

The package @mozaic-ds/tokens gives you access to all the tokens made available by our design system.
This allows you to create code that is robust, easy to maintain and perfectly aligned with our design system guidelines.

This package provides design tokens for the following three formats: CSS, SCSS and JavaScript.

This documentation shows you how to use tokens for each of these formats.

Using tokens in your SCSS projects

SCSS is the main format on which we supply our tokens.
The design system's styles are built using Sass, so tokens in this format are consumed first.

The @mozaic-ds/tokens package exposes several SCSS entry points that can be used in your projects:

Using tokens in your CSS projects

If the SCSS format isn't for you, the @mozaic-ds/tokens package also exposes all the design system tokens in the form of CSS Custom Properties, also known as "CSS variables".

The CSS variable files are located in the following folders in this package:

CSS variable file containing the html.<PRESET-NAME>:root {} selector

Preset	File path
Leroy Merlin	./build/leroymerlin/css/variables.css
Adeo	./build/adeo/css/variables.css
Enki	./build/enki/css/variables.css
Mbrand	./build/mbrand/css/variables.css

CSS variable file containing only the :root {} selector

Preset	File path
Leroy Merlin	./build/leroymerlin/css/root.css
Adeo	./build/adeo/css/root.css
Enki	./build/enki/css/root.css
Mbrand	./build/mbrand/css/root.css

You can use the paths above to create your CSS import paths for these files.

Using tokens in your JavaScript projects

Finally, in addition to the CSS and SCSS formats, the @mozaic-ds/tokens package also gives you access to all tokens in JavaScript format.

To do this, the package exposes JavaScript files in CJS & ESM module format to cover as many use cases as possible.

Variable files in JavaScript format are available in this package via the following paths:

Preset	File path
Leroy Merlin	@mozaic-ds/tokens
Adeo	@mozaic-ds/tokens/adeo
Enki	@mozaic-ds/tokens/enki
Mbrand	@mozaic-ds/tokens/mbrand

You can use the paths above to import the JavaScript module of your choice, depending on the context in which you are using it.

For example:

import adeoTokens from '@mozaic-ds/tokens/adeo'

📰 Changelog

Releases are managed with GitHub Releases, including the changelog for each one.
Access to the Changelog to find out about the detailed changes to each release.

📣 Stay in touch

• Join the #mozaic-support channel on Slack (intern only)
• Join our Workplace group (intern only)

🐞 Bugs and feature requests

Have a bug or a feature request?
Please open an issue and use the template associated with your request.

However, if you are able to contribute and fix bugs, build new features, or help to improve the project documentation, feel free to do it! (more information below)

✍️ Contributing

Your contribution, no matter how big or small, is much appreciated.
Read the Contributing Guide for more information.

🧑‍💻 Contributors

Owners

ADEO Design System Team

Maintainers

• David Martin
• Mohamed Mokhtari
• Trésor Iloyi

📄 Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.