New docs pt br

pages/available-tokens/_meta.pt-br.json

@@ -1,13 +1,15 @@
 {
-  "available-tokens": "Overview",
-  "sizing-tokens": "Sizing tokens",
-  "spacing-tokens": "Tokens de Espaçamento (Spacing)",
-  "color-tokens": "Tokens de cor",
-  "border-radius-tokens": "Border radius tokens",
-  "border-width-tokens": "Border width tokens",
-  "shadow-tokens": "Shadow tokens",
-  "opacity-tokens": "Opacity tokens",
-  "typography-tokens": "Typography tokens",
-  "asset-tokens": "Asset tokens",
-  "composition-tokens": "Tokens de Composição (Pro)"
+  "available-tokens": "Resumo",
+  "sizing-tokens": "Tokens de Tamanho",
+  "spacing-tokens": "Tokens de Espaçamento",
+  "color-tokens": "Tokens de Cor",
+  "border-radius-tokens": "Tokens de Borda: Raio",
+  "border-width-tokens": "Tokens de Borda: Largura",
+  "shadow-tokens": "Tokens de Sombra",
+  "opacity-tokens": "Tokens de Opacidade",
+  "typography-tokens": "Tokens de Tipografia",
+  "asset-tokens": "Tokens de Ativos (Assets)",
+  "composition-tokens": "Tokens de Composição (Pro)",
+  "dimension-tokens": "Tokens de Dimensão",
+  "border-tokens": "Tokens de Bordas"
 }

pages/available-tokens/asset-tokens.pt-br.mdx

@@ -1,20 +1,22 @@
-# Asset Tokens
+# Tokens de Ativos (Assets Tokens)
 
-To make it possible to tokenize logo’s, backgrounds and any other image, we created Asset tokens. The asset tokens allow you to use an image url as a fill for any layer. 
-This can be very useful in white-label projects, where you need to change the assets, next to colors and typography.
+Para possibilitar a tokenização de logotipos, planos de fundo e qualquer outra imagem, criamos tokens de ativos. Os tokens de ativos permitem que você use um URL de imagem como preenchimento para qualquer camada.
 
-#### How to use
+Isso pode ser muito útil em projetos white-label, onde você precisa alterar os ativos, junto a cores e tipografia.
 
-Create an Asset token under the ‘Asset’ category by clicking on the ‘+’ icon.  
-Enter a token name and an asset url.  
+#### Como usar
+
+Crie um token de Ativo na categoria ‘Ativo’ clicando no ícone ‘+’.
+
+Insira um nome de token e um URL de ativo.
 
 import Callout from 'nextra-theme-docs/callout'
 
 <Callout>
