From 417982b6c59f92b6b77b53d0a646c9b0ee0d7cd2 Mon Sep 17 00:00:00 2001
From: LUCAS DINIZ DE MELO <md.lucasd@gmail.com>
Date: Fri, 22 Sep 2023 10:20:32 -0300
Subject: [PATCH 1/3] Update README.md

---
 README.md | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 151 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 25c9605..39aa17c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,153 @@
-![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 theme-toolkit
+
+# Usando yarn
+yarn add 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 Button = styled.button`
+  background-color: ${getTheme('colors.primary')};
+`;
+```
+
+### Conditional Styler
+ifStyle(prop)(truthy, falsy): Retorna estilos condicionalmente baseado na existência de uma propriedade.
+
+Exemplo:
+
+```javascript
+import { ifStyle } from 'theme-toolkit';
+
+const Button = styled.button`
+  ${ifStyle('primary')('color: blue;', 'color: red;')}
+`;
+```
+
+### 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

From 1641c29eb8183aa8ee6eaf16364687f377164b32 Mon Sep 17 00:00:00 2001
From: LUCAS DINIZ DE MELO <md.lucasd@gmail.com>
Date: Fri, 22 Sep 2023 10:21:32 -0300
Subject: [PATCH 2/3] fix install command

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 39aa17c..170f782 100644
--- a/README.md
+++ b/README.md
@@ -11,10 +11,10 @@ Use o gerenciador de pacotes de sua escolha:
 
 ```bash
 # Usando npm
-npm install theme-toolkit
+npm install @platformbuilders/theme-toolkit
 
 # Usando yarn
-yarn add theme-toolkit
+yarn add @platformbuilders/theme-toolkit
 ```
 
 ### Breakpoints

From 37baf21079da0cc0af6b049e231a782ebd4f2082 Mon Sep 17 00:00:00 2001
From: LUCAS DINIZ DE MELO <md.lucasd@gmail.com>
Date: Fri, 22 Sep 2023 10:40:13 -0300
Subject: [PATCH 3/3] fix best pratices

---
 README.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 170f782..6d9ee5e 100644
--- a/README.md
+++ b/README.md
@@ -77,8 +77,10 @@ Exemplo:
 import styled from 'styled-components';
 import { getTheme } from 'theme-toolkit';
 
+const successMain = getTheme('success.main');
+
 const Button = styled.button`
-  background-color: ${getTheme('colors.primary')};
+   background-color: ${successMain};
 `;
 ```
 
@@ -90,8 +92,10 @@ Exemplo:
 ```javascript
 import { ifStyle } from 'theme-toolkit';
 
+const isActive = ifStyle('$isActive');
+
 const Button = styled.button`
-  ${ifStyle('primary')('color: blue;', 'color: red;')}
+  width: ${isActive('80px', '60px')};
 `;
 ```