import { Meta } from '@storybook/blocks';
import { Source } from '@storybook/addon-docs';

<Meta title="Using Presets" />

# Mozaic's presets

**Mozaic** is a **multi-brand** design system.<br/>
This means that it is fully customisable so that its constituent elements _(foundations, components, etc.)_ can be adapted to the graphic charter of the brand that uses it.

To simplify this aspect of customising **Mozaic** for you, we have created themes _(which we also call **"presets"**)_ ready to use according to your context of use.

Currently **Mozaic** can be customized with the following presets:

- Preset **Leroy Merlin**: this is the default preset/theme configured when **Mozaic** was first installed
- Preset **Adeo**: dedicated to the **Adeo Group's** internal interfaces and products
- Preset **Bricoman**: dedicated to the interfaces and products of the **Bricoman** brand

The rest of this documentation shows you how to use/install the Adeo preset in your project.

> Note that the procedure remains the same for all other presets.<br/> You just need to replace all references to "Adeo" with the brand name of your choice.

## Using the Adeo's preset

Before anything else, make sure you have followed the **Mozaic-Vue** installation procedure as described in the [Getting Started](?path=/docs/getting-started--docs) page.

Once **Mozaic-Vue** is installed as shown, we can make the following changes:

### 1. Loading preset

All it has to do is insert the following code into its main Sass file (entrypoint stylesheet):

<Source
  language='css'
  dark
  code={`
// Entrypoint stylesheet
@use "@mozaic-ds/tokens/<presetName>" as *;
`} />

> [!NOTE]
> The `<presetName>` string should be replaced by the name of the preset you want, one of the following values: `adeo | enki | mbrand`.
> As the `leroymerlin` preset is the default preset, you don't need to use this syntax to use it.

For example, for ADEO

<Source
  language='css'
  dark
  code={`
// Entrypoint stylesheet
@use "@mozaic-ds/tokens/adeo" as *;
`} />

### 2. Font by brand

Each brand is distinguished not only by different styles but also by a different font.

The table below summarises which font to use depending on the brand.

<table>
  <tr>
    <td>Brand</td>
    <td>Font</td>
  </tr>
  <tr>
    <td>Leroy Merlin</td>
    <td>[LeroyMerlinSans](https://mozaic.adeo.cloud/foundations/typography/font-families/)</td>
  </tr>
  <tr>
    <td>Adeo</td>
    <td>[Roboto](https://fonts.google.com/specimen/Roboto)</td>
  </tr>
  <tr>
    <td>Bricoman</td>
    <td>[Inter](https://fonts.google.com/specimen/Inter)</td>
  </tr>
</table>

From there, we can update the main style sheet of your project, in order to import the right font.

<Source
  language='css'
  dark
  code={`
@use "@mozaic-ds/styles/tools/t.font" as *;

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

Specific for LM fonts

> This section describes the use of fonts for the **Leroy Merlin** preset, but if you are using another preset, please see [the associated documentation](?path=/docs/using-presets--docs).

The theme defined by default when **Mozaic-Vue** is first installed/used is the theme corresponding to the **Leroy Merlin** charter.

For any use of the **Leroy Merlin** theme, it is recommended to use the font [LeroyMerlinSans](/typography/font-families/) which has been specially designed for **Leroy Merlin** products.

To use the `LeroyMerlinSans` font in your project, you must copy it into your project so that it is present in your `assets`.

You can do this as follows:

1. Create a folder in your project where you can save the fonts, for example: `static/assets/fonts`

2. Copy fonts from Mozaic dependencies:

<Source
  language="bash"
  dark
  code='cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts'
/>

### 3. Usage

At this stage, the integration of the **Mozaic-Vue** components should normally be customised with the preset values.

All that remains is to use the components as usual:

<Source
  language="html"
  dark
  code='<MButton label="This is a Mozaic Button" />'
/>