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

<Meta title="Brand Presets" />

# Brand Presets

**ADEO Design System** is a **multi-brand design system** designed for maximum flexibility.<br/>
It provides a set of **Svelte** using **tokens** that can be fully customized to adapt to each brand’s visual identity and guidelines.

To make customization easier, **ADEO Design System** offers ready-to-use themes, also called **presets**, tailored for specific brands or internal contexts.

Currently, ADEO Design System supports the following presets:

- **Leroy Merlin preset**: Default preset applied when ADEO Design System is first installed.
- **Adeo preset**: Targeted at internal interfaces and products of the **Adeo Group**.
- **Mbrand preset**: Designed for the **Mbrand** brand's interfaces and products.

> ℹ️ **Note:**  
> The process shown below is valid for all presets — simply replace `"adeo"` by the desired brand name (e.g., `"mbrand"` or `"bricocenter"`).

---

## 🚀 Preset usage

Before starting, ensure you’ve completed the installation of **ADEO Design System Web Components** and its related tokens, as described in the [Getting Started](?path=/docs/getting-started-svelte-introduction--docs) section.

### 1️⃣ Load the preset

To load a preset, simply import the corresponding Sass token package into your main stylesheet:

```scss
// Main stylesheet (e.g., styles.scss)
@use '@mozaic-ds/tokens/<presetName>/theme';
```

> **Replace `<presetName>` with:**
>
> - `adeo`
> - `mbrand`
> - `bricocenter`
>
> **Note:** The `leroymerlin` preset is applied by default, so no need to explicitly import it unless overriding.

Example for **Adeo**:

```scss
@use '@mozaic-ds/tokens/adeo/theme';
```

<br />

> [!NOTE]: The use of presets described in this documentation is the minimal and most standard use that corresponds to the needs of the majority of users. However, the design system also offers the possibility of advanced use of this functionality.<br/>
> To find out more about all the possibilities offered by the use of presets, please refer to [the main documentation for the `@mozaic-ds/styles` package](https://github.com/adeo/mozaic-styles/tree/main/packages/styles#theming) _(intern only)_.

---

### 2️⃣ Load the correct brand font

Each brand not only has specific styles but also uses a dedicated font.

| Brand        | Recommended Font | Link                                                                            |
| ------------ | ---------------- | ------------------------------------------------------------------------------- |
| Leroy Merlin | LeroyMerlinSans  | [View Details](https://mozaic.adeo.cloud/foundations/typography/font-families/) |
| Adeo         | Roboto           | [Roboto on Google Fonts](https://fonts.google.com/specimen/Roboto)              |
| Bricoman     | Inter            | [Inter on Google Fonts](https://fonts.google.com/specimen/Inter)                |

To apply the correct font in your project:

```scss
// LeroyMerlin
@use '@mozaic-ds/styles/tools/t.font' as *;
@include import-font-lm();

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

```scss
//ADEO
@use '@mozaic-ds/styles/tools/t.font' as *;
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

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

```scss
//M-Brand
@use '@mozaic-ds/styles/tools/t.font' as *;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

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

---

#### 📝 Specific case: **Leroy Merlin font**

For the **Leroy Merlin** preset, we recommend using the **LeroyMerlinSans** font, specifically designed for LM products.

To include it in your project:

1. Create a folder to store fonts (e.g., `static/assets/fonts`).
2. Copy fonts from ADEO Design System’s dependency:

```bash
cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts
```

Then, import and reference the fonts in your stylesheets as needed.
