DSvault

Carregando...

Registrar

Design Tokens

@design-tokens

Público

54

membros

8

postagens

Typescript para Styled Components

Visualizando 4 posts - 1 até 4 (de 4 do total)
  • Autor
    Posts
  • Oi pessoal, tudo bem?

    Estou construindo um DS com meu time e nossa deva está, nesse momento, tentando entender como podemos (SE PODEMOS HEHE) fazer o DS funcionar com typescript ao invés de JS ou sass para que ela consiga usar com styled components.

    Alguém aqui já tentou este caminho? Sabe se ele é possível?

    Sim, é possível!!!!

    seus arquivos ts devem ter uma estrutura mais ou menos desse tipo:

    // theme.ts
    
    const theme = {
      colors: {
        primary: [
          "hsl(205, 79%, 97%)",
          "hsl(205, 97%, 85%)",
          "hsl(205 ,84%, 74%)",
        ],
        secondary: [
          "hsl(171, 82%, 96%)",
          "hsl(172, 97%, 88%)",
          "hsl(174, 96%, 78%)",
          "hsl(176, 87%, 67%)",
          "hsl(178, 78%, 57%)",
          "hsl(180, 77%, 47%)",
          "hsl(182, 85%, 39%)",
          "hsl(184, 90%, 34%)",
          "hsl(186, 91%, 29%)",
          "hsl(188, 91%, 23%)",
        ],
      },
      space: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256],
    };
    
    export default theme;

    Dá uma olhadinha nesse arquigo do Erik sobre isso.

    https://www.erikverweij.dev/blog/manage-design-tokens-with-typescript-and-styled-components/

    Leia também o artigo escrito pelo @sergio : http://dsvault.io/design-tokens-do-figma-ate-ao-codigo/

    A lógica é a mesma. Recomendo inclusive que vocês avaliem o stye-dictionary para fazer essa conversão dos tokens.

    Nossa, muito obrigada!!! Nós estamos considerando utilizar style dictionary sim!! Que artigos ricos!!! Gratidão Ana!

2

Participações

3

Respostas

Categorias

Este tópico não possui categorias

Visualizando 4 posts - 1 até 4 (de 4 do total)
  • Você deve fazer login para responder a este tópico.