mozaic-design-system
<h1 align="center"> Adeo Design System </h1> > Mozaic is an open-source design system built by Adeo, designed to help set up a coherent human experience, to reinforce team’s delivery time and improve quality of deliverables. <p align="center"> <a href="https://github.com/adeo/mozaic-design-system/blob/master/.prettierrc"> <img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)" alt="Prettier badge" /> </a> <a href="https://mozaic.adeo.cloud/"> <img src="https://img.shields.io/badge/smallchat-talk%20with%20us-green?style=flat-square)" alt="small chat" /> </a> <a href="https://lerna.js.org/"> <img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="Maintained with Lerna" /> </a> <a href="https://mozaic.adeo.cloud/contributing/developers/install-for-dev/"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" /> </a> </p> ## Getting started If you are just getting started, check out our documentation: https://mozaic.adeo.cloud/ If your are looking for JS components, we have community-contributed components for the following technologies: - [Freemarker](https://github.com/adeo/mozaic-freemarker) - [Vue](https://github.com/adeo/mozaic-vue) - [React](https://github.com/adeo/mozaic-react) - [Svelte/WebComponent](https://github.com/adeo/mozaic-web-components) If you're trying to find something specific, here's a list of our main packages that we support! | Package name | Description | | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [`@mozaic-ds/styles`](./packages/styles) | All the SCSS files that constitute the Mozaic SCSS framework. | | [`@mozaic-ds/tokens`](./packages/tokens) | Tokens are theming/styling constants defined in a JSON file. They are transpiled into multiple format to be shared across plateforms (SCSS, IOS, ANDROID...). | | [`@mozaic-ds/css-dev-tools`](./packages/css-dev-tools) | Tools for css like PostCSS plugins and linters config tools. | | [`@mozaic-ds/web-fonts`](./packages/web-fonts) | Currently, the Leroy Merlin font only | | [`@mozaic-ds/icons`](./packages/icons) | Iconography assets. We also offer support in: [React](./packages/icons/react), [Ios](./packages/icons/pdf), and [Vue](./packages/icons/vue) | ## :books: Documentation We tried to focus on the developer experience, meaning that working with it should be as simple as possible. You can report any bug, request a feature or any improvement [filling an issue here](https://github.com/adeo/mozaic-design-system/issues) #### Please read the [contributing documentation](https://mozaic.adeo.cloud/contributing/) before submitting anything. #### Please read the [contributing](https://github.com/adeo/mozaic-design-system/blob/master/CONTRIBUTING.md) before contributing. ## Installation Please follow the [installation guide](https://mozaic.adeo.cloud/contributing/developers/install-for-dev/) ## Maintainers <table> <tr> <td align="center"><a href="https://github.com/caqueste"><img src="https://avatars.githubusercontent.com/u/43212270?v=4" width="100px;" alt=""/><br /><sub><b>Charles-Antoine Queste</b></sub></a><br /> <a href="https://github.com/adeo/mozaic-design-system/commits?author=caquest" title="Design">🎨</a> <a href="https://adeo-tech-community.slack.com/archives/CKQJZL7C4" title="Mentoring">🧑🏫</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=caquest" title="Documentation">📖</a> <a href="https://adeo-tech-community.slack.com/archives/CKQJZL7C4" title="Answering questions">💬</a> </td> <td align="center"><a href="https://github.com/tiloyi"><img src="https://avatars.githubusercontent.com/u/6053330?v=4" width="100px;" alt=""/><br /><sub><b>Trésor Iloyi</b></sub></a><br /> <a href="https://github.com/adeo/mozaic-design-system/commits?author=tiloyi" title="Code">💻</a> <a href="https://adeo-tech-community.slack.com/archives/CKQJZL7C4" title="Mentoring">🧑🏫</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=tiloyi" title="Documentation">📖</a> <a href="https://adeo-tech-community.slack.com/archives/CKQJZL7C4" title="Answering questions">💬</a> </td> <td align="center"><a href="https://github.com/mohamedmok"><img src="https://avatars.githubusercontent.com/u/7878860?v=4" width="100px;" alt=""/><br /><sub><b>Mohamed Mokhtari</b></sub></a><br /> <a href="https://github.com/adeo/mozaic-design-system/commits?author=mohamedmok" title="Code">💻</a> <a href="https://adeo-tech-community.slack.com/archives/CKQJZL7C4" title="Mentoring">🧑🏫</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=mohamedmok" title="Documentation">📖</a> <a href="https://adeo-tech-community.slack.com/archives/CKQJZL7C4" title="Answering questions">💬</a> </td> </tr> </table> ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="http://www.geoffreytestelin.com/"><img src="https://avatars1.githubusercontent.com/u/10194542?v=4?s=100" width="100px;" alt="Geoffrey Testelin"/><br /><sub><b>Geoffrey Testelin</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3AC0ZEN" title="Bug reports">🐛</a> <a href="#ideas-C0ZEN" title="Ideas, Planning, & Feedback">🤔</a> <a href="#tool-C0ZEN" title="Tools">🔧</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=C0ZEN" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/hatem-benmansour-lmfr"><img src="https://avatars1.githubusercontent.com/u/52403372?v=4?s=100" width="100px;" alt="hatem-benmansour-lmfr"/><br /><sub><b>hatem-benmansour-lmfr</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Ahatem-benmansour-lmfr" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/corentin-verquin-lm"><img src="https://avatars3.githubusercontent.com/u/57133075?v=4?s=100" width="100px;" alt="corentin-verquin-lm"/><br /><sub><b>corentin-verquin-lm</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/commits?author=corentin-verquin-lm" title="Documentation">📖</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3Acorentin-verquin-lm" title="Reviewed Pull Requests">👀</a> <a href="#example-corentin-verquin-lm" title="Examples">💡</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/bmondolot"><img src="https://avatars1.githubusercontent.com/u/11473460?v=4?s=100" width="100px;" alt="Mondolot Bertrand"/><br /><sub><b>Mondolot Bertrand</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Abmondolot" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/marineFabien"><img src="https://avatars1.githubusercontent.com/u/49992054?v=4?s=100" width="100px;" alt="Marine"/><br /><sub><b>Marine</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3AmarineFabien" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/jeanBptst"><img src="https://avatars2.githubusercontent.com/u/25452975?v=4?s=100" width="100px;" alt="Jean-Baptiste Lecomte"/><br /><sub><b>Jean-Baptiste Lecomte</b></sub></a><br /><a href="#ideas-jeanBptst" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/ThomasRumasLM"><img src="https://avatars2.githubusercontent.com/u/52402267?v=4?s=100" width="100px;" alt="ThomasRumasLM"/><br /><sub><b>ThomasRumasLM</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3AThomasRumasLM" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=ThomasRumasLM" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=ThomasRumasLM" title="Documentation">📖</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/simonroger88"><img src="https://avatars0.githubusercontent.com/u/67376885?v=4?s=100" width="100px;" alt="simonroger88"/><br /><sub><b>simonroger88</b></sub></a><br /><a href="#ideas-simonroger88" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/MrCloud"><img src="https://avatars0.githubusercontent.com/u/486140?v=4?s=100" width="100px;" alt="Florian Petit"/><br /><sub><b>Florian Petit</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3AMrCloud" title="Bug reports">🐛</a> <a href="#ideas-MrCloud" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="http://gillespie59.github.io/"><img src="https://avatars.githubusercontent.com/u/555768?v=4?s=100" width="100px;" alt="Emmanuel DEMEY"/><br /><sub><b>Emmanuel DEMEY</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/commits?author=EmmanuelDemey" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/pinguet62"><img src="https://avatars.githubusercontent.com/u/2929786?v=4?s=100" width="100px;" alt="PINGUET Julien"/><br /><sub><b>PINGUET Julien</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Apinguet62" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=pinguet62" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/MatthieuLepers"><img src="https://avatars.githubusercontent.com/u/14954276?v=4?s=100" width="100px;" alt="Matthieu Lepers"/><br /><sub><b>Matthieu Lepers</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/commits?author=MatthieuLepers" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/alex-deneuvillers-lm"><img src="https://avatars.githubusercontent.com/u/68054927?v=4?s=100" width="100px;" alt="Alex Deneuvillers"/><br /><sub><b>Alex Deneuvillers</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Aalex-deneuvillers-lm" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3Aalex-deneuvillers-lm" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/humbkr"><img src="https://avatars.githubusercontent.com/u/845297?v=4?s=100" width="100px;" alt="humbkr"/><br /><sub><b>humbkr</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Ahumbkr" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3Ahumbkr" title="Reviewed Pull Requests">👀</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/Marine-Fabien"><img src="https://avatars.githubusercontent.com/u/77010633?v=4?s=100" width="100px;" alt="Marine Fabien"/><br /><sub><b>Marine Fabien</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3AMarine-Fabien" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3AMarine-Fabien" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/Jupoulet"><img src="https://avatars.githubusercontent.com/u/53181261?v=4?s=100" width="100px;" alt="Jupoulet"/><br /><sub><b>Jupoulet</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/commits?author=Jupoulet" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="http://sadcitizen.me"><img src="https://avatars.githubusercontent.com/u/5613376?v=4?s=100" width="100px;" alt="Eugene Abrosimov"/><br /><sub><b>Eugene Abrosimov</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Asadcitizen" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3Asadcitizen" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=sadcitizen" title="Code">💻</a> <a href="#ideas-sadcitizen" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/NicolasDiarra-LMFR"><img src="https://avatars.githubusercontent.com/u/94369347?v=4?s=100" width="100px;" alt="Nicolas DIarra"/><br /><sub><b>Nicolas DIarra</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/commits?author=NicolasDiarra-LMFR" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/matthieu-castier"><img src="https://avatars.githubusercontent.com/u/52412589?v=4?s=100" width="100px;" alt="Michel"/><br /><sub><b>Michel</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/commits?author=matthieu-castier" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/amakuningit"><img src="https://avatars.githubusercontent.com/u/2139531?v=4?s=100" width="100px;" alt="Alexandr Makunin"/><br /><sub><b>Alexandr Makunin</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Aamakuningit" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3Aamakuningit" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/thomasPierreADEO"><img src="https://avatars.githubusercontent.com/u/85944839?v=4?s=100" width="100px;" alt="Thomas PIERRE"/><br /><sub><b>Thomas PIERRE</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3AthomasPierreADEO" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=thomasPierreADEO" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/slaoutadeo"><img src="https://avatars.githubusercontent.com/u/93641396?v=4?s=100" width="100px;" alt="Sébastien Laoût"/><br /><sub><b>Sébastien Laoût</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Aslaoutadeo" title="Bug reports">🐛</a> <a href="#ideas-slaoutadeo" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3Aslaoutadeo" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/OmarAlya"><img src="https://avatars.githubusercontent.com/u/97439634?v=4?s=100" width="100px;" alt="OmarAlya"/><br /><sub><b>OmarAlya</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3AOmarAlya" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/pulls?q=is%3Apr+reviewed-by%3AOmarAlya" title="Reviewed Pull Requests">👀</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/LucasFournier17"><img src="https://avatars.githubusercontent.com/u/104829493?v=4?s=100" width="100px;" alt="Lucas Fournier"/><br /><sub><b>Lucas Fournier</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3ALucasFournier17" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=LucasFournier17" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/remylabittelm"><img src="https://avatars.githubusercontent.com/u/77327349?v=4?s=100" width="100px;" alt="Rémy Labitte"/><br /><sub><b>Rémy Labitte</b></sub></a><br /><a href="https://github.com/adeo/mozaic-design-system/issues?q=author%3Aremylabittelm" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-design-system/commits?author=remylabittelm" title="Code">💻</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END --> This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!