@platformbuilders/theme-toolkit
v0.3.0
Published
Theme helpers to use combined with Fluid Design System.
Downloads
661
Readme
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:
# 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:
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:
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:
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:
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:
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:
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:
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:
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:
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.