Páginas filhas
  • Tokens e Definições de Cores

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Informações
titleDisponível

Disponível a partir da release 12.1.2410 do protheus e LIB Label 20241007

Painel
borderColor#29b6c5
titleColor#FFFFFF
titleBGColor#29b6c5
borderStylesolid
titleA Alteração

Estamos fazendo uma mudança na forma como lidamos com cores dentro do nosso sistema ERP. Em vez de lidar diretamente com as cores, estamos introduzindo o uso de Tokens. Essa alteração tem o objetivo de centralizar o controle das cores e tornar as modificações mais flexíveis, evitando retrabalho e garantindo uma padronização consistente em todo o sistema. Atualmente, as cores e Tokens são definidos pela equipe de Experiência do Usuário da Totvs.

Painel
borderColor#29b6c5
titleColor#FFFFFF
titleBGColor#29b6c5
borderStylesolid
titleComo os Tokens Funcionam?

Trabalharemos com variáveis que controlarão as cores principais, assim como as suas variações. Atualmente trabalhamos com os seguintes tokens:

  • brand01Lightest 
  • brand01Lighter
  • brand01Light
  • brand01Base
  • brand01Dark
  • brand01Darker
  • brand01Darkest
  • neutralLight00
  • neutralLight05
  • neutralLight10
  • neutralLight15
  • neutralLight20
  • neutralLight25
  • neutralDark70
  • neutralDark80
  • neutralDark90
  • neutralDark95
  • fontColorLight

As cores desses tokens variam de acordo com o tema utilizado. No momento da definição do CSS dos objetos da Tecnologia, usamos os tokens para padronizar o seu comportamento, por exemplo, para definir a cor de um TSay utilizamos "TSay {color: " + fontColorLight + "}". Quanto o ERP estiver configurado para o tema dark, essa variável ficará com o valor de #FFFFFF, porém, no tema clássico ela será #000000.