Como regular as bordas na minha app?

Eis como funciona a borda numa app GoodBarber, onde está e como regular a sua cor e a sua espessura, até ao filete sob um título.

Uma borda é um traço que segue o limite de um elemento. Marca onde ele começa e onde acaba, e revela a sua forma, cantos retos ou arredondados. Uma célula, um campo, um botão, uma pastilha de data, um separador de categoria, a barra de separadores, todos têm uma. Três regulações a descrevem:

• A cor, transparente por defeito numa célula ou num widget, a escolher na sua paleta ou fora dela.
• A espessura, um número inteiro, em píxeis. Vale 1 por defeito.
• Os lados, no cabeçalho de um widget: em cima, à direita, em baixo e à esquerda (top, right, bottom, left), cada um ativo ou desativado. Os quatro ativos emolduram o título. Só o de baixo sublinha-o.

É tudo, e é isso que torna a borda tão simples de regular. No Design System da GoodBarber, é o átomo Border, com as suas chaves color e size e, para um cabeçalho, uma chave por lado.

Numa app GoodBarber, não adiciona uma borda, revela-a. As células, os widgets da Home e os seus cabeçalhos têm uma, de 1 px, transparente. Dê-lhe uma cor e ela aparece. Os campos e os botões também têm uma, e a deles já se vê, cinza-claro num campo, na cor do texto num botão de contorno. É o nosso princípio «Design by system», cada elemento é construído com a sua borda, pronta a servir.

Num widget da Home, a cor escolhe-se no painel de design, pelo caminho Minha App › Estrutura › Home › o seu widget › Editar. Encontra aí três cores, «Bordas» para o cabeçalho, «Cor de contorno» para a moldura do widget inteiro e «Cor da borda» para cada célula. A espessura, essa, regula-se no JSON, já lá vamos.

Para os campos, uma só regulação chega para toda a app. Vive em Estilo da App, com o botão { EDIÇÃO } de que falamos mais abaixo, sob designComponents, textField e depois border.

Uma lista tem uma regra a mais. Quando as suas células não têm fundo nem borda, seguem-se diretamente na página e um filete fino separa-as, o separador, na cor «Separador de lista» das suas Cores. Dê uma cor às células, ao fundo ou à borda, e a lista muda de modo. O separador apaga-se sozinho. Cada célula destaca-se das vizinhas e os seus cantos aparecem, conforme a sua regulação de forma. Nada a desativar, nada a alinhar.

Assim, numa app GoodBarber, uma lista nunca acumula dois traços, o filete entre as linhas ou o traço à volta de cada célula, e é o sistema que escolhe. É o nosso princípio «No design burden», para que o design nunca seja um fardo.

Eis duas vezes o mesmo ecrã. À esquerda, todas as bordas estão a 1 px, num cinzento discreto. Delimitam cada elemento, mas nada sobressai, tudo vale o mesmo. À direita, passam ao preto suave da paleta (#282727) e a sua espessura segue o papel de cada elemento. 1 px para a barra de navegação e a célula de evento, 2 px para os cabeçalhos dos widgets e a pastilha da data, 4 px para a única notícia em destaque. Uma sombra dura sob a pastilha acaba de dar ao ecrã o seu ar de cartaz. O olhar sabe logo para onde ir.

As espessuras mudam-se num instante. Experimente, compare na pré-visualização e fique com o que o seu olhar preferir.

A mesma célula pode ter bordas muito diferentes, e cada uma muda o estilo da sua app. A imagem mostra quatro, da mais discreta à mais marcada:

A primeira linha corresponde à regulação por defeito, a que obtém sem escrever nada. As outras três copiam-se tal e qual no editor, chave a chave.

Nenhuma destas bordas é melhor do que outra, e todas se regulam com as mesmas chaves. A mais grossa, por si só, pode dar o seu estilo a uma app, como na nossa maquete de app de galeria de arte, em neobrutalismo, no Dribbble, com bordas pretas grossas e cantos retos.

A minha regulação preferida cabe num traço, um filete de 1 px sob o título de um widget, na cor dos filetes da paleta. Já se cruzou com ele nas imagens deste artigo. Como num jornal, separa o título do conteúdo sem fechar nada, e a lista respira. Uma moldura completa à volta do título faria dele um botão.

A sua cor escolhe-se no painel do widget, em «Bordas», e os seus lados em { EDIÇÃO }, é o gesto do passo 4 acima.

A borda em resumo

• Numa app GoodBarber, a borda já lá está, 1 px, nas células, nos widgets e nos seus cabeçalhos, nos campos e nos botões, transparente exceto nos campos e nos botões de contorno.
• Três regulações, a cor, a espessura (um número inteiro em píxeis) e, no cabeçalho de um widget, os lados (top, right, bottom, left), cada um ativo ou desativado.
• Borda ou separador, nunca os dois. Uma cor de fundo ou de borda na célula apaga o separador e destaca-a.
• Num widget da Home, três cores no painel, o cabeçalho, o widget, a célula.
• Para os campos, uma só regulação vale para toda a app.
• A espessura e os lados regulam-se no JSON, com a extensão gratuita Edição avançada (botão { EDIÇÃO }).