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
The installation of a Mozaic package is done like a classical installation of an NPM package:
# For NPMnpm install --save @mozaic-ds/<name-of-your-package># For Yarnyarn add @mozaic-ds/<name-of-your-package>
Installing Mozaic packages require
node v12 +
The Mozaic packages which may interest you are the following:
@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
@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
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.
When you install the
@mozaic-ds/styles package, you also implicitly install the
Indeed, the package
@mozaic-ds/tokens is a dependency of the package
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