Use temas para manter cores e arredondamento de cantos consistentes em todas as telas do Flowstep

Um tema é uma paleta de cores compartilhada e um arredondamento de cantos para as suas telas. Todo arquivo tem um tema e uma aparência (claro ou escuro), e as telas são estilizadas com os tokens do tema. Edite um tema e todas as telas que o usam acompanham a mudança, para que sua equipe trabalhe com um único conjunto de decisões em vez de repetir cores em cada prompt. Os temas que você cria ou gera são salvos na sua organização e listados em Themes na Home, para que qualquer arquivo da organização possa usá-los.

​

Escolha um tema para um arquivo

Escolha o tema e a aparência das novas telas no compositor de prompts dentro de um arquivo. O botão de tema não está disponível na caixa de prompt na Home.

​

Deixe o Flowstep criar um tema

Quando um arquivo ainda não tem um tema — um novo arquivo com o tema em Automatic — o Flowstep cria um tema personalizado junto com as primeiras telas que gera. Você verá uma etapa Designing theme no chat enquanto ele trabalha. O Flowstep cria o tema a partir de:

• Cores que você menciona no seu prompt
• Cores nas suas diretrizes de design
• Cores de marca em anexos e em links que você cola
• O produto e o clima descritos no seu prompt, quando não há nada mais específico para se basear

O tema recebe um nome curto, uma paleta completa para claro e escuro, e um nível de arredondamento. Ele é salvo na sua organização em Themes na Home, e o arquivo o usa em todas as telas geradas depois disso. Depois que um arquivo tem um tema, o Flowstep não cria outro por conta própria. Para obter um tema novo, escolha Automatic novamente no menu de temas — a próxima geração cria um novo tema, e o arquivo passa a usá-lo. Se o Flowstep não conseguir criar um tema, o arquivo usa um dos temas integrados.

​

Altere o tema de uma tela

Para reestilizar uma única tela sem alterar o restante do arquivo:

1. Selecione a tela no canvas.
2. No menu acima da tela, clique no botão Theme.
3. Escolha um dos temas da sua organização ou um tema integrado, ou alterne entre Light e Dark.

Trocar o tema repinta a tela instantaneamente. Alternar entre Light e Dark pede à IA que reestilize a tela, da mesma forma que uma edição com IA. O menu fica indisponível enquanto uma geração estiver em execução.

​

Edite um tema

Abra um tema pela seção Themes na Home. O editor de temas mostra uma prévia ao vivo do tema, com Theme settings à direita. Use os botões Light e Dark no topo para alternar a prévia, e clique no nome do tema para renomeá-lo.

• Colors — cada grupo de cores tem uma amostra para o claro e outra para o escuro: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts e Sidebar. Clique em uma amostra para editar suas cores — por exemplo, as cores de preenchimento e de texto de um grupo — com o seletor de cores ou um valor hexadecimal.
• Radius — escolha um nível de arredondamento (Square, Slight, Balanced, Soft ou Round), ou escolha Custom e arraste Base radius para definir o seu próprio.

Suas edições são salvas como rascunho, então as telas não mudam enquanto você trabalha. Quando estiver pronto:

• Clique em Publish para atualizar todas as telas que usam o tema. O Flowstep confirma com “Published. Screens using this theme are updating.” (Publicado. As telas que usam este tema estão sendo atualizadas.)
• Clique em Reset changes para descartar suas alterações não publicadas. As telas que usam o tema não são afetadas.

Para remover um tema, clique em Delete theme na parte inferior de Theme settings, ou no ícone de lixeira ao lado dele na lista Themes na Home. Um tema excluído não aparece mais nos menus de temas, mas as telas que já o usam mantêm a aparência, então nada no seu canvas muda.

​

Vincule cores e cantos ao seu tema

Cores e cantos podem apontar para um token de tema em vez de um valor fixo. Um valor vinculado acompanha o tema da tela, então, quando o tema muda — um tema diferente, uma edição publicada ou a troca entre claro e escuro —, as cores e os cantos vinculados são atualizados junto. Colors — no painel Fill ou Border, clique na amostra de cor. Na aba Token, pesquise ou escolha um token dos grupos Theme, Base ou Tailwind. Use a aba Custom para uma cor exata. Uma cor vinculada mostra o nome do token no painel, e você ainda pode ajustar a opacidade. Corners — no painel Corners, clique na prévia de um canto. Na aba Token, escolha um nível (por exemplo, md ou lg); na aba Custom, digite um valor exato em pixels. Um canto vinculado mostra o nome do token, e alterar o arredondamento do tema o recalcula. Para transformar um valor vinculado em fixo novamente, clique em Detach from token. A cor ou o canto mantém a aparência atual, mas deixa de acompanhar o tema.

​

Informações úteis

• As telas mantêm o próprio tema — cada tela lembra seu tema e sua aparência. Alterar o tema do arquivo afeta apenas as telas que você gerar a seguir; use o menu Theme de cada tela para reestilizar as existentes.
• Somente versões publicadas — as telas mostram a versão publicada de um tema. Os rascunhos ficam visíveis apenas no editor de temas até você publicar.
• Vínculos de token sobrevivem a edições — as cores do tema usadas dentro de sombras, filtros e gradientes continuam vinculadas ao tema quando o Flowstep edita ou regenera uma tela.
• Níveis de arredondamento que não se ajustam — os tokens de canto none e full são sempre quadrados e totalmente arredondados, independentemente do arredondamento do tema.