Color Modifiers (Pro Feature)
Conteúdo adaptado da documentação oficial do Tokens Studio (TS), disponível aqui.
Os Color Modifiers estão disponíveis para usuários com licença Pro e permitem ajustar dinamicamente cores base no Tokens Studio.
Eles facilitam a criação de esquemas coesos, como variações de estado (hover, pressed) ou rampas de cor a partir de uma cor principal.
Tipos de Modificadores
-
Lighten: aumenta a luminosidade, movendo a cor em direção ao branco.
→ Exemplo:0.5= 50% mais clara. -
Darken: reduz a luminosidade, movendo a cor em direção ao preto.
→ Exemplo:0.5= 50% mais escura. -
Mix: mistura a cor base com outra cor em uma proporção definida.
→ Exemplo:0.5= mistura igual entre as duas cores. -
Alpha: ajusta a opacidade da cor.
→ Exemplo:0.5= define opacidade em 50%.
Mais detalhes em:
Exportação para o Figma
- Limitação: ao exportar, modificadores são convertidos em valores hexadecimais e perdem a referência. Alterações posteriores no Tokens Studio não se propagam automaticamente.
- Dica: mantenha a edição no Tokens Studio e reexporte quando necessário.
Mais informações em:
Cuidados com Opacidades e Referências
- Evite aplicar múltiplas camadas de opacidade em tokens já modificados.
- Prefira usar Number Tokens específicos para definir valores de transparência.
Boas Práticas
Use lighten e darken para criar variações de estado mantendo consistência com a cor base.
Isso facilita a manutenção e melhora a coerência visual.