import { Meta, Source } from '@storybook/addon-docs/blocks';
# Getting Started
**Mozaic-Vue** is the [Vue.js](https://vuejs.org/) implementation of ADEO Design system.
### 📦 Installation
In order to use **Mozaic-Vue** in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/vue):
Or with **Yarn**:
### đź“ť Usage
Import the styles
To import and use a component, you can proceed as follows:
import { MButton } from '@mozaic-ds/vue';
Button Label
`} />
### 🎨 Brand Presets
**Mozaic** is a **multi-brand** design system.
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. 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:
#### Loading preset
All it has to do is insert the following code into its main Sass file (entrypoint stylesheet):
/theme" as *;
`}
/>
> [!NOTE]
> The `` string should be replaced by the name of the preset you want, one of the following values: `adeo | mbrand`.
> As the `leroymerlin` preset is the default preset, you don't need to use this syntax to use it.
For example, for ADEO
#### 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.
For example, here is how to include the Roboto font in your HTML for the Adeo brand:
`}
/>
From there, we can update the main style sheet of your project, in order to import the right font.
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:
#### 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:
### 🌑 Dark Mode
A concise guide explaining **how dark mode works** with your CSS variables and **how to use it** in Storybook.
---
## What dark mode is (high‑level)
Dark mode is implemented with **two sets of CSS variables** (tokens):
- **Light** values live under `:root`.
- **Dark** values override under `:root[data-theme="dark"]`.
Components only reference tokens with `var(--token-name)` — switching theme is just toggling the `data-theme` attribute (no component code changes).
---
#### Token structure (SCSS → CSS)
Your presets export SCSS like this:
After compilation, this becomes standard CSS:
> If you can’t (or don’t want to) target `:root`, you can pass a different `$root-selector` when building your theme and apply `data-theme="dark"` on that container instead.
---
#### Using tokens inside components
To enable the dark mode you have to ensure to:
- Add the `data-theme` attribute in your root element with the value `dark`,
- Use variables — never hard‑code colors or sizes
```html
…
```
When the theme changes, these values update automatically via CSS.
---
#### Accessibility & good practices
- Aim for **WCAG AA** contrast at minimum; verify text vs. background pairs.
- Prefer **semantic tokens** (`--button-color-…`, `--color-text-…`) over raw color hexes.
- Keep all component styles expressed in tokens so the **theme switch has zero component logic**.
---
#### Troubleshooting
- **Dark toggle does nothing** → Ensure the tokens were imported **before** component styles and that `data-theme="dark"` is set on the same selector the tokens target (usually `:root`).
- **Weird colors** → Search for hard‑coded values and replace them with tokens.
- **Variables undefined** → Check your build order and that the SCSS was compiled to CSS and loaded by Storybook.
---
#### Summary
- Light tokens on `:root`, dark overrides on `:root[data-theme="dark"]`.
- Components read tokens with `var(--$token-name)` — no runtime branching required.