\\n\")), mdx(Preview, {\n path: \"TagList\",\n mdxType: \"Preview\"\n }));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#import","title":"Import"},{"url":"#available-types-of-tags","title":"Available types of tags","items":[{"url":"#the-text-tag","title":"The text tag","items":[{"url":"#available-modifiers-","title":"Available modifiers :"}]},{"url":"#the-link-tag","title":"The link tag","items":[{"url":"#available-modifiers--1","title":"Available modifiers :"}]},{"url":"#the-selectable-tag","title":"The selectable tag","items":[{"url":"#available-modifiers--2","title":"Available modifiers :"}]},{"url":"#the-removable-tag","title":"The removable tag","items":[{"url":"#available-modifiers--3","title":"Available modifiers :"}]},{"url":"#the-tag-list","title":"The tag list"}]}]},"fields":{"slug":"/Components/Tag/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Tag/code.mdx","extension":"mdx"}},"frontmatter":{"title":"Code","order":2}},"allMdx":{"totalCount":204,"edges":[{"node":{"id":"7715297e-ce66-53b6-a07e-20a06544cefe","frontmatter":{"title":"Tooltip","order":14,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtooltip--try-it"},"freemarker":null},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A tooltip allows you to display further informations to the user when needed. It can also be used to explicitely specify a visual element."},"fields":{"slug":"/Components/Tooltip/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Tooltip/index.mdx","extension":"mdx"}},"excerpt":"A tooltip allows you to display further informations to the user when needed. It can also be used to explicitely specify a visual element…"}},{"node":{"id":"779cae2e-3950-51c5-af38-2b8f52ba90be","frontmatter":{"title":"Tags","order":13,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtag--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/tags/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Tags are used to categorize, show filters or make selections. They display product properties."},"fields":{"slug":"/Components/Tag/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Tag/index.mdx","extension":"mdx"}},"excerpt":"Tags are used to categorize, show filters or make selections. They display product properties. Please check flags for other use cases…"}},{"node":{"id":"f62ec7ef-84ed-5356-926e-c00cf7cd4b7b","frontmatter":{"title":"Tabs","order":12,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtab--try-it"},"freemarker":null},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Tabs allow the user to navigate from a content to another within the same context. It keeps the user on the same page."},"fields":{"slug":"/Components/Tabs/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Tabs/index.mdx","extension":"mdx"}},"excerpt":"Tabs allow the user to navigate from a content to another within the same context. It keeps the user on the same page. This is the default…"}},{"node":{"id":"12491567-34fb-5241-963f-6b2d48892023","frontmatter":{"title":"Acceptance criterias","order":11,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/AcceptanceCriterias/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/AcceptanceCriterias/index.mdx","extension":"mdx"}},"excerpt":"The pull request (obviously) need to pass all automated tests The documentation need to be reviewed by the core team members plus at least…"}},{"node":{"id":"22160426-dea2-5ffb-a9ce-8d55c44155f0","frontmatter":{"title":"Progress bar","order":10,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A progress bar allows you to focus the attention of the user with a visual clue on his progress in a particular journey."},"fields":{"slug":"/Components/ProgressBar/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/ProgressBar/index.mdx","extension":"mdx"}},"excerpt":"A progress bar allows you to focus the attention of the user with a visual clue on his progress in a particular journey. Variations Linear…"}},{"node":{"id":"94c95f9b-a4a9-5f97-b659-eef2b99bf2bb","frontmatter":{"title":"Rating Stars","order":10,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mstarsinput--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/mozaic-freemarker/pages/3_Components/rating-stars/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Rating stars is a pattern you’ll find in almost every website. It has two main usages. First, it allows the user to give feedback on the current experience with a product or a service. Second, it allows a brand to provide some informations on other user’s opinion on a product or a service to make his choice easier."},"fields":{"slug":"/Components/RatingStars/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/RatingStars/index.mdx","extension":"mdx"}},"excerpt":"Rating stars is a pattern you'll find in almost every website. It has two main usages . First, it allows the user to give feedback on the…"}},{"node":{"id":"9d9729d8-7cdf-59e9-af5d-b8f95a2d167d","frontmatter":{"title":"Submit a new pattern","order":10,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/SubmitNewPattern/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/SubmitNewPattern/index.mdx","extension":"mdx"}},"excerpt":"If you are a designer you also need to read the Definition of Done for Sketch symbols contribution page The creation of a new pattern on…"}},{"node":{"id":"a5355c4c-84a2-5c23-b7c6-192699d66ea5","frontmatter":{"title":"Spacing","order":9,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Spacing/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"5ce0ca68-0540-5a04-90be-60292a822dfd","frontmatter":{"title":"Typography","order":9,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"5e12828a-4362-5d7a-95b5-bf9e913afedf","frontmatter":{"title":"Utilities","order":9,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"7cb83917-201d-5fed-8456-c58aefa7238a","frontmatter":{"title":"Toggle","order":9,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtoggle--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/switch/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and \"on/off\" switch"},"fields":{"slug":"/Components/Form/Toggle/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Toggle/index.mdx","extension":"mdx"}},"excerpt":"A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to…"}},{"node":{"id":"5d9cbe23-f2b8-50c0-8e24-68703f528cff","frontmatter":{"title":"Want to Help ?","order":8,"links":null,"status":null,"description":"Discover how you could contribute to Mozaic"},"fields":{"slug":"/WantToHelp/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/WantToHelp/index.mdx","extension":"mdx"}},"excerpt":"Want to help ? Here are things that you can work on with us Help us build/migrate components Dialog component Tabs component Tooltips…"}},{"node":{"id":"8350a13b-9903-58c3-bd8e-c104a41bc315","frontmatter":{"title":"Pagination","order":8,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mpagination--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/mozaic-freemarker/pages/3_Components/pagination/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Pagination enables users to navigate from a page to another one, especially when a large content needs to be splitted in several parts. It's mainly used on pages like the search engine result page or the list pages."},"fields":{"slug":"/Components/Pagination/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Pagination/index.mdx","extension":"mdx"}},"excerpt":"Pagination enables users to navigate from a page to another one, especially when a large content needs to be splitted in several parts. It's…"}},{"node":{"id":"30fbfd2e-62e7-5444-8814-9eb9e7fcc12d","frontmatter":{"title":"Text input","order":8,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtextinput--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/input/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context"},"fields":{"slug":"/Components/Form/TextInput/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/TextInput/index.mdx","extension":"mdx"}},"excerpt":"Preview Inputs are used to create input fields with text on a single line . Their states depends on the user interaction or the context…"}},{"node":{"id":"1e94a13e-1d87-526b-b9b2-d1d955753f70","frontmatter":{"title":"Strokes","order":8,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":"Strokes are visual elements that space and structure contents. Different border thickness are used to create a hierarchy."},"fields":{"slug":"/Foundations/Utilities/Strokes/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/Strokes/index.mdx","extension":"mdx"}},"excerpt":"Strokes are visual elements that space and structure contents. Different border thickness are used to create a hierarchy. Preview Strokes…"}},{"node":{"id":"b2d89d01-3182-56aa-a198-73cfc75074de","frontmatter":{"title":"Need help","order":7,"links":null,"status":null,"description":null},"fields":{"slug":"/Help/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Help/index.mdx","extension":"mdx"}},"excerpt":"There are three main ways to get quick help from Mozaic. And they’re all pretty simple: 1 - Via Slack. We have a dedicated slack channel…"}},{"node":{"id":"4ab53bdb-7e62-5c1f-84bd-bab6acc117b2","frontmatter":{"title":"Modals","order":7,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action."},"fields":{"slug":"/Components/Modals/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Modals/index.mdx","extension":"mdx"}},"excerpt":"A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It…"}},{"node":{"id":"2fd154cc-f180-593e-bc4f-0833def4f79b","frontmatter":{"title":"Notification","order":7,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mnotification--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/toasters/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Notifications are used to bring the user's attention on a piece of information that needs to be known. A notification is usually the result of an action made by the user."},"fields":{"slug":"/Components/Notification/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Notification/index.mdx","extension":"mdx"}},"excerpt":"Notifications are used to bring the user's attention on a piece of information that needs to be known. A notification is usually the result…"}},{"node":{"id":"b53d8f61-7a8c-5323-b1b1-0e8f1b2c9a5e","frontmatter":{"title":"Text area","order":7,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtextarea--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/textarea/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A text area is used to fill multi-line text. They share appearence and states with text inputs"},"fields":{"slug":"/Components/Form/TextArea/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/TextArea/index.mdx","extension":"mdx"}},"excerpt":"A text area is used to fill multi-line text. They share appearence and states with text inputs . Text areas are used for content with…"}},{"node":{"id":"7498f2a6-481d-5c4e-ae2a-74bbd8ae2f5f","frontmatter":{"title":"Submit a bug fix","order":7,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/SubmitBugFix/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/SubmitBugFix/index.mdx","extension":"mdx"}},"excerpt":"If you want to fix a bug, prior to that it is better to have a related issue or jira ticket describing the bug, and a quick talk with the…"}},{"node":{"id":"d508e88e-2889-566e-a32c-499335ffb898","frontmatter":{"title":"Shadows","order":7,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/Shadows/index.mdx","extension":"mdx"}},"excerpt":"Preview Variations Box-shadow is available in 3 sizes : small , medium , large Small Medium Large"}},{"node":{"id":"1b0a14f2-1d2e-5e89-b31b-7ac5f7b6a043","frontmatter":{"title":"Report a bug","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/ReportBug/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/ReportBug/index.mdx","extension":"mdx"}},"excerpt":"We do our best to make MOZAIC a simple, turnkey, and stable tool;\nhowever, you may encounter bugs when using it (see below the section…"}},{"node":{"id":"febad07b-83a8-5b33-b89e-d3124bbd8749","frontmatter":{"title":"Layers","order":6,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"In modern layouts, a layer is a way to give further actions or display to the user specific content without breaking the user flow, like login or cart overview."},"fields":{"slug":"/Components/Layers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Layers/index.mdx","extension":"mdx"}},"excerpt":"In modern layouts, a layer is a way to give further actions or display to the user specific content without breaking the user flow, like…"}},{"node":{"id":"d994ee71-3f77-5460-a7f6-07c69374fd5b","frontmatter":{"title":"Links","order":6,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mlink--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/links/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page"},"fields":{"slug":"/Components/Links/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Links/index.mdx","extension":"mdx"}},"excerpt":"A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page. Please use a button…"}},{"node":{"id":"dcbdfd90-be18-5c59-9da6-8fb8d2b6ac4d","frontmatter":{"title":"Specs","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Icons/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy"}},{"node":{"id":"a37a8792-fe96-5c9e-ad38-039e836f0fcd","frontmatter":{"title":"Select","order":6,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mselect--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/select/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A select is a selection tool used in forms, allowing user to choose between multiple predefined options."},"fields":{"slug":"/Components/Form/Select/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Select/index.mdx","extension":"mdx"}},"excerpt":"A select is a selection tool used in forms, allowing user to choose between multiple predefined options. Overview Selects are a combination…"}},{"node":{"id":"c42be224-9711-5f48-80f6-1989c2001f10","frontmatter":{"title":"Add a new pattern","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/AddNewPattern/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/AddNewPattern/index.mdx","extension":"mdx"}},"excerpt":"If you are a designer you also need to read the Definition of Done for Sketch symbols contribution page MOZAIC being an evolving and…"}},{"node":{"id":"e075783a-e026-5330-bd0f-a4d2e9540285","frontmatter":{"title":"Hero styles","order":6,"links":null,"status":{"sketch":"ready","scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Typography/HeroStyles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/HeroStyles/index.mdx","extension":"mdx"}},"excerpt":"The hero patterns provide typographic style for a big main page heading. They are mainly used with a picture or color in the background…"}},{"node":{"id":"38af12c6-4184-5314-85d0-6eb06911c046","frontmatter":{"title":"Preset Adeo","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/PresetAdeo/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/PresetAdeo/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is first thought to answer to LEROY MERLIN's brand guidelines but customisation is also allowed. Adeo color palette We have set…"}},{"node":{"id":"dad3c240-f132-54db-8b76-be1a8335cd40","frontmatter":{"title":"Tutorial","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/npmScriptTutorial/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/npmScriptTutorial/index.mdx","extension":"mdx"}},"excerpt":"Setup a project using Mozaic and npm scripts In this example, in order to familiarize with Mozaic, we will set up a simple web dev…"}},{"node":{"id":"e18007a1-fa01-5be4-9191-fc3dcd060263","frontmatter":{"title":"Updates","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Updates/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"67fc8a5b-defe-5acb-a189-d4126677dca8","frontmatter":{"title":"Flags","order":5,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mflag--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/flags/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A flag is used to display meta-informations about a product or a service. It must be displayed at the top of the content, and used as an indicator of a content main category"},"fields":{"slug":"/Components/Flags/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Flags/index.mdx","extension":"mdx"}},"excerpt":"A flag is used to display meta-informations about a product or a service. It must be displayed at the top of the content, and used as an…"}},{"node":{"id":"0aed9e46-d5ce-500f-a983-14693f18c5aa","frontmatter":{"title":"Design","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Tag/design.mdx","extension":"mdx"}},"excerpt":"Tags sketch file is composed of three sections : The sketch file includes other form elements. Here is the section you'll find the tag…"}},{"node":{"id":"95de92dc-1089-5456-9e90-7928ca6a6ec8","frontmatter":{"title":"Submit changes","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"e37bfa17-836f-5d96-a8eb-16f4cf4b877c","frontmatter":{"title":"Design","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/designers/","fileName":{"name":"designers","base":"designers.mdx","relativePath":"docs/Foundations/Icons/designers.mdx","extension":"mdx"}},"excerpt":"Icons must be recognisable at first sight . Here you will find how LEROY MERLIN's icon kit has been made along with some design…"}},{"node":{"id":"17a97202-4d44-54a6-922c-9adc9b70a503","frontmatter":{"title":"Layout","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"697701ad-064e-53c4-8452-82015d8791de","frontmatter":{"title":"Quantity selector","order":5,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example"},"fields":{"slug":"/Components/Form/QuantitySelector/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/QuantitySelector/index.mdx","extension":"mdx"}},"excerpt":"The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the…"}},{"node":{"id":"f9eba0ca-392e-54cd-ad45-aad62cc5346a","frontmatter":{"title":"Radio","order":5,"links":{"vue":null,"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/radio/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone."},"fields":{"slug":"/Components/Form/Radio/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Radio/index.mdx","extension":"mdx"}},"excerpt":"A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone. Overview A radio button…"}},{"node":{"id":"e94712dd-2b2c-505c-955b-fdf6ef640001","frontmatter":{"title":"Heading styles","order":5,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"The heading pattern provides basic typographic styles for your page titles, also known as H1. Each heading has its own sizes depending on the breakpoints."},"fields":{"slug":"/Foundations/Typography/HeadingStyles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/HeadingStyles/index.mdx","extension":"mdx"}},"excerpt":"The heading pattern provides basic typographic styles for your page titles, also known as H1. Each heading has its own sizes depending on…"}},{"node":{"id":"0e98a11e-88f9-5324-a77b-2d5edc005164","frontmatter":{"title":"Naming convention","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/namingConvention/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/namingConvention/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is a product used by a lot of people. When so many people work together from different places on such a big project, you need to…"}},{"node":{"id":"9204adaa-0cf7-5eb6-bbce-dae079c306da","frontmatter":{"title":"Conventions","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/CssNamingConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/CssNamingConventions/index.mdx","extension":"mdx"}},"excerpt":"ITCSS Introduction ITCSS stand for Inverted Triangle architecture for CSS , it is a way to better manage specificity and to categorise…"}},{"node":{"id":"2bbc6282-7f25-5eb8-af3a-78653c87baca","frontmatter":{"title":"Assets","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/assets/","fileName":{"name":"assets","base":"assets.mdx","relativePath":"docs/GetStarted/Developers/Installation/assets.mdx","extension":"mdx"}},"excerpt":"Presentation Mozaic ship with static assets like fonts, icons, logos etc.. you can find fonts and icons in the following packages: @mozaic…"}},{"node":{"id":"400cb250-0b77-57cc-9d63-7c6ac659fafb","frontmatter":{"title":"Contributing","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"0fb8fe54-3d23-5064-acdc-1023d40e91ee","frontmatter":{"title":"Accessibility","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Accordion/accessibilty/","fileName":{"name":"accessibilty","base":"accessibilty.mdx","relativePath":"docs/Components/Accordion/accessibilty.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic"}},{"node":{"id":"7b9f3d51-ae50-5b3e-8971-9c62f7d3e7c8","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Buttons/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Buttons/design.mdx","extension":"mdx"}},"excerpt":"Buttons sketch file is composed of three sections : 👾 For developers : This part is a specific section for developers, for a better…"}},{"node":{"id":"df8e053f-ec0b-510d-854b-e87e03688cd1","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Flags/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Flags/design.mdx","extension":"mdx"}},"excerpt":"Flags sketch file is composed of two sections : 🛠 ToolKit : The ToolKit section bring together the dedicated symbols used for building the…"}},{"node":{"id":"8018ab42-6a60-54f3-8d1c-85a209a4ef9c","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Links/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Links/design.mdx","extension":"mdx"}},"excerpt":"Links sketch file is composed of three sections : The sketch file includes only the single links. For the inline links, please apply…"}},{"node":{"id":"914f6b80-86ce-5939-8036-02aa4330324b","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Notification/design.mdx","extension":"mdx"}},"excerpt":"Notifications sketch file is made of two sections : 🛠 ToolKit : The ToolKit section brings together the dedicated symbols used for…"}},{"node":{"id":"14c62453-e0ef-5883-9f15-5757c2fb33aa","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/RatingStars/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/RatingStars/design.mdx","extension":"mdx"}},"excerpt":"Rating stars sketch file is composed of two sections: 👾 For developers: This part is a specific section for developers, for a better…"}},{"node":{"id":"1013faa1-ecfc-569f-8a6f-092b6783319f","frontmatter":{"title":"Design","order":4,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tabs/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Tabs/design.mdx","extension":"mdx"}},"excerpt":"Ready to use You will find a ReadyToUse section in the Sketch file to help you quickly use the tab bar pattern. Please use these symbols…"}},{"node":{"id":"6b34248d-5465-5d88-baf6-563b550a4deb","frontmatter":{"title":"Specs","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Tag/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / sizes Size name Paddings Font-size radius Small 4px 16px $mu025 $mu100 size.font.04 (14px) 0.75rem Medium…"}},{"node":{"id":"960065ef-1535-5c06-b66a-8bae6b21857d","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tooltip/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Tooltip/design.mdx","extension":"mdx"}},"excerpt":"Spacing Spacing is a very important part of visual consistency. You'll find the right spacing to use in the following images. The default…"}},{"node":{"id":"9982dd38-cccd-578e-98e6-a4283030ce48","frontmatter":{"title":"Icons","order":4,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Icons/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Icons/index.mdx","extension":"mdx"}},"excerpt":"An icon is a graphic representation of an object, a message or a movement. It's different from an illustration because of its simplistic…"}},{"node":{"id":"1670bb9b-d64c-5488-b927-d8efe3f45b50","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Checkbox/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Checkbox/design.mdx","extension":"mdx"}},"excerpt":"Checkboxes sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll…"}},{"node":{"id":"d391f028-213c-5e98-82da-d379d548221d","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/FileUploader/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/FileUploader/design.mdx","extension":"mdx"}},"excerpt":"File uploader sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you…"}},{"node":{"id":"078907b0-23d8-5c87-b80b-1a1c70ebba6a","frontmatter":{"title":"File uploader","order":4,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A file uploader is a pattern mainly used in forms. It allows the user to upload one or several files like pictures or documents."},"fields":{"slug":"/Components/Form/FileUploader/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/FileUploader/index.mdx","extension":"mdx"}},"excerpt":"A file uploader is a pattern mainly used in forms. It allows the user to upload one or several files like pictures or documents. Overview A…"}},{"node":{"id":"76579911-62d0-584c-b622-28fb12cc4fb3","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Radio/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Radio/design.mdx","extension":"mdx"}},"excerpt":"Radio sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll find…"}},{"node":{"id":"950d46bc-9093-50c7-917d-241b916aa06e","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Select/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Select/design.mdx","extension":"mdx"}},"excerpt":"Selects sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll find…"}},{"node":{"id":"25c9de7d-0b10-5381-bbc9-d3449ae9f8e3","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextArea/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/TextArea/design.mdx","extension":"mdx"}},"excerpt":"Text area sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll…"}},{"node":{"id":"35653c02-066e-533a-b0ba-a1d20f579861","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/TextInput/design.mdx","extension":"mdx"}},"excerpt":"Text input sketch file is merged with the global BA Forms file : 👾 For developers : This part is a specific section for developers, for a…"}},{"node":{"id":"59c84dcd-842d-5ce9-b6d8-32b4517f39e9","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Toggle/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Toggle/design.mdx","extension":"mdx"}},"excerpt":"Toggle sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll find…"}},{"node":{"id":"58a161a1-3d83-5d02-b9fc-a043dcf81bfe","frontmatter":{"title":"Add new icons","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/AddNewIcons/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/AddNewIcons/index.mdx","extension":"mdx"}},"excerpt":"We have divided this page in two different sections depending on what your profile is. If you're a designer working on Mozaic just go down…"}},{"node":{"id":"af9a7cef-b3b0-593d-aaa3-6c4cf257a9fc","frontmatter":{"title":"Design Tokens","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/DesignTokens/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/DesignTokens/index.mdx","extension":"mdx"}},"excerpt":"Definition Design tokens are named entities that store visual design information. These are used in place of hard-coded values (such as hex…"}},{"node":{"id":"9105e9fd-5d70-59e6-a456-6f1ebc238f82","frontmatter":{"title":"Pattern enhancement","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/PatternEnhancement/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/PatternEnhancement/index.mdx","extension":"mdx"}},"excerpt":"When using MOZAIC patterns, it may happen that they do not fully meet your needs. For example: You want to use another type of pattern…"}},{"node":{"id":"00c6038e-2550-59c0-bbf2-61988acff110","frontmatter":{"title":"Body styles","order":4,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A body is a paragraph or a multiline text. It provides basic typographic properties like font-size, line-height and font-weight."},"fields":{"slug":"/Foundations/Typography/BodyStyles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/BodyStyles/index.mdx","extension":"mdx"}},"excerpt":"A body is a paragraph or a multiline text. It provides basic typographic properties like font-size, line-height and font-weight. Recommended…"}},{"node":{"id":"b4b27168-4ae1-5902-a424-1ab18d1ccb4c","frontmatter":{"title":"How to use the UI kit","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/installation/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/installation/index.mdx","extension":"mdx"}},"excerpt":"1. Download the design files 2. Create a dedicated directory Create a directory somewhere on your computer (or a server) and store the…"}},{"node":{"id":"70c6734e-6783-55d7-aa02-e9ff5160b98f","frontmatter":{"title":"Tokens customization","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/CustomizeTokens/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/CustomizeTokens/index.mdx","extension":"mdx"}},"excerpt":"Principles Under the hood, Mozaic SCSS uses the compiled tokens that we provide in the @mozaic-ds/tokens npm package. This dependency is…"}},{"node":{"id":"4b8af042-e1a3-5fbc-9532-796359607974","frontmatter":{"title":"Import","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/import/","fileName":{"name":"import","base":"import.mdx","relativePath":"docs/GetStarted/Developers/Installation/import.mdx","extension":"mdx"}},"excerpt":"You need to create the bundle SCSS file (ex: src/bundle.scss ) that you want to build. Import paths: If you configured PostCSS properly…"}},{"node":{"id":"9a2d3f6a-112c-54e1-8e2a-e857455c9eec","frontmatter":{"title":"Stylelint","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/stylelint/","fileName":{"name":"stylelint","base":"stylelint.mdx","relativePath":"docs/GetStarted/Developers/Installation/stylelint.mdx","extension":"mdx"}},"excerpt":"Presentation A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. stylelint comes with Mozaic and it…"}},{"node":{"id":"a20f06b7-d879-54a3-9e55-b1e8a879d490","frontmatter":{"title":"Components","order":3,"links":null,"status":null,"description":"Here are the Components! There are a lot of them and they are very cool and well designed!"},"fields":{"slug":"/Components/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"9575058f-d08c-5122-a330-ce0eebdf0b71","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Accordion/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Accordion/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout State Property Token Default padding (top) mu-125 (1.25rem) Default padding-left mu-050 (0.5rem…"}},{"node":{"id":"b1c5de86-13eb-5ea7-84c5-d6033b3d81c7","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Breadcrumb/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Breadcrumb/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"d959919b-93e2-5ea8-9d9d-943f68de0c5a","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Buttons/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Buttons/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / sizes Size name Height Paddings Font-size radius Small 32px (2mu) 16px (1mu) size.font.04 (14px) radius.m (4px…"}},{"node":{"id":"2dd0b160-2c82-5f64-a2c3-a339cf70d182","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Dividers/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Dividers/specs.mdx","extension":"mdx"}},"excerpt":"Properties Layout CSS property Value Sass variable border-with 1px $divider-border-size border-color (default) #6f676c $color-divider…"}},{"node":{"id":"254ad863-1ed6-5f45-9e2c-b91938ad2bde","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Flags/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Flags/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout State Property Token Default padding $mu050 (0.5rem) Default font-size size.font.04 (14px) Color themes…"}},{"node":{"id":"5e433a0d-ff99-544e-8759-b22d4869fd46","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Layers/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Layers/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"9e1d020f-9ff8-56f6-971a-2247b81ec2e6","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Links/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Links/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / sizes Size name Height Paddings Font-size Small 24px (1.5mu) 16px (1mu) size.font.04 (14px) Regular (Default…"}},{"node":{"id":"05589c87-ccee-5bbb-993a-f0af8a6fe360","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Modals/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Modals/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"3fab659c-3f65-53d3-9447-eb08555e9f48","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Notification/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"e8d7c832-0df0-56af-be3a-6af7a1406cd2","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Notification/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Height Paddings Font-size radius Depends on text left: 64px(4mu) others: 24px(1.5mu) size.font.04 (14px…"}},{"node":{"id":"5245ebbf-00bf-5373-939f-8c6e5d9d3b43","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Pagination/spec/","fileName":{"name":"spec","base":"spec.mdx","relativePath":"docs/Components/Pagination/spec.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Variations Height Margins Font-size radius Mobile 48px (3mu) 24px (1.5mu) size.font.05 (22px) radius.m…"}},{"node":{"id":"0591c0af-dbe0-506f-9615-536d1df8ecfa","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/ProgressBar/accessibilty/","fileName":{"name":"accessibilty","base":"accessibilty.mdx","relativePath":"docs/Components/ProgressBar/accessibilty.mdx","extension":"mdx"}},"excerpt":"Color accessibility The progress bar is a user guidance component meaning that it is not critical for the user to see every variation. That…"}},{"node":{"id":"2950f89c-c7ed-5859-8bfb-56a1e7400143","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/RatingStars/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/RatingStars/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Stars sizes Size name Width and height Small 16px (1mu) Medium (Default size) 24px (1.5mu) Large 32px (2mu) ExtraLarge…"}},{"node":{"id":"abc656d5-5646-5313-bce0-b7089ac63b95","frontmatter":{"title":"Specs","order":3,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tabs/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Tabs/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Variations Height Paddings Font-size Default 52px (3.25mu) 16px (1mu) - 24px (1.5mu) size.font.05 (16px)"}},{"node":{"id":"57ed686e-b420-5af6-9474-bb09b76489ec","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Tag/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"81961aae-1211-5415-8932-de9608e01025","frontmatter":{"title":"Specs","order":3,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tooltip/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Tooltip/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Variations Height Paddings Font-size Default 52px (3.25mu) 16px (1mu) size.font.04 (14px) Color Variations…"}},{"node":{"id":"f96914b6-4baa-5ca2-ae9d-faec520d7b23","frontmatter":{"title":"Developers","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"af9ba390-5830-50c7-99fd-47df6c01a59e","frontmatter":{"title":"Colors","order":3,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Mozaic offers an adaptive and scalable color system. The color palette has been divided into four categories: Primary colors, Secondary colors, Greys and Status colors."},"fields":{"slug":"/Foundations/Colors/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Colors/index.mdx","extension":"mdx"}},"excerpt":"Mozaic offers an adaptive and scalable color system. The color palette has been divided into four categories: Primary colors , Secondary…"}},{"node":{"id":"ae25f779-2ac9-5013-a001-2a4e9ff4e074","frontmatter":{"title":"Color icons","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/catalogColor/","fileName":{"name":"catalogColor","base":"catalogColor.mdx","relativePath":"docs/Foundations/Icons/catalogColor.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"6e4a6fe3-1939-5099-9fbe-55e9d32e9ce2","frontmatter":{"title":"Developer guide","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"641386fb-39b3-5934-8e8a-9c2fb38107c2","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Checkbox/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Checkbox/specs.mdx","extension":"mdx"}},"excerpt":"Properties CSS Tokens : layout State Property Token Default border-radius radius.m (4px) Default border-width border.m (2px) Default min…"}},{"node":{"id":"4c3e7e94-f211-57fc-8273-ae7f3214d7d6","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Datepicker/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/Datepicker/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility The date picker component complies with the same validation and accessibility rules as the text-input component. Read the…"}},{"node":{"id":"a482e4cb-04fc-51d7-a447-1d2cd889a6f9","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Field/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/Field/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic Always use field inside a form Always use a label with an input. About the aria-label attribute In case you are…"}},{"node":{"id":"b516ba97-50d4-5905-9bae-949a4b6e2bda","frontmatter":{"title":"Fields","order":3,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mfield--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/input/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback"},"fields":{"slug":"/Components/Form/Field/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Field/index.mdx","extension":"mdx"}},"excerpt":"Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback…"}},{"node":{"id":"0fe4093c-4393-543c-8684-3099fdd21049","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Field/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Field/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout / sizes Size name Margin Font-size Line-height Label 4px (mu025) (bottom) size.font.04 (14px) size…"}},{"node":{"id":"6119b8b2-3b46-5947-908e-e0cf24c1936a","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/FileUploader/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/FileUploader/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Height Paddings Font-size radius 48px (3mu) 32px (2mu) size.font.05 (16px) radius.m (4px) Icon / size…"}},{"node":{"id":"08060f09-5aa4-55fa-9eaf-4e4f7b8ada48","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/PhoneNumberInput/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/PhoneNumberInput/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic"}},{"node":{"id":"57ecabf2-d22f-5049-bff3-fc1ee69786a3","frontmatter":{"title":"Phone number input","order":3,"links":{"vue":{"status":"ready","link":""},"freemarker":{"status":"ready","link":""}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Phone number input enables the user to input its phone number with an international country prefix in a form element."},"fields":{"slug":"/Components/Form/PhoneNumberInput/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/PhoneNumberInput/index.mdx","extension":"mdx"}},"excerpt":"Phone number input enables the user to input its phone number with an international country prefix in a form element. Overview Phone number…"}},{"node":{"id":"87375260-fcf0-5635-bbc8-100f35e5b253","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/QuantitySelector/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/QuantitySelector/accessibility.mdx","extension":"mdx"}},"excerpt":"Sizes Please know that the small version is not really supposed to be used on touch devices to avoid misclicking. We recommend some blank…"}},{"node":{"id":"1117b218-5439-5e06-9708-f60ac3148230","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Radio/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Radio/specs.mdx","extension":"mdx"}},"excerpt":"Properties CSS Tokens : layout State Property Token Default border-radius 50% Default border-width border.m (2px) Default min-width 20px…"}},{"node":{"id":"04d5f29f-6d33-597c-84e0-ff9d11a49a5d","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Select/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Select/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout State Property Token Default padding mu-100 (1rem) Default border-radius radius.m (4px) Default…"}},{"node":{"id":"db057e70-982c-5553-b2e7-81e5091145dc","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextArea/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/TextArea/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout State Property Token all border-radius radius.m (4px) all border-width border.s (1px) all padding…"}},{"node":{"id":"ffe29178-19f1-5e62-aeed-9b5f995baed4","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/TextInput/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic Always use a label with an input. About the aria-label attribute In case you are not able to use a label tag in…"}},{"node":{"id":"bf881d34-4078-539e-9665-b1df721299c2","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/TextInput/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Medium Small Properties CSS Tokens : layout / sizes Size name Paddings Font-size Line-height radius Small 8px (mu050) size.font.0…"}},{"node":{"id":"4a2eb64a-012c-5911-bb9d-16f35779a407","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Toggle/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Toggle/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties layout size element Property Token M (Default) background border-radius 2mu M (Default) background width 4mu M…"}},{"node":{"id":"6b1c36f7-c096-5546-b8f6-9feb25143189","frontmatter":{"title":"Design tools conventions","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/DesignToolsConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/DesignToolsConventions/index.mdx","extension":"mdx"}},"excerpt":"Prototype tools Mozaic is a worldwide source of truth when it comes to design for Adeo and Leroy Merlin's products. That is why you need to…"}},{"node":{"id":"47aad200-99b0-5ad0-b658-2dafb075f19c","frontmatter":{"title":"Git conventions","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/GitConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/GitConventions/index.mdx","extension":"mdx"}},"excerpt":"Branch names Each branch name consists of a type that matches the main commit one, an optional issue id coming from a JIRA ticket or a…"}},{"node":{"id":"e0baf82a-1975-5cc1-9805-9583c7e4e2f1","frontmatter":{"title":"Container","order":3,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":"The container defines the main content width as well as the minimum negative space between the horizontal edges of the screen and the content"},"fields":{"slug":"/Foundations/Layout/Container/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/Container/index.mdx","extension":"mdx"}},"excerpt":"The container defines the main content width as well as the minimum negative space between the horizontal edges of the screen and the…"}},{"node":{"id":"ed15d3d6-b8d2-57f1-a2e0-377bd355f2ab","frontmatter":{"title":"Customization","order":3,"links":null,"status":{"sketch":"stable","scss":"stable","figma":null},"description":null},"fields":{"slug":"/Foundations/Layout/Grid/customization/","fileName":{"name":"customization","base":"customization.mdx","relativePath":"docs/Foundations/Layout/Grid/customization.mdx","extension":"mdx"}},"excerpt":"Customisation and mixins There are eight available mixins that you can work with to help you create layouts : set-flexy : Adds flex…"}},{"node":{"id":"7004c54f-dd97-52c7-884a-2912371a2816","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Grid/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Layout/Grid/design.mdx","extension":"mdx"}},"excerpt":"These are the recommendations to set up the values to use as your layout settings in your Sketch files. Layout behaviors Grids on…"}},{"node":{"id":"952bd5b3-27df-5892-85e4-fee195f4dc27","frontmatter":{"title":"Text colors","order":3,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Typography/Colors/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/Colors/index.mdx","extension":"mdx"}},"excerpt":"Common text colors : For common usage the following text color are allowed Note that it is not forbiden to use any color you want specific…"}},{"node":{"id":"b854c199-ccef-515a-a8cb-255996003482","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/HeroStyles/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Typography/HeroStyles/design.mdx","extension":"mdx"}},"excerpt":"What's included ? BA Heros.sketch Device Style name Viewport < M (576px) 01-Hero-Mobile--34px Viewport >= M (576px) 02-Hero-576px->1100px…"}},{"node":{"id":"c3cdc3d8-b052-5ac6-af73-2b0481087ee1","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Images/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Utilities/Images/design.mdx","extension":"mdx"}},"excerpt":"Mozaic provides an optional library with the recommended ratios for designers. Good to know : \nYou have to be precise when you use it. Don't…"}},{"node":{"id":"57483383-d85b-5e23-a063-0084487e3d13","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/designer/","fileName":{"name":"designer","base":"designer.mdx","relativePath":"docs/Foundations/Utilities/Shadows/designer.mdx","extension":"mdx"}},"excerpt":"TODO"}},{"node":{"id":"2e8bb756-d39f-5f6a-9e2c-0895b5793592","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Strokes/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Utilities/Strokes/design.mdx","extension":"mdx"}},"excerpt":"##Anatomy How to use"}},{"node":{"id":"83a8b9d5-b4aa-50a2-8276-55a33f14014d","frontmatter":{"title":"Requirements","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/requirements/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/requirements/index.mdx","extension":"mdx"}},"excerpt":"Adeo Github access Adeo Github access is required to download the Mozaic UI Kit. Join Adeo Github and follow the steps. \n You will have to…"}},{"node":{"id":"35bfedc6-9a75-5203-bde3-3d0998c9a5cf","frontmatter":{"title":"Configuration","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Configuration/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/Configuration/index.mdx","extension":"mdx"}},"excerpt":"mozaic.config.js mozaic.config.js allows you to configure and customize Mozaic. Create a mozaic.config.js file at the root of your project…"}},{"node":{"id":"c34a2d68-71e5-56af-931e-aee715e50107","frontmatter":{"title":"Foundations","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"1fd92236-6005-56a9-8b30-b814cddf2a3e","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Accordion/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Accordion/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the accordion scss files. Basic usage To create a basic accordion, apply the following classes on this…"}},{"node":{"id":"fc488001-20ce-5828-9f15-01d6e5992812","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Breadcrumb/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Breadcrumb/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings , the link and the breadcrumb scss files. Usage You can create breadcrumbs in the…"}},{"node":{"id":"8d163e48-cebf-571f-91af-b7f3dccc4ecf","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Buttons/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Buttons/code.mdx","extension":"mdx"}},"excerpt":"Import Basic usage To create a solid button you have one main class to apply mc-button , and wrap the text inside the button in a span.mc…"}},{"node":{"id":"6ca2e861-f635-5371-9409-5ecb34cdaaa8","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Cards/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Cards/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the card scss files. In addition to the basic files listed above, you must also import the _c.button…"}},{"node":{"id":"7187e06c-e9b7-51c5-981e-40b198f69144","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Dividers/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Dividers/code.mdx","extension":"mdx"}},"excerpt":"Implementing a divider in your code can be done in two ways: (1.) a simple method or (2.) a slightly more advanced method. We detail below…"}},{"node":{"id":"cc9c6035-ae61-5872-9465-42a323d5ac9c","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Flags/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Flags/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings, the font families mixin and the flag scss files. Basic usage To create a flag you have one main class to apply…"}},{"node":{"id":"b6536a48-eda6-50a5-a756-2bf5d477436d","frontmatter":{"title":"Form","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"2e241ff0-00da-5e09-90ec-e41ad8a86f95","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Hero/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Hero/code.mdx","extension":"mdx"}},"excerpt":"Import Basic usage In its simplest form, the Hero component consists of the following elements: A global wrapper with the class: mc-hero…"}},{"node":{"id":"b5515ca4-2f0a-5c15-bfbb-67e1a2fc7c17","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Layers/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Layers/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the layer , and the button scss files. Note that you can also implement in addition the scss file of the…"}},{"node":{"id":"ff668e2a-2bae-5e50-8f13-4474004c9216","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Links/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Links/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the links scss files. Basic usage To create a link you have one main class to apply mc-link . Variations…"}},{"node":{"id":"0b90a4fc-4a21-5652-b503-287183e52569","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Modals/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Modals/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the modal , the bodys , and the button scss files. Note that you can also implement in addition the scss…"}},{"node":{"id":"0c955eac-13d6-5b7a-b287-a5db0535c216","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Notification/code.mdx","extension":"mdx"}},"excerpt":"Import Basic usage Wrap a title (it may be any level of heading: h1 , h2 , h3 and so on, depending on the context or SEO requirements…"}},{"node":{"id":"cf8711a9-2528-5278-955e-7c83f876c321","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Pagination/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Pagination/code.mdx","extension":"mdx"}},"excerpt":"Import Default Pagination Light Pagination Accessibility and semantic"}},{"node":{"id":"c54baf6b-ba1d-5e57-ab98-ce126ec40dbf","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/ProgressBar/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/ProgressBar/code.mdx","extension":"mdx"}},"excerpt":"Import Usage In its simplest form, the code of the ProgressBar component is structured as follows: A global div with the class: mc…"}},{"node":{"id":"78f1d1f2-5c49-5547-b0a8-35fe2f4201a6","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/RatingStars/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/RatingStars/code.mdx","extension":"mdx"}},"excerpt":"Rating stars has two main usages: (1.) when filing or amending an opinion (2.) when displaying the overall score on a product sheet. Filing…"}},{"node":{"id":"d2c43d44-7bbc-522a-b04f-0255190f3713","frontmatter":{"title":"Code","order":2,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tabs/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Tabs/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the tabs scss files. Basic usage To create basic tabs, apply the following classes: mc-tabs on a div…"}},{"node":{"id":"c8bf1f48-0c79-5c74-aebf-673f730873b8","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Tag/code.mdx","extension":"mdx"}},"excerpt":"Import Available types of tags text link selectable removable Each tag type requires a different dom structure and classes names .\nEach tag…"}},{"node":{"id":"6b5743dd-718e-5f2e-a469-f0e968a29e0d","frontmatter":{"title":"Code","order":2,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tooltip/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Tooltip/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the tooltip scss files. Basic usage To create a tooltip, apply the following…"}},{"node":{"id":"8b4c3837-f684-5a4d-9746-669487a58808","frontmatter":{"title":"Designers","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"1cf25163-1205-576e-bdb7-77b0438bc434","frontmatter":{"title":"Design","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Colors/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Colors/design.mdx","extension":"mdx"}},"excerpt":"Colors are avaible in the sketch file \" AA Colors \". All the colors and their variations are available as layer styles , and they are…"}},{"node":{"id":"7d66be46-64be-5c6f-ac28-11aa0ac790d3","frontmatter":{"title":"Monochrom icons","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/catalog/","fileName":{"name":"catalog","base":"catalog.mdx","relativePath":"docs/Foundations/Icons/catalog.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"799ac6fb-58e2-5cd1-b102-c079b01b7396","frontmatter":{"title":"Designer guide","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"82c03682-aae3-54e2-ad75-0bf7906ef69d","frontmatter":{"title":"Roadmap","order":2,"links":null,"status":null,"description":"Discover what we are working on right now"},"fields":{"slug":"/Updates/Roadmap/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/Roadmap/index.mdx","extension":"mdx"}},"excerpt":"Q1 2021 (from 01/01/2021 to 30/04/2020) Sprint 14 (Week 11 to 13) Chore: Spike on web component using Svelte Update dependencies (Postcss…"}},{"node":{"id":"f9325c4c-f12d-534b-8f2d-51af81adcf2a","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Checkbox/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Checkbox/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the checkbox scss files. Basic usage To use the checkbox pattern you have 3 main…"}},{"node":{"id":"e2515221-b453-505b-9016-e1242d65f5f3","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Datepicker/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Datepicker/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input and the field scss files. Usage The easiest way to implement a date picker on a form…"}},{"node":{"id":"3e92013e-84f7-59bc-ac1b-2eebf4878a4c","frontmatter":{"title":"Datepicker","order":2,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Date picker allows the user to directly enter a specific date or choose a date from a calendar layout in a form element."},"fields":{"slug":"/Components/Form/Datepicker/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Datepicker/index.mdx","extension":"mdx"}},"excerpt":"Date picker allows the user to directly enter a specific date or choose a date from a calendar layout in a form element. Behaviour The date…"}},{"node":{"id":"2ab9a76a-3c54-58c9-a187-3341df2e7eab","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Field/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Field/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings, the text-input and the fields scss files. Basic usage To create a field you have three main class to apply: mc…"}},{"node":{"id":"af538ae6-99cd-58e8-9f99-0f2dae6db51f","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/FileUploader/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/FileUploader/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the file uploader scss files. Basic usage Natively, to upload files we use an…"}},{"node":{"id":"1923c67d-ecaa-5ad7-abda-ac76e7fca95b","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/PhoneNumberInput/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/PhoneNumberInput/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input and the phone-number scss files. Usage A phone number input is composed of 2 main zones: A…"}},{"node":{"id":"2da71e3f-ed55-5110-b3eb-741ce64575c5","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/QuantitySelector/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/QuantitySelector/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input , the button and the quantity-selector scss files. Usage Variations Available sizes You…"}},{"node":{"id":"41d99c4d-1220-5419-a07a-49de3ba67b23","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Radio/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Radio/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the radio scss files. Basic usage To create a classic radio you have 3 main css…"}},{"node":{"id":"d909db2d-1aa5-5a9a-9a3c-5cb038f64992","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Select/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Select/code.mdx","extension":"mdx"}},"excerpt":"Use in form context Import Import the settings , the select and the fields scss files. Note that the import order is important to get…"}},{"node":{"id":"cd64fdb4-6d90-59fa-b5df-a88e9e568c16","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextArea/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/TextArea/code.mdx","extension":"mdx"}},"excerpt":"Use in a form context Import Import the settings , the text area and the fields scss files. Note that the import order is important to…"}},{"node":{"id":"b9e35bb5-6942-534e-8085-fa1f6bbf3283","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/TextInput/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input and the field scss files. Usage Supported input types text email date password number tel…"}},{"node":{"id":"ff03c554-cc88-5b78-a54d-e789943f72b7","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Toggle/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Toggle/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the toggle scss files. Basic usage To create a basic toggle, wrap a input[type…"}},{"node":{"id":"0da4bc35-7e21-5378-b3c2-ed5d77cfb079","frontmatter":{"title":"Naming convention","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/NamingConvention/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/NamingConvention/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is a product used by a lot of people on different teams, business units and even timezones. To have a minimum of organization, we…"}},{"node":{"id":"976aa49e-6868-5ece-96ec-187a72a42235","frontmatter":{"title":"CSS conventions","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/CSSConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/CSSConventions/index.mdx","extension":"mdx"}},"excerpt":"Concepts ITCSS Introduction ITCSS stand for Inverted Triangle architecture for CSS , it is a way to better manage specificity and to…"}},{"node":{"id":"bda47506-4ba8-5110-8170-92f3ad2190ce","frontmatter":{"title":"Glossary","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/Glossary/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/Glossary/index.mdx","extension":"mdx"}},"excerpt":"This is a list of terms we use in our routine with Mozaic. We are adding these terms and definitions just in case you are wondering \"What…"}},{"node":{"id":"227af0c9-412e-5113-9058-75239fc3423c","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Container/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Layout/Container/code.mdx","extension":"mdx"}},"excerpt":"Import Import the container scss files. Usage Default container To use a default container in your code, simply add the ml-container…"}},{"node":{"id":"d5b2c20b-e8d8-5e86-b93d-0d7200491d83","frontmatter":{"title":"Grid system","order":2,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A grid is used to create a **more structured and more harmonious design.** It’s the frame of your page, you build the layout by placing blocks of contents (text, images,…) on a certain number of columns."},"fields":{"slug":"/Foundations/Layout/Grid/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/Grid/index.mdx","extension":"mdx"}},"excerpt":"A grid is used to create a structured and harmonious design for every breakpoints. It is the frame of your page that allows you to build…"}},{"node":{"id":"2b673dad-cfdc-56d5-aca9-b7c28294c57c","frontmatter":{"title":"Cheat Sheet","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/MagicUnit/sheatsheat/","fileName":{"name":"sheatsheat","base":"sheatsheat.mdx","relativePath":"docs/Foundations/Spacing/MagicUnit/sheatsheat.mdx","extension":"mdx"}},"excerpt":"Pixel value Variable name magic-unit-rem function magic-unit function 4px $mu025 magic-unit-rem(0.25) magic-unit(0.25) 8px $mu050 magic-unit…"}},{"node":{"id":"8eb92b6b-0230-54b5-8ec6-be68a6760fd9","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/MarginAndPaddings/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Spacing/MarginAndPaddings/code.mdx","extension":"mdx"}},"excerpt":"The margins and paddings utility classes You can add to your bundle the margins or paggings utility classes like so : Please considere that…"}},{"node":{"id":"5ebbae41-20a8-54ce-b62c-30685472bf4a","frontmatter":{"title":"Margins and Paddings","order":2,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":"About margins and paddings"},"fields":{"slug":"/Foundations/Spacing/MarginAndPaddings/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Spacing/MarginAndPaddings/index.mdx","extension":"mdx"}},"excerpt":"Removing border sizes from vertical paddings For exemple, take a button. If your button have a 2x magic-unit height (32px)\nyou have : 1px…"}},{"node":{"id":"f6560286-7947-5d02-851f-113d124a7db4","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/BodyStyles/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/BodyStyles/code.mdx","extension":"mdx"}},"excerpt":"Base text classes Base typography classes does not apply any external margins nor font-colors , because they are contextuals. This mean…"}},{"node":{"id":"dc9964d7-4619-5cca-b170-38ce3cdf0c22","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/HeadingStyles/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/HeadingStyles/code.mdx","extension":"mdx"}},"excerpt":"Import Headings Usage You need to apply at least two classes , the block name and a size. Variations Sizes There is three Headings sizes…"}},{"node":{"id":"e6ce4f28-06d1-53ad-ac2b-527c9fcee11a","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/HeroStyles/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/HeroStyles/code.mdx","extension":"mdx"}},"excerpt":"Base text classes Base typography classes does not apply any external margins nor font-colors , because they are contextuals. This mean…"}},{"node":{"id":"242fe7e4-5337-500a-9966-d3af6ac34ea8","frontmatter":{"title":"Font scales","order":2,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Typography/ScaleAndSizes/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/ScaleAndSizes/index.mdx","extension":"mdx"}},"excerpt":"General fonts sizes and their usage : Id Value Mobile usage Desktop usage Token 01 11px (0.6815mu) Legal contents / captions Legal contents…"}},{"node":{"id":"38d17385-5771-5dbe-874c-e2578dd84cf5","frontmatter":{"title":"Border radius","order":2,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Utilities/BorderRadius/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/BorderRadius/index.mdx","extension":"mdx"}},"excerpt":"Preview Variations Border-radius is available in 3 sizes : small , medium , large Small Medium Large"}},{"node":{"id":"df58b61a-d536-5373-8c8b-05a1a37d464b","frontmatter":{"title":"Specs","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/BorderRadius/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Utilities/BorderRadius/specs.mdx","extension":"mdx"}},"excerpt":"Size Size name Width Token Small 2px radius.s Medium 4px radius.m Large 6px radius.l"}},{"node":{"id":"8a0c76a0-8f72-5dc9-b39e-b86e7bda783c","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Images/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/Images/code.mdx","extension":"mdx"}},"excerpt":"The implementation of Mozaic ratios in your code can be done in two ways: By using the set-ratio mixin By using ratio helpers The…"}},{"node":{"id":"92979f2f-85d5-5ff6-a2e3-0f0712b00200","frontmatter":{"title":"Specs","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Utilities/Shadows/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Size Small Medium Large X position shadow.s.x ( 0px ) shadow.m.x ( 0px ) shadow.l.x ( 0px ) Y position shadow.s.y…"}},{"node":{"id":"be0c91d0-9ccf-517b-8a75-a46910230bc9","frontmatter":{"title":"Specs","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Strokes/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Utilities/Strokes/specs.mdx","extension":"mdx"}},"excerpt":"Properties Size Size name Width Token Small 1px border.s Medium 2px border.m Large 3px border.l"}},{"node":{"id":"8ec03d35-9823-57d0-b158-ad0956ee609f","frontmatter":{"title":"What's included ?","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/whatsIncluded/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/whatsIncluded/index.mdx","extension":"mdx"}},"excerpt":"The UI Kit is a set of sketch files to be used as libraries. It contains all core styles as well as a collection of reusable components…"}},{"node":{"id":"f8dd6d60-59ed-5b4d-a632-f68de147b60a","frontmatter":{"title":"Adeo preset","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/CustomizeTokens/adeoPreset/","fileName":{"name":"adeoPreset","base":"adeoPreset.mdx","relativePath":"docs/GetStarted/Developers/CustomizeTokens/adeoPreset.mdx","extension":"mdx"}},"excerpt":"Mozaic is first thought to answer to LEROY MERLIN's brand guidelines but customisation is also allowed. However, we also offer you the…"}},{"node":{"id":"b1f47630-6132-526a-a2f6-da7554a91af9","frontmatter":{"title":"PostCSS","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/postcss/","fileName":{"name":"postcss","base":"postcss.mdx","relativePath":"docs/GetStarted/Developers/Installation/postcss.mdx","extension":"mdx"}},"excerpt":"Using postCSS with the following configuration is mandatory for us to ensure Mozaic to work as advertised . Not following these…"}},{"node":{"id":"ecfdcc93-6a64-5e12-9a99-f697f277170c","frontmatter":{"title":"What's included ?","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/whatsincluded/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/whatsincluded/index.mdx","extension":"mdx"}},"excerpt":"Styles @mozaic-ds/styles/** All the CSS and SCSS files that constitute the Mozaic SCSS framework. Some variables are generated into and…"}},{"node":{"id":"a24b4c9e-492c-578f-9536-36ea34689d2e","frontmatter":{"title":"Get started","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"573d6b3d-34f9-5829-b83a-d74ec1cc6363","frontmatter":{"title":"Accordions","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-maccordion--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/mozaic-freemarker/pages/3_Components/accordion/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Accordions allow you to show or hide related content under vertically stacked lists"},"fields":{"slug":"/Components/Accordion/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Accordion/index.mdx","extension":"mdx"}},"excerpt":"Accordions allow you to show or hide related content under vertically stacked lists. Please use accordions for complementary content when…"}},{"node":{"id":"1c154666-3ad0-5a5b-99a3-2ac495228468","frontmatter":{"title":"Breadcrumb","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mbreadcrumb--try-it"},"freemarker":null},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Breadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go back to previous steps or levels when needed."},"fields":{"slug":"/Components/Breadcrumb/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Breadcrumb/index.mdx","extension":"mdx"}},"excerpt":"Breadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go…"}},{"node":{"id":"b85ebd6b-d81a-518d-8223-501e3188f6f7","frontmatter":{"title":"Buttons","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mbutton--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/buttons/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context"},"fields":{"slug":"/Components/Buttons/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Buttons/index.mdx","extension":"mdx"}},"excerpt":"Buttons are used to trigger actions . Their appearance is depending on the type of action required from the user, or the context…"}},{"node":{"id":"7bf03bb5-c636-5f8b-bc6a-69765d43cc7a","frontmatter":{"title":"Cards","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":null},"description":"A card is a graphic element that structures a group of related informations that must be understood on its own. It visually looks like a playing card."},"fields":{"slug":"/Components/Cards/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Cards/index.mdx","extension":"mdx"}},"excerpt":"A card is a graphic element that structures a group of related informations that must be understood on its own. It visually looks like a…"}},{"node":{"id":"febfc47c-9c33-5bae-b910-36a661a56da6","frontmatter":{"title":"Dividers","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Dividers are thin lines used to insert breaks into your layouts and group similar content."},"fields":{"slug":"/Components/Dividers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Dividers/index.mdx","extension":"mdx"}},"excerpt":"Dividers are thin lines used to insert breaks into your layouts and group similar content. Variations Default This is the version you should…"}},{"node":{"id":"4a5f17a1-aed0-5a40-b800-918a69dd08f5","frontmatter":{"title":"Hero","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A hero is an element that you can use on the top of your pages to add a visual or draw the attention of the user on a specific message."},"fields":{"slug":"/Components/Hero/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Hero/index.mdx","extension":"mdx"}},"excerpt":"A hero is an element that you can use on the top of your pages to add a visual or draw the attention of the user on a specific message…"}},{"node":{"id":"f381e0b7-1872-5eb5-acf8-7faf73814ad9","frontmatter":{"title":"Principles","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"679707cd-81ad-525c-9efd-8f6cc7c3b1f9","frontmatter":{"title":"Changelog","order":1,"links":null,"status":null,"description":"The changelog that contain all changes for every Mozaic releases"},"fields":{"slug":"/Updates/Changelog/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/Changelog/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"d99e7dae-d00f-5069-b52c-dd966f1c4c0b","frontmatter":{"title":"Patterns Status","order":1,"links":null,"status":null,"description":"The right place to check if the component you want to use is in progress, in bêta version, or stable"},"fields":{"slug":"/Updates/PatternsStatus/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/PatternsStatus/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"44aefb69-4494-51cf-ba5a-a70d2202e65c","frontmatter":{"title":"Checkbox","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mcheckbox--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/checkbox/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions"},"fields":{"slug":"/Components/Form/Checkbox/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Checkbox/index.mdx","extension":"mdx"}},"excerpt":"Checkboxes are used to select one or multiple options in a list . They usually find their place in forms and are also used to accept some…"}},{"node":{"id":"2b013428-8ecb-56d2-9de0-539fd20a8d77","frontmatter":{"title":"Designer requirements","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/DesignRequirements/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/DesignRequirements/index.mdx","extension":"mdx"}},"excerpt":"All you need is Access to the Mozaic github repo Sketch 59 For designers from LMFR you should ahev an access to Abstract under the [DS…"}},{"node":{"id":"51eb6a1e-ab13-5b27-bab1-d090056ad405","frontmatter":{"title":"Install for development","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/InstallForDev/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/InstallForDev/index.mdx","extension":"mdx"}},"excerpt":"Requirements : node v12+ yarn To install node: Please follow this guide To install yarn : npm i -g yarn Development : Note about the…"}},{"node":{"id":"f727bf4c-43ad-5e59-9c51-9d4cc6a09dd0","frontmatter":{"title":"Contribution journey","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/ContributionJourney/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/ContributionJourney/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is a design system that wants to make designers and developers collaboration easy. By contributing to Mozaic, you become an actor of…"}},{"node":{"id":"9375fc8a-1fdb-5080-9bbc-65a4c8135647","frontmatter":{"title":"Mozaic philosophy","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/Philosophy/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/Philosophy/index.mdx","extension":"mdx"}},"excerpt":"Team work and consistency Designers and developers should work hand in hand to deliver consistent elements . You should choose the way you…"}},{"node":{"id":"af5e3be1-5cb1-5a2e-b943-5503539fc869","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Grid/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Layout/Grid/code.mdx","extension":"mdx"}},"excerpt":"Flexy is a grid system and a general purpose layout tool based on Flex. It can be used to build page level layout as well as component level…"}},{"node":{"id":"e4bbc320-7c71-588e-88f8-eb96d590b1e7","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Responsive/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Layout/Responsive/code.mdx","extension":"mdx"}},"excerpt":"Using MQpacker to group média queries MQpacker is a tool to regroup media queries.\nIt allow you to write media queries right next or inside…"}},{"node":{"id":"1bea78ea-a64a-5a1a-97f9-6b82d6518d87","frontmatter":{"title":"Screens sizes and responsive","order":1,"links":null,"status":{"sketch":null,"scss":"stable","figma":null},"description":null},"fields":{"slug":"/Foundations/Layout/Responsive/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/Responsive/index.mdx","extension":"mdx"}},"excerpt":"We use a mobile-first approach to support all screens sizes. Major breakpoints Major breakpoints are expressed in tee-shirt sizes letters…"}},{"node":{"id":"380c20d4-e631-57bb-90f7-10de0389ee1d","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/MagicUnit/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Spacing/MagicUnit/code.mdx","extension":"mdx"}},"excerpt":"Using magic unit in SCSS The magic unit is a scss variable generated from tokens: $magic-unit . This variable is a unitless value equal…"}},{"node":{"id":"8f2b0b65-02f5-520b-90f3-caaa01ceaec8","frontmatter":{"title":"Magic Unit","order":1,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Spacing/MagicUnit/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Spacing/MagicUnit/index.mdx","extension":"mdx"}},"excerpt":"The magic unit is a base unit for any element or property that require a defined dimension . It is equal to 16px but is expressed in rem…"}},{"node":{"id":"69f809b4-8ec6-5be4-80d8-62f5de3b6ae9","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/Colors/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/Colors/code.mdx","extension":"mdx"}},"excerpt":"the font-color mixin : Use the font-color() mixin to set an othorized text color to an element. Font color tokens and mixin recap: SCSS…"}},{"node":{"id":"3ca31500-4c16-5178-8a03-bdae1ceabbc2","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/FontFamilies/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/FontFamilies/code.mdx","extension":"mdx"}},"excerpt":"Import In order to use the font provided in Mozaic in your code, you have to start by importing the _all-settings.scss file in the…"}},{"node":{"id":"f4b45aa5-ad22-5f0b-85a4-20c92b04556f","frontmatter":{"title":"Font Families","order":1,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Typography/FontFamilies/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/FontFamilies/index.mdx","extension":"mdx"}},"excerpt":"Families"}},{"node":{"id":"e9c92e84-c204-5c7f-81a7-d557d555c2ba","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/ScaleAndSizes/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/ScaleAndSizes/code.mdx","extension":"mdx"}},"excerpt":"The font-scale mixin : The font scale mixin returns a font-size and a line-height for a given font-size token Params : $size : required…"}},{"node":{"id":"9be5d0ba-cb05-556b-9a7d-a77a74fcc457","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/BorderRadius/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/BorderRadius/code.mdx","extension":"mdx"}},"excerpt":"Import In order to use the border-radius values provided by Mozaic, you have to import the _all-settings.scss file: Basic usage Once you…"}},{"node":{"id":"fb7366cb-6bd2-557f-8b75-52f4e3c078a1","frontmatter":{"title":"Images aspect ratios","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Utilities/Images/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/Images/index.mdx","extension":"mdx"}},"excerpt":"The aspect ratio of an image is the proportional relationship between its width and its height . Aspect ratios are commonly written as a…"}},{"node":{"id":"3dfc2e32-3c64-5351-8919-f424f4eccf65","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/Shadows/code.mdx","extension":"mdx"}},"excerpt":"Import To get the set-box-shadow() mixin, you need to import _all-settings.scss . Basic usage"}},{"node":{"id":"a9290203-b59e-53e3-a109-0522028fa9b6","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Strokes/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/Strokes/code.mdx","extension":"mdx"}},"excerpt":"Import To get the get-border () function you need to import _all-settings.scss . Basic usage We provide a unique function to get every…"}},{"node":{"id":"0256edde-c003-5740-bc56-359bd6377fad","frontmatter":{"title":"About the system","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/aboutTheSystem/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/aboutTheSystem/index.mdx","extension":"mdx"}},"excerpt":"As designers , Mozaic Design System provides you with a lot of ready to use patterns . What is a pattern? A pattern is a repeating or…"}},{"node":{"id":"49032f68-b3ae-59b6-b40a-61de680900b5","frontmatter":{"title":"Installation","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/Installation/index.mdx","extension":"mdx"}},"excerpt":"Requirements: Installing Mozaic require node v12 + As for now, @mozaic-ds/** repositories are public registries on NPM.\nYou need to be…"}}]}},"pageContext":{"id":"c8bf1f48-0c79-5c74-aebf-673f730873b8","slug":"/Components/Tag/code/"}},"staticQueryHashes":["1091566128","1481403750","2242190743","3105336109","3266825286","3649515864","3968426267","4075210883","426963092"]}