Merge pull request #44 from platformbuilders/feat/newReadme

Update README.md

README.md

@@ -1,5 +1,157 @@
-![check](https://github.com/platformbuilders/use-hooks/workflows/check/badge.svg)
 
-# @platformbuilders/theme-toolkit
+# Theme Toolkit
+
+## Descrição
+
+Este toolkit foi desenvolvido para auxiliar na gestão de temas e tornar mais fácil a manipulação de temas em aplicações.
+
+## Instalação
+
+Use o gerenciador de pacotes de sua escolha:
+
+```bash
+# Usando npm
+npm install @platformbuilders/theme-toolkit
+
+# Usando yarn
+yarn add @platformbuilders/theme-toolkit
+```
+
+### Breakpoints
+A toolkit define uma série de pontos de interrupção para responder a diferentes tamanhos de tela.
+
+Exemplo:
+```javascript
+
+    import styled from 'styled-components';
+    import { breakpoints } from 'theme-toolkit';
+
+    const ResponsiveDiv = styled.div`
+      width: 100%;
+    
+      @media ${breakpoints.inMobile} {
+        background-color: blue;
+      }
+    
+      @media ${breakpoints.inDesktop} {
+        background-color: red;
+      }
+    `;
+```
+
+### Font Size Helper
+getFontSize(props): Retorna o tamanho da fonte baseado na propriedade variant fornecida.
+
+Exemplo:
+
+```javascript
+import styled from 'styled-components';
+import { getFontSize } from 'theme-toolkit';
+
+const Text = styled.span`
+  font-size: ${(props) => getFontSize(props)}px;
+`;
+```
+
+###  Line Height Helper
+getLineHeight(props): Calcula e retorna a altura da linha baseado nas propriedades variant e lineHeightVariant.
+
+Exemplo:
+
+```javascript
+import styled from 'styled-components';
+import { getLineHeight } from 'theme-toolkit';
+
+const Text = styled.span`
+  line-height: ${getLineHeight({ variant: 'medium', lineHeightVariant: 'tight' })}px;
+`;
+
+```
+
+### Theme Getter
+getTheme(themeProp)(props): Retorna o valor de uma propriedade específica do tema.
+
+Exemplo:
+
+```javascript
+import styled from 'styled-components';
+import { getTheme } from 'theme-toolkit';
+
+const successMain = getTheme('success.main');
+
+const Button = styled.button`
+   background-color: ${successMain};
+`;
+```
+
+### Conditional Styler
+ifStyle(prop)(truthy, falsy): Retorna estilos condicionalmente baseado na existência de uma propriedade.
+
+Exemplo:
+
+```javascript
+import { ifStyle } from 'theme-toolkit';
+
+const isActive = ifStyle('$isActive');
+
+const Button = styled.button`
+  width: ${isActive('80px', '60px')};
+`;
+```
+
+### Web Checker
+isWeb(): Verifica se o ambiente de execução é web.
+Exemplo:
+
+```javascript
+import isWeb from 'theme-toolkit';
+
+if (isWeb()) {
+  // Lógica específica para a web
+}
+```
+
+### Pixel to REM converter
+pxToRem(pixels, baseline): Converte pixels para a unidade rem.
+
+Exemplo:
+
+```javascript
+import styled from 'styled-components';
+import { pxToRem } from 'theme-toolkit';
+
+const SpacedDiv = styled.div`
+  margin-top: ${pxToRem(20)};
+  padding: ${pxToRem(15)} ${pxToRem(30)};
+`;
+```
+### Switch Styler
+switchStyle(name)(stylesObj): Retorna estilos com base no valor de uma propriedade específica.
+
+Exemplo:
+
+```javascript
+import { switchStyle } from 'theme-toolkit';
+
+const Button = styled.button`
+  ${switchStyle('size')({
+    small: 'font-size: 12px;',
+    medium: 'font-size: 16px;',
+    large: 'font-size: 20px;',
+  })}
+`;
+```
+
+### Theme Formatter
+themeFormatter(rawTheme): Transforma um tema bruto em um tema fluido.
+Exemplo:
+
+```javascript
+import { themeFormatter } from 'theme-toolkit';
+
+const fluidTheme = themeFormatter(myRawTheme);
+```
+
+## Contribuição
+Aceitamos contribuições! Sinta-se à vontade para enviar um Pull Request ou abrir uma Issue.
 
-## Theme Toolkit