-  Currently the image source needs to have its own CORS (Cross-Origin Resource Sharing) validation. Some websites already have that implemented (e.g. Unsplash), but otherwise you can put this behind a CORS proxy. More information on CORS can be found [here](https://medium.com/nodejsmadeeasy/a-simple-cors-proxy-for-javascript-applications-9b36a8d39c51). We'll be adding a CORS proxy in a future release.
+  Atualmente, a fonte da imagem precisa ter sua própria validação CORS (Cross-Origin Resource Sharing). Alguns sites já implementaram isso (por exemplo, Unsplash), mas, caso contrário, você pode colocar isso atrás de um proxy CORS. Mais informações sobre CORS podem ser encontradas [aqui](https://medium.com/nodejsmadeeasy/a-simple-cors-proxy-for-javascript-applications-9b36a8d39c51). Adicionaremos um proxy CORS em uma versão futura.
 </Callout>
 
-After creating the asset token, you can apply the token by selecting any layer. The plugin will fetch the image from the url and replace the image on the layer.
+Depois de criar o token de ativo, você pode aplicar o token selecionando em qualquer camada. O plug-in buscará a imagem da url e substituirá a imagem na camada.
 
 ---
 

pages/available-tokens/available-tokens.pt-br.md

@@ -8,7 +8,7 @@ Os grupos de tokens disponíveis até o momento são:
 | :---------------------- | :------------------------- | :-------------------------------------------- | :--------------------------------------------------- | ---- |
 | Sizing                  | Tamanho                    | Width, height                                 | Largura, altura                                      | `sizing` |
 | Spacing                 | Espaçamentos               | Auto-Layout (Gap, padding)                    | Auto-Layout (Gap, padding)                           | `spacing` |
-| Color                   | Cores                      | Fill, border (right click)                    | Preenchimento, borda (Clique direito)                | `color` |
+| Color                   | Cores                      |  Styles and Layers: Fill, borderColor (right click)                    | Estilos e Camadas: Preenchimento, borda (Clique direito)                | `color` |
 | Border radius           | Arredondamento das bordas  | All corners, individual                       | Todas as bordas, individual                          | `borderRadius` |
 | Border width            | Largura das bordas         | Border width: All, Top, Right, Bottom, Left (right click) | Largura da borda: todos, cima, direita, baixo, esquerda| |
 | Box Shadow              | Sombras                    | Styles and Layers: (one or many, drop/inner)  | Estilos e camadas (um ou vários, externo/interno)    | `boxShadow` |
@@ -22,5 +22,8 @@ Os grupos de tokens disponíveis até o momento são:
 | TextCase                | Caso do texto              | Text layers                                   | Camadas de texto                                     | `textCase` |
 | TextDecoration          | Decoração do texto         | Text Layers                                   | Camadas de texto                                     | `textDecoration` |
 | Typography compositions | Composição de Tipografia   | Text layers, styles                           | Camadas de texto, estilos                            | `typography` |
+| Assets                  | Ativos                     | Layers                                        | Camadas                                              | `asset` |
 | Composition             | Composição                 | All available tokens                          | Todos os tokens disponíveis                          | `composition` |
+| Dimension               | Dimensão                   | Layers, other tokens                          | Camadas, outros tokens                               | `dimension` |
+| Border                  | Borda                      | Layers                                        | Camadas                                              | `border` |
 

pages/available-tokens/border-radius-tokens.pt-br.mdx

@@ -1,34 +1,30 @@
-# Border Radius Tokens
+# Tokens de Borda: Raio (Border Radius)
+Os tokens de raio oferecem a possibilidade de definir valores para o raio da borda. Você pode criar um token de valor único ou definir vários raios de borda em um token.
 
-Radius tokens give you the possibility to define values for your border radius. You can either create a single value token or define multiple border radii in a token.
+#### Como usar
+Crie um token de raio de borda na categoria `Border radius` clicando no ícone `+`.
 
-#### How to use
-Create a Border radius token under the `Border radius` category by clicking on the `+` icon.  
-Enter a name for your token and the value for your border radius.
+Insira um nome para seu token e o valor para o raio da borda.
 
-Once selected, apply by either left-clicking (all values will use this token) or right-click to specify which part you want to target (`All`, `Top Right`, `Top Left`, `Bottom Right` or `Bottom Left`).
+Uma vez selecionado, aplique clicando com o botão esquerdo (todos os valores usarão este token) ou clique com o botão direito para especificar qual parte você deseja selecionar (`All`, `Top Right`, `Top Left`, `Bottom Right` ou `Bottom Left`).
 
-### Single / Multiple values
-To save a lot of time, we introduced the multi-value radius tokens. This allows you to specify border radius for individual corners with one token. You are able to define one, two, three or four values, just like CSS.
+### Valores únicos / múltiplos
+Para economizar muito tempo, introduzimos os tokens de raio de vários valores. Isso permite que você especifique o raio da borda para cantos individuais com um token. Você pode definir um, dois, três ou quatro valores, assim como o CSS.
 
-**Single value (like today)**  
-Clicking this on radii will apply to all corners (like today)  
-Clicking this on spacing will apply to the gap property (like today)  
+**Valor único (como hoje)**  
+Isso se aplicará a todos os cantos (como hoje)
 ```10px```
 
-**Two values**  
-Clicking this on radii will apply top-left-and-bottom-right | top-right-and-bottom-left  
-Clicking this on spacing will apply top-and-bottom | left-and-right  
+**Dois valores**  
+Isso se aplica top-left-and-bottom-right | top-right-and-bottom-left  
 ```10px 5px```
 
-**Three values**  
-Clicking this on radii will apply top-left | top-right-and-bottom-left | bottom-right  
-Clicking this on spacing will apply top | right-and-left | bottom  
+**Três valores**  
+Isso se aplica top-left | top-right-and-bottom-left | bottom-right  
 ```2px 4px 2px```
 
-**Four values**  
-Clicking this on radii will apply top-left | top-right | bottom-right | bottom-left  
-Clicking this on spacing will apply top | right | bottom | left  
+**Quatro valores**  
+Isso se aplica top-left | top-right | bottom-right | bottom-left  
 ```1px 0 3px 4px```
 
 ---

pages/available-tokens/border-tokens.pt-br.mdx

@@ -1,6 +1,10 @@
-# Border tokens
+# Tokens de Bordas (Border Tokens)
 
-You can create Border tokens to define border styles. The token must contain the following properties:
-- Color: the color of the border
-- Width: the width or thickness of the border. Can be defined either unitless or with a unit such as px or rem.
-- Style: the border style. Currently solid and dashed is supported.
+Você pode criar tokens de borda para definir estilos de borda. O token deve conter as seguintes propriedades:
+- Cor: a cor da borda;
+- Largura: a largura ou espessura da borda. Pode ser definido sem unidade ou com uma unidade como px ou rem;
+- Estilo: o estilo da borda. Atualmente sólidos e tracejados são suportados.
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout>Este token será aplicado sob a propriedade `border`, que foi usada anteriormente por tokens de cor de borda. O plug-in migrará automaticamente quaisquer tokens de cor aplicados mais antigos na propriedade `border` para o novo `borderColor`.</Callout>

pages/available-tokens/border-width-tokens.pt-br.mdx

@@ -1,6 +1,8 @@
-# Border width Tokens
+# Tokens de Borda: Largura (Border Width)
 
-You can create tokens that define the border width of a layer. The value of this token would be a dimension, either unitless or with a unit such as px or rem.
+Você pode criar tokens que definem a largura da borda de uma camada. 
+
+O valor desse token seria uma dimensão, sem unidade ou com uma unidade como `px` ou `rem`.
 
 ```
 {

pages/available-tokens/color-tokens.pt-br.md → pages/available-tokens/color-tokens.pt-br.mdx

@@ -1,4 +1,4 @@
-# Tokens de cor
+# Tokens de cor (Color Tokens)
 
 Os tokens de cor constituem uma grande parte dos tokens do Figma, pois eles estão fortemente integrados aos estilos do Figma, mas oferecem opções que os Estilos (ainda) não oferecem.
 
@@ -33,4 +33,8 @@ A grande vantagem dos gradientes de token é que você pode criá-los com refer
 A opacidade também é suportada, você pode escrever seus gradientes assim: `linear-gradient(45deg, rgba($colors.primary, 0.5) 0%, rgba($colors.primary, 1) 100%)`
 
 ### Limitações
-- Posicionar seu gradiente em uma camada, como você pode fazer no Figma, atualmente não é possível, pois não saberemos onde posicioná-lo, pois armazenamos apenas o grau, não qualquer translação.
+- Posicionar seu gradiente em uma camada, como você pode fazer no Figma, atualmente não é possível, pois não saberemos onde posicioná-lo, pois armazenamos apenas o grau, não qualquer translação.
+
+<Callout emoji="❓">
+Você pode querer aplicar tokens de cor ou texto com o plug-in, em vez de usar o recurso de estilo nativo do Figma. Isso tem uma desvantagem, que é que, quando o estilo não é local (mas em uma biblioteca), o plug-in não pode aplicar esse estilo e retornará ao valor hexadecimal. Para aplicar estilos, precisamos armazenar os IDs de estilo Figma de cada estilo associado. Isso é possível com o recurso Temas!
+</Callout>

pages/available-tokens/dimension-tokens.pt-br.mdx

@@ -1,8 +1,9 @@
-# Dimension tokens
+# Tokens de Dimensão (Dimension tokens)
 
-You can use the Dimension token to define an amount of distance and can be used in a wide range of applications. The dimension token is always bound to a specific unit, either px or rem.
+Você pode usar o token de dimensão para definir uma quantidade de distância e pode ser usado em uma ampla variedade de aplicaçÕes. O token de dimensão está sempre vinculado a uma unidade específica, px ou rem.
+
+Para aplicar um token de dimensão, você pode clicar com o botão direito do mouse no token e selecionar o aplicativo no qual deseja usar a dimensão. Isso pode ser:
 
-To apply a dimension token, you can right click the token and select the application where you want to use the dimension. This can either be:
 - Spacing
 - Sizing
 - Border radius
@@ -13,4 +14,4 @@ To apply a dimension token, you can right click the token and select the applica
 
 import Callout from 'nextra-theme-docs/callout'
 
-<Callout>This token is introduced in order to support the upcoming W3C format: https://second-editors-draft.tr.designtokens.org/format/#dimension</Callout>
+<Callout>Este token é introduzido para suportar o próximo formato W3C: https://second-editors-draft.tr.designtokens.org/format/#dimension</Callout>

pages/available-tokens/opacity-tokens.pt-br.mdx

@@ -1,6 +1,6 @@
-# Opacity tokens
+# Tokens de Opacidade (Opacity tokens)
 
-You can create tokens that define the opacity value of a layer.
+Você pode criar tokens que definem o valor de opacidade de uma camada.
 
 ```
 {

pages/available-tokens/shadow-tokens.pt-br.mdx

@@ -1,8 +1,8 @@
-# Shadow tokens
+# Tokens de Sombra (Shadow tokens)
 
-You can create shadow tokens that define a layer's shadow, or define an Effect style. Those can be either one-level or even multiple levels, just like in Figma or CSS. A big advantage is that you can reuse your other tokens such as colors or dimensions inside this token.
+Você pode criar tokens de sombra que definem a sombra de uma camada ou definir um estilo de efeito. Esses podem ser de um nível ou mesmo de vários níveis, assim como no Figma ou no CSS. Uma grande vantagem é que você pode reutilizar seus outros tokens, como cores ou dimensões dentro desse token.
 
-Each individual shadow can be of type `innerShadow` or `dropShadow`.
+Cada sombra individual pode ser do tipo `innerShadow` ou `dropShadow`.
 
 ```
 {

pages/available-tokens/sizing-tokens.pt-br.mdx

@@ -1,6 +1,6 @@
-# Sizing tokens
+# Tokens de Tamanho (Sizing tokens)
 
-You can create tokens that define the width, height (or both values) of a layer. One thing to keep in mind is that in Figma you cannot alter the width of a layer inside an instance, not even plugins can do that.
+Você pode criar tokens que definem a largura, altura (ou ambos os valores) de uma camada. Uma coisa a ter em mente é que no Figma você não pode alterar a largura de uma camada dentro de uma instância, nem mesmo os plugins podem fazer isso.
 
 ```
 {

pages/available-tokens/spacing-tokens.pt-br.mdx

@@ -0,0 +1,59 @@
+# Tokens de Espaçamento (Spacing Tokens)
+
+Os tokens de espaçamento oferecem a capacidade de definir valores para `Auto Layout` que você pode reutilizar. 
+
+Depois de aplicar um token de espaçamento a uma camada, ele será atualizado sempre que você alterar esse token, portanto, qualquer camada que contenha uma referência a `{spacing.container}` será atualizada quando você atualizar esse token específico.
+
+#### Como usar
+
+Para fazer os tokens de espaçamento funcionarem, comece criando tokens na categoria Espaçamento.
+
+Em seguida, selecione ou crie uma camada `Auto Layout` (não funcionará em nenhum outro tipo de camada!)
+
+Depois de selecionado, aplique os tokens de espaçamento clicando com o botão esquerdo (todos os valores usarão esse token) ou clique com o botão direito do mouse para especificar qual parte do layout automático você deseja segmentar (`Gap`, `All`, `Top`, `Right `, `Bottom`, `Left`)
+
+---
+
+import ReactPlayer from 'react-player'
+
+<ReactPlayer
+  muted
+  width="100%"
+  height="auto"
+  loop
+  playing
+  controls
+  url="/uhrCSTbr5Q.mp4"
+/>
+
+### Tokens de espaçamento de vários valores
+
+Para economizar muito tempo, introduzimos os tokens de espaçamento de vários valores. Isso permite que você especifique o espaçamento apenas para o preenchimento horizontal ou vertical. Você pode definir um, dois, três ou quatro valores, assim como o CSS.
+
+**Single value (like today)**<br/>
+Isso se aplicará à propriedade gap (como hoje)<br/>
+```10px```
+
+**Two values**<br/>
+Isso se aplica top-and-bottom | left-and-right<br/>
+```10px 5px```
+
+**Three values**<br/>
+Isso se aplica top | right-and-left | bottom<br/>
+```2px 4px 2px```
+
+**Four values**<br/>
+Isso se aplica top | right | bottom | left<br/>
+```1px 0 3px 4px```
+
+---
+
+<ReactPlayer
+  muted
+  width="100%"
+  height="auto"
+  loop
+  playing
+  controls
+  url="/multi-value-spacing-tokens.mp4"
+/>