React: integrando temas com styled-components

Trabalhando com temas em um design system - Apresentação

Olá! Sou o Pedro, instrutor da Alura. Boas-vindas a mais um curso de React!

Audiodescrição: Pedro é uma pessoa com cabelos e barba castanho-escuro. Usa piercing no nariz, um colar e camiseta preta. Ao fundo, uma iluminação degradê do roxo ao azul e quadros pendurados das paredes. Na direita, uma prateleira com objetos de decoração e mais mais à frente instrumentos de corda enfileirados.

Estamos ansiosos para colocar a mão na massa e aprender sobre temas em Design System. No Storybook do nosso projeto, onde o Alfabit, esse Design System, já possui alguns componentes e tokens de cores desenvolvidos, além de alguns projetos de demonstração, como o nosso Storybook e o Alfabit Demo. Dentro desses projetos, podemos experimentar a troca de tema.

Por enquanto, nossa aplicação está com o tema claro sendo exibido. Ao clicar no botão, ela troca para o tema escuro, e também há um botão para uma troca de tema customizado que desenvolveremos juntos neste curso, voltado para a parte de temas com Design System.

Além disso, faremos a integração do GitHub Actions para realizar tanto o build quanto a release dos pacotes que temos dentro do monorepositório do Design System e componentes Alfabit. Vamos explorar na prática como criar, seguir o passo a passo e configurar nossas secrets, tanto do npmjs para fazer a publicação quanto do lado do GitHub.

Este curso é bastante abrangente, nos divertiremos muito explorando a parte de temas.

Pré-requisitos

Para acompanhar o curso, é necessário um bom conhecimento em React, pois vamos pular alguns conceitos mais básicos e partir para um desenvolvimento mais avançado. Utilizaremos hooks como useContext e useState, que serão bastante necessários, além de manusear arquivos TypeScript para criar tipagens específicas e trabalhar com notação de objeto e propriedades dentro do TypeScript.

Vamos explorar tudo isso juntos. Pegue sua água para se hidratar e vamos embarcar nesta jornada aprendendo mais sobre temas em Design System. Vamos lá!

Trabalhando com temas em um design system - Criando temas

Quando começamos a discutir a escalabilidade do nosso Design System, encontramos alguns desafios. Vamos explorar mais esse tema.

Escalabilidade do Design System

Para ilustrar, estamos utilizando um editor de código aberto dentro do monorepositório do Alphabit, que é o nosso Design System. Acessamos a pasta "Packages > alphabit-tokens > src". No arquivo colors.ts, todas as cores utilizadas pelo nosso Design System já estão implementadas. Para utilizá-las, basta exportar o token, que é um objeto. Ao exportar o objeto background.light, temos acesso ao token que contém a hash FFFFFF, que representa a cor branca. Da mesma forma, ao acessar a cor dark, utilizamos background.dark, que retorna a hash hexadecimal correspondente.

No entanto, como os componentes são implementados no Design System não permite flexibilidade na alteração de cores. Por exemplo, ao acessar o Alphabit Button, na estrutura de "packages" no monorepositório, percebemos que no arquivo button.styles.ts, na linha 19, a cor primária azul será sempre a definida no token. Isso significa que, ao utilizar esse componente em qualquer lugar, ele terá a mesma cor. Surge, então, a necessidade de oferecer uma alternativa para a pessoa desenvolvedora poder adaptar a hash dessa cor primária, permitindo que, independentemente do local de uso, dentro de um tema, ela possa definir sua própria hash de cor azul primária e implementá-la no botão.

Criação de Temas

Vamos começar a discutir como criar temas e flexibilizar sua utilização para as pessoas desenvolvedoras que utilizam o Design System. Para isso, voltamos na pasta "alphabet-tokens > src". Em "src", clicamos com o botão direito e depois em "New file". O nomeamos de themes.ts.

Consultando a documentação do Material UI, por exemplo, observamos uma forma de criar temas para serem implementados. Vamos criar nosso próprio "gerador de temas" para fornecer aos componentes e aplicações que utilizam nossos componentes. Teremos sempre um tema padrão (default). Existe um conceito de esquemas dentro dos temas, que se popularizou entre 2017 e 2018, especialmente com a alternância entre temas claros e escuros em sites, como blogs desenvolvidos com Next.js, Gatsby, ou outros frameworks de páginas estáticas. Isso permite alterar toda uma paleta de cores, espaçamento e até fontes, se desejado.

Implementação dos Temas

No arquivo themes.ts, iniciaremos criando export const light theme = {}. Pulamos duas linhas e criamos o export const darkTheme = {}, ambos inicialmente como objetos vazios. Ao investigar como nosso Design System e tokens estão estruturados, percebemos que são objetos que acessamos para obter as informações desejadas. Essa é uma forma funcional de implementar tokens, que funciona bem com TypeScript, pois oferece documentação quase em tempo real do que está contido no objeto.

