Theme

O objeto theme (globals/theme.ts) contém valores padronizados para toda a aplicação, como cores e ícones. Tem a seguinte estrutura:

colors: Cores padrões da aplicação, divididas por intensidade. img: Imagens importadas. icon: Ícones importados. screenSizes: Breakpoints para facilitar a responsividade.

Colors

As cores são divididas em categoria (primary, secondary, etc) e intensidade (color100 a color20).

primary Intensidade Cor color100 color80 color60 color40 color20

secondary Intensidade Cor color100 color80 color60 color40 color20

red Intensidade Cor color100 color80 color60 color40 color20

green Intensidade Cor color100 color80 color60 color40 color20

blue Intensidade Cor color100 color80 color60 color40 color20

black Intensidade Cor color100 color80 color60 color40 color20

Imagens e ícones

Para usar imagens ou ícones da pasta assets, inclua-as na propriedade img (se for uma imagem) ou icon (se for um svg) de theme.

theme.ts

//  Importe a imagem
import Imagem from "assets/nomeArquivo.extensao"

const theme = {
    ...
    img: {
        // Atribua o nome que achar apropriado
        nome: Imagem
    }
    ...
}

paginaExemplo.tsx

function PaginaExemplo() {
    ...
    // Passe a imagem no src da tag img
    <img src={theme.img.nome} />
    ...
}

Screen Sizes

Para facilitar a estilização responsiva, utilize os breakpoints definidos na propriedade screenSizes de theme.

Propriedade	Breakpoint
mobile	only screen and (max-width: 767px)
tablet	only screen and (min-width: 768px) and (max-width: 1023px)
smallScreen	only screen and (max-width: 1023px)
desktop	only screen and (min-width: 1024px)

Para usa-los, use o breakpoint logo após @media:

componente-exemplo/styles.ts

    const Container = styled.div`
        ...

        @media ${theme.screenSizes.mobile} {
            ...
        }
    `