Se você já precisou gerar os tokens pra um projeto de Design System já deve ter visto o quanto é chato 🫠. Se nunca passou por isso, sorte sua, porque não precisa.
Com esse link aqui você passa o hex da cor base e ele cria as variações, e melhor, na hora de exportar ainda permite escolher o padrão.
Vamos lá...
Esse é o link do site que estou usando, é bem simples, mas abaixo deixei um passo a passo e algumas dicas 😉.
https://uicolors.app/create
Você começa colocando aqui a sua cor base.
> Eu tenho por hábito organizar da seguinte forma meus tokens. Lightest, Light, Base, Dark, Darkest... ou seja, a base é a cor principal
Feito isso, ele vai gerar as variações, aqui tem alguns ajustes interessantes.
> Esse cor onde está o cadeado é a cor de referência que você passou
Clique em Edit
Coloque o nome do token, por exemplo Primary, Secondary, Danger, Warning, ou seja, todas as variações que tiver mapeado no seu Design System.
Aqui você pode fazer alguns teste e ver o que altera na composição das cores, mas o que acho bem válido são os ajustes de Lightness.
Acho que vale mostrar a diferença entre o primeiro gerado e depois do ajuste.
Fiz um pequeno ajuste, pois a cor 100 estava muito clara, eu queria um pouco mais escura, mas é importante lembrar que a cor base ele não altera, a não ser que você clique no cadeado.
Bom, agora feito os ajustes, só exportar e pegar seu token prontinho.
Como eu disse, eu não uso esse padrão de numeral, prefiro um pouco mais literal, acho mais fácil, então eu faço esse ajuste final no meu config do tailwind.
theme: {
colors: {
'primary': {
'lightest': '#d2fbfb',
'light': '#71ecef',
'base': '#15c5ce',
'dark': '#177a87',
'darkest': '#1b525e',
},
'secondary': {
'lightest': '#ffe2d4',
'light': '#ff8156',
'base': '#fc3613',
'dark': '#c51009',
'darkest': '#7e1010',
},
},
extend: {},
},
Espero que essa dica te ajude!
Quer trocar uma idéia, chega aqui
Top comments (0)