Installation

Mozaic for developers

We put at your disposal several packages, which will allow you to use all aspects of Mozaic in your project.

Note that all packages associated with the Mozaic project, are public repositories on NPM and are grouped under the scope @mozaic-ds/**.

The installation of a Mozaic package is done like a classical installation of an NPM package:

npm

yarn


npm install --save @mozaic-ds/<name-of-your-package>

Installing Mozaic packages require node v18+

The Mozaic packages which may interest you are the following:

@mozaic-ds/styles: source .scss files
@mozaic-ds/tokens: tokens json sources as well as compiled ones
@mozaic-ds/web-fonts: the webfonts used by Mozaic
@mozaic-ds/icons: the icon svg files library
@mozaic-ds/css-dev-tools: tools for css like PostCSS plugins and linters config

The @mozaic-ds/styles package uses Dart Sass, which is the new official implementation of Sass.

Therefore, when installing the @mozaic-ds/styles package, please also install Dart Sass in your project:


npm install --save @mozaic-ds/styles sass@latest

We recommend that you use a version of the sass package >= 1.34.0

Node Sass is deprecated

Since version 1.6.0 of Mozaic, the @mozaic-ds/styles package no longer uses Node Sass to compile our .scss files into css.

Indeed, Node Sass has been deprecated by the Sass core team.

Tokens as styles dependency

When you install the @mozaic-ds/styles package, you also implicitly install the @mozaic-ds/tokens package.

Indeed, the package @mozaic-ds/tokens is a dependency of the package @mozaic-ds/styles.

We also packaged Gatsby extensions that we developed in order to create the style guide website

@mozaic-ds/gatsby-github-release: a Gatsby plugin that helps us get the older versions of the design system docs
@mozaic-ds/source-directory-tree: a Gatsby plugin to get the directory and file structure in order to build the style guide menu
@mozaic-ds/source-pattern: a Gatsby plugin build the live examples displayed in the style guide
@mozaic-ds/theme-styleguide: the Gatsby theme with the components and configuration used to build the style guide UI