TextBrand and textBrandInverse tokens

[aweell]

Goal

Create a new pair of tokens:

• textBrand
• textBrandInverse

An example how these tokens could work for a brand like Movistar:

name	color-scheme	palette
textBrand	light	movistarBlue
textBrand	dark	movistarBlue
textBrandInverse	light	white
textBrandInverse	dark	movistarBlue

Context

The current content of the Avatar component differs when coming from an inverse background vs default background, this is due to the inverse token used in inverse contexts. This behavior could be solved with the tokens textBrand and textBrandInverse

Impact

Discussion Questions

• This could be used to other text applications more focused in marketing maybe?

Additional considerations

Although the textBrand token could be something similar to whats brand I still believe it's important the separation of concerns regarding where to use this token: Text and icons next to text only.

Do you have a visual proposal?

[yceballost]

can you provide more information about the usage of textBrandInverse? (screenshot for each combination would be great :))

[aweell]

Added to the visual proposal discussion main thread section

[yceballost]

My only problem with having a textBrand is to open the possibility that teams can use brand color in texts. Something that only have to be justified in a few cases.

Can we solve this avatar problem using brand for the first column. Inverse state could be solved including dark mode logic
light inverse = inverse
dark inverse = brand

If there are exists more cases we could include a specific token to cover all the cases 🤔

[aweell]

Esa lógica es parecida a la que no se podía aplicar a las tags por nativo no? Al final tiene que ir embebida en un token y no hecha con isDark?

[yceballost]

true 🫠

[aweell]

textBrand has been added in #1756