Define when an app page has a `bg-base-soft` background

beatrizmilhomem commented 3 months ago

Em estudos recentes de diferentes designers tenho visto diferentes abordagens e aplicações do fundo da página com bg-base-soft. Quais os cenários que devemos usar? Seria só em dashboards? O header também deve mudar a cor de background?

Considerando a recorrência que isso tem aparecido, acredito que o Shoreline deveria ter essa diretriz logo. O que acham?

felipepowlist commented 3 months ago

Eu estou usando no formulário da Content Platform com o racional de de destacar melhor os blocos/componentes.

renatamottam commented 3 months ago

Tenho tentado usar em telas com cards pra dar uma dividida melhor e num ficar com tantas linhas	FS WebOps

Algumas dúvidas que fico quando testo esse uso:

qual seria o tamanho ideal pro conteúdo?
se o meu produto usa Tabs eu deveria manter o bg em todas elas?

BeatrizAlbino commented 3 months ago

Meu caso também é utilizado o bg no cinza pra dar mais destaque nos componentes e dar menos foco nas linhas, pq já tem várias dentro dos componentes

rhebeca commented 3 months ago

Nessa experimentação de suppliers, optamos pelo fundo cinza por se tratar de uma interface modular e contextual. Trabalhar com os cards brancos sobre o fundo cinza tornou mais facil a dinamica de tornar os módulos visiveis ou não dependendo do usuário que estiver acessando a página. Dessa forma também teriamos a flexibilidade de experimentar larguras diferentes para o card dependendo da relevância que determinados módulos tivesse no contexto!

davicostalf commented 3 months ago

Talvez a discussão aqui não seja quando usar fundo cinza, mas quando usar cards. Me parece que, quando se usa cards, o fundo cinza sempre é a melhor opção.

gabriel-niemeyer commented 3 months ago

Tenho uns estudos (concept ainda) onde o fundo cinza é usado nos cards ao invés do bg da página.

Fiz isso pq ficou mais leve e "fresh" do que quando fiz a lógica inversa nesse meu cenário.

gabriel-niemeyer commented 3 months ago

A versao com o bg-base-soft no fundo. Minha impressao é que "pesa" o layout nesse meu caso

elleenvs-d commented 3 months ago

Meu uso também foi pra dar destaques pra cards mas também achei que pra um cenário de preview o bg-base-soft funcionou bem pra tentar trazer uma diferenciação. Nesse meu caso do que era clicável (auto-pilot actions) e o resultado proveniente do clique (preview).

beatrizmilhomem commented 3 months ago

Blz! Já tá claro que vamos usar o bg-base-soft sempre que tiver cards. Mas ainda fica a questão do header da página.

Reparei que no estudo de @felipepowlist e @renatamottam o header da página continua branco e no de @BeatrizAlbino tá cinza. Entendo que no caso de Bea esse deve ter sido o melhor caminho porque os page headers sem Tabs não tem tem divider, então ficaria uma quebra estranha de cor, mas por outro lado, acho que descaracteriza um pouco o estilo da página. Com o header branco a gente mantém uma familiaridade entre páginas. Vcs também acham isso ou pensam diferente?

@gabriel-niemeyer seu caso me parece uma exceção pq vc tá lidando com um conteúdo bem diferente 🤔 realmente no card branco com as imgs dentro fica mt marcado, no outro caso a sobreposição de cinzas fica mais leve mesmo!

Talvez a discussão aqui não seja quando usar fundo cinza, mas quando usar cards.

@davicostalf Concordo que é uma discussão que faz sentido, mas faria uma issue separada!

davicostalf commented 3 months ago

Sobre o ponto que @gabriel-niemeyer trouxe, nunca tenho conseguido usar o fundo cinza com nossa borda padrão. O card fica muito pesado. Acho que vale entender se a gente deixa o card sem borda mesmo ou padroniza o uso dessa sombrazinha que @felipepowlist vem adicionando. Outra opção é clarear nosso token de borda.

Um padrão de cards com fundo cinza, em vez de fundo cinza na página, seria mais difícil de padronizar. Nem todo elemento tem um bom contraste em cima de um fundo cinza, o fundo branco é mais versátil.

Sobre a cor do fundo do header, sou a favor do header cinza também nesses cenários. Dá mais destaque pro conteúdo principal. Outros exemplos de header com fundo cinza incluem a home do admin atual e o dashboard de sales performance. Só teríamos que experimentar com o contraste de botões e tabs nessa aplicação.

gabriel-niemeyer commented 3 months ago

Acho que é valido explorarmos o fundo cinza + card branco sem borda msm. Acho que dá uma leveza na interface tbm. Testei aqui e no meu caso já ajudou nesse quesito

beatrizmilhomem commented 3 months ago

Próximos passos:

Fazer testes em páginas de cards com o fundo em bg-base-soft, com o header também em cinza ou em branco. Avaliar como os elementos existentes no header ficam no caso de fundo cinza. Avaliar o impacto na navegação entre páginas, quando uma tem o header branco e a seguinte cinza.
Fazer testes para o estilo da borda do card, como por exemplo 1) sem cor na borda, 2) nova cor para o border-base e 3) utilizando sombra, ao invés de borda, como no exemplo de Felipe.

beatrizmilhomem commented 1 week ago

Fiz os testes e essa é a proposta no Figma (as tabs estão navegáveis).

Page:

Sempre usar cards na página quando o conteúdo é denso e/ou extenso para agrupar o conteúdo por informações relacionadas. Nesses casos o fundo deve ser bg-base-soft.
O header da página deve seguir a mesma cor do fundo.
Quando a página tem Tabs e o conteúdo de uma das Tabs deve ser dividido em cards, todas as páginas vão usar o fundo bg-base-soft e o conteúdo deve estar em cards também.

Card:

Usa novo token de sombra, ao invés de border-base.
Deveríamos implementar o componente Card que já tenha o radius, sombra e paddings padrão.

beatrizmilhomem commented 2 days ago

Depois da weekly de maintainers:

Testar como ficaria todo o admin com cards e levar para discussão em design
Comparar com admin usando cards apenas em algumas páginas (páginas com cards fundo cinza + sem cards fundo branco)
Cards - mais fácil de organizar conteúdo, mais fácil de implementar e mais escalável

vtex / shoreline

Define when an app page has a `bg-base-soft` background #1788