diff --git a/README.md b/README.md index 25c9605..6d9ee5e 100644 --- a/README.md +++ b/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