Background Gradient

[annefranca]

Goal

Discutir e avaliar como poderia ser aplicado em Mística a opção de um token "backgroundBrandGradient".

Context

Existe a necessidade da aplicação de um background gradiente em alguns componentes que vão ser desenvolvidos em Extended. Usamos 660099 (vivoPurple) com 8433AD (vivoPurpleLight80) para compor de forma linear.

Impact

Padronizar a aplicação em Color Gradients.

Discussion Questions

Deveria ser um novo tipo de "token"? Se sim, como seria adicionado aos demais tokens?

Additional considerations

ND

Do you have a visual proposal?

https://www.figma.com/file/Q2v4iBJBsVYHAC1w1xuGmz/BG-Gradient?type=design&node-id=0%3A1&mode=design&t=8fSzvedkc5SA22lW-1

[yceballost]

We will add a new token for gradients in backgrounds, thanks Anne!

#1442

[annefranca]

@yceballost

Adicionei no mesmo arquivo alguns fluxos e algumas telas aleatórias que estão usando o gradient.

Observação: o fluxo de Finanças e Seguros ainda está em desenvolvimento, ou seja, podem surgir outros cenários com a mesma necessidade de aplicação do background gradient.

Link: https://www.figma.com/file/Q2v4iBJBsVYHAC1w1xuGmz/BG-Gradient?type=design&node-id=0%3A1&mode=design&t=OtcK7r7c60XI1L5K-1

[yceballost]

I can see another problem here, you are using AdvanceDataCard for this screen and this component (that Vivo team designed and developed for Mística Community) doesn't allow custom background colors (and also does not support inverse version)

So I can see 2 ways:

1. This component that you are showing is developed in Vivo extended (which does not make sense having Mística's advanceDataCard)
2. Evolve this component to allow this customization in background

If the card is built in an extended way, you can simply use the gradient directly in the component and make sure that wherever that card is used it will have the gradient so the use would be in a single place

If you evolve the component you have to use a gradient in all the cases that you need, in that case I think the token will be useful.

Anyway, imo, the best way is to avoid gradient and use the inverse version of the component in these cases. I can understand the gradient resource for special cards (for example the ticket card in this figma) but if it is to be used randomly it is to generate a free inconsistency (with the loss of control that this entails if there is no token for it).

When is the gradient used?

[annefranca]

@yceballost

"If you evolve the component you have to use a gradient in all the cases that you need, in that case I think the token will be useful."

Sim, vamos precisar que seja um token para ter o controle de uso no dia a dia.

Nesse cenário, o Time de Mística pode nos ajudar na criação desse token gradient?

[yceballost]

If you are going to develop a new card, you can use inside this component the solution of hardcoding the gradient → "linear-gradient(120deg, #609 24.24%, #8433AD 79.9%)" because this component will be reused in a lot of cases.

This is the fastest solution at the moment

Think that you can create extended styles in Vivo Extended. You can have backgroundBrandGradient in Vivo extended and reuse it internally.

I don't recommend any practice, I would not create a new card having all the card available in Mística and I would not create extended styles because you are decentralizing the system, but 🤷‍♀️

If we want to include gradient as a token in Mística we need to evolve tokens integration to allow gradient in tokens, this way is slower than the first solution because we need the develop team. Let us have an internal conversation to mature this as it may be useful for another brand that wants to evolve.

[annefranca]

@yceballost

"If we want to include gradient as a token in Mística we need to evolve tokens integration to allow gradient in tokens, this way is slower than the first solution because we need the develop team. Let us have an internal conversation to mature this as it may be useful for another brand that wants to evolve."

Vamos aguardar seu alinhamento interno com o Time de Mística para entender qual caminho vamos seguir para implementar um token de background gradient.

[aweell]

Tras tratarlo internamente:

• Se modificará la advancedCard para admitir backgroundColor como prop (igual que funciona en la poster actualmente)
• El componente ya podría tener en este momento la posibilidad de llevar el gradiente.
• [Evaluación] Creación del token para el gradiente