import { Meta } from '@storybook/addon-docs/blocks'; # Migration guide ### Components This document summarizes all component changes between the ADS Vue V1 and V2 design system libraries — including renames, splits, merges, removals, and new additions. #### Mapping Table

V1 Component	V2 Component	Status
`MAccordion`	`MAccordionList` + `MAccordionListItem`	🔀 Split
`MActionBar` + `MBottomBar`	`MActionBottomBar`	🔗 Merged
`MListBoxActions`	`MActionListBox`	🔄 Renamed
—	`MAvatar`	✨ New
`MBreadcrumb`	`MBreadcrumb`	✅ Same name
`MMenu`	`MBuiltInMenu`	🔄 Renamed
`MButton`	`MButton`	✅ Same name
—	`MCallout`	✨ New
—	`MCarousel`	✨ New
`MCheckbox`	`MCheckbox`	✅ Same name
`MCheckboxGroup`	`MCheckboxGroup`	✅ Same name
—	`MChecklistMenu`	✨ New
—	`MCircularProgressBar`	✨ New
`MAutocomplete` + `MDropdown`	`MCombobox`	🔗 Merged
`MContainer`	`MContainer`	✅ Same name
—	`MDatePicker`	✨ New
—	`MDivider`	✨ New
`MLayer`	`MDrawer`	🔄 Renamed
`MField`	`MField`	✅ Same name
—	`MFieldGroup`	✨ New
`MFileUploader`	`MFileUploader`	✅ Same name
—	`MFileUploaderItem`	✨ New
`MFlag`	`MFlag`	✅ Same name
`MIcon`	removed	🗑️ Removed
—	`MIconButton`	✨ New
—	`MKpiItem`	✨ New
`MProgress`	`MLinearProgressBarBuffer` +{' '} `MLinearProgressBarPercentage`	🔀 Split
`MLink`	`MLink`	✅ Same name
`MLoader`	`MLoader`	✅ Same name
—	`MLoadingOverlay`	✨ New
`MModal`	`MModal`	✅ Same name
—	`MNavigationIndicator`	✨ New
`MNotification`	`MStatusNotification`	🔄 Renamed
—	`MNumberBadge`	✨ New
`MListbox`	`MOptionListBox`	🔄 Renamed
`MOverlay`	`MOverlay`	✅ Same name
—	`MPageHeader`	✨ New
`MPagination`	`MPagination`	✅ Same name
`MPasswordInput`	`MPasswordInput`	✅ Same name
`MPhoneNumber`	`MPhoneNumber`	✅ Same name
—	`MPinCode`	✨ New
—	`MPopover`	✨ New
`MQuantitySelector`	`MQuantitySelector`	✅ Same name
`MRadio`	`MRadio`	✅ Same name
`MRadioGroup`	`MRadioGroup`	✅ Same name
`MSegmentedControl`	`MSegmentedControl`	✅ Same name
`MSelect`	`MSelect`	✅ Same name
`MSidebar`	`MSidebar` + 6 sub-components	🔀 Split
—	`MSidebarExpandableItem`	✨ New
—	`MSidebarFooter`	✨ New
—	`MSidebarHeader`	✨ New
—	`MSidebarNavItem`	✨ New
—	`MSidebarShortcutItem`	✨ New
—	`MSidebarShortcuts`	✨ New
—	`MStarRating`	✨ New
`MBadge`	`MStatusBadge`	🔄 Renamed
—	`MStatusDot`	✨ New
—	`MStatusMessage`	✨ New
`MStepper` (`compact: false`)	`MStepperInline`	🔄 Renamed
`MStepper` (`compact: true`)	`MStepperCompact`	🔄 Renamed
—	`MStepperBottomBar`	✨ New
—	`MStepperStacked`	✨ New
`MTab` / `MTabsV2`	`MTabs`	🔄 Renamed
`MTag`	`MTag`	✅ Same name
`MTextArea`	`MTextArea`	✅ Same name
`MTextInput`	`MTextInput`	✅ Same name
—	`MTile`	✨ New
—	`MTileClickable`	✨ New
—	`MTileExpandable`	✨ New
`MOptionCard`	`MTileSelectable`	🔄 Renamed
—	`MToaster`	✨ New
`MToggle`	`MToggle`	✅ Same name
—	`MToggleGroup`	✨ New
—	`MTooltip`	✨ New

