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

📦 Install

To install this library in your project, you need to run the following command using npm:

npm install --save @mozaic-ds/tokens

If you prefer Yarn, use the following command instead:

yarn add @mozaic-ds/tokens

[!CAUTION] 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

This package 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, JavaScript and Flutter.

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 proposed first.

The package exposes the following SCSS entry points that can be used in your projects:

| Preset | File path | Notes | | ---------------- | ------------------------------- | ----------------------------------------------------------------- | | Leroy Merlin | @mozaic-ds/tokens | Exposes all tokens in SCSS format for the Leroy Merlin preset | | Adeo | @mozaic-ds/tokens/adeo | Exposes all tokens in SCSS format for the Adeo preset | | Brico Center | @mozaic-ds/tokens/bricocenter | Exposes all tokens in SCSS format for the Brico Center preset | | Mbrand | @mozaic-ds/tokens/mbrand | Exposes all tokens in SCSS format for the Mbrand preset |

Using tokens in your CSS projects

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

CSS variable files are exposed via the following entry points:

| Preset | File path | Notes | | ---------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | Leroy Merlin | @mozaic-ds/tokens/theme | Generates a root.css file with a :root {} selector containing tokens in variable CSS format for the Leroy Merlin preset. | | Adeo | @mozaic-ds/tokens/adeo/theme | Generates a root.css file with a :root {} selector containing tokens in variable CSS format for the Adeo preset. | | Brico Center | @mozaic-ds/tokens/bricocenter/theme | Generates a root.css file with a :root {} selector containing tokens in variable CSS format for the Brico Center preset. | | Mbrand | @mozaic-ds/tokens/mbrand/theme | Generates a root.css file with a :root {} selector containing tokens in variable CSS format for the Mbrand preset. |

[!IMPORTANT] The root.css files generated do not contain the entire set of tokens, in order to preserve the integrity of the design system. So, unlike SCSS files/entry points, files containing CSS variables contain only the colour, spacing and font tokens, but none of the primitive tokens or components. You can find out more by reading this part of the documentation, which explains the difference between presets and themes.

Using tokens in your JavaScript projects

Finally, in addition to the SCSS and CSS formats, the 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 | | Brico Center | @mozaic-ds/tokens/bricocenter | | 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
• Follow our KEYS page

🐞 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!

✍️ 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.