Change some Vivo token colors (a11y)

[yceballost]

https://jira.tid.es/browse/OBVIVO-2271

Description

• Modify color in tokens
• Create new barTrack token to be used in progressBar, steppedBar, slider and stepper components

Tasks

• Update documentation
• Update tokens
• Update libraries
• iOS ticket
• Android ticket
• Web ticket

Discussed in #1600

^{Originally posted by Ro-Matos December 19, 2023}

Goal

Precisamos ajustar alguns tokens de cor para que critérios de contraste WCAG sejam atendidos.

Pela WCAG temos o critério de contraste não textual (1.4.11 Non text contrat) que traz a importância do contraste em controles de componentes ou indicações de estados, que devem passar no contraste mínimo de 3:1.

Os problemas de contraste também foram relatados por pessoas com baixa visão.

Context

Ajustes:

1. Alteração token Control
Alteração do HEX do token Control para atender 3:1 de contraste, no tema Vivo New.

---

2. Separação de componentes que utilizam token Control
O token "Control" é utilizado em elementos interativos importantes que são o Radio button, Checkboxes, Chips e controles do Carousel. Mas o mesmo token também é utilizado nos componentes Slider, Progress Bar e Stepper como cor na composição dos elementos, e a alteração nestes gera implicações visuais. Gostaríamos de saber se vocês teriam uma solução para que a alteração não afete os componentes Slider, Progress Bar e Stepper.

---

3. Alteração do token backgroundSkeleton
O skeleton é um componente que indica o carregamento da página, ou seja um estado. Por isto deve passar em contraste não textual.

Observação: Utilizamos o skeleton com animação (50% de opacidade do token). O intuito é garantir total visibilidade quando ele atinja a cor sólida (mais escura) .

---

4. Alteração cor do Divider
Melhoria de UI tema Vivo New. Para que o divider fique mais visível e equalizado com mesmo HEX do token de borda. Mais detalhes na proposta no Figma.

---

5. Alteração de cores da Tab Bar inativa
Alteração de cores no tema Vivo New para os botões inativos da Tab Bar e separação em cor do ícone e cor do texto. Atualmente o ícone e o texto usam o mesmo o token (TextAppBar). Nesta proposta a cor do ícone e dos textos seriam separadas, para menor impacto visual e atendimento ao contraste mínimo de cada tipo de elemento. Mais detalhes na proposta no Figma.

Impact

No token Control a alteração irá afetar componentes que não gostaríamos que fossem afetados.

Discussion Questions

O uso do token "Control" nos componentes Progress bar e Stepper semânticamente talvez não seja o ideal. Pois não há controles nestes componentes.

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/file/SakPOIOx0axv3iIJRHoEzh/Evolu%C3%A7%C3%A3o-Token-Border?type=design&node-id=596-7620&mode=design

[yceballost]

We finally created just a new token called barTrack to use in ProgressBar, Stepper and Slider. barIndicator was discarded