### Tokens > V1 used **primitive tokens** — raw color values at each step of a palette scale. V2 uses **semantic/functional tokens** — purpose-driven names that describe the _role_ of a color, not its value. V2 primitives are private and not meant to be used directly. This table maps V1 primitives to their V2 functional equivalents per usage context. **How to read this table:** - **Brand** — which brand(s) the V1 token belongs to. `All` = shared across all brands. - **Text / Icon** — V2 token to use when the V1 color was applied to text or an icon. Note: `$color-icon-*` tokens alias `$color-text-*` — they resolve to the same value. Use `$color-icon-*` for icon-specific targets when your tool distinguishes them. - **Background** — V2 token to use when the V1 color was the fill of a surface or container. `~` indicates a proximity recommendation — the nearest available V2 background token, not an exact color match. - **Border** — V2 token to use when the V1 color defined a stroke or outline. - **—** — no direct V2 functional equivalent; this shade was intermediate or state-specific (hover, pressed) and is now managed at the component interaction token level. > All V2 tokens support **light and dark mode**. The values listed below are the light mode defaults. Dark mode is resolved automatically when the correct theme is applied — no manual override needed. --- #### Brand colors The accent / brand color palette. **Token name and role differ per brand** — for LM and ADEO, the brand color is `primary-01`. For M Brand, it is `primary-02` (orange). V2 mapping is identical across all brands.

V1 Token	Brand	Value	Text / Icon	Background	Border
`$color-primary-01-100`	Leroy Merlin	`#EBF5DE`	`~ $color-text-secondary-inverse`	`$color-background-accent`	`~ $color-border-primary`
`$color-primary-01-200`	Leroy Merlin	`#C5E39E`	`~ $color-text-secondary-inverse`	`~ $color-background-accent`	`~ $color-border-primary`
`$color-primary-01-300`	Leroy Merlin	`#9ED05F`	`~ $color-text-accent`	`~ $color-background-accent`	`~ $color-border-secondary`
`$color-primary-01-400`	Leroy Merlin	`#78BE20`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-secondary`
`$color-primary-01-500`	Leroy Merlin	`#46A610`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-600`	Leroy Merlin	`#188803`	`$color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-700`	Leroy Merlin	`#006902`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-800`	Leroy Merlin	`#035010`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-900`	Leroy Merlin	`#023618`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-100`	ADEO	`#D9F0F3`	`~ $color-text-secondary-inverse`	`$color-background-accent`	`~ $color-border-primary`
`$color-primary-01-200`	ADEO	`#91D5DB`	`~ $color-text-secondary-inverse`	`~ $color-background-accent`	`~ $color-border-primary`
`$color-primary-01-300`	ADEO	`#48BAC4`	`~ $color-text-accent`	`~ $color-background-accent`	`~ $color-border-secondary`
`$color-primary-01-400`	ADEO	`#009EAC`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-secondary`
`$color-primary-01-500`	ADEO	`#00919F`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-600`	ADEO	`#007F8C`	`$color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-700`	ADEO	`#006974`	`~ $color-icon-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-800`	ADEO	`#004E57`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-01-900`	ADEO	`#002E33`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-02-100`	M Brand	`#FFE2BD`	`~ $color-text-secondary-inverse`	`$color-background-accent`	`~ $color-border-primary`
`$color-primary-02-200`	M Brand	`#FFBF6B`	`~ $color-text-secondary-inverse`	`~ $color-background-accent`	`~ $color-border-primary`
`$color-primary-02-300`	M Brand	`#FF941A`	`~ $color-text-accent`	`$color-background-accent-inverse`	`~ $color-border-secondary`
`$color-primary-02-400`	M Brand	`#EF7F00`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-secondary`
`$color-primary-02-500`	M Brand	`#E05A00`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-secondary`
`$color-primary-02-600`	M Brand	`#C34400`	`$color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-02-700`	M Brand	`#943300`	`~ $color-text-accent`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-02-800`	M Brand	`#702700`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-primary-02-900`	M Brand	`#421700`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`

**Notes:** - `$color-brand` — the reference brand color. Use when expressing the brand without implying a specific usage context (logo tint, illustration element, etc.). - `$color-text-accent` / `$color-icon-accent` — slightly darker, calibrated for contrast as foreground on white. - `$color-background-accent` — light tint for subtle branded surfaces (badge background, tinted container). Exact match for LM `100`, ADEO `100`, M Brand `100`. - `$color-background-accent-inverse` — filled accent surface for primary CTAs. For LM and ADEO, resolves to the dark end of the scale (800). For **M Brand, resolves to `orange.300`** = `#FF941A` — a mid-orange, not a dark shade. This is an intentional brand difference. - `300`, `500`, `700`, `900` (LM / ADEO) and `500`, `700–900` (M Brand) — no V2 equivalent; hover/pressed variations now managed at component interaction token level. --- #### Secondary colors Palettes used to complement the brand color — structural surfaces, text hierarchy, borders, and secondary brand expression. Token names differ per brand. For purple and sandgrey, there is no direct V2 functional equivalent — mappings will be handled manually.

