Use temas para manter as cores e os cantos arredondados consistentes em todos os ecrãs do Flowstep

Um tema é uma paleta de cores partilhada e um arredondamento de cantos para os seus ecrãs. Cada ficheiro tem um tema e uma aparência (clara ou escura), e os ecrãs são estilizados com os tokens do tema. Edite um tema e todos os ecrãs que o usam acompanham a alteração, por isso a sua equipa trabalha a partir de um único conjunto de decisões, em vez de repetir cores em cada prompt. Os temas que criar ou gerar são guardados na sua organização e listados em Themes no Home, para que qualquer ficheiro da organização os possa usar.

​

Escolher um tema para um ficheiro

Escolha o tema e a aparência para os novos ecrãs no compositor de prompts dentro de um ficheiro. O botão de tema não está disponível na caixa de prompts no Home.

​

Deixar o Flowstep desenhar um tema

Quando um ficheiro ainda não tem tema — um ficheiro novo com o tema deixado em Automatic —, o Flowstep desenha um tema personalizado juntamente com os primeiros ecrãs que gera. Verá um passo Designing theme no chat enquanto trabalha. O Flowstep constrói o tema a partir de:

• Cores que indica no seu prompt
• Cores nas suas diretrizes de design
• Cores de marca em anexos e em ligações que cola
• O produto e a atmosfera que o seu prompt descreve, quando não houver nada mais específico em que se basear

O tema recebe um nome curto, uma paleta completa para os modos claro e escuro, e um passo de arredondamento. É guardado na sua organização em Themes no Home, e o ficheiro usa-o em todos os ecrãs gerados a partir daí. Depois de um ficheiro ter um tema, o Flowstep não desenha outro por iniciativa própria. Para obter um tema novo, escolha Automatic outra vez no menu de temas — a geração seguinte desenha um novo tema e o ficheiro passa a usá-lo. Se o Flowstep não conseguir desenhar um tema, o ficheiro recorre a um tema incorporado.

​

Alterar o tema de um ecrã

Para estilizar de novo um único ecrã sem tocar no resto do ficheiro:

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

Mudar de tema repinta o ecrã instantaneamente. Alternar entre Light e Dark pede à IA que estilize o ecrã de novo, do mesmo modo que uma edição com IA. O menu fica indisponível enquanto uma geração estiver a decorrer.

​

Editar um tema

Abra um tema na secção Themes no Home. O editor de temas mostra uma pré-visualização em tempo real do tema, com Theme settings à direita. Use os botões Light e Dark no topo para alternar a pré-visualização, e clique no nome do tema para o mudar.

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

As suas edições são guardadas como rascunho, por isso os ecrãs não mudam enquanto trabalha. Quando estiver pronto:

• Clique em Publish para atualizar todos os ecrãs que usam o tema. O Flowstep confirma com “Published. Screens using this theme are updating.”
• Clique em Reset changes para descartar as alterações não publicadas. Os ecrãs que usam o tema não são afetados.

Para remover um tema, clique em Delete theme no fim de Theme settings, ou no ícone do lixo ao lado do tema na lista Themes no Home. Um tema eliminado deixa de ser oferecido nos menus de temas, mas os ecrãs que já o usam mantêm o seu aspeto, por isso nada na sua tela muda.

​

Associar cores e cantos ao seu tema

As cores e os cantos podem apontar para um token de tema em vez de um valor fixo. Um valor associado segue o tema do ecrã, por isso, quando o tema muda — um tema diferente, uma edição publicada ou uma alternância entre claro e escuro —, as cores e os cantos associados são atualizados também. Colors — no painel Fill ou Border, clique na amostra de cor. No separador Token, pesquise ou escolha um token dos grupos Theme, Base ou Tailwind. Use o separador Custom para uma cor exata. Uma cor associada mostra o nome do seu token no painel, e pode continuar a ajustar a sua opacidade. Corners — no painel Corners, clique numa pré-visualização de canto. No separador Token, escolha um passo (por exemplo, md ou lg); no separador Custom, escreva um valor exato em pixels. Um canto associado mostra o nome do seu token, e alterar o arredondamento do tema volta a arredondá-lo. Para transformar um valor associado de novo num valor fixo, clique em Detach from token. A cor ou o canto mantém o seu aspeto atual, mas deixa de seguir o tema.

​

Bom saber

• Os ecrãs mantêm o seu próprio tema — cada ecrã guarda o seu tema e a sua aparência. Alterar o tema do ficheiro só afeta os ecrãs que gerar a seguir; use o menu Theme de cada ecrã para estilizar os existentes.
• Apenas versões publicadas — os ecrãs mostram a versão publicada de um tema. Os rascunhos só são visíveis no editor de temas até publicar.
• As associações a tokens sobrevivem às edições — as cores do tema usadas em sombras, filtros e gradientes mantêm-se associadas ao tema quando o Flowstep edita ou regenera um ecrã.
• Passos de arredondamento que não se ajustam — os tokens de canto none e full são sempre quadrados e totalmente redondos, independentemente do arredondamento do tema.