export const lightTheme = {};

export const darkTheme = {};

Já temos dois esquemas para trabalhar: light theme e dark theme. Um deles será o tema padrão, garantindo que, caso a pessoa desenvolvedora não escolha um tema, ainda haverá uma cor padrão. Trabalhar com temas é opcional e depende do projeto. Temas são muito utilizados no contexto de escalabilidade, resolvendo problemas relacionados. No entanto, precisamos aprofundar a utilização de temas, pois podemos customizar cores e criar temas personalizados, assunto que discutiremos mais adiante.

Vamos começar a implementar, passando os tokens desejados para o tema claro e, em seguida, para o tema escuro. Continuaremos essa implementação na sequência.

Trabalhando com temas em um design system - Definindo um tema claro

Vamos criar os temas que teremos dentro do Design System. Já temos o lightTheme e o darkTheme criados dentro do themes.ts. Agora, precisamos passar os tokens para dentro desses objetos. Fazemos isso para não precisar, toda vez que trabalharmos com temas, visitar outro arquivo, como o colors.ts, para verificar qual cor corresponde ao tema claro, por exemplo. Assim, deixamos tudo pronto para facilitar na criação da nossa função de tema.

Definindo os temas no Design System

Dentro do themes.ts, no lightTheme, criaremos um objeto chamado colors. Vamos separar dessa forma porque, neste curso, abordaremos a customização de cores, mas um tema não se limita a isso. Podemos ter, por exemplo, customização de espaçamento, fonte, entre outros objetos customizáveis dentro de um tema. Para facilitar a visualização rápida e fácil da atualização de temas no navegador, utilizaremos as cores, que são mudanças visuais drásticas quando alteramos o tema. Dentro do objeto colors, criaremos um chamado background.

export const lightTheme = {
    colors: {
    }
}

export const darkTheme = {};

No colors.ts, já temos uma diferenciação de background, light e dark. Utilizaremos o background.light, lembrando de fazer a importação na linha 1. Também teremos uma cor específica para textos, que pode ser o gray primary, que é um #181818 e fazemos também a importação.

Teremos agora um token específico para a cor primary, que nos temas claro e escuro normalmente segue um padrão de azul ou violeta. Nesse caso, o primary refletirá o blue.primary do colors.ts, nossa cor primária. Para a cor secundária, queremos fugir um pouco do azul. Vamos testar o #5C5C5C, que pode ser uma boa cor para o tema claro. No tema escuro, valorizaremos cores que se destacam em fundos escuros. Utilizaremos o gray.secondary como cor secundária.

Definindo padrões para cores de status

O padrão de temas ao trabalhar com cores é ter sempre um background, uma cor de texto, uma cor primária, uma cor secundária, uma cor de sucesso, uma cor de aviso e uma cor de erro. A psicologia das cores sugere que, para sucesso utilizamos verde, para aviso amarelo e para erro o vermelho. Os temas são customizáveis conforme desejarmos.

Abaixo do secondary, criaremos uma cor de sucesso. Como não temos um token verde implementado, criaremos um export const green no colors.ts, definindo um verde primário, #28A745, para sucesso. Aproveitaremos para criar um vermelho, red.primary, #DC3545, e um amarelo, yellow.primary, #FFC107. Assim, criamos três tokens: verde, vermelho e amarelo.

colors.ts

//Código omitido

export const green = {
    primary: '#28a745',
};

export const red = {
    primary: '#dc3545',
};

export const yellow = {
    primary: '#ffc107',
};

Salvamos o arquivo e voltamos ao themes.ts. No success, linha 9, adicionamos o green.primary, na linha 10, o error: red.primary e na linha 11 warning: yellow.primary. Dessa forma, temos tokens para o tema claro.

Existem outras duas cores, black: #000000 e white; FFFFFF, que são importantes. Podemos criar uma const chamada commonColors e adicionar essas cores para tornar o código mais legível. Utilizamos o spread operator para adicionar black e white ao objeto colors, sem replicar linhas, pois podem surgir mais cores comuns entre os dois temas.

themes.ts

import { background, blue, gray, green, red, yellow } from './colors';

const commonColors = {
    black: '#000000',
    white: '#FFFFFF',
};

export const lightTheme = {
    colors: {
        ...commonColors,
        background: background.light,
        text: gray.primary,
        primary: blue.primary,
        secondary: gray.secondary,
        success: green.primary,
        error: red.primary,
        warning: yellow.primary,
    },
};

export const darkTheme = {};

Trabalhamos com o tema claro e, na sequência, trabalharemos com o tema escuro. Nos encontramos na próxima etapa!

Sobre o curso React: integrando temas com styled-components

O curso React: integrando temas com styled-components possui 124 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Trabalhando com temas em um design system
• Utilizando temas
• Aplicando temas
• Customizando temas
• Adicionando tokens compostos