V1 Token	Brand	Value	Text / Icon	Background	Border
`$color-primary-02-100`	Leroy Merlin	`#EEEFF1`	`~ $color-text-secondary-inverse`	`$color-background-secondary`	`~ $color-border-primary`
`$color-primary-02-200`	Leroy Merlin	`#CFD2D8`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`$color-border-primary`
`$color-primary-02-300`	Leroy Merlin	`#B3B7C1`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`~ $color-border-primary`
`$color-primary-02-400`	Leroy Merlin	`#8F94A3`	`$color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-primary-02-500`	Leroy Merlin	`#6A7081`	`$color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-primary-02-600`	Leroy Merlin	`#494F60`	`$color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-primary-02-700`	Leroy Merlin	`#343B4C`	`~ $color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-primary-02-800`	Leroy Merlin	`#242938`	`$color-text-primary`	`$color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-primary-02-900`	Leroy Merlin	`#171B26`	`~ $color-text-primary`	`$color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-secondary-blue-100`	ADEO	`#EAEDEF`	`~ $color-text-secondary-inverse`	`$color-background-secondary`	`~ $color-border-primary`
`$color-secondary-blue-200`	ADEO	`#CDD4D8`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`$color-border-primary`
`$color-secondary-blue-300`	ADEO	`#B0BBC0`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`~ $color-border-primary`
`$color-secondary-blue-400`	ADEO	`#92A2A9`	`$color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-secondary-blue-500`	ADEO	`#758992`	`$color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-secondary-blue-600`	ADEO	`#5B737D`	`$color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-secondary-blue-700`	ADEO	`#405D68`	`~ $color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-secondary-blue-800`	ADEO	`#264653`	`$color-text-primary`	`$color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-secondary-blue-900`	ADEO	`#082435`	`~ $color-text-primary`	`$color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-secondary-purple-100`	ADEO	`#E7E7F0`	`~ $color-text-secondary-inverse`	`~ $color-background-accent`	`~ $color-border-primary`
`$color-secondary-purple-200`	ADEO	`#C5C5DC`	`~ $color-text-secondary-inverse`	`~ $color-background-accent`	`~ $color-border-primary`
`$color-secondary-purple-300`	ADEO	`#A4A3C7`	`~ $color-text-secondary-inverse`	`~ $color-background-accent`	`~ $color-border-primary`
`$color-secondary-purple-400`	ADEO	`#8281B2`	`~ $color-text-tertiary`	`~ $color-background-accent-inverse`	`~ $color-border-secondary`
`$color-secondary-purple-500`	ADEO	`#605F9D`	`~ $color-text-tertiary`	`~ $color-background-accent-inverse`	`~ $color-border-secondary`
`$color-secondary-purple-600`	ADEO	`#4B4A8C`	`~ $color-text-secondary`	`~ $color-background-accent-inverse`	`~ $color-border-secondary`
`$color-secondary-purple-700`	ADEO	`#393879`	`~ $color-text-secondary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-secondary-purple-800`	ADEO	`#282863`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-secondary-purple-900`	ADEO	`#1A1A4B`	`~ $color-text-primary`	`~ $color-background-accent-inverse`	`~ $color-border-tertiary`
`$color-secondary-sandgrey-100`	ADEO	`#EEEDEA`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`~ $color-border-primary`
`$color-secondary-sandgrey-200`	ADEO	`#DDDCD5`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`~ $color-border-primary`
`$color-secondary-sandgrey-300`	ADEO	`#C2C1BA`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`~ $color-border-primary`
`$color-secondary-sandgrey-400`	ADEO	`#A7A6A0`	`~ $color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-secondary-sandgrey-500`	ADEO	`#8C8B85`	`~ $color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-secondary-sandgrey-600`	ADEO	`#71706B`	`~ $color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-secondary-sandgrey-700`	ADEO	`#555550`	`~ $color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-secondary-sandgrey-800`	ADEO	`#3A3936`	`~ $color-text-primary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-secondary-sandgrey-900`	ADEO	`#1E1E1C`	`~ $color-text-primary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-primary-01-100`	M Brand	`#E5EFFF`	`~ $color-text-secondary-inverse`	`$color-background-secondary`	`~ $color-border-primary`
`$color-primary-01-200`	M Brand	`#B8D3FF`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`$color-border-primary`
`$color-primary-01-300`	M Brand	`#8AB7FF`	`~ $color-text-secondary-inverse`	`~ $color-background-secondary`	`~ $color-border-primary`
`$color-primary-01-400`	M Brand	`#5797FF`	`~ $color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-primary-01-500`	M Brand	`#1A6EFF`	`~ $color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-primary-01-600`	M Brand	`#0058DB`	`~ $color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-primary-01-700`	M Brand	`#004EA8`	`~ $color-text-secondary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-primary-01-800`	M Brand	`#00387A`	`$color-text-primary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-primary-01-900`	M Brand	`#002A5B`	`~ $color-text-primary`	`~ $color-background-secondary-inverse`	`~ $color-border-tertiary`

