Cores
Funcionamento
Todas as cores derivam de Tokens Primitivos de Cores, que foram definidos no projeto. De forma a tornar a gestão do White Label mais facilitada, recomendamos adicionar mais tons de cores nos tokens primitivos antes de re-definir as variáveis no projeto.
Caso haja a necessidade de mais variações, o uso de sufixos como Light e Dark é muito bem vindo.
Foundation
Base das cores escolhidas a partir dos tokens primitivos de cores.
| Foundation | Color |
|---|---|
| accent | {Pink.Pink - 300} |
| accentLight | {Pink.Pink - 100} |
| brandA | {Purple.Purple - 300} |
| brandB | {Blue.Blue - 300} |
| brandC | {Yellow.Yellow - 300} |
| brandD | {Orange.Orange - 300} |
| brandE | {Pink.Pink - 300} |
| negative | {Red.Red - 100} |
| neutralPrimary | {Neutral.black} |
| neutralSecondary | {Neutral.white} |
| positive | {Green.Green - 300} |
| warning | {Yellow.Yellow - 400} |
Core
Desdobramento das cores utilizadas em aplicações mais práticas: