+
[](#contributors)
+
-Design system at Gympass, our main intent is to support our projects.
-We have open-sourced our project for those who are interested in checkout how we do things and organize our code and documentation here.
+Design system at Wellhub, our main intent is to support our projects. We have open-sourced our project for those who are interested in checkout how we do things and organize our code and documentation here.
-### What does it mean?
+**What does it mean?**
-> Yoga is a scientific system of practices made to help each one of us achieve our highest potential and experience.
+Yoga is a scientific system of practices made to help each one of us achieve our highest potential and experience.
## Documentation
Yoga is documented at [http://gympass.github.io/yoga](https://gympass.github.io/yoga).
+## Installing
+
+In order to install our design-system just run:
+
+```bash
+$ yarn add @gympass/yoga
+```
+
+## Usage
+
+An important point is that your whole application must be wrapped in our ThemeProvider component:
+
+```bash
+import { ThemeProvider, Button } from '@gympass/yoga';
+
+const App = () => (
+
+
+
+);
+
+```
+
## Architecture
-Our codebase is a monorepo and individually versioned libraries.
-Here's an overview of our packages:
+The Yoga Design System codebase is structured as a monorepo, containing individually versioned libraries. Below is an overview of the main packages:
+
+| Package | Version | Size | Description |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| [`@gympass/yoga`](/packages/yoga) | [](https://www.npmjs.com/package/@gympass/yoga) | [](https://bundlephobia.com/result?p=@gympass/yoga) | Main package that brings together and exports all components |
+| [`@gympass/yoga-tokens`](/packages/tokens) | [](https://www.npmjs.com/package/@gympass/yoga-tokens) | [](https://bundlephobia.com/result?p=@gympass/yoga-tokens) | Contains the design tokens used to maintain visual consistency |
+| [`@gympass/yoga-common`](/packages/common) | [](https://www.npmjs.com/package/@gympass/yoga-common) | [](https://bundlephobia.com/result?p=@gympass/yoga-common) | Contains some helper variables used in all packages |
+| [`@gympass/yoga-icons`](/packages/icons) | [](https://www.npmjs.com/package/@gympass/yoga-icons) | [](https://bundlephobia.com/result?p=@gympass/yoga-icons) | Library of icons used in components |
+| [`@gympass/yoga-illustrations`](/packages/illustrations) | [](https://www.npmjs.com/package/@gympass/yoga-illustrations) | [](https://bundlephobia.com/result?p=@gympass/yoga-illustrations) | Library of illustrations used in components |
+| [`@gympass/yoga-helpers`](/packages/helpers) | [](https://www.npmjs.com/package/@gympass/yoga-helpers) | [](https://bundlephobia.com/result?p=@gympass/yoga-helpers) | Helper functions to make yoga components easier to use |
+| [`@gympass/yoga-system`](/packages/system) | [](https://www.npmjs.com/package/@gympass/yoga-system) | [](https://bundlephobia.com/result?p=@gympass/yoga-system) | Tools to apply themes and styles based on design tokens |
+
+## Support
+
+**Browser:** We support the 3 latest and stable releases of all major browsers and platforms
+
+| Browser | Version |
+| ---------------- | ------- |
+| Chrome | >= 125 |
+| Chrome (Android) | >= 125 |
+| Safari (macOS) | >= 15 |
+| Safari (iOS) | >= 15 |
+| Edge | >= 125 |
+| Firefox | >= 125 |
+
+**Operational System:** Yoga provides support for iOS 14 and higher and Android 7 and higher.
+
+| OS | Version | Viewport Size |
+| ------- | ------- | -------------------------------------- |
+| Android | >= 7 | Android Large: 360 x 800 (Samsung S20) |
+| iOS | >= 14 | iPhone SE: 320 x 568 |
+
+**[React](https://react.dev/):** Build user interfaces out of individual pieces called components written in JavaScript. Yoga supports versions `>=16`.
+
+**[React Native](https://reactnative.dev/):** Brings the React programming paradigm to platforms like Android and iOS. Yoga supports version `0.72.3`.
+
+**[Picker](https://www.npmjs.com/package/react-native-picker-select):** A Picker component for React Native which emulates the native interfaces for iOS and Android. Yoga supports versions `^2.4.9`.
+
+**[Styled Componentes](https://styled-components.com/):** This lets you write actual CSS in your JavaScript.Yoga supports versions `^4.4.0`.
+
+## License
-| Package | Version | Size |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| [`@gympass/yoga`](/packages/yoga) | [](https://www.npmjs.com/package/@gympass/yoga) | [](https://bundlephobia.com/result?p=@gympass/yoga) |
-| [`@gympass/yoga-tokens`](/packages/tokens) | [](https://www.npmjs.com/package/@gympass/yoga-tokens) | [](https://bundlephobia.com/result?p=@gympass/yoga-tokens) |
-| [`@gympass/yoga-common`](/packages/common) | [](https://www.npmjs.com/package/@gympass/yoga-common) | [](https://bundlephobia.com/result?p=@gympass/yoga-common) |
-| [`@gympass/yoga-icons`](/packages/icons) | [](https://www.npmjs.com/package/@gympass/yoga-icons) | [](https://bundlephobia.com/result?p=@gympass/yoga-icons) |
-| [`@gympass/yoga-helpers`](/packages/helpers) | [](https://www.npmjs.com/package/@gympass/yoga-helpers) | [](https://bundlephobia.com/result?p=@gympass/yoga-helpers) |
-| [`@gympass/yoga-system`](/packages/system) | [](https://www.npmjs.com/package/@gympass/yoga-system) | [](https://bundlephobia.com/result?p=@gympass/yoga-system) |
+Yoga is an open-source collaborative project, in other words, its distribution grants the right to study, use, change and distribute it to anyone (MIT license).
-## Contributing
+## Report an issue
-This repository should _and_ will grow, its contents will be used for many people in our current and future
-projects. As such, we follow some practices to keep a common architecture in our changes.
+Check if there is already an [issue](https://github.com/gympass/yoga/issues) open in our repository. If not, you can create a new one. Also, check the [discussion topics](https://github.com/gympass/yoga/discussions). Our team will analyze and prioritize within our initiatives. If you are interested and available, let us know and we will address you ASAP. Wellhub developers should refer to the Internal Guidelines.
-### [Code of Conduct](https://github.com/stumpsyn/policies/blob/master/citizen_code_of_conduct.md)
+## Request a feature
-We adopted the _Citizen Code of Condute_, which is widely used in many projects and communities such the [Rust comunity](https://www.rust-lang.org/policies/code-of-conduct).
-Please read the [full text](https://github.com/stumpsyn/policies/blob/master/citizen_code_of_conduct.md) so that you can understand what actions will and will not be tolerated.
+If you believe it is necessary to develop a new feature, for example a new component, please contact our team. You can open a new discussion topic, explaining the need. Our team will analyze and prioritize within our initiatives, taking into account design and engineering principles, such as reusability. If you are interested and available, let us know and we will address you ASAP. Wellhub developers should refer to the Internal Guidelines.
### [Contributing Guide](CONTRIBUTING.md)
-Read our [contributing guide](CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Yoga.
+This repository should and will grow, its contents will be used for many people in our current and future projects. As such, we follow some practices to keep a common architecture in our changes. Read our [Contributing Guide](CONTRIBUTING.md) to learn about our code of conduct, environments setups and development process. Wellhub developers should also consult the Internal Guidelines.
## Contributors ✨
diff --git a/packages/doc/src/images/yoga-logo-color.png b/packages/doc/src/images/yoga-logo-color.png
new file mode 100644
index 0000000000..b761b95284
Binary files /dev/null and b/packages/doc/src/images/yoga-logo-color.png differ
+ 