DEV Community

Cover image for O melhor gerador de tokens
André Peixoto
André Peixoto

Posted on

O melhor gerador de tokens

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.

cole sua cor base de referência

> 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.

cor base

> Esse cor onde está o cadeado é a cor de referência que você passou


Clique em Edit

editar


Coloque o nome do token, por exemplo Primary, Secondary, Danger, Warning, ou seja, todas as variações que tiver mapeado no seu Design System.

name token


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.
lightness adjust


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.

first image

second image



Bom, agora feito os ajustes, só exportar e pegar seu token prontinho.

Token Cores


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: {},
  },
Enter fullscreen mode Exit fullscreen mode

Espero que essa dica te ajude!
Quer trocar uma idéia, chega aqui

Top comments (0)