🎨 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 the Angular library in your project, you will need to run the following command using npm:

npm i @mozaic-ds/angular

Or with Yarn:

yarn add @mozaic-ds/angular

📝 Usage

Import styles

Import the styles in styles.scss:

@use '@mozaic-ds/tokens/adeo/theme' as *;
@use '@mozaic-ds/styles/tools/t.font' as *;
@use '@mozaic-ds/tokens' as *;

Brand Presets

Mozaic is a multi-brand design system that can be fully customized to match different brand charters. We provide ready-to-use presets:

• Leroy Merlin: Default preset (automatically configured)
• Adeo: For Adeo Group's internal interfaces and products
• Bricoman: For Bricoman brand interfaces and products

To use a specific preset, replace the first line in your styles.scss:

// For Adeo preset
@use '@mozaic-ds/tokens/adeo/theme' as *;

// For Bricoman preset
@use '@mozaic-ds/tokens/bricoman/theme' as *;

// For Enki preset
@use '@mozaic-ds/tokens/enki/theme' as *;

// Leroy Merlin is default, no need to specify

Font by Brand

Each brand uses a different font:

| Brand | Font | | ------------ | ---------------------------------------------------------------------------------- | | Leroy Merlin | LeroyMerlinSans | | Adeo | Roboto | | Bricoman | Inter |

Update your main stylesheet to import the right font:

@use '@mozaic-ds/styles/tools/t.font' as *;

body {
  @include set-font-family();
}

Using Components

Import and use components in your Angular application:

import { MozButtonComponent } from '@mozaic-ds/angular';

<button moz-button>This is a Mozaic Button</button>

Find the complete list of our components.

All available components are showcased in our Storybook.

📰 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-angular channel on Slack
• 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! (more information below)

✍️ Contributing

Setup the project to start contributing.

// Clone the repo
$ git clone [email protected]:adeo/mozaic-angular.git

// Go to the cloned directory
$ cd mozaic-angular

// Checkout the branch you are working on
$ git checkout <branch name>

// Install dependencies
$ npm install

We're always looking for contributors to help us fix bugs, build features, or help us improve the documentation. If you're intersted check out our Code of Conduct and Contribution Guide.

🧑‍💻 Contributors

Owners

ADEO Design system Team

Maintainer

• Maxime Moiroux
• Baptiste Goulard

📄 Licensing

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

🛠️ Developer workflows

Testing a local build in your app

Link a local build of @mozaic-ds/angular into a consumer Angular application using yalc, which is more reliable than npm link for Angular libraries.

Prerequisites

Install yalc globally (once):

npm install -g yalc

1. Build and publish locally

Run this every time you make changes to the library:

cd /path/to/mozaic-angular
npm run build
yalc publish dist/@mozaic-ds/angular --push

The --push flag automatically propagates the update to all consumer apps that have previously linked this package.

2. Link in your app (once)

cd /path/to/your-app
yalc add @mozaic-ds/angular
npm install

This creates a .yalc/ folder and a yalc.lock file at the root of your app, and updates package.json to point to the local build:

"@mozaic-ds/angular": "file:.yalc/@mozaic-ds/angular"

3. Iterating

After each change in the library, rebuild and push:

cd /path/to/mozaic-angular
npm run build
yalc publish dist/@mozaic-ds/angular --push

Your app's node_modules will be updated automatically.

4. Restore the npm version

When you are done testing locally:

cd /path/to/your-app
yalc remove @mozaic-ds/angular
npm install

.gitignore

Make sure .yalc/ and yalc.lock are excluded from version control in your consumer app:

/.yalc
yalc.lock

Publishing a beta version to npm

Use npm:publishTest to publish a beta build to npm under the beta tag, so it can be tested in a real app without affecting the latest tag.

Important: This script only runs npm publish — it does not build or bump the version automatically.

Workflow

1. Bump the version in projects/mozaic-ng/package.json:

"version": "2.0.60-beta.0"

Use a version higher than the last published one (check npmjs.com or run npm view @mozaic-ds/angular versions --json).

2. Build the library:

npm run build:prod

3. Publish to npm with the beta tag:

npm run npm:publishTest

The package will be available as @mozaic-ds/angular@beta and won't affect consumers pinned to latest.

4. Install in your app:

npm install @mozaic-ds/angular@beta

5. Revert the version bump in projects/mozaic-ng/package.json when you are done (or let the release pipeline set the final version).