@mozaic-ds/vue

import { Meta } from '@storybook/addon-docs/blocks'; <Meta title="Migration Guide" /> # 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 <table> <thead> <tr> <th>V1 Component</th> <th>V2 Component</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td> <code>MAccordion</code> </td> <td> <code>MAccordionList</code> + <code>MAccordionListItem</code> </td> <td>🔀 Split</td> </tr> <tr> <td> <code>MActionBar</code> + <code>MBottomBar</code> </td> <td> <code>MActionBottomBar</code> </td> <td>🔗 Merged</td> </tr> <tr> <td> <code>MListBoxActions</code> </td> <td> <code>MActionListBox</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td>—</td> <td> <code>MAvatar</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MBreadcrumb</code> </td> <td> <code>MBreadcrumb</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MMenu</code> </td> <td> <code>MBuiltInMenu</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td> <code>MButton</code> </td> <td> <code>MButton</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MCallout</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MCarousel</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MCheckbox</code> </td> <td> <code>MCheckbox</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MCheckboxGroup</code> </td> <td> <code>MCheckboxGroup</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MChecklistMenu</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MCircularProgressBar</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MAutocomplete</code> + <code>MDropdown</code> </td> <td> <code>MCombobox</code> </td> <td>🔗 Merged</td> </tr> <tr> <td> <code>MContainer</code> </td> <td> <code>MContainer</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MDatePicker</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MDivider</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MLayer</code> </td> <td> <code>MDrawer</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td> <code>MField</code> </td> <td> <code>MField</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MFieldGroup</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MFileUploader</code> </td> <td> <code>MFileUploader</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MFileUploaderItem</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MFlag</code> </td> <td> <code>MFlag</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MIcon</code> </td> <td> <em>removed</em> </td> <td>🗑️ Removed</td> </tr> <tr> <td>—</td> <td> <code>MIconButton</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MKpiItem</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MProgress</code> </td> <td> <code>MLinearProgressBarBuffer</code> +{' '} <code>MLinearProgressBarPercentage</code> </td> <td>🔀 Split</td> </tr> <tr> <td> <code>MLink</code> </td> <td> <code>MLink</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MLoader</code> </td> <td> <code>MLoader</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MLoadingOverlay</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MModal</code> </td> <td> <code>MModal</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MNavigationIndicator</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MNotification</code> </td> <td> <code>MStatusNotification</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td>—</td> <td> <code>MNumberBadge</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MListbox</code> </td> <td> <code>MOptionListBox</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td> <code>MOverlay</code> </td> <td> <code>MOverlay</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MPageHeader</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MPagination</code> </td> <td> <code>MPagination</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MPasswordInput</code> </td> <td> <code>MPasswordInput</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MPhoneNumber</code> </td> <td> <code>MPhoneNumber</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MPinCode</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MPopover</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MQuantitySelector</code> </td> <td> <code>MQuantitySelector</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MRadio</code> </td> <td> <code>MRadio</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MRadioGroup</code> </td> <td> <code>MRadioGroup</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MSegmentedControl</code> </td> <td> <code>MSegmentedControl</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MSelect</code> </td> <td> <code>MSelect</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MSidebar</code> </td> <td> <code>MSidebar</code> + 6 sub-components </td> <td>🔀 Split</td> </tr> <tr> <td>—</td> <td> <code>MSidebarExpandableItem</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MSidebarFooter</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MSidebarHeader</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MSidebarNavItem</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MSidebarShortcutItem</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MSidebarShortcuts</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MStarRating</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MBadge</code> </td> <td> <code>MStatusBadge</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td>—</td> <td> <code>MStatusDot</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MStatusMessage</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MStepper</code> (<code>compact: false</code>) </td> <td> <code>MStepperInline</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td> <code>MStepper</code> (<code>compact: true</code>) </td> <td> <code>MStepperCompact</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td>—</td> <td> <code>MStepperBottomBar</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MStepperStacked</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MTab</code> / <code>MTabsV2</code> </td> <td> <code>MTabs</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td> <code>MTag</code> </td> <td> <code>MTag</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MTextArea</code> </td> <td> <code>MTextArea</code> </td> <td>✅ Same name</td> </tr> <tr> <td> <code>MTextInput</code> </td> <td> <code>MTextInput</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MTile</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MTileClickable</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MTileExpandable</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MOptionCard</code> </td> <td> <code>MTileSelectable</code> </td> <td>🔄 Renamed</td> </tr> <tr> <td>—</td> <td> <code>MToaster</code> </td> <td>✨ New</td> </tr> <tr> <td> <code>MToggle</code> </td> <td> <code>MToggle</code> </td> <td>✅ Same name</td> </tr> <tr> <td>—</td> <td> <code>MToggleGroup</code> </td> <td>✨ New</td> </tr> <tr> <td>—</td> <td> <code>MTooltip</code> </td> <td>✨ New</td> </tr> </tbody> </table> ### 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. <table> <thead> <tr> <th>V1 Token</th> <th>Brand</th> <th>Value</th> <th>Text / Icon</th> <th>Background</th> <th>Border</th> </tr> </thead> <tbody> <tr> <td> <code>$color-primary-01-100</code> </td> <td>Leroy Merlin</td> <td> <code>#EBF5DE</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-01-200</code> </td> <td>Leroy Merlin</td> <td> <code>#C5E39E</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-01-300</code> </td> <td>Leroy Merlin</td> <td> <code>#9ED05F</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-01-400</code> </td> <td>Leroy Merlin</td> <td> <code>#78BE20</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-01-500</code> </td> <td>Leroy Merlin</td> <td> <code>#46A610</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-600</code> </td> <td>Leroy Merlin</td> <td> <code>#188803</code> </td> <td> <code>$color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-700</code> </td> <td>Leroy Merlin</td> <td> <code>#006902</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-800</code> </td> <td>Leroy Merlin</td> <td> <code>#035010</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-900</code> </td> <td>Leroy Merlin</td> <td> <code>#023618</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-100</code> </td> <td>ADEO</td> <td> <code>#D9F0F3</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-01-200</code> </td> <td>ADEO</td> <td> <code>#91D5DB</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-01-300</code> </td> <td>ADEO</td> <td> <code>#48BAC4</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-01-400</code> </td> <td>ADEO</td> <td> <code>#009EAC</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-01-500</code> </td> <td>ADEO</td> <td> <code>#00919F</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-600</code> </td> <td>ADEO</td> <td> <code>#007F8C</code> </td> <td> <code>$color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-700</code> </td> <td>ADEO</td> <td> <code>#006974</code> </td> <td> <code>~ $color-icon-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-800</code> </td> <td>ADEO</td> <td> <code>#004E57</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-900</code> </td> <td>ADEO</td> <td> <code>#002E33</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-02-100</code> </td> <td>M Brand</td> <td> <code>#FFE2BD</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-02-200</code> </td> <td>M Brand</td> <td> <code>#FFBF6B</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-02-300</code> </td> <td>M Brand</td> <td> <code>#FF941A</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>$color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-02-400</code> </td> <td>M Brand</td> <td> <code>#EF7F00</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-02-500</code> </td> <td>M Brand</td> <td> <code>#E05A00</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-02-600</code> </td> <td>M Brand</td> <td> <code>#C34400</code> </td> <td> <code>$color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-02-700</code> </td> <td>M Brand</td> <td> <code>#943300</code> </td> <td> <code>~ $color-text-accent</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-02-800</code> </td> <td>M Brand</td> <td> <code>#702700</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-02-900</code> </td> <td>M Brand</td> <td> <code>#421700</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> </tbody> </table> **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. <table> <thead> <tr> <th>V1 Token</th> <th>Brand</th> <th>Value</th> <th>Text / Icon</th> <th>Background</th> <th>Border</th> </tr> </thead> <tbody> <tr> <td> <code>$color-primary-02-100</code> </td> <td>Leroy Merlin</td> <td> <code>#EEEFF1</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-02-200</code> </td> <td>Leroy Merlin</td> <td> <code>#CFD2D8</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>$color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-02-300</code> </td> <td>Leroy Merlin</td> <td> <code>#B3B7C1</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-02-400</code> </td> <td>Leroy Merlin</td> <td> <code>#8F94A3</code> </td> <td> <code>$color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-02-500</code> </td> <td>Leroy Merlin</td> <td> <code>#6A7081</code> </td> <td> <code>$color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-02-600</code> </td> <td>Leroy Merlin</td> <td> <code>#494F60</code> </td> <td> <code>$color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-02-700</code> </td> <td>Leroy Merlin</td> <td> <code>#343B4C</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-02-800</code> </td> <td>Leroy Merlin</td> <td> <code>#242938</code> </td> <td> <code>$color-text-primary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-02-900</code> </td> <td>Leroy Merlin</td> <td> <code>#171B26</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-100</code> </td> <td>ADEO</td> <td> <code>#EAEDEF</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-200</code> </td> <td>ADEO</td> <td> <code>#CDD4D8</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>$color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-300</code> </td> <td>ADEO</td> <td> <code>#B0BBC0</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-400</code> </td> <td>ADEO</td> <td> <code>#92A2A9</code> </td> <td> <code>$color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-500</code> </td> <td>ADEO</td> <td> <code>#758992</code> </td> <td> <code>$color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-600</code> </td> <td>ADEO</td> <td> <code>#5B737D</code> </td> <td> <code>$color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-700</code> </td> <td>ADEO</td> <td> <code>#405D68</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-800</code> </td> <td>ADEO</td> <td> <code>#264653</code> </td> <td> <code>$color-text-primary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-blue-900</code> </td> <td>ADEO</td> <td> <code>#082435</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-100</code> </td> <td>ADEO</td> <td> <code>#E7E7F0</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-200</code> </td> <td>ADEO</td> <td> <code>#C5C5DC</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-300</code> </td> <td>ADEO</td> <td> <code>#A4A3C7</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-accent</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-400</code> </td> <td>ADEO</td> <td> <code>#8281B2</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-500</code> </td> <td>ADEO</td> <td> <code>#605F9D</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-600</code> </td> <td>ADEO</td> <td> <code>#4B4A8C</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-700</code> </td> <td>ADEO</td> <td> <code>#393879</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-800</code> </td> <td>ADEO</td> <td> <code>#282863</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-purple-900</code> </td> <td>ADEO</td> <td> <code>#1A1A4B</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-accent-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-100</code> </td> <td>ADEO</td> <td> <code>#EEEDEA</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-200</code> </td> <td>ADEO</td> <td> <code>#DDDCD5</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-300</code> </td> <td>ADEO</td> <td> <code>#C2C1BA</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-400</code> </td> <td>ADEO</td> <td> <code>#A7A6A0</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-500</code> </td> <td>ADEO</td> <td> <code>#8C8B85</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-600</code> </td> <td>ADEO</td> <td> <code>#71706B</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-700</code> </td> <td>ADEO</td> <td> <code>#555550</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-800</code> </td> <td>ADEO</td> <td> <code>#3A3936</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-secondary-sandgrey-900</code> </td> <td>ADEO</td> <td> <code>#1E1E1C</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-100</code> </td> <td>M Brand</td> <td> <code>#E5EFFF</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-01-200</code> </td> <td>M Brand</td> <td> <code>#B8D3FF</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>$color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-01-300</code> </td> <td>M Brand</td> <td> <code>#8AB7FF</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-primary-01-400</code> </td> <td>M Brand</td> <td> <code>#5797FF</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-01-500</code> </td> <td>M Brand</td> <td> <code>#1A6EFF</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-01-600</code> </td> <td>M Brand</td> <td> <code>#0058DB</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-primary-01-700</code> </td> <td>M Brand</td> <td> <code>#004EA8</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-800</code> </td> <td>M Brand</td> <td> <code>#00387A</code> </td> <td> <code>$color-text-primary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-primary-01-900</code> </td> <td>M Brand</td> <td> <code>#002A5B</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> </tbody> </table> **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 <table> <thead> <tr> <th>V1 Token</th> <th>Brand</th> <th>Value</th> <th>Text / Icon</th> <th>Background</th> <th>Border</th> </tr> </thead> <tbody> <tr> <td> <code>$color-grey-000</code> </td> <td>All</td> <td> <code>#FFFFFF</code> </td> <td> <code>$color-text-primary-inverse</code> </td> <td> <code>$color-background-primary</code> </td> <td> <code>$color-border-inverse</code> </td> </tr> <tr> <td> <code>$color-grey-100</code> </td> <td>All</td> <td> <code>#E6E6E6</code> </td> <td> <code>$color-text-secondary-inverse</code> </td> <td> <code>$color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-grey-200</code> </td> <td>All</td> <td> <code>#CCCCCC</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-secondary</code> </td> <td> <code>$color-border-primary</code> </td> </tr> <tr> <td> <code>$color-grey-300</code> </td> <td>All</td> <td> <code>#B3B3B3</code> </td> <td> <code>~ $color-text-secondary-inverse</code> </td> <td> <code>$color-background-secondary</code> </td> <td> <code>~ $color-border-primary</code> </td> </tr> <tr> <td> <code>$color-grey-400</code> </td> <td>All</td> <td> <code>#999999</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary</code> </td> <td> <code>$color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-grey-500</code> </td> <td>All</td> <td> <code>#808080</code> </td> <td> <code>~ $color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-grey-600</code> </td> <td>All</td> <td> <code>#666666</code> </td> <td> <code>$color-text-tertiary</code> </td> <td> <code>~ $color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-secondary</code> </td> </tr> <tr> <td> <code>$color-grey-700</code> </td> <td>All</td> <td> <code>#4D4D4D</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-grey-800</code> </td> <td>All</td> <td> <code>#333333</code> </td> <td> <code>~ $color-text-secondary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>$color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-grey-900</code> </td> <td>All</td> <td> <code>#191919</code> </td> <td> <code>~ $color-text-primary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> <tr> <td> <code>$color-grey-999</code> </td> <td>All</td> <td> <code>#000000</code> </td> <td> <code>$color-text-primary</code> </td> <td> <code>$color-background-secondary-inverse</code> </td> <td> <code>~ $color-border-tertiary</code> </td> </tr> </tbody> </table> **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). <table> <thead> <tr> <th>V1 Token</th> <th>Brand</th> <th>Value</th> <th>Text / Icon</th> <th>Background</th> <th>Border</th> </tr> </thead> <tbody> <tr> <td> <code>$color-danger-100</code> </td> <td>All</td> <td> <code>#FDEAEA</code> </td> <td> <code>~ $color-status-text-error</code> </td> <td> <code>$color-status-background-error</code> </td> <td> <code>~ $color-status-border-error</code> </td> </tr> <tr> <td> <code>$color-danger-200</code> </td> <td>All</td> <td> <code>#F8BCBB</code> </td> <td> <code>~ $color-status-text-error</code> </td> <td> <code>~ $color-status-background-error</code> </td> <td> <code>~ $color-status-border-error</code> </td> </tr> <tr> <td> <code>$color-danger-300</code> </td> <td>All</td> <td> <code>#F38D8C</code> </td> <td> <code>~ $color-status-text-error</code> </td> <td> <code>~ $color-status-background-error</code> </td> <td> <code>~ $color-status-border-error</code> </td> </tr> <tr> <td> <code>$color-danger-400</code> </td> <td>All</td> <td> <code>#EF5F5C</code> </td> <td> <code>~ $color-status-text-error</code> </td> <td> <code>~ $color-status-background-error</code> </td> <td> <code>$color-status-border-error</code> </td> </tr> <tr> <td> <code>$color-danger-500</code> </td> <td>All</td> <td> <code>#EA302D</code> </td> <td> <code>~ $color-status-text-error</code> </td> <td> <code>~ $color-status-background-error</code> </td> <td> <code>~ $color-status-border-error</code> </td> </tr> <tr> <td> <code>$color-danger-600</code> </td> <td>All</td> <td> <code>#C61112</code> </td> <td> <code>$color-status-text-error</code> </td> <td> <code>~ $color-status-background-error</code> </td> <td>