**Notes:** - `$color-background-secondary` — page backgrounds, alternate rows, section zones. `200` and `300` are proximity recommendations. - `$color-border-primary` — default borders for inputs, cards, dividers. - `$color-border-secondary` — stronger separation. - `$color-border-tertiary` — maximum contrast border, highest elevation edge. - `400–500` → `$color-text-tertiary` — captions, metadata, placeholder text, disabled labels. - `600` → `$color-text-secondary` — body text, descriptions, supporting content. - `700–800` → `$color-text-primary` — headings, primary labels, key content. - `$color-background-secondary-inverse` — dark surface for Sidebar, dark panels, inverse zones. For M Brand, the V2 token resolves to `blue.900` = `#001A3D`, darker than V1 `primary-01-900` (`#002A5B`) — `800` and `900` are proximity recommendations. - `secondary-purple` and `secondary-sandgrey` — no V2 functional equivalent. To be handled manually. --- #### Grey scale

V1 Token	Brand	Value	Text / Icon	Background	Border
`$color-grey-000`	All	`#FFFFFF`	`$color-text-primary-inverse`	`$color-background-primary`	`$color-border-inverse`
`$color-grey-100`	All	`#E6E6E6`	`$color-text-secondary-inverse`	`$color-background-secondary`	`~ $color-border-primary`
`$color-grey-200`	All	`#CCCCCC`	`~ $color-text-secondary-inverse`	`$color-background-secondary`	`$color-border-primary`
`$color-grey-300`	All	`#B3B3B3`	`~ $color-text-secondary-inverse`	`$color-background-secondary`	`~ $color-border-primary`
`$color-grey-400`	All	`#999999`	`~ $color-text-tertiary`	`~ $color-background-secondary`	`$color-border-secondary`
`$color-grey-500`	All	`#808080`	`~ $color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-grey-600`	All	`#666666`	`$color-text-tertiary`	`~ $color-background-secondary-inverse`	`~ $color-border-secondary`
`$color-grey-700`	All	`#4D4D4D`	`~ $color-text-secondary`	`$color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-grey-800`	All	`#333333`	`~ $color-text-secondary`	`$color-background-secondary-inverse`	`$color-border-tertiary`
`$color-grey-900`	All	`#191919`	`~ $color-text-primary`	`$color-background-secondary-inverse`	`~ $color-border-tertiary`
`$color-grey-999`	All	`#000000`	`$color-text-primary`	`$color-background-secondary-inverse`	`~ $color-border-tertiary`

**Notes:** - `$color-background-primary` — pure white surface. Exact match to `grey-000`. - `$color-background-disabled` = `neutral.grey.150` — lighter than `grey-100` and `grey-200`. Closest available V2 background for light grey fills; primarily intended for disabled component surfaces. - `$color-text-primary-inverse` / `$color-icon-primary-inverse` — white text on dark surfaces. Exact match to `grey-000`. - `$color-text-secondary-inverse` / `$color-icon-secondary-inverse` — close to `grey-100`. Text on dark inverse backgrounds. - `$color-text-disabled` / `$color-icon-disabled` — between `grey-500` and `grey-600`. Closest V2 token for mid-grey disabled content. - `$color-text-tertiary` / `$color-icon-tertiary` — exact match to `grey-600` (#666). - `$color-text-secondary` / `$color-icon-secondary` ≈ `#404040` — darker than `grey-700` (#4D4D4D) and `grey-800` (#333). Both map here as the nearest available. - `$color-text-primary` / `$color-icon-primary` ≈ near-black. Exact match to `grey-999` (#000). `grey-900` (#191919) maps here as the nearest available. --- #### Status colors > **Naming change:** V1 used `danger` — V2 uses `error`. All other status names are unchanged (info, warning, success).

V1 Token	Brand	Value	Text / Icon	Background	Border
`$color-danger-100`	All	`#FDEAEA`	`~ $color-status-text-error`	`$color-status-background-error`	`~ $color-status-border-error`
`$color-danger-200`	All	`#F8BCBB`	`~ $color-status-text-error`	`~ $color-status-background-error`	`~ $color-status-border-error`
`$color-danger-300`	All	`#F38D8C`	`~ $color-status-text-error`	`~ $color-status-background-error`	`~ $color-status-border-error`
`$color-danger-400`	All	`#EF5F5C`	`~ $color-status-text-error`	`~ $color-status-background-error`	`$color-status-border-error`
`$color-danger-500`	All	`#EA302D`	`~ $color-status-text-error`	`~ $color-status-background-error`	`~ $color-status-border-error`
`$color-danger-600`	All	`#C61112`	`$color-status-text-error`	`~ $color-status-background-error`	`~ $color-status-border-error`
`$color-danger-700`	All	`#8C0003`	`~ $color-status-text-error`	`~ $color-status-background-error`	`~ $color-status-border-error`
`$color-danger-800`	All	`#530000`	`~ $color-status-text-error`	`~ $color-status-background-error`	`~ $color-status-border-error`
`$color-danger-900`	All	`#2D0000`	`~ $color-status-text-error`	`~ $color-status-background-error`	`~ $color-status-border-error`
`$color-info-100`	All	`#DAEFF7`	`~ $color-status-text-info`	`$color-status-background-info`	`~ $color-status-border-info`
`$color-info-200`	All	`#A7D9ED`	`~ $color-status-text-info`	`~ $color-status-background-info`	`~ $color-status-border-info`
`$color-info-300`	All	`#73C3E2`	`~ $color-status-standalone-info`	`~ $color-status-background-info`	`~ $color-status-border-info`
`$color-info-400`	All	`#3FACD7`	`~ $color-status-standalone-info`	`~ $color-status-background-info`	`$color-status-border-info`
`$color-info-500`	All	`#0B96CC`	`$color-status-standalone-info`	`~ $color-status-background-info`	`~ $color-status-border-info`
`$color-info-600`	All	`#007BB4`	`~ $color-status-text-info`	`~ $color-status-background-info`	`~ $color-status-border-info`
`$color-info-700`	All	`#005C91`	`~ $color-status-text-info`	`~ $color-status-background-info`	`~ $color-status-border-info`
`$color-info-800`	All	`#003A5C`	`~ $color-status-text-info`	`~ $color-status-background-info`	`~ $color-status-border-info`
`$color-info-900`	All	`#002A41`	`~ $color-status-text-info`	`~ $color-status-background-info`	`~ $color-status-border-info`
`$color-warning-100`	All	`#FDF1E8`	`~ $color-status-text-warning`	`$color-status-background-warning`	`~ $color-status-border-warning`
`$color-warning-200`	All	`#F8D2B3`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`~ $color-status-border-warning`
`$color-warning-300`	All	`#F4B27E`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`~ $color-status-border-warning`
`$color-warning-400`	All	`#EF934A`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`$color-status-border-warning`
`$color-warning-500`	All	`#EA7315`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`~ $color-status-border-warning`
`$color-warning-600`	All	`#C65200`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`~ $color-status-border-warning`
`$color-warning-700`	All	`#8C3500`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`~ $color-status-border-warning`
`$color-warning-800`	All	`#531B00`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`~ $color-status-border-warning`
`$color-warning-900`	All	`#360E00`	`~ $color-status-text-warning`	`~ $color-status-background-warning`	`~ $color-status-border-warning`
`$color-success-100`	All	`#EBF5DE`	`~ $color-status-text-success`	`$color-status-background-success`	`~ $color-status-border-success`
`$color-success-200`	All	`#C5E39E`	`~ $color-status-text-success`	`~ $color-status-background-success`	`~ $color-status-border-success`
`$color-success-300`	All	`#9ED05F`	`~ $color-status-text-success`	`~ $color-status-background-success`	`~ $color-status-border-success`
`$color-success-400`	All	`#78BE20`	`~ $color-status-text-success`	`~ $color-status-background-success`	`$color-status-border-success`
`$color-success-500`	All	`#46A610`	`~ $color-status-text-success`	`~ $color-status-background-success`	`~ $color-status-border-success`
`$color-success-600`	All	`#188803`	`~ $color-status-text-success`	`~ $color-status-background-success`	`~ $color-status-border-success`
`$color-success-700`	All	`#006902`	`~ $color-status-text-success`	`~ $color-status-background-success`	`~ $color-status-border-success`
`$color-success-800`	All	`#035010`	`~ $color-status-text-success`	`~ $color-status-background-success`	`~ $color-status-border-success`
`$color-success-900`	All	`#023618`	`~ $color-status-text-success`	`~ $color-status-background-success`	`~ $color-status-border-success`

**Notes:** - `100` → exact match to the V2 background token (light tint for notification containers, form error zones). - `200` → proximity to the background tint; no intermediate background token exists in V2. - `400` → exact border token level. `300` is a proximity recommendation. - `500` → exact standalone icon level — the saturated shade designed to read without text support (Status Dot, badge icons). - `600` → text/foreground level. `danger` and `success` are exact matches. `info` (`#007BB4` vs V2 `#0074AA`) and `warning` (`#C65200` vs V2 `#B64F00`) are proximity recommendations — marked `~`. - `700–900` — no V2 functional equivalent. Hover/pressed states now managed at component interaction token level. Dark mode inversions handled automatically by the V2 token system. ### Icons This document outlines the equivalences between icon names in Version 1 and Version 2 of the Adeo Design System. Entries with no corresponding entries have been excluded to retain only usable mappings.

V1	V2
Laptop	DeviceLaptop
Mobile	DeviceMobile
Tablet	DeviceTablet
HygienePlexiglas	Glass
HygieneMask	Mask
HygieneGel	HandSanitiser
HygieneDistance	Distance
HygieneCleaned	CleaningProduct
PaymentCheckout	Checkout
Print	Print
Project	Project
Pushpin	PushPin
Read	Book
ReduceScreen	FullscreenExit
Release	Release
Stop	Pause
Slideshow	Slideshow
Sound	VolumeOn
TimeRead	Time
Upload	Upload
View360	View360
Policies	Policies
Server	Server
Pushpinoff	PushPinOff
Picker	Picker
Play	Play
BookStore	Newspaper
Camera	Camera
Code	Code
Document	Document
DownloadApp	Download
DownloadWeb	Download
API	Api
Gauge	Gauge
Group	Group
Media_Image	Image
Imagealt	ImageAlt
NoPicture	NoPicture
FullScreen	FullscreenEnter
Pdf	FilePdf
DisplaySearchProduct	SearchProduct
DisplaySearchList	SearchList
DisplaySearch	Search
DisplayScreenRotation	ScreenRotation
DisplayRefresh	Refresh
DisplayProductNumb	ListView
DisplayMovingBlock	Drag
DisplayOptions	OptionsVertical
DisplayMenu	Menu
DisplayLogOut	LogOut
DisplayHome	Home
DisplaySetting	Settings
DisplayFilter	Filter
DisplayOther	OptionsHorizontal
DisplayView	Eye
PublishCopy	Copy
NotificationAvailable	Check
NotificationBell	Notification
NotificationCircleAvailable	CheckCircle
NotificationInformation	InfoCircle
NotificationQuestion	HelpCircle
NotificationWarning	WarningCircle
PublishEdit	Edit
PublishFavorite	Favorite
PublishFavoriteFull	FavoriFilled
PublishLock	Lock
PublishSend	Send
PublishTrashbin	Trash
Split	Split
DisplayExternalLink	ExternalLink
DisplayVocalSearch	Mic
DisplayDisplayProductX9	ViewGridX9
ControlCircleMore	MoreCircle
DisplayDisplayProductX4Filled	ViewGridX4Filled
ArrowArrowBottom	ChevronDown
ArrowArrowLeft	ChevronLeft
ArrowArrowRight	ChevronRight
ArrowArrowTop	ChevronUp
ArrowArrowBottomLeft	ArrowBottomLeft
DisplayDisplayProductX4Outline	ViewGridX4
ArrowArrowTopLeft	ArrowTopLeft
ArrowArrowTopRight	ArrowTopLeft
ArrowBack	ArrowBack
ArrowDown	ArrowBottom
ArrowNext	ArrowNext
ArrowUp	ArrowTop
ControlCircleCross	CrossCircle
ArrowArrowBottomRight	ArrowBottomRight
DisplayDisplayMobileVertical	ViewLarge
DisplayDisplayMobileHorizontal	ViewCompact
DisplayDisplayListOutline	ViewList
DisplayDisplayListFilled	ViewListFilled
ControlCircleLess	LessCircle
DisplayDisplayFullFilled	ViewGridX1Filled
DisplayConnect	Connect
DisplayDisplayFullOutline	ViewGridX1
DisplayBlink	FlashingLight
ControlTagCross	CrossCircleFilled
ControlMore	More
ControlLess	Less
ControlCross	Cross
DisplayCalendar	Calendar
Zloty	Zloty
Transfer	Transfer
SafePayment2	SecurePaymentAlt
SafePayment1	SecurePayment
Receipt	ReceiptEuro
Euro	Euro
DetailsOrder	Checkout
Bill	BillEuro
Billzloty	BillZloty
Receiptzloty	ReceiptZloty
PromiseMadeInEurope	Europe
PromiseFashionChoice	Pantone
PromiseFunding	FundingEuro
PromiseMadeInFrance	France
PromiseEcoProduct	Eco
PromiseProductOnPicture	PriceTag
PromiseProductSheet	List
PromiseScan	BarcodeScanner
Trolley	Trolley
PromiseModular	Modular
PromiseDestocking	Discount
PromiseWarranty	Warranty
PromiseCertification	Certification
ListStandard	List
ListAdd	ListAdd
BasketStandard	Cart
BasketSave	Cart
BasketMulti	Cart
BasketHandbag	Handbag
BasketAdd	Cart
AspectWeight	Weight
AspectSize	Size
PromiseCircularEconomy	CircularEconomy
AspectQuantity	Layers
Inspiration	Image
MakeProject	Draw
DescribeProject	DiyAlt
Fundingzloty	FundingZloty
ToolsComparator	Comparator
ToolsCalculator	Calculator
Tools3d	View3d
TimeTimeDecline	Timer
Service_Time_Delivery--48h	Timer48h
TimeDelivery3h	Timer3h
TimeDelivery2h	Timer2h
TimeDelivery24h	business_timer-24h
PurchaseHelpToolRent	ToolRental
PurchaseHelpHomeInstall	Renovation
PurchaseHelpHomeDIY	HardHat
Pallet	Pallet
DeliveryDeliveryHome	Delivery
DeliveryDeliveryPickupRelayPoint	Package
AfterSalesAfterSalesService	Wrench
DeliveryDeliveryPickupStore	Pickup
AfterSalesPayback	Return
AfterSalesSatisfaction	FeelingSatisfied
CustomCopyKey	Key
AfterSalesHelpline	Helpline
CustomCutWoodGlass	CuttingWoodGlass
CustomSample	Sample
CustomSharpening	Sharpening
DeliveryDeliveryLocker	Locker
CustomCourse	Course
SocialNetworkTiktok	SocialTiktok
ViewTesterView	Admin
ViewStarHalf	StarHalf
ViewStarFull	StarFilled
ViewStarEmpty	Star
ViewLikePositive	ThumbUp
ViewLikeNegative	ThumbDown
SocialNetworkYoutube	SocialYoutube
SocialNetworkX	SocialX
SocialNetworkTelegram	SocialTelegram
ShareShareIOS	ShareIos
SocialNetworkPinterest	SocialPinterest
SocialNetworkLinkedin	SocialLinkedin
SocialNetworkInstagram	SocialInstagram
SocialNetworkFacebook	SocialFacebook
SocialNetworkSpotify	SocialSpotify
ShareShareAndroid	Share
CommentReport	Report
CommentQuestionArticle	Question
CommentCommunity	Chat
CommentComment	Comment
StoreLM	StoreLeroymerlin
StoreBM	StoreBricoman
MonochromeStoreLocation	StoreLocationLm
MonochromeStoreLocationbm	StoreLocationBm
MonochromeRelayLocation	PickupLocation
Map	Map
Logo	LeroyMerlin
Locator	Locator
Itinerary	Direction
Leak	Leak
Kitchen2	Kitchen
Lighting	Lighting
Living	LivingRoom
MakeIt	product
Masonryalt	MasonryAlt
Mixertruck	MixerTruck
Paint	Paint
Pool	Pool
Renewableenergy	RenewableEnergy
Woodflooring	WoodFlooring
Stairs	Stairs
Terrace	Terrace
WoodSaw	WoodSaw
Tool	Drill
Ventilation	Ventilation
Wallpaper	Wallpaper
Window	Window
Woodflooringalt	WoodFlooringAlt
Wood	Wood
Kitchen	Faucet
Security	Security
Kitchenalt	KitchenAlt
Curtains	Curtains
Insulationalt	InsulationAlt
Attic	Attic
Bathroom	Bathroom
Bedroom	Bedroom
Bigbag	BigBag
Carpentry	Masonry
ChristmasTree	ChristmasTree
Kids	Kids
Dressing	Dressing
Drillalt	DrillAlt
Electricity	Electricity
ConnectedHome	ConnectedHome
Floor	Floor
Enki	Enki
HardwareStore	Hardware
Hardhatalt	HardHatAlt
Glass	Glass
Heater	Heater
Garden1	Barbecue
Garden	Garden
Garage	Garage
Garden2	GardenAlt
SituationTenant	Tenant
SituationOwner	Owner
ContactWebsite	Worldwide
ContactPhone	Phone
ContactMail	Mail
CardLoyaltyCard	LoyaltyLm
CardLoyaltym	LoyaltyBm
CardGift	Gift
CardIDCard	IdCard
CardFundingzloty	FundingZloty
AccountProfileWoman	Woman
AccountProfileView	Profile
AccountProfileMan	Man
AccountCustomerPro	ProfilePro
AccountCustomerPassion	ProfilePassion
AccountCustomerCollaborator	ProfileCollaborator
CardFunding	FundingEuro
Level	Hammer
PaintCan	PaintCan
PartnerCompany	Partnership
PartnerWorker	Craftsman
Shutter	Shutter
Premium	Premium
LessonDIY	Diy
Survey	Survey
Temperature	Temperature
Pipe	Pipe
Insulation	Insulation
EcoSaving	EcoAlt
House	House
Heat	Heater
Door	Door
Company	Company
Blower	product_ventilation
Balcony	Balcony
Apartment	Apartment
Administration	Administration
A11y	A11y
ThermalControl	Thermostat
IncreaseValue	Data
ToolBox	Toolbox

--- ### Migration Extension (beta) > **Beta** — This extension is in early beta. You may encounter incorrect or incomplete migrations. Always review the changes before committing. If you run into issues or have feedback, please reach out on the [#mozaic Slack channel](https://adeo-tech-community.slack.com/archives/CKQJZL7C4) — your reports directly help us improve the tool. The **Mozaic Migration** VS Code extension automates the migration of Mozaic Design System v1 components to v2 across Vue and SCSS files. It leverages GitHub Copilot with locally bundled migration guides to apply intelligent, context-aware changes without requiring an external server. #### Prerequisites - VS Code 1.99 or later - [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) installed and authenticated #### Installation 1. Download mozaic-migrate-0.1.1.vsix 2. Open VS Code 3. Go to **Extensions → ⋯ → Install from VSIX…** 4. Select the downloaded file Once installed, a Mozaic icon appears in the Activity Bar (the vertical icon strip on the left side of VS Code). Clicking it opens the Mozaic Migration panel, where you can see all the files and components that still need to be migrated. #### What it migrates **Component migration** For each v1 component found in a `.vue` file, Copilot applies the full migration: renamed props, removed or replaced props, updated event names, slot changes, and any related logic in the same file — including computed properties, watchers, or methods that reference the changed API. The migration is guided by per-component guides bundled in the extension, so it understands the specific changes between v1 and v2 for each component. **Icon migration** Icon names changed between v1 and v2. The extension resolves each v1 icon name to its v2 equivalent (e.g. `ArrowArrowBottom` → `ChevronDown`, `PublishTrashbin` → `Trash`) using the full icon mapping table. **Style migration** The extension migrates SCSS files with v1 patterns to their v2 equivalents: - Import paths: `@import '...@mozaic-ds...'` → `@use` - Spacing tokens: `$mu0`, `$mu4`, etc. → `$spacing-*` or `px-to-rem()` - Deprecated mixins: `magic-unit-rem()`, `set-font-scale()`, `import-font-families` - Utility classes: `ml-flexy` - Color tokens: resolved to v2 semantic tokens based on the selected brand (Leroy Merlin, ADEO, or M Brand) #### Inline CodeLens When a `.vue` file contains v1 components, clickable actions appear inline in the editor: - **⚡ Migrate this file (N v1 components)** — at the top of the file - **⚡ Migrate [ComponentName]** — on each line containing a v1 component All changes are **undoable** with Ctrl+Z. #### Sidebar panel A **Mozaic Migration** panel is added to the Activity Bar. It lists all detected v1 components, grouped either **by file** or **by component type** (toggle with the icons at the top).

Sidebar grouped by component type — View by component type

Available actions from the sidebar:

Action	Description
Migrate All	Migrates all pending components across the workspace
Migrate All Styles	Migrates all SCSS files with v1 patterns
Stop	Cancels an ongoing migration
Refresh	Rescans the workspace
Clear History	Clears the Done log and migration markers

Right-clicking a node in the tree provides additional granular options: migrate a specific file, a single component instance, all instances of a component type, or a component type scoped to one file. Status indicators: 🔵 pending · 🟠 in progress · 🟢 done · 🟡 SCSS file. #### Command Palette

Command	Description
`Mozaic: Migrate this component`	Migrates the component on the current line
`Mozaic: Migrate all v1 components in file`	Migrates all v1 components in the active file
`Mozaic: Migrate SCSS styles`	Migrates all SCSS files in the workspace
`Mozaic: Remove data-mozaic-v2 markers`	Removes migration markers (to re-migrate a file)

#### Configuration **`mozaic.componentRegistration`** _(default: `"explicit"`)_ Controls how component imports are handled after migration.

Value	Behavior
`auto`	Auto-detects based on existing imports in the file
`global`	Never adds imports (assumes global registration)
`explicit`	Always adds or updates imports from `@mozaic-ds/vue`

```json // .vscode/settings.json { "mozaic.componentRegistration": "explicit" } ``` #### About `data-mozaic-v2` markers After migrating a component, the extension adds a `data-mozaic-v2` attribute to the element. This marker signals that the component has already been migrated to v2, preventing the extension from processing it again on subsequent scans. If you need to re-migrate a specific component, remove its `data-mozaic-v2` attribute manually in the file — the extension will detect it again on the next scan. Once your entire migration is complete, use the **`Mozaic: Remove data-mozaic-v2 markers`** command from the Command Palette to clean up all markers from the codebase before committing.