Fórum

[1 thalanezende @thalanerezende Participante]

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?

[1 Ana Takahashi @anatakahashi Participante]

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;

[1 Ana Takahashi @anatakahashi Participante]

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.

[1 thalanezende @thalanerezende Participante]

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

[Autor